/*
 * Link3rs Backstage - Design System v3
 * Dark theme with glassmorphism inspired by Apple/Notion
 */

/* ============================================
   ROOT VARIABLES
   ============================================ */

:root {
    /* Background colors */
    --bg-primary: #050505;
    --bg-panel: rgba(12, 12, 12, 0.85);
    --bg-panel-solid: #0c0c0c;
    --bg-sidebar: #000000;

    /* Gray scale */
    --gray-950: #0a0a0a;
    --gray-900: #111111;
    --gray-800: #1a1a1a;
    --gray-700: #2a2a2a;
    --gray-600: #3a3a3a;
    --gray-500: #555555;
    --gray-400: #777777;
    --gray-300: #999999;
    --gray-200: #bbbbbb;
    --gray-100: #dddddd;
    --white: #ffffff;

    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.15);
    --border-active: rgba(255, 255, 255, 0.2);

    /* Frosted glass (Hector's reference): absolutely NO border. A bright TOP + LEFT edge highlight,
       a soft inner frost glow, and a drop shadow do all the work — all baked into one box-shadow so it
       applies anywhere and follows the border-radius. Dark, slightly-transparent base keeps light text
       readable while the backdrop blur lets the background through like real glass. */
    --glass-bg: rgba(22, 24, 30, 0.55);
    --glass-blur: blur(16px) saturate(155%);
    --glass-highlight: rgba(255, 255, 255, 0.24);
    --glass-ring: transparent;   /* kept for back-compat; no ring/border anywhere */
    --glass-shadow:
        0 10px 34px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        inset 0 -1px 0 rgba(255, 255, 255, 0.05),
        inset 0 0 32px 2px rgba(255, 255, 255, 0.05);

    /* Functional colors */
    --success: #22c55e;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;
    --streaming: #3b82f6;
    
    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'SF Mono', 'Menlo', 'Monaco', 'Consolas', monospace;
    
    /* Sizing */
    --sidebar-width: 240px;
    --header-height: 64px;
    --border-radius: 12px;
    --border-radius-lg: 24px;
    --border-radius-sm: 8px;
    
    /* Transitions */
    --transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
    --transition-fast: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ============================================
   RESET & BASE
   ============================================ */

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    background: var(--bg-primary);
    color: var(--gray-300);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
}

/* ============================================
   LIGHT RAYS BACKGROUND
   ============================================ */

.rays-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.ray {
    position: absolute;
    top: -20%;
    transform-origin: top center;
    background: linear-gradient(
        to bottom,
        rgba(220, 220, 220, 0.4) 0%,
        rgba(200, 200, 200, 0.25) 20%,
        rgba(180, 180, 180, 0.15) 40%,
        rgba(150, 150, 150, 0.08) 60%,
        rgba(120, 120, 120, 0.02) 80%,
        transparent 100%
    );
    filter: blur(8px);
    pointer-events: none;
}

.ray-1 { left: 70%; width: 120px; height: 140%; transform: rotate(-25deg); animation: sway1 8s ease-in-out infinite, pulse1 6s ease-in-out infinite; opacity: 0.9; }
.ray-2 { left: 73%; width: 180px; height: 150%; transform: rotate(-15deg); animation: sway2 10s ease-in-out infinite, pulse2 7s ease-in-out infinite; opacity: 0.85; }
.ray-3 { left: 76%; width: 100px; height: 130%; transform: rotate(-5deg); animation: sway3 9s ease-in-out infinite, pulse3 8s ease-in-out infinite; opacity: 0.8; }
.ray-4 { left: 74%; width: 200px; height: 145%; transform: rotate(5deg); animation: sway4 11s ease-in-out infinite, pulse4 9s ease-in-out infinite; opacity: 0.9; }
.ray-5 { left: 72%; width: 90px; height: 125%; transform: rotate(15deg); animation: sway5 7s ease-in-out infinite, pulse5 6.5s ease-in-out infinite; opacity: 0.75; }
.ray-6 { left: 78%; width: 150px; height: 155%; transform: rotate(25deg); animation: sway6 12s ease-in-out infinite, pulse6 8.5s ease-in-out infinite; opacity: 0.85; }

.ray-bg-1 { left: 65%; width: 300px; height: 160%; transform: rotate(-20deg); animation: swayBg1 14s ease-in-out infinite; opacity: 0.4; filter: blur(25px); background: linear-gradient(to bottom, rgba(200, 200, 200, 0.2) 0%, rgba(180, 180, 180, 0.12) 30%, rgba(150, 150, 150, 0.05) 60%, transparent 100%); }
.ray-bg-2 { left: 72%; width: 350px; height: 165%; transform: rotate(10deg); animation: swayBg2 16s ease-in-out infinite; opacity: 0.35; filter: blur(30px); background: linear-gradient(to bottom, rgba(200, 200, 200, 0.18) 0%, rgba(180, 180, 180, 0.1) 30%, rgba(150, 150, 150, 0.04) 60%, transparent 100%); }

@keyframes sway1 { 0%, 100% { transform: rotate(-25deg) translateX(0); } 50% { transform: rotate(-23deg) translateX(10px); } }
@keyframes sway2 { 0%, 100% { transform: rotate(-15deg) translateX(0); } 50% { transform: rotate(-12deg) translateX(-15px); } }
@keyframes sway3 { 0%, 100% { transform: rotate(-5deg) translateX(0); } 50% { transform: rotate(-3deg) translateX(8px); } }
@keyframes sway4 { 0%, 100% { transform: rotate(5deg) translateX(0); } 50% { transform: rotate(8deg) translateX(-12px); } }
@keyframes sway5 { 0%, 100% { transform: rotate(15deg) translateX(0); } 50% { transform: rotate(18deg) translateX(10px); } }
@keyframes sway6 { 0%, 100% { transform: rotate(25deg) translateX(0); } 50% { transform: rotate(22deg) translateX(-8px); } }
@keyframes swayBg1 { 0%, 100% { transform: rotate(-20deg) translateX(0); } 50% { transform: rotate(-17deg) translateX(20px); } }
@keyframes swayBg2 { 0%, 100% { transform: rotate(10deg) translateX(0); } 50% { transform: rotate(13deg) translateX(-25px); } }
@keyframes pulse1 { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.7; } }
@keyframes pulse2 { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.65; } }
@keyframes pulse3 { 0%, 100% { opacity: 0.8; } 50% { opacity: 0.6; } }
@keyframes pulse4 { 0%, 100% { opacity: 0.9; } 50% { opacity: 0.75; } }
@keyframes pulse5 { 0%, 100% { opacity: 0.75; } 50% { opacity: 0.55; } }
@keyframes pulse6 { 0%, 100% { opacity: 0.85; } 50% { opacity: 0.7; } }

.light-source {
    position: fixed;
    top: -15%;
    left: 75%;
    transform: translateX(-50%);
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse at center, rgba(230, 230, 230, 0.25) 0%, rgba(200, 200, 200, 0.15) 30%, rgba(180, 180, 180, 0.08) 50%, rgba(150, 150, 150, 0.03) 70%, transparent 100%);
    filter: blur(40px);
    pointer-events: none;
    animation: glowPulse 10s ease-in-out infinite;
    z-index: 0;
}

@keyframes glowPulse { 0%, 100% { opacity: 1; transform: translateX(-50%) scale(1); } 50% { opacity: 0.85; transform: translateX(-50%) scale(1.05); } }

.atmosphere {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(ellipse 100% 80% at 75% 0%, rgba(200, 200, 200, 0.06) 0%, transparent 60%);
    z-index: 0;
}

.vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(5, 5, 5, 0.5) 100%);
    z-index: 0;
}

/* ============================================
   LAYOUT
   ============================================ */

.app-layout {
    display: flex;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* ============================================
   SIDEBAR
   ============================================ */

/* ══════════════════════════════════════════════════════════════════════════
   NL-1 · EL CAMBIO DE PÁGINA NO PUEDE PASAR POR NEGRO
   ══════════════════════════════════════════════════════════════════════════
   Aquí no hay SPA: cada entrada del menú es una navegación de verdad. El
   navegador destruye la página, pinta el fondo oscuro del documento nuevo y
   deja ese hueco hasta que hay contenido. Eso es el «fundido a negro y luego
   se recarga»: no había NINGUNA transición de página en todo el producto.

   Con esto el navegador mantiene el fotograma de la página vieja hasta que la
   nueva puede pintar, y funde una con otra. Cuesta cero JavaScript.

   ⚠ ESTO SÓLO ES BUENA IDEA PORQUE EL MENÚ SE PINTA SÍNCRONO DESDE LA CACHÉ.
     `Sidebar.render` corre DESPUÉS de `await Auth.requireAuth()` —una ida y
     vuelta a la red—, así que sin el arranque instantáneo el primer fotograma
     del documento nuevo no tiene menú: la transición fotografiaría el hueco y
     se vería el menú DESVANECERSE, que es peor que lo que se viene a quitar.

   ⚠ Y por eso el menú va con nombre propio: sin él entra en la foto de la
     página entera y se funde con ella. Con nombre, el navegador lo trata como
     el MISMO elemento a los dos lados y se queda quieto mientras el contenido
     cambia — que es como se lee «he cambiado de sección», y no «he recargado».

   En un navegador que no lo soporte no pasa nada: se ignora y queda como
   estaba. */
@view-transition { navigation: auto; }

.sidebar { view-transition-name: menu-lateral; }
/* La cabecera tampoco parpadea: es la misma en todas las páginas. */
.sidebar-header { view-transition-name: menu-cabecera; }

/* Quien pide menos movimiento se queda sin el fundido, no sin la navegación.
   ⚠ Va con `animation-duration` y no con `@view-transition { navigation: none }`
     a propósito: la segunda forma es más nueva y donde no se entienda se
     ignora en silencio, dejando el movimiento puesto justo a quien pidió que
     no lo hubiera. */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation-duration: .01ms !important; }
}

