/*
    alma-theme.css
    Sistema de dark/light mode para Aunara.
    Acento: Teal/Verde — color de marca Aunara (#1DB88A)
    Default fallback: DARK
*/

/* ─────────────────────────────────────────────────────────────
   DARK MODE (fallback)
   ───────────────────────────────────────────────────────────── */
:root,
[data-mode="dark"] {
    /* Backgrounds */
    --alma-bg: #03040a;
    --alma-bg-2: #0d1117;
    --alma-bg-card: rgba(255,255,255,0.06);
    --alma-bg-sidebar: rgba(3,4,10,0.95);
    --alma-bg-nav: rgba(3,4,10,0.88);
    --alma-bg-topbar: rgba(3,4,10,0.88);
    --alma-bg-input: rgba(255,255,255,0.07);
    --alma-bg-hover: rgba(29,184,138,0.10);
    /* Text */
    --alma-text: #e8edf2;
    --alma-text-sub: #94a3b8;
    --alma-text-muted: #afbbca;
    --alma-text-inv: #ffffff;
    /* Borders */
    --alma-border: rgba(148,163,184,0.10);
    --alma-border-2: rgba(148,163,184,0.18);
    /* Accent — Teal Aunara */
    --alma-accent: #1DB88A;
    --alma-accent-2: #0F9B72;
    --alma-accent-3: #0a7a5a;
    --alma-accent-light: #5eead4; /* teal claro para textos sobre dark */
    --alma-accent-glow: rgba(29,184,138,0.35);
    --alma-accent-soft: rgba(29,184,138,0.10);
    --alma-accent-border: rgba(29,184,138,0.25);
    /* Decorative orbs — teal palette */
    --alma-orb-1: rgba(29,184,138,0.10);
    --alma-orb-2: rgba(15,155,114,0.08);
    --alma-orb-3: rgba(20,184,166,0.06);
    /* Skeleton shimmer */
    --sk-base: rgba(255,255,255,0.05);
    --sk-highlight: rgba(255,255,255,0.10);
    /* Navigation */
    --alma-nav-active-bg: rgba(29,184,138,0.15);
    --alma-nav-active-text: #5eead4;
    --alma-nav-text: #a1acc0;
    --alma-nav-hover-bg: rgba(29,184,138,0.08);
    /* Gradient title */
    --alma-gradient-title: linear-gradient(135deg, #5eead4 0%, #1DB88A 50%, #0ea5e9 100%);

    /* Acento secundario "gradiente" — usado en botones/CTAs y páginas públicas
       (Login, Register, Mi Cuenta, etc.). Tono de verde ligeramente distinto
       al acento plano (--alma-accent) porque nace de un gradiente diagonal. */
    --alma-accent-grad-1: #1D9E75;
    --alma-accent-grad-2: #0F6E56;
    --alma-accent-grad-light: #5DCAA5;
    --alma-accent-grad-pale: #9FE1CB;
    --alma-accent-grad-glow: rgba(29,158,117,0.30);
    --alma-accent-grad-glow-strong: rgba(29,158,117,0.50);

    /* Estados semánticos genéricos (fuera de acento) */
    --alma-danger: #ef4444;
    --alma-warning: #f59e0b;
    --alma-success: #10b981;
}

/* ─────────────────────────────────────────────────────────────
   LIGHT MODE
   ───────────────────────────────────────────────────────────── */
[data-mode="light"] {
    /* Backgrounds */
    --alma-bg: #f5f0eb;
    --alma-bg-2: #ede8e3;
    --alma-bg-card: #ffffff;
    --alma-bg-sidebar: #ede8e3;
    --alma-bg-nav: rgba(245,240,235,0.92);
    --alma-bg-topbar: rgba(245,240,235,0.92);
    --alma-bg-input: #ffffff;
    --alma-bg-hover: rgba(29,184,138,0.07);
    /* Text */
    --alma-text: #1a1625;
    --alma-text-sub: #4a4460;
    --alma-text-muted: #495564;
    --alma-text-inv: #ffffff;
    /* Borders */
    --alma-border: rgba(0,0,0,0.08);
    --alma-border-2: rgba(0,0,0,0.13);
    /* Accent — Teal oscuro para contraste en fondo crema */
    --alma-accent: #0F9B72; /* más oscuro para AA en light */
    --alma-accent-2: #0a7a5a;
    --alma-accent-3: #08684d;
    --alma-accent-light: #0b6e54; /* contraste 5.5:1 sobre #f5f0eb ✅ */
    --alma-accent-glow: rgba(15,155,114,0.20);
    --alma-accent-soft: rgba(15,155,114,0.08);
    --alma-accent-border: rgba(15,155,114,0.18);
    /* Decorative orbs */
    --alma-orb-1: rgba(29,184,138,0.06);
    --alma-orb-2: rgba(15,155,114,0.05);
    --alma-orb-3: rgba(20,184,166,0.04);
    /* Skeleton shimmer */
    --sk-base: rgba(0,0,0,0.05);
    --sk-highlight: rgba(0,0,0,0.10);
    /* Navigation */
    --alma-nav-active-bg: rgba(15,155,114,0.10);
    --alma-nav-active-text: #0a7a5a;
    --alma-nav-text: #4a4460;
    --alma-nav-hover-bg: rgba(15,155,114,0.07);
    /* Gradient title */
    --alma-gradient-title: linear-gradient(135deg, #0F9B72 0%, #0ea5e9 100%);

    /* Acento secundario "gradiente" — mismas páginas que en dark.
       TODO: sin diseño light propio todavía (páginas públicas son dark-only
       hoy); se mantiene igual al dark para no romper nada hasta que se
       diseñe una variante light real. */
    --alma-accent-grad-1: #1D9E75;
    --alma-accent-grad-2: #0F6E56;
    --alma-accent-grad-light: #5DCAA5;
    --alma-accent-grad-pale: #9FE1CB;
    --alma-accent-grad-glow: rgba(29,158,117,0.30);
    --alma-accent-grad-glow-strong: rgba(29,158,117,0.50);

    --alma-danger: #ef4444;
    --alma-warning: #f59e0b;
    --alma-success: #10b981;
}

/* ─────────────────────────────────────────────────────────────
   TRANSITIONS
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

    *[style*="animation"], .animate-spin, [class*="spin"] {
        transition: none !important;
    }

/* ─────────────────────────────────────────────────────────────
   MODE BUTTON ICONS
   ───────────────────────────────────────────────────────────── */
.alma-icon-sun {
    display: none;
}

.alma-icon-moon {
    display: block;
}

[data-mode="light"] .alma-icon-sun {
    display: none;
}

[data-mode="light"] .alma-icon-moon {
    display: block;
}

[data-mode="dark"] .alma-icon-sun {
    display: block;
}

[data-mode="dark"] .alma-icon-moon {
    display: none;
}
@media (max-width: 1023px) {
    .alma-main {
        margin-left: 0 !important;
    }
}

/* ── Botón hamburguesa en el topbar ─────────────── */
.alma-topbar-hamburger {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--alma-bg-2);
    border: 1px solid var(--alma-border-2);
    color: var(--alma-text-sub);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    flex-shrink: 0;
}

    .alma-topbar-hamburger:hover {
        background: var(--alma-bg-hover);
        color: var(--alma-accent);
        border-color: var(--alma-accent-border);
    }