/* Rush Ride Studio - Main Stylesheet
   Mobile-first design approach
   ================================ */

/* CSS Variables */
/* =============================================================
   TEMA — los tokens de verdad.

   La familia --rr-* se usaba 2.000+ veces via var(--rr-x, fallback)
   y NUNCA estaba definida: cada uso cargaba su fallback oscuro. Al
   definirla aca, el tema claro es UNA remapa — el mismo truco del
   vivo (globals.css .light remapea --color-dark-* y todo el sitio
   se adapta solo). Los valores claros son los del vivo, exactos.
   ============================================================= */
:root {
    --rr-primary: #FF6B00;
    --rr-primary-dark: #E65F00;
    --rr-primary-light: #FF9933;
    /* Naranja de marca bajado dos escalones. Vale IGUAL en los dos temas —
       por eso se define aca y el bloque claro no lo remapea.

       Existe porque el naranja de marca no llega a la vara de 3.0 en dos
       situaciones que se repiten en todo el panel:
         - texto blanco sobre relleno naranja: #FF6B00 da 2.86;
         - naranja como texto sobre el gris de pagina del tema claro
           (#DFE1E6): #FF6B00 da 2.18 y hasta --rr-primary-light (#EA580C,
           el naranja oscurecido del tema claro) se queda en 2.72 — solo
           alcanza sobre tarjeta blanca.
       Este da 5.18 contra blanco, 3.96 sobre el gris de pagina y 5.18 con
       texto blanco encima: pasa en las tres. */
    --rr-primary-deep: #C2410C;
    --rr-primary-glow: rgba(255, 107, 0, 0.35);
    /* Naranja para TEXTO/iconos. Sobre fondo oscuro el naranja de marca
       contrasta 6.8:1, asi que aca es el mismo. En claro se reemplaza por
       uno mas oscuro: #FF6B00 sobre #DFE1E6 da 2.18:1 (ilegible). */
    --rr-primary-ink: #FF6B00;
    --rr-bg: #050505;
    --rr-bg-dark: #0C0C0C;
    --rr-bg-light: #111111;
    --rr-bg-medium: rgba(18, 16, 19, 0.98);
    --rr-bg-card: #16161a;
    --rr-bg-elev: #14120f;
    --rr-bg-border: #1A1A1A;
    --rr-surface: #111111;
    --rr-secondary: #1a1a1a;
    --rr-border: rgba(255, 255, 255, 0.08);
    --rr-glass-bg: rgba(255, 255, 255, 0.04);
    --rr-glass-bg-hover: rgba(255, 255, 255, 0.07);
    --rr-glass-border: rgba(255, 255, 255, 0.09);
    --rr-glass-border-hover: rgba(255, 255, 255, 0.16);
    --rr-text-primary: #ffffff;
    --rr-text-secondary: rgba(255, 255, 255, 0.72);
    --rr-text-muted: rgba(255, 255, 255, 0.5);
    --rr-text-subtle: rgba(255, 255, 255, 0.35);
    --rr-accent-green: #22c55e;
    --rr-accent-red: #ef4444;
    --rr-accent-yellow: #fbbf24;
    --rr-accent-pink: #ec4899;
    --rr-radius-sm: 8px;
    --rr-radius-md: 12px;
    --rr-radius-lg: 16px;
    --rr-radius-xl: 20px;
    --rr-radius-full: 9999px;
    --rr-spacing-xs: 0.25rem;
    --rr-spacing-sm: 0.5rem;
    --rr-spacing-md: 1rem;
    --rr-spacing-lg: 1.5rem;
    --rr-spacing-xl: 2rem;
    --rr-transition-fast: 150ms ease;
    --rr-transition-normal: 300ms ease;
    --rr-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --rr-shadow-glow: 0 0 24px rgba(255, 107, 0, 0.25);
    color-scheme: dark;
}

/* Tema claro — valores del vivo (globals.css .light):
   fondo #DFE1E6, tarjetas blancas con sombra en vez de vidrio,
   borde rgba(0,0,0,.22), texto #111827/#374151, acentos oscurecidos
   para que el texto de color siga leyendose sobre blanco. */
html[data-tema="claro"] {
    --color-background: #DFE1E6;
    --color-surface: #FFFFFF;
    --color-surface-light: #FFFFFF;
    --color-secondary: #FFFFFF;
    --color-text: #111827;
    --color-text-muted: #374151;
    --rr-bg: #DFE1E6;
    --rr-bg-dark: #DFE1E6;
    --rr-bg-light: #FFFFFF;
    --rr-bg-medium: rgba(255, 255, 255, 0.98);
    --rr-bg-card: #FFFFFF;
    --rr-bg-elev: #FFFFFF;
    --rr-bg-border: rgba(0, 0, 0, 0.22);
    --rr-surface: #FFFFFF;
    --rr-secondary: #FFFFFF;
    --rr-border: rgba(0, 0, 0, 0.22);
    --rr-glass-bg: #FFFFFF;
    --rr-glass-bg-hover: #F3F4F6;
    --rr-glass-border: rgba(0, 0, 0, 0.22);
    --rr-glass-border-hover: rgba(0, 0, 0, 0.35);
    --rr-text-primary: #111827;
    --rr-text-secondary: #374151;
    --rr-text-muted: #4B5563;
    --rr-text-subtle: #6B7280;
    --rr-accent-green: #16A34A;
    --rr-accent-red: #DC2626;
    --rr-accent-yellow: #B45309;
    --rr-accent-pink: #DB2777;
    /* --rr-primary-light se usa SIEMPRE como color de texto (nunca de fondo),
       asi que en claro va al naranja legible: #EA580C daba 2.71:1. */
    --rr-primary-light: #C2410C;
    --rr-primary-glow: rgba(255, 107, 0, 0.15);
    /* Naranja quemado: 3.96:1 sobre el fondo #DFE1E6 y 5.18:1 sobre las
       tarjetas blancas. El naranja de marca queda para FONDOS, no para texto. */
    --rr-primary-ink: #C2410C;
    /* El naranja de marca se oscurece apenas SOLO en claro: el texto blanco
       sobre #FF6B00 da 2.85:1 (ilegible) y sobre #EA580C da 3.56:1. Sigue
       siendo el mismo naranja a la vista, y arregla de una todos los botones
       naranjas con texto blanco en vez de parchear cada uno. */
    --rr-primary: #EA580C;
    --rr-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1), 0 8px 32px rgba(0, 0, 0, 0.08);
    --rr-shadow-glow: 0 2px 8px rgba(255, 107, 0, 0.12);
    color-scheme: light;
}

/* .btn-pill--solid pinta su naranja con un `background:` en degrade, y el
   atajo deja el background-color en transparente: el boton no tiene fondo
   propio, asi que en claro su texto blanco cae sobre la pagina blanca. Le
   ponemos un color opaco debajo del degrade. Va aca y no en glass-theme.css
   (que se carga despues) por eso el `html` adelante: sube la especificidad
   lo justo para ganarle sin editar aquel archivo. En oscuro no hace falta:
   el fondo de la pagina ya es oscuro y el blanco se lee. */
html[data-tema="claro"] .btn-pill--solid {
    background-color: var(--rr-primary-dark);
}

