/* ══════════════════════════════════════════════════════════════════════════
   FitCPX Lite — tokens de design do PAINEL do personal (v2, 08/10/2026)
   Base: documentos/design-handoff/REGRAS-DE-DESIGN.md (tokens da §2).
   Os nomes novos (--surface, --primary, --text-muted…) são a fonte de verdade.
   Os nomes antigos (--bg2, --accent, --text3…) continuam como ALIAS no fim da
   lista: HTML/JS com estilo inline não precisou ser reescrito.
   O portal do aluno NÃO usa este arquivo (usa aluno/tokens-portal.css).
   Tema escuro: classe .dark no <html> (toggleTema()).
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Superfícies ─────────────────────────────────────────────────────── */
  --bg:#f5f5f5;
  --bg-glow:var(--bg);          /* sem brilho colorido (pedido do personal: cinza neutro, marca só nos destaques) */
  --surface:#ffffff;
  --surface-muted:#fafafa;
  --border:#e2e2e2;
  --border-strong:#d2d2d2;
  --divider:#ececec;

  /* ── Texto ───────────────────────────────────────────────────────────── */
  --text:#1f1f1f;
  --text-2:#4a4a4a;
  --text-muted:#666666;
  --text-faint:#707070;

  /* ── Acento (verde): ação principal, estado ativo, progresso ─────────── */
  /* Mesmo verde médio (#3dbb6e) nos dois temas, com texto ESCURO no botão (7,5:1). Só o texto/ícone verde muda de tom
     para ler bem sobre cada fundo. Ver documentos/DESIGN-SYSTEM.md. */
  --primary:#3dbb6e;
  --primary-hover:#34a561;
  --primary-ink:#15783b;        /* texto/ícone verde, links (4,8:1 sobre o fundo de selo) */
  --primary-soft:#e4f2e9;       /* fundo de ícone, avatar */
  --primary-tint:#eff7f2;       /* item ativo, highlight */
  --primary-line:#b9dcc5;
  --on-primary:#06180d;
  --primary-ring:rgba(61,187,110,.28);   /* anel de foco (js/marca.js recalcula) */

  /* ── Status (cor = estado; nunca decoração) ──────────────────────────── */
  --danger:#dc2626;     --danger-ink:#b42318;   --danger-soft:#fdeeee;
  --on-warning:#2a1a00;         /* texto sobre fundo --warning (selo de alerta de saude) */
  --on-danger:#ffffff;          /* texto sobre fundo --danger (botão Excluir, selo de alerta, aviso de erro) */
  --warning:#f59e0b;    --warning-ink:#a35a00;  --warning-soft:#fff4e0;
  --info-ink:#1d4ed8;   --info-soft:#eaf2ff;
  --neutral-soft:#f0f0f0;
  --ink-card:#1f1f1f;           /* card escuro (Saúde) */
  --track:#ebebeb;              /* trilho de barra de progresso */

  /* ── Forma ───────────────────────────────────────────────────────────── */
  --r-card:16px;
  --r-block:12px;
  --r-btn:9px;
  --r-tile:14px;
  --r-chip:20px;
  --r-sheet:20px;

  /* ── Elevação ────────────────────────────────────────────────────────── */
  --shadow-card:0 1px 2px rgba(0,0,0,.05), 0 10px 30px -14px rgba(0,0,0,.14);
  --shadow-pop:0 20px 44px -14px rgba(0,0,0,.28);
  --backdrop:rgba(0,0,0,.35);

  /* ── Tipografia ──────────────────────────────────────────────────────── */
  --sans:'Ubuntu',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --fs-base:14px;--fs-sm:13px;--fs-xs:12px;--fs-xxs:11px;

  /* ── Movimento (150–320ms) ───────────────────────────────────────────── */
  --ease:cubic-bezier(.2,.8,.2,1);
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --t-fast:150ms;
  --t-base:220ms;
  --t-slow:320ms;

  /* ── Alturas de controle (desktop; o toque sobe para 44 em painel.css) ─ */
  --ctl-h:40px;

  /* ══ ALIAS dos nomes antigos (não usar em código novo) ═════════════════ */
  --bg-sidebar:var(--surface);
  --bg2:var(--surface);
  --bg3:var(--surface);
  --bg4:var(--neutral-soft);
  --border2:var(--border-strong);
  --border-subtle:var(--divider);
  --accent:var(--primary-ink);
  --accent2:#166534;
  --on-accent2:#ffffff;
  --accent-dim:var(--primary-soft);
  --accent-dim2:var(--primary-line);
  --accent-text:#06180d;
  --text2:var(--text-2);
  --text3:var(--text-muted);
  --red:var(--danger);     --red-dim:var(--danger-soft);     --red-line:#f3c4c1;
  --amber:var(--warning-ink); --amber-dim:var(--warning-soft); --amber-line:#efd7a8;
  --blue:var(--info-ink);  --blue-dim:var(--info-soft);      --blue-line:#c3d2f6;
  --green:var(--primary-ink);
  --yellow:var(--warning-ink);
  --purple:#6d28d9;
  --orange:#c2410c;
  --radius:var(--r-btn);
  --radius2:var(--r-card);
  --radius3:var(--r-card);
  --shadow:var(--shadow-card);
  --shadow2:var(--shadow-pop);

  color-scheme:light;
}

