/* Integra_Tokens.html — camada 0 do ecossistema Integra Farmácia HRN. Entra ANTES de qualquer estilo da ferramenta.
Origem: tokens do PGA HRN (PLANO_VISUAL v5, aprovado em 02/10/2026), os mesmos do portal Integra e do MEMORANDO.
Não editar dentro de cada ferramenta: atualizar na skill integra-ecossistema e copiar de novo.
O que é igual em TODAS as ferramentas (nomes e valores): cores, fonte, raios, sombras, movimento.
O que NÃO se sobrescreve: --fs-* e --esp-* de cada ferramenta (PGA e portal usam escalas diferentes
com o mesmo nome). Os componentes do kit usam a escala própria --eco-fs-* / --eco-esp-*.
Identidade da ferramenta: . A frente só pinta a marca do topo,
o selo da ferramenta e a aba ativa. Botão principal, foco e links continuam no teal HRN (--primaria):
é ele que faz todas as ferramentas parecerem do mesmo sistema. */
:root {
color-scheme: light;
/* superfícies e texto */
--fundo: #f3f5f7; --superficie: #ffffff; --superficie-2: #f7f8fa; --raia: #e9edf1; --linha: #edf0f3;
--texto: #111827; --suave: #4b5563; --borda: #e1e5ea; --borda-campo: #848f9c; --borda-hover: #c4ccd5;
--hover: #f1f4f7; --campo-fundo: #ffffff;
/* marca HRN (igual em todas as ferramentas) */
--primaria: #0f766e; --primaria-hover: #0b5e58; --primaria-texto: #ffffff; --primaria-f: #dcf3ef; --foco: #0f766e;
/* sinais: cada cor tem um significado só, sempre com ícone + texto */
--vermelho: #b42318; --vermelho-f: #fef1ef; --vermelho-borda: #f3b4ab; --vermelho-hover: #8f1e18; --vermelho-texto: #ffffff; /* risco / erro */
--ambar: #8a4b00; --ambar-f: #fff6e3; --ambar-borda: #efcb84; /* falta algo / atrasado */
--azul: #1d4ed8; --azul-f: #edf3ff; --azul-borda: #b8cdfa; /* informação / novo */
--verde: #166534; --verde-f: #eaf7ee; --verde-borda: #a9dcb8; /* concluído / funcionando */
--estrela: #b7791f;
/* frentes (identidade de cada ferramenta; contraste >= 4.5:1 sobre o fundo -f e sobre branco) */
--frente-CAF: #15803d; --frente-CAF-f: #ecf8ef;
--frente-SUP: #4338ca; --frente-SUP-f: #eceefd;
--frente-FC: #0369a1; --frente-FC-f: #e3f1fa;
--frente-GES: #6d28d9; --frente-GES-f: #f0eafd;
--frente-SIS: #0f766e; --frente-SIS-f: #dcf3ef;
/* geometria, elevação, movimento */
--r-cartao: 14px; --r-bloco: 10px; --r-pilula: 999px;
--sombra: 0 1px 2px rgba(16,24,40,.04), 0 3px 10px rgba(16,24,40,.035);
--sombra-hover: 0 2px 4px rgba(16,24,40,.05), 0 8px 22px rgba(16,24,40,.07);
--sombra-modal: 0 20px 25px -5px rgba(15,23,42,.15), 0 10px 10px -5px rgba(15,23,42,.04);
--curva: cubic-bezier(.32,.72,0,1); --mov: 180ms var(--curva);
--fonte: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* escala própria do kit (não colide com a da ferramenta) */
--eco-fs-xs: 12.5px; --eco-fs-sm: 13.5px; --eco-fs-md: 15px; --eco-fs-lg: 17px; --eco-fs-xl: 20px;
--eco-esp-1: 4px; --eco-esp-2: 8px; --eco-esp-3: 12px; --eco-esp-4: 16px; --eco-esp-5: 20px; --eco-esp-6: 24px; --eco-esp-7: 32px;
--eco-alvo: 44px; /* altura mínima de tudo que se clica */
/* frente ativa (o body troca com data-frente) */
--frente: var(--frente-SIS); --frente-f: var(--frente-SIS-f);
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--fundo: #0d1117; --superficie: #1a2029; --superficie-2: #1f2630; --raia: #131920; --linha: #222a35;
--texto: #e9eef4; --suave: #b0bac6; --borda: #2a333f; --borda-campo: #718096; --borda-hover: #3e4a59;
--hover: #222a35; --campo-fundo: #151b23;
--primaria: #2dd4bf; --primaria-hover: #5eead4; --primaria-texto: #04201e; --primaria-f: #10302c; --foco: #5eead4;
--vermelho: #ff8f84; --vermelho-f: #351614; --vermelho-borda: #7d2c25; --vermelho-hover: #ffb3ab; --vermelho-texto: #2a0b08;
--ambar: #f7c26b; --ambar-f: #30230b; --ambar-borda: #6e5114;
--azul: #93b4ff; --azul-f: #142039; --azul-borda: #2c4479;
--verde: #7fd69b; --verde-f: #12281a; --verde-borda: #285c39;
--estrela: #f0b429;
--frente-CAF: #86efac; --frente-CAF-f: #10291a;
--frente-SUP: #a5b4fc; --frente-SUP-f: #1e2142;
--frente-FC: #7dd3fc; --frente-FC-f: #0f2533;
--frente-GES: #c4b5fd; --frente-GES-f: #251a3f;
--frente-SIS: #2dd4bf; --frente-SIS-f: #10302c;
--sombra: none; --sombra-hover: 0 0 0 1px var(--borda-hover); --sombra-modal: 0 8px 24px rgba(0,0,0,.6);
}
}
body[data-frente="CAF"] { --frente: var(--frente-CAF); --frente-f: var(--frente-CAF-f); }
body[data-frente="SUP"] { --frente: var(--frente-SUP); --frente-f: var(--frente-SUP-f); }
body[data-frente="FC"] { --frente: var(--frente-FC); --frente-f: var(--frente-FC-f); }
body[data-frente="GES"] { --frente: var(--frente-GES); --frente-f: var(--frente-GES-f); }
body[data-frente="SIS"] { --frente: var(--frente-SIS); --frente-f: var(--frente-SIS-f); }
/* Integra_Base.html — camada 1 do ecossistema: a "casca" comum e os componentes que se repetem em todas as ferramentas.
Entra logo depois de Integra_Tokens.html e ANTES dos estilos próprios da ferramenta.
Tudo com prefixo eco- para não colidir com as classes que a ferramenta já tem.
Não editar dentro de cada ferramenta: atualizar na skill integra-ecossistema e copiar de novo. */
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); line-height: 1.5; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
::selection { background: var(--primaria-f); color: var(--texto); }
input, select, textarea { caret-color: var(--primaria); }
* { scrollbar-color: var(--borda-campo) transparent; scrollbar-width: thin; }
a { color: var(--primaria); text-underline-offset: 3px; }
.ic { width: 1.1em; height: 1.1em; vertical-align: -.18em; flex: none; }
.so-leitor { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
/* ---------- casca: topo ---------- */
.eco-topo { position: sticky; top: 0; z-index: 20; background: var(--superficie); border-bottom: 1px solid var(--borda);
box-shadow: var(--sombra); }
.eco-topo-dentro { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eco-esp-3) var(--eco-esp-4);
padding: var(--eco-esp-3) var(--eco-esp-5); max-width: var(--eco-largura, none); margin: 0 auto; }
.eco-marca { display: flex; align-items: center; gap: var(--eco-esp-3); margin-right: auto; min-width: 0; }
.eco-marca-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: var(--r-bloco);
background: var(--frente-f); color: var(--frente); }
.eco-marca-ic .ic { width: 22px; height: 22px; }
.eco-marca-nome { margin: 0; font-size: var(--eco-fs-xl); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; }
.eco-marca-sub { display: block; color: var(--suave); font-size: var(--eco-fs-xs); font-weight: 500; }
.eco-marca-sub b { color: var(--primaria); font-weight: 700; }
.eco-simbolo { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.eco-topo-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eco-esp-2); }
.eco-portal { display: inline-flex; align-items: center; gap: 6px; min-height: var(--eco-alvo); padding: 0 var(--eco-esp-4);
border: 1px solid var(--borda); border-radius: var(--r-pilula); background: var(--superficie); color: var(--texto);
font-size: var(--eco-fs-sm); font-weight: 600; text-decoration: none; transition: background var(--mov), border-color var(--mov); }
.eco-portal:hover { background: var(--hover); border-color: var(--borda-hover); }
.eco-portal .ic { color: var(--primaria); }
.eco-usuario { color: var(--suave); font-size: var(--eco-fs-sm); }
.eco-usuario strong { color: var(--texto); font-weight: 600; }
/* ---------- casca: abas ---------- */
/* a faixa ocupa a tela toda, mas as abas ficam na mesma coluna do topo e da página (--eco-largura):
o texto da 1ª aba alinha com a marca (desconta o recuo da própria aba) */
.eco-abas { display: flex; gap: var(--eco-esp-1); overflow-x: auto; border-top: 1px solid var(--borda);
padding: 0 max(var(--eco-esp-1), calc((100% - var(--eco-largura, 100%)) / 2 + var(--eco-esp-5) - var(--eco-esp-4)));
background: var(--superficie); }
.eco-aba { display: inline-flex; align-items: center; gap: var(--eco-esp-2); min-height: 48px; padding: 0 var(--eco-esp-4);
background: none; border: 0; border-bottom: 3px solid transparent; color: var(--suave); font-weight: 600;
font-size: var(--eco-fs-md); white-space: nowrap; cursor: pointer; text-decoration: none;
transition: color var(--mov), border-color var(--mov), background var(--mov); }
.eco-aba:hover { color: var(--texto); background: var(--hover); }
.eco-aba[aria-selected="true"], .eco-aba.ativa { color: var(--frente); border-bottom-color: var(--frente); font-weight: 700; }
/* ---------- casca: página e rodapé ---------- */
.eco-pagina { max-width: var(--eco-largura, 1180px); margin: 0 auto; padding: var(--eco-esp-5) var(--eco-esp-5) var(--eco-esp-7); }
.eco-titulo { margin: 0 0 4px; font-size: var(--eco-fs-xl); font-weight: 700; }
.eco-dica { margin: 0 0 var(--eco-esp-4); color: var(--suave); font-size: var(--eco-fs-sm); }
.eco-rodape { display: flex; flex-wrap: wrap; gap: 4px var(--eco-esp-3); justify-content: center; align-items: center;
padding: var(--eco-esp-4) var(--eco-esp-5) var(--eco-esp-6); color: var(--suave); font-size: var(--eco-fs-xs);
border-top: 1px solid var(--borda); }
.eco-rodape b { color: var(--texto); font-weight: 600; }
/* "Sobre": discreto, no rodapé de toda ferramenta; abre a janela .eco-sobre com o nome da autora */
.eco-sobre-btn { display: inline-flex; align-items: center; min-height: var(--eco-alvo); padding: 0 var(--eco-esp-2); border: 0;
background: none; color: var(--suave); font-size: var(--eco-fs-xs); text-decoration: underline; text-decoration-color: var(--borda);
text-underline-offset: 3px; cursor: pointer; transition: color var(--mov), text-decoration-color var(--mov); }
.eco-sobre-btn:hover { color: var(--primaria); text-decoration-color: currentColor; }
.eco-janela.eco-sobre { width: min(400px, calc(100% - 32px)); }
.eco-sobre .eco-janela-corpo { justify-items: center; text-align: center; gap: var(--eco-esp-2); padding-block: var(--eco-esp-6) var(--eco-esp-5); }
.eco-sobre .eco-marca-ic { width: 48px; height: 48px; margin-bottom: var(--eco-esp-2); }
.eco-sobre h2 { margin: 0; font-size: var(--eco-fs-lg); }
.eco-sobre p { margin: 0; color: var(--suave); font-size: var(--eco-fs-sm); }
.eco-sobre-autora { margin-top: var(--eco-esp-4) !important; padding-top: var(--eco-esp-4); border-top: 1px solid var(--borda); width: 100%; }
.eco-sobre-autora b { display: block; color: var(--texto); font-size: var(--eco-fs-md); font-weight: 700; }
.eco-sobre .eco-janela-pe { justify-content: center; border-top: 0; padding-top: 0; }
/* ---------- botões (tudo em pílula, altura mínima 44px) ---------- */
.eco-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--eco-esp-2);
min-height: var(--eco-alvo); padding: 0 var(--eco-esp-5); border: 1px solid var(--borda); border-radius: var(--r-pilula);
background: var(--superficie); color: var(--texto); font-size: var(--eco-fs-sm); font-weight: 600; text-decoration: none;
cursor: pointer; white-space: nowrap; transition: background var(--mov), border-color var(--mov), box-shadow var(--mov); }
.eco-btn:hover { background: var(--hover); border-color: var(--borda-hover); }
.eco-btn.primario { background: var(--primaria); border-color: var(--primaria); color: var(--primaria-texto); font-weight: 700; }
.eco-btn.primario:hover { background: var(--primaria-hover); border-color: var(--primaria-hover); }
.eco-btn.perigo { background: var(--vermelho); border-color: var(--vermelho); color: var(--vermelho-texto); }
.eco-btn.perigo:hover { background: var(--vermelho-hover); border-color: var(--vermelho-hover); }
.eco-btn.discreto { border-color: transparent; background: none; color: var(--primaria); }
.eco-btn.discreto:hover { background: var(--hover); }
.eco-btn.icone { width: var(--eco-alvo); padding: 0; }
.eco-btn .ic { width: 18px; height: 18px; }
.eco-btn:disabled, .eco-btn[aria-busy="true"] { opacity: .6; cursor: wait; }
/* ---------- filtros (pílula discreta; fundo colorido só quando ligado) ---------- */
.eco-filtros { display: flex; flex-wrap: wrap; gap: var(--eco-esp-2); }
.eco-filtro { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--eco-esp-4);
border: 1px solid var(--borda); border-radius: var(--r-pilula); background: var(--superficie); color: var(--suave);
font-size: var(--eco-fs-sm); font-weight: 600; cursor: pointer; transition: all var(--mov); }
.eco-filtro:hover { border-color: var(--borda-hover); color: var(--texto); }
.eco-filtro[aria-pressed="true"] { background: var(--primaria-f); border-color: var(--primaria); color: var(--primaria); }
.eco-filtro .n { font-weight: 700; color: var(--texto); }
/* ---------- campos ---------- */
.eco-campo { display: grid; gap: var(--eco-esp-1); min-width: 0; font-size: var(--eco-fs-sm); font-weight: 600; }
/* largura 100% e min-width 0: um setor de nome longo numa lista não alarga a coluna nem estoura a janela */
.eco-campo input, .eco-campo select, .eco-campo textarea, .eco-input {
width: 100%; min-width: 0; min-height: var(--eco-alvo); padding: var(--eco-esp-2) var(--eco-esp-3); font-size: 16px; font-weight: 400; /* 16px: o iPhone não dá zoom */
background: var(--campo-fundo); border: 1px solid var(--borda-campo); border-radius: var(--r-bloco);
transition: border-color var(--mov), box-shadow var(--mov); }
.eco-campo input:focus, .eco-campo select:focus, .eco-campo textarea:focus, .eco-input:focus {
outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-f); }
.eco-campo input[type=checkbox], .eco-campo input[type=radio] { width: auto; min-height: 0; padding: 0; } /* não esticam */
.eco-campo .ajuda { font-weight: 400; color: var(--suave); font-size: var(--eco-fs-xs); }
/* campo que não se altera: fundo da raia, sem parecer quebrado */
.eco-campo input:disabled, .eco-campo select:disabled, .eco-campo textarea:disabled,
.eco-campo input[readonly], .eco-campo textarea[readonly] {
background: var(--superficie-2); border-color: var(--borda); color: var(--texto); cursor: not-allowed; opacity: 1; }
.eco-busca { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 420px; }
.eco-busca > .ic { position: absolute; left: 14px; color: var(--suave); pointer-events: none; }
.eco-busca input { width: 100%; min-height: var(--eco-alvo); padding: 0 44px 0 40px; font-size: 16px; border-radius: var(--r-pilula);
border: 1px solid var(--borda-campo); background: var(--campo-fundo); }
.eco-busca input:focus { outline: none; border-color: var(--primaria); box-shadow: 0 0 0 3px var(--primaria-f); }
.eco-busca kbd { position: absolute; right: 12px; min-width: 22px; padding: 1px 6px; border: 1px solid var(--borda);
border-radius: 6px; color: var(--suave); font: 600 var(--eco-fs-xs)/1.4 var(--fonte); text-align: center; pointer-events: none; }
/* ---------- cartões (o único elemento com contorno) ---------- */
.eco-cartao { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--r-cartao);
box-shadow: var(--sombra); padding: var(--eco-esp-4); }
a.eco-cartao, button.eco-cartao { display: block; width: 100%; text-align: left; color: inherit; text-decoration: none; cursor: pointer;
transition: border-color var(--mov), box-shadow var(--mov); }
a.eco-cartao:hover, button.eco-cartao:hover { border-color: var(--borda-hover); box-shadow: var(--sombra-hover); }
.eco-cartao.VERMELHO { border-color: var(--vermelho-borda); background: linear-gradient(var(--vermelho-f), var(--superficie) 70%); }
.eco-cartao.AMARELO { border-color: var(--ambar-borda); }
.eco-cartao h3 { margin: 0 0 var(--eco-esp-2); font-size: var(--eco-fs-md); font-weight: 700; display: flex; align-items: center; gap: var(--eco-esp-2); }
.eco-grade { display: grid; gap: var(--eco-esp-3); grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.eco-raia { background: var(--raia); border-radius: var(--r-cartao); padding: var(--eco-esp-3); }
/* ---------- cartão de ferramenta (portal e menus): ladrilho com o ícone da ferramenta na cor da frente ---------- */
.eco-app { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px var(--eco-esp-3); align-content: start;
padding: var(--eco-esp-4); min-height: 112px; color: inherit; text-decoration: none; background: var(--superficie);
border: 1px solid var(--borda); border-radius: var(--r-cartao); box-shadow: var(--sombra);
transition: border-color var(--mov), box-shadow var(--mov); }
.eco-app:hover { border-color: var(--borda-hover); box-shadow: var(--sombra-hover); }
.eco-ladrilho { grid-row: span 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-bloco);
background: var(--frente-f); color: var(--frente); }
.eco-ladrilho .ic { width: 24px; height: 24px; }
[data-frente="CAF"] { --frente: var(--frente-CAF); --frente-f: var(--frente-CAF-f); }
[data-frente="SUP"] { --frente: var(--frente-SUP); --frente-f: var(--frente-SUP-f); }
[data-frente="FC"] { --frente: var(--frente-FC); --frente-f: var(--frente-FC-f); }
[data-frente="GES"] { --frente: var(--frente-GES); --frente-f: var(--frente-GES-f); }
[data-frente="SIS"] { --frente: var(--frente-SIS); --frente-f: var(--frente-SIS-f); }
.eco-app-nome { font-weight: 700; font-size: var(--eco-fs-md); line-height: 1.3; }
.eco-app-desc { color: var(--suave); font-size: var(--eco-fs-sm); line-height: 1.4; }
.eco-app-pe { display: flex; flex-wrap: wrap; gap: var(--eco-esp-2); align-items: center; margin-top: var(--eco-esp-2); }
/* ---------- cartão de paciente (quadro / kanban) ---------- */
.eco-paciente { display: grid; gap: 6px; padding: var(--eco-esp-3); background: var(--superficie); border: 1px solid var(--borda);
border-radius: var(--r-cartao); box-shadow: var(--sombra); }
.eco-paciente.urgente { border-color: var(--vermelho-borda); background: linear-gradient(var(--vermelho-f), var(--superficie) 60%); }
.eco-paciente-topo { display: flex; align-items: flex-start; gap: var(--eco-esp-2); }
.eco-leito { display: inline-flex; align-items: center; gap: 5px; margin-right: auto; color: var(--suave); font-size: var(--eco-fs-xs); font-weight: 600; }
.eco-alertas { display: flex; gap: 4px; }
.eco-alertas .ic { width: 18px; height: 18px; }
.eco-alertas .VERMELHO { color: var(--vermelho); }
.eco-alertas .AMARELO { color: var(--ambar); }
.eco-alertas .AZUL { color: var(--azul); }
.eco-paciente-nome { font-weight: 700; font-size: var(--eco-fs-md); line-height: 1.3; overflow-wrap: anywhere; }
/* ---------- chip de medicação (nome inteiro, quebra linha; nunca reticências) ---------- */
.eco-med { display: flex; align-items: flex-start; gap: var(--eco-esp-2); padding: 6px 10px; border-radius: var(--r-bloco);
background: var(--superficie-2); border: 1px solid var(--linha); font-size: var(--eco-fs-sm); }
.eco-med-nome { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.eco-med-tipo { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; font-size: 11px; font-weight: 800;
color: var(--primaria); background: var(--primaria-f); }
.eco-med-dia { flex: none; padding: 1px 8px; border-radius: var(--r-pilula); font-size: var(--eco-fs-xs); font-weight: 700;
color: var(--azul); background: var(--azul-f); font-variant-numeric: tabular-nums; }
/* ---------- números (KPI) ---------- */
.eco-kpi { display: flex; flex-direction: column; gap: 4px; }
.eco-kpi-num { font-size: 28px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.eco-kpi-rotulo { color: var(--suave); font-size: var(--eco-fs-sm); font-weight: 600; }
/* ---------- sinais: cor + ícone + texto, sempre os três ---------- */
.eco-sinal { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pilula);
font-size: var(--eco-fs-xs); font-weight: 600; line-height: 1.4; }
.eco-sinal.VERMELHO { color: var(--vermelho); background: var(--vermelho-f); }
.eco-sinal.AMARELO { color: var(--ambar); background: var(--ambar-f); }
.eco-sinal.AZUL { color: var(--azul); background: var(--azul-f); }
.eco-sinal.VERDE { color: var(--verde); background: var(--verde-f); }
.eco-sinal.NEUTRO { color: var(--suave); background: var(--hover); }
.eco-selo { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: var(--r-pilula);
font-size: var(--eco-fs-xs); font-weight: 700; color: var(--frente); background: var(--frente-f); }
/* ---------- avisos ---------- */
.eco-aviso { display: flex; gap: var(--eco-esp-3); align-items: flex-start; padding: var(--eco-esp-3) var(--eco-esp-4);
border: 1px solid var(--borda); border-radius: var(--r-bloco); background: var(--superficie-2); font-size: var(--eco-fs-sm); }
.eco-aviso > .ic { width: 20px; height: 20px; margin-top: 1px; }
.eco-aviso.VERMELHO { color: var(--vermelho); background: var(--vermelho-f); border-color: var(--vermelho-borda); }
.eco-aviso.AMARELO { color: var(--ambar); background: var(--ambar-f); border-color: var(--ambar-borda); }
.eco-aviso.AZUL { color: var(--azul); background: var(--azul-f); border-color: var(--azul-borda); }
.eco-aviso.VERDE { color: var(--verde); background: var(--verde-f); border-color: var(--verde-borda); }
.eco-aviso p { margin: 0; color: var(--texto); }
.eco-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; max-width: min(520px, calc(100% - 32px));
display: flex; gap: var(--eco-esp-2); align-items: center; padding: var(--eco-esp-3) var(--eco-esp-4);
background: var(--aviso-fundo, #1d2733); color: #fff; border-radius: var(--r-bloco); box-shadow: var(--sombra-modal); font-size: var(--eco-fs-sm); }
/* ---------- estados: vazio, erro, carregando ---------- */
.eco-vazio { display: grid; justify-items: center; gap: var(--eco-esp-2); padding: 48px var(--eco-esp-4); text-align: center; color: var(--suave); }
.eco-vazio > .ic { width: 32px; height: 32px; color: var(--borda-campo); }
.eco-vazio strong { color: var(--texto); font-size: var(--eco-fs-md); }
.eco-esq { border-radius: var(--r-bloco); background: var(--raia);
background-image: linear-gradient(90deg, transparent, var(--superficie-2), transparent); background-size: 200% 100%;
animation: eco-brilho 1.4s linear infinite; min-height: 18px; }
.eco-esq.cartao { min-height: 112px; border-radius: var(--r-cartao); }
@keyframes eco-brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* ---------- seções recolhíveis (seta em CSS, sem caractere ▾) ---------- */
details.eco-recolhe > summary { display: flex; align-items: center; gap: var(--eco-esp-2); min-height: var(--eco-alvo);
cursor: pointer; list-style: none; font-weight: 700; }
details.eco-recolhe > summary::-webkit-details-marker { display: none; }
details.eco-recolhe > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; border: solid var(--suave);
border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--mov); }
details.eco-recolhe[open] > summary::after { transform: rotate(-135deg); }
/* ---------- tabelas ---------- */
.eco-tabela-caixa { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--r-cartao); background: var(--superficie); }
.eco-tabela { width: 100%; border-collapse: collapse; font-size: var(--eco-fs-sm); }
.eco-tabela th { position: sticky; top: 0; background: var(--superficie-2); color: var(--suave); text-align: left;
font-size: var(--eco-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px;
border-bottom: 1px solid var(--borda); }
.eco-tabela td { padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; overflow-wrap: anywhere; }
.eco-tabela tr:last-child td { border-bottom: 0; }
.eco-tabela td.num, .eco-tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* ---------- janela (modal) ---------- */
.eco-janela { border: 0; padding: 0; border-radius: var(--r-cartao); box-shadow: var(--sombra-modal); background: var(--superficie);
color: var(--texto); width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: hidden; }
/* topo e pé ficam sempre à vista; só o corpo rola (também quando um