/* =========================================================
   NEXXA-VIDA — CAPA DE CRISTAL UNIFICADA (v15, paso 1)
   Referencia: .registro-card de registro.css (bloque vigente)
   Se carga DESPUÉS de global.css y del CSS de cada página.
   Solo cambia: background, backdrop-filter y box-shadow base.
   NO toca: fuentes, colores de texto, bordes, hover, carrusel,
            botón EXPERIENCIA NEXXA ni su panel.
   Para revertir: quitar el <link> de este archivo.

   VERSIÓN: v15-final-g  (sin duplicados: variables, logo y dimension-card unificados)

   ÍNDICE DE SECCIONES (orden de desarrollo)
   1. Variables de cristal ......... :root (relleno, velo, blur, halo)
   2. Tarjetas ..................... .spotlight-card
   3. Header y footer .............. .site-header / .site-footer
   4. Conócete y Admin ............. .conocete-panel / .admin-*
   5. Respaldo sin backdrop-filter . @supports not
   6. Botones de Inicio ............ .eyebrow / .nexa-button
   7. EXPERIENCIA NEXXA ............ botón, panel y 4 enlaces
   8. Títulos de sección ........... .section-heading h2
   9. Nombre de marca (header) ..... .brand-name
  10. Admin (color por bloque) ..... .admin-heading / .admin-stat / .admin-table-panel
  11. Tarjetas de dimensiones ...... .dimension-card (tono por categoría)
  12. Acceso a NEXXA PRO ........... .acceso-cta / .acceso-alterno
  13. Logo del header (sello NV) ... .brand-logo
   Debe cargarse DESPUÉS de global.css y del CSS de cada página,
   en: index, conocete, login, registro y admin.
   ========================================================= */

:root {
    /* Velo oscuro violeta (mismo tono de las sombras de registro).
       0 = sin velo (más blanco) · 0.14 = punto de partida · 0.25 = más oscuro */
    --nx-glass-dark: 0.14;

    /* Relleno: blanco de registro-card + velo oscuro */
    --nx-glass-fill:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.008)
        ),
        linear-gradient(
            rgba(38, 18, 64, var(--nx-glass-dark)),
            rgba(38, 18, 64, var(--nx-glass-dark))
        );

    /* Desenfoque + saturación.
       Registro usa blur(10px). Menos blur = más transparente.
       Escala: 10px lechoso · 4px cristal claro · 0px vidrio puro */
    --nx-glass-filter: blur(4px) saturate(175%);

    /* Brillo interno superior */
    --nx-glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.22);

    /* Halo luminoso cian / violeta / magenta de registro-card */
    --nx-glass-glow:
        0 0 28px rgba(0, 229, 255, 0.10),
        0 0 38px rgba(150, 92, 255, 0.12),
        0 0 48px rgba(255, 54, 190, 0.10);

    /* Tri-tono NEXXA (RGB) */
    --nx-cyan: 0, 229, 255;
    --nx-violet: 150, 92, 255;
    --nx-magenta: 255, 54, 190;

    /* Reflejo de espejo: franja de luz en la mitad superior */
    --nx-mirror-sheen:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.18) 0%,
            rgba(255, 255, 255, 0.04) 46%,
            rgba(255, 255, 255, 0) 47%
        );

    /* Alto del logo-sello del header (sección 13) */
    --nx-logo-h: 68px;
}


/* ---------- TARJETAS (dimensiones, Inicio y Conócete) ---------- */
.spotlight-card {
    background: var(--nx-glass-fill);
    -webkit-backdrop-filter: var(--nx-glass-filter);
    backdrop-filter: var(--nx-glass-filter);
    box-shadow:
        0 28px 80px rgba(38, 18, 64, 0.18),
        var(--nx-glass-glow),
        var(--nx-glass-inset);
}

/* El hover de .spotlight-card tiene mayor especificidad
   y conserva su propio box-shadow: no se altera. */


/* ---------- HEADER Y FOOTER ---------- */
.site-header {
    padding: 10px 0; /* compacto: deja respirar al logo grande (sección 13) */
    background: var(--nx-glass-fill);
    -webkit-backdrop-filter: var(--nx-glass-filter);
    backdrop-filter: var(--nx-glass-filter);
}