.sidebar {
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 100;
}

.sidebar-header {
    padding: 26px 16px 10px;
    flex-shrink: 0;
}

.sidebar-logo {
    display: block;
    height: 72px;
}

.sidebar-logo img {
    height: 100%;
    width: auto;
    object-fit: contain;
}
.sidebar-logo .logo-light {
    display: none;
}
[data-theme="light"] .sidebar-logo .logo-dark {
    display: none;
}
[data-theme="light"] .sidebar-logo .logo-light {
    display: block;
    height: 100%;
    width: auto;
    object-fit: contain;
}

.sidebar-nav {
    flex: 1;
    min-height: 0;
    padding: 22px 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    /* ⚠ ESTO ARREGLA EL ENCOGIMIENTO DEL MENÚ, y la causa no estaba en el
       submenú. Los `.nav-item` son `width:100%` de ESTA caja; al abrirse el
       submenú la lista crece, aparece la barra de desplazamiento, y el 100%
       pasa a valer 4px menos: el menú entero se estrecha de golpe. Reservando
       el carril SIEMPRE, el ancho no depende de cuánto haya dentro.
       Se reserva 4px —lo que mide la barra de aquí abajo—, así que no se ve. */
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

[data-theme="light"] .sidebar-nav {
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

[data-theme="light"] .sidebar-nav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
}

/* ── SUBMENÚ del menú lateral ─────────────────────────────────────────────
   Sólo se pinta cuando su sección está abierta (lo decide sidebar.js). Va
   sangrado a la derecha para que se lea como lo que es: algo que cuelga del
   item de arriba y no una opción más del mismo nivel.

   ⚠ Sin sangrar, un submenú de dos elementos se confunde con dos secciones
     nuevas, y el menú pasa a tener doce cosas donde diez no vienen a cuento. */
/* El GRUPO: la sección abierta y sus hijos se leen como UNA cosa. Sin este
   fondo, Agenda y Archive parecían dos opciones sueltas y no «esto también es
   Events». */
.nav-group.abierto {
    background: var(--bg-hover, rgba(255,255,255,.04));
    /* ⚠ SIN MARGEN A LOS LADOS, Y ÉSTE ERA EL ENCOGIMIENTO DEL ANCHO.
       MEDIDO: con `margin: 2px 8px 4px` la fila de Events pasaba de 193px a
       177px al abrirse la sección, y se corría 8px a la derecha — porque los
       `.nav-item` son `width:100%` de ESTA caja, y la caja se metía 8px por
       cada lado. Al seleccionar Events el renglón se estrechaba delante de ti
       sin que nada explicara por qué.
       El fondo del grupo ocupa ahora lo mismo que ocupa un item cualquiera,
       que es lo que hace que el menú no se mueva. */
    border-radius: 12px; margin: 2px 0 4px; padding: 2px 0 4px;
}
.nav-group.abierto > .nav-cab > .nav-item { margin-left: 0; margin-right: 0; }
/* ⚠ El padre, estando en un hijo, es la CABECERA del grupo — no el elemento
   seleccionado. Con el mismo realce que el hijo no se distingue en cuál estás. */
.nav-group.abierto > .nav-cab > .nav-item.en-grupo { background: transparent; }
.nav-group.abierto > .nav-cab > .nav-item.en-grupo:hover { background: var(--bg-hover, rgba(255,255,255,.06)); }

/* ⚠ EL HUECO DE ARRIBA VA EN EL PRIMER HIJO, y no en esta caja. MEDIDO, y en
   dos pasos: con `margin-top: 2px` aquí el submenú cerrado medía 2px —el
   margen de la fila queda FUERA de lo que recorta la rejilla—, y pasarlo a
   `padding-top` NO lo arregló: con la fila a `0fr` el relleno del propio
   elemento también suma. La sección cerrada quedaba 2px más alta que
   cualquier otra del menú (43 contra 41). En el hijo sí se recorta: 0. */
.nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 0;
    /* el raíl: dice de dónde cuelgan estos dos */
    border-left: 1.5px solid var(--border-subtle); margin-left: 26px; padding-left: 4px; }
/* ⚠ MISMO TAMAÑO QUE UNA SECCIÓN DE ARRIBA: letra, icono, hueco y alto.
   Lo pidió Hector el 2026-09-03 — «desplazados a la derecha sí, pero igual en
   tamaño». Un submenú más pequeño dice «esto es de segunda», y Agenda y
   Archive son sitios tan de primera como Streaming; lo único que los hace
   hijos es DÓNDE están, no cómo de grandes son. La jerarquía la lleva entera
   la sangría y el raíl de la izquierda. */
.nav-subitem {
    display: flex; align-items: center; gap: 12px;   /* = .nav-item */
    padding: 10px 12px;                              /* = .nav-item */
    margin: 0 6px; border-radius: 8px;
    font-size: 14px; font-weight: 500;               /* = .nav-item */
    color: var(--text-secondary); text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.nav-sub > .nav-subitem:first-child { margin-top: 2px; }
.nav-subitem svg { width: 20px; height: 20px; flex: none; opacity: .85; }
.nav-subitem:hover { background: var(--bg-hover, rgba(255,255,255,.06)); color: var(--text-primary); }
.nav-subitem.active { background: var(--bg-active, rgba(255,255,255,.10)); color: var(--text-primary); }
.nav-subitem.active svg { opacity: 1; }

/* ── LA CABECERA DEL GRUPO · el enlace y la flecha en la misma línea ───────
   ⚠ La flecha es HERMANA del enlace, no hija. Un `<button>` dentro de un `<a>`
     es HTML inválido —contenido interactivo anidado— y el navegador lo
     reordena: acabas con el botón FUERA del enlace y la flecha suelta debajo
     del menú. Por eso hay `.nav-cab` y no un span dentro del `<a>`. */
.nav-cab { display: flex; align-items: center; }
/* `.nav-item` es `width:100%`; dentro de la cabecera manda el flex. */
.nav-cab > .nav-item { flex: 1 1 auto; width: auto; min-width: 0; }

.nav-chevron {
    flex: none;
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; margin-right: 4px;
    padding: 0; border: none; background: none; cursor: pointer;
    color: var(--gray-400); opacity: .55;
    border-radius: 7px;
    transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.nav-chevron:hover { opacity: 1; background: rgba(255,255,255,.08); color: var(--gray-200); }
[data-theme="light"] .nav-chevron:hover { background: rgba(0,0,0,.06); }
.nav-chevron:focus-visible { outline: 2px solid var(--brand, #6ea8fe); outline-offset: 1px; opacity: 1; }
.nav-chevron svg { width: 14px; height: 14px; }
/* NL-4 · abajo cerrado, arriba abierto. Es la única pista de que hay más. */
.nav-chevron svg { transition: transform .28s cubic-bezier(.4, 0, .2, 1); }
.nav-group.abierto > .nav-cab > .nav-chevron svg { transform: rotate(180deg); }
/* Con la sección abierta la flecha ya no tiene que llamar la atención. */
.nav-group.abierto > .nav-cab > .nav-chevron { opacity: .75; }

/* ── NL-2 · EL SUBMENÚ SE DESLIZA ─────────────────────────────────────────
   Se anima `grid-template-rows` de 0fr a 1fr y NO `max-height`: con altura
   máxima hay que inventarse un número mayor que el contenido, y ese número
   decide la velocidad real —si sobra, la primera mitad de la animación es
   tiempo muerto y el submenú «tarda en arrancar»—; además se rompe el día que
   alguien añade un tercer hijo. Con `0fr → 1fr` el navegador interpola la
   altura REAL del contenido, sea cual sea.

   ⚠ Las dos declaraciones de la fila de dentro son OBLIGATORIAS: sin
     `min-height: 0` la fila de la rejilla no baja del alto de su contenido
     —queda clavada en 1fr y no se cierra nunca— y sin `overflow: hidden` los
     hijos se salen y se ven flotando sobre el menú mientras se cierra. */
.nav-sub-wrap {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1),
                opacity .18s ease,
                visibility 0s linear .28s;
    visibility: hidden;
}
.nav-sub-wrap > .nav-sub { min-height: 0; overflow: hidden; }
.nav-group.abierto > .nav-sub-wrap {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
    transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1),
                opacity .22s ease .06s,
                visibility 0s linear 0s;
}
/* ⚠ `visibility` NO es decoración: sin ella el submenú cerrado sigue en el
   orden de tabulación y el teclado entra en dos enlaces que no se ven. */

/* Quien no quiere movimiento no lo tiene. El submenú sigue abriendo y
   cerrando; lo que se va es el recorrido. */
@media (prefers-reduced-motion: reduce) {
    .nav-sub-wrap, .nav-group.abierto > .nav-sub-wrap { transition-duration: 0s; }
    .nav-chevron svg { transition-duration: 0s; }
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--gray-400);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    flex-shrink: 0;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--gray-200);
}