:root {
    /* Colors */
    --color-primary: #FF6B00;
    --color-primary-dark: #E65F00;
    --color-secondary: #1a1a1a;
    --color-background: #000000;
    --color-surface: #111111;
    --color-surface-light: #1a1a1a;
    --color-text: #ffffff;
    --color-text-muted: #888888;
    --color-success: #22c55e;
    --color-warning: #f59e0b;
    --color-error: #ef4444;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Border radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;

    /* Safe areas */
    --safe-area-top: env(safe-area-inset-top);
    --safe-area-bottom: env(safe-area-inset-bottom);
}

/* Reset & Base */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-background);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
}

/* ============================================
   HEADER - FUTURISTIC CYBERPUNK DESIGN
   ============================================ */

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: var(--spacing-sm) var(--spacing-md);
    padding-top: calc(var(--spacing-sm) + var(--safe-area-top));
    transition: all 0.4s ease;
    height: 70px;
}

/* Glass Background with Cyber Effect */
.header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.8) 50%,
        rgba(0, 0, 0, 0.72) 100%
    );
    /* Antes habia aqui un backdrop-filter: blur(25px) saturate(180%).
       Se quito porque este header es fijo y esta justo encima de .header__bg,
       donde hay glows que se mueven en bucle: al cambiar el contenido de atras
       en cada cuadro, el navegador tenia que volver a desenfocar toda la franja
       una y otra vez, y eso se veia como un parpadeo constante.
       El degradado ya tapa casi todo (90% arriba), asi que el desenfoque casi
       no se notaba; se subio un poco la opacidad para compensar lo poco que
       aportaba. */
    z-index: -1;
}

/* Futuristic Animated Background Elements */
.header__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: -2;
    pointer-events: none;
}

/* Studio Image Background */
.header__bg-image {
    position: absolute;
    inset: 0;
    /* La foto de la sala de bicis. Colgaba de /media/ con el nombre que traia
       del sistema anterior y daba 404 en todas las paginas: no porque faltara
       el archivo —esta, y es la foto real del estudio— sino porque quedo en
       rushride/media/ y MEDIA_ROOT apunta a media/, a la raiz. Se movio a
       static/, que ademas es lo unico que viaja al servidor con collectstatic;
       media/ esta fuera del repo y nunca habria llegado.
       El degradado va DEBAJO como respaldo, por si la imagen no carga. */
    background-image:
        image-set(url('../images/estudio-cabecera.avif') type('image/avif'),
                  url('../images/estudio-cabecera.jpg') type('image/jpeg')),
        radial-gradient(120% 140% at 18% 0%, rgba(255, 107, 0, 0.55) 0%, rgba(255, 107, 0, 0) 62%),
        linear-gradient(180deg, #111111 0%, #050505 100%);
    background-size: cover;
    background-position: center 30%;
    opacity: 0.18;
    animation: headerImagePan 48s ease-in-out infinite alternate;
}

@keyframes headerImagePan {
    0% { transform: scale(1.08) translateX(0); }
    100% { transform: scale(1.12) translateX(-12px); }
}

/* Overlay with gradient */
.header__bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(0, 0, 0, 0.4) 30%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0.9) 100%
    );
}

/* Neon Glow Effects */
.header__bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(55px);
    mix-blend-mode: screen;
    pointer-events: none;
}

/* Wash cálido central detrás del logo */
.header__bg-glow--1 {
    width: 340px;
    height: 130px;
    background: radial-gradient(ellipse, rgba(255, 107, 0, 0.5) 0%, transparent 72%);
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.55;
    animation: neonPulse1 7s ease-in-out infinite;
}

/* Acento cálido tenue que deriva (da movimiento sin distraer) */
.header__bg-glow--2 {
    width: 220px;
    height: 90px;
    background: radial-gradient(ellipse, rgba(255, 140, 58, 0.28) 0%, transparent 72%);
    top: -20px;
    left: 15%;
    opacity: 0.5;
    animation: neonDrift 14s ease-in-out infinite alternate;
}

@keyframes neonPulse1 {
    0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.65; transform: translateX(-50%) scale(1.12); }
}

@keyframes neonDrift {
    0% { transform: translateX(0) scale(1); opacity: 0.35; }
    100% { transform: translateX(60vw) scale(1.15); opacity: 0.55; }
}

/* Línea de flujo — estela de velocidad que recorre el borde inferior */
.header__flowline {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    overflow: visible;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 107, 0, 0.09) 38%,
        rgba(255, 107, 0, 0.09) 62%,
        transparent 100%
    );
}

.header__flowline::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 157, 74, 0) 43%,
        rgba(255, 184, 116, 0.85) 50%,
        rgba(255, 157, 74, 0) 57%,
        transparent 100%
    );
    background-size: 300% 100%;
    /* Resplandor sutil: un hilo fino de luz que apenas ilumina el borde */
    filter: drop-shadow(0 0 5px rgba(255, 140, 58, 0.5));
    /* Loop calmo y continuo: cruza en una sola dirección, ~14s, lineal */
    animation: flowSweep 14s linear infinite;
}

@keyframes flowSweep {
    from { background-position: 160% 0; }
    to   { background-position: -160% 0; }
}

/* Header Container */
.header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    height: 100%;
}

/* Logo - Centrado con efecto holografico */
.header__logo {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0.5rem;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.header__logo-mark {
    height: 38px;
    width: auto;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 10px rgba(255, 107, 0, 0.4));
    transition: filter 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.header__logo:hover .header__logo-mark {
    filter: drop-shadow(0 0 18px rgba(255, 107, 0, 0.6)) brightness(1.05);
    transform: rotate(-6deg);
}

.header__logo:hover {
    transform: scale(1.08);
}

.header__logo-glow {
    position: absolute;
    width: 160px;
    height: 62px;
    background: radial-gradient(ellipse at center,
        rgba(255, 107, 0, 0.42) 0%,
        rgba(255, 107, 0, 0.12) 45%,
        transparent 70%);
    filter: blur(24px);
    animation: logoBreath 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes logoBreath {
    0%, 100% { opacity: 0.35; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.1); }
}

.header__logo-img {
    height: 42px;
    width: auto;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 12px rgba(255, 107, 0, 0.35));
    transition: filter 0.45s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.header__logo:hover .header__logo-img {
    filter: drop-shadow(0 0 22px rgba(255, 107, 0, 0.65)) brightness(1.08);
    transform: translateY(-1px);
}

/* Navigation Links - Futuristic */
.header__nav {
    display: none;
    align-items: center;
    gap: 0.75rem;
}

.header__nav--left {
    margin-right: auto;
    padding-left: 1rem;
}

.header__nav--right {
    margin-left: auto;
    padding-right: 1rem;
}

.header__nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.2rem;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 8px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.header__nav-link-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.header__nav-link svg {
    width: 18px;
    height: 18px;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.header__nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.header__nav-link:hover {
    color: #fff;
    border-color: rgba(255, 107, 0, 0.3);
    text-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
}

.header__nav-link:hover .header__nav-link-bg {
    opacity: 1;
}

.header__nav-link:hover::before {
    width: 80%;
}

.header__nav-link:hover svg {
    opacity: 1;
    color: var(--color-primary);
    filter: drop-shadow(0 0 5px rgba(255, 107, 0, 0.5));
}

/* CTA Button Style - Neon Effect */
.header__nav-link--cta {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.15) 0%, rgba(255, 107, 0, 0.05) 100%);
    border: 1px solid rgba(255, 107, 0, 0.4);
    color: var(--color-primary);
    box-shadow:
        0 0 15px rgba(255, 107, 0, 0.1),
        inset 0 0 20px rgba(255, 107, 0, 0.05);
}

