/* ============================================================
   tokens.css — Kore Design System
   Wellness / editorial-modern · Outfit variable (100-900)
   ============================================================ */

/* Outfit variable font: cubre todo el rango 100-900 en un solo request.
   Public Sans queda como fallback silencioso si Outfit falla. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&family=Public+Sans:wght@300;400;500;600;700&display=swap');

:root {
    /* ---------- Fuentes ---------- */
    --font-sans:    'Outfit', 'Public Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Outfit', 'Public Sans', ui-sans-serif, system-ui, sans-serif;
    --font-mono:    ui-monospace, SFMono-Regular, Menlo, 'Cascadia Code', monospace;

    /* ---------- Neutrales cálidos (base warm off-white, no grises fríos) ---------- */
    --c-bg:              #FBF9F5;   /* fondo app */
    --c-bg-mesh-1:       #F4EDE1;   /* peach polvo para mesh */
    --c-bg-mesh-2:       #E7F3EC;   /* mint polvo para mesh */
    --c-surface:         #FFFFFF;
    --c-surface-sunk:    #F5F3EF;   /* superficies deprimidas */
    --c-surface-alt:     #FAF8F3;   /* variante sutil */
    --c-border:          #EAE6DE;
    --c-border-strong:   #D6D2CB;
    --c-divider:         #F0EDE6;

    /* ---------- Tipografía color ---------- */
    --c-text:            #1B1917;
    --c-text-muted:      #6B655D;
    --c-text-subtle:     #A29C93;
    --c-text-inverse:    #FBF9F5;

    /* ---------- Primario emerald (contenido, no neón) ---------- */
    --c-primary:         #047857;
    --c-primary-hover:   #065F46;
    --c-primary-active:  #064E3B;
    --c-primary-soft:    #ECFDF5;
    --c-primary-soft-2:  #D1FAE5;
    --c-primary-text:    #064E3B;
    --c-primary-ring:    rgba(4, 120, 87, 0.18);

    /* ---------- Acentos secundarios ---------- */
    --c-warm:            #C2410C;   /* streak, energía cálida (naranja quemado) */
    --c-warm-soft:       #FEF0E3;
    --c-warm-text:       #7C2D12;

    --c-cool:            #0369A1;   /* info, agua */
    --c-cool-soft:       #E0F2FE;
    --c-cool-text:       #0C4A6E;

    --c-berry:           #9F1239;   /* peso, salud, énfasis */
    --c-berry-soft:      #FFE4E9;

    /* ---------- Estados ---------- */
    --c-success:         #047857;
    --c-success-soft:    #ECFDF5;
    --c-warning:         #B45309;
    --c-warning-soft:    #FEF3C7;
    --c-danger:          #BE123C;
    --c-danger-soft:     #FFE4E6;
    --c-info:            #0369A1;
    --c-info-soft:       #E0F2FE;

    /* ---------- Tipografía escala ---------- */
    --fs-xs:   0.75rem;    /* 12 */
    --fs-sm:   0.875rem;   /* 14 */
    --fs-base: 1rem;       /* 16 */
    --fs-lg:   1.125rem;   /* 18 */
    --fs-xl:   1.375rem;   /* 22 */
    --fs-2xl:  1.75rem;    /* 28 */
    --fs-3xl:  2.25rem;    /* 36 */
    --fs-4xl:  3rem;       /* 48 */
    --fs-hero: 4rem;       /* 64 */

    --lh-tight:  1.15;
    --lh-snug:   1.3;
    --lh-normal: 1.55;
    --lh-relaxed:1.7;

    --tracking-tight:   -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.04em;
    --tracking-caps:    0.14em;

    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semi:     600;
    --fw-bold:     700;

    /* ---------- Espaciado (base 4px) ---------- */
    --s-1:  4px;
    --s-2:  8px;
    --s-3:  12px;
    --s-4:  16px;
    --s-5:  20px;
    --s-6:  24px;
    --s-8:  32px;
    --s-10: 40px;
    --s-12: 48px;
    --s-16: 64px;
    --s-20: 80px;

    /* ---------- Radios ---------- */
    --r-xs:   4px;
    --r-sm:   8px;
    --r-md:   12px;
    --r-lg:   16px;
    --r-xl:   20px;
    --r-2xl:  24px;
    --r-full: 999px;

    /* ---------- Sombras (muy sutiles, warm-tinted) ---------- */
    --shadow-xs: 0 1px 2px rgba(28, 25, 23, 0.04);
    --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04),
                 0 1px 3px rgba(28, 25, 23, 0.04);
    --shadow-md: 0 4px 12px -2px rgba(28, 25, 23, 0.06),
                 0 2px 4px rgba(28, 25, 23, 0.04);
    --shadow-lg: 0 20px 40px -18px rgba(28, 25, 23, 0.14),
                 0 8px 16px -8px rgba(28, 25, 23, 0.06);
    --shadow-inset: inset 0 1px 2px rgba(28, 25, 23, 0.05);

    /* ---------- Layout ---------- */
    --z-nav:    50;
    --z-modal:  100;
    --z-toast:  200;

    --nav-mobile-h: 68px;
}

/* ============================================================
   Reset básico + tipografía
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    font-weight: 400;
    line-height: var(--lh-normal);
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Display: Public Sans light italic para hero/títulos grandes, editorial + moderno */
.font-display { font-family: var(--font-display); font-weight: 300; font-style: italic; letter-spacing: -0.025em; }
.font-mono { font-family: var(--font-mono); }

/* Números tabulares para métricas alineadas */
.nums { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ============================================================
   Fondo con mesh sutil (aplicar a body de vistas hero)
   ============================================================ */
.bg-mesh {
    background-color: var(--c-bg);
    background-image:
        radial-gradient(at 10% 5%, var(--c-bg-mesh-2) 0px, transparent 55%),
        radial-gradient(at 90% 15%, var(--c-bg-mesh-1) 0px, transparent 55%),
        radial-gradient(at 50% 100%, var(--c-primary-soft) 0px, transparent 60%);
}

/* Grain sutil para textura (opcional, aplicar como overlay) */
.grain::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.035;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' /></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");
}

