/* HostMind Compras — sistemul vizual (tokenii din test/fixtures/tokeni.json). Fără CDN: fontul e local, CSP-ul rămâne „self”.
   Text doar cu --text / --text-2 / --action / --signal-text pe --canvas / --surface / --selected / --signal-surface (toate ≥7:1).
   --control-boundary (3,86:1) doar pe chenare, niciodată pe text. Scara 13/16/20/25/40 la 20 px de bază (1rem = 20 px la 1440). */
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/portal/fonts/atkinson-hyperlegible-next-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/portal/fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/portal/fonts/atkinson-hyperlegible-next-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Atkinson Hyperlegible Next"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/portal/fonts/atkinson-hyperlegible-next-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --canvas: #F6F4EE; --surface: #FFFFFF; --text: #172E2A; --text-2: #43534D; --action: #06594F;
  --signal-text: #8C3124; --signal-decorative: #B94836; --control-boundary: #73867D;
  --separator: rgba(23, 46, 42, 0.09); --selected: #F1F6F3; --signal-surface: #FFF8F5;
  --t-1: 0.65rem; --t0: 0.8rem; --t1: 1rem; --t2: 1.25rem; --t3: 2rem; /* 13 / 16 / 20 / 25 / 40 px */
  --alvo: max(52px, 2.6rem); --raio: 0.5rem; --gap: 1rem;
}
html { font-size: clamp(20px, 1.3vw, 32px); }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--canvas); color: var(--text);
  font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: var(--t1); font-weight: 400; line-height: 1.45; font-synthesis: none; overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; color: inherit; }
b, strong, th, h1, h2, h3, h4, label.rotulo, .forte { font-weight: 600; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--t3); line-height: 1.15; }
h2 { font-size: var(--t2); line-height: 1.25; }
h3 { font-size: var(--t1); line-height: 1.3; }
.pequeno { font-size: var(--t0); color: var(--text-2); }
.minusculo { font-size: var(--t-1); color: var(--text-2); }
.apoio { color: var(--text-2); }

:focus-visible { outline: 2px solid var(--action); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; } }

.conteudo { width: min(100% - 2rem, 80rem); margin-inline: auto; }
.pular { position: absolute; left: -9999px; top: 0; min-height: var(--alvo); min-width: var(--alvo); padding: 0 1rem; background: var(--surface); color: var(--action); border: 2px solid var(--control-boundary); border-radius: var(--raio); }
.pular:focus-visible { left: 1rem; z-index: 10; }

