/* ============================================================
   Particularidades DP — Orteconte Contabilidade
   ------------------------------------------------------------
   Organizado em seções. Os componentes repetidos (botão, etiqueta,
   cartão de número, tabela, aviso) são classes únicas, usadas por
   todas as telas. NENHUM HEX AQUI: só variáveis de tokens.css.
   ============================================================ */

@import url("tokens.css");

/* ============================================================
   1. BASE
   ============================================================ */
* { box-sizing: border-box; }

/* O ATRIBUTO `hidden` TEM DE VALER SEMPRE.
   O navegador aplica `[hidden] { display: none }` com peso de seletor de
   atributo, e QUALQUER regra de classe ganha dele. Isso já mordeu duas
   vezes neste projeto: na Fase C as regras extras da convenção continuavam
   na tela porque `.ponto { display: flex }` vencia o `hidden`; e no login o
   `#acesso`, com `display: grid`, seguia cobrindo a tela inteira depois de
   entrar — ficava tudo branco até alguém dar F5.
   A regra abaixo, com `!important`, encerra a discussão: marcou `hidden`,
   sumiu. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.5;
  color: var(--ortec-text);
  background: var(--ortec-surface-alt);
}

h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.25; color: var(--ortec-heading); }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
a { color: var(--ortec-primary); }

/* Números sempre tabulares: colunas de valores precisam alinhar. */
.valor, td.num, .numero .valor, .tabular { font-variant-numeric: tabular-nums; }

.mono { font-family: var(--mono); font-size: 12.5px; }
.silencioso { color: var(--ortec-text-muted); }
.pequeno { font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ============================================================
   2. ESTRUTURA — barra lateral, conteúdo, cabeçalho de página
   ============================================================ */
.app { display: grid; grid-template-columns: var(--largura-lateral) 1fr; min-height: 100vh; }

.lateral {
  background: var(--ortec-surface);
  border-right: 1px solid var(--ortec-border);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  z-index: 30;
}

.marca-topo { display: flex; align-items: center; gap: 10px; padding: 16px 16px 14px;
         border-bottom: 1px solid var(--ortec-border); }
.marca-topo img { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.marca-topo .nomes { min-width: 0; }
.marca-topo strong { display: block; font-size: 15px; letter-spacing: -.2px; color: var(--ortec-heading); }
.marca-topo span { display: block; font-size: 11px; color: var(--ortec-text-muted);
              text-transform: uppercase; letter-spacing: .6px; }

.menu { padding: 10px 8px; flex: 1; overflow-y: auto; }
.menu .grupo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
               color: var(--ortec-text-muted); font-weight: 700;
               padding: 12px 10px 5px; }
.menu .grupo:first-child { padding-top: 2px; }
.menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; margin-bottom: 1px;
  border-radius: var(--raio);
  color: var(--ortec-text); text-decoration: none; font-weight: 500;
}
.menu a:hover { background: var(--ortec-surface-alt); }
.menu a.ativo { background: var(--ortec-primary-soft); color: var(--ortec-primary);
                font-weight: 600; }
.menu .conta {
  font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: var(--raio-pilula);
  background: var(--ortec-label-bg); color: var(--ortec-text-muted);
  font-variant-numeric: tabular-nums;
}
.menu a.ativo .conta { background: var(--ortec-surface); color: var(--ortec-primary); }

.rodape-lateral { padding: 12px; border-top: 1px solid var(--ortec-border); }
.rodape-lateral label { display: block; font-size: 11px; color: var(--ortec-text-muted);
                        margin-bottom: 4px; text-transform: uppercase; letter-spacing: .5px; }

.principal { padding: 22px 26px 60px; max-width: var(--largura-conteudo); min-width: 0; }

/* barra do topo e botão ☰: só no celular */
.barra-celular { display: none; }
.fundo-menu { display: none; }

.topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.topo .sub { color: var(--ortec-text-muted); font-size: 13px; margin-top: 3px; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
   3. BOTÕES — um conjunto só para todas as telas
   primário (preenchido) · secundário (borda) · terciário (texto)
   · destrutivo (vermelho)
   ============================================================ */
button, .botao {
  font: inherit; font-weight: 500; line-height: 1.4;
  padding: 7px 14px; min-height: 34px;
  border-radius: var(--raio);
  border: 1px solid var(--ortec-border-strong);
  background: var(--ortec-surface);
  color: var(--ortec-text); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap;
}
button:hover, .botao:hover { background: var(--ortec-surface-alt);
                             border-color: var(--ortec-text-muted); }

button.primario, .botao.primario {
  background: var(--ortec-primary); border-color: var(--ortec-primary);
  color: var(--ortec-surface); font-weight: 600;
}
button.primario:hover, .botao.primario:hover {
  background: var(--ortec-primary-strong); border-color: var(--ortec-primary-strong);
}

/* Botão miúdo: o que cabe ao lado de uma etiqueta, dentro de uma linha
   de lista, sem engordá-la. Secundário — contorno, não preenchido. */
button.miudo, .botao.miudo {
  padding: 2px 10px; min-height: 26px; font-size: 12px; font-weight: 600;
}

button.discreto, .botao.discreto {
  border-color: transparent; background: transparent;
  color: var(--ortec-primary); padding: 6px 9px; min-height: 30px;
}
button.discreto:hover, .botao.discreto:hover {
  background: var(--ortec-primary-soft); border-color: transparent;
}

/* destrutivo: o vermelho aqui é intencional e exclusivo */
button.perigo, .botao.perigo {
  color: var(--estado-erro); border-color: var(--estado-erro); background: transparent;
}
button.perigo:hover, .botao.perigo:hover { background: var(--estado-erro-bg); }

button:disabled, .botao[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
button[data-carregando] { opacity: .7; pointer-events: none; }

/* ============================================================
   4. CAMPOS
   ============================================================ */
input, select, textarea {
  font: inherit; width: 100%;
  padding: 7px 10px; border-radius: var(--raio);
  border: 1px solid var(--ortec-border-strong);
  background: var(--ortec-surface); color: var(--ortec-text);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--ortec-focus); outline-offset: -1px;
  border-color: var(--ortec-focus);
}
textarea { min-height: 74px; resize: vertical; }
label.campo { display: block; margin-bottom: 12px; }
label.campo > span {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--ortec-teal); margin-bottom: 4px;
}
label.campo .dica { font-weight: 400; color: var(--ortec-text-muted); }

.filtros {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  background: var(--ortec-surface); border: 1px solid var(--ortec-border);
  border-radius: var(--raio); padding: 12px; margin-bottom: 16px;
}
.filtros label.campo { margin: 0; }
.filtros .cresce { flex: 1 1 260px; }