.site-footer {
    background: var(--nx-glass-fill);
    -webkit-backdrop-filter: var(--nx-glass-filter);
    backdrop-filter: var(--nx-glass-filter);
}


/* ---------- CONÓCETE: PANEL DEL FORMULARIO ---------- */
.conocete-panel {
    background: var(--nx-glass-fill);
    -webkit-backdrop-filter: var(--nx-glass-filter);
    backdrop-filter: var(--nx-glass-filter);
}


/* ---------- ADMIN ---------- */
.admin-heading,
.admin-stat,
.admin-table-panel {
    background: var(--nx-glass-fill);
    -webkit-backdrop-filter: var(--nx-glass-filter);
    backdrop-filter: var(--nx-glass-filter);
}


/* ---------- RESPALDO: navegadores sin backdrop-filter ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .spotlight-card,
    .site-header,
    .site-footer,
    .conocete-panel,
    .admin-heading,
    .admin-stat,
    .admin-table-panel {
        background: rgba(45, 27, 72, 0.55);
    }
}


/* =========================================================
   BOTONES DE INICIO — ESPEJO TRANSPARENTE EN 3 TONOS NEXXA
   Aplica a: .eyebrow, .nexa-button, .nexa-button.primary
   NO toca: EXPERIENCIA NEXXA, carrusel (.carousel-control),
            tipografía, tamaños ni animaciones de brillo.
   Cian #00e5ff · Violeta #965cff · Magenta #ff36be
   ========================================================= */


