/* GERADO a partir de LicitScore-Marca/design-system por ferramentas/sincronizar_design_system.py.
   Não edite aqui: mude no design system e rode o script de novo. */
/* LicitScore · design system · componentes
   Camada de componentes. Depende de tokens.css (importe-o antes).
   Sem framework e sem passo de build: a interface é documento, não aplicação.
   Painel: .tela .lateral .conteudo .cabecalho .botao .campo .escolha .abas .cartao .aviso
           .tira .tabela .linha .selo .ficha .situacao .barra .achado .topo .vazio .mensagem
           .historico .esqueleto .andamento .anexo .sigilo .prontidao .convidar .lista-simples
   Arranjos: .pilha .fileira .secao-rotulada .abertura .explica .nota .lista-pontos .detalhes .quadro
   Cascas:   .avulsa (telas sozinhas) .operacao-faixa e .operacao-miolo (quem opera o LicitScore)
   Site:   .site-* */

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--destaque); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0; font-family: var(--font-editorial); font-weight: 600; text-wrap: balance; }
h1 { font-size: 30px; line-height: 1.2; }
h2 { font-size: 21px; line-height: 1.3; }
h3 { font-size: 17px; line-height: 1.35; }
p { margin: 0; }

.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }
.rotulo { font-size: 10.5px; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase;
          font-weight: 600; color: var(--tinta-3); }
.silencio { color: var(--tinta-3); font-size: 13px; line-height: 1.5; }
.crescer { flex-grow: 1; }
.leitura { max-width: var(--leitura-largura); }

/* foco: sólido, 3:1, sempre visível no teclado */
:focus-visible { outline: 2px solid var(--foco); outline-offset: var(--espaco-2); }
.lateral :focus-visible, .topo :focus-visible, .site-escuro :focus-visible { outline-color: var(--lateral-foco); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ---------------------------------------------------------------- estrutura do painel */
.tela { display: grid; grid-template-columns: var(--lateral-largura) minmax(0, 1fr); min-height: 100vh; }

.lateral {
  background: var(--lateral-fundo);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: var(--espaco-24) 0 18px; position: sticky; top: 0; height: 100vh;
  z-index: var(--camada-fixa);
}
.marca { display: flex; align-items: center; gap: 11px; padding: 0 var(--espaco-20); color: var(--lateral-texto); }
.marca .nome { font-size: 17px; font-weight: 600; color: var(--lateral-texto); }
.marca .nome b { color: var(--ciano); font-weight: 600; }

.nav { display: flex; flex-direction: column; gap: var(--espaco-2); padding: 0 var(--espaco-12); }
.nav a {
  display: flex; align-items: center; gap: var(--espaco-12); height: 44px; padding: 0 var(--espaco-12);
  border-radius: var(--raio-2); color: var(--lateral-texto-2); font-size: 14.5px; text-decoration: none;
  transition: background var(--duracao-rapida) ease, color var(--duracao-rapida) ease;
}
.nav a svg { flex-shrink: 0; stroke: currentColor; }
.nav a:hover { background: var(--lateral-hover); color: var(--lateral-ativo-texto); text-decoration: none; }
.nav a.ativo { background: var(--lateral-ativo); color: var(--lateral-ativo-texto); font-weight: 500; }
.nav a.ativo svg { stroke: var(--ciano); }

.lateral .inicio { display: flex; flex-direction: column; gap: 30px; }
a.marca, a.marca:hover { text-decoration: none; }
.tira .valor.neutro { color: var(--tinta-3); }
.aviso > svg { stroke: var(--destaque); }
.aviso.risco > svg { stroke: var(--risco); }
.aviso.ruim > svg { stroke: var(--ruim); }
.aviso.ok > svg { stroke: var(--ok); }
.aviso.acao { align-items: center; gap: 26px; }
.aviso form { flex-shrink: 0; }
.aviso .progresso-confirmacao { display: flex; flex-direction: column; gap: 6px; width: 178px; flex-shrink: 0; }
.escolhas.duas { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .escolhas.duas { grid-template-columns: 1fr; } }
.escolhas.tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .escolhas.tres { grid-template-columns: 1fr; } }
.nav a.breve { opacity: .55; cursor: default; }
.nav a.breve:hover { background: none; color: var(--lateral-texto-2); }
.nav a.breve small { margin-left: auto; font-size: 10.5px; color: var(--lateral-silencio); }
/* a contagem ao lado do item (o radar: "N novas"): ciano sobre a lateral, só quando há o que contar */
.nav a .conta { margin-left: auto; min-width: 22px; height: 20px; padding: 0 7px; border-radius: var(--raio-1);
                background: var(--ciano); color: var(--sobre-ciano); font-size: 11px; font-weight: 700;
                font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; }

.lateral .rodape-lateral { display: flex; flex-direction: column; gap: var(--espaco-12); }
.lateral .atalhos { display: flex; gap: 14px; padding: 0 var(--espaco-24); font-size: 11.5px; }
.lateral .atalhos a { color: var(--lateral-silencio); }
.lateral .atalhos a:hover { color: var(--lateral-ativo-texto); }