.header__nav-link--cta::before {
    background: var(--color-primary);
    height: 100%;
    width: 0;
    left: 0;
    transform: none;
    opacity: 0;
    transition: all 0.4s ease;
}

.header__nav-link--cta:hover {
    border-color: var(--color-primary);
    color: #fff;
    box-shadow:
        0 0 25px rgba(255, 107, 0, 0.4),
        0 0 50px rgba(255, 107, 0, 0.2),
        inset 0 0 20px rgba(255, 107, 0, 0.1);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.header__nav-link--cta:hover::before {
    width: 100%;
    opacity: 1;
}

.header__nav-link--cta:hover svg {
    color: #fff;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}

.header__nav-link--cta span,
.header__nav-link--cta svg {
    position: relative;
    z-index: 1;
}

/* Mobile Actions - Futuristic */
.header__actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* ---- Cabecera admin (transcrita del vivo, header.tsx) ---- */
/* La palabra ADMIN al lado del logo: naranja, mayúsculas chicas, tracking ancho */
.header__admintag {
    margin-left: 0.6rem;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--rr-primary, #FF6B00);
}

/* Avatar de quien está conectado (foto o iniciales) + menú desplegable */
.header__avatar { position: relative; }
.header__avatar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--rr-glass-border, rgba(255, 255, 255, 0.1));
    background: var(--rr-glass-bg, rgba(255, 255, 255, 0.05));
    color: var(--rr-text-primary, #fff);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
}
.header__avatar-btn img { width: 100%; height: 100%; object-fit: cover; }
.header__avatar-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 210px;
    padding: 0.4rem;
    border-radius: var(--rr-radius-md, 12px);
    border: 1px solid var(--rr-glass-border, rgba(255, 255, 255, 0.1));
    background: rgba(18, 16, 19, 0.97);
    backdrop-filter: blur(10px);
    z-index: 400;
}
.header__avatar.is-open .header__avatar-menu { display: block; }
.header__avatar-id {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.45rem 0.65rem 0.55rem;
    margin-bottom: 0.25rem;
    border-bottom: 1px solid var(--rr-glass-border, rgba(255, 255, 255, 0.08));
}
.header__avatar-name { font-size: 0.85rem; font-weight: 600; color: var(--rr-text-primary, #fff); }
.header__avatar-mail { font-size: 0.74rem; color: var(--rr-text-secondary, rgba(255, 255, 255, 0.55)); }
.header__avatar-menu a {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--rr-text-secondary, rgba(255, 255, 255, 0.7));
    text-decoration: none;
}
.header__avatar-menu a:hover { background: var(--rr-glass-bg-hover, rgba(255, 255, 255, 0.08)); color: var(--rr-text-primary, #fff); }
.header__avatar-menu a svg { width: 16px; height: 16px; flex-shrink: 0; }
.header__avatar-out { color: #ff5a5a !important; }

/* En las páginas con menú lateral la cabecera es la del vivo: logo + ADMIN a
   la izquierda y el avatar a la derecha. El diseño general del sitio centra el
   logo y esconde las acciones en escritorio; acá se revierte SOLO donde hay
   sidebar (body:has(.admin-nav)), sin tocar el sitio público ni al socio. */
@media (min-width: 768px) {
    body:has(.admin-nav) .header__logo {
        position: static;
        transform: none;
    }
    body:has(.admin-nav) .header__logo:hover { transform: scale(1.04); }
    body:has(.admin-nav) .header__actions { display: flex; }
}

.header__cart {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.header__cart::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.2) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.header__cart:hover {
    color: var(--color-primary);
    border-color: rgba(255, 107, 0, 0.4);
    box-shadow: 0 0 15px rgba(255, 107, 0, 0.2);
}

.header__cart:hover::before {
    opacity: 1;
}

.header__cart-icon {
    width: 20px;
    height: 20px;
    position: relative;
    z-index: 1;
    transition: filter 0.3s ease;
}

.header__cart:hover .header__cart-icon {
    filter: drop-shadow(0 0 5px rgba(255, 107, 0, 0.5));
}

.header__menu-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.header__menu-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.2) 0%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.header__menu-btn:hover {
    border-color: rgba(255, 107, 0, 0.4);
    box-shadow: 0 0 15px rgba(255, 107, 0, 0.2);
}

.header__menu-btn:hover::before {
    opacity: 1;
}

.header__menu-btn span {
    display: block;
    width: 18px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 2px;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
}

.header__menu-btn:hover span {
    background-color: var(--color-primary);
    box-shadow: 0 0 8px rgba(255, 107, 0, 0.6);
}

.header__menu-btn:hover span:nth-child(1) {
    transform: translateX(3px);
}

.header__menu-btn:hover span:nth-child(3) {
    transform: translateX(-3px);
}

/* Header Scroll State */
.header.is-scrolled {
    height: 60px;
}

.header.is-scrolled::before {
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.95) 0%,
        rgba(0, 0, 0, 0.9) 100%
    );
}

.header.is-scrolled .header__bg-image {
    opacity: 0.15;
}

.header.is-scrolled .header__bg-glow {
    opacity: 0.3;
}

.header.is-scrolled .header__neon-border {
    opacity: 0.3;
}

.header.is-scrolled .header__logo-img {
    height: 36px;
}

.header.is-scrolled .header__logo-ring {
    width: 60px;
    height: 60px;
}

/* Mobile Navigation - Futuristic */
.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 200;
    visibility: hidden;
    opacity: 0;
    transition: var(--transition-base);
}

.mobile-nav.is-open {
    visibility: visible;
    opacity: 1;
}

.mobile-nav__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.mobile-nav__content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 85%;
    max-width: 350px;
    /* Antes: degradado fijo rgba(15,15,20,.98)->rgba(10,10,15,.98). Con el
       token el panel se adapta al tema (claro: blanco .98). */
    background: var(--rr-bg-medium);
    border-left: 1px solid rgba(255, 107, 0, 0.2);
    padding: var(--spacing-xl);
    padding-top: calc(var(--spacing-xl) + var(--safe-area-top));
    padding-bottom: calc(var(--spacing-2xl) + var(--safe-area-bottom, 20px));
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

.mobile-nav__content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--color-primary) 30%,
        var(--color-primary) 70%,
        transparent 100%
    );
    opacity: 0.5;
}

.mobile-nav__content::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -100px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 107, 0, 0.1) 0%, transparent 70%);
    filter: blur(40px);
    transform: translateY(-50%);
}

.mobile-nav.is-open .mobile-nav__content {
    transform: translateX(0);
}

.mobile-nav__close {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    color: var(--color-text);
    padding: var(--spacing-sm);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--rr-glass-border);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.mobile-nav__close:hover {
    border-color: rgba(255, 107, 0, 0.5);
    color: var(--color-primary);
}

