/* ==================================================================
   TEMA NOVA — SaaS futurista premium.
   Inspiración: Vercel, Linear, Stripe, OpenAI, Raycast.
   Negro profundo + glass + glows violeta/azul/cian + aurora.

   Este archivo solo se carga cuando SiteConfig.tema == "nova",
   por lo que puede sobrescribir componentes de base.css sin
   afectar a los otros temas.
   ================================================================== */

/* ------------------------- Variables ------------------------- */
:root {
    --fuente-titulos: "Inter", system-ui, sans-serif;
    --fuente-cuerpo: "Inter", system-ui, sans-serif;

    --fondo: #090909;
    --texto: #a1a1aa;
    --texto-fuerte: #fafafa;
    --texto-suave: #63636b;

    --primario: #8b5cf6;
    --primario-contraste: #ffffff;
    --acento: #22d3ee;
    --acento-contraste: #06222a;
    --precio: #c4b5fd;

    --header-fondo: rgba(10, 10, 12, .95);
    --tarjeta-fondo: rgba(255, 255, 255, .03);
    --campo-fondo: rgba(255, 255, 255, .04);
    --suave: rgba(255, 255, 255, .06);
    --borde: rgba(255, 255, 255, .09);
    --pie-fondo: #0b0b0d;

    --hero-fondo: #0b0b10;
    --hero-texto: #fafafa;
    --hero-texto-suave: #9d9daa;

    --ok-fondo: rgba(34, 197, 94, .12);   --ok-texto: #4ade80;
    --error-fondo: rgba(244, 63, 94, .12); --error-texto: #fb7185;
    --warn-fondo: rgba(245, 158, 11, .12); --warn-texto: #fbbf24;
    --info-fondo: rgba(59, 130, 246, .12); --info-texto: #60a5fa;

    --radio: 14px;
    --radio-grande: 20px;
    --sombra: 0 24px 60px rgba(0, 0, 0, .6);

    /* Propias de Nova */
    --nova-violeta: #8b5cf6;
    --nova-azul: #3b82f6;
    --nova-cian: #22d3ee;
    --nova-gradiente: linear-gradient(120deg, var(--nova-violeta), var(--nova-azul) 50%, var(--nova-cian));
    --nova-transicion: .35s cubic-bezier(.22, .61, .36, 1);
}