.usuario {
  margin: 0 var(--espaco-12); border-top: 1px solid var(--lateral-linha); padding: 14px var(--espaco-12) 0;
  display: flex; align-items: center; gap: 11px;
}
.usuario .avatar {
  width: 32px; height: 32px; border-radius: var(--raio-2); background: var(--ciano);
  color: var(--sobre-ciano); display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.usuario .quem { min-width: 0; flex: 1 1 auto; }
.usuario .quem div { font-size: 13.5px; font-weight: 500; color: var(--lateral-texto);
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario .quem span { font-size: 11.5px; color: var(--lateral-silencio); display: block;
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario form { margin-left: auto; }
.usuario button { background: none; border: 0; cursor: pointer; padding: var(--espaco-8); display: flex;
                  color: var(--lateral-texto-2); border-radius: var(--raio-2); }
.usuario button:hover { color: var(--lateral-ativo-texto); background: var(--lateral-hover); }

.conteudo { padding: var(--espaco-32) var(--espaco-40) 60px; min-width: 0; display: flex;
            flex-direction: column; gap: var(--espaco-24); max-width: var(--conteudo-largura); width: 100%; }
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between;
             gap: var(--espaco-24); flex-wrap: wrap; }
.cabecalho h1 { font-size: 30px; }
.cabecalho .titulo { display: flex; flex-direction: column; gap: 5px; }
.cabecalho .titulo p { font-size: 14px; }
.cabecalho .acoes { display: flex; gap: var(--espaco-12); align-items: center; flex-wrap: wrap; }

@media (max-width: 900px) {
  .tela { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; }
  .conteudo { padding: var(--espaco-24) var(--espaco-16) var(--espaco-48); }
}

/* ---------------------------------------------------------------- botão */
.botao {
  height: var(--controle-altura); padding: 0 var(--espaco-20); border: 0; border-radius: var(--raio-2);
  background: var(--acao); color: var(--sobre-acao); font-family: inherit;
  font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  transition: background var(--duracao-rapida) ease;
}
.botao svg { stroke: currentColor; flex-shrink: 0; }
.botao:hover { background: var(--acao-hover); color: var(--sobre-acao); text-decoration: none; }
.botao.claro { background: var(--superficie); border: 1px solid var(--borda-campo);
               color: var(--tinta); font-weight: 500; }
.botao.claro:hover { background: var(--superficie-2); }
.botao.ciano { background: var(--ciano); color: var(--sobre-ciano); }
.botao.ciano:hover { background: var(--acao-hover); color: var(--sobre-ciano); }
.botao.perigo { background: var(--superficie); border: 1px solid var(--ruim-borda); color: var(--ruim); font-weight: 600; }
.botao.perigo:hover { background: var(--ruim-fundo); }
.botao.atencao { background: var(--superficie); border: 1px solid var(--risco-borda); color: var(--risco); font-weight: 600; }
.botao.atencao:hover { background: var(--risco-fundo); }
.botao.escuro { background: transparent; border: 1px solid var(--topo-borda); color: var(--topo-texto); font-weight: 500; }
.botao.escuro:hover { background: var(--lateral-hover); color: var(--lateral-ativo-texto); }
.botao.discreto { background: none; border: 0; color: var(--destaque); padding: 0 var(--espaco-8); height: auto; font-weight: 500; }
.botao.discreto:hover { background: none; text-decoration: underline; }
.botao:disabled, .botao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.botao.pequeno { height: var(--controle-pequeno-altura); padding: 0 14px; font-size: 13.5px; }
.botao.largo { width: 100%; }

/* ---------------------------------------------------------------- campo */
label.campo { display: flex; flex-direction: column; gap: 7px; }
label.campo > span { font-size: 12px; font-weight: 600; letter-spacing: .05em;
                     text-transform: uppercase; color: var(--tinta-2); }
label.campo > .ajuda { font-size: 12.5px; color: var(--tinta-3); text-transform: none; letter-spacing: 0; font-weight: 400; }
label.campo > .erro { font-size: 12.5px; color: var(--ruim); text-transform: none; letter-spacing: 0; font-weight: 500; }
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=search], select {
  height: var(--controle-altura); padding: 0 14px; font-family: inherit; font-size: 15px;
  color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--borda-campo); border-radius: var(--raio-2); outline: none; width: 100%;
}
textarea {
  padding: 10px 14px; font-family: inherit; font-size: 14.5px; line-height: 1.5;
  color: var(--tinta); background: var(--superficie);
  border: 1px solid var(--borda-campo); border-radius: var(--raio-2); outline: none;
  width: 100%; resize: vertical; min-height: 76px;
}
input::placeholder, textarea::placeholder { color: var(--tinta-4); }
input:focus, select:focus, textarea:focus { border-color: var(--foco); box-shadow: 0 0 0 1px var(--foco); outline: none; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--ruim); }
input:disabled, select:disabled, textarea:disabled { background: var(--superficie-2); color: var(--tinta-4); cursor: not-allowed; }
.campos { display: grid; gap: var(--espaco-16); }
.campos.duas { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .campos.duas { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- escolha */
label.escolha { display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
                background: var(--superficie); border: 1px solid var(--linha);
                padding: 14px var(--espaco-16); }
label.escolha:hover { border-color: var(--borda-campo); }
label.escolha:has(input:checked) { border-color: var(--destaque);
                                   box-shadow: inset 0 0 0 1px var(--destaque); }
label.escolha:has(input:focus-visible) { outline: 2px solid var(--foco); outline-offset: var(--espaco-2); }
label.escolha input { margin: 3px 0 0; flex-shrink: 0; accent-color: var(--destaque); }
label.escolha span { display: flex; flex-direction: column; gap: 3px;
                     font-size: 12.5px; line-height: 1.5; color: var(--tinta-3); }
label.escolha span b { font-size: 14px; font-weight: 600; color: var(--tinta); }
.escolhas { display: grid; gap: var(--espaco-8); }

/* ---------------------------------------------------------------- abas */
.abas-topo, .abas { display: flex; align-items: stretch; gap: 26px;
                    border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.abas a, .abas span { padding: 0 2px 11px; font-size: 14.5px; color: var(--tinta-3);
          text-decoration: none; border-bottom: 2px solid transparent; }
.abas a:hover { color: var(--tinta-2); text-decoration: none; }
.abas a.on, .abas span.on { color: var(--tinta); font-weight: 600; border-bottom-color: var(--acao); }
.abas a .conta, .abas a span { color: var(--tinta-3); font-weight: 400; }
.risca { width: 1px; height: 20px; background: var(--linha-2); }

/* ---------------------------------------------------------------- caixas */
.cartao { background: var(--superficie); border: 1px solid var(--linha); }
.cartao.recheado { padding: var(--espaco-24); }
.aviso { background: var(--superficie); border: 1px solid var(--linha);
         border-left: var(--faixa-severidade) solid var(--destaque); padding: var(--espaco-16) var(--espaco-20);
         display: flex; gap: var(--espaco-12); align-items: flex-start; }
.aviso.risco { border-left-color: var(--risco); }
.aviso.ruim { border-left-color: var(--ruim); }
.aviso.ok { border-left-color: var(--ok); }
.aviso svg { flex-shrink: 0; margin-top: 2px; }
.aviso .corpo { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex-grow: 1; }
.aviso .corpo b { font-size: 15.5px; font-weight: 600; }
.aviso .corpo p { font-size: 13.5px; line-height: 1.55; color: var(--tinta-2); max-width: 92ch; }

/* ---------------------------------------------------------------- tiras */
.tiras { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--espaco-16); }
.tira { background: var(--superficie); border: 1px solid var(--linha);
        border-left: var(--faixa-severidade) solid var(--tinta-3); padding: 18px var(--espaco-20);
        display: flex; flex-direction: column; gap: var(--espaco-6); color: inherit; text-decoration: none; }
a.tira:hover { text-decoration: none; background: var(--superficie-hover); }
.tira.ruim { border-left-color: var(--ruim); }
.tira.ruim .valor { color: var(--ruim); }
.tira.risco { border-left-color: var(--risco); }
.tira.risco .valor { color: var(--risco); }
.tira.info { border-left-color: var(--destaque); }
.tira.info .valor { color: var(--destaque); }
.tira.ok { border-left-color: var(--ok); }
.tira.ok .valor { color: var(--ok); }
.tira .valor { font-size: 30px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.tira .junto { display: flex; align-items: baseline; gap: 9px; }
.tira .junto span:not(.valor) { font-size: 13.5px; color: var(--tinta-2); }

/* ---------------------------------------------------------------- tabela */
.tabela { background: var(--superficie); border: 1px solid var(--linha);
          display: flex; flex-direction: column; overflow-x: auto; }
.linha { display: grid; gap: var(--espaco-20); align-items: center; padding: 0 22px;
         border-bottom: 1px solid var(--linha-2); }
.linha:last-child { border-bottom: 0; }
.linha.titulos { height: 44px; background: var(--superficie-2);
                 border-bottom: 1px solid var(--linha);
                 font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
                 font-weight: 600; color: var(--tinta-3); }
.linha.atencao { background: var(--atencao-fundo); }
a.linha { color: inherit; text-decoration: none; }
a.linha:hover { background: var(--superficie-hover); text-decoration: none; color: inherit; }
.linha .principal { display: flex; flex-direction: column; gap: var(--espaco-4); min-width: 0; }
.linha .principal b { font-size: 15.5px; font-weight: 600; }
.linha .principal b .silencio { font-weight: 400; }
.linha .data { font-variant-numeric: tabular-nums; font-size: 14px; color: var(--tinta-2); }
.linha .data.urgente { color: var(--ruim); font-weight: 600; }

/* ---------------------------------------------------------------- selo */
.selo { display: inline-flex; }
.selo svg { display: block; }
.selo-nota { display: inline-grid; place-items: center; position: relative;
             width: var(--selo-tamanho, 46px); height: var(--selo-tamanho, 46px); color: var(--neutro); }
.selo-nota.ok { color: var(--ok); }
.selo-nota.risco { color: var(--risco); }
.selo-nota.ruim { color: var(--ruim); }
.selo-nota svg { width: 100%; height: 100%; display: block; }
.selo-nota b { position: absolute; font-family: var(--font-ui); font-weight: 600;
               font-variant-numeric: tabular-nums; font-size: calc(var(--selo-tamanho, 46px) * .39);
               line-height: 1; transform: translateY(.05em); }
.selo-legenda { display: flex; align-items: center; gap: var(--espaco-12); }
.selo-legenda .rotulo { font-size: 10px; }
.selo-legenda .leitura-selo { font-size: 13.5px; font-weight: 600; }

/* ---------------------------------------------------------------- fichas */
.ficha { font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: var(--raio-1);
         white-space: nowrap; display: inline-block; line-height: 1.3; }
.ficha.critico { color: var(--ruim); background: var(--ruim-fundo); }
.ficha.alto { color: var(--risco); background: var(--risco-fundo); }
.ficha.medio { color: var(--tinta-2); background: var(--medio-fundo); }
.ficha.pendente, .ficha.lacuna { color: var(--pendente); background: var(--pendente-fundo); }
.ficha.conforme { color: var(--ok); background: var(--ok-fundo); }
.ficha.info { color: var(--destaque); background: var(--destaque-fundo); }
.fichas { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }

.situacao { font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: var(--raio-1);
            border: 1px solid; white-space: nowrap; display: inline-block; line-height: 1.3; }
.situacao.corrigir { color: var(--ruim); border-color: var(--ruim-borda); }
.situacao.revisao { color: var(--risco); border-color: var(--risco-borda); }
.situacao.andamento { color: var(--destaque); border-color: var(--destaque-borda); }
.situacao.pronta { color: var(--ok); border-color: var(--ok-borda); }
.situacao.neutra { color: var(--tinta-2); border-color: var(--linha); }

/* ---------------------------------------------------------------- barra */
.barra { height: 6px; border-radius: 3px; background: var(--linha-2); overflow: hidden; }
.barra > div { height: 6px; background: var(--destaque); transition: width var(--duracao-lenta) ease; }
.barra.verde > div { background: var(--ok); }
.progresso { display: flex; align-items: center; gap: var(--espaco-12); }
.progresso .barra { width: 108px; flex-shrink: 0; }
.contagem { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espaco-12); }
.contagem b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- achados */
.achado { background: var(--superficie); border: 1px solid var(--linha);
          border-left: var(--faixa-achado) solid var(--c, var(--tinta-3)); padding: var(--espaco-16) var(--espaco-20);
          display: flex; flex-direction: column; gap: 9px; text-decoration: none;
          color: inherit; }
.achado > a { display: flex; flex-direction: column; gap: 9px; text-decoration: none; color: inherit; }
.achado:hover { border-color: var(--borda-campo); border-left-color: var(--c, var(--tinta-3)); }
.achado.aberto { box-shadow: 0 0 0 2px var(--linha); }
.achado h3 { font-family: var(--font-ui); font-size: 16px; font-weight: 600; line-height: 1.35; }
.achado .cabeca { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.achado .tag { font-size: 10px; letter-spacing: .11em; font-weight: 700;
               text-transform: uppercase; padding: 4px 8px; border-radius: var(--raio-1);
               color: var(--c); background: var(--c-fundo, var(--medio-fundo)); }
.achado .codigo { font-family: var(--font-mono); font-size: 11.5px; color: var(--tinta-4); }
[data-theme="escuro"] .achado .codigo { color: var(--tinta-3); }   /* tinta-4 dá 3,75:1 na superfície escura */
.achado dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr);
             gap: 5px var(--espaco-16); font-size: 13.5px; }
.achado dt { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
             font-weight: 600; color: var(--tinta-3); padding-top: 3px; }
.achado dd { margin: 0; color: var(--tinta-2); line-height: 1.5; }
.achado .providencia { border-top: 1px dashed var(--linha-2); padding-top: var(--espaco-12);
                       display: flex; flex-direction: column; gap: 5px; }
.achado .providencia p { font-size: 13.5px; color: var(--tinta-2); line-height: 1.5; }
.achado.feito { opacity: .55; }
.achado.feito h3 { text-decoration: line-through; }
.achados { display: flex; flex-direction: column; gap: var(--espaco-16); }

.cor-critico { --c: var(--ruim); --c-fundo: var(--ruim-fundo); }
.cor-alto { --c: var(--risco); --c-fundo: var(--risco-fundo); }
.cor-medio { --c: var(--tinta-2); --c-fundo: var(--medio-fundo); }
.cor-pendente, .cor-lacuna { --c: var(--pendente); --c-fundo: var(--pendente-fundo); }
.cor-conforme { --c: var(--ok); --c-fundo: var(--ok-fundo); }

.evidencia-nota { font-size: 12.5px; color: var(--tinta-2); display: flex; flex-direction: column; gap: 2px; }
.evidencia-nota .trecho { font-family: var(--font-mono); font-size: 11.5px; color: var(--tinta-3); }

/* ---------------------------------------------------------------- topo do parecer */
.topo { height: var(--topo-altura); background: var(--lateral-fundo); display: flex; align-items: center;
        justify-content: space-between; gap: var(--espaco-24); padding: 0 var(--espaco-24);
        color: var(--lateral-texto); position: sticky; top: 0; z-index: var(--camada-fixa); }
.topo .identidade { display: flex; align-items: center; gap: 18px; min-width: 0; }
.topo .risca { background: var(--lateral-linha); height: 26px; }
.topo .titulo { font-size: 15px; font-weight: 600; color: var(--lateral-ativo-texto); }
.topo .abaixo { font-size: 12px; color: var(--lateral-silencio); }
.topo .acoes { display: flex; align-items: center; gap: 10px; }
.topo .painel { display: flex; align-items: center; gap: 13px; background: var(--superficie); color: var(--tinta);
                border-radius: var(--raio-3); padding: 8px 16px 8px 12px; }
.topo .painel .rotulo { font-size: 10px; }
.topo .painel .leitura-selo { font-size: 13.5px; font-weight: 600; }
.topo .painel .leitura-selo.ruim { color: var(--ruim); }
.topo .acoes .botao { white-space: nowrap; }

.filtros { min-height: 54px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: var(--espaco-8) var(--espaco-24);
           border-bottom: 1px solid var(--linha); background: var(--superficie); }
.filtros a { text-decoration: none; }
.dividido { display: grid; grid-template-columns: minmax(0, 1fr) 580px; min-height: calc(100vh - 122px); }
.coluna-achados { padding: 22px var(--espaco-24); display: flex; flex-direction: column; gap: 14px; }
.coluna-achados h2 { font-size: 19px; }
.coluna-achados h2 + .achado { margin-top: 0; }
.coluna-achados h2:not(:first-child) { margin-top: 6px; }
.coluna-achados h2 .conta { font-family: var(--font-ui); font-size: 13px; color: var(--tinta-3); font-weight: 400; }
.evidencia { background: var(--superficie); border-left: 1px solid var(--linha); display: flex; flex-direction: column;
             position: sticky; top: 0; height: calc(100vh - 122px); }
.evidencia .abas { height: 48px; border-bottom: 1px solid var(--linha-2); display: flex; align-items: center; gap: 18px;
                   padding: 0 var(--espaco-20); font-size: 13.5px; color: var(--tinta-3); }
.evidencia .abas .on { color: var(--tinta); font-weight: 600; border-bottom: 2px solid var(--acao); height: 100%;
                       display: flex; align-items: center; padding: 0; }
.evidencia .folha { flex-grow: 1; background: var(--superficie-2); padding: var(--espaco-20); display: flex; justify-content: center; overflow: auto; }
.evidencia .folha img { width: 100%; max-width: 420px; height: auto; align-self: flex-start; box-shadow: var(--sombra-1); background: #ffffff; }
.evidencia .folha .sem-pagina { align-self: center; text-align: center; max-width: 34ch; }
.evidencia .rodape { border-top: 1px solid var(--linha-2); padding: var(--espaco-16) var(--espaco-20); display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1100px) { .dividido { grid-template-columns: 1fr; } .evidencia { position: static; height: auto; border-left: 0; border-top: 1px solid var(--linha); } }

/* ---------------------------------------------------------------- esqueleto da proposta */
.esqueleto { display: grid; grid-template-columns: 360px minmax(0, 1fr); background: var(--superficie); border: 1px solid var(--linha); }
.esqueleto .indice-secoes { border-right: 1px solid var(--linha); display: flex; flex-direction: column; }
.esqueleto .indice-secoes a { padding: 14px 18px; border-bottom: 1px solid var(--linha-2); text-decoration: none; color: inherit;
                               display: flex; flex-direction: column; gap: 6px; border-left: 3px solid transparent; }
.esqueleto .indice-secoes a:hover { background: var(--superficie-hover); }
.esqueleto .indice-secoes a.on { background: var(--superficie-2); border-left-color: var(--acao); }
.esqueleto .indice-secoes .linha-titulo { display: flex; align-items: baseline; gap: 8px; }
.esqueleto .indice-secoes .numero { font-size: 12px; width: 26px; flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--tinta-3); }
.esqueleto .indice-secoes .nome { font-size: 14px; font-weight: 600; line-height: 1.35; }
.esqueleto .indice-secoes .etiquetas { display: flex; gap: 6px; flex-wrap: wrap; padding-left: 34px; align-items: center; }
.esqueleto .indice-secoes .pontos { font-size: 12px; font-variant-numeric: tabular-nums; }
.esqueleto .secao { padding: 24px 26px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.esqueleto .secao .cabeca-secao { display: flex; flex-direction: column; gap: 8px; }
.esqueleto .secao .cabeca-secao h2 { font-size: 22px; }
.esqueleto .secao .cabeca-secao .natureza { font-size: 12.5px; }
.esqueleto .diretriz { padding: 16px 18px; background: var(--superficie-2); border: 1px solid var(--linha);
                       border-left: var(--faixa-severidade) solid var(--destaque); display: flex; flex-direction: column; gap: 9px; }
.esqueleto .diretriz p { font-size: 13.5px; line-height: 1.6; color: var(--tinta-2); }
.esqueleto .preenchido { display: flex; flex-direction: column; gap: 9px; }
.esqueleto .preenchido .cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: var(--espaco-16); }
.esqueleto .preenchido .origem { font-size: 11.5px; white-space: nowrap; }
.esqueleto .slots { display: flex; flex-direction: column; }
.esqueleto .slot { padding: 11px 16px; border-bottom: 1px solid var(--linha-2); display: grid;
                   grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.esqueleto .slot.com-origem { grid-template-columns: 190px minmax(0, 1fr) auto; }
.esqueleto .slot:last-child { border-bottom: 0; }
.esqueleto .slot .rotulo-slot { font-size: 13px; font-weight: 600; }
.esqueleto .slot .texto { font-size: 13.5px; color: var(--tinta-2); }
.esqueleto .lacunas { padding: 16px 18px; border-left: var(--faixa-severidade) solid var(--ruim); display: flex; flex-direction: column; gap: 10px; }
.esqueleto .lacuna { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; }
.esqueleto .lacuna span { color: var(--ruim); line-height: 1.5; flex: 1 1 auto; }
.esqueleto .lacuna a { font-size: 12.5px; white-space: nowrap; }
.esqueleto form.texto-secao { display: flex; flex-direction: column; gap: 10px; }
.esqueleto form.texto-secao .acoes { display: flex; align-items: center; gap: 14px; }
.esqueleto .procedencia { border-top: 1px solid var(--linha-2); padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.esqueleto .procedencia div { font-size: 12.5px; color: var(--tinta-2); line-height: 1.5; }
.esqueleto .procedencia b { font-weight: 600; }
.esqueleto .procedencia .trecho-origem { font-style: italic; margin-top: 2px; }
@media (max-width: 1000px) { .esqueleto { grid-template-columns: 1fr; } .esqueleto .indice-secoes { border-right: 0; border-bottom: 1px solid var(--linha); } }
.tira.pendente { border-left-color: var(--pendente); }
.tira.pendente .valor { color: var(--pendente); }

/* ---------------------------------------------------------------- estado vazio */
.vazio { background: var(--superficie); border: 1px solid var(--linha); padding: var(--espaco-48);
         display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.vazio h2 { font-size: 21px; margin-top: var(--espaco-6); }
.vazio p { max-width: 56ch; font-size: 14px; color: var(--tinta-3); }
.vazio .botao { margin-top: var(--espaco-8); }

/* ---------------------------------------------------------------- mensagem (toast) */
.mensagens { position: fixed; right: var(--espaco-24); bottom: var(--espaco-24); display: flex; flex-direction: column;
             gap: var(--espaco-8); z-index: var(--camada-mensagem); max-width: min(420px, calc(100vw - 48px)); }
.mensagem { background: var(--superficie); border: 1px solid var(--linha); border-left: var(--faixa-severidade) solid var(--ok);
            border-radius: var(--raio-3); box-shadow: var(--sombra-2); padding: 14px var(--espaco-16);
            display: flex; gap: var(--espaco-12); align-items: flex-start; font-size: 14px; }
.mensagem.ruim { border-left-color: var(--ruim); }
.mensagem.risco { border-left-color: var(--risco); }
.mensagem.info { border-left-color: var(--destaque); }
.mensagem svg { flex-shrink: 0; margin-top: 2px; }
.mensagem b { display: block; font-weight: 600; }
.mensagem p { color: var(--tinta-2); font-size: 13.5px; }
.mensagem .fechar { margin-left: auto; background: none; border: 0; cursor: pointer; padding: 2px; color: var(--tinta-3); display: flex; border-radius: var(--raio-1); }

/* ---------------------------------------------------------------- histórico */
.historico { display: flex; flex-direction: column; }
.historico .evento { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--espaco-16); padding: 10px 0;
                     border-bottom: 1px solid var(--linha-2); font-size: 13.5px; }
.historico .evento:last-child { border-bottom: 0; }
.historico .quando { font-variant-numeric: tabular-nums; color: var(--tinta-3); }

/* ---------------------------------------------------------------- formulários de página */
.cabecalho .voltar { font-size: 13.5px; display: inline-flex; align-items: center; gap: 6px; }
.cabecalho .voltar svg { stroke: currentColor; }
.com-lateral { display: grid; grid-template-columns: minmax(0, 1fr) 344px; gap: 28px; align-items: start; }
.com-lateral > .principal { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.com-lateral > aside { display: flex; flex-direction: column; gap: var(--espaco-20); }
@media (max-width: 900px) { .com-lateral { grid-template-columns: 1fr; } }
.secao-numerada { display: flex; flex-direction: column; gap: 11px; }
.secao-numerada .cabeca { display: flex; align-items: baseline; gap: 10px; }
.secao-numerada .indice { width: 22px; height: 22px; border-radius: 50%; background: var(--acao); color: var(--sobre-acao);
                          font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
                          flex-shrink: 0; font-variant-numeric: tabular-nums; }
.secao-numerada h2 { font-family: var(--font-ui); font-size: 17px; font-weight: 600; }
.cartao.compacto { padding: 18px var(--espaco-20); display: flex; flex-direction: column; gap: 18px; }
.cartao.recheado > .bloco { display: flex; flex-direction: column; gap: var(--espaco-12); }
.cartao.recheado > .bloco + .bloco { border-top: 1px solid var(--linha-2); padding-top: 18px; }
label.campo.discreto > span { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 12.5px; color: var(--tinta-2); }
input[type=file] { font-family: inherit; font-size: 14px; padding: 10px 0; color: var(--tinta-2); width: 100%; }
.nota-pe { display: flex; gap: 9px; align-items: flex-start; }
.nota-pe svg { flex-shrink: 0; margin-top: 2px; stroke: var(--tinta-3); }
.nota-pe p { font-size: 12.5px; line-height: 1.55; color: var(--tinta-3); max-width: 78ch; }
.passos-lista { margin: 0; padding-left: 1.1em; font-size: 13.5px; color: var(--tinta-2); line-height: 1.65; }
.passos-lista strong { color: var(--tinta); }
.confirmado { background: none; border: 0; cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 7px;
              font-family: inherit; font-size: 12.5px; color: var(--ok); font-weight: 500; }
.confirmado svg { stroke: currentColor; }

/* ---------------------------------------------------------------- andamento da análise */
.andamento { background: var(--superficie); border: 1px solid var(--linha); padding: 30px var(--espaco-32);
             display: flex; flex-direction: column; gap: 22px; }
.andamento .agora { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-20); }
.andamento .agora .etapa { font-size: 17px; font-weight: 600; }
.andamento .agora .pct { font-size: 24px; font-weight: 600; color: var(--destaque); font-variant-numeric: tabular-nums; }
.andamento .barra, .andamento .barra > div { height: 8px; }
.andamento .camadas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.andamento .camadas li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 14px; align-items: start; }
.andamento .camada { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--linha); display: flex;
                     align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--tinta-3);
                     font-variant-numeric: tabular-nums; transition: background var(--duracao-rapida) ease, border-color var(--duracao-rapida) ease; }