/* ---- Eyebrow: dominante CIAN ---- */
.eyebrow {
    border-color: rgba(var(--nx-cyan), 0.45);
    background:
        var(--nx-mirror-sheen),
        linear-gradient(
            115deg,
            rgba(var(--nx-cyan), 0.16),
            rgba(var(--nx-violet), 0.10) 55%,
            rgba(var(--nx-magenta), 0.06)
        );
    -webkit-backdrop-filter: blur(4px) saturate(175%);
    backdrop-filter: blur(4px) saturate(175%);
    box-shadow:
        0 8px 26px rgba(38, 18, 64, 0.18),
        0 0 16px rgba(var(--nx-cyan), 0.16),
        0 0 24px rgba(var(--nx-violet), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

/* ---- Botón secundario (Explorar NEXXA PRO): dominante VIOLETA ---- */
.nexa-button {
    border-color: rgba(var(--nx-violet), 0.55);
    background:
        var(--nx-mirror-sheen),
        linear-gradient(
            115deg,
            rgba(var(--nx-cyan), 0.12),
            rgba(var(--nx-violet), 0.16) 55%,
            rgba(var(--nx-magenta), 0.10)
        );
    -webkit-backdrop-filter: blur(4px) saturate(175%);
    backdrop-filter: blur(4px) saturate(175%);
    box-shadow:
        0 10px 30px rgba(38, 18, 64, 0.20),
        0 0 18px rgba(var(--nx-cyan), 0.12),
        0 0 26px rgba(var(--nx-violet), 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.34),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.nexa-button:hover,
.nexa-button:focus-visible {
    border-color: rgba(var(--nx-cyan), 0.80);
    background:
        var(--nx-mirror-sheen),
        linear-gradient(
            115deg,
            rgba(var(--nx-cyan), 0.22),
            rgba(var(--nx-violet), 0.24) 55%,
            rgba(var(--nx-magenta), 0.18)
        );
    box-shadow:
        0 16px 36px rgba(38, 18, 64, 0.24),
        0 0 24px rgba(var(--nx-cyan), 0.22),
        0 0 34px rgba(var(--nx-violet), 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 0 rgba(255, 255, 255, 0.10);
}

/* ---- Botón principal (Comenzar con Conócete): dominante MAGENTA ---- */
.nexa-button.primary {
    border-color: rgba(var(--nx-magenta), 0.60);
    background:
        var(--nx-mirror-sheen),
        linear-gradient(
            115deg,
            rgba(var(--nx-magenta), 0.30),
            rgba(var(--nx-violet), 0.22) 55%,
            rgba(var(--nx-cyan), 0.14)
        );
    box-shadow:
        0 12px 34px rgba(38, 18, 64, 0.22),
        0 0 20px rgba(var(--nx-magenta), 0.20),
        0 0 28px rgba(var(--nx-violet), 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.38),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}

.nexa-button.primary:hover,
.nexa-button.primary:focus-visible {
    border-color: rgba(var(--nx-magenta), 0.85);
    background:
        var(--nx-mirror-sheen),
        linear-gradient(
            115deg,
            rgba(var(--nx-magenta), 0.42),
            rgba(var(--nx-violet), 0.32) 55%,
            rgba(var(--nx-cyan), 0.22)
        );
    box-shadow:
        0 18px 42px rgba(38, 18, 64, 0.26),
        0 0 28px rgba(var(--nx-magenta), 0.30),
        0 0 36px rgba(var(--nx-violet), 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.46),
        inset 0 -1px 0 rgba(255, 255, 255, 0.10);
}


/* =========================================================
   EXPERIENCIA NEXXA — BOTÓN, PANEL Y 4 ENLACES
   Mantiene: tamaño, forma, tipografía, líneas neón propias
             (::before / ::after), apertura escalonada y
             posiciones de los 4 enlaces.
   Cambia:   relleno espejo tri-tono, bordes, halos y brillo.
   Tonos:    INICIO cian · CONÓCETE violeta · BIENESTAR magenta
             NEXXA PRO ✦ iridiscente (los 3 tonos en flujo)
   ========================================================= */


/* Variable animable para el pulso del halo */
@property --nx-halo {
    syntax: "<number>";
    inherits: false;
    initial-value: 0.16;
}

@keyframes nxHalo {
    0%, 100% { --nx-halo: 0.14; }
    50%      { --nx-halo: 0.42; }
}

@keyframes nxFlow {
    0%   { background-position: 0 0, 0% 50%; }
    100% { background-position: 0 0, 100% 50%; }
}

@keyframes nxTwinkle {
    0%, 100% {
        text-shadow:
            0 0 7px rgba(var(--nx-cyan), 0.95),
            0 0 15px rgba(var(--nx-violet), 0.55);
    }
    50% {
        text-shadow:
            0 0 9px rgba(var(--nx-magenta), 0.95),
            0 0 20px rgba(var(--nx-violet), 0.65);
    }
}


/* ---------- BOTÓN PRINCIPAL ---------- */
.experience-nav .experience-trigger {
    border-color: rgba(var(--nx-violet), 0.55);
    background:
        var(--nx-mirror-sheen),
        linear-gradient(
            115deg,
            rgba(var(--nx-magenta), 0.30) 0%,
            rgba(var(--nx-violet), 0.24) 33%,
            rgba(var(--nx-cyan), 0.28) 66%,
            rgba(var(--nx-magenta), 0.30) 100%
        );
    background-size: 100% 100%, 300% 100%;
    -webkit-backdrop-filter: blur(4px) saturate(175%);
    backdrop-filter: blur(4px) saturate(175%);
    box-shadow:
        0 10px 28px rgba(38, 18, 64, 0.24),
        0 0 16px rgba(var(--nx-cyan), 0.16),
        0 0 24px rgba(var(--nx-violet), 0.22),
        0 0 34px rgba(var(--nx-magenta), var(--nx-halo)),
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);
    animation:
        nxFlow 9s ease-in-out infinite alternate,
        nxHalo 4.5s ease-in-out infinite;
}

/* Conserva el pulso al presionar */
.experience-nav .experience-trigger.is-pressing {
    animation:
        nexxaExperiencePulse 450ms cubic-bezier(.2, .8, .2, 1),
        nxFlow 9s ease-in-out infinite alternate,
        nxHalo 4.5s ease-in-out infinite;
}

.experience-nav .experience-trigger:hover,
.experience-nav .experience-trigger:focus-visible,
.experience-nav.is-open .experience-trigger {
    border-color: rgba(var(--nx-cyan), 0.85);
    box-shadow:
        0 14px 34px rgba(38, 18, 64, 0.28),
        0 0 22px rgba(var(--nx-cyan), 0.30),
        0 0 32px rgba(var(--nx-violet), 0.32),
        0 0 44px rgba(var(--nx-magenta), 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.46),
        inset 0 -1px 0 rgba(255, 255, 255, 0.10);
}

.experience-nav .experience-trigger-symbol {
    animation: nxTwinkle 3.6s ease-in-out infinite;
}

.experience-nav .experience-trigger-label {
    text-shadow:
        0 1px 8px rgba(25, 12, 40, 0.55),
        0 0 12px rgba(var(--nx-violet), 0.40);
}


/* ---------- PANEL: AURA Y LÍNEA SUPERIOR TRI-TONO ---------- */
.experience-nav .experience-panel::before {
    background:
        radial-gradient(
            circle,
            rgba(var(--nx-magenta), 0.16),
            rgba(var(--nx-violet), 0.10) 42%,
            rgba(var(--nx-cyan), 0.06) 62%,
            transparent 74%
        );
}

.experience-nav .experience-panel::after {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--nx-cyan), 0.80),
            rgba(var(--nx-violet), 0.90),
            rgba(var(--nx-magenta), 0.80),
            transparent
        );
    box-shadow: 0 0 10px rgba(var(--nx-violet), 0.55);
}