/* ------------------- Fondo aurora global --------------------- */
body {
    background:
        radial-gradient(900px 520px at 12% -8%, rgba(139, 92, 246, .13), transparent 60%),
        radial-gradient(820px 480px at 88% 4%, rgba(34, 211, 238, .09), transparent 60%),
        radial-gradient(700px 600px at 50% 108%, rgba(59, 130, 246, .10), transparent 65%),
        var(--fondo);
    background-attachment: fixed;
}
::selection { background: rgba(139, 92, 246, .45); color: #fff; }

/* Scrollbar discreto */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0b0b0d; }
::-webkit-scrollbar-thumb { background: #26262c; border-radius: 999px; border: 2px solid #0b0b0d; }
::-webkit-scrollbar-thumb:hover { background: #3d3d46; }

/* ------------------------- Header ----------------------------- */
.header {
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.menu-desplegable, .tema-panel { background: rgba(19, 19, 24, .97); }
.logo span {
    background: var(--nova-gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -.02em;
}
.nav-categorias a { border: 1px solid transparent; transition: all var(--nova-transicion); }
.nav-categorias a:hover {
    background: rgba(139, 92, 246, .10);
    border-color: rgba(139, 92, 246, .35);
    color: var(--texto-fuerte);
}
.buscador input { backdrop-filter: blur(8px); transition: border-color var(--nova-transicion), box-shadow var(--nova-transicion); }
.buscador input:focus { box-shadow: 0 0 0 3px rgba(139, 92, 246, .22); }
.buscador button { background: var(--nova-gradiente); }
.carrito-badge { background: var(--nova-gradiente); color: #fff; box-shadow: 0 0 14px rgba(139, 92, 246, .55); }

/* ----------------------- Tipografía --------------------------- */
h1, h2, h3 { letter-spacing: -.03em; }

/* ------------------------- Botones ----------------------------- */
.btn {
    background: var(--nova-gradiente);
    background-size: 160% 160%;
    box-shadow: 0 4px 24px rgba(139, 92, 246, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
    transition: box-shadow var(--nova-transicion), transform .15s, background-position .6s ease;
}
.btn:hover {
    filter: none;
    background-position: 100% 50%;
    box-shadow: 0 6px 34px rgba(139, 92, 246, .5), 0 0 60px rgba(34, 211, 238, .16), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn-fantasma {
    backdrop-filter: blur(8px);
    transition: all var(--nova-transicion);
}
.btn-fantasma:hover, .btn-fantasma.activa {
    border-color: rgba(139, 92, 246, .55);
    color: #c4b5fd;
    background: rgba(139, 92, 246, .08);
    box-shadow: 0 0 24px rgba(139, 92, 246, .14);
}

/* --------------------------- Hero ------------------------------ */
.hero-slider {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .08);
    background:
        radial-gradient(640px 320px at 18% 8%, rgba(139, 92, 246, .28), transparent 62%),
        radial-gradient(560px 300px at 85% 20%, rgba(34, 211, 238, .18), transparent 60%),
        radial-gradient(700px 380px at 55% 118%, rgba(59, 130, 246, .22), transparent 65%),
        #0b0b10;
    background-size: 200% 200%;
    animation: nova-aurora 14s ease-in-out infinite alternate;
    box-shadow: var(--sombra), inset 0 1px 0 rgba(255, 255, 255, .06);
}
@keyframes nova-aurora {
    from { background-position: 0% 0%, 100% 0%, 50% 100%, 0 0; }
    to   { background-position: 60% 40%, 40% 60%, 30% 70%, 0 0; }
}
.hero-texto h1 {
    background: linear-gradient(180deg, #ffffff 30%, #a5b4fc 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}
.etiqueta {
    background: rgba(34, 211, 238, .12);
    color: var(--nova-cian);
    border: 1px solid rgba(34, 211, 238, .35);
    box-shadow: 0 0 20px rgba(34, 211, 238, .18);
}
.hero-imagen img { box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 60px rgba(139, 92, 246, .18); }
.hero-puntos button.activa { background: var(--nova-cian); box-shadow: 0 0 12px rgba(34, 211, 238, .8); }

/* ----------------------- Tarjetas glass ------------------------ */
.tarjeta, .categoria-tarjeta, .kpi, .confianza, .resumen,
.tarjeta-form, .checkout-form, .filtros, .tabla-envoltura, .carrito-fila {
    background: var(--tarjeta-fondo);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--borde);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
.tarjeta { transition: transform var(--nova-transicion), border-color var(--nova-transicion), box-shadow var(--nova-transicion); }
.tarjeta:hover {
    transform: translateY(-6px);
    border-color: rgba(139, 92, 246, .45);
    box-shadow: 0 24px 50px rgba(0, 0, 0, .55), 0 0 40px rgba(139, 92, 246, .14), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.tarjeta-media { background: rgba(255, 255, 255, .025); }
.tarjeta-descuento { background: var(--nova-gradiente); color: #fff; box-shadow: 0 0 18px rgba(139, 92, 246, .5); }
.tarjeta-precios strong { text-shadow: 0 0 24px rgba(139, 92, 246, .35); }

.categoria-tarjeta { transition: transform var(--nova-transicion), border-color var(--nova-transicion), box-shadow var(--nova-transicion); }
.categoria-tarjeta:hover {
    border-color: rgba(34, 211, 238, .45);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 36px rgba(34, 211, 238, .12);
}

/* KPIs del panel: bento con glow */
.kpi { position: relative; overflow: hidden; }
.kpi::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(240px 120px at 85% -20%, rgba(139, 92, 246, .16), transparent 70%);
    pointer-events: none;
}
.kpi strong {
    background: var(--nova-gradiente);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.kpi-alerta { border-color: rgba(34, 211, 238, .5); }

/* ------------------------ Formularios -------------------------- */
.input, select.input, textarea.input {
    transition: border-color var(--nova-transicion), box-shadow var(--nova-transicion), background var(--nova-transicion);
}
.input:focus {
    background: rgba(255, 255, 255, .06);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, .22), 0 0 30px rgba(139, 92, 246, .1);
}
select.input option { background: #141418; color: var(--texto-fuerte); }

/* ------------------------ Componentes -------------------------- */
.menu-desplegable {
    background: rgba(17, 17, 20, .92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.flecha { backdrop-filter: blur(8px); transition: all var(--nova-transicion); }
.flecha:hover { box-shadow: 0 0 22px rgba(139, 92, 246, .25); }
.variante-chip { backdrop-filter: blur(8px); transition: all var(--nova-transicion); }
.variante-chip:has(input:checked) {
    background: var(--nova-gradiente);
    border-color: transparent;
    box-shadow: 0 0 26px rgba(139, 92, 246, .4);
}
.galeria-thumbs .thumb.activa { border-color: var(--nova-cian); box-shadow: 0 0 16px rgba(34, 211, 238, .35); }
.panel-nav a:hover, .panel-nav a.activa {
    background: var(--nova-gradiente);
    box-shadow: 0 4px 22px rgba(139, 92, 246, .35);
}
.tabla th { background: rgba(255, 255, 255, .04); }
.tabla td { border-top-color: rgba(255, 255, 255, .06); }
.toast {
    background: rgba(20, 20, 24, .92);
    color: #fafafa;
    border: 1px solid rgba(139, 92, 246, .4);
    backdrop-filter: blur(14px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .6), 0 0 30px rgba(139, 92, 246, .2);
}
.mensaje { border: 1px solid var(--borde); backdrop-filter: blur(10px); }
.paginacion a { transition: color var(--nova-transicion), text-shadow var(--nova-transicion); }
.paginacion a:hover { text-shadow: 0 0 18px rgba(139, 92, 246, .6); }
.pie { background: linear-gradient(180deg, transparent, rgba(139, 92, 246, .04)), var(--pie-fondo); }

/* ---------------- Reveal on scroll (activado por nova.js) ------ */
/* Sin blur: el filtro animado se ve a saltos en celulares; opacidad + desplazamiento corto es más suave */
.nova-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .6s cubic-bezier(.22, .61, .36, 1),
                transform .6s cubic-bezier(.22, .61, .36, 1);
    transition-delay: var(--nova-delay, 0s);
    will-change: opacity, transform;
}
.nova-reveal.nova-visible {
    opacity: 1;
    transform: none;
}

/* -------- Luz que sigue al mouse (creada por nova.js) ---------- */
#novaLuz {
    position: fixed;
    width: 640px; height: 640px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(circle,
        rgba(139, 92, 246, .07) 0%,
        rgba(59, 130, 246, .045) 38%,
        transparent 68%);
    transform: translate(-50%, -50%);
    transition: opacity .5s ease;
    opacity: 0;
    mix-blend-mode: screen;
}
/* Contenido sobre la luz del mouse (z-index 1). El header NO va aquí:
   ya tiene z-index 50 en base.css y bajarlo dejaría el menú de usuario
   detrás del contenido. */
main, .pie { position: relative; z-index: 2; }

/* Flotación sutil del hero */
@keyframes nova-flotar { from { transform: translateY(0); } 50% { transform: translateY(-8px); } to { transform: translateY(0); } }
.hero-imagen img { animation: nova-flotar 7s ease-in-out infinite; }

/* Accesibilidad: sin movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
    .hero-slider, .hero-imagen img { animation: none; }
    .nova-reveal { opacity: 1; transform: none; transition: none; }
    #novaLuz { display: none; }
}