/*
 * estilos.css — los estilos de Ajustes › Apariencia › Estilo.
 *
 * Los mismos cuatro de EduTrix (docs/Estilo_Suave.md, Estilo_Cristal.md y
 * Estilo_Contraste.md en el repositorio edutrix), traducidos a las piezas de
 * DOCTRIX: riel del menú, barra superior, cifras de Inicio, tablas, campos,
 * botones y diálogos. «Clásico» es sistema.css tal cual y no pone data-estilo.
 *
 * Todo va bajo body[data-estilo="…"] (lo pone js/apariencia.js, y antes de
 * pintar el arranque de index.html). Se carga después de sistema.css: primero
 * se redefinen las variables de sistema.css —así lo que ya las lee cambia
 * solo— y después las piezas que necesitan otra forma.
 *
 * Lo que NO se toca: las hojas que imitan el papel (vista previa de
 * documentos, rótulos, horarios, certificación, visor de PDF). Deben verse
 * igual que el PDF o el Word que se descarga, con cualquier estilo. Por eso
 * las tablas se tocan solo dentro de .table-wrap, y nada aquí cambia sus
 * letras. Al imprimir, los cuatro estilos son iguales (bloque final).
 */

/* ═════════════════════════════════════════════════════════════════════════
   SUAVE — marco claro redondeado, paneles blancos que flotan, mucho aire,
   cifras grandes y un solo acento. Sin transparencias.
   ═════════════════════════════════════════════════════════════════════════ */
body[data-estilo="suave"] {
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --sv-lienzo: #e6e9ef;
  --sv-marco: #f5f6f8;
  --sv-panel: #ffffff;
  --sv-campo: #f3f4f7;
  --sv-hueco: #eef0f3;
  --sv-linea: #eceef2;
  --sv-sombra: 0 1px 2px rgba(20, 22, 28, .04), 0 4px 18px rgba(20, 22, 28, .06);
  --sv-sombra-pastilla: 0 1px 2px rgba(20, 22, 28, .06), 0 6px 16px rgba(20, 22, 28, .14);
  --sv-sombra-alta: 0 2px 6px rgba(20, 22, 28, .08), 0 24px 56px rgba(20, 22, 28, .22);

  --dx-canvas: var(--sv-marco);
  --dx-canvas-subtle: var(--sv-hueco);
  --dx-surface: var(--sv-panel);
  --dx-surface-raised: var(--sv-panel);
  --dx-surface-muted: var(--sv-marco);
  --dx-sidebar: transparent;
  --campo-fondo: var(--sv-campo);
  --surface-glass: var(--sv-hueco);
  --surface-glass-hover: rgba(20, 22, 28, .04);
  --dx-text: #14161c;
  --dx-text-secondary: #3b4150;
  --dx-text-muted: #5a6273;
  --text-faint: #646c7c;
  --dx-border: var(--sv-linea);
  --dx-border-strong: #dfe2e8;
  --radius-sm: 12px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --shadow-lg: var(--sv-sombra-alta);
  --shadow-xl: var(--sv-sombra-alta);
  --h-fila: 52px;
  background: var(--sv-lienzo);
}
body.dark[data-estilo="suave"] {
  --sv-lienzo: #050608;
  --sv-marco: #0e0f12;
  --sv-panel: #17181d;
  --sv-campo: #1f2026;
  --sv-hueco: #1c1d22;
  --sv-linea: #24262c;
  --sv-sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 18px rgba(0, 0, 0, .35);
  --sv-sombra-pastilla: 0 1px 2px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .45);
  --sv-sombra-alta: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 56px rgba(0, 0, 0, .8);
  --surface-glass-hover: rgba(255, 255, 255, .05);
  --dx-text: #eeeff2;
  --dx-text-secondary: #c3c7d0;
  --dx-text-muted: #9ba1ae;
  --text-faint: #8b91a0;
  --dx-border-strong: #2a2c33;
}

/* El marco: la app entera dentro de un panel redondeado sobre el lienzo. */
@media (min-width: 768px) {
  body[data-estilo="suave"] #app { inset: 14px; width: auto; height: auto; border-radius: 30px; background: var(--sv-marco); box-shadow: 0 1px 3px rgba(20, 22, 28, .06); }
}
body[data-estilo="suave"] .main-area { background: var(--sv-marco); }
body[data-estilo="suave"] .sidebar { background: transparent; border-right: 0; }
body[data-estilo="suave"] .nav-rail { border-right: 0; }
body[data-estilo="suave"] .sidebar .brand-icon { background: var(--sv-panel); border: 0; border-radius: 14px; box-shadow: var(--sv-sombra); }
body[data-estilo="suave"] .nav-area { border-radius: 14px; }
body[data-estilo="suave"] .nav-area:hover { background: rgba(20, 22, 28, .04); }
body[data-estilo="suave"] .nav-area.active { background: var(--sv-panel); color: var(--text-main); box-shadow: var(--sv-sombra-pastilla); }
body[data-estilo="suave"] .nav-area.active svg { color: var(--primary-texto, var(--primary)); }
body[data-estilo="suave"][data-nivel="sobrio"] .nav-area.active svg { color: var(--text-main); }
body[data-estilo="suave"] .sidebar-footer { border-top: 0; }
@media (min-width: 768px) {
  body[data-estilo="suave"] .nav-panel { background: var(--sv-panel); border: 0; border-radius: 0 24px 24px 0; box-shadow: var(--sv-sombra-alta); }
}
body[data-estilo="suave"] .sidebar .nav-item.active { background: var(--sv-hueco); }

/* Barra superior: sin barra; título grande y botones blancos cuadrados. */
body[data-estilo="suave"] .topbar { background: transparent; border-bottom: 0; padding: 18px 28px 6px; }
body[data-estilo="suave"] .topbar-title h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -.03em; }
body[data-estilo="suave"] .btn-theme { width: 40px; height: 40px; border: 0; border-radius: 12px; background: var(--sv-panel); box-shadow: var(--sv-sombra); }
body[data-estilo="suave"] .btn-theme:hover { background: var(--sv-panel); color: var(--text-main); box-shadow: var(--sv-sombra-pastilla); }
body[data-estilo="suave"] .page-content { padding: 18px 28px 28px; }

/* Botones: rectángulos redondeados (no cápsulas: eso es de Cristal). */
body[data-estilo="suave"] .btn { border-radius: 12px; }
body[data-estilo="suave"] .btn-primary { box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 70%, transparent); }
body[data-estilo="suave"] :is(.btn-secondary, .btn-outline, .btn-outline-primary) { background: var(--sv-panel); border: 1px solid var(--dx-border-strong); color: var(--text-main); }
body[data-estilo="suave"] :is(.btn-secondary, .btn-outline, .btn-outline-primary):hover:not(:disabled) { background: var(--sv-panel); border-color: color-mix(in srgb, var(--text-main) 22%, transparent); color: var(--text-main); }

