/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Selah · el resto (14 oct · DISENO-SELAH §2 · docs/selah-otros.md).
   Pendientes, Recepción (fuera de la rejilla), Finanzas, Pagos profesores, Supervisión, Dirección, entrada, Datos de
   Airtable y el móvil general: heredan la identidad de selah.css; aquí, las superficies de vidrio y el lugar de cada
   protagonista (el total de Finanzas, «Por cobrar», el registro del local, lo urgente de Pendientes, las cifras de
   Dirección). Solo CSS: ningún JS de esta área cambia, el marcado es el mismo con Clásica y con Selah.
   Se carga después de finanzas.css (finanzas.js la inserta antes de link[data-selah]).
   Cada selector empieza por :root[data-diseno="selah"]. Solo tokens (cambian solos en oscuro).
   Dos vidrios:
   · tarjeta (--vidrio, desenfoque): tarjetas pequeñas y bloques sin cabeceras pegajosas.
   · panel denso (--vidrio-fuerte, desenfoque): tablas y listas largas con cabeceras pegajosas opacas dentro; casi
     blanco, para que la cabecera fija no se lea como una franja distinta y nada de debajo se lea a través.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ═════ 0 · las dos superficies ═════ */
/* tarjetas */
:root[data-diseno="selah"] :is(
  .pd-grupo, .ap-puesto, .ap-bloque, .fg-bloque, .fi-aldia, .fi-pend-tarjeta, .gen-paso.tarjeta, .pp-c-barra.tarjeta,
  .pd-clientes, .dir-local.error
) {
  background: var(--vidrio); border-color: var(--vidrio-borde); box-shadow: var(--vidrio-sombra);
  -webkit-backdrop-filter: var(--vidrio-desenfoque); backdrop-filter: var(--vidrio-desenfoque);
}
/* paneles densos */
:root[data-diseno="selah"] :is(
  .pd-hoja, .rl-lista, .fg-der, .fi-deben, .sp-lista .sup-profesores, .sp-tabla, .pp-panel.tarjeta, .gen-form.tarjeta,
  .fi-emitidas > .fi-centro
) {
  background: var(--vidrio-fuerte); border-color: var(--vidrio-borde); border-radius: var(--r-xl); box-shadow: var(--vidrio-sombra);
  -webkit-backdrop-filter: var(--vidrio-desenfoque); backdrop-filter: var(--vidrio-desenfoque);
}
/* el fundido del pie de las listas que se deslizan: hacia el vidrio, no hacia un blanco aparte */
:root[data-diseno="selah"] :is(.sup-profesores, .sp-tabla, .pp-semanas, .pp-dias)::after {
  background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--sup) 82%, transparent));
}
/* radios: paneles 22, tarjetas 14 (el token ya vale 14) */
:root[data-diseno="selah"] :is(.fi-aldia, .fi-pend-tarjeta, .gen-paso.tarjeta, .pp-c-barra.tarjeta) { border-radius: var(--r-xl); }
:root[data-diseno="selah"] .fg-bloque { border-radius: 18px; }

/* cifra protagonista: Darker Grotesque 800, números de igual ancho */
:root[data-diseno="selah"] :is(.fg-cifra b, .fi-por-cobrar b, .fi-cifra b, .fi-pend-n, .gen-total-n, .sp-cifra > b:not(.sp-edad), .pd-grupo .pd-n) {
  font-family: var(--f-titulo); font-weight: 800; letter-spacing: -.015em; font-variant-numeric: tabular-nums;
}

