/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Selah · Horario (14 oct · DISENO-SELAH §2; 15 oct · RONDA-FINAL §3: vuelve la composición de la Clásica, sin cuerdas,
   trastes ni cejuela; ver la sección 2). Todas las formas del horario: Administración (capas, sopa, bandeja),
   Asistencia (también Recepción), profesor, el horario de Asignar en la ficha y el mini horario. Inventario de funciones:
   docs/selah-horario.md. Va sobre horario.css (la mecánica de siempre) y selah.css (tokens, vidrio, halo).

   La composición (15 oct):
   · la de la Clásica: filas por hora con una línea fina arriba de cada celda, instrumentos a la izquierda, tarjetas a lo
     ancho de su celda; toda la rejilla sobre una sola superficie clara, del color de las cabeceras pegajosas;
   · las horas y el día en Darker Grotesque; los grupos, tarjetas de vidrio casi opaco; las fichas, filas blancas con la
     etapa en el anillo de la foto y su leyenda; los fondos de color son de la asistencia (17 oct: presente azul, ausente
     gris con su palabra, sin tomar en el tono de la clase, Recepción con el borde del motivo), de Finanzas y de lo pendiente
     de aplicar, siempre con su leyenda en la línea;
   · un nombre que no cabe entero en su ficha dice «Sofía R.» (data-corto, horario.js · abreviar); el nombre entero sigue
     en el texto y en el title;
   · la hora en curso (horario.js · marcarAhora, solo con Selah) lleva el halo y sus tarjetas, en acción.
   Cada selector empieza por :root[data-diseno="selah"]; para ganar a una regla de horario.css se antepone ese prefijo a
   su mismo selector.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ═════ 0 · tokens del horario ═════ */
:root[data-diseno="selah"] {
  --vidrio-tarjeta: var(--sup);  /* el grupo: opaco */
  --herm: var(--tinta);                                               /* hermanos: contorno y punto navy */
  /* el cielo de la ventana, para las cabeceras pegajosas (con background-attachment: fixed coincide con el de detrás) */
  /* 14 oct · en la app del Mac el cielo «fijo» de las cabeceras pegajosas se pintaba como bloques azules saturados
     (background-attachment: fixed dentro del contenedor que se desplaza no coincide con el fondo de la ventana).
     Ahora: el color claro del cielo, casi opaco, igual en cualquier contenedor. */
  --rejilla-pegajosa: var(--cielo-2);
  --cielo-capa:
    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));
}