/* Campos: relleno gris sin borde; el borde aparece al pasar y al enfocar. */
body[data-estilo="suave"] :is(#app, .modal-backdrop) :is(input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"],
  input[type="time"], input[type="search"], input[type="tel"], input[type="url"], input:not([type]), select, textarea) {
  border-color: transparent;
  border-radius: 12px;
  background-color: var(--sv-campo);
}
body[data-estilo="suave"] :is(#app, .modal-backdrop) :is(input, select, textarea):hover { border-color: var(--dx-border-strong); }
body[data-estilo="suave"] :is(#app, .modal-backdrop) :is(input, select, textarea):focus { border-color: var(--primary); background-color: var(--sv-panel); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 16%, transparent); }

/* Paneles blancos que flotan. */
body[data-estilo="suave"] :is(.card, .stat-card, .table-wrap, .ap-bloque, .ini-bloque, .cfg-contenido > .card) {
  border: 0;
  border-radius: 20px;
  background: var(--sv-panel);
  box-shadow: var(--sv-sombra);
}
body[data-estilo="suave"] .ini-bloque { padding: 18px 22px 10px; }
body[data-estilo="suave"] .ini-lista { border-top: 0; }
body[data-estilo="suave"] .ini-lista > li:last-child { border-bottom: 0; }
body[data-estilo="suave"] .ini-cifras { gap: 16px; border: 0; background: transparent; }
body[data-estilo="suave"] .ini-cifra { padding: 20px 22px; border: 0 !important; border-radius: 20px; background: var(--sv-panel); box-shadow: var(--sv-sombra); }
body[data-estilo="suave"] .ini-cifra strong { order: 2; font-size: 1.875rem; font-weight: 500; letter-spacing: -.035em; }
body[data-estilo="suave"] .ini-cifra span { order: 1; font-weight: 500; }
body[data-estilo="suave"] .ini-accesos button { border: 0; border-radius: 20px; background: var(--sv-panel); box-shadow: var(--sv-sombra); }
body[data-estilo="suave"] .ini-accesos button:hover { background: var(--sv-panel); box-shadow: var(--sv-sombra-pastilla); }
body[data-estilo="suave"] .ini-acceso-ico { border-radius: 12px; }

/* Tablas: dentro del panel, encabezado gris sin fondo, filas de 52 px. */
body[data-estilo="suave"] .table-wrap { overflow: hidden; }
body[data-estilo="suave"] .table-wrap thead { background: transparent; border-bottom: 1px solid var(--sv-linea); }
body[data-estilo="suave"] .table-wrap th { font-size: .78rem; letter-spacing: .01em; text-transform: none; background: var(--sv-panel) !important; box-shadow: 0 1px 0 var(--sv-linea) !important; }
body[data-estilo="suave"] .table-wrap td { height: 52px; border-bottom-color: var(--sv-linea); }
body[data-estilo="suave"] .table-wrap tbody tr:last-child td { border-bottom: 0; }
body[data-estilo="suave"] .table-panel { border: 0; border-radius: 20px; background: var(--sv-panel); box-shadow: var(--sv-sombra); overflow: hidden; }
body[data-estilo="suave"] .table-panel .table-wrap { box-shadow: none; border-radius: 0; }
body[data-estilo="suave"] .table-panel-head { background: transparent; border-bottom: 1px solid var(--sv-linea); }

/* Selectores segmentados y pestañas: la opción elegida es una pastilla blanca. */
body[data-estilo="suave"] :is(.ap-segmentos, .dx-alcance) { border: 0; border-radius: 14px; background: var(--sv-hueco); padding: 4px; }
body[data-estilo="suave"] :is(.ap-segmentos button[aria-checked="true"], .dx-alcance button[aria-pressed="true"], .dx-alcance button.active) { background: var(--sv-panel); color: var(--text-main); border-radius: 10px; box-shadow: var(--sv-sombra-pastilla); }
body.dark[data-estilo="suave"] :is(.ap-segmentos button[aria-checked="true"], .dx-alcance button[aria-pressed="true"], .dx-alcance button.active, .nav-area.active, .cfg-pestana[aria-current="page"]) { background: #2a2c33; }
body[data-estilo="suave"] .cfg-pestana { border-radius: 12px; }
body[data-estilo="suave"] .cfg-pestana[aria-current="page"] { background: var(--sv-panel); color: var(--text-main); box-shadow: var(--sv-sombra-pastilla); }
body[data-estilo="suave"] .cfg-pestana[aria-current="page"] .nav-icon { color: var(--primary-texto, var(--primary)); }

/* Lo que flota. */
body[data-estilo="suave"] :is(.modal, .modal-content, .modal-box) { border: 0; border-radius: 26px; box-shadow: var(--sv-sombra-alta); }
body[data-estilo="suave"] .modal-backdrop { background: rgba(14, 18, 30, .32); }
body.dark[data-estilo="suave"] .modal-backdrop { background: rgba(0, 0, 0, .55); }
body[data-estilo="suave"] .toast { border: 0; border-radius: 18px; box-shadow: var(--sv-sombra-alta); }
body[data-estilo="suave"] .badge { border-radius: 8px; }
@media (max-width: 767px) {
  body[data-estilo="suave"] #bottom-nav { border-top: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -6px 24px rgba(20, 22, 28, .08); }
}

/* ═════════════════════════════════════════════════════════════════════════
   CRISTAL — vidrio translúcido sobre un ambiente de luz de color, el
   «Liquid Glass» de Apple. Traslado fiel de edutrix/web/src/ui/estilos/
   cristal.css (mismos materiales, mismas medidas) a las piezas de DOCTRIX:
     ambiente  luces que nacen del matiz del tema (--bh/--bs/--bl, js/branding.js)
     contenido láminas de vidrio teñido, sin desenfoque (tarjetas, tablas, cifras)
     navegación vidrio con canto de luz y volumen (riel, barra superior, barra inferior)
     flotantes vidrio grueso o «tapa» opaca (diálogos, avisos, panel del menú)
   Encima de un vidrio van controles, nunca otro vidrio: elevados (botones,
   lo elegido) y hundidos (campos, pistas de los selectores).
   ═════════════════════════════════════════════════════════════════════════ */
body[data-estilo="cristal"] {
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI Variable Text', 'Segoe UI', system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', 'Segoe UI Variable Display', system-ui, sans-serif;

  /* Tinta: más contraste que en un fondo sólido, porque detrás hay color (medida en EduTrix: 4,5:1). */
  --dx-text: #0b1220;
  --dx-text-secondary: #283244;
  /* #364050: el gris más claro que llega a 4,5:1 sobre las zonas más
     saturadas del ambiente (rosa y azul), donde algunos rótulos van sin lámina. */
  --dx-text-muted: #364050;
  --text-faint: #364050;
  --dx-warning: #653a03;
  --dx-border: rgba(15, 23, 42, .09);
  --dx-border-strong: rgba(15, 23, 42, .17);

  /* Lo elegido: cristal teñido del color de la paleta (EduTrix, cristal.css). */
  --cr-tinte-arriba: hsl(var(--bh) 75% 62% / .32);
  --cr-tinte-abajo: hsl(var(--bh) 70% 42% / .2);
  --cr-tinte-sombra: hsl(var(--bh) 70% 32% / .4);
  --cr-elegido-reflejo: radial-gradient(120% 90% at 50% -35%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 60%);
  --cr-elegido-tinte: linear-gradient(180deg, var(--cr-tinte-arriba), var(--cr-tinte-abajo));
  --cr-elegido-canto: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .25) 45%, rgba(255, 255, 255, .55));
  --cr-elegido-sombra: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -8px 14px -10px var(--cr-tinte-sombra), 0 6px 16px -8px var(--cr-tinte-sombra);
  /* 21 %: con 38 % (y aún con 28 %), en temas de luminosidad media
     (Turquesa, Bosque) quedaba en 3,8:1 sobre su propio tinte. */
  --cr-elegido-tinta: hsl(var(--bh) var(--bs) min(var(--bl), 21%));

  /* Materiales */
  --cr-vidrio: rgba(255, 255, 255, .5);
  --cr-vidrio-grueso: rgba(250, 251, 255, .88);
  /* .7/.6 (EduTrix .62/.5): el ambiente de DOCTRIX es más saturado y el gris
     de las láminas quedaba en 4,36:1 sobre el violeta. */
  --cr-lamina-capa: linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .6));
  --cr-boton: linear-gradient(180deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .3));
  --cr-boton-sombra: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -10px 18px -14px rgba(15, 23, 42, .18), 0 6px 16px -8px rgba(15, 23, 42, .22);
  --cr-reflejo: radial-gradient(130% 70% at 50% -25%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 62%);
  --cr-relleno: rgba(255, 255, 255, .55);
  --cr-relleno-fuerte: rgba(255, 255, 255, .82);
  --cr-borde: rgba(255, 255, 255, .7);
  --cr-brillo: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .28);
  --cr-sombra-flota: 0 2px 6px rgba(15, 23, 42, .06), 0 24px 60px -12px rgba(15, 23, 42, .28);
  --cr-desenfoque: blur(26px) saturate(185%);
  --cr-desenfoque-grueso: blur(24px) saturate(180%);
  --cr-grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 .16 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  --cr-velo-borde: hsl(var(--bh) 55% 96% / .62);
  --cr-velo: rgba(15, 20, 35, .22);
  --cr-tapa: rgba(248, 250, 255, .94);
  --cr-tapa-hoja: rgb(248, 250, 255);
  /* Profundidad: canto de luz (el borde que concentra la luz), volumen y tres alturas de sombra. */
  --cr-canto: linear-gradient(160deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .4) 28%, rgba(255, 255, 255, .12) 55%, rgba(255, 255, 255, .62));
  --cr-canto-contenido: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .5) 40%, rgba(255, 255, 255, .7));
  --cr-volumen: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(255, 255, 255, .3), inset 0 -22px 36px -28px rgba(15, 23, 42, .12);
  --cr-sombra-contenido: 0 1px 1px rgba(15, 23, 42, .04), 0 3px 8px -2px rgba(15, 23, 42, .06), 0 18px 40px -18px rgba(15, 23, 42, .22);
  --cr-sombra-nav: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 28px -8px rgba(15, 23, 42, .18), 0 40px 70px -40px rgba(15, 23, 42, .32);
  /* Controles sobre el vidrio */
  --cr-hundido: rgba(15, 23, 42, .045);
  --cr-hundido-foco: rgba(255, 255, 255, .92);
  --cr-hundido-sombra: inset 0 1px 2px rgba(15, 23, 42, .08), inset 0 0 0 1px rgba(15, 23, 42, .07), 0 1px 0 rgba(255, 255, 255, .7);
  --cr-elevado: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .8));
  --cr-elevado-sombra: inset 0 1px 0 #fff, 0 0 0 1px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .08), 0 4px 12px -4px rgba(15, 23, 42, .16);
  --cr-tonal: hsl(var(--bh) 80% 55% / .16);
  --cr-tonal-texto: hsl(var(--bh) var(--bs) 26%);
  /* Navegación: vidrio neutro (nivel Sobrio); teñido con el tema en Marca y Completo, abajo. */
  --cr-nav: var(--cr-vidrio);
  --cr-nav-activo: var(--cr-relleno-fuerte);
  --cr-nav-activo-tinta: var(--dx-text);

  /* Variables de sistema.css */
  --dx-canvas: transparent;
  --dx-canvas-subtle: var(--cr-hundido);
  --dx-surface: rgba(255, 255, 255, .55);
  --dx-surface-raised: rgba(255, 255, 255, .8);
  --dx-surface-muted: rgba(255, 255, 255, .42);
  --dx-sidebar: transparent;
  --campo-fondo: var(--cr-hundido);
  /* Lo que se pinta como campo (buscadores, fechas, casillas con su etiqueta,
     cajas de solo lectura) toma el material hundido de los campos de EduTrix.
     Quedaban en blanco opaco: parches de papel sobre el vidrio. */
  --bg-input: var(--cr-hundido);
  --input-bg: var(--cr-hundido);
  --surface-glass: rgba(255, 255, 255, .42);
  --surface-glass-hover: rgba(255, 255, 255, .5);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --shadow-lg: var(--cr-sombra-flota);
  --shadow-xl: var(--cr-sombra-flota);

  /* El ambiente: cinco luces de color que nacen del matiz del tema y de sus vecinos. */
  --cr-ambiente:
    radial-gradient(42% 46% at 8% 10%, hsl(var(--bh) 100% 64% / .95), transparent 70%),
    radial-gradient(38% 44% at 92% 6%, hsl(calc(var(--bh) + 60) 100% 70% / .85), transparent 70%),
    radial-gradient(46% 50% at 82% 92%, hsl(calc(var(--bh) - 50) 95% 66% / .85), transparent 70%),
    radial-gradient(40% 44% at 14% 90%, hsl(calc(var(--bh) + 150) 90% 72% / .7), transparent 70%),
    radial-gradient(34% 34% at 52% 46%, hsl(calc(var(--bh) + 25) 95% 82% / .65), transparent 70%),
    linear-gradient(155deg, hsl(var(--bh) 70% 90%), hsl(calc(var(--bh) + 40) 65% 88%));
  letter-spacing: -.006em;
}
/* Niveles Marca y Completo: el menú, la cabecera y las láminas toman el color del tema. */
body[data-estilo="cristal"]:is([data-nivel="marca"], [data-nivel="completo"]) {
  --cr-nav: color-mix(in srgb, hsl(var(--bh) 85% 60%) 16%, var(--cr-vidrio));
  --cr-nav-activo-tinta: hsl(var(--bh) var(--bs) 22%);
  --cr-barra-inferior: color-mix(in srgb, hsl(var(--bh) 85% 60%) 14%, var(--cr-vidrio-grueso));
  --cr-velo-borde: hsl(var(--bh) 70% 91% / .6);
  --cr-lamina-capa: linear-gradient(180deg,
    color-mix(in srgb, hsl(var(--bh) 85% 60%) 10%, rgba(255, 255, 255, .7)),
    color-mix(in srgb, hsl(var(--bh) 85% 60%) 10%, rgba(255, 255, 255, .6)));
}
body.dark[data-estilo="cristal"] {
  /* 34 % / 26 %: con 55 %, en temas claros (Ámbar, Bosque) el blanco de lo
     elegido quedaba en 4,1–4,4:1. */
  --cr-tinte-arriba: hsl(var(--bh) 70% 34% / .36);
  --cr-tinte-abajo: hsl(var(--bh) 70% 26% / .22);
  --cr-tinte-sombra: rgba(0, 0, 0, .45);
  --cr-elegido-reflejo: radial-gradient(120% 90% at 50% -35%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%);
  --cr-elegido-canto: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .08) 45%, rgba(255, 255, 255, .22));
  --cr-elegido-sombra: inset 0 1px 1px rgba(255, 255, 255, .28), 0 6px 16px -8px var(--cr-tinte-sombra);
  --cr-elegido-tinta: #fff;
  --dx-text: #f4f6fb;
  --dx-text-secondary: #dde2ec;
  --dx-text-muted: #c8d0de;
  --text-faint: #c8d0de;
  --dx-warning: #fbbf24;
  --dx-border: rgba(255, 255, 255, .09);
  --dx-border-strong: rgba(255, 255, 255, .18);
  --cr-vidrio: rgba(24, 28, 40, .5);
  --cr-vidrio-grueso: rgba(26, 30, 44, .88);
  /* .76/.8 (EduTrix usa .58/.62): con el ambiente de DOCTRIX, más saturado,
     el brillo verde se colaba detrás de las tablas y los encabezados quedaban
     en 2:1. */
  --cr-lamina-capa: linear-gradient(180deg, rgba(22, 26, 40, .76), rgba(20, 24, 36, .8));
  --cr-velo-borde: hsl(var(--bh) 35% 6% / .6);
  --cr-boton: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06));
  --cr-boton-sombra: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -10px 18px -14px rgba(0, 0, 0, .5), 0 6px 16px -8px rgba(0, 0, 0, .55);
  --cr-reflejo: radial-gradient(130% 70% at 50% -25%, rgba(255, 255, 255, .09), rgba(255, 255, 255, 0) 62%);
  --cr-relleno: rgba(255, 255, 255, .07);
  --cr-relleno-fuerte: rgba(255, 255, 255, .16);
  --cr-borde: rgba(255, 255, 255, .14);
  --cr-brillo: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .04);
  --cr-sombra-flota: 0 2px 8px rgba(0, 0, 0, .35), 0 30px 70px -14px rgba(0, 0, 0, .7);
  --cr-velo: rgba(0, 0, 0, .45);
  --cr-tapa: rgba(28, 32, 46, .95);
  --cr-tapa-hoja: rgb(28, 32, 46);
  --cr-canto: linear-gradient(160deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .09) 30%, rgba(255, 255, 255, .03) 60%, rgba(255, 255, 255, .14));
  --cr-canto-contenido: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 45%, rgba(255, 255, 255, .1));
  --cr-volumen: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(255, 255, 255, .04), inset 0 -22px 36px -28px rgba(0, 0, 0, .45);
  --cr-sombra-contenido: 0 1px 1px rgba(0, 0, 0, .3), 0 18px 40px -18px rgba(0, 0, 0, .6);
  --cr-sombra-nav: 0 1px 2px rgba(0, 0, 0, .35), 0 12px 32px -8px rgba(0, 0, 0, .5), 0 40px 70px -40px rgba(0, 0, 0, .6);
  --cr-hundido: rgba(0, 0, 0, .24);
  --cr-hundido-foco: rgba(0, 0, 0, .32);
  --cr-hundido-sombra: inset 0 1px 2px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 1px 0 rgba(255, 255, 255, .04);
  --cr-elevado: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .09));
  --cr-elevado-sombra: inset 0 1px 0 rgba(255, 255, 255, .2), 0 0 0 1px rgba(255, 255, 255, .08), 0 1px 2px rgba(0, 0, 0, .4), 0 4px 12px -4px rgba(0, 0, 0, .5);
  --cr-tonal: hsl(var(--bh) 80% 60% / .2);
  --cr-tonal-texto: hsl(var(--bh) 90% 80%);
  --cr-nav: var(--cr-vidrio);
  --cr-nav-activo: rgba(255, 255, 255, .14);
  --cr-nav-activo-tinta: #fff;
  --dx-surface: rgba(255, 255, 255, .07);
  --dx-surface-raised: rgba(255, 255, 255, .1);
  --dx-surface-muted: rgba(255, 255, 255, .06);
  --surface-glass: rgba(255, 255, 255, .06);
  --surface-glass-hover: rgba(255, 255, 255, .05);
  --cr-ambiente:
    radial-gradient(38% 42% at 10% 12%, hsl(var(--bh) 85% 42% / .55), transparent 70%),
    radial-gradient(34% 40% at 90% 8%, hsl(calc(var(--bh) + 55) 85% 45% / .42), transparent 70%),
    radial-gradient(44% 48% at 80% 90%, hsl(calc(var(--bh) - 45) 80% 40% / .45), transparent 70%),
    radial-gradient(36% 40% at 16% 88%, hsl(calc(var(--bh) + 150) 70% 38% / .3), transparent 70%),
    linear-gradient(155deg, hsl(var(--bh) 45% 7%), hsl(calc(var(--bh) + 30) 40% 4%));
}
body.dark[data-estilo="cristal"]:is([data-nivel="marca"], [data-nivel="completo"]) {
  --cr-nav: color-mix(in srgb, hsl(var(--bh) 70% 45%) 18%, var(--cr-vidrio));
  --cr-nav-activo-tinta: #fff;
  --cr-barra-inferior: color-mix(in srgb, hsl(var(--bh) 70% 45%) 16%, var(--cr-vidrio-grueso));
  --cr-lamina-capa: linear-gradient(180deg,
    color-mix(in srgb, hsl(var(--bh) 70% 45%) 12%, rgba(22, 26, 40, .58)),
    color-mix(in srgb, hsl(var(--bh) 70% 45%) 12%, rgba(20, 24, 36, .62)));
}

/* ── Ambiente: una capa fija detrás de todo ──
   El color de base va en <html> y <body> queda transparente: con fondo propio, <body> pintaría
   encima de la capa del ambiente (z-index -1). */
html:has(> body[data-estilo="cristal"]) { background: hsl(var(--bh, 221) 45% 95%); }
html:has(> body.dark[data-estilo="cristal"]) { background: hsl(var(--bh, 221) 40% 6%); }
body[data-estilo="cristal"],
body.dark[data-estilo="cristal"] { background: transparent; }
body[data-estilo="cristal"]::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background: var(--cr-ambiente);
}
body[data-estilo="cristal"] #app { background: transparent; }
body[data-estilo="cristal"] .main-area { background: transparent; }
body[data-estilo="cristal"] :is(h1, h2, h3, .topbar-title h2) { font-family: var(--font-display); letter-spacing: -.015em; }
body[data-estilo="cristal"] :focus-visible { outline: 2px solid hsl(var(--bh) 90% 55% / .8); outline-offset: 2px; }

/* ── Navegación de vidrio: canto de luz como fondo del borde, volumen y desenfoque ── */
body[data-estilo="cristal"] :is(.sidebar, .topbar) {
  border: 1px solid transparent;
  background:
    var(--cr-grano) padding-box,
    linear-gradient(var(--cr-nav), var(--cr-nav)) padding-box,
    var(--cr-canto) border-box;
  -webkit-backdrop-filter: var(--cr-desenfoque);
  backdrop-filter: var(--cr-desenfoque);
  box-shadow: var(--cr-volumen), var(--cr-sombra-nav);
}
@media (min-width: 768px) {
  body[data-estilo="cristal"] .sidebar {
    position: relative;
    z-index: 50;
    margin: 12px 0 12px 12px;
    height: calc(100% - 24px);
    border-radius: 26px;
    scrollbar-width: none;
  }
  body[data-estilo="cristal"] .sidebar::-webkit-scrollbar { display: none; }
}
body[data-estilo="cristal"] .nav-rail { border-right: 0; }
body[data-estilo="cristal"] .sidebar .brand-icon { border: 0; border-radius: 14px; background: var(--cr-elevado); box-shadow: var(--cr-elevado-sombra); }
body[data-estilo="cristal"] .nav-area { border: 1px solid transparent; border-radius: 16px; color: var(--dx-text-secondary); font-weight: 500; }
body[data-estilo="cristal"] .nav-area:hover { background: rgba(255, 255, 255, .45); color: var(--text-main); }
body.dark[data-estilo="cristal"] .nav-area:hover { background: rgba(255, 255, 255, .07); }
/* El área elegida del riel: cristal teñido, como el grupo elegido del riel de
   EduTrix (antes era una pastilla blanca opaca, un parche de papel sobre el vidrio). */
body[data-estilo="cristal"] .nav-area.active {
  background:
    var(--cr-elegido-reflejo) padding-box,
    var(--cr-elegido-tinte) padding-box,
    var(--cr-elegido-canto) border-box;
  color: var(--cr-elegido-tinta);
  font-weight: 650;
  box-shadow: var(--cr-elegido-sombra);
}
body[data-estilo="cristal"] .sidebar-footer { border-top: 1px solid var(--dx-border); }
body[data-estilo="cristal"] .user-avatar {
  background: linear-gradient(140deg, hsl(var(--bh) 72% 48%), hsl(calc(var(--bh) + 12) 80% 36%)) !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 10px -2px hsl(var(--bh) 80% 40% / .45);
}
/* El panel de pantallas del menú y el de la cuenta: flotantes de vidrio grueso. */
/* El submenú es la tarjeta flotante del riel de EduTrix (.flotante): 260 px,
   alto según su contenido, a la altura del área pulsada (--nav-panel-top, de
   js/navegacion.js) y a 8 px del riel. Antes era un panel de alto completo
   pegado a la barra. */
@media (min-width: 768px) {
  body[data-estilo="cristal"] .nav-panel {
    width: 260px;
    padding: 10px 8px;
    gap: 0;
    border: 1px solid transparent;
    border-radius: 26px;
    background: linear-gradient(var(--cr-vidrio-grueso), var(--cr-vidrio-grueso)) padding-box, var(--cr-canto) border-box;
    -webkit-backdrop-filter: var(--cr-desenfoque);
    backdrop-filter: var(--cr-desenfoque);
    box-shadow: var(--cr-volumen), var(--cr-sombra-flota);
  }
  body[data-estilo="cristal"] .nav-panel-cabeza { gap: 6px; margin-bottom: 4px; padding: 4px 10px 8px; border-bottom: 1px solid var(--dx-border); }
  body[data-estilo="cristal"] .nav-panel-cabeza strong { font-size: .9375rem; font-weight: 600; color: var(--text-main); }
  body[data-estilo="cristal"] .sidebar .nav-panel .nav-item { min-height: 36px; margin: 1px 0; padding: 0 10px; border-radius: 12px; }
  /* El anillo de foco va por dentro: por fuera lo recortaba el borde de la tarjeta. */
  body[data-estilo="cristal"] .sidebar .nav-panel .nav-item:focus-visible { outline-offset: -2px; }
}
body[data-estilo="cristal"] .sidebar .cuenta-menu {
  border: 1px solid transparent;
  border-radius: 18px;
  background: linear-gradient(var(--cr-tapa), var(--cr-tapa)) padding-box, var(--cr-canto) border-box;
  box-shadow: var(--cr-volumen), var(--cr-sombra-flota);
}
/* Riel (≥768 px): el vidrio de la barra va en una capa de atrás (::before) y no
   en la barra misma. Un elemento con backdrop-filter se vuelve el contenedor de
   sus hijos fijos y lo único que estos pueden desenfocar: el menú de la cuenta y
   el panel de pantallas, que salen de la barra hacia la página, no desenfocaban
   la página sino nada, y se leía el texto de la tabla de atrás a través de
   ellos (el menú parecía un papel pegado encima). Con la capa aparte, los dos
   son vidrio de verdad. Las posiciones de abajo son las de antes, ahora
   contadas desde la ventana: 12 de margen de la barra + 1 de su borde. */
