/* ═══════════════════════════════════════════════════════════════
   etus-ui — camada compartilhada do design system da ETUS.
   GERADO. Não edite aqui: mudança de token ou componente é decisão
   do design system e desce para os projetos. Editar neste arquivo
   cria divergência silenciosa entre os dashboards.
   ═══════════════════════════════════════════════════════════════ */

/* ═══ etus-ui · componentes canônicos ═════════════════════════════════════════
   Camada compartilhada, ativada por tela pelo wrapper .eui no elemento raiz.
   Migração: cada tela troca seu prefixo local (*-v2, civ2, acx2) por .eui.
   Quando TODAS usarem .eui, o wrapper cai e as classes viram globais puras
   (como no componentes.md). Não redeclarar cor fora dos tokens. */
.eui .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--s4) 18px; }

.eui .seg{ display:inline-flex; background:var(--track); border-radius:var(--r-ctrl); padding:3px; gap:2px; flex-shrink:0; }
.eui .seg button{ border:0; background:transparent; color:var(--ink2); font-size:var(--fs-apoio); font-weight:600; padding:6px var(--s3); border-radius:6px; cursor:pointer; font-family:var(--font); min-height:24px; }
.eui .seg button.on{ background:var(--green-deep); color:var(--sobre-deep); }
.eui .seg button:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.eui .campo{ background:var(--bg); border:1px solid var(--line-strong); border-radius:var(--r-ctrl); padding:var(--s2) var(--s3); color:var(--ink); font-size:var(--fs-corpo); font-family:var(--font); }
.eui .campo::placeholder{ color:var(--ink3); }
.eui .campo:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; border-color:var(--green); }

.eui .btn{ border:1px solid var(--line); background:transparent; color:var(--ink); font-size:var(--fs-apoio); font-weight:600; padding:var(--s2) var(--s3); border-radius:var(--r-ctrl); cursor:pointer; font-family:var(--font); min-height:var(--alvo); display:inline-flex; align-items:center; }
.eui .btn--primario{ border:0; background:var(--green-deep); color:var(--sobre-deep); font-size:var(--fs-corpo); font-weight:700; padding:10px 18px; }
.eui .btn:disabled{ opacity:.5; cursor:not-allowed; }
.eui .btn:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.eui .pill-select{ position:relative; display:flex; align-items:center; gap:9px; border:1px solid var(--line); background:var(--track); color:var(--ink2); border-radius:var(--r-chip); padding:8px 16px 8px 12px; font-size:var(--fs-corpo); cursor:pointer; user-select:none; font-family:var(--font); }
.eui .pill-select__input{ position:absolute; opacity:0; width:0; height:0; }
.eui .pill-select__box{ width:17px; height:17px; border-radius:var(--r-check); border:1.5px solid var(--line-strong); background:transparent; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.eui .pill-select__check{ display:none; color:var(--sobre-verde); font-size:12px; font-weight:800; line-height:1; }
.eui .pill-select.on{ border-color:var(--green); color:var(--green); font-weight:600; }
.eui .pill-select.on .pill-select__box{ background:var(--green); border-color:var(--green); }
.eui .pill-select.on .pill-select__check{ display:block; }
.eui .pill-select:focus-within{ outline:2px solid var(--focus); outline-offset:2px; }

.eui .chip{ display:inline-flex; align-items:center; border-radius:var(--r-chip); padding:var(--s1) 10px; font-size:var(--fs-eyebrow); font-weight:700; background:var(--track); border:1px solid var(--line); white-space:nowrap; flex-shrink:0; }
.eui .chip--ok{ color:var(--green); background:var(--green-soft); border-color:var(--green-soft); }
.eui .chip--aviso{ color:var(--warning); background:var(--warning-soft); border-color:var(--warning-soft); }
.eui .chip--erro{ color:var(--danger); background:var(--danger-soft); border-color:var(--danger-soft); }
.eui .seg--sutil button.on{ background:var(--card); color:var(--ink); }

/* etus-ui · canônicos 2ª leva (telas leves) */
.eui .pill{ display:inline-flex; align-items:center; font-size:var(--fs-apoio); color:var(--ink2); border:1px solid var(--line); border-radius:var(--r-chip); padding:5px 12px; }
.eui .pill b{ color:var(--ink); font-weight:600; }
.eui .badge{ display:inline-block; font-size:var(--fs-apoio); color:var(--ink2); background:var(--track); border:1px solid var(--line); border-radius:var(--r-ctrl); padding:3px 9px; white-space:nowrap; }
.eui .badge--vazio{ border-style:dashed; color:var(--warning); background:transparent; }
.eui .status{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-apoio); color:var(--ink2); }
.eui .status .dot{ width:7px; height:7px; border-radius:50%; background:var(--green); flex-shrink:0; }
.eui .status--revisar{ color:var(--warning); }
.eui .status--revisar .dot{ background:var(--warning); }
.eui .card__head{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.eui .card__title{ font-size:var(--fs-card); font-weight:700; color:var(--ink); }
.eui .card__sub{ font-size:var(--fs-apoio); color:var(--ink3); }
.eui .btn--compacto{ padding:5px 11px; }
.eui .toggle{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); background:transparent; color:var(--ink2); font-size:var(--fs-apoio); padding:7px 12px; border-radius:var(--r-ctrl); cursor:pointer; font-family:var(--font); }
.eui .toggle .dot{ width:7px; height:7px; border-radius:50%; background:var(--line-strong); flex-shrink:0; }
.eui .toggle.is-on{ border-color:var(--green); color:var(--ink); }
.eui .toggle.is-on .dot{ background:var(--green); }
.eui .toggle--aviso{ color:var(--warning); }
.eui .toggle--aviso .dot{ background:var(--warning); }
.eui .toggle--aviso.is-on{ border-color:var(--warning); background:var(--warning-soft); }