.andamento .camada.atual { border-color: var(--destaque); color: var(--destaque); }
.andamento .camada.feita { border-color: var(--ok); background: var(--ok); color: var(--sobre-acao); }
.andamento .camadas b { font-size: 15px; font-weight: 600; display: block; }
.andamento .camadas p { font-size: 13.5px; line-height: 1.5; color: var(--tinta-3); }

/* ---------------------------------------------------------------- arranjos */
/* Pilha e fileira espaçam irmãos com gap, como o README pede; o resto dá nome a um pedaço de página
   que se repete: a abertura (título e parágrafo de apoio), a seção com rótulo em caixa-alta, a lista de pontos. */
.pilha { display: flex; flex-direction: column; gap: var(--espaco-16); }
.pilha.justa { gap: var(--espaco-8); }
.fileira { display: flex; align-items: center; gap: var(--espaco-12); flex-wrap: wrap; }
.fileira.justa { gap: var(--espaco-8); }
.corta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secao-rotulada { display: flex; flex-direction: column; gap: 10px; }
.abertura { display: flex; flex-direction: column; gap: 7px; }
.abertura p { font-size: 14px; line-height: 1.6; color: var(--tinta-2); }
.explica { font-size: 13.5px; line-height: 1.6; color: var(--tinta-2); }
.explica b { color: var(--tinta); font-weight: 600; }
.nota { font-size: 13px; line-height: 1.6; color: var(--tinta-3); }
.lista-pontos { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 9px;
                font-size: 14px; line-height: 1.6; color: var(--tinta-2); }
