/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   Selah · pendientes.css (13 oct · DISENO.md §4 · ronda 2 · ronda 3: leyenda, cifras que cuadran, paneles y popover comunes). Administración › Pendientes y sus editores (también los paneles
   del cliente y de las disponibilidades que se abren desde aquí); Recepción: apertura y cierre, el marco de asistencias,
   llamadas y el popover de contacto (admin-pendientes, admin-editor-pendiente, admin-cliente, admin-dispo, recepcion-*,
   contacto-ausencia). Composición por vista: docs/diseno-pendientes.md.
   Un solo significado por color: verde = hecho · ámbar = te toca · gris = esperando o no aplica · rojo = vencido o error.
   Lo único con color en una lista de pendientes es lo que falta. Sin colores de instrumento. Todo con los tokens de base.css;
   las piezas comunes (botones, chips, campos, popovers, diálogos) son las de componentes.css: aquí se colocan y se ajustan.
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 0 · piezas del área ── */
/* Estado del alumno: texto gris, sin punto (aquí no es lo importante). */
.pd-estado { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }

/* Encabezado de las vistas del área: título y controles en una línea. */
:is(.vista-pendientes, .vista-recepcion) .adm-cab { display: flex; align-items: center; gap: 12px; min-width: 0; flex: none; }
:is(.vista-pendientes, .vista-recepcion) .adm-cab h1 { flex: none; margin-right: 4px; }
:is(.vista-pendientes, .vista-recepcion) .adm-total { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-3); font-variant-numeric: tabular-nums; }

/* Ronda 3 · nada se corta en seco: las zonas que se desplazan (la tabla de Pendientes, la apertura, las llamadas) funden su
   borde de abajo; el relleno de abajo deja ver entero lo último al llegar al final. */
@media (min-width: 761px) {
  .vista :is(.pd-cuerpo, .rl-cuerpo, .ap-cuerpo) { padding-bottom: 32px; -webkit-mask-image: linear-gradient(#000 calc(100% - 28px), transparent); mask-image: linear-gradient(#000 calc(100% - 28px), transparent); }
}

/* Vacío diseñado: ícono gris, una frase, una acción opcional. */
.pd-vacio, .rl-vacio { flex: 1; min-height: 280px; }
.pd-vacio p, .rl-vacio p { max-width: 420px; text-wrap: balance; }

/* ═════ 1 · Administración › Pendientes (densa · vista de pájaro) ═════ */
.vista-pendientes { gap: 12px; }
.pd-cab { flex: none; display: grid; gap: 12px; }
.vista-pendientes .adm-buscador { width: 260px; flex: none; }

/* Saldos: el interruptor de siempre (pista 34×20, verde encendido), sin fondo propio. */
.pd-saldos {
  display: inline-flex; align-items: center; gap: 10px; flex: none; height: 36px; padding: 0 6px; border: 0; border-radius: var(--r-m);
  background: transparent; cursor: pointer; font: 500 var(--t-m)/1 var(--f-ui); color: var(--tinta-2);
  transition: color var(--dur) var(--ease);
}
:where(html:not(.puntero-quieto)) .pd-saldos:hover:not(:disabled) { color: var(--tinta); }
.pd-saldos:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acento-anillo); }
.pd-perilla { position: relative; flex: none; width: 34px; height: 20px; border-radius: var(--r-pildora); background: var(--linea-2); transition: background-color var(--dur) var(--ease); }
.pd-perilla::after {
  content: ''; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .25); transition: transform var(--dur) var(--ease);
}
.pd-saldos.activo { color: var(--tinta); }
.pd-saldos.activo .pd-perilla { background: var(--ok); }
.pd-saldos.activo .pd-perilla::after { transform: translateX(14px); }
.pd-saldos:disabled { cursor: default; color: var(--tinta-4); }

