/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Selah · apariencia «Selah», base (14 oct · DISENO-SELAH.md §0 y §1 · «Respiro»).
   Claro, cielo con luz, vidrio, redondo, navy; el color solo donde significa algo.

   Reglas de esta hoja (y de selah-horario, selah-admisiones, selah-profesor, selah-otros):
   · Cada selector empieza por :root[data-diseno="selah"] (diseno.js lo pone antes de las hojas). Con Clásica nada de
     esto aplica y las hojas de siempre (base, componentes, áreas, movil) quedan tal cual.
   · Primero se redefinen los tokens de base.css: casi todo cambia solo por ellos. Después, el vidrio en los componentes
     comunes de componentes.css. Esas reglas llevan el prefijo dentro de :where(:root[data-diseno="selah"]) para pesar
     exactamente lo mismo que su par de componentes.css: le ganan por orden, pero no a los ajustes de contexto de cada
     área (.kbt-tel .boton, .boton.fc-pasar…), que siguen mandando con los tokens nuevos. Las hojas de área de Selah
     usan el prefijo entero (:root[data-diseno="selah"] .x), que pesa más y gana a todo lo clásico.
   · Lo que movil.css redibuja (barra, pestañas abajo, popovers como hojas desde abajo) se pinta aquí solo en el
     escritorio (min-width: 761px); en el teléfono solo cambian los tokens y los colores.

   Para las áreas (nombres estables):
   · Vidrio: --vidrio (paneles, barras, tarjetas grandes), --vidrio-2 (superficies secundarias, celdas), --vidrio-fuerte
     (capas flotantes), --vidrio-panel (paneles y diálogos con mucho texto), --vidrio-borde, --vidrio-sombra,
     --vidrio-desenfoque, --vidrio-hover y las clases .cristal y .cristal-2 (.vidrio y .tarjeta, los nombres de antes,
     siguen siendo la tarjeta blanca opaca). --marca (#0092FF: logo y halo, nunca
     texto). --tinte (14 %, 24 % en oscuro). Ojo con backdrop-filter (.cristal lo lleva): dentro de un padre que lo
     tenga, el vidrio no desenfoca la página; y el padre pasa a ser el bloque contenedor de sus hijos position: fixed
     (un menú o pop metido dentro se descoloca). No poner .cristal en algo que contenga capas fijas.
   · Controles (cambian solos en oscuro): --vidrio-control, --control-hover, --borde-control, --borde-campo,
     --campo-fondo, --pista, --pista-interruptor, --fila-hover, --elegido-fondo, --elegido-texto, --brillo.
     No escribir #fff ni rgba(30, 42, 77, …) sueltos en las hojas de área: con el oscuro se rompen.
   · Las cabeceras pegajosas necesitan fondo opaco: --sup / --sup-2 (o --fondo, que es un color plano y no el cielo).
   · Radios: --r-s 8 · --r-m 10 (controles) · --r-l 14 (fichas, tarjetas pequeñas) · --r-xl 22 (paneles) · --r-pildora.
   · Letra: --f-ui (Plus Jakarta Sans), --f-titulo (Darker Grotesque) · .voz (en --f-ui) · .cifra.
   · Etapa del alumno: cualquier elemento con data-estado="<Etapa>" (o data-etapa) recibe --etapa (su color),
     --ficha-tinte (14 % sobre blanco), --ficha-borde y --ficha-acento (texto de la etapa); también --e (el anillo que ya
     usan horario y leyendas). Por etapa en :root: --ficha-tinte-activo, -nuevo, -bienvenida, -esperando-pagos,
     -lista-de-espera, -aspirante, -pausa. Clases: .ficha-etapa (fondo teñido, borde, texto tinta) y .punto-etapa.
   · Asistencia (manda sobre la etapa): --presente / --presente-tinte / --presente-texto, --ausente / --ausente-tinte /
     --ausente-texto, --sin-motivo / --sin-motivo-tinte / --sin-motivo-texto.
   · El gesto: .halo (luz azul que respira 4 s + 6 s detrás de lo de ahora; quieta con movimiento reducido). .halo.suave
     para piezas pequeñas (una fila, una hora). El elemento no debe llevar overflow: hidden (recortaría la luz).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── letras locales: Plus Jakarta Sans vive en selah-fuentes.css, que diseno.js solo pide con
   Selah (un @font-face no se puede limitar a :root[data-diseno="selah"] y Clásica debe quedar idéntica) ── */

