/* valoria-tema.css — MARCA: cor, fonte, símbolo, assinatura. Carregado POR ÚLTIMO.
 * Valores dos tokens: claude/padrao-visual-apps.md (11/11/2026).
 * ⚠️ O símbolo V abaixo é uma redesenhada a partir da descrição ("V em duas metades, esquerda branca,
 *    direita #99F6E4, sem caixa"). Trocar pelo arquivo oficial do tema do app do Paulo quando disponível. */

:root {
  --va-bg: #11181C;
  --va-bg2: #0C1114;
  --va-panel: #161F24;
  --va-turq: #0E7490;
  --va-vivo: #2DD4BF;
  --va-claro: #99F6E4;
  --va-text: #ffffff;
  --va-text2: rgba(255, 255, 255, .74);
  --va-text3: rgba(255, 255, 255, .52);
  --va-line: rgba(255, 255, 255, .12);
  --va-line2: rgba(255, 255, 255, .22);
  --va-ambar: #F2C879;
  --va-alerta: #F08A7A;
  --va-r-btn: 10px;
  --va-r-bloco: 16px;
  --va-font: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html { font-family: var(--va-font); background: var(--va-bg); color: var(--va-text); }
body {
  background-color: var(--va-bg);
  /* grade fina + brilho turquesa (seção 18 do padrão) */
  background-image:
    linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px),
    radial-gradient(900px 600px at 100% 0%, rgba(14, 116, 144, .22), transparent 60%),
    radial-gradient(800px 600px at 0% 100%, rgba(45, 212, 191, .10), transparent 60%);
  background-size: 40px 40px, 40px 40px, auto, auto;
  background-attachment: fixed;
}
.sidebar { background: var(--va-bg2); border-right: 1px solid var(--va-line); }
.card, .panel {
  background: rgba(22, 31, 36, .74);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--va-line);
  border-radius: var(--va-r-bloco);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.card.hover:hover { transform: translateY(-2px); border-color: var(--va-line2); }
.card, .btn, .nav a { transition: transform .18s, border-color .18s, background .18s, box-shadow .18s; }

/* marca: Smart (branco) + Workout (--va-claro) */
.brand-name { font-weight: 600; letter-spacing: .01em; }
.brand-name .p1 { color: var(--va-text); }
.brand-name .p2 { color: var(--va-claro); }
.brand-sym { display: block; width: 28px; height: 28px; }
.brand-sym .l { fill: #ffffff; }
.brand-sym .r { fill: #99F6E4; }
.sign { color: rgba(255, 255, 255, .28); text-transform: uppercase; letter-spacing: .12em; }

.btn { border-radius: var(--va-r-btn); border: 1px solid var(--va-line2); background: transparent; color: var(--va-text); }
.btn:hover { background: rgba(255, 255, 255, .06); }
.btn-primary { background: var(--va-turq); border-color: var(--va-turq); color: #fff; }
.btn-primary:hover { background: #118aa8; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-danger { border-color: var(--va-alerta); color: var(--va-alerta); }

input, select { background: var(--va-bg2); color: var(--va-text); border: 1px solid var(--va-line2); border-radius: var(--va-r-btn); font-family: var(--va-font); }
input:focus, select:focus { outline: 2px solid var(--va-vivo); outline-offset: 1px; }
label .lab { color: var(--va-claro); }
.hint, .muted { color: var(--va-text3); }
.text2 { color: var(--va-text2); }
a { color: var(--va-claro); }

.nav a { color: var(--va-text2); border-radius: var(--va-r-btn); }
.nav a:hover { background: rgba(255, 255, 255, .05); color: var(--va-text); }
.nav a.on { color: var(--va-text); background: rgba(45, 212, 191, .10); box-shadow: inset 2px 0 0 var(--va-vivo), 0 0 18px rgba(45, 212, 191, .10); }
.nav a.off { color: var(--va-text3); pointer-events: none; }
.tag-soon { border: 1px solid var(--va-line2); color: var(--va-text3); border-radius: 999px; }

.tabs button { color: var(--va-text2); border-bottom: 2px solid transparent; background: none; font-family: var(--va-font); }
.tabs button.on { color: var(--va-text); border-bottom-color: var(--va-vivo); }

.pill { border-radius: 999px; border: 1px solid var(--va-line2); }
.pill.q-tranquilo { color: var(--va-vivo); border-color: rgba(45, 212, 191, .5); }
.pill.q-aceitavel { color: var(--va-ambar); border-color: rgba(242, 200, 121, .5); }
.pill.q-critico { color: var(--va-alerta); border-color: rgba(240, 138, 122, .5); }
.prio { border-radius: 8px; background: rgba(45, 212, 191, .12); color: var(--va-claro); border: 1px solid rgba(45, 212, 191, .35); }
.badge-ex { color: var(--va-ambar); border: 1px solid rgba(242, 200, 121, .5); border-radius: 6px; }

.tbl th { color: var(--va-text3); border-bottom: 1px solid var(--va-line2); }
.tbl td { border-bottom: 1px solid var(--va-line); }
.tbl tr:last-child td { border-bottom: 0; }
.num { font-variant-numeric: tabular-nums; }
.kpi .v { color: var(--va-text); }
.kpi .k { color: var(--va-text3); text-transform: uppercase; letter-spacing: .08em; }

.warn { border: 1px solid rgba(242, 200, 121, .45); background: rgba(242, 200, 121, .07); border-radius: 12px; color: var(--va-ambar); }
.err { border: 1px solid rgba(240, 138, 122, .5); background: rgba(240, 138, 122, .08); border-radius: 12px; color: var(--va-alerta); }
.info { border: 1px solid var(--va-line2); background: rgba(255, 255, 255, .03); border-radius: 12px; color: var(--va-text2); }

/* gráfico de perfil */
.chart .axis { stroke: var(--va-line2); }
.chart .grid { stroke: var(--va-line); }
.chart text { fill: var(--va-text3); font-family: var(--va-font); }
.chart .z-desc_forte { fill: rgba(255, 255, 255, .40); }
.chart .z-desc { fill: rgba(255, 255, 255, .22); }
.chart .z-plano { fill: var(--va-turq); fill-opacity: .70; }
.chart .z-sub { fill: var(--va-vivo); fill-opacity: .60; }
.chart .z-sub_forte { fill: var(--va-claro); fill-opacity: .70; }
.chart .line { stroke: var(--va-text); fill: none; }
.chart .stop-line { stroke: var(--va-line2); }
.chart .stop.q-tranquilo circle { fill: var(--va-vivo); }
.chart .stop.q-aceitavel circle { fill: var(--va-ambar); }
.chart .stop.q-critico circle { fill: var(--va-alerta); }
.chart .stop circle { stroke: var(--va-bg2); }
.chart .stop text { fill: var(--va-bg2); font-weight: 700; }
.chart .cursor { stroke: var(--va-claro); }
.tip { background: var(--va-bg2); border: 1px solid var(--va-line2); border-radius: 10px; color: var(--va-text); }
.sw { border-radius: 3px; }
.sw.z-desc_forte { background: rgba(255, 255, 255, .40); }
.sw.z-desc { background: rgba(255, 255, 255, .22); }
.sw.z-plano { background: var(--va-turq); }
.sw.z-sub { background: var(--va-vivo); }
.sw.z-sub_forte { background: var(--va-claro); }
.toast { background: var(--va-bg2); border: 1px solid var(--va-line2); border-radius: 12px; }

/* Hoje / Treinos */
.score.q-tranquilo { border-color: var(--va-vivo); color: var(--va-vivo); }
.score.q-aceitavel { border-color: var(--va-ambar); color: var(--va-ambar); }
.score.q-critico { border-color: var(--va-alerta); color: var(--va-alerta); }
.score .muted { color: var(--va-text3); }
.sugg { border: 1px dashed rgba(45, 212, 191, .45); border-radius: 12px; background: rgba(45, 212, 191, .05); }
.chart .band { fill: rgba(45, 212, 191, .12); }
.chart .hrv-line { stroke: var(--va-text); fill: none; }
.chart .hrv-dot { fill: var(--va-text); }
.chart .hrv-dot.last.f-ok { fill: var(--va-vivo); }
.chart .hrv-dot.last.f-atencao { fill: var(--va-ambar); }
.chart .hrv-dot.last.f-alerta { fill: var(--va-alerta); }
.sw.band-sw { background: rgba(45, 212, 191, .3); }

.bar { background: rgba(255,255,255,.08); }
.bar i { background: var(--va-vivo); }
.bar i.hard { background: var(--va-ambar); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .card.hover:hover { transform: none; }
}