.lista-pontos b { color: var(--tinta); font-weight: 600; }
.lista-pontos li.ruim { color: var(--ruim); }
dl.detalhes { margin: 0; display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 10px 18px; font-size: 14px; }
dl.detalhes dd { margin: 0; }
dl.detalhes b { font-weight: 600; }
.quadro { background: var(--superficie-2); border: 1px solid var(--linha-2); padding: var(--espaco-20) 22px;
          display: flex; flex-direction: column; gap: var(--espaco-12); }
div.erro { background: var(--ruim-fundo); border: 1px solid var(--ruim-borda); color: var(--ruim);
           font-size: 13.5px; padding: 11px 14px; border-radius: var(--raio-2); }

/* ---------------------------------------------------------------- cartão: variantes */
.cartao.avulso { padding: var(--espaco-32); display: flex; flex-direction: column; gap: var(--espaco-20); }
.cartao.avulso h1 { font-size: 24px; }
.cartao.avulso > .botao { align-self: flex-start; }
.cartao.estreito { max-width: 760px; }
.cartao.lista { padding: 6px 18px; }
.cabeca-cartao { display: flex; flex-direction: column; gap: var(--espaco-4); }
.cabeca-cartao p { font-size: 12.5px; line-height: 1.5; color: var(--tinta-3); }
details.dobravel summary { cursor: pointer; font-size: 14px; font-weight: 600; }
details.dobravel summary.ruim { color: var(--ruim); }
details.dobravel summary.discreta { font-size: 13px; font-weight: 400; color: var(--tinta-3); }
details.dobravel[open] > summary { margin-bottom: var(--espaco-12); }
details.dobravel > form { max-width: 560px; }
details.cartao.dobravel { padding: var(--espaco-16) var(--espaco-24); }