/* ═════ 1 · tokens (los mismos nombres de base.css, con los valores de DISENO-SELAH §1) ═════ */
:root[data-diseno="selah"] {
  color-scheme: light;

  /* cielo y vidrio */
  --cielo-1: #E3F0FF;
  --cielo-2: #F6FAFF;
  --luz-a: rgba(107, 213, 255, .55);
  --luz-b: rgba(0, 146, 255, .20);
  --luz-c: rgba(107, 213, 255, .22);
  --vidrio: rgba(255, 255, 255, .62);
  --vidrio-2: rgba(255, 255, 255, .42);
  --vidrio-fuerte: rgba(255, 255, 255, .88);   /* capas flotantes (menú, popover, pop): desenfoque fuerte detrás */
  --vidrio-panel: rgba(255, 255, 255, .96);    /* paneles y diálogos con mucho texto: nada se lee a través */
  --vidrio-control: rgba(255, 255, 255, .74);  /* botones secundarios y campos sobre vidrio */
  --vidrio-borde: rgba(255, 255, 255, .85);
  --vidrio-sombra: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 50px -24px rgba(35, 50, 104, .28);
  --vidrio-desenfoque: blur(24px) saturate(1.3);
  --marca: #0092FF;

  /* controles sobre el cielo (cambian en oscuro) */
  --vidrio-hover: rgba(255, 255, 255, .78);    /* tarjeta accionable al pasar */
  --control-hover: #FFFFFF;                    /* botón secundario o tarjeta-botón al pasar */
  --borde-control: rgba(30, 42, 77, .12);      /* borde de botones secundarios */
  --borde-campo: rgba(30, 42, 77, .16);        /* borde de campos */
  --campo-fondo: rgba(255, 255, 255, .86);
  --pista: rgba(30, 42, 77, .06);              /* pista de segmentados, desactivado, discos de ícono */
  --pista-interruptor: rgba(30, 42, 77, .18);
  --fila-hover: rgba(30, 42, 77, .04);
  --elegido-fondo: #FFFFFF;                    /* la opción elegida de un segmentado */
  --elegido-texto: var(--acento-texto);
  --brillo: rgba(255, 255, 255, .7);           /* filo de luz arriba de los botones */

  /* superficies: opacas (cabeceras pegajosas, campos, celdas); el vidrio va aparte */
  --fondo: #EAF3FF;
  --sup: #FFFFFF;
  --sup-2: #F4F8FE;
  --sup-3: #EAF0F8;
  --linea: rgba(30, 42, 77, .09);
  --linea-2: rgba(30, 42, 77, .17);

  /* tinta (navy) · niebla. --tinta-3 queda más oscura que la niebla-2 de la referencia para leer 4,5:1 en rótulos */
  --tinta: #1E2A4D;
  --tinta-2: #5B6785;
  --tinta-3: #636E8B;
  --tinta-4: #8A94AD;

  /* acción: lo elegido y la acción principal; nada más */
  --acento: #0B67CF;
  --acento-2: #0957B0;
  --acento-suave: rgba(11, 103, 207, .10);
  --acento-texto: #0A5DBB;
  --acento-anillo: rgba(11, 103, 207, .24);

  /* semánticos: urgente / pronto / hecho */
  --ok: #2E9E6A;        --ok-fondo: #E8F5EE;        --ok-texto: #1B7A4C;
  --aviso: #E58A12;     --aviso-fondo: #FCF0DE;     --aviso-texto: #9E5900;
  --peligro: #C42F45;   --peligro-fondo: #FAE8EB;   --peligro-texto: #B02A3F;
  --neutro-fondo: #EDF1F8; --neutro-texto: #5B6785;

  /* etapas (ficha de alumno: tinte al 14 % + punto o anillo; texto siempre tinta) */
  --e-activo: #2E9E6A;
  --e-nuevo: #2F7FF0;
  --e-bienvenida: #D9558F;
  --e-esperando-pagos: #E0901A;
  --e-lista-de-espera: #7C5CE0;
  --e-aspirante: #6F8FAE;
  --e-pausa: #A3ACBE;
  --e-desistio: #A3ACBE;
  --e-facturas: #A3ACBE;
  --tinte: 14%;
  --ficha-base: #FFFFFF;
  --ficha-tinte-activo: color-mix(in srgb, var(--e-activo) var(--tinte), var(--ficha-base));
  --ficha-tinte-nuevo: color-mix(in srgb, var(--e-nuevo) var(--tinte), var(--ficha-base));
  --ficha-tinte-bienvenida: color-mix(in srgb, var(--e-bienvenida) var(--tinte), var(--ficha-base));
  --ficha-tinte-esperando-pagos: color-mix(in srgb, var(--e-esperando-pagos) var(--tinte), var(--ficha-base));
  --ficha-tinte-lista-de-espera: color-mix(in srgb, var(--e-lista-de-espera) var(--tinte), var(--ficha-base));
  --ficha-tinte-aspirante: color-mix(in srgb, var(--e-aspirante) var(--tinte), var(--ficha-base));
  --ficha-tinte-pausa: color-mix(in srgb, var(--e-pausa) var(--tinte), var(--ficha-base));

  /* asistencia: manda sobre el tinte de etapa (presente azul, ausente gris, sin motivo ámbar, sin marcar blanco).
     17 oct · asistencias · colores: antes presente verde 16 % y ausente rojo 14 % (y Recepción, azul 13 % y gris 12 %);
     ahora, en toda la app, azul 22 % y gris 26 % con borde al 55 %. El rojo es solo de la clase sin tomar (y del ausente
     sin motivo de Recepción). --asis-tinta: gris de segundo plano dentro de una ficha teñida (sobre 4,5:1). */
  --presente: var(--acento);  --presente-tinte: color-mix(in srgb, var(--acento) 22%, var(--ficha-base));  --presente-texto: var(--acento-texto);
  --presente-borde: color-mix(in srgb, var(--acento) 55%, var(--ficha-base));
  --ausente: var(--tinta-3);  --ausente-tinte: color-mix(in srgb, var(--tinta-3) 26%, var(--ficha-base)); --ausente-texto: #4A5570;
  --ausente-borde: color-mix(in srgb, var(--tinta-3) 55%, var(--ficha-base));
  --asis-tinta: #4A5570;
  --sin-motivo: var(--aviso); --sin-motivo-tinte: color-mix(in srgb, var(--aviso) 16%, var(--ficha-base)); --sin-motivo-texto: var(--aviso-texto);

  /* avatares sin foto: tinte suave (el de la etapa si la hay; si no, azul niebla) */
  --avatar-fondo: #E1EAF6;
  --avatar-texto: #3D4F78;
  --instrumento: var(--tinta-3);
  --grafito: #1E2A4D;

  /* letra */
  --f-ui: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --f-titulo: "Darker Grotesque", var(--f-ui);
  --t-titulo: 38px; --lh-titulo: 40px;

  /* forma: 10 controles · 14 fichas · 22 paneles · píldora */
  --r-s: 8px;
  --r-m: 10px;
  --r-l: 14px;
  --r-xl: 22px;

  /* sombras navy, suaves y largas */
  --s-1: 0 1px 2px rgba(35, 50, 104, .06);
  --s-2: 0 1px 2px rgba(35, 50, 104, .05), 0 10px 26px -14px rgba(35, 50, 104, .24);
  --s-3: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 4px 12px -4px rgba(35, 50, 104, .12), 0 28px 60px -24px rgba(35, 50, 104, .36);

  /* capas flotantes y velo */
  --sup-flotante: var(--vidrio-fuerte);
  --desenfoque: var(--vidrio-desenfoque);
  --velo: rgba(24, 34, 63, .26);
}