/* cabeçalho */
.cabecalho { border-bottom: 1px solid var(--separator); background: var(--canvas); }
.cabecalho-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem var(--gap); padding-block: 0.75rem; }
.marca { display: inline-flex; align-items: center; min-height: var(--alvo); min-width: var(--alvo); color: var(--text); text-decoration: none; font-weight: 600; }
.orgao { color: var(--text-2); font-size: var(--t0); }
.busca { position: relative; flex: 1 1 18rem; min-width: 0; max-width: 40rem; margin-inline-start: auto; }
.busca label { display: block; font-size: var(--t0); font-weight: 600; }
.usuario { display: flex; align-items: center; gap: 0.5rem; margin-inline-start: auto; font-size: var(--t0); color: var(--text-2); }
.menu { display: flex; overflow-x: auto; gap: 0.25rem; border-top: 1px solid var(--separator); }
.menu a { display: inline-flex; align-items: center; min-height: var(--alvo); min-width: var(--alvo); padding: 0 0.9rem; color: var(--text); text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
.menu a[aria-current="page"] { color: var(--action); font-weight: 600; border-bottom-color: var(--action); }
.menu a:hover { background: var(--selected); }

/* formulare */
.campo { display: grid; gap: 0.25rem; margin-block-end: var(--gap); }
.campo label { font-weight: 600; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; min-height: var(--alvo); padding: 0.4rem 0.75rem; background: var(--surface); color: var(--text); border: 2px solid var(--control-boundary); border-radius: var(--raio); }
input::placeholder { color: var(--text-2); opacity: 1; }
.erro { min-height: 0; color: var(--signal-text); font-weight: 600; }
.erro:not(:empty) { margin-block-end: var(--gap); padding: 0.5rem 0.75rem; background: var(--signal-surface); border-inline-start: 4px solid var(--signal-decorative); border-radius: var(--raio); }

/* botões e ligações-botão: alvo mínimo 52×52 */
.botao, .botao-sec { display: inline-flex; align-items: center; justify-content: center; min-height: var(--alvo); min-width: var(--alvo); padding: 0 1.25rem; border-radius: var(--raio); text-decoration: none; cursor: pointer; font-weight: 600; border: 2px solid var(--action); }
.botao { background: var(--action); color: var(--surface); }
.botao-sec { background: var(--surface); color: var(--action); border-color: var(--control-boundary); }
.botao[disabled], .botao-sec[disabled] { cursor: not-allowed; opacity: 0.7; }
form .botao { width: 100%; }
.acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* ecrane */
main { flex: 1; width: min(100% - 2rem, 80rem); margin-inline: auto; padding-block: 1.5rem 2rem; outline: none; }
main > * + * { margin-block-start: var(--gap); }
.cartao { background: var(--surface); border: 1px solid var(--separator); border-radius: calc(var(--raio) * 1.5); padding: 1.25rem; min-width: 0; }
.cartao > * + * { margin-block-start: 0.75rem; }
.grade { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 60rem) { .grade { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .grade-login { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.grade-login { max-width: 60rem; margin-inline: auto; }
.cartao-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista > li { padding-block: 1rem; border-top: 1px solid var(--separator); display: grid; gap: 0.5rem; justify-items: start; }
.lista > li:first-child { border-top: 0; padding-top: 0; }
.lista > li.destaque { padding: 1rem; border: 0; border-inline-start: 4px solid var(--signal-decorative); background: var(--signal-surface); border-radius: var(--raio); }
.selo { display: inline-block; padding: 0.15rem 0.6rem; color: var(--signal-text); background: var(--surface); border: 1px solid var(--signal-decorative); border-radius: var(--raio); font-size: var(--t0); font-weight: 600; }
.indicadores { display: grid; gap: 0.5rem; margin: 0; }
.indicadores div { padding-block: 0.5rem; border-top: 1px solid var(--separator); }
.indicadores dt { color: var(--text-2); font-size: var(--t0); }
.indicadores dd { margin: 0; font-size: var(--t3); font-weight: 600; line-height: 1.1; }
.exemplo { color: var(--text-2); }

/* lista de sugestões da pesquisa global */
.sugestoes { position: absolute; z-index: 5; left: 0; right: 0; margin: 0.25rem 0 0; padding: 0.25rem; list-style: none; background: var(--surface); border: 2px solid var(--control-boundary); border-radius: var(--raio); }
.sugestoes[hidden] { display: none; }
.sugestoes [role="option"] { display: flex; align-items: center; min-height: var(--alvo); min-width: var(--alvo); padding: 0 0.75rem; border-radius: var(--raio); cursor: pointer; }
.sugestoes [role="option"][aria-selected="true"] { background: var(--selected); color: var(--action); font-weight: 600; box-shadow: inset 0 0 0 2px var(--action); }

/* rodapé */
.rodape { border-top: 1px solid var(--separator); font-size: var(--t-1); color: var(--text-2); }
.rodape .conteudo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; padding-block: 1rem; }

@media (max-width: 40rem) { .busca { flex-basis: 100%; max-width: none; margin-inline-start: 0; } .usuario { margin-inline-start: 0; } }

/* Demandas e PCA */
.topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--gap); }
.topo > :first-child { flex: 1 1 20rem; min-width: 0; }
.topo > :first-child > * + * { margin-block-start: 0.5rem; }
.estado { display: inline-block; padding: 0.15rem 0.6rem; border: 2px solid var(--control-boundary); border-radius: var(--raio); background: var(--surface); color: var(--text); font-size: var(--t0); font-weight: 600; }
.estado-info { border-color: var(--action); background: var(--selected); color: var(--action); }
.estado-ok { border-color: var(--action); background: var(--surface); color: var(--action); }
.estado-alerta { border-color: var(--signal-decorative); background: var(--signal-surface); color: var(--signal-text); }
textarea { resize: vertical; min-height: calc(var(--alvo) * 2); line-height: 1.45; }
.botao-sec[aria-pressed="true"] { background: var(--selected); border-color: var(--action); color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.lista > li[data-id] { cursor: pointer; }
.lista > li > h3 { margin: 0; }
.painel, .painel-acao { margin-block-start: var(--gap); }
.painel-acao:empty { display: none; }
.painel { display: grid; gap: 0.25rem; padding: 1rem; background: var(--selected); border: 1px solid var(--separator); border-radius: var(--raio); }
.painel .botao, .painel .botao-sec { justify-self: start; }
.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 1rem; border-inline-start: 2px solid var(--control-boundary); display: grid; gap: var(--gap); }
.linha-tempo li { display: grid; gap: 0.15rem; }
.barra-acao { position: sticky; bottom: 0; z-index: 2; padding-block: 0.75rem; background: var(--canvas); border-top: 1px solid var(--separator); }
.barra-acao .botao { width: 100%; }
form > .cartao + .cartao, form > .cartao + .erro { margin-block-start: var(--gap); }
form > .erro { margin-block-start: var(--gap); }

/* ETP (pas 4) */
.campo[hidden] { display: none; }
textarea[name="texto"] { min-height: 14rem; }
.interruptor { display: flex; align-items: center; gap: 0.75rem; min-height: var(--alvo); cursor: pointer; font-weight: 600; }
.interruptor input { width: 1.5rem; height: 1.5rem; accent-color: var(--action); }
.texto-longo { white-space: pre-wrap; overflow-wrap: anywhere; }
progress { width: 100%; height: 0.75rem; accent-color: var(--action); }
.bloco { display: grid; gap: 0.5rem; padding-block: 1rem; border-top: 1px solid var(--separator); }
.bloco:first-of-type { border-top: 0; padding-top: 0; }

/* cesta de preços: estatísticas por item e lista de fontes */
.estat { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.5rem 1rem; margin: 0; width: 100%; }
.estat dt { color: var(--text-2); font-size: var(--t0); }
.estat dd { margin: 0; font-weight: 600; }
.fontes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; width: 100%; }
.fontes > li { display: grid; gap: 0.35rem; justify-items: start; padding: 0.75rem; border: 1px solid var(--separator); border-radius: var(--raio); }
.fontes .botao-sec { justify-self: start; }
s[data-excluida] { color: var(--text-2); }

