/* ==================================================================== CABINA (2026-11-11)
   El diseño de Felix: la marca Linex (azul noche, azul violeta, violeta, lila, Geist) con profundidad
   y movimiento. Fondo de aurora que respira, paneles de vidrio, lateral en riel que se abre al
   acercar el cursor, barra flotante, botones con degradado y entradas animadas.

   El diseño es UNO; el tema solo cambia los colores. Oscuro (por defecto) y claro comparten la misma
   estructura: lo único que difiere son los tokens de los dos primeros bloques. Antes el claro perdía
   el riel, la barra flotante y el vidrio, y parecía otra aplicación.

   Cómo está hecho:
   - Los tokens usan el selector real de cada tema (ganan a linex.css por orden de carga).
   - Las reglas usan :where(:root) para no subir la especificidad y ganar solo por ir después.
     Las pocas que son solo del oscuro llevan :where(:root[data-theme="dark"]).
   - Se carga DESPUÉS de linex.css, entrada.css y shell.css, en la consola, los módulos (N1/N2 y
     triage) y la portada.
   - Los módulos embebidos van transparentes: la aurora es de la consola y se ve a través del marco.
   - Con «reducir movimiento» en el sistema, nada se anima. */

/* ------------------------------------------------------------------ tokens: oscuro (por defecto) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --plano: #0a0920;
  --superficie: rgba(255, 255, 255, 0.06);
  --superficie-2: rgba(255, 255, 255, 0.05);
  --borde: rgba(255, 255, 255, 0.12);
  --borde-suave: rgba(255, 255, 255, 0.07);
  --texto: #f4f3ff;
  --texto-2: #c7c6e6;
  --texto-3: #9d9bc8;
  --acento: #5b5cff;
  --acento-tinta: #b7bbff;
  --acento-suave: rgba(91, 92, 255, 0.5);
  --acento-fondo: rgba(91, 92, 255, 0.22);
  --sobre-acento: #ffffff;
  --gris-serie: rgba(255, 255, 255, 0.22);
  --foco: #9c9eff;
  --sombra: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 50px -26px rgba(0, 0, 0, 0.75);
  --sombra-alta: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(156, 158, 255, 0.25);
  --lateral-fondo: rgba(23, 21, 59, 0.55);
  --lateral-hover: rgba(255, 255, 255, 0.08);
  --lateral-linea: rgba(255, 255, 255, 0.1);

  --cab-fondo: #0a0920;
  --cab-aurora-1: rgba(91, 92, 255, 0.7);
  --cab-aurora-2: rgba(109, 40, 217, 0.75);
  --cab-aurora-3: rgba(224, 179, 255, 0.26);
  --cab-punto: rgba(255, 255, 255, 0.07);
  --cab-brillo: rgba(156, 158, 255, 0.16);
  --cab-borde-vivo: rgba(156, 158, 255, 0.45);
  --cab-borde-vivo-suave: rgba(156, 158, 255, 0.28);
  --cab-th: #1c1a49;
  --cab-solido: rgba(19, 17, 52, 0.95);
  --cab-solido-firme: #151338;
  --cab-sombra-fija: 0 14px 30px -14px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --cab-opcion-fondo: #17153b;
  --cab-hundido: rgba(0, 0, 0, 0.24);
  --cab-hundido-foco: rgba(0, 0, 0, 0.32);
  --cab-fila: rgba(255, 255, 255, 0.05);
  --cab-desplaza: rgba(255, 255, 255, 0.16);
  --cab-insignia: rgba(255, 255, 255, 0.1);
  --cab-panel-flotante: rgba(23, 21, 59, 0.82);
  --cab-barra-fondo: rgba(23, 21, 59, 0.5);
}

/* ------------------------------------------------------------------ tokens: claro */
:root:not([data-theme="dark"]) {
  color-scheme: light;
  --plano: #f1f2ff;
  --superficie: rgba(255, 255, 255, 0.74);
  --superficie-2: rgba(91, 92, 255, 0.055);
  --borde: rgba(23, 21, 59, 0.11);
  --borde-suave: rgba(23, 21, 59, 0.07);
  --acento-fondo: rgba(91, 92, 255, 0.12);
  --sombra: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 18px 44px -26px rgba(23, 21, 59, 0.28);
  --sombra-alta: 0 30px 70px -24px rgba(23, 21, 59, 0.35), 0 0 0 1px rgba(91, 92, 255, 0.14);
  /* El riel sigue siendo azul noche en claro: es la marca. */
  --lateral-fondo: rgba(23, 21, 59, 0.95);
  --lateral-hover: rgba(255, 255, 255, 0.08);
  --lateral-linea: rgba(255, 255, 255, 0.1);

  --cab-fondo: #f1f2ff;
  --cab-aurora-1: rgba(91, 92, 255, 0.3);
  --cab-aurora-2: rgba(109, 40, 217, 0.24);
  --cab-aurora-3: rgba(224, 179, 255, 0.55);
  --cab-punto: rgba(23, 21, 59, 0.07);
  --cab-brillo: rgba(91, 92, 255, 0.12);
  --cab-borde-vivo: rgba(91, 92, 255, 0.5);
  --cab-borde-vivo-suave: rgba(91, 92, 255, 0.28);
  --cab-th: #eceefb;
  --cab-solido: rgba(255, 255, 255, 0.96);
  --cab-solido-firme: #ffffff;
  --cab-sombra-fija: 0 14px 30px -16px rgba(23, 21, 59, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --cab-opcion-fondo: #ffffff;
  --cab-hundido: rgba(255, 255, 255, 0.7);
  --cab-hundido-foco: #ffffff;
  --cab-fila: rgba(91, 92, 255, 0.05);
  --cab-desplaza: rgba(23, 21, 59, 0.2);
  --cab-insignia: rgba(23, 21, 59, 0.07);
  --cab-panel-flotante: rgba(255, 255, 255, 0.92);
  --cab-barra-fondo: rgba(255, 255, 255, 0.72);
}

/* ------------------------------------------------------------------ comunes a los dos temas */
:root {
  --cab-degradado: linear-gradient(100deg, #5b5cff, #6d28d9);
  --cab-vidrio: blur(22px) saturate(140%);
  --cab-rebote: cubic-bezier(0.34, 1.56, 0.64, 1);
  --cab-suave: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------------------ aurora: el fondo respira */
:where(:root) body { background: var(--cab-fondo); }
:where(:root:not(.embebido)) body::before,
:where(:root[data-theme="dark"]) .entrada::before {
  content: ""; position: fixed; inset: -18%; z-index: -1; pointer-events: none;
  /* La caja sobresale 18 % por cada lado: las manchas se ubican contando con eso. */
  background:
    radial-gradient(40% 42% at 24% 22%, var(--cab-aurora-1), transparent 70%),
    radial-gradient(38% 40% at 78% 80%, var(--cab-aurora-2), transparent 70%),
    radial-gradient(26% 28% at 54% 50%, var(--cab-aurora-3), transparent 70%);
  filter: blur(70px) saturate(130%);
  animation: cab-deriva 34s ease-in-out infinite alternate; will-change: transform;
}
:where(:root:not(.embebido)) body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image: radial-gradient(var(--cab-punto) 1px, transparent 1px); background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%);
}
@keyframes cab-deriva {
  0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
  50% { transform: translate3d(4%, 3%, 0) scale(1.12) rotate(4deg); }
  100% { transform: translate3d(-4%, -3%, 0) scale(1.2) rotate(-5deg); }
}
/* Los módulos embebidos y su marco van transparentes: se ve la aurora de la consola. */
:where(:root.embebido), :where(:root.embebido) body { background: transparent; }
:where(:root) :is(#marco-triage, .marco) { background: transparent; }

/* ------------------------------------------------------------------ vidrio: la superficie de todo */
:where(:root) :is(.panel, .tarjeta, .kpi, .hero, .tabla-scroll) {
  background-color: var(--superficie); border-color: var(--borde); box-shadow: var(--sombra);
  -webkit-backdrop-filter: var(--cab-vidrio); backdrop-filter: var(--cab-vidrio);
  /* El brillo que sigue al cursor (marca/cabina.js pone --mx y --my). */
  background-image: radial-gradient(280px circle at var(--mx, -999px) var(--my, -999px), var(--cab-brillo), transparent 62%);
  background-repeat: no-repeat;
  transition: border-color 0.25s, transform 0.25s var(--cab-suave), box-shadow 0.25s;
}
:where(:root) :is(.tarjeta, .kpi):hover { border-color: var(--cab-borde-vivo); transform: translateY(-2px); }
:where(:root) .panel:hover { border-color: var(--cab-borde-vivo-suave); }
:where(:root) .tabla-scroll:not(:has(table)) { background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Lo que flota o queda fijo necesita fondo casi sólido para leerse. */
:where(:root) th { background: var(--cab-th); }
:where(:root) :is(.doc-previa, .toast) {
  background-color: var(--cab-solido); -webkit-backdrop-filter: var(--cab-vidrio); backdrop-filter: var(--cab-vidrio);
}
/* La barra de filtros de Bugs en Azure queda fija al bajar: fondo sólido, para que no se transparente lo de atrás. */
:where(:root) .az-filtros { background-color: var(--cab-solido-firme); box-shadow: var(--cab-sombra-fija); }
:where(:root) .toast { color: var(--texto); border: 1px solid var(--cab-borde-vivo); box-shadow: 0 0 40px -10px rgba(91, 92, 255, 0.7); }
:where(:root) :is(option, optgroup) { background: var(--cab-opcion-fondo); color: var(--texto); }
:where(:root) :is(input, select, textarea) { background-color: var(--cab-hundido); }
:where(:root) :is(input, select, textarea):focus { outline: none; border-color: var(--foco); background-color: var(--cab-hundido-foco); box-shadow: 0 0 0 4px rgba(91, 92, 255, 0.18); }
:where(:root) tbody tr:hover td { background: var(--cab-fila); }
:where(:root) ::-webkit-scrollbar { width: 10px; height: 10px; }
:where(:root) ::-webkit-scrollbar-thumb { background: var(--cab-desplaza); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
:where(:root) ::-webkit-scrollbar-track { background: transparent; }

/* ------------------------------------------------------------------ botones y controles */
:where(:root) :is(button.primario, .btn.primario) {
  position: relative; overflow: hidden; background: var(--cab-degradado); border-color: transparent; color: #ffffff;
  box-shadow: 0 8px 24px -8px rgba(91, 92, 255, 0.85);
}
:where(:root) :is(button.primario, .btn.primario):hover { background: var(--cab-degradado); filter: brightness(1.14); box-shadow: 0 10px 32px -6px rgba(91, 92, 255, 1); }
:where(:root) :is(button.primario, .btn.primario):disabled { background: var(--cab-degradado); filter: saturate(0.5); box-shadow: none; }
:where(:root) :is(.az-chips, .celulas, .seg, .segmento) button.activa,
:where(:root) nav.pestanas button.activa {
  background: var(--cab-degradado); border-color: transparent; color: #ffffff; box-shadow: 0 0 20px -4px rgba(91, 92, 255, 0.85);
}
:where(:root) nav.pestanas { background: var(--cab-hundido); border-color: var(--borde); }
:where(:root) .az-chips button { background: var(--cab-hundido); }
:where(:root) .az-chips button b { background: var(--cab-insignia); }
:where(:root) .az-chips button.activa b { background: rgba(255, 255, 255, 0.24); color: #ffffff; }
:where(:root) kbd { background: var(--cab-insignia); }

/* ------------------------------------------------------------------ consola: barra flotante y avatar vivo */
:where(:root) .niveles { background: var(--cab-hundido); border-color: var(--borde); }
:where(:root) .niveles button.activa { background: var(--cab-degradado); color: #ffffff; box-shadow: 0 0 18px rgba(91, 92, 255, 0.7); }
:where(:root) .niveles button .n { background: var(--cab-insignia); color: var(--texto); }
:where(:root) .niveles button.activa .n { background: #ffffff; color: #5b5cff; }
:where(:root) .buscar-global { background: var(--cab-hundido); }
:where(:root) .buscar-global:focus-within { background: var(--cab-hundido-foco); box-shadow: 0 0 0 4px rgba(91, 92, 255, 0.16); }
:where(:root) .buscar-global input, :where(:root) .buscar-global input:focus { background: transparent; box-shadow: none; }
:where(:root) .estado-barra .pill { background: var(--cab-hundido); }
:where(:root) .estado-barra .pill .forma { box-shadow: 0 0 10px currentColor; }
:where(:root) :is(.felix-btn, .cabecera .chip) { background: var(--cab-hundido); }
:where(:root) .felix-btn:hover, :where(:root) .felix-btn.activa { border-color: var(--cab-borde-vivo); box-shadow: 0 0 22px -4px rgba(91, 92, 255, 0.9); background: rgba(91, 92, 255, 0.18); }
:where(:root) .cabecera h1 { font-size: 1.9rem; letter-spacing: -0.03em; line-height: 1.15; }
:where(:root) :is(.lateral .marca-ava, .felix-btn .felix-ava, .felix-cab .felix-ava, .entrada-logo img) { animation: cab-halo 2.8s ease-out infinite; }
@keyframes cab-halo { 0% { box-shadow: 0 0 0 0 rgba(156, 158, 255, 0.75); } 100% { box-shadow: 0 0 0 11px rgba(156, 158, 255, 0); } }
/* Solo el menú del riel: el triage también usa id="pestanas" para sus pestañas y no debe heredar esto. */
:where(:root) .lateral #pestanas button.activa, :where(:root) .lateral nav a.activa {
  background: linear-gradient(100deg, rgba(91, 92, 255, 0.55), rgba(109, 40, 217, 0.3));
  box-shadow: 0 0 22px -4px rgba(91, 92, 255, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
/* Cambio de vista: lo que se abre entra, no salta. */
:where(:root) .vista:not(.oculta) { animation: cab-entra 0.5s var(--cab-suave) both; }
:where(:root.embebido) :is(main, .app > section:not(.oculta)) { animation: cab-entra 0.5s var(--cab-suave) both; }
@keyframes cab-entra { from { opacity: 0; transform: translateY(12px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

/* Felix: panel de vidrio que entra con rebote */
:where(:root) .felix {
  background-color: var(--cab-panel-flotante); border: 1px solid var(--borde); box-shadow: var(--sombra-alta);
  -webkit-backdrop-filter: var(--cab-vidrio); backdrop-filter: var(--cab-vidrio);
  transition: transform 0.55s var(--cab-rebote), visibility 0s linear 0.55s;
}
:where(:root) .felix.abierta { transition: transform 0.55s var(--cab-rebote); }
:where(:root) .felix.pagina { background-color: var(--superficie); transition: none; }
:where(:root) .felix.pagina .felix-hilos { background: var(--cab-hundido); }

/* En pantallas con cursor: lateral en riel de íconos que se abre al acercarse, y barra flotante. */
@media (min-width: 921px) and (hover: hover) {
  :where(:root) .app { grid-template-columns: 104px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  :where(:root) .cuerpo > .lateral {
    top: 14px; width: 76px; height: calc(100dvh - 28px); margin: 14px 0 14px 14px; z-index: 90;
    border: 1px solid var(--borde); border-radius: 22px;
    -webkit-backdrop-filter: var(--cab-vidrio); backdrop-filter: var(--cab-vidrio);
    transition: width 0.42s var(--cab-suave), background-color 0.3s, box-shadow 0.3s;
  }
  :where(:root) .cuerpo > .lateral:hover,
  :where(:root) .cuerpo > .lateral:has(:focus-visible),
  :where(:root) .cuerpo > .lateral:has(.menu-cuenta:not(.oculta)) {
    width: 264px; background-color: rgba(19, 17, 52, 0.97); box-shadow: 30px 0 80px -20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
  :where(:root) .cuerpo > .lateral .marca { padding: 0 19px; white-space: nowrap; }
  :where(:root) .cuerpo > .lateral #pestanas { padding: 10px 11px 12px; overflow-x: hidden; scrollbar-width: none; }
  :where(:root) .cuerpo > .lateral #pestanas::-webkit-scrollbar { display: none; }
  :where(:root) .cuerpo > .lateral #pestanas button { height: 42px; padding: 0 16px; gap: 15px; border-radius: 13px; flex: none; }
  /* El rótulo de grupo, plegado, es una línea; abierto, vuelve a ser texto. Misma altura: nada salta. */
  :where(:root) .cuerpo > .lateral #pestanas .grupo {
    position: relative; flex: none; display: flex; align-items: center; height: 26px; margin: 8px 0 0; padding: 0 16px;
    color: transparent; white-space: nowrap; transition: color 0.25s;
  }
  :where(:root) .cuerpo > .lateral #pestanas .grupo[hidden] { display: none; }
  :where(:root) .cuerpo > .lateral #pestanas .grupo::before { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 1px; background: var(--lateral-linea); transition: opacity 0.25s; }
  :where(:root) .cuerpo > .lateral:is(:hover, :has(:focus-visible), :has(.menu-cuenta:not(.oculta))) #pestanas .grupo { color: var(--lateral-texto-suave); }
  :where(:root) .cuerpo > .lateral:is(:hover, :has(:focus-visible), :has(.menu-cuenta:not(.oculta))) #pestanas .grupo::before { opacity: 0; }
  /* Plegado solo se ven los íconos: el texto de cada apartado, la marca y la cuenta aparecen al abrir. */
  :where(:root) .cuerpo > .lateral #pestanas button { font-size: 0; }
  :where(:root) .cuerpo > .lateral #pestanas button::after { display: none; }
  :where(:root) .cuerpo > .lateral :is(.marca-txt, .cuenta-fila .quien, .cuenta-fila .cuenta-mas) { opacity: 0; transition: opacity 0.25s; }
  :where(:root) .cuerpo > .lateral:is(:hover, :has(:focus-visible), :has(.menu-cuenta:not(.oculta))) #pestanas button { font-size: 0.9rem; }
  :where(:root) .cuerpo > .lateral:is(:hover, :has(:focus-visible), :has(.menu-cuenta:not(.oculta))) #pestanas button.no-disponible::after { display: inline; }
  :where(:root) .cuerpo > .lateral:is(:hover, :has(:focus-visible), :has(.menu-cuenta:not(.oculta))) :is(.marca-txt, .cuenta-fila .quien) { opacity: 1; }
  :where(:root) .cuerpo > .lateral:is(:hover, :has(:focus-visible), :has(.menu-cuenta:not(.oculta))) .cuenta-fila .cuenta-mas { opacity: 0.6; }
  :where(:root) .cuerpo > .lateral .cuenta.pie-lateral { padding: 10px 11px 12px; }
  :where(:root) .cuerpo > .lateral .cuenta-fila { padding: 6px 9px; gap: 12px; }

  :where(:root) .barra {
    top: 14px; margin: 14px 18px 0 0; padding: 0 14px; border: 1px solid var(--borde); border-radius: 18px;
    background-color: var(--cab-barra-fondo); box-shadow: var(--sombra);
    -webkit-backdrop-filter: var(--cab-vidrio); backdrop-filter: var(--cab-vidrio);
  }
  :where(:root) .cabecera { padding: 22px 18px 12px 4px; }
  :where(:root) main { padding: 6px 18px 60px 4px; }
  :where(:root) :is(#marco-triage, .marco) { height: calc(100dvh - 84px); }
  :where(:root) body[data-vista="azure"] .marco { height: calc(100dvh - 84px - 86px); }
  :where(:root) .felix { top: 14px; right: 14px; bottom: 14px; border-radius: 24px; z-index: 95; }
  :where(:root) .felix.pagina { height: calc(100dvh - 84px - 28px); border-radius: 18px; }
  :where(:root) .doc-previa { top: 84px; }
}

/* ------------------------------------------------------------------ entrada: portada e inicio de sesión */
/* Comunes: la caja llega animada, el título destella y el botón principal va en degradado con barrido. */
:where(:root) .entrada { isolation: isolate; }
:where(:root) .entrada-caja { border-radius: 24px; box-shadow: var(--sombra-alta); animation: cab-llega 0.9s var(--cab-suave) 0.1s both; }
@keyframes cab-llega { from { opacity: 0; transform: translateY(26px) scale(0.97); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
:where(:root) .entrada-promesa h1 { font-size: clamp(2rem, 3.6vw, 3rem); letter-spacing: -0.03em; line-height: 1.08; max-width: 13ch; }
:where(:root) .entrada-promesa h1 em {
  background: linear-gradient(100deg, #e0b3ff, #8586ff 60%, #e0b3ff); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: cab-destello 6s linear infinite;
}
@keyframes cab-destello { to { background-position: -200% 0; } }
:where(:root) .entrada-promesa li { opacity: 0; animation: cab-sube 0.6s var(--cab-suave) forwards; }
:where(:root) .entrada-promesa li:nth-child(1) { animation-delay: 0.45s; }
:where(:root) .entrada-promesa li:nth-child(2) { animation-delay: 0.55s; }
:where(:root) .entrada-promesa li:nth-child(3) { animation-delay: 0.65s; }
:where(:root) .entrada-promesa li:nth-child(4) { animation-delay: 0.75s; }
@keyframes cab-sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
:where(:root) .entrada-boton, :where(:root) .entrada-caja .entrada-boton { position: relative; overflow: hidden; border-radius: 13px; }
:where(:root) .entrada-boton.principal, :where(:root) .entrada-caja .entrada-boton.principal {
  background: var(--cab-degradado); border-color: transparent; color: #ffffff; box-shadow: 0 8px 28px -6px rgba(91, 92, 255, 0.75);
}
:where(:root) .entrada-boton.principal:hover { background: var(--cab-degradado); filter: brightness(1.12); box-shadow: 0 10px 36px -4px rgba(91, 92, 255, 0.95); }
:where(:root) .entrada-boton.principal::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  transform: translateX(-120%); animation: cab-barrido 3.4s ease-in-out infinite;
}
@keyframes cab-barrido { 55%, 100% { transform: translateX(120%); } }
:where(:root) .entrada-sello { background: linear-gradient(135deg, rgba(91, 92, 255, 0.5), rgba(109, 40, 217, 0.5)); color: #ffffff; box-shadow: 0 0 24px rgba(91, 92, 255, 0.5); }
/* Solo en oscuro: toda la entrada sobre la aurora, con la caja de vidrio. En claro, el panel de
   marca sigue azul noche y la caja es blanca (marca/entrada.css). */
:where(:root[data-theme="dark"]) .entrada { background: #0a0920; }
:where(:root[data-theme="dark"]) .entrada-marca {
  background: rgba(23, 21, 59, 0.35); border-right: 1px solid var(--borde);
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px); background-size: 26px 26px;
}
:where(:root[data-theme="dark"]) .entrada-panel { background: transparent; }
:where(:root[data-theme="dark"]) .entrada-caja {
  background: rgba(255, 255, 255, 0.06); border-color: var(--borde);
  -webkit-backdrop-filter: var(--cab-vidrio); backdrop-filter: var(--cab-vidrio);
}
:where(:root[data-theme="dark"]) .entrada-boton:not(.principal), :where(:root[data-theme="dark"]) .entrada-caja .entrada-boton:not(.principal) {
  background: rgba(255, 255, 255, 0.08); border-color: var(--borde); color: #ffffff;
}
:where(:root[data-theme="dark"]) .entrada-boton:not(.principal):hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(156, 158, 255, 0.6); }
:where(:root[data-theme="dark"]) .entrada-nota { background: rgba(255, 255, 255, 0.04); }
:where(:root[data-theme="dark"]) .entrada-niveles li { background: rgba(255, 255, 255, 0.03); }

@media (prefers-reduced-motion: reduce) {
  :root *, :root *::before, :root *::after {
    animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important;
  }
}