/* ============================================================
   Enquadra — Design System (product register)
   Marca: Grafite #14212E · Limão #8AD80F · Manrope
   Cores em OKLCH. Contraste AA verificado. Um acento só.
   Usado por Portal_Gestor e Painel_Enquadra (viajam juntos c/ este arquivo).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ⚠️ ESTA É A ÚNICA FONTE DE VERDADE PARA COR. (D-011, 06/09/2026)
   Até 06/09 não era: o painel.html declarava um `:root` próprio DEPOIS de
   carregar este arquivo — mesma especificidade, o último vence — e ele morria
   em silêncio. Quem editasse a paleta aqui não via efeito e não sabia por quê.
   Aquele bloco foi removido. Precisa mudar cor? É AQUI.

   Contrastes conferidos pela fórmula WCAG 2.1 sobre --surface #1F242D:
     ink 17,4:1 · ink-2 9,6:1 · ink-3 6,0:1 · accent 12,7:1
     accent-ink sobre o lima 14,2:1 · warn 9,7:1 · risk 6,8:1
   🪤 NUNCA texto branco sobre o lima: dá 1,23:1, é invisível. Use --accent-ink. */
:root{
  /* — Neutros (rampa grafite, base escura) — */
  --bg:        #161A21;   /* fundo app */
  --surface:   #1F242D;   /* superfície de conteúdo */
  --surface-2: #2A313C;   /* painel/sidebar (2ª camada) */
  --line:      #3A4250;   /* bordas */
  --line-soft: #2F3742;

  /* — Tinta (texto) — AA verificado sobre --surface — */
  --ink:    #F2F5F1;      /* títulos/corpo forte */
  --ink-2:  #C6CCD4;      /* secundário (>4.5:1) */
  --ink-3:  #98A1AC;      /* terciário/legendas */

  /* — Acento (lima) — só ação/estado/ênfase, nunca decoração — */
  --accent:      #ADFF2F;
  --accent-dim:  rgba(173,255,47,.14);
  --accent-ink:  #161A21;   /* texto SOBRE o lima — nunca branco */
  --accent-soft: #CBEF9A;   /* lima claro: texto sobre fundo tingido */
  --accent-bg:   #22301A;   /* fundo tingido do estado selecionado */

  /* — Semânticos — um acento só, então O POSITIVO É O ACENTO — */
  --positive:  #ADFF2F;
  --warn:      #FFC24B;
  --warn-dim:  rgba(255,194,75,.14);
  --risk:      #FF8A80;     /* risco como TEXTO */
  --risk-dim:  rgba(255,138,128,.15);
  --risk-solid:#D2323A;     /* risco como PREENCHIMENTO, onde vai texto branco */

  /* — Tipografia (escala fixa, ratio ~1.2) — */
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-xs:.75rem; --t-sm:.8125rem; --t-base:.9375rem; --t-md:1.0625rem;
  --t-lg:1.3125rem; --t-xl:1.625rem; --t-2xl:2.25rem;

  /* — Espaçamento — */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px; --s7:44px;
  --radius:16px; --radius-md:14px; --radius-sm:12px; --radius-xs:9px;
  /* ↑ um degrau mais arredondado que os 14/10/8 de antes — a "pegada Apple"
     que o Bruno pediu. Vem com o canto contínuo (squircle) nos botões. */

  /* — Elevação — */
  --shadow: 0 1px 2px oklch(0 0 0 / .25), 0 8px 24px oklch(0 0 0 / .22);

  /* — Motion (product: 150–250ms, comunica estado) — */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 180ms;

  /* — z-index semântico — */
  --z-sticky:100; --z-modal:400; --z-toast:600; --z-tooltip:800;
}

*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:var(--t-base); line-height:1.55;
  font-feature-settings:"cv11","ss01"; text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ margin:0; line-height:1.15; letter-spacing:-0.02em; text-wrap:balance; font-weight:800; }
p{ margin:0; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* — Layout — */
.eq-app{ max-width:1040px; margin:0 auto; padding:var(--s6) var(--s4) var(--s7); }
.eq-stack > * + *{ margin-top:var(--s5); }

/* — Cabeçalho de marca — */
.eq-brand{ display:flex; align-items:center; gap:var(--s3); }
.eq-logo{
  width:34px; height:34px; border-radius:var(--radius-xs); flex:none;
  background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center; font-weight:800; font-size:19px;
}
.eq-title{ font-size:var(--t-lg); }
.eq-sub{ color:var(--ink-2); font-size:var(--t-sm); }

/* — Rótulo de seção (cadência própria, sem eyebrow tracked) — */
.eq-sec{ display:flex; align-items:baseline; gap:var(--s3); margin-bottom:var(--s3); }
.eq-sec h2{ font-size:var(--t-md); font-weight:700; letter-spacing:-0.01em; }
.eq-sec .hint{ color:var(--ink-3); font-size:var(--t-sm); }

/* — Superfícies — */
.eq-card{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:var(--s5);
}
.eq-panel{ background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); }

