/* Sistema de Licitações: estilo plano, calmo e denso. O único elemento marcante é a régua de validade. */

:root {
  --papel: #F5F7FA;
  --folha: #FFFFFF;
  --grafite: #1C232B;
  --grafite-2: #5B6673;
  --linha: #D8DEE6;
  --tinta: #1F4E79;
  --tinta-clara: #E8EFF7;
  --sobre-tinta: #FFFFFF;
  --deferido: #1E7B4F;   --deferido-bg: #E6F4EC;   --deferido-tx: #1E7B4F;
  --atencao: #A86A12;    --atencao-bg: #FBF1DF;    --atencao-tx: #8A5509;
  --indeferido: #B42318; --indeferido-bg: #FCE9E7; --indeferido-tx: #B42318;
  --neutro: #6B7480;     --neutro-bg: #EEF1F4;     --neutro-tx: #566070;
  --fonte-titulo: "Bahnschrift", "DIN Alternate", "Segoe UI", system-ui, sans-serif;
  --fonte-texto: "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --sombra: 0 8px 28px rgba(16, 24, 40, .18);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #0E1621;
    --folha: #15202C;
    --grafite: #E4E9EF;
    --grafite-2: #9AA7B5;
    --linha: #263445;
    --tinta: #8DB4E2;
    --tinta-clara: #1B2B3D;
    --sobre-tinta: #0E1621;
    --deferido: #5CC08C;   --deferido-bg: #12291F;   --deferido-tx: #5CC08C;
    --atencao: #E0A543;    --atencao-bg: #2D2312;    --atencao-tx: #E0A543;
    --indeferido: #F07A6E; --indeferido-bg: #33191A; --indeferido-tx: #F07A6E;
    --neutro: #9AA7B5;     --neutro-bg: #1D2A38;     --neutro-tx: #9AA7B5;
    --sombra: 0 8px 28px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papel: #0E1621;
  --folha: #15202C;
  --grafite: #E4E9EF;
  --grafite-2: #9AA7B5;
  --linha: #263445;
  --tinta: #8DB4E2;
  --tinta-clara: #1B2B3D;
  --sobre-tinta: #0E1621;
  --deferido: #5CC08C;   --deferido-bg: #12291F;   --deferido-tx: #5CC08C;
  --atencao: #E0A543;    --atencao-bg: #2D2312;    --atencao-tx: #E0A543;
  --indeferido: #F07A6E; --indeferido-bg: #33191A; --indeferido-tx: #F07A6E;
  --neutro: #9AA7B5;     --neutro-bg: #1D2A38;     --neutro-tx: #9AA7B5;
  --sombra: 0 8px 28px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--grafite);
  font: 14px/1.5 var(--fonte-texto);
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: 600; margin: 0; line-height: 1.2; }
h1 { font-size: 26px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
p { margin: 0 0 8px; }
a { color: var(--tinta); }
hr { border: 0; border-top: 1px solid var(--linha); margin: 8px 0; width: 100%; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.pular { position: absolute; left: -999px; top: 0; background: var(--tinta); color: var(--sobre-tinta); padding: 8px 12px; z-index: 100; }
.pular:focus { left: 8px; top: 8px; }
.mudo { color: var(--grafite-2); }
.pequeno { font-size: 12px; }
.num { font-family: var(--fonte-titulo); font-variant-numeric: tabular-nums; }
.dir { text-align: right; }
.oculto { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Casca */
.casca { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
.menu { background: var(--folha); border-right: 1px solid var(--linha); padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.menu-marca { font-family: var(--fonte-titulo); font-size: 16px; font-weight: 600; color: var(--tinta); padding: 4px 8px 16px; word-break: break-word; }
.menu nav { display: flex; flex-direction: column; gap: 2px; }
.menu nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 6px 10px; border-radius: 4px; color: var(--grafite); text-decoration: none; }
.menu nav a:hover { background: var(--tinta-clara); }
.menu nav a[aria-current="page"] { background: var(--tinta-clara); color: var(--tinta); font-weight: 600; }
.fase { font-size: 11px; color: var(--grafite-2); font-weight: 400; }
.menu-fundo { display: none; }
.principal { min-width: 0; display: flex; flex-direction: column; }
.barra { display: flex; align-items: center; gap: 12px; padding: 10px 24px; background: var(--folha); border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 20; }
.barra-empresa { display: flex; align-items: center; gap: 8px; color: var(--grafite-2); }
.barra-empresa select { max-width: 260px; }
.barra-comando { flex: 1; min-width: 0; }
.barra-comando input { width: 100%; }
main { padding: 24px; max-width: 1280px; width: 100%; }
main:focus { outline: none; }

/* Campos e botões */
input[type="text"], input[type="search"], input[type="number"], input[type="date"], input[type="datetime-local"], input[type="email"], input[type="tel"], input[type="password"], select, textarea {
  font: inherit; color: var(--grafite); background: var(--folha);
  border: 1px solid var(--linha); border-radius: 4px; padding: 5px 10px; min-height: 32px;
}
textarea { width: 100%; resize: vertical; }
input::placeholder { color: var(--grafite-2); opacity: 1; }
input:disabled, select:disabled { opacity: .6; }
.btn {
  font: inherit; font-weight: 600; min-height: 32px; padding: 5px 14px; border-radius: 4px;
  border: 1px solid var(--linha); background: var(--folha); color: var(--grafite); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
}
.btn:hover { background: var(--tinta-clara); border-color: var(--tinta); }
.btn-primario { background: var(--tinta); border-color: var(--tinta); color: var(--sobre-tinta); }
.btn-primario:hover { background: var(--tinta); filter: brightness(1.1); }
.btn-perigo { color: var(--indeferido-tx); }
.btn-perigo:hover { background: var(--indeferido-bg); border-color: var(--indeferido); }
.btn-link { background: none; border: 0; color: var(--tinta); padding: 5px 6px; font-weight: 500; text-decoration: underline; }
.btn-link:hover { background: none; }
.barra .btn-menu { display: none; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-pequeno { padding: 2px 10px; font-size: 13px; }

/* Estrutura de tela */
.tela-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tela-cab p { margin: 4px 0 0; color: var(--grafite-2); }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.painel { background: var(--folha); border: 1px solid var(--linha); border-radius: 6px; padding: 16px; margin-bottom: 16px; }
.painel > h3, .painel > h2 { margin-bottom: 8px; }
.grade { display: grid; gap: 12px; }
.grade-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px 16px; }
.campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.campo > span { font-size: 13px; color: var(--grafite-2); }
.campo input, .campo select, .campo textarea { width: 100%; }
.campo-largo { grid-column: 1 / -1; }
.campo-ajuda { font-size: 12px; color: var(--grafite-2); }
.impugnacao { border-left: 4px solid var(--indeferido); background: var(--indeferido-bg); }
.impugnacao h3 { color: var(--indeferido-tx); }
.impugnacao .ponto { border-bottom-color: rgba(0, 0, 0, .12); }
.ponto .base-legal { font-size: 13px; font-weight: 600; margin-top: 2px; }
.ponto .orientacao { font-size: 13px; margin-top: 2px; }
.ref-tempos { margin: 0; padding-left: 18px; }
.ref-tempos li { margin: 4px 0; }
.vazio { border: 1px dashed var(--linha); border-radius: 6px; padding: 32px 16px; text-align: center; color: var(--grafite-2); }
.vazio h3 { color: var(--grafite); margin-bottom: 4px; }
.vazio .btn { margin-top: 12px; }

/* Faixas de aviso */
.faixa { border: 1px solid; border-radius: 6px; padding: 8px 12px; margin-bottom: 12px; }
.faixa-atencao { background: var(--atencao-bg); border-color: var(--atencao); color: var(--atencao-tx); }
.faixa-erro { background: var(--indeferido-bg); border-color: var(--indeferido); color: var(--indeferido-tx); }
.faixa-ok { background: var(--deferido-bg); border-color: var(--deferido); color: var(--deferido-tx); }
.faixa-info { background: var(--tinta-clara); border-color: var(--tinta); color: var(--grafite); }
.faixa .acoes { margin-top: 6px; }

/* Etiquetas de situação */
.etq { display: inline-block; padding: 0 8px; border-radius: 4px; font-size: 12px; font-weight: 600; line-height: 20px; white-space: nowrap; background: var(--neutro-bg); color: var(--neutro-tx); }
.etq-ok { background: var(--deferido-bg); color: var(--deferido-tx); }
.etq-atencao { background: var(--atencao-bg); color: var(--atencao-tx); }
.etq-erro { background: var(--indeferido-bg); color: var(--indeferido-tx); }

/* Tabelas */
.rolagem { overflow-x: auto; border: 1px solid var(--linha); border-radius: 6px; background: var(--folha); max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--linha); vertical-align: top; }
th { font-weight: 600; color: var(--grafite-2); background: var(--papel); white-space: nowrap; position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--tinta-clara); }
td.acoes-cel { white-space: nowrap; min-width: 0; }
td.acoes-cel .btn { margin: 0 4px 0 0; }
th, td { min-width: 0; }
td:first-child { min-width: 120px; }
.recorte { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Abas */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: 16px; overflow-x: auto; }
.abas button { font: inherit; background: none; border: 0; border-bottom: 3px solid transparent; padding: 6px 14px; min-height: 36px; cursor: pointer; color: var(--grafite-2); white-space: nowrap; }
.abas button:hover { color: var(--grafite); }
.abas button[aria-selected="true"] { color: var(--tinta); border-bottom-color: var(--tinta); font-weight: 600; }

/* Régua de validade */
.regua { min-width: 150px; max-width: 240px; --c: var(--neutro); --ct: var(--neutro-tx); }
.regua-ok { --c: var(--deferido); --ct: var(--deferido-tx); }
.regua-atencao { --c: var(--atencao); --ct: var(--atencao-tx); }
.regua-erro { --c: var(--indeferido); --ct: var(--indeferido-tx); }
.regua-trilho { position: relative; height: 6px; margin: 6px 0 5px; background: var(--linha); border-radius: 3px; }
.regua-trilho.sem { background: transparent; border-top: 1px dashed var(--grafite-2); height: 0; margin: 9px 0 8px; border-radius: 0; }
.regua-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--c); border-radius: 3px; }
.regua-marca { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; background: var(--grafite); border-radius: 1px; }
.regua-marca.sessao { background: var(--tinta); width: 3px; margin-left: -1.5px; top: -6px; bottom: -6px; }
.regua-texto { font-size: 12px; color: var(--ct); font-weight: 600; line-height: 1.3; }
.regua-nota { font-size: 12px; color: var(--grafite-2); }