/* ============================================================
   Componentes: botones
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 10px 18px;
    min-height: 44px;
    border-radius: var(--r-md);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    line-height: 1;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .06s ease;
    font-family: inherit;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--c-primary-ring); }

.btn-primary {
    background: var(--c-primary);
    color: var(--c-text-inverse);
}
.btn-primary:hover { background: var(--c-primary-hover); }
.btn-primary:active { background: var(--c-primary-active); }

.btn-secondary {
    background: var(--c-surface);
    color: var(--c-text);
    border-color: var(--c-border-strong);
}
.btn-secondary:hover { background: var(--c-surface-alt); }

.btn-ghost {
    background: transparent;
    color: var(--c-text);
}
.btn-ghost:hover { background: var(--c-surface-sunk); }

.btn-lg { padding: 14px 24px; min-height: 52px; font-size: var(--fs-lg); border-radius: var(--r-lg); }
.btn-sm { padding: 6px 12px; min-height: 34px; font-size: var(--fs-sm); }

.btn-block { width: 100%; }

/* ============================================================
   Componentes: cards
   ============================================================ */
.card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--s-6);
}
.card-lg { padding: var(--s-8); border-radius: var(--r-xl); }
.card-compact { padding: var(--s-4); border-radius: var(--r-md); }

/* ---- Card densa: para listas de métricas / stats, patrón inspirado en tracker apps ---- */
.card--dense { padding: 14px; border-radius: var(--r-md); }
.card--dense + .card--dense { margin-top: 8px; }
.card--dense .card-title {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semi);
    color: var(--c-text);
    margin-bottom: 6px;
    letter-spacing: -0.005em;
}
.card--dense .card-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: var(--fw-semi);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--c-text-muted);
    margin-bottom: 4px;
}
.card--dense .metric {
    font-size: 26px;
    font-weight: var(--fw-bold);
    letter-spacing: -0.025em;
    line-height: 1.05;
    color: var(--c-text);
    font-variant-numeric: tabular-nums;
}
.card--dense .metric-sub {
    font-size: 11px;
    color: var(--c-text-muted);
    margin-top: 2px;
    line-height: 1.3;
}
.card--dense .metric-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    font-weight: var(--fw-semi);
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--c-primary-soft);
    color: var(--c-primary-text);
    font-variant-numeric: tabular-nums;
}
.card--dense .metric-delta.is-warm { background: var(--c-warm-soft); color: var(--c-warm-text); }
.card--dense .metric-delta.is-danger { background: var(--c-danger-soft); color: var(--c-danger); }

/* ---- Segmented control (30d / 90d / 1Y / All) ---- */
.segmented {
    display: inline-flex;
    padding: 3px;
    background: var(--c-surface-sunk);
    border: 1px solid var(--c-border);
    border-radius: 10px;
    gap: 2px;
    width: fit-content;
    max-width: 100%;
}
.segmented--block { display: flex; width: 100%; }
.segmented__item {
    flex: 1;
    padding: 7px 12px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: var(--c-text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 0.01em;
    line-height: 1;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: color .14s ease, background .14s ease, box-shadow .14s ease;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.segmented__item:hover { color: var(--c-text); }
.segmented__item.is-active {
    background: var(--c-surface);
    color: var(--c-text);
    font-weight: var(--fw-semi);
    box-shadow: var(--shadow-xs), 0 0 0 1px var(--c-border);
}
.segmented--primary .segmented__item.is-active {
    background: var(--c-primary);
    color: #fff;
    box-shadow: 0 4px 10px -4px rgba(4,120,87,.45);
}
[data-theme="dark"] .segmented { background: var(--c-surface-alt); border-color: var(--c-border); }
[data-theme="dark"] .segmented__item.is-active { background: var(--c-surface); }
[data-theme="dark"] .segmented--primary .segmented__item.is-active { background: var(--c-primary); }

/* Card hero: para el "HOY" del alumno o el CTA principal */
.card-hero {
    background: linear-gradient(180deg, #ECFDF5 0%, #FFFFFF 55%);
    border: 1px solid var(--c-primary-soft-2);
    border-radius: var(--r-xl);
    padding: var(--s-6);
    box-shadow: var(--shadow-md);
}

/* ============================================================
   Componentes: inputs
   ============================================================ */
.input, .textarea, .select {
    display: block;
    width: 100%;
    padding: 12px 14px;
    min-height: 48px;
    background: var(--c-surface);
    border: 1px solid var(--c-border-strong);
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: var(--fs-base);
    color: var(--c-text);
    line-height: 1.4;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.textarea { min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-primary-ring);
}
.input::placeholder, .textarea::placeholder { color: var(--c-text-subtle); }

.label {
    display: block;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--c-text);
    margin-bottom: 6px;
}
.helper { font-size: var(--fs-xs); color: var(--c-text-muted); margin-top: 4px; }

/* ============================================================
   Componentes: badges & chips
   ============================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
}
.badge-neutral   { background: var(--c-surface-sunk); color: var(--c-text-muted); border: 1px solid var(--c-border); }
.badge-primary   { background: var(--c-primary-soft); color: var(--c-primary-text); }
.badge-warm      { background: var(--c-warm-soft); color: var(--c-warm-text); }
.badge-cool      { background: var(--c-cool-soft); color: var(--c-cool-text); }
.badge-berry     { background: var(--c-berry-soft); color: var(--c-berry); }
.badge-success   { background: var(--c-success-soft); color: var(--c-primary-text); }
.badge-danger    { background: var(--c-danger-soft); color: var(--c-danger); }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-full);
    font-size: var(--fs-sm);
    color: var(--c-text);
    box-shadow: var(--shadow-xs);
}
.chip-primary { background: var(--c-primary-soft); border-color: transparent; color: var(--c-primary-text); font-weight: var(--fw-medium); }

/* ============================================================
   Componentes: tab-bar mobile
   ============================================================ */
.tab-bar-mobile {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-nav);
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid var(--c-border);
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 4px;
    min-height: 52px;
    border-radius: var(--r-md);
    color: var(--c-text-muted);
    text-decoration: none;
    font-size: 11px;
    font-weight: var(--fw-medium);
    letter-spacing: 0.02em;
    transition: color .18s ease, background .18s ease;
}
.tab-item svg { width: 22px; height: 22px; }
.tab-item.is-active {
    color: var(--c-primary-text);
    background: var(--c-primary-soft);
}

/* ---- Tab bar del alumno (5 columnas con FAB central elevado, anclada al borde) ---- */
.tab-bar-alumno {
    position: fixed;
    left: 0; right: 0;
    bottom: 0;
    z-index: var(--z-nav);
    background: rgba(255,255,255,0.94);
    backdrop-filter: saturate(160%) blur(14px);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid var(--c-border);
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px -12px rgba(28,25,23,.14);
    display: grid;
    grid-template-columns: 1fr 1fr 76px 1fr 1fr;
    align-items: end;
    gap: 2px;
    overflow: visible;
}
.tab-bar-alumno .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    min-height: 48px;
    border-radius: 12px;
    color: var(--c-text-muted);
    text-decoration: none;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    transition: color .15s ease, background .15s ease;
}
.tab-bar-alumno .tab-item svg { width: 22px; height: 22px; }
.tab-bar-alumno .tab-item.is-active {
    color: var(--c-primary-text);
    background: var(--c-primary-soft);
}

