/* Ordens de Serviço, Financeiro e PMOC.
   Usa as mesmas variáveis de cor do style.css, então segue o tema escolhido. */

/* Menu com mais itens: mais compacto em telas médias */
@media (max-width: 1180px) {
  .topo nav a {
    padding: 6px 10px;
  }
}

/* ===== Situações (selos) ===== */
.selo-os-aberta,
.selo-fin-aberto,
.selo-visita-pendente {
  color: #b7791f;
}

.selo-os-concluida,
.selo-fin-pago,
.selo-visita-realizada {
  color: var(--cor-secundaria);
}

.selo-os-cancelada,
.selo-fin-atrasado,
.selo-visita-atrasada {
  color: var(--cor-perigo);
}

.positivo {
  color: var(--cor-secundaria);
}

.negativo {
  color: var(--cor-perigo);
}

.botao-concluir {
  background: var(--cor-secundaria);
}

/* ===== Formulário da O.S. e do PMOC ===== */
.formulario-os .secao,
.formulario-pmoc .secao {
  margin-top: 12px;
}

.checklist-os {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--cor-borda);
  border-radius: 10px;
}

.checklist-os legend {
  padding: 0 6px;
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
}

.checklist-itens {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 4px 16px;
  margin-bottom: 10px;
}

.item-check {
  padding: 6px 8px;
  font-size: 0.92rem;
  border-radius: 8px;
}

.item-check:hover {
  background: var(--cor-campo);
}

.item-check input[type="checkbox"] {
  flex: none;
}

.item-check:has(input:checked) {
  color: var(--cor-secundaria) !important;
}

.checklist-novo {
  max-width: 520px;
}

.fotos-os {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.fotos-os figure {
  margin: 0;
  display: grid;
  gap: 4px;
}

.fotos-os img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--cor-borda);
  border-radius: 8px;
}

.total-os {
  align-self: end;
  padding-bottom: 8px;
}

.dialogo .formulario-lancamento .escolha-tipo,
.formulario-lancamento .escolha-tipo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.escolha-tipo .chip-opcao {
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  color: var(--cor-texto) !important;
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
}

.escolha-tipo .chip-opcao input {
  position: static;
  opacity: 1;
  width: 16px;
  height: 16px;
  accent-color: var(--cor-destaque);
}

.escolha-tipo .chip-opcao:has(input:checked) {
  border-color: var(--cor-destaque);
  background: color-mix(in srgb, var(--cor-destaque) 10%, var(--cor-painel));
}

.formulario-lancamento .caixa-visita,
.formulario-pmoc .caixa-visita {
  background: color-mix(in srgb, var(--cor-secundaria) 7%, var(--cor-painel));
  border-color: color-mix(in srgb, var(--cor-secundaria) 30%, var(--cor-borda));
}

.dialogo .formulario-visita .checklist-os,
.dialogo .formulario-lancamento .campo-check {
  grid-column: 1 / -1;
}

.formulario-visita .checklist-itens {
  grid-template-columns: 1fr;
}

/* ===== Financeiro ===== */
.botao-entrada {
  background: var(--cor-secundaria);
}

.botao-saida {
  background: var(--cor-perigo);
}

.navegacao-mes {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 10px 14px;
}

.navegacao-mes h2 {
  margin: 0;
  min-width: 190px;
  font-size: 1.15rem;
  text-align: center;
}

.navegacao-mes .botao-pequeno {
  padding: 4px 12px;
  font-size: 1.1rem;
  text-decoration: none;
  border-radius: 8px;
}

.cartoes-financeiro {
  margin: 0 0 16px;
}

.cartoes-financeiro .cartao strong {
  font-size: 1.5rem;
  white-space: nowrap;
}

.aviso-alerta {
  border-left-color: var(--cor-perigo);
}

.financeiro-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.financeiro-grade .barra-busca select {
  width: auto;
}

.financeiro-lateral {
  display: grid;
  gap: 16px;
}

.financeiro-lateral h2,
.pmoc-grade h2,
.painel-proximas h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.lateral-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.lateral-cabecalho h2 {
  margin: 0 !important;
}

.lateral-cabecalho .botao-pequeno {
  text-decoration: none;
  border-radius: 8px;
}

.tabela-categorias td {
  padding: 6px 4px;
  font-size: 0.9rem;
}

.tabela-categorias .valor span {
  display: block;
  white-space: nowrap;
}

.tabela-financeiro td.valor {
  white-space: nowrap;
  font-weight: 600;
}

@media (min-width: 801px) {
  .tabela-financeiro th,
  .tabela-financeiro td {
    padding: 10px 8px;
  }

  .tabela-financeiro .acoes-celula {
    flex-direction: column;
    align-items: stretch;
    min-width: 116px;
  }

  .tabela-financeiro .acoes-celula .botao-pequeno,
  .tabela-financeiro .acoes-celula .botao-perigo {
    width: 100%;
    text-align: center;
  }

  .tabela-financeiro .nome-linha {
    white-space: normal;
    min-width: 200px;
  }
}

main:has(.financeiro-grade) {
  max-width: 1400px;
}

@media (max-width: 1000px) {
  .financeiro-grade {
    grid-template-columns: 1fr;
  }
}

/* ===== PMOC ===== */
.nota-topo {
  margin: -6px 0 16px;
}

.painel-proximas {
  margin-bottom: 16px;
}

.progresso {
  display: block;
  width: 110px;
  height: 6px;
  margin-bottom: 4px;
  overflow: hidden;
  background: var(--cor-campo);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
}

.progresso span {
  display: block;
  height: 100%;
  background: var(--cor-secundaria);
}

.pmoc-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.dados-lista {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 14px;
  margin: 0;
  font-size: 0.92rem;
}

.dados-lista dt {
  color: var(--cor-texto-suave);
}

.dados-lista dd {
  margin: 0;
}

.acoes-rodape {
  justify-content: flex-end;
  margin-top: 16px;
}

.acoes-rodape form {
  margin: 0;
}

@media (max-width: 800px) {
  .pmoc-grade {
    grid-template-columns: 1fr;
  }

  .dados-lista {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .dados-lista dd {
    margin-bottom: 8px;
  }

  .navegacao-mes h2 {
    min-width: 0;
    flex: 1;
  }

  .cartoes-financeiro .cartao strong {
    font-size: 1.2rem;
  }
}

/* ===== Aba ADM ===== */
.secao-admin {
  margin-bottom: 16px;
}

.celula-meta {
  min-width: 200px;
}

.progresso-meta {
  display: inline-block;
  vertical-align: middle;
  width: 120px;
  margin: 0 6px 0 0;
}

.progresso-meta span {
  background: var(--cor-destaque);
}

.progresso-meta.batida span {
  background: var(--cor-secundaria);
}

.conversao {
  font-size: 0.9rem;
  color: var(--cor-texto-suave);
}

.selo-perfil-admin {
  color: var(--cor-destaque);
  border-color: color-mix(in srgb, var(--cor-destaque) 40%, transparent);
  background: color-mix(in srgb, var(--cor-destaque) 12%, transparent);
}

.secao-admin .resumo-lista .selo {
  flex: none;
  min-width: 104px;
  text-align: center;
}