/* documento longo (aviso de privacidade): seções separadas por filete, parágrafos em tinta-2 */
.cartao.documento { padding: var(--espaco-40); display: flex; flex-direction: column; gap: 26px; }
.documento p { font-size: 14.5px; line-height: 1.7; color: var(--tinta-2); }
.documento p b { color: var(--tinta); }
.documento > .abertura p { font-size: 15px; line-height: 1.65; }
.documento .secao { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--linha-2); padding-top: 22px; }
.documento .secao h2 { font-size: 19px; }
.documento .topicos { display: flex; flex-direction: column; gap: var(--espaco-12); }
.documento .topicos b { font-size: 14.5px; }
.documento .topicos p { font-size: 14px; line-height: 1.65; }
.documento .lista-pontos { font-size: 14.5px; line-height: 1.65; gap: var(--espaco-8); }
.documento p.nota { font-size: 14px; color: var(--tinta-3); }
.documento .pe { border-top: 1px solid var(--linha-2); padding-top: 18px; }
.documento .pe p { font-size: 13px; color: var(--tinta-3); }

/* ---------------------------------------------------------------- campo: complementos */
.campos > .inteiro { grid-column: 1 / -1; }
.campos > .botao { justify-self: start; }
.acoes-form { grid-column: 1 / -1; border-top: 1px solid var(--linha-2); padding-top: 18px;
              display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
label.campo .obrigatorio { color: var(--ruim); }
label.campo > span .ficha { margin-left: var(--espaco-4); }
.ficha.pequena { font-size: 10px; padding: 2px 6px; }
input.mono { font-family: var(--font-mono); font-size: 13px; }
input.espacado { letter-spacing: .08em; }
select.pequeno, input.pequeno { height: var(--controle-pequeno-altura); width: auto; padding: 0 10px; font-size: 13.5px; }
.botao.minimo { height: 28px; padding: 0 10px; font-size: 12px; }

/* convite: nome, e-mail, papel e o botão numa linha só, com o rótulo e a nota ocupando a largura toda */
.convidar { padding: var(--espaco-20) var(--espaco-24); display: grid; gap: 14px var(--espaco-16); align-items: end;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 170px auto; }
.convidar.sem-papel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; }
.convidar > .inteiro { grid-column: 1 / -1; }
@media (max-width: 760px) { .convidar, .convidar.sem-papel { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- aviso: complementos */
.aviso.contagens { align-items: center; flex-wrap: wrap; gap: 0 26px; }
.aviso.contagens .conta { font-size: 14px; }
.aviso.contagens .conta b { font-weight: 600; font-variant-numeric: tabular-nums; }
.aviso.contagens .conta.ruim b { color: var(--ruim); }
.aviso.contagens .explica { font-size: 13.5px; }
.aviso.contagens a { font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.aviso .corpo code { font-family: var(--font-mono); font-size: 12.5px; }

/* ---------------------------------------------------------------- tabela: complementos */
.cabecalho .acoes .botao { white-space: nowrap; }
.linha.inativa { opacity: .62; }
.linha.vazia { grid-template-columns: 1fr; min-height: 58px; }
.linha .acoes { display: flex; align-items: center; justify-content: flex-end; gap: var(--espaco-8); flex-wrap: wrap; }
.linha .principal .pendencia { font-size: 12.5px; line-height: 1.45; margin-top: 2px; color: var(--risco); }
.linha .principal .pendencia.ruim { color: var(--ruim); }
.linha .celula { font-size: 13px; min-width: 0; color: var(--tinta-2); }
.linha .celula.ok { color: var(--ok); }
.linha .celula.risco { color: var(--risco); }
.linha .celula.ruim { color: var(--ruim); }

/* lista simples: convites pendentes e outras listas curtas dentro de um .cartao.lista */
.lista-simples { display: flex; flex-direction: column; }
.lista-simples .item { display: flex; align-items: center; gap: var(--espaco-16); padding: 10px 0;
                       border-bottom: 1px solid var(--linha-2); font-size: 13.5px; flex-wrap: wrap; }
.lista-simples .item:last-child { border-bottom: 0; }
.lista-simples .item .principal { flex: 1 1 auto; min-width: 0; }
.lista-simples .item .principal b { font-weight: 600; }
.lista-simples .item .quando { font-size: 12.5px; color: var(--tinta-3); white-space: nowrap; }

/* ---------------------------------------------------------------- histórico: complementos */
.historico .evento .fato { color: var(--tinta-2); min-width: 0; }
.historico .evento .fato b { font-weight: 600; color: var(--tinta); }
.historico .evento.com-origem { grid-template-columns: 150px minmax(0, 1fr) auto; }
.historico .origem { font-variant-numeric: tabular-nums; color: var(--tinta-3); white-space: nowrap; }
.historico.estreito .evento { grid-template-columns: 96px minmax(0, 1fr); gap: 10px; font-size: 12.5px; padding: 8px 0; }

/* ---------------------------------------------------------------- cofre: prontidão, anexos e sigilo */
.prontidao { display: flex; align-items: center; gap: var(--espaco-12); padding: 9px var(--espaco-16) 9px var(--espaco-12);
             background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-3); }
.prontidao .legenda { display: flex; flex-direction: column; gap: 1px; }
.prontidao .legenda span { font-size: 13.5px; color: var(--tinta-2); }
.selo-nota.pequeno { --selo-tamanho: 36px; }
.selo-nota.medio { --selo-tamanho: 38px; }

.anexos { display: flex; flex-direction: column; gap: 14px; }
.anexo { border-top: 1px solid var(--linha-2); padding-top: var(--espaco-12); display: flex; flex-direction: column; gap: 7px; }
.anexo .cabeca { display: flex; align-items: baseline; gap: var(--espaco-8); flex-wrap: wrap; }
.anexo .cabeca .nome { font-size: 13.5px; font-weight: 500; }
.anexo .arquivo { display: flex; align-items: center; gap: 10px; background: var(--superficie-2);
                  border: 1px solid var(--linha-2); padding: 9px var(--espaco-12); }
.anexo .arquivo > svg { flex-shrink: 0; stroke: var(--ok); }
.anexo .arquivo a { font-size: 13px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anexo .arquivo .tamanho { font-size: 11.5px; white-space: nowrap; }
.anexo .arquivo form { display: flex; }
.anexo .remover { background: none; border: 0; cursor: pointer; padding: 2px; display: flex; color: var(--tinta-3); }
.anexo .remover svg { stroke: currentColor; }
.anexo .enviar { display: flex; align-items: center; gap: var(--espaco-8); }
.anexo .enviar input[type=file] { font-size: 12.5px; min-width: 0; flex: 1 1 auto; width: auto; padding: 0; }

.sigilo { display: flex; flex-direction: column; gap: var(--espaco-12); }
.sigilo .campo-sigilo { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--linha-2); padding-top: 10px; }
.sigilo .campo-sigilo .nome { font-size: 12.5px; color: var(--tinta-3); width: 128px; flex-shrink: 0; }
.sigilo .campo-sigilo .segredo { font-family: var(--font-mono); font-size: 13px; flex: 1 1 auto; color: var(--tinta-2); }
.sigilo .campo-sigilo .segredo.revelado { color: var(--tinta); }
.sigilo .base-legal { font-size: 11.5px; line-height: 1.5; color: var(--tinta-3); border-top: 1px solid var(--linha-2); padding-top: 10px; }
.sigilo .base-legal b { font-weight: 600; }

/* ---------------------------------------------------------------- casca avulsa */
/* Telas que aparecem sozinhas (senha, aceite, erro, privacidade, convite): sem navegação, uma coluna centrada. */
.avulsa { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 56px var(--espaco-24); }
.avulsa.centro { align-items: center; padding: var(--espaco-40) var(--espaco-24); }
.avulsa .coluna { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 22px; }
.avulsa .coluna.media { max-width: 620px; }
.avulsa .coluna.larga { max-width: 760px; }
.avulsa .pe { display: flex; gap: var(--espaco-16); font-size: 12.5px; color: var(--tinta-3); }
.marca.clara { padding: 0; color: var(--tinta); }
.marca.clara .nome { color: var(--petroleo); font-size: 18px; }
.marca.clara .nome b { color: var(--ciano-profundo); }
/* no tema escuro, a marca de papel vira a de fundo escuro (21/10/2026): o petróleo some no fundo */
[data-theme="escuro"] .marca.clara .nome { color: var(--tinta); }
[data-theme="escuro"] .marca.clara .nome b { color: var(--ciano); }
[data-theme="escuro"] .simbolo-claro rect { stroke: var(--cinza-marca); }
[data-theme="escuro"] .simbolo-claro path:first-of-type { stroke: var(--trilha-escura); }
[data-theme="escuro"] .simbolo-claro path:last-of-type { stroke: var(--ciano); }
[data-theme="escuro"] .simbolo-claro circle { fill: var(--ciano); }

/* ---------------------------------------------------------------- operação */
/* A área de quem opera o LicitScore. Outra cor, outra faixa, outro menu: quem está aqui não pode
   confundir com a tela de um cliente, e quem olha a tela por cima do ombro também não. */
.operacao-faixa { background: var(--operacao-fundo); color: var(--operacao-texto); }
.operacao-faixa .contem, .operacao-miolo { max-width: 1180px; margin: 0 auto; }
.operacao-faixa .contem { padding: var(--espaco-12) var(--espaco-24); display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.operacao-faixa .area { font-size: 15px; font-weight: 600; letter-spacing: .01em; }
.operacao-faixa .limite { font-size: 12.5px; color: var(--operacao-silencio); }
.operacao-faixa nav { margin-left: auto; display: flex; align-items: center; gap: var(--espaco-16); font-size: 13.5px; }
.operacao-faixa nav a { color: var(--operacao-texto); }
.operacao-faixa nav span { color: var(--operacao-silencio); }
.operacao-faixa nav form { margin: 0; }
.operacao-faixa nav button { background: none; border: 1px solid var(--operacao-borda); color: var(--operacao-texto);
                             border-radius: var(--raio-2); padding: 4px var(--espaco-12); font-size: 13px;
                             font-family: inherit; cursor: pointer; }
.operacao-faixa :focus-visible { outline-color: var(--operacao-texto); }
.operacao-miolo { padding: var(--espaco-32) var(--espaco-24) 56px; display: flex; flex-direction: column; gap: 22px; }
.operacao-faixa .contem.estreita, .operacao-miolo.estreita { max-width: 460px; }

/* ---------------------------------------------------------------- comparativo (rodadas) */
.comparativo { background: var(--superficie); border: 1px solid var(--linha); padding: 14px var(--espaco-20);
               display: flex; align-items: center; gap: var(--espaco-24); flex-wrap: wrap; }
.comparativo .rodada { font-size: 15.5px; font-weight: 600; display: flex; flex-direction: column; gap: 2px; }
.comparativo .rodada span { color: var(--tinta-3); font-weight: 400; font-size: 12.5px; }
.comparativo .contas { display: flex; gap: var(--espaco-20); flex-wrap: wrap; }
.comparativo .conta { display: flex; align-items: baseline; gap: 6px; font-size: 13.5px; color: var(--tinta-2); }
.comparativo .conta b { font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--tinta); }
.comparativo .conta.resolvido b { color: var(--ok); }
.comparativo .conta.novo b { color: var(--ruim); }
.comparativo .conta.persiste b { color: var(--risco); }
.comparativo .acoes { margin-left: auto; display: flex; gap: var(--espaco-8); }
.ficha.novo { color: var(--ruim); background: var(--ruim-fundo); }
.ficha.persiste { color: var(--risco); background: var(--risco-fundo); }
.ficha.resolvido { color: var(--ok); background: var(--ok-fundo); }

/* ---------------------------------------------------------------- checklist de entrega */
.checklist { background: var(--superficie); border: 1px solid var(--linha); display: flex; flex-direction: column; }
.checklist .cabeca-lista { display: flex; align-items: center; gap: var(--espaco-24); padding: 14px 22px;
                           border-bottom: 1px solid var(--linha); background: var(--superficie-2); flex-wrap: wrap; }
.checklist .cabeca-lista .contagem { width: 178px; flex-direction: column; align-items: stretch; gap: 6px; }
.checklist .cabeca-lista .contagem div { display: flex; justify-content: space-between; align-items: baseline; }
.checklist .item { display: grid; grid-template-columns: 24px minmax(0, 1fr) 220px; gap: var(--espaco-16);
                   padding: 14px 22px; border-bottom: 1px solid var(--linha-2); align-items: start; }
.checklist .item:last-child { border-bottom: 0; }
.checklist .caixa { width: 22px; height: 22px; border: 2px solid var(--borda-campo); border-radius: var(--raio-1);
                    display: grid; place-items: center; color: var(--sobre-acao); margin-top: 2px; background: none; cursor: pointer; padding: 0; }
.checklist .item.feito .caixa { background: var(--ok); border-color: var(--ok); }
.checklist .texto b { display: block; font-size: 15px; font-weight: 600; }
.checklist .item.feito .texto b { color: var(--tinta-2); }
.checklist .texto .origem { font-size: 12.5px; color: var(--tinta-3); margin-top: 2px; }
.checklist .texto .origem .trecho { font-family: var(--font-mono); font-size: 11.5px; }
.checklist .quem { font-size: 12.5px; color: var(--tinta-2); display: flex; flex-direction: column; gap: 3px; }
.checklist .quem .quando { font-variant-numeric: tabular-nums; color: var(--tinta-3); }
.checklist .quem .observacao { color: var(--tinta-3); font-style: italic; }
@media (max-width: 760px) { .checklist .item { grid-template-columns: 24px minmax(0, 1fr); } .checklist .quem { grid-column: 2; } }

/* ---------------------------------------------------------------- equipe no achado */
.atribuido { display: inline-flex; align-items: center; gap: var(--espaco-8); font-size: 12.5px; color: var(--tinta-2); }
.atribuido .avatar, .comentario .avatar { width: 24px; height: 24px; border-radius: var(--raio-2); background: var(--superficie-2);
                    border: 1px solid var(--linha); color: var(--tinta-2); display: grid; place-items: center;
                    font-size: 10px; font-weight: 700; flex-shrink: 0; }
.atribuido select { height: 32px; font-size: 13px; width: auto; padding: 0 10px; }
.comentarios { border-top: 1px dashed var(--linha-2); padding-top: var(--espaco-12); display: flex; flex-direction: column; gap: 10px; }
.comentario { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-size: 13.5px; }
.comentario .meta { font-size: 12px; color: var(--tinta-3); }
.comentario .meta b { color: var(--tinta-2); font-weight: 600; }
.comentario p { color: var(--tinta-2); line-height: 1.5; }
.comentarios form { display: flex; gap: var(--espaco-8); align-items: flex-end; }
.comentarios form textarea { min-height: 44px; }

/* ---------------------------------------------------------------- link de leitura */
.compartilhar { background: var(--superficie); border: 1px solid var(--linha); padding: var(--espaco-20);
                display: flex; flex-direction: column; gap: var(--espaco-12); max-width: 560px; }
.compartilhar h3 { font-family: var(--font-ui); font-size: 16px; }
.compartilhar .link { display: flex; gap: var(--espaco-8); }
.compartilhar .link input { font-family: var(--font-mono); font-size: 13px; }
.compartilhar .meta { font-size: 12.5px; color: var(--tinta-3); display: flex; gap: var(--espaco-16); flex-wrap: wrap; }
.compartilhar .meta b { color: var(--tinta-2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- importar do PNCP */
.importar { display: flex; gap: var(--espaco-8); align-items: flex-end; flex-wrap: wrap; }
.importar label.campo { flex: 1 1 320px; }
.importar-resultado { background: var(--superficie-2); border: 1px solid var(--linha); padding: 14px var(--espaco-16);
                      display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--espaco-12); font-size: 13.5px; }
.importar-resultado b { display: block; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
                        color: var(--tinta-3); font-weight: 600; margin-bottom: 2px; }
.importar-resultado .arquivo { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--espaco-8); }

/* ================================================================ SITE */
.site { font-size: 17px; line-height: 1.6; }
.site-contem { max-width: var(--site-largura); margin: 0 auto; padding: 0 var(--espaco-24); }
.site-secao { padding-block: var(--espaco-80); }
.site-secao.justa { padding-block: var(--espaco-48); }
.site-escuro { background: var(--petroleo); color: var(--lateral-texto); }
.site-escuro .site-titulo, .site-escuro h2 { color: #ffffff; }
.site-escuro p { color: var(--lateral-texto-2); }
.site-escuro a { color: var(--ciano); }

.site-titulo { font-family: var(--font-editorial); font-size: 36px; line-height: 1.15; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
.site-lead { font-size: 20px; line-height: 1.5; color: var(--tinta-2); max-width: 60ch; }
.site-cabeca { display: flex; flex-direction: column; gap: var(--espaco-16); max-width: 64ch; margin-bottom: var(--espaco-48); }

/* cabeçalho do site */
.site-cabecalho { background: var(--petroleo); color: var(--lateral-texto); border-bottom: 1px solid var(--lateral-linha); }
.site-cabecalho .site-contem { display: flex; align-items: center; justify-content: space-between; gap: var(--espaco-24); height: 72px; }
.site-cabecalho .marca { padding: 0; }
.site-cabecalho nav { display: flex; align-items: center; gap: var(--espaco-24); }
.site-cabecalho nav a { color: var(--lateral-texto-2); font-size: 15px; text-decoration: none; }
.site-cabecalho nav a:hover { color: var(--lateral-ativo-texto); }
.site-cabecalho nav a.entrar { color: var(--lateral-ativo-texto); font-weight: 500; }
@media (max-width: 760px) { .site-cabecalho nav a:not(.entrar):not(.botao) { display: none; } }

/* hero */
.site-hero { background: var(--petroleo); color: var(--lateral-texto); padding-block: var(--espaco-80) var(--espaco-120); }
.site-hero .site-contem { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--espaco-64); align-items: center; }
.site-hero h1 { font-family: var(--font-editorial); font-size: 56px; line-height: 1.05; font-weight: 500; letter-spacing: -.015em; color: #ffffff; max-width: 14ch; text-wrap: balance; }
.site-hero .site-lead { color: var(--lateral-texto-2); margin-top: var(--espaco-24); max-width: 52ch; }
.site-hero .acoes { display: flex; gap: var(--espaco-12); margin-top: var(--espaco-32); flex-wrap: wrap; }
.site-hero .nota { margin-top: var(--espaco-24); font-size: 13.5px; color: var(--lateral-silencio); }
.site-hero .prova { background: var(--papel); color: var(--tinta); border: 1px solid var(--linha); padding: var(--espaco-20); display: flex; flex-direction: column; gap: var(--espaco-12); }
.site-hero .prova .cabeca-parecer { display: flex; align-items: center; gap: 14px; padding-bottom: var(--espaco-12); border-bottom: 1px solid var(--linha); }
.site-hero .prova .cabeca-parecer b { font-size: 15px; display: block; }
.site-hero .prova .cabeca-parecer span { font-size: 12.5px; color: var(--tinta-3); }
@media (max-width: 900px) { .site-hero .site-contem { grid-template-columns: 1fr; } .site-hero h1 { font-size: 40px; } }

/* arco do hero: único movimento espontâneo */
.selo-vivo .arco { stroke-dasharray: 160; stroke-dashoffset: 160; animation: ls-arco var(--duracao-selo) cubic-bezier(.2,.7,.2,1) .2s forwards; }
@keyframes ls-arco { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .selo-vivo .arco { stroke-dashoffset: 0; animation: none; } }

/* passos (sequência real: subir, confirmar, receber) */
.site-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-24); counter-reset: passo; }
.site-passo { background: var(--superficie); border: 1px solid var(--linha); padding: var(--espaco-24); display: flex; flex-direction: column; gap: var(--espaco-12); counter-increment: passo; }
.site-passo .indice { width: 32px; height: 32px; border-radius: var(--raio-pilula); border: 2px solid var(--petroleo); color: var(--petroleo);
                      display: grid; place-items: center; font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
[data-theme="escuro"] .site-passo .indice { border-color: var(--ciano); color: var(--ciano); }
.site-passo .indice::before { content: counter(passo); }
.site-passo h3 { font-family: var(--font-ui); font-size: 19px; font-weight: 600; }
.site-passo p { font-size: 15.5px; color: var(--tinta-2); }
.site-passo .detalhe { font-size: 13.5px; color: var(--tinta-3); border-top: 1px dashed var(--linha-2); padding-top: var(--espaco-12); margin-top: auto; }
@media (max-width: 860px) { .site-passos { grid-template-columns: 1fr; } }

/* prova: um achado real, lado a lado com a explicação */
.site-prova { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--espaco-64); align-items: start; }
.site-prova .achados { gap: var(--espaco-12); }
.site-prova ul { margin: var(--espaco-24) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--espaco-12); }
.site-prova li { display: flex; gap: var(--espaco-12); font-size: 15.5px; color: var(--tinta-2); }
.site-prova li svg { flex-shrink: 0; margin-top: 4px; }
@media (max-width: 900px) { .site-prova { grid-template-columns: 1fr; } }

/* planos */
.site-planos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espaco-24); align-items: stretch; }
.site-plano { background: var(--superficie); border: 1px solid var(--linha); padding: var(--espaco-32) var(--espaco-24); display: flex; flex-direction: column; gap: var(--espaco-16); }
.site-plano.recomendado { border-color: var(--acao); box-shadow: inset 0 0 0 1px var(--acao); }
.site-plano .nome { font-family: var(--font-editorial); font-size: 24px; font-weight: 600; }
.site-plano .para { font-size: 14px; color: var(--tinta-3); }
.site-plano .preco { font-size: 36px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; font-family: var(--font-ui); }
.site-plano .preco small { font-size: 14px; font-weight: 400; color: var(--tinta-3); margin-left: 4px; }
.site-plano ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--espaco-8); font-size: 15px; color: var(--tinta-2); }
.site-plano li { display: flex; gap: 10px; align-items: flex-start; }
.site-plano li svg { flex-shrink: 0; margin-top: 4px; }
.site-plano .botao { margin-top: auto; }
@media (max-width: 860px) { .site-planos { grid-template-columns: 1fr; } }