/* oscuro, si el sistema lo pide: navy, vidrio translúcido, tinta clara */
@media (prefers-color-scheme: dark) {
  :root[data-diseno="selah"] {
    color-scheme: dark;
    --cielo-1: #18223F;
    --cielo-2: #1F2633;
    --luz-a: rgba(107, 213, 255, .16);
    --luz-b: rgba(0, 146, 255, .18);
    --luz-c: rgba(107, 213, 255, .06);
    --vidrio: rgba(44, 56, 86, .55);
    --vidrio-2: rgba(44, 56, 86, .35);
    --vidrio-fuerte: rgba(36, 46, 72, .95);
    --vidrio-panel: rgba(36, 46, 72, .97);
    --vidrio-control: rgba(255, 255, 255, .07);
    --vidrio-borde: rgba(255, 255, 255, .10);
    --vidrio-sombra: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 18px 50px -24px rgba(0, 0, 0, .6);
    --vidrio-hover: rgba(52, 66, 100, .7);
    --control-hover: rgba(255, 255, 255, .12);
    --borde-control: rgba(255, 255, 255, .14);
    --borde-campo: rgba(255, 255, 255, .16);
    --campo-fondo: rgba(255, 255, 255, .05);
    --pista: rgba(255, 255, 255, .07);
    --pista-interruptor: rgba(255, 255, 255, .2);
    --fila-hover: rgba(255, 255, 255, .04);
    --elegido-fondo: rgba(255, 255, 255, .16);
    --elegido-texto: #FFFFFF;
    --brillo: rgba(255, 255, 255, .06);

    --fondo: #1B2440;
    --sup: #253051;
    --sup-2: #212B49;
    --sup-3: #2D3858;
    --linea: rgba(255, 255, 255, .08);
    --linea-2: rgba(255, 255, 255, .16);

    --tinta: #EEF2FA;
    --tinta-2: #A9B3CA;
    --tinta-3: #929DB8;
    --tinta-4: #6F7A96;

    --acento: #2B70D2;   /* relleno de botón: blanco encima 4,8:1 (el #3E8EF0 de la referencia daba 3,3) */
    --acento-2: #5A9FF3;
    --acento-suave: rgba(62, 142, 240, .16);
    --acento-texto: #8DBDFF;
    --acento-anillo: rgba(62, 142, 240, .32);

    --ok: #2E9E6A;        --ok-fondo: rgba(46, 158, 106, .18);   --ok-texto: #5FD39A;
    --aviso: #E58A12;     --aviso-fondo: rgba(229, 138, 18, .18); --aviso-texto: #FFB457;
    --peligro: #E5384F;   --peligro-fondo: rgba(229, 56, 79, .18); --peligro-texto: #FF7487;
    --neutro-fondo: rgba(255, 255, 255, .07); --neutro-texto: #A9B3CA;

    --tinte: 24%;
    --ficha-base: #253051;
    /* 17 oct · asistencias · colores (oscuro): azul 45 % y gris 26 % sobre la ficha; textos claros sobre 4,5:1 */
    --presente-tinte: color-mix(in srgb, var(--acento) 45%, var(--ficha-base)); --presente-texto: #B9D6FF;
    --presente-borde: color-mix(in srgb, var(--acento-2) 70%, var(--ficha-base));
    --ausente-tinte: color-mix(in srgb, var(--tinta-3) 26%, var(--ficha-base)); --ausente-texto: #C3CBDD;
    --ausente-borde: color-mix(in srgb, var(--tinta-3) 60%, var(--ficha-base));
    --asis-tinta: #C3CBDD;
    --avatar-fondo: #34436A;
    --avatar-texto: #D5DEF0;
    --grafito: #0F1629;

    --s-1: 0 1px 2px rgba(0, 0, 0, .25);
    --s-2: 0 1px 2px rgba(0, 0, 0, .2), 0 10px 26px -14px rgba(0, 0, 0, .55);
    --s-3: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 4px 12px -4px rgba(0, 0, 0, .3), 0 28px 60px -24px rgba(0, 0, 0, .7);
    --velo: rgba(5, 9, 20, .5);
  }
}