/* Largura fixa nos seletores. Sem isto cada um nasce do tamanho da sua
   maior opção, e "Comércio das cidades sem sindicato (Fecomércio ×
   Fecomércio MG) 2026" empurrava os vizinhos para a linha de baixo. */
.filtros label.campo select { width: 160px; max-width: 100%; }
.filtros label.campo.medio select { width: 232px; }

/* Caixa de marcar na linha de filtros: o rótulo fica AO LADO da caixa,
   e não acima como nos demais campos, senão a marca escorrega do texto. */
.filtros label.caixa-marcar {
  display: flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 2px; cursor: pointer; white-space: nowrap;
}
.filtros label.caixa-marcar > span {
  display: inline; margin: 0; color: var(--ortec-text);
  font-size: 13px; font-weight: 500;
}
.filtros label.caixa-marcar input {
  width: 16px; height: 16px; margin: 0; padding: 0;
  accent-color: var(--ortec-teal); cursor: pointer;
}

/* ============================================================
   5. CARTÕES E NÚMEROS
   ============================================================ */
.cartao {
  background: var(--ortec-surface); border: 1px solid var(--ortec-border);
  border-radius: var(--raio); box-shadow: var(--sombra);
}
.grade-numeros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 20px;
}
.numero { padding: 14px 16px; }
.numero .rotulo { font-size: 11px; color: var(--ortec-teal); font-weight: 600;
                  text-transform: uppercase; letter-spacing: .5px; }
.numero .valor { font-size: 27px; font-weight: 650; letter-spacing: -.5px;
                 margin-top: 2px; color: var(--ortec-heading); }
.numero .nota { font-size: 12px; color: var(--ortec-text-muted); }
/* destaque = exige ação, não = erro */
.numero.destaque { background: var(--ortec-primary-soft); border-color: var(--ortec-info-border); }
.numero.destaque .valor { color: var(--ortec-primary); }

/* KPI que leva à lista filtrada: um indicador que não abre a lista
   correspondente obriga o operador a refazer o filtro na mão. */
a.kpi { display: block; text-decoration: none; color: inherit; }
a.kpi:hover { border-color: var(--ortec-primary); box-shadow: var(--sombra); }
a.kpi:hover .rotulo { color: var(--ortec-primary); }

.cabecalho-cartao {
  display: flex; align-items: center; justify-content: space-between; gap: 8px 12px;
  flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--ortec-border);
}
/* sem isto o título não encolhe e empurra o "Ver todos" para fora da
   tela no celular: um filho de flex não passa do seu conteúdo mínimo */
.cabecalho-cartao > * { min-width: 0; }

/* Barras proporcionais dos alertas por tipo: o tamanho relativo é lido
   antes do número, e cada linha leva à lista daquele tipo. */
.lista-barras { padding: 6px 0; }
/* minmax(0, 1fr), e não 1fr: numa grade, 1fr nunca encolhe abaixo do
   conteúdo, então "Sem convenção vinculada" numa linha só estourava o
   cartão em 23 px e punha a página inteira a rolar para o lado. */
.linha-barra {
  display: grid; grid-template-columns: minmax(0, 1fr) 110px 62px; align-items: center;
  gap: 12px; padding: 9px 16px; text-decoration: none; color: inherit;
}
.linha-barra .rot { min-width: 0; overflow-wrap: anywhere; }
.linha-barra:hover { background: var(--ortec-primary-soft); }
.linha-barra .rot { font-weight: 500; }
.linha-barra .trilho {
  height: 7px; border-radius: 4px; background: var(--ortec-surface-alt);
  border: 1px solid var(--ortec-border); overflow: hidden;
}
.linha-barra .preenche { display: block; height: 100%; background: var(--ortec-primary); }
.linha-barra .qtd { text-align: right; font-weight: 600;
                    font-variant-numeric: tabular-nums; color: var(--ortec-heading); }
@media (max-width: 560px) {
  .linha-barra { grid-template-columns: minmax(0, 1fr) 56px; }
  .linha-barra .trilho { display: none; }
}

/* ============================================================
   6. TABELAS
   ============================================================ */
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--ortec-surface); font-weight: 600;
  padding: 9px 12px; background: var(--ortec-teal);
  position: sticky; top: 0; z-index: 1;
}
thead th:first-child { border-top-left-radius: var(--raio); }
thead th:last-child { border-top-right-radius: var(--raio); }
tbody td { padding: 10px 12px; border-bottom: 1px solid var(--ortec-border);
           vertical-align: top; }
tbody tr:nth-child(even) { background: var(--ortec-surface-alt); }
tbody tr:last-child td { border-bottom: none; }
tbody tr.clicavel { cursor: pointer; }
tbody tr.clicavel:hover { background: var(--ortec-primary-soft); }
th.num { text-align: right; }
td.num { text-align: right; }
.rolagem { overflow-x: auto; }

/* rodapé de paginação */
.paginacao {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-top: 1px solid var(--ortec-border);
  font-size: 12.5px; color: var(--ortec-text-muted); flex-wrap: wrap;
}
.paginacao .pag-botoes { display: flex; gap: 6px; }

/* ============================================================
   7. ETIQUETAS — um conjunto só
   situação · criticidade (neutra, com nível) · pendência ·
   sistema de folha · origem do valor
   ============================================================ */
/* A etiqueta é SEMPRE compacta, numa linha, com cerca de 20 px de altura.
   As declarações abaixo são deliberadamente redundantes: antes as caixas
   de aviso se chamavam .aviso e .marca, os mesmos nomes dos modificadores
   de etiqueta, e um <span class="tag aviso"> herdava padding de 11px,
   barra lateral de 4px e margem — virava um retângulo alto que esticava a
   linha inteira da tabela. As caixas foram renomeadas (.caixa-importante,
   .caixa-nota, .marca-topo) e isto aqui é o cinto de segurança: nenhum
   modificador de .tag consegue mais mudar a caixa do rótulo. */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 600; line-height: 1.5;
  padding: 1px 8px; border-radius: var(--raio-pilula);
  background: var(--ortec-label-bg); color: var(--ortec-text-muted);
  white-space: nowrap;
  /* travas: só cor e fundo variam entre os modificadores.
     A borda é transparente, e não zero: com `border: 0` a etiqueta de
     contorno ficava 2 px mais alta que as vizinhas, e uma fila de
     cidades com um "Regra ampla" no meio saía desalinhada. */
  margin: 0; border: 1px solid transparent; min-height: 0; width: auto;
  vertical-align: middle; box-shadow: none;
}
/* situação */
.tag.ok { background: var(--estado-ok-bg); color: var(--estado-ok); }
.tag.aviso { background: var(--estado-aviso-bg); color: var(--estado-aviso); }
.tag.erro { background: var(--estado-erro-bg); color: var(--estado-erro); }
/* institucional */
.tag.marca { background: var(--ortec-primary-soft); color: var(--ortec-primary); }
.tag.contorno { background: transparent; border: 1px solid var(--ortec-border-strong);
                color: var(--ortec-text-muted); }