/* Estado de erro/aviso — gate G4: falha da fonte não pode virar R$ 0 (ver src/lib/api.js + Estado.jsx) */
.eui .estado{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--s3); padding:var(--s7); border-radius:var(--r-card); }
.eui .estado .estado-ico{ width:var(--ico-lg); height:var(--ico-lg); flex-shrink:0; }
.eui .estado .estado-titulo{ font-size:var(--fs-card); font-weight:var(--fw-card); color:var(--ink); }
.eui .estado .estado-texto{ font-size:var(--fs-corpo); color:var(--ink2); max-width:46ch; }
.eui .estado--aviso{ background:var(--warning-soft); border:1px solid var(--warning); }
.eui .estado--aviso .estado-ico{ color:var(--warning); }
.eui .estado--aviso .btn{ border-color:var(--warning); }
.eui .estado--erro{ background:var(--danger-soft); border:1px solid var(--danger); }
.eui .estado--erro .estado-ico{ color:var(--danger); }
.eui .estado--erro .btn{ border-color:var(--danger); }

/* ═══ Chave de leitura de gráfico ═════════════════════════════════════════════
   Só entra na chave a marca que EXISTE no render atual. Chave que lista marca
   ausente é alarme que sempre dispara — some a confiança na chave inteira.
   A marca desenhada tem que ser o MESMO traço do gráfico (barra cheia, contorno
   tracejado, linha, linha tracejada), nunca um quadradinho colorido genérico. */
.eui .chave{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:var(--fs-apoio); color:var(--ink3); }
.eui .chave li{ display:inline-flex; align-items:center; gap:6px; }
.eui .chave-marca{ display:inline-flex; align-items:center; flex-shrink:0; }

/* ═══ "Como ler" — botão focável com popover ══════════════════════════════════
   Substitui o <span title> não focável. `title` nativo NÃO existe no toque nem
   no teclado: um "como ler" que só aparece no hover não existe no celular.
   Alvo mínimo var(--alvo)=24px (WCAG 2.5.8). Abre no clique e no Enter/Espaço,
   fecha no Esc (devolvendo o foco ao botão) e no clique fora. Sem alert. */
/* Compound (.eui.comoler), NÃO descendente: o componente põe as duas classes no MESMO
   elemento. Com `.eui .comoler` a regra não casa, o wrapper fica `static` e o popover
   ancora num antepassado qualquer — abre fora da tela. Medido em produção. */
/* Use DIV.anotado quando o wrapper envolver um heading: <span> só aceita conteúdo
   de frase, e <span><h3> é aninhamento inválido (renderiza, mas não é HTML válido).
   <span class="anotado"> só quando dentro dele não houver heading. */
/* O "i" pertence ao TÍTULO, não à linha. Envolva título + anotação num .anotado:
   assim o espaçamento NÃO depende do `gap` do container — foi a dependência do gap
   que fez a conta errar duas vezes (13px, depois 10px, e encavalando em pai sem gap). */
.eui .anotado{ display:inline-flex; align-items:center; gap:0; }

/* Sem margem, de propósito. O alvo de --alvo(24) com marca de --ico-sm(16) já carrega
   (24-16)/2 = 4px de folga transparente de cada lado — exatamente --s1. Dentro do
   .anotado essa folga É o espaçamento: 4px visíveis do texto à borda do círculo, em
   qualquer container. Margem aqui volta a acoplar o componente ao pai. */
.eui.comoler{ position:relative; display:inline-flex; }
/* O botão é só a área de toque: transparente, sem borda, 24x24. Quem desenha é o
   .comoler-i dentro dele. Inflar o glifo até 24px faz o "i" competir com o título. */
.eui .comoler-btn{ width:var(--alvo); height:var(--alvo); display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; padding:0; cursor:pointer; }
.eui .comoler-i{ width:var(--ico-sm); height:var(--ico-sm); display:inline-flex; align-items:center; justify-content:center; border:1.3px solid var(--ink3); border-radius:50%; color:var(--ink3); font-size:10px; font-weight:700; font-family:var(--font-marca); line-height:1; }
.eui .comoler-btn:hover .comoler-i{ border-color:var(--ink2); color:var(--ink2); }
.eui .comoler-btn:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.eui .comoler-pop{ position:absolute; top:calc(100% + 6px); left:0; z-index:20; width:max-content; max-width:300px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-card); padding:10px 12px; font-size:var(--fs-apoio); font-weight:400; font-style:normal; line-height:1.45; color:var(--ink2); box-shadow:0 6px 24px rgba(0,0,0,.16); }