/* ---------- LOS 4 ENLACES: UN TONO CADA UNO ---------- */
.experience-menu .experience-link {
    --tone: var(--nx-violet);

    border-color: rgba(var(--tone), 0.42);
    background:
        var(--nx-mirror-sheen),
        linear-gradient(
            110deg,
            rgba(var(--tone), 0.18),
            rgba(var(--tone), 0.05)
        );
    -webkit-backdrop-filter: blur(4px) saturate(175%);
    backdrop-filter: blur(4px) saturate(175%);
    box-shadow:
        0 8px 22px rgba(38, 18, 64, 0.20),
        0 0 14px rgba(var(--tone), 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.30),
        inset 0 -1px 0 rgba(255, 255, 255, 0.06);
    text-shadow: 0 0 10px rgba(var(--tone), 0.55);
}

.experience-menu .experience-link:nth-child(1) { --tone: var(--nx-cyan); }
.experience-menu .experience-link:nth-child(2) { --tone: var(--nx-violet); }
.experience-menu .experience-link:nth-child(3) { --tone: var(--nx-magenta); }

/* Punto luminoso y línea inferior toman el tono del enlace */
.experience-menu .experience-link::before {
    background: rgb(var(--tone));
    box-shadow: 0 0 8px rgba(var(--tone), 0.90);
    opacity: 0.95;
}

.experience-menu .experience-link::after {
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(var(--tone), 0.95),
            rgba(255, 255, 255, 0.75),
            transparent
        );
}

.experience-menu .experience-link:hover,
.experience-menu .experience-link:focus-visible {
    border-color: rgba(var(--tone), 0.90);
    background:
        var(--nx-mirror-sheen),
        linear-gradient(
            110deg,
            rgba(var(--tone), 0.34),
            rgba(var(--tone), 0.10)
        );
    box-shadow:
        0 12px 28px rgba(38, 18, 64, 0.26),
        0 0 22px rgba(var(--tone), 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -1px 0 rgba(255, 255, 255, 0.10);
}

.experience-menu .experience-link:hover::before,
.experience-menu .experience-link:focus-visible::before {
    box-shadow:
        0 0 10px rgba(var(--tone), 1),
        0 0 18px rgba(var(--tone), 0.55);
}


/* ---------- NEXXA PRO ✦ : IRIDISCENTE, ES EL DIFERENCIADOR ---------- */
.experience-menu .experience-pro {
    border-color: rgba(var(--nx-magenta), 0.60);
    background:
        var(--nx-mirror-sheen),
        linear-gradient(
            110deg,
            rgba(var(--nx-magenta), 0.34) 0%,
            rgba(var(--nx-violet), 0.26) 33%,
            rgba(var(--nx-cyan), 0.30) 66%,
            rgba(var(--nx-magenta), 0.34) 100%
        );
    background-size: 100% 100%, 300% 100%;
    box-shadow:
        0 10px 26px rgba(38, 18, 64, 0.24),
        0 0 16px rgba(var(--nx-cyan), 0.16),
        0 0 24px rgba(var(--nx-magenta), 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.40),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);
    animation: nxFlow 7s ease-in-out infinite alternate;
}