.nav-item.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
}

.nav-item svg {
    width: 20px;
    height: 20px;
    opacity: 0.7;
}

.nav-divider {
    height: 1px;
    background: var(--border-subtle);
    margin: 8px 12px;
    flex-shrink: 0;
}

.sidebar-footer {
    padding: 16px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
/* Footer profile is now a link into /account. */
a.user-info-link { padding: 8px; margin: -8px; border-radius: 12px; transition: background .15s; }
a.user-info-link:hover { background: rgba(255,255,255,.05); }
a.user-info-link .user-avatar { overflow: hidden; }

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
}

.user-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
}

.user-email {
    font-size: 12px;
    color: var(--gray-500);
}

/* Organization info in sidebar footer */
.org-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.org-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gray-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--white);
    flex-shrink: 0;
    overflow: hidden;
}
.org-name {
    font-size: 10px;
    font-weight: 500;
    color: var(--gray-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
}
/* Sidebar org name: scoped by id so it isn't overridden by the duplicate bare
   `.org-name` (18px) further down that styles the org cards on the orgs page.
   Sized + weighted like the user's own name, vertically centred with its avatar. */
#sidebar-org-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--white);
    line-height: 1.2;
}
/* Your role in the org, sized/coloured like the user's email line beneath it. */
.org-role {
    font-size: 12px;
    color: var(--gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    line-height: 1.2;
}
/* Org block is now a link to /organization — mirror the user-info-link hover box. */
a.org-info-link { padding: 8px; margin: -8px -8px 6px; border-radius: 12px; transition: background .15s; }
a.org-info-link:hover { background: rgba(255,255,255,.05); }
a.org-info-link .org-avatar { overflow: hidden; }
.footer-divider {
    display: none;
}

/* ============================================
   MAIN CONTENT
   ============================================ */

.main-content {
    flex: 1;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    position: relative;
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 32px 16px 32px;
    border: none;
    background: transparent;
    backdrop-filter: none;
}

.page-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: -0.02em;
}

.page-subtitle {
    font-size: 13px;
    color: var(--gray-500);
    margin-top: 4px;
    margin-bottom: 8px;
}

.page-content {
    padding: 8px 32px 32px 32px;
}

/* ============================================
   CARDS / PANELS
   ============================================ */

.card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: none;
    border-radius: var(--border-radius-lg);
    padding: 24px;
    position: relative;
    box-shadow: var(--glass-shadow);
}

/* Bright glass top edge only — a highlight line faded at the ends, inset from the corners so it never
   pokes the rounded corner. No border, and NO left edge line (it read as a weird vertical bar on tall cards). */
.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 12px;
    right: 12px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: -0.01em;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition);
    border: none;
    text-decoration: none;
    font-family: inherit;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: var(--white);
    color: var(--gray-950);
}

.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--gray-300);
    border: 1px solid var(--border-subtle);
}

.btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--border-hover);
    transform: translateY(-2px);
}

.btn-ghost {
    background: transparent;
    color: var(--gray-400);
    padding: 8px 12px;
}

.btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.06);
    color: var(--gray-200);
}

.btn-danger {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.btn-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.25);
}

.btn-sm {
    padding: 8px 14px;
    font-size: 13px;
}

.btn-lg {
    padding: 16px 32px;
    font-size: 16px;
}

.btn-icon {
    padding: 10px;
    width: 40px;
    height: 40px;
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

.form-group {
    margin-bottom: 20px;
}

.form-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 14px 16px;
    font-size: 14px;
    font-family: inherit;
    color: var(--white);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: var(--gray-600);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-active);
}

.form-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.form-select option {
    background: var(--gray-900);
    color: var(--white);
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--gray-300);
}

.form-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--white);
    cursor: pointer;
}

/* ============================================
   TABS
   ============================================ */

.tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--glass-bg);
    border: none;
    border-radius: var(--border-radius-sm);
    margin-bottom: 24px;
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: inset 0 1px 0 var(--glass-highlight), 0 6px 20px rgba(0, 0, 0, 0.3);
}

.tab {
    flex: 1;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gray-400);
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition-fast);
}

.tab:hover {
    color: var(--gray-200);
    background: rgba(255, 255, 255, 0.04);
}

.tab.active {
    background: rgba(255, 255, 255, 0.14);
    color: var(--white);
    font-weight: 600;
}

[data-theme="light"] .tabs {
    background: rgba(245, 245, 248, 0.85);
    border: none;
}
[data-theme="light"] .tab { color: #555; }
[data-theme="light"] .tab:hover { color: #111; background: rgba(0, 0, 0, 0.04); }
[data-theme="light"] .tab.active { background: #ffffff; color: #111; box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeUp 0.3s ease;
}

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

/* ============================================
   EVENT GRID
   ============================================ */

.events-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.event-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: none;
    border-radius: var(--border-radius);
    padding: 20px;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
    box-shadow: var(--glass-shadow);
}

.event-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--glass-shadow), 0 16px 48px rgba(0, 0, 0, 0.4);
}

.event-code {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--gray-500);
    background: rgba(255, 255, 255, 0.06);
    padding: 4px 8px;
    border-radius: 4px;
    font-family: var(--font-mono);
}

.event-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    margin: 12px 0 8px;
    letter-spacing: -0.02em;
}

.event-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: var(--gray-500);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

.status-dot.active {
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}

.status-dot.inactive {
    background: var(--gray-600);
}

/* ============================================
   CHANNELS
   ============================================ */

.channels-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.channel-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-sm);
    padding: 16px;
    transition: var(--transition-fast);
}

.channel-card:hover {
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.06);
}

.channel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* S3: the channel trash button turns red on hover */
.channel-delete { transition: color .12s, background .12s, transform .12s; }
.channel-delete:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.12);
    transform: scale(1.06);
}

/* ── G2: Knowledge tab — grouped Context / Terms with higher contrast ── */
.knowledge-group {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 16px 16px 18px;
    background: rgba(255, 255, 255, 0.045);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.knowledge-group-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--gray-400);
    margin-bottom: 14px;
}
.trans-terms-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
    margin-bottom: 8px;
    padding-right: 2px;
}
.trans-term-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    transition: background .12s, border-color .12s;
}
.trans-term-row:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--border-hover); }
.trans-term-row .tt-src { color: var(--white); font-size: 0.85rem; flex: 1; font-weight: 600; word-break: break-word; }
.trans-term-row .tt-arrow { color: var(--gray-400); font-size: 0.8rem; flex: 0 0 auto; }
.trans-term-row .tt-tgt { color: #60a5fa; font-size: 0.85rem; flex: 1; font-weight: 500; word-break: break-word; }
.trans-term-row .tt-del {
    background: none; border: none; color: var(--gray-500); cursor: pointer;
    font-size: 16px; line-height: 1; padding: 0 4px; flex: 0 0 auto; transition: color .12s;
}
.trans-term-row .tt-del:hover { color: #ef4444; }
.trans-term-add {
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--border-subtle);
}
[data-theme="light"] .knowledge-group { background: rgba(0, 0, 0, 0.02); }
[data-theme="light"] .trans-term-row { background: rgba(0, 0, 0, 0.03); }
[data-theme="light"] .trans-term-row .tt-tgt { color: #2563eb; }

.channel-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 500;
    color: var(--white);
}

.channel-flag {
    font-size: 20px;
    line-height: 1;
}

.channel-badge {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-950);
    background: var(--white);
    padding: 3px 8px;
    border-radius: 4px;
}

.channel-info {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 12px;
}

.channel-actions {
    display: flex;
    gap: 8px;
}

/* ============================================
   TERMINAL
   ============================================ */

.terminal {
    background: var(--gray-950);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    overflow: hidden;
}

.terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid var(--border-subtle);
}

.terminal-title {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-400);
}

.terminal-body {
    padding: 16px;
    max-height: 400px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.6;
}

.log-line {
    display: flex;
    gap: 12px;
    margin-bottom: 4px;
}

.log-time {
    color: var(--gray-600);
    min-width: 70px;
}

.log-level {
    font-weight: 500;
    min-width: 50px;
}

.log-level.info { color: var(--info); }
.log-level.success { color: var(--success); }
.log-level.warning { color: var(--warning); }
.log-level.error { color: var(--error); }

.log-message {
    color: var(--gray-300);
    flex: 1;
}