/* CRITICIDADE: classificação, não erro. Etiqueta neutra + nível em pontos.
   O vermelho fica reservado para crítico PENDENTE (.tag.critico-pendente). */
.tag.nivel { background: var(--ortec-label-bg); color: var(--ortec-text-muted);
             font-weight: 600; }
.tag.nivel .pontos { letter-spacing: 1px; color: var(--ortec-primary); }
.tag.nivel.n-media .pontos { color: var(--ortec-teal); }
.tag.nivel.n-baixa .pontos { color: var(--ortec-marker); }
.tag.critico-pendente { background: var(--estado-erro-bg); color: var(--estado-erro); }

/* ============================================================
   8. AVISOS — "Importante" (âmbar) e "Nota" (azul)
   ============================================================ */
.caixa-importante, .caixa-nota {
  padding: 11px 14px 11px 13px; border-radius: var(--raio); margin-bottom: 14px;
  font-size: 13px; border: 1px solid; border-left-width: 4px;
}
.caixa-importante {
  background: var(--ortec-warning-bg); border-color: var(--ortec-warning-border);
  border-left-color: var(--ortec-warning-accent); color: var(--ortec-warning-text);
}
.caixa-importante strong { color: var(--ortec-warning-title); }
.caixa-nota {
  background: var(--ortec-info-bg); border-color: var(--ortec-info-border);
  border-left-color: var(--ortec-info-accent); color: var(--ortec-info-text);
}
.caixa-nota strong { color: var(--ortec-info-accent); }

/* .aviso-padrao mantém o nome antigo como apelido de .caixa-nota.
   O negrito fica DENTRO da frase: a regra antiga tinha display:block e
   jogava "sugerida" e "Confirmada" em linhas soltas, quebrando o texto
   no meio (defeito D3). */
.caixa-nota.apelido, .aviso-padrao {
  padding: 11px 14px 11px 13px; border-radius: var(--raio); margin-bottom: 14px;
  font-size: 13px; border: 1px solid var(--ortec-info-border);
  border-left: 4px solid var(--ortec-info-accent);
  background: var(--ortec-info-bg); color: var(--ortec-info-text);
}
.caixa-importante strong, .caixa-nota strong { display: inline; }
.aviso-padrao strong { display: inline; color: var(--ortec-info-accent); }
.caixa-importante p, .caixa-nota p { margin: 6px 0 0; }

/* ============================================================
   9. ESTADOS VAZIO E DE CARREGAMENTO
   ============================================================ */
.vazio-estado { padding: 44px 20px; text-align: center; color: var(--ortec-text-muted); }
.vazio-estado strong { display: block; color: var(--ortec-heading); font-size: 15px; }
.vazio-estado p { margin: 6px 0 0; }
.vazio-estado .acoes { justify-content: center; margin-top: 14px; }

/* ---------- faixa de "o sistema foi atualizado" ---------- */
/* Embaixo e por cima de tudo, mas sem travar a tela: dá para continuar
   trabalhando e recarregar na hora que der. */
.faixa-versao {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--ortec-heading); color: var(--ortec-surface);
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18);
  font-size: 13px;
}
.faixa-versao span { flex: 1 1 260px; }
.faixa-versao button { flex: none; }

@media (max-width: 560px) {
  .faixa-versao { padding: 10px 12px; }
  .faixa-versao span { flex-basis: 100%; }
}

/* ---------- estado do backup, no Painel, só para o admin ---------- */
/* Discreta quando está tudo certo: uma linha de texto secundário que não
   disputa com os números. Vermelha só quando a cópia externa envelheceu ou
   não saiu da VM — aviso que aparece todo dia vira paisagem. */
.aviso-backup {
  margin: -8px 0 16px; padding: 8px 12px;
  border-radius: var(--raio);
  background: var(--ortec-surface-alt, var(--ortec-surface));
  border: 1px solid var(--ortec-border);
  color: var(--ortec-text-muted);
  font-size: 13px;
}
.aviso-backup strong { color: var(--ortec-heading); font-weight: 600; }
.aviso-backup.ruim {
  background: var(--estado-erro-bg);
  border-color: var(--estado-erro);
  color: var(--estado-erro);
}
.aviso-backup.ruim strong { color: var(--estado-erro); }

.esqueleto { padding: 18px; }
.esqueleto .barra {
  height: 13px; border-radius: 4px; margin-bottom: 10px;
  background: linear-gradient(90deg, var(--ortec-surface-alt) 25%,
              var(--ortec-label-bg) 37%, var(--ortec-surface-alt) 63%);
  background-size: 400% 100%;
  animation: brilho 1.3s ease-in-out infinite;
}
.esqueleto .barra.curta { width: 45%; }
.esqueleto .barra.media { width: 72%; }
@keyframes brilho { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ============================================================
   10. FICHA DA EMPRESA
   ============================================================ */
.cabecalho-empresa { padding: 16px 18px; margin-bottom: 16px; }
.cabecalho-empresa .linha1 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.chips { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.chip { min-width: 108px; }
.chip .rot { font-size: 11px; color: var(--ortec-teal); font-weight: 600;
             text-transform: uppercase; letter-spacing: .4px; }
.chip .val { font-weight: 600; font-size: 13.5px; }
.chip .val.vazio { color: var(--ortec-text-muted); font-weight: 400; font-style: italic; }

/* Lista "rótulo: valor" dos cartões da ficha. Só entra o que está
   preenchido — a ficha antiga repetia "não informado" dez vezes e o
   que havia de verdade sumia no meio dos vazios. */
.dados { margin: 0; padding: 14px 16px; display: grid; gap: 11px; }
.dados .dado { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; }
.dados dt {
  font-size: 12px; font-weight: 600; color: var(--ortec-teal);
  padding-top: 1px;
}
.dados dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .dados .dado { grid-template-columns: 1fr; gap: 1px; }
}

/* Convenção de categoria diferenciada na ficha: ela vale para algumas
   funções da folha, não para a empresa inteira. Fica abaixo da
   principal, com quantas pessoas alcança e quais funções. */
.diferenciada { padding: 6px 0; }
.diferenciada + .diferenciada { border-top: 1px solid var(--ortec-border); }
.diferenciada > a { font-weight: 500; margin-right: 6px; }
.tres-linhas {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; overflow-wrap: anywhere;
}

/* Conjunto de etiquetas: municípios da base territorial, CNAEs do
   escopo. Quebra em várias linhas em vez de esticar o cartão.
   `align-items: center` com a etiqueta em `nowrap`: "Alto Caparao"
   quebrava dentro da própria pílula e ficava com o dobro da altura das
   vizinhas, deixando a coluna Alcance irregular. */
.etiquetas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; align-items: center; }
.etiquetas > .tag { white-space: nowrap; }