.mobile-nav__close svg {
    width: 20px;
    height: 20px;
}

.mobile-nav__list {
    list-style: none;
    margin-top: var(--spacing-2xl);
}

.mobile-nav__list li {
    margin-bottom: var(--spacing-md);
    opacity: 0;
    transform: translateX(20px);
    animation: mobileNavItemIn 0.4s ease forwards;
}

.mobile-nav.is-open .mobile-nav__list li:nth-child(1) { animation-delay: 0.1s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(2) { animation-delay: 0.15s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(3) { animation-delay: 0.2s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(4) { animation-delay: 0.25s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(5) { animation-delay: 0.3s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(6) { animation-delay: 0.35s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(7) { animation-delay: 0.4s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(8) { animation-delay: 0.45s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(9) { animation-delay: 0.5s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(10) { animation-delay: 0.55s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(11) { animation-delay: 0.6s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(12) { animation-delay: 0.65s; }

@keyframes mobileNavItemIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.mobile-nav__list a {
    position: relative;
    font-size: var(--font-size-lg);
    font-weight: 500;
    display: block;
    padding: var(--spacing-md) var(--spacing-sm);
    color: var(--rr-text-secondary);
    border-bottom: 1px solid var(--rr-glass-border);
    transition: all 0.3s ease;
}

.mobile-nav__list a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    background: var(--color-primary);
    transform: translateY(-50%);
    transition: height 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
}

.mobile-nav__list a:hover {
    color: var(--rr-text-primary);
    padding-left: var(--spacing-md);
}

.mobile-nav__list a:hover::before {
    height: 60%;
}

.mobile-nav__cta {
    color: var(--color-primary) !important;
    font-weight: 600 !important;
    text-shadow: 0 0 20px rgba(255, 107, 0, 0.3);
}

/* Admin styles for mobile nav */
.mobile-nav__divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 107, 0, 0.5), transparent);
    margin: var(--spacing-md) 0 !important;
}

.mobile-nav__admin {
    color: var(--color-primary) !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: var(--font-size-sm) !important;
}

/* Admin button style in header */
.header__nav-link--admin {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 212, 255, 0.05) 100%);
    border: 1px solid rgba(0, 212, 255, 0.4);
    color: #00d4ff;
}

.header__nav-link--admin:hover {
    border-color: #00d4ff;
    color: #fff;
    box-shadow:
        0 0 25px rgba(0, 212, 255, 0.4),
        0 0 50px rgba(0, 212, 255, 0.2);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.header__nav-link--admin:hover svg {
    color: #00d4ff;
    filter: drop-shadow(0 0 8px rgba(0, 212, 255, 0.8));
}

/* Main Content */
.main {
    padding-top: 80px; /* Header height */
    min-height: calc(100vh - 80px);
}

/* Footer */
.footer {
    background-color: var(--color-surface);
    padding: var(--spacing-2xl) var(--spacing-md);
    margin-top: var(--spacing-2xl);
}

.footer__container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.footer__logo {
    width: 110px;
    height: 70px;
    object-fit: contain;
    margin: 0 auto var(--spacing-md);
}

.footer__company {
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.footer__address,
.footer__contact {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-md);
}

.footer__contact a {
    color: var(--color-primary);
}

.footer__social {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    margin: var(--spacing-xl) 0;
}

.footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--color-surface-light);
    border-radius: var(--radius-full);
    color: var(--color-text);
    transition: var(--transition-fast);
}

.footer__social a:hover {
    background-color: var(--color-primary);
}

.footer__social svg {
    width: 20px;
    height: 20px;
}

.footer__legal {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.footer__legal a {
    margin-bottom: var(--spacing-sm);
    display: block;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-xl);
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: var(--transition-fast);
    text-align: center;
}

.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-text);
}

.btn--primary:hover {
    background-color: var(--color-primary-dark);
}

.btn--secondary {
    background-color: var(--color-surface-light);
    color: var(--color-text);
}

.btn--outline {
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.btn--outline:hover {
    background-color: var(--color-primary);
    color: var(--color-text);
}

.btn--block {
    display: flex;
    width: 100%;
}

.btn--sm {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.btn--lg {
    padding: var(--spacing-lg) var(--spacing-2xl);
    font-size: var(--font-size-lg);
}

/* Cards */
.card {
    background-color: var(--color-surface);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.card__image {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.card__content {
    padding: var(--spacing-md);
}

.card__title {
    font-size: var(--font-size-lg);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.card__text {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

/* Form Elements */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
}

.form-input {
    width: 100%;
    padding: var(--spacing-md);
    background-color: var(--color-surface);
    border: 1px solid var(--color-surface-light);
    border-radius: var(--radius-md);
    color: var(--color-text);
    transition: var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.form-input::placeholder {
    color: var(--color-text-muted);
}

/* Utility Classes */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.text-center { text-align: center; }
.text-primary { color: var(--color-primary); }
.text-muted { color: var(--color-text-muted); }
.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }

.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

.py-md { padding-top: var(--spacing-md); padding-bottom: var(--spacing-md); }
.py-lg { padding-top: var(--spacing-lg); padding-bottom: var(--spacing-lg); }
.py-xl { padding-top: var(--spacing-xl); padding-bottom: var(--spacing-xl); }

.hidden { display: none !important; }

/* Grid */
.grid {
    display: grid;
    gap: var(--spacing-md);
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* Responsive Breakpoints */
@media (min-width: 768px) {
    .header {
        padding: var(--spacing-md) var(--spacing-xl);
        height: 80px;
    }

    .header__logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .header__logo:hover {
        transform: translateX(-50%) scale(1.08);
    }

    .header__logo-img {
        height: 50px;
    }

    .header__logo-ring {
        width: 90px;
        height: 90px;
    }

    .header__nav {
        display: flex;
        gap: 0.75rem;
    }

    .header__nav--left {
        flex: 1;
        justify-content: flex-start;
    }

    .header__nav--right {
        flex: 1;
        justify-content: flex-end;
    }

    .header__actions {
        display: none;
    }

    .header__menu-btn {
        display: none;
    }

    .header.is-scrolled {
        height: 65px;
    }

    .header.is-scrolled .header__logo-img {
        height: 40px;
    }

    .header.is-scrolled .header__logo-ring {
        width: 70px;
        height: 70px;
    }

    /* Dos bloques y nada en el medio: la marca a la izquierda, y contacto,
       redes y legal alineados a la derecha. Antes eran tres columnas de
       alturas muy distintas pegadas arriba, con un hueco enorme debajo de las
       dos ultimas. */
    .footer__container {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--spacing-2xl);
        text-align: left;
    }

    .footer__logo {
        width: 96px;
        height: 60px;
        object-fit: contain;
        margin: 0 0 var(--spacing-sm);
    }

    .footer__brand > *:last-child { margin-bottom: 0; }

    /* La columna de la derecha. En telefono este bloque no hace nada: los
       tres siguen apilados y centrados. */
    .footer__side {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        text-align: right;
        gap: var(--spacing-md);
    }

    .footer__contact { margin: 0; }

    /* Sin los margenes verticales heredados del movil, que aca solo abrian un
       hueco entre el telefono y los iconos. */
    .footer__social {
        justify-content: flex-end;
        margin: 0;
    }

    .footer__legal { text-align: right; }
    .footer__legal a { display: inline-block; margin-bottom: 0.35rem; }

    .grid--md-2 { grid-template-columns: repeat(2, 1fr); }
    .grid--md-3 { grid-template-columns: repeat(3, 1fr); }
    .grid--md-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
    .header {
        height: 85px;
    }

    .header__logo-img {
        height: 55px;
    }

    .header__logo-ring {
        width: 100px;
        height: 100px;
    }

    .header__nav-link {
        padding: 0.7rem 1.4rem;
        font-size: 0.85rem;
    }

    .header.is-scrolled {
        height: 70px;
    }

    .header.is-scrolled .header__logo-img {
        height: 45px;
    }

    .grid--lg-3 { grid-template-columns: repeat(3, 1fr); }
    .grid--lg-4 { grid-template-columns: repeat(4, 1fr); }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeIn {
    animation: fadeIn var(--transition-base) forwards;
}

.animate-slideUp {
    animation: slideUp var(--transition-base) forwards;
}

/* =========================================
   No-Show Blocking Popup
   ========================================= */

.noshow-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}

.noshow-popup__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.noshow-popup__content {
    position: relative;
    width: 100%;
    max-width: 400px;
    /* Antes: degradado fijo rgba(30,30,30,.98)->rgba(20,20,20,.98). Con el
       token la tarjeta sigue el tema (claro: blanca). */
    background: var(--rr-bg-card);
    border: 2px solid var(--color-error);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    animation: popupAppear 0.4s ease-out;
    box-shadow:
        0 0 60px rgba(239, 68, 68, 0.3),
        0 25px 50px rgba(0, 0, 0, 0.5);
}

@keyframes popupAppear {
    0% {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes pulseWarning {
    0%, 100% {
        box-shadow: 0 0 30px rgba(239, 68, 68, 0.3);
    }
    50% {
        box-shadow: 0 0 50px rgba(239, 68, 68, 0.5);
    }
}

.noshow-popup__icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--spacing-lg);
    background: linear-gradient(135deg, var(--color-error) 0%, #dc2626 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulseWarning 2s ease-in-out infinite;
}

.noshow-popup__icon svg {
    width: 40px;
    height: 40px;
    color: white;
}

.noshow-popup__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-error);
    margin-bottom: var(--spacing-sm);
    letter-spacing: 1px;
}

.noshow-popup__subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin-bottom: var(--spacing-xl);
    line-height: 1.6;
}

.noshow-popup__subtitle strong {
    color: var(--color-text);
}

.noshow-popup__penalty {
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.noshow-popup__penalty--monetary {
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.noshow-popup__penalty--credits {
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.noshow-popup__penalty-icon {
    font-size: 2rem;
    margin-bottom: var(--spacing-sm);
}

.noshow-popup__penalty p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin: var(--spacing-xs) 0;
}

.noshow-popup__amount {
    font-size: var(--font-size-2xl) !important;
    font-weight: 700 !important;
    color: var(--color-error) !important;
    margin: var(--spacing-sm) 0 !important;
}

.noshow-popup__remaining strong {
    color: var(--color-warning);
    font-size: var(--font-size-xl);
}

.noshow-popup__note {
    font-size: var(--font-size-xs) !important;
    color: var(--color-text-muted) !important;
    margin-top: var(--spacing-sm) !important;
}

.noshow-popup__btn {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    /* El degrade arrancaba en el naranja de marca, donde el texto blanco da
       2.86. Bajado un escalon entero: las dos puntas llevan blanco legible.
       El background-color va aparte porque el degrade es background-image y
       deja el backgroundColor transparente; la tarjeta de atras es blanca en
       tema claro, asi que sin el, el boton se medía blanco sobre blanco. */
    background-color: var(--rr-primary-dark);
    background-image: linear-gradient(135deg, var(--rr-primary-deep) 0%, var(--rr-primary-dark) 100%);
    color: white;
    font-weight: 600;
    font-size: var(--font-size-base);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    letter-spacing: 1px;
}

.noshow-popup__btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(255, 107, 0, 0.3);
}

.noshow-popup__btn:active {
    transform: translateY(0);
}

/* Prevent scrolling when popup is shown */
body.noshow-popup-active {
    overflow: hidden;
}

/* ============================================================
   BOTTOM TAB BAR — navegación mobile-first (pill flotante premium)
   ============================================================ */
.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    padding: 0 14px calc(12px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
}

/* La barra de abajo es LA navegacion del socio en todos los anchos: los
   botones del header (Reservar/Planes/Mi Rush) se quitaron a pedido de la
   clienta. Solo se esconde en escritorio cuando la pagina trae el menu
   lateral del admin, que ahi manda el. */
@media (min-width: 1024px) {
    body:has(.admin-nav) .tabbar { display: none; }
}

.tabbar__inner {
    pointer-events: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 64px;
    max-width: 460px;
    margin: 0 auto;
    padding: 0 8px;
    /* Línea gráfica glass del sistema (glass-card) sobre base oscura legible */
    border-radius: var(--rr-radius-lg, 16px);
    background: var(--rr-bg-medium);
    background-image: linear-gradient(180deg, var(--rr-glass-bg, rgba(255,255,255,0.03)), transparent);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid var(--rr-glass-border, rgba(255, 255, 255, 0.08));
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    animation: tabbarRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    overflow: visible;
}

@keyframes tabbarRise {
    from { transform: translateY(130%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.tabbar__item {
    flex: 1;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--rr-text-muted);
    -webkit-tap-highlight-color: transparent;
    transition: color 0.28s ease;
    animation: tabFade 0.5s ease both;
}
.tabbar__inner > .tabbar__item:nth-child(1) { animation-delay: 0.18s; }
.tabbar__inner > .tabbar__item:nth-child(2) { animation-delay: 0.24s; }
.tabbar__inner > .tabbar__item:nth-child(4) { animation-delay: 0.30s; }
.tabbar__inner > .tabbar__item:nth-child(5) { animation-delay: 0.36s; }
@keyframes tabFade { from { opacity: 0; } to { opacity: 1; } }

.tabbar__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 32px;
    border-radius: 13px;
    transition: background 0.3s ease, box-shadow 0.3s ease,
                transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tabbar__ico svg { width: 23px; height: 23px; }

.tabbar__lbl {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: font-weight 0.2s ease;
}

.tabbar__item:active .tabbar__ico { transform: scale(0.88); }

/* Estado activo: cápsula de luz que "enciende" + indicador superior */
.tabbar__item.is-active { color: var(--rr-primary-light); }
.tabbar__item.is-active .tabbar__lbl { font-weight: 700; }
.tabbar__item.is-active .tabbar__ico {
    background: linear-gradient(160deg, rgba(255, 140, 58, 0.3), rgba(255, 90, 0, 0.12));
    box-shadow: 0 0 18px rgba(255, 110, 20, 0.4),
                inset 0 0 0 1px rgba(255, 165, 90, 0.28);
    transform: translateY(-2px);
}
.tabbar__item.is-active::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 20px;
    height: 3px;
    transform: translateX(-50%);
    border-radius: 0 0 4px 4px;
    background: var(--rr-primary-light);
    box-shadow: 0 0 10px rgba(255, 140, 58, 0.95);
}

/* FAB central — Reservar (acción estrella, elevada con halo girando) */
.tabbar__fab {
    flex: 0 0 auto;
    position: relative;
    width: 60px;
    height: 60px;
    margin: 0 6px;
    transform: translateY(-20px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(145deg, #ffa356 0%, #ff5e00 55%, #f24d00 100%);
    border: 3.5px solid var(--rr-bg-card);
    box-shadow: 0 12px 26px rgba(255, 85, 0, 0.5),
                0 3px 10px rgba(0, 0, 0, 0.5),
                inset 0 1px 1px rgba(255, 255, 255, 0.3);
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
    animation: fabDrop 0.75s cubic-bezier(0.34, 1.4, 0.5, 1) 0.28s both;
}
.tabbar__fab svg { width: 28px; height: 28px; position: relative; z-index: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); }
.tabbar__fab:active { transform: translateY(-20px) scale(0.92); }

@keyframes fabDrop {
    from { opacity: 0; transform: translateY(6px) scale(0.6); }
    to   { opacity: 1; transform: translateY(-20px) scale(1); }
}

/* Reset para el slot tipo botón (Más) */
button.tabbar__item {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    padding: 0;
}

.tabbar__fab-lbl {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--rr-primary-light);
    white-space: nowrap;
}

.tabbar__fab-ring {
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 150, 70, 0.6);
    animation: fabPulse 2.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes fabPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    55% { transform: scale(1.22); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .tabbar__fab-ring, .tabbar__inner, .tabbar__item, .tabbar__fab { animation: none; }
}

/* ---- Hoja "Más" del admin (bottom sheet, línea gráfica glass) ---- */
.adminsheet {
    position: fixed;
    inset: 0;
    z-index: 400;
    pointer-events: none;
}
.adminsheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.28s ease;
}
.adminsheet__panel {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: calc(86px + env(safe-area-inset-bottom, 0px));
    max-width: 460px;
    margin: 0 auto;
    max-height: 62vh;
    overflow-y: auto;
    padding: 10px 14px 14px;
    background: var(--rr-bg-medium);
    transform: translateY(24px);
    opacity: 0;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.24s ease;
}
.adminsheet.is-open { pointer-events: auto; }
.adminsheet.is-open .adminsheet__backdrop { opacity: 1; }
.adminsheet.is-open .adminsheet__panel { transform: translateY(0); opacity: 1; }

.adminsheet__grip {
    width: 36px;
    height: 4px;
    border-radius: 4px;
    background: var(--rr-glass-border-hover);
    margin: 2px auto 10px;
}
.adminsheet__title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rr-text-muted);
    margin-bottom: 10px;
}
.adminsheet__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.adminsheet__grid a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 11px 4px 9px;
    border-radius: 12px;
    text-decoration: none;
    color: var(--rr-text-secondary);
    background: var(--rr-glass-bg, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--rr-glass-border, rgba(255, 255, 255, 0.08));
}
.adminsheet__grid a:active { background: rgba(255, 140, 58, 0.14); color: var(--rr-primary-light); }
.adminsheet__grid svg { width: 21px; height: 21px; }
.adminsheet__grid span {
    font-size: 9.5px;
    font-weight: 600;
    text-align: center;
    line-height: 1.15;
}
.adminsheet__foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--rr-glass-border, rgba(255, 255, 255, 0.08));
}
.adminsheet__link {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--rr-primary-light);
    text-decoration: none;
}
.adminsheet__link--out { color: var(--rr-text-muted); }