/* ═════ 1 · Pendientes de Administración ═════ */
/* filtros: píldoras de vidrio; el elegido, acción */
:root[data-diseno="selah"] :is(.pd-cat, .pd-todos) {
  border-color: var(--borde-control); background: var(--vidrio-control); 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(.pd-cat, .pd-todos):hover:not(.activa) { background: var(--control-hover); border-color: var(--linea-2); }
:root[data-diseno="selah"] :is(.pd-cat, .pd-todos).activa {
  background: var(--acento); border-color: var(--acento); color: #fff;
  box-shadow: 0 10px 22px -14px rgba(11, 103, 207, .7), inset 0 1px 0 rgba(255, 255, 255, .22);
}
:root[data-diseno="selah"] :is(.pd-cat, .pd-todos).activa :is(.ic, b) { color: rgba(255, 255, 255, .92); }
/* revisión 3.8: el foco se ve también en el chip elegido (su sombra propia tapaba el anillo) */
:root[data-diseno="selah"] :is(.pd-cat, .pd-todos):focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
:root[data-diseno="selah"] .pd-saldos .pd-perilla { background: var(--pista-interruptor); }
:root[data-diseno="selah"] .pd-saldos.activo .pd-perilla { background: var(--ok); }

/* lo urgente: el bloque «Cliente · n alumnos» (el pendiente mayor) con su ícono en un disco ámbar */
:root[data-diseno="selah"] .pd-clientes { border-radius: 18px; }
/* una línea de 38 px como en Clásica (la prueba A3 pide ≤ 40 plegado) */
:root[data-diseno="selah"] .pdc-cab { padding: 0 16px 0 8px; gap: 10px; }
:root[data-diseno="selah"] .pdc-cab > .ic {
  box-sizing: content-box; width: 14px; height: 14px; padding: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--aviso) 22%, transparent); color: var(--aviso-texto);
}
:root[data-diseno="selah"] .pdc-cab b { font-weight: 700; }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .pdc-cab:hover { background: var(--fila-hover); }
:root[data-diseno="selah"] .pdc-fila { background: transparent; }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .pdc-fila:hover,
:root[data-diseno="selah"] .pdc-fila:focus-visible { background: var(--fila-hover); }
:root[data-diseno="selah"] .pdc-titulos { background: var(--sup-2); }
:root[data-diseno="selah"] .pd-clientes.al-dia { padding: 0 16px; }

/* Por alumno: la tabla en un panel; cabecera opaca con el radio del panel; el punto «falta» se ve primero */
:root[data-diseno="selah"] .pdh-encabezado { border-radius: var(--r-xl) var(--r-xl) 0 0; }
:root[data-diseno="selah"] .pdh-nombre b { font-weight: 600; color: var(--tinta); }
:root[data-diseno="selah"] .pdh-falta { width: 9px; height: 9px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--aviso) 18%, transparent); }
:root[data-diseno="selah"] .pd-hoja.amplia .pdh-falta { width: 10px; height: 10px; }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .pdh-fila:not(.pdh-cab):hover { background: rgba(11, 103, 207, .04); }
@media (max-width: 760px) {
  :root[data-diseno="selah"] .pd-hoja .pdh-fila > :first-child { background: var(--sup); }
}

/* Por pendiente: tarjetas de vidrio; la cifra de cada una en Darker, sin pastilla */
:root[data-diseno="selah"] .pd-franja-titulo { font: 700 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-2); }
:root[data-diseno="selah"] .pd-grupo { padding: 12px 10px 10px; }
:root[data-diseno="selah"] .pd-grupo h3 .pd-n { min-width: 0; height: auto; padding: 0; background: none; font-size: 24px; line-height: 20px; color: var(--tinta); }
:root[data-diseno="selah"] .pdg-fila { border-radius: var(--r-m); }