/* A base territorial de uma convenção chega a 750 cidades: fechada por
   padrão, com um campo de filtro, porque procurar com os olhos numa
   lista dessas não é procurar. */
.lista-municipios > summary {
  cursor: pointer; font-weight: 600; color: var(--ortec-primary);
  list-style: none; display: inline-flex; align-items: center; gap: 5px;
}
.lista-municipios > summary::before { content: '▸'; font-size: 11px; }
.lista-municipios[open] > summary::before { content: '▾'; }
.lista-municipios > summary::-webkit-details-marker { display: none; }
.lista-municipios .busca-municipio { margin: 8px 0 6px; max-width: 260px; }
.lista-municipios .etiquetas { max-height: 220px; overflow-y: auto; }

/* Texto livre guardado no banco com quebras de linha: sem isto o
   `observacoes` de uma convenção virava um parágrafo corrido só. */
.texto-corrido { padding: 16px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ------------------------------------------------------------
   ABAS — um componente só
   ------------------------------------------------------------
   A ficha da empresa tinha um alternador de botões e o detalhe da
   convenção usava os chips de filtro para a mesma função. Dois desenhos
   para uma coisa só. Aqui a aba ativa é sublinhada; os chips voltaram a
   significar apenas "filtro". */
.abas {
  display: flex; gap: 4px; flex-wrap: wrap; align-items: stretch;
  border-bottom: 1px solid var(--ortec-border); margin-bottom: 16px;
}
.abas > * {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--ortec-text-muted);
  padding: 9px 14px; min-height: 38px; border-radius: 0; text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.abas > *:hover { color: var(--ortec-text); background: var(--ortec-surface-alt); }
.abas > .ativa {
  color: var(--ortec-primary); font-weight: 600;
  border-bottom-color: var(--ortec-primary);
}
.abas > * .conta {
  font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--ortec-text-muted);
}
.abas > .ativa .conta { color: var(--ortec-primary); }
/* a faixa de etiquetas que acompanha as abas da ficha */
.linha-abas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.linha-abas .abas { margin-bottom: 0; flex: 1 1 auto; }

/* ------------------------------------------------------------
   TEXTO COMPRIDO COM "VER MAIS"
   ------------------------------------------------------------
   O campo do sindicato às vezes guarda um parágrafo inteiro. */
.texto-mais > details { display: inline; }
.texto-mais > details > summary {
  display: inline; list-style: none; cursor: pointer;
  color: var(--ortec-primary); font-size: 12.5px; font-weight: 600;
  margin-left: 5px; white-space: nowrap;
}
.texto-mais > details > summary::-webkit-details-marker { display: none; }
.texto-mais > details > summary::before { content: '… '; color: var(--ortec-text-muted); }
.texto-mais > details[open] > summary { display: none; }
.texto-mais > details > span { display: inline; }
.texto-mais > details[open] > span::before { content: ' '; }

/* Nota recolhível: o parágrafo de explicação que importa na primeira
   visita e estorva em todas as outras. */
.caixa-nota > summary { cursor: pointer; }
.caixa-nota > summary::marker { color: var(--ortec-text-muted); }

/* Menu ⋯ da linha da tabela. Uma ação em botão, o resto aqui dentro:
   dois botões lado a lado em toda linha disputavam a atenção e nenhum
   dizia qual era o passo seguinte. */
.menu-linha { display: inline-block; position: relative; }
.menu-linha > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: var(--raio);
  border: 1px solid var(--ortec-border-strong); background: var(--ortec-surface);
  color: var(--ortec-text-muted); font-weight: 700; line-height: 1;
}
.menu-linha > summary::-webkit-details-marker { display: none; }
.menu-linha > summary:hover { background: var(--ortec-surface-alt); }
.menu-linha .opcoes {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 20;
  display: grid; min-width: 150px; padding: 4px;
  background: var(--ortec-surface); border: 1px solid var(--ortec-border);
  border-radius: var(--raio); box-shadow: var(--sombra);
}
.menu-linha .opcoes button {
  justify-content: flex-start; border: 0; background: transparent;
  padding: 7px 10px; min-height: 32px; font-size: 13px; white-space: nowrap;
}
.menu-linha .opcoes button:hover { background: var(--ortec-primary-soft); }
/* no celular a linha vira cartão: o menu abre embaixo, em fluxo */
@media (max-width: 900px) {
  .menu-linha .opcoes { position: static; box-shadow: none; margin-top: 6px; }
}

/* Chips de filtro da tela de Alertas. Nome próprio, e não `.chip`, que já
   é o bloco rótulo/valor da ficha da empresa — foi uma colisão dessas que
   deixou as etiquetas com 43 px de altura na fase 2. */