/* ---- UN SOLO MENÚ en móvil: manda la barra inferior ---- */
@media (max-width: 899px) {
    body { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
    .header__nav { display: none !important; }
    .header__menu-btn { display: none !important; }
    .admin-nav { display: none !important; }
}

/* ==========================================================================
   FONDO QUIETO — se apagan TODAS las animaciones perpetuas
   --------------------------------------------------------------------------
   El header corria 5 animaciones infinitas a la vez, una de ellas moviendo un
   elemento con filter: blur(55px) a lo ancho de 60vw. Animar un transform sobre
   una capa desenfocada obliga al navegador a volver a rasterizar esa superficie
   en CADA cuadro, para siempre, en todas las paginas (el header vive en
   base.html). Eso es el parpadeo constante.

   Se apagan en todos los dispositivos, no solo en tactiles: en escritorio el
   costo tambien esta y el parpadeo se veia igual. El diseno no cambia — los
   glows, el degradado y la imagen de fondo siguen ahi; simplemente quietos.
   ========================================================================== */
.header__bg-image,
.header__bg-glow,
.header__bg-glow--1,
.header__bg-glow--2,
.header__flowline,
.header__flowline::before,
.header__logo-glow,
.tabbar__fab-ring,
.session-card__badge,
.animate-pulse {
    animation: none !important;
}

/* neonDrift dejaba el glow corrido 60vw a la derecha en su ultimo cuadro.
   Sin animacion hay que devolverlo a su sitio para que el halo quede centrado
   donde el diseno lo pensaba. */
.header__bg-glow--2 {
    transform: none;
    opacity: .45;
}

/* El desenfoque de 55px sobre una capa grande es lo mas caro del header.
   Ya sin movimiento se rasteriza una sola vez, pero se baja igual: el halo se
   ve igual y la primera pintura es mas barata en telefonos. */
.header__bg-glow { filter: blur(38px); }

/* flowSweep corria sobre .header__flowline::before (un pseudo-elemento), no
   sobre el div; por eso se apaga por ::before y no por la clase sola. */




/* ==========================================================================
   SIN GLOWS NARANJAS
   --------------------------------------------------------------------------
   A la clienta no le gusta el halo naranja: ni el de la pestaña activa ni el
   del logo. Se quitan los resplandores y se marca lo activo con color y con la
   barrita de arriba, que ya existia — mas sobrio y ademas mas barato de pintar.
   ========================================================================== */

/* Pestaña activa: sin capsula encendida ni sombra difusa. */
.tabbar__item.is-active .tabbar__ico {
    background: none;
    box-shadow: none;
    transform: none;
}

/* La barrita superior se queda como indicador, pero sin el resplandor. */
.tabbar__item.is-active::after {
    box-shadow: none;
}

/* Logo del header: fuera el halo de fondo y los drop-shadow naranjas. */
.header__logo-glow {
    display: none;
}

.header__logo-mark,
.header__logo-img,
.header__logo:hover .header__logo-mark,
.header__logo:hover .header__logo-img {
    filter: none;
}

/* La estela del borde inferior del header tambien llevaba resplandor. */
.header__flowline::before {
    filter: none;
}


/* ==========================================================================
   ESTILOS QUE ANTES VIVIAN DENTRO DE LOS INCLUDES
   --------------------------------------------------------------------------
   nav.html, search.html y notifications_bell.html traian su propio <style>.
   Como los includes se renderizan DENTRO del body, esas reglas llegaban
   DESPUES del contenido: en cada recarga el navegador dibujaba el menu y el
   buscador sin estilo y recien despues los acomodaba. Eso es el parpadeo de un
   segundo que se veia al tocar Hoy/Semana/Mes/Trimestre, porque cada filtro
   recarga la pagina entera.
   Aca cargan en el <head>, antes de pintar nada.
   ========================================================================== */

/* ---- menu lateral del admin (movido desde nav.html) ---- */
/* --- Icono + label en cada item (aplica siempre) --- */
    .admin-nav a { display: inline-flex; align-items: center; gap: 0.55rem; }
    .admin-nav a svg { width: 17px; height: 17px; flex-shrink: 0; }

    /* Separador entre los 16 módulos y los accesos de socia (como el vivo) */
    .admin-nav__sep {
        height: 1px;
        margin: 0.7rem 0.5rem;
        background: var(--rr-glass-border, rgba(255, 255, 255, 0.08));
    }

    /* --- Desktop: sidebar fijo a la izquierda --- */
    @media (min-width: 1024px) {
        .admin-nav {
            position: fixed !important;
            top: 70px;
            left: 0;
            bottom: 0;
            width: 236px;
            flex-direction: column !important;
            flex-wrap: nowrap !important;
            align-items: stretch !important;
            gap: 0.15rem !important;
            padding: 1rem 0.7rem 2rem !important;
            background: var(--rr-bg-medium);
            backdrop-filter: blur(10px);
            border-right: 1px solid var(--rr-glass-border);
            overflow-y: auto;
            z-index: 40;
        }
        /* El "RUSHRIDE ADMIN" del menu se va: el logo ya esta en la barra de
           arriba, a dos centimetros, y repetirlo solo comia alto util del
           sidebar. Queda un respiro para separar del borde superior. */
        .admin-nav { padding-top: 0.9rem; }

        .admin-nav a {
            justify-content: flex-start;
            text-align: left;
            width: 100%;
            padding: 0.6rem 0.75rem !important;
            border: 1px solid transparent !important;
            background: transparent !important;
            color: var(--rr-text-secondary) !important;
            font-size: 0.86rem !important;
            border-radius: var(--rr-radius-md);
        }
        .admin-nav a:hover {
            background: var(--rr-glass-bg-hover) !important;
            color: var(--rr-text-primary) !important;
        }
        .admin-nav a.active {
            background: linear-gradient(135deg, rgba(255,110,60,.18), rgba(255,110,60,.06)) !important;
            border-color: rgba(255,110,60,.35) !important;
            color: var(--rr-primary) !important;
            font-weight: 700 !important;
        }
        .admin-nav a.active svg { color: var(--rr-primary); }

        /* Empuja el contenido a la derecha del sidebar.
           OJO: esto es una LISTA de clases, no una regla general. Toda pantalla
           admin nueva tiene que usar .admin-container o sumarse aca, si no se
           dibuja desde x=0 y queda debajo del menu, que es fixed. Ya paso con
           Reglas Rush (.rr-wrap) y con el footer. */
        .admin-container,
        .notif-container,
        .settings-container,
        .scanner-container,
        .rr-wrap {
            margin-left: 236px !important;
            margin-right: 0 !important;
            max-width: none !important;
            padding: 1.5rem 2rem 6rem !important;
        }
        /* El header de cada pagina (titulo) ya no necesita el layout flex del nav.
           Margen unificado título→subtabs en TODAS las páginas admin.

           El display va SIN !important a proposito. Con el, este martillo
           global le ganaba a cualquier pagina que quisiera su titulo y su
           boton en la misma fila: en Coaches el «Agregar Coach» se caia
           debajo del titulo y pegado a la izquierda de 1024 px para arriba,
           aunque la plantilla pedia flex. Sin !important, la regla de la
           pagina (.admin-container .admin-header, mas especifica) manda, y
           las que no piden nada siguen en bloque como hasta ahora. */
        .admin-header { display: block; margin-bottom: 1.5rem !important; }

        /* El footer vive en base.html y no estaba en la lista de arriba: se
           dibujaba desde x=0 y sus primeros 236 px quedaban TAPADOS por el
           menu lateral, que es fixed. Se acota con :has() a las paginas que de
           verdad tienen sidebar, para no correrlo en el sitio publico ni en
           las pantallas del socio, que comparten este mismo footer. */
        body:has(.admin-nav) .footer { margin-left: 236px; }
    }


/* ---- buscador global (movido desde search.html) ---- */
.global-search {
    position: relative;
    max-width: 400px;
    margin-bottom: 1.5rem;
}

.global-search__input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.global-search__icon {
    position: absolute;
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--rr-text-muted, rgba(255,255,255,0.5));
    pointer-events: none;
}