/* ═════ 2 · Recepción › Local: el registro (Quién abre + «Registrar la apertura») es la pieza que manda ═════ */
@media (min-width: 761px) {
  :root[data-diseno="selah"] .ap-registro {
    gap: 6px; margin-left: 12px; padding: 5px 5px 5px 18px; border: 1px solid var(--vidrio-borde); border-radius: var(--r-pildora);
    background: var(--vidrio); box-shadow: var(--vidrio-sombra);
    -webkit-backdrop-filter: var(--vidrio-desenfoque); backdrop-filter: var(--vidrio-desenfoque);
  }
  :root[data-diseno="selah"] .ap-registro .boton { height: 38px; padding-inline: 18px; }
}
/* en el iPhone (movil.css abre el bloque en la columna) el botón va al final, a lo ancho */
:root[data-diseno="selah"] .ap-quien .ap-input { border-radius: var(--r-pildora); padding-inline: 14px; }
/* la cuenta del día, en la línea de debajo del título, con peso de dato */
:root[data-diseno="selah"] .ap-sub { color: var(--tinta-2); }
:root[data-diseno="selah"] .ap-cuenta { font-weight: 700; color: var(--tinta); }
:root[data-diseno="selah"] .ap-cuenta.todo { color: var(--ok-texto); }
:root[data-diseno="selah"] .ap-estado.hecho { color: var(--ok-texto); font-weight: 600; }
/* puestos: vidrio; listo = tinte verde y su borde */
:root[data-diseno="selah"] .ap-puesto { padding: 12px 14px 10px 16px; border-radius: 18px; }
:root[data-diseno="selah"] .ap-puesto.listo {
  background: color-mix(in srgb, var(--ok) 13%, var(--vidrio)); border-color: color-mix(in srgb, var(--ok) 35%, transparent);
}
:root[data-diseno="selah"] .ap-puesto header b { font-weight: 700; }
:root[data-diseno="selah"] .ap-listo { border-radius: var(--r-pildora); }
:root[data-diseno="selah"] .ap-bloque { padding: 14px 18px 16px; border-radius: 18px; }
:root[data-diseno="selah"] .ap-titulo { font-weight: 700; }
:root[data-diseno="selah"] .ap-foto-btn { border-color: var(--borde-campo); background: var(--vidrio-2); border-radius: 12px; }
:root[data-diseno="selah"] .ap-manana.sin-apertura { background: color-mix(in srgb, var(--aviso) 10%, var(--vidrio)); border-color: color-mix(in srgb, var(--aviso) 30%, transparent); }

/* ═════ 3 · Recepción › Pendientes (llamadas) y el popover de contacto ═════ */
:root[data-diseno="selah"] .rl-dia:first-child h3 { border-radius: var(--r-xl) var(--r-xl) 0 0; }
:root[data-diseno="selah"] .rl-lista > .rl-dia:last-child .rl-fila:last-child { border-radius: 0 0 var(--r-xl) var(--r-xl); }
:root[data-diseno="selah"] .rl-dia h3 { font-weight: 700; }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .rl-fila:hover,
:root[data-diseno="selah"] :is(.rl-fila:focus-visible, .rl-fila[aria-expanded="true"], .rl-fila:has(.rl-ir[aria-expanded="true"])) { background: rgba(11, 103, 207, .05); }
:root[data-diseno="selah"] .rl-tel { color: var(--tinta); }
/* el teléfono es el dato que se usa: Darker, grande */
:root[data-diseno="selah"] .ca-telefono { font: 800 27px/30px var(--f-titulo); letter-spacing: .005em; white-space: nowrap; }
:root[data-diseno="selah"] .ca-llamada { padding: 12px 14px; border-radius: var(--r-l); background: var(--pista); }
/* 14 oct · revisión 3.6: la píldora de estado del popover dice lo mismo que la leyenda de Recepción (selah-horario.css ·
   .ley-ficha). Sin motivo = ámbar con borde lleno · No contestó = ámbar con borde punteado · con motivo = tinte gris de
   ausente · presente = azul (17 oct). Va con el estado del popover (.contacto-ausencia.motivo-…) para ganarle a .ca-estado de
   Mis alumnos (selah-profesor.css), que es otra pieza con el mismo nombre. */