/* ---- FAB central del tab bar ---- */
.tab-fab-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    min-height: 48px;
}
.tab-fab {
    position: relative;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    margin-top: -26px;
    border-radius: 999px;
    background: var(--c-primary);
    color: #fff;
    text-decoration: none;
    box-shadow:
        0 10px 22px -8px rgba(4, 120, 87, 0.55),
        0 4px 10px -4px rgba(28, 25, 23, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.15);
    border: 3px solid var(--c-surface);
    transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
}
.tab-fab:active { transform: translateY(1px) scale(0.98); }
.tab-fab svg { width: 26px; height: 26px; }
.tab-fab--resume {
    background: var(--c-warm);
    box-shadow:
        0 10px 22px -8px rgba(194, 65, 12, 0.55),
        0 4px 10px -4px rgba(28, 25, 23, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.18);
}
.tab-fab--muted {
    background: var(--c-surface);
    color: var(--c-primary-text);
    border-color: var(--c-border);
    box-shadow:
        0 6px 14px -6px rgba(28,25,23,0.18),
        0 2px 6px -2px rgba(28,25,23,0.08);
}
.tab-fab-label {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    font-weight: var(--fw-semi);
    letter-spacing: 0.02em;
    color: var(--c-text-muted);
    line-height: 1;
    text-align: center;
    max-width: 76px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.tab-fab-label.is-primary { color: var(--c-primary-text); }
.tab-fab-label.is-warm    { color: var(--c-warm-text); }
.tab-badge {
    position: absolute;
    top: 2px; right: calc(50% - 18px);
    background: var(--c-primary);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 999px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
    box-shadow: 0 2px 6px -1px rgba(4, 120, 87, 0.35);
}
@media (max-width: 400px) {
    .tab-bar-alumno { padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); gap: 1px; grid-template-columns: 1fr 1fr 68px 1fr 1fr; }
    .tab-bar-alumno .tab-item { font-size: 10px; padding: 6px 1px; min-height: 46px; gap: 2px; }
    .tab-bar-alumno .tab-item svg { width: 20px; height: 20px; }
    .tab-badge { min-width: 14px; height: 14px; font-size: 8px; top: 0; }
    .tab-fab { width: 54px; height: 54px; margin-top: -24px; }
    .tab-fab svg { width: 24px; height: 24px; }
    .tab-fab-label { font-size: 9px; max-width: 68px; }
}
@media (max-width: 340px) {
    .tab-bar-alumno .tab-item { font-size: 9px; }
    .tab-bar-alumno .tab-item svg { width: 18px; height: 18px; }
    .tab-fab { width: 50px; height: 50px; margin-top: -22px; }
}

/* ============================================================
   Utilidades comunes
   ============================================================ */
.text-muted   { color: var(--c-text-muted); }
.text-subtle  { color: var(--c-text-subtle); }
.text-primary { color: var(--c-primary-text); }

.divider {
    height: 1px;
    background: var(--c-divider);
    border: 0;
    margin: var(--s-6) 0;
}

/* ---------- EYEBROW: pequeño label mayúscula que ancla la sección ---------- */
.eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--c-text-muted);
    line-height: 1.2;
}
.eyebrow-lg {
    font-size: 12px;
    letter-spacing: 0.16em;
    font-weight: 700;
}

/* ---------- HEADINGS: Outfit weights + tracking negativo para modern feel ----------
   Los .h-* SIEMPRE upright (no italic). Outfit no ships italic real; obligamos
   font-style:normal para no fake-slantear headings viejos que traían class="italic". */
.h-hero {
    font-family: var(--font-display);
    font-size: var(--fs-hero);
    line-height: 1.02;
    letter-spacing: -0.045em;
    font-weight: 800;
    font-style: normal;
    color: var(--c-text);
}
.h-title {
    font-family: var(--font-display);
    font-size: var(--fs-4xl);
    line-height: 1.03;
    letter-spacing: -0.04em;
    font-weight: 800;
    font-style: normal;
    color: var(--c-text);
}
.h-section {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    line-height: 1.1;
    letter-spacing: -0.028em;
    font-weight: 700;
    font-style: normal;
    color: var(--c-text);
}
.h-card {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -0.015em;
    font-style: normal;
    color: var(--c-text);
}
.h-page-sub {
    font-size: 14px;
    color: var(--c-text-muted);
    font-weight: 400;
    letter-spacing: -0.005em;
    margin-top: 4px;
}

