/* hostmind.css — fundația vizuală P3b (tokeni + componente), o singură foaie. Paleta: pachetul Codex 01-especificacao-visual.md (contraste calculate acolo).
   K4: două familii pe aceleași componente. .fam-tecnica = Secretaria/Fiscal/Autoridade; .fam-calida = Município/Fornecedor/Público (clasa merge pe <body> sau pe un container).
   K2: coralul trăiește DOAR sub .is-urgente / .is-live. Fonturi locale (fontes/*.woff2, licențe OFL lângă ele). Mărimi: 5 (--t1..--t5); greutăți: 400 și 500. */
@font-face { font-family: "Plus Jakarta Sans"; src: url("/portal/fontes/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/portal/fontes/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/portal/fontes/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/portal/fontes/source-serif-4-latin-wght-normal.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }

:root {
  --base: #F8F7F1; --card: #FFFFFF; --texto: #243C35; --sec: #53665E; --acao: #185547; --acao-suave: #EAF1EC; --linha: #879B84;
  --coral: #CA5946; --coral-texto: #A43F2E; /* K2: folosite doar în reguli .is-urgente / .is-live */
  --t1: .78rem; --t2: 1rem; --t3: 1.25rem; --t4: 1.6rem; --t5: 2.4rem;
  --sp1: .4rem; --sp2: .6rem; --sp3: .8rem; --sp4: 1.2rem; --sp5: 1.6rem; --sp6: 2.4rem;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
html { font-size: clamp(19px, 1.389vw, 32px); }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--base); color: var(--texto); font: 400 var(--t2)/1.5 "Plus Jakarta Sans", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
h1, h2, h3, h4, th, strong, b { font-weight: 500; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1 { font-size: var(--t5); line-height: 1.15; } h2 { font-size: var(--t4); line-height: 1.15; } h3 { font-size: var(--t3); line-height: 1.15; }
a { color: var(--acao); }
:focus-visible { outline: 2px solid var(--acao); outline-offset: 3px; }

/* familii */
.fam-tecnica { --alvo: max(52px, 2.6rem); --raio: 4px; --sombra: none; }
.fam-calida { --alvo: max(44px, 2.2rem); --raio: 12px; --sombra: 0 1px 2px rgba(36, 60, 53, .1); }
.fam-tecnica { background: var(--base) repeating-linear-gradient(135deg, transparent 0 7px, rgba(36, 60, 53, .05) 7px 8px); }
.fam-calida { background: var(--base); }

.pagina { width: min(100% - 2rem, 80%); margin: 0 auto; padding: var(--sp5) 0 var(--sp6); display: grid; gap: var(--sp5); }
@media (max-width: 900px) { .pagina { width: calc(100% - 2rem); } }

/* antet + selo + navegação */
.antet { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp3) var(--sp5); justify-content: space-between; }
.marca { display: grid; }
.marca b { font-size: var(--t3); }
.selo { display: inline-flex; align-items: center; min-height: var(--alvo); padding: 0 var(--sp3); border: 1px solid var(--acao); border-radius: var(--raio); color: var(--acao); font-size: var(--t1); letter-spacing: .04em; font-weight: 500; background: var(--card); }
.nav { display: flex; flex-wrap: wrap; gap: var(--sp1) var(--sp3); }
.nav a { display: inline-flex; align-items: center; min-height: var(--alvo); padding: 0 var(--sp3); border-radius: var(--raio); text-decoration: none; color: var(--texto); font-weight: 500; transition: background .18s var(--ease); }
.nav a:hover { background: var(--acao-suave); }
.nav a[aria-current="page"] { background: var(--acao-suave); box-shadow: inset 0 -2px 0 var(--acao); }

/* grade bento */
.grade { display: grid; gap: var(--sp4); grid-template-columns: repeat(12, minmax(0, 1fr)); }
.c7 { grid-column: span 7; } .c5 { grid-column: span 5; } .c4 { grid-column: span 4; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }
@media (max-width: 900px) { .grade > * { grid-column: 1 / -1; } }

/* cartão (+ K4: rame cu marcaje de colț doar în familia tehnică) */
.cartao { position: relative; background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: var(--sp4); display: grid; gap: var(--sp3); align-content: start; min-width: 0; }
.fam-tecnica .cartao::before { content: ""; position: absolute; inset: -5px; pointer-events: none;
  background:
    linear-gradient(var(--acao), var(--acao)) top left / 12px 1px no-repeat, linear-gradient(var(--acao), var(--acao)) top left / 1px 12px no-repeat,
    linear-gradient(var(--acao), var(--acao)) top right / 12px 1px no-repeat, linear-gradient(var(--acao), var(--acao)) top right / 1px 12px no-repeat,
    linear-gradient(var(--acao), var(--acao)) bottom left / 12px 1px no-repeat, linear-gradient(var(--acao), var(--acao)) bottom left / 1px 12px no-repeat,
    linear-gradient(var(--acao), var(--acao)) bottom right / 12px 1px no-repeat, linear-gradient(var(--acao), var(--acao)) bottom right / 1px 12px no-repeat; }
.fam-calida .cartao { transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.fam-calida .cartao:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(36, 60, 53, .12); }

/* microetichete (Plex Mono doar în familia tehnică) și titlul bipartit (serif doar în tehnică) */
.micro { font-size: var(--t1); color: var(--sec); letter-spacing: .04em; }
.sub { font-size: var(--t2); color: var(--sec); }
.lat-extra.sub, .rodape, #quem { font-size: var(--t1); }
.fam-tecnica .micro { font-family: "IBM Plex Mono", ui-monospace, monospace; text-transform: uppercase; }
.fam-tecnica .titlu-bi .serif { font-family: "Source Serif 4", Georgia, serif; font-weight: 400; }

/* O que é / Para que serve */
.oque { display: grid; gap: var(--sp2); }
.oque p { max-width: 68ch; }
.oque .rot { display: block; font-size: var(--t1); font-weight: 500; color: var(--acao); letter-spacing: .04em; }
.fam-tecnica .oque .rot { font-family: "IBM Plex Mono", ui-monospace, monospace; text-transform: uppercase; }

/* butoane */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--alvo); padding: 0 var(--sp4); border: 1px solid var(--acao); border-radius: var(--raio); background: var(--card); color: var(--acao); font: 500 var(--t2)/1.2 inherit; font-family: inherit; text-decoration: none; cursor: pointer; transition: background .18s var(--ease); }
.btn:hover { background: var(--acao-suave); }
.btn-principal { background: var(--acao); color: #FFFFFF; }
.btn-principal:hover { background: #12423A; }
.acoes { display: flex; flex-wrap: wrap; gap: var(--sp3); }

/* cantități + bara de saldo (registrado = numitor) */
.qtds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp3) var(--sp4); }
.c5 .qtds, .c4 .qtds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 600px) { .qtds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qtd { display: grid; gap: 0; }
.num { font-size: var(--t5); font-weight: 500; line-height: 1.15; }
.barra { display: flex; height: .9rem; border: 1px solid var(--sec); border-radius: var(--raio); overflow: hidden; background: var(--acao-suave); }
.seg { width: var(--p, 0%); }
.seg-fornecido { background: var(--acao); }
.seg-reservado { background: repeating-linear-gradient(45deg, var(--acao) 0 3px, var(--card) 3px 6px); }
.legenda { display: flex; flex-wrap: wrap; gap: var(--sp1) var(--sp4); padding: 0; list-style: none; font-size: var(--t1); color: var(--sec); }

/* progres manifestări: culoarea de accent (K2) */
.prog { height: .6rem; border-radius: var(--raio); background: var(--acao-suave); border: 1px solid var(--sec); overflow: hidden; }
.prog .enche { height: 100%; width: var(--p, 0%); background: var(--acao); }

/* în așteptare: accent, nu coral (K2) */
.pend { display: inline-flex; align-items: center; width: fit-content; min-height: 1.8rem; padding: 0 var(--sp2); border: 1px solid var(--acao); border-radius: var(--raio); color: var(--acao); font-size: var(--t1); font-weight: 500; background: var(--card); }
.pend:empty { display: none; }
@media (min-width: 601px) { td.nw, th.nw { white-space: nowrap; } }

/* K2: urgent / live — singurele locuri cu coral */
span.is-urgente, span.is-live { display: inline-flex; align-items: center; gap: var(--sp1); width: fit-content; padding: 0 var(--sp2); min-height: 1.8rem; border: 1px solid var(--coral-texto); border-radius: var(--raio); color: var(--coral-texto); font-size: var(--t1); font-weight: 500; background: var(--card); }
span.is-live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--coral); animation: pulsa 1.6s var(--ease) infinite; }
@keyframes pulsa { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* tabel (cu pictogramă pe fiecare linie, K3) */
.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: var(--sp2) var(--sp3); border-bottom: 1px solid var(--linha); vertical-align: middle; }
th { font-size: var(--t1); color: var(--sec); }
td.n, th.n { text-align: right; }
@media (max-width: 600px) {
  thead { position: absolute; left: -9999px; }
  tr, td { display: block; text-align: left; }
  td.n { text-align: left; display: flex; justify-content: space-between; border: 0; padding: 0 var(--sp3); }
  td.n::before { content: attr(data-r); color: var(--sec); font-size: var(--t1); }
  tr { padding: var(--sp2) 0; border-bottom: 1px solid var(--linha); }
  td { border: 0; }
}