@media (min-width: 768px) {
  body[data-estilo="cristal"] .sidebar {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  body[data-estilo="cristal"] .sidebar::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border: 1px solid transparent;
    border-radius: inherit;
    background:
      var(--cr-grano) padding-box,
      linear-gradient(var(--cr-nav), var(--cr-nav)) padding-box,
      var(--cr-canto) border-box;
    -webkit-backdrop-filter: var(--cr-desenfoque);
    backdrop-filter: var(--cr-desenfoque);
    box-shadow: var(--cr-volumen), var(--cr-sombra-nav);
    pointer-events: none;
  }
  body[data-estilo="cristal"] .nav-panel {
    left: calc(var(--sidebar-w) + 20px);
    top: var(--nav-panel-top, 12px);
    bottom: auto;
    max-height: calc(100vh - var(--nav-panel-top, 12px) - 12px);
  }
  body[data-estilo="cristal"] .sidebar .cuenta-menu {
    left: calc(var(--sidebar-w) + 21px);
    bottom: 27px;
    padding: 8px;
    border-radius: 22px;
    background: linear-gradient(var(--cr-vidrio-grueso), var(--cr-vidrio-grueso)) padding-box, var(--cr-canto) border-box;
    -webkit-backdrop-filter: var(--cr-desenfoque-grueso);
    backdrop-filter: var(--cr-desenfoque-grueso);
  }
}
/* Dentro del menú: filas de radio 12 que al pasar se aclaran, y el plan como
   cristal teñido (su fondo crema opaco era otro recorte de papel). */
body[data-estilo="cristal"] .sidebar .cuenta-menu :is(.btn-logout, #sidebar-plan-badge, .cuenta-menu-app) { border-radius: 12px !important; }
body[data-estilo="cristal"] .sidebar-footer .cuenta-menu :is(#btn-abrir-cambio-password, #enlace-mi-cuenta-trix, #btn-logout-trix, #sidebar-plan-badge, .cuenta-menu-app):hover { background: var(--cr-relleno) !important; }
body[data-estilo="cristal"] .sidebar #sidebar-plan-nombre {
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 14%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 0 0 1px color-mix(in srgb, var(--warning) 22%, transparent);
}
body[data-estilo="cristal"] .cuenta-menu-quien { border-bottom-color: var(--cr-hundido); }
body[data-estilo="cristal"] .sidebar .nav-item { border-radius: 12px; }
/* La pantalla elegida en un panel del riel: cristal teñido, como el área
   elegida del riel y lo elegido en todas partes (era una pastilla blanca). */
body[data-estilo="cristal"] .sidebar .nav-item { border: 1px solid transparent; }
body[data-estilo="cristal"] .sidebar .nav-item.active {
  background: var(--cr-elegido-reflejo) padding-box, var(--cr-elegido-tinte) padding-box, var(--cr-elegido-canto) border-box;
  box-shadow: var(--cr-elegido-sombra);
  font-weight: 650;
}
/* !important: sistema.css le pone el color con !important al ítem activo. */
body[data-estilo="cristal"] .sidebar .nav-item.active,
body[data-estilo="cristal"] .sidebar .nav-item.active :is(span, .nav-icon) { color: var(--cr-elegido-tinta) !important; }

/* ── Cabecera: vidrio flotante de radio 20; el contenido pasa por debajo ── */
body[data-estilo="cristal"] .topbar {
  margin: 12px 12px 0;
  top: 12px;
  min-height: 60px;
  padding: 8px 10px 8px 18px;
  border-radius: 20px;
}
body[data-estilo="cristal"] .topbar-title h2 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }
/* El borde que se disuelve (el scroll edge effect de iOS 26): una franja fija detrás de la cabecera,
   con su propio desenfoque que crece hacia el borde y un velo del color del ambiente. Lo que pasa por
   debajo del vidrio llega ya esfumado: se ve luz y color, no letras que compitan con el título.
   Va de borde a borde, también detrás del menú (que queda encima, z-index 50): si empezaba donde
   termina el menú, arriba del menú se veía el ambiente tal cual y a la derecha ya aclarado, con un
   corte vertical a la altura del borde del menú (el mismo arreglo que EduTrix). */
body[data-estilo="cristal"] #app::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 39;
  height: 104px;
  pointer-events: none;
  background: linear-gradient(to bottom, var(--cr-velo-borde) 40%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
body[data-estilo="cristal"] .btn-theme {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 999px;
  background: var(--cr-elevado);
  color: var(--dx-text-secondary);
  box-shadow: var(--cr-elevado-sombra);
}
body[data-estilo="cristal"] .btn-theme:hover { background: var(--cr-elevado); color: var(--text-main); }
body[data-estilo="cristal"] .page-content { padding: 22px 24px 28px; }

/* ── Botones: cápsulas de vidrio; el principal, cristal teñido del color del tema ── */
body[data-estilo="cristal"] .btn {
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: -.005em;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
body[data-estilo="cristal"] .btn:active:not(:disabled) { transform: scale(.97); }
body[data-estilo="cristal"] :is(.btn-secondary, .btn-outline, .btn-outline-primary) {
  background: var(--cr-reflejo) padding-box, var(--cr-boton) padding-box, var(--cr-canto) border-box;
  color: var(--text-main);
  box-shadow: var(--cr-boton-sombra);
  -webkit-backdrop-filter: blur(12px) saturate(170%);
  backdrop-filter: blur(12px) saturate(170%);
}
body[data-estilo="cristal"] :is(.btn-secondary, .btn-outline, .btn-outline-primary):hover:not(:disabled) {
  background: var(--cr-reflejo) padding-box, linear-gradient(var(--cr-relleno-fuerte), var(--cr-relleno-fuerte)) padding-box, var(--cr-canto) border-box;
  color: var(--text-main);
  border-color: transparent;
}
/* El principal es cristal teñido: reflejo especular arriba, luz que se junta abajo, canto fino y
   sombra de su color. Se lee como vidrio por la luz, no por transparentar. */
body[data-estilo="cristal"] .btn-primary {
  /* El color del tema arriba y más oscuro abajo, con poca luz: con +17 % y
     .6 la mitad de arriba se aclaraba y el blanco de la letra quedaba en
     3,3:1 (aún con +6 % y .38, 4,3:1 en el teléfono). */
  --tinte-arriba: hsl(var(--bh) var(--bs) var(--bl) / .96);
  --tinte-abajo: hsl(var(--bh) var(--bs) calc(var(--bl) - 9%) / .98);
  --luz-arriba: rgba(255, 255, 255, .26);
  --luz-abajo: rgba(255, 255, 255, .38);
  --canto-btn: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .3) 42%, rgba(255, 255, 255, .12) 62%, rgba(255, 255, 255, .7));
  --vidrio-sombra:
    inset 0 1px 1px rgba(255, 255, 255, .75), inset 0 -1px 1px rgba(255, 255, 255, .3),
    inset 0 -12px 20px -12px hsl(var(--bh) var(--bs) calc(var(--bl) - 22%) / .65), 0 1px 2px hsl(var(--bh) var(--bs) calc(var(--bl) - 20%) / .3),
    0 10px 22px -8px hsl(var(--bh) var(--bs) var(--bl) / .6);
  background:
    radial-gradient(130% 95% at 50% -38%, var(--luz-arriba), rgba(255, 255, 255, .14) 52%, rgba(255, 255, 255, 0) 64%) padding-box,
    radial-gradient(75% 70% at 50% 128%, var(--luz-abajo), rgba(255, 255, 255, 0) 70%) padding-box,
    linear-gradient(180deg, var(--tinte-arriba), var(--tinte-abajo)) padding-box,
    var(--canto-btn) border-box;
  color: #fff;
  text-shadow: 0 1px 2px hsl(var(--bh) var(--bs) calc(var(--bl) - 22%) / .55);
  box-shadow: var(--vidrio-sombra);
}
body[data-estilo="cristal"] .btn-primary:hover:not(:disabled) {
  --tinte-arriba: hsl(var(--bh) var(--bs) calc(var(--bl) + 21%) / .95);
  --tinte-abajo: hsl(var(--bh) var(--bs) calc(var(--bl) + 1%) / .98);
  box-shadow: var(--vidrio-sombra);
}
body[data-estilo="cristal"] .btn-primary:disabled {
  --luz-arriba: rgba(255, 255, 255, .3);
  --luz-abajo: rgba(255, 255, 255, 0);
  --vidrio-sombra: inset 0 1px 1px rgba(255, 255, 255, .5);
  filter: saturate(.45);
}
body.dark[data-estilo="cristal"] .btn-primary {
  --tinte-arriba: hsl(var(--bh) var(--bs) calc(var(--bl-dark) + 2%) / .92);
  --tinte-abajo: hsl(var(--bh) var(--bs) calc(var(--bl-dark) - 16%) / .96);
  --luz-arriba: rgba(255, 255, 255, .42);
  --luz-abajo: rgba(255, 255, 255, .24);
  --canto-btn: linear-gradient(180deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .14) 42%, rgba(255, 255, 255, .05) 62%, rgba(255, 255, 255, .34));
  --vidrio-sombra:
    inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 -1px 1px rgba(255, 255, 255, .16), inset 0 -12px 20px -12px hsl(var(--bh) var(--bs) 8% / .7),
    0 1px 2px rgba(0, 0, 0, .4), 0 10px 24px -8px hsl(var(--bh) var(--bs) calc(var(--bl-dark) - 10%) / .55);
}
body[data-estilo="cristal"] .btn-ghost { border-color: transparent; background: transparent; box-shadow: none; }
body[data-estilo="cristal"] .btn-ghost:hover:not(:disabled) { background: var(--cr-relleno); }
body[data-estilo="cristal"] :is(.btn-danger, .btn-destructive-action:hover) { border-color: transparent; }
body[data-estilo="cristal"] .btn-danger {
  background: linear-gradient(180deg, #f0645b, #c9302a) padding-box;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 8px 20px -8px rgba(200, 40, 30, .6);
}
/* Dentro de tablas y diálogos los botones no desenfocan: detrás ya hay una lámina. */
body[data-estilo="cristal"] :is(.table-wrap, .modal, .card) .btn { -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ── Formularios: lo que se escribe está hundido ── */
body[data-estilo="cristal"] :is(#app, .modal-backdrop) :is(input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"],
  input[type="time"], input[type="search"], input[type="tel"], input[type="url"], input:not([type]), select, textarea) {
  border-color: transparent;
  border-radius: 12px;
  background-color: var(--cr-hundido);
  box-shadow: var(--cr-hundido-sombra);
  color: var(--text-main);
  transition: background-color .15s ease, box-shadow .15s ease;
}
body[data-estilo="cristal"] :is(#app, .modal-backdrop) textarea { border-radius: 14px; }
body[data-estilo="cristal"] :is(#app, .modal-backdrop) :is(input, select, textarea):hover:not(:disabled, :focus) { background-color: color-mix(in srgb, var(--cr-hundido) 70%, rgba(255, 255, 255, .5)); }
body[data-estilo="cristal"] :is(#app, .modal-backdrop) :is(input, select, textarea):focus {
  border-color: transparent;
  background-color: var(--cr-hundido-foco);
  box-shadow: inset 0 0 0 1px hsl(var(--bh) var(--bs) 50% / .55), 0 0 0 4px hsl(var(--bh) 90% 55% / .18);
}
body[data-estilo="cristal"] :is(#app, .modal-backdrop) :is(input, select, textarea):disabled { opacity: .55; }
/* El buscador de las listas y los desplegables propios (selector visual global) también son huecos. */
body[data-estilo="cristal"] :is(.search-bar, .custom-select-trigger, .global-custom-select .custom-select-trigger) {
  border-color: transparent !important;
  border-radius: 12px;
  background: var(--cr-hundido) !important;
  box-shadow: var(--cr-hundido-sombra);
}
body[data-estilo="cristal"] .search-bar { border-radius: 999px; }
body[data-estilo="cristal"] .search-bar input { background: transparent !important; box-shadow: none !important; }
body[data-estilo="cristal"] :is(.search-bar:focus-within, .custom-select-shell.open .custom-select-trigger) {
  background: var(--cr-hundido-foco) !important;
  box-shadow: inset 0 0 0 1px hsl(var(--bh) var(--bs) 50% / .55), 0 0 0 4px hsl(var(--bh) 90% 55% / .18);
}
/* La lista que se abre: vidrio grueso anclado al campo; la opción elegida, pastilla elevada. */
body[data-estilo="cristal"] .custom-select-menu {
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  padding: 6px;
  background: linear-gradient(var(--cr-vidrio-grueso), var(--cr-vidrio-grueso)) padding-box, var(--cr-canto) border-box !important;
  -webkit-backdrop-filter: var(--cr-desenfoque-grueso);
  backdrop-filter: var(--cr-desenfoque-grueso);
  box-shadow: var(--cr-volumen), var(--cr-sombra-flota) !important;
}
body[data-estilo="cristal"] .custom-select-option { border-radius: 10px; }
body[data-estilo="cristal"] .custom-select-option:hover { background: var(--cr-relleno); }
body[data-estilo="cristal"] .custom-select-option.is-selected { background: var(--cr-elevado); box-shadow: var(--cr-elevado-sombra); color: var(--text-main); }
/* Botón de una fila («Editar»): cápsula elevada pequeña. */
body[data-estilo="cristal"] .table-wrap :is(.btn-outline-primary, .btn-ghost) {
  border: 0;
  background: var(--cr-elevado);
  color: var(--cr-tonal-texto);
  box-shadow: var(--cr-elevado-sombra);
}
body.dark[data-estilo="cristal"] .table-wrap :is(.btn-outline-primary, .btn-ghost) { color: var(--primary-texto, var(--primary)); }
body[data-estilo="cristal"] label { font-weight: 600; color: var(--dx-text-secondary); }
body[data-estilo="cristal"] .form-section-title { border-bottom: 0; padding-bottom: 0; color: var(--text-main) !important; font-size: .8125rem; font-weight: 650; letter-spacing: -.005em; text-transform: none; }
/* Selectores segmentados: pista hundida; la opción elegida, cristal teñido
   del tema, como en EduTrix (antes una pastilla blanca, que sobre el vidrio
   se leía como un parche de papel). Mismo borde elegida o no: al cambiar de
   opción no cambia el tamaño, solo el material. */
body[data-estilo="cristal"] :is(.ap-segmentos, .dx-alcance) { border: 0; border-radius: 999px; padding: 3px; background: var(--cr-hundido); box-shadow: var(--cr-hundido-sombra); }
body[data-estilo="cristal"] :is(.ap-segmentos button, .dx-alcance button) { border: 1px solid transparent; border-radius: 999px; }
body[data-estilo="cristal"] :is(.ap-segmentos button[aria-checked="true"], .dx-alcance button[aria-pressed="true"], .dx-alcance button.active) {
  background: var(--cr-elegido-reflejo) padding-box, var(--cr-elegido-tinte) padding-box, var(--cr-elegido-canto) border-box;
  color: var(--cr-elegido-tinta);
  font-weight: 650;
  box-shadow: var(--cr-elegido-sombra);
}
/* Opciones grandes (temas y modos de Apariencia): tarjetas elevadas; la elegida, anillo del tema. */
body[data-estilo="cristal"] :is(.ap-tema, .ap-modos button) { border: 0; border-radius: 16px; background: var(--cr-elevado); box-shadow: var(--cr-elevado-sombra); }
body[data-estilo="cristal"] :is(.ap-tema, .ap-modos button):hover { background: var(--cr-relleno-fuerte); }
body[data-estilo="cristal"] :is(.ap-tema, .ap-modos button)[aria-checked="true"] {
  background: var(--cr-tonal);
  box-shadow: inset 0 0 0 2px hsl(var(--bh) var(--bs) calc(var(--bl) + 4%)), 0 4px 14px -4px hsl(var(--bh) var(--bs) var(--bl) / .35);
}
/* Pestañas de Ajustes: la elegida, pastilla como el menú. */
body[data-estilo="cristal"] .cfg-pestana { border-radius: 12px; }
body[data-estilo="cristal"] .cfg-pestana:hover { background: var(--cr-relleno); }
body[data-estilo="cristal"] .cfg-pestana[aria-current="page"] { background: var(--cr-nav-activo); color: var(--cr-nav-activo-tinta); box-shadow: var(--cr-brillo), 0 2px 8px rgba(15, 23, 42, .08); }

/* ── Contenido: láminas de vidrio teñido con reflejo y canto suave, sin desenfoque ── */
body[data-estilo="cristal"] :is(.card, .stat-card, .table-wrap, .table-panel, .ap-bloque, .ini-bloque, .ini-cifras, .ini-accesos button, .ge-root-grid > .ge-card) {
  border: 1px solid transparent;
  border-radius: 18px;
  background: var(--cr-reflejo) padding-box, var(--cr-lamina-capa) padding-box, var(--cr-canto-contenido) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--cr-sombra-contenido);
}
body.dark[data-estilo="cristal"] :is(.card, .stat-card, .table-wrap, .table-panel, .ap-bloque, .ini-bloque, .ini-cifras, .ini-accesos button, .ge-root-grid > .ge-card) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--cr-sombra-contenido);
}
body[data-estilo="cristal"] :is(.ini-cifras, .ini-accesos button, .ap-bloque) { border-radius: 20px; }
body[data-estilo="cristal"] .ini-bloque { padding: 14px 18px 6px; }
body[data-estilo="cristal"] .ini-lista { border-top: 0; }

/* ── Emitir: tipo de firma y barra de «Generar documento» en vidrio ──
   La firma eran dos cajas con borde de 2 px (la elegida, un aro morado
   grueso) y la barra pegada abajo, una franja blanca opaca que cortaba la
   lámina. Ahora las opciones son vidrio elevado y la elegida, cristal teñido
   como lo elegido en todas partes; la barra es vidrio esmerilado que deja ver
   el formulario que pasa por debajo, y el botón, el principal de Cristal. */
body[data-estilo="cristal"] .firma-tipo-btn {
  border: 1px solid transparent;
  border-radius: 16px;
  background: var(--cr-reflejo) padding-box, var(--cr-boton) padding-box, var(--cr-canto) border-box;
  box-shadow: var(--cr-boton-sombra);
  color: var(--text-main);
}
body[data-estilo="cristal"] .firma-tipo-btn small { color: var(--text-muted); }
body[data-estilo="cristal"] .firma-tipo-btn:hover:not(.active):not(.is-disabled) {
  background: var(--cr-reflejo) padding-box, linear-gradient(var(--cr-relleno-fuerte), var(--cr-relleno-fuerte)) padding-box, var(--cr-canto) border-box;
  color: var(--text-main);
}
body[data-estilo="cristal"] .firma-tipo-btn.active {
  background: var(--cr-elegido-reflejo) padding-box, var(--cr-elegido-tinte) padding-box, var(--cr-elegido-canto) border-box;
  box-shadow: var(--cr-elegido-sombra);
  color: var(--cr-elegido-tinta);
  font-weight: 650;
}
body[data-estilo="cristal"] .firma-tipo-btn.active small { color: var(--cr-elegido-tinta); opacity: .82; }
@media (min-width: 768px) {
  body[data-estilo="cristal"] #page-emitir .document-generation-actions {
    margin: 20px 0 0;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 22px;
    background: var(--cr-reflejo) padding-box, linear-gradient(var(--cr-vidrio), var(--cr-vidrio)) padding-box, var(--cr-canto) border-box;
    box-shadow: var(--cr-volumen), 0 10px 30px -14px rgba(15, 23, 42, .3);
    -webkit-backdrop-filter: var(--cr-desenfoque);
    backdrop-filter: var(--cr-desenfoque);
  }
}
/* !important: doctrix-redesign.css le pone color de fondo y borde con !important a .btn-generate-special
   y .btn-generate-confirm («Sí, Generar» de la confirmación, que lleva el mismo vidrio). */
body[data-estilo="cristal"] :is(#btn-abrir-confirmacion.btn-generate-special, #btn-confirmar-generar.btn-generate-confirm) {
  border: 1px solid transparent !important;
  background:
    radial-gradient(130% 95% at 50% -38%, var(--luz-arriba), rgba(255, 255, 255, .14) 52%, rgba(255, 255, 255, 0) 64%) padding-box,
    radial-gradient(75% 70% at 50% 128%, var(--luz-abajo), rgba(255, 255, 255, 0) 70%) padding-box,
    linear-gradient(180deg, var(--tinte-arriba), var(--tinte-abajo)) padding-box,
    var(--canto-btn) border-box !important;
  box-shadow: var(--vidrio-sombra);
}
body[data-estilo="cristal"] #btn-abrir-confirmacion.btn-generate-special { border-radius: 12px !important; }
body[data-estilo="cristal"] #btn-abrir-confirmacion .btn-generate-icon {
  border-color: rgba(255, 255, 255, .42);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .1));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
}
/* En el teléfono «Limpiar formulario» no cabe junto al principal y baja a su
   renglón: ahí, centrado y a todo el ancho; la barra, vidrio grueso (el
   desenfoque se apaga en pantallas táctiles, doctrix-redesign.css). */