/* ═════ 2 · fondo: el cielo con sus luces, fijo ═════ */
:root[data-diseno="selah"] body {
  background:
    radial-gradient(900px 520px at 12% -8%, var(--luz-a), transparent 70%),
    radial-gradient(800px 600px at 96% 18%, var(--luz-b), transparent 70%),
    radial-gradient(1000px 500px at 50% 112%, var(--luz-c), transparent 70%),
    linear-gradient(180deg, var(--cielo-1), var(--cielo-2));
  background-attachment: fixed;
  background-color: var(--cielo-2);
}
:root[data-diseno="selah"] ::selection { background: rgba(11, 103, 207, .18); }
:root[data-diseno="selah"] * { scrollbar-color: rgba(30, 42, 77, .2) transparent; }
:root[data-diseno="selah"] ::-webkit-scrollbar-thumb { background-color: rgba(30, 42, 77, .18); }

/* ═════ 3 · letra y títulos ═════ */
/* título de pantalla: Darker Grotesque 800 (la letra de marca, solo donde manda) */
:where(:root[data-diseno="selah"]) :is(h1, .vista h1, .titulo-fila h1, .titulo-vista) { font-weight: 800; letter-spacing: -.01em; }
:where(:root[data-diseno="selah"]) :is(h2, h3, h4) { letter-spacing: -.01em; }
:where(:root[data-diseno="selah"]) .sub { color: var(--tinta-2); }
/* voz: una sola palabra de entrada por pantalla («Hoy», «Próxima»), en la letra de la interfaz (15 oct · sin serif ni itálica) */
:root[data-diseno="selah"] .voz { font: 700 19px/1.1 var(--f-ui); color: var(--acento-texto); letter-spacing: -.01em; }
/* cifra protagonista (horas grandes, números de un vistazo) */
:root[data-diseno="selah"] .cifra { font-family: var(--f-titulo); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: .85; }

/* ═════ 4 · vidrio: superficies grandes ═════
   .tarjeta y .vidrio (nombres de antes) siguen siendo la tarjeta blanca opaca: las llevan la ficha del alumno, la Hoja,
   el buscador, los paneles de Pagos… y algunas necesitan fondo opaco. El vidrio de Selah es una clase nueva:
   .cristal (paneles, barras, tarjetas grandes) y .cristal-2 (superficies secundarias, celdas). */