/* ═════ 1 · mandos: capas como segmentado en píldora; botones de la fila de vidrio ═════ */
:root[data-diseno="selah"] .horario-capas .capas { height: 32px; padding: 3px; gap: 2px; border-radius: var(--r-pildora); background: var(--pista); box-shadow: inset 0 0 0 1px var(--fila-hover); }
:root[data-diseno="selah"] .capa { height: 26px; border-radius: var(--r-pildora); font-weight: 600; color: var(--tinta-2); }
:root[data-diseno="selah"] .capa.activa { 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); }
:root[data-diseno="selah"] .capa.activa .ic { color: var(--elegido-texto); }
:root[data-diseno="selah"] .horario-capas .boton.suave,
:root[data-diseno="selah"] .hc-fin-mandos .boton.chico.suave,
:root[data-diseno="selah"] .horario-linea .boton-todo-dia,
:root[data-diseno="selah"] .sopa-pestana {
  border: 1px solid var(--borde-control); border-radius: var(--r-pildora); background: var(--vidrio-control); color: var(--tinta);
  font-weight: 600; box-shadow: 0 1px 2px rgba(35, 50, 104, .06), 0 1px 0 var(--brillo) inset;
}
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) :is(.horario-capas .boton.suave, .hc-fin-mandos .boton.chico.suave, .horario-linea .boton-todo-dia, .sopa-pestana):hover:not(:disabled) { background: var(--control-hover); border-color: var(--linea-2); color: var(--tinta); }
:root[data-diseno="selah"] .boton-todo-dia.activo { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 40%, transparent); color: var(--acento-texto); }
:root[data-diseno="selah"] .hc-mes { border-radius: var(--r-pildora); }
:root[data-diseno="selah"] .sf-fecha { border-radius: var(--r-pildora); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .sf-fecha:hover:not(:disabled),
:root[data-diseno="selah"] .sf-fecha[aria-expanded="true"] { background: var(--vidrio); }
:root[data-diseno="selah"] .horario-linea .hc-cuenta b { font-weight: 700; }

/* ═════ 2 · la rejilla: la composición de la Clásica (15 oct · RONDA-FINAL §3) ═════
   Juan David prefería la composición de la Clásica: filas por hora con una línea fina arriba de cada celda (horario.css),
   instrumentos a la izquierda, tarjetas a lo ancho de su celda. Sin cuerdas, trastes ni cejuela, y sin cajas de color
   sueltas sobre el cielo: toda la rejilla va sobre una sola superficie clara, del mismo color que las cabeceras pegajosas
   (que así no se ven como franjas). De Selah quedan la letra (horas y día en Darker Grotesque), el vidrio de las tarjetas,
   los colores y el halo de la hora en curso. La mecánica (huecos, pegajosas, reparto de horario.js) es la de horario.css. */
:root[data-diseno="selah"] .vista-horario:not(.horario-asignar) { --fondo-rejilla: var(--rejilla-pegajosa); }
:root[data-diseno="selah"] .vista-horario:not(.horario-asignar) > .rejilla-dias {
  padding: 8px 10px 18px; background: var(--rejilla-pegajosa);
  border: 1px solid var(--vidrio-borde); border-radius: var(--r-xl); box-shadow: var(--vidrio-sombra);
}
/* la vista del profesor (fichas de 260–300 px, días lado a lado): el borde justo, para que quepan los dos días */
:root[data-diseno="selah"] .vista-horario.vista-profesor:not(.horario-asignar) > .rejilla-dias { padding-inline: 4px; }
/* el horario de la ficha (Asignar) va sobre el panel blanco: su fondo de siempre */
:root[data-diseno="selah"] .horario-asignar { --fondo-rejilla: var(--sup); }

/* «Todos» lado a lado con tres días (con los nombres cortos ya caben jueves y sábado juntos): el tercero va debajo a todo el
   ancho; sus pocas columnas no se estiran (horario.js · repartir respeta el max-width de la rejilla) */
:root[data-diseno="selah"] .rejilla-dias.lado[data-lado="2"] > .rejilla-dia:nth-child(n+3) > .rejilla-general[data-columnas="1"] { max-width: 340px; }
:root[data-diseno="selah"] .rejilla-dias.lado[data-lado="2"] > .rejilla-dia:nth-child(n+3) > .rejilla-general[data-columnas="2"] { max-width: 620px; }
:root[data-diseno="selah"] .rejilla-dias.lado[data-lado="2"] > .rejilla-dia:nth-child(n+3) > .rejilla-general[data-columnas="3"] { max-width: 900px; }

/* soltar sobre una celda sin grupo (horario de la ficha): contorno de acción */
:root[data-diseno="selah"] .rejilla .rj-celda.sobre { box-shadow: inset 0 0 0 2px var(--acento); border-radius: var(--r-m); }

/* cabeceras: el instrumento a la izquierda, en tinta (la Clásica lo lleva en gris) */
:root[data-diseno="selah"] .rejilla .rg-inst { color: var(--tinta); }
:root[data-diseno="selah"] .rejilla .rg-inst.sin-grupos, :root[data-diseno="selah"] .rejilla .rg-relleno { color: var(--tinta-3); }
:root[data-diseno="selah"] .rejilla.sin-grupos .rg-inst.sin-grupos { color: transparent; }

/* el día, en la esquina: Darker Grotesque */
:root[data-diseno="selah"] .rejilla .rg-esquina,
:root[data-diseno="selah"] .rejilla-dias.varios .rejilla .rg-esquina { font: 800 22px/20px var(--f-titulo); letter-spacing: -.01em; color: var(--tinta); }
:root[data-diseno="selah"] .rejilla .rg-esquina .rg-fecha { font: 600 12px/16px var(--f-ui); letter-spacing: 0; }

/* la hora, en Darker Grotesque (sin traste: la línea de la fila es la de las celdas) */
:root[data-diseno="selah"] .rejilla .rg-hora {
  padding-top: 4px; font: 700 19px/22px var(--f-titulo); letter-spacing: -.01em; color: var(--tinta); font-variant-numeric: tabular-nums lining-nums;
}
:root[data-diseno="selah"] .rejilla .rg-hora.sin-hora { font: 700 17px/20px var(--f-titulo); color: var(--tinta-2); white-space: normal; }
:root[data-diseno="selah"] .rejilla .rg-hora.fuera-clase { padding-top: 3px; font: 600 15px/18px var(--f-titulo); color: var(--tinta-3); }
:root[data-diseno="selah"] .rejilla-dias.apretada .rejilla .rg-hora { font-size: 17px; }
:root[data-diseno="selah"] .rejilla-dias.apretada .rejilla .rg-hora.sin-hora { font-size: 15px; line-height: 18px; }
:root[data-diseno="selah"] .rejilla.holgada .rg-hora, :root[data-diseno="selah"] .rejilla-profesor .rg-hora { padding-top: 6px; font-size: 22px; line-height: 24px; }
/* nombre corto («Sofía R.»): sin transición de letra (horario.js mide al apretar) */
:root[data-diseno="selah"] .rejilla :is(.bl-nom, .rg-inst, .rg-relleno, .rg-hora, .rg-esquina) { transition-property: none !important; }

/* ── la hora en curso: el halo detrás de la hora y sus tarjetas en acción ── */
:root[data-diseno="selah"] .rejilla .rg-hora.ahora { position: sticky; color: var(--acento-texto); }
:root[data-diseno="selah"] .rejilla .rg-hora.halo::before { inset: auto; top: 2px; left: 0; width: 54px; height: 28px; border-radius: var(--r-pildora); }
:root[data-diseno="selah"] .rejilla .rj-celda.ahora > .bloque:not(.vacio) {
  border-color: color-mix(in srgb, var(--acento) 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--acento) 35%, transparent), 0 12px 28px -14px color-mix(in srgb, var(--acento) 55%, transparent);
}

