/* ==========================================================================
   SICOM Expert - folha de estilo unica (escrita a mao, sem build de front-end)
   Identidade sobria: azul institucional sobre cinzas claros.
   Organizacao:
     1) tokens (claro + escuro)
     2) base
     3) layout
     4) componentes
     5) tabelas
     6) telas
     7) formularios densos (indice lateral, secoes recolhiveis, progresso)
     8) responsividade
     9) preferencias do sistema (movimento reduzido, contraste)
    10) impressao
   Regras de ouro respeitadas: nenhum gradiente decorativo, sombra leve,
   nenhuma informacao essencial exclusiva de hover.
   ========================================================================== */

/* ------------------------------------------------------- 1. tokens claros */
:root {
  color-scheme: light dark;

  /* paleta bruta (mantida para compatibilidade com regras existentes) */
  --azul-900: #0b2545;
  --azul-800: #123a63;
  --azul-700: #17518c;
  --azul-600: #1c66b0;
  --azul-100: #e8f0f9;
  --azul-050: #f4f8fc;
  --cinza-900: #1f2933;
  --cinza-700: #46545f;
  --cinza-500: #6b7a88;
  --cinza-300: #c9d2da;
  --cinza-200: #e2e8ee;
  --cinza-100: #f0f3f6;
  --branco: #ffffff;
  --verde: #1d7a4d;
  --verde-claro: #e6f4ec;
  --ambar: #9a6400;
  --ambar-claro: #fdf3e0;
  --vermelho: #b3261e;
  --vermelho-claro: #fdecea;

  /* tokens semanticos (o tema escuro sobrescreve apenas estes) */
  --fundo-pagina: var(--cinza-100);
  --superficie: var(--branco);
  --superficie-alt: var(--cinza-100);
  --superficie-suave: #e8f0f9;
  --borda: var(--cinza-200);
  --borda-forte: var(--cinza-300);
  --texto: #1b2735;
  --texto-medio: #3f4d5c;
  /* 5,4:1 sobre branco: "nota"/"ajuda" tambem precisa passar em AA */
  --texto-fraco: #404d58;
  --link: var(--azul-700);
  --link-forte: var(--azul-900);
  --foco: var(--azul-600);
  --acao: #14477a;
  --acao-hover: #0f3a66;
  --acao-texto: var(--branco);
  --sucesso: #0f5533;
  --sucesso-fundo: var(--verde-claro);
  --atencao: #6f4700;
  --atencao-fundo: var(--ambar-claro);
  --perigo: #9e1b14;
  --perigo-fundo: var(--vermelho-claro);
  --perigo-borda: #e9a9a3;
  --info: var(--azul-800);
  --info-fundo: var(--azul-100);
  --neutro: #3d4a53;
  --neutro-fundo: var(--cinza-200);
  --topo-fundo: var(--azul-900);
  --topo-texto: var(--branco);
  --topo-texto-suave: #c3d6ec;
  --linha-hover: var(--azul-050);
  --decorativo: var(--azul-100);

  --raio: 6px;
  --sombra: 0 1px 3px rgba(16, 42, 67, .12);
  --largura-max: 1500px;
  --altura-ancora: 1rem;
}

/* ------------------------------------------------------- 1b. tema escuro */
/* Monitor ruim / sala clara: quem pede tema escuro no sistema recebe o
   sistema escuro. Todos os pares texto/fundo abaixo passam em AA (>= 4,5:1);
   os valores foram conferidos par a par (ver docs/AUDITORIA-UX.md). */