/* Painel inicial */
.blocos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-bottom: 16px; }
.bloco { display: block; background: var(--folha); border: 1px solid var(--linha); border-radius: 6px; padding: 16px; color: var(--grafite); text-decoration: none; min-height: 112px; }
.bloco:hover { border-color: var(--tinta); background: var(--tinta-clara); }
.bloco .valor { font-family: var(--fonte-titulo); font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.bloco .rotulo { color: var(--grafite-2); margin-top: 4px; }
.bloco.alerta .valor { color: var(--indeferido-tx); }
.bloco.atencao .valor { color: var(--atencao-tx); }
.bloco ul { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; }
.passos { counter-reset: p; list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.passos li { counter-increment: p; display: flex; gap: 12px; align-items: center; padding: 8px 0; border-top: 1px solid var(--linha); }
.passos li::before { content: counter(p); font-family: var(--fonte-titulo); font-size: 20px; color: var(--tinta); width: 28px; }

/* Radar */
.filtros { display: grid; gap: 12px; }
.ufs { display: flex; flex-wrap: wrap; gap: 4px; }
.ufs label, .mods label { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 32px; padding: 0 6px; border: 1px solid var(--linha); border-radius: 4px; cursor: pointer; background: var(--folha); font-size: 13px; }
.ufs label:has(input:checked), .mods label:has(input:checked) { background: var(--tinta-clara); border-color: var(--tinta); color: var(--tinta); font-weight: 600; }
.ufs label:has(input:focus-visible), .mods label:has(input:focus-visible) { outline: 2px solid var(--tinta); outline-offset: 2px; }
.ufs input, .mods input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mods { display: flex; flex-wrap: wrap; gap: 4px; }
.mods label { padding: 0 12px; }
.buscas-salvas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.busca-salva { display: inline-flex; border: 1px solid var(--linha); border-radius: 4px; background: var(--folha); }
.busca-salva .btn { border: 0; }
.resultado { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.resultado:last-child { border-bottom: 0; }
.resultado .objeto { font-weight: 600; margin-bottom: 4px; }
.resultado .meta { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--grafite-2); font-size: 13px; }
.resultado .lado { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.resultado .prazo { font-weight: 600; font-size: 13px; }
.prazo-ok { color: var(--grafite); }
.prazo-atencao { color: var(--atencao-tx); }
.prazo-erro { color: var(--indeferido-tx); }
.paginacao { display: flex; gap: 8px; align-items: center; justify-content: center; padding-top: 12px; }
.gaveta { position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); background: var(--folha); border-left: 1px solid var(--linha); box-shadow: var(--sombra); z-index: 40; overflow-y: auto; padding: 20px; animation: entra .18s ease-out; }
.gaveta-fundo { position: fixed; inset: 0; background: rgba(0, 0, 0, .3); z-index: 39; }
dl.dados { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 12px; margin: 0; }
dl.dados dt { color: var(--grafite-2); }
dl.dados dd { margin: 0; word-break: break-word; }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { padding: 6px 0; border-bottom: 1px solid var(--linha); display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.lista-simples li:last-child { border-bottom: 0; }

/* Soltar arquivos */
.soltar { border: 2px dashed var(--linha); border-radius: 6px; padding: 24px 16px; text-align: center; background: var(--folha); margin-bottom: 16px; }
.soltar.ativo { border-color: var(--tinta); background: var(--tinta-clara); }
.progresso { height: 8px; background: var(--linha); border-radius: 4px; overflow: hidden; margin: 12px auto 0; max-width: 420px; }
.progresso > div { height: 100%; background: var(--tinta); width: 0; transition: width .2s; }

/* Diagnóstico */
.indice-geral { display: flex; align-items: baseline; gap: 12px; }
.indice-geral .num { font-size: 34px; }
.area-linha { display: grid; grid-template-columns: 200px minmax(0, 1fr) 90px; gap: 12px; align-items: center; padding: 4px 0; }
.barra-area { height: 8px; background: var(--linha); border-radius: 4px; overflow: hidden; }
.barra-area > div { height: 100%; background: var(--c, var(--tinta)); }
.item-diag { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(150px, 220px) minmax(0, 1.2fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.item-diag:last-child { border-bottom: 0; }
.item-diag .nome { font-weight: 600; }

/* Certames */
.etapas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 16px; }
.etapa { border: 1px solid var(--linha); border-left-width: 4px; border-radius: 4px; padding: 8px 10px; background: var(--folha); min-width: 0; overflow-wrap: anywhere; }
.etapa .nome { font-weight: 600; }
.etapa .st { font-size: 12px; margin-top: 2px; }
.etapa.e-ok { border-left-color: var(--deferido); }
.etapa.e-atencao { border-left-color: var(--atencao); }
.etapa.e-erro { border-left-color: var(--indeferido); }
.etapa.e-neutro { border-left-color: var(--neutro); }
.decisao { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.arvore, .arvore ul { list-style: none; margin: 0; padding-left: 18px; }
.arvore { padding-left: 0; font-size: 13px; }
.arvore li { padding: 2px 0; }
.arvore .pasta { font-weight: 600; }
.ponto { padding: 8px 0; border-bottom: 1px solid var(--linha); }
.ponto .trecho { color: var(--grafite-2); font-size: 13px; margin-top: 2px; }

/* Modal */
dialog.modal { border: 1px solid var(--linha); border-radius: 6px; padding: 0; background: var(--folha); color: var(--grafite); box-shadow: var(--sombra); width: min(720px, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
dialog.modal::backdrop { background: rgba(0, 0, 0, .4); }
dialog.modal[open] { animation: entra .16s ease-out; display: flex; flex-direction: column; }
.modal-cab { padding: 16px 20px 8px; }
.modal-corpo { padding: 8px 20px 16px; overflow-y: auto; }
.modal-pe { padding: 12px 20px; border-top: 1px solid var(--linha); display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

/* Avisos */
.avisos { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 60; max-width: min(420px, calc(100vw - 32px)); }
.aviso { background: var(--folha); border: 1px solid var(--linha); border-left: 4px solid var(--tinta); border-radius: 6px; padding: 10px 14px; box-shadow: var(--sombra); animation: entra .18s ease-out; }
.aviso-ok { border-left-color: var(--deferido); }
.aviso-erro { border-left-color: var(--indeferido); }
.aviso-atencao { border-left-color: var(--atencao); }

.carregando { color: var(--grafite-2); padding: 24px 0; }
.rodape-nota { margin-top: 24px; color: var(--grafite-2); font-size: 12px; }

@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Telas estreitas */
@media (max-width: 900px) {
  .casca { grid-template-columns: minmax(0, 1fr); }
  .menu { position: fixed; left: 0; top: 0; bottom: 0; width: 260px; z-index: 50; transform: translateX(-100%); visibility: hidden; box-shadow: var(--sombra); }
  .casca.menu-aberto .menu { transform: none; visibility: visible; transition: transform .18s; }
  .casca.menu-aberto .menu-fundo { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 45; }
  .barra .btn-menu { display: inline-flex; }
  .barra { flex-wrap: wrap; padding: 8px 12px; }
  .barra-comando { order: 5; flex-basis: 100%; }
  main { padding: 16px 12px; }
  .grade-3, .grade-2 { grid-template-columns: minmax(0, 1fr); }
  .resultado { grid-template-columns: minmax(0, 1fr); }
  .item-diag { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .area-linha { grid-template-columns: 120px minmax(0, 1fr) 70px; }
  dl.dados { grid-template-columns: 110px minmax(0, 1fr); }
}

/* Menu "Mais" */
.menu-mais { position: fixed; z-index: 60; min-width: 150px; background: var(--folha); border: 1px solid var(--linha); border-radius: 6px; box-shadow: var(--sombra); padding: 4px; display: flex; flex-direction: column; }
.menu-mais-item { font: inherit; text-align: left; background: none; border: 0; border-radius: 4px; padding: 6px 10px; min-height: 32px; cursor: pointer; color: var(--grafite); }
.menu-mais-item:hover, .menu-mais-item:focus-visible { background: var(--tinta-clara); outline: none; }
.menu-mais-item:focus-visible { box-shadow: inset 0 0 0 2px var(--tinta); }
.menu-mais-item.perigo { color: var(--indeferido-tx); }

/* Pendências, certame v0.2 */
.pend-barra { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 12px; }
.pend-barra label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
tr.resolvida td { color: var(--grafite-2); }
.lista-criticas { list-style: none; margin: 0; padding: 0; }
.lista-criticas li { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.lista-criticas li:last-child { border-bottom: 0; }
.cert-edicao { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.msg-etapa { font-size: 12px; color: var(--grafite-2); margin-top: 4px; }
.arvore .tam { color: var(--grafite-2); font-size: 12px; margin-left: 6px; }

/* v0.3: radar da empresa e disputa */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 4px; background: var(--tinta-clara); color: var(--tinta); border: 1px solid var(--tinta); font-size: 13px; font-weight: 600; }
.tag button { font: inherit; line-height: 1; background: none; border: 0; color: inherit; cursor: pointer; min-width: 24px; min-height: 24px; border-radius: 4px; }
.tag button:hover { background: var(--folha); }
.tags-discretas { margin-top: 6px; gap: 4px; }
.tag-motivo { font-size: 12px; padding: 0 8px; line-height: 20px; border-radius: 4px; background: var(--neutro-bg); color: var(--neutro-tx); }
.faixa-fixa { font-weight: 600; }
.params { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; }
.param-valor { font-size: 22px; font-weight: 600; }
.marca-linha { display: flex; align-items: center; gap: 8px; min-height: 32px; margin: 12px 0 4px; }
th.dir, td.dir { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Tela Modelos (somente leitura) ---------- */
.modelo-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; color: var(--grafite-2); }
.modelo-meta strong { color: var(--grafite); font-weight: 600; }
.chave-modelo { display: inline-block; padding: 0 6px; border-radius: 4px; background: var(--tinta-clara); color: var(--tinta); font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap; }
.previa-modelo { background: var(--papel); border: 1px solid var(--linha); border-radius: 6px; padding: 16px 20px; max-width: 820px; line-height: 1.7; }
.previa-modelo p { margin: 10px 0; text-align: left; }
.previa-cab { color: var(--grafite-2); }
.previa-ref { margin: 8px 0; font-weight: 600; }
.previa-titulo { text-align: center; margin: 14px 0; letter-spacing: .02em; }
.previa-assin { margin-top: 24px; text-align: center; }

/* Marca CertamePRO no menu (13/10/2026): ícone + nome com o "PRO" em dourado, como no logo. */
.menu-marca { display: flex; align-items: center; gap: 10px; }
.menu-marca img { flex: none; border-radius: 7px; }
.menu-marca .pro { color: #C9850E; font-weight: inherit; }
:root[data-theme="dark"] .menu-marca .pro { color: #F2B33D; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .menu-marca .pro { color: #F2B33D; } }

/* v0.8: Diagnóstico LicitaCheck® (Método do Wilmar) e habilitação documental. Sem nota: contagens e situações. */
.a-definir { display: inline-block; padding: 0 8px; border-radius: 4px; background: var(--atencao-bg); color: var(--atencao-tx); border: 1px dashed var(--atencao); font-size: 12px; font-weight: 600; line-height: 20px; }
.contadores { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 16px; }
.contador { display: flex; flex-direction: column; min-width: 120px; padding: 10px 14px; border: 1px solid var(--linha); border-left-width: 4px; border-radius: 6px; background: var(--folha); }
.contador .num { font-size: 26px; font-weight: 600; font-family: var(--fonte-titulo); }
.contador span:last-child { font-size: 13px; color: var(--grafite-2); }
.contador-ok { border-left-color: var(--deferido); }
.contador-erro { border-left-color: var(--indeferido); }
.contador-atencao { border-left-color: var(--atencao); }
.contador-neutro { border-left-color: var(--neutro); }
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cartao-dim { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 6px; background: var(--folha); color: inherit; text-decoration: none; min-width: 0; }
.cartao-dim:hover { border-color: var(--tinta); background: var(--tinta-clara); }
.cartao-dim-topo { display: flex; gap: 8px; align-items: baseline; }
.cartao-dim-topo strong { color: var(--tinta); }
.cartao-dim-linha { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.dl-diag { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.dl-diag dt { color: var(--grafite-2); }
.dl-diag dd { margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.chip { font: inherit; display: inline-block; padding: 3px 12px; border: 1px solid var(--linha); border-radius: 14px; background: var(--folha); color: var(--grafite); text-decoration: none; cursor: pointer; min-height: 28px; }
.chip:hover { border-color: var(--tinta); }
.chip-ativo { background: var(--tinta); border-color: var(--tinta); color: var(--sobre-tinta); }
.sub-titulo { font-size: 17px; margin: 24px 0 8px; }
.criterio.confirmado { border-left: 4px solid var(--deferido); }
.criterio-topo { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; align-items: baseline; }
.criterio-topo h3 { margin: 0; }
.pergunta { font-style: italic; color: var(--grafite); border-left: 3px solid var(--linha); padding-left: 10px; margin: 8px 0; }
.sugestao { border: 1px dashed var(--tinta); background: var(--tinta-clara); border-radius: 6px; padding: 8px 12px; margin: 8px 0; }
.verificacao { border: 1px solid var(--linha); border-radius: 6px; background: var(--folha); margin-bottom: 8px; }
.verificacao.confirmado { border-left: 4px solid var(--deferido); }
.verificacao > summary { cursor: pointer; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.verificacao .v-id { font-weight: 600; color: var(--tinta); }
.verificacao .v-res { color: var(--grafite-2); font-size: 13px; }
.verificacao-corpo { padding: 4px 12px 12px; }
.regras { margin: 4px 0 8px; padding-left: 18px; }
.evid li { font-size: 13px; }
.pergunta-bloco textarea { width: 100%; }

/* Quadro de certames (M2) */
.quadro { display: grid; grid-template-columns: repeat(7, minmax(170px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.quadro-col { background: var(--tinta-clara); border: 1px solid var(--linha); border-radius: 6px; padding: 8px; min-height: 180px; }
.quadro-col.alvo { outline: 2px dashed var(--tinta); }
.quadro-cab { font-family: var(--fonte-titulo); font-weight: 600; margin-bottom: 8px; }
.quadro-card { background: var(--folha); border: 1px solid var(--linha); border-radius: 6px; padding: 8px; margin-bottom: 8px; cursor: grab; display: grid; gap: 4px; min-width: 0; overflow: hidden; }
.quadro-card > * { min-width: 0; overflow-wrap: anywhere; }
.quadro-card .recorte { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quadro-card.arrastando { opacity: .5; }
.quadro-pe { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; }
.quadro-pe select { max-width: 100%; min-width: 0; }

/* ---------- Login e usuário (modo servidor, backlog C1) ---------- */
.login { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: var(--papel); }
.login-caixa { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 14px; padding: 28px 24px;
  background: var(--folha); border: 1px solid var(--linha); border-radius: 10px; box-shadow: var(--sombra); }
.login-caixa h1 { margin: 0; font-family: var(--fonte-titulo); font-size: 22px; }
.login-caixa .btn-primario { padding: 9px 14px; }
.login-marca { display: flex; align-items: center; gap: 10px; font-family: var(--fonte-titulo); font-size: 18px; color: var(--tinta); }
.login-erro { margin: 0; min-height: 1.2em; color: var(--indeferido-tx); font-size: 14px; }
.login-erro:empty { min-height: 0; }
.login-ajuda { margin: 0; font-size: 13px; color: var(--grafite-2); }
.barra-usuario { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.barra-usuario-nome { max-width: 180px; overflow: hidden; text-overflow: ellipsis; color: var(--grafite-2); }
.usuario-empresas { border: 1px solid var(--linha); border-radius: 8px; padding: 8px 12px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 12px; max-height: 260px; overflow: auto; }
.usuario-empresas legend { font-size: 13px; color: var(--grafite-2); padding: 0 4px; }
.usuario-empresa { display: flex; align-items: center; gap: 6px; min-width: 0; }
@media (max-width: 720px) { .barra-usuario-nome { display: none; } }
/* hidden vale mesmo onde a regra da classe define display (menu, barra, casca). */
.casca[hidden], .menu nav a[hidden], .barra-comando[hidden], .usuario-empresas[hidden] { display: none !important; }

/* ---------- v0.10: usabilidade por fluxo ---------- */

/* Menu lateral em seções, na ordem do fluxo; "em breve" discreto no fim. */
.menu-secao { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--grafite-2); padding: 12px 10px 2px; }
.menu nav a.menu-breve { min-height: 30px; font-size: 13px; color: var(--grafite-2); }
.menu nav a.menu-breve .fase { border: 1px solid var(--linha); border-radius: 4px; padding: 0 5px; line-height: 16px; }
.menu nav a:focus-visible { outline-offset: -2px; }

/* Próximo passo: o que fazer agora e o caminho do fluxo. */
.proximo { border: 1px solid var(--linha); border-left: 5px solid var(--tinta); border-radius: 6px; background: var(--folha); padding: 14px 16px; margin-bottom: 16px; }
.proximo-atencao { border-left-color: var(--atencao); }
.proximo-erro { border-left-color: var(--indeferido); }
.proximo-ok { border-left-color: var(--deferido); }
.proximo-topo { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.proximo-texto { min-width: 0; flex: 1 1 320px; }
.proximo-rotulo { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--grafite-2); }
.proximo-titulo { font-family: var(--fonte-titulo); font-size: 19px; font-weight: 600; line-height: 1.25; margin: 2px 0; }
.proximo-erro .proximo-titulo { color: var(--indeferido-tx); }
.proximo-atencao .proximo-titulo { color: var(--atencao-tx); }
.proximo-ok .proximo-titulo { color: var(--deferido-tx); }
.proximo-desc { margin: 0; color: var(--grafite-2); }
.proximo-acoes { flex: 0 1 auto; }
.fluxo { list-style: none; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--linha); display: flex; flex-wrap: wrap; gap: 4px 6px; counter-reset: f; }
.fluxo-passo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--grafite-2); padding: 2px 8px 2px 4px; border-radius: 14px; }
.fluxo-passo + .fluxo-passo::before { content: ""; width: 14px; height: 1px; background: var(--linha); margin-right: 6px; }
.fluxo-marca { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--neutro); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: none; }
.fluxo-passo.feito .fluxo-marca { background: var(--deferido); border-color: var(--deferido); color: var(--folha); }
.fluxo-passo.falta .fluxo-marca { border-color: var(--atencao); border-style: dashed; }
.fluxo-passo.atual { background: var(--tinta-clara); color: var(--grafite); font-weight: 600; }
.fluxo-passo.atual .fluxo-marca { border: 2px solid var(--tinta); border-style: solid; }
.fluxo-passo a, .fluxo-passo .btn-link { color: inherit; text-decoration: none; padding: 2px 0; font: inherit; min-height: 24px; }
.fluxo-passo a:hover, .fluxo-passo .btn-link:hover { text-decoration: underline; color: var(--tinta); }

/* Resumo do certame numa linha + detalhes recolhidos. */
.resumo-certame { padding: 12px 16px; }
.resumo-linha { display: flex; flex-wrap: wrap; gap: 8px 28px; }
.resumo-item { display: flex; flex-direction: column; min-width: 0; max-width: 100%; }
.resumo-item .mudo { font-size: 12px; }
.resumo-item strong { font-weight: 600; overflow-wrap: anywhere; }
.mais-dados { margin-top: 8px; }
.mais-dados > summary { cursor: pointer; color: var(--tinta); font-size: 13px; min-height: 28px; display: inline-flex; align-items: center; }
.mais-dados[open] > summary { margin-bottom: 8px; }

/* Ações do certame em grupos (Edital, Pacote, Entregar). */
.barra-acoes { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 16px; align-items: center; }
.grupo-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.grupo-acoes-rotulo { font-size: 12px; font-weight: 600; color: var(--grafite-2); text-transform: uppercase; letter-spacing: .05em; margin-right: 2px; }

/* Abas em dois níveis: etapas do fluxo e, dentro delas, as abas. */
.abas-caixa { margin-bottom: 16px; }
.abas-caixa .abas { margin-bottom: 0; }
.abas button:focus-visible { outline-offset: -3px; }
.abas-grupo button { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; padding: 8px 14px; }
.abas-num { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--neutro-bg); color: var(--neutro-tx); font-size: 12px; font-weight: 700; }
.abas-grupo button[aria-selected="true"] .abas-num { background: var(--tinta); color: var(--sobre-tinta); }
.abas-cont { font-size: 12px; font-weight: 700; line-height: 18px; padding: 0 6px; border-radius: 9px; background: var(--atencao-bg); color: var(--atencao-tx); }
.abas-sub { background: var(--folha); border: 1px solid var(--linha); border-top: 0; border-radius: 0 0 6px 6px; padding: 0 6px; }
.abas-sub button { font-size: 13px; min-height: 34px; padding: 6px 12px; }

.painel-cab { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 8px; }
.painel-cab h3 { margin: 0; }
.etapas-linha { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: 12px; }
.etapa-mini { font-size: 13px; }
.vazio-acoes { justify-content: center; margin-top: 12px; }
.vazio-acoes .btn { margin-top: 0; }
.quebra { overflow-wrap: anywhere; }
a.etq { text-decoration: none; }
a.etq:hover { text-decoration: underline; }

/* Atalhos da empresa (documentos, diagnóstico) */
.atalhos { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: -4px 0 14px; font-size: 13px; }

/* Texto longo não empurra a página para o lado. */
.bloco ul li, .arvore a, .arvore .pasta { overflow-wrap: anywhere; }
.faixa, .msg-etapa, .ajuda, .proximo-desc, .vazio p { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .barra { gap: 8px; }
  .barra-empresa { flex: 1 1 0; min-width: 0; }
  .barra-empresa > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .barra-empresa select { width: 100%; max-width: none; min-width: 0; }
  .proximo-titulo { font-size: 17px; }
  .grupo-acoes-rotulo { flex-basis: 100%; }
  .abas-grupo button { font-size: 14px; padding: 8px 10px; }
  .fluxo-passo + .fluxo-passo::before { display: none; }
}
@media (max-width: 600px) {
  .etq { white-space: normal; }
  .tela-cab h1 { font-size: 22px; overflow-wrap: anywhere; }
  .tela-cab p { overflow-wrap: anywhere; }
  .lista-criticas li { flex-direction: column; gap: 4px; }
  .lista-criticas li > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .blocos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bloco { min-height: 0; padding: 12px; }
  .bloco .valor { font-size: 28px; }
  .bloco ul { display: none; }
}