/* Filtros: «Todos» y tres chips blancos con borde, con su número; el elegido en azul con borde lleno. */
.pd-filtros { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; min-height: 32px; }
.pd-cats { display: flex; flex-wrap: wrap; gap: 8px; }
:is(.pd-cat, .pd-todos) {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border: 1px solid var(--linea-2); border-radius: var(--r-pildora);
  background: var(--sup); cursor: pointer; font: 500 var(--t-m)/1 var(--f-ui); color: var(--tinta-2); white-space: nowrap;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pd-cat .ic { width: 16px; height: 16px; color: var(--tinta-3); }
:is(.pd-cat, .pd-todos) b { font: 600 var(--t-s)/1 var(--f-ui); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
:where(html:not(.puntero-quieto)) :is(.pd-cat, .pd-todos):hover:not(.activa) { border-color: #B7BEC9; color: var(--tinta); }
:is(.pd-cat, .pd-todos):focus-visible { outline: none; box-shadow: 0 0 0 3px var(--acento-anillo); }
:is(.pd-cat, .pd-todos).activa { background: var(--acento-suave); border-color: var(--acento); color: var(--acento-texto); font-weight: 600; }
:is(.pd-cat, .pd-todos).activa :is(.ic, b) { color: var(--acento-texto); }
.pd-todos.activa { cursor: default; }
/* Ronda 3 · leyenda de una línea de la tabla, a la derecha de los filtros: ● falta · ✓ hecho · — no aplica */
.pd-leyenda { display: flex; align-items: center; gap: 16px; margin-left: auto; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); white-space: nowrap; }
.pd-leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.pd-leyenda .pdh-ok { width: 14px !important; height: 14px !important; }

/* ── cliente distinto del acudiente: una línea; abierto, una tabla de tres columnas juntas ── */
.pd-clientes { flex: none; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1); overflow: hidden; }
.pd-clientes.al-dia { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; font: 500 var(--t-m)/1 var(--f-ui); color: var(--ok-texto); }
.pd-clientes.al-dia .ic { width: 16px; height: 16px; }
.pdc-cab {
  display: flex; align-items: center; gap: 10px; width: 100%; height: 38px; padding: 0 14px; border: 0; background: transparent; cursor: pointer;
  text-align: left; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); transition: background-color var(--dur) var(--ease);
}
:where(html:not(.puntero-quieto)) .pdc-cab:hover { background: var(--sup-2); }
.pdc-cab > .ic { width: 16px; height: 16px; color: var(--aviso); }
.pdc-cab b { flex: none; font-weight: 600; white-space: nowrap; }
.pdc-ayuda { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-3); }
.pdc-mas { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--acento-texto); }
.pdc-mas .ic { width: 14px; height: 14px; }
/* acudiente y cliente lado a lado y cerca, para compararlos palabra por palabra */
.pdc-lista { --pdc-cols: minmax(200px, 280px) minmax(0, 300px) minmax(0, 300px) minmax(96px, 1fr); max-height: min(46vh, 420px); overflow-y: auto; border-top: 1px solid var(--linea); }
.pdc-titulos, .pdc-fila { display: grid; grid-template-columns: var(--pdc-cols); align-items: center; gap: 20px; padding: 0 14px; }
.pdc-titulos {
  position: sticky; top: 0; z-index: 1; height: 30px; background: var(--sup-2); border-bottom: 1px solid var(--linea);
  font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3);
}
.pdc-fila {
  width: 100%; min-height: 40px; border: 0; border-bottom: 1px solid var(--linea); background: var(--sup); cursor: pointer; text-align: left;
  font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); transition: background-color var(--dur) var(--ease);
}
.pdc-fila:last-child { border-bottom: 0; }
:where(html:not(.puntero-quieto)) .pdc-fila:hover, .pdc-fila:focus-visible { background: var(--sup-2); outline: none; }
.pdc-alumno { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.pdc-alumno b { flex: none; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pdc-dato { min-width: 0; }
.pdc-dato > span:not(.solo-lector) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-2); }
.pdc-cli.sin > span:not(.solo-lector) { color: var(--tinta-3); }
/* la diferencia: ámbar en la palabra que cambia; solo mayúsculas o tildes, subrayado punteado (lo mismo en el panel) */
:is(.pd-clientes, .cx-panel) .cx-dif { padding: 0 2px; border-radius: 4px; background: var(--aviso-fondo); color: var(--aviso-texto); font-weight: 600; }
:is(.pd-clientes, .cx-panel) .cx-dif.leve { padding: 0; background: none; color: inherit; font-weight: inherit; text-decoration: underline dotted var(--aviso); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.pdc-ir { justify-self: end; display: inline-flex; align-items: center; gap: 2px; font-weight: 500; color: var(--tinta-3); transition: color var(--dur) var(--ease); }
.pdc-ir .ic { width: 14px; height: 14px; }
:is(.pdc-fila:hover, .pdc-fila:focus-visible) .pdc-ir { color: var(--acento-texto); }

/* ── cuerpo: se desplaza; el encabezado de la vista queda arriba ── */
.pd-cuerpo { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; padding: 0 2px 8px 0; }

/* ── Por alumno: tabla blanca a todo el ancho (mismo ancho con cualquier filtro, alineada con el bloque Cliente) ── */
.pd-hoja {
  flex: none; width: 100%; min-width: 0;
  background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1);
  font: 400 var(--t-m)/var(--lh-m) var(--f-ui); font-variant-numeric: tabular-nums;
}
.pdh-encabezado { position: sticky; top: 0; z-index: 2; background: var(--sup-2); border-bottom: 1px solid var(--linea); border-radius: var(--r-l) var(--r-l) 0 0; }
.pdh-grupos { display: grid; align-items: end; height: 24px; padding: 0 12px; }
.pdh-grupo { min-width: 0; padding: 0 6px; }
.pdh-grupo > span {
  display: block; padding-bottom: 3px; border-bottom: 1px solid var(--linea-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-align: center; font: 600 var(--t-xs)/var(--lh-xs) var(--f-ui); color: var(--tinta-3);
}
.pdh-fila { display: grid; align-items: center; min-height: 36px; padding: 0 12px; border-top: 1px solid var(--linea); }
.pdh-encabezado .pdh-fila, .pdh-cuerpo > .pdh-fila:first-child { border-top: 0; }
.pdh-cuerpo > .pdh-fila:last-child { border-radius: 0 0 var(--r-l) var(--r-l); }
:where(html:not(.puntero-quieto)) .pdh-cuerpo > .pdh-fila:hover { background: var(--sup-2); }
.pdh-cab { min-height: 32px; font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.pdh-cab .pdh-nombre { align-items: center; }
.pdh-col { min-width: 0; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.pdh-col.dispo { text-align: left; padding-left: 14px; }
/* separador fino al empezar un grupo (Documentación · Kit · Contacto) */
.pdh-fila > .g-ini { box-shadow: inset 1px 0 0 var(--linea); }

.pdh-nombre {
  display: flex; align-items: baseline; gap: 10px; min-width: 0; height: 100%; padding: 0 8px 0 0; border: 0; background: none;
  text-align: left; font: inherit; color: var(--tinta);
}
button.pdh-nombre { align-items: center; cursor: pointer; }
.pdh-nombre b { flex: none; max-width: 72%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; transition: color var(--dur) var(--ease); }
:where(html:not(.puntero-quieto)) button.pdh-nombre:hover b { color: var(--acento-texto); }

/* celdas: hecho = check gris tenue · falta = punto ámbar · no aplica = guion gris claro */
.pdh-c { align-self: stretch; display: grid; place-items: center; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: var(--tinta); }
.pdh-c.accion, .pdh-c.saldo { cursor: pointer; transition: background-color var(--dur) var(--ease); }
:where(html:not(.puntero-quieto)) :is(.pdh-c.accion, .pdh-c.saldo):hover, .pdh-c.accion:focus-visible, .pdh-c.elegida { background: var(--sup-3); outline: none; }
.pdh-c.elegida { box-shadow: inset 0 0 0 1.5px var(--acento); }
/* Ronda 3: el check de «hecho» en gris medio (se lee como una marca); el guion de «no aplica», corto y muy claro: no se confunden */
.pdh-ok { width: 15px !important; height: 15px !important; color: var(--tinta-3); }
.pdh-falta { display: block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--aviso); }
.pdh-na { display: block; width: 8px; height: 1.5px; border-radius: 1px; background: var(--linea-2); }
/* con pocos datos (tabla amplia), la palabra junto al punto */
.pdh-c.con-palabra { display: flex; align-items: center; justify-content: center; gap: 6px; }
.pdh-palabra { font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--aviso-texto); }
/* Disponibilidades: el dato real (días marcados), alineado a la izquierda */
.pdh-c.dispo { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 0 8px 0 14px; text-align: left; }
.pdh-dias { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2); }
.pdh-dias.vacio { color: var(--tinta-3); }
/* camiseta que falta, con el filtro del kit: la talla junto al punto */
.pdh-c.con-talla { display: flex; align-items: center; justify-content: center; gap: 8px; }
.pdh-talla { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-2); }
/* saldo: monto en negro, a la derecha (el color no añade nada: la columna ya dice que es un saldo) */
.pdh-c.saldo { justify-items: end; padding-right: 12px; font-weight: 500; color: var(--tinta); }
.pdh-c[data-tipo="saldo"]:not(.saldo) { justify-items: end; padding-right: 16px; }
.pdh-cab .pdh-col.saldo { text-align: right; padding-right: 12px; }

/* Pocas columnas o pocas filas: las filas crecen y la letra sube un punto. */
.pd-hoja.amplia { font-size: var(--t-l); line-height: var(--lh-l); }
.pd-hoja.amplia .pdh-cuerpo > .pdh-fila { min-height: 46px; }
/* Solo Disponibilidades (ronda 3): dos bloques. Arriba, los que tienen franjas marcadas, con sus días y horas (lo que hay
   que revisar); debajo, en gris y en columnas, los que aún no tienen ninguna. Cada bloque dice cuántos. */