/* linie de item: ÎNTOTDEAUNA cu pictogramă (K3) */
.linha-item { display: flex; align-items: center; gap: var(--sp3); }
tr.linha-item { display: table-row; }
.pic { width: 2.2rem; height: 2.2rem; flex: none; color: var(--acao); }
.lista-itens { display: grid; gap: var(--sp2); padding: 0; list-style: none; }
.lista-itens li { padding: var(--sp2) 0; border-bottom: 1px solid var(--linha); }
.lista-itens .qt { margin-left: auto; font-weight: 500; }
td .cel { display: flex; align-items: center; gap: var(--sp3); }

/* stare goală + slot nesetat */
.vazio { display: grid; gap: var(--sp3); justify-items: start; padding: var(--sp4); border: 1px dashed var(--sec); border-radius: var(--raio); background: var(--card); }
.slot { display: grid; gap: var(--sp2); }
.slot .estado { display: inline-flex; align-items: center; gap: var(--sp1); font-weight: 500; }
.slot .estado::before { content: ""; width: .7rem; height: .7rem; border: 1.5px solid var(--sec); border-radius: 50%; }

/* scena rețelei rutiere (K1): culori și mișcare aici, geometria în markup */
.cena { display: block; width: 100%; height: auto; border-radius: var(--raio); background: var(--acao-suave); }
.cena text { font-family: inherit; font-size: 20px; fill: var(--texto); }
.cena .rot-no { font-weight: 500; }
.cena .cont { fill: none; stroke: #CCD9CC; stroke-width: 1.5; }
.cena .rd { fill: none; stroke: #879B84; stroke-width: 12; }
.cena .rd-m { fill: none; stroke: var(--base); stroke-width: 2; stroke-dasharray: 8 8; }
.cena .no { fill: #FFFFFF; stroke: var(--acao); stroke-width: 1.5; }
.cena .cidir { fill: var(--acao); }
.cena .cidir-t { fill: #FFFFFF; font-weight: 500; }
.cena .pulse.is-live { fill: var(--coral-texto); offset-path: path("M 90 90 Q 90 210 360 210"); animation: viagem 6s var(--ease) infinite; }
.cena-v2 .pulse.is-live { offset-path: path("M 120 120 Q 120 240 360 240"); }
/* A2: etichete HTML, 1rem ≥ 19 px; t=a deasupra punctului, b dedesubt, c centrat pe punct */
.cena-box { position: relative; }
.cena-box .rot-l, .cena-box .rot-no, .cena-box .rot-cidir { position: absolute; font-size: var(--t2); line-height: 1.25; font-weight: 500; color: var(--texto); white-space: nowrap; pointer-events: none; }
.cena-box [data-t="c"] { transform: translate(-50%, -50%); }
.cena-box [data-t="a"] { transform: translate(-50%, -100%); }
.cena-box [data-t="b"] { transform: translate(-50%, 0); }
.cena-box .rot-cidir { color: #FFFFFF; background: var(--acao); padding: .2rem 1.1rem; border-radius: 8px; }
/* poziții = coordonatele din viewBox 720×480, în % (fără style inline: CSP) */
.cena-box .x120 { left: 16.6667%; }
.cena-box .x360 { left: 50.0000%; }
.cena-box .x600 { left: 83.3333%; }
.cena-box .y78 { top: 16.2500%; }
.cena-box .y120 { top: 25.0000%; }
.cena-box .y240 { top: 50.0000%; }
.cena-box .y360 { top: 75.0000%; }
.cena-box .y402 { top: 83.7500%; }
@keyframes viagem { 0% { offset-distance: 0%; opacity: 1; } 22% { offset-distance: 100%; opacity: 0; } 100% { offset-distance: 100%; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cena .pulse { display: none; }
}

/* P3c1: formulare, intrare, erori, perfiluri, rețea cu municipii care au răspuns */
.campo { display: grid; gap: var(--sp1); }
.campo label { font-weight: 500; }
input, select { min-height: var(--alvo); padding: 0 var(--sp3); border: 1px solid var(--sec); border-radius: var(--raio); background: var(--card); color: var(--texto); font: inherit; width: 100%; }
td input, .linha-item input { width: 8rem; }
select { padding: 0 var(--sp3); }
.slot input { max-width: 24rem; }
.erro { color: var(--texto); border-left: 4px solid var(--texto); padding: var(--sp2) var(--sp3); background: var(--card); }
.erro:empty, .ok-msg:empty { display: none; }
.ok-msg { border-left: 4px solid var(--acao); padding: var(--sp2) var(--sp3); background: var(--acao-suave); }
.perfis { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sp3); }
.entrada { width: min(100% - 2rem, 53.5rem); margin: 0 auto; padding: var(--sp5) 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp4) var(--sp6); align-items: start; }
.ent-esq { display: grid; gap: var(--sp3); align-content: start; }
.ent-esq h1 { color: var(--acao); font-weight: 400; }
.ent-sub { font-size: var(--t3); }
.pecete { justify-self: start; padding: var(--sp1) var(--sp3); border-radius: var(--raio); background: var(--acao-suave); color: var(--acao); font-size: var(--t1); font-weight: 500; }
.ent-dir .cartao { display: grid; gap: var(--sp3); }
.ent-rodape { grid-column: 1 / -1; }
.ent-rodape a { display: inline-flex; align-items: center; min-height: var(--alvo); }
@media (max-width: 900px) {
  .entrada { grid-template-columns: minmax(0, 1fr); }
  /* coloană unică: titlul, apoi formularul (acțiunea principală deasupra pliului), apoi scena; «O que é» după buton */
  .ent-esq { display: contents; }
  .ent-esq > :not([data-cena]) { order: 1; } .ent-dir { order: 2; } .ent-esq > [data-cena] { order: 3; } .ent-rodape { order: 4; }
  #f-entrar .oque { order: 9; }
}
.usuario { display: flex; align-items: center; gap: var(--sp3); flex-wrap: wrap; }
.cena .no.resp { fill: var(--acao-suave); stroke-width: 4; }
.linha-item .cel-nome { flex: 1; min-width: 0; }
#tela { display: grid; gap: var(--sp5); }
#tela > .acoes { align-items: flex-end; justify-content: space-between; }

/* ── P3c2: shell da administrație (coloană stânga + bară sus), paleta Ctrl+K, ecranul de autorizare ── */
.shell { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); min-height: 100vh; }
.shell.oculto { visibility: hidden; }
.lateral { position: sticky; top: 0; align-self: start; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp2); padding: var(--sp4) var(--sp3); background: var(--base); }
.lat-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp3); }
.lat-topo .btn { display: none; }
.logo { font-size: var(--t4); font-weight: 400; color: var(--acao); letter-spacing: .02em; }
.lateral .nav { display: grid; gap: var(--sp1); }
.lateral .nav a { width: 100%; }
.rodape { margin-top: auto; }
.principal { border-left: 1px solid var(--linha); display: grid; gap: var(--sp3); align-content: start; padding: var(--sp4) var(--sp5) var(--sp6); min-width: 0; }
.topo { display: flex; align-items: center; justify-content: space-between; gap: var(--sp4); flex-wrap: wrap; }
.busca-btn { flex: 1 1 18rem; max-width: 60%; min-height: var(--alvo); display: flex; align-items: center; justify-content: space-between; gap: var(--sp3); padding: 0 var(--sp4); border: 1px solid var(--sec); border-radius: var(--raio); background: var(--card); color: var(--sec); font: inherit; cursor: pointer; text-align: left; }
.busca-btn:hover { background: var(--acao-suave); }
.chip { display: inline-flex; align-items: center; justify-content: center; width: var(--alvo); height: var(--alvo); border-radius: 50%; background: var(--acao-suave); color: var(--acao); font-size: var(--t2); }
.conteudo { display: grid; gap: var(--sp4); align-content: start; }
.principal .selo { justify-self: start; }
.oque-linha { max-width: 90ch; }
.oque-linha .rot { font-size: var(--t1); font-weight: 500; color: var(--acao); letter-spacing: .04em; margin-right: var(--sp1); }
.fam-tecnica .oque-linha .rot { font-family: "IBM Plex Mono", ui-monospace, monospace; text-transform: uppercase; }
.pilha { display: grid; gap: var(--sp4); align-content: start; min-width: 0; }
.cartao a.linha-item, .cartao li.linha-item a { display: flex; align-items: center; gap: var(--sp2); min-height: var(--alvo); color: var(--texto); text-decoration: none; }
.cartao a.linha-item:hover { background: var(--acao-suave); }
.acoes-dec { display: flex; flex-wrap: wrap; gap: var(--sp3); align-items: center; }
.motivo { display: grid; gap: var(--sp2); }
.motivo label { font-size: var(--t1); color: var(--sec); }
.paleta { position: fixed; inset: 0; z-index: 10; background: var(--base); display: grid; justify-items: center; align-content: start; padding: var(--sp6) var(--sp3); }
.paleta[hidden] { display: none; }
.paleta-caixa { width: min(100%, 42rem); display: grid; gap: var(--sp3); }
.paleta ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp1); }
.paleta [role="option"] { display: flex; justify-content: space-between; align-items: center; gap: var(--sp3); min-height: var(--alvo); padding: 0 var(--sp3); border: 1px solid var(--linha); border-radius: var(--raio); background: var(--card); cursor: pointer; }
.paleta [role="option"][aria-selected="true"] { background: var(--acao-suave); box-shadow: inset 4px 0 0 var(--acao); }
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; overflow: visible; border-bottom: 1px solid var(--linha); padding: var(--sp2) var(--sp3); }
  .principal { border-left: 0; }
  .lat-topo .btn { display: inline-flex; }
  .lat-extra { display: none; }
  .lateral .nav { display: none; }
  .lateral .nav.aberto { display: grid; }
  .principal { padding: var(--sp3) var(--sp3) var(--sp5); }
  .topo { flex-wrap: nowrap; gap: var(--sp2); }
  .busca-btn { max-width: none; flex: 1 1 0; min-width: 0; padding: 0 var(--sp3); }
  .busca-btn .micro, #quem { display: none; }
  .usuario { flex-wrap: nowrap; gap: var(--sp2); }
  .principal { gap: var(--sp2); }
  .conteudo { gap: var(--sp3); }
  .conteudo .titlu-bi { font-size: var(--t3); }
  .cartao { gap: var(--sp2); padding: var(--sp3); }
}