:root[data-diseno="selah"] .contacto-ausencia .ca-estado { border: 1.5px solid transparent; font-weight: 600; }
:root[data-diseno="selah"] .contacto-ausencia.motivo-falta .ca-estado {
  color: var(--sin-motivo-texto); background: var(--sin-motivo-tinte); border-color: var(--sin-motivo);
}
:root[data-diseno="selah"] .contacto-ausencia.motivo-nc .ca-estado {
  color: var(--sin-motivo-texto); background: var(--sin-motivo-tinte); border-color: var(--sin-motivo); border-style: dashed;
}
:root[data-diseno="selah"] .contacto-ausencia.motivo-ok .ca-estado {
  color: var(--ausente-texto); background: var(--ausente-tinte); border-color: var(--ausente-borde); border-width: 1px;
}
:root[data-diseno="selah"] .contacto-ausencia:not(.motivo-falta, .motivo-nc, .motivo-ok) .ca-estado.presente {
  color: var(--presente-texto); background: var(--presente-tinte); border-color: var(--presente-borde); border-width: 1px;
}
/* Pendientes (llamadas): «No contestó» con el mismo borde punteado ámbar que la leyenda */
:root[data-diseno="selah"] .rl-motivo .chip.naranja {
  color: var(--sin-motivo-texto); background: var(--sin-motivo-tinte); border: 1.5px dashed var(--sin-motivo);
}

/* ═════ 4 · Finanzas ═════ */
/* Generador: la columna de la izquierda en tarjetas; a la derecha el panel con el total como protagonista */
:root[data-diseno="selah"] .fg-titulo { font-weight: 700; }
:root[data-diseno="selah"] .fg-der > .fg-titulo { padding: 18px 24px 0; }
:root[data-diseno="selah"] .fg-resumen { padding: 10px 24px 16px; }
:root[data-diseno="selah"] .fg-cifras { align-items: flex-start; gap: 40px; }
:root[data-diseno="selah"] .fg-resumen-sub { margin-top: 6px; }
:root[data-diseno="selah"] .fg-cifra { gap: 4px; }
:root[data-diseno="selah"] .fg-cifra b { font-size: 34px; line-height: 32px; }
:root[data-diseno="selah"] .fg-cifra-total b { font-size: 48px; line-height: 42px; }
:root[data-diseno="selah"] .fg-der > .franja.fg-franja { margin: 12px 24px 0; }
:root[data-diseno="selah"] .fg-der-cuerpo { padding: 0 24px 16px; }
:root[data-diseno="selah"] :is(.fg-familias-cab, .fg-pie) { background: var(--sup); }
:root[data-diseno="selah"] .fg-familias-cab::after { background: linear-gradient(var(--sup), transparent); }
:root[data-diseno="selah"] .fg-pie { padding: 12px 24px; }
:root[data-diseno="selah"] .fg-hecho-cifras .fg-cifra b { font-size: 34px; line-height: 32px; }
/* Emitidas: las cifras de la cabecera en Darker */
:root[data-diseno="selah"] .fi-cifra b { font-size: 26px; line-height: 26px; }
:root[data-diseno="selah"] .fi-tabla.tabla-marco { border-radius: var(--r-xl); }
/* Saldos: «Por cobrar» manda */
:root[data-diseno="selah"] .fi-por-cobrar b { font-size: 60px; line-height: 52px; letter-spacing: -.02em; }
:root[data-diseno="selah"] .fi-cifras-sec .fi-cifra b { font-size: 22px; line-height: 24px; color: var(--tinta-2); }
:root[data-diseno="selah"] .fi-deben { overflow: hidden; }
:root[data-diseno="selah"] .fi-debe { font-size: var(--t-xl); }
:root[data-diseno="selah"] .fi-deben-cab h2 { font-weight: 700; }
/* Dirección › Finanzas: el contador de cada tarjeta en Darker */
:root[data-diseno="selah"] .fi-pend-n { font-size: 40px; line-height: 36px; }
:root[data-diseno="selah"] .fi-pend-cab h3 { font-weight: 700; }
:root[data-diseno="selah"] :is(.fi-tarjetas-grupo, .fi-pend-cab) { background: transparent; }