.pd-hoja.solo-dispo { padding: 4px 0 8px; }
.pd-hoja.solo-dispo .pdh-cuerpo { display: grid; gap: 4px; }
.pdd-titulo { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); }
.pdd-titulo .pd-n {
  display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pildora);
  background: var(--sup-3); font: 600 var(--t-s)/1 var(--f-ui); color: var(--tinta-2); font-variant-numeric: tabular-nums;
}
.pdd-bloque + .pdd-bloque { border-top: 1px solid var(--linea); padding-top: 4px; }
.pdd-bloque.con-franjas .pdd-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); padding: 0 4px; }
.pdd-bloque.sin-franjas .pdd-lista { columns: 4; column-gap: 0; padding: 0 4px; }
.pd-hoja.solo-dispo .pdh-fila { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-m); break-inside: avoid; }
.pd-hoja.solo-dispo .pdh-nombre { flex: 1; }
.pd-hoja.solo-dispo .pdh-nombre b { max-width: 100%; font-weight: 600; }
.pd-hoja.solo-dispo .pdh-c.dispo { flex: none; align-self: center; justify-content: flex-end; padding: 0; }
.pd-hoja.solo-dispo .pdh-dias { font-size: var(--t-m); color: var(--tinta-2); }
.pd-hoja.solo-dispo .pdh-falta { display: none; } /* todas las filas de este filtro faltan: el punto no distingue nada */
.pdd-bloque.sin-franjas .pdh-fila { min-height: 34px; }
.pdd-bloque.sin-franjas .pdh-nombre b { font-weight: 400; color: var(--tinta-2); }
.pdd-bloque.sin-franjas .pdh-c.dispo { display: none; }
.pd-hoja.amplia .pdh-falta { width: 9px; height: 9px; }
.pd-hoja.amplia .pdh-ok { width: 17px !important; height: 17px !important; }
.pd-hoja.amplia :is(.pd-estado, .pdh-dias) { font-size: var(--t-m); }

/* ── Por pendiente: franjas en orden fijo sobre una misma rejilla de 4 (las cortas comparten fila) ── */
.pd-franjas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 12px; align-content: start; align-items: start; }
.pd-franja { grid-column: span var(--n, 4); display: grid; grid-template-columns: subgrid; row-gap: 8px; min-width: 0; }
.pd-franja-titulo { grid-column: 1 / -1; padding-left: 2px; font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.pd-pila { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 12px; align-items: start; }
.pd-grupo {
  display: grid; grid-template-columns: minmax(0, 1fr); /* 17 oct · la lista larga en columnas no ensancha la tarjeta */
  gap: 2px; align-content: start; min-width: 0; padding: 10px 8px 8px;
  background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1);
}
.pd-grupo.larga, .f-saldo .pd-grupo, .f-dispo .pd-grupo { grid-column: 1 / -1; }
.pd-grupo h3 {
  display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 0 4px; padding: 0 6px 8px; border-bottom: 1px solid var(--linea);
  font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta);
}
.pd-grupo h3 .ic { width: 16px; height: 16px; color: var(--tinta-3); }
.pd-grupo h3 > span:not(.pd-n), .pd-plegar > span:not(.pd-n, .pd-ver) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-grupo .pd-n {
  flex: none; margin-left: auto; display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--r-pildora);
  background: var(--sup-3); font: 600 var(--t-s)/1 var(--f-ui); color: var(--tinta-2); font-variant-numeric: tabular-nums;
}
.pdg-resumen { margin: 0 6px 4px; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.pdg-lista { display: grid; }
.pdg-fila {
  position: relative; display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; min-height: 32px; padding: 0 6px; border: 0; border-radius: var(--r-s);
  background: none; cursor: pointer; text-align: left; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta);
  transition: background-color var(--dur) var(--ease);
}
:where(html:not(.puntero-quieto)) .pdg-fila:hover, .pdg-fila:focus-visible { background: var(--sup-2); outline: none; }
.pdg-fila b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.pdg-fila small { flex: none; max-width: 50%; overflow: hidden; text-overflow: ellipsis; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); white-space: nowrap; }
.pdg-fila small.vacio { color: var(--tinta-4); }
/* Disponibilidades: los que tienen franjas van primero y en negro con sus horas; los demás, en gris */
.pdg-fila.con-franjas b { font-weight: 600; }
.pdg-fila.con-franjas small { color: var(--tinta-2); }
.pdg-fila.sin-franjas b { color: var(--tinta-2); font-weight: 400; }
.pdg-fila .pdg-monto { font-weight: 500; color: var(--tinta); font-variant-numeric: tabular-nums; }
/* casilla: al pasar el mouse, un check verde ocupa el lugar del dato (no reserva ancho) */
.pdg-ok { position: absolute; right: 8px; top: 50%; width: 15px !important; height: 15px !important; margin-top: -7.5px; color: var(--ok); opacity: 0; transition: opacity var(--dur) var(--ease); }
:is(.pdg-fila:hover, .pdg-fila:focus-visible) .pdg-ok { opacity: 1; }
:is(.pdg-fila:hover, .pdg-fila:focus-visible):has(.pdg-ok) small { visibility: hidden; }
/* Saldos: una banda fina a lo ancho, los nombres en una línea */
.f-saldo .pd-grupo { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 6px 8px; }
.f-saldo .pd-grupo h3 { margin: 0; padding: 0 12px 0 6px; border-bottom: 0; border-right: 1px solid var(--linea); }
.f-saldo .pdg-lista { display: flex; flex-wrap: wrap; gap: 0 4px; }
.f-saldo .pdg-fila { width: auto; flex: none; }
.f-saldo .pdg-fila b { flex: none; }
/* La lista larga: en columnas, en orden alfabético hacia abajo */
.pd-grupo.larga .pdg-lista { display: block; columns: 4; column-gap: 12px; }
.pd-grupo.larga .pdg-fila { break-inside: avoid; }
/* Disponibilidades plegada en una línea cuando hay otras franjas */
.pd-plegar {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}
.pd-plegar .pd-n { margin-left: 0; }
.pd-ver { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font: 600 var(--t-m)/1 var(--f-ui); color: var(--acento-texto); }
.pd-ver .ic { width: 14px; height: 14px; color: var(--acento-texto) !important; }
.pd-grupo.plegada { padding: 0; }
.pd-grupo.plegada h3 { margin: 0; padding: 0 14px; height: 40px; border-bottom: 0; }
/* Una sola franja (un filtro): sin rótulo redundante y con filas más altas */
.pd-franjas.unica .pdg-fila { min-height: 40px; font-size: var(--t-l); }
.pd-franjas.unica .pdg-fila small { font-size: var(--t-m); }

/* ═════ 2 · Paneles de Pendientes (editores, disponibilidades y cliente) ═════ */
/* Ronda 3: los tres son el panel lateral común (componentes.css · .panel-lateral). Aquí solo: el mismo ancho, la foto del
   alumno en la cabecera, el pie con sus botones y, si el contenido es corto, el panel mide lo que su contenido. */