/* ============================================
   MODAL
   ============================================ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 24px;
}

.modal-overlay.hidden {
    display: none;
}

.modal {
    background: var(--bg-panel);
    backdrop-filter: blur(40px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-lg);
    width: 100%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.modal::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.12) 20%, rgba(255, 255, 255, 0.12) 80%, transparent 100%);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-subtle);
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
}

.modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--gray-500);
    font-size: 18px;
    cursor: pointer;
    border-radius: 6px;
    transition: var(--transition-fast);
}

.modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border-subtle);
}

/* ============================================
   SHARE
   ============================================ */

.share-link {
    display: flex;
    gap: 8px;
}

.share-link input {
    flex: 1;
    font-family: var(--font-mono);
    font-size: 13px;
}

.qr-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    background: var(--white);
    border-radius: var(--border-radius);
    width: fit-content;
}

.qr-container canvas {
    border-radius: 8px;
}

/* ============================================
   STATS
   ============================================ */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.stat-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    padding: 20px;
    text-align: center;
}

.stat-label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
    margin-bottom: 8px;
}

.stat-value {
    font-size: 28px;
    font-weight: 600;
    color: var(--white);
    letter-spacing: -0.02em;
}

/* ============================================
   DANGER ZONE
   ============================================ */

.danger-zone {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: var(--border-radius);
    padding: 20px;
    margin-top: 24px;
}

.danger-zone-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--error);
    margin-bottom: 8px;
}

.danger-zone-text {
    font-size: 13px;
    color: var(--gray-400);
    margin-bottom: 16px;
}

/* ============================================
   SPEAKER PAGE
   ============================================ */

.speaker-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--gray-950);
}

.speaker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    border-bottom: 1px solid var(--border-subtle);
}

.speaker-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--white);
}

.speaker-content {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 24px;
    padding: 32px;
}

.speaker-main {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.speaker-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Waveform */
.waveform-container {
    background: var(--gray-900);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    padding: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
}

.waveform-canvas {
    width: 100%;
    height: 200px;
    background: transparent;
}

.waveform-status {
    margin-top: 16px;
    font-size: 14px;
    color: var(--gray-500);
}

.waveform-status.active {
    color: var(--success);
}

/* Device selector */
.device-selector {
    background: var(--gray-900);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    padding: 20px;
}

.device-selector h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 16px;
}

/* ============================================
   AUTH PAGES
   ============================================ */

.auth-layout {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    z-index: 1;
}

.auth-card {
    width: 100%;
    max-width: 400px;
}

.auth-header {
    text-align: center;
    margin-bottom: 32px;
}

.auth-header img {
    height: 32px;
    margin-bottom: 24px;
}

.auth-header h1 {
    font-size: 24px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px;
}

.auth-header p {
    font-size: 14px;
    color: var(--gray-500);
}

.auth-footer {
    text-align: center;
    margin-top: 24px;
    font-size: 14px;
    color: var(--gray-500);
}

.auth-footer a {
    color: var(--white);
    text-decoration: none;
}

.auth-footer a:hover {
    text-decoration: underline;
}

/* ============================================================================
   LANYARD CREDENTIAL AUTH — login / signup / join live inside the REAL badge
   PNG (static/img/badge-rope.png). The BADGE is centred and the rope runs off
   the top of the screen (hangs from above). One adaptive Backstage badge (login
   ⇄ signup in place, animated tech-gradient that CYCLES one colour) + an org
   invite badge (waves in the org's colour). Forward swap = rise (no fade); back
   = fade. Dark-only (light theme is platform-side).
   ============================================================================ */
.auth-stage{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:12px; perspective:1800px; z-index:1; overflow:hidden; }
.lanyard{ position:relative; transform:translateY(-14%); }   /* badge centred, rope pushed off the top */
/* ⚠ EL TAMAÑO ES UNO SOLO PARA TODAS LAS PANTALLAS (login, signup, join). Que
   la acreditación cambie de tamaño al pasar de una a otra se nota como un
   salto y parece un fallo, así que este valor NO se ajusta por pantalla.

   Subido de 760 a 880 el 2026-09-03: a 1180x820 la pila medía 760 y sobraban
   136px por debajo sin usar. La ventana interior (.badge-content) va en
   PORCENTAJES de la pila, así que crece con ella y sigue cuadrando con el
   marco dibujado del PNG — no hay dos números que mantener a la vez.

   Y el `96vh` pasa a `112vh` por la misma medición: la pila se centra y luego
   `.lanyard` la sube un 14%, así que el borde de abajo cae en
   `50vh + 0.36·H` — con 96vh sobraban 127px muertos por debajo. Con 112vh el
   tope de 880 es el que ata en un escritorio normal, y en pantallas bajas
   sigue mandando el viewport y la acreditación se encoge sola. */
.badge-stack{ position:relative; width:min(880px, 112vh); height:min(880px, 112vh); transform-style:preserve-3d; }

.auth-badge{ position:absolute; inset:0; transform-origin:top center; backface-visibility:hidden;
  transition: transform .66s cubic-bezier(.5,.02,.23,1), opacity .5s ease; }
.auth-badge.is-active{ transform:none; opacity:1; z-index:3; }
/* forward exit: rise up & off, NO fade (the physical rise is the effect) */
.auth-badge.is-up{ transform:translateY(-124%) rotateX(30deg) scale(.94); opacity:1; z-index:1; }
/* back exit / waiting: fade */
.auth-badge.is-down{ transform:translateY(12%) rotateX(-10deg) scale(.95); opacity:0; z-index:0; }
@media (prefers-reduced-motion: reduce){ .auth-badge{ transition:opacity .35s ease; } .auth-badge.is-up,.auth-badge.is-down{ transform:none; } }

.badge-frame{ position:absolute; inset:0; width:100%; height:100%; z-index:2; pointer-events:none; filter: drop-shadow(0 30px 46px rgba(0,0,0,.55)); }
.badge-content{ position:absolute; left:30.4%; top:34.5%; width:39.1%; height:57.2%; z-index:1;
  border-radius:22px; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:22px 20px 20px; }

.aw-bg{ position:absolute; inset:0; z-index:0; }
/* BOTH the org-invite badge AND the Backstage badge use bottom-half DIAGONAL diffuse
   waves — colour fills ~to the middle (peak far-right, rising left→right), heavily
   blurred so it fades to black up top with NO hard line; two moving layers.
   Org = the org's colour (fixed); Backstage = a colour that CYCLES the spectrum. */