@media (max-width: 767px) {
  body[data-estilo="cristal"] #botones-generar-wrap {
    border: 1px solid transparent !important;
    border-radius: 22px;
    padding: 8px !important;
    gap: 4px !important;
    background: var(--cr-reflejo) padding-box, linear-gradient(var(--cr-vidrio-grueso), var(--cr-vidrio-grueso)) padding-box, var(--cr-canto) border-box !important;
    box-shadow: var(--cr-volumen), 0 10px 30px -14px rgba(15, 23, 42, .3) !important;
  }
  body[data-estilo="cristal"] #botones-generar-wrap #btn-limpiar-form { flex: 1 1 100% !important; justify-content: center; min-height: 40px; }
}
body[data-estilo="cristal"] .ini-lista > li { border-bottom-color: var(--dx-border); }
body[data-estilo="cristal"] .ini-lista > li:last-child { border-bottom: 0; }
body[data-estilo="cristal"] .ini-bloque-cabeza h2 { font-size: .75rem; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--dx-text-muted); }
body[data-estilo="cristal"] .ini-cifra { padding: 16px 18px; border-left-color: var(--dx-border); }
body[data-estilo="cristal"] .ini-cifra:nth-child(n+3) { border-top-color: var(--dx-border); }
body[data-estilo="cristal"] .ini-cifra strong { order: 2; font-family: var(--font-display); font-size: 1.75rem; font-weight: 650; letter-spacing: -.03em; }
body[data-estilo="cristal"] .ini-cifra span { order: 1; font-size: .78rem; font-weight: 500; color: var(--dx-text-muted); }
body[data-estilo="cristal"] .ini-accesos button:hover { background: var(--cr-reflejo) padding-box, linear-gradient(var(--cr-relleno-fuerte), var(--cr-relleno-fuerte)) padding-box, var(--cr-canto-contenido) border-box; }
body.dark[data-estilo="cristal"] .ini-accesos button:hover { background: var(--cr-reflejo) padding-box, linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, .1)) padding-box, var(--cr-canto-contenido) border-box; }
/* Íconos de Inicio y círculo de la cuenta: degradado dentro del color del
   tema. Con 40° de giro, el turquesa terminaba en azul rey y no se leía del
   tema; con 16° sigue vivo y del mismo color. */
body[data-estilo="cristal"] .ini-acceso-ico {
  border-radius: 12px;
  background: linear-gradient(140deg, hsl(var(--bh) 72% 48%), hsl(calc(var(--bh) + 12) 80% 36%));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 10px -3px hsl(var(--bh) 80% 40% / .45);
}
/* Tablas: sin fondo de encabezado, filas de 46 px con líneas finas; al pasar, la fila se aclara. */
body[data-estilo="cristal"] .table-wrap { overflow: hidden; }
body[data-estilo="cristal"] .table-panel .table-wrap { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body[data-estilo="cristal"] .table-panel-head { background: transparent; border-bottom: 1px solid var(--dx-border); }
body[data-estilo="cristal"] .table-wrap :is(table, thead, tbody, tr, td) { background-color: transparent; }
body[data-estilo="cristal"] .table-wrap th {
  height: 40px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--dx-text-muted);
  background: transparent !important;
  box-shadow: 0 1px 0 var(--dx-border) !important;
}
@media (min-width: 768px) {
  /* El encabezado fijo de las tablas largas: vidrio, para que las filas pasen esmeriladas. */
  body[data-estilo="cristal"] .page-tabla .table-wrap thead th {
    background: color-mix(in srgb, hsl(var(--bh) 85% 60%) 6%, rgba(255, 255, 255, .4)) !important;
    -webkit-backdrop-filter: var(--cr-desenfoque-grueso);
    backdrop-filter: var(--cr-desenfoque-grueso);
  }
  body.dark[data-estilo="cristal"] .page-tabla .table-wrap thead th { background: rgba(22, 26, 40, .5) !important; }
}
body[data-estilo="cristal"] .table-wrap td { height: 46px; border-bottom-color: var(--dx-border); }
body[data-estilo="cristal"] .table-wrap tbody tr { transition: background .12s ease; }
body[data-estilo="cristal"] .table-wrap tbody tr:hover { background: rgba(255, 255, 255, .5); }
body.dark[data-estilo="cristal"] .table-wrap tbody tr:hover { background: rgba(255, 255, 255, .05); }
body[data-estilo="cristal"] .badge { border-radius: 999px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }

/* ── Lo que flota ── */
/* Diálogos: opacos (con cualquier transparencia se leía lo de abajo entre los campos), con un tinte
   suave de los colores del ambiente arriba, el reflejo y el canto de las láminas. */
body[data-estilo="cristal"] :is(.modal, .modal-content, .modal-box) {
  --hoja-fondo: var(--cr-tapa-hoja);
  --hoja-tinte: linear-gradient(165deg, hsl(var(--bh) 70% 93%), hsl(calc(var(--bh) + 40) 65% 95.5%) 32%, var(--hoja-fondo) 64%);
  border: 1px solid transparent;
  border-radius: 28px;
  background: var(--cr-reflejo) padding-box, var(--hoja-tinte) padding-box, var(--cr-canto) border-box;
  box-shadow: var(--cr-volumen), var(--cr-sombra-flota);
}
body.dark[data-estilo="cristal"] :is(.modal, .modal-content, .modal-box) {
  --hoja-tinte: linear-gradient(165deg, hsl(var(--bh) 38% 18%), hsl(calc(var(--bh) + 40) 30% 15%) 32%, var(--hoja-fondo) 64%);
}
/* La cabecera y el pie se quedan pegados al desplazar: transparentes, los
   campos pasaban por detrás del título y la ✕ y se leían a través (Crear
   operador). Llevan el color de la hoja en su sitio: arriba el tinte, abajo
   el fondo. */
body[data-estilo="cristal"] :is(.modal, .modal-content, .modal-box) :is(.modal-header, .modal-footer) { border-color: var(--dx-border); }
body[data-estilo="cristal"] :is(.modal, .modal-content, .modal-box) .modal-header { --hoja-cabeza: linear-gradient(100deg, hsl(var(--bh) 70% 93%), hsl(calc(var(--bh) + 40) 65% 95.5%)); background: var(--hoja-cabeza); }
body.dark[data-estilo="cristal"] :is(.modal, .modal-content, .modal-box) .modal-header { --hoja-cabeza: linear-gradient(100deg, hsl(var(--bh) 38% 18%), hsl(calc(var(--bh) + 40) 30% 15%)); }
body[data-estilo="cristal"] :is(.modal, .modal-content, .modal-box) .modal-footer { background: var(--hoja-fondo); }
body[data-estilo="cristal"] :is(.modal, .modal-content, .modal-box) :is(h2, h3) { font-weight: 700; letter-spacing: -.02em; }
body[data-estilo="cristal"] :is(.modal, .modal-content, .modal-box) .modal-close {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--cr-elevado);
  box-shadow: var(--cr-elevado-sombra);
}
body[data-estilo="cristal"] .modal-backdrop { background: var(--cr-velo); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Los avisos flotantes: vidrio grueso con canto. */
body[data-estilo="cristal"] .toast {
  border: 1px solid transparent;
  border-radius: 18px;
  background: linear-gradient(var(--cr-vidrio-grueso), var(--cr-vidrio-grueso)) padding-box, var(--cr-canto) border-box;
  -webkit-backdrop-filter: var(--cr-desenfoque-grueso);
  backdrop-filter: var(--cr-desenfoque-grueso);
  box-shadow: var(--cr-volumen), var(--cr-sombra-flota);
}

/* ── Teléfono: cabecera y barra inferior de vidrio; el contenido pasa por debajo ── */
@media (max-width: 767px) {
  body[data-estilo="cristal"] .topbar { margin: 8px 10px 0; top: 8px; padding: 8px 8px 8px 12px; border-radius: 18px; }
  body[data-estilo="cristal"] #app::before { height: 96px; }
  /* La barra inferior es densa (88 %) y lleva grano: el contenido pasa por debajo y no debe leerse a través. */
  body[data-estilo="cristal"] #bottom-nav {
    left: 12px;
    right: 12px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    width: auto;
    min-height: 64px;
    padding: 0 6px;
    border: 1px solid var(--cr-borde);
    border-radius: 32px;
    background: var(--cr-grano), linear-gradient(var(--cr-barra-inferior, var(--cr-vidrio-grueso)), var(--cr-barra-inferior, var(--cr-vidrio-grueso)));
    -webkit-backdrop-filter: var(--cr-desenfoque-grueso);
    backdrop-filter: var(--cr-desenfoque-grueso);
    box-shadow: var(--cr-brillo), var(--cr-sombra-flota);
  }
  /* Y el contenido llega a la barra ya esfumado: una franja fija abajo, como la de la cabecera. */
  body[data-estilo="cristal"] #app::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 39;
    height: calc(env(safe-area-inset-bottom, 0px) + 10px + 64px + 34px);
    pointer-events: none;
    background: linear-gradient(to top, var(--cr-velo-borde) 40%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    -webkit-mask-image: linear-gradient(to top, #000 55%, transparent);
    mask-image: linear-gradient(to top, #000 55%, transparent);
  }
  /* Lo elegido de la barra inferior: cristal teñido del color de la paleta, con
     reflejo y canto (EduTrix: la pastilla blanca sobre la barra de vidrio claro
     casi no se distinguía y se veía como un parche). */
  body[data-estilo="cristal"] .bottom-nav-item.active { position: relative; color: var(--cr-elegido-tinta); font-weight: 700; }
  body[data-estilo="cristal"] .bottom-nav-item.active::before {
    content: "";
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: 50%;
    width: max(100% - 6px, 68px);
    transform: translateX(-50%);
    z-index: -1;
    border-radius: 26px;
    border: 1px solid transparent;
    background:
      radial-gradient(120% 90% at 50% -35%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%) padding-box,
      var(--cr-elegido-tinte) padding-box,
      var(--cr-elegido-canto) border-box;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), inset 0 -8px 14px -10px var(--cr-tinte-sombra), 0 4px 12px -6px var(--cr-tinte-sombra);
  }
  body.dark[data-estilo="cristal"] .bottom-nav-item.active::before {
    background:
      radial-gradient(120% 90% at 50% -35%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%) padding-box,
      var(--cr-elegido-tinte) padding-box,
      var(--cr-elegido-canto) border-box;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .28), 0 4px 12px -6px var(--cr-tinte-sombra);
  }
}