.panel.pd-panel {
  display: flex; flex-direction: column; gap: 0; width: min(580px, 100%); max-height: none; padding: 0; overflow: hidden;
  font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta);
}
.panel.pd-panel .panel-ic.con-avatar { width: 36px; height: 36px; background: none; border-radius: 50%; }
.panel.pd-panel .panel-titulo h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* editores sin la rejilla: crecen con su contenido (sin media ventana en blanco) */
.panel.ep-panel:not(.con-dispo) { height: auto; align-self: start; }
.panel.pd-panel > .dgr-pie {
  flex: none; display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; padding: 14px 16px 14px 24px; border-top: 1px solid var(--linea); background: var(--sup);
}
.panel.pd-panel > .dgr-pie .boton { flex: none; }
.panel.ep-panel .panel-cuerpo { gap: 0; }
.ep-cuerpo { display: grid; gap: 24px; align-content: start; min-width: 0; }
.ep-seccion { display: grid; gap: 8px; min-width: 0; }
.ep-titulo { display: flex; align-items: center; gap: 8px; font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.ep-titulo .ic { width: 14px; height: 14px; }

/* Un solo componente de fila para todo: ícono, título y estado, lo propio de la fila y, al final, la misma casilla. */
.ep-items { display: grid; gap: 1px; overflow: hidden; background: var(--linea); border: 1px solid var(--linea); border-radius: var(--r-l); }
.ep-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; min-height: 56px; padding: 10px 14px; border: 0; border-radius: 0;
  background: var(--sup); text-align: left; font: inherit; color: inherit; transition: background-color var(--dur) var(--ease);
}
.ep-item.casilla { cursor: pointer; }
:where(html:not(.puntero-quieto)) .ep-item.casilla:hover { background: var(--sup-2); }
.ep-item.casilla:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--acento); }
/* el ícono queda gris siempre: el estado lo dicen la casilla y la línea de abajo */
.ep-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-m); background: var(--sup-3); color: var(--tinta-3); }
.ep-ic .ic { width: 18px; height: 18px; }
.ep-texto { flex: 1; display: grid; min-width: 0; }
.ep-texto b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta); }
.ep-texto small { font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); text-wrap: balance; }
/* hecho: el estado en gris oscuro (la casilla azul ya lo dice); otra talla que la del alumno: en ámbar */
.ep-item[aria-pressed="true"] .ep-texto small { color: var(--tinta-2); }
.ep-item.otra-talla .ep-texto small { color: var(--aviso-texto); }
/* cambiado sin guardar: punto azul junto al título, con su nombre al pasar el mouse */
.ep-item.cambiado .ep-texto b::after { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 0 2px 8px; border-radius: 50%; background: var(--acento); vertical-align: middle; }
/* la casilla de cada fila: la común (componentes.css), a 18 px y siempre en la misma columna */
.ep-item .ep-marca { --casilla: 18px; flex: none; }
button.casilla-caja.ep-marca { cursor: pointer; }
/* adjuntos: los archivos y «Subir» antes de la casilla */
.ep-adjuntos { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; min-width: 0; max-width: 55%; }
.ep-adjuntos:empty { display: none; }
.ep-adj {
  display: inline-flex; align-items: center; gap: 6px; max-width: 220px; height: 28px; padding: 0 8px 0 6px; border-radius: var(--r-s);
  background: var(--sup-3); font: 500 var(--t-s)/1 var(--f-ui); color: var(--tinta-2);
}
.ep-adj > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ep-adj img { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; }
/* una foto ya guardada se reconoce por su miniatura: el nombre del archivo no aporta */
.ep-adj:has(img) { width: 32px; height: 32px; padding: 0; justify-content: center; overflow: hidden; }
.ep-adj:has(img) img { width: 32px; height: 32px; border-radius: var(--r-s); }
.ep-adj:has(img) > span { display: none; }
.ep-adj .ic { width: 14px; height: 14px; flex: none; color: var(--tinta-3); }
.ep-adj.nuevo { padding-right: 2px; }
.ep-quitar { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; color: var(--tinta-3); cursor: pointer; }
:where(html:not(.puntero-quieto)) .ep-quitar:hover { background: var(--linea); color: var(--tinta); }
.ep-quitar .ic { width: 12px; height: 12px; }
/* camiseta: la talla es un dato de la fila (rótulo y desplegable compacto), la casilla sigue al final */
.ep-talla { display: inline-flex; align-items: center; flex: none; }
.ep-talla > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ep-select { flex: none; width: 140px; --alto-control: 30px; --letra-control: var(--t-m); }
/* la rejilla de disponibilidades dentro del panel: a su alto natural (el cuerpo del panel se desplaza una sola vez) */
.panel.pd-panel .dgr-scroll { height: auto; max-height: none; overflow: visible; }
.panel.pd-panel .dgr-cuerpo { grid-template-rows: none; align-content: start; }
.panel.pd-panel .dg-validadas.sin-campo { display: none; }
/* las medias horas con una línea más suave que las horas en punto (no papel milimetrado) */
.panel.pd-panel .dg-celda:not(.en-hora) { border-top-color: transparent; }
.panel.pd-panel .dg-hora.media + .dg-celda, .panel.pd-panel .dg-celda[aria-pressed="true"] { border-top-color: transparent; }
.dg-validadas { display: inline-flex; align-items: center; gap: 10px; padding: 0; background: none; cursor: pointer; }
.dg-validadas input { --casilla: 18px; }
/* con la casilla «validadas», el pie va en dos líneas: la casilla arriba, los botones abajo a la derecha */
.dgr-pie:has(label.dg-validadas) { flex-wrap: wrap; row-gap: 12px; }
.dgr-pie > label.dg-validadas { flex: 1 1 100%; }
.dg-validadas b { font-weight: 500; white-space: nowrap; }
.dg-resumen { padding-top: 10px; font: 500 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); }
.dg-resumen.vacio { font-weight: 400; color: var(--tinta-3); }
.dg-resumen.advertencia { color: var(--aviso-texto); }
/* «No disponible»: un rótulo y una casilla por día, en una línea */
.dg-no-fila { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding-top: 12px; }
.dg-no-rotulo { font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2); }
.panel.pd-panel .dg-no { justify-self: auto; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer; font: 400 var(--t-m)/1 var(--f-ui); color: var(--tinta); }
.panel.pd-panel .dg-no[aria-pressed="true"] { background: none; color: var(--tinta); }
.panel.pd-panel .dg-no .casilla-caja { --casilla: 16px; }
.panel.pd-panel .dg-validadas { padding: 0; background: none; }