/* chamada final */
.site-chamada { background: var(--petroleo); color: var(--lateral-texto); padding-block: var(--espaco-120); }
.site-chamada .site-contem { display: flex; flex-direction: column; align-items: flex-start; gap: var(--espaco-24); }
.site-chamada h2 { font-family: var(--font-editorial); font-size: 40px; line-height: 1.1; font-weight: 500; color: #ffffff; max-width: 18ch; }
.site-chamada p { color: var(--lateral-texto-2); max-width: 52ch; font-size: 18px; }

/* rodapé */
.site-rodape { background: var(--papel); border-top: 1px solid var(--linha); padding-block: var(--espaco-48); font-size: 14px; color: var(--tinta-3); }
.site-rodape .site-contem { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--espaco-32); }
.site-rodape .coluna { display: flex; flex-direction: column; gap: var(--espaco-8); }
.site-rodape .coluna b { color: var(--tinta); font-weight: 600; margin-bottom: var(--espaco-4); }
.site-rodape a { color: var(--tinta-2); }
.site-rodape .marca { padding: 0; color: var(--tinta); margin-bottom: var(--espaco-8); }
.site-rodape .marca .nome { color: var(--tinta); }
.site-rodape .marca .nome b { color: var(--destaque); }
.site-rodape .legal { grid-column: 1 / -1; border-top: 1px solid var(--linha-2); padding-top: var(--espaco-16); display: flex; justify-content: space-between; gap: var(--espaco-16); flex-wrap: wrap; font-size: 13px; }
@media (max-width: 860px) { .site-rodape .site-contem { grid-template-columns: 1fr 1fr; } }