.experience-menu .experience-pro::before {
    background: #ffffff;
    box-shadow:
        0 0 8px rgba(var(--nx-cyan), 0.95),
        0 0 14px rgba(var(--nx-magenta), 0.80);
}

.experience-menu .experience-pro:hover,
.experience-menu .experience-pro:focus-visible {
    border-color: rgba(var(--nx-cyan), 0.90);
    box-shadow:
        0 14px 32px rgba(38, 18, 64, 0.28),
        0 0 24px rgba(var(--nx-cyan), 0.34),
        0 0 34px rgba(var(--nx-violet), 0.34),
        0 0 44px rgba(var(--nx-magenta), 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.50),
        inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.experience-menu .experience-pro span {
    text-shadow:
        0 0 9px rgba(var(--nx-cyan), 0.55),
        0 0 16px rgba(var(--nx-magenta), 0.50);
}


/* =========================================================
   TÍTULOS DE SECCIÓN — mismo lenguaje que "Evoluciona a tu ritmo"
   Aplica a: "Tres dimensiones una experiencia de bienestar"
   y al título del panel Conócete en Inicio.
   Reutiliza @keyframes evolutionFlow de inicio.css.
   ========================================================= */
.section-heading h2,
.know-panel h2 {
    color: transparent;
    background:
        linear-gradient(
            110deg,
            #8fe9e8 0%,
            #a99aff 18%,
            #e5b8ff 35%,
            #74dfe7 52%,
            #a98aff 70%,
            #ff76d5 86%,
            #8fe9e8 100%
        );
    background-size: 320% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter:
        drop-shadow(0 0 8px rgba(111, 224, 230, 0.25))
        drop-shadow(0 0 18px rgba(165, 133, 255, 0.22))
        drop-shadow(0 0 28px rgba(255, 91, 205, 0.12));
    animation: evolutionFlow 9s ease-in-out infinite;
}


/* ---------- Accesibilidad: sin movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
    .experience-nav .experience-trigger,
    .experience-nav .experience-trigger.is-pressing,
    .experience-nav .experience-trigger-symbol,
    .experience-menu .experience-pro,
    .section-heading h2,
    .know-panel h2 {
        animation: none;
    }
}


/* =========================================================
   MARCA NEXXA-VIDA EN EL HEADER — PROTAGONISTA
   Antes: 1.05rem, degradado estático, logo de 44px.
   Ahora: tamaño fluido, degradado tri-tono animado, halo
          luminoso y logo con aro de luz. Reduce en móvil.
   ========================================================= */
@keyframes nxBrandFlow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.site-header .brand {
    gap: 16px;
}

.site-header .brand-name {
    font-size: clamp(1.4rem, 2.5vw, 2.05rem);
    font-weight: 800;
    letter-spacing: -0.015em;
    background:
        linear-gradient(
            100deg,
            #ffffff 0%,
            #8fe9e8 20%,
            #c9a8ff 45%,
            #ff76d5 70%,
            #ffffff 100%
        );
    background-size: 260% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter:
        drop-shadow(0 0 8px rgba(var(--nx-cyan), 0.30))
        drop-shadow(0 0 18px rgba(var(--nx-violet), 0.34))
        drop-shadow(0 0 28px rgba(var(--nx-magenta), 0.22));
    animation: nxBrandFlow 8s ease-in-out infinite;
}

/* Tablet pequeña y móvil: evita que la marca desplace al botón */
@media (max-width: 600px) {
    .site-header .brand { gap: 10px; }

    .site-header .brand-name {
        font-size: 1.15rem;
    }
}

@media (max-width: 380px) {
    .site-header .brand-name {
        font-size: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-header .brand-name {
        animation: none;
    }
}


/* =========================================================
   ADMIN — UN COLOR POR BLOQUE (solo afecta a admin.php)
   Mantiene tal cual: títulos, cifras, fondos transparentes,
   barrido de luz y animación del borde (admin-neon-flow).
   Cambia únicamente el COLOR del borde neón, que antes
   recorría los 3 tonos en todos los bloques:
     1. Encabezado grande ..... turquesa-azul  #00e5ff
     2. Las 4 tarjetas ........ violeta        #965cff
     3. Panel de la tabla ..... fucsia         #ff36be
   Se cambia solo background-image: tamaño, máscara y
   animación siguen siendo los de admin.css.
   ========================================================= */

@keyframes nxRise {
    from { opacity: 0; translate: 0 18px; }
    to   { opacity: 1; translate: 0 0; }
}

/* ---- Bloque 1: encabezado — turquesa-azul ---- */
.admin-page .admin-heading::before {
    background-image:
        linear-gradient(
            120deg,
            #00e5ff 0%, #38b6ff 32%, #00cfe6 64%, #00e5ff 100%
        );
    opacity: 0.80;
}

/* ---- Bloque 2: las 4 tarjetas — violeta ---- */
.admin-page .admin-stats .admin-stat::before {
    background-image:
        linear-gradient(
            120deg,
            #965cff 0%, #b88cff 32%, #8148f0 64%, #965cff 100%
        );
    opacity: 0.80;
}

.admin-page .admin-stats .admin-stat {
    animation: nxRise 700ms cubic-bezier(.2, .8, .2, 1) backwards;
}
.admin-page .admin-stats .admin-stat:nth-child(1) { animation-delay: 60ms; }
.admin-page .admin-stats .admin-stat:nth-child(2) { animation-delay: 160ms; }
.admin-page .admin-stats .admin-stat:nth-child(3) { animation-delay: 260ms; }
.admin-page .admin-stats .admin-stat:nth-child(4) { animation-delay: 360ms; }

.admin-page .admin-stats .admin-stat:hover {
    box-shadow:
        0 25px 55px rgba(28, 12, 49, 0.20),
        0 0 26px rgba(var(--nx-violet), 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

/* ---- Bloque 3: panel de la tabla — fucsia ---- */
.admin-page .admin-table-panel::before {
    background-image:
        linear-gradient(
            120deg,
            #ff36be 0%, #ff76d5 32%, #f01fa8 64%, #ff36be 100%
        );
    opacity: 0.80;
}

/* ---- Botones del encabezado: espejo, del color de su bloque ---- */
.admin-actions a {
    border-color: rgba(var(--nx-cyan), 0.55);
    background:
        var(--nx-mirror-sheen),
        linear-gradient(
            110deg,
            rgba(var(--nx-cyan), 0.24),
            rgba(var(--nx-violet), 0.10)
        );
    -webkit-backdrop-filter: blur(4px) saturate(175%);
    backdrop-filter: blur(4px) saturate(175%);
    box-shadow:
        0 10px 26px rgba(38, 18, 64, 0.22),
        0 0 16px rgba(var(--nx-cyan), 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.admin-actions a:hover,
.admin-actions a:focus-visible {
    border-color: rgba(var(--nx-cyan), 0.90);
    box-shadow:
        0 14px 32px rgba(38, 18, 64, 0.28),
        0 0 26px rgba(var(--nx-cyan), 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

/* ---- Tabla: encabezado y filas en UN solo tono (fucsia) ----
   Antes cada celda <th> repetía su propio degradado cian-violeta-magenta
   y se veían 7 cuadros de colores distintos. Ahora es un relleno uniforme. */
.admin-page .admin-table thead th {
    background: rgba(var(--nx-magenta), 0.10);
    border-bottom: 1px solid rgba(var(--nx-magenta), 0.30);
}

.admin-page .admin-table tbody tr:hover td {
    background: rgba(var(--nx-magenta), 0.075);
}

.admin-pill {
    border: 1px solid rgba(var(--nx-magenta), 0.55);
    background:
        linear-gradient(
            110deg,
            rgba(var(--nx-magenta), 0.26),
            rgba(var(--nx-violet), 0.16)
        );
    box-shadow:
        0 0 14px rgba(var(--nx-magenta), 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);
}

@media (prefers-reduced-motion: reduce) {
    .admin-page .admin-stats .admin-stat {
        animation: none;
    }
}


/* =========================================================
   TARJETAS DE DIMENSIONES (carrusel de Inicio)
   Cristal transparente + un toque del tono de su categoría.
   Usa --card-color, que ya define inicio.css por categoría:
     Descanso ... turquesa · Alimentación ... violeta
     Movimiento . fucsia
   NO toca: tamaño, transformaciones, opacidad del carrusel ni
            el estado activo (borde y halo de .is-active).
   La transparencia se conserva: los tintes son de 11 % y 22 %
   y se desvanecen hacia el centro.
   ========================================================= */
.dimension-card.spotlight-card {
    background:
        radial-gradient(
            ellipse at 10% 0%,
            color-mix(in srgb, var(--card-color) 22%, transparent),
            transparent 60%
        ),
        radial-gradient(
            ellipse at 100% 100%,
            color-mix(in srgb, var(--card-color) 11%, transparent),
            transparent 58%
        ),
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0) 38%
        ),
        var(--nx-glass-fill);
    -webkit-backdrop-filter: blur(6px) saturate(180%);
    backdrop-filter: blur(6px) saturate(180%);
}

/* Borde y halo con el tono de la categoría en las tarjetas no activas
   (la activa conserva el suyo, más intenso) */
.dimension-card.spotlight-card:not(.is-active) {
    border-color: color-mix(in srgb, var(--card-color) 34%, rgba(255, 255, 255, 0.22));
    box-shadow:
        0 20px 60px rgba(38, 18, 64, 0.16),
        0 0 26px color-mix(in srgb, var(--card-color) 20%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* Caja interior de la imagen */
.dimension-card .dimension-visual {
    border-color: color-mix(in srgb, var(--card-color) 36%, rgba(255, 255, 255, 0.18));
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--card-color) 16%, rgba(255, 255, 255, 0.08)),
            rgba(255, 255, 255, 0.02)
        );
}


/* =========================================================
   ACCESO A NEXXA PRO — CTA al final de Conócete y enlace
   alterno en login / registro. Misma identidad cristal.
   ========================================================= */
.acceso-cta {
    display: grid;
    gap: 14px;
    justify-items: start;
    margin-top: 26px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.acceso-cta-text {
    max-width: 560px;
    margin: 0;
    line-height: 1.7;
    color: rgba(249, 245, 255, 0.82);
}

.acceso-cta-login,
.acceso-alterno {
    margin: 0;
    font-size: 0.92rem;
    color: rgba(249, 245, 255, 0.72);
}

.acceso-alterno {
    margin-top: 18px;
    text-align: center;
}

.acceso-cta-login a,
.acceso-alterno a {
    color: #8fe9e8;
    text-decoration: none;
    border-bottom: 1px solid rgba(143, 233, 232, 0.40);
    transition: color 200ms ease, border-color 200ms ease;
}

.acceso-cta-login a:hover,
.acceso-alterno a:hover,
.acceso-cta-login a:focus-visible,
.acceso-alterno a:focus-visible {
    color: #ff76d5;
    border-color: rgba(255, 118, 213, 0.60);
}


/* =========================================================
   LOGO DEL HEADER — solo las letras "NV", sin caja
   El aro/caja se diseñó para el logo completo. Con "NV" en una
   imagen transparente y recortada, las letras son las protagonistas.
   Ajuste: --nx-logo-h = alto del logo (68px desktop · 56px móvil · 48px móvil chico).
   Para volver al diseño anterior, borra esta sección.
   Requiere img/logo/NEXXA-VIDALogo.png y que header.php la use.
   ========================================================= */

.site-header .brand-logo {
    width: auto;
    min-width: 0;
    max-width: none;
    height: var(--nx-logo-h);
    min-height: 0;
    max-height: none;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.site-header .brand-logo img {
    width: auto;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
    filter:
        drop-shadow(0 0 8px rgba(var(--nx-cyan), 0.35))
        drop-shadow(0 0 16px rgba(var(--nx-violet), 0.45))
        drop-shadow(0 0 24px rgba(var(--nx-magenta), 0.30));
}

@media (max-width: 600px) {
    :root { --nx-logo-h: 56px; }
}

@media (max-width: 380px) {
    :root { --nx-logo-h: 48px; }
}