.chips-filtro { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip-filtro {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--raio-pilula);
  border: 1px solid var(--ortec-border-strong);
  background: var(--ortec-surface); color: var(--ortec-text);
  font-size: 13px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.chip-filtro b {
  font-variant-numeric: tabular-nums; font-weight: 700;
  color: var(--ortec-text-muted);
}
.chip-filtro:hover { background: var(--ortec-surface-alt); border-color: var(--ortec-text-muted); }
.chip-filtro.ativo {
  background: var(--ortec-primary); border-color: var(--ortec-primary);
  color: var(--ortec-surface); font-weight: 600;
}
.chip-filtro.ativo b { color: var(--ortec-surface); }

/* Botão de ação dentro da tabela: menor que o botão de formulário,
   para não engordar a linha. */
td > .botao { padding: 4px 11px; min-height: 28px; font-size: 12.5px; }
/* a coluna do botão ocupa só o que o botão precisa; o resto da largura
   fica para o texto do alerta, que é onde a informação está */
.col-acao { width: 1%; white-space: nowrap; }

/* Coluna estreita de número: encolhe até o conteúdo, mas o CABEÇALHO
   não quebra. "Em uso" virava "EM" e "USO" em duas linhas, e o
   cabeçalho da tabela ficava mais alto que as próprias linhas. */
.col-estreita { width: 1%; white-space: nowrap; }
thead th.col-estreita { white-space: nowrap; }

/* Coluna da empresa no Histórico: larga o bastante para o nome ser
   lido, e cortada em duas linhas para a linha não crescer sem fim.
   O nome inteiro fica no `title`. */
.col-empresa { min-width: 190px; }
.duas-linhas {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; overflow-wrap: anywhere;
}

/* De → para: o que saiu, riscado em cinza; o que vale, embaixo.
   Cortados em três linhas porque o valor de uma cláusula pode ser um
   parágrafo inteiro — um deles ocupava meia tela sozinho e empurrava o
   resto da trilha para fora. O texto completo fica no `title`. */
.valor-antigo, .valor-novo {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
  overflow: hidden; overflow-wrap: anywhere;
}
.valor-antigo { color: var(--ortec-text-muted); text-decoration: line-through; }

/* ------------------------------------------------------------
   TABELA QUE VIRA CARTÃO NO CELULAR
   ------------------------------------------------------------
   Com sete colunas em 390 px a tabela rolava para o lado e cada linha
   passava de 250 px de altura: cabiam três empresas na tela, e as
   colunas da direita ficavam fora do campo de visão.
   Aqui cada linha vira um cartão: o nome em cima e os demais dados
   como "rótulo: valor". O rótulo vem do atributo `data-rot` de cada
   célula, porque o cabeçalho da tabela deixa de ser mostrado. */
@media (max-width: 900px) {
  .tabela-cartoes thead { display: none; }
  .tabela-cartoes, .tabela-cartoes tbody, .tabela-cartoes td { display: block; width: auto; }
  /* flex só para poder tirar o nome da ordem das colunas e levá-lo ao
     topo do cartão: na tabela ele vem depois de severidade e empregados */
  .tabela-cartoes tr {
    display: flex; flex-direction: column;
    border: 1px solid var(--ortec-border); border-radius: var(--raio);
    background: var(--ortec-surface); padding: 12px 14px; margin-bottom: 10px;
  }
  .tabela-cartoes td.celula-titulo { order: -1; }
  .tabela-cartoes tr:nth-child(even) { background: var(--ortec-surface); }
  .tabela-cartoes td {
    padding: 2px 0; border: 0;
    text-align: left; white-space: normal; width: auto;
    /* sem isto um valor longo sem espaços — o nome de uma convenção na
       coluna "De → para" do Histórico — estica o cartão e põe a página
       inteira a rolar para o lado */
    min-width: 0; overflow-wrap: anywhere;
  }
  /* a célula do nome abre o cartão, em destaque e sem rótulo */
  .tabela-cartoes td.celula-titulo { font-size: 15px; margin-bottom: 6px; }
  .tabela-cartoes td[data-rot]:not(:empty)::before {
    content: attr(data-rot) ': ';
    color: var(--ortec-text-muted); font-size: 12px; font-weight: 600;
  }
  /* célula vazia não vira uma linha com rótulo e nada depois */
  .tabela-cartoes td:empty { display: none; }
  .tabela-cartoes .col-acao { width: auto; margin-top: 8px; }
  /* sem a tabela larga não há mais o que rolar para o lado */
  .cartao.rolagem:has(.tabela-cartoes) { overflow-x: visible; }
}

.barra-modo { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.alternador { display: inline-flex; border: 1px solid var(--ortec-border-strong);
              border-radius: var(--raio); overflow: hidden; }
.alternador button {
  border: none; border-radius: 0; padding: 6px 13px; min-height: 32px;
  background: var(--ortec-surface); color: var(--ortec-text-muted);
}
.alternador button + button { border-left: 1px solid var(--ortec-border); }
.alternador button.ativo { background: var(--ortec-primary); color: var(--ortec-surface);
                           font-weight: 600; }

.bloco { margin-bottom: 14px; }
.bloco > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; cursor: pointer; list-style: none;
  font-weight: 600; border-radius: var(--raio); color: var(--ortec-heading);
  background: var(--ortec-surface); border: 1px solid var(--ortec-border);
}
.bloco[open] > summary { border-radius: var(--raio) var(--raio) 0 0; border-bottom: none; }
.bloco > summary::-webkit-details-marker { display: none; }
.bloco > summary::before { content: "▸"; color: var(--ortec-text-muted); font-size: 11px; }
.bloco[open] > summary::before { content: "▾"; }
.bloco > summary .conta-bloco { margin-left: auto; display: flex; gap: 6px; }
.corpo-bloco {
  border: 1px solid var(--ortec-border); border-top: none;
  border-radius: 0 0 var(--raio) var(--raio);
  background: var(--ortec-surface);
}

.item {
  display: grid; grid-template-columns: 1fr auto;
  gap: 6px 14px; padding: 11px 14px 12px;
  border-top: 1px solid var(--ortec-border);
  border-left: 3px solid transparent;
  cursor: pointer;
}
.item:first-child { border-top: none; }
.item:hover { background: var(--ortec-surface-alt); }
/* a barra lateral diz de qual camada o valor veio. O FUNDO CONTINUA
   BRANCO mesmo quando pendente: linha inteira pintada de âmbar fazia a
   ficha parecer um erro (O3). */
.item.empresa   { border-left-color: var(--ortec-primary); }
.item.convencao { border-left-color: var(--estado-ok); }
.item.pendente  { border-left-color: var(--ortec-warning-accent); }
.item.critico   { border-left-color: var(--estado-erro); }
.item .nome { font-weight: 600; }
.item .valor { color: var(--ortec-text); margin-top: 1px; }
.item .valor.padrao { color: var(--ortec-text-muted); }
.item .meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 5px;
              font-size: 12px; color: var(--ortec-text-muted); }
.item .direita { display: flex; gap: 6px; align-items: flex-start; flex-wrap: wrap;
                 justify-content: flex-end; }

/* ============================================================
   11. GAVETA LATERAL
   ============================================================ */
.fundo-gaveta {
  position: fixed; inset: 0; background: var(--ortec-overlay);
  z-index: 40; display: flex; justify-content: flex-end;
}
.gaveta {
  width: min(560px, 100%); background: var(--ortec-surface);
  height: 100%; overflow-y: auto; box-shadow: var(--sombra-flutuante);
  display: flex; flex-direction: column;
}
.gaveta header {
  padding: 16px 20px; border-bottom: 1px solid var(--ortec-border);
  position: sticky; top: 0; background: var(--ortec-surface); z-index: 1;
}
.gaveta .conteudo { padding: 18px 20px; flex: 1; }
.gaveta footer {
  padding: 12px 20px; border-top: 1px solid var(--ortec-border);
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
  position: sticky; bottom: 0; background: var(--ortec-surface);
}
/* tamanho normal, não miúdo: são os dois botões que fecham o trabalho */
.gaveta footer button { min-height: 38px; padding: 8px 18px; }

/* Seções da gaveta: cada bloco de campos com título e uma linha que o
   separa do seguinte. Antes eram h3 soltos com margem na mão. */
.secao-gaveta { padding-bottom: 18px; margin-bottom: 18px;
                border-bottom: 1px solid var(--ortec-border); }
.secao-gaveta:last-of-type { border-bottom: 0; margin-bottom: 0; }
.secao-gaveta > h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--ortec-teal); margin: 0 0 12px;
}