/* — Stat tiles (afim do product: densidade + consistência) — */
.eq-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1px;
  background:var(--line-soft); border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; }
.eq-stat{ background:var(--surface); padding:var(--s4) var(--s4); }
.eq-stat .k{ color:var(--ink-2); font-size:var(--t-sm); }
.eq-stat .v{ font-size:var(--t-xl); font-weight:800; letter-spacing:-0.02em; margin-top:var(--s1); }
.eq-stat .v .u{ font-size:var(--t-sm); font-weight:600; color:var(--ink-3); }
.eq-stat .d{ font-size:var(--t-xs); color:var(--ink-3); margin-top:var(--s1); }
.eq-pos{ color:var(--positive); }

/* — Linhas / listas — */
.eq-list{ display:flex; flex-direction:column; }
.eq-li{ display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s3) var(--s4); border-top:1px solid var(--line-soft); font-size:var(--t-base); }
.eq-li:first-child{ border-top:none; }
.eq-li .who{ display:flex; align-items:center; gap:var(--s3); }
.eq-num{ width:26px; height:26px; border-radius:7px; flex:none; display:grid; place-items:center;
  background:var(--surface-2); color:var(--ink-2); font-size:var(--t-sm); font-weight:700; font-variant-numeric:tabular-nums; }

/* — Badges/pills de estado — */
.eq-pill{ font-size:var(--t-xs); font-weight:600; border-radius:999px; padding:3px 10px; white-space:nowrap; }
.eq-pill.pos{ background:var(--accent-dim); color:var(--accent); }
.eq-pill.warn{ background:var(--warn-dim); color:var(--warn); }
.eq-pill.risk{ background:var(--risk-dim); color:var(--risk); }

/* — Barras (mini-chart, sem gradiente decorativo) — */
.eq-bars{ display:flex; align-items:flex-end; gap:var(--s3); height:96px; }
.eq-barwrap{ flex:1; display:flex; flex-direction:column; align-items:center; gap:var(--s2); height:100%; justify-content:flex-end; }
.eq-bar{ width:100%; background:var(--accent); border-radius:6px 6px 2px 2px; min-height:4px;
  transition:filter var(--dur) var(--ease); }
.eq-barwrap:hover .eq-bar{ filter:brightness(1.08); }
.eq-bar.mut{ background:var(--surface-2); border:1px solid var(--line); }
.eq-barnum{ font-size:var(--t-sm); font-weight:700; font-variant-numeric:tabular-nums; }
.eq-barlbl{ font-size:var(--t-xs); color:var(--ink-3); }

/* — Ação sugerida (sem border-left; número guia + tinta de fundo) — */
.eq-todo{ display:flex; gap:var(--s3); align-items:flex-start;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-sm);
  padding:var(--s3) var(--s4); }
.eq-todo .mark{ flex:none; width:24px; height:24px; border-radius:7px; display:grid; place-items:center;
  background:var(--accent-dim); color:var(--accent); font-weight:800; font-size:var(--t-sm); }
.eq-todo .txt{ font-size:var(--t-base); }
.eq-todo .txt b{ color:var(--ink); font-weight:700; }

/* — Nota/aviso (full border, ícone guia) — */
.eq-note{ display:flex; gap:var(--s3); align-items:center;
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:var(--s3) var(--s4); color:var(--ink-2); font-size:var(--t-sm); }

/* — Estado vazio (ensina a interface) — */
.eq-empty{ text-align:center; padding:var(--s7) var(--s4); color:var(--ink-2); }
.eq-empty .em-t{ color:var(--ink); font-weight:700; font-size:var(--t-md); margin-bottom:var(--s2); }

/* — Legenda/rodapé — */
.eq-foot{ color:var(--ink-3); font-size:var(--t-sm); line-height:1.7;
  border-top:1px solid var(--line-soft); padding-top:var(--s4); }
.eq-foot b{ color:var(--ink-2); }

/* — Divisor de leitura — */
.eq-hr{ height:1px; background:var(--line-soft); border:0; }

/* — Foco acessível — */
:where(a,button,[tabindex]):focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* — Responsivo estrutural — */
@media (max-width:560px){
  .eq-app{ padding:var(--s5) var(--s3) var(--s6); }
  .eq-stat .v{ font-size:var(--t-lg); }
}

/* — Movimento reduzido — */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}