/* ============================================================================
   claut-theme-base.css — tokens del MODO CLARO, fondo aurora, transición e interruptor.

   Arquitectura del tema (assets/css/theme/):
     claut-theme-base.css        → este archivo: tokens + fondo + interruptor (se carga en todas las páginas)
     claut-theme-components.css  → componentes compartidos (header, riel, tarjetas, botones, formularios, modales…)
     claut-theme-utilities.css   → utilidades de Tailwind escritas para fondo oscuro (text-white, bg-white/5…)
     claut-theme-pages.css       → ajustes puntuales por página (bloques <style> y estilos en línea propios)
     claut-theme-visitante.css   → variante OSCURA de visitante.html (esa página nació clara)
   JS: assets/js/claut-theme.js fija html[data-theme] antes del primer pintado y monta el interruptor.

   Regla de oro: todo lo de modo claro va bajo html[data-theme="light"]. Con data-theme="dark" el sistema
   se ve EXACTAMENTE como su diseño original (ninguna regla de estas hojas aplica).
   ============================================================================ */

/* ── Tokens del modo claro: «vidrio claro» (misma familia que visitante.html) ── */
html[data-theme="light"] {
    --cts-bg: #eef0f6;
    --cts-ink: #16181f;          /* texto principal   (17.6:1 sobre blanco) */
    --cts-mid: #4b5160;          /* texto secundario  (8.3:1) */
    --cts-low: #6b7180;          /* texto tenue       (4.9:1, mínimo AA para texto) */
    --cts-glass: rgba(255, 255, 255, 0.66);
    --cts-glass-strong: rgba(255, 255, 255, 0.86);
    --cts-glass-solid: #ffffff;
    --cts-line: rgba(22, 24, 31, 0.09);
    --cts-line-strong: rgba(22, 24, 31, 0.16);
    --cts-shadow: 0 18px 44px -26px rgba(58, 66, 110, 0.32), 0 2px 6px -2px rgba(58, 66, 110, 0.08);
    --cts-shadow-lg: 0 30px 70px -30px rgba(58, 66, 110, 0.38);
    --cts-red: #c7252b;
    --cts-red-ink: #a61d22;      /* rojo para TEXTO sobre claro (6.2:1) */
    --cts-hover: rgba(22, 24, 31, 0.05);

    /* Tokens propios del sistema (claut-ui.css, header-navbar.css, claut-admin-elite.css) re-mapeados:
       todo componente que ya usa variables pasa a claro sin reglas adicionales. */
    --porsche-black: var(--cts-bg);
    --glass-bg: var(--cts-glass);
    --glass-bg-strong: var(--cts-glass-strong);
    --glass-border: var(--cts-line);
    --glass-border-strong: var(--cts-line-strong);
    --text-primary: var(--cts-ink);
    --text-secondary: var(--cts-mid);
    --text-muted: var(--cts-low);
    --state-success: #0d7a56;
    --state-warning: #9a6200;
    --state-danger: #c0262d;
    --state-info: #1d4ed8;
    --state-gold: #9a6d00;
    --surface-success: rgba(13, 122, 86, 0.10);
    --surface-warning: rgba(202, 138, 4, 0.13);
    --surface-danger: rgba(220, 38, 38, 0.10);
    --surface-info: rgba(29, 78, 216, 0.09);
    --surface-accent: rgba(199, 37, 43, 0.09);
    --shadow-card: var(--cts-shadow);
    --shadow-float: var(--cts-shadow-lg);

    --claut-bg-main: var(--cts-bg);
    --claut-bg-surface: #ffffff;
    --claut-bg-secondary: #f6f7fb;
    --claut-bg-tertiary: #eceef5;
    --claut-bg-header: rgba(255, 255, 255, 0.72);
    --claut-bg-nav: rgba(255, 255, 255, 0.92);
    --claut-text-primary: var(--cts-ink);
    --claut-text-secondary: var(--cts-mid);
    --claut-text-tertiary: var(--cts-low);
    --claut-text-muted: var(--cts-low);
    --claut-text-inverse: #f8fafc;
    --claut-red-light: rgba(199, 37, 43, 0.09);
    --claut-border-light: var(--cts-line);
    --claut-border-medium: var(--cts-line-strong);
    --claut-divider: var(--cts-line);

    /* Variables --porsche-* que definen algunas páginas en su <style>: se usan sobre todo como color de TEXTO
       (white, silver) o de superficie (dark, anthracite). --porsche-charcoal se usa de ambas formas: no se toca. */
    --porsche-white: var(--cts-ink);
    --porsche-silver: var(--cts-mid);
    --porsche-dark: var(--cts-bg);
    --porsche-anthracite: var(--cts-glass-strong);

    --elite-surface: var(--cts-glass);
    --elite-surface-hover: var(--cts-glass-strong);

    color-scheme: light;
}