.global-search__input {
    width: 100%;
    padding: 10px 80px 10px 40px;
    background: var(--rr-glass-bg, rgba(255,255,255,0.05));
    border: 1px solid var(--rr-glass-border, rgba(255,255,255,0.1));
    border-radius: 12px;
    color: var(--rr-text-primary);
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.global-search__input:focus {
    outline: none;
    border-color: var(--rr-primary, #FF6B00);
    background: var(--rr-glass-bg-hover, rgba(255,255,255,0.08));
    box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}

.global-search__input::placeholder {
    color: var(--rr-text-muted, rgba(255,255,255,0.4));
}

.global-search__shortcut {
    position: absolute;
    right: 10px;
    padding: 3px 8px;
    background: var(--rr-glass-bg-hover);
    border-radius: 6px;
    font-size: 0.7rem;
    color: var(--rr-text-muted, rgba(255,255,255,0.5));
    font-family: monospace;
}

.global-search__results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 8px;
    background: var(--rr-surface, #1a1a1a);
    border: 1px solid var(--rr-glass-border);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
}

.global-search__results.active {
    display: block;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.search-result {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--rr-glass-border);
}

.search-result:last-child {
    border-bottom: none;
}

.search-result:hover {
    background: rgba(255, 107, 0, 0.1);
}

.search-result__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-result__icon svg {
    width: 18px;
    height: 18px;
}

.search-result__icon--user {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.search-result__icon--calendar {
    background: rgba(34, 197, 94, 0.2);
    color: var(--rr-accent-green);
}

.search-result__icon--ticket {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.search-result__content {
    flex: 1;
    min-width: 0;
}

.search-result__title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--rr-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result__subtitle {
    font-size: 0.8rem;
    color: var(--rr-text-muted, rgba(255,255,255,0.5));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result__arrow {
    color: var(--rr-text-muted, rgba(255,255,255,0.3));
}

.search-result__arrow svg {
    width: 16px;
    height: 16px;
}

.search-empty {
    padding: 24px;
    text-align: center;
    color: var(--rr-text-muted, rgba(255,255,255,0.5));
}

.search-loading {
    padding: 24px;
    text-align: center;
    color: var(--rr-text-muted, rgba(255,255,255,0.5));
}

.search-loading::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--rr-border);
    border-top-color: var(--rr-primary, #FF6B00);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* ---- campana de notificaciones (movido desde notifications_bell.html) ---- */
.notifications-bell {
    position: relative;
}

.notifications-bell__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--rr-glass-bg);
    border: 1px solid var(--rr-glass-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.notifications-bell__btn:hover {
    background: var(--rr-glass-bg-hover);
    border-color: var(--rr-primary, #FF6B00);
}

.notifications-bell__icon {
    width: 20px;
    height: 20px;
    color: var(--rr-text-primary);
}

.notifications-bell__badge {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--rr-primary, #FF6B00);
    border-radius: 9px;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.notifications-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: var(--rr-bg-medium);
    backdrop-filter: blur(20px);
    border: 1px solid var(--rr-glass-border);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.notifications-dropdown.active {
    display: block;
    animation: dropdownFadeIn 0.2s ease;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.notifications-dropdown__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid var(--rr-glass-border);
}

.notifications-dropdown__header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--rr-text-primary);
    margin: 0;
}

.notifications-dropdown__mark-all {
    background: none;
    border: none;
    color: var(--rr-primary, #FF6B00);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s;
}

.notifications-dropdown__mark-all:hover {
    opacity: 0.8;
}

.notifications-dropdown__list {
    max-height: 400px;
    overflow-y: auto;
}

.notifications-dropdown__loading,
.notifications-dropdown__empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--rr-text-muted);
}

.notifications-dropdown__empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    opacity: 0.3;
}

.notifications-dropdown__empty p {
    margin: 0;
    font-size: 0.9rem;
}

.notifications-dropdown__spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--rr-border);
    border-top-color: var(--rr-primary, #FF6B00);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Notification Item */
.notification-item {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--rr-glass-border);
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background: rgba(255, 107, 0, 0.1);
}

.notification-item--unread {
    background: rgba(255, 107, 0, 0.05);
}

.notification-item--unread::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--rr-primary, #FF6B00);
}

.notification-item {
    position: relative;
}

.notification-item__icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-item__icon svg {
    width: 20px;
    height: 20px;
}

.notification-item__icon--booking_confirmed,
.notification-item__icon--calendar-check {
    background: rgba(34, 197, 94, 0.2);
    color: var(--rr-accent-green);
}

.notification-item__icon--booking_cancelled,
.notification-item__icon--calendar-x {
    background: rgba(239, 68, 68, 0.2);
    color: var(--rr-accent-red);
}

.notification-item__icon--booking_reminder,
.notification-item__icon--bell {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.notification-item__icon--waitlist_available,
.notification-item__icon--users {
    background: rgba(168, 85, 247, 0.2);
    color: #a855f7;
}

.notification-item__icon--subscription_purchased,
.notification-item__icon--credit-card {
    background: rgba(34, 197, 94, 0.2);
    color: var(--rr-accent-green);
}

.notification-item__icon--subscription_expiring,
.notification-item__icon--clock {
    background: rgba(234, 179, 8, 0.2);
    color: var(--rr-accent-yellow);
}

.notification-item__icon--subscription_expired,
.notification-item__icon--alert-triangle {
    background: rgba(239, 68, 68, 0.2);
    color: var(--rr-accent-red);
}

.notification-item__icon--welcome,
.notification-item__icon--heart {
    background: rgba(236, 72, 153, 0.2);
    color: var(--rr-accent-pink);
}

.notification-item__content {
    flex: 1;
    min-width: 0;
}

.notification-item__title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--rr-text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-item__body {
    font-size: 0.8rem;
    color: var(--rr-text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notification-item__time {
    font-size: 0.7rem;
    color: var(--rr-text-muted);
    margin-top: 6px;
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .notifications-dropdown {
        position: fixed;
        top: 60px;
        left: 16px;
        right: 16px;
        width: auto;
    }
}

/* ---- subpestañas del admin (movido desde subtabs.html) ---- */
.admin-subtabs {
    display: flex;
    gap: 0.35rem;
    /* Una sola linea: con flex-wrap:wrap "Reservas del dia" caia a un segundo
       renglon en telefono y se veia partido. Ahora se desplaza si no entra. */
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin: 0 0 1.25rem;
    padding: 0.25rem;
    background: var(--rr-glass-bg);
    border: 1px solid var(--rr-glass-border, rgba(255,255,255,0.08));
    border-radius: 12px;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
}
.admin-subtabs::-webkit-scrollbar { display: none; }
.admin-subtabs__item {
    flex: 0 0 auto;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.95rem;
    border-radius: 9px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--rr-text-secondary, #a1a1aa);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .15s, color .15s;
}
.admin-subtabs__item:hover {
    color: var(--rr-text-primary, #f4f4f5);
    background: var(--rr-glass-bg-hover);
}
.admin-subtabs__item.is-active {
    background: linear-gradient(135deg, rgba(255,110,60,.22), rgba(255,110,60,.08));
    border-color: rgba(255,110,60,.35);
    color: var(--rr-primary, #ff6e3c);
}

/* ==========================================================================
   TEMA CLARO — remiendos que ningun token puede resolver (grupo css-nucleo)
   --------------------------------------------------------------------------
   La cabecera NO se convierte: su fondo es la foto oscura del estudio con
   velos negros encima (imagen, no color), asi que en claro se queda oscura a
   proposito —una franja de foto, como un hero— y sus blancos fijos
   (hamburguesa, carrito, enlaces) siguen siendo legibles sobre ella. Los
   controles de idioma/tema y la campana si usan tokens: en claro se vuelven
   fichas blancas solidas y se leen igual sobre la foto.
   Lo de abajo son los dos casos de imagen/chip que quedaban ilegibles.
   ========================================================================== */

/* El logo del pie (logo-white.png) es blanco: sobre el pie blanco del tema
   claro desaparecia. Invertirlo lo vuelve oscuro; el hue-rotate deshace el
   corrimiento de tono que la inversion le mete a lo que no es gris. */
html[data-tema="claro"] .footer__logo {
    filter: invert(1) hue-rotate(180deg);
}

/* Chips de redes del pie: la superficie clara del token quedaba blanco
   sobre blanco; un gris suave devuelve el circulo. */
html[data-tema="claro"] .footer__social a {
    background-color: #E5E7EB;
}
html[data-tema="claro"] .footer__social a:hover {
    background-color: var(--color-primary);
}

/* Enlaces de contacto del pie: el naranja de marca (#FF6B00) da 2.86 de
   contraste sobre el pie blanco — bajo la vara de 3.0. El token
   --rr-primary-light en claro es el naranja oscurecido (#EA580C, 3.56). */
html[data-tema="claro"] .footer__contact a {
    color: var(--rr-primary-light);
}

/* Mismo caso en todo texto naranja-de-marca sobre superficie blanca: el
   item activo del menu lateral, el activo de las subpestanas admin, el
   "Marcar todas leidas" de la campana y los dos enlaces destacados del menu
   movil. Los !important igualan a los que ya traen esas reglas base. */
html[data-tema="claro"] .admin-nav a.active {
    color: var(--rr-primary-light) !important;
}
html[data-tema="claro"] .admin-subtabs__item.is-active {
    color: var(--rr-primary-light);
}
html[data-tema="claro"] .notifications-dropdown__mark-all {
    color: var(--rr-primary-light);
}
html[data-tema="claro"] .mobile-nav__cta,
html[data-tema="claro"] .mobile-nav__admin {
    color: var(--rr-primary-light) !important;
}