/* =========================================================================
   The Show — tokens del sistema visual
   =========================================================================

   La única fuente de valores. Colores, tipografía, espaciado, radios, bordes,
   motion y layout viven aquí y en ningún otro sitio. Ninguna hoja de estilos ni
   ninguna plantilla escribe un literal: todas consumen estas variables.

   El dashboard de la sesión 4 (Next.js) hereda este archivo tal cual. Por eso
   el vocabulario está pensado en dos capas:

     1. PRIMITIVAS  — la rampa cruda (--gray-100, --text-lg, --space-4).
                      No tienen opinión sobre dónde se usan.
     2. SEMÁNTICAS  — el nombre del trabajo (--color-surface, --text-body).
                      Apuntan a una primitiva.

   Los componentes usan SIEMPRE las semánticas. Así, cambiar el fondo de las
   tarjetas es mover una línea, no buscar por todo el proyecto.

   Reglas del sistema, para que se cumplan solas:
     · Modo claro y nada más. Sin @media (prefers-color-scheme).
     · Dos pesos tipográficos: 400 y 500. No existe --weight-semibold.
     · Bordes hairline. Sin sombras. Sin gradientes.
     · Los números grandes van en 400, con tracking negativo y tabular-nums.
   ========================================================================= */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------------
     PRIMITIVAS · Color
     Rampa neutra, prácticamente sin croma. El sistema es monocromático: el
     color no informa de nada por sí solo, solo la jerarquía.
     --------------------------------------------------------------------- */
  --gray-0:   #ffffff;
  --gray-25:  #fcfcfd;
  --gray-50:  #f8f8f9;
  --gray-100: #f2f2f4;
  --gray-150: #ebebee;
  --gray-200: #e3e3e7;
  --gray-300: #d2d2d8;
  --gray-400: #adadb6;
  --gray-500: #8b8b95;
  --gray-600: #6c6c76;
  --gray-700: #4d4d56;
  --gray-800: #2f2f36;
  --gray-900: #1b1b20;
  --gray-950: #0f0f12;

  /* Los únicos tres sitios donde entra croma, y siempre desaturado: estado
     positivo, estado negativo y el anillo de foco. Nada más lleva color. */
  --accent-positive-surface: #edf4ef;
  --accent-positive-border:  #cbdfd2;
  --accent-positive-text:    #2f5d40;

  --accent-negative-surface: #f9eeee;
  --accent-negative-border:  #e6cbcb;
  --accent-negative-text:    #6f3232;

  --accent-focus: #3d7de0;

  /* ---------------------------------------------------------------------
     PRIMITIVAS · Tipografía
     Inter, con la pila del sistema detrás. En macOS el respaldo es SF, que
     cae muy cerca; en el resto, la que haya.
     --------------------------------------------------------------------- */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-2xs: 11px;
  --text-xs:  12px;
  --text-sm:  13px;
  --text-md:  14px;
  --text-lg:  15px;
  --text-xl:  18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 36px;
  --text-5xl: 48px;

  /* Dos pesos para el texto. El énfasis normal se hace con color y tamaño, no
     engordando la letra. */
  --weight-regular: 400;
  --weight-medium:  500;

  --leading-none:   1;
  --leading-tight:  1.2;
  --leading-snug:   1.35;
  --leading-normal: 1.55;

  --tracking-tight:  -0.02em;
  --tracking-hero:   -0.04em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* ---------------------------------------------------------------------
     PRIMITIVAS · Espaciado — base 4px
     --------------------------------------------------------------------- */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------------------------------------------------------------------
     PRIMITIVAS · Radios
     --------------------------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 999px;

  /* ---------------------------------------------------------------------
     PRIMITIVAS · Bordes y motion
     --------------------------------------------------------------------- */
  --border-width-hairline: 0.5px;
  --border-width-regular:  1px;

  --duration-fast: 120ms;
  --duration-base: 180ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* =====================================================================
     SEMÁNTICAS
     A partir de aquí, lo que usan los componentes.
     ===================================================================== */

  /* =====================================================================
     MATERIAL — Liquid Glass
     =====================================================================

     El material va en el CHROME: sidebar, toolbar, contenedor de tarjeta. Ahí
     la interfaz puede retroceder. Las cifras van sobre la hoja más sólida de
     todas, porque lo que tiene que avanzar es el contenido.

     Nunca cristal sobre cristal. Una hoja por nivel de profundidad: si una
     tarjeta translúcida contiene otra, lo que se ve a través de la segunda es
     la primera y no el fondo, y el efecto se ensucia en vez de dar profundidad.

     Cuatro niveles, de más transparente a más sólido. El orden no es
     decorativo: es la distancia al dato.
     --------------------------------------------------------------------- */
  --glass-sidebar-bg: rgba(255, 255, 255, 0.44);
  --glass-sidebar-filter: blur(30px) saturate(185%);
  --glass-toolbar-bg: rgba(255, 255, 255, 0.50);
  --glass-toolbar-filter: blur(30px) saturate(185%);
  /* Tarjeta y tabla van más sólidas de lo que pedía el encargo (.72 y .84).
     Con esos valores, el texto de caption sobre la esquina morada del fondo se
     quedaba en 4.21:1 y no llegaba a AA. Subirlas es lo que manda la regla: la
     legibilidad gana siempre, y el cristal del chrome no se toca. */
  --glass-card-bg: rgba(255, 255, 255, 0.78);
  --glass-card-filter: blur(34px) saturate(170%);
  --glass-table-bg: rgba(255, 255, 255, 0.88);
  --glass-table-filter: blur(40px) saturate(150%);

  /* El anillo de refracción y el reflejo especular. En «opaco» se apagan
     poniendo estas dos en none. */
  --lens-filter: blur(2px) brightness(1.14) saturate(1.7);
  --lens-grosor: 2.5px;
  --spec-opacidad: 1;

  /* Sombra de tarjeta. Seis capas: dos de caída y cuatro insets que dibujan el
     canto biselado. Sin los insets el cristal parece una lámina plana. */
  --sombra-card:
    0 16px 48px rgba(70, 55, 110, 0.12),
    0 2px 8px rgba(70, 55, 110, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(255, 255, 255, 0.40),
    inset 1px 0 0 rgba(255, 255, 255, 0.55),
    inset -1px 0 0 rgba(255, 255, 255, 0.55);


  /* --- Fondo -----------------------------------------------------------
     Campo estático de cuatro luces. Existe para que el material tenga algo que
     refractar: sobre gris plano, la translucidez no se distingue de una
     opacidad cualquiera. Fijo y sin animación — un fondo que se mueve detrás de
     una tabla de cifras es una distracción, no un efecto.
     --------------------------------------------------------------------- */
  --fondo-base: #f4f3f0;
  /* Las luces estaban cargadas a la izquierda: el sidebar quedaba sobre lavanda
     saturada y el área de contenido casi blanca, donde el cristal no tiene nada
     que refractar. Se baja la de arriba a la izquierda y se traen las otras
     hacia el centro y la derecha, que es donde están las tarjetas. */
  --fondo-luces:
    radial-gradient(620px 460px at 6% -10%, rgba(136, 116, 222, 0.22), transparent 58%),
    radial-gradient(760px 560px at 88% 2%, rgba(70, 156, 226, 0.34), transparent 60%),
    radial-gradient(700px 520px at 52% 104%, rgba(244, 154, 118, 0.28), transparent 60%),
    radial-gradient(560px 420px at 68% 46%, rgba(112, 214, 192, 0.22), transparent 62%),
    radial-gradient(520px 400px at 34% 34%, rgba(136, 116, 222, 0.16), transparent 62%);

  /* --- Superficies --------------------------------------------------- */
  --color-canvas:         var(--fondo-base);
  --color-surface:        var(--glass-card-bg);
  --color-surface-solida: rgba(255, 255, 255, 0.92);
  --color-surface-sunken: rgba(255, 255, 255, 0.55);
  --color-surface-hover:  rgba(255, 255, 255, 0.60);
  --color-surface-inverse: var(--gray-950);

  /* --- Texto ---------------------------------------------------------- */
  /* Los tres niveles pasan AA sobre las tres superficies. gray-500 se queda en
     la rampa para lo que no es texto (bordes al pasar por encima): sobre blanco
     da 3.4:1 y no llega al 4.5 que pide el texto normal. */
  /* Contraste suave, no negro puro sobre blanco puro. Los tres pasan AA sobre
     los cuatro niveles de material CON el fondo de color detrás — comprobado,
     no supuesto. */
  --color-text:           #1d1d1f;   /* el de Apple, sin tocar */
  --color-text-secondary: #55555a;   /* #6e6e73 no llegaba a AA sobre el fondo */
  --color-text-tertiary:  #66666b;   /* #86868b se quedaba en 3.6:1 */
  --color-text-inverse:   var(--gray-0);
  --color-text-on-inverse-muted: var(--gray-400);

  /* --- Bordes --------------------------------------------------------- */
  --color-border:         var(--gray-200);
  --color-border-strong:  var(--gray-300);
  --color-border-inverse: var(--gray-800);
  --border-hairline: var(--border-width-hairline) solid var(--color-border);
  --border-hairline-strong: var(--border-width-hairline) solid var(--color-border-strong);

  /* --- Estados -------------------------------------------------------- */
  --color-positive-surface: var(--accent-positive-surface);
  --color-positive-border:  var(--accent-positive-border);
  --color-positive-text:    var(--accent-positive-text);
  --color-negative-surface: var(--accent-negative-surface);
  --color-negative-border:  var(--accent-negative-border);
  --color-negative-text:    var(--accent-negative-text);
  --color-neutral-surface:  var(--gray-100);
  --color-neutral-text:     var(--gray-600);

  /* Aviso permanente: el que dice que estas cifras no son la liquidación. No
     es un error ni un éxito, es una advertencia de fondo. Va en neutro para
     que se lea sin gritar. */
  --color-nota-surface: var(--gray-100);
  --color-nota-border:  var(--gray-200);
  --color-nota-text:    var(--gray-700);

  /* Modo vista: la barra que avisa de que estás mirando como productor.
     Tiene que verse siempre y no parecerse a un error ni a un éxito: no ha
     fallado nada, simplemente el sistema responde con menos permisos. */
  --color-vista-surface: var(--gray-0);
  --color-vista-text:    var(--gray-900);
  --color-vista-borde:   var(--gray-900);
  --altura-barra-vista:  38px;

  /* Menú desplegable de la cuenta, sobre la barra oscura. */
  --menu-ancho: 220px;

  /* Encabezado del dashboard. La jerarquía sale del TAMAÑO y del color, nunca
     del peso: los dos únicos pesos siguen siendo 400 y 500. */
  --text-metric-hero: 40px;              /* «Venta acumulada» */
  --text-centavos: 19px;                 /* los centavos, a media escala */
  --text-metric-kpi:  var(--text-2xl);   /* los secundarios, todos iguales */
  /* Dentro del panel abierto hay dos niveles, no uno: las principales
     —ingreso e inversión— y las de apoyo. Cinco cifras del mismo tamaño no
     dicen por dónde entrar. */
  --text-metric-panel: var(--text-2xl);
  --text-metric-panel-menor: var(--text-lg);

  /* Columnas de cada grupo de KPIs. Fijas, para que no queden huérfanos: el
     grupo de venta son tres y el de contexto dos, y ni uno ni otro se parte
     dejando una tarjeta sola en su fila. */
  --kpi-cols-venta: 3;
  --kpi-cols-contexto: 2;

  /* Barra de progreso de aforo. Solo se dibuja cuando hay capacidad: sin
     denominador no hay barra, ni siquiera vacía — una barra a cero se lee como
     «no ha vendido nada», que es una afirmación, no un hueco. */
  --barra-alto:      6px;
  --barra-fondo:     var(--gray-150);
  --barra-relleno:   var(--gray-900);

  /* Aviso de dato viejo. Va en el encabezado del dashboard y no se puede
     cerrar: mirar números de hace horas creyéndolos de ahora es peor que no
     mirar nada. */
  --color-obsoleto-surface: var(--gray-900);
  --color-obsoleto-text:    var(--gray-0);

  /* La curva de venta. Trazo en el color del texto, retícula en el borde. */
  --color-curva-trazo:    var(--gray-900);
  --color-curva-referencia: var(--gray-400);
  --color-curva-reticula: var(--color-border);
  --curva-grosor: 1.5px;

  --color-focus: var(--accent-focus);

  /* --- Acento y tintes de sección --------------------------------------
     Cada sección del sidebar con su tinte. Ayuda a distinguir de un vistazo el
     «Shows» del panel del «Shows» de administración, que se llaman igual y
     hacen cosas distintas. */
  --color-acento: #0071e3;
  --color-acento-tinte: rgba(0, 113, 227, 0.15);
  --tinte-panel:   #0071e3;
  --tinte-historico: #8874de;
  --tinte-admin:   #d98324;
  --tinte-campanas: #2fa37a;
  --tinte-usuarios: #d1568c;
  --focus-width: 2px;
  --focus-offset: 2px;

  /* --- Roles tipográficos --------------------------------------------- */
  --text-body:   var(--text-lg);
  --text-label:  var(--text-sm);
  --text-caption: var(--text-xs);
  --text-title:  var(--text-2xl);
  --text-subtitle: var(--text-xl);
  --text-section: var(--text-md);
  /* El número grande de una métrica. Peso 400 a propósito: el tamaño ya hace
     todo el trabajo, y engordarlo lo ensucia. */
  --text-metric: var(--text-3xl);
  --text-metric-lg: var(--text-4xl);

  /* --- Radios concéntricos ---------------------------------------------
     El radio interior sale del exterior menos el padding. Dos radios iguales
     anidados se leen como cajas dentro de cajas; derivados, se leen como una
     sola pieza con capas. */
  --radius-card:    22px;
  --radius-card-padding: 7px;
  --radius-interior: calc(var(--radius-card) - var(--radius-card-padding));  /* 15px */
  --radius-control: 11px;
  --radius-pill:    var(--radius-full);

  /* --- Motion ------------------------------------------------------------
     Curva de resorte: sobrepasa un poco y vuelve. Es lo que hace que un
     elemento parezca tener masa en vez de aparecer. */
  --resorte: cubic-bezier(0.34, 1.4, 0.64, 1);
  --duracion-resorte: 280ms;

  /* --- Sidebar ----------------------------------------------------------- */
  --sidebar-ancho: 232px;
  --toolbar-alto: 52px;
  --scroll-edge-alto: 36px;
  --seg-ancho: 62px;        /* ancho de cada tramo del control segmentado */
  --info-tamano: 15px;      /* el disco del ícono de información */
  --tooltip-ancho: 230px;
  /* En un teléfono los 230px caben, pero pegados al canto: se acota al ancho
     de pantalla menos el aire de la tarjeta. */
  --tooltip-ancho-telefono: min(230px, calc(100vw - var(--space-8)));

  /* --- Puntos de ruptura ------------------------------------------------
     Se declaran aquí porque son parte del vocabulario, pero OJO: una
     @media no puede leer una custom property. En app.css el número va
     escrito a mano y estas variables son la referencia — y lo que consume
     el dashboard de la sesión 4 desde JS.
     ---------------------------------------------------------------------- */
  --breakpoint-sm: 640px;
  --breakpoint-md: 900px;
  --breakpoint-lg: 1200px;

  /* --- Layout ---------------------------------------------------------- */
  --layout-max-width: 1080px;
  --layout-narrow:    640px;
  --layout-form:      420px;
  --layout-gutter:    var(--space-6);
  --header-height:    52px;

  /* --- Densidad de controles ------------------------------------------- */
  --control-height:      34px;
  --control-height-sm:   26px;
  --control-padding-x:   var(--space-3);
  --control-padding-x-sm: var(--space-2);
  /* Lo que Apple pide para un objetivo táctil. No es el tamaño del elemento:
     es el área que responde al dedo. */
  --tap-minimo: 44px;

  --cell-padding-y:      var(--space-3);
  --cell-padding-x:      var(--space-3);

  /* ---------------------------------------------------------------------
     LISTA AGRUPADA (inset grouped list)
     La lista de shows deja de ser una tabla. Tres zonas por fila: identidad a
     la izquierda, dinero a la derecha, chevron de affordance. Se pierde la
     comparación columna contra columna; con siete shows gana la legibilidad.
     Si algún día son treinta, la tabla vuelve a tener sentido.
     --------------------------------------------------------------------- */
  --fila-pad-y: 15px;
  --fila-pad-x: 16px;

  /* El tercer peso, y el único. Excepción deliberada a la regla de dos:
     nombre e ingreso son el primer nivel de la fila, uno a cada lado, y a 500
     no se despegaban de la metadata que llevan debajo. La regla venía del
     sistema de Apple, donde el texto se lee sobre fondos limpios; aquí una
     línea mezcla texto y cifras, y las cifras en tabular necesitan algo más de
     cuerpo para pesar lo mismo que las letras. No se usa en ningún otro sitio:
     si aparece en un tercer selector, es que dejó de ser una excepción. */
  --peso-dato-primario: 600;

  --text-fila-titulo: 15px;
  --text-fila-meta:   11.5px;
  --text-fila-monto:  15.5px;
  --tracking-fila-titulo: -0.018em;
  --tracking-monto:       -0.028em;
  --tracking-cifra:       -0.03em;

  /* Separador insertado: empieza donde empieza el texto, no en el canto de la
     tarjeta. Es lo que hace que cada fila se lea como una unidad y no como un
     renglón de una hoja de cálculo. */
  --separador-alto:   0.5px;
  --separador-inset:  16px;
  --color-separador-inset: rgba(0, 0, 0, 0.11);

  /* La fila abierta se despega del plano de la lista. El problema de que el
     panel se confundiera con la fila siguiente no era de grosor de línea: era
     de plano. Una línea más gruesa no separa dos cosas que están a la misma
     altura. */
  --lift-margen: var(--space-2);
  --lift-radio:  18px;
  --lift-fondo:  rgba(255, 255, 255, 0.97);
  --lift-sombra:
    0 10px 30px rgba(70, 55, 110, 0.16),
    0 2px 6px rgba(70, 55, 110, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 0 0 var(--border-width-hairline) var(--color-anillo-seleccion);

  /* Chevrones. Son los únicos íconos de la lista: la jerarquía sale de la
     tipografía, no de tiles de color al inicio de cada fila. */
  --chevron-tamano: 13px;
  --color-chevron:  #c7c7cc;
  --color-chevron-tenue: #d1d1d6;   /* shows pasados */

  /* Tiles de métrica dentro del panel. */
  --tile-radio: var(--radius-lg);
  --tile-pad-y: 11px;
  --tile-pad-x: 13px;
  --tile-fondo: rgba(0, 0, 0, 0.038);
  --tile-fondo-verde: rgba(52, 199, 89, 0.11);
  --text-tile-label: 10px;
  --text-tile-cifra: 20px;

  /* Lista de pares etiqueta/valor. */
  --pares-radio: var(--radius-lg);
  --pares-fondo: rgba(0, 0, 0, 0.03);
  --pares-inset: 14px;
  --pares-pad-y: var(--space-3);
  --pares-pad-x: 13px;

  --text-enlace-detalle: 12.5px;

  /* --- Verde de movimiento ---------------------------------------------
     La venta de hoy es el número que cambia; por eso es el único que lleva
     color. #248A3D es el verde de Apple, pero sobre el tile verde se queda en
     4.01:1 y el número mide 20px en peso 400 — no es «texto grande» por WCAG,
     así que necesita 4.5. Oscurecido lo justo para pasar sin salirse de la
     familia. En material Claro la tarjeta baja a .62 de opacidad y el peor caso
     cae otra vez a 4.34, así que el verde se fija por el ajuste más exigente de
     los tres, no por el intermedio. */
  --color-verde: #1e7433;

  /* El anillo azul de la fila seleccionada es decoración, no texto: puede ser
     el #007AFF exacto. El enlace en acento SÍ es texto de 12.5px, y #007AFF
     da 3.7:1 sobre el tile — no llega. Dos tokens, no uno. */
  --color-anillo-seleccion: rgba(0, 122, 255, 0.24);
  --color-acento-texto: #0062cc;
}

/* En pantallas sin densidad doble, medio píxel no se puede pintar: el borde o
   desaparece o el navegador lo redondea a uno entero de forma inconsistente. Se
   pide uno entero y se compensa aclarando el color, para que el peso visual
   siga siendo el de un hairline. */
/* Ancho de teléfono: el campo de luces se recalcula.
   Los radios estaban en píxeles (520–760px) para una ventana de escritorio. A
   390px de ancho las cinco luces miden entre 1.3 y 2 veces la pantalla, se
   solapan enteras y el campo se aplana en un lavado azul arriba y naranja
   abajo. En unidades de viewport cada una vuelve a ocupar su tercio, y como el
   fondo va fijo, al hacer scroll se sigue viendo un campo con regiones y no
   una esquina teñida. */
@media (max-width: 430px) {
  :root {
    --fondo-luces:
      radial-gradient(78vw 32vh at 10% 2%,  rgba(136, 116, 222, 0.20), transparent 62%),
      radial-gradient(86vw 30vh at 96% 18%, rgba(70, 156, 226, 0.28), transparent 62%),
      radial-gradient(80vw 32vh at 16% 60%, rgba(112, 214, 192, 0.20), transparent 64%),
      radial-gradient(92vw 34vh at 90% 92%, rgba(244, 154, 118, 0.26), transparent 62%),
      radial-gradient(70vw 26vh at 44% 40%, rgba(136, 116, 222, 0.14), transparent 66%);
  }
}

@media (-webkit-max-device-pixel-ratio: 1), (max-resolution: 1dppx) {
  :root {
    --border-width-hairline: 1px;
    --color-border: var(--gray-150);
    --color-border-strong: var(--gray-200);
  }
}


/* =========================================================================
   NIVELES DE MATERIAL
   =========================================================================
   Tres ajustes, guardados en la fila del usuario. Ninguno es modo oscuro: los
   tres son claros, y lo único que cambia es cuánto se ve a través del cristal.
   ========================================================================= */

/* Claro: el material casi desaparece y el fondo se cuela más. */
[data-material="claro"] {
  --glass-sidebar-bg: rgba(255, 255, 255, 0.24);
  --glass-toolbar-bg: rgba(255, 255, 255, 0.30);
  /* .62 dejaba el terciario en 4.47:1 con las tres luces más fuertes apiladas
     detrás: por debajo de AA por poco, y ahora importa más porque «+N hoy» bajó
     a terciario y vive justo sobre esta superficie. Se sube la tarjeta, no se
     oscurece el texto: la jerarquía se queda como está. */
  --glass-card-bg:    rgba(255, 255, 255, 0.66);
  --glass-table-bg:   rgba(255, 255, 255, 0.74);
  --color-surface:        var(--glass-card-bg);
  --color-surface-solida: rgba(255, 255, 255, 0.78);
  --color-surface-sunken: rgba(255, 255, 255, 0.38);
  --color-surface-hover:  rgba(255, 255, 255, 0.46);
}

/* Opaco: se acabó el cristal. Sin translucidez, sin desenfoque, sin anillo de
   refracción, sin reflejo y sin el difuminado del borde de scroll.
   Sigue siendo claro: esto no es un tema oscuro, es un interruptor de efecto. */
[data-material="opaco"] {
  --glass-sidebar-bg: #ffffff;
  --glass-toolbar-bg: #ffffff;
  --glass-card-bg:    #ffffff;
  --glass-table-bg:   #ffffff;
  --glass-sidebar-filter: none;
  --glass-toolbar-filter: none;
  --glass-card-filter: none;
  --glass-table-filter: none;
  --lens-filter: none;
  --lens-grosor: 0px;
  --spec-opacidad: 0;
  --color-surface:        #ffffff;
  --color-surface-solida: #ffffff;
  --color-surface-sunken: var(--gray-100);
  --color-surface-hover:  var(--gray-50);
  --fondo-luces: none;
  --lift-fondo: #ffffff;
  --lift-sombra:
    0 2px 10px rgba(70, 55, 110, 0.10),
    0 0 0 var(--border-width-hairline) var(--color-border-strong);
  --tile-fondo: var(--gray-100);
  --tile-fondo-verde: #e9f7ee;
  --pares-fondo: var(--gray-100);
  --sombra-card:
    0 1px 2px rgba(70, 55, 110, 0.06),
    0 0 0 var(--border-width-hairline) var(--color-border);
}

/* =========================================================================
   ACCESIBILIDAD
   =========================================================================
   Estas dos ganan SIEMPRE, por encima de lo que el usuario haya guardado. La
   preferencia del sistema es una declaración sobre cómo esa persona necesita
   ver, no sobre cómo prefiere que se vea.

   La especificidad está calculada para eso: `:root[data-material]` pesa más que
   `[data-material="claro"]`.
   ========================================================================= */

@media (prefers-reduced-transparency: reduce) {
  :root,
  :root[data-material] {
    --glass-sidebar-bg: #ffffff;
    --glass-toolbar-bg: #ffffff;
    --glass-card-bg:    #ffffff;
    --glass-table-bg:   #ffffff;
    --glass-sidebar-filter: none;
    --glass-toolbar-filter: none;
    --glass-card-filter: none;
    --glass-table-filter: none;
    --lens-filter: none;
    --lens-grosor: 0px;
    --spec-opacidad: 0;
    --color-surface:        #ffffff;
    --color-surface-solida: #ffffff;
    --color-surface-sunken: var(--gray-100);
    --color-surface-hover:  var(--gray-50);
    --fondo-luces: none;
      --lift-fondo: #ffffff;
    --lift-sombra:
      0 2px 10px rgba(70, 55, 110, 0.10),
      0 0 0 var(--border-width-hairline) var(--color-border-strong);
    --tile-fondo: var(--gray-100);
    --tile-fondo-verde: #e9f7ee;
    --pares-fondo: var(--gray-100);
  --sombra-card:
      0 1px 2px rgba(70, 55, 110, 0.06),
      0 0 0 var(--border-width-hairline) var(--color-border);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root,
  :root[data-material] {
    --duracion-resorte: 1ms;
    --duration-fast: 1ms;
    --duration-base: 1ms;
    /* El reflejo sigue al puntero: para quien pide menos movimiento, se apaga
       aunque el resto del cristal siga puesto. */
    --spec-opacidad: 0;
  }
}

/* Sin backdrop-filter no hay cristal que valga: se cae a superficies sólidas.
   La pantalla tiene que ser legible en un navegador que no lo soporte, no
   «parecida». */
@supports not (backdrop-filter: blur(1px)) {
  :root,
  :root[data-material] {
    --glass-sidebar-bg: #ffffff;
    --glass-toolbar-bg: #ffffff;
    --glass-card-bg:    #ffffff;
    --glass-table-bg:   #ffffff;
    --lens-filter: none;
    --lens-grosor: 0px;
    --color-surface:        #ffffff;
    --color-surface-solida: #ffffff;
    --lift-fondo: #ffffff;
    --color-surface-sunken: var(--gray-100);
  }
}