/* Corregir el cliente (admin-cliente.js): el mismo panel lateral; su cuerpo, en secciones. */
.cx-panel .cx-cuerpo { display: grid; gap: 20px; }
.cx-panel .cx-par { grid-template-columns: 150px minmax(0, 1fr); }
.cx-panel .cx-par b { font-size: var(--t-xl); line-height: var(--lh-xl); }
/* lo más grave (sin cliente) no se apaga: se dice en negro */
.cx-panel .cx-par b.sin { color: var(--tinta); font-weight: 600; }
.cx-panel .cx-veredicto { color: var(--aviso-texto); }
.cx-panel .cx-comparar.iguales .cx-veredicto, .cx-panel .cx-comparar.previa .cx-veredicto { color: var(--ok-texto); }
.cx-panel .cx-campo small { font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-2); }
/* campo cambiado sin guardar: el punto azul junto a su rótulo, como en los editores (no un borde azul que parezca el foco) */
.cx-panel .cx-campo.cambiado .cx-input { border-color: var(--linea-2); }
.cx-panel .cx-campo.cambiado small::after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 0 1px 6px; border-radius: 50%; background: var(--acento); vertical-align: middle; }
.cx-panel .cx-vista.igual { color: var(--ok-texto); }
/* la lupa dentro del campo, como en el buscador de la app */
.cx-panel .cx-buscador { position: relative; display: block; }
.cx-panel .cx-buscador > .ic { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--tinta-3); pointer-events: none; }
.cx-panel .cx-buscador .cx-input { width: 100%; padding-left: 36px; }
/* resultados: una lista de opciones con su acción a la derecha; el cliente actual, quieto y a la vista */
.cx-panel .cx-resultados { grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--linea); border-radius: var(--r-l); overflow: hidden; }
.cx-panel .cx-resultados:empty { display: none; }
.cx-panel .cx-resultado {
  grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; min-height: 52px; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--linea); border-radius: 0;
}
.cx-panel .cx-resultado:last-child { border-bottom: 0; }
:where(html:not(.puntero-quieto)) .cx-panel .cx-resultado:hover:not(:disabled), .cx-panel .cx-resultado:focus-visible { background: var(--sup-2); border-color: var(--linea); }
.cx-res-texto { display: grid; min-width: 0; }
.cx-res-texto b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--t-l)/var(--lh-l) var(--f-ui); }
.cx-res-texto small { font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
/* «Igual al acudiente» es un dato (gris), no un «hecho» verde */
.cx-panel .cx-resultado .cx-etiqueta { grid-column: auto; grid-row: auto; display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--r-pildora); background: var(--neutro-fondo); color: var(--neutro-texto); font: 600 var(--t-s)/1 var(--f-ui); }
.cx-panel .cx-resultado .cx-etiqueta .ic { width: 13px; height: 13px; }
.cx-vincular { display: inline-flex; align-items: center; gap: 2px; font: 600 var(--t-m)/1 var(--f-ui); color: var(--acento-texto); }
.cx-vincular .ic { width: 14px; height: 14px; }
.cx-panel .cx-resultado.actual { opacity: 1; background: var(--sup-2); cursor: default; }
.cx-panel .cx-resultado.actual small { font-weight: 600; color: var(--tinta-2); }
.cx-panel .cx-seccion { padding-top: 18px; }
.cx-panel .cx-espera { color: var(--aviso-texto); }
.cx-seccion.en-espera .cx-resultado:not(.actual) { opacity: .5; cursor: default; }
.cx-seccion.en-espera .cx-vincular { visibility: hidden; }
.cx-panel .cx-botones .boton.primario { margin-left: auto; }

/* ═════ 3 · Recepción › Apertura y Cierre (lista de verificación en el mostrador) ═════ */
.vista-apertura { gap: 16px; }
.ap-cab { align-items: center !important; }
.ap-cab-titulo { display: grid; gap: 4px; min-width: 0; }
.ap-sub { font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.ap-cuenta { font-weight: 500; color: var(--tinta-2); }
.ap-cuenta.todo { color: var(--ok-texto); }
.ap-estado { color: var(--tinta-3); }
.ap-estado.hecho { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; color: var(--ok-texto); vertical-align: bottom; }
.ap-estado .ic { width: 15px; height: 15px; }
/* Arriba a la derecha, lo primero que se hace: quién abre (o cierra) y el botón de registrar */
.ap-registro { display: flex; align-items: center; gap: 8px; flex: none; margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--linea); }
.ap-quien { display: flex; align-items: center; gap: 8px; }
.ap-quien > span { font: 600 var(--t-m)/1 var(--f-ui); color: var(--tinta-2); white-space: nowrap; }
.ap-quien .ap-input { width: 168px; --alto-control: 36px; font: 400 var(--t-l)/1.3 var(--f-ui); color: var(--tinta); }
.ap-cab-titulo { flex: none; }
.ap-sub { white-space: nowrap; }

.ap-cuerpo {
  flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); gap: 20px;
  align-items: start; padding: 0 2px 8px 0;
}
.ap-col { display: grid; gap: 12px; align-content: start; min-width: 0; }

/* puestos: tarjetas neutras del mismo alto por fila (sin huecos); verdes al completarse */
.ap-puestos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.ap-puesto {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px 8px 14px; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l);
  box-shadow: var(--s-1); transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.ap-puesto header { display: flex; align-items: center; gap: 8px; min-height: 28px; }
