/* =========================================================================
   PineUp — Design tokens + base + componentes partilhados
   Identidade (Opção 2): PRETO / BRANCO / CINZA (~80%) + VERDE PINHEIRO (~5%).
   --brand = verde de ação #22C55E · --brand-700 = verde institucional #14532D
   Regra: cor só em ação, progresso, sucesso e certificados.
   Tema claro = base; html[data-theme="dark"] sobrepõe (runtime default = dark).
   Usado por app das jornadas, dashboards, landing, slides, verify.
   ========================================================================= */

:root {
  /* Marca / verde pinheiro */
  --brand: #16A34A;          /* verde de ação (botões, links) */
  --brand-600: #15803D;
  --brand-700: #14532D;      /* verde institucional profundo */
  --brand-400: #22C55E;      /* verde vivo (progresso, realces) */
  --brand-300: #86EFAC;
  --brand-50: #ECFDF5;
  --brand-contrast: #FFFFFF;

  /* Estados semânticos */
  --ok: #16A34A;        --ok-bg: #DCFCE7;
  --warn: #EAB308;      --warn-bg: #FEF08A;   --warn-ink: #854D0E;   /* amarelo vibrante (pendente) */
  --danger: #DC2626;    --danger-bg: #FEE2E2;
  --info: #334155;      --info-bg: #E2E8F0;
  --gold: #CA8A04;      --gold-bg: #FEF9C3;   /* selos premium / certificados */

  /* compat (estados de progresso reaproveitados) */
  --ok2: #16A34A;
  --late: #EAB308;      --late-bg: #FEF08A;
  --absent: #DC2626;    --absent-bg: #FEE2E2;
  --just: #4F46E5;      --just-bg: #E0E7FF;

  /* Neutros — tema CLARO (base) */
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --surface-2: #F5F5F5;
  --surface-3: #ECECEE;
  --border: #E4E4E7;
  --border-strong: #D4D4D8;
  --text: #0A0A0A;
  --text-muted: #52525B;
  --text-faint: #A1A1AA;
  --overlay: rgba(9, 9, 11, .45);

  /* Forma e profundidade */
  --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;
  --shadow-sm: 0 1px 2px rgba(9,9,11,.06), 0 1px 3px rgba(9,9,11,.08);
  --shadow: 0 4px 12px rgba(9,9,11,.08), 0 2px 4px rgba(9,9,11,.04);
  --shadow-lg: 0 18px 40px rgba(9,9,11,.16);
  --ring: 0 0 0 3px rgba(22,163,74,.30);

  /* Tipografia */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

  /* Movimento */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: 220ms;
}

html[data-theme="dark"] {
  --brand: #22C55E;
  --brand-600: #16A34A;
  --brand-700: #166534;
  --brand-400: #4ADE80;
  --brand-50: #06210F;

  --ok: #34D399;        --ok-bg: #08291B;
  --warn: #FDE047;      --warn-bg: #3B2F08;   --warn-ink: #FDE047;   /* amarelo vibrante (pendente) */
  --danger: #F87171;    --danger-bg: #2E1316;
  --info: #94A3B8;      --info-bg: #1B2230;
  --gold: #FACC15;      --gold-bg: #2B2706;
  --late: #FDE047;      --late-bg: #3B2F08;
  --absent: #F87171;    --absent-bg: #2E1316;
  --just: #A5B4FC;      --just-bg: #1B1B33;

  --bg: #09090B;
  --surface: #131316;
  --surface-2: #18181B;
  --surface-3: #232328;
  --border: #2A2A30;
  --border-strong: #3A3A42;
  --text: #FAFAFA;
  --text-muted: #A1A1AA;
  --text-faint: #71717A;
  --overlay: rgba(0,0,0,.66);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow: 0 6px 18px rgba(0,0,0,.45);
  --shadow-lg: 0 22px 48px rgba(0,0,0,.6);
  --ring: 0 0 0 3px rgba(34,197,94,.40);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }

h1, h2, h3, .display { font-family: var(--font-display); letter-spacing: -.01em; }
a { color: var(--brand); text-decoration: none; }
::selection { background: var(--brand); color: #fff; }

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }

/* ============================ Componentes ============================ */