/* pas 6: documento oficial (Mapa, Relatório), A4 paisagem na largura; tabela vira lista de cartões no telefone */
.folha { background: var(--surface); border: 1px solid var(--separator); border-radius: var(--raio); padding: 1.5rem; max-width: 56rem; margin-inline: auto; display: grid; gap: 1rem; min-width: 0; }
.folha-topo { display: flex; gap: 1rem; align-items: flex-start; }
.folha-topo img { width: 3.2rem; height: auto; flex: none; }
.folha-topo > div > * + * { margin-block-start: 0.25rem; }
.assinatura { font-weight: 600; margin: 0; }
.rolagem { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: var(--t0); }
.tabela caption { text-align: start; padding-block: 0.25rem; }
.tabela th, .tabela td { padding: 0.5rem 0.6rem; text-align: end; border-top: 1px solid var(--separator); vertical-align: top; }
.tabela thead th, .tabela tbody th { text-align: start; }
.tabela tfoot { font-weight: 600; }
@media (max-width: 48rem) {
  .tabela thead { position: absolute; left: -9999px; }
  .tabela, .tabela tbody, .tabela tfoot, .tabela tr, .tabela th, .tabela td { display: block; }
  .tabela tr { border-top: 2px solid var(--separator); padding-block: 0.5rem; }
  .tabela th, .tabela td { border-top: 0; text-align: start; padding: 0.15rem 0; }
  .tabela tfoot th { display: none; }
  .tabela [data-rotulo]::before { content: attr(data-rotulo) ": "; font-weight: 600; color: var(--text-2); }
}

/* Catálogo, Configurações, Auditoria */
input[type="file"] { width: 100%; min-height: var(--alvo); padding: 0.75rem; background: var(--surface); color: var(--text); border: 2px solid var(--control-boundary); border-radius: var(--raio); }
.acoes > .campo { flex: 1 1 12rem; margin: 0; }