/* ── P4a: portalul furnizorului + conferința NF ── */
.sit { display: inline-flex; align-items: center; width: fit-content; min-height: 1.8rem; padding: 0 var(--sp2); border: 1px solid var(--sec); border-radius: var(--raio); background: var(--acao-suave); font-weight: 500; }
.nota-linha { display: grid; gap: var(--sp2); justify-items: start; }
.nota-linha .erro { justify-self: stretch; }
#f-nf { display: grid; gap: var(--sp5); }
#f-nf .motivo { gap: var(--sp1); }
/* input nativ transparent peste butonul în portugheză: rămâne accesibil, fără textul implicit al browserului */
.arq { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp3); }
.arq-in { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; opacity: 0; cursor: pointer; }
.arq:focus-within .arq-bt { outline: 2px solid var(--acao); outline-offset: 3px; }
/* furnizor, telefon: bară fixă cu trei file; conținutul are padding cât bara */
@media (max-width: 900px) {
  .shell.forn { --barra: 4.4rem; display: block; }
  .shell.forn .lateral { position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: var(--barra); z-index: 5; padding: 0 var(--sp1) env(safe-area-inset-bottom); border-bottom: 0; border-top: 1px solid var(--linha); justify-content: center; }
  .shell.forn .lat-topo, .shell.forn .lat-extra { display: none; }
  .shell.forn .lateral .nav { display: flex; gap: 0; }
  .shell.forn .lateral .nav a { flex: 1; justify-content: center; text-align: center; padding: 0 var(--sp1); white-space: nowrap; }
  .shell.forn .principal { padding-bottom: calc(var(--barra) + var(--sp5)); }
}

/* pedidos (P1/P5): filtros da lista, link de linha com alvo mínimo, campo numérico */
.filtros { display: flex; flex-wrap: wrap; gap: var(--sp3); margin-bottom: var(--sp3); }
.filtros select { width: auto; min-width: 12rem; }
.abre { display: inline-flex; align-items: center; min-height: var(--alvo); color: var(--texto); text-decoration: none; }
.campo input[type=number] { max-width: 14rem; }
.btn[aria-pressed="true"] { background: var(--acao-suave); }
[hidden] { display: none !important; }