.ap-puesto header b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta); }
.ap-n { flex: none; font: 500 var(--t-s)/1 var(--f-ui); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
/* «Todo listo»: un atajo quieto que aparece al pasar por la tarjeta; «Listo» queda a la vista en verde */
.ap-listo {
  flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 0; border-radius: var(--r-s);
  background: transparent; cursor: pointer; font: 600 var(--t-s)/1 var(--f-ui); color: var(--acento-texto);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.ap-listo .ic { width: 14px; height: 14px; }
@media (hover: hover) {
  .ap-listo[aria-pressed="false"] { opacity: 0; }
  :is(.ap-puesto:hover, .ap-puesto:focus-within) .ap-listo { opacity: 1; }
}
:where(html:not(.puntero-quieto)) .ap-listo:hover { background: var(--acento-suave); }
.ap-listo[aria-pressed="true"] { color: var(--ok-texto); }
:where(html:not(.puntero-quieto)) .ap-listo[aria-pressed="true"]:hover { background: var(--ok-fondo); }
.ap-puesto.listo { border-color: color-mix(in srgb, var(--ok) 40%, #fff); background: color-mix(in srgb, var(--ok-fondo) 50%, #fff); }
.ap-puesto.listo .ap-n { color: var(--ok-texto); }

/* casillas: las mismas en los puestos y en el Local (18 px, filas de 32 px) */
.ap-puesto ul, .ap-casillas { display: grid; }
:is(.ap-puesto li label, .ap-casilla) {
  display: flex; align-items: center; gap: 10px; min-height: 32px; cursor: pointer;
  font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta);
}
:is(.ap-puesto li, .ap-casillas li) input { flex: none; width: 18px; height: 18px; }
:is(.ap-puesto li, .ap-casillas li) input:checked + span { color: var(--tinta-2); }

/* columna derecha: lo de todo el local */
.ap-bloque { display: grid; gap: 4px; min-width: 0; padding: 12px 16px 14px; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1); }
.ap-titulo { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; font: 600 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta); }
.ap-cuenta-fotos { margin-left: auto; font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.ap-fotos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 8px; }
.ap-foto { display: grid; gap: 4px; min-width: 0; }
.ap-foto-btn {
  position: relative; display: grid; place-items: center; aspect-ratio: 16 / 11; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px dashed var(--linea-2); border-radius: var(--r-m); background: var(--sup-2); color: var(--tinta-4);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ap-foto-btn .ic { width: 18px; height: 18px; }
.ap-foto-btn img { width: 100%; height: 100%; object-fit: cover; }
:where(html:not(.puntero-quieto)) .ap-foto-btn:hover:not(:disabled) { border-color: var(--acento); color: var(--acento-texto); }
.ap-foto-btn:disabled { cursor: default; opacity: .6; }
.ap-foto.subida .ap-foto-btn { border-style: solid; border-color: var(--linea); }
.ap-foto.por-subir .ap-foto-btn { border-style: solid; border-color: var(--acento); }
.ap-badge {
  position: absolute; right: 4px; bottom: 4px; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--r-pildora);
  font: 600 var(--t-xs)/1 var(--f-ui); color: var(--acento-texto); background: var(--acento-suave);
}
.ap-badge.ok { width: 18px; padding: 0; justify-content: center; color: #fff; background: var(--ok); }
.ap-badge .ic { width: 12px; height: 12px; }
.ap-foto-nombre { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 0; font: 500 var(--t-xs)/var(--lh-xs) var(--f-ui); color: var(--tinta-3); white-space: nowrap; }
.ap-quitar { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: var(--tinta-3); cursor: pointer; }
:where(html:not(.puntero-quieto)) .ap-quitar:hover { background: var(--sup-3); color: var(--tinta); }
.ap-quitar .ic { width: 12px; height: 12px; }
.ap-input { width: 100%; min-width: 0; }
textarea.ap-novedades { min-height: 64px; }
/* Cierre: lo que dejó anotado la apertura de la mañana; sin apertura registrada, un aviso ámbar suave */
.ap-manana { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: baseline; padding-block: 10px 12px; }
.ap-manana .ap-titulo { margin: 0; }
.ap-manana-nota { grid-column: 1 / -1; }
.ap-manana-quien { font: 500 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); }
.ap-manana-nota { margin-top: 2px; padding-left: 10px; border-left: 2px solid var(--linea-2); font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.ap-manana.sin-apertura { display: block; background: var(--aviso-fondo); border-color: color-mix(in srgb, var(--aviso) 35%, #fff); box-shadow: none; }
.ap-manana.sin-apertura .ap-titulo { align-items: center; font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--aviso-texto); }
.ap-manana.sin-apertura .ap-titulo .ic { width: 16px; height: 16px; }

@media (max-width: 1240px) {
  .ap-cuerpo { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 16px; }
  .ap-puestos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ap-fotos { gap: 6px; }
  .ap-quien .ap-input { width: 132px; }
}

/* ═════ 4 · Recepción › Asistencias (el marco; la rejilla es del área horario) ═════ */
/* Sin lo técnico ni las instrucciones en la leyenda (el título de cada ficha ya lo dice). */
.vista-horario.recepcion :is(.horario-datos, .hsd-items, .ley-nota) { display: none; }
/* (15 oct B y 17 oct: el presente de Recepción es azul; lo manda la sección «15 oct B · zona B», al final) */
.vista-horario.recepcion .rejilla .bl-alumno.presente { background: var(--sup); border-color: color-mix(in srgb, var(--ok) 30%, #fff); }
:where(html:not(.puntero-quieto)) .vista-horario.recepcion .rejilla .bl-alumno.presente.marcable:hover { background: var(--sup-2); }
.vista-horario.recepcion .ley-ficha.presente { background: var(--sup); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 55%, #fff); }
/* Ausentes (manda sobre el borde de horario.css): sin motivo = ámbar con un punto · no contestó = ámbar punteado · con
   motivo = gris. Lo que necesita una llamada es ámbar; el rojo queda para lo vencido. */
.vista-horario.recepcion .rejilla .bl-alumno.ausente.motivo-falta { border-color: var(--aviso); box-shadow: inset 0 0 0 1px var(--aviso); }
.vista-horario.recepcion .rejilla .bl-alumno.ausente.motivo-nc { border-color: var(--aviso); border-style: dashed; box-shadow: none; }
.vista-horario.recepcion .rejilla .bl-alumno.ausente.motivo-ok { border-color: var(--linea-2); box-shadow: none; }
.vista-horario.recepcion .ley-ficha.ausente.motivo-falta { box-shadow: inset 0 0 0 1.5px var(--aviso); outline: 0; }
.vista-horario.recepcion .ley-ficha.ausente.motivo-nc { box-shadow: none; outline: 1.5px dashed var(--aviso); outline-offset: -1.5px; }
.vista-horario.recepcion .ley-ficha.ausente.motivo-ok { box-shadow: inset 0 0 0 1px var(--linea-2); outline: 0; }
.vista-horario.recepcion .marca-motivo, .marca-motivo { display: inline-block; flex: none; width: 7px; height: 7px; margin-left: 2px; border-radius: 50%; background: var(--aviso); font-size: 0; }
/* Franjas sin clase: espacio neutro con una línea fina, no bloques grises; cada clase mide lo que su lista. */
.vista-horario.recepcion .rejilla .rj-celda.nohay { background: transparent; box-shadow: inset 0 1px 0 var(--linea); border-radius: 0; }
.vista-horario.recepcion .rejilla .rj-celda > .bloque { flex: 0 0 auto; }
/* Fusión ronda 2 (Dirección, a pedido de Coordinación): sin «nombres en una línea con puntos suspensivos». Con esa regla la
   semana dejaba de caber lado a lado y el horario se apilaba (prueba de horario «Recepción llena el ancho y el alto»); el
   acomodo de horario.js ya parte los nombres solo entre palabras, nunca dentro de una. */

/* ═════ 5 · Recepción › Pendientes de llamadas (lista calmada a todo el ancho) ═════ */
.vista-llamadas { gap: 16px; }
.rl-cuerpo { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 0 2px 8px 0; }
.rl-lista { --rl-cols: minmax(240px, 1.5fr) minmax(160px, 1fr) 160px 140px 92px; flex: none; width: 100%; background: var(--sup); border: 1px solid var(--linea); border-radius: var(--r-l); box-shadow: var(--s-1); }
.rl-lista.sin-estado { --rl-cols: minmax(240px, 1.5fr) minmax(160px, 1fr) 180px 92px; }
.rl-dia h3 {
  position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px;
  background: var(--sup-2); border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  font: 600 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta);
}
.rl-dia:first-child h3 { border-top: 0; border-radius: var(--r-l) var(--r-l) 0 0; }
.rl-dia h3 .pd-n { margin-left: auto; font: 500 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.rl-fila {
  display: grid; grid-template-columns: var(--rl-cols); align-items: center; gap: 16px;
  width: 100%; min-height: 52px; padding: 6px 16px; border: 0; border-top: 1px solid var(--linea); background: transparent; cursor: pointer;
  text-align: left; font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta); transition: background-color var(--dur) var(--ease);
}
.rl-dia h3 + .rl-fila { border-top: 0; }
.rl-lista > .rl-dia:last-child .rl-fila:last-child { border-radius: 0 0 var(--r-l) var(--r-l); }
:where(html:not(.puntero-quieto)) .rl-fila:hover, .rl-fila:focus-visible, .rl-fila[aria-expanded="true"] { background: var(--sup-2); outline: none; }
.rl-quien { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rl-quien .avatar { flex: none; }
.rl-quien-texto { display: grid; min-width: 0; }
.rl-quien-texto b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.rl-quien-texto small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.rl-acu { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tinta-2); }
.rl-tel { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.rl-tel.sin { font-weight: 400; color: var(--tinta-3); }
.rl-motivo { min-width: 0; white-space: nowrap; color: var(--tinta-3); }
/* «Anotar» quieto (gris) hasta pasar por la fila: once enlaces azules en columna dominaban la pantalla */
.rl-ir { justify-self: end; display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--tinta-3); transition: color var(--dur) var(--ease); }
:is(.rl-fila:hover, .rl-fila:focus-visible, .rl-fila:has(.rl-ir[aria-expanded="true"])) .rl-ir { color: var(--acento-texto); }
.rl-fila:has(.rl-ir[aria-expanded="true"]) { background: var(--sup-2); }
.rl-ir .ic { width: 14px; height: 14px; }
/* Pocas llamadas: filas más altas y letra un punto más grande */
.rl-lista.amplia .rl-fila { min-height: 64px; font-size: var(--t-l); line-height: var(--lh-l); }
.rl-lista.amplia .rl-quien-texto small { font-size: var(--t-m); }
@media (max-width: 1240px) {
  .rl-lista { --rl-cols: minmax(200px, 1.4fr) minmax(130px, 1fr) 136px 120px 80px; }
  .rl-lista.sin-estado { --rl-cols: minmax(200px, 1.4fr) minmax(130px, 1fr) 150px 80px; }
  .rl-fila { gap: 12px; }
}

/* ═════ 6 · Popover de contacto de la ausencia (solo el de Recepción; Admisiones tiene el suyo) ═════ */
.popover.popover-contacto:has(.contacto-ausencia) { width: 340px; max-width: calc(100vw - 24px); padding: 16px; }
.contacto-ausencia { display: grid; gap: 12px; min-width: 0; }
.contacto-ausencia .ca-cab { display: flex; align-items: center; gap: 12px; width: auto; min-height: 0; padding: 0; cursor: default; }
.contacto-ausencia .ca-quien { display: grid; min-width: 0; }
.contacto-ausencia .ca-quien b { font: 600 var(--t-xl)/var(--lh-xl) var(--f-ui); color: var(--tinta); }
.contacto-ausencia .ca-sub { font: 400 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.contacto-ausencia .ca-estado { justify-self: start; margin: 0; border: 0; }
.contacto-ausencia .ca-estado.naranja { color: var(--aviso-texto); background: var(--aviso-fondo); }
.contacto-ausencia .ca-estado.ok { color: var(--ok-texto); background: var(--ok-fondo); }
/* 17 oct · asistencias: el estado y, a su derecha, cambiarlo («Marcar ausente/presente» y «⋯»; contacto-ausencia.js) */
.contacto-ausencia .ca-asis { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.contacto-ausencia .ca-asis .ca-estado { margin-right: auto; }
.contacto-ausencia .ca-asis-botones { display: inline-flex; gap: 6px; flex: none; }
.contacto-ausencia .ca-mas { min-width: 32px; padding: 0 8px; font-weight: 700; letter-spacing: .05em; }
.ca-llamada { display: grid; gap: 2px; min-width: 0; padding: 12px; border-radius: var(--r-m); background: var(--sup-2); }
.contacto-ausencia .ca-rotulo { display: block; font: 600 var(--t-s)/var(--lh-s) var(--f-ui); color: var(--tinta-3); }
.ca-acudiente { font: 600 var(--t-l)/var(--lh-l) var(--f-ui); color: var(--tinta); overflow-wrap: anywhere; }
.contacto-ausencia .ca-tel { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.ca-telefono {
  flex: 1; min-width: 0; font: 600 var(--t-2xl)/var(--lh-2xl) var(--f-ui); letter-spacing: .01em; color: var(--tinta);
  font-variant-numeric: tabular-nums; user-select: all; -webkit-user-select: all; cursor: text;
}
.ca-tel-botones { display: flex; gap: 6px; flex: none; }
.ca-motivo { display: grid; gap: 6px; min-width: 0; }
.ca-entrada { width: 100%; min-width: 0; }
.ca-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.ca-acciones .nc { margin-right: auto; }
.ca-acciones .nc .ic { width: 15px; height: 15px; }

/* ═════ 7 · iPhone (≤ 760 px) ═════ */
@media (max-width: 760px) {
  /* Pendientes: el encabezado se acomoda en líneas; la tabla se desplaza dentro de su tarjeta con el nombre fijo. */
  .vista-pendientes .adm-cab { flex-wrap: wrap; row-gap: 8px; }
  .vista-pendientes .adm-cab .espacio { display: none; }
  .vista-pendientes .adm-buscador { width: 100%; order: 9; }
  .pd-leyenda { display: none; } /* en el iPhone cada pendiente va con su palabra: la leyenda sobra */
  .pdc-ayuda { display: none; }
  .pdc-lista { --pdc-cols: minmax(0, 1fr) minmax(0, 1fr); }
  .pdc-titulos { display: none; }
  .pdc-fila { gap: 2px 12px; padding: 8px 12px; }
  .pdc-fila .pdc-alumno { grid-column: 1 / -1; }
  .pdc-ir { display: none; }
  .pd-hoja { overflow-x: auto; }
  .pd-hoja .pdh-fila > :first-child { position: sticky; left: 0; z-index: 1; background: var(--sup); }
  .pdh-encabezado .pdh-fila > :first-child { background: var(--sup-2); }
  .pd-hoja .pdh-nombre .pd-estado { display: none; }
  .pdd-bloque.sin-franjas .pdd-lista { columns: 2; }
  .pd-franjas { grid-template-columns: minmax(0, 1fr); }
  .pd-franja { grid-column: 1 / -1; }
  .pd-grupo.larga .pdg-lista { columns: 2; }
  .pdg-fila { min-height: 44px; }
  .f-saldo .pd-grupo { grid-template-columns: minmax(0, 1fr); }
  .f-saldo .pd-grupo h3 { border-right: 0; }

  /* Paneles: a pantalla completa; los archivos debajo de su fila. */
  .velo.velo-lateral:is(.velo-editor-pend, .velo-dispo, .cx-velo) { padding: 0; }
  .panel.pd-panel { width: 100%; height: 100%; border-radius: 0; border: 0; }
  .ep-item.adjunto, .ep-item.vinculo { flex-wrap: wrap; }
  .ep-adjuntos { order: 5; flex: 1 1 100%; max-width: 100%; justify-content: flex-start; }
  .panel.pd-panel > .dgr-pie { padding-left: 16px; }
  .cx-panel .cx-par { grid-template-columns: minmax(0, 1fr); gap: 2px; }

  /* Apertura y cierre: una columna, casillas de 44 px; quién abre y el botón, a lo ancho. */
  .ap-cab { flex-wrap: wrap; }
  .ap-cab-titulo { flex: 1 1 100%; }
  .ap-sub { white-space: normal; }
  .ap-cab .espacio { display: none; }
  .ap-cab .ap-tipo { width: 100%; }
  .ap-cab .ap-tipo button { flex: 1; height: 40px; }
  .ap-registro { width: 100%; margin: 0; padding: 0; border: 0; flex-wrap: wrap; }
  .ap-quien { flex: 1 1 100%; }
  .ap-quien .ap-input { flex: 1; width: auto; }
  .ap-registro .boton { flex: 1; height: 44px; }
  .ap-cuerpo { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ap-puestos { grid-template-columns: minmax(0, 1fr); }
  :is(.ap-puesto li label, .ap-casilla) { min-height: 44px; font-size: var(--t-l); }
  :is(.ap-puesto li, .ap-casillas li) input { width: 22px; height: 22px; }
  .ap-listo { height: 36px; padding: 0 12px; font-size: var(--t-m); opacity: 1 !important; }
  .ap-fotos { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }

  /* Llamadas: dos líneas por fila (alumno y teléfono; acudiente y estado). */
  .vista-llamadas .adm-cab { flex-wrap: wrap; row-gap: 8px; }
  .vista-llamadas .adm-cab .adm-total { order: 9; width: 100%; }
  .rl-fila {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "quien tel" "acu motivo"; gap: 2px 12px; min-height: 64px; padding: 10px 12px;
  }
  .rl-quien { grid-area: quien; }
  .rl-tel { grid-area: tel; }
  .rl-acu { grid-area: acu; padding-left: 38px; font-size: var(--t-s); }
  .rl-motivo { grid-area: motivo; justify-self: end; font-size: var(--t-s); }
  .rl-ir { display: none; }

  /* Contacto: hoja a lo ancho, dentro de la pantalla. */
  .popover.popover-contacto:has(.contacto-ausencia) { left: 12px !important; right: 12px; width: auto; }
  .ca-telefono { flex-basis: 100%; }
  .ca-tel-botones { flex: 1; }
  .ca-tel-botones .boton { flex: 1; height: 40px; }
  .ca-entrada { --alto-control: 44px; }
  .ca-acciones .boton { flex: 1 1 auto; height: 44px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════════════════════════════════
   15 oct B · zona B · Recepción › Asistencias (docs/RONDA-15OCT-B.md): «para recepción… pon asistencias en azul…
   ausencia en gris… y en rojo los que no tengan motivo». Solo en Recepción (.vista-horario.recepcion y el popover de
   contacto). 17 oct · asistencias · colores: el azul y el gris son ahora los de toda la app (--presente-* / --ausente-*,
   base.css y selah.css), más fuertes; el profesor, Supervisión y Administración los usan también (horario.css §17 oct).
   · presente = tinte y borde azules, ✓ azul (también «presente en otra clase», con el borde punteado de siempre)
   · ausente con motivo = gris, con la palabra «ausente» en gris
   · ausente sin motivo = rojo: tinte, borde de 2 px y la palabra «ausente» en una píldora roja (hay que llamar)
   · «No Contestó» (sin respuesta) = ámbar punteado, como antes: hay que volver a llamar
   Selah repite estas reglas con sus tokens en selah-otros.css (misma sección).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════ */
.vista-horario.recepcion .rejilla .bl-alumno.presente { background: var(--presente-tinte); border-color: var(--presente-borde); }
:where(html:not(.puntero-quieto)) .vista-horario.recepcion .rejilla .bl-alumno.presente.marcable:hover { background: color-mix(in srgb, var(--presente) 30%, #fff); }
.vista-horario.recepcion .rejilla .bl-alumno.presente::after { border-color: var(--presente-texto); }
.vista-horario.recepcion .rejilla .bl-alumno.presente.otro { border-color: var(--presente); }
/* la palabra «ausente» en todos los ausentes, del color de su motivo */
.vista-horario.recepcion .rejilla .bl-alumno.ausente .bl-falta { display: inline-block; }
.vista-horario.recepcion .rejilla .bl-alumno.ausente.motivo-ok { background: var(--ausente-tinte); border-color: var(--ausente-borde); box-shadow: none; color: var(--tinta); }
.vista-horario.recepcion .rejilla .bl-alumno.ausente.motivo-ok .bl-falta { background: var(--sup); color: var(--ausente-texto); box-shadow: inset 0 0 0 1px var(--ausente-borde); }
.vista-horario.recepcion .rejilla .bl-alumno.ausente.motivo-falta { background: var(--peligro-fondo); border-color: var(--peligro); box-shadow: inset 0 0 0 1px var(--peligro); }
.vista-horario.recepcion .rejilla .bl-alumno.ausente.motivo-falta .bl-falta { background: var(--peligro); color: #fff; }
.vista-horario.recepcion .rejilla .bl-alumno.ausente.motivo-falta .avatar { opacity: 1; }
.vista-horario.recepcion .rejilla .bl-alumno.ausente.motivo-nc { background: var(--aviso-fondo); }
.vista-horario.recepcion .rejilla .bl-alumno.ausente.motivo-nc .bl-falta { background: var(--sup); color: var(--aviso-texto); }
/* el punto de «sin motivo» sobra: la píldora roja «ausente» ya lo dice (el title de la ficha sigue diciendo «sin motivo») */
.vista-horario.recepcion .rejilla .marca-motivo { display: none; }
/* leyenda: las mismas muestras */
.vista-horario.recepcion .ley-ficha.presente { width: 14px; height: 10px; margin: 0; border: 0; border-radius: 3px; transform: none; background: var(--presente-tinte); box-shadow: inset 0 0 0 1px var(--presente-borde); }
.vista-horario.recepcion .ley-ficha.ausente.motivo-ok { background: var(--ausente-tinte); box-shadow: inset 0 0 0 1px var(--ausente-borde); }
.vista-horario.recepcion .ley-ficha.ausente.motivo-falta { background: var(--peligro-fondo); box-shadow: inset 0 0 0 2px var(--peligro); }
.vista-horario.recepcion .ley-ficha.ausente.motivo-nc { background: var(--aviso-fondo); }
/* popover de contacto (solo Recepción): el estado con el mismo color (contacto-ausencia.js · tono azul, rojo, naranja, gris) */
.contacto-ausencia .ca-estado.azul { color: var(--presente-texto); background: var(--presente-tinte); }
.contacto-ausencia .ca-estado.rojo { color: #fff; background: var(--peligro); }
.contacto-ausencia .ca-estado.neutro { color: var(--ausente-texto); background: var(--ausente-tinte); }
/* sin teléfono: una frase gris en letra normal, no la cifra grande del número */
.contacto-ausencia .ca-telefono.sin { font: 400 var(--t-m)/var(--lh-m) var(--f-ui); color: var(--tinta-3); white-space: normal; }