/* ZONA DE PERIGO. Fica no fim, fechada, e com a borda vermelha que
   nenhum outro bloco tem — a exclusão apaga a empresa e todas as suas
   particularidades, e estava ao lado de "Cancelar" e "Salvar". */
.zona-perigo {
  margin-top: 24px; padding: 14px 16px;
  border: 1px solid var(--estado-erro); border-radius: var(--raio);
  background: var(--estado-erro-bg);
}
.zona-perigo > h3 {
  margin: 0 0 6px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--estado-erro);
}
.zona-perigo > p { margin: 0 0 10px; font-size: 12.5px; color: var(--ortec-text); }
.zona-perigo > details > summary {
  cursor: pointer; font-size: 13px; font-weight: 600; color: var(--estado-erro);
}
.zona-perigo > details > .campo { margin: 12px 0 10px; }
.zona-perigo > details > .campo > span { color: var(--ortec-text); font-weight: 500; }
.duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }

/* Um item de grade não encolhe abaixo do seu conteúdo mínimo a não ser
   que se diga. Sem isto, a tabela de Rubricas (382 px de mínimo) inflava
   a coluna para 384 dentro de uma área de 362 e a PÁGINA inteira passava
   a rolar para o lado — o `overflow-x: auto` da `.rolagem` nunca chegava
   a agir, porque não havia o que encolher. */
.duas-colunas > *, .pilha > *, .grade-numeros > * { min-width: 0; }
.rolagem { max-width: 100%; }

/* As colunas do painel têm conteúdo de alturas diferentes: `start` faz
   cada cartão parar onde o conteúdo acaba, em vez de esticar e deixar
   meio cartão em branco. A `.pilha` empilha os dois cartões curtos. */
.colunas-painel { align-items: start; gap: 16px; }
.pilha { display: grid; gap: 16px; align-content: start; }

/* Fechamento do mês: fica entre os números do topo e as duas colunas, com
   a largura toda, porque é o número que o gestor olha primeiro no mês. */
.cartao-fechamento { margin-bottom: 16px; }
/* no celular a tabela vira cartões com `display` próprio, que venceria o
   `hidden` - o mesmo tropeço de `.ponto[hidden]` */
.cartao-fechamento tr[hidden] { display: none; }
.resumo-fechamento {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 4px 16px 14px;
}
.resumo-fechamento .grande {
  font-size: 1.6rem;
  color: var(--ortec-heading);
  font-variant-numeric: tabular-nums;
}
.resumo-fechamento .barra-progresso { min-width: 160px; }

/* ============================================================
   12. AUDITORIA
   ============================================================ */
.ponto {
  border-left: 3px solid var(--ortec-marker); padding: 12px 14px;
  border-bottom: 1px solid var(--ortec-border);
}
.ponto:last-child { border-bottom: none; }
.ponto.alta  { border-left-color: var(--estado-erro); }
.ponto.media { border-left-color: var(--ortec-warning-accent); }
.ponto .cab { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ponto .regra { margin-top: 5px; }
.ponto .rodape { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px;
                 font-size: 12.5px; color: var(--ortec-text-muted); }
.marcador { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 3px;
            border: 1.5px solid var(--ortec-border-strong); border-radius: 3px; }

/* ============================================================
   13. NOTIFICAÇÃO (#recado)
   Fica REALMENTE oculto quando vazio: translateY sozinho mantinha a
   pílula na tela em todas as páginas (defeito D2).
   ============================================================ */
#recado {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%) translateY(14px);
  background: var(--ortec-heading); color: var(--ortec-surface);
  padding: 10px 18px; border-radius: var(--raio-pilula); font-weight: 500;
  box-shadow: var(--sombra-flutuante); z-index: 100;
  transition: transform .22s ease, opacity .22s ease, visibility .22s;
  visibility: hidden; opacity: 0;
}
#recado.visivel { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(0); }
#recado.erro { background: var(--estado-erro); }