.pu-card, .ujc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.pu-btn, .ujc-btn {
  --b: var(--brand);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .68rem 1.1rem; border-radius: var(--r);
  font: 600 .95rem/1 var(--font-sans);
  background: var(--b); color: var(--brand-contrast);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .12s var(--ease), filter .15s var(--ease), box-shadow .15s var(--ease);
}
.pu-btn:hover, .ujc-btn:hover { filter: brightness(1.06); box-shadow: var(--shadow); }
.pu-btn:active, .ujc-btn:active { transform: translateY(1px) scale(.99); }
.pu-btn:disabled, .ujc-btn:disabled, .pu-btn[disabled] { opacity: .45; cursor: not-allowed; filter: none; box-shadow: none; transform: none; }
.pu-btn--ghost, .ujc-btn--ghost { background: transparent; color: var(--text); border-color: var(--border-strong); }
.pu-btn--soft, .ujc-btn--soft { background: var(--brand-50); color: var(--brand-600); }
.pu-btn--dark { background: var(--text); color: var(--bg); }
.pu-btn--block, .ujc-btn--block { width: 100%; }
.pu-btn--lg, .ujc-btn--lg { padding: .95rem 1.3rem; font-size: 1.05rem; border-radius: var(--r-lg); }
.pu-btn:focus-visible, .ujc-btn:focus-visible { outline: none; box-shadow: var(--ring); }

.badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem; border-radius: var(--r-full);
  font: 600 .74rem/1.3 var(--font-sans); white-space: nowrap;
}
.badge--ok     { color: var(--ok);     background: var(--ok-bg); }
.badge--warn, .badge--late { color: var(--warn-ink, var(--warn)); background: var(--warn-bg); }
.badge--danger, .badge--absent { color: var(--danger); background: var(--danger-bg); }
.badge--info   { color: var(--info);   background: var(--info-bg); }
.badge--just   { color: var(--just);   background: var(--just-bg); }
.badge--gold   { color: var(--gold);   background: var(--gold-bg); }
.badge--neutral{ color: var(--text-muted); background: var(--surface-3); }

/* Barra de progresso (núcleo do LMS) */
.pu-prog { position:relative; height:8px; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.pu-prog > span { position:absolute; inset:0 auto 0 0; border-radius:999px; background:var(--brand); transition: width .6s var(--ease); }
.pu-prog--lg { height:12px; }

.chip {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.4rem .8rem; border-radius:var(--r-full);
  border:1px solid var(--border-strong); background:var(--surface);
  color:var(--text-muted); font:600 .82rem/1 var(--font-sans); cursor:pointer;
  transition: all .15s var(--ease);
}
.chip[aria-pressed="true"], .chip.is-active { background: var(--brand); color:#fff; border-color: var(--brand); }

.switch { position:relative; width:46px; height:26px; border-radius:999px; background:var(--surface-3); border:1px solid var(--border-strong); cursor:pointer; transition:.2s var(--ease); }
.switch::after { content:""; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--shadow-sm); transition:.2s var(--ease); }
.switch[aria-checked="true"] { background: var(--brand); border-color: var(--brand); }
.switch[aria-checked="true"]::after { left:22px; }

.live-dot { width:.6rem; height:.6rem; border-radius:50%; background:var(--brand); display:inline-block; animation: pulse 1.6s var(--ease) infinite; }

/* ============================ Animações ============================ */
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent);} 50%{ box-shadow:0 0 0 6px transparent;} }
@keyframes fadeInUp { from{ opacity:0; transform:translateY(14px);} to{ opacity:1; transform:none;} }
@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes scaleIn { from{opacity:0; transform:scale(.92);} to{opacity:1; transform:none;} }
@keyframes spin { to{ transform:rotate(360deg);} }
@keyframes rowIn { from{ opacity:0; transform:translateX(-12px);} to{ opacity:1; transform:none;} }
@keyframes shimmer { 100%{ transform:translateX(100%);} }

.fade-in-up { animation: fadeInUp .5s var(--ease) both; }
.fade-in { animation: fadeIn .4s var(--ease) both; }
.scale-in { animation: scaleIn .4s var(--ease) both; }
.row-in { animation: rowIn .4s var(--ease) both; }
.reveal { opacity:0; transform:translateY(20px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible { opacity:1; transform:none; }

.spinner { width:18px; height:18px; border-radius:50%; border:2.5px solid var(--border-strong); border-top-color: var(--brand); animation: spin .7s linear infinite; }
.skeleton { position:relative; overflow:hidden; background:var(--surface-3); border-radius:var(--r-sm); }
.skeleton::after { content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--surface) 60%, transparent), transparent); animation: shimmer 1.4s infinite; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity:1; transform:none; }
}

/* Utilidades mínimas */
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.center { display:flex; align-items:center; justify-content:center; }
.hidden { display:none !important; }
.demo-note { font-size:.72rem; color:var(--text-faint); }