:root.dark {
  /* Proposta B (elevação, estilo Material): cinza neutro, cartões mais claros que o fundo, texto a ~87%; marca em verde médio com texto escuro.
     Preview e medidas: documentos/preview-modo-escuro.html */
  --bg:#121212;
  --bg-glow:var(--bg);
  --surface:#1e1e1e;
  --surface-muted:#252525;
  --border:#363636;
  --border-strong:#444444;
  --divider:#2a2a2a;

  --text:#dedede;
  --text-2:#b9b9b9;
  --text-muted:#a0a0a0;
  --text-faint:#8c8c8c;

  --primary:#3dbb6e;
  --primary-hover:#34a561;
  --primary-ink:#6fd69a;
  --primary-soft:#23372b;
  --primary-tint:#16231b;
  --primary-line:#285038;
  --on-primary:#06180d;
  --primary-ring:rgba(61,187,110,.3);

  --danger:#f87171;     --danger-ink:#f2b8b5;   --danger-soft:#3a1f1e;
  --on-danger:#2a0a0a;
  --warning:#fbbf24;    --warning-ink:#f0d28a;  --warning-soft:#332a14;
  --info-ink:#a8c7fa;   --info-soft:#1b2740;
  --neutral-soft:#2a2a2a;
  --ink-card:#0c0c0c;
  --track:#2c2c2c;

  --shadow-card:none;
  --shadow-pop:0 0 0 1px rgba(255,255,255,.08), 0 20px 44px -14px rgba(0,0,0,.7);
  --backdrop:rgba(0,0,0,.55);

  --accent2:#b5e8c9;
  --on-accent2:#00210c;
  --accent-text:#06180d;
  --red-line:rgba(248,113,113,.3);
  --amber-line:rgba(252,211,77,.3);
  --blue-line:rgba(147,197,253,.3);
  --purple:#a78bfa;
  --orange:#fb923c;

  color-scheme:dark;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:var(--fs-base);line-height:1.5;
  font-feature-settings:'tnum' 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{text-wrap:balance;font-weight:700;letter-spacing:-.01em}
p{text-wrap:pretty}

/* Partes do navegador que também carregam o design */
::selection{background:var(--primary-line);color:var(--text)}
input,textarea{caret-color:var(--primary-ink)}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--primary)}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
::placeholder{color:var(--text-faint);opacity:1}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:10px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--text-faint);background-clip:content-box;border:3px solid transparent}
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}

/* Remove o spinner nativo dos inputs numéricos (os botões +/− já cobrem) e
   reserva largura pra até 4 dígitos sem o layout se mover. */
input[type=number]{-moz-appearance:textfield;min-width:3.2em;text-align:center}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ── Ícones (Phosphor Icons via CDN) ────────────────────────────────────────
   Uso no markup e nas strings do JS:  <i class=ph-barbell></i>
   (sem aspas no atributo de propósito: funciona dentro de qualquer string JS). */
i[class^="ph-"],i[class*=" ph-"]{
  font-family:'Phosphor'!important;font-style:normal;font-weight:400;
  font-variant:normal;text-transform:none;speak:none;
  display:inline-block;flex-shrink:0;
  font-size:1.2em;line-height:1;vertical-align:-.2em;
  -webkit-font-smoothing:antialiased;
}
i.ph-fill-on,i[class*="-fill"]{font-family:'Phosphor-Fill'!important}
i[class*="-bold"]{font-family:'Phosphor-Bold'!important}

/* Marcador de status (substitui as bolinhas de emoji): <i class=sd-red></i> */
i[class^="sd-"]{
  display:inline-block;width:.6em;height:.6em;border-radius:50%;flex-shrink:0;
  vertical-align:.02em;background:currentColor;
}
i.sd-red{background:var(--danger)}
i.sd-green{background:var(--primary)}
i.sd-amber{background:var(--warning)}
i.sd-blue{background:var(--info-ink)}
i.sd-gray{background:var(--text-faint)}
i.sd-orange{background:var(--orange)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ── Controles de formulário soltos (fora de .field): mesmo vocabulário ──── */
:where(input,select,textarea):not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=hidden]){
  background-color:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-btn);color:var(--text);
  font-family:var(--sans);font-size:14px;outline:none;
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
:where(input,select):not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=hidden]){height:var(--ctl-h);padding:0 11px}
:where(textarea){padding:9px 11px;line-height:1.5}
:where(input,select,textarea):not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=hidden]):focus{
  border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-ring)}
select:not([multiple]){
  -webkit-appearance:none;appearance:none;cursor:pointer;padding-right:30px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%238a948e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
select:disabled,input:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}

a{color:var(--primary-ink);text-underline-offset:2px}
:root:not(.dark) a{color:var(--accent2)}
code,kbd,samp{font-family:var(--mono);font-size:.92em;background:var(--neutral-soft);border-radius:5px;padding:1px 5px}
pre{font-family:var(--mono)}
hr{border:0;border-top:1px solid var(--border)}
details>summary{cursor:pointer}
progress{accent-color:var(--primary)}

/* Botão "Instalar aplicativo" (js/instalar.js): o atributo hidden precisa vencer o display dos botões e cartões. */
[data-instalar][hidden]{display:none !important}