@media (prefers-color-scheme: dark) {
  :root {
    --fundo-pagina: #111720;
    --superficie: #1a2029;
    --superficie-alt: #232b36;
    --superficie-suave: #16304d;
    --borda: #232b36;
    --borda-forte: #2b3440;
    --texto: #e6ebf1;
    --texto-medio: #c3ccd6;
    --texto-fraco: #b0bcc8;
    --link: #8ec5ff;
    --link-forte: #b7dcff;
    --foco: #8ec5ff;

    /* acao: azul institucional mais fechado com texto branco (5,9:1) */
    --acao: #1d5589;
    --acao-hover: #17456f;
    --acao-texto: #ffffff;

    --sucesso: #8ee0b0;
    --sucesso-fundo: #14301f;
    --atencao: #f3ce85;
    --atencao-fundo: #35270a;
    --perigo: #ffb0a8;
    --perigo-fundo: #3a1614;
    --perigo-borda: #6f2721;
    --info: #a8cdf0;
    --info-fundo: #16304d;
    --neutro: #c3ccd6;
    --neutro-fundo: #2b3440;

    --topo-fundo: #0d1420;
    --topo-texto: #ffffff;
    --topo-texto-suave: #b7c8dc;
    --linha-hover: #212a35;
    --decorativo: #24405f;

    /* no escuro a sombra suja: a separacao passa a ser feita por borda */
    --sombra: none;
  }

  code, .mono { background: var(--superficie-alt); }
  .topo__sigla { background: var(--acao); }
  .erro-pagina__codigo { color: #2c3d52; }
  .texto-ia, .ocorrencia, .registro, .bloco-resumo { border-color: var(--borda); }
}

/* ---------------------------------------------------------------- 2. base */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo-pagina);
}

h1 { font-size: 1.5rem; margin: 0 0 .25rem; color: var(--link-forte); }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; color: var(--link-forte); }
h3 { font-size: 1rem; margin: 1rem 0 .35rem; color: var(--link-forte); }
p { margin: .35rem 0; }
a { color: var(--link); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
code, .mono {
  font-family: "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: .86em;
}
code { background: var(--superficie-suave); padding: .05rem .25rem; border-radius: 3px; }

:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 1px;
}

/* alvo de ancora nao pode ficar escondido sob o cabecalho */
:target { scroll-margin-top: var(--altura-ancora); }
[id^="secao-"], [id^="campo_"], [id^="erro_"] { scroll-margin-top: var(--altura-ancora); }

.oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.pular-para-conteudo {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--acao); color: var(--acao-texto); padding: .5rem 1rem;
}
.pular-para-conteudo:focus { left: 0; }

.inline { display: inline; }

/* -------------------------------------------------------------- 3. layout */
.topo {
  display: flex; flex-wrap: wrap; gap: .75rem;
  align-items: center; justify-content: space-between;
  background: var(--topo-fundo); color: var(--topo-texto);
  padding: .6rem 1rem;
}
.topo__marca { display: flex; align-items: center; gap: .6rem; }
.topo__marca strong { display: block; font-size: 1.05rem; }
.topo__marca small { color: var(--topo-texto-suave); }
.topo__sigla {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: var(--raio);
  background: var(--azul-600); font-weight: 700; letter-spacing: .5px;
}
.topo__info { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: .9rem; }
.topo__usuario { color: var(--topo-texto-suave); }
.topo__exercicio { color: var(--topo-texto-suave); }
.topo a { color: var(--topo-texto); }

.layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 1.25rem;
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 1.25rem 1rem 2rem;
  align-items: start;
}
.layout--simples { grid-template-columns: minmax(0, 1fr); }

.lateral {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: .75rem;
  position: sticky; top: 1rem;
}
.lateral ul { list-style: none; margin: 0; padding: 0; }
.lateral a {
  display: block; padding: .5rem .6rem; border-radius: 4px;
  color: var(--texto); border-left: 3px solid transparent;
}
.lateral a:hover { background: var(--superficie-suave); text-decoration: none; }
.lateral a.ativo {
  background: var(--info-fundo); border-left-color: var(--link);
  color: var(--link-forte); font-weight: 600;
}
.lateral__separador { border-top: 1px solid var(--borda); margin: .5rem 0; }
.lateral__nota { font-size: .8rem; color: var(--texto-fraco); margin: .75rem .4rem .2rem; }

.conteudo { min-width: 0; }

.rodape {
  display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between;
  max-width: var(--largura-max); margin: 0 auto; padding: .75rem 1rem 2rem;
  color: var(--texto-fraco); font-size: .8rem;
}
.rodape a { color: var(--link); }