/* ---------- DATA: números grandes prominentes (kcal, peso, contadores) ---------- */
.h-data {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--c-text);
}
.h-data--xl { font-size: 40px; }
.h-data--lg { font-size: 32px; }
.h-data--md { font-size: 24px; }
.h-data--sm { font-size: 18px; font-weight: 700; }

.h-data-unit {
    font-size: 0.5em;
    font-weight: 500;
    color: var(--c-text-muted);
    letter-spacing: 0;
    margin-left: 4px;
    text-transform: none;
}

/* Anti-italic global sobre display font: existían usos como class="font-display italic".
   Outfit no tiene italic real → forzamos upright para evitar fake-slant feo. */
.font-display { font-style: normal !important; }

/* Todos los h1/h2/h3 con font-display (que suelen tener font-size inline) reciben
   el peso Outfit + tracking apretado sin necesidad de reescribir cada template. */
h1.font-display,
h2.font-display,
h3.font-display {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.04;
    color: var(--c-text);
}
h1.font-display strong,
h2.font-display strong { font-weight: 900; }

/* h1/h2 sin font-display: refuerzo el peso general para que Outfit se note */
h1:not(.font-display):not([class*="h-"]) { font-weight: 700; letter-spacing: -0.025em; }
h2:not(.font-display):not([class*="h-"]) { font-weight: 700; letter-spacing: -0.022em; }
h3:not(.font-display):not([class*="h-"]) { font-weight: 600; letter-spacing: -0.015em; }

/* Labels de forms más contundentes */
.label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--c-text);
    text-transform: none;
}

/* nums utility con tabular */
.nums { font-variant-numeric: tabular-nums; letter-spacing: -0.005em; }

/* Scroll behavior */
html { scroll-behavior: smooth; }
[x-cloak] { display: none !important; }
body {
    font-family: var(--font-sans);
    font-weight: 400;
    letter-spacing: -0.005em;
    color: var(--c-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Selection */
::selection { background: var(--c-primary-soft-2); color: var(--c-primary-text); }

/* Focus visible mejorado */
:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 4px; }

/* ============================================================
   Animaciones mínimas — solo micro moments
   ============================================================ */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-in { animation: fadeInUp .4s ease both; }
.delay-1 { animation-delay: 60ms; }
.delay-2 { animation-delay: 120ms; }
.delay-3 { animation-delay: 180ms; }
.delay-4 { animation-delay: 240ms; }

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

/* ============================================================
   Header hamburger + drawer (usado por nav_admin/profesor/nutricionista)
   ============================================================ */
.hamburger-btn {
    width: 44px; height: 44px;
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 5px;
    background: transparent;
    border: 1px solid var(--c-border);
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    color: var(--c-text);
    flex-shrink: 0;
    transition: background .15s ease, border-color .15s ease;
}
.hamburger-btn:hover { background: var(--c-surface-sunk); border-color: var(--c-border-strong); }
.hamburger-line {
    display: block;
    width: 20px; height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .28s ease, opacity .18s ease;
    transform-origin: center;
}
.hamburger-line.is-open-1 { transform: translateY(7px) rotate(45deg); }
.hamburger-line.is-open-2 { opacity: 0; }
.hamburger-line.is-open-3 { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(28,25,23,0.45);
    z-index: 49;
}
.nav-drawer {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(320px, 88vw);
    background: var(--c-surface);
    z-index: 50;
    display: flex; flex-direction: column;
    box-shadow: -20px 0 60px -20px rgba(28,25,23,.35);
}
.nav-drawer-header {
    padding: 18px 18px 16px;
    border-bottom: 1px solid var(--c-border);
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.nav-drawer-close {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--c-surface-sunk);
    border: none;
    color: var(--c-text);
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.nav-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 10px;
    display: flex; flex-direction: column;
    gap: 2px;
}
.nav-drawer-footer {
    padding: 8px 10px 16px;
    border-top: 1px solid var(--c-border);
    display: flex; flex-direction: column;
    gap: 2px;
}
.nav-drawer-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    color: var(--c-text-muted);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    min-height: 46px;
    transition: background .14s ease, color .14s ease;
}
.nav-drawer-item:hover { background: var(--c-surface-sunk); color: var(--c-text); }
.nav-drawer-item.is-active {
    background: var(--c-primary-soft);
    color: var(--c-primary-text);
    font-weight: 600;
}
.nav-drawer-item.is-danger { color: var(--c-danger); }
.nav-drawer-item.is-danger:hover { background: var(--c-danger-soft); }
.nav-drawer-divider {
    height: 1px;
    background: var(--c-divider);
    margin: 8px 12px;
}

/* ============================================================
   Video modal global (window.openVideoModal)
   ============================================================ */
.vm-modal {
    position: fixed; inset: 0;
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: vmFadeIn .18s ease;
}
@keyframes vmFadeIn { from { opacity: 0 } to { opacity: 1 } }
.vm-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 12, 10, 0.86);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.vm-shell {
    position: relative;
    width: 100%;
    max-width: 960px;
    z-index: 1;
    display: flex; flex-direction: column;
    gap: 10px;
}
.vm-controls {
    display: flex; justify-content: flex-end; gap: 8px;
}
.vm-btn {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s ease;
}
.vm-btn:hover { background: rgba(255, 255, 255, 0.22); }
.vm-frame-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    background: #000;
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.vm-frame-wrap:fullscreen,
.vm-frame-wrap:-webkit-full-screen {
    padding-bottom: 0;
    height: 100vh;
    border-radius: 0;
}
.vm-shell:fullscreen,
.vm-shell:-webkit-full-screen {
    max-width: none;
    height: 100vh;
    padding: 0;
    gap: 0;
    background: #000;
    display: flex; flex-direction: column;
}
.vm-shell:fullscreen .vm-controls,
.vm-shell:-webkit-full-screen .vm-controls {
    position: absolute; top: 12px; right: 12px; z-index: 2;
}
.vm-shell:fullscreen .vm-frame-wrap,
.vm-shell:-webkit-full-screen .vm-frame-wrap {
    flex: 1;
    padding-bottom: 0;
    border-radius: 0;
}
.vm-frame {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
}
@media (max-width: 500px) {
    .vm-modal { padding: 8px; }
    .vm-btn { width: 44px; height: 44px; }
}