/* Cesta: trei coloane (itemi · dispersie + surse · decizie); sub 75rem se stivuiesc în ordinea itemi → surse → decizie */
.cesta3 { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface); border: 1px solid var(--separator); border-radius: calc(var(--raio) * 1.5); overflow: hidden; }
.cesta3 > * { padding: 1.25rem; min-width: 0; display: grid; gap: 0.75rem; align-content: start; border-top: 1px solid var(--separator); }
.cesta3 > :first-child { border-top: 0; }
@media (min-width: 75rem) {
  .cesta3 { grid-template-columns: minmax(13rem, 15rem) minmax(0, 1fr) minmax(16rem, 19rem); }
  .cesta3 > * { border-top: 0; border-inline-start: 1px solid var(--separator); }
  .cesta3 > :first-child { border-inline-start: 0; }
}
.lista-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.item-sel { width: 100%; display: grid; gap: 0.15rem; justify-items: start; text-align: start; padding: 0.75rem; background: var(--surface); color: var(--text); border: 1px solid var(--separator); border-radius: var(--raio); cursor: pointer; }
.item-sel[aria-current="true"] { background: var(--selected); border: 2px solid var(--action); }
.alerta-txt { color: var(--signal-text); font-weight: 600; }
.grafico-caixa { position: relative; }
.grafico { display: block; width: 100%; height: auto; }
.g-rot { position: absolute; white-space: nowrap; font-size: var(--t-1); line-height: 1.2; color: var(--text); }
.g-meio { transform: translateX(-50%); }
.g-fim { transform: translateX(-100%); }
.g-tick { color: var(--text-2); }
.g-fora-txt { color: var(--signal-text); font-weight: 600; }
.grafico .g-eixo { stroke: var(--control-boundary); stroke-width: 1; }
.grafico .g-med { stroke: var(--text); stroke-width: 1.5; stroke-dasharray: 4 3; }
.grafico .g-ponto { fill: var(--action); }
.grafico .g-fora { fill: var(--signal-text); }
.grafico .g-excl { fill: var(--surface); stroke: var(--text-2); stroke-width: 2; }
.tab-fontes { width: 100%; border-collapse: collapse; }
.tab-fontes caption { position: absolute; left: -9999px; }
.tab-fontes th, .tab-fontes td { padding: 0.5rem 0.6rem; text-align: start; vertical-align: middle; border-top: 1px solid var(--separator); }
.tab-fontes thead th { font-size: var(--t0); color: var(--text-2); border-top: 0; }
.tab-fontes tbody th { font-weight: 400; }
.tab-fontes th > .pequeno { display: block; }
.tab-fontes td { overflow-wrap: normal; white-space: nowrap; }
.tab-fontes tr.fora { background: var(--signal-surface); }
.tab-fontes .sit-fora { color: var(--signal-text); font-weight: 600; }
.tab-fontes .col-acao { text-align: end; width: 1%; white-space: nowrap; }
.so-leitor { position: absolute; left: -9999px; }
.acao-linha { display: inline-flex; align-items: center; justify-content: center; min-height: var(--alvo); min-width: var(--alvo); padding: 0 0.5rem; color: var(--action); font-weight: 600; text-decoration: underline; }
.col-decisao { background: var(--surface); }
.bloco-decisao { display: grid; gap: 0.5rem; justify-items: start; }
.bloco-decisao + .bloco-decisao { border-top: 1px solid var(--separator); padding-top: 0.75rem; }
.valor-grande { font-size: var(--t3); font-weight: 600; line-height: 1.1; }
@media (max-width: 48rem) {
  .tab-fontes thead { position: absolute; left: -9999px; }
  .tab-fontes, .tab-fontes tbody { display: block; }
  .tab-fontes tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 0.5rem; border-top: 1px solid var(--separator); padding-block: 0.5rem; }
  .tab-fontes th, .tab-fontes td { border-top: 0; padding: 0.15rem 0; }
  .tab-fontes tbody th { grid-column: 1; grid-row: 1; }
  .tab-fontes td[data-rotulo="Preço unitário"] { grid-column: 2; grid-row: 1; font-weight: 600; text-align: end; }
  .tab-fontes td[data-rotulo="Situação"] { grid-column: 1; grid-row: 2; }
  .tab-fontes .col-acao { grid-column: 2; grid-row: 2; width: auto; }
}

/* Mapa: foaie A4 (3 coloane) + panou lateral; sub 75rem panoul coboară sub foaie */
.mapa2 { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 75rem) { .mapa2 { grid-template-columns: minmax(0, 1fr) minmax(16rem, 19rem); } }
.mapa2 .folha { margin-inline: 0; max-width: none; width: 100%; }
@media (min-width: 75rem) { .mapa2 .folha { max-width: 44rem; justify-self: center; } }
.tabela-mapa { width: 100%; border-collapse: collapse; }
.tabela-mapa caption { position: absolute; left: -9999px; }
.tabela-mapa th, .tabela-mapa td { padding: 0.6rem 0.6rem; border-top: 1px solid var(--separator); vertical-align: top; text-align: end; overflow-wrap: normal; }
.tabela-mapa td { white-space: nowrap; }
.tabela-mapa thead th { border-top: 0; font-size: var(--t0); color: var(--text-2); }
.tabela-mapa thead th:first-child, .tabela-mapa tbody th { text-align: start; overflow-wrap: break-word; }
.tabela-mapa tbody th { display: table-cell; }
.tabela-mapa tbody th > .pequeno { display: block; font-weight: 400; }
.tabela-mapa tfoot { font-weight: 600; }
.tabela-mapa tfoot th { text-align: start; }
.lateral-mapa .acoes { flex-direction: column; align-items: stretch; }
@media (max-width: 48rem) { .mapa2 .folha { padding-inline: 0.75rem; } .tabela-mapa th, .tabela-mapa td { padding-inline: 0.3rem; } .tabela-mapa tbody th { width: 40%; } }