/* ── Accesibilidad: menos transparencia, o un navegador sin desenfoque ── */
@media (prefers-reduced-transparency: reduce) {
  body[data-estilo="cristal"] :is(.sidebar, .topbar, #bottom-nav, .toast, .nav-panel) {
    background: var(--cr-tapa-hoja);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  body[data-estilo="cristal"] :is(.card, .stat-card, .table-wrap, .table-panel, .ap-bloque, .ini-bloque, .ini-cifras, .ini-accesos button, .ge-root-grid > .ge-card) { background: var(--cr-tapa-hoja); }
  body[data-estilo="cristal"] #app::before,
  body[data-estilo="cristal"] #app::after { display: none; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body[data-estilo="cristal"] :is(.sidebar, .topbar, #bottom-nav, .toast, .nav-panel) { background: var(--cr-tapa-hoja); }
}

/* ═════════════════════════════════════════════════════════════════════════
   CONTRASTE — menú negro, el trabajo en una gran hoja blanca, paneles gris
   muy claro sin sombra y un único color de acento.
   ═════════════════════════════════════════════════════════════════════════ */
body[data-estilo="contraste"] {
  --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --ct-lienzo: #e9ecea;
  --ct-hoja: #ffffff;
  --ct-panel: #f6f7f7;
  --ct-panel-borde: #eceeed;
  --ct-tabla-borde: #dcdfde;
  --ct-negro: #0b0b0c;
  --ct-negro-2: #18181b;
  --ct-negro-3: #232327;
  --ct-negro-texto: #e7e7ea;
  --ct-negro-tenue: #8d8d96;
  --ct-acento: var(--primary);
  --ct-acento-vivo: color-mix(in srgb, var(--primary) 82%, #fff);
  --ct-acento-suave: color-mix(in srgb, var(--primary) 10%, transparent);

  --dx-canvas: var(--ct-hoja);
  --dx-canvas-subtle: var(--ct-panel);
  --dx-surface: var(--ct-hoja);
  --dx-surface-raised: var(--ct-hoja);
  --dx-surface-muted: var(--ct-panel);
  --dx-sidebar: var(--ct-negro);
  --campo-fondo: var(--ct-hoja);
  --surface-glass: var(--ct-panel);
  --surface-glass-hover: rgba(17, 18, 20, .04);
  --dx-text: #111214;
  --dx-text-secondary: #3d4044;
  --dx-text-muted: #5f6368;
  --text-faint: #686c72;
  --dx-border: var(--ct-panel-borde);
  --dx-border-strong: var(--ct-tabla-borde);
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  background: var(--ct-lienzo);
}
body.dark[data-estilo="contraste"] {
  --ct-lienzo: #000000;
  --ct-hoja: #111214;
  --ct-panel: #18191c;
  --ct-panel-borde: #24262a;
  --ct-tabla-borde: #2c2f34;
  --ct-negro: #050506;
  --ct-acento-vivo: color-mix(in srgb, var(--primary) 70%, #fff);
  --surface-glass-hover: rgba(255, 255, 255, .05);
  --dx-text: #f0f1f2;
  --dx-text-secondary: #c4c7cc;
  --dx-text-muted: #9a9ea5;
  --text-faint: #8c9097;
}

/* Dos zonas: el menú negro y la hoja, separados por el lienzo. */
@media (min-width: 768px) {
  body[data-estilo="contraste"] #app { padding: 10px; gap: 10px; background: var(--ct-lienzo); box-sizing: border-box; }
  body[data-estilo="contraste"] .sidebar { height: 100%; border-radius: 20px; }
  body[data-estilo="contraste"] .main-area { border-radius: 20px; }
}
body[data-estilo="contraste"] .main-area { background: var(--ct-hoja); }
body[data-estilo="contraste"] .sidebar { background: var(--ct-negro); border-right: 0; color: var(--ct-negro-texto); }
body[data-estilo="contraste"] .nav-rail { border-right: 0; }
body[data-estilo="contraste"] .sidebar .brand-icon { background: #fff; border: 0; border-radius: 12px; }
body[data-estilo="contraste"] .sidebar .brand-text h2 { color: #fff; }
body[data-estilo="contraste"] .sidebar .brand-text span { color: var(--ct-negro-tenue); }
/* Íconos en cuadritos; el activo se enciende con el acento. */
body[data-estilo="contraste"] .nav-area { color: var(--ct-negro-tenue); border-radius: 12px; }
body[data-estilo="contraste"] .nav-area svg { box-sizing: content-box; padding: 7px; border-radius: 10px; background: var(--ct-negro-2); color: var(--ct-negro-texto); }
body[data-estilo="contraste"] .nav-area:hover { background: var(--ct-negro-2); color: var(--ct-negro-texto); }
body[data-estilo="contraste"] .nav-area:hover svg { background: var(--ct-negro-3); }
body[data-estilo="contraste"] .nav-area.active { background: transparent; color: var(--ct-acento-vivo); }
body[data-estilo="contraste"] .nav-area.active svg { background: var(--ct-acento); color: var(--primary-text, #fff); }
body[data-estilo="contraste"][data-nivel="sobrio"] .nav-area.active { color: #fff; }
body[data-estilo="contraste"][data-nivel="sobrio"] .nav-area.active svg { background: #fff; color: var(--ct-negro); }
body[data-estilo="contraste"] .nav-area-punto { box-shadow: 0 0 0 2px var(--ct-negro); }
body[data-estilo="contraste"] .sidebar-footer { border-top-color: var(--ct-negro-3); }
body[data-estilo="contraste"] .sidebar .user-card:hover { background: var(--ct-negro-2); }
body[data-estilo="contraste"] #sidebar-user-name { color: #fff; }
body[data-estilo="contraste"] #sidebar-user-role { color: var(--ct-negro-tenue); }
/* El panel de pantallas del menú también es negro. */
@media (min-width: 768px) {
  body[data-estilo="contraste"] .nav-panel { background: var(--ct-negro); border-right: 0; border-radius: 0 20px 20px 0; box-shadow: 0 18px 44px -14px rgba(0, 0, 0, .5); }
  body[data-estilo="contraste"] .nav-panel-cabeza { border-bottom-color: var(--ct-negro-3); }
  body[data-estilo="contraste"] .nav-panel-cabeza strong,
  body[data-estilo="contraste"] .sidebar .nav-panel .nav-panel-grupo { color: var(--ct-negro-tenue); }
  body[data-estilo="contraste"] .sidebar .nav-item { color: var(--ct-negro-texto); }
  body[data-estilo="contraste"] .sidebar .nav-item:hover { background: var(--ct-negro-2); color: #fff; }
  body[data-estilo="contraste"] .sidebar .nav-item.active { background: var(--ct-negro-3); }
  body[data-estilo="contraste"] .sidebar .nav-item.active,
  body[data-estilo="contraste"] .sidebar .nav-item.active > span,
  body[data-estilo="contraste"] .sidebar .nav-item.active .nav-icon { color: var(--ct-acento-vivo) !important; }
}

/* Cabecera: parte de la hoja, separada por una línea. Botones con borde fino. */
body[data-estilo="contraste"] .topbar { background: var(--ct-hoja); border-bottom: 1px solid var(--ct-panel-borde); padding: 12px 24px; }
body[data-estilo="contraste"] .topbar-title h2 { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
body[data-estilo="contraste"] .btn-theme { width: 40px; height: 40px; border: 1px solid var(--ct-tabla-borde); border-radius: 12px; }
body[data-estilo="contraste"] .page-content { padding: 22px 24px 28px; }

/* Botones: rectángulos de 12 px, principal sólido en el acento, secundario blanco con borde. */
body[data-estilo="contraste"] .btn { border-radius: 12px; font-weight: 700; }
body[data-estilo="contraste"] :is(.btn-secondary, .btn-outline, .btn-outline-primary) { background: var(--ct-hoja); border: 1px solid var(--ct-tabla-borde); color: var(--text-main); }
body[data-estilo="contraste"] :is(.btn-secondary, .btn-outline, .btn-outline-primary):hover:not(:disabled) { background: var(--ct-panel); border-color: color-mix(in srgb, var(--text-main) 25%, transparent); color: var(--text-main); }

/* Campos: blancos con borde fino; al enfocar, borde y halo del acento. */
body[data-estilo="contraste"] :is(#app, .modal-backdrop) :is(input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"],
  input[type="time"], input[type="search"], input[type="tel"], input[type="url"], input:not([type]), select, textarea) {
  border-color: var(--ct-tabla-borde);
  border-radius: 12px;
  background-color: var(--ct-hoja);
}
body[data-estilo="contraste"] :is(#app, .modal-backdrop) :is(input, select, textarea):focus { border-color: var(--ct-acento); box-shadow: 0 0 0 4px var(--ct-acento-suave); }

/* Paneles grises sin sombra; las tablas, blancas con borde y encabezado gris. */
body[data-estilo="contraste"] :is(.card, .stat-card, .ap-bloque, .ini-bloque) { border: 1px solid var(--ct-panel-borde); border-radius: 16px; background: var(--ct-panel); box-shadow: none; }
body[data-estilo="contraste"] .ini-bloque { padding: 16px 20px 8px; }
body[data-estilo="contraste"] .ini-lista { border-top: 0; }
body[data-estilo="contraste"] .ini-lista > li { border-bottom-color: var(--ct-tabla-borde); }
body[data-estilo="contraste"] .ini-lista > li:last-child { border-bottom: 0; }
body[data-estilo="contraste"] .ini-cifras { gap: 12px; border: 0; background: transparent; }
body[data-estilo="contraste"] .ini-cifra { padding: 18px 20px; border: 1px solid var(--ct-panel-borde) !important; border-radius: 16px; background: var(--ct-panel); }
body[data-estilo="contraste"] .ini-cifra strong { font-size: 1.625rem; font-weight: 700; letter-spacing: -.03em; }
body[data-estilo="contraste"] .ini-accesos button { border: 1px solid var(--ct-panel-borde); border-radius: 16px; background: var(--ct-panel); }
body[data-estilo="contraste"] .ini-accesos button:hover { background: var(--ct-hoja); border-color: var(--ct-tabla-borde); }
body[data-estilo="contraste"] .ini-acceso-ico { border-radius: 10px; background: var(--ct-negro); color: #fff; }
body.dark[data-estilo="contraste"] .ini-acceso-ico { background: var(--ct-negro-3); }
body[data-estilo="contraste"] .card:has(.table-wrap) { border-color: var(--ct-tabla-borde); background: var(--ct-hoja); padding: 0; overflow: hidden; }
body[data-estilo="contraste"] .card:has(.table-wrap) .operational-toolbar { padding: 14px 16px; background: var(--ct-panel) !important; border-bottom-color: var(--ct-tabla-borde) !important; }
body[data-estilo="contraste"] .table-wrap { border: 1px solid var(--ct-tabla-borde); border-radius: 16px; background: var(--ct-hoja); overflow: hidden; }
body[data-estilo="contraste"] .table-panel { border: 1px solid var(--ct-tabla-borde); border-radius: 16px; background: var(--ct-hoja); overflow: hidden; box-shadow: none; }
body[data-estilo="contraste"] .table-panel .table-wrap { border: 0; border-radius: 0; }
body[data-estilo="contraste"] .table-panel-head { background: var(--ct-panel); border-bottom: 1px solid var(--ct-tabla-borde); }
body[data-estilo="contraste"] .table-wrap thead,
body[data-estilo="contraste"] .table-wrap th { background: var(--ct-panel) !important; }
body[data-estilo="contraste"] .table-wrap th { color: var(--dx-text-secondary); font-weight: 700; }
body[data-estilo="contraste"] .table-wrap td { height: 48px; border-bottom-color: var(--ct-panel-borde); }
body[data-estilo="contraste"] .table-wrap tbody tr:hover { background: var(--ct-panel); box-shadow: inset 3px 0 0 var(--ct-acento); }

/* Pestañas y selectores: chips con borde; el elegido, negro (en oscuro, blanco). */
body[data-estilo="contraste"] :is(.ap-segmentos, .dx-alcance) { border: 1px solid var(--ct-tabla-borde); border-radius: 12px; background: var(--ct-hoja); padding: 3px; }
body[data-estilo="contraste"] :is(.ap-segmentos button[aria-checked="true"], .dx-alcance button[aria-pressed="true"], .dx-alcance button.active) { background: var(--ct-negro); color: #fff; border-radius: 9px; }
body.dark[data-estilo="contraste"] :is(.ap-segmentos button[aria-checked="true"], .dx-alcance button[aria-pressed="true"], .dx-alcance button.active) { background: #fff; color: #111214; }
body[data-estilo="contraste"] .cfg-pestana { border-radius: 10px; }
body[data-estilo="contraste"] .cfg-pestana[aria-current="page"] { background: var(--ct-panel); color: var(--text-main); box-shadow: inset 3px 0 0 var(--ct-acento); }
body[data-estilo="contraste"] .cfg-pestana[aria-current="page"] .nav-icon { color: var(--ct-acento); }

/* Lo que flota. Los avisos, negros como el menú. */
body[data-estilo="contraste"] :is(.modal, .modal-content, .modal-box) { border: 1px solid var(--ct-panel-borde); border-radius: 20px; }
body[data-estilo="contraste"] .modal-backdrop { background: rgba(0, 0, 0, .5); }
body[data-estilo="contraste"] .toast { border: 0; border-radius: 14px; background: var(--ct-negro); color: #fff; }
body[data-estilo="contraste"] .toast :is(.toast-title) { color: #fff; }
body[data-estilo="contraste"] .toast :is(.toast-detail) { color: var(--ct-negro-tenue); }
body[data-estilo="contraste"] .badge { border-radius: 999px; }
@media (max-width: 767px) {
  body[data-estilo="contraste"] #bottom-nav { background: var(--ct-negro); border-top: 0; }
  body[data-estilo="contraste"] .bottom-nav-item { color: var(--ct-negro-tenue); }
  body[data-estilo="contraste"] .bottom-nav-item.active { color: #fff; }
}

/* ═════════════════════════════════════════════════════════════════════════
   Los cuatro estilos, comunes.
   ═════════════════════════════════════════════════════════════════════════ */
/* Una tarjeta que ya trae su tabla (Documentos, Recibidos…) es el panel: la
   tabla de adentro no lleva otro, y la barra de filtros va sin fondo propio,
   separada por una línea. Sin esto quedaba panel dentro de panel (en Cristal,
   vidrio sobre vidrio). */
body[data-estilo] .card:has(.table-wrap) .table-wrap { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
/* Las pantallas «a sangre» (.page-tabla: Clientes, Cargos…) quitan el relleno
   de la página y se lo ponen a cada hijo que no es la tabla. Estos estilos
   devuelven el relleno a la página, así que el de los hijos sobraba: las
   fichas de Clientes quedaban 28 px corridas respecto a la tabla y pegadas a
   ella. Aquí todo va alineado y con el mismo aire entre bloques. Las tarjetas
   (Mantenimiento, en la Bitácora) conservan su relleno de dentro. */
body[data-estilo] .page-content.page-tabla { gap: 16px; }
body[data-estilo] .page-content.page-tabla > :not(.operational-list-card):not(.modal-backdrop):not(.card) { padding-left: 0; padding-right: 0; }
body[data-estilo] .page-content.page-tabla > :first-child:not(.operational-list-card):not(.card) { padding-top: 0; }
/* Por debajo de 1240 px las filas de .table-panel (Plantillas NMC) son
   tarjetas, cada una con su marco, y Clásico quita el del panel (style.css).
   Estos estilos se lo volvían a poner: quedaba un panel alrededor de las
   tarjetas y su cabecera («3 PLANTILLAS», «+ Nueva Plantilla»), que a ese
   ancho va sin relleno, pegada a los bordes. */
@media (max-width: 1240px) {
  body[data-estilo] .page-content .table-panel { border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  body[data-estilo] .page-content .table-panel-head { background: transparent; border-bottom: 0; }
}
/* Teléfono: el espacio para que la barra inferior no tape el final de la
   página va en un hueco vacío al final (::after) y no en el relleno de abajo.
   El tope de un elemento pegajoso se cuenta desde dentro de ese relleno: con
   los 156 px de relleno, las barras pegadas abajo (Generar documento en
   Emitir, Guardar en Configuración Académica) quedaban a media pantalla,
   encima de los campos. Con el hueco quedan justo sobre la barra inferior. */
@media (max-width: 767px) {
  body #app :is(.page-content, #page-inicio) { padding-bottom: 16px !important; }
  body #app :is(.page-content, #page-inicio)::after { content: ""; display: block; flex: 0 0 auto; height: calc(140px + env(safe-area-inset-bottom, 0px)); }
  body[data-estilo="cristal"] #page-root-academica .academic-actions {
    bottom: calc(82px + env(safe-area-inset-bottom, 0px));
    background: var(--cr-vidrio-grueso);
    -webkit-backdrop-filter: var(--cr-desenfoque-grueso);
    backdrop-filter: var(--cr-desenfoque-grueso);
    border-top-color: var(--dx-border);
  }
  /* Sin borrador que activar, «Activar» está oculto: Guardar ocupa la barra. */
  body #page-root-academica .academic-actions:has(#btn-academic-activate[hidden]) #btn-academic-save { grid-column: 1 / -1; }
  body[data-estilo="cristal"] #botones-generar-wrap { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}
/* En el teléfono esas pantallas son un bloque (no flex) y el gap no aplica. */
@media (max-width: 767px) {
  body[data-estilo] .page-content.page-tabla > :not(.modal-backdrop) + :not(.modal-backdrop) { margin-top: 16px; }
}
/* (!important: style.css fija con !important el recuadro de .filters-container) */
@media (min-width: 768px) {
  body[data-estilo] .card .operational-toolbar { border: 0 !important; border-bottom: 1px solid var(--border) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none; }
}
/* En el teléfono cada fila ya es una tarjeta (style.css): la tarjeta que envuelve
   la lista no puede ser además un panel con relleno, o las filas se salen por la
   derecha. Queda como en el estilo Clásico. */
@media (max-width: 767px) {
  body[data-estilo] .card:has(.table-wrap) { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  /* Y la tabla tampoco recorta ni fija el alto de las celdas: en el teléfono cada
     celda es un renglón de la tarjeta y el alto de fila la encimaba con la siguiente. */
  body[data-estilo] .table-wrap { overflow: visible !important; }
  body[data-estilo] .table-wrap td { height: auto !important; }
  /* El filtro de fecha de Documentos, en todos los estilos (también Clásico):
     su nombre arriba y el campo debajo, sin cajita propia (era un panel dentro
     del panel) y a lo ancho de la fila, igual que el tipo: a media fila la
     fecha se cortaba («mm/dd/yyy») y el tipo también («Todos los …»). */
  body #page-historial .operational-date-filter { grid-column: 1 / -1; flex: 1 1 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  body #page-historial .filters-container > :has(> #inp-tipo-historial) { grid-column: 1 / -1; width: 100%; }
}
body[data-estilo] :is(h1, h2, h3, h4, h5):not(:where(.fx-mesa, .la-paper, .cs-preview, .visor-pdf-hojas, .tpl-mini-hoja, .la-att-pdf-preview, .ea-preview, .hor-malla-preview) *) { font-family: var(--font); }
/* Foco del teclado siempre visible, del color del tema. */
body[data-estilo] :is(button, a, [tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Al imprimir, ningún estilo: sin marco, sin ambiente, sin vidrio. */
@media print {
  body[data-estilo] { background: #fff !important; background-image: none !important; }
  body[data-estilo] #app { inset: 0 !important; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  body[data-estilo] :is(.sidebar, .topbar, .main-area) { border-radius: 0 !important; margin: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; }
}

/* ═════════════════════════════════════════════════════════════════════════
   TELÉFONO, COMO EDUTRIX: el menú y cada ventana son una pantalla aparte.
   Detrás de ellos no hay nada: ni la lista ni el formulario de la pantalla de
   la que se vino (antes el menú y las ventanas dejaban ver la tabla de atrás
   a través del vidrio, mezclada con las opciones). Vale para los cuatro estilos;
   en Cristal el fondo es el ambiente de color, como en EduTrix.
   ═════════════════════════════════════════════════════════════════════════ */
/* La cabecera no se encoge: en una columna flexible bajaba a su alto mínimo
   (60 px) y la fila de botones de la página («+ Nuevo Cliente») quedaba fuera
   del vidrio, encima de la primera tarjeta. */
body .topbar { flex-shrink: 0; }

@media (max-width: 767px) {
  /* Cristal: 10 px de margen a cada lado y el ancho del 100 % hacían que la
     cabecera se saliera 20 px por la derecha (el «?» quedaba cortado). */
  body[data-estilo="cristal"] .topbar { width: auto; max-width: calc(100% - 20px); }

  /* El fondo de las pantallas aparte: el de la página (opaco en Clásico, Suave
     y Contraste); Cristal lo cambia por su ambiente de color. */
  body { --fondo-pantalla: var(--dx-canvas, #f6f7f9); }
  /* ── Ventanas y formularios: pantalla completa, fondo opaco ── */
  body :is(.modal-backdrop, .modal-overlay) {
    padding: 0 !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    background: var(--fondo-pantalla) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  body :is(.modal-backdrop, .modal-overlay) > :is(.modal, .modal-content, .modal-box):not(.onboarding-shell) {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-image: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    animation: dx-pantalla-entrar .2s ease-out;
  }
  body :is(.modal-backdrop, .modal-overlay) :is(.modal, .modal-content, .modal-box):not(.onboarding-shell) > .modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 -16px 12px;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
  }
  body :is(.modal-backdrop, .modal-overlay) :is(.modal, .modal-content, .modal-box):not(.onboarding-shell) > :is(.modal-footer, .modal-form-actions):last-child {
    position: sticky;
    bottom: calc(-16px - env(safe-area-inset-bottom, 0px));
    z-index: 3;
    margin: 16px -16px calc(-16px - env(safe-area-inset-bottom, 0px));
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    background: var(--bg-card);
  }
  /* Los botones van al pie de la pantalla, no detrás del último campo: en un
     formulario corto (Recuperar contraseña) quedaban a media pantalla y el
     velo del pie de Cristal aclaraba todo lo de arriba. */
  body :is(.modal-backdrop, .modal-overlay) > :is(.modal, .modal-content, .modal-box):not(.onboarding-shell):has(> :is(.modal-footer, .modal-form-actions):last-child) { display: flex; flex-direction: column; }
  body :is(.modal-backdrop, .modal-overlay) > :is(.modal, .modal-content, .modal-box):not(.onboarding-shell):has(> :is(.modal-footer, .modal-form-actions):last-child) > * { flex-shrink: 0; }
  body :is(.modal-backdrop, .modal-overlay) > :is(.modal, .modal-content, .modal-box):not(.onboarding-shell) > :is(.modal-footer, .modal-form-actions):last-child { margin-top: auto !important; }
  body :is(.modal-backdrop, .modal-overlay) > :is(.modal, .modal-content, .modal-box):not(.onboarding-shell) > :nth-last-child(2):has(+ :is(.modal-footer, .modal-form-actions):last-child) { margin-bottom: 16px; }
  @keyframes dx-pantalla-entrar { from { transform: translateY(16px); opacity: .4; } to { transform: none; opacity: 1; } }

  /* Cristal: el ambiente detrás (nada escrito), la cabecera en cápsula de vidrio
     y los campos directo sobre el ambiente, como la pantalla de formulario de EduTrix. */
  body[data-estilo="cristal"] { --fondo-pantalla: var(--cr-ambiente); }
  body[data-estilo="cristal"] :is(.modal-backdrop, .modal-overlay) > :is(.modal, .modal-content, .modal-box) { background: transparent !important; }
  body[data-estilo="cristal"] :is(.modal-backdrop, .modal-overlay) :is(.modal, .modal-content, .modal-box):not(.onboarding-shell) > .modal-header {
    margin: calc(env(safe-area-inset-top, 0px) + 8px) -6px 12px !important;
    padding: 8px 8px 8px 18px !important;
    min-height: 52px;
    border: 1px solid transparent !important;
    border-radius: 20px;
    background: var(--cr-reflejo) padding-box, linear-gradient(var(--cr-vidrio), var(--cr-vidrio)) padding-box, var(--cr-canto) border-box;
    -webkit-backdrop-filter: var(--cr-desenfoque);
    backdrop-filter: var(--cr-desenfoque);
    box-shadow: var(--cr-volumen), var(--cr-sombra-nav);
    top: 8px;
  }
  body[data-estilo="cristal"] :is(.modal-backdrop, .modal-overlay) :is(.modal, .modal-content, .modal-box) > .modal-header :is(h2, h3) { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; }
  body[data-estilo="cristal"] :is(.modal-backdrop, .modal-overlay) .modal-close { width: 36px; height: 36px; flex-basis: 36px; border-radius: 999px; background: var(--cr-elevado); box-shadow: var(--cr-elevado-sombra); border: 0; }
  body[data-estilo="cristal"] :is(.modal-backdrop, .modal-overlay) :is(.modal, .modal-content, .modal-box):not(.onboarding-shell) > :is(.modal-footer, .modal-form-actions):last-child {
    border-top: 0;
    background: linear-gradient(to bottom, transparent, var(--cr-velo-borde) 45%);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  /* ── Menú del teléfono: pantalla completa ── */
  body .menu-movil { background: var(--fondo-pantalla); }
  /* Cristal: el menú de EduTrix. Cápsula de vidrio con el título y la ✕, el
     buscador en píldora, grupos sin líneas con el ícono en cápsula, las páginas
     de un grupo abierto en una lámina interior y lo elegido en cristal teñido. */
  body[data-estilo="cristal"] .mm-cabeza {
    margin: calc(env(safe-area-inset-top, 0px) + 8px) 10px 10px;
    padding: 8px 8px 8px 18px;
    border: 1px solid transparent;
    border-radius: 20px;
    background: var(--cr-reflejo) padding-box, linear-gradient(var(--cr-vidrio), var(--cr-vidrio)) padding-box, var(--cr-canto) border-box;
    box-shadow: var(--cr-volumen), var(--cr-sombra-nav);
  }
  body[data-estilo="cristal"] .mm-cabeza h2 { font-size: 1.125rem; font-weight: 700; letter-spacing: -.02em; color: var(--text-main); }
  body[data-estilo="cristal"] .mm-cerrar { width: 36px; height: 36px; border: 1px solid var(--cr-borde); border-radius: 999px; background: var(--cr-relleno); box-shadow: var(--cr-brillo); color: var(--dx-text-secondary); }
  body[data-estilo="cristal"] .mm-cerrar svg { width: 18px; height: 18px; }
  body[data-estilo="cristal"] .mm-buscar { margin: 0 12px 10px; border-color: var(--cr-borde); border-radius: 999px; background: var(--cr-relleno); }
  body[data-estilo="cristal"] .mm-lista { gap: 2px; padding: 0 10px 12px; }
  body[data-estilo="cristal"] .mm-grupo { border: 0; border-radius: 16px; background: transparent; overflow: visible; }
  body[data-estilo="cristal"] .mm-grupo-cabeza { min-height: 48px; padding: 0 12px; border-radius: 16px; }
  body[data-estilo="cristal"] .mm-grupo.es-abierto > .mm-grupo-cabeza { background: var(--cr-relleno); box-shadow: var(--cr-brillo); }
  body[data-estilo="cristal"] .mm-grupo-icono { width: 32px; height: 32px; border: 1px solid var(--cr-borde); border-radius: 10px; background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .42)); box-shadow: var(--cr-brillo); color: var(--dx-text-secondary); }
  body.dark[data-estilo="cristal"] .mm-grupo-icono { background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); }
  body[data-estilo="cristal"] .mm-grupo:has(.mm-opcion.es-activa) .mm-grupo-icono,
  body[data-estilo="cristal"] .mm-grupo.es-directo.es-activa .mm-grupo-icono { border-color: transparent; background: var(--cr-elegido-reflejo), linear-gradient(180deg, hsl(var(--bh) 80% 50%), hsl(var(--bh) 75% 38%)); color: #fff; }
  body[data-estilo="cristal"] .mm-grupo:has(.mm-opcion.es-activa) .mm-grupo-titulo { color: var(--cr-elegido-tinta); }
  body[data-estilo="cristal"] .mm-grupo-cuenta { display: none; }
  body[data-estilo="cristal"] .mm-grupo.es-directo.es-activa .mm-grupo-cabeza { background: transparent; color: var(--cr-elegido-tinta); }
  body[data-estilo="cristal"] .mm-opciones { margin: 2px 0 8px; padding: 4px; border: 1px solid var(--cr-borde); border-radius: 18px; background: var(--cr-relleno); }
  body[data-estilo="cristal"] .mm-opcion { min-height: 44px; padding: 6px 14px; border: 1px solid transparent; border-radius: 14px; }
  body[data-estilo="cristal"] .mm-opcion .mm-opcion-icono { display: none; }
  body[data-estilo="cristal"] .mm-opcion.es-activa { background: var(--cr-elegido-reflejo) padding-box, var(--cr-elegido-tinte) padding-box, var(--cr-elegido-canto) border-box; box-shadow: var(--cr-elegido-sombra); color: var(--cr-elegido-tinta); }
  body[data-estilo="cristal"] .mm-opcion.es-activa .mm-opcion-texto strong { font-weight: 650; }
  body[data-estilo="cristal"] .mm-rotulo { margin: 8px 14px 2px; }
  body[data-estilo="cristal"] .mm-resultados { border-color: var(--cr-borde); border-radius: 18px; background: var(--cr-relleno); }
  /* La cuenta (tema, ayuda, contraseña, salir) va al pie en una lámina, no en una franja blanca. */
  body[data-estilo="cristal"] .mm-cuenta { margin: 0 10px calc(10px + env(safe-area-inset-bottom, 0px)); padding: 12px; border: 1px solid transparent; border-radius: 22px; background: var(--cr-reflejo) padding-box, linear-gradient(var(--cr-vidrio), var(--cr-vidrio)) padding-box, var(--cr-canto) border-box; box-shadow: var(--cr-volumen), var(--cr-sombra-nav); }
  body[data-estilo="cristal"] .mm-cuenta-acciones button { border: 1px solid var(--cr-borde); border-radius: 14px; background: var(--cr-relleno); box-shadow: var(--cr-brillo); }
  body[data-estilo="cristal"] .mm-cuenta-avatar { background: linear-gradient(140deg, hsl(var(--bh) 72% 48%), hsl(calc(var(--bh) + 12) 80% 36%)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 4px 10px -2px hsl(var(--bh) 80% 40% / .45); }

  /* ── Barra inferior, como WhatsApp: lo elegido es una pastilla solo detrás
     del ícono; la palabra va debajo en negrita, sin fondo. El botón redondo de
     «Crear» no cambia. ── */
  body #bottom-nav .bottom-nav-item:not(.bnav-accion) { background: transparent !important; box-shadow: none !important; }
  body #bottom-nav .bottom-nav-item:not(.bnav-accion)::before { content: none !important; }
  body #bottom-nav .bottom-nav-item:not(.bnav-accion) .bnav-icon { display: grid; place-items: center; width: 56px !important; height: 30px !important; border: 1px solid transparent; border-radius: 999px; background: transparent; transform: none !important; transition: background-color .2s ease; }
  body #bottom-nav .bottom-nav-item.active:not(.bnav-accion) { color: var(--text-main) !important; font-weight: 700; }
  body #bottom-nav .bottom-nav-item.active:not(.bnav-accion) .bnav-icon { background: var(--primary-soft) !important; color: var(--primary-texto, var(--primary)); }
  body[data-estilo="cristal"] #bottom-nav .bottom-nav-item.active:not(.bnav-accion) .bnav-icon {
    background: radial-gradient(120% 90% at 50% -35%, rgba(255, 255, 255, .6), rgba(255, 255, 255, 0) 60%) padding-box, var(--cr-elegido-tinte) padding-box, var(--cr-elegido-canto) border-box !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .7), 0 4px 12px -6px var(--cr-tinte-sombra);
    color: var(--cr-elegido-tinta);
  }
  body.dark[data-estilo="cristal"] #bottom-nav .bottom-nav-item.active:not(.bnav-accion) .bnav-icon {
    background: radial-gradient(120% 90% at 50% -35%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%) padding-box, var(--cr-elegido-tinte) padding-box, var(--cr-elegido-canto) border-box !important;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, .28), 0 4px 12px -6px var(--cr-tinte-sombra);
  }
  body[data-estilo="contraste"] #bottom-nav .bottom-nav-item.active:not(.bnav-accion) { color: #fff !important; }
  body[data-estilo="contraste"] #bottom-nav .bottom-nav-item.active:not(.bnav-accion) .bnav-icon { background: var(--ct-acento) !important; color: var(--primary-text, #fff); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  body :is(.modal-backdrop, .modal-overlay) > :is(.modal, .modal-content, .modal-box) { animation: none; }
}

/* Cristal: lo que flota sobre la pantalla es opaco. Con el fondo de tarjeta de
   Cristal (semitransparente) se leía la pantalla de atrás a través del aviso de
   pago aprobado, la campana o la ayuda; y estos dos cuelgan de la cabecera, que
   ya lleva su propio desenfoque, así que el de ellos no alcanzaba la página. Es
   el material de las hojas de EduTrix: opaco, con el reflejo arriba y el canto
   de luz del vidrio. */
body[data-estilo="cristal"] :is(.payment-client-notification, .avisos-panel, .ayuda-panel, #page-root-cargos .cargo-menu-lista, .custom-select-menu, .template-picker-dialog, .paleta-caja, .toast) {
  border: 1px solid transparent !important;
  background: var(--cr-reflejo) padding-box, linear-gradient(var(--cr-tapa-hoja), var(--cr-tapa-hoja)) padding-box, var(--cr-canto) border-box !important;
  box-shadow: var(--cr-volumen), var(--cr-sombra-flota) !important;
}
body[data-estilo="cristal"] :is(.payment-client-notification, .avisos-panel, .ayuda-panel, .template-picker-dialog, .paleta-caja, .toast) { border-radius: 20px !important; }
/* Detrás de una pantalla emergente no queda nada legible: el selector de
   plantillas y la paleta de búsqueda velan la página con el ambiente. */
body[data-estilo="cristal"] :is(.template-picker-overlay, .paleta) { background: var(--cr-velo); }
@media (max-width: 767px) {
  body[data-estilo="cristal"] :is(.template-picker-overlay, .paleta) { background: var(--cr-ambiente); -webkit-backdrop-filter: none; backdrop-filter: none; }
  body :is(.template-picker-overlay, .paleta) { background: var(--fondo-pantalla); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Emitir › «Antes de emitir…» en el teléfono: el botón de cada paso llevaba el
   100 % de ancho MÁS 38 px de margen (para alinearlo con el texto, después del
   número) y se salía 38 px de su tarjeta. Pasa en todos los estilos. */
@media (max-width: 640px) {
  body .emitir-requisitos-lista .btn { width: calc(100% - 38px); }
}
@media (max-width: 767px) {
  /* «Crear» es el botón redondo: elegido no lleva pastilla detrás. */
  body #bottom-nav .bottom-nav-item.bnav-accion,
  body #bottom-nav .bottom-nav-item.bnav-accion.active { background: transparent !important; box-shadow: none !important; }
  body #bottom-nav .bottom-nav-item.bnav-accion::before { content: none !important; }
  body #bottom-nav .bottom-nav-item.bnav-accion.active { font-weight: 700; }
  /* Configuración: la tira de pestañas se queda arriba al desplazar y el
     formulario pasa por debajo. En Cristal era una franja casi blanca a medio
     transparentar (se leían los campos a través); ahora es una cápsula de
     vidrio con desenfoque, como las pestañas de EduTrix. */
  body[data-estilo="cristal"] .cfg-pestanas {
    margin: 0 0 4px;
    padding: 6px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: var(--cr-reflejo) padding-box, linear-gradient(var(--cr-vidrio-grueso), var(--cr-vidrio-grueso)) padding-box, var(--cr-canto) border-box;
    -webkit-backdrop-filter: var(--cr-desenfoque-grueso);
    backdrop-filter: var(--cr-desenfoque-grueso);
    box-shadow: var(--cr-volumen), var(--cr-sombra-nav);
  }
}

@media (max-width: 767px) {
  /* Con una ventana o el menú abiertos, la barra inferior no se ve: el
     formulario es la pantalla entera (como en EduTrix) y la barra tapaba
     «Guardar» y «Cancelar». */
  body:has(.modal-backdrop.open, .modal-overlay.open, .modal-overlay[style*="flex"], .menu-movil:not([hidden]), .template-picker-overlay) #bottom-nav { display: none !important; }
  body:has(.modal-backdrop.open, .modal-overlay.open, .modal-overlay[style*="flex"], .menu-movil:not([hidden])) #app::after { display: none; }

  /* Las confirmaciones («¿Seguro?») son un diálogo, no un formulario: tarjeta
     centrada sobre el fondo liso de la pantalla (nada escrito detrás). */
  body #modal-confirmacion-generico { align-items: center !important; justify-content: center !important; padding: 16px !important; }
  body #modal-confirmacion-generico > .modal {
    width: 100% !important;
    max-width: 400px !important;
    height: auto !important;
    padding: 24px !important;
    border-radius: 24px !important;
    background: var(--bg-card) !important;
    box-shadow: var(--shadow-lg) !important;
    overflow: visible !important;
  }
  body #modal-confirmacion-generico > .modal > .modal-header { position: static !important; margin: 0 0 8px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; min-height: 0; }
  body #modal-confirmacion-generico > .modal > :is(.modal-footer, .modal-form-actions, div):last-child { position: static !important; margin: 16px 0 0 !important; padding: 0 !important; border: 0 !important; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  body[data-estilo="cristal"] #modal-confirmacion-generico > .modal { background: var(--cr-reflejo) padding-box, linear-gradient(var(--cr-tapa-hoja), var(--cr-tapa-hoja)) padding-box, var(--cr-canto) border-box !important; border: 1px solid transparent !important; box-shadow: var(--cr-volumen), var(--cr-sombra-flota) !important; }

  /* Asistentes (configuración inicial y mejora de plan): ya son pantalla
     completa con su propio pie. El pie va en su sitio, con los botones
     repartidos y sin salirse por la derecha. */
  body .onboarding-shell { width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  body .onboarding-shell > .modal-footer { flex-wrap: wrap; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
  /* Con el id: un <style> que inyecta el asistente fija «flex: 1 1 0» con
     #modal-onboarding-wizard y partía «Siguiente» en dos renglones. */
  body :is(#modal-onboarding-wizard, #modal-upgrade-wizard) .onboarding-shell > .modal-footer .btn { flex: 1 0 auto; justify-content: center; white-space: nowrap; }
  body[data-estilo="cristal"] .onboarding-shell { background: transparent !important; }
  body[data-estilo="cristal"] .onboarding-shell > .modal-header { margin: calc(env(safe-area-inset-top, 0px) + 8px) 10px 0; border: 1px solid transparent !important; border-radius: 20px; background: var(--cr-reflejo) padding-box, linear-gradient(var(--cr-vidrio), var(--cr-vidrio)) padding-box, var(--cr-canto) border-box !important; box-shadow: var(--cr-volumen), var(--cr-sombra-nav); }
  body[data-estilo="cristal"] .onboarding-shell > .modal-footer { margin: 0 10px calc(10px + env(safe-area-inset-bottom, 0px)); padding: 8px !important; border: 1px solid transparent !important; border-radius: 22px; background: var(--cr-reflejo) padding-box, linear-gradient(var(--cr-vidrio-grueso), var(--cr-vidrio-grueso)) padding-box, var(--cr-canto) border-box !important; -webkit-backdrop-filter: var(--cr-desenfoque-grueso); backdrop-filter: var(--cr-desenfoque-grueso); box-shadow: var(--cr-volumen), var(--cr-sombra-nav); }
}

/* ── Ventanas en el teléfono: orden y piezas sueltas ── */
@media (max-width: 767px) {
  /* Botones del pie: uno por fila a todo lo ancho y la acción principal
     primero, como en EduTrix. Antes unas ventanas ponían «Cancelar» arriba y
     otras abajo, y en la de IA «Cancelar» se partía en dos líneas. */
  body :is(.modal, .modal-content):not(.onboarding-shell) :is(.modal-form-actions, .modal-footer, .renewal-actions) { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  body :is(.modal, .modal-content):not(.onboarding-shell) :is(.modal-form-actions, .modal-footer, .renewal-actions) > .btn { width: 100% !important; margin: 0 !important; white-space: nowrap; }
  body :is(.modal, .modal-content):not(.onboarding-shell) :is(.modal-form-actions, .modal-footer, .renewal-actions) > :is(.btn-primary, .btn-danger, .btn-destructive, .btn-ia, [type="submit"]) { order: -1; }
  /* Invitación: WhatsApp, Copiar y al final Cerrar, que es lo que menos se busca. */
  body #modal-invitacion #btn-invitacion-cerrar { order: 1; }
  body #modal-ia .modal > div:last-child { flex-direction: column; }
  body #modal-ia .modal > div:last-child > .btn { width: 100%; white-space: nowrap; }
  /* «Redactar desde archivo»: el ícono de subir crecía a todo el ancho. */
  body .drop-zone .drop-icon { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 8px; }
  body .drop-zone .drop-icon svg { width: 28px; height: 28px; }
}
/* El selector de archivo con el botón de la app, no el del sistema
   («Choose File» sin estilo en Comprar créditos). */
body :is(.modal, .modal-content) input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-card);
  color: var(--primary-texto, var(--primary));
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
@media (max-width: 767px) {
  /* Un «Actualizar» de solo ícono no merece una fila entera de la cabecera:
     va arriba, junto a la campana y la ayuda. */
  body .topbar #topbar-acciones-pagina:has(> .btn-ghost:only-child) { order: 0; flex: 0 0 auto; }
  body .topbar #topbar-acciones-pagina:has(> .btn-ghost:only-child) > .btn-ghost { flex: 0 0 auto; margin: 0; }
}
/* Documentos y Recibidos en escritorio: el tipo largo («CERTIFICACIÓN DE
   TRABAJO») baja a dos renglones y el interesado se recorta como el asunto.
   Antes el interesado se partía letra por letra (una palabra por renglón)
   porque era la única columna que cedía su ancho. */
@media (min-width: 768px) {
  body :is(#page-historial, #page-admin-docs-todos) td[data-label="Tipo"] { min-width: 132px; overflow-wrap: normal; }
  body :is(#page-historial, #page-admin-docs-todos) td[data-label="Tipo"] .badge { max-width: 150px; white-space: normal; overflow-wrap: normal; word-break: normal; line-height: 1.25; text-align: left; }
  body :is(#page-historial, #page-admin-docs-todos) td[data-label="Interesado"].table-cell-truncate { max-width: 180px; }
}
@media (max-width: 767px) {
  /* Mi Centro › Google Drive: el botón chico de reconectar es solo ícono
     (44 px); su palabra «Reconectar» no cabía y se apilaba letra por letra. */
  body .center-drive-controls #btn-reconectar-drive .center-drive-reconectar-texto { display: none; }
  /* La cabecera solo sube a su fila de arriba el «Actualizar» que es ícono
     solo; uno con palabra («Actualizar» en Todos los documentos) le quitaba
     el sitio al título («Docu…»). Ese, de ícono solo también aquí. */
  body .topbar #topbar-acciones-pagina:has(> .btn-ghost:only-child) > .btn-ghost { width: 44px; height: 44px; padding: 0 !important; font-size: 0 !important; gap: 0; }
  body .topbar #topbar-acciones-pagina:has(> .btn-ghost:only-child) > .btn-ghost svg { width: 20px; height: 20px; }
}
@media (max-width: 767px) {
  /* Emitir › Generar documento: el botón se quedaba con un tercio del ancho y
     su texto en cuatro renglones, junto a un «Limpiar formulario» enorme. El
     principal toma el ancho que sobra y va en un renglón; la explicación
     chica («Revisar y crear el archivo final») sobra en el teléfono. */
  body #botones-generar-wrap { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 8px; }
  body #botones-generar-wrap #btn-abrir-confirmacion { flex: 1 1 auto !important; width: auto !important; min-width: 0; min-height: 48px; padding: 8px 14px !important; }
  body #botones-generar-wrap #btn-abrir-confirmacion .btn-generate-copy { display: block; text-align: left; }
  body #botones-generar-wrap #btn-abrir-confirmacion .btn-generate-copy strong { white-space: nowrap; }
  body #botones-generar-wrap #btn-abrir-confirmacion .btn-generate-copy small { display: none; }
  body #botones-generar-wrap #btn-limpiar-form { flex: 0 0 auto !important; width: auto !important; padding: 8px 12px !important; font-size: .8125rem; white-space: nowrap; }
}

/* Buscadores: la caja es el buscador; el campo de adentro no lleva su propio
   anillo de foco (se veía un recuadro azul dentro de otro, en Elegir
   plantilla, Reutilizar datos y los filtros). El anillo va en la caja. */
body :is(.template-picker-search, .search-bar, .mm-buscar) input:is(:focus, :focus-visible) { outline: 0 !important; box-shadow: none !important; border-color: transparent !important; background: transparent !important; }
body :is(.template-picker-search, .search-bar, .mm-buscar):focus-within { border-color: var(--primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 16%, transparent); }
/* Emitir › Reutilizar datos: el buscador iba dentro de una tarjeta propia
   (recuadro dentro de recuadro). Queda el buscador solo. */
body .emitir-reuse-card { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
/* Sus resultados usaban el fondo del menú lateral, que en Cristal es
   transparente: se leía el formulario a través de la lista. */
body[data-estilo="cristal"] #search-results { border: 1px solid transparent !important; border-radius: 16px !important; background: var(--cr-reflejo) padding-box, linear-gradient(var(--cr-tapa-hoja), var(--cr-tapa-hoja)) padding-box, var(--cr-canto) border-box !important; box-shadow: var(--cr-volumen), var(--cr-sombra-flota) !important; }

/* Elegir plantilla en el teléfono: pantalla aparte como las demás ventanas
   (era una tarjeta flotante con la lista cortada abajo). */
@media (max-width: 767px) {
  body .template-picker-overlay { padding: 0 !important; place-items: stretch !important; }
  body .template-picker-dialog { width: 100% !important; max-width: none !important; height: 100% !important; max-height: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  body .template-picker-dialog > header { padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px !important; }
  body .template-picker-search { margin: 12px 16px 4px !important; }
  body .template-picker-grid { padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important; }
  body[data-estilo="cristal"] .template-picker-dialog { background: transparent !important; }
  body[data-estilo="cristal"] .template-picker-dialog > header { margin: calc(env(safe-area-inset-top, 0px) + 8px) 10px 0; padding: 12px 10px 12px 18px !important; border: 1px solid transparent !important; border-radius: 20px; background: var(--cr-reflejo) padding-box, linear-gradient(var(--cr-vidrio), var(--cr-vidrio)) padding-box, var(--cr-canto) border-box !important; box-shadow: var(--cr-volumen), var(--cr-sombra-nav); }
  body[data-estilo="cristal"] .template-picker-search { border-radius: 999px !important; background: var(--cr-relleno) !important; border-color: var(--cr-borde) !important; }
}

/* Estados vacíos con título y explicación («Aún no hay resultados.» y
   debajo qué hacer): la explicación salía a 2rem porque la regla de los
   íconos del estado vacío también tomaba su <span>. */
body .ge-empty > strong { display: block; }
body .ge-empty > strong + span { display: block; margin: 4px 0 0; font-size: .875rem; line-height: 1.45; }
/* Horarios › Validar: «Configuración lista.No hay choques» iba pegado. */
.horarios-ready { display: flex; flex-wrap: wrap; gap: 2px 6px; margin-bottom: 12px; }

@media (max-width: 767px) {
  /* Tablas en tarjetas: la fila de «sin datos» se trataba como un registro
     (rótulo a la izquierda y el aviso apretado a la derecha, dentro de otra
     tarjeta). Queda el aviso solo, a todo el ancho. */
  body #app tbody tr:has(> td[colspan]:only-child) { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  body #app tbody td[colspan]:only-child { display: block !important; padding: 0 !important; border: 0 !important; margin: 0 !important; }
  body #app tbody td[colspan]:only-child::before { display: none !important; }
  body #app .ge-table-wrap:has(tbody > tr:only-child > td[colspan]:only-child) { border: 0 !important; background: transparent !important; box-shadow: none !important; }

  /* Matrícula › Preparar el año: el rótulo del catálogo y su explicación
     iban lado a lado; la explicación quedaba en una columna de tres
     palabras por renglón. */
  body .ge-catalog-info { flex-direction: column; align-items: flex-start; gap: 2px; }

  /* Configuración › Numeración: el campo del correlativo es la última celda
     de la fila y la regla de las tablas le quitaba su rótulo (pensada para
     la celda de acciones): quedaba un «1» sin decir qué era. */
  body #centro-secuencias-container td[data-label]:last-child::before { display: inline-block !important; }

  /* Constructor de Horarios: siete botones sueltos, cada uno de su ancho y
     en su propio renglón. Van en dos columnas parejas; «Copiar año
     anterior» ocupa el renglón entero. */
  body .horarios-header { padding: 12px; }
  body .horarios-file-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  body .horarios-file-actions > span { grid-column: 1 / -1; }
  body .horarios-toolbar-group { display: contents; }
  body .horarios-file-actions .btn { width: 100%; min-width: 0; justify-content: center; }
  body .horarios-file-actions [data-reciclar-manual] { grid-column: 1 / -1; }
  /* Los pasos en dos columnas: número y nombre alineados a la izquierda
     (centrados, los círculos quedaban cada uno a una altura distinta). */
  body .horarios-steps button { justify-content: flex-start; padding-left: 16px; text-align: left; }
  body #horarios-content { padding: 14px 12px; }
  body .hor-actions-bar { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  body .hor-actions-bar .btn { width: 100%; height: auto; min-height: 44px; white-space: normal; justify-content: center; text-align: center; }
  /* Tarjeta de cada jornada: con su relleno de escritorio, el nombre se
     partía en dos renglones y «40 periodos activos» en tres. */
  body .hor-jornada-card { padding: 14px; gap: 12px; }
  body .hor-jornada-head { align-items: flex-start; gap: 8px; }
  body .hor-jornada-head h3 { font-size: 1.0625rem; }
  body .hor-jornada-head small { display: none; }
  body .hor-badge-count { flex: 0 0 auto; white-space: nowrap; }
  body .hor-jornada-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
  body .hor-jornada-actions .btn { width: 100%; height: auto; min-height: 44px; white-space: normal; }
}

/* Tableta y escritorio: la fila de pestañas de Configuración en Cristal es
   la misma cápsula de vidrio que en el teléfono (sin ella, chips sueltos
   sobre el ambiente). */
@media (min-width: 768px) {
  /* Con overflow-x:auto la fila, hija de una columna flex, perdía su alto
     mínimo y quedaba en una raya de 2 px (lo mismo que ya se arregló en el
     teléfono); y el margen negativo la sacaba por la derecha. */
  body .page-content.active.con-config > .cfg-pestanas { flex: 0 0 auto; align-self: stretch; width: auto; min-width: 0; max-width: 100%; margin: 0 0 4px; padding: 0 0 8px; }
  /* Las pestañas de EduTrix (cristal.css, «.tabs»): una cápsula de vidrio
     del ancho de sus pestañas, translúcida, con canto y desenfoque. Era una
     tira casi blanca (88 %) a todo lo ancho, que no se leía como vidrio.
     Aquí no se desplaza nada por debajo: puede ser el vidrio fino. */
  body[data-estilo="cristal"] .page-content.active.con-config > .cfg-pestanas,
  body[data-estilo="cristal"] .page-content.page-tabla.active.con-config > .cfg-pestanas {
    align-self: flex-start;
    gap: 2px;
    margin: 0 0 6px;
    padding: 4px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: linear-gradient(var(--cr-vidrio), var(--cr-vidrio)) padding-box, var(--cr-canto) border-box;
    box-shadow: var(--cr-volumen), var(--cr-sombra-contenido);
    -webkit-backdrop-filter: var(--cr-desenfoque);
    backdrop-filter: var(--cr-desenfoque);
  }
  body[data-estilo="cristal"] .page-content.con-config > .cfg-pestanas .cfg-pestana {
    min-height: 34px;
    padding: 7px 15px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--dx-text-secondary);
    font-size: .84375rem;
    font-weight: 500;
  }
  body[data-estilo="cristal"] .page-content.con-config > .cfg-pestanas .cfg-pestana:hover { background: var(--cr-relleno); color: var(--text-main); }
  body[data-estilo="cristal"] .page-content.con-config > .cfg-pestanas .cfg-grupo { background: var(--cr-borde, rgba(255, 255, 255, .6)); }
}
/* La pestaña elegida es cristal teñido del color del tema (como lo elegido
   en el menú y la barra inferior), en todos los anchos. Era una pastilla
   blanca: sobre el vidrio se leía como un parche de papel. */
body[data-estilo="cristal"] .page-content.con-config > .cfg-pestanas .cfg-pestana[aria-current="page"] {
  border: 1px solid transparent;
  background: var(--cr-elegido-reflejo) padding-box, var(--cr-elegido-tinte) padding-box, var(--cr-elegido-canto) border-box;
  box-shadow: var(--cr-elegido-sombra);
  color: var(--cr-elegido-tinta);
  font-weight: 650;
}
/* Contraste: la marca de la pestaña elegida era una barra a la izquierda
   (de cuando las pestañas eran una columna); en la fila va abajo. */
body[data-estilo="contraste"] .page-content.con-config > .cfg-pestanas .cfg-pestana[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--ct-acento); }
/* Apariencia medía 880 px y las demás pantallas todo el ancho (también la
   de root): cambiaba el ancho al pasar de una a otra. */
body .ap-pantalla { max-width: none; }

/* Documentos (todos los del centro) hasta 1240 px: la tabla pasa a tarjetas
   y Cristal le dejaba a cada celda su alto de fila de tabla (46 px). Un
   asunto de tres renglones se montaba sobre la fila «Archivo» y Editar y
   Ver PDF lo tapaban. */
@media (max-width: 1240px) {
  body .root-templates-table td { height: auto !important; }
}

/* Documentos › Míos en tableta: la tabla de seis columnas no cabía y Asunto,
   Interesado, Fecha y las acciones quedaban fuera, a la derecha, sin que se
   notara que había más. Va en las mismas tarjetas de dos columnas que «Todo
   el centro» (.root-templates-table, style.css), y hasta el mismo ancho
   (1240 px): a 1024 todavía se cortaban Fecha y las acciones. */
@media (min-width: 768px) and (max-width: 1240px) {
  body #page-historial #tabla-historial-wrap .table-wrap { overflow-x: hidden; overflow-y: auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  body #page-historial #tabla-historial-wrap :is(table, tbody) { display: block; width: 100%; }
  body #page-historial #tabla-historial-wrap tbody { padding: 12px 14px 0; }
  body #page-historial #tabla-historial-wrap thead { display: none; }
  body #page-historial #tabla-historial-wrap tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-card); overflow: hidden; }
  body #page-historial #tabla-historial-wrap td { display: flex !important; align-items: flex-start; justify-content: space-between; gap: 12px; min-width: 0 !important; max-width: none !important; height: auto !important; padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: normal !important; overflow: visible !important; text-overflow: clip !important; text-align: right; }
  body #page-historial #tabla-historial-wrap td::before { content: attr(data-label); flex: 0 0 auto; color: var(--text-muted); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; text-align: left; }
  body #page-historial #tabla-historial-wrap td[data-label="Nomenclatura"] { grid-column: 1 / -1; }
  body #page-historial #tabla-historial-wrap td[data-label="Acciones"] { grid-column: 1 / -1; justify-content: flex-end; border-bottom: 0; }
  body #page-historial #tabla-historial-wrap td[data-label="Acciones"]::before { content: none; }
  body #page-historial #tabla-historial-wrap td[data-label="Acciones"] .table-row-action-group > * { opacity: 1 !important; }
}

/* Mi cuenta › Seguridad en tableta: tres contraseñas en tres columnas
   angostas; «Confirmar nueva contraseña» bajaba a dos renglones, su campo
   quedaba más abajo que los otros y las ayudas se cortaban. Dos columnas y
   la confirmación debajo de la nueva. */
@media (min-width: 768px) and (max-width: 1023px) {
  body .profile-password-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .profile-password-form > .input-block:first-child { grid-column: 1 / -1; max-width: calc(50% - 7px); }
}

/* Ventanas de escritorio: la cabecera pegajosa medía lo que el contenido
   (sin los 32 px de relleno de cada lado). Al bajar, el anillo azul del
   campo enfocado asomaba por sus costados. Ahora llega de borde a borde. */
@media (min-width: 768px) {
  body .modal > .modal-header { margin-inline: -32px; padding-inline: 32px; }
}

/* Escritorio ancho: el contenido de Configuración y su fila de pestañas no
   pasan de 1080 px (los formularios a todo lo ancho de un monitor grande
   se leían mal). */
@media (min-width: 1280px) {
  body .page-content.active.con-config > :is(.cfg-pestanas, .cfg-contenido) { max-width: 1080px; }
  body .page-content.active.con-config > .cfg-pestanas { align-self: flex-start; }
}

/* Pestañas de Configuración: solo el nombre, como en el teléfono. Con el
   ícono, las ocho pestañas no cabían en un escritorio de 1232 px y
   «Apariencia» quedaba cortada. Los íconos siguen en el cajón del menú. */
body .page-content.con-config > .cfg-pestanas .cfg-pestana .nav-icon { display: none; }
body .page-content.con-config > .cfg-pestanas .cfg-pestana { gap: 0; padding-inline: 14px; }
/* Entre 768 y 1199 px las ocho pestañas no cabían (a 1024 faltaban unos
   100 px y «Apariencia» quedaba escondida sin señal de que había más). Los
   rótulos «Centro» y «Personal» pasan a ser una línea divisoria entre los
   dos grupos y cada pestaña lleva menos relleno. */
@media (min-width: 768px) and (max-width: 1199px) {
  body .page-content.con-config > .cfg-pestanas .cfg-pestana { padding-inline: 11px !important; }
}
/* Los rótulos de grupo, desde 768 px, son una línea divisoria: dentro de la
   cápsula de pestañas, «UNIDAD» y «PERSONAL» en mayúsculas se leían como
   pestañas desactivadas (EduTrix no lleva rótulos en sus pestañas). */
@media (min-width: 768px) {
  body .page-content.con-config > .cfg-pestanas .cfg-grupo { width: 1px; height: 22px; margin: 0 6px; padding: 0; overflow: hidden; font-size: 0; background: var(--border-strong, var(--border)); }
  body .page-content.con-config > .cfg-pestanas .cfg-grupo:first-child { display: none; }
}
/* Teléfono, Cristal: dentro de la cápsula las pestañas no llevan su propio
   borde (eran fichas blancas sueltas); solo la elegida, en cristal teñido. */
@media (max-width: 767px) {
  body[data-estilo="cristal"] .page-content.con-config > .cfg-pestanas .cfg-pestana:not([aria-current="page"]) { border-color: transparent; background: transparent; }
}

/* Cristal, nivel Completo: como en EduTrix, el menú es el vidrio teñido del
   tema (más tinte que en Marca) y la opción activa, cristal teñido. Las
   reglas de Clásico (sistema.css) pintaban el riel de color sólido con los
   nombres en blanco al 82 % —sobre el vidrio quedaban lavados— y la opción
   activa en una pastilla blanca. */
body[data-estilo="cristal"][data-nivel="completo"] {
  --cr-nav: color-mix(in srgb, hsl(var(--bh) 85% 60%) 26%, var(--cr-vidrio));
  --cr-barra-inferior: color-mix(in srgb, hsl(var(--bh) 85% 60%) 22%, var(--cr-vidrio-grueso));
}
body.dark[data-estilo="cristal"][data-nivel="completo"] {
  --cr-nav: color-mix(in srgb, hsl(var(--bh) 70% 45%) 18%, var(--cr-vidrio));
  --cr-barra-inferior: color-mix(in srgb, hsl(var(--bh) 70% 45%) 22%, var(--cr-vidrio-grueso));
}
@media (min-width: 768px) {
  body[data-estilo="cristal"][data-nivel="completo"] .sidebar .nav-area { color: var(--dx-text-secondary); }
  body[data-estilo="cristal"][data-nivel="completo"] .sidebar .nav-area:not(.active):hover { background: rgba(255, 255, 255, .45); color: var(--text-main); }
  body.dark[data-estilo="cristal"][data-nivel="completo"] .sidebar .nav-area:not(.active):hover { background: rgba(255, 255, 255, .07); }
  body[data-estilo="cristal"][data-nivel="completo"] .sidebar .nav-area.active {
    background: var(--cr-elegido-reflejo) padding-box, var(--cr-elegido-tinte) padding-box, var(--cr-elegido-canto) border-box;
    color: var(--cr-elegido-tinta);
  }
  body[data-estilo="cristal"][data-nivel="completo"] .sidebar-footer { border-top-color: var(--dx-border); }
  body[data-estilo="cristal"][data-nivel="completo"] .sidebar .user-card:hover { background: var(--cr-relleno); }
}
@media (max-width: 767px) {
  body[data-estilo="cristal"][data-nivel="completo"] .bottom-nav-item { color: var(--dx-text-secondary); }
  body[data-estilo="cristal"][data-nivel="completo"] .bottom-nav-item.active { color: var(--cr-elegido-tinta); }
}
/* Root › Catálogo de Matrícula: las dos columnas son láminas (arriba) con su
   relleno; antes iban sueltas sobre el ambiente y la de programas, vacía,
   no decía nada. */
body[data-estilo="cristal"] .ge-root-grid > .ge-card { padding: 18px 20px; }
/* Root › Cargos: sus pestañas (tipo de institución) son un selector dentro
   de la lámina: pista hundida y la elegida en cristal teñido, como el
   selector de Estilo. Era una pastilla blanca (parche de papel). */
body[data-estilo="cristal"] #page-root-cargos .cargos-pestanas { border-radius: 999px; padding: 3px; background: var(--cr-hundido); box-shadow: var(--cr-hundido-sombra); }
body[data-estilo="cristal"] #page-root-cargos .cargos-pestana { border: 1px solid transparent; border-radius: 999px; }
body[data-estilo="cristal"] #page-root-cargos .cargos-pestana.is-activa {
  background: var(--cr-elegido-reflejo) padding-box, var(--cr-elegido-tinte) padding-box, var(--cr-elegido-canto) border-box;
  box-shadow: var(--cr-elegido-sombra);
  color: var(--cr-elegido-tinta);
  font-weight: 650;
}

/* Cristal: los textos de cada tema no pisan los de Cristal. La regla de la
   paleta (body:not(.dark)[data-tema]) tiene más especificidad que la del
   estilo y dejaba el gris del tema, pensado para fondo sólido, sobre el
   ambiente de color. */
body[data-estilo="cristal"][data-estilo]:not(.dark) { --dx-text: #0b1220; --dx-text-secondary: #283244; --dx-text-muted: #364050; --text-faint: #364050; }
body.dark[data-estilo="cristal"][data-estilo] { --dx-text: #f4f6fb; --dx-text-secondary: #dde2ec; --dx-text-muted: #c8d0de; --text-faint: #c8d0de; }
/* Facturación: en Clásico sus secciones van planas; en Cristal son láminas
   como el resto de Configuración (planas, el texto quedaba sobre el ambiente). */
body[data-estilo="cristal"] #page-admin-membresia .card:not(.membership-hero) {
  padding: 18px 20px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: var(--cr-reflejo) padding-box, var(--cr-lamina-capa) padding-box, var(--cr-canto-contenido) border-box;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--cr-sombra-contenido);
}
body.dark[data-estilo="cristal"] #page-admin-membresia .card:not(.membership-hero) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--cr-sombra-contenido); }
/* Contraste: la pantalla elegida en el panel negro del menú. El acento puro
   de un tema medio (Turquesa) daba 3,9:1 sobre el negro. */
body[data-estilo="contraste"] .sidebar .nav-item.active,
body[data-estilo="contraste"] .sidebar .nav-item.active > span,
body[data-estilo="contraste"] .sidebar .nav-item.active .nav-icon { color: color-mix(in srgb, var(--ct-acento-vivo) 55%, #fff) !important; }

/* Cristal: las etiquetas de estado (Activo, Aprobada…) mezclaban su tinte con
   la lámina translúcida y, en oscuro, el ambiente las aclaraba hasta 3,8:1.
   Se mezclan con la tapa opaca de la hoja. */
body[data-estilo="cristal"] {
  --success-soft: color-mix(in srgb, var(--dx-success) 12%, var(--cr-tapa-hoja));
  --warning-soft: color-mix(in srgb, var(--dx-warning) 14%, var(--cr-tapa-hoja));
  --danger-soft: color-mix(in srgb, var(--dx-danger, #dc2626) 12%, var(--cr-tapa-hoja));
}
/* Cristal claro: rótulos que van sobre el ambiente, fuera de una lámina, en
   la tinta principal (en gris quedaban en 3,4:1 sobre el violeta). */
body[data-estilo="cristal"] :is(.fx-grupo-titulo, #btn-toggle-clonar, .table-panel-count) { color: var(--dx-text) !important; }

/* Cristal claro: el verde de estado sobre el ambiente (estado del módulo en
   el menú del teléfono) quedaba en 4,05:1. */
body[data-estilo="cristal"]:not(.dark) { --dx-success: #0e5c2e; }
/* Clásico, nivel Completo, en el teléfono: la barra inferior es del color
   del tema; sus nombres en blanco entero (al 78 % daban 3,75:1) y el de la
   pantalla elegida también (la regla general lo pone oscuro, para barra clara). */
@media (max-width: 767px) {
  body[data-nivel="completo"]:not([data-estilo]) #bottom-nav .bottom-nav-item,
  body[data-nivel="completo"]:not([data-estilo]) #bottom-nav .bottom-nav-item.active,
  body[data-nivel="completo"]:not([data-estilo]) #bottom-nav .bottom-nav-item :is(.bnav-label, span:not(.bnav-icon):not(.bnav-badge)) { color: var(--primary-text) !important; }
}

/* Cristal: las tablas de Matrícula (.ge-table-wrap) no eran lámina y, en
   oscuro, su encabezado dejaba pasar el ambiente verde (2,7:1). */
body[data-estilo="cristal"] .ge-table-wrap { border: 1px solid transparent; border-radius: 16px; background: var(--cr-reflejo) padding-box, var(--cr-lamina-capa) padding-box, var(--cr-canto-contenido) border-box; }
/* Contraste: la nota del panel de Documentos con el plan vencido iba en el
   gris de la hoja blanca sobre el panel negro (2,9:1). */
body[data-estilo="contraste"] .nav-panel-nota { color: var(--ct-negro-texto); }

/* Cristal: las tarjetas del menú de Formatos y listados son láminas (su fondo
   era el tinte translúcido del tema y el ambiente violeta se colaba: 4,36:1). */
body[data-estilo="cristal"] .fx-menu button { border: 1px solid transparent; background: var(--cr-reflejo) padding-box, var(--cr-lamina-capa) padding-box, var(--cr-canto-contenido) border-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--cr-sombra-contenido); }
body.dark[data-estilo="cristal"] .fx-menu button { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--cr-sombra-contenido); }
body[data-estilo="cristal"] .fx-menu button:is(:hover, :focus-visible) { background: var(--cr-reflejo) padding-box, linear-gradient(var(--cr-relleno-fuerte), var(--cr-relleno-fuerte)) padding-box, var(--cr-canto-contenido) border-box; }

/* Pantallas de tabla (doctrix-redesign.css): la tarjeta y su contenedor se
   encogen al alto de la ventana (min-height: 0) para que la tabla de adentro
   se desplace. Si lo de adentro no es una tabla desplazable (las tarjetas de
   Cargos), el contenido se salía por debajo de la tarjeta: ahí recuperan el
   alto de su contenido y se desplaza la página. */
.page-content.page-tabla > .operational-list-card:not(:has(.table-wrap)),
.page-content.page-tabla > .operational-list-card:not(:has(.table-wrap)) > :is([id^="tabla-"], [id^="lista-"]) {
  flex: 0 0 auto;
  min-height: auto;
}