/* ============================================================
   14. CELULAR (≤ 900 px)
   A barra lateral vira painel por cima do conteúdo, aberto pelo ☰.
   Antes virava uma faixa horizontal que saía da tela (defeito D1).
   ============================================================ */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }

  /* barra fixa no topo: ☰ à esquerda, logotipo e nomes ao lado */
  .barra-celular {
    display: flex; align-items: center; gap: 10px;
    position: fixed; top: 0; left: 0; right: 0; z-index: 36;
    height: 54px; padding: 0 12px;
    background: var(--ortec-surface);
    border-bottom: 1px solid var(--ortec-border);
  }
  .barra-celular img { width: 32px; height: 32px; object-fit: contain; flex: 0 0 auto; }
  .barra-celular .nomes { min-width: 0; line-height: 1.15; }
  .barra-celular strong { display: block; font-size: 14px; color: var(--ortec-heading); }
  .barra-celular span { display: block; font-size: 10.5px; color: var(--ortec-text-muted);
                        text-transform: uppercase; letter-spacing: .5px; }
  .abre-menu {
    width: 40px; height: 40px; padding: 0; flex: 0 0 auto;
    font-size: 18px; background: var(--ortec-surface);
    border-color: var(--ortec-border);
  }

  /* o painel desliza ABAIXO da barra, então nunca cobre o logotipo
     nem é coberto pelo botão */
  .lateral {
    position: fixed; top: 54px; left: 0; bottom: 0; height: calc(100dvh - 54px);
    width: min(290px, 86vw);
    transform: translateX(-102%); transition: transform .22s ease;
    box-shadow: var(--sombra-flutuante);
  }
  .lateral.aberta { transform: translateX(0); }
  /* a marca já está na barra do topo; dentro do painel ela seria repetição */
  .lateral .marca-topo { display: none; }
  /* o véu começa abaixo da barra, para a marca continuar legível */
  .fundo-menu {
    position: fixed; top: 54px; left: 0; right: 0; bottom: 0;
    background: var(--ortec-overlay); z-index: 29;
  }
  .fundo-menu.aberto { display: block; }

  .principal { padding: 68px 14px 50px; }
  .duas-colunas { grid-template-columns: 1fr; }
  .grade-numeros { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ============================================================
   15. IMPRESSÃO
   ============================================================ */
/* O cabeçalho da Orteconte só existe no papel. */
.cabecalho-impressao { display: none; }

@media print {
  /* Fora do papel: tudo que é comando ou navegação. A gaveta e o véu
     entram na lista porque, com a gaveta aberta, o Ctrl+P imprimia o
     formulário por cima do roteiro — e o véu escuro cobria a página
     inteira de cinza. */
  .lateral, .acoes, .filtros, .barra-modo, .abre-menu, .paginacao,
  .barra-celular, .abas, .chips-filtro, .topo .pequeno,
  .gaveta, .fundo-gaveta, .fundo-menu, #gaveta, #recado,
  button, .botao, .menu-linha, .zona-perigo { display: none !important; }
  .app { display: block; }
  .principal { padding: 0; max-width: none; }
  .cartao, .corpo-bloco { box-shadow: none; }
  .ponto { break-inside: avoid; }
  thead th { color: var(--ortec-text); background: var(--ortec-surface-alt); }
  body { background: var(--ortec-surface); font-size: 11pt; }

  /* o roteiro sai do sistema e circula em papel: tem de dizer de quem
     é, de qual empresa e de quando */
  .cabecalho-impressao {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 20px; padding-bottom: 12px; margin-bottom: 18px;
    border-bottom: 2px solid var(--ortec-primary);
  }
  /* o logotipo é quase quadrado: limitar pela ALTURA, senão ele come
     um quinto da primeira página */
  .cabecalho-impressao img { height: 42px; width: auto; }
  .cabecalho-impressao .direita { text-align: right; font-size: 10pt; line-height: 1.5; }
  .cabecalho-impressao .direita strong { display: block; font-size: 12pt; color: var(--ortec-heading); }
  .cabecalho-impressao + .topo h1 { display: none; }   /* o título já está no cabeçalho */
  .cabecalho-impressao + .topo .sub { margin-bottom: 10px; }

  /* no papel a tabela é tabela: o modo cartão é coisa de tela estreita */
  .tabela-cartoes thead { display: table-header-group; }
  .tabela-cartoes, .tabela-cartoes tbody,
  .tabela-cartoes tr, .tabela-cartoes td { display: revert; }
  .tabela-cartoes td[data-rot]::before { content: none; }

  a[href]::after { content: none; }   /* sem colar a URL ao lado do texto */
  @page { margin: 14mm; }
}

/* ============================================================
   16. FOCO VISÍVEL
   Linhas e itens têm role=button e tabindex por acessibilidade; sem
   indicação de foco isso seria pior do que não serem focáveis.
   ============================================================ */
tbody tr.clicavel:focus-visible,
.item:focus-visible,
.bloco > summary:focus-visible {
  outline: 2px solid var(--ortec-focus);
  outline-offset: -2px;
}
a:focus-visible, button:focus-visible, .botao:focus-visible,
select:focus-visible, input:focus-visible {
  outline: 2px solid var(--ortec-focus);
  outline-offset: 2px;
}

/* ============================================================
   17. FECHAMENTO DA FOLHA
   ============================================================ */

/* O link de volta fica ACIMA do nome da empresa, não ao lado: quem chega
   aqui veio da carteira e volta para ela o tempo todo. */
.voltar {
  display: inline-block;
  margin-bottom: 4px;
  font-size: .85rem;
  color: var(--ortec-primary);
  text-decoration: none;
}
.voltar:hover { text-decoration: underline; }

/* Botão que parece link: usado em "ver mais", "+ Anotar" e "mostrar outras". */
.ligacao {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: .85rem;
  color: var(--ortec-primary);
  cursor: pointer;
  text-decoration: none;
}
.ligacao:hover { text-decoration: underline; }

/* ---------- faixa dos quatro prazos ---------- */
.faixa-prazos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.cartao.prazo { padding: 12px 14px; margin: 0; }
.rotulo-prazo {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ortec-teal);
  margin-bottom: 4px;
}
.valor-prazo {
  font-size: .95rem;
  font-weight: 600;
  color: var(--ortec-text);
  line-height: 1.3;
  margin-bottom: 4px;
}
/* "difere do padrão" é o aviso que o operador precisa ver de relance */
.prazo .difere { color: var(--ortec-warning-title); font-weight: 600; }

/* ---------- caixa âmbar de atenção ---------- */
.cartao.atencao {
  background: var(--ortec-warning-bg);
  border-color: var(--ortec-warning-border);
  border-left: 4px solid var(--ortec-warning-accent);
}
.cartao.atencao h2 { color: var(--ortec-warning-title); }

/* ---------- lista de pontos conferíveis ---------- */
.lista-pontos { list-style: none; margin: 0; padding: 0; }
.ponto {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--ortec-border);
}
.ponto:first-child { border-top: 0; }

/* O ATRIBUTO `hidden` NAO BASTA AQUI.
   O navegador aplica `[hidden] { display: none }` com peso de seletor de
   atributo, e `.ponto { display: flex }` ganha dele. As regras escondidas
   atras de "mostrar as outras N" continuavam na tela: a AFL exibia as 18 em
   vez de 8. Esta linha e o conserto. */
.ponto[hidden] { display: none; }

/* Linha de consulta: sem caixa de marcar, o corpo ocupa a largura toda. */
.ponto.consulta { padding-left: 14px; }
.corpo-ponto { flex: 1; min-width: 0; }
.titulo-ponto {
  font-weight: 600;
  color: var(--ortec-text);
  line-height: 1.35;
}
.ponto .pequeno { color: var(--ortec-text-muted); line-height: 1.4; }
/* Resumo e "ver cláusula" na MESMA linha: o link à direita, sem ocupar uma
   linha só para ele. Resumo longo quebra e o link fica no topo, à direita;
   o `nowrap` impede o link de partir em "ver / cláusula". */
.linha-resumo {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.linha-resumo > span { flex: 1; min-width: 0; }
.linha-resumo .ver-clausula { flex: none; white-space: nowrap; }
/* A regra geral de formulário dá `width: 100%` a todo input. Numa caixa de
   marcar dentro de um flex isso faz a caixa comer a linha inteira e espremer
   o texto contra a borda — foi exatamente o que aconteceu. Largura explícita
   e `flex: none` prendem a caixa no tamanho dela. */
.ponto input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex: none;
  accent-color: var(--ortec-primary);
}

/* Conferido fica apagado, não riscado: riscar sugere "cancelado", e o
   ponto continua valendo — ele só já foi olhado. */
.ponto.feito .titulo-ponto { color: var(--ortec-text-muted); font-weight: 500; }
.ponto.feito { opacity: .68; }

/* ---------- as duas colunas ---------- */
.duas-colunas-fechamento {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.duas-colunas-fechamento > .cartao { margin: 0; }
.rodape-cartao { padding: 10px 14px; border-top: 1px solid var(--ortec-border); }

/* ---------- "só quando acontecer" ---------- */
.eventual { border-top: 1px solid var(--ortec-border); }
.eventual > summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: .9rem;
}
.eventual > summary:hover { background: var(--ortec-surface-alt); }
.eventual[open] > summary { border-bottom: 1px solid var(--ortec-border); }

/* ---------- faixa de folha conferida ---------- */
.faixa-conferida {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 16px;
  border-radius: var(--raio);
  background: var(--estado-ok-bg);
  border: 1px solid var(--estado-ok);
  color: var(--estado-ok);
  font-size: .9rem;
}
.faixa-conferida strong { color: var(--estado-ok); }