/* ═════ 5 · Pagos profesores · Validar · Supervisión · Dirección ═════ */
:root[data-diseno="selah"] .pp-cab h2 { font-weight: 700; }
:root[data-diseno="selah"] .pp-panel { border-radius: var(--r-xl); }
:root[data-diseno="selah"] .pp-meses button.activo { color: var(--acento-texto); }
/* el total de horas del mes, en Darker */
:root[data-diseno="selah"] .pp-num-total { font-family: var(--f-titulo); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
/* la clase abierta: su nombre en Darker; la barra de validación en vidrio */
:root[data-diseno="selah"] .pp-c-titulo h2 { font: 800 28px/30px var(--f-titulo); letter-spacing: -.01em; }
/* la ficha de la clase (la de clases.js, en lectura) sobre el mismo vidrio que la barra */
:root[data-diseno="selah"] .pp-c-ficha > .ficha {
  background: var(--vidrio-fuerte); border-color: var(--vidrio-borde); border-radius: var(--r-xl); box-shadow: var(--vidrio-sombra);
}
:root[data-diseno="selah"] .pp-c-ficha .ficha.lectura .momento { background: var(--vidrio-2); border-color: var(--vidrio-borde); border-radius: var(--r-l); }
:root[data-diseno="selah"] .pp-c-barra { padding-block: 12px; }
/* Supervisión › Pendientes y el panorama de Dirección */
:root[data-diseno="selah"] .sp-lista .sp-cab { background: var(--sup-2); }
:root[data-diseno="selah"] .sp-lista .sup-profesor:first-child .sp-cab { border-radius: var(--r-xl) var(--r-xl) 0 0; }
:root[data-diseno="selah"] .sp-nombre b { font-weight: 700; }
:root[data-diseno="selah"] .sp-cifra > b:not(.sp-edad) { font-size: 26px; line-height: 20px; }
:root[data-diseno="selah"] .sp-cifras { min-height: 40px; }
:root[data-diseno="selah"] .sp-cuenta { font-family: var(--f-titulo); font-weight: 800; }
:root[data-diseno="selah"] .sp-tabla .sp-cuenta { font-size: 24px; line-height: 24px; }
/* 15 oct · RONDA-FINAL §4: las listas de pendientes de Supervisión (también las clases por validar) y del panorama de
   Dirección son altas: sin desenfoque detrás (el vidrio fuerte es casi opaco; desenfocar tanta superficie cuesta y no se ve). */
:root[data-diseno="selah"] :is(.sp-lista .sup-profesores, .sp-tabla) { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* 15 oct · RONDA-FINAL §4: en la lista, cada tipo con su cifra en Darker (la palabra en la letra de la interfaz) */
:root[data-diseno="selah"] .sp-lista .sp-cuenta { font-family: var(--f-ui); font-weight: 500; }
:root[data-diseno="selah"] .sp-lista .sp-cuenta-tipo b { font: 800 20px/1 var(--f-titulo); letter-spacing: -.01em; }
/* Supervisión › Alumnos: una sola superficie de vidrio; los grupos sin caja propia, filas limpias */
:root[data-diseno="selah"] .vista-alumnos-todos .columnas-alumnos {
  background: var(--vidrio-fuerte); border-color: var(--vidrio-borde); border-radius: var(--r-xl); box-shadow: var(--vidrio-sombra);
  column-rule-color: var(--linea);
}
:root[data-diseno="selah"] .vista-alumnos-todos .col-lista { background: none; border: 0; border-radius: 0; box-shadow: none; }
:root[data-diseno="selah"] .vista-alumnos-todos .mini-titulo > span { font-size: 22px; }
/* Generador de clases: el resumen en Darker grande */
:root[data-diseno="selah"] .gen-total-n { font-size: 60px; line-height: 50px; }
:root[data-diseno="selah"] .gen-paso h2 { font-weight: 700; }
:root[data-diseno="selah"] .gen-n { border-radius: 50%; }
:root[data-diseno="selah"] .gen-chip { border-radius: var(--r-pildora); }
:root[data-diseno="selah"] .gen-chip.quitada { background: transparent; }
:root[data-diseno="selah"] .gen-fecha-caja { border-color: var(--borde-campo); background: var(--campo-fondo); }
:root[data-diseno="selah"] .gen-inst.abierta .gi-cab { background: var(--fila-hover); }
/* Dirección › Recepción: la línea de la apertura y el cierre de hoy */
:root[data-diseno="selah"] .dir-local .enlace-discreto { font-weight: 600; }

/* ═════ 6 · entrada y Ajustes ═════ */
/* Perfil: el título en Darker como las demás pantallas (ya lo hereda); el subtítulo en niebla */
:root[data-diseno="selah"] .perfil-cab .sub { color: var(--tinta-2); }
/* Datos de Airtable: hoja lateral opaca (una herramienta de lectura: nada de detrás se lee a través) */
:root[data-diseno="selah"] .panel.panel-lateral.panel-datos { background: var(--sup); }
:root[data-diseno="selah"] .datos-avisos { border-color: var(--linea); background: var(--sup-2); border-radius: var(--r-l); }

/* ═════ 15 oct B · zona B ═════ */
/* Recepción › Asistencias (pedido de Juan David: «pon asistencias en azul… ausencia en gris… y en rojo los que no tengan
   motivo»). Solo Recepción: presente = tinte y ✓ de acción (azul) · ausente con motivo = gris · ausente sin motivo = tinte,
   borde de 2 px y píldora «ausente» rojos · «No Contestó» = ámbar punteado, como antes. 17 oct: el azul y el gris son los
   tokens --presente-* / --ausente-* (selah.css), más fuertes y los mismos en el profesor, Supervisión y Administración.
   Lo común está en pendientes.css (misma sección). */
:root[data-diseno="selah"] .vista-horario.recepcion .rejilla .bl-alumno.presente { background: var(--presente-tinte); border-color: var(--presente-borde); }
:where(:root[data-diseno="selah"]:not(.puntero-quieto)) .vista-horario.recepcion .rejilla .bl-alumno.presente.marcable:hover { background: color-mix(in srgb, var(--presente) 30%, var(--ficha-base)); }
:root[data-diseno="selah"] .vista-horario.recepcion .rejilla .bl-alumno.presente::after { border-color: var(--presente-texto); }
:root[data-diseno="selah"] .vista-horario.recepcion .rejilla .bl-alumno.presente.otro { border-color: var(--acento); }
:root[data-diseno="selah"] .vista-horario.recepcion .rejilla .bl-alumno.ausente.motivo-ok {
  background: var(--ausente-tinte); border-color: var(--ausente-borde); box-shadow: none; outline: 0;
}
:root[data-diseno="selah"] .vista-horario.recepcion .rejilla .bl-alumno.ausente.motivo-ok .bl-falta { color: var(--ausente-texto); box-shadow: inset 0 0 0 1px var(--ausente-borde); }
:root[data-diseno="selah"] .vista-horario.recepcion .rejilla .bl-alumno.ausente.motivo-falta {
  background: color-mix(in srgb, var(--peligro) 16%, var(--ficha-base)); border-color: var(--peligro); box-shadow: inset 0 0 0 1px var(--peligro);
}
:root[data-diseno="selah"] .vista-horario.recepcion .rejilla .bl-alumno.ausente.motivo-falta .bl-falta { background: var(--peligro); color: #fff; box-shadow: none; }
:root[data-diseno="selah"] .vista-horario.recepcion .rejilla .bl-alumno.ausente.motivo-nc { background: var(--sin-motivo-tinte); }
:root[data-diseno="selah"] .vista-horario.recepcion .rejilla .bl-alumno.ausente.motivo-nc .bl-falta { color: var(--sin-motivo-texto); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sin-motivo) 50%, transparent); }
/* leyenda */
:root[data-diseno="selah"] .vista-horario.recepcion .ley-ficha.presente { background: var(--presente-tinte); box-shadow: inset 0 0 0 1px var(--presente-borde); }
:root[data-diseno="selah"] .vista-horario.recepcion .ley-ficha.ausente.motivo-ok { background: var(--ausente-tinte); box-shadow: inset 0 0 0 1px var(--ausente-borde); }
:root[data-diseno="selah"] .vista-horario.recepcion .ley-ficha.ausente.motivo-falta { background: color-mix(in srgb, var(--peligro) 16%, var(--ficha-base)); box-shadow: inset 0 0 0 2px var(--peligro); }
:root[data-diseno="selah"] .vista-horario.recepcion .ley-ficha.ausente.motivo-nc { background: var(--sin-motivo-tinte); }
/* el popover de contacto: la píldora de estado con el color de la ficha; sin teléfono, una frase gris en letra normal */
:root[data-diseno="selah"] .contacto-ausencia .ca-telefono.sin { font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-3); white-space: normal; letter-spacing: 0; }
:root[data-diseno="selah"] .contacto-ausencia.motivo-falta .ca-estado { color: #fff; background: var(--peligro); border-color: var(--peligro); }
:root[data-diseno="selah"] .contacto-ausencia.motivo-ok .ca-estado {
  color: var(--ausente-texto); background: var(--ausente-tinte); border-color: var(--ausente-borde); border-width: 1px;
}
:root[data-diseno="selah"] .contacto-ausencia:not(.motivo-falta, .motivo-nc, .motivo-ok) .ca-estado.presente {
  color: var(--presente-texto); background: var(--presente-tinte); border-color: var(--presente-borde);
}

/* Supervisión › Horario (iPhone, un día): «Sábado» en 22 px no cabía en la columna de las horas (52 px) y se montaba
   sobre «Piano» («SábadoPiano»). En el iPhone, el día en 17 px (como el horario pequeño de Asignar). */
@media (max-width: 760px) {
  :root[data-diseno="selah"] .horario-supervision :is(.rejilla, .rejilla-dias.varios .rejilla) .rg-esquina { font-size: 17px; }
}

/* Supervisión › Alumnos: secciones por día y tarjetas de grupo (direccion.css, misma sección), en vidrio como las de
   Clases; la superficie única de antes ya no va. */
:root[data-diseno="selah"] .vista-alumnos-todos .columnas-alumnos.sa-dias { background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-diseno="selah"] .vista-alumnos-todos .sa-grupos .col-grupo { background: var(--vidrio); border-color: var(--vidrio-borde); border-radius: 22px; box-shadow: var(--vidrio-sombra); padding: 14px 12px 8px; }
:root[data-diseno="selah"] .vista-alumnos-todos .sa-grupos .mini-titulo > span { font-size: 22px; line-height: 1.05; }
:root[data-diseno="selah"] .vista-alumnos-todos .sa-grupos .mini-titulo small { font-size: var(--t-s); line-height: var(--lh-s); }

/* 17 oct noche · Supervisión › Pendientes por niveles (supervision-pendientes.js · direccion.css): las tarjetas en vidrio. */
:root[data-diseno="selah"] :is(.spz-prof, .spz-grupo) {
  background: var(--vidrio-fuerte); border-color: var(--vidrio-borde); border-radius: var(--r-xl); box-shadow: var(--vidrio-sombra);
}
:root[data-diseno="selah"] .spz-prof:not([data-grav="al-dia"]) { background: linear-gradient(100deg, color-mix(in srgb, var(--g-fondo) 75%, var(--vidrio-fuerte)), var(--vidrio-fuerte) 60%); }
:root[data-diseno="selah"] .spz-prof .spz-grupo { background: var(--vidrio-panel); box-shadow: none; border-color: var(--linea); }
:root[data-diseno="selah"] .spz-clase { background: var(--vidrio-2); border-color: var(--vidrio-borde); border-radius: var(--r-l); }
:root[data-diseno="selah"] .spz-asis { background: var(--vidrio-panel); border-color: var(--vidrio-borde); }
:root[data-diseno="selah"] .spz-prof-nombre b { font-weight: 700; }
:root[data-diseno="selah"] .spz-prof-cifra b { font: 800 34px/30px var(--f-titulo); letter-spacing: -.015em; font-variant-numeric: normal; }
:root[data-diseno="selah"] .spz-cab-nombre h1 { letter-spacing: -.01em; }