/* =========================================================
   🎨 Synaris — Theme layer (tokens)
   ---------------------------------------------------------
   • MODO CLARO por defecto (:root)
   • MODO OSCURO opcional  (html[data-theme="dark"])
   • El usuario decide con el switch del header. La preferencia
     se guarda en localStorage ("synaris.theme").
   • Este archivo debe cargarse ANTES de app.css / index.css /
     admin.css: define las variables que todos consumen.
   ========================================================= */

:root {
    color-scheme: light;

    /* ---------- Marca (constante en ambos temas) ---------- */
    --brand: #7c3aed;
    --brand-strong: #6d28d9;
    --brand2: #22c55e;
    --brand2-strong: #16a34a;
    --warn: #f59e0b;
    --danger: #ef4444;
    --info: #0ea5e9;

    /* ---------- Marca legible sobre la superficie actual ---------- */
    --brand-ink: #6d28d9;
    --brand2-ink: #15803d;
    --warn-ink: #b45309;
    --danger-ink: #b91c1c;
    --info-ink: #0369a1;

    /* ---------- Base para tintes translúcidos ---------- */
    /* En claro el "frente" es tinta oscura; en oscuro, blanco. */
    --fg-rgb: 15 23 42;

    /* Base de las sombras: color + factor de intensidad.
       En claro las sombras son más suaves que en oscuro. */
    --sh-rgb: 15 23 42;
    --sh-k: .55;

    /* ---------- Fondos y superficies ---------- */
    --bg: #f4f6fb;
    --bg-2: #eaeef7;

    /* Superficie de tarjeta (.card usa panel/panel2) */
    --panel: #ffffff;
    --panel2: #ffffff;
    --surface-grad: linear-gradient(180deg, #ffffff, #fdfdff);

    /* Superficies anidadas: 1 = apenas visible … 3 = más marcada */
    --surface-1: #fafbfe;
    --surface-2: #f2f5fb;
    --surface-3: #e8edf7;

    /* Superficie "cristal" (menús flotantes, toasts) */
    --glass: rgba(255, 255, 255, .88);
    --glass-solid: #ffffff;

    /* Barra superior */
    --header-bg: rgba(255, 255, 255, .82);
    --header-border: rgba(15, 23, 42, .08);

    /* Velo de modales */
    --scrim: rgba(15, 23, 42, .45);

    /* ---------- Texto ---------- */
    --text: #0f172a;
    --muted: #4b5768;
    --faint: #6b7688;
    --on-brand: #ffffff;
    /* texto sobre botones/íconos de color sólido */

    /* ---------- Bordes ---------- */
    --border: rgba(15, 23, 42, .10);
    --border-2: rgba(15, 23, 42, .17);

    /* ---------- Sombras ---------- */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 8px rgba(15, 23, 42, .04);
    --shadow: 0 2px 6px rgba(15, 23, 42, .05), 0 14px 34px rgba(15, 23, 42, .08);
    --shadow-lg: 0 6px 18px rgba(15, 23, 42, .07), 0 30px 66px rgba(15, 23, 42, .13);
    --shadow-brand: 0 12px 28px rgba(124, 58, 237, .22);
    --shadow-green: 0 12px 28px rgba(22, 163, 74, .22);

    /* ---------- Luces decorativas (halos de fondo) ---------- */
    --glow-violet: rgba(124, 58, 237, .16);
    --glow-green: rgba(34, 197, 94, .14);
    --glow-amber: rgba(245, 158, 11, .12);
    --glow-violet-soft: rgba(124, 58, 237, .10);
    --glow-green-soft: rgba(34, 197, 94, .09);
    --glow-amber-soft: rgba(245, 158, 11, .08);
    /* Opacidad de los orbes borrosos del hero */
    --orb-opacity: .34;
    /* Brillo que recorre el CTA final */
    --shine: rgba(255, 255, 255, .55);

    /* ---------- Gradientes de marca ---------- */
    /* Texto degradado del hero */
    --grad-1: linear-gradient(135deg, #8b5cf6, #6d28d9 45%, #16a34a);
    --grad-2: linear-gradient(135deg, #f59e0b, #ea580c 50%, #dc2626);
    /* Números de métricas */
    --grad-stat: linear-gradient(135deg, #0f172a, #6d28d9);
    /* Chips de íconos */
    --chip-grad: linear-gradient(135deg, var(--brand), var(--brand2-strong));
    --chip-grad-warm: linear-gradient(135deg, #f59e0b, #ea580c);

    /* ---------- Estados suaves (chips, badges) ---------- */
    --ok-bg: rgba(34, 197, 94, .12);
    --ok-border: rgba(22, 163, 74, .28);
    --warn-bg: rgba(245, 158, 11, .14);
    --warn-border: rgba(217, 119, 6, .30);
    --bad-bg: rgba(239, 68, 68, .11);
    --bad-border: rgba(220, 38, 38, .26);
    --brand-bg: rgba(124, 58, 237, .10);
    --brand-border: rgba(124, 58, 237, .26);

    /* ---------- Geometría ---------- */
    --radius: 18px;
    --max: 1180px;

    /* Compat con el CSS anterior */
    --shadow-legacy: var(--shadow);
}

/* =========================================================
   🌙 MODO OSCURO — opcional, solo si el usuario lo activa
   ========================================================= */
html[data-theme="dark"] {
    color-scheme: dark;

    --brand: #8b5cf6;
    --brand-strong: #7c3aed;
    --brand2: #22c55e;
    --brand2-strong: #16a34a;

    --brand-ink: #c4b5fd;
    --brand2-ink: #6ee7a0;
    --warn-ink: #fcd34d;
    --danger-ink: #fca5a5;
    --info-ink: #7dd3fc;

    --fg-rgb: 255 255 255;
    --sh-rgb: 0 0 0;
    --sh-k: 1;

    --bg: #0b0f14;
    --bg-2: #0d131c;

    --panel: rgba(255, 255, 255, .055);
    --panel2: rgba(255, 255, 255, .085);
    --surface-grad: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));

    --surface-1: rgba(255, 255, 255, .035);
    --surface-2: rgba(255, 255, 255, .065);
    --surface-3: rgba(255, 255, 255, .11);

    --glass: rgba(13, 17, 24, .84);
    --glass-solid: #10151d;

    --header-bg: rgba(11, 15, 20, .72);
    --header-border: rgba(255, 255, 255, .08);

    --scrim: rgba(0, 0, 0, .62);

    --text: rgba(255, 255, 255, .94);
    --muted: rgba(255, 255, 255, .70);
    --faint: rgba(255, 255, 255, .55);
    --on-brand: #ffffff;

    --border: rgba(255, 255, 255, .12);
    --border-2: rgba(255, 255, 255, .24);

    --shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
    --shadow: 0 18px 50px rgba(0, 0, 0, .45);
    --shadow-lg: 0 30px 80px rgba(0, 0, 0, .55);
    --shadow-brand: 0 14px 34px rgba(139, 92, 246, .32);
    --shadow-green: 0 14px 34px rgba(34, 197, 94, .30);

    --glow-violet: rgba(139, 92, 246, .28);
    --glow-green: rgba(34, 197, 94, .22);
    --glow-amber: rgba(245, 158, 11, .16);
    --glow-violet-soft: rgba(139, 92, 246, .20);
    --glow-green-soft: rgba(34, 197, 94, .16);
    --glow-amber-soft: rgba(245, 158, 11, .12);
    --orb-opacity: .44;
    --shine: rgba(255, 255, 255, .08);

    --ok-bg: rgba(34, 197, 94, .14);
    --ok-border: rgba(34, 197, 94, .35);
    --warn-bg: rgba(245, 158, 11, .14);
    --warn-border: rgba(245, 158, 11, .38);
    --bad-bg: rgba(239, 68, 68, .14);
    --bad-border: rgba(239, 68, 68, .35);
    --brand-bg: rgba(139, 92, 246, .16);
    --brand-border: rgba(139, 92, 246, .38);

    --grad-1: linear-gradient(135deg, #c4b5fd, #8b5cf6 45%, #22c55e);
    --grad-2: linear-gradient(135deg, #fde68a, #f59e0b 50%, #ef4444);
    --grad-stat: linear-gradient(135deg, #ffffff, #c4b5fd);
    --chip-grad: linear-gradient(135deg, rgba(139, 92, 246, .95), rgba(34, 197, 94, .75));
    --chip-grad-warm: linear-gradient(135deg, rgba(245, 158, 11, .95), rgba(239, 68, 68, .70));
}

/* =========================================================
   Base / tipografía
   ========================================================= */
html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4 {
    color: var(--text);
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

/* Transición suave al cambiar de tema (se desactiva en el primer pintado
   y con prefers-reduced-motion, ver theme.js) */
html.theme-anim body,
html.theme-anim body * {
    transition:
        background-color .28s ease,
        border-color .28s ease,
        color .28s ease,
        box-shadow .28s ease !important;
}

/* Foco accesible consistente */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 12px;
}

::selection {
    background: var(--brand-bg);
    color: var(--text);
}

/* Barras de scroll acordes al tema */
* {
    scrollbar-color: rgb(var(--fg-rgb) / .28) transparent;
}

/* =========================================================
   🌗 Switch de tema
   ========================================================= */
.themeToggle {
    --tt-size: 44px;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tt-size);
    height: var(--tt-size);
    flex: 0 0 auto;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: transform .16s ease, background .2s ease, border-color .2s ease, color .2s ease;
}

.themeToggle:hover {
    transform: translateY(-1px);
    color: var(--text);
    border-color: var(--border-2);
    background: var(--surface-3);
}

.themeToggle:active {
    transform: translateY(0) scale(.96);
}

.themeToggle i {
    position: absolute;
    font-size: 16px;
    line-height: 1;
    transition: transform .38s cubic-bezier(.2, .8, .2, 1), opacity .24s ease;
}

/* Claro activo → se ve el sol; el switch ofrece pasar a oscuro */
.themeToggle .tt-sun {
    color: var(--warn-ink);
    transform: none;
    opacity: 1;
}

.themeToggle .tt-moon {
    transform: rotate(-90deg) scale(.4);
    opacity: 0;
}

html[data-theme="dark"] .themeToggle .tt-sun {
    transform: rotate(90deg) scale(.4);
    opacity: 0;
}

html[data-theme="dark"] .themeToggle .tt-moon {
    color: var(--brand-ink);
    transform: none;
    opacity: 1;
}

/* Variante flotante para páginas sin barra de navegación */
.themeToggle.themeToggle-float {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 940;
    background: var(--glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
}

/* En el menú móvil se muestra como fila completa */
.themeToggleRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface-1);
    margin-top: 10px;
    color: var(--text);
    font-weight: 800;
    width: 100%;
    cursor: pointer;
    text-align: left;
}

.themeToggleRow small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 650;
}

@media (prefers-reduced-motion: reduce) {

    html.theme-anim body,
    html.theme-anim body * {
        transition: none !important;
    }

    .themeToggle i {
        transition: none;
    }
}

/* =========================================================
   SweetAlert2 — acorde al tema activo
   (las llamadas heredadas pasan colores oscuros en línea;
   estas reglas ganan y mantienen la coherencia)
   ========================================================= */
.swal2-container {
    backdrop-filter: blur(3px);
}

.swal2-container.swal2-backdrop-show {
    background: var(--scrim) !important;
}

.swal2-popup {
    background: var(--glass-solid) !important;
    color: var(--text) !important;
    border: 1px solid var(--border);
    border-radius: 20px !important;
    box-shadow: var(--shadow-lg);
}

.swal2-title,
.swal2-html-container,
.swal2-content {
    color: var(--text) !important;
}

.swal2-html-container {
    color: var(--muted) !important;
}

.swal2-input,
.swal2-textarea,
.swal2-select {
    background: var(--surface-1) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
}

.swal2-styled.swal2-confirm {
    background: linear-gradient(135deg, var(--brand), var(--brand2-strong)) !important;
    color: var(--on-brand) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-brand) !important;
}

.swal2-styled.swal2-cancel,
.swal2-styled.swal2-deny {
    background: var(--surface-2) !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
}

.swal2-timer-progress-bar {
    background: var(--brand) !important;
}