/* ═════ 3 · el grupo: tarjeta de vidrio a lo ancho de su celda ═════ */
:root[data-diseno="selah"] .rejilla .bloque {
  gap: 2px; padding: 5px 4px 4px; border: 1px solid var(--vidrio-borde); border-radius: var(--r-l);
  background: var(--vidrio-tarjeta); box-shadow: 0 1px 0 var(--brillo) inset, 0 1px 2px rgba(35, 50, 104, .05), 0 10px 24px -16px rgba(35, 50, 104, .3);
  /* sin backdrop-filter (comentario 23 · rendimiento: el desenfoque solo en la barra y los paneles): vidrio casi opaco */
}
:root[data-diseno="selah"] .rejilla .bloque.vacio { background: transparent; box-shadow: none; border: 1px dashed var(--linea-2); } /* 15 oct · como en la Clásica: discreto */
:root[data-diseno="selah"] .rejilla .bloque.sobre { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento-anillo), var(--s-2); }
:root[data-diseno="selah"] .rejilla-general .bloque.mio { border-color: color-mix(in srgb, var(--acento) 40%, transparent); }
:root[data-diseno="selah"] .bl-cab { padding: 0 4px; }
:root[data-diseno="selah"] :is(.bl-nombre, .bl-prof) { font-weight: 600; color: var(--tinta-2); }
:root[data-diseno="selah"] :is(.bl-nombre, .bl-prof).sin { font-weight: 500; color: var(--tinta-4); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .bl-prof:hover { color: var(--acento-texto); }
:root[data-diseno="selah"] .bl-mio { font-weight: 700; }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .bl-menu:hover { background: var(--pista); }
:root[data-diseno="selah"] .bl-nota { color: var(--tinta-3); }
:root[data-diseno="selah"] .rejilla .bloque.vacio .bl-nota { color: var(--tinta-2); }

/* ═════ 4 · la ficha: fila compacta, blanca; la etapa, solo en el anillo de la foto (con su leyenda) ═════
   Revisión 3.3 (14 oct): el tinte de etapa de fondo se confundía con la asistencia (Bienvenida rosa = ausente, Esperando
   pagos naranja = sin motivo) y en la vista del profesor y en Supervisión salía sin leyenda. Regla: el color solo donde
   significa algo y con su leyenda cerca. Los fondos de color quedan para lo que tiene leyenda en la línea: la asistencia
   (verde/rojo/ámbar), Finanzas y los cambios pendientes; la etapa va en el anillo de la foto (Administración, con la
   leyenda de etapas en la línea), como en Clásica. */
:root[data-diseno="selah"] .rejilla .bl-alumno { border-radius: 9px; background: var(--ficha-base); color: var(--tinta); }
:root[data-diseno="selah"] .rejilla .bl-edad { color: var(--tinta-2); }
/* los que no asisten (Pausa, Desistió, Aspirante…) en gris, como en horario.css (la regla de arriba los volvía a tinta) */
:root[data-diseno="selah"] .rejilla .bl-alumno.no-vigente:not([data-estado="Lista de Espera"], [data-estado="Esperando pagos"]) { color: var(--tinta-3); }
:root[data-diseno="selah"] .rejilla .bl-alumno.sin-tomar { color: var(--tinta-3); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .rejilla .bl-alumno:is(.movible, .marcable):hover,
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .rejilla .bl-alumno:not(.movible):not(.marcable):not(.sin-tomar):hover {
  background: var(--sup-2);
}
/* el anillo de la etapa en la foto (Administración), con el blanco de la ficha entre medio */
:root[data-diseno="selah"] .horario-admin.modo-horario .bl-alumno[data-estado]:not([data-estado="Activo"]) .avatar,
:root[data-diseno="selah"] .horario-admin .sopa-alumno[data-estado]:not([data-estado="Activo"]) .avatar { box-shadow: 0 0 0 1.5px var(--ficha-base), 0 0 0 3px var(--etapa, var(--tinta-4)); }

/* nombre corto («Sofía R.») cuando la rejilla no cabe: el texto sigue entero (se lee en el title y en las pruebas).
   Sin transición (con movimiento reducido, base.css da .01 s a todo, también a font-size: horario.js mediría el valor de
   antes al apretar la rejilla); lo mismo para las cabeceras, cuya letra cambia con .apretada. */
:root[data-diseno="selah"] .rejilla :is(.bl-nom, .rg-inst, .rg-relleno, .rg-hora, .rg-esquina) { transition-property: none !important; }
/* revisión 4.2 · la forma corta solo en el nombre que no cabe entero en su ficha (horario.js · abreviar le pone .corto);
   al medir el mínimo de cada columna, todos cortos (.midiendo-corto). --t-nom = la letra del nombre entero. */
:root[data-diseno="selah"] .rejilla .bl-nom[data-corto] { min-width: 0; overflow: hidden; text-overflow: clip; }
:root[data-diseno="selah"] .rejilla .bl-nom.corto[data-corto],
:root[data-diseno="selah"] .rejilla.midiendo-corto .bl-nom[data-corto] { font-size: 0 !important; }
:root[data-diseno="selah"] .rejilla .bl-nom.corto[data-corto]::before,
:root[data-diseno="selah"] .rejilla.midiendo-corto .bl-nom[data-corto]::before { content: attr(data-corto); font-size: var(--t-nom, 13px); }

/* ── elegir y mover: el elegido en acción; lo movido punteado azul hasta «Aplicar»; otro instrumento con su barra ámbar ── */
/* 14 oct · ya no hay alumno «elegido»: mover = arrastrar, o clic derecho › «Mover a…». En la ficha, el grupo se propone con
   clic derecho: el cursor lo dice (no la mano de un clic). */
:root[data-diseno="selah"] .horario-asignar .rejilla .bloque { cursor: context-menu; }
:root[data-diseno="selah"] .rejilla .bl-alumno.movido { border-style: dashed; border-color: var(--acento); background: var(--acento-suave); }
:root[data-diseno="selah"] .rejilla .bl-sale { border-color: color-mix(in srgb, var(--acento) 45%, transparent); border-radius: 9px; }
:root[data-diseno="selah"] .ley-ficha { border-radius: 4px; background: var(--ficha-base); }
:root[data-diseno="selah"] .ley-ficha.movido { background: var(--acento-suave); }
:root[data-diseno="selah"] .ley-ficha.otroins { background: var(--ficha-base); box-shadow: inset 3px 0 0 var(--aviso), inset 0 0 0 1px var(--linea-2); }
/* la leyenda de las etapas: el punto del color de la etapa (como el anillo de la foto y el tinte de la ficha) */
:root[data-diseno="selah"] .ley-anillo { background: var(--ficha-base); box-shadow: inset 0 0 0 2.5px var(--etapa, var(--e, var(--tinta-4))); } /* igual al anillo de la foto */
:root[data-diseno="selah"] .fantasma { border-radius: 9px; background: var(--vidrio-panel); }

/* ═════ 5 · Asistencia: los colores mandan (17 oct: presente azul, ausente gris con su palabra, sin marcar blanco; el rojo,
   solo la clase sin tomar) ═════ */
:root[data-diseno="selah"] .rejilla .bl-alumno.marcable.presente { background: var(--presente-tinte); border-color: var(--presente-borde); }
:root[data-diseno="selah"] .rejilla .bl-alumno.presente::after { border-color: var(--presente-texto); }
:root[data-diseno="selah"] .rejilla .bl-alumno.marcable.ausente { background: var(--ausente-tinte); border-color: var(--ausente-borde); }
:root[data-diseno="selah"] .rejilla .bl-alumno.marcable.ausente .bl-nom { color: var(--tinta); }
:root[data-diseno="selah"] .bl-falta { background: var(--ficha-base); color: var(--ausente-texto); box-shadow: inset 0 0 0 1px var(--ausente-borde); font-weight: 700; }
:root[data-diseno="selah"] .rejilla .bl-alumno.otro { border-style: dashed; border-color: var(--presente); }
:root[data-diseno="selah"] .bl-repetido { background: var(--aviso-fondo); color: var(--aviso-texto); font-weight: 700; }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .rejilla .bl-alumno.marcable.presente:hover { background: color-mix(in srgb, var(--presente) 30%, var(--ficha-base)); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .rejilla .bl-alumno.marcable.ausente:hover { background: color-mix(in srgb, var(--ausente) 34%, var(--ficha-base)); }
/* sin tomar: blanco neutro, en gris (por venir) */
:root[data-diseno="selah"] .rejilla .bl-alumno.sin-tomar { background: transparent; }
/* 15 oct · RONDA-FINAL §2: la clase sin asistencia ya pasada (o de hoy): las fichas completas en el tono de la clase */
:root[data-diseno="selah"] .rejilla .bloque.sin-asistencia.vencida .bl-alumno.sin-tomar { background: color-mix(in srgb, var(--peligro) 14%, var(--ficha-base)); border-color: color-mix(in srgb, var(--peligro) 40%, transparent); color: var(--peligro-texto); }
:root[data-diseno="selah"] .rejilla .bloque.sin-asistencia.hoy .bl-alumno.sin-tomar { background: var(--sin-motivo-tinte); border-color: color-mix(in srgb, var(--aviso) 50%, transparent); color: var(--aviso-texto); }
/* la clase: sin tomar en rojo si ya pasó, ámbar si es hoy; sin clase creada, punteada; validada, verde */
:root[data-diseno="selah"] .bloque.sin-asistencia.vencida { border-color: color-mix(in srgb, var(--peligro) 50%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--peligro) 22%, transparent), 0 10px 24px -16px rgba(35, 50, 104, .3); }
:root[data-diseno="selah"] .bloque.sin-asistencia.hoy { border-color: color-mix(in srgb, var(--aviso) 65%, transparent); }
:root[data-diseno="selah"] .rejilla .bloque.sin-registro { background: transparent; border: 1px dashed var(--linea-2); box-shadow: none; } /* 15 oct · como en la Clásica */
:root[data-diseno="selah"] .rejilla .bloque.sin-registro .bl-nota { color: var(--tinta-2); }
:root[data-diseno="selah"] .bloque.validado { border-color: color-mix(in srgb, var(--ok) 40%, transparent); }
:root[data-diseno="selah"] .bl-pasar.boton.chico { border-radius: var(--r-pildora); }
/* Recepción: el ausente rojo, y su borde dice el motivo (sin motivo ámbar con su punto; «No contestó» ámbar punteado; con
   motivo, el borde rojo suave de siempre). La palabra «ausente» también se ve. */
:root[data-diseno="selah"] .recepcion .rejilla .bl-alumno.ausente.motivo-falta { border-color: var(--sin-motivo); box-shadow: inset 0 0 0 1px var(--sin-motivo); }
:root[data-diseno="selah"] .recepcion .rejilla .bl-alumno.ausente.motivo-nc { border-color: transparent; box-shadow: none; outline: 1.5px dashed var(--sin-motivo); outline-offset: -1.5px; }
:root[data-diseno="selah"] .recepcion .rejilla .bl-alumno.ausente.motivo-ok { border-color: var(--ausente-borde); }
:root[data-diseno="selah"] .recepcion .rejilla .bl-alumno.ausente .bl-falta { display: inline-block; }
:root[data-diseno="selah"] .marca-motivo { background: var(--sin-motivo); }
/* muestras de la leyenda de asistencia: iguales a las fichas */
:root[data-diseno="selah"] .ley-ficha.presente { width: 14px; height: 10px; margin: 0; border: 0; border-radius: 4px; transform: none; background: var(--presente-tinte); box-shadow: inset 0 0 0 1px var(--presente-borde); }
:root[data-diseno="selah"] .ley-ficha.ausente { background: var(--ausente-tinte); box-shadow: inset 0 0 0 1px var(--ausente-borde); }
:root[data-diseno="selah"] .ley-ficha.ausente.motivo-falta { box-shadow: inset 0 0 0 1.5px var(--sin-motivo); }
:root[data-diseno="selah"] .ley-ficha.ausente.motivo-nc { box-shadow: none; outline: 1.5px dashed var(--sin-motivo); outline-offset: -1.5px; }
:root[data-diseno="selah"] .ley-ficha.ausente.motivo-ok { box-shadow: inset 0 0 0 1px var(--ausente-borde); }
:root[data-diseno="selah"] .ley-ficha.otro { background: var(--presente-tinte); outline-color: var(--presente); }
:root[data-diseno="selah"] .ley-ficha.sin-tomar { background: var(--ficha-base); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--peligro) 50%, transparent); }