/* ── Fondo: color base + aurora (manchas pastel difuminadas, fijas detrás de todo) ── */
html[data-theme="light"] {
    background-color: var(--cts-bg) !important;
    background-image: none !important;
}
/* El body queda transparente: su fondo se pinta POR ENCIMA de los elementos con z-index negativo (la aurora). */
html[data-theme="light"] body {
    background-color: transparent !important;
    background-image: none !important;
}
html[data-theme="light"] body { color: var(--cts-ink); }

.claut-aurora { display: none; }
html[data-theme="light"] .claut-aurora {
    display: block;
    position: fixed;
    inset: -20% -10%;
    z-index: 0;
    pointer-events: none;
    filter: blur(70px);
    opacity: 0.8;
}
html[data-theme="light"] .claut-aurora i { position: absolute; border-radius: 50%; }
html[data-theme="light"] .claut-aurora .a1 { width: 44vw; height: 44vw; left: -6%;  top: -4%; background: radial-gradient(circle, #c9b9f2 0%, transparent 65%); }
html[data-theme="light"] .claut-aurora .a2 { width: 38vw; height: 38vw; right: -4%; top: 6%;  background: radial-gradient(circle, #aac9f0 0%, transparent 65%); }
html[data-theme="light"] .claut-aurora .a3 { width: 40vw; height: 40vw; left: 22%;  top: 46%; background: radial-gradient(circle, #f2b9c9 0%, transparent 68%); }
html[data-theme="light"] .claut-aurora .a4 { width: 34vw; height: 34vw; right: 8%;  top: 72%; background: radial-gradient(circle, #b9e2f2 0%, transparent 65%); }
/* z-index:-1 en el contexto raíz: se pinta sobre el fondo del lienzo y debajo de todo el contenido,
   sin tocar el position de headers, rieles o modales fijos. */
html[data-theme="light"] .claut-aurora { z-index: -1; }

/* ── Transición suave SOLO durante el cambio de tema (no en cada hover) ── */
html.claut-theme-switching *,
html.claut-theme-switching *::before,
html.claut-theme-switching *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, fill 0.3s ease !important;
}
@media (prefers-reduced-motion: reduce) {
    html.claut-theme-switching *, html.claut-theme-switching *::before, html.claut-theme-switching *::after { transition: none !important; }
}

/* ── Interruptor deslizante  ☀ (●   ) ☾ ───────────────────────────────────── */
.claut-theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 40px;
    padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: #e7e9ee;
    cursor: pointer;
    flex: 0 0 auto;
    width: auto;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.claut-theme-switch:hover { background: rgba(255, 255, 255, 0.1); }
.claut-theme-switch:active { transform: scale(0.96); }
.claut-theme-switch:focus-visible { outline: 2px solid #c7252b; outline-offset: 2px; }
.claut-theme-switch .cts-icon { display: inline-flex; width: 16px; height: 16px; opacity: 0.45; transition: opacity 0.25s ease, transform 0.35s ease; }
.claut-theme-switch svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.claut-theme-switch .cts-moon svg { fill: currentColor; stroke: none; }
.claut-theme-switch .cts-track {
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    transition: background-color 0.25s ease;
}
.claut-theme-switch .cts-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1);
}
/* Oscuro activo: perilla a la derecha (luna) */
.claut-theme-switch[aria-checked="true"] .cts-knob { transform: translateX(16px); }
.claut-theme-switch[aria-checked="true"] .cts-track { background: #c7252b; }
.claut-theme-switch[aria-checked="true"] .cts-moon { opacity: 1; }
.claut-theme-switch[aria-checked="false"] .cts-sun { opacity: 1; transform: rotate(45deg); }

/* En modo claro el interruptor es una pastilla de vidrio claro */
html[data-theme="light"] .claut-theme-switch {
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--cts-line);
    color: var(--cts-ink);
    box-shadow: 0 6px 18px -10px rgba(58, 66, 110, 0.35);
}
html[data-theme="light"] .claut-theme-switch:hover { background: #fff; }
html[data-theme="light"] .claut-theme-switch .cts-track { background: rgba(22, 24, 31, 0.14); }
html[data-theme="light"] .claut-theme-switch .cts-sun { color: #c27a00; }

/* Sin header en la página: flota arriba a la derecha */
.claut-theme-switch--float {
    position: fixed !important;
    top: 14px;
    right: 14px;
    z-index: 9990;
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
}

@media (max-width: 640px) {
    .claut-theme-switch { height: 36px; padding: 0 7px; gap: 5px; }
    .claut-theme-switch .cts-icon { display: none; }      /* en móvil solo la pista: ocupa 52 px */
    .claut-theme-switch .cts-track { width: 34px; height: 20px; }
    .claut-theme-switch .cts-knob { width: 14px; height: 14px; }
    .claut-theme-switch[aria-checked="true"] .cts-knob { transform: translateX(14px); }
}

/* Insignias verdes con texto blanco (estado «Próximo», % de descuento): el verde 500 daba 2.3:1 con blanco.
   En oscuro se usa el verde 700 (5:1); en claro ya lo hace claut-theme-utilities.css. */
html:not([data-theme="light"]) [class~="bg-green-500"][class~="text-white"] { background-color: #15803d; }