:root[data-diseno="selah"] .cristal {
  background: var(--vidrio); border: 1px solid var(--vidrio-borde); border-radius: var(--r-xl); box-shadow: var(--vidrio-sombra);
  -webkit-backdrop-filter: var(--vidrio-desenfoque); backdrop-filter: var(--vidrio-desenfoque);
}
:root[data-diseno="selah"] .cristal-2 { background: var(--vidrio-2); border: 1px solid var(--vidrio-borde); border-radius: var(--r-l); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .cristal.accionable:hover { background: var(--vidrio-hover); box-shadow: var(--vidrio-sombra), var(--s-2); }
/* ═════ 5 · el gesto: halo que respira detrás de lo de ahora ═════ */
:root[data-diseno="selah"] .halo { position: relative; isolation: isolate; }
:root[data-diseno="selah"] .halo::before {
  content: ''; position: absolute; inset: -6px; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(120deg, rgba(107, 213, 255, .85), rgba(0, 146, 255, .55) 55%, rgba(107, 213, 255, .7));
  filter: blur(38px); opacity: .75;
  animation: selah-respira 10s ease-in-out infinite;   /* inhala 4 s (0 → 40 %), exhala 6 s */
}
:root[data-diseno="selah"] .halo.suave::before { inset: -2px; filter: blur(18px); }
@keyframes selah-respira {
  0% { transform: scale(.985); opacity: .45; }
  40% { transform: scale(1.025); opacity: .9; }
  100% { transform: scale(.985); opacity: .45; }
}
@media (prefers-color-scheme: dark) {
  :root[data-diseno="selah"] .halo::before { background: linear-gradient(120deg, rgba(107, 213, 255, .35), rgba(0, 146, 255, .4) 55%, rgba(107, 213, 255, .3)); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-diseno="selah"] .halo::before { animation: none; opacity: .75; transform: none; }
}

/* ═════ 6 · etapas: tinte de ficha, punto y anillo (cualquier pantalla) ═════
   El JS ya pone data-estado="<Etapa>" en las fichas (horario, sopa, Kanban, leyendas) y un --e en línea con el tono
   clásico; aquí --e se cambia por el de Selah (con !important, para ganar al estilo en línea) y se añade --etapa. */
:root[data-diseno="selah"] :is([data-estado="Activo"], [data-etapa="Activo"]) { --etapa: var(--e-activo); --e: var(--e-activo) !important; --ficha-tinte: var(--ficha-tinte-activo); }
:root[data-diseno="selah"] :is([data-estado="Nuevo"], [data-etapa="Nuevo"]) { --etapa: var(--e-nuevo); --e: var(--e-nuevo) !important; --ficha-tinte: var(--ficha-tinte-nuevo); }
:root[data-diseno="selah"] :is([data-estado="Bienvenida"], [data-etapa="Bienvenida"]) { --etapa: var(--e-bienvenida); --e: var(--e-bienvenida) !important; --ficha-tinte: var(--ficha-tinte-bienvenida); }
:root[data-diseno="selah"] :is([data-estado="Esperando pagos"], [data-etapa="Esperando pagos"]) { --etapa: var(--e-esperando-pagos); --e: var(--e-esperando-pagos) !important; --ficha-tinte: var(--ficha-tinte-esperando-pagos); }
:root[data-diseno="selah"] :is([data-estado="Lista de Espera"], [data-etapa="Lista de Espera"]) { --etapa: var(--e-lista-de-espera); --e: var(--e-lista-de-espera) !important; --ficha-tinte: var(--ficha-tinte-lista-de-espera); }
:root[data-diseno="selah"] :is([data-estado="Aspirante"], [data-etapa="Aspirante"]) { --etapa: var(--e-aspirante); --e: var(--e-aspirante) !important; --ficha-tinte: var(--ficha-tinte-aspirante); }
:root[data-diseno="selah"] :is([data-estado="Pausa"], [data-estado="Desistió"], [data-estado="Facturas"], [data-etapa="Pausa"], [data-etapa="Desistió"], [data-etapa="Facturas"]) { --etapa: var(--e-pausa); --e: var(--e-pausa) !important; --ficha-tinte: var(--ficha-tinte-pausa); }
:root[data-diseno="selah"] :is([data-estado], [data-etapa]) {
  --ficha-borde: color-mix(in srgb, var(--etapa, var(--tinta)) 22%, transparent);
  --ficha-acento: color-mix(in srgb, var(--etapa, var(--tinta-2)) 70%, var(--tinta));
}
/* la ficha teñida y el punto de etapa, listos para usar */
:root[data-diseno="selah"] .ficha-etapa { background: var(--ficha-tinte, var(--vidrio)); border: 1px solid var(--ficha-borde, var(--vidrio-borde)); color: var(--tinta); }
:root[data-diseno="selah"] .ficha-etapa-texto { color: var(--ficha-acento, var(--tinta-2)); font-weight: 600; }
:root[data-diseno="selah"] .punto-etapa { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--etapa, var(--tinta-4)); }