/* ═════ 6 · capas de Administración ═════ */
/* Relaciones: él en acción; sus hermanos con contorno navy; la misma persona en ámbar */
:root[data-diseno="selah"] .rejilla .bl-alumno.f-yo, :root[data-diseno="selah"] .sopa-alumno.f-yo { background: var(--acento-suave); border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
:root[data-diseno="selah"] .rejilla .bl-alumno.f-herm, :root[data-diseno="selah"] .sopa-alumno.f-herm { border-color: var(--herm); box-shadow: 0 0 0 1px var(--herm); }
:root[data-diseno="selah"] .rejilla .bl-alumno.f-mismo, :root[data-diseno="selah"] .sopa-alumno.f-mismo { border-color: var(--aviso); box-shadow: 0 0 0 1px var(--aviso); }
:root[data-diseno="selah"] .marca-rel.herm { background: var(--herm); }
:root[data-diseno="selah"] .marca-rel.mismo { background: var(--aviso); }
:root[data-diseno="selah"] .hc-rel { border-color: var(--vidrio-borde); border-radius: var(--r-l); background: var(--vidrio); box-shadow: var(--vidrio-sombra); }
:root[data-diseno="selah"] .hc-rel-cuerpo, :root[data-diseno="selah"] .hc-rel-g { border-color: var(--linea); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .hc-ir:hover { background: var(--pista); }
/* Disponibilidades: contornos verdes sin blanco mezclado (valen en oscuro) */
:root[data-diseno="selah"] .horario-admin .rejilla .bloque.d-si { border-color: color-mix(in srgb, var(--ok) 65%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 65%, transparent); }
:root[data-diseno="selah"] .horario-admin .rejilla .bloque:is(.d-alta, .d-baja) { border-color: color-mix(in srgb, var(--ok) 50%, transparent); }
:root[data-diseno="selah"] .hc-sello { border-radius: var(--r-pildora); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 35%, transparent); }
:root[data-diseno="selah"] .horario-admin .bl-alumno.d-yo { background: var(--acento-suave); border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
:root[data-diseno="selah"] .horario-admin .rejilla .bl-alumno.fuera { border-color: var(--aviso); box-shadow: inset 0 0 0 1px var(--aviso); }
:root[data-diseno="selah"] .ley-ficha.ley-velo-si { background: color-mix(in srgb, var(--ok) 24%, var(--ficha-base)); }
:root[data-diseno="selah"] .ley-ficha.sindato { background: var(--ficha-base); }
/* Finanzas: la capa manda sobre el tinte de etapa (solo las excepciones con color; pagada y al día sin color) */
:root[data-diseno="selah"] .horario-admin .rejilla .bl-alumno:is(.f-pag, .f-dia) { background: var(--ficha-base); }
:root[data-diseno="selah"] .horario-admin .rejilla .bl-alumno.f-venc { background: var(--peligro-fondo); border-color: color-mix(in srgb, var(--peligro) 40%, transparent); color: var(--peligro-texto); }
:root[data-diseno="selah"] .horario-admin .rejilla .bl-alumno:is(.f-porc, .f-debe) { background: var(--aviso-fondo); border-color: color-mix(in srgb, var(--aviso) 55%, transparent); color: var(--aviso-texto); }
:root[data-diseno="selah"] .horario-admin .rejilla .bl-alumno:is(.f-sin, .f-nada) { background: var(--sup-3); border-color: transparent; color: var(--tinta-2); }
:root[data-diseno="selah"] .horario-admin.tj-b .rejilla .bl-alumno:is(.f-pag, .f-dia).tarjeta { background: var(--ok-fondo); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok-texto); }
:root[data-diseno="selah"] .horario-admin.tj-b .rejilla .bl-alumno:is(.f-pag, .f-dia).sin-tarjeta { background: var(--ficha-base); border-style: dashed; border-color: var(--ok); }
:root[data-diseno="selah"] .ley-ficha.f-venc { background: var(--peligro-fondo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--peligro) 50%, transparent); }
:root[data-diseno="selah"] .ley-ficha:is(.f-porc, .f-debe) { background: var(--aviso-fondo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aviso) 60%, transparent); }
:root[data-diseno="selah"] .ley-ficha.f-sin { background: var(--sup-3); }
:root[data-diseno="selah"] .rejilla .bl-alumno .bl-saldo { border-radius: var(--r-pildora); background: var(--grafito); color: #fff; }
:root[data-diseno="selah"] .tip-fin { border-color: var(--vidrio-borde); border-radius: 16px; background: var(--vidrio-panel); box-shadow: var(--s-3); }
/* Estados (popover): el punto lleno del color de la etapa; Activo también */
:root[data-diseno="selah"] .pe-punto, :root[data-diseno="selah"] .pe-punto[data-estado="Activo"] { width: 10px; height: 10px; background: var(--etapa, var(--tinta-4)) !important; box-shadow: 0 0 0 3px var(--ficha-tinte, transparent); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .pe-fila:hover { background: var(--acento-suave); }
/* ficha corta: el punto de su etapa */
:root[data-diseno="selah"] .fc-estado::before { width: 8px; height: 8px; background: var(--etapa, var(--tinta-4)); box-shadow: 0 0 0 3px var(--ficha-tinte, transparent); }
/* calendario de Asistencia */
:root[data-diseno="selah"] .cal-dia { border-radius: var(--r-s); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) button.cal-dia:hover:not(:disabled) { background: var(--acento-suave); }
:root[data-diseno="selah"] .calendario.modo-semana .cal-dia.sem-hover:not(.en-semana) { background: var(--pista); }

/* ═════ 7 · sopa, deslizar y bandeja: vidrio ═════ */
:root[data-diseno="selah"] .sopa {
  border: 1px solid var(--vidrio-borde); border-radius: var(--r-xl); background: var(--vidrio); box-shadow: var(--vidrio-sombra);
  -webkit-backdrop-filter: var(--vidrio-desenfoque); backdrop-filter: var(--vidrio-desenfoque);
}
:root[data-diseno="selah"] .sopa-cab h2 { font: 800 24px/24px var(--f-titulo); letter-spacing: -.01em; }
:root[data-diseno="selah"] .sopa-filtro { border-color: var(--borde-control); background: var(--vidrio-control); color: var(--tinta-2); }
:root[data-diseno="selah"] .sopa-filtro[aria-pressed="true"] { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 35%, transparent); color: var(--acento-texto); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .sopa-filtro:hover { color: var(--tinta); border-color: var(--linea-2); }
:root[data-diseno="selah"] .sopa-inst { border-radius: var(--r-pildora); }
:root[data-diseno="selah"] .sopa-seccion::before { width: 8px; height: 8px; background: var(--etapa, var(--e, var(--tinta-4))); box-shadow: none; }
:root[data-diseno="selah"] .sopa-alumno { border-radius: 12px; background: var(--ficha-base); }
:root[data-diseno="selah"] .sopa-alumno .sa-texto small { color: var(--tinta-2); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .sopa-alumno:hover { background: var(--sup-2); border-color: var(--borde-control); }

/* lo que no cabe se desliza: el degradado del borde con el mismo cielo (antes un color plano) y el botón en píldora */
/* revisión 4.3 · el velo de la derecha tapa entera la columna que no cabe (horario.js le da el ancho): velo opaco
   (el borde suave, 6 px, cae en el hueco entre columnas); se puede tocar para deslizar */
:root[data-diseno="selah"] .vista-horario:not(.horario-asignar) > .hc-desliza.der {
  background: var(--rejilla-pegajosa);
}
:root[data-diseno="selah"] .vista-horario.horario-asignar > .hc-desliza.der { background: var(--fondo-rejilla); }
:root[data-diseno="selah"] .vista-horario > .hc-desliza.der {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6px); mask-image: linear-gradient(to right, transparent, #000 6px);
  pointer-events: auto; cursor: pointer;
}
:root[data-diseno="selah"] .vista-horario:not(.horario-asignar) > .hc-desliza.izq {
  background: var(--rejilla-pegajosa);
  -webkit-mask-image: linear-gradient(to left, transparent, #000 70%); mask-image: linear-gradient(to left, transparent, #000 70%);
}
:root[data-diseno="selah"] .hc-desliza-ir { border-color: var(--borde-control); background: var(--vidrio-control); color: var(--tinta); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .hc-desliza-ir:hover { background: var(--control-hover); }

:root[data-diseno="selah"] .bandeja-cambios.pend {
  border-color: var(--vidrio-borde); border-radius: var(--r-xl); background: var(--vidrio); box-shadow: var(--vidrio-sombra);
  -webkit-backdrop-filter: var(--vidrio-desenfoque); backdrop-filter: var(--vidrio-desenfoque);
}
:root[data-diseno="selah"] .bandeja-cambios:not(.pend) { border-color: var(--borde-control); border-radius: var(--r-xl); }
:root[data-diseno="selah"] .bc-cab { padding-inline: 10px 8px; }
:root[data-diseno="selah"] .bc-toggle { border-radius: var(--r-pildora); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .bc-toggle:hover:not(:disabled) { background: var(--pista); }
:root[data-diseno="selah"] .bc-n.cero { background: var(--pista); }
:root[data-diseno="selah"] .bc-cuerpo, :root[data-diseno="selah"] .bc-lista > li + li { border-color: var(--linea); }
:root[data-diseno="selah"] .bc-des { border-radius: var(--r-pildora); }

/* diálogos del horario: la fila elegida de «¿Aviso a las familias?» sin blanco mezclado */
:root[data-diseno="selah"] .av-fila { border-color: var(--linea); border-radius: var(--r-l); background: var(--vidrio-control); }
:root[data-diseno="selah"] .av-fila:has(input:checked) { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 40%, transparent); }
:root[data-diseno="selah"] .dg-tabla-caja { border-radius: var(--r-l); }
:root[data-diseno="selah"] .dg-tabla-caja .dg-rotulo { background: var(--sup-2); }

/* ═════ 8 · vista del profesor: sus grupos en tarjetas anchas ═════ */
:root[data-diseno="selah"] .rejilla-profesor .rj-celda > .bloque { padding: 10px 10px 10px; gap: 8px; border-radius: 18px; }
:root[data-diseno="selah"] .rejilla-profesor .bl-nombre { font: 800 24px/26px var(--f-titulo); letter-spacing: -.01em; color: var(--tinta); }
:root[data-diseno="selah"] .rejilla-profesor .bl-alumno { border-radius: 12px; }
:root[data-diseno="selah"] .rejilla-profesor .rg-inst { font-weight: 600; color: var(--tinta-3); }

/* ═════ 9 · horario de Asignar (ficha del alumno): sobre el panel blanco, en compacto ═════ */
:root[data-diseno="selah"] .horario-asignar .rejilla .bloque { border-color: var(--linea); background: var(--sup); box-shadow: 0 1px 2px rgba(35, 50, 104, .06); }
:root[data-diseno="selah"] .horario-asignar .rejilla .bloque.vacio { background: var(--sup-2); }
:root[data-diseno="selah"] .horario-asignar .rejilla .bl-alumno { border-radius: 6px; }
:root[data-diseno="selah"] .horario-asignar.compacto .rj-celda > .bloque { border-radius: var(--r-m); }
:root[data-diseno="selah"] .horario-asignar.compacto .rejilla .rg-esquina { font-size: 17px; }
:root[data-diseno="selah"] .horario-asignar.compacto .rejilla .rg-hora { padding-top: 2px; font-size: 16px; line-height: 18px; }
:root[data-diseno="selah"] .horario-asignar.compacto .rejilla :is(.rg-inst, .rg-relleno) { font-size: 11.5px; line-height: 14px; }
:root[data-diseno="selah"] .horario-asignar .rejilla .rg-inst.propio { align-items: center; color: var(--acento-texto); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .horario-asignar .rejilla .bloque:hover { border-color: var(--acento); }
:root[data-diseno="selah"] .horario-asignar .rejilla .bloque.propuesto { border-color: var(--acento); box-shadow: 0 0 0 2px var(--acento); }
:root[data-diseno="selah"] .bl-propuesta { border-radius: 6px; }
:root[data-diseno="selah"] .asg-alumno { border-radius: var(--r-pildora); background: var(--ficha-base); }
:root[data-diseno="selah"] .horario-asignar.compacto .horario-asignar .rejilla .bl-alumno:not([data-estado="Activo"]) .avatar,
:root[data-diseno="selah"] .horario-asignar.compacto .rejilla .bl-alumno:not([data-estado="Activo"]) .avatar { box-shadow: 0 0 0 1px var(--ficha-base), 0 0 0 2.5px var(--etapa, var(--tinta-4)); }

/* ═════ 10 · mini horario (respaldo de la ficha) ═════ */
:root[data-diseno="selah"] .mh-alumno { border-radius: var(--r-pildora); background: var(--ficha-base); }
:root[data-diseno="selah"] .mh-celda { border-radius: var(--r-m); background: var(--pista); }
:root[data-diseno="selah"] .mh-celda.disponible { background: color-mix(in srgb, var(--ok) 20%, var(--ficha-base)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 32%, transparent); }
:root[data-diseno="selah"] .mh-grupo { border-color: var(--linea); border-radius: 9px; background: var(--ficha-base); }
/* revisión 3.5 · la propuesta, inconfundible: relleno de acción suave y borde de 2 px de acción (como su muestra de la leyenda) */
:root[data-diseno="selah"] .mh-grupo:is(.propuesto, .sobre) { background: var(--acento-suave); border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); color: var(--acento-texto); }
:root[data-diseno="selah"] .mh-grupo.actual { border-color: var(--tinta-2); box-shadow: 0 0 0 1px var(--tinta-2); }
:root[data-diseno="selah"] .mh-hora { font: 700 17px/18px var(--f-titulo); }
:root[data-diseno="selah"] .mh-ley::before { background: var(--ficha-base); }
:root[data-diseno="selah"] .mh-ley.disponible::before { background: color-mix(in srgb, var(--ok) 20%, var(--ficha-base)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 32%, transparent); }
:root[data-diseno="selah"] .mh-ley.propuesto::before { background: var(--acento-suave); box-shadow: inset 0 0 0 2px var(--acento); }
:root[data-diseno="selah"] .mh-ley.herm::before { background: var(--acento-suave); }

/* ═════ 11 · teléfono (≤ 760 px): la superficie a todo el ancho, sin borde redondeado que robe sitio ═════ */
@media (max-width: 760px) {
  :root[data-diseno="selah"] .vista-horario:not(.horario-asignar) > .rejilla-dias { padding: 8px 8px 16px; border-radius: var(--r-l); }
  :root[data-diseno="selah"] .rejilla .rg-hora { font-size: 17px; }
  /* profesor: filas sin fondo con separador, como en Clásica */
  :root[data-diseno="selah"] .vista-horario:not(.modo-asistencia) .rejilla-profesor .bl-alumno { background: transparent; }
  /* la línea de la leyenda se parte en dos en el teléfono: el alto fijo de Administración la cortaba por la mitad */
  :root[data-diseno="selah"] .horario-admin > .horario-linea { height: auto; }
  :root[data-diseno="selah"] .rejilla-profesor .bl-nombre { font-size: 20px; line-height: 22px; }
}

/* ═════ 12 · Exportar PDF: papel blanco, sin vidrio ni cielo ═════ */
@media print {
  :root[data-diseno="selah"] .rejilla :is(.rg-esquina, .rg-inst, .rg-relleno, .rg-hora) { background: #fff !important; }
  :root[data-diseno="selah"] .rejilla .bloque { background: #fff !important; }
  :root[data-diseno="selah"] .rejilla .rg-hora.halo::before { display: none; }
}

/* ═════ 13 · menú «Mover a…» (clic derecho en un alumno): dos columnas, cada grupo en una línea ═════ */
@media (min-width: 761px) {
  :root[data-diseno="selah"] .menu.menu-mover { max-width: 480px; grid-template-columns: repeat(2, minmax(200px, 1fr)); }
  :root[data-diseno="selah"] .menu.menu-mover .menu-item span { white-space: nowrap; }
}

/* ═════ 15 oct · Asistencia sin fichas cuando no se tomó · modo Registros (las reglas comunes, en horario.css) ═════
   Sobre el vidrio, la tarjeta lleva un tinte de su tono y el borde del mismo color. */
:root[data-diseno="selah"] .rejilla .bloque.sin-asistencia.vencida { background: color-mix(in srgb, var(--peligro-fondo) 80%, var(--sup)); }
:root[data-diseno="selah"] .rejilla .bloque.sin-asistencia.hoy { background: color-mix(in srgb, var(--aviso-fondo) 80%, var(--sup)); }
:root[data-diseno="selah"] .rejilla .bloque.bloque-registro {
  border-color: color-mix(in srgb, var(--rg) 55%, transparent);
  background: color-mix(in srgb, var(--rg-fondo) 85%, var(--sup));
}
:root[data-diseno="selah"] .rejilla .bloque.bloque-registro[data-registro-estado="por-venir"] { background: var(--vidrio-tarjeta); border-color: var(--vidrio-borde); }
:root[data-diseno="selah"] .bl-reg-faltas .cf-casilla { height: 20px; border-radius: 6px; font-size: 11.5px; }

/* ═════ 15 oct B · zona A · vista general del profesor sin «Mi clase» · rojos de alerta más fuertes (reglas comunes en
   horario.css: .rg-mias, .mia-grande, --alerta-*) ═════
   Sobre el vidrio: la columna con clases del profesor lleva el borde azul de acción con el radio de los paneles; sus
   tarjetas, el borde azul suave. La clase sin asistencia vencida y el registro sin hacer: tinte del 14 % y borde rojo entero
   (antes, tinte ~8 % y borde al 50 %). El ausente de las fichas no cambia. */
:root[data-diseno="selah"] .rejilla > .rg-mias { border-radius: 18px; border-color: var(--acento); background: color-mix(in srgb, var(--acento) 5%, transparent); }
:root[data-diseno="selah"] .rejilla.con-mias > .rg-inst.mias { color: var(--acento-texto); }
:root[data-diseno="selah"] .rejilla-general .bloque.mia-grande { padding: 7px 6px 6px; gap: 4px; }
:root[data-diseno="selah"] .rejilla-general:not(.holgada) .bloque.mia-grande .bl-alumno { gap: 8px; padding: 3px 8px 3px 4px; font-size: 14.5px; }
:root[data-diseno="selah"] .rejilla-general .bloque.mia-grande:not(.bloque-registro, .sin-asistencia, .validado) { border-color: color-mix(in srgb, var(--acento) 50%, transparent); }
:root[data-diseno="selah"] .rejilla .bloque.sin-asistencia.vencida {
  background: var(--alerta-tinte); border-color: var(--alerta-borde);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--peligro) 30%, transparent), 0 10px 24px -16px rgba(35, 50, 104, .3);
}
:root[data-diseno="selah"] .rejilla .bloque.bloque-registro[data-registro-estado="sin-hacer"] {
  background: var(--alerta-tinte); border-color: var(--alerta-borde);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--peligro) 30%, transparent), 0 10px 24px -16px rgba(35, 50, 104, .3);
}

/* ═════ 15 oct B · zona D · capa Pendientes (las reglas comunes, en horario.css): la capa manda sobre el tinte de etapa,
   como Finanzas; los filtros, en un panel de vidrio con píldoras. ═════ */
:root[data-diseno="selah"] .horario-admin .rejilla .bl-alumno.pn-ok { background: var(--ficha-base); }
:root[data-diseno="selah"] .horario-admin :is(.rejilla .bl-alumno, .sopa-alumno).pn-todo { background: var(--peligro-fondo); border-color: color-mix(in srgb, var(--peligro) 45%, transparent); color: var(--peligro-texto); }
:root[data-diseno="selah"] .horario-admin :is(.rejilla .bl-alumno, .sopa-alumno).pn-algo { background: var(--aviso-fondo); border-color: color-mix(in srgb, var(--aviso) 55%, transparent); color: var(--aviso-texto); }
:root[data-diseno="selah"] .ley-ficha.pn-todo { background: var(--peligro-fondo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--peligro) 55%, transparent); }
:root[data-diseno="selah"] .ley-ficha.pn-algo { background: var(--aviso-fondo); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aviso) 60%, transparent); }
:root[data-diseno="selah"] .horario-linea .hp-filtros.boton.chico {
  border: 1px solid var(--borde-control); border-radius: var(--r-pildora); background: var(--vidrio-control); color: var(--tinta);
  font-weight: 600; box-shadow: 0 1px 2px rgba(35, 50, 104, .06), 0 1px 0 var(--brillo) inset;
}
:root[data-diseno="selah"] .horario-linea .hp-filtros.activo { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 40%, transparent); color: var(--acento-texto); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .horario-linea .hp-filtros:not(.activo):hover { background: var(--control-hover); border-color: var(--linea-2); }
:root[data-diseno="selah"] .hp-panel { border-color: var(--vidrio-borde); border-radius: var(--r-l); background: var(--vidrio); box-shadow: var(--vidrio-sombra); }
:root[data-diseno="selah"] .hp-cat-t { border-radius: var(--r-pildora); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .hp-cat-t:hover { background: var(--pista); }
:root[data-diseno="selah"] .hp-casilla { border-radius: 5px; background: var(--ficha-base); }
:root[data-diseno="selah"] .hp-cat.todo .hp-casilla { background: var(--acento); }
:root[data-diseno="selah"] .hp-cat.parte .hp-casilla { background: var(--acento-suave); }
:root[data-diseno="selah"] .hp-item { border-color: var(--borde-control); background: var(--vidrio-control); color: var(--tinta-3); }
:root[data-diseno="selah"] .hp-item.activo { background: var(--acento-suave); border-color: color-mix(in srgb, var(--acento) 35%, transparent); color: var(--acento-texto); font-weight: 600; }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .hp-item:not(.activo):hover { background: var(--control-hover); }

/* ═════ 15 oct · tarde · un panel por día (antes, una sola superficie para todo el horario) ═════
   El cielo se ve entre los días: jueves y sábado quedan separados. Cada panel lleva el mismo color que las cabeceras
   pegajosas (--rejilla-pegajosa), así que siguen sin verse como franjas. */
:root[data-diseno="selah"] .vista-horario:not(.horario-asignar) > .rejilla-dias { padding: 1px 4px 18px; background: transparent; border: 0; box-shadow: none; }
:root[data-diseno="selah"] .vista-horario:not(.horario-asignar) > .rejilla-dias > .rejilla-dia {
  padding: 2px 12px 14px; background: var(--rejilla-pegajosa); border: 1px solid var(--vidrio-borde); border-radius: var(--r-xl); box-shadow: var(--vidrio-sombra);
}
:root[data-diseno="selah"] .vista-horario:not(.horario-asignar) > .rejilla-dias:is(.pila, .alineada) > .rejilla-dia + .rejilla-dia { padding-top: 4px; border-top: 1px solid var(--vidrio-borde); }
@media (max-width: 760px) {
  :root[data-diseno="selah"] .vista-horario:not(.horario-asignar) > .rejilla-dias > .rejilla-dia { padding: 6px 6px 10px; }
}