.duas-colunas {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.cabecalho-pagina,
.pagina__cabecalho {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: flex-start;
  margin-bottom: .75rem;
}
.subtitulo { color: var(--texto-medio); max-width: 70ch; }
.secao-titulo { border-bottom: 2px solid var(--decorativo); padding-bottom: .25rem; }
.nota { color: var(--texto-fraco); font-size: .82rem; display: block; }
.nota--erro { color: var(--perigo); }
.ajuda { color: var(--texto-fraco); font-size: .82rem; }
.ajuda--central { text-align: center; }
.trilha { font-size: .82rem; color: var(--texto-fraco); margin: 0 0 .15rem; }

.vazio, .estado-vazio {
  background: var(--superficie); border: 1px dashed var(--borda-forte);
  border-radius: var(--raio); padding: 1rem; color: var(--texto-medio);
}
.estado-vazio__titulo {
  display: block; font-weight: 600; color: var(--link-forte); margin-bottom: .2rem;
}
.estado-vazio__texto { margin: .2rem 0 .5rem; max-width: 70ch; }
.estado-vazio__lista { margin: .3rem 0 .6rem 1.1rem; padding: 0; }
.estado-vazio__acoes { display: flex; flex-wrap: wrap; gap: .4rem; }

.acoes { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.barra-acoes {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1.25rem 0; padding-top: .75rem; border-top: 1px solid var(--borda);
}
.acoes-formulario {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--borda);
}
.acoes-formulario .nota { display: inline; }

/* ---------------------------------------------------------- 4. componentes */
.botao {
  display: inline-block; cursor: pointer;
  border: 1px solid var(--borda-forte); background: var(--superficie);
  color: var(--link-forte); border-radius: var(--raio);
  padding: .45rem .85rem; font-size: .9rem; line-height: 1.2;
  text-decoration: none; font-family: inherit;
}
.botao:hover { background: var(--superficie-suave); text-decoration: none; }
.botao--primario {
  background: var(--acao); border-color: var(--acao); color: var(--acao-texto);
}
.botao--primario:hover { background: var(--acao-hover); border-color: var(--acao-hover); }
.botao--secundario {
  background: var(--info-fundo); border-color: var(--borda-forte); color: var(--info);
}
.botao--secundario:hover { background: var(--superficie-suave); }
.botao--perigo { color: var(--perigo); border-color: var(--perigo-borda); }
.botao--perigo:hover { background: var(--perigo-fundo); }
/* Herda a cor do contexto: no conteudo o texto e' escuro, no topo e' branco.
   (Antes era branco fixo, o que deixava "Editar/Excluir" invisiveis nas
   tabelas de registros.) */
.botao--texto {
  background: transparent; border: 0; color: inherit; padding: .2rem .4rem;
}
.botao--texto:hover { background: rgba(127, 127, 127, .16); }
.topo .botao--texto { color: var(--topo-texto); }
.topo .botao--texto:hover { background: rgba(255, 255, 255, .16); }
.botao--pequeno { padding: .25rem .55rem; font-size: .82rem; }
.botao--largo { width: 100%; }
/* Desabilitado continua legivel: o servidor precisa saber QUAL botao espera */
.botao[disabled], .botao[aria-disabled="true"] {
  background: var(--superficie-alt); border-color: var(--borda);
  color: var(--texto-fraco); cursor: not-allowed;
}
.botao[disabled]:hover { background: var(--superficie-alt); }
.botao--grupo { display: inline-flex; gap: .3rem; }

.selo {
  display: inline-block; padding: .1rem .5rem; border-radius: 999px;
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
.selo--ok { background: var(--sucesso-fundo); color: var(--sucesso); }
.selo--atencao { background: var(--atencao-fundo); color: var(--atencao); }
.selo--erro { background: var(--perigo-fundo); color: var(--perigo); }
.selo--info { background: var(--info-fundo); color: var(--info); }
.selo--neutro { background: var(--neutro-fundo); color: var(--neutro); }
.selo--dev, .selo--homolog { background: var(--atencao-fundo); color: var(--atencao); }
.selo--prod { background: var(--perigo-fundo); color: var(--perigo); }
.selo--chave { background: var(--info-fundo); color: var(--info); }

.etiqueta {
  display: inline-block; background: var(--info-fundo); color: var(--info);
  border-radius: 3px; padding: 0 .35rem; font-size: .75rem;
}
.etiqueta--cond { background: var(--atencao-fundo); color: var(--atencao); }

.avisos { display: grid; gap: .5rem; margin-bottom: .75rem; }
.aviso {
  display: flex; gap: .5rem; align-items: flex-start; justify-content: space-between;
  border-left: 4px solid var(--acao); background: var(--superficie-suave);
  border-radius: var(--raio); padding: .6rem .8rem;
}
.aviso--sucesso { border-left-color: var(--sucesso); background: var(--sucesso-fundo); }
.aviso--erro { border-left-color: var(--perigo); background: var(--perigo-fundo); }
.aviso--aviso { border-left-color: var(--atencao); background: var(--atencao-fundo); }
.aviso--info { border-left-color: var(--acao); }
.aviso ul { margin: .25rem 0 0 1rem; padding: 0; }
.aviso__texto { min-width: 0; }
.aviso__texto p { margin: .2rem 0; }
.aviso__fechar {
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: inherit; opacity: .7;
  padding: 0 .2rem; border-radius: 3px;
}
.aviso__fechar:hover { opacity: 1; }

/* componente de alerta (era usado sem existir no CSS em registros/*) */
.alerta {
  border: 1px solid var(--borda); border-left: 4px solid var(--acao);
  background: var(--superficie); border-radius: var(--raio);
  padding: .6rem .8rem; margin: 0 0 .75rem;
}
.alerta--erro { border-left-color: var(--perigo); background: var(--perigo-fundo); }
.alerta--atencao { border-left-color: var(--atencao); background: var(--atencao-fundo); }
.alerta ul { margin: .25rem 0 0 1.1rem; padding: 0; }
.alerta p { margin: .2rem 0; }

/* bloco generico (usado em registros/form como agrupador) */
.bloco {
  border: 1px solid var(--borda); background: var(--superficie);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: .85rem 1rem 1rem; margin: 0 0 1rem; min-width: 0;
}
.bloco > legend, .bloco > .bloco__titulo {
  font-weight: 700; color: var(--link-forte); padding: 0 .35rem;
}

.cartoes {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.cartoes--compactos { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cartao {
  display: block; background: var(--superficie); border: 1px solid var(--borda);
  border-left: 4px solid var(--acao); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: .75rem .9rem; color: inherit;
}
a.cartao:hover { background: var(--superficie-suave); text-decoration: none; }
.cartao__valor { display: block; font-size: 1.6rem; font-weight: 700; color: var(--link-forte); }
.cartao__titulo { display: block; font-size: .9rem; color: var(--texto-medio); }
.cartao__rotulo { display: block; font-size: .9rem; color: var(--texto-medio); }
.cartao__nota { display: block; font-size: .78rem; color: var(--texto-fraco); }
.cartao--ok { border-left-color: var(--sucesso); }
.cartao--atencao { border-left-color: var(--atencao); }
.cartao--erro { border-left-color: var(--perigo); }
.cartao--info { border-left-color: var(--acao); }
.cartao--neutro { border-left-color: var(--borda-forte); }

/* formularios */
.formulario { display: grid; gap: .85rem; }
.formulario--linha {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .75rem;
}
.formulario--linha .campo { min-width: 150px; }

.campo { display: grid; gap: .2rem; min-width: 0; }
.campo--curto { max-width: 220px; }
.campo--largo { grid-column: 1 / -1; }
.campo label { font-weight: 600; font-size: .88rem; color: var(--link-forte); }
.campo__nome { display: block; font-weight: 400; font-size: .74rem; color: var(--texto-fraco); }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .4rem .5rem; font: inherit; color: var(--texto);
  background: var(--superficie);
  border: 1px solid var(--borda-forte); border-radius: 4px;
}
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-fraco); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  border-color: var(--foco); box-shadow: 0 0 0 3px var(--info-fundo);
}
.campo input:invalid:not(:placeholder-shown) { border-color: var(--perigo); }
/* Campo com erro confirmado pelo servidor (aria-invalid e' a fonte da verdade) */
.campo [aria-invalid="true"] { border-color: var(--perigo); border-width: 2px; }
.campo--erro label { color: var(--perigo); }
.campo__erro {
  display: block; color: var(--perigo); font-size: .82rem; font-weight: 600;
}
.campo__erro::before { content: "⚠ "; }
.entrada--travada, .campo--travado input, .campo input[readonly] {
  background: var(--superficie-alt); color: var(--texto-medio);
}
.campo--travado label { color: var(--texto-medio); }
.obrig { color: var(--perigo); text-decoration: none; font-weight: 700; }
.caixa { display: flex; gap: .4rem; align-items: center; font-weight: 400; }
.caixa input { width: auto; }

.ajuda__meta {
  display: block; font-size: .78rem; color: var(--texto-fraco);
  font-style: normal;
}
.ajuda--vazia { font-style: italic; }

.regra { font-size: .82rem; color: var(--texto-medio); }
.regra summary { cursor: pointer; color: var(--link); }
.regra p { margin: .35rem 0 0; white-space: pre-line; }

.grade {
  display: grid; gap: .85rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.secao-form {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: .85rem 1rem 1rem; margin: 0 0 1rem;
}
.secao-form legend {
  font-weight: 700; color: var(--link-forte); padding: 0 .35rem;
}
.secao-form__descricao { margin-bottom: .6rem; }
.secao-form__campos { border: 0; margin: 0; padding: 0; min-width: 0; }

.filtros {
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: flex-end;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .75rem; margin-bottom: 1rem;
}
.filtros__acoes { display: flex; gap: .4rem; }
.filtros--simples { gap: .4rem; padding: .5rem; }
.filtro {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-end;
}
.filtro label { font-weight: 600; font-size: .85rem; color: var(--link-forte); }
.filtro select, .filtro input {
  padding: .4rem .5rem; font: inherit; color: var(--texto);
  background: var(--superficie); border: 1px solid var(--borda-forte);
  border-radius: 4px;
}

.ancoras { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.ancoras a {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 999px; padding: .2rem .7rem; font-size: .85rem;
}
.ancoras a:hover { background: var(--superficie-suave); text-decoration: none; }

.caixa-estreita {
  max-width: 520px; margin: 2rem auto; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 1.5rem;
}

/* abas HTMX */
.abas { display: block; }
.abas__menu { display: flex; gap: .35rem; flex-wrap: wrap; border-bottom: 2px solid var(--decorativo); }
.aba {
  cursor: pointer; font: inherit; background: transparent;
  border: 1px solid transparent; border-bottom: 0;
  border-radius: 4px 4px 0 0; padding: .45rem .9rem; color: var(--link-forte);
}
.aba:hover { background: var(--superficie-suave); }
.aba--ativa { background: var(--superficie); border-color: var(--borda); font-weight: 700; }
.abas__conteudo {
  background: var(--superficie); border: 1px solid var(--borda);
  border-top: 0; border-radius: 0 0 var(--raio) var(--raio); padding: .9rem;
}
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
[aria-busy="true"] { cursor: progress; }

.extracao { display: grid; gap: .6rem; }
.texto-ia {
  background: var(--superficie-alt); border: 1px solid var(--borda);
  border-radius: 4px; padding: .6rem; white-space: pre-wrap;
  word-break: break-word; max-height: 320px; overflow: auto; font-size: .82rem;
}
.dados { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .2rem .75rem; margin: 0; }
.dados dt { font-weight: 600; color: var(--texto-medio); font-size: .85rem; }
.dados dd { margin: 0; font-size: .85rem; word-break: break-word; }
.lista-limpa { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.lista-limpa li {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .5rem .7rem;
}
.lista-servicos li { display: grid; gap: .15rem; }
.lista-dominio { margin: .3rem 0 0 1rem; padding: 0; font-size: .82rem; }
.bloco-resumo {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .7rem .9rem; margin: .5rem 0;
}
.evidencia { display: block; margin: .1rem 0; color: var(--texto-medio); font-size: .8rem; }

.barra-confianca {
  display: inline-block; width: 60px; height: .5rem; background: var(--neutro-fundo);
  border-radius: 999px; overflow: hidden; vertical-align: middle;
}
.barra-confianca span { display: block; height: 100%; background: var(--acao); }
.confianca { display: inline-flex; align-items: center; gap: .35rem; }
.confianca__texto { font-size: .82rem; color: var(--texto-medio); white-space: nowrap; }

/* progresso de preenchimento (role=progressbar, atualizado pelo app.js) */
.progresso { display: grid; gap: .25rem; margin: 0 0 .6rem; }
.progresso__texto { font-size: .82rem; color: var(--texto-medio); }
.progresso__trilho {
  height: .45rem; background: var(--neutro-fundo); border-radius: 999px;
  overflow: hidden; border: 1px solid var(--borda);
}
.progresso__barra {
  display: block; height: 100%; width: 0; background: var(--acao);
}
.progresso__barra--ok { background: var(--sucesso); }

/* ------------------------------------------------------------- 5. tabelas */
.tabela {
  width: 100%; border-collapse: collapse; background: var(--superficie);
  border: 1px solid var(--borda); border-radius: var(--raio);
  overflow: hidden; margin-bottom: 1rem; font-size: .9rem;
}
.tabela th, .tabela td {
  text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
.tabela thead th { background: var(--superficie-suave); color: var(--link-forte); font-size: .82rem; }
.tabela tbody tr:hover { background: var(--linha-hover); }
.tabela--compacta { font-size: .85rem; }
.tabela--campos td { font-size: .84rem; }
.celula-acoes { white-space: nowrap; }
.celula-acoes form { display: inline; }
.linha--erro { background: var(--perigo-fundo); }
.linha--atencao { background: var(--atencao-fundo); }
.linha--ok { background: var(--sucesso-fundo); }
.linha--evidencia { background: var(--superficie-alt); font-size: .82rem; }
.valor-ia { font-weight: 600; color: var(--link-forte); }
.valor-igual { color: var(--texto-fraco); }
.paginacao { display: flex; gap: .6rem; align-items: center; color: var(--texto-medio); }

/* tabela de conferencia da revisao por IA: a decisao do usuario acontece aqui */
.tabela--comparativa { font-size: .88rem; }
.tabela--comparativa thead th { position: sticky; top: 0; z-index: 1; }
.tabela--comparativa td:nth-child(3) { color: var(--texto-medio); }
.tabela--comparativa td:nth-child(4) {
  background: var(--superficie-suave); font-weight: 600; color: var(--link-forte);
}
.tabela--comparativa .coluna-aceite { width: 3.2rem; text-align: center; }
.tabela--comparativa input[type="checkbox"] { width: 1.1rem; height: 1.1rem; }

/* --------------------------------------------------------------- 6. telas */
.erro-pagina { text-align: center; padding: 2rem 1rem; }
.erro-pagina__codigo { font-size: 3rem; font-weight: 700; color: var(--decorativo); margin: 0; }
.revisao {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 1.25rem; align-items: start;
}
.revisao__direita {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .75rem .9rem; position: sticky; top: 1rem;
}
.ocorrencias { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; }
.ocorrencia {
  background: var(--superficie); border: 1px solid var(--borda);
  border-left: 4px solid var(--atencao); border-radius: var(--raio); padding: .6rem .8rem;
}
.ocorrencia--erro { border-left-color: var(--perigo); }
.ocorrencia__cabecalho { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ocorrencia__mensagem { margin: .25rem 0 0; }
.ocorrencia__onde { font-size: .82rem; color: var(--texto-medio); }
.ocorrencia__corrigir {
  margin: .45rem 0 0; padding: .45rem .6rem;
  background: var(--superficie-alt); border-radius: 4px; font-size: .85rem;
}
.ocorrencia__corrigir strong { color: var(--link-forte); }
.ocorrencia__sem-regra {
  margin: .4rem 0 0; font-size: .83rem; color: var(--texto-medio);
  border-left: 3px solid var(--borda-forte); padding-left: .5rem;
}
.codigo { background: var(--superficie-suave); font-weight: 600; }
.bloco-upload, .bloco-gerar, .arquivo-leiaute, .arquivo-bloco { margin-bottom: 1.5rem; }
.conferencia-csv { margin-top: 1.5rem; }
.registro {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); margin-bottom: .6rem; padding: .5rem .7rem;
}
.registro > summary { cursor: pointer; font-weight: 600; color: var(--link-forte); }
.prazos-licitacao { margin-top: 1.5rem; }

/* catalogo de registros do leiaute (registros/lista.html) */
.registro-catalogo {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); margin-bottom: .5rem; padding: .5rem .7rem;
}
.registro-catalogo > summary { cursor: pointer; font-weight: 600; color: var(--link-forte); }
.lista-registros { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; }
.lista-registros li {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline;
  border-top: 1px solid var(--borda); padding-top: .3rem;
}

/* glossario / ajuda geral (leiaute/index.html) */
.glossario { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.glossario__item {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); padding: .6rem .8rem;
}
.glossario__item dt { font-weight: 700; color: var(--link-forte); font-size: .88rem; }
.glossario__item dd { margin: .15rem 0 0; font-size: .85rem; color: var(--texto-medio); }
.fluxo { margin: .5rem 0 0 1.1rem; padding: 0; }
.fluxo li { margin-bottom: .25rem; }

/* ------------------------------------ 7. formularios densos (40+ campos) */
.form-com-indice {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.indice {
  position: sticky; top: 1rem;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  padding: .7rem .75rem;
}
.indice__titulo {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--texto-fraco); margin: 0 0 .4rem;
}
.indice ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.indice a {
  display: block; padding: .3rem .4rem; border-radius: 4px;
  color: var(--texto); font-size: .86rem; border-left: 3px solid transparent;
}
.indice a:hover { background: var(--superficie-suave); text-decoration: none; }
.indice a[aria-current="true"] {
  background: var(--info-fundo); border-left-color: var(--link); font-weight: 600;
}
.indice__contagem { float: right; color: var(--texto-fraco); font-weight: 400; }
.indice__contagem--pendente { color: var(--atencao); }
.indice__contagem--ok { color: var(--sucesso); }
.indice__ferramentas {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .5rem;
  border-top: 1px solid var(--borda); padding-top: .5rem;
}

.secao-recolhivel {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio); box-shadow: var(--sombra);
  margin: 0 0 1rem; padding: 0;
}
.secao-recolhivel > summary {
  cursor: pointer; padding: .7rem 1rem; display: flex; flex-wrap: wrap;
  gap: .5rem; align-items: center; font-weight: 700; color: var(--link-forte);
  border-radius: var(--raio);
}
.secao-recolhivel > summary:hover { background: var(--superficie-suave); }
.secao-recolhivel > summary::marker { color: var(--link); }
.secao-recolhivel[open] > summary { border-bottom: 1px solid var(--borda); }
.secao-recolhivel__corpo { padding: .75rem 1rem 1rem; }
.secao-recolhivel__nome { flex: 1 1 auto; }
.secao-recolhivel .nota { display: inline; }

/* --------------------------------------------------------- responsividade */
@media (max-width: 1200px) {
  .form-com-indice { grid-template-columns: minmax(0, 1fr); }
  .indice { position: static; }
  .indice ul { display: flex; flex-wrap: wrap; gap: .3rem; }
  .indice a {
    border: 1px solid var(--borda); border-radius: 999px;
    border-left-width: 1px; padding: .2rem .7rem;
  }
  .indice a[aria-current="true"] { border-color: var(--link); }
}

@media (max-width: 1000px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; }
  .duas-colunas, .revisao { grid-template-columns: minmax(0, 1fr); }
  .revisao__direita { position: static; }
}

@media (max-width: 620px) {
  body { font-size: 14px; }
  .topo { gap: .4rem; }
  .cartao__valor { font-size: 1.35rem; }
  .tabela { display: block; overflow-x: auto; white-space: nowrap; }
  .tabela td, .tabela th { white-space: normal; }
  .campo--curto { max-width: none; }
  .tabela--comparativa thead th { position: static; }
}

/* ------------------------------------- 9. preferencias do sistema (SO/a11y) */
/* Quem pediu menos animacao no sistema operacional nao recebe transicao,
   animacao nem rolacao suave. O app.js consulta a mesma media query. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto !important; }
}

/* Quem pediu mais contraste recebe bordas e foco reforcados */
@media (prefers-contrast: more) {
  :root { --borda: var(--borda-forte); }
  .botao, .campo input, .campo select, .campo textarea { border-width: 2px; }
  .nota, .ajuda { color: var(--texto-medio); }
  :focus-visible { outline-width: 4px; }
}

/* ------------------------------------------------------------- 10. impressao */
@media print {
  .lateral, .topo__info, .barra-acoes, .filtros, .acoes, .indice__ferramentas,
  .aviso__fechar { display: none; }
  .layout, .form-com-indice { grid-template-columns: minmax(0, 1fr); }
  .indice { position: static; box-shadow: none; }
  body { background: #fff; color: #000; }
  .secao-recolhivel, .registro, .ocorrencia { break-inside: avoid; }
  .secao-recolhivel > summary { list-style: none; }
  a[href^="/"]::after { content: ""; }
}