/* ═════ 7 · avatares: foto redonda; sin foto, tinte suave (el de su etapa si la tiene) ═════ */
:where(:root[data-diseno="selah"]) .avatar { font-weight: 700; }
:where(:root[data-diseno="selah"]) .avatar.sin-foto {
  background: color-mix(in srgb, var(--etapa, #6F8FAE) 20%, var(--ficha-base));
  color: color-mix(in srgb, var(--etapa, #3D4F78) 62%, var(--tinta));
}
:where(:root[data-diseno="selah"]) .logo { background: var(--marca); }

/* ═════ 8 · botones: principal = acción en píldora; secundario de vidrio ═════
   Desde aquí, las reglas de componentes llevan el prefijo en :where(…): pesan lo mismo que su par en componentes.css y
   le ganan por orden, pero los ajustes de cada área (.fc-pasar, .kbt-tel .boton…) siguen mandando. */
:where(:root[data-diseno="selah"]) .boton {
  border-radius: var(--r-pildora); border-color: var(--borde-control); background: var(--vidrio-control); color: var(--tinta);
  box-shadow: 0 1px 2px rgba(35, 50, 104, .06), 0 1px 0 var(--brillo) inset;
}
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .boton:hover:not(:disabled) { background: var(--control-hover); border-color: var(--linea-2); }
:where(:root[data-diseno="selah"]) .boton:active:not(:disabled) { background: var(--sup-2); }
:where(:root[data-diseno="selah"]) .boton:focus-visible { box-shadow: 0 0 0 3px var(--acento-anillo); border-color: var(--acento); }
:where(:root[data-diseno="selah"]) :is(.boton.chico, .boton.grande, .boton.enorme) { border-radius: var(--r-pildora); }

:where(:root[data-diseno="selah"]) .boton.primario {
  background: var(--acento); border-color: var(--acento); color: #fff;
  box-shadow: 0 10px 22px -12px rgba(11, 103, 207, .7), inset 0 1px 0 rgba(255, 255, 255, .22);
}
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .boton.primario:hover:not(:disabled) { background: var(--acento-2); border-color: var(--acento-2); box-shadow: 0 12px 26px -12px rgba(11, 103, 207, .8), inset 0 1px 0 rgba(255, 255, 255, .22); }
:where(:root[data-diseno="selah"]) .boton.primario:active:not(:disabled) { background: var(--acento-2); }
:where(:root[data-diseno="selah"]) .boton.primario:focus-visible { box-shadow: 0 0 0 3px var(--acento-anillo); }
:where(:root[data-diseno="selah"]) .boton.verde { background: var(--ok); border-color: var(--ok); color: #fff; box-shadow: 0 10px 22px -12px rgba(46, 158, 106, .7); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .boton.verde:hover:not(:disabled) { background: var(--ok-texto); border-color: var(--ok-texto); }
:where(:root[data-diseno="selah"]) .boton.peligro { background: var(--vidrio-control); border-color: color-mix(in srgb, var(--peligro) 40%, transparent); color: var(--peligro-texto); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .boton.peligro:hover:not(:disabled) { background: var(--peligro-fondo); border-color: var(--peligro); }
:where(:root[data-diseno="selah"]) :is(.dialogo, .pop) .boton.peligro { background: var(--peligro); border-color: var(--peligro); color: #fff; box-shadow: 0 10px 22px -12px rgba(196, 47, 69, .7); }
:where(:root[data-diseno="selah"]) .boton.suave { background: transparent; border-color: transparent; box-shadow: none; color: var(--acento-texto); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .boton.suave:hover:not(:disabled) { background: var(--acento-suave); border-color: transparent; }
:where(:root[data-diseno="selah"]) .boton.suave:active:not(:disabled) { background: var(--acento-suave); }
:where(:root[data-diseno="selah"]) .boton.blanco { background: var(--vidrio-control); }
/* desactivado: gris, nunca azul pálido con texto blanco */
:where(:root[data-diseno="selah"]) :is(.boton:disabled, .boton[aria-disabled="true"]) { background: var(--pista); border-color: transparent; color: var(--tinta-4); box-shadow: none; }
:where(:root[data-diseno="selah"]) .boton.suave:is(:disabled, [aria-disabled="true"]) { background: transparent; }
/* un solo principal por diálogo: el que no es el último vuelve a secundario */
:where(:root[data-diseno="selah"]) :is(.dialogo-botones, .pop-botones, .panel-pie) .boton.primario:not(:last-child) {
  background: var(--vidrio-control); border-color: var(--borde-control); color: var(--tinta); box-shadow: 0 1px 2px rgba(35, 50, 104, .06);
}

/* botones de ícono: redondos, vidrio al pasar */
:where(:root[data-diseno="selah"]) .boton-icono { border-radius: 50%; }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .boton-icono:hover:not(:disabled) { background: var(--vidrio); color: var(--tinta); box-shadow: 0 0 0 1px var(--vidrio-borde), var(--s-1); }
:where(:root[data-diseno="selah"]) .boton-icono.redondo { border-color: var(--borde-control); background: var(--vidrio-control); }
:where(:root[data-diseno="selah"]) :is(.volver, .enlace-discreto) { border-radius: var(--r-pildora); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) :is(.volver, .enlace-discreto):hover { background: var(--vidrio); }

/* ═════ 9 · chips: píldora, sin borde (los tonos salen de los tokens) ═════ */
:where(:root[data-diseno="selah"]) :is(.chip, .etiqueta) { letter-spacing: 0; }

/* ═════ 10 · segmentados: pista navy suave, la opción elegida blanca con el texto en acción ═════ */
:where(:root[data-diseno="selah"]) :is(.segmentado, .conmutador) {
  border-radius: var(--r-pildora); background: var(--pista); box-shadow: inset 0 0 0 1px var(--fila-hover);
}
:where(:root[data-diseno="selah"]) :is(.segmentado, .conmutador) button { border-radius: var(--r-pildora); font-weight: 600; color: var(--tinta-2); }
:where(:root[data-diseno="selah"]) :is(.segmentado, .conmutador) button.activo {
  background: var(--elegido-fondo); color: var(--elegido-texto); box-shadow: 0 1px 2px rgba(35, 50, 104, .1), 0 4px 10px -6px rgba(35, 50, 104, .25);
}
:where(:root[data-diseno="selah"]) :is(.segmentado, .conmutador) button.activo .ic { color: var(--elegido-texto); }
/* «Profesores | Administración» de la entrada es el mismo conmutador */
:where(:root[data-diseno="selah"]) .perfil-interruptor { border-radius: var(--r-pildora); background: var(--pista); }
:where(:root[data-diseno="selah"]) .pi-boton { border-radius: var(--r-pildora); font-weight: 600; }
:where(:root[data-diseno="selah"]) .pi-boton.activo { background: var(--elegido-fondo); color: var(--elegido-texto); box-shadow: 0 1px 2px rgba(35, 50, 104, .1), 0 4px 10px -6px rgba(35, 50, 104, .25); }

/* ═════ 11 · campos: blancos casi opacos, borde fino navy, radio 10; búsqueda en píldora ═════ */
:where(:root[data-diseno="selah"]) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="hidden"]), select, textarea) {
  border-color: var(--borde-campo); background-color: var(--campo-fondo);
}
:where(:root[data-diseno="selah"]) :is(.campo, .adm-buscador, .sopa-busqueda) { border-color: var(--borde-campo); background: var(--campo-fondo); }
:where(:root[data-diseno="selah"]) :is(.adm-buscador, .sopa-busqueda) { border-radius: var(--r-pildora); }
:where(:root[data-diseno="selah"]) :where(input, select, textarea):focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-anillo); }
:where(:root[data-diseno="selah"]) :is(input[type="checkbox"], .casilla-caja) { border-radius: 5px; }
:where(:root[data-diseno="selah"]) .campo-pendiente { background: var(--vidrio-2); }

/* ═════ 12 · interruptor: pista navy suave, verde encendido ═════ */
:where(:root[data-diseno="selah"]) .interruptor-pista { background: var(--pista-interruptor); }
:where(:root[data-diseno="selah"]) .interruptor[aria-checked="true"] .interruptor-pista { background: var(--ok); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .interruptor:hover { background: var(--fila-hover); }

/* ═════ 13 · tablas: marco de vidrio, cabecera opaca (pegajosa: nada se lee por debajo) ═════ */
:where(:root[data-diseno="selah"]) .tabla-marco {
  background: var(--vidrio); border-color: var(--vidrio-borde); border-radius: var(--r-xl); box-shadow: var(--vidrio-sombra);
}
:where(:root[data-diseno="selah"]) .tabla .tabla-seccion th { background: transparent; }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .tabla tbody tr:hover td { background: rgba(11, 103, 207, .04); }

/* ═════ 14 · franjas de estado ═════ */
:where(:root[data-diseno="selah"]) .franja { border-radius: var(--r-l); }
:where(:root[data-diseno="selah"]) .franja .boton { background: var(--vidrio-control); }

/* ═════ 15 · velo, panel y diálogo: vidrio fuerte, radio 22 ═════ */
/* el velo desenfoca un poco la página (nada de detrás se lee). Ojo: un padre con backdrop-filter le quita el desenfoque
   al vidrio de dentro (el panel solo ve el velo); por eso paneles y diálogos van casi opacos (--vidrio-panel). El velo
   lateral no desenfoca: la hoja habla de la pantalla de detrás y esta debe verse. */
:where(:root[data-diseno="selah"]) .velo { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
:where(:root[data-diseno="selah"]) .velo.oscuro { background: rgba(24, 34, 63, .36); }
:where(:root[data-diseno="selah"]) .velo.velo-lateral { background: rgba(24, 34, 63, .12); -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(:root[data-diseno="selah"]) :is(.panel, .dialogo) {
  background: var(--vidrio-panel); border-color: var(--vidrio-borde); box-shadow: var(--s-3);
  /* sin backdrop-filter: casi opacos no lo necesitan, y un backdrop-filter haría del panel el bloque contenedor de lo
     que lleva position: fixed dentro (menús, pops) y lo movería de sitio */
}
:where(:root[data-diseno="selah"]) .panel-ic { border-radius: 50%; background: var(--acento-suave); color: var(--acento-texto); }
:where(:root[data-diseno="selah"]) .dg-escrituras { background: var(--vidrio-2); }
:where(:root[data-diseno="selah"]) .dg-opcion { background: var(--vidrio-control); }
:where(:root[data-diseno="selah"]) .pop-filas { background: var(--vidrio-2); }

/* ═════ 16 · capas flotantes (escritorio): menú, popover y pop de vidrio con desenfoque ═════
   En el teléfono son hojas desde abajo (movil.css) y solo toman los tokens. */
@media (min-width: 761px) {
  :where(:root[data-diseno="selah"]) :is(.menu, .popover, .pop) { border-color: var(--vidrio-borde); }
  :where(:root[data-diseno="selah"]) :is(.popover, .pop) { border-radius: 18px; }
  /* la flecha: del color del vidrio ya mezclado con el cielo (opaca, para no sumar dos capas) */
  :where(:root[data-diseno="selah"]) :is(.popover, .pop)::before { background: #FAFCFF; border-color: var(--vidrio-borde); }
  :where(:root[data-diseno="selah"]) .pop.pop-pie { background: var(--sup); border-radius: var(--r-l); }
}
@media (min-width: 761px) and (prefers-color-scheme: dark) {
  :where(:root[data-diseno="selah"]) :is(.popover, .pop)::before { background: #252F4A; }
}
:where(:root[data-diseno="selah"]) .menu-item:hover, :where(:root[data-diseno="selah"]) .menu-item:focus-visible { background: var(--acento-suave); }

/* ═════ 17 · avisos (toasts): vidrio navy, abajo al centro ═════ */
:where(:root[data-diseno="selah"]) .avisos > .aviso {
  border-radius: var(--r-l); background: rgba(30, 42, 77, .92); box-shadow: 0 18px 40px -18px rgba(30, 42, 77, .6);
  -webkit-backdrop-filter: var(--vidrio-desenfoque); backdrop-filter: var(--vidrio-desenfoque);
}
:where(:root[data-diseno="selah"]) .avisos > .aviso-error::before { background: #FF7487; }
:where(:root[data-diseno="selah"]) .aviso-boton { border-radius: var(--r-pildora); color: #9CC8FF; }

/* ═════ 18 · arranque: carga, error y conexión sobre el cielo ═════ */
:where(:root[data-diseno="selah"]) :is(.carga.entra, form.conexion) {
  background: var(--vidrio); border-color: var(--vidrio-borde); border-radius: 28px; box-shadow: var(--vidrio-sombra);
  -webkit-backdrop-filter: var(--vidrio-desenfoque); backdrop-filter: var(--vidrio-desenfoque);
}

/* ═════ 19 · perfil («¿quién entra?»): vidrio sobre el cielo ═════ */
:where(:root[data-diseno="selah"]) :is(.perfil-filas, .portal-tarjeta, .tarjeta-supervision) {
  background: var(--vidrio); border-color: var(--vidrio-borde); box-shadow: var(--vidrio-sombra);
  -webkit-backdrop-filter: var(--vidrio-desenfoque); backdrop-filter: var(--vidrio-desenfoque);
}
:where(:root[data-diseno="selah"]) :is(.perfil-filas, .portal-tarjeta) { border-radius: 26px; }
:where(:root[data-diseno="selah"]) .tarjeta-perfil {
  border-radius: var(--r-pildora); border-color: var(--borde-control); background: var(--vidrio-control);
  box-shadow: 0 1px 2px rgba(35, 50, 104, .05);
}
:where(:root[data-diseno="selah"]) :is(.pt-ic, .tr-ic) { border-radius: 50%; background: var(--pista); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) :is(.tarjeta-perfil, .portal-tarjeta, .tarjeta-supervision):hover {
  background: var(--control-hover); border-color: color-mix(in srgb, var(--acento) 45%, transparent); box-shadow: var(--s-2), 0 0 0 3px var(--acento-suave);
}

/* ═════ 20 · barra del portal (escritorio): sin franja; pestañas en píldora de vidrio, la elegida en tinta ═════ */
@media (min-width: 761px) {
  :where(:root[data-diseno="selah"]) .barra {
    min-height: 64px; padding-top: 12px; padding-bottom: 8px;
    background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  :where(:root[data-diseno="selah"]) .pestanas {
    padding: 4px; border-radius: var(--r-pildora); background: var(--vidrio); box-shadow: 0 0 0 1px var(--vidrio-borde), var(--vidrio-sombra);
    -webkit-backdrop-filter: var(--vidrio-desenfoque); backdrop-filter: var(--vidrio-desenfoque);
  }
  :where(:root[data-diseno="selah"]) .pestana { border-radius: var(--r-pildora); font-weight: 600; color: var(--tinta-2); }
  :where(:root[data-diseno="selah"]:not(.puntero-quieto)) .pestana:not(.activa):hover { color: var(--tinta); }
  :where(:root[data-diseno="selah"]) .pestana.activa { color: #fff; }
  :where(:root[data-diseno="selah"]) .pestana.activa .pestana-disco { color: rgba(255, 255, 255, .9); }
  :where(:root[data-diseno="selah"]) .pestanas-marcador {
    top: 4px; height: calc(100% - 8px); border-radius: var(--r-pildora); background: var(--tinta);
    box-shadow: 0 8px 18px -10px rgba(30, 42, 77, .7);
  }
  :where(:root[data-diseno="selah"]:not(.puntero-quieto)) .tarjeta-yo:hover { background: var(--vidrio); border-color: var(--vidrio-borde); box-shadow: var(--s-1); }
  :where(:root[data-diseno="selah"]:not(.puntero-quieto)) .icono-btn:hover,
  :where(:root[data-diseno="selah"]) .icono-btn[aria-expanded="true"] { background: var(--vidrio); border-color: var(--vidrio-borde); }
}
@media (min-width: 761px) and (prefers-color-scheme: dark) {
  :where(:root[data-diseno="selah"]) .pestana.activa,
  :where(:root[data-diseno="selah"]) .pestana.activa .pestana-disco { color: #1E2A4D; }
  :where(:root[data-diseno="selah"]) .pestanas-marcador { background: #EEF2FA; }
}

/* ═════ 21 · teléfono (≤ 760): barra sobre el cielo y pestañas de abajo de vidrio ═════ */
@media (max-width: 760px) {
  :root[data-diseno="selah"] { --t-titulo: 34px; --lh-titulo: 36px; }
  :where(:root[data-diseno="selah"]) .barra { background: transparent; }
  :where(:root[data-diseno="selah"]) .pestanas {
    background: var(--vidrio-panel); border-top-color: var(--vidrio-borde); box-shadow: 0 -10px 30px -20px rgba(35, 50, 104, .35);
  }
}