/* ============================================================
   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');

:root{
  /* — Neutros (rampa grafite, base escura) — */
  --bg:        oklch(0.20 0.028 245);   /* fundo app */
  --surface:   oklch(0.245 0.030 245);  /* superfície de conteúdo */
  --surface-2: oklch(0.285 0.032 245);  /* painel/sidebar (2ª camada) */
  --line:      oklch(0.36 0.030 245);   /* bordas */
  --line-soft: oklch(0.31 0.028 245);

  /* — Tinta (texto) — AA verificado sobre --surface — */
  --ink:    oklch(0.97 0.006 245);      /* títulos/corpo forte */
  --ink-2:  oklch(0.80 0.018 245);      /* secundário (>4.5:1) */
  --ink-3:  oklch(0.685 0.020 245);     /* terciário/legendas (uso grande) */

  /* — Acento (limão) — só ação/estado/ênfase, nunca decoração — */
  --accent:     oklch(0.83 0.20 128);
  --accent-dim: oklch(0.83 0.20 128 / 0.14);
  --accent-ink: oklch(0.22 0.03 245);   /* texto SOBRE o limão */

  /* — Semânticos — */
  --positive:  oklch(0.83 0.20 128);
  --warn:      oklch(0.80 0.13 78);
  --warn-dim:  oklch(0.80 0.13 78 / 0.14);
  --risk:      oklch(0.70 0.15 25);
  --risk-dim:  oklch(0.70 0.15 25 / 0.15);

  /* — 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:14px; --radius-sm:10px; --radius-xs:8px;

  /* — 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; }
}