.aw-bg-waves, .aw-bg-tech{ background:#0a0c11; overflow:hidden; }
.aw-bg-waves::before, .aw-bg-waves::after, .aw-bg-tech::before, .aw-bg-tech::after{ content:''; position:absolute; inset:-15%; will-change:transform; }
.aw-bg-waves::before, .aw-bg-tech::before{ background: radial-gradient(105% 96% at 100% 108%, var(--org-color,#4f8cff) 0%, transparent 68%);
  filter: blur(26px); opacity:1; animation: awWaveA 11s ease-in-out infinite; }
.aw-bg-waves::after, .aw-bg-tech::after{ background: radial-gradient(98% 88% at 50% 118%, var(--org-color,#4f8cff) 0%, transparent 74%);
  filter: blur(36px); opacity:.62; animation: awWaveB 15s ease-in-out infinite; }
.aw-bg-tech{ --org-color:#2b7cff; animation: awHue 16s linear infinite; }   /* Backstage: cycle the wave colour */
@keyframes awHue{ to{ filter: hue-rotate(360deg); } }
@keyframes awWaveA{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(-3%,-4%) scale(1.08);} }
@keyframes awWaveB{ 0%,100%{ transform:translate(0,0) scale(1.05);} 50%{ transform:translate(4%,-3%) scale(1.13);} }
@media (prefers-reduced-motion: reduce){ .aw-bg-tech,.aw-bg-waves::before,.aw-bg-waves::after,.aw-bg-tech::before,.aw-bg-tech::after{ animation:none; } }
.aw-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(9,10,14,.7) 0%, rgba(9,10,14,.16) 26%, rgba(9,10,14,.12) 60%, rgba(9,10,14,.6) 100%); }
.aw-body{ position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; height:100%; transform-origin:center center; }
.aw-body.top{ justify-content:flex-start; }

/* ⚠ ESTOS TAMAÑOS SUBIERON CON LA ACREDITACIÓN (2026-09-03). La pila pasó de
   760 a 880 y la ventana interior de 435 a 503px de alto; con la tipografía
   vieja el contenido quedaba flotando en el centro de una tarjeta grande y
   medio vacía. Suben JUNTOS a propósito: son el mismo ajuste, y tocar uno sin
   el otro devuelve el problema por el otro lado. */
.aw-head{ text-align:center; }
.aw-logo{ height:84px; width:auto; margin:0 auto 30px; display:block; }
.aw-crow{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:2px; }
.aw-c2{ font-size:25px; font-weight:650; letter-spacing:-.02em; color:#fff; }
.aw-org{ display:inline-flex; align-items:center; gap:7px; padding:5px 11px 5px 6px; border-radius:999px;
  background:rgba(255,255,255,.13); box-shadow:inset 0 0 0 1px rgba(255,255,255,.16); font-size:11.5px; color:#fff; font-weight:500; }
.aw-org .aw-org-logo{ width:20px; height:20px; border-radius:50%; object-fit:cover; background:rgba(0,0,0,.35); display:grid; place-items:center; font-size:10px; font-weight:700; color:#fff; overflow:hidden; flex:none; }
.aw-org .aw-org-logo img{ width:100%; height:100%; object-fit:cover; }
.aw-org b{ color:#fff; font-weight:650; }
.aw-form{ margin-top:18px; display:flex; flex-direction:column; gap:12px; }
.aw-field{ text-align:left; }
.aw-label{ display:block; font-size:10.5px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:rgba(255,255,255,.6); margin:0 0 5px; }
.aw-input{ width:100%; padding:13px 15px; font-size:15px; font-family:inherit; color:#fff;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.17); border-radius:10px; transition:.16s; }
.aw-input::placeholder{ color:rgba(255,255,255,.42); }
.aw-input:focus{ outline:none; background:rgba(255,255,255,.15); border-color:rgba(255,255,255,.42); }
.aw-btn{ width:100%; padding:14px; font-size:15px; font-weight:650; font-family:inherit; cursor:pointer;
  color:#111; background:#fff; border:none; border-radius:10px; transition:.16s; margin-top:3px; }
.aw-btn:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.4); }
.aw-btn:disabled{ opacity:.65; cursor:default; }
.aw-btn.secondary{ color:#fff; background:rgba(255,255,255,.15); box-shadow:inset 0 0 0 1px rgba(255,255,255,.22); }
.aw-btn.secondary:hover:not(:disabled){ background:rgba(255,255,255,.22); }
.aw-actions{ display:flex; flex-direction:column; gap:9px; }
.aw-foot{ text-align:center; font-size:12px; color:rgba(255,255,255,.62); margin-top:15px; }
.aw-foot a{ color:#fff; text-decoration:none; font-weight:600; cursor:pointer; }
.aw-foot a:hover{ text-decoration:underline; }
.aw-body.top .aw-head{ margin-top:6%; }   /* drop "invited to" down a touch */
.aw-invited{ font-size:11px; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.62); margin:0 0 20px; }
.aw-orglogo-big{ width:66px; height:66px; border-radius:18px; margin:0 auto 12px; display:grid; place-items:center;
  font-size:27px; font-weight:700; color:#fff; overflow:hidden; background:rgba(255,255,255,.1); box-shadow:inset 0 0 0 1px rgba(255,255,255,.18); }
.aw-orglogo-big img{ width:100%; height:100%; object-fit:cover; }
.aw-title{ font-size:22px; font-weight:650; letter-spacing:-.02em; color:#fff; margin:0 0 4px; }
.aw-sub{ font-size:12.5px; color:rgba(255,255,255,.66); margin:0; }
.aw-desc{ font-size:12px; line-height:1.5; color:rgba(255,255,255,.74); margin:10px auto 0; max-width:210px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-wrap:balance; }
.aw-msg{ font-size:12px; line-height:1.4; margin:11px 2px 0; text-align:center; }
.aw-msg.err{ color:#ff9a9a; } .aw-msg.ok{ color:#8ff0c2; }
.aw-statebadge{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; font-size:12px; font-weight:600; margin:0 auto; }
.aw-statebadge.pending{ background:rgba(234,179,8,.2); color:#facc15; }
.aw-statebadge.member{ background:rgba(52,211,153,.2); color:#6ee7b7; }
.aw-statebadge.denied{ background:rgba(239,68,68,.2); color:#fca5a5; }
.aw-statebadge .dot{ width:8px; height:8px; border-radius:50%; background:currentColor; }

/* ============================================
   LOADING & SPINNER
   ============================================ */

.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-subtle);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

/* ============================================
   EMPTY STATE
   ============================================ */

.empty-state {
    text-align: center;
    padding: 48px 24px;
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px;
}

.empty-state-text {
    font-size: 14px;
    color: var(--gray-500);
    margin-bottom: 24px;
}

/* ============================================
   UTILITIES
   ============================================ */

.text-muted { color: var(--gray-500); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--error); }
.text-white { color: var(--white); }
.text-center { text-align: center; }
.text-right { text-align: right; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 16px; }
.mt-4 { margin-top: 24px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 24px; }

.hidden { display: none !important; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 16px; }
.gap-4 { gap: 24px; }

/* ============================================
   ERROR PAGE
   ============================================ */

.error-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
}

.error-icon {
    font-size: 64px;
    margin-bottom: 24px;
}

.error-title {
    font-size: 32px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px;
}

.error-text {
    font-size: 16px;
    color: var(--gray-500);
    max-width: 400px;
    margin-bottom: 32px;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .speaker-content {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   MOBILE HAMBURGER + DRAWER (always rendered, only visible on mobile)
   ============================================ */
.mobile-hamburger {
    display: none;
    position: fixed;
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: calc(14px + env(safe-area-inset-right, 0px));
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: rgba(20, 20, 22, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: var(--white);
    cursor: pointer;
    z-index: 310;
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.18s ease, transform 0.18s ease;
}
.mobile-hamburger svg { width: 22px; height: 22px; stroke-width: 1.75; }
.mobile-hamburger:hover { background: rgba(40, 40, 44, 0.8); }
.mobile-hamburger:active { transform: scale(0.96); }
[data-theme="light"] .mobile-hamburger {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(0, 0, 0, 0.08);
    color: #111;
}

.mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 280;
    opacity: 0;
    transition: opacity 0.22s ease;
}
.mobile-backdrop.open {
    display: block;
    opacity: 1;
}

/* ============================================
   MOBILE RESPONSIVE (<= 768px)
   ============================================ */
@media (max-width: 768px) {
    :root {
        --sidebar-width: 0px;
    }

    /* Show hamburger on mobile */
    .mobile-hamburger { display: inline-flex; }

    /* IMPORTANT: break .app-layout's stacking context so the drawer
       (z-index 300) can sit above body-level backdrop (z-index 280). */
    .app-layout { z-index: auto; }

    /* Sidebar → right-side drawer */
    .sidebar {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: min(272px, 76vw);   /* narrower: 85vw swallowed the whole phone */
        height: 100dvh;
        border-right: none;
        border-left: 1px solid var(--border-subtle);
        box-shadow: -16px 0 40px rgba(0, 0, 0, 0.5);
        transform: translateX(100%);
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 300;
        /* make sure nothing behind bleeds through */
        background: var(--bg-sidebar);
        isolation: isolate;
        /* iPhone notch / home indicator safe area */
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .sidebar.open { transform: translateX(0); }

    .main-content {
        margin-left: 0;
        width: 100%;
    }

    /* Page header — Swiss/Apple proportions: generous top breathing room, fluid title */
    .page-header {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        /* Generous top padding (with iPhone notch support) */
        padding: calc(72px + env(safe-area-inset-top, 0px)) 22px 16px 22px;
    }
    /* Make the inner title block a flex-column so all siblings
       (back-link, title, subtitle, event-code) share the same rhythm */
    .page-header > div:first-child {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        width: 100%;
    }
    .page-title,
    .page-subtitle {
        max-width: 100%;
        margin: 0;  /* reset — gap handles spacing */
    }
    .page-title {
        font-size: clamp(22px, 5.8vw, 28px);
        font-weight: 600;
        line-height: 1.15;
        letter-spacing: -0.022em;
        word-break: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }
    .page-subtitle {
        font-size: 14px;
        line-height: 1.4;
        letter-spacing: -0.003em;
    }
    /* Back-links inside page-header: bigger tap target, consistent rhythm */
    .page-header .text-muted,
    .page-header .back-btn {
        font-size: 15px !important;
        display: inline-flex !important;
        align-items: center;
        gap: 8px;
        padding: 6px 0;
        min-height: 36px;
        margin: 0;
    }
    /* Extra breathing room between back-link and title */
    .page-header .text-muted + .page-title,
    .page-header .back-btn + .page-title {
        margin-top: 4px;
    }
    .page-header > div:last-child,
    .page-header > .header-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        width: 100%;
        padding-right: 0;
    }

    .page-content {
        padding: 12px 22px 24px 22px;
    }

    /* If the page has NO .page-header (e.g. direct page-content), still reserve top space for the hamburger */
    main.main-content > .page-content:first-child {
        padding-top: calc(72px + env(safe-area-inset-top, 0px));
    }

    /* One-column grids for common layouts */
    .events-grid,
    .stats-strip,
    .ms-events-grid,
    .device-grid,
    .courses-grid-new,
    .channel-grid,
    .orgs-grid,
    .stats-grid,
    .video-urls-grid {
        grid-template-columns: 1fr !important;
    }

    /* Touch-friendly buttons */
    .btn {
        min-height: 44px;
        padding: 12px 18px;
        font-size: 15px;
    }
    .btn-sm { min-height: 38px; padding: 8px 14px; }

    /* Inputs: 16px to prevent iOS zoom-on-focus */
    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px;
        padding: 13px 14px;
        min-height: 44px;
    }

    /* Modals */
    .modal {
        width: 92vw !important;
        max-width: 92vw !important;
        margin: 12px;
        max-height: 90dvh;
        overflow-y: auto;
    }
    .modal-body { padding: 16px; }
    .modal-footer { padding: 14px 16px; flex-wrap: wrap; }

    /* Tables → horizontal scroll */
    .users-table,
    table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Compact spacing in cards */
    .card { padding: 16px; }

    /* Tabs: scroll horizontally if they overflow */
    .tabs,
    .nav-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
    }
    .tabs .tab,
    .nav-tabs .tab {
        flex: 0 0 auto;
        min-height: 40px;
        white-space: nowrap;
    }

    /* Channel cards: actions wrap, info stacks */
    .channel-header { flex-wrap: wrap; gap: 8px; }
    .channel-info { flex-wrap: wrap; gap: 8px 12px; }
    .channel-actions { flex-wrap: wrap; }

    /* Danger zone modal confirmations */
    .danger-zone { padding: 16px; }
    .danger-zone-title { font-size: 1rem; }

    /* Auth layout (login/signup/pending-approval) */
    .auth-layout { padding: 16px; }
    .auth-card { max-width: 100%; padding: 24px 20px; }
    .auth-header { margin-bottom: 24px; }
    .auth-header img { height: 28px; margin-bottom: 20px; }
    .auth-header h1 { font-size: 20px; }

    /* Lanyard credential auth (login / signup / join — shared .auth-stage/.badge-stack/.aw-* )
       Keep the whole badge form reachable above the on-screen keyboard on phones. */
    /* Was a fixed, overflow:hidden window with no scroll fallback → submit button trapped
       under the keyboard. Make the stage scroll vertically and anchor to the top so the
       focused field/button can be scrolled into view. */
    .auth-stage {
        align-items: flex-start;
        padding-top: 24px;
        overflow-x: hidden;
        overflow-y: auto;
    }
    /* Size the (square) badge against the actually-visible area (dvh, not vh, so iOS
       Safari toolbar state can't push the button off-screen) and cap it so it fits the
       phone width instead of the ~760px desktop badge. */
    .badge-stack {
        /* Mismo tope que en escritorio (880), para que la acreditación no
           cambie de tamaño al girar el teléfono ni entre pantallas. En un móvil
           manda el `150vw` de todas formas: a 393px de ancho da 590, muy por
           debajo del tope. */
        width: min(880px, 150vw, 112dvh);
        height: min(880px, 150vw, 112dvh);
    }
    /* 16px kills iOS focus-zoom (these inputs don't use the global .form-input rule). */
    .aw-input { font-size: 16px; }

    /* ⚠ LA TIPOGRAFÍA SUBIDA PARA ESCRITORIO NO CABE EN UN MÓVIL PEQUEÑO, y
       aquí vuelve a la de antes. Medido en un 375x553 (un iPhone SE con la
       barra del navegador puesta): la ventana de la acreditación mide 322px y
       el contenido pedía 453 — el auto-encaje lo metía dentro, pero al 69%, y
       una pantalla de entrar al 69% se lee mal.

       En escritorio la ventana es de 503px y sobra sitio; aquí no. El tamaño
       de la acreditación ya se adapta solo (el `min()` de arriba), pero el
       texto no, porque va en píxeles. Con esto el contenido baja a ~350 y
       entra sin encoger.

       El `font-size` de los campos NO se toca: los 16px de arriba son los que
       impiden que iOS haga zoom al enfocarlos, y bajarlos devolvería ese salto
       que descoloca la página entera. Se recorta el RELLENO, que no tiene ese
       efecto. */
    .aw-logo { height: 62px; margin-bottom: 18px; }
    .aw-c2 { font-size: 21px; }
    .aw-form { margin-top: 14px; gap: 9px; }
    .aw-input { padding: 11px 13px; }
    .aw-btn { padding: 12px; font-size: 14px; }
    .aw-label { font-size: 9.5px; }
    /* Footer links (Sign up/Sign in toggle, '‹ Back', 'Not you? Sign out') → real tap area. */
    .aw-foot a { display: inline-block; padding: 8px 6px; min-height: 40px; }
}

/* Even smaller: phones */
@media (max-width: 420px) {
    .page-header { padding: calc(68px + env(safe-area-inset-top, 0px)) 20px 14px 20px; }
    .page-title { letter-spacing: -0.025em; }
    .page-subtitle { font-size: 13px; }
    .page-content { padding: 10px 20px 20px 20px; }
    .card { padding: 14px; }
    .btn { font-size: 14px; }
}

/* ============================================
   ADMIN PAGE
   ============================================ */

.users-table {
    width: 100%;
    border-collapse: collapse;
}

.users-table th,
.users-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}

.users-table th {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gray-500);
}

.users-table td {
    font-size: 14px;
    color: var(--gray-300);
}

.users-table tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    border-radius: 4px;
}

.badge-success {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.15);
    color: var(--warning);
}

.badge-info {
    background: rgba(59, 130, 246, 0.15);
    color: var(--info);
}

/* ============================================
   FLAG EMOJIS FOR LANGUAGES
   ============================================ */

.flag-en::before { content: "🇬🇧"; }
.flag-es::before { content: "🇪🇸"; }
.flag-fr::before { content: "🇫🇷"; }
.flag-de::before { content: "🇩🇪"; }
.flag-it::before { content: "🇮🇹"; }
.flag-pt::before { content: "🇧🇷"; }
.flag-zh::before { content: "🇨🇳"; }
.flag-ja::before { content: "🇯🇵"; }
.flag-ko::before { content: "🇰🇷"; }
.flag-ru::before { content: "🇷🇺"; }
.flag-ar::before { content: "🇸🇦"; }
.flag-hi::before { content: "🇮🇳"; }
.flag-nl::before { content: "🇳🇱"; }
.flag-pl::before { content: "🇵🇱"; }
.flag-ca::before { content: "🏳️"; }
.flag-any::before { content: "🌐"; }

/* ============================================
   STREAMING STATUS DOT
   ============================================ */

.status-dot.streaming {
    background: var(--info);
    box-shadow: 0 0 8px var(--info);
    animation: streamPulse 1.5s ease-in-out infinite;
}

@keyframes streamPulse {
    0%, 100% { box-shadow: 0 0 8px var(--info); }
    50% { box-shadow: 0 0 16px var(--info), 0 0 24px rgba(59, 130, 246, 0.3); }
}

/* ============================================
   EVENT TYPE BADGES
   ============================================ */

.event-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    padding: 3px 9px;
    border-radius: 5px;
}
.event-space-tag {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: normal;
    padding: 3px 9px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--gray-400);
}
.event-card .event-meta { margin-top: 12px; }
.event-card-type {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.event-type-badge.speech {
    background: rgba(236, 72, 153, 0.16);
    color: #ec4899;
}

.event-type-badge.subtitles {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.event-type-badge.mixer {
    background: rgba(45, 212, 191, 0.16);
    color: #2dd4bf;
}

/* Slides — el cuarto tipo. NARANJA (#f97316): el telón, no el micrófono.
   Sin esta clase el badge sale sin fondo ni color y la tarjeta se lee como
   una Speech mal pintada.

   ⚠ NARANJA, NO ROJO. Empezó siendo un rosa-rojo (#f43f5e) y se leía como una
     Speech (#ec4899) apagada: 25° de tono los separaban, y en un badge de 11px
     eso no lo distingue nadie. El naranja está a 25° de tono absoluto —a 55°
     del magenta de Speech, a 149° del turquesa de Mixer y a 192° del azul de
     Subtitles— y sube el contraste sobre el panel oscuro de 4,93:1 a 6,45:1.
     El tono vive AQUÍ y en `.event-card.cat-slides:hover`, en `CAT_GLOW`
     (dashboard.html), en `.stage-code-chip.type-slides` (event.html) y en las
     paletas de las dos pantallas propias (slides_script.css, slides_stage.css).
     Cambiar uno solo deja el producto a dos colores. */
.event-type-badge.slides {
    background: rgba(249, 115, 22, 0.16);
    color: #f97316;
}

/* ── Diffused category-colour glow when hovering an event card ── */
.event-card.cat-speech:hover {
    border-color: rgba(236, 72, 153, 0.45);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 8px 90px 6px rgba(236, 72, 153, 0.32);
}
.event-card.cat-subtitles:hover {
    border-color: rgba(59, 130, 246, 0.45);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 8px 90px 6px rgba(59, 130, 246, 0.32);
}
.event-card.cat-mixer:hover {
    border-color: rgba(45, 212, 191, 0.45);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 8px 90px 6px rgba(45, 212, 191, 0.32);
}
.event-card.cat-slides:hover {
    border-color: rgba(249, 115, 22, 0.45);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 8px 90px 6px rgba(249, 115, 22, 0.32);
}

/* ── Create-event pill: gradient in the selected type's colour, fading to the dark panel.
   --cat-glow is set per selected type by dashboard.js; as a background-image it layers over
   --bg-panel (above the background colour, below the modal content — no z-index juggling). ── */
#eventModal .modal {
    background-image: linear-gradient(180deg, var(--cat-glow, rgba(236, 72, 153, 0.22)) 0%, transparent 42%);
}

/* ============================================
   DIVINITY NAV SECTION
   ============================================ */

.nav-section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-600);
    padding: 8px 12px 4px;
    margin-top: 4px;
}

/* ============================================
   TOGGLE SWITCH
   ============================================ */

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--gray-700);
    border-radius: 24px;
    transition: var(--transition-fast);
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background: var(--white);
    border-radius: 50%;
    transition: var(--transition-fast);
}

.toggle-switch input:checked + .toggle-slider {
    background: var(--success);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(20px);
}

/* ============================================
   LIGHT THEME
   ============================================ */

/* ============================================
   LIGHT MODE — comprehensive overrides
   ============================================ */
[data-theme="light"] {
    --bg-primary: #f5f5f7;
    --bg-panel: rgba(255, 255, 255, 0.92);
    --bg-panel-solid: #ffffff;
    --bg-sidebar: #f8f8fa;
    --gray-950: #f5f5f5;
    --gray-900: #eeeeee;
    --gray-800: #e0e0e0;
    --gray-700: #cccccc;
    --gray-600: #999999;
    --gray-500: #777777;
    --gray-400: #555555;
    --gray-300: #333333;
    --gray-200: #222222;
    --gray-100: #111111;
    --white: #111111;
    --border-subtle: rgba(0, 0, 0, 0.1);
    --border-hover: rgba(0, 0, 0, 0.18);
    --border-active: rgba(0, 0, 0, 0.25);
    --glass-bg: rgba(255, 255, 255, 0.86);
    --glass-blur: saturate(140%) blur(22px);
    --glass-highlight: rgba(255, 255, 255, 0.8);
    --glass-ring: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] body {
    color: #333333;
}

/* Hide dark-mode decorative backgrounds */
[data-theme="light"] .rays-container,
[data-theme="light"] .light-source,
[data-theme="light"] .atmosphere,
[data-theme="light"] .vignette {
    display: none;
}

/* ── Page Header ─────────────────────────────── */
[data-theme="light"] .page-header {
    background: transparent;
    backdrop-filter: none;
    border: none;
}

[data-theme="light"] .page-title {
    color: #111111;
}

[data-theme="light"] .page-subtitle {
    color: #777777;
}

/* ── Sidebar ─────────────────────────────────── */
[data-theme="light"] .sidebar {
    background: var(--bg-sidebar);
    border-right: 1px solid rgba(0, 0, 0, 0.08);
}


[data-theme="light"] .sidebar-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .nav-item {
    color: #555555;
}

[data-theme="light"] .nav-item:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #333333;
}

[data-theme="light"] .nav-item.active {
    background: rgba(0, 0, 0, 0.08);
    color: #111111;
}

[data-theme="light"] .nav-item svg {
    opacity: 0.6;
}

[data-theme="light"] .nav-divider {
    background: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .org-avatar {
    background: #e8e8ec;
    color: #333333;
}
[data-theme="light"] .org-name {
    color: #222222;
}
[data-theme="light"] .footer-divider {
    background: rgba(0, 0, 0, 0.08);
}
[data-theme="light"] .user-avatar {
    background: #e8e8ec;
    color: #333333;
}

[data-theme="light"] .user-info .user-name {
    color: #222222;
}

[data-theme="light"] .user-info .user-email {
    color: #888888;
}

[data-theme="light"] .org-role {
    color: #888888;
}
[data-theme="light"] a.org-info-link:hover {
    background: rgba(0, 0, 0, .05);
}

/* ── Cards / Panels ──────────────────────────── */
[data-theme="light"] .card {
    background: rgba(255, 255, 255, 0.7);
    border: none;
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 0 30px 2px rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .card::before,
[data-theme="light"] .card::after,
[data-theme="light"] .event-card::before,
[data-theme="light"] .modal::before {
    background: none;
}

[data-theme="light"] .event-card {
    border: none;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .event-card:hover {
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .event-code {
    background: rgba(0, 0, 0, 0.05);
    color: #555555;
}

[data-theme="light"] .channel-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .channel-card:hover {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .channel-badge {
    color: #ffffff;
    background: #333333;
}

[data-theme="light"] .stat-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

/* ── Buttons ─────────────────────────────────── */
[data-theme="light"] .btn-primary {
    background: #111111;
    color: #ffffff;
}

[data-theme="light"] .btn-primary:hover:not(:disabled) {
    background: #222222;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .btn-secondary {
    background: rgba(0, 0, 0, 0.05);
    color: #444444;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .btn-secondary:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="light"] .btn-ghost {
    color: #555555;
}

[data-theme="light"] .btn-ghost:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.05);
    color: #333333;
}

/* ── Tabs ────────────────────────────────────── */
[data-theme="light"] .tabs {
    background: rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .tab {
    color: #777777;
}

[data-theme="light"] .tab:hover {
    color: #444444;
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .tab.active {
    color: #111111;
    background: rgba(0, 0, 0, 0.06);
    border-bottom-color: #111111;
}

/* ── Forms ────────────────────────────────────── */
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
    background: rgba(0, 0, 0, 0.03);
    color: #222222;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .form-textarea::placeholder {
    color: #aaaaaa;
}

[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-select:focus,
[data-theme="light"] .form-textarea:focus {
    border-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
    background: #ffffff;
}

[data-theme="light"] .form-select option {
    background: #ffffff;
    color: #222222;
}

[data-theme="light"] .form-label {
    color: #444444;
}

[data-theme="light"] .form-group .text-muted,
[data-theme="light"] .text-muted {
    color: #888888;
}

/* ── Modals ───────────────────────────────────── */
[data-theme="light"] .modal-overlay {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .modal {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .modal-header {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .modal-title {
    color: #111111;
}

[data-theme="light"] .modal-close {
    color: #777777;
}

[data-theme="light"] .modal-close:hover {
    background: rgba(0, 0, 0, 0.06);
    color: #333333;
}

/* ── Badges / Status ─────────────────────────── */
[data-theme="light"] .badge {
    background: rgba(0, 0, 0, 0.06);
    color: #555555;
}

[data-theme="light"] .badge-success { background: rgba(34, 197, 94, 0.1); color: #16a34a; }
[data-theme="light"] .badge-warning { background: rgba(245, 158, 11, 0.1); color: #d97706; }
[data-theme="light"] .badge-error   { background: rgba(239, 68, 68, 0.1); color: #dc2626; }
[data-theme="light"] .badge-info    { background: rgba(59, 130, 246, 0.1); color: #2563eb; }

/* ── Terminal ─────────────────────────────────── */
[data-theme="light"] .terminal {
    background: #fafafa;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .terminal-header {
    background: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* ── Tables ───────────────────────────────────── */
[data-theme="light"] .table th {
    background: rgba(0, 0, 0, 0.03);
    color: #555555;
}

[data-theme="light"] .table td {
    border-color: rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .table tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

[data-theme="light"] .users-table tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

/* ── Toggle switch ────────────────────────────── */
[data-theme="light"] .toggle-slider {
    background: #cccccc;
}

/* ── Tooltips ─────────────────────────────────── */
[data-theme="light"] .tooltip {
    background: #333333;
    color: #ffffff;
}

/* ── QR Container ─────────────────────────────── */
[data-theme="light"] .qr-container {
    background: #f5f5f5;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ── Scrollbar ────────────────────────────────── */
[data-theme="light"] ::-webkit-scrollbar-track {
    background: transparent;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 4px;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.2);
}

/* ── Empty State ──────────────────────────────── */
[data-theme="light"] .empty-state {
    color: #888888;
}

[data-theme="light"] .empty-state-icon {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .empty-state-title {
    color: #444444;
}

/* ── Loading spinner ──────────────────────────── */
[data-theme="light"] .spinner {
    border-color: rgba(0, 0, 0, 0.1);
    border-top-color: #333333;
}

/* ── Tags / Vocab ─────────────────────────────── */
[data-theme="light"] .tag {
    background: rgba(0, 0, 0, 0.05);
    color: #555555;
}

[data-theme="light"] .tag:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* ── Agenda / Schedule ────────────────────────── */
[data-theme="light"] .schedule-item,
[data-theme="light"] .agenda-item {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .calendar-nav-btn {
    color: #555555;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .calendar-nav-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .calendar-today-btn {
    color: #555555;
}

[data-theme="light"] .day-header {
    color: #777777;
}

[data-theme="light"] .day-cell {
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .day-cell:hover {
    background: rgba(0, 0, 0, 0.02);
}

/* ── Conditionals ─────────────────────────────── */
[data-theme="light"] .conditional-rule {
    background: rgba(0, 0, 0, 0.02);
}

/* ── Account page ─────────────────────────────── */
[data-theme="light"] .account-section {
    border-color: rgba(0, 0, 0, 0.06);
}

/* ── Admin page ───────────────────────────────── */
[data-theme="light"] .admin-card {
    background: var(--bg-panel);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* ── Links ────────────────────────────────────── */
[data-theme="light"] a.text-muted {
    color: #666666;
}

[data-theme="light"] a.text-muted:hover {
    color: #333333;
}

/* ============================================
   VOCABULARY SECTION
   ============================================ */

.vocab-section {
    margin-bottom: 24px;
}

.vocab-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px;
}

.vocab-section-desc {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 12px;
}

.vocab-textarea {
    width: 100%;
    min-height: 120px;
    padding: 12px 16px;
    font-size: 13px;
    font-family: var(--font-mono);
    color: var(--white);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-sm);
    resize: vertical;
    transition: var(--transition-fast);
}

.vocab-textarea:focus {
    outline: none;
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-active);
}

.vocab-char-count {
    font-size: 12px;
    color: var(--gray-600);
    text-align: right;
    margin-top: 4px;
}

.translation-term-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 8px;
    margin-bottom: 8px;
    align-items: center;
}

.translation-term-row .form-input {
    padding: 10px 12px;
    font-size: 13px;
}

/* ============================================
   CONDITIONAL RULES
   ============================================ */

.conditional-rule {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-sm);
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.conditional-rule .form-select {
    width: auto;
    min-width: 120px;
    padding: 8px 36px 8px 12px;
    font-size: 13px;
}

.conditional-label {
    font-size: 13px;
    color: var(--gray-400);
    font-weight: 500;
}

/* ============================================
   AGENDA TIMELINE
   ============================================ */

.agenda-timeline {
    position: relative;
    padding-left: 24px;
}

.agenda-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-subtle);
}

.agenda-item {
    position: relative;
    padding: 16px 0 16px 24px;
    border-bottom: 1px solid var(--border-subtle);
}

.agenda-item::before {
    content: '';
    position: absolute;
    left: -29px;
    top: 22px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--gray-600);
    border: 2px solid var(--bg-primary);
}

.agenda-item.active::before {
    background: var(--success);
    box-shadow: 0 0 8px var(--success);
}

.agenda-item.streaming::before {
    background: var(--info);
    box-shadow: 0 0 8px var(--info);
}

.agenda-time {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-500);
    margin-bottom: 4px;
}

.agenda-event-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--white);
}

.agenda-event-meta {
    font-size: 13px;
    color: var(--gray-500);
    margin-top: 4px;
}

/* ============================================
   LEARN / COURSES
   ============================================ */

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.course-card {
    background: var(--bg-panel);
    backdrop-filter: blur(40px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition);
}

.course-card:hover {
    border-color: var(--border-hover);
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.course-thumbnail {
    width: 100%;
    height: 160px;
    background: linear-gradient(135deg, var(--gray-800), var(--gray-900));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
}

.course-body {
    padding: 16px 20px;
}

.course-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px;
}

.course-desc {
    font-size: 13px;
    color: var(--gray-500);
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: var(--gray-500);
}

.progress-bar {
    width: 100%;
    height: 4px;
    background: var(--gray-800);
    border-radius: 2px;
    margin-top: 12px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: var(--success);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* ============================================
   ORGANIZATION CARDS
   ============================================ */

/* Divinity /orgs grid: 4 opaque frosted-glass cards per row, each with its own colour wave. */
.orgs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    align-items: start;
}
@media (max-width: 1200px) { .orgs-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .orgs-grid { grid-template-columns: repeat(2, 1fr); } }

.org-card {
    position: relative;
    overflow: hidden;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid transparent;
    border-radius: 16px;
    padding: 20px;
    min-height: 150px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--glass-shadow);
    transition: transform .22s cubic-bezier(.2,.85,.3,1), box-shadow .22s;
}
/* Per-org colour wave rising from the bottom, tinted by --wave-hue (set inline per card). */
.org-card::before {
    content: '';
    position: absolute;
    left: -15%; right: -15%; top: 0; bottom: 0;
    pointer-events: none;
    background:
      radial-gradient(78% 62% at 30% 122%, hsla(var(--wave-hue, 220), 72%, 54%, .5), transparent 62%),
      radial-gradient(66% 54% at 76% 128%, hsla(calc(var(--wave-hue, 220) + 22), 74%, 50%, .38), transparent 60%);
    filter: blur(14px);
    animation: orgWave 9s ease-in-out infinite alternate;
}
.org-card > * { position: relative; z-index: 1; }
@keyframes orgWave { 0% { transform: translate3d(-6%, 3%, 0) scale(1.06); } 100% { transform: translate3d(7%, -4%, 0) scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .org-card::before { animation: none; } }

.org-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--glass-shadow), 0 22px 50px -18px hsla(var(--wave-hue, 220), 60%, 45%, .55);
}

.org-handle {
    font-size: 13px;
    font-family: var(--font-mono);
    color: var(--info);
    margin-bottom: 4px;
}

.org-name {
    font-size: 18px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px;
}

.org-meta {
    display: flex;
    gap: 16px;
    font-size: 13px;
    color: var(--gray-500);
}

/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
}
.toast {
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 0.825rem;
    font-weight: 500;
    color: var(--white);
    pointer-events: auto;
    animation: toast-in 0.25s ease-out;
    max-width: 380px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    backdrop-filter: blur(12px);
}
.toast.toast-success {
    background: rgba(34, 197, 94, 0.9);
}
.toast.toast-error {
    background: rgba(239, 68, 68, 0.9);
}
.toast.toast-info {
    background: rgba(59, 130, 246, 0.9);
}
.toast.toast-out {
    animation: toast-out 0.2s ease-in forwards;
}
@keyframes toast-in {
    from { opacity: 0; transform: translateY(12px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(8px) scale(0.95); }
}
[data-theme="light"] .toast { color: #fff; }

/* ============================================
   BILLBOARD — global Divinity banner + must-accept notification
   ============================================ */
.billboard-banner {
    position: fixed; top: 0; left: 0; right: 0; height: 40px; z-index: 300;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 0 48px; font-size: 13.5px; font-weight: 600; text-align: center;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
/* When the banner is up, push the sidebar + content down so nothing hides behind it. */
body.billboard-on .sidebar { top: var(--billboard-h, 0px); height: calc(100vh - var(--billboard-h, 0px)); }
body.billboard-on .main-content { padding-top: var(--billboard-h, 0px); }

.billboard-notif-back {
    position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    background: rgba(4, 4, 8, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.billboard-notif-card {
    max-width: 420px; width: calc(100% - 40px); text-align: center; padding: 34px 32px 28px;
    border-radius: 20px; background: var(--bg-panel-solid, #0e0e10);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.billboard-notif-card .bn-emoji { font-size: 46px; line-height: 1; margin-bottom: 14px; }
.billboard-notif-card .bn-title { color: var(--white); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; }
.billboard-notif-card .bn-sub { color: var(--gray-400); font-size: 0.95rem; line-height: 1.5; margin-top: 10px; }
.billboard-notif-card .bn-ok {
    margin-top: 24px; min-width: 140px; padding: 11px 24px; border: none; border-radius: 12px; cursor: pointer;
    background: #fff; color: #111; font-size: 0.95rem; font-weight: 700; transition: transform 0.12s, box-shadow 0.2s;
}
.billboard-notif-card .bn-ok:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(255, 255, 255, 0.15); }

/* ═══════════════════════════════════════════════════════════════════════════
   WIDGET · FONDO NEGRO
   ───────────────────────────────────────────────────────────────────────────
   El resto de Backstage lleva el decorado de luz: seis rayos animados, un foco,
   una atmósfera y una viñeta. En Widget estorba, y hay una razón concreta y no
   estética: estas pantallas enseñan el widget de accesibilidad del cliente —su
   color de marca, sus filtros de color, sus modos de contraste— y juzgar un
   color sobre un fondo que late y cambia de luminosidad es juzgarlo mal.

   Se apaga con una clase en el <body> en vez de quitando los divs de las
   plantillas, para que un decorado nuevo que alguien añada mañana también se
   apague aquí sin acordarse de este fichero.

   ⚠ Es cosmética, NO layout. La memoria del proyecto avisa de meter layout en
     una clase del <body>: convierte en bug toda ruta que olvide limpiarla.
     Aquí no aplica —cada pantalla es una carga completa, no hay SPA que
     arrastre la clase— y aun así no se toca ni una propiedad de caja.
   ═══════════════════════════════════════════════════════════════════════════ */
body.widget-negro {
    background: #000;
}
body.widget-negro .rays-container,
body.widget-negro .light-source,
body.widget-negro .atmosphere,
body.widget-negro .vignette {
    display: none !important;
}
/* Los mismos resplandores viven también en pseudoelementos del body en algunas
   pantallas. Si no se apagan, el fondo queda «casi» negro con una mancha, que
   es peor que dejarlo como estaba. */
body.widget-negro::before,
body.widget-negro::after {
    display: none !important;
}