/* ---------- rodapé fixo da conferência ---------- */
.rodape-fechamento {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding: 12px 16px;
  background: var(--ortec-surface);
  border: 1px solid var(--ortec-border);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.progresso-conferencia {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .9rem;
  flex: 1;
  min-width: 220px;
}
.barra-progresso {
  flex: 1;
  max-width: 260px;
  height: 8px;
  border-radius: var(--raio-pilula);
  background: var(--ortec-label-bg);
  overflow: hidden;
}
/* o rótulo curto do botão de concluir só aparece no celular */
.rotulo-curto { display: none; }

.barra-progresso > div {
  height: 100%;
  background: var(--ortec-primary);
  transition: width .18s ease;
}

/* ---------- anotações antigas, vindas de importação ---------- */
/* Fica no fim da coluna e com fundo diferente, porque NAO e trabalho desta
   folha: e cadastro velho esperando alguem dizer se ainda vale. */
.bloco-anotacoes {
  border-top: 1px solid var(--ortec-border);
  background: var(--ortec-surface-alt);
}
.cabecalho-anotacoes {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px 6px;
  font-size: .85rem;
}
.ponto.anotacao { align-items: center; }
.acoes-anotacao { display: flex; gap: 6px; flex: none; }
.acoes-anotacao button { font-size: .78rem; padding: 4px 10px; }
.acoes-anotacao .confirmar { border-color: var(--estado-ok); color: var(--estado-ok); }
.acoes-anotacao .descartar { color: var(--ortec-text-muted); }

/* etiqueta verde da cláusula */
.tag.verde { background: var(--estado-ok-bg); color: var(--estado-ok); }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .faixa-prazos { grid-template-columns: repeat(2, 1fr); }
  .duas-colunas-fechamento { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .faixa-prazos { grid-template-columns: 1fr; }
  /* UMA LINHA, nao duas: o rodape e fixo e come altura util de uma tela de
     844 px. Progresso a esquerda, botao menor a direita. */
  .rodape-fechamento { padding: 8px 10px; gap: 10px; flex-wrap: nowrap; }
  .progresso-conferencia { min-width: 0; font-size: .8rem; gap: 8px; }
  .progresso-conferencia > span { white-space: nowrap; }
  .barra-progresso { height: 6px; min-width: 40px; }
  .rodape-fechamento .primario {
    flex: none;
    font-size: .8rem;
    padding: 7px 10px;
    white-space: nowrap;
  }
  .acoes-anotacao button { padding: 4px 8px; }
  .rotulo-longo { display: none; }
  .rotulo-curto { display: inline; }
}

/* ---------- impressão ---------- */
@media print {
  .nao-imprimir { display: none !important; }
  .rodape-fechamento { position: static; box-shadow: none; }
  /* a caixa marcada tem de sair no papel, para o roteiro impresso valer */
  .ponto input[type="checkbox"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ponto.feito { opacity: 1; }
  .eventual { display: block; }
  .eventual > summary { list-style: none; }
  /* no papel não há como abrir um <details>: sai tudo aberto */
  .eventual > ul { display: block !important; }
  /* no papel a cláusula sai aberta: não há como clicar em "ver cláusula" */
  .clausula-inteira[hidden] { display: block !important; }
  .faixa-prazos { grid-template-columns: repeat(4, 1fr); }
  .duas-colunas-fechamento { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   18. ACESSO — LOGIN E CRIAR SENHA
   ============================================================ */

/* Enquanto não há sessão, a aplicação inteira some. Não é só estética:
   deixar a estrutura montada atrás do login daria a impressão de que há
   algo ali para alcançar. */
body.sem-sessao > .app,
body.sem-sessao > .barra-celular,
body.sem-sessao > .fundo-menu { display: none; }

#acesso {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--ortec-surface-alt);
  overflow-y: auto;
  z-index: 50;
}

.cartao-acesso {
  width: 100%;
  max-width: 380px;
  padding: 28px 24px;
  background: var(--ortec-surface);
  border: 1px solid var(--ortec-border);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.cartao-acesso h1 {
  margin: 18px 0 6px;
  font-size: 1.25rem;
  color: var(--ortec-heading);
}
.cartao-acesso p { margin: 0 0 16px; line-height: 1.45; }
.cartao-acesso .campo { margin-bottom: 12px; }
.cartao-acesso .primario { width: 100%; margin-top: 4px; }

.marca-acesso { display: flex; align-items: center; gap: 10px; }
.marca-acesso strong {
  display: block;
  color: var(--ortec-heading);
  line-height: 1.1;
}
.marca-acesso span {
  display: block;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ortec-text-muted);
}

.erro-acesso {
  margin: 4px 0 12px;
  padding: 8px 10px;
  border-radius: var(--raio);
  background: var(--estado-erro-bg);
  color: var(--estado-erro);
  font-size: .85rem;
}

.regras-senha {
  margin: 0 0 14px;
  padding-left: 18px;
  font-size: .82rem;
  color: var(--ortec-text-muted);
  line-height: 1.6;
}

/* ---------- rodapé do menu: quem está logado ---------- */
.rodape-lateral .eu { margin-bottom: 6px; }
.rodape-lateral .eu strong {
  display: block;
  font-size: .9rem;
  color: var(--ortec-text);
  line-height: 1.2;
}
.rodape-lateral .eu span { display: block; }

@media (max-width: 420px) {
  .cartao-acesso { padding: 22px 16px; }
}

/* ---------- bloco de acesso na gaveta do operador ---------- */
.bloco-acesso {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid var(--ortec-border);
  border-radius: var(--raio);
  background: var(--ortec-surface-alt);
}
.bloco-acesso > strong { display: block; margin-bottom: 4px; }
.acoes-acesso { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* A senha provisória aparece UMA vez. Fundo claro e fonte de largura fixa
   porque ela vai ser lida em voz alta ou copiada à mão. */
.senha-mostrada {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 10px;
  border: 1px dashed var(--ortec-border-strong);
  border-radius: var(--raio);
  background: var(--ortec-surface);
}
.senha-mostrada code {
  font-family: var(--mono);
  font-size: 1.05rem;
  letter-spacing: .06em;
  color: var(--ortec-heading);
  user-select: all;
}
.senha-mostrada .pequeno { flex-basis: 100%; color: var(--ortec-text-muted); }

/* ---------- o que cada papel vê ----------
   Esconder é conforto; quem barra é o servidor (ver
   ferramentas/testar-permissoes.mjs). Uma tela sem o botão evita o clique
   que terminaria em "você não pode" — não substitui a tranca. */
body:not([data-papel="admin"]) .so-admin { display: none; }

/* Operador e leitura não administram gente. */
body[data-papel="operador"] a[data-rota="operadores"],
body[data-papel="leitura"] a[data-rota="operadores"] { display: none; }