/* ============================================================
   Confirm modal global (window.confirmModal)
   ============================================================ */
.cm-modal {
    position: fixed; inset: 0;
    z-index: 210;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    animation: cmFadeIn .16s ease;
}
.cm-modal.is-closing { animation: cmFadeOut .14s ease forwards; }
@keyframes cmFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes cmFadeOut { to { opacity: 0 } }
.cm-backdrop {
    position: absolute; inset: 0;
    background: rgba(15, 12, 10, 0.5);
    backdrop-filter: blur(2px);
}
.cm-shell {
    position: relative;
    background: var(--c-surface);
    border-radius: var(--r-xl);
    max-width: 420px;
    width: 100%;
    padding: 26px 24px 20px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--c-border);
    animation: cmPop .22s cubic-bezier(0.34, 1.4, 0.5, 1);
}
@keyframes cmPop { from { transform: scale(0.94); opacity: 0.6 } to { transform: scale(1); opacity: 1 } }
.cm-icon {
    width: 48px; height: 48px;
    border-radius: 999px;
    background: var(--c-primary-soft);
    color: var(--c-primary-text);
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 14px;
}
.cm-icon.is-danger { background: var(--c-danger-soft); color: var(--c-danger); }
.cm-title { font-size: 20px; font-weight: 600; margin: 0 0 6px; color: var(--c-text); letter-spacing: -0.01em; }
.cm-body { font-size: 14px; color: var(--c-text-muted); margin: 0 0 20px; line-height: 1.5; }
.cm-actions { display: flex; gap: 8px; justify-content: flex-end; }
.cm-btn {
    padding: 10px 18px;
    min-height: 42px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background .14s ease, color .14s ease;
}
.cm-cancel { background: transparent; color: var(--c-text-muted); }
.cm-cancel:hover { background: var(--c-surface-sunk); color: var(--c-text); }
.cm-confirm { background: var(--c-primary); color: #fff; }
.cm-confirm:hover { background: var(--c-primary-hover); }
.cm-confirm.is-danger { background: var(--c-danger); }
.cm-confirm.is-danger:hover { background: #9f0e34; }

/* ============================================================
   Confetti mini burst
   ============================================================ */
.confetti-p {
    position: fixed;
    width: 8px; height: 8px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 9997;
    transform: translate(-50%, -50%);
    animation: confetti-fly .8s cubic-bezier(0.15, 0.6, 0.4, 1) forwards;
}
@keyframes confetti-fly {
    from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(360deg) scale(0.4); opacity: 0; }
}

/* ============================================================
   Superset visual (compartido entre armador, ver, ejecutar)
   ============================================================ */
.exercise-view-card[data-group="A"], .exercise-exec-card[data-group="A"] { border-left: 3px solid #C2410C; }
.exercise-view-card[data-group="B"], .exercise-exec-card[data-group="B"] { border-left: 3px solid #0369A1; }
.exercise-view-card[data-group="C"], .exercise-exec-card[data-group="C"] { border-left: 3px solid #7C3AED; }
.exercise-view-card[data-group="D"], .exercise-exec-card[data-group="D"] { border-left: 3px solid #B45309; }
.exercise-view-card[data-group="E"], .exercise-exec-card[data-group="E"] { border-left: 3px solid #9F1239; }
.exercise-view-card[data-group="F"], .exercise-exec-card[data-group="F"] { border-left: 3px solid #059669; }
.ss-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; background:var(--c-warm-soft); color:var(--c-warm-text); font-size:10px; font-weight:600; letter-spacing:0.06em; }

/* Bloques (vista y ejecución) */
.blocks-view { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.blocks-view li { padding: 6px 10px; background: var(--c-surface-sunk); border-radius: 8px; border-left: 3px solid var(--c-primary-soft-2); }

/* ============================================================
   Notificaciones bell + panel
   ============================================================ */
.notif-bell {
    position: fixed;
    top: 70px; right: 12px;
    z-index: 45;
    width: 44px; height: 44px;
    border-radius: 999px;
    background: var(--c-primary);
    color: #fff;
    border: none;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 30px -10px rgba(4, 120, 87, 0.5);
    animation: bellPulse 1.8s ease-in-out infinite;
}
@keyframes bellPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}
.notif-bell-badge {
    position: absolute;
    top: -4px; right: -4px;
    background: var(--c-danger);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px; height: 20px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 6px;
    border: 2px solid var(--c-bg);
}
@media (min-width: 640px) {
    .notif-bell { top: 80px; right: 20px; }
}

.notif-panel { position: fixed; inset: 0; z-index: 190; display: flex; align-items: flex-start; justify-content: flex-end; padding: 12px; }
.notif-backdrop { position: absolute; inset: 0; background: rgba(28,25,23,0.42); }
.notif-shell { position: relative; z-index: 1; width: 100%; max-width: 380px; background: var(--c-surface); border-radius: 16px; border: 1px solid var(--c-border); box-shadow: var(--shadow-lg); max-height: calc(100vh - 24px); display: flex; flex-direction: column; overflow: hidden; }
.notif-header { padding: 16px 18px; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.notif-mark-all { background: transparent; border: none; color: var(--c-text-muted); font-size: 12px; cursor: pointer; text-decoration: underline; font-family: inherit; }
.notif-list { flex: 1; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.notif-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 10px; text-decoration: none; transition: background .14s ease; }
.notif-item:hover { background: var(--c-surface-sunk); }
.notif-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--c-primary); flex-shrink: 0; margin-top: 6px; }

/* ============================================================
   Micro-animación check "spring" al marcar completado
   ============================================================ */
@keyframes check-spring {
    0% { transform: scale(1); }
    35% { transform: scale(1.28); }
    60% { transform: scale(0.92); }
    100% { transform: scale(1); }
}
.check-btn.is-checked { animation: check-spring .38s cubic-bezier(0.4, 1.6, 0.5, 1); }

/* ============================================================
   Skeleton loaders + top progress bar
   ============================================================ */
.skeleton, .skeleton-line, .skeleton-block, .skeleton-circle {
    position: relative;
    overflow: hidden;
    background: var(--c-surface-sunk);
    border-radius: 6px;
}
.skeleton-line { height: 12px; margin: 6px 0; }
.skeleton-block { height: 60px; }
.skeleton-circle { border-radius: 999px; }
.skeleton::after, .skeleton-line::after, .skeleton-block::after, .skeleton-circle::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
    animation: skeleton-shimmer 1.4s linear infinite;
}
@keyframes skeleton-shimmer {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
}

/* ============================================================
   PWA install banner
   ============================================================ */
.pwa-install-banner {
    position: fixed;
    left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 95;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 12px 14px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 20px 40px -18px rgba(28, 25, 23, 0.28), 0 4px 12px rgba(28, 25, 23, 0.06);
    transform: translateY(20px); opacity: 0;
    transition: transform .35s cubic-bezier(0.32, 0.72, 0, 1), opacity .28s ease;
    max-width: 480px;
    margin: 0 auto;
}
.pwa-install-banner.is-open { transform: translateY(0); opacity: 1; }
.pwa-icon-wrap {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--c-primary-soft);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.pwa-icon { width: 30px; height: 30px; }
.pwa-content { flex: 1; min-width: 0; }
.pwa-title { font-size: 14px; font-weight: 600; color: var(--c-text); line-height: 1.2; }
.pwa-sub { font-size: 11px; color: var(--c-text-muted); margin-top: 2px; line-height: 1.2; }
.pwa-install-btn {
    background: var(--c-primary);
    color: #fff;
    border: none;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: background .15s ease;
}
.pwa-install-btn:hover { background: var(--c-primary-hover); }
.pwa-close {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    color: var(--c-text-subtle);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background .15s ease, color .15s ease;
}
.pwa-close:hover { background: var(--c-surface-sunk); color: var(--c-text); }

/* Print styles: ocultar chrome de la app */
@media print {
    header.sticky, .hamburger-btn, .nav-drawer, .nav-drawer-backdrop, .tab-bar-mobile, .tab-bar-alumno,
    .fab-add, .notif-bell, .notif-panel, .pwa-install-banner, .topbar-progress, .no-print,
    .vm-modal, .cm-modal, .rest-sheet {
        display: none !important;
    }
    main { padding-bottom: 0 !important; }
    .card { break-inside: avoid; page-break-inside: avoid; }
    svg { max-width: 100%; height: auto; }
    body { background: white !important; }
    .card, .card-hero { border: 1px solid #ddd !important; box-shadow: none !important; break-inside: avoid; background: white !important; }
    .bg-mesh, .grain { background-image: none !important; }
    .grain::after { display: none !important; }
    a { color: #000 !important; text-decoration: none !important; }
    .btn { display: none !important; }
    .btn.btn-primary, .btn.btn-secondary { display: none !important; }
}

/* Avatar badge (foto de perfil o inicial) */
.avatar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--c-primary-soft);
    color: var(--c-primary-text);
    font-weight: 700;
    line-height: 1;
    position: relative;
    vertical-align: middle;
}
.avatar-badge.is-initial { text-transform: uppercase; }
.avatar-badge img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

/* Chat unread badge (usado en nav, home, etc) */
.chat-unread-badge {
    background: var(--c-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    flex-shrink: 0;
}

/* Toggle switch (iOS-style) */
.toggle-switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; inset: 0; background: var(--c-border-strong); border-radius: 999px; transition: background .2s ease; }
.toggle-slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: white; border-radius: 999px; transition: transform .22s cubic-bezier(0.34, 1.4, 0.5, 1); box-shadow: 0 2px 4px rgba(0,0,0,0.12); }
.toggle-switch input:checked + .toggle-slider { background: var(--c-primary); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

/* Top progress bar (para navegaciones y AJAX) */
.topbar-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    background: var(--c-primary);
    z-index: 9999;
    transition: width .2s ease, opacity .2s ease;
    box-shadow: 0 0 8px rgba(4, 120, 87, 0.6);
}

/* ============================================================
   Dark mode — se activa con <html data-theme="dark">.
   Override de tokens neutrales. La paleta primary/warm/cool
   sigue funcionando porque tiene buen contraste sobre stone-950.
   ============================================================ */
[data-theme="dark"] {
    color-scheme: dark;

    --c-bg:              #14110F;
    --c-bg-mesh-1:       #221812;
    --c-bg-mesh-2:       #0F1B15;
    --c-surface:         #1E1B18;
    --c-surface-sunk:    #17140F;
    --c-surface-alt:     #232019;
    --c-border:          #2E2B25;
    --c-border-strong:   #3F3B33;
    --c-divider:         #24211C;

    --c-text:            #F0EDE6;
    --c-text-muted:      #9C9689;
    --c-text-subtle:     #6A655B;
    --c-text-inverse:    #17140F;

    /* Primary un tono más claro para contraste sobre fondo oscuro */
    --c-primary:         #10B981;
    --c-primary-hover:   #34D399;
    --c-primary-active:  #059669;
    --c-primary-soft:    rgba(16, 185, 129, 0.14);
    --c-primary-soft-2:  rgba(16, 185, 129, 0.22);
    --c-primary-text:    #6EE7B7;
    --c-primary-ring:    rgba(52, 211, 153, 0.28);

    --c-warm:            #F97316;
    --c-warm-soft:       rgba(249, 115, 22, 0.15);
    --c-warm-text:       #FDBA74;

    --c-cool:            #38BDF8;
    --c-cool-soft:       rgba(56, 189, 248, 0.14);
    --c-cool-text:       #7DD3FC;

    --c-berry:           #FB7185;
    --c-berry-soft:      rgba(251, 113, 133, 0.14);

    --c-success:         #34D399;
    --c-success-soft:    rgba(52, 211, 153, 0.14);
    --c-warning:         #FBBF24;
    --c-warning-soft:    rgba(251, 191, 36, 0.14);
    --c-danger:          #FB7185;
    --c-danger-soft:     rgba(251, 113, 133, 0.14);
    --c-info:            #38BDF8;
    --c-info-soft:       rgba(56, 189, 248, 0.14);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.20);
    --shadow-md: 0 4px 12px -2px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 20px 40px -18px rgba(0, 0, 0, 0.55), 0 8px 16px -8px rgba(0, 0, 0, 0.30);
}

/* En dark las clases de Tailwind que se usan hardcoded en el HTML
   (bg-white, bg-neutral-*, text-white) rompen la coherencia.
   Estos overrides puntuales corrigen los casos más frecuentes. */
[data-theme="dark"] .bg-white { background-color: var(--c-surface) !important; }
[data-theme="dark"] .bg-neutral-50 { background-color: var(--c-bg) !important; }
[data-theme="dark"] .bg-neutral-100 { background-color: var(--c-surface-sunk) !important; }
[data-theme="dark"] .text-neutral-900,
[data-theme="dark"] .text-neutral-800 { color: var(--c-text) !important; }
[data-theme="dark"] .text-neutral-700,
[data-theme="dark"] .text-neutral-600 { color: var(--c-text-muted) !important; }
[data-theme="dark"] .text-neutral-500,
[data-theme="dark"] .text-neutral-400 { color: var(--c-text-subtle) !important; }
[data-theme="dark"] .border-neutral-200,
[data-theme="dark"] .border-neutral-300 { border-color: var(--c-border) !important; }
[data-theme="dark"] .bg-emerald-50,
[data-theme="dark"] .bg-emerald-100 { background-color: var(--c-primary-soft) !important; }
[data-theme="dark"] .text-emerald-700,
[data-theme="dark"] .text-emerald-800 { color: var(--c-primary-text) !important; }
[data-theme="dark"] .border-emerald-200 { border-color: rgba(52, 211, 153, 0.30) !important; }
[data-theme="dark"] .bg-amber-50 { background-color: rgba(251, 191, 36, 0.10) !important; }
[data-theme="dark"] .text-amber-900 { color: #FCD34D !important; }
[data-theme="dark"] .border-amber-200 { border-color: rgba(251, 191, 36, 0.28) !important; }
[data-theme="dark"] .bg-rose-50 { background-color: rgba(251, 113, 133, 0.10) !important; }
[data-theme="dark"] .text-rose-700 { color: #FDA4AF !important; }
[data-theme="dark"] .border-rose-200 { border-color: rgba(251, 113, 133, 0.28) !important; }

/* Alumno chat bubble verde sobre fondo dark: mantener legible */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] textarea,
[data-theme="dark"] select { color-scheme: dark; }

/* Card-hero: en light es un gradient emerald-claro; en dark lo re-hacemos
   con un tinte primary sobre surface, sin depender de blancos hardcoded. */
[data-theme="dark"] .card-hero {
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.10) 0%, var(--c-surface) 60%);
    border-color: rgba(16, 185, 129, 0.25);
}

/* Mesh de fondo: los tonos peach y mint originales encandilan en dark.
   Repintamos con tinte primary + warm muy oscurecidos sobre el bg base. */
[data-theme="dark"] .bg-mesh {
    background-color: var(--c-bg);
    background-image:
        radial-gradient(at 10% 5%, rgba(16, 185, 129, 0.08) 0px, transparent 55%),
        radial-gradient(at 90% 15%, rgba(249, 115, 22, 0.06) 0px, transparent 55%),
        radial-gradient(at 50% 100%, rgba(16, 185, 129, 0.10) 0px, transparent 60%);
}

/* Skeleton shimmer usa rgba blanco 70% que en dark queda demasiado brillante. */
[data-theme="dark"] .skeleton { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.06) 50%, transparent 100%); }

/* Íconos con background naranja/emerald "soft" heredado de light: rebajarlos. */
[data-theme="dark"] [style*="background:var(--c-warm-soft)"],
[data-theme="dark"] [style*="background: var(--c-warm-soft)"] { color: var(--c-warm-text); }
[data-theme="dark"] [style*="background:#FEF0E3"],
[data-theme="dark"] [style*="background: #FEF0E3"] { background: var(--c-warm-soft) !important; }
[data-theme="dark"] [style*="background:#ECFDF5"],
[data-theme="dark"] [style*="background: #ECFDF5"] { background: var(--c-primary-soft) !important; }
[data-theme="dark"] [style*="background:#FEF3C7"],
[data-theme="dark"] [style*="background: #FEF3C7"] { background: var(--c-warning-soft) !important; }
[data-theme="dark"] [style*="border-color:#FDE68A"],
[data-theme="dark"] [style*="border-color: #FDE68A"] { border-color: rgba(251, 191, 36, 0.30) !important; }
[data-theme="dark"] [style*="color:#78350F"],
[data-theme="dark"] [style*="color: #78350F"] { color: var(--c-warm-text) !important; }
[data-theme="dark"] [style*="color:#D97706"],
[data-theme="dark"] [style*="color: #D97706"] { color: var(--c-warning) !important; }

/* Cualquier inline style con background:white → surface elevada. */
[data-theme="dark"] [style*="background:white"],
[data-theme="dark"] [style*="background: white"],
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#FFF"],
[data-theme="dark"] [style*="background: #FFF"] { background: var(--c-surface) !important; }

/* Hover a blanco (mis_rutinas next-day rows). */
[data-theme="dark"] .hover\:bg-white:hover { background-color: var(--c-surface-alt) !important; }

/* Componentes específicos de rutina_ejecutar que hardcodean white. */
[data-theme="dark"] .check-btn { background: var(--c-surface-alt); border-color: var(--c-border-strong); }
[data-theme="dark"] .check-btn.done { background: var(--c-primary); border-color: var(--c-primary); }
[data-theme="dark"] .rest-sheet { background: rgba(30, 27, 24, 0.94); border-color: var(--c-border); }
[data-theme="dark"] .rest-ring-inner { background: var(--c-surface); }
[data-theme="dark"] .small-input { background: var(--c-surface-alt); border-color: var(--c-border-strong); color: var(--c-text); }
[data-theme="dark"] .card.is-done { background: rgba(30, 27, 24, 0.6); }

/* Onboarding admin: div inline bg-white con border-color inline. */
[data-theme="dark"] .rounded-xl.bg-white,
[data-theme="dark"] .rounded-lg.bg-white,
[data-theme="dark"] .rounded-xl.p-4.bg-white,
[data-theme="dark"] .rounded-lg.p-3.bg-white { background-color: var(--c-surface) !important; }

/* Alertas inactivos: gradient warning-soft → surface, mantener acento. */
[data-theme="dark"] [style*="linear-gradient(90deg, var(--c-warning-soft)"] { background: linear-gradient(90deg, var(--c-warning-soft) 0%, var(--c-surface) 40%) !important; }

/* Focus rings sobre botones/inputs en dark: mantener el ring emerald visible. */
[data-theme="dark"] .btn:focus-visible { box-shadow: 0 0 0 3px var(--c-primary-ring); }

/* Chips de invitación / anamnesis con background-color inline emerald muy claro. */
[data-theme="dark"] [style*="background:#F0FDF4"],
[data-theme="dark"] [style*="background: #F0FDF4"],
[data-theme="dark"] [style*="background:#D1FAE5"],
[data-theme="dark"] [style*="background: #D1FAE5"] { background: var(--c-primary-soft) !important; }

/* Nav sticky headers: bg-white ya se remapea via tokens; pero además fijar el border. */
[data-theme="dark"] header.bg-white { border-color: var(--c-border) !important; }

/* Video thumbnails y placeholders siguen usando gradient oscuro por diseño → OK. */

/* Emerald dot / badges inline con fondo primary-soft explícito: quedan visibles. */
[data-theme="dark"] [class*="text-emerald-600"] { color: var(--c-primary-text) !important; }
[data-theme="dark"] [class*="text-emerald-500"] { color: var(--c-primary) !important; }

/* PDF de rutinas se abre en pestaña propia y NO debe respetar dark
   (es un documento imprimible en blanco). Neutralizamos si acaso. */
[data-theme="dark"] .sheet, [data-theme="dark"] .toolbar { color-scheme: light; }

/* ---- Tab bar flotante del alumno (5 columnas): fondo blanco translúcido → dark. */
[data-theme="dark"] .tab-bar-alumno {
    background: rgba(30, 27, 24, 0.94);
    border: 1px solid var(--c-border);
    box-shadow: 0 12px 40px -12px rgba(0,0,0,0.55);
}
[data-theme="dark"] .tab-fab { border-color: rgba(30, 27, 24, 0.94); }
[data-theme="dark"] .tab-fab--muted { background: var(--c-surface); color: var(--c-primary); }

/* ---- Chat: header sticky con rgba blanco. */
[data-theme="dark"] .chat-header { background: rgba(30, 27, 24, 0.95) !important; border-bottom-color: var(--c-border) !important; }

/* ---- mi_dia (Comidas): componentes con oklch light hardcoded. */
[data-theme="dark"] .water-bar { background: var(--c-surface-alt) !important; }
[data-theme="dark"] .dm-cell { background: var(--c-surface-alt) !important; border-color: var(--c-border) !important; }
[data-theme="dark"] .mood-btn { background: var(--c-surface-alt) !important; border-color: var(--c-border) !important; }
[data-theme="dark"] .mood-btn.is-selected { background: var(--c-warm-soft) !important; border-color: rgba(249, 115, 22, 0.45) !important; }
[data-theme="dark"] .date-nav { background: var(--c-surface); border-color: var(--c-border); }
[data-theme="dark"] .date-nav:hover { background: var(--c-surface-alt); }
[data-theme="dark"] .momento-block { background: var(--c-surface); border-color: var(--c-border); }
[data-theme="dark"] .momento-add { background: var(--c-surface-alt); border-color: var(--c-border); }
[data-theme="dark"] .momento-empty { border-color: var(--c-border-strong); color: var(--c-text-muted); }
[data-theme="dark"] .momento-empty:hover { background: var(--c-surface-alt); }
[data-theme="dark"] .meal-item { background: var(--c-surface-alt); }
[data-theme="dark"] .animo-btn { background: var(--c-surface-alt); border-color: var(--c-border); }
[data-theme="dark"] .animo-btn.is-active { background: var(--c-primary-soft); border-color: var(--c-primary-ring); }
[data-theme="dark"] .w-btn { background: var(--c-surface); border-color: var(--c-border); color: var(--c-text); }
[data-theme="dark"] .w-btn:hover:not(:disabled) { background: var(--c-surface-alt); border-color: var(--c-border-strong); }
[data-theme="dark"] .dm-input, [data-theme="dark"] .dm-textarea { background: var(--c-surface-alt); border-color: var(--c-border-strong); color: var(--c-text); }
[data-theme="dark"] .ex-check { border-color: var(--c-border-strong); }

/* Modal overlays (rgba dark) siguen OK. Los prompts internos usan .card que ya se
   remapea. Nada que hacer ahí. */

/* Historial/Compartir: la vista pública usa share-header con var(--c-surface). Ya OK. */