/* Estética de Zlalom.
   Todo sale de zlalom.com: la tipografía Mukta, el azul marino y el coral de
   la marca, y las formas muy redondeadas —los botones son píldoras— que le
   dan ese aire amable. La estructura es la de la plataforma de gestión
   anterior, para no obligar a reaprender nada. */

@font-face {
  font-family: Mukta; font-style: normal; font-weight: 300; font-display: swap;
  src: url(/publico/fuentes/mukta-300.woff2) format('woff2');
}
@font-face {
  font-family: Mukta; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/publico/fuentes/mukta-400.woff2) format('woff2');
}
@font-face {
  font-family: Mukta; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/publico/fuentes/mukta-600.woff2) format('woff2');
}
@font-face {
  font-family: Mukta; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/publico/fuentes/mukta-700.woff2) format('woff2');
}
/* Nunito 800 para los titulos grandes. Es la que usa la plataforma del equipo
   que Adrian monto con ChatGPT, y es lo que les da ese aire redondo que la
   Mukta en negrita no tiene. Se sirve desde aqui, no desde Google. */
@font-face {
  font-family: Nunito; font-style: normal; font-weight: 800; font-display: swap;
  src: url(/publico/fuentes/nunito-800.woff2) format('woff2');
}

:root {
  /* La instalación necesita sitio para el nombre, el aspa, el OK y el
     relleno de la celda. Los controles conservan su ancho al estrechar la
     pantalla; Grupo recibe el resto y sus nombres largos pueden partirse. */
  --recupera-ancho-grupo: calc(100% - var(--recupera-ancho-zona) - var(--recupera-ancho-instalacion) - var(--recupera-ancho-nivel) - var(--recupera-ancho-dias) - var(--recupera-ancho-profesor) - var(--recupera-ancho-mensaje) - var(--recupera-ancho-huecos));
  --recupera-ancho-zona: 150px;
  --recupera-ancho-instalacion: 312px;
  --recupera-ancho-nivel: 122px;
  --recupera-ancho-dias: 111px;
  --recupera-ancho-profesor: 176px;
  --recupera-ancho-mensaje: 55px;
  --recupera-ancho-huecos: 122px;
  /* Quedan 926 px de texto: cabe la confirmación con sus huecos de ejemplo
     y el recuadro cabe hacia la izquierda incluso con la tabla al mínimo. */
  --recupera-ancho-previa: 960px;
  /* Los papeles: las explicaciones de cada área se leen sin que la línea se
     alargue de punta a punta en un monitor grande. */
  --papeles-ancho: 1100px;
  /* Las zonas conservan su espacio; el tope de la pantalla mantiene
     cerca la dirección y el botón, incluso en un monitor ancho. */
  --buscador-ancho-nombre: 360px;
  --buscador-ancho-pantalla: 940px;
  --monitores-azul: #1d4f86;
  --monitores-fondo: #e8f1fb;
  --marino: #142d48;        /* el azul de la web */
  --coral: #eb5e50;         /* el coral de la web */
  --coral-oscuro: #d94e41;
  --coral-flojo: #fdeeec;

  --texto: #435469;         /* gris azulado del cuerpo de texto */
  --suave: #707b88;        /* el gris de los textos secundarios de la web */
  --coral-claro: #ef8176;   /* el coral suave de la web */
  --fondo: #f4f7fa;
  --papel: #ffffff;
  --borde: #e8edf3;
  --linea: #f2f5f9;
  --campo: #f3f6fa;
  --cabecera: #e9eef5;      /* banda de la cabecera de la tabla */
  --cebra: #f7f9fc;         /* filas pares */
  --verde: #25d366;
  --estado-bien: #15673d;
  --estado-bien-fondo: #e3f5ea;
  --estado-ojo: #8a5516;
  --estado-ojo-fondo: #fbeccf;
  /* El fondo naranja más intenso se separa del ámbar pálido y del coral
     de «lleno» también por luminosidad, al confundir rojo y verde.
     El texto tostado mantiene el contraste AA sobre ese fondo. */
  --estado-ultima: #783400;
  --estado-ultima-fondo: #ffb15c;
  /* El morado del apoyo en «Clases de hoy». Es el unico color que faltaba:
     verde, rojo, amarillo y azul ya estaban en la casa. */
  --morado: #5b3a93;
  --morado-fondo: #efe7fb;
  /* La raya que separa dos columnas. Mas marcada que --linea y que --borde a
     proposito: ahi ya hay una raya por fila, y la vertical tiene que poder
     mas que ella para que la vista baje por la columna y no por la fila. */
  --linea-columna: #c5ced9;
  /* El azulillo de la fila elegida. Lo pidio Adrian el 9 de noviembre de 2026:
     «cuando seleccione una fila, que se ponga de otro color; ahora que esta en
     blanco, como un azulillo por ejemplo». */
  /* Un azul más presente permite localizar selecciones al recorrer muchas
     filas; el paso del ratón refuerza esa señal sin parecer otro estado. */
  --fila-elegida: #cce0f7;
  --fila-elegida-encima: #bed6f2;
  /* Sobre el azul, la raya de columna de siempre se pierde; esta se ve. */
  --linea-columna-elegida: #8da7c4;
  /* La franja lateral de una seccion que no tiene color propio —un mes—: un
     gris firme, que con el de la banda no se veia sobre blanco. */
  --franja-seccion: #b8c4d2;
  /* Y la cabecera fija deja de ser azulada para no confundirse con las filas
     elegidas que pasan por debajo: gris neutro y una linea que la cierra. */
  --cabeza-fondo: #eef0f2;
  /* El rojo del titular que no fue, sobre su fondo coral flojo. El
     --coral-oscuro de la casa se queda en 3,6 a 1 de contraste y no llega al
     minimo; este da 4,9. Lo midio Codex el 9 de noviembre de 2026. */
  --coral-legible: #b83e34;
  --gris-boton: #6c757d;        /* el gris de los botones de la plataforma vieja */
  --gris-boton-oscuro: #5c636a;
  --enlace: #2f6fb0;            /* el azul de los nombres en el listado */
  --sombra: 0 1px 2px rgba(20, 45, 72, .04), 0 10px 30px rgba(20, 45, 72, .06);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 400 15px/1.55 Mukta, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------------- armazón */

.app { display: flex; min-height: 100vh; }

.lateral {
  width: 216px; flex: 0 0 216px;
  background: var(--papel);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
/* El logo lleva a la pagina maestra, asi que es un enlace y no un adorno. */
.marca { padding: 24px 22px 18px; display: block; }
.marca img { pointer-events: none; }
.marca img { width: 132px; height: auto; display: block; }

/* De que modulo es esta barra. Hace falta porque la barra ya no es la misma en
   todas partes: sin esto no sabes si estas en Escuela o en Equipo. */
.nombre-modulo {
  padding: 0 22px 14px; font-size: 11px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--suave);
}

.lateral nav { padding: 6px 12px; flex: 1; overflow-y: auto; }
.lateral nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; margin-bottom: 2px;
  color: var(--texto); text-decoration: none;
  font-size: 15px; font-weight: 400;
  border-radius: 50px;              /* píldora, como en la web */
}
.lateral nav a:hover { background: var(--fondo); color: var(--marino); }
.lateral nav a.activo { background: var(--coral-flojo); color: var(--coral); font-weight: 600; }
.icono { width: 16px; height: 16px; flex: 0 0 16px; }

.lateral-pie { padding: 16px 22px 20px; font-size: 14px; }
.lateral-pie .usuario { font-weight: 600; color: var(--marino); overflow: hidden; text-overflow: ellipsis; }
.lateral-pie .rol { color: var(--suave); font-size: 13px; margin-bottom: 8px; }
.lateral-pie a { color: var(--coral); text-decoration: none; font-size: 14px; }
/* Los papeles, en Mi cuenta: botones y no un desplegable, que son dos o tres. */
.cambiar-papel { margin-top: 18px; }
.cambiar-papel label { display: block; color: var(--suave); font-size: 14px; margin-bottom: 8px; }
.papeles { display: flex; gap: 8px; flex-wrap: wrap; }
.papeles .boton { min-height: 44px; }
.enlaces-cuenta { color: var(--borde); }

.columna { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.barra-superior {
  display: flex; justify-content: flex-end; align-items: center; gap: 11px;
  padding: 18px 30px 6px; font-size: 14px;
}
.barra-superior .correo { color: var(--suave); }
.avatar-usuario {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--marino); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
}

main { flex: 1; padding: 6px 30px 30px; min-width: 0; }
.pie { padding: 16px 30px 26px; color: var(--suave); font-size: 13px; }

.cabecera { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.cabecera h1 { font-size: 22px; margin: 0; font-weight: 600; color: var(--marino); }
.acciones { display: flex; gap: 8px; }

/* ---------------------------------------------------------------- piezas */

.tarjeta, .bloque {
  background: var(--papel);
  border-radius: 16px;              /* el redondeo de zlalom.com */
  box-shadow: var(--sombra);
}
.tarjeta { overflow: hidden; }
.bloque { padding: 28px 32px; margin-bottom: 20px; }

.apagado { color: var(--suave); }
.exito { color: #1a7f4b; background: #eaf7f0; padding: 10px 16px; border-radius: 12px; font-size: 14px; }
.error { color: var(--coral-oscuro); background: var(--coral-flojo); padding: 10px 16px; border-radius: 12px; font-size: 14px; }
.cargando { color: var(--suave); padding: 44px; text-align: center; }

/*
 * El `hidden` del navegador es un `display` de agente de usuario, o sea el
 * más flojo de todos: cualquier `display` escrito aquí se lo come y el
 * elemento se sigue viendo. Estaba parcheado ocho veces, una por cada sitio
 * donde se notó. Esto lo arregla en toda la casa.
 *
 * Lo encontró Adrián el 7 de noviembre de 2026 preguntando si a los monitores
 * les sale lo de activar los avisos: salía, pero con los tres botones a la
 * vez —«Activar», «Quitarlos» y «Mandarme uno de prueba»— porque los dos que
 * sobran se escondían con `hidden` y `hidden` no podía.
 */
[hidden] { display: none !important; }

.boton {
  display: inline-block;
  font: inherit; font-size: 15px; font-weight: 400;
  padding: 10px 22px;
  border: 1px solid var(--borde);
  border-radius: 50px;              /* pildora, como en zlalom.com */
  background: var(--papel);
  font-weight: 500;
  color: var(--marino);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.boton:hover { background: var(--fondo); border-color: #ccd6e0; color: var(--marino); }
.boton.primario { background: var(--coral); border-color: var(--coral); color: #fff; font-weight: 600; }
.boton.primario:hover { background: var(--coral-oscuro); border-color: var(--coral-oscuro); color: #fff; }
.boton.marino { background: var(--marino); border-color: var(--marino); color: #fff; }
.boton.marino:hover { background: #0e2136; color: #fff; }
.boton.claro { background: var(--papel); }

/* Se da estilo por exclusion y no por lista de tipos: un <input> sin atributo
   type se comporta como texto pero NO casa con input[type=text], y los campos
   de los tutores llevaban asi desde el principio, sin estilo y sin que se
   notara porque el borde era casi invisible. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
select, textarea {
  font: inherit; width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--papel);
  color: var(--texto);
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--coral);
  box-shadow: 0 0 0 3px var(--coral-flojo);
}
input:disabled, select:disabled, textarea:disabled { background: var(--campo); color: var(--suave); }
textarea { resize: vertical; border-radius: 14px; }

.etiqueta {
  display: inline-block; padding: 2px 12px; border-radius: 50px;
  font-size: 13px; background: var(--coral-flojo); color: var(--coral); font-weight: 600;
}
.etiqueta.gris { background: var(--fondo); color: var(--suave); }

/* --------------------------------------------------------------- listado */

.cabecera-tarjeta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 24px 28px 0; gap: 16px; flex-wrap: wrap;
}
.cabecera-tarjeta h1 { font-size: 21px; margin: 0; font-weight: 600; color: var(--marino); }

.barra-herramientas { padding: 18px 28px 0; }

/* Barra suave: píldoras claras con el texto en marino, no un bloque oscuro. */
.grupo-botones { display: inline-flex; flex-wrap: wrap; gap: 7px; }
.grupo-botones > button,
.grupo-botones > a,
.grupo-botones > select {
  font: inherit; font-size: 14px; font-weight: 400;
  padding: 8px 17px;
  border: 1px solid var(--borde); border-radius: 50px;
  background: var(--papel); color: var(--marino);
  cursor: pointer; text-decoration: none; white-space: nowrap; width: auto;
  transition: background .15s, border-color .15s;
}
.grupo-botones > *:hover {
  background: var(--fondo); border-color: #ccd6e0; color: var(--marino);
}
.grupo-botones > select {
  -webkit-appearance: none; appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath fill='%23142d48' d='M0 0l4.5 6L9 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.grupo-botones > select:focus { box-shadow: none; border-color: var(--gris-boton-oscuro); }

.linea-buscar {
  display: flex; justify-content: flex-end; align-items: center; gap: 10px;
  padding: 16px 28px 4px;
}
.linea-buscar label { font-size: 14px; color: var(--suave); }
/* La cadena de :not() repetida a proposito: la regla base de los input vale
   (0,5,1) y se come cualquier ".linea-buscar input", que vale (0,1,1). Sin
   esto el buscador ocupa la fila entera en vez de sus 260px. */
.linea-buscar input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]) { width: 260px; background: var(--papel); }
.linea-buscar input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]):focus { background: var(--papel); }

.tabla-envoltorio { overflow-x: auto; }
/* Reparto fijo de anchos. Con el reparto automatico, una columna con nombres
   de curso de 70 caracteres estiraba la tabla mas alla del contenedor y la
   ultima columna -- el icono de WhatsApp -- se salia por la derecha. Con el
   reparto fijo, los anchos que manda la cabecera se respetan y lo que sobra se
   corta con puntos suspensivos. */
.tabla { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 14px; }

/* La cabecera va sobre una banda propia, como en la plataforma anterior. */
.tabla thead tr { background: var(--cabecera); }
.tabla th {
  text-align: left; font-size: 13.5px; color: var(--marino); font-weight: 600;
  padding: 9px 14px; white-space: nowrap;
}

.tabla td {
  padding: 7px 14px;
  /* Cada fila, una linea. Con nombres de curso de 70 caracteres, dejar que el
     texto se parta convertia una fila en cuatro renglones y reducia a ocho los
     alumnos visibles en pantalla. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 1px;
}
.tabla td.num { text-align: left; width: 1%; }
.tabla tbody tr { cursor: pointer; }
/* Filas alternas: leer una lista de 9.828 nombres se hace mucho más fácil. */
.tabla tbody tr:nth-child(even) { background: var(--cebra); }
.tabla tbody tr:hover { background: var(--coral-flojo); }
.tabla a { color: var(--enlace); text-decoration: none; font-weight: 400; }
.tabla tbody tr:hover a { color: var(--enlace); text-decoration: underline; }

/* Los anchos concretos los manda la cabecera, columna a columna. */
/* El icono mide 18 px y las celdas llevan 14 de margen a cada lado: en 44 no
   cabia y se recortaba. Aqui el margen se reduce y la columna se fija. */
.col-wa { width: 56px; text-align: center; }
.tabla td.col-wa, .tabla th.col-wa { padding-left: 6px; padding-right: 10px; }

.persona { display: flex; align-items: center; gap: 9px; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px;
  background: var(--marino); color: #fff;
  display: grid; place-items: center; font-size: 10px; font-weight: 600;
  object-fit: cover;
}
/* Las columnas sin ancho declarado -- nombre y grupos -- se reparten lo que
   sobra, que es justo lo que interesa leer. */
.tabla td.grupos { color: var(--texto); }
.cursos li { color: var(--marino); }

.wa { border: 0; background: none; cursor: pointer; padding: 3px; display: inline-grid; place-items: center; }
.wa svg { width: 22px; height: 22px; fill: var(--verde); transition: transform .12s; }
.wa:hover svg { transform: scale(1.14); }

.tabla tfoot input {
  width: 100%; font-size: 13px; padding: 6px 12px;
  border: 1px solid var(--borde); border-radius: 50px; color: var(--texto);
  background: var(--campo);
}
.tabla tfoot td { padding: 12px 18px; border-bottom: 0; }
.tabla tfoot tr { background: var(--papel); }

.pie-tabla {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 28px 24px; gap: 12px; flex-wrap: wrap; font-size: 14px;
}
.paginas { display: flex; align-items: center; gap: 6px; }
.paginas button {
  font: inherit; font-size: 14px; border: 0; background: none;
  color: var(--suave); cursor: pointer; padding: 5px 12px; border-radius: 50px;
}
.paginas button:hover:not(:disabled) { color: var(--coral); background: var(--coral-flojo); }
.paginas button:disabled { opacity: .4; cursor: default; }
/* Botones pegados en una caja, como la paginacion de toda la vida. */
.paginas { gap: 0; border: 1px solid var(--borde); border-radius: 50px; overflow: hidden; }
.paginas button { border-radius: 0; padding: 7px 14px; border-right: 1px solid var(--borde); }
.paginas button:last-child { border-right: 0; }
.paginas button.actual {
  background: var(--marino); color: #fff; font-weight: 600;
}
.paginas button.actual:hover { background: var(--marino); color: #fff; }
.paginas .salto {
  color: var(--suave); padding: 7px 10px; font-size: 14px;
  border-right: 1px solid var(--borde);
}

/* --------------------------------------------------------------- diálogos */

.dialogo {
  border: 0; border-radius: 20px; padding: 26px 30px;
  max-width: 760px; width: 92vw; box-shadow: 0 30px 80px rgba(20, 45, 72, .22);
  color: var(--texto);
}
.dialogo.estrecho { max-width: 420px; }
.dialogo::backdrop { background: rgba(20, 45, 72, .32); }
.dialogo h3 { margin: 0 0 6px; font-size: 19px; color: var(--marino); font-weight: 600; }
.dialogo-pie { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; align-items: center; }
.dialogo-pie input { width: auto; flex: 1; min-width: 150px; }

.rejilla-columnas {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 7px 16px; margin-top: 14px; max-height: 45vh; overflow: auto;
}
.rejilla-columnas label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.rejilla-columnas input { width: auto; }

/* El globo del WhatsApp sale junto al icono, sin tapar el listado. */
.globo {
  position: absolute; z-index: 40;
  background: var(--papel); border: 1px solid var(--borde); border-radius: 14px;
  box-shadow: 0 10px 34px rgba(20, 45, 72, .14);
  padding: 7px; min-width: 200px; font-size: 14px;
}
.globo a {
  display: block; padding: 7px 12px; border-radius: 50px;
  color: var(--texto); text-decoration: none; white-space: nowrap;
}
.globo a:hover { background: #f1fcf5; color: var(--verde); }
.globo a b { font-weight: 600; color: var(--marino); }
.globo .vacio { padding: 7px 12px; color: var(--suave); }

/* ------------------------------------------------------- inicio por rol */

.bienvenida {
  background: var(--papel); border-radius: 20px; box-shadow: var(--sombra);
  padding: 44px 46px; max-width: 640px;
}
.bienvenida h1 { font-size: 30px; margin: 0 0 6px; color: var(--marino); font-weight: 600; }
.bienvenida p { margin: 0 0 10px; font-size: 16px; }
.fichas-enlaces { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.campo-dlg { display: block; font-size: 13px; color: var(--suave); margin-bottom: 14px; }
.campo-dlg input[type=text], .campo-dlg input[type=email], .campo-dlg input[type=password] { margin-top: 5px; color: var(--texto); }
.campo-dlg.casilla-linea { display: flex; align-items: center; gap: 9px; font-size: 15px; color: var(--texto); }
.campo-dlg.casilla-linea input { width: auto; }
.roles-check { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 7px; }
.roles-check label { display: flex; align-items: center; gap: 7px; font-size: 15px; color: var(--texto); }
.roles-check input { width: auto; }

/* ------------------------------------------------------------------ ficha */

.bloque.seccion { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: start; }
.seccion > h2 {
  margin: 0; font-size: 16px; font-weight: 600; color: var(--marino);
  display: flex; align-items: center; gap: 9px; padding-top: 5px;
}
.seccion > h2 .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); flex: 0 0 8px; }
.sub { font-weight: 600; margin: 4px 0 10px; color: var(--marino); font-size: 15px; }
.sub:not(:first-child) { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--linea); }

.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px 20px; }
.campos label { display: block; font-size: 13px; color: var(--suave); }
.campos label input, .campos label select, .campos label textarea { margin-top: 5px; color: var(--texto); }
.campos label.ancho { grid-column: 1 / -1; }

.aviso {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--marino); color: #fff; padding: 12px 24px; border-radius: 50px;
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; font-size: 14px;
  box-shadow: 0 10px 34px rgba(20, 45, 72, .28);
}
.aviso.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.aviso.mal { background: var(--coral); }

/* ------------------------------------------------------------------ login */

body.centrado { display: grid; place-items: center; min-height: 100vh; padding: 20px; background: var(--fondo); }
.login { padding: 40px 42px 34px; width: 100%; max-width: 360px; text-align: center; border-radius: 20px; }
.login .titulo { font-size: 21px; font-weight: 600; color: var(--marino); margin: 0 0 20px; }
.login img.logo { width: 200px; height: auto; margin: 0 auto 22px; display: block; }
.login input {
  background: var(--campo); border: 1px solid transparent;
  padding: 11px 16px; margin-bottom: 11px; text-align: left; border-radius: 50px;
}
.login input:focus { background: var(--papel); border-color: var(--coral); }
.login .boton { width: 100%; padding: 11px; margin-top: 4px; font-size: 16px; }
.login .pie-enlace { display: block; margin-top: 20px; color: var(--coral); font-size: 14px; text-decoration: none; }
.login .pie-enlace:hover { text-decoration: underline; }
.login .error { margin-bottom: 14px; text-align: left; }
/* La explicación de «se me ha olvidado la clave»: tres líneas de por qué se
   pide el correo, que si no parece que vaya a llegar un enlace mágico. */
.login .texto-login {
  margin: -6px 0 18px; color: var(--suave); font-size: 14px; line-height: 1.5; text-align: left;
}

@media (max-width: 820px) {
  /*
   * En el movil la barra lateral se estira y se convierte en lo de arriba. El
   * orden es logo, quien eres, apartados y contenido —lo propuso Codex— y
   * cada cosa queda delimitada de la de al lado: antes eran cinco cosas
   * sueltas una encima de otra y no se sabia donde acababa una.
   */
  .app { flex-direction: column; }
  .lateral {
    width: auto; flex: none; height: auto; position: static;
    display: flex; flex-direction: column; background: none;
  }
  .marca { padding: 14px 18px 10px; order: 0; background: var(--papel); }
  .lateral:not(:has(.nombre-modulo)) .marca { border-radius: 0 0 16px 16px; }

  /* Quien eres, en su tarjeta: delimitada y separada del logo y de abajo. */
  .lateral-pie {
    order: 2; margin: 12px 14px; padding: 14px 16px;
    background: var(--papel); border: 1px solid var(--linea); border-radius: 14px;
    display: flex; flex-direction: column; gap: 2px; align-items: stretch;
  }
  .lateral-pie .usuario { font-size: 16px; }
  .lateral-pie .rol { margin: 0; }
  .lateral-pie .rol { font-size: 14px; }
  .enlaces-cuenta { font-size: 13px; }
  .enlaces-cuenta a { font-size: 13px; }

  /*
   * Los apartados se quedan pegados arriba al bajar; el logo y la tarjeta se
   * van. Asi la navegacion no le quita sitio a la lista, que es a lo que se
   * viene.
   */
  .lateral nav {
    order: 3; display: flex; gap: 6px; overflow-x: auto; padding: 8px 14px;
    position: sticky; top: 0; z-index: 30;
    background: var(--fondo); border-bottom: 1px solid var(--linea);
  }
  .lateral nav a { white-space: nowrap; min-height: 44px; }
  /* El activo, con borde ademas del color: el color solo no basta al sol. */
  .lateral nav a.activo { border: 1px solid var(--coral); }
  /*
   * Nada de order en main: no es hijo de .app sino de .columna, y ahi lo unico
   * que consigue es ponerse detras del pie de pagina. El contenido ya va
   * despues de la barra porque .columna va despues.
   */
  main { padding: 6px 14px 20px; }
  /* El nombre del modulo, pegado al logo: sin orden se colaba delante de todo. */
  .nombre-modulo { order: 1; background: var(--papel); padding: 0 18px 12px;
    margin-top: -10px; border-radius: 0 0 16px 16px; }
  /* La tira de apartados no necesita ensenar su barra de desplazamiento. */
  .lateral nav::-webkit-scrollbar { display: none; }
  .lateral nav { scrollbar-width: none; }
  /* El email y el avatar no le dicen nada a quien ya sabe quien es. */
  .barra-superior { display: none; }
  .bloque.seccion { grid-template-columns: 1fr; gap: 14px; }
  .cabecera-tarjeta, .barra-herramientas, .linea-buscar, .pie-tabla { padding-left: 18px; padding-right: 18px; }
}

@media print {
  .lateral, .barra-superior, .barra-herramientas, .linea-buscar, .pie-tabla, .acciones, .col-wa { display: none !important; }
  .tarjeta, .bloque { box-shadow: none; }
  body { background: #fff; }
}

/* --------------------------------------------------------------- IBAN */

input.iban { font-variant-numeric: tabular-nums; letter-spacing: .4px; }
input.iban.mal { border-color: var(--coral); background: var(--coral-flojo); }
.aviso-iban { display: block; margin-top: 5px; font-size: 13px; color: var(--coral-oscuro); }

/* ------------------------------------------------ listas de la ficha */

.explicacion {
  margin: 0 0 16px; max-width: 62ch;
  color: var(--texto); font-size: 14px; line-height: 1.55;
}
.pregunta { display: block; max-width: 420px; margin-bottom: 18px; font-size: 14px; color: var(--suave); }
.pregunta select { margin-top: 5px; }

.lista { border-top: 1px solid var(--linea); padding-top: 16px; }
.lista[hidden] { display: none; }
.fila-lista {
  display: grid; gap: 12px; align-items: end; margin-bottom: 12px;
  grid-template-columns: 1fr 1.4fr 1fr auto;
}
.fila-lista label { display: block; font-size: 13px; color: var(--suave); }
.fila-lista input, .fila-lista select { margin-top: 4px; }
.lista-vacia { color: var(--suave); font-size: 14px; margin-bottom: 12px; }
.quitar {
  border: 1px solid var(--borde); background: var(--papel); color: var(--suave);
  width: 34px; height: 34px; border-radius: 4px; cursor: pointer; font-size: 17px; line-height: 1;
}
.quitar:hover { border-color: var(--coral); color: var(--coral); background: var(--coral-flojo); }
.boton.anadir { padding: 6px 14px; font-size: 14px; }

@media (max-width: 760px) {
  .fila-lista { grid-template-columns: 1fr; }
}

.fila-recogida { grid-template-columns: 1fr 1fr 1fr 1fr auto; }
.campos label.depende[hidden] { display: none; }
.campos label.depende { padding-left: 14px; border-left: 2px solid var(--borde); }

/* --------------------------------------- anchos de los campos de la ficha */

/* En la rejilla, el ancho lo da la columna que ocupa el campo: el control
   llena su celda. El ajuste al contenido solo tiene sentido donde no hay
   rejilla, que es en las secciones en columna (autorizaciones y protecciones). */
.campos > label { display: block; }
.campos > label > select,
.campos > label > input,
.campos > label > textarea { width: 100%; display: block; margin-top: 5px; }

.campos.en-columna select.corto { width: auto; min-width: 150px; max-width: 100%; display: inline-block; }
.campos.en-columna select.medio { width: auto; min-width: 290px; max-width: 100%; display: inline-block; }
.campos.en-columna > label > select { margin-top: 0; margin-left: 10px; }

/* Las autorizaciones van en vertical: la pregunta, y debajo sus opciones.
   En rejilla de tres columnas, una subopcion aparecia a la derecha de otra
   pregunta y no se veia de quien colgaba. */
.campos.en-columna { display: block; max-width: 620px; }
.campos.en-columna > label { display: block; margin-bottom: 16px; }
.campos.en-columna > label.depende {
  margin-left: 18px; margin-bottom: 10px;
  padding-left: 14px; border-left: 2px solid var(--borde);
}

/* ------------------------------------- quién puede recogerle */

.apuntadas { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 18px; }
.apuntadas:empty { display: none; }
.apuntadas-vacia { color: var(--suave); font-size: 14px; margin-bottom: 18px; }

.persona-apuntada {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 4px;
  padding: 7px 8px 7px 13px; font-size: 14px; color: var(--marino);
}
.persona-apuntada .parentesco { color: var(--suave); margin-left: 6px; font-size: 13px; }
.persona-apuntada .marca-no {
  background: var(--coral-flojo); color: var(--coral-oscuro);
  border-radius: 3px; padding: 2px 8px; font-size: 12px; font-weight: 600;
}
.persona-apuntada .quitar { width: 26px; height: 26px; font-size: 15px; }
/* Un parpadeo al añadir, para que se vea que ha entrado en la lista. */
.persona-apuntada.recien { animation: aparece .45s ease; }
@keyframes aparece {
  from { background: var(--coral-flojo); border-color: var(--coral); }
  to   { background: var(--fondo); border-color: var(--borde); }
}

.fila-recogida { grid-template-columns: 1fr 1fr 1fr 1fr auto auto; align-items: end; }
.fila-recogida .casilla-no {
  display: flex; align-items: center; gap: 7px; white-space: nowrap;
  padding-bottom: 9px; font-size: 13px; color: var(--suave);
}
.fila-recogida .casilla-no input { width: auto; margin: 0; }
.fila-recogida .anadir-persona { margin-bottom: 0; }
@media (max-width: 900px) { .fila-recogida { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------- rejilla de la ficha */

/* Seis columnas: cada campo declara cuantas ocupa, asi el orden y el tamano
   se deciden junto al campo y no adivinando en el CSS. */
/* Cada campo mide lo que mide su dato, no una fracción de la pantalla. Con
   columnas iguales, un código postal de 5 dígitos ocupaba lo mismo que un
   email de 33, y los datos quedaban lejos unos de otros y costaba leerlos. */
.campos { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px 16px; }
.campos > .fila-campos { display: contents; }
.campos > label, .fila-campos > label { max-width: 100%; }
.campos > label.ancho, .fila-campos > label.ancho { flex-basis: 100%; }

/* ------------------------------------------- la reticula de doce columnas

   Antes el ancho de cada caja salia de contar los caracteres de su dato, y
   quedaba una escalera de medidas distintas que se veia desordenada: el DNI
   ademas se encogia hasta cortar el numero. Ahora hay seis tamanos y doce
   columnas de 40px con 16px de separacion, asi que los campos de una fila
   caen a plomo con los de la de arriba.

   Los anchos son exteriores, con el relleno y el borde dentro. */
.campos.en-reticula {
  display: grid; grid-template-columns: minmax(0, 1fr);   /* una fila debajo de otra */
  gap: 20px; max-width: 656px;
  container-type: inline-size;
}
/* Estrecho: una columna, sin obligar a desplazar la ficha de lado. */
.campos.en-reticula .fila-campos {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px 16px; align-items: stretch;
}
/* El recuadro se pega abajo. Si una etiqueta se parte en dos lineas, los
   recuadros de esa fila siguen a la misma altura y no se reserva hueco de
   mas en las filas donde todas las etiquetas caben en una. */
.campos.en-reticula .fila-campos > label {
  min-width: 0; width: auto;
  display: flex; flex-direction: column; justify-content: flex-end;
}

@container (min-width: 656px) {
  .campos.en-reticula .fila-campos { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .fila-campos > .tam-xs { grid-column: span 2; }        /*  96px */
  .fila-campos > .tam-s { grid-column: span 3; }         /* 152px */
  .fila-campos > .tam-m { grid-column: span 4; }         /* 208px */
  .fila-campos > .tam-l { grid-column: span 5; }         /* 264px */
  .fila-campos > .tam-xl { grid-column: span 7; }        /* 376px */
  .fila-campos > .tam-xxl { grid-column: span 10; }      /* 544px */
  .fila-campos > .tam-completo { grid-column: 1 / -1; }  /* 656px */
}

/* La etiqueta reserva dos lineas siempre. Asi "Fecha de nacimiento" puede
   partirse sin que su recuadro baje respecto al de "Sexo", que es justo lo
   que descuadraba las filas. */
.campos .campo-titulo { display: block; line-height: 19px; }

/* Todos los controles de una fila miden lo mismo de alto. Si no, el campo de
   fecha (42px por el calendario nativo), el movil (47px) y la localidad (45px)
   caian cada uno a una altura y la fila se veia torcida. El hueco entre la
   etiqueta y el recuadro lo pone el `gap`, no el margen de cada control. */
.campos.en-reticula .fila-campos > label { gap: 5px; }
.campos.en-reticula .fila-campos > label > input,
.campos.en-reticula .fila-campos > label > select,
.campos.en-reticula .fila-campos > label > .combo,
.campos.en-reticula .fila-campos > label > .campo-tel,
.campos.en-reticula .fila-campos > label > .campo-wa { height: 40px; margin-top: 0; }
.campos.en-reticula .fila-campos > label > .combo > .combo-texto { height: 40px; margin-top: 0; }
.campos.en-reticula .fila-campos > label > .campo-tel > select,
.campos.en-reticula .fila-campos > label > .campo-tel > input { height: 38px; }
/* Un separador de altura cero fuerza el salto de línea: así se decide dónde
   corta cada fila en vez de dejarlo al azar del ancho de la ventana. En una
   pantalla estrecha deja de forzarlo y los campos se reparten solos. */


/* El movil del tutor lleva su icono de WhatsApp al lado, como en el listado:
   es desde donde mas se escribe a las familias. */
.campo-wa { display: flex; align-items: center; gap: 8px; }
.campo-wa input { flex: 1; min-width: 0; }
.wa-tutor {
  flex: 0 0 34px; height: 34px; display: grid; place-items: center;
  border-radius: 4px; color: var(--verde); text-decoration: none;
}
.wa-tutor svg { width: 19px; height: 19px; fill: currentColor; }
.wa-tutor:hover { background: #eafaf0; }
.wa-tutor[hidden] { display: none; }

/* ------------------------------------------------ lista cerrada */

.combo { position: relative; display: block; }
.combo.sin-elegir .combo-texto { border-color: var(--coral); background: var(--coral-flojo); }
.combo-opciones {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 3px);
  margin: 0; padding: 4px; list-style: none; max-height: 250px; overflow-y: auto;
  background: var(--papel); border: 1px solid #ced4da; border-radius: 4px;
  box-shadow: 0 6px 20px rgba(20, 45, 72, .12);
}
.combo-opciones li { padding: 7px 11px; border-radius: 3px; cursor: pointer; font-size: 14px; }
.combo-opciones li:hover, .combo-opciones li.marcada { background: var(--coral-flojo); color: var(--coral-oscuro); }
.combo-opciones li.vacio { color: var(--suave); cursor: default; }
.combo-opciones li.vacio:hover { background: none; color: var(--suave); }

/* ------------------------------------------- aire y ritmo, como en la web */

/* zlalom.com respira: titulares grandes, mucho blanco y poco borde. Una ficha
   con doce secciones se lee mucho mejor asi que apretada. */
.seccion h2 {
  font-size: 17px; font-weight: 700; color: var(--marino);
  letter-spacing: -.2px; margin: 0 0 4px;
}
.seccion .punto {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--coral); display: inline-block; margin-right: 10px;
}
.campos { gap: 18px 20px; }
.campos > label { font-size: 13px; color: var(--suave); letter-spacing: .1px; }

.cabecera h1 { letter-spacing: -.4px; }

/* El pie de las tarjetas del listado, sin esquinas duras contra la tarjeta. */
.tarjeta .tabla thead tr th:first-child { padding-left: 24px; }
.tarjeta .tabla tbody td:first-child { padding-left: 24px; }

/* Las filas de lista, en caja propia: se distinguen del resto del formulario
   sin necesidad de lineas separadoras. */
.fila-lista {
  background: var(--fondo); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; gap: 14px;
}
.lista { border-top: 0; padding-top: 4px; }
.explicacion { color: var(--texto); }
.pregunta { color: var(--marino); font-weight: 500; }

/* Los tutores no usan la rejilla de seis: son cuatro campos de tamaño
   parecido, y el móvil se lleva un poco más por el icono de WhatsApp. */
.sub { font-weight: 600; color: var(--marino); margin: 4px 0 14px; font-size: 14px; }

/* La salida para quien vive fuera va siempre al final y se separa del resto:
   no es un municipio más, es la excepción. */
.combo-opciones li.fuera {
  border-top: 1px solid var(--linea); margin-top: 4px; padding-top: 9px;
  color: var(--suave); font-style: italic;
}

/* El móvil va en dos piezas: el prefijo y el número. El prefijo sale con la
   bandera para reconocerlo de un vistazo y de salida viene España. */
.campo-tel, .campo-wa { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.campo-tel input, .campo-wa input { flex: 1; min-width: 0; }
/* Prefijo y numero van dentro de un mismo recuadro, separados por una linea,
   no en dos cajas redondeadas sueltas: eran dos cosas y es un solo telefono. */
.campo-tel, .campo-wa {
  gap: 0; border: 1px solid var(--borde); border-radius: 10px; background: var(--papel);
}
.campo-tel:focus-within, .campo-wa:focus-within {
  border-color: var(--coral); box-shadow: 0 0 0 3px var(--coral-flojo);
}
.campo-tel > select.prefijo, .campo-wa > select.prefijo {
  flex: 0 0 84px; width: 84px; margin-top: 0;
  padding: 9px 22px 9px 10px;
  border: 0; border-right: 1px solid var(--borde); border-radius: 9px 0 0 9px;
  background-color: transparent; background-position: right 7px center;
}
/* La regla general de los input de arriba lleva cinco :not(), asi que pesa
   mas que un simple `.campo-tel > input` y le devolvia su propio borde: se
   veian dos recuadros, el de fuera y el del numero dentro. Repito aqui los
   mismos :not() para que esta regla pese mas y gane. */
.campo-tel > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]),
.campo-wa > input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]) {
  flex: 1; min-width: 0; margin-top: 0;
  border: 0; border-radius: 0 9px 9px 0; background: transparent;
}
.campo-tel > input:focus, .campo-wa > input:focus,
.campo-tel > select:focus, .campo-wa > select:focus { box-shadow: none; }

/* Los desplegables de la ficha llevaban la flecha nativa, pegada al borde
   derecho y muy lejos del texto cuando el campo era ancho. Esta es la misma
   flecha que usa el resto de la plataforma, a una distancia fija. */
.campos select {
  -webkit-appearance: none; appearance: none;
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6'%3E%3Cpath fill='%23142d48' d='M0 0l4.5 6L9 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
}

/* El icono de WhatsApp va al lado del recuadro del movil, no dentro: dentro
   quedaba pegado al numero y parecia parte del campo. */
.movil-y-wa { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.movil-y-wa > .campo-wa { flex: 1; min-width: 0; margin-top: 0; }

/* El movil del tutor comparte caja con su icono de WhatsApp dentro del mismo
   ancho de reticula, para que la columna no se salga de la fila. */
.campos.en-reticula .fila-campos > label > .movil-y-wa { height: 40px; margin-top: 0; }
.movil-y-wa > .wa-tutor { flex: 0 0 auto; }

/* ---------------------- alergias, salud y lo que hay que tener en cuenta

   Mismo gesto que en "quien puede recogerle": se rellena, se pulsa Anadir y
   pasa a ser una tarjeta. Lo guardado se distingue de lo que se esta
   escribiendo, que con la linea editable siempre abierta no quedaba claro. */
.apuntadas { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.apuntadas:empty { display: none; }
.apuntadas-vacia { color: var(--suave); font-size: 14px; margin-bottom: 12px; }
.persona-apuntada .apunte {
  color: var(--suave); font-size: 13px;
  padding-left: 9px; border-left: 1px solid var(--borde);
}
.fila-apuntar { grid-template-columns: 1fr 1.2fr 1.4fr auto; align-items: end; }
.fila-apuntar .anadir-apunte { margin-bottom: 0; white-space: nowrap; }
@media (max-width: 900px) { .fila-apuntar { grid-template-columns: 1fr 1fr; } }

/* El aviso del IBAN colgaba debajo del campo y, como la etiqueta alinea su
   contenido abajo, empujaba el recuadro del IBAN hacia arriba: quedaba a
   distinta altura que el del banco, a su lado. Fuera del flujo no empuja. */
.campos.en-reticula .fila-campos > label { position: relative; }
.campos.en-reticula .fila-campos > label > .aviso-iban {
  position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px;
}

/* La pregunta que encabeza un grupo se lee como las de las listas de salud. */
.pregunta-grupo { margin: 0 0 14px; }

/* La cabecera de la ficha se queda arriba al bajar: en una ficha de doce
   secciones, si no, pierdes de vista de quien es y tienes que subir del todo
   para guardar. Se pega bajo la barra de usuario, que mide lo que mide. */
.cabecera-fija {
  position: sticky; top: 0; z-index: 30;
  margin: 0 -30px 18px; padding: 12px 30px;
  background: var(--fondo);
  border-bottom: 1px solid transparent;
}
/* La sombra solo aparece cuando de verdad hay algo pasando por debajo. */
.cabecera-fija.pegada {
  border-bottom-color: var(--linea);
  box-shadow: 0 6px 18px rgba(20, 45, 72, .06);
}
@media (max-width: 900px) { .cabecera-fija { margin: 0 -14px 14px; padding: 10px 14px; } }

/* ------------------------------------------------------------------ foto */

.foto-actual { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
.foto-grande {
  width: 150px; height: 190px; object-fit: cover;
  border-radius: 12px; border: 1px solid var(--borde); background: var(--fondo);
}
.foto-hueco {
  width: 150px; height: 190px; border-radius: 12px;
  border: 1px dashed var(--borde); background: var(--fondo);
  display: grid; place-items: center; color: var(--suave); font-size: 14px;
}
.foto-acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.foto-acciones .boton { cursor: pointer; }
.foto-acciones p { margin: 0; font-size: 13px; max-width: 34ch; }

/* El historico va plegado: es del club, se mira cuando hace falta y no tiene
   que competir con la foto que vale hoy. */
.foto-historico { margin-top: 22px; border-top: 1px solid var(--linea); padding-top: 16px; }
.foto-historico summary {
  cursor: pointer; font-size: 14px; color: var(--marino); font-weight: 500;
  list-style: none; display: inline-flex; align-items: center; gap: 7px;
}
.foto-historico summary::-webkit-details-marker { display: none; }
.foto-historico summary::before { content: '▸'; color: var(--coral); }
.foto-historico[open] summary::before { content: '▾'; }
.foto-tira { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.foto-tira figure { margin: 0; width: 110px; }
.foto-chica {
  width: 110px; height: 140px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--borde); background: var(--fondo);
}
.foto-tira figcaption { font-size: 12px; color: var(--suave); margin-top: 5px; line-height: 1.35; }

/* ----------------------------------------------------------- los grupos */

/* Los días de clase, como siete teclas: es lo que de verdad identifica un
   grupo junto con la hora, y en una lista de casillas no se ve de un vistazo. */
.dias-semana { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.dias-semana .dia {
  position: relative; width: 44px; height: 44px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 12px;
  background: var(--papel); color: var(--suave);
  font-weight: 600; font-size: 15px; user-select: none;
}
.dias-semana .dia input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.dias-semana .dia:hover { border-color: #ccd6e0; }
.dias-semana .dia.puesto {
  background: var(--coral); border-color: var(--coral); color: #fff;
}

/* Lo que el grupo pide al inscribirse. Cada línea es una decisión, así que se
   lee en vertical y con su explicación debajo. */
.bloques-piden { max-width: 620px; }
.campos.en-columna > label.pide, .bloques-piden .pide {
  display: flex; align-items: flex-start; gap: 11px; margin-bottom: 0;
  padding: 11px 0; border-bottom: 1px solid var(--linea);
  font-size: 14px; color: var(--texto); cursor: pointer;
}
.bloques-piden .pide:last-child { border-bottom: 0; }
.bloques-piden .pide > input { width: auto; margin: 2px 0 0; flex: 0 0 auto; }
.bloques-piden .pide strong { font-weight: 600; color: var(--marino); }
.bloques-piden .pide.siempre { opacity: .7; cursor: default; }

.enlace-inscripcion { margin-top: 22px; border-top: 1px solid var(--linea); padding-top: 16px; }
.linea-enlace { display: flex; gap: 9px; align-items: center; margin: 6px 0 8px; max-width: 620px; }
.linea-enlace input { background: var(--fondo); }
.linea-enlace .boton { white-space: nowrap; }

/* El nombre del grupo es lo unico que lo distingue de otro del mismo sitio y
   la misma hora, asi que aqui si se parte en dos lineas en vez de cortarse. */
.tabla td.nombre-grupo { white-space: normal; overflow: visible; line-height: 1.35; }
.tabla td.apretado, .tabla th.apretado { white-space: nowrap; }
.tabla td.numero, .tabla th.numero { text-align: right; white-space: nowrap; }

/* ------------------------------------------------- el buscador de grupos

   Es el panel de la plataforma vieja, y a proposito: Adrian lleva anos
   leyendolo de un vistazo. Casillas cuadradas de verdad, no pastillas —una
   casilla se ve marcada sin leer el texto—, cada apartado en su linea con el
   rotulo delante, y todo a la vista desde el principio. */

.buscador-grupos { padding: 18px 28px 4px; }

/* Los atajos: lo que mas se busca, a un clic. */
.atajos { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.atajo {
  display: inline-block; padding: 4px 13px; border-radius: 50px;
  border: 1px solid var(--borde); background: var(--papel);
  color: var(--enlace); font-size: 13.5px; text-decoration: none; white-space: nowrap;
}
.atajo:hover { border-color: var(--enlace); background: #f4f8fc; }
.atajo.puesto {
  background: var(--marino); border-color: var(--marino); color: #fff; font-weight: 500;
}
.atajo.puesto::before { content: '✓ '; }
.atajo.quitar { color: var(--suave); font-weight: 600; padding: 4px 11px; }
.atajo.quitar:hover { border-color: var(--coral); color: var(--coral); background: var(--coral-flojo); }

.apartados { display: flex; flex-direction: column; gap: 11px; }


.apartado { display: flex; align-items: baseline; gap: 10px; flex-wrap: nowrap; }
.apartado-titulo {
  font-size: 13.5px; font-weight: 600; color: var(--marino);
  white-space: nowrap; flex: 0 0 auto; padding-top: 1px;
}
.apartado-opciones { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }

.maestra { flex: 0 0 auto; display: flex; align-items: center; cursor: pointer; }
.maestra input { width: auto; margin: 0; accent-color: var(--enlace); }

.casilla { position: relative; cursor: pointer; }
.casilla input { position: absolute; opacity: 0; width: 0; height: 0; }
.casilla > span {
  display: inline-block; padding: 3px 11px; border-radius: 50px;
  border: 1px solid var(--borde); background: var(--papel);
  font-size: 13px; color: var(--texto); white-space: nowrap;
}
.casilla:hover > span { border-color: #ccd6e0; }
.casilla input:checked + span {
  background: var(--coral); border-color: var(--coral); color: #fff; font-weight: 500;
}
.casilla input:focus-visible + span { outline: 2px solid var(--coral); outline-offset: 2px; }

/* Las zonas llevan su color tambien sin marcar: se reconoce antes "el de
   Parque Venecia" por el morado que leyendo el nombre. */
.casilla.con-color > span {
  border-color: color-mix(in srgb, var(--color-chip) 45%, transparent);
  background: color-mix(in srgb, var(--color-chip) 12%, var(--papel));
  color: color-mix(in srgb, var(--color-chip) 78%, #000);
}
.casilla.con-color input:checked + span {
  background: var(--color-chip); border-color: var(--color-chip); color: #fff;
}

/* El apartado entero se apaga cuando no hay nada marcado en el: sigue estando,
   pero no distrae del que si se esta usando. */
/* El apartado que no se esta usando se queda atras, pero sin perder
   legibilidad: bajarle la opacidad dificultaba leer los nombres y reconocer
   los colores de las zonas, que es justo para lo que estan. */
.apartado.apagado .apartado-titulo { color: var(--suave); font-weight: 500; }

.linea-buscar {
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
  margin-top: 16px; padding: 14px 0 0; border-top: 1px solid var(--linea);
}
.buscador-grupos .linea-buscar input[type=search] { flex: 1; min-width: 220px; }
.quitar-filtros { color: var(--coral); font-size: 14px; text-decoration: none; white-space: nowrap; }
.quitar-filtros:hover { text-decoration: underline; }

/* La zona con su color en el listado: se reconoce antes por el color que
   leyendo el nombre. */
.etiqueta-zona {
  display: inline-block; padding: 2px 9px; border-radius: 4px;
  background: var(--color-chip); color: #fff; font-size: 12.5px; white-space: nowrap;
}

.punto-estado {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #2f9e5e; margin-right: 7px; flex: 0 0 8px;
}
.punto-estado.apagado-punto { background: var(--coral); }

/* ----------------------------------------------------------- los grupos */

/* Los días de clase, como siete teclas: es lo que de verdad identifica un
   grupo junto con la hora, y en una lista de casillas no se ve de un vistazo. */
.dias-semana { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.dias-semana .dia {
  position: relative; width: 44px; height: 44px;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 12px;
  background: var(--papel); color: var(--suave);
  font-weight: 600; font-size: 15px; user-select: none;
}
.dias-semana .dia input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.dias-semana .dia:hover { border-color: #ccd6e0; }
.dias-semana .dia.puesto {
  background: var(--coral); border-color: var(--coral); color: #fff;
}

/* Lo que el grupo pide al inscribirse. Cada línea es una decisión, así que se
   lee en vertical y con su explicación debajo. */
.bloques-piden { max-width: 620px; }
.campos.en-columna > label.pide, .bloques-piden .pide {
  display: flex; align-items: flex-start; gap: 11px; margin-bottom: 0;
  padding: 11px 0; border-bottom: 1px solid var(--linea);
  font-size: 14px; color: var(--texto); cursor: pointer;
}
.bloques-piden .pide:last-child { border-bottom: 0; }
.bloques-piden .pide > input { width: auto; margin: 2px 0 0; flex: 0 0 auto; }
.bloques-piden .pide strong { font-weight: 600; color: var(--marino); }
.bloques-piden .pide.siempre { opacity: .7; cursor: default; }

.enlace-inscripcion { margin-top: 22px; border-top: 1px solid var(--linea); padding-top: 16px; }
.linea-enlace { display: flex; gap: 9px; align-items: center; margin: 6px 0 8px; max-width: 620px; }
.linea-enlace input { background: var(--fondo); }
.linea-enlace .boton { white-space: nowrap; }

/* El nombre del grupo es lo unico que lo distingue de otro del mismo sitio y
   la misma hora, asi que aqui si se parte en dos lineas en vez de cortarse. */
.tabla td.nombre-grupo { white-space: normal; overflow: visible; line-height: 1.35; }
.tabla td.apretado, .tabla th.apretado { white-space: nowrap; }
.tabla td.numero, .tabla th.numero { text-align: right; white-space: nowrap; }

/* ------------------------------------------------- el buscador de grupos */

.buscador-grupos { padding: 18px 28px 0; }
.buscador-grupos .linea-buscar { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; padding: 0; }
.buscador-grupos .linea-buscar select { width: auto; min-width: 100px; }
.buscador-grupos .linea-buscar input[type=search] { flex: 1; min-width: 220px; }
.quitar-filtros { color: var(--coral); font-size: 14px; text-decoration: none; white-space: nowrap; }
.quitar-filtros:hover { text-decoration: underline; }

.mas-filtros { margin-top: 14px; }
.mas-filtros summary {
  cursor: pointer; font-size: 14px; color: var(--marino); font-weight: 500;
  list-style: none; display: inline-flex; align-items: center; gap: 7px;
  padding-bottom: 10px;
}
.mas-filtros summary::-webkit-details-marker { display: none; }
.mas-filtros summary::before { content: '▸'; color: var(--coral); }
.mas-filtros[open] summary::before { content: '▾'; }
.mas-filtros .cuantos {
  background: var(--coral); color: #fff; border-radius: 50px;
  padding: 1px 8px; font-size: 12px; font-weight: 600;
}

.rejilla-filtros {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px 26px; padding-bottom: 6px;
}
.filtro-titulo {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .3px;
  text-transform: uppercase; color: var(--suave); margin-bottom: 7px;
}
.filtro-opciones { display: flex; flex-wrap: wrap; gap: 6px; }

/* Cada opcion es una pastilla que se enciende. Con nueve apartados, una lista
   de casillas cuadradas se lee mucho peor que esto. */
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.chip > span {
  display: inline-block; padding: 4px 11px; border-radius: 50px;
  border: 1px solid var(--borde); background: var(--papel);
  font-size: 13px; color: var(--texto); white-space: nowrap;
}
.chip:hover > span { border-color: #ccd6e0; }
/* Las zonas llevan su color tambien sin marcar, como en la plataforma vieja:
   se reconoce antes "el de Valdespartera" por el color que leyendo el nombre. */
.chip[style*="--color-chip"] > span {
  border-color: color-mix(in srgb, var(--color-chip) 45%, transparent);
  background: color-mix(in srgb, var(--color-chip) 10%, var(--papel));
  color: color-mix(in srgb, var(--color-chip) 75%, #000);
}
.chip.puesta > span {
  background: var(--color-chip, var(--coral)); border-color: var(--color-chip, var(--coral));
  color: #fff; font-weight: 500;
}
.chip input:focus-visible + span { outline: 2px solid var(--coral); outline-offset: 2px; }

/* La zona con su color, como en la plataforma vieja: se reconoce antes por el
   color que leyendo el nombre. */
.etiqueta-zona {
  display: inline-block; padding: 2px 9px; border-radius: 50px;
  background: var(--color-chip); color: #fff; font-size: 12.5px; white-space: nowrap;
}

.punto-estado {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #2f9e5e; margin-right: 7px; flex: 0 0 8px;
}
.punto-estado.apagado-punto { background: var(--coral); }

/* ------------------------------------------------------- configuración */

.tabla-catalogo td { white-space: normal; overflow: visible; vertical-align: middle; padding: 6px 10px; }
.tabla-catalogo tbody tr { cursor: default; }
.tabla-catalogo input[type=text] { margin: 0; }
.tabla-catalogo .agarre { cursor: grab; color: var(--borde); font-size: 15px; text-align: center; user-select: none; }
.tabla-catalogo .agarre:active { cursor: grabbing; }
.tabla-catalogo tr.arrastrando { opacity: .45; background: var(--coral-flojo); }
.tabla-catalogo td.centrado, .tabla-catalogo th.centrado { text-align: center; }
.tabla-catalogo td.centrado input { width: auto; margin: 0; }
.celda-color { text-align: center; }
.celda-color input[type=color]:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]) {
  width: 42px; height: 30px; padding: 2px; border: 1px solid var(--borde);
  border-radius: 7px; background: var(--papel); cursor: pointer; margin: 0;
}
.celda-color input[type=color]::-webkit-color-swatch { border: 0; border-radius: 4px; }
.celda-color input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.casillas-sueltas { display: flex; flex-wrap: wrap; gap: 4px 13px; font-size: 13px; color: var(--texto); }
.casillas-sueltas label { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; white-space: nowrap; }
.casillas-sueltas input { width: auto; margin: 0; accent-color: var(--coral); }

/* ------------------------------------------- la tabla de grupos */

.linea-tabla {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; padding: 16px 28px 12px;
}
.linea-tabla input[type=search]:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]) { width: 260px; max-width: 100%; margin: 0; }

/* Las columnas se eligen de un desplegable que no tapa media pantalla:
   catorce casillas en una lista corta al lado del boton. */
.menu-columnas { position: relative; display: inline-block; }
.menu-columnas summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border: 1px solid var(--borde); border-radius: 50px;
  background: var(--papel); color: var(--marino); font-size: 14px;
}
.menu-columnas summary::-webkit-details-marker { display: none; }
.menu-columnas summary::after { content: '▾'; color: var(--suave); }
.menu-columnas summary:hover { background: var(--fondo); border-color: #ccd6e0; }
.lista-columnas {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 190px;
  background: var(--papel); border: 1px solid var(--borde); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(20, 45, 72, .14); padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
}
.lista-columnas label {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 5px 9px; border-radius: 7px; font-size: 14px; color: var(--texto);
  white-space: nowrap;
}
.lista-columnas label:hover { background: var(--fondo); }
.lista-columnas input { width: auto; margin: 0; accent-color: var(--coral); }
.lista-columnas input:disabled + * , .lista-columnas label:has(input:disabled) { opacity: .55; cursor: default; }

.tabla-grupos th.ordenable { cursor: pointer; user-select: none; }
.tabla-grupos th.ordenable:hover { color: var(--coral); }
/* En la tabla de sesiones la cabecera es un enlace, para que la direccion
   diga como esta ordenada: tiene que verse igual que el resto de cabeceras. */
th.ordenable a { color: inherit; text-decoration: none; display: block; }
th.ordenable a:hover { color: var(--coral); }
.tabla-grupos td { vertical-align: middle; }

/* Los iconos del encabezado de inscritos: la forma los distingue, no el color.
   Un azul y un rosa dirian mas de lo que hace falta decir. */
.icono-sexo {
  width: 13px; height: 13px; fill: currentColor;
  vertical-align: -2px; opacity: .75;
}
.tabla-grupos td.numero strong { font-weight: 600; color: var(--marino); }

/* --------------------------------------------- la ficha del grupo

   Seis tarjetas y una franja de resumen arriba. El nombre ya esta en el
   titulo, asi que los campos de nombre no van los primeros; y los enlaces de
   inscripcion viven en el apartado de inscripcion, no en la cabecera, donde
   ocupaban el sitio mas visible sin decir de que grupo es la ficha. */

/* Lo que se mira antes que nada: quien lo da, donde y cuanta gente va. Vive
   dentro de la cabecera fija y pegado a la derecha, junto a los botones: es lo
   que sigues necesitando cuando ya has bajado a las tarjetas del final. */
.resumen-grupo {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  margin-left: auto;                /* lo manda a la derecha, con los botones */
}
.resumen-grupo > div { display: flex; flex-direction: column; gap: 0; }
.resumen-grupo .dato { font-size: 15px; font-weight: 600; color: var(--marino); }
.resumen-grupo .apagado { font-size: 12.5px; line-height: 1.35; }
/* En cuanto la cabecera no da para todo, el resumen baja entero y se alinea a
   la izquierda: partido por la mitad no se entiende. */
@media (max-width: 760px) {
  .resumen-grupo { margin-left: 0; width: 100%; gap: 20px; order: 3; }
}
/* Las dos marcas del resumen. Hasta ahora .marca-no solo tenia forma dentro
   de .persona-apuntada, asi que "Cancelado" en la cabecera del grupo y el
   "pendiente" de las listas salian como texto suelto. */
.marca-no, .marca-apagada {
  display: inline-block;            /* si no, el relleno de arriba se sale */
  border-radius: 50px; padding: 3px 11px; font-size: 12.5px; white-space: nowrap;
}
.marca-no { background: var(--coral-flojo); color: var(--coral-oscuro); font-weight: 600; }
.marca-apagada {
  background: var(--fondo); border: 1px solid var(--borde);
  color: var(--suave); font-weight: 500;
}

/* Las parejas de tarjetas. El margen de abajo es lo que separa una fila de
   tarjetas de la siguiente: sin el, las tarjetas de dos filas seguidas se
   tocaban y toda la ficha se leia como un unico bloque blanco. */
.parejas-de-tarjetas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px;
}
@media (max-width: 1000px) { .parejas-de-tarjetas { grid-template-columns: 1fr; } }

/* Las tres de arriba: cuando se reune, profesor e instalacion, y nivel. Las
   columnas no son iguales porque lo que llevan dentro tampoco: la instalacion
   mas larga son 30 caracteres y el nivel quince. */
.tres-tarjetas {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 0.8fr);
  gap: 22px; margin-bottom: 22px;
}
.tres-tarjetas > .bloque-grupo { margin-bottom: 0; }
@media (max-width: 1200px) { .tres-tarjetas { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .tres-tarjetas { grid-template-columns: 1fr; } }

.bloque-grupo { margin-bottom: 22px; padding: 0; }
.parejas-de-tarjetas > .bloque-grupo { margin-bottom: 0; }
.bloque-grupo > h2 { margin: 0; padding: 18px 24px 0; }
/* El titulo, en una pastilla coral: en una pagina con seis tarjetas hay que
   poder saltar de una a otra sin leerlas. */
.bloque-grupo > h2 > span {
  display: inline-block; padding: 7px 18px; border-radius: 50px;
  background: var(--coral-flojo); color: var(--coral-oscuro);
  font-size: 17px; font-weight: 600; letter-spacing: -.2px;
}
.bloque-cuerpo { padding: 16px 24px 22px; }
.bloque-cuerpo > .campo-titulo:first-child { margin-bottom: 9px; }

/* Las filas de doce columnas dentro de cada tarjeta. */
/* Cada recuadro mide lo que mide su dato. Ni crece ni encoge: con shrink se
   quedaban por debajo del ancho pedido y el dato se cortaba. */
.rejilla { display: flex; flex-wrap: wrap; gap: 16px 18px; align-items: flex-end; }
.rejilla + .rejilla { margin-top: 16px; }
.nota-bajo-fila + .rejilla { margin-top: 14px; }
.rejilla > label, .rejilla > div {
  flex: 0 0 auto; width: var(--ancho, 180px); max-width: 100%;
  display: flex; flex-direction: column; min-width: 0;
}
.rejilla > label[style*="100%"] { flex: 1 1 100%; }
.pie-campo { font-size: 12.5px; color: var(--suave); margin-top: 5px; line-height: 1.35; }
.nota-bajo-fila { margin: 12px 0 0; font-size: 12.5px; color: var(--suave); max-width: 62ch; }
/*
 * Un recuadro de ojo dentro de la pagina. No es .aviso: ese es el mensajito
 * flotante de arriba, que vive con opacity 0 hasta que el JavaScript le pone
 * .visible, asi que puesto en la pagina no se veria.
 */
.nota-ojo {
  margin: 0 0 16px; max-width: 62ch; padding: 11px 16px; border-radius: 12px;
  background: var(--coral-flojo); color: var(--coral-oscuro); font-size: 13.5px;
  line-height: 1.5;
}

/* Los dias, con tres letras: "M" vale para martes y para miercoles. */
.dias-clase { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 18px; }
.dia-clase { position: relative; cursor: pointer; }
.dia-clase input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.dia-clase > span {
  display: grid; place-items: center; min-width: 50px; height: 40px; padding: 0 11px;
  border: 1px solid var(--borde); border-radius: 11px; background: var(--papel);
  color: var(--suave); font-size: 14px; font-weight: 500; user-select: none;
}
.dia-clase:hover > span { border-color: #ccd6e0; }
.dia-clase input:checked + span {
  background: var(--marino); border-color: var(--marino); color: #fff;
}

/* Cancelado y desactivado: dos cosas distintas, cada una con su palanca. */
.interruptor {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  padding: 11px 0; border-bottom: 1px solid var(--linea); font-size: 14px;
}
.interruptor:first-child { padding-top: 0; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.palanca {
  flex: 0 0 auto; width: 38px; height: 22px; border-radius: 50px;
  background: #d5dee7; position: relative; transition: background .15s; margin-top: 1px;
}
.palanca::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: transform .15s;
}
.interruptor input:checked + .palanca { background: var(--coral); }
.interruptor input:checked + .palanca::after { transform: translateX(16px); }
.interruptor input:focus-visible + .palanca { outline: 2px solid var(--coral); outline-offset: 2px; }
.interruptor-texto strong { font-weight: 600; color: var(--marino); }

/* Los enlaces para las familias: largos, de una linea, con su boton. */
.enlace-ficha { display: flex; align-items: flex-end; gap: 9px; margin-bottom: 10px; }
.enlace-ficha label { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.enlace-ficha input { background: var(--fondo); font-size: 13px; }
.enlace-ficha .copiar { white-space: nowrap; margin-bottom: 1px; }

/* Las doce casillas, por lo que significan y no en una lista de doce. */
.grupos-de-bloques {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 18px 26px;
}
.grupo-de-bloques { display: flex; flex-direction: column; gap: 8px; }
.grupo-de-bloques > .campo-titulo { padding-bottom: 7px; border-bottom: 1px solid var(--linea); }
.casilla-suelta { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.casilla-suelta input { width: auto; margin: 0; accent-color: var(--coral); }
.casilla-suelta.siempre { opacity: .6; cursor: default; }

.grupo-acciones-peligro { display: flex; justify-content: flex-end; gap: 10px; margin: 0 0 22px; }
/* Borrar no se pinta como los demás: no se puede deshacer, y un botón que se ve
   igual que «Duplicar» se pulsa igual de rápido. Coral solo en el borde hasta
   que lo tocas: llamar la atención, no invitar. */
.boton.peligro { color: var(--coral-oscuro); border-color: #f0c8c2; background: var(--papel); }
.boton.peligro:hover { background: var(--coral); border-color: var(--coral); color: #fff; }

/* Las ocho pestañas de abajo. */
.pestanas {
  display: flex; flex-wrap: wrap; gap: 2px;
  padding: 14px 24px 0; border-bottom: 1px solid var(--linea);
}
.pestana {
  font: inherit; font-size: 14px; border: 1px solid transparent; border-bottom: 0;
  background: none; color: var(--suave); cursor: pointer;
  padding: 9px 16px; border-radius: 10px 10px 0 0; margin-bottom: -1px;
}
.pestana:hover { color: var(--marino); background: var(--fondo); }
.pestana.activa { background: var(--papel); border-color: var(--linea); color: var(--coral); font-weight: 600; }
.panel-pestana { padding: 20px 24px 26px; }
.panel-pestana .sub:first-child { margin-top: 0; }

/* ------------------------------------------------------ instalaciones

   Cada una se abre por separado: son cinco campos y tres protocolos, y las
   diez desplegadas a la vez no se leen. */
.instalaciones { display: flex; flex-direction: column; gap: 8px; }
.instalacion { border: 1px solid var(--linea); border-radius: 12px; background: var(--papel); }
.instalacion[open] { border-color: var(--borde); }
.instalacion > summary {
  cursor: pointer; list-style: none; padding: 12px 16px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.instalacion > summary::-webkit-details-marker { display: none; }
.instalacion > summary::before { content: '▸'; color: var(--coral); flex: 0 0 auto; }
.instalacion[open] > summary::before { content: '▾'; }
.instalacion > summary:hover { background: var(--fondo); border-radius: 12px; }
.instalacion-nombre { font-weight: 600; color: var(--marino); font-size: 15px; }
.instalacion-cuerpo { padding: 4px 16px 18px; display: flex; flex-direction: column; gap: 16px; }

.protocolos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.protocolos label { display: flex; flex-direction: column; }
@media (max-width: 900px) { .protocolos { grid-template-columns: 1fr; } }

.anadir-instalacion { display: flex; gap: 9px; margin-top: 14px; }
.anadir-instalacion input { max-width: 300px; }
.anadir-instalacion select { width: auto; min-width: 170px; }
.anadir-instalacion .boton { white-space: nowrap; }

/* ------------------------------------------------------- la pestaña Equipo

   La plataforma del equipo que Adrian monto con ChatGPT, traida aqui. Su
   paleta ya era esta —misma Mukta, mismo marino, mismo coral—, asi que lo
   unico que hay que montar son sus piezas propias: el circulo con las
   iniciales, las pastillas de situacion y el historial. */

/* El circulo con las iniciales: es por donde se reconoce a alguien de un
   vistazo en una lista de 66 nombres que se parecen mucho entre si. */
.redondel {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--coral-flojo); color: var(--coral-oscuro);
  font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}
.redondel.grande { width: 52px; height: 52px; font-size: 17px; }

/* El nombre y el correo se cortan con puntos suspensivos si no caben, en vez
   de desbordar: un correo de 32 caracteres se metia debajo del boton de
   WhatsApp y se leian los dos encima. */
.celda-monitor { display: flex; align-items: center; gap: 12px; }
.celda-monitor > div { min-width: 0; flex: 0 1 auto; }   /* pega el WhatsApp al nombre */
.celda-monitor a, .celda-monitor .apagado {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* La columna del monitor se queda con el hueco que sobra; las otras miden lo
   que mide su dato, que es poco y siempre igual de largo. */
.tabla-equipo th:nth-child(2) { width: 150px; }
.tabla-equipo th:nth-child(3) { width: 100px; }
.tabla-equipo th:nth-child(4) { width: 160px; }
.tabla-equipo th:last-child { width: 90px; }

/* WhatsApp con el mismo icono y el mismo verde que en la ficha del alumno: la
   gente ya sabe que eso se pulsa, no hay que ensenarselo dos veces distintas. */
.whatsapp { flex: none; display: inline-grid; place-items: center; padding: 2px; }
.whatsapp svg { width: 20px; height: 20px; fill: var(--verde); transition: transform .12s; }
.whatsapp:hover svg { transform: scale(1.14); }

/* Las tres marcas de situacion. Verde el que trabaja, coral el que se fue,
   neutra la que esta a medias: inactivo y pendiente de incorporacion no son
   un problema, solo un estado. */
.estado-monitor {
  display: inline-block; border-radius: 50px; padding: 3px 11px;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.estado-monitor.si { background: #eaf7f0; color: #1a7f4b; }
.estado-monitor.no { background: var(--coral-flojo); color: var(--coral-oscuro); }
.estado-monitor.tibia { background: var(--campo); color: var(--suave); }
.marca-si {
  display: inline-block; background: #eaf7f0; color: #1a7f4b;
  border-radius: 50px; padding: 3px 11px; font-size: 12.5px; font-weight: 600;
}

/* ---------------------------------------------------------------------
   La cabecera y los filtros, medidos sobre la plataforma del equipo que
   Adrian monto con ChatGPT. No estan a ojo: son los valores que da
   getComputedStyle sobre la suya, uno por uno.

     cintillo   11px / 700, letter-spacing 1.87px, #b43e34
     titulo     Nunito 30.4px / 800, interlineado 36.48, ls -1.064px
     bajada     16px / 400, #627389, 10px por encima
     fila       rejilla de 145px + lo que sobra, 18px 22px, linea arriba
     etiqueta   15px / 600, ls -.3px, #294760
     pastilla   8px 13px, redonda del todo, 14px / 600, hueco de 8px
     cuenta     13px / 600, #52677f sobre #edf1f6, esquinas de 6px
   --------------------------------------------------------------------- */

.cintillo {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.87px;
  line-height: 16.5px; color: #b43e34; margin-bottom: 10px;
}
.cabecera-equipo h1 {
  font-family: Nunito, Mukta, sans-serif;
  font-size: 30.4px; font-weight: 800; line-height: 36.48px;
  letter-spacing: -1.064px; color: var(--marino); margin: 0;
}
.cabecera-equipo .bajada {
  font-size: 16px; line-height: 25.6px; color: #627389; margin: 10px 0 0;
}
/* Su cabecera deja 32px hasta lo siguiente: con menos, el titulo se pega. */
.cabecera-equipo { margin-bottom: 32px; align-items: flex-start; }

/* Cada filtro en su fila: la etiqueta a la izquierda, siempre en la misma
   columna, y sus pastillas a la derecha. Con siete filtros, alinearlos es lo
   que deja recorrerlos con la vista. */
.fila-filtro {
  display: grid; grid-template-columns: 145px minmax(0, 1fr); gap: 16px;
  padding: 18px 22px; border-top: 1px solid #e8edf4; align-items: start;
}
.fila-filtro:first-child { border-top: 0; }
.fila-filtro > .rotulo {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; letter-spacing: -.3px; color: #294760;
  padding-top: 9px;                 /* a la altura del texto de la pastilla */
}
.fila-filtro > .rotulo .icono { color: var(--coral); flex: none; }
.fila-filtro > .rotulo small {
  display: block; font-weight: 400; font-size: 13px; color: var(--suave);
}
.fila-filtro .pastillas { display: flex; flex-wrap: wrap; gap: 8px; }
.fila-filtro input[type=search] { width: 100%; }
@media (max-width: 720px) {
  .fila-filtro { grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; }
  .fila-filtro > .rotulo { padding-top: 0; }
}

.pastilla-filtro {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 13px; border-radius: 999px;
  border: 1px solid #d9e2ec; background: var(--papel);
  font-size: 14px; font-weight: 600; color: #29445f; white-space: nowrap;
  text-decoration: none;            /* son enlaces: sin esto salen subrayadas */
}
.pastilla-filtro:hover { border-color: #c2d0e0; }
/* La activa no lleva borde, como la suya: con el mide un pixel mas por lado y
   las pastillas de la fila bailan al encenderse una. */
.pastilla-filtro.puesta {
  background: var(--marino); border: 0; color: #fff; padding: 9px 14px;
}
.pastilla-filtro .cuenta {
  font-size: 13px; font-weight: 600; color: #52677f;
  background: #edf1f6; border-radius: 6px; padding: 1px 6px;
}
.pastilla-filtro.puesta .cuenta { background: rgba(255,255,255,.15); color: #fff; }

/* Las tarjetas del equipo son de 14px y sin sombra, como las suyas. */
.tarjeta-equipo {
  background: var(--papel); border-radius: 14px; overflow: hidden;
  margin-bottom: 18px;
}

.vacio-equipo { padding: 26px 24px 30px; }

/* La cabecera de la ficha, con el circulo al lado del nombre. */
.titulo-monitor { display: flex; align-items: center; gap: 14px; min-width: 0; }
.clave-monitor {
  font-size: 11.5px; font-weight: 600; letter-spacing: .6px;
  text-transform: uppercase; color: var(--coral-oscuro); margin-bottom: 1px;
}
.pastillas-monitor { display: flex; gap: 7px; margin-top: 5px; flex-wrap: wrap; }

/* Los datos de la ficha se leen, no se editan: dos columnas de etiqueta y
   valor, que caben mas que en una rejilla de recuadros. */
.rejilla-datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px 22px;
}
.dato-monitor { min-width: 0; }
.dato-monitor strong {
  display: block; color: var(--marino); font-weight: 600; font-size: 15px;
  overflow-wrap: anywhere;              /* el IBAN son 24 caracteres sin espacios */
}
.con-saltos { white-space: pre-wrap; }

/* Cada cambio de situacion o de jornada, con su fecha de efecto y quien lo
   registro. Un cambio anulado no se borra: se tacha y se deja ver. */
.cambio { padding: 11px 0; border-top: 1px solid var(--linea); font-size: 14px; }
.cambio:first-of-type { border-top: 0; padding-top: 2px; }
.cambio > div:first-child { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cambio .apagado { font-size: 13px; margin-top: 2px; }
.cambio .motivo {
  margin-top: 6px; padding-left: 11px; border-left: 2px solid var(--borde);
  color: var(--texto); white-space: pre-wrap;
}
.cambio.anulado > div:first-child strong { text-decoration: line-through; color: var(--suave); }

/* Un documento descartado se deja de usar pero se sigue viendo: quien lo
   descarto y cuando es parte del expediente. */
tr.descartado td { opacity: .55; }

/* El historial: 837 lineas de "quien hizo que". La fecha a la izquierda en
   columna fija para poder recorrerlo con la vista sin leerlo entero. */
.historial { list-style: none; margin: 0; padding: 0; }
.historial li {
  display: grid; grid-template-columns: 92px 1fr; gap: 14px;
  padding: 10px 0; border-top: 1px solid var(--linea); font-size: 14px;
}
.historial li:first-child { border-top: 0; }
.historial .cuando { color: var(--suave); font-size: 13px; font-variant-numeric: tabular-nums; }
.historial strong { color: var(--marino); font-weight: 600; }
@media (max-width: 560px) {
  .historial li { grid-template-columns: 1fr; gap: 3px; }
}

/* Las pestañas de la ficha del monitor van sueltas sobre el fondo, no dentro
   de una tarjeta: debajo de cada una hay varias tarjetas, no una sola tabla. */
#pestanas-monitor { margin-bottom: 18px; }

/* En los listados grandes cada fila es una linea, porque son miles. En el
   expediente de una persona son cuatro papeles y el titulo es lo que hay que
   leer entero: "Certificado negativo de delitos sexuales · 2026-09-22" no se
   puede quedar en "Certificado negativo de delitos …". */
.tabla-papeles td { white-space: normal; max-width: none; overflow: visible; }
.tabla-papeles tbody tr { cursor: default; }
.tabla-papeles tbody tr:hover { background: transparent; }
.tabla-papeles tbody tr:nth-child(even):hover { background: var(--cebra); }
/* El titulo del papel se queda con el hueco que sobra; el resto mide lo suyo. */
.tabla-papeles th:nth-child(2) { width: 150px; }
.tabla-papeles th:nth-child(3) { width: 130px; }
.tabla-papeles th:last-child { width: 90px; }

/* ------------------------------------------------- la matriz de Expedientes

   Una casilla por monitor y bloque. El color hace casi todo el trabajo: con
   ocho columnas por sesenta y seis filas, lo que se busca es el rojo, y leer
   "3 de 4 completados" solo hace falta cuando ya has encontrado la fila. */

.cuenta-equipo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding: 15px 22px;
}
.cuenta-equipo strong { color: var(--marino); font-weight: 600; }
.leyenda { display: flex; gap: 16px; font-size: 13px; }
.leyenda > span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda > span::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%; background: currentColor;
}
.leyenda .bien { color: #1a7f4b; }
.leyenda .falta { color: var(--coral-oscuro); }

/* Con nueve columnas no cabe en un movil: se desliza a lo ancho en vez de
   apretar las casillas hasta que no se lean. */
.desliza { overflow-x: auto; }
/* Nueve columnas y "3 de 3 completados" en cada casilla: no cabe en 1.100px
   sin cortar el texto, asi que se deja ancha y se desliza. */
.tabla-expedientes { min-width: 1320px; }
.tabla-expedientes td { white-space: normal; max-width: none; overflow: visible; vertical-align: top; }
.tabla-expedientes tbody tr { cursor: default; }
.tabla-expedientes th { white-space: normal; vertical-align: bottom; }
.tabla-expedientes th:first-child, .tabla-expedientes td:first-child { min-width: 200px; }
.tabla-expedientes td:first-child > div { margin-top: 4px; }

/*
 * Las casillas de esta tabla van con el nombre de la tabla delante. Sin el,
 * se llevaban por delante las pastillas del buscador de grupos, que tambien
 * se llaman «casilla»: les ponian otro relleno de 7 por 11, 128px de ancho
 * minimo, y el nombre del monitor en 12px y en gris flojo en vez de en 13px y
 * del color del texto. Se descubrio el 9 de noviembre de 2026 al igualar las
 * pastillas de monitor, porque el relleno de mas no dejaba cuadrarlas.
 */
.tabla-expedientes .casilla {
  display: inline-block; border-radius: 10px; padding: 7px 11px; min-width: 128px;
}
.tabla-expedientes .casilla strong { display: block; font-size: 13.5px; font-weight: 600; }
.tabla-expedientes .casilla span { display: block; font-size: 12px; color: var(--suave); }
.tabla-expedientes .casilla.bien { background: #eaf7f0; }
.tabla-expedientes .casilla.bien strong { color: #1a7f4b; }
.tabla-expedientes .casilla.falta { background: var(--coral-flojo); }
.tabla-expedientes .casilla.falta strong { color: var(--coral-oscuro); }

/* Los apartados del equipo, encima de todo y sin tarjeta debajo. */
.pestanas-equipo { margin-bottom: 18px; border-bottom: 1px solid var(--borde); }
.pestanas-equipo .pestana { text-decoration: none; }

/* =====================================================================
   La cara de los modulos del equipo

   La plataforma tiene dos caras y no es un capricho. Escuela lleva los
   listados de 9.828 alumnos y 2.387 grupos, y ahi cada fila que entra en
   pantalla cuenta: barra clara y estrecha, texto de 15px. Equipo, Horas y
   AMPAs son fichas de 66 personas o de 29 colegios, no miles, y van con la
   cara de la plataforma que Adrian monto con ChatGPT: barra marino de 255px,
   texto de 17px y titulos en Nunito. Las medidas salen de getComputedStyle
   sobre la suya, una por una.
   ===================================================================== */

.cara-equipo {
  background: #f6f8fb;
  color: var(--marino);
  font-size: 17px;
}

/* El ancho maximo, que es lo que de verdad hace que no quede descompensado.
   En una pantalla de 1.740px, dejar que las tarjetas se estiren pone el nombre
   del centro en un extremo y su email en el otro, con medio metro de nada en
   medio. Su plataforma lo corta en 1.400px y por eso se lee de un vistazo. */
.cara-equipo main { max-width: 1432px; }

.cara-equipo .lateral {
  width: 255px; flex: 0 0 255px;
  background: var(--marino);
}
.cara-equipo .marca img { width: 166px; }
.cara-equipo .nombre-modulo { color: #8fa4bc; }

.cara-equipo .lateral nav { padding: 6px 14px; }
.cara-equipo .lateral nav a {
  gap: 8px; height: 46px; padding: 0 15px;
  color: #d1ddec; font-size: 16px; font-weight: 700;
  border-radius: 12px;
}
.cara-equipo .lateral nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
/* Coral de fondo y el marino encima: sobre el coral, el blanco se lee peor. */
.cara-equipo .lateral nav a.activo { background: var(--coral); color: var(--marino); }

.cara-equipo .lateral-pie .usuario { color: #fff; }
.cara-equipo .lateral-pie .rol { color: #9fb2c8; }
.cara-equipo .lateral-pie a { color: var(--coral-claro); }
.cara-equipo .lateral-pie a:hover { color: #fff; }

/* En movil la barra se tumba arriba; el marino tiene que seguir siendo marino. */
@media (max-width: 900px) {
  .cara-equipo .lateral { width: auto; flex: none; }
}

/* ------------------------------------------------------- pagina maestra */

/* Lo que todavia no esta hecho se dice, no se rellena con numeros de adorno:
   un cuadro de mando falso es peor que un hueco honesto. */
.cuadro-pendiente {
  padding: 26px 28px; border: 1px dashed #c9d6e4; background: transparent;
}
.cuadro-pendiente strong { display: block; color: var(--marino); font-size: 17px; }
.cuadro-pendiente p { margin: 6px 0 0; max-width: 62ch; }
.lista-simple { margin: 10px 0 0; padding-left: 20px; color: var(--suave); }
.lista-simple li { margin-bottom: 3px; }

.modulos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 18px; margin-top: 18px;
}
.tarjeta-modulo {
  display: block; position: relative; text-decoration: none;
  background: var(--papel); border-radius: 14px; padding: 22px 24px 24px;
  border: 1px solid transparent;
}
.tarjeta-modulo:hover { border-color: var(--coral); }
.icono-modulo {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--coral-flojo); color: var(--coral-oscuro);
  margin-bottom: 14px;
}
.icono-modulo .icono { width: 20px; height: 20px; flex: none; }
.tarjeta-modulo strong {
  display: block; font-family: Nunito, Mukta, sans-serif;
  font-size: 20px; font-weight: 800; letter-spacing: -.5px; color: var(--marino);
}
.tarjeta-modulo .bajada { display: block; margin-top: 5px; color: var(--suave); font-size: 15px; }
.cuenta-modulo {
  position: absolute; top: 22px; right: 24px;
  font-size: 13px; font-weight: 600; color: #52677f;
  background: #edf1f6; border-radius: 6px; padding: 2px 8px;
}

/* ------------------------------------------------- el resumen del equipo */

.contadores {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px; margin-bottom: 18px;
}
.contador { background: var(--papel); border-radius: 14px; padding: 20px 22px 22px; }
.titulo-contador {
  display: block; font-size: 14px; font-weight: 600; color: var(--suave);
  line-height: 1.3; min-height: 2.6em;
}
.contador strong {
  display: block; font-family: Nunito, Mukta, sans-serif;
  font-size: 34px; font-weight: 800; letter-spacing: -1.4px; color: var(--marino);
  line-height: 1.1; margin: 4px 0 2px;
}
.pie-contador { display: block; font-size: 13px; color: var(--suave); }
/* El primero en marino y el de los avisos en coral, como los suyos: de un
   vistazo se ve cual es el que pide algo. */
.contador.oscuro { background: var(--marino); }
.contador.oscuro .titulo-contador, .contador.oscuro .pie-contador { color: #9fb2c8; }
.contador.oscuro strong { color: #fff; }
.contador.alerta { background: var(--coral-flojo); }
.contador.alerta strong { color: var(--coral-oscuro); }

.lista-pendientes { list-style: none; margin: 0; padding: 0; }
.lista-pendientes li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px; border-top: 1px solid var(--linea);
}
.lista-pendientes a { display: block; text-decoration: none; flex: 1; min-width: 0; }
.lista-pendientes strong { display: block; color: var(--marino); font-weight: 600; font-size: 15px; }
.lista-pendientes .apagado { font-size: 13.5px; }
.aviso-punto {
  flex: none; display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--coral-flojo); color: var(--coral-oscuro);
}
.cuenta-equipo a { font-size: 14px; }

/* ------------------------------------------------------------- Centros

   Fila por fila como la suya: escudo, nombre, estado, contactos y la flecha
   de entrar. Los cuatro contadores de arriba son botones-filtro, con su icono
   cada uno, y el que esta puesto se marca. */

.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px; margin-bottom: 20px;
}
.status-stat {
  display: block; text-decoration: none; background: var(--papel);
  border: 1px solid transparent; border-radius: 12px; padding: 14px 16px 15px;
}
.status-stat:hover { border-color: #c9d6e4; }
.status-stat.puesto { border-color: var(--coral); }
.status-stat .icono { width: 20px; height: 20px; color: var(--coral); margin-bottom: 10px; }
.status-stat strong {
  display: block; font-family: Nunito, Mukta, sans-serif;
  font-size: 30px; font-weight: 800; letter-spacing: -1.2px; color: var(--marino);
  line-height: 1.1;
}
.status-stat span { display: block; font-size: 14px; color: var(--suave); margin-top: 1px; }

/* El buscador con su lupa dentro y el desplegable de estado al lado. */
.barra-centros { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.busca-centros {
  flex: 1 1 320px; min-width: 0; position: relative;
  display: flex; align-items: center;
}
.busca-centros .icono {
  position: absolute; left: 16px; width: 17px; height: 17px; color: var(--suave);
  pointer-events: none;
}
/* Otra vez la cadena de :not() repetida: la regla base de los campos vale
   (0,5,1) y se come cualquier ".busca-centros input". Sin esto el texto se
   mete debajo de la lupa y el desplegable ocupa su propia fila. */
.busca-centros input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]) {
  width: 100%; padding-left: 44px; background: var(--papel);
}
.barra-centros select { width: auto; flex: 0 0 auto; background: var(--papel); padding-right: 36px; }

.centros { display: grid; gap: 12px; }
.centro { background: var(--papel); border-radius: 14px; overflow: hidden; }

.centro-fila {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; text-decoration: none;
}
.centro-fila:hover { background: var(--cebra); }
.centro-fila > .icono:last-child { color: var(--suave); flex: none; margin-left: 4px; }

/* El escudo del colegio. Sin recortar: muchos son logos con texto y un
   recorte circular se come el nombre del centro. */
.escudo {
  flex: none; width: 50px; height: 50px;
  display: grid; place-items: center;
}
.escudo img { max-width: 50px; max-height: 50px; display: block; }
.escudo.sin-escudo {
  border-radius: 12px; background: var(--coral-flojo); color: var(--coral-oscuro);
  font-size: 14px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
}

.centro-nombre { flex: 1; min-width: 0; }
.centro-nombre h2 {
  margin: 0; font-family: Nunito, Mukta, sans-serif;
  font-size: 18px; font-weight: 800; letter-spacing: -.4px; color: var(--marino);
}
.centro-nombre p { margin: 1px 0 0; color: var(--suave); font-size: 14.5px; }
.centro-nombre small { display: block; margin-top: 3px; }

.centro-contactos {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  font-size: 13.5px; color: var(--suave); white-space: nowrap;
}
.centro-contactos .icono { width: 15px; height: 15px; }

/* Confirmado o por confirmar: lo que distingue un dato que alguien ha mirado
   de uno que salio del directorio oficial y nadie ha comprobado. */
.confirmado { color: #1a7f4b; font-size: 13px; font-weight: 600; }
.por-confirmar { color: var(--coral-oscuro); font-size: 13px; font-weight: 600; }
.sello {
  display: inline-block; margin-top: 4px; font-size: 12px; font-weight: 600;
  border-radius: 50px; padding: 2px 9px;
}
.sello.confirmado { background: #eaf7f0; }
.sello.por-confirmar { background: var(--coral-flojo); }

.contactos-destacados { padding: 0 16px 14px; display: grid; gap: 12px; }
.contacto {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 14px;
  background: var(--campo); border-radius: 10px; padding: 11px 14px;
}
@media (max-width: 720px) { .contacto { grid-template-columns: 1fr; gap: 8px; } }
.contacto strong { color: var(--marino); display: inline-flex; align-items: center; gap: 7px; }
.contacto strong .icono { width: 14px; height: 14px; color: #c9a227; flex: none; }
.contacto .apagado { font-size: 14px; }
.contacto-vias { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.via { display: inline-flex; align-items: center; gap: 7px; }
.via .icono { width: 15px; height: 15px; color: var(--suave); flex: none; }

/* Copiar el dato: es para pegarlo en un correo o en un WhatsApp. */
.copiar-dato {
  border: 0; background: none; cursor: pointer; padding: 3px; line-height: 0;
  color: var(--suave); border-radius: 6px;
}
.copiar-dato:hover { color: var(--marino); background: var(--borde); }
.copiar-dato .icono { width: 14px; height: 14px; }
.copiar-dato.copiado { color: #1a7f4b; }

.redes-centro { padding: 0 16px 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.red {
  display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px;
  border: 1px solid var(--borde); border-radius: 50px; padding: 4px 12px;
}
.red a { display: inline-flex; align-items: center; gap: 5px; }
.red .icono { width: 12px; height: 12px; }

.dato-centro { min-width: 0; }
.dato-centro strong {
  display: block; color: var(--marino); font-weight: 600; font-size: 15px;
  overflow-wrap: anywhere;
}
.nota-fuente { color: var(--suave); font-size: 13.5px; margin: 0 2px 18px; }


/* La cuenta al lado de un apartado de la barra: cuantos hay sin entrar. */
.lateral nav a > span:first-of-type { flex: 1; min-width: 0; }
.cuenta-barra {
  flex: none; font-size: 12px; font-weight: 700; border-radius: 6px; padding: 1px 7px;
  background: var(--campo); color: var(--suave);
}
.cara-equipo .cuenta-barra { background: rgba(255, 255, 255, .12); color: #c3d2e4; }
.cara-equipo .lateral nav a.activo .cuenta-barra { background: rgba(20, 45, 72, .16); color: var(--marino); }

.comunicacion-filtros {
  border: 1px solid var(--borde); border-radius: 12px; padding: 6px 18px;
  background: var(--papel);
}
.comunicacion-filtros .fila-filtro > div:last-child {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.comunicacion-resumen { margin: 22px 0; }
.comunicacion-resumen .acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.comunicacion-resumen [role="status"]:empty { display: none; }
.comunicacion-cabecera { display: flex; align-items: center; gap: 14px; padding: 16px; }
.comunicacion-cabecera .centro-nombre { flex: 1; }
.comunicacion-centros .contacto-vias a { display: inline-flex; align-items: center; gap: 7px; overflow-wrap: anywhere; min-width: 0; }
.comunicacion-centros .contacto-vias .icono { width: 17px; height: 17px; flex: none; }
.comunicacion-centros .boton:disabled { opacity: .5; cursor: default; }
.comunicacion-otros summary { cursor: pointer; color: var(--suave); padding: 8px 0; }
.comunicacion-lista { display: grid; gap: 10px; margin-top: 8px; }
.comunicacion-centros textarea { display: block; width: 100%; min-height: 90px; }
@media (max-width: 600px) {
  .comunicacion-cabecera { align-items: flex-start; }
  .comunicacion-resumen .acciones .boton { width: 100%; justify-content: center; }
  .comunicacion-filtros { padding: 6px 12px; }
}
/* El icono del boton, separado del texto: pegados se leen como una mancha. */
.boton .icono { width: 15px; height: 15px; margin-right: 7px; vertical-align: -2px; }


.edicion-centro { margin-bottom: 20px; padding: 16px; }
.campos-edicion-centro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 18px;
}
.campos-edicion-centro label { display: grid; gap: 6px; min-width: 0; }
.campos-edicion-centro input,
.campos-edicion-centro select,
.campos-edicion-centro textarea { width: 100%; box-sizing: border-box; }
.confirmacion-centro { margin-top: 8px; }
.confirmacion-centro .boton { font-size: 12px; padding: 5px 10px; }
/* Confirmar un dato va discreto: catorce botones gritando tapan el dato, que
   es a lo que se viene. */
.enlace-sello {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--suave); text-decoration: underline;
  margin-left: 8px;
}
.enlace-sello:hover { color: var(--coral-oscuro); }
.confirmacion-centro { display: inline; }

.grupo-contactos { margin-top: 24px; }
.grupo-contactos h3 { display: flex; align-items: center; gap: 10px; }
.cuenta-contactos { font-size: .85em; color: var(--suave); }
.contacto-centro { padding: 18px 0; border-top: 1px solid #e4e7eb; }
.contacto-identidad { display: flex; align-items: flex-start; gap: 12px; }
.contacto-identidad > div { min-width: 0; overflow-wrap: anywhere; }
.contacto-identidad .redondel { flex-shrink: 0; }
.contacto-identidad .marca-si { margin-left: 8px; }
.contacto-identidad .boton-wa { display: inline-flex; vertical-align: middle; }
.contacto-identidad .boton-wa svg { width: 20px; height: 20px; }
.acciones-contacto { margin: 12px 0; flex-wrap: wrap; }
.editor-contacto > summary { cursor: pointer; width: fit-content; }
.editor-contacto > form { margin-top: 16px; }
.resto-contactos > summary { cursor: pointer; padding: 12px 0; font-weight: 600; }

/* Los formularios se adaptan al móvil sin separar las etiquetas de sus campos. */
.editor-monitor { padding: 1rem; margin-bottom: 1rem; }
.editor-monitor summary { cursor: pointer; font-weight: 700; }
.campos-monitor {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.campos-monitor label { display: flex; flex-direction: column; gap: .4rem; }
.campos-monitor input, .campos-monitor select, .campos-monitor textarea {
  width: 100%; box-sizing: border-box;
}
.aviso-monitor { color: var(--rojo, #a22); }
.anulacion-monitor { margin-top: .5rem; }

.equipo-formulario { padding: 24px; margin-block: 20px; }
.equipo-formulario > label { display: block; margin-block: 16px; }
.equipo-formulario input:not([type="checkbox"]),
.equipo-formulario textarea, .equipo-formulario select {
  display: block; width: 100%; max-width: 760px; padding: 8px;
}
.equipo-formulario .opcion-equipo { display: block; margin-block: 10px; }
/* ------------------------------------------- los mensajes al equipo

   El formulario de escribir uno. Las tres maneras de elegir a quién van en
   fila, una debajo de otra y con su marco: son tres decisiones distintas y
   en línea se leían como una sola frase. */

.formulario-mensaje { padding: clamp(16px, 4vw, 32px); margin-block: 20px; max-width: 840px; }
.formulario-mensaje h2 { margin: 0 0 24px; font-size: 21px; color: var(--marino); }
.formulario-mensaje > label { display: block; margin-block: 22px; color: var(--marino); font-weight: 600; }
.formulario-mensaje input:not([type="radio"]):not([type="checkbox"]),
.formulario-mensaje textarea {
  display: block; width: 100%; min-width: 0; box-sizing: border-box;
  margin-top: 8px; padding: 12px 14px; border: 1px solid var(--borde);
  border-radius: 12px; background: var(--campo); color: var(--marino); font-size: 16px;
}
.formulario-mensaje textarea { font-family: inherit; font-weight: 400; line-height: 1.65; resize: vertical; }
.formulario-mensaje .pie-campo {
  display: block; margin-top: 6px; color: var(--suave); font-size: 13.5px; font-weight: 400;
}
.formulario-mensaje code {
  display: inline-block; padding: 3px 8px; border-radius: 8px;
  background: var(--segmento-fondo); color: var(--segmento); font-size: 12px;
}
.a-quienes { min-width: 0; margin: 26px 0; padding: 0; border: 0; }
.a-quienes legend { padding: 0 0 10px; color: var(--marino); font-weight: 600; }
.una-opcion {
  display: flex; align-items: center; gap: 12px; padding: 14px;
  border: 1px solid var(--borde); border-radius: 12px; cursor: pointer;
}
.una-opcion + .una-opcion { margin-top: 8px; }
.una-opcion > span { display: flex; flex: 1; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; }
.una-opcion strong { font-weight: 600; color: var(--marino); line-height: 1.35; }
.una-opcion .apagado { flex-shrink: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.una-opcion:has(input:checked), .uno-a-mano:has(input:checked) {
  background: var(--segmento-fondo); border-color: var(--segmento);
}
.formulario-mensaje input:is([type="radio"], [type="checkbox"]) {
  flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0; accent-color: var(--segmento);
}
.formulario-mensaje :is(input, textarea):focus-visible {
  outline: 2px solid var(--segmento); outline-offset: 3px;
}
.a-mano-lista {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--borde);
}
/* La rejilla no debe imponerse al plegado: cuarenta y cinco casillas distraen
   cuando se ha elegido mandar a todos. Sin guion siguen siendo accesibles. */
.a-mano-lista[hidden] { display: none; }
.uno-a-mano {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px;
  border: 1px solid var(--borde); border-radius: 10px; cursor: pointer;
  color: var(--marino); overflow-wrap: anywhere;
}
.uno-a-mano > span { min-width: 0; }
.uno-a-mano .apagado { display: block; font-size: 12.5px; }
.ayuda-huecos { margin-top: -10px; }
.ejemplos-huecos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 24px; }
.ejemplos-huecos > div { padding: 12px; border: 1px solid var(--borde); border-radius: 12px; }
.ejemplos-huecos dd { margin: 6px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.acciones-mensaje { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--borde); }
.tabla-mensajes { margin-block: 24px; }
.tabla-mensajes td { white-space: normal; overflow-wrap: anywhere; padding-block: 14px; }
.tabla-mensajes td a { color: var(--marino); font-weight: 600; }
.tabla-mensajes th:first-child { width: 32%; }
.tabla-mensajes th:last-child { width: 90px; }
/* En móvil se conservan los datos junto a su etiqueta, sin obligar a deslizar
   la tabla para descubrir cuánto falta por mandar. */
@media (max-width: 600px) {
  .formulario-mensaje .una-opcion { padding: 12px; gap: 8px; }
  .formulario-mensaje .una-opcion > span { gap: 8px; }
  .formulario-mensaje .ejemplos-huecos { grid-template-columns: minmax(0, 1fr); }
  .tabla-mensajes thead { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
  .tabla-mensajes tbody { display: grid; gap: 12px; }
  .tabla-mensajes tbody tr { display: grid; padding: 16px; border: 1px solid var(--borde); border-radius: 16px; background: var(--papel); }
  .tabla-mensajes tbody td { display: block; max-width: none; padding: 5px 0; border: 0; }
  .tabla-mensajes td[data-etiqueta] { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; align-items: baseline; }
  .tabla-mensajes td[data-etiqueta]::before { content: attr(data-etiqueta); color: var(--suave); font-size: 13px; }
  .tabla-mensajes .semaforo { justify-self: start; }
}

/* --------------------------------------------- la lista de monitores

   Una línea por persona, con lo suyo dentro. Las columnas son las mismas
   piezas que las listas de WhatsApp —`wa-fila`, `wa-col`— porque es la misma
   forma: se abre la fila y dentro está lo que se hace con ella. */

/* El tope va en la pantalla entera y no solo en la lista: si lo lleva solo
   la lista, el título y el botón de Mensajes siguen hasta el borde y la lista
   se queda corta por la derecha, que es peor que el problema que arregla. */
.pantalla-monitores {
  --segmento: var(--monitores-azul); --segmento-fondo: var(--monitores-fondo);
  max-width: 88rem;
}
/* Adrián las ve «muy descompensadas»: los estados también deben recibir
   espacio sobrante. El tope evita separar los datos en pantallas muy anchas;
   al estrechar, nombre y correo ceden sitio al teléfono y a las pastillas. */
.wa-de-monitores {
  --wa-columnas: minmax(0, 2fr) minmax(4.5rem, .6fr)
    minmax(0, 1.5fr) minmax(9rem, 1fr) minmax(7.5rem, .9fr)
    minmax(7rem, .8fr) minmax(8.5rem, 1fr) 3.5rem;
}
/* La cabecera cuenta también el píxel de borde que tienen las filas. */
.wa-de-monitores > .wa-cabeza { padding-inline: 17px; }
.monitor-fila {
  border: 1px solid var(--borde); border-radius: 12px; background: var(--papel);
}
.monitor-fila > summary { cursor: pointer; list-style: none; padding: 15px 16px; font-size: 14px; }
.monitor-fila > summary::-webkit-details-marker { display: none; }
.monitor-fila:hover { border-color: var(--suave); }
.monitor-fila[open] { border-color: var(--segmento); }
.monitor-fila[open] > summary { background: var(--segmento-fondo); border-radius: 11px 11px 0 0; }
.monitor-fila > summary:focus-visible,
.filtro-monitores .pastilla-filtro:focus-visible { outline: 2px solid var(--segmento); outline-offset: 3px; }
.monitor-fila .wa-nombre { flex-wrap: nowrap; align-items: center; gap: 10px; }
.monitor-fila .wa-nombre strong { overflow-wrap: normal; }
.monitor-fila .wa-nombre::before { content: '›'; color: var(--segmento); font-size: 23px; line-height: 1; }
.monitor-fila[open] .wa-nombre::before { transform: rotate(90deg); }
/* Las celdas permiten partir correos largos; las pastillas deben saltar
   entre palabras, para que «navegador» se lea entero también en tarjeta. */
.monitor-fila .semaforo {
  max-width: 100%; white-space: normal; overflow-wrap: normal; line-height: 1.35;
}
@media (min-width: 1201px) {
  /* El número y WhatsApp se leen juntos; «El navegador» cabe entero.
     Avisos conserva el salto entre palabras si el dispositivo es largo. */
  .monitor-fila [data-etiqueta="Móvil"] {
    display: flex; align-items: center; gap: 4px; white-space: nowrap;
  }
  .monitor-fila [data-etiqueta="Móvil"] > * { flex-shrink: 0; }
  .monitor-fila [data-etiqueta="Abre desde"] .semaforo { white-space: nowrap; }
}
.monitor-pendiente { color: var(--marino); font-weight: 600; }
.monitor-pendiente::before { content: '·'; color: var(--coral); margin-right: 5px; font-weight: 700; }
.monitor-dentro { padding: 18px 20px; border-top: 1px solid var(--borde); }
.titulo-datos-monitor { margin: 0 0 12px; font-size: 15px; color: var(--segmento); }
.datos-monitor {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px 16px;
}
.datos-monitor label {
  grid-column: span 2; min-width: 0; display: flex; flex-direction: column; gap: 5px;
  color: var(--marino); font-size: 13.5px; font-weight: 600;
}
.datos-monitor label:nth-of-type(-n+2) { grid-column: span 3; }
.datos-monitor input {
  min-width: 0; width: 100%; box-sizing: border-box; padding: 9px 12px; font-size: 16px; font-weight: 400;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--campo); color: var(--marino);
}
.datos-monitor input:focus-visible { outline: 2px solid var(--segmento); outline-offset: 2px; background: var(--papel); }
.acciones-monitor {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  border-top: 1px solid var(--linea); padding-top: 14px; margin-top: 2px;
}
.acciones-monitor .boton.primario { background: var(--segmento); border-color: var(--segmento); }
.acciones-monitor .boton.claro { margin-left: auto; }
.aviso-guardado { color: var(--segmento); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
.aviso-guardado.mal { color: var(--coral-oscuro); }
.pie-monitor { margin: 14px 0 0; font-size: 13px; overflow-wrap: anywhere; }
/* El móvil, con su código de país delante y el número pegado a él. */
.con-prefijo { display: flex; gap: 8px; min-width: 0; }
.con-prefijo .prefijo { flex: 0 0 auto; width: auto; }
.con-prefijo input { flex: 1 1 auto; min-width: 0; }
.el-movil { font-variant-numeric: tabular-nums; }
/* Por qué está en activo: «3 grupos», «a mano». Va pegado a la pastilla. */
.porque-activo { display: block; margin-top: 2px; color: var(--suave); font-size: 12px; }
.forzar-activo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 13.5px;
}
.pista-activos { margin: 8px 0 0; font-size: 13px; }
/* Con qué entra: el correo pequeño y debajo la contraseña o el «Propia». */
.su-correo {
  display: block; color: var(--suave); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.su-clave {
  display: inline-block; margin-top: 3px; padding: 2px 8px; border-radius: 7px;
  background: var(--campo); border: 1px dashed var(--borde);
  color: var(--marino); font-size: 12.5px; cursor: pointer;
}
.su-clave:hover { border-style: solid; border-color: var(--segmento, var(--marino)); }
.la-clave, .la-prueba {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--linea); font-size: 13.5px;
}
/* Adrián quiere probar con cada monitor: debajo del botón la explicación
   larga se lee seguida, incluso cuando la ficha se abre en un móvil. */
.la-prueba { flex-direction: column; align-items: flex-start; }
.la-prueba .probar-push {
  margin-top: 0; min-height: 44px; max-width: 100%;
  white-space: normal; font-size: 13.5px;
}
.la-prueba .resultado-prueba {
  max-width: 70ch; margin-top: 0; font-size: 14px;
}
.la-clave code {
  padding: 2px 8px; border-radius: 7px; background: var(--campo); color: var(--marino);
}
.clave-puesta { color: var(--suave); }
/* La salida de una decisión a mano: un enlace, no un botón más. Se usa poco
   y no tiene que competir con el interruptor de al lado. */
.como-estaba {
  padding: 0; border: 0; background: none; color: var(--suave); font: inherit;
  font-size: 13px; text-decoration: underline; cursor: pointer;
}
.como-estaba:hover { color: var(--marino); }
/* Qué quiere decir cada columna, al pie. Son tres frases, no una tabla: se
   leen una vez y se olvidan, pero la primera vez hacen falta. */
.que-quiere-decir {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px 22px; margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--linea);
  color: var(--suave); font-size: 13px; line-height: 1.5;
}
.que-quiere-decir dt { color: var(--marino); font-weight: 700; margin-bottom: 3px; }
.que-quiere-decir dd { margin: 0; }
/* Las pastillas de filtro de esta pantalla: las de siempre, con su cuenta. */
.filtro-monitores .pastillas-filtro { display: flex; flex-wrap: wrap; gap: 8px; }
.filtro-monitores .pastilla-filtro { border: 1px solid var(--borde); padding: 6px 12px; color: var(--marino); white-space: normal; }
.filtro-monitores .pastilla-filtro.puesta { background: var(--segmento-fondo); border-color: var(--segmento); color: var(--segmento); }
.filtro-monitores .pastilla-filtro.puesta::before { content: '✓'; }
.filtro-monitores .pastilla-filtro .cuenta { background: var(--campo); color: var(--suave); font-variant-numeric: tabular-nums; }
.filtro-monitores { margin: 18px 0 14px; }
.resumen-monitores {
  display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 16px;
  color: var(--suave); font-size: 14px;
}
.resumen-monitores > span { display: inline-flex; gap: 6px; align-items: baseline; }
.resumen-monitores > span:first-child { color: var(--segmento); }
.resumen-monitores strong { color: var(--marino); font-size: 17px; font-variant-numeric: tabular-nums; }
/* Con la barra lateral y los márgenes, por debajo de este ancho ya no queda
   sitio para las ocho columnas sin quitarle espacio al nombre. Las etiquetas
   viajan con el dato cuando desaparece la cabecera. */
@media (max-width: 1200px) {
  .wa-de-monitores > .wa-cabeza { display: none; }
  .monitor-fila > .wa-fila { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
  .monitor-fila .wa-nombre { grid-column: 1 / -1; padding-bottom: 8px; border-bottom: 1px solid var(--linea); }
  .monitor-fila [data-etiqueta] { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; text-align: left; }
  .monitor-fila [data-etiqueta]::before { content: attr(data-etiqueta); flex-basis: 100%; color: var(--suave); font-size: 12px; font-weight: 400; }
}
@media (max-width: 540px) {
  /* Una sola columna deja leer las pastillas y los correos en móviles pequeños. */
  .monitor-fila > .wa-fila { grid-template-columns: minmax(0, 1fr); }
  .monitor-dentro { padding: 16px; }
  .datos-monitor { grid-template-columns: minmax(0, 1fr); }
  .datos-monitor label:nth-of-type(n) { grid-column: 1; }
  .acciones-monitor .boton.claro { margin-left: 0; flex-basis: 100%; text-align: center; }
  .resumen-monitores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
}

.miembro-proyecto { padding-block: 20px; border-bottom: 1px solid #ddd; }
.miembro-proyecto button { margin-top: 10px; }
.texto-modelo { max-width: 760px; padding: 24px; background: white; }
.modelo-para-imprimir { display: none; }
@media print {
  body.imprimiendo-modelo > * { display: none !important; }
  body.imprimiendo-modelo > .modelo-para-imprimir { display: block !important; }
  .modelo-para-imprimir { color: black; font: 12pt/1.6 serif; padding: 0; }
}

/* --------------------------------------------------------- el calendario

   Doce meses de un vistazo. Lo que se busca aqui no es un dia concreto sino la
   forma del curso: donde empieza, donde acaba y donde estan los huecos. Por eso
   caben los doce a la vez y los dias son pequenos. */

.calendario {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px 20px;
}
.mes h3 {
  margin: 0 0 8px; font-size: 14.5px; font-weight: 600; color: var(--marino);
  text-transform: capitalize;
}
.mes h3 .apagado { font-weight: 400; font-size: 13px; }
.semana-cabecera, .dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.semana-cabecera span {
  text-align: center; font-size: 11px; font-weight: 600; color: var(--suave);
  padding-bottom: 3px;
}
.dias .hueco { aspect-ratio: 1; }
.dia {
  aspect-ratio: 1; border: 0; border-radius: 6px; cursor: pointer;
  font: inherit; font-size: 12px; line-height: 1;
  display: grid; place-items: center;
  background: var(--campo); color: var(--suave);
}
.dia:hover { outline: 2px solid var(--coral); outline-offset: -2px; }
/* Dentro del periodo de actividad: es cuando hay clase. */
.dia.dentro { background: #e6f2ea; color: #1a7f4b; font-weight: 600; }
/*
 * El festivo manda sobre todo lo demas: es lo que se viene a ver. Y se pinta
 * igual caiga el dia que caiga, porque en Zlalom no hay diferencia entre
 * semana y fin de semana: 20 grupos dan clase SOLO en sabado o domingo. Aqui
 * habia un .dia.dentro.finde que pintaba el fin de semana mas palido y que,
 * por pesar mas, se comia el coral del festivo cuando caia en sabado.
 */
.dia.festivo { background: var(--coral-flojo); color: var(--coral-oscuro); font-weight: 700; }
.dia.fuera { background: var(--papel); color: #c3ccd6; }
.dia:disabled { opacity: .5; cursor: wait; }

.leyenda-calendario { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; margin-bottom: 16px; }
.leyenda-calendario > span { display: inline-flex; align-items: center; gap: 7px; }
.leyenda-calendario > span::before {
  content: ''; width: 12px; height: 12px; border-radius: 4px;
}
.leyenda-calendario .dentro::before { background: #e6f2ea; }
.leyenda-calendario .festivo::before { background: var(--coral-flojo); }
.leyenda-calendario .fuera::before { background: var(--papel); border: 1px solid var(--borde); }

/* La barra de modos: mientras se esta marcando, se ve que se esta marcando. */
.barra-modos {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
}
.barra-modos.editando { padding: 10px 12px; background: var(--coral-flojo); border-radius: 12px; }
.barra-modos .apagado { font-size: 13.5px; }
.acciones-modo { display: flex; gap: 8px; margin-left: auto; }
.acciones-modo[hidden] { display: none; }

/* Lo que se esta marcando ahora, antes de guardar. */
.dia.eligiendo { cursor: cell; }
.dia.marcado { background: #d8ece0; color: #15693e; }
.dia.marcado-borde { outline: 2px solid var(--coral-oscuro); outline-offset: -2px; font-weight: 700; }
/* El primer y el ultimo dia del curso, ya guardados. */
.dia.primero, .dia.ultimo { box-shadow: inset 0 0 0 2px #1a7f4b; }
/* Hoy, para no perderse en doce meses. */
.dia.hoy::after {
  content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--coral);
}
.dia { position: relative; }

.pestanas-atajos { margin-bottom: 16px; }
.pestanas-atajos .pestana { text-decoration: none; }
/*
 * Las tablas de todos los atajos estan en la pagina y solo se ve la del
 * elegido. El [hidden] del navegador lo tumba cualquier display de aqui, asi
 * que se dice a mano.
 */
.panel-atajo[hidden] { display: none; }
.tabla-atajo { max-width: 100%; }

/* Las sesiones del grupo: treinta y tantas filas, agrupadas por mes. */
.resumen-sesiones { margin-bottom: 14px; font-size: 14px; color: var(--marino); }
/* Los meses vienen en minuscula de calendario.js, como en el calendario. */
.mes-sesiones { text-transform: capitalize; }
/* Ancha del todo desde que lleva quien da cada clase: el nombre es el dato
   que se mira, y partido en tres lineas no se lee. */
.tabla-sesiones td { padding-top: 7px; padding-bottom: 7px; }
/* La fecha y la hora no se parten; lo que crece es la columna del nombre. */
.tabla-sesiones td:nth-child(2), .tabla-sesiones td:nth-child(3) { white-space: nowrap; }
/* El dia festivo se lee de un vistazo: ese dia no se pasa lista. */
.tabla-sesiones tr.sesion-festiva td:nth-child(2) { color: var(--coral-oscuro); }
.tabla-atajo .fila-festivos td { color: var(--coral-oscuro); font-size: 13px; }
.tabla .numero, .tabla th.numero { text-align: right; }
/* ------------------------------------------------- crear sesiones

   La seccion de crear las sesiones de varios grupos. La tabla lleva el peso:
   ni tarjetas de numeros arriba ni pasos de asistente, que esto es una lista de
   192 grupos de la que se eligen unos cuantos. */
.filtros-sesiones select { max-width: 230px; }
/*
 * El reparto de anchos. La tabla es de reparto fijo —si no, un nombre de 70
 * caracteres la estira mas alla de la pantalla— asi que las columnas cortas
 * llevan su ancho y lo que sobra se lo queda el nombre del grupo, que es lo que
 * de verdad hay que leer.
 */
.tabla-grupos-sesiones .col-casilla { width: 38px; text-align: center; padding-right: 0; }
.tabla-grupos-sesiones .col-inscritos { width: 90px; }
.tabla-grupos-sesiones .col-horario { width: 155px; }
.tabla-grupos-sesiones .col-periodo { width: 185px; }
.tabla-grupos-sesiones .col-situacion { width: 190px; }
.tabla-grupos-sesiones .col-aplica { width: 140px; }
/*
 * El nombre del grupo si se parte en dos lineas: son nombres de 70 caracteres y
 * cortarlos con puntos suspensivos deja sin distinguir "Lunes 15:30 Intermedio"
 * de "Lunes 16:30 Intermedio", que es justo lo que los diferencia.
 */
.tabla-grupos-sesiones td:nth-child(2), .tabla-grupos-sesiones th:nth-child(2) {
  white-space: normal;
}
/*
 * El nombre del grupo y, debajo y mas flojo, donde se da. Dos datos en una
 * celda: con seis columnas, una para la instalacion dejaria el nombre en dos
 * lineas en la mitad de las filas.
 */
/* El dato de debajo, en la tabla y tambien en la barra de abajo. */
.dato-debajo { display: block; font-size: 12.5px; margin-top: 2px; }
.tabla-grupos-sesiones td { vertical-align: middle; }
/*
 * Los tres estados con la misma forma: el estado arriba y el detalle debajo.
 * Lo pendiente va en marino y no en coral: con 189 grupos por hacer, 189
 * pastillas rojas parecen 189 errores, y no lo son. El coral se queda para lo
 * que si es un problema —un grupo que no puede tener sesiones— y para lo que
 * hay que ir a revisar.
 */
.tabla-grupos-sesiones .estado { color: var(--marino); font-weight: 600; font-size: 14px; }
.tabla-grupos-sesiones .estado-hecho { color: var(--suave); font-weight: 500; }
.tabla-grupos-sesiones .estado-malo { color: var(--coral-oscuro); }
/* Quitar la seleccion es lo secundario: un enlace, no un boton que compita. */
.enlace-flojo {
  border: 0; background: none; font: inherit; font-size: 14px; cursor: pointer;
  color: var(--suave); text-decoration: underline; padding: 6px 2px;
}
.enlace-flojo:hover { color: var(--marino); }
.tabla-grupos-sesiones .revisar { display: block; color: var(--coral-oscuro); font-size: 13px; }
.sin-nada { padding: 22px 24px; }

/*
 * La barra de antes de pulsar. Va pegada abajo y sale sola cuando hay algo
 * marcado: es el resumen de lo que va a pasar, no un adorno, y por eso lleva
 * los mismos numeros que el boton.
 */
.barra-crear {
  /*
   * Fija y no sticky: la tarjeta lleva overflow:hidden para redondear sus
   * esquinas, y dentro de un overflow el sticky no pega. Se queda pegada abajo
   * a la derecha de la barra lateral, que son 216px.
   */
  position: fixed; left: 216px; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 14px 30px;
  background: var(--papel); border-top: 1px solid var(--borde);
  box-shadow: 0 -6px 18px rgba(21, 48, 77, .09);
}
@media (max-width: 760px) { .barra-crear { left: 0; padding: 12px 16px; } }
/*
 * El hueco del final lo pone el JavaScript con el alto de verdad de la barra y
 * solo cuando esta puesta. Un margen fijo aqui tapa la ultima fila si la barra
 * se parte en dos lineas, y deja un agujero cuando no hay nada marcado.
 */
/* Un display de autor se come el [hidden] del navegador si no se dice. */
.barra-crear[hidden] { display: none; }
.barra-crear-cuenta { font-size: 14.5px; color: var(--marino); }
.barra-crear-cuenta .apagado { font-size: 13px; }
.barra-crear-botones { display: flex; gap: 10px; align-items: center; }

/* Cada propuesta en su fila: el nombre se escribe antes de crearla. */
.propuestas { flex-direction: column; align-items: stretch; }
.propuesta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.propuesta input[type=text] { width: 230px; }
.propuesta .apagado { font-size: 13.5px; }
.propuesta button { margin-left: auto; }


/* =====================================================================
   Pasar lista

   Lo que usa un monitor, y casi siempre desde el movil en mitad de una
   pista: botones grandes, lo que importa a la vista y nada que haya que
   apuntar. La X roja y la V verde son las de la plataforma vieja, que es lo
   que los monitores llevan anos pulsando.
   ===================================================================== */

/*
 * Las clases del dia, cada una en su pastilla. Van separadas de verdad —borde y
 * aire— porque un monitor con cuatro grupos tiene que distinguir de un vistazo
 * donde acaba uno y empieza el otro.
 */
.clases-del-dia { display: flex; flex-direction: column; gap: 12px; }
.clase-del-dia {
  display: grid; grid-template-columns: 92px 1fr auto; gap: 16px; align-items: center;
  padding: 18px 20px; background: var(--papel); border: 1px solid var(--borde);
  border-radius: 18px; text-decoration: none; color: inherit;
  /* Una sombra suave para que la pastilla se despegue del fondo: con el papel y
     el fondo tan parecidos, un borde de 1px no la separaba de nada. */
  box-shadow: 0 2px 12px rgba(21, 48, 77, .1);
  /*
   * Y un canto de color a la izquierda, el mismo lenguaje que las filas de la
   * lista: coral mientras la lista esta sin pasar, gris cuando ya esta. Es lo
   * que de verdad hace que cada grupo se vea como una pieza aparte.
   */
  border-left: 5px solid var(--coral);
}
.clase-del-dia:hover { border-color: var(--coral); box-shadow: 0 3px 14px rgba(21, 48, 77, .11); }
/*
 * La pasada tambien es una pastilla, y se tiene que ver como tal. Antes iba con
 * el fondo de la pagina —el mismo gris— y dejaba de parecer una pastilla: se
 * disolvia en el fondo. Lo que cambia es el canto, que se pone verde como su
 * etiqueta, y nada mas: que este hecha no es motivo para esconderla.
 */
.clase-del-dia.pasada { border-left-color: #1a7f4b; }
/*
 * Pasada pero con gente sin contestar: ni coral ni verde, amarillo. No es que
 * falte por hacer —ya se guardo— ni esta terminada: es "ven a mirar esto".
 */
.clase-del-dia.a-medias { border-left-color: #e0a92a; }
.marca-ojo {
  display: inline-block; border-radius: 50px; padding: 3px 11px; font-size: 12.5px;
  white-space: nowrap; background: #fff8e1; color: #6b5300; font-weight: 600;
}
/* De que tipo es, en que zona y en que instalacion: lo que hace falta para
   plantarse en la clase correcta. */
.clase-donde { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dato-grupo {
  font-size: 12.5px; color: var(--suave); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: 50px; padding: 2px 10px;
}

/* Pasada en verde y sin pasar en coral: es lo unico que se mira de lejos. */
.marca-si {
  display: inline-block; border-radius: 50px; padding: 3px 11px; font-size: 12.5px;
  white-space: nowrap; background: #eaf7f0; color: #1a7f4b; font-weight: 600;
}
.clase-hora { font-size: 17px; font-weight: 700; color: var(--marino); }
.clase-hora .apagado { display: block; font-size: 13px; font-weight: 500; }
.clase-que strong { color: var(--marino); font-weight: 600; }
.clase-estado { text-align: right; }
/* "HOY, JUEVES": el dia de la semana es lo que se comprueba de un vistazo. */
.titulo-dia { letter-spacing: .5px; }
.titulo-dia strong { font-weight: 700; }

/* El calendario delante del campo de fecha, para que se lea como "ir a otro dia". */
.ir-a-dia { display: flex; align-items: center; }
.ir-a-dia label { display: flex; align-items: center; gap: 8px; padding: 0 14px 0 12px;
  border: 1px solid var(--borde); border-radius: 50px; background: var(--papel);
  color: var(--suave); min-height: 44px; position: relative; }
/* El calendario del navegador se estira invisible por encima: asi se ve UN
   calendario —el nuestro— y se abre tocando la pastilla entera. */
.ir-a-dia input::-webkit-calendar-picker-indicator {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  opacity: 0; cursor: pointer;
}
.ir-a-dia .icono { width: 18px; height: 18px; flex: 0 0 18px; }
/* La cadena de :not() repetida a proposito: la regla base de los input vale
   (0,5,1) y se come cualquier ".ir-a-dia input", que vale (0,1,1). */
.ir-a-dia input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]) {
  width: auto; border: 0; padding: 4px 0; background: none; color: var(--marino);
}
.ir-a-dia input:focus { box-shadow: none; }
.acciones-dia { flex-wrap: wrap; gap: 8px; }
.acciones-dia .boton { min-height: 44px; display: flex; align-items: center; }

/*
 * Los grupos del monitor, en pastillas. Es lo primero que ve al entrar y de un
 * toque esta en la lista de hoy, que es a lo que viene.
 */
.grupos-pastillas { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 22px; }
.grupo-pastilla {
  display: block; padding: 14px 20px; min-height: 56px;
  background: var(--papel); border: 1px solid var(--borde);
  /* Pastilla, pero no de 50px: estos nombres ocupan tres lineas y el redondeo
     grande deja el texto nadando en las esquinas. */
  border-radius: 18px;
  text-decoration: none; color: inherit;
}
.grupo-pastilla:hover { border-color: var(--coral); }
.grupo-pastilla-nombre { display: block; color: var(--marino); font-weight: 600; font-size: 15.5px; }
.grupo-pastilla-estado { display: block; font-size: 13px; color: var(--coral-oscuro); margin-top: 2px; }
/* Pasada o de otro dia: no reclama nada, asi que se apaga. */
.grupo-pastilla.pasada, .grupo-pastilla.otro-dia { background: var(--fondo); }
.grupo-pastilla.pasada .grupo-pastilla-estado,
.grupo-pastilla.otro-dia .grupo-pastilla-estado { color: var(--suave); }
.pie-inicio { margin-top: 10px; font-size: 14px; }
.pie-inicio a { color: var(--coral); }

/* Volver, encima del titulo: es lo primero que se busca al entrar donde no era. */
.volver-arriba {
  display: inline-block; margin: 0 0 10px; color: var(--coral);
  text-decoration: none; font-size: 15px; padding: 6px 0;
}
.volver-arriba:hover { text-decoration: underline; }

/* Las pestanas del grupo, que son enlaces para que cada una tenga direccion. */
.pestanas-grupo-monitor { margin-bottom: 16px; padding-top: 0; }
.pestanas-grupo-monitor .pestana { text-decoration: none; min-height: 44px;
  display: flex; align-items: center; }

/* Los datos del grupo, en la pestana de Informacion. */
.datos-grupo { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; }
.datos-grupo dt { color: var(--suave); font-size: 14px; }
.datos-grupo dd { margin: 0; color: var(--marino); font-size: 15px; }

/* El coordinador elige de quien es la lista: es lo primero que hace. */
.elegir-monitor { padding: 18px 20px; margin-bottom: 18px; }
.elegir-monitor label { display: flex; flex-direction: column; max-width: 360px; }

/*
 * La lista: un alumno por fila y la fila entera es el boton. Con una mano en
 * mitad de una pista, el sitio donde tocar tiene que ser todo lo grande que se
 * pueda, no una casilla de 20px.
 *
 * Tres estados, y la barra de la izquierda es la que los dice de un vistazo:
 * gris sin contestar, verde vino, coral no vino. El icono acompana, porque al
 * sol el color solo no basta.
 */
.lista-asistencia { list-style: none; margin: 0; padding: 0; }
.alumno-lista { border-top: 1px solid var(--linea); }
.alumno-lista:first-child { border-top: 0; }
.marca-asistencia {
  width: 100%; display: flex; align-items: center; gap: 14px;
  padding: 0 20px 0 0; min-height: 56px; cursor: pointer;
  background: none; border: 0; font: inherit; text-align: left;
}
.barra-estado {
  flex: 0 0 8px; align-self: stretch; background: var(--borde);
  border-radius: 0 4px 4px 0;
}
.alumno-nombre {
  flex: 1; min-width: 0; color: var(--marino); font-weight: 600; font-size: 15.5px;
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
}

/*
 * Lo que trae de las clases de antes, debajo del nombre.
 *
 * Debajo y no al lado: el nombre es lo que se busca con el dedo mientras se
 * pasa lista, y nada puede empujarlo ni partirlo en dos lineas.
 *
 * En rojo desde la primera falta. Empezo en gris la suelta y en coral las
 * seguidas, y Adrian lo cambio: "ponlo ya en rojo desde que falta una". Tiene
 * razon, porque el gris es el color de lo que se puede no leer, y una falta es
 * justo lo que hay que ver para comentarsela. Las seguidas se siguen
 * distinguiendo, pero por el peso.
 */
.falto-antes {
  font-weight: 400; font-size: 12.5px; line-height: 1.3; color: var(--coral-oscuro);
}
.falto-antes.seguidas { font-weight: 600; }
.porque-antes { font-style: italic; }
.marca-icono { flex: 0 0 auto; font-size: 19px; line-height: 1; color: var(--suave); }
.marca-icono .si, .marca-icono .no { display: none; }

/* Sin contestar: gris y sin icono. No dice que faltara: dice que no se sabe. */
.alumno-lista.sin-contestar .marca-icono::after { content: '—'; }
.alumno-lista.vino .barra-estado { background: #1a7f4b; }
.alumno-lista.vino .marca-asistencia { background: #f3fbf6; }
.alumno-lista.vino .marca-icono .si { display: inline; color: #1a7f4b; }
.alumno-lista.falto .barra-estado { background: var(--coral); }
.alumno-lista.falto .marca-asistencia { background: var(--coral-flojo); }
.alumno-lista.falto .marca-icono .no { display: inline; color: var(--coral-oscuro); }
.marca-asistencia:disabled { cursor: default; opacity: .6; }

/*
 * La pregunta del final, en amarillo. Lo pidio Adrian asi: tiene que llamar la
 * atencion, pero no es un error ni una alarma —para eso esta el coral— sino lo
 * ultimo que hay que mirar antes de cerrar la lista.
 */
.pregunta-final {
  padding: 16px 20px; margin-top: 14px;
  background: #fff8e1; border: 1px solid #f2dfa4;
}
.pregunta-final label { display: block; color: #6b5300; font-weight: 600;
  font-size: 15px; margin-bottom: 8px; }
.pregunta-final .apagado { font-size: 12.5px; }
.pregunta-final input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]) {
  background: var(--papel); border-color: #e4cd8c;
}
/* Lo que queda a medias se ve en la barra de abajo antes de irse. */
.a-medias { color: var(--coral-oscuro); }
/*
 * El motivo, debajo del nombre y solo en quien no vino. La cadena de :not()
 * repetida a proposito: la regla base de los input vale (0,5,1) y se come
 * cualquier ".alumno-lista .motivo", que vale (0,2,0).
 */
.motivo:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]) {
  display: none; width: calc(100% - 42px); margin: 0 20px 12px 22px;
  font-size: 14px; padding: 9px 12px;
}
.alumno-lista.falto .motivo:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]) {
  display: block;
}

/* Lo que no se ha podido guardar se ve: el monitor esta mirando la pantalla. */
.alumno-lista.sin-guardar { background: var(--coral-flojo); }
.error-guardado { color: var(--coral-oscuro); }

/*
 * El boton de guardar, al final del contenido y no flotando por encima. Lo
 * pidio Adrian asi y tiene razon: flotando tapaba al ultimo nino de la lista,
 * que es justo al que vas a marcar.
 */
.barra-lista {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 16px 20px; margin-top: 14px;
  background: var(--papel); border: 1px solid var(--borde); border-radius: 16px;
}
@media (max-width: 760px) {
  /*
   * En el movil la barra cabe en una linea o no cabe: el boton y la cuenta en
   * fila, y el renglon de debajo fuera. Partida en dos lineas se comia media
   * pantalla, que es donde estan los alumnos.
   */
  .barra-lista { left: 0; padding: 10px 16px; flex-wrap: nowrap; gap: 12px; }
  .barra-lista .barra-crear-cuenta { font-size: 13.5px; min-width: 0; }
  .barra-lista .dato-debajo { display: none; }
  .barra-lista .boton { white-space: nowrap; }
  /*
   * En el movil la pastilla se ordena en dos filas: arriba la hora y como esta
   * la lista, debajo el nombre y donde se da. Con la hora en una columna de
   * 76px, el nombre se partia en cuatro renglones.
   */
  .clase-del-dia { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .clase-hora { grid-column: 1; grid-row: 1; display: flex; gap: 8px; align-items: baseline; }
  .clase-hora .apagado { display: inline; font-size: 14px; }
  .clase-estado { grid-column: 2; grid-row: 1; text-align: right; }
  .clase-que { grid-column: 1 / -1; grid-row: 2; }
  .alumno-lista { padding: 10px 16px; }
  /* El nombre y el motivo, uno debajo del otro: en 375px no caben en fila. */
  .alumno-nombre { flex-direction: column; align-items: flex-start; gap: 6px; }
}


/* ------------------------------------------------- la app instalada

   La plataforma se puede poner en la pantalla de inicio del movil. Instalada
   abre a pantalla completa y sin barra de direcciones, y entonces hay cosas
   que sobran: la invitacion a instalarla, la primera.

   Son dos reglas porque hay dos maneras de saberlo. La consulta `display-mode`
   es la buena y la entiende todo lo moderno; la clase `.en-app` la pone el
   JavaScript para los iPhone viejos, que no entienden la consulta pero si
   saben decir que estan en la pantalla de inicio. */

.solo-en-app { display: none; }
@media all and (display-mode: standalone) {
  .solo-navegador { display: none !important; }
  .solo-en-app { display: block; }
}
.en-app .solo-navegador { display: none !important; }
.en-app .solo-en-app { display: block; }

/* La invitacion de la pagina de inicio: el icono, el porque y el boton.

   El margen de arriba no es decoracion: sin el, esta tarjeta se pegaba a la
   del saludo y parecia que una estaba encima de la otra. Y son 28 y no los 20
   de costumbre porque la sombra de la casa cae 10px y se difumina 30: con 20
   la sombra de la tarjeta de arriba aterriza justo sobre esta, que es lo que
   se veia solapado. */
.invitacion-app {
  display: flex; align-items: center; gap: 16px; padding: 18px 22px;
  max-width: 640px; margin-top: 28px;
}
.invitacion-app > div { flex: 1; min-width: 0; }
.invitacion-app p { margin: 2px 0 0; font-size: 14px; }
.invitacion-app .boton { flex: none; }
@media (max-width: 560px) {
  /* En el movil, el boton debajo y a lo ancho: es donde hay que tocar. */
  .invitacion-app { flex-wrap: wrap; }
  .invitacion-app .boton { width: 100%; text-align: center; }
}

/* Los pasos para instalarla. Numerados y con aire entre uno y otro: se leen
   con el movil en la mano y la pagina delante, saltando de una cosa a la
   siguiente. */
.pasos-instalar { max-width: 640px; padding: 22px 26px; margin-bottom: 18px; }
.pasos-instalar h2 { margin: 0 0 12px; }
.pasos { margin: 0; padding-left: 22px; }
.pasos li { margin-bottom: 12px; }
.lista-ventajas { margin: 0; padding-left: 22px; }
.lista-ventajas li { margin-bottom: 10px; }
/* Lo mismo que la invitacion: 28 arriba para salirse de la sombra de lo que
   tenga encima, que cae 10px y se difumina 30. */
.aviso-instalada { max-width: 640px; padding: 18px 22px; margin: 28px 0 18px; }

/* La pantalla de elegir contraseña. El porque va antes que los campos: si se
   lee despues, ya has decidido que esto es una molestia. */
.explica-clave { margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: var(--suave); }
.pista-clave { font-size: 13px; margin: -4px 0 14px; }

/* ---------------------------------------- meterse en un monitor

   El coordinador no lleva grupos: entra como cualquier monitor y pasa su
   lista. Las pastillas van pegadas a su nombre en la barra, porque forman
   parte de quien eres ahora mismo. */

.como-monitor {
  display: flex; flex-direction: column; gap: 8px; margin-top: 8px;
  padding: 10px; border: 1px solid var(--borde); border-radius: 16px;
  background: var(--fondo); min-width: 0; width: 100%; max-width: 100%;
}
.puertas-titulo { font-size: 12px; font-weight: 700; color: var(--marino); }
.puerta-lista { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.puerta-lista + .puerta-lista { border-top: 1px solid var(--borde); padding-top: 8px; }
.pastilla-monitor {
  display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0;
  background: var(--coral-flojo); color: var(--coral-oscuro);
  border-radius: 24px; padding: 0 0 0 12px; font-size: 12.5px; font-weight: 600;
  overflow-wrap: anywhere;
}
.pastilla-monitor > span, .pastilla-sitio a { flex: 1; min-width: 0; }
.pastilla-monitor button {
  flex: 0 0 44px; min-height: 44px;
  border: 0; border-radius: 50%; background: none; cursor: pointer; color: inherit;
  font: inherit; font-size: 20px;
}
.pastilla-monitor button:hover { background: var(--papel); }
.lateral-pie .pastilla-elegir {
  display: flex; align-items: center; min-height: 44px; width: 100%;
  border-radius: 24px; padding: 8px 12px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--borde); background: var(--papel);
  color: var(--marino); text-decoration: none; overflow-wrap: anywhere;
}
.lateral-pie .pastilla-elegir:hover { border-color: var(--coral); color: var(--coral-oscuro); }

/* Las dos puertas comparten forma; el color distingue persona y sitio. */
.pastilla-sitio { background: var(--cabecera); color: var(--marino); }
.pastilla-sitio a {
  display: inline-flex; align-items: center; gap: 5px; min-height: 44px;
  color: inherit; text-decoration: none;
}
.pastilla-sitio a:hover { text-decoration: underline; }
.pastilla-sitio .icono { width: 14px; height: 14px; flex-shrink: 0; }

/* El paso pendiente conserva el recorrido sin mostrar opciones hasta que
   haya zona. La indicación de cambiar viaja con la selección. */
.elige-sitio { display: flex; flex-direction: column; margin-top: 18px; padding: 20px; }
.elige-sitio > .filtro-fila, .paso-sitio-pendiente { padding: 0 0 20px; }
.elige-sitio > .filtro-fila + .filtro-fila,
.elige-sitio > .paso-sitio-pendiente {
  margin-top: 0; padding-top: 20px; border-top: 1px solid var(--borde);
}
.elige-sitio .filtro-titulo { margin-top: 0; }
.paso-sitio-pendiente .filtro-titulo {
  margin-bottom: 7px; font-size: 12.5px; font-weight: 800; letter-spacing: .8px;
}
.pastilla-sitio-forma { display: contents; }
.elige-sitio .zonas-recuperar { margin: 0; }
/* Aqui la pastilla lleva tres renglones —el nombre, los grupos y el
   «cambiar»—, asi que deja de ser una pastilla redonda del todo: con el radio
   de 50px se abombaba por los lados y parecia un globo. El alcance local deja
   intactas las de un renglon de recuperaciones. */
.elige-sitio .pastilla-zona-recuperar {
  flex-direction: column; gap: 3px; min-height: 64px; line-height: 1.35;
  border-radius: 20px; padding: 12px 18px;
}
.cuantos-sitio { display: block; font-size: 13px; font-weight: 500; }
.cambiar-sitio {
  display: flex; align-items: center; gap: 8px; margin-top: 3px;
  font-size: 12px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.pista-sitio { margin: 10px 0 0; font-size: 14px; color: var(--suave); }
.acciones-sitio {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  border-top: 1px solid var(--borde); padding-top: 20px;
}
.acciones-sitio .boton { min-height: 44px; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.acciones-sitio form { max-width: 100%; }

/* El marco y el sangrado hacen visible a quién pertenecen las tarjetas,
   como las secciones por día, sin cambiar las clases del monitor. */
.monitor-del-dia {
  margin-bottom: 20px; padding: 14px 16px 16px;
  background: var(--cabecera); border: 1px solid var(--borde); border-radius: 16px;
}
.titulo-monitor-dia {
  margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--marino);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; overflow-wrap: anywhere;
}
.titulo-monitor-dia .apagado { font-size: 14px; font-weight: 500; }
.contenido-monitor-dia { padding-left: 18px; border-left: 3px solid var(--borde); }
@media (max-width: 700px) {
  .elige-sitio { padding: 16px; }
  .monitor-del-dia { padding: 12px 10px; }
  .contenido-monitor-dia { padding-left: 8px; }
}

/* La pantalla de elegir: una tarjeta por monitor, grande para el dedo. */
.rejilla-monitores { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.tarjeta-monitor {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 14px;
  padding: 14px 16px; cursor: pointer; font: inherit; color: inherit; min-height: 64px;
}
.tarjeta-monitor:hover { border-color: var(--coral); }
.tarjeta-monitor.puesto { border-color: var(--coral); background: var(--coral-flojo); }
.tarjeta-monitor .quien { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.tarjeta-monitor .quien strong { font-size: 15.5px; }
.tarjeta-monitor .quien .apagado { font-size: 13px; }
.tarjeta-monitor .marca {
  flex: none; font-size: 12.5px; font-weight: 600; color: var(--coral-oscuro);
  background: var(--coral-flojo); border-radius: 50px; padding: 4px 12px;
}
.tarjeta-monitor.puesto .marca { background: var(--papel); }
.linea-buscar-suelta { display: flex; gap: 8px; margin-bottom: 18px; max-width: 520px; }
.linea-buscar-suelta input { flex: 1; }
/* De quien es la clase, cuando estas metido en varios a la vez. */
.dato-monitor { background: var(--coral-flojo) !important; color: var(--coral-oscuro) !important; font-weight: 600; }

/* El papel y, a su derecha, en quien está metido el coordinador. En una línea
   para que no se coma la barra: lo pidió Adrián así. */
.linea-rol { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.linea-rol .rol { margin: 0; }
.como-monitor { margin-top: 0; }

/* ------------------------------------- la rejilla de asistencias de un grupo

   Los dias en filas y los alumnos en columnas, como en la plataforma vieja.
   Una fila dice como fue un dia; una columna, como va un niño. */

.nota-rejilla { margin: 0 0 12px; font-size: 13.5px; }
.rejilla-asistencias { overflow-x: auto; max-width: 100%; }
/* La tabla ocupa lo que necesite y el envoltorio se desplaza: encerrada en el
   ancho de la pantalla, quince columnas se aplastan y los nombres se quedan en
   tres letras, que no sirve para saber de quien es la columna. */
.tabla-asistencias {
  border-collapse: separate; border-spacing: 0; font-size: 13.5px;
  width: max-content; min-width: 100%;
}
.tabla-asistencias th, .tabla-asistencias td { white-space: nowrap; }
/* La fecha, pegada a la izquierda: con quince columnas, una celda del final
   sin saber de que dia es no vale para nada. */
.tabla-asistencias .col-dia {
  position: sticky; left: 0; z-index: 2; background: var(--papel);
  text-align: left; font-weight: 500; padding: 7px 12px 7px 16px;
  border-right: 1px solid var(--borde);
}
.tabla-asistencias thead .col-dia { z-index: 3; background: var(--cabecera); }
.tabla-asistencias .dia-corto {
  display: inline-block; width: 16px; color: var(--suave); font-weight: 700;
}
.tabla-asistencias .col-cuantos {
  text-align: center; color: var(--suave); padding: 7px 14px; min-width: 76px;
}
.tabla-asistencias .col-alumno {
  font-weight: 500; padding: 7px 10px; text-align: center; font-size: 12.5px;
  min-width: 96px; max-width: 150px; overflow: hidden; text-overflow: ellipsis;
}
.tabla-asistencias .col-alumno.es-baja { color: var(--suave); }
.tabla-asistencias tbody td { text-align: center; padding: 6px 8px; font-weight: 700; }
.asis-vino { color: #1a7f4b; }
.asis-falto { color: var(--coral-oscuro); }
.asis-nada { color: var(--borde); }
.asis-festiva { background: var(--linea); }
.fila-festiva .col-dia { color: var(--suave); }
.fila-festiva .marca-apagada { margin-left: 8px; font-size: 11.5px; }
.fila-hoy .col-dia { box-shadow: inset 3px 0 0 var(--coral); font-weight: 700; }
.tabla-asistencias tfoot td, .tabla-asistencias tfoot th {
  border-top: 2px solid var(--borde); padding: 8px; text-align: center; font-size: 13px;
}
.tabla-asistencias tfoot .col-dia { text-align: left; color: var(--suave); font-weight: 600; }

/* El renglón de cada mes dentro de la rejilla. Treinta y seis fechas seguidas
   son un muro: con el mes delante se busca "lo de noviembre" de un vistazo. */
.tabla-asistencias .fila-mes th,
.tabla-asistencias .fila-mes td {
  background: var(--cabecera); padding: 6px 12px 6px 16px;
  font-weight: 700; color: var(--marino); font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .04em;
  border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
}
.tabla-asistencias .fila-mes .apagado { text-transform: none; letter-spacing: 0; font-weight: 500; }

/* Los que se dieron de baja: al final de todo y en amarillo. No se quitan
   —sus asistencias de octubre son verdad— pero tampoco se mezclan con los que
   están, que son los que se miran a diario. */
.tabla-asistencias .columna-baja { background: #fff8e1; }
.tabla-asistencias thead .columna-baja { background: #fdecc0; color: #7a5d12; }
.tabla-asistencias .columna-baja.asis-nada { color: #e0cfa0; }

/* ------------------------------------- los alumnos dentro de un grupo

   La misma información que enseñaba la plataforma vieja, que es la que el
   club está acostumbrado a mirar. */

/* Ocupa lo que necesita y el envoltorio se desplaza: encerrada en el ancho de
   la pantalla, las cuatro casillas se quedaban en una y los nombres en tres
   letras. */
.tabla-inscritos { font-size: 14px; width: max-content; min-width: 100%; table-layout: auto; }
/* `.tabla td` recorta cada celda a 1px de ancho maximo para que los nombres de
   curso largos no estiren el listado. Aqui esa regla sobra y hace daño: las
   cuatro casillas se quedaban en dos y un punto. */
.tabla-inscritos td, .tabla-inscritos th {
  max-width: none; overflow: visible; white-space: nowrap;
}
.tabla-inscritos .col-casillas { white-space: nowrap; padding-left: 16px; }
.tabla-inscritos .col-correo { max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.tabla-inscritos .col-colegio { max-width: 180px; overflow: hidden; text-overflow: ellipsis;
  color: var(--suave); font-size: 13.5px; }
.tabla-inscritos .col-wa { width: 1%; padding-right: 14px; }

/* Cada casilla, un botón. Verde cuando está hecha y gris cuando no: el rojo
   lo reservamos para lo que está mal, y que falte el pago no es un error. */
/* Anchas y no cuadraditas: encima de cada una va su nombre, y "Información"
   no cabe en 24px. De paso se aciertan mejor con el dedo. */
.casilla-gestion {
  border: 1px solid var(--borde); background: var(--papel); color: var(--suave);
  width: 58px; height: 24px; border-radius: 7px; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 0; margin-right: 4px; font-weight: 700;
}
.casilla-gestion:hover { border-color: var(--coral); }
.casilla-gestion.puesta { background: #eaf7f0; border-color: #bfe6d1; color: #1a7f4b; }
.casilla-gestion[disabled] { opacity: .5; cursor: wait; }

.boton-baja { font-size: 12.5px; padding: 4px 12px; white-space: nowrap; }
.enlace-wa { display: inline-flex; color: var(--verde); }
.enlace-wa svg { width: 20px; height: 20px; fill: currentColor; }

/* Los nombres de las cuatro casillas, encima de cada una. */
.tabla-inscritos .nombre-casilla {
  display: inline-block; width: 58px; margin-right: 4px; text-align: center;
  font-size: 10.5px; font-weight: 600; color: var(--suave);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabla-inscritos .wa {
  border: 0; background: none; cursor: pointer; color: var(--verde);
  padding: 2px; display: inline-flex;
}
.tabla-inscritos .wa svg { width: 20px; height: 20px; fill: currentColor; }

/* Buscar y filtrar usuarios. */
.filtro-usuarios {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 0 24px 4px;
}
.filtro-usuarios input[type=search] { min-width: 260px; flex: 0 1 320px; }
.pastillas-rol { display: flex; flex-wrap: wrap; gap: 6px; }
.pastilla-rol {
  border: 1px solid var(--borde); background: var(--papel); color: var(--texto);
  border-radius: 50px; padding: 5px 14px; font-size: 13px; cursor: pointer; font-weight: 500;
}
.pastilla-rol:hover { border-color: var(--coral); }
.pastilla-rol.puesta { background: var(--coral); border-color: var(--coral); color: #fff; }
.cuenta-usuarios { padding: 0 24px; margin: 4px 0 10px; font-size: 13px; }

/* Los grupos que hacen uno solo, en la ficha del grupo. */
.grupos-unidos { list-style: none; margin: 0 0 12px; padding: 0; }
.grupos-unidos li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--linea);
}
.grupos-unidos li:last-child { border-bottom: 0; }
.grupos-unidos a { flex: 1; }
.grupos-unidos .pista {
  font-size: .8rem; color: var(--suave);
  background: var(--campo); border-radius: 999px; padding: 2px 8px;
}

/* Hermanar un grupo con otro escribiendo su número. */
.hermanar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 2px; }
.hermanar label { color: var(--suave); }
.hermanar input { width: 110px; }
.numero-grupo {
  font-variant-numeric: tabular-nums; color: var(--suave);
  min-width: 46px; font-size: .9rem;
}

/* Desplegables que se eligen escribiendo. */
.escribible { position: relative; display: inline-block; width: 100%; }
.escribible > select { display: none; }
.escribible-texto { width: 100%; }
.escribible.apagada .escribible-texto { background: var(--linea); color: var(--suave); }
.escribible-lista {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: 4px; list-style: none;
  max-height: 260px; overflow-y: auto;
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: 10px; box-shadow: var(--sombra);
}
.escribible-lista li {
  padding: 7px 10px; border-radius: 7px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.escribible-lista li.marcada { background: var(--campo); }
.escribible-lista li.puesta { font-weight: 600; }
.escribible-lista li.nada { color: var(--suave); cursor: default; }
.escribible-aspa {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; line-height: 1;
  font-size: 19px; color: var(--suave); padding: 0 2px;
}
.escribible-aspa:hover { color: var(--texto); }
.escribible-texto { padding-right: 26px; }
.escribible-lista li.vacia { color: var(--suave); font-style: italic; }

/* La pestaña de Contactos del monitor: a quién llamar. */
.lista-contactos { list-style: none; margin: 0; padding: 0; }
.lista-contactos li {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--linea);
}
.lista-contactos li:last-child { border-bottom: 0; }
.contacto-nombre { flex: 1; }
.sin-telefono { font-size: .85rem; }
/* El botón, grande de verdad: esto se usa de pie y con una mano. */
.boton-llamar {
  width: 44px; height: 44px; flex: 0 0 44px;
  display: grid; place-items: center;
  border: 1px solid var(--borde); border-radius: 50%;
  background: var(--papel); color: var(--verde); cursor: pointer;
}
.boton-llamar svg { width: 21px; height: 21px; fill: currentColor; }
.boton-llamar:active { background: var(--campo); }
.nota-oculto { margin: 14px 16px 4px; }
#globo-tel .pie-globo {
  border-top: 1px solid var(--linea); margin-top: 6px; padding-top: 6px;
  font-size: .8rem; color: var(--suave);
}

/* Clases hoy: el tamaño y el contraste separan niveles sin depender del color. */
.agenda-hoy .barra-herramientas {
  padding: 18px 20px; gap: 14px; background: var(--cebra);
  border-bottom: 1px solid var(--borde);
}
/* Los dos mandos juntos y a la izquierda, no uno en cada punta de la barra. */
/*
 * El dia, lo primero y lo mas grande: es a lo que se viene. "Clases hoy" queda
 * encima y pequeño, que el apartado ya lo dice la barra lateral.
 */
/*
 * El dia, el rotulo y la cuenta en UNA linea, y pegado a lo de arriba.
 *
 * Eran tres renglones —«CLASES HOY», el dia en grande y «42 clases»— y entre
 * los tres empujaban la tabla 70px hacia abajo sin decir nada que no quepa en
 * uno. Adrian el 9 de noviembre de 2026: «la parte de arriba, de clases hoy,
 * lunes, 9 de noviembre... quiero que no tenga tanto margen arriba».
 */
.cabecera-dia { margin-bottom: 8px; }
.cabecera-dia > div {
  display: flex; align-items: baseline; gap: 4px 12px; flex-wrap: wrap; min-width: 0;
}
.encima-dia { font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; }
.el-dia { font-size: 1.7rem; line-height: 1.2; margin: 0; }
.el-dia .es-hoy {
  vertical-align: middle; margin-left: 8px;
  background: var(--coral-flojo); color: var(--coral-oscuro);
  border-radius: 50px; padding: 3px 11px; font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
@media (max-width: 760px) { .el-dia { font-size: 1.35rem; } }

/*
 * Las flechas, «Hoy», el calendario y las dos maneras de mirar: todo en la
 * misma linea. «La parte de las flechas, hoy, por zonas, por monitores y el
 * calendario, quiero que salga todo en la misma linea, no que este en varias»,
 * Adrian, 9 de noviembre de 2026.
 *
 * No se partia por falta de sitio —sobraban mil pixeles—: el calendario se
 * ponia al 100% del ancho y se llevaba su propio renglon. Lo hacia la regla
 * general de inputs, que con cinco `:not()` pesa mas que `.paso-dia input`.
 * Por eso la de aqui repite los mismos cinco: para pesar igual y ganar por
 * venir despues.
 */
.mandos-hoy { justify-content: flex-start; gap: 0; flex-wrap: nowrap; }
.mandos-hoy .paso-dia { margin-right: 24px; position: relative; }
/* El separador dice que son dos mandos distintos sin meter otra linea. */
.mandos-hoy .paso-dia::after {
  content: ''; position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
  width: 1px; height: 26px; background: var(--borde);
}
.agenda-hoy .paso-dia { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; min-width: 0; }
.agenda-hoy .paso-dia input[type=date]:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]) {
  width: 150px; min-width: 0; margin: 0; flex: 0 0 150px;
}
.agenda-hoy .boton { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
/*
 * La manera que se esta mirando, marcada. Vale para «Clases de hoy» y para el
 * feedback del dia, que usan los mismos botones.
 *
 * El feedback los llevaba sin marcar hasta el 9 de noviembre de 2026: la
 * regla estaba colgada de `.agenda-hoy`, asi que alli la elegida se veia
 * igual que las otras dos. Adrian: «cuando seleccione una pastilla, de por
 * monitores, cronologica o por zonas, que se quede seleccionada, y vea cual
 * es». Se quedaba; lo que no se veia es cual.
 */
.agenda-hoy .puesta,
.maneras-feedback .puesta {
  background: var(--marino); color: var(--papel); border-color: var(--marino);
}
.maneras-feedback a:focus-visible {
  outline: 3px solid var(--coral); outline-offset: 3px;
}
.agenda-hoy a:focus-visible, .agenda-hoy input:focus-visible {
  outline: 3px solid var(--coral); outline-offset: 3px;
}
/*
 * El ancho: todo el que haya.
 *
 * Estuvo topado en 1.080px, y con razón en su día: a 1.400 la fila se
 * estiraba y entre el nombre del grupo y los «6 apuntados» quedaba un
 * desierto. El 9 de noviembre de 2026 Adrián pidió lo contrario, y para lo
 * que usa esta pantalla tiene razón él: «hay que utilizar el ancho de la
 * pantalla para que así a lo alto ocupe lo menos posible, y así pueda ver la
 * más información posible». En su monitor sobraban 704px a la derecha y la
 * página medía 5.419, cuatro pantallas y media para un día.
 *
 * Los detalles en línea bajaron entonces la fila de 96px a 38. Al quitar
 * nivel y apuntados y separar las columnas, quedó otra vez ancho vacío en
 * zonas: ahora lo comparten dos bloques a partir de 1.600px. El nombre
 * absorbe el resto de su fila, sin reservar una columna para un sitio ausente.
 */
.agenda-hoy { max-width: none; }

/*
 * La franja lateral de la seccion, del color de su zona.
 *
 * «Cada segmento tiene como un titulo, que se llama Colegios, o la zona
 * correspondiente; quiero que tambien tenga una franja lateral izquierda con
 * ese mismo color, aunque sea fina, para que sepamos que sigue siendo la misma
 * zona», Adrian, 9 de noviembre de 2026. Con veinte clases por zona, el titulo
 * se queda arriba del todo y a media zona ya no se sabe en cual se esta.
 *
 * Y hace ademas el trabajo que hacian las sangrias. Antes cada escalon —zona,
 * instalacion, monitor— se metia 24 y 32px hacia la derecha, asi que las
 * columnas de un colegio no caian debajo de las de otro y una cabecera fija no
 * habria cuadrado con ninguna. Las sangrias se fueron el 9 de noviembre de
 * 2026 y su trabajo lo hace la franja, que ademas no gasta ancho.
 */
.seccion-hoy {
  padding: 8px 16px 10px 12px;
  border-left: 4px solid color-mix(in srgb, var(--color-chip, var(--cabecera)) 85%, transparent);
}
.seccion-hoy.es-colegios { border-left-color: var(--marino); }
.seccion-hoy + .seccion-hoy { border-top: 1px solid var(--borde); padding-top: 10px; }
/*
 * La seccion —la mañana, la tarde, una zona— se marca con una franja y no solo
 * con el tamaño de letra: lo que agrupa tiene que verse que agrupa. Cuando la
 * seccion es una zona, la franja coge su color.
 */
.titulo-seccion {
  display: flex; align-items: center; gap: 10px; margin: 0 0 6px;
  padding: 3px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--color-chip, var(--cabecera)) 30%, var(--papel));
  font-size: 1.15rem; color: var(--marino); overflow-wrap: anywhere;
}
/*
 * El monitor, en coral flojo, caiga en el nivel que caiga: en la cabecera del
 * recinto mirando por hora, en la franja mirando por monitor y en la banda de
 * dentro mirando por sitio. Un 8% y no mas, y el nombre en marino: el coral es
 * el color de la accion y de lo que falta, y una superficie coral grande le
 * comeria el sitio a los botones y a los "sin pasar" de cada fila.
 */
.titulo-seccion.es-monitor, .titulo-bloque.es-monitor, .titulo-grupo.es-monitor {
  background: color-mix(in srgb, var(--coral) 8%, var(--papel));
  color: var(--marino);
}
/*
 * Los colegios no son una zona sin color: son los 29 colegios juntos, una
 * categoria a proposito. Por eso su franja va en marino, del mismo tamaño que
 * las de zona. Solo la franja: las cajas de dentro se quedan en blanco.
 */
.titulo-seccion.es-colegios { background: var(--marino); color: var(--papel); }
.titulo-seccion.es-colegios .cuenta-hoy { background: rgba(255, 255, 255, .22); color: var(--papel); }
.titulo-seccion.es-colegios .detalle-seccion { color: rgba(255, 255, 255, .72); }
.detalle-seccion { font-size: .82rem; font-weight: 400; color: var(--suave); }
.cuenta-hoy {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; padding: 1px 8px; border-radius: 50px;
  background: var(--cabecera); color: var(--marino); font-size: .8rem; font-weight: 600;
}
/*
 * El bloque es un recinto: la cabecera y SUS filas dentro de la misma caja. Una
 * rayita al lado del nombre no bastaba —Adrian: "se ve muy plano todo"— porque
 * el titulo quedaba fuera de lo que agrupaba. Asi las seis clases de Marta y las
 * cuatro de Lucia son dos cajas y no diez filas seguidas.
 */
.bloque-hoy {
  background: var(--papel); border: 1px solid var(--borde); border-radius: 14px;
  overflow: hidden;
}
.bloque-hoy + .bloque-hoy { margin-top: 6px; }
.titulo-bloque {
  display: flex; align-items: center; gap: 8px; margin: 0;
  padding: 3px 12px; border-bottom: 1px solid var(--borde);
  font-size: 1rem; font-weight: 700; color: var(--marino); overflow-wrap: anywhere;
}
/* Y dentro del recinto, la instalacion: una banda, no otra tarjeta anidada. */
.titulo-grupo {
  margin: 0; padding: 2px 12px; background: var(--cebra);
  border-top: 1px solid var(--borde);
  font-size: .88rem; font-weight: 700; color: var(--marino); overflow-wrap: anywhere;
}
.titulo-bloque.es-instalacion { background: var(--papel); }

/*
 * Los escalones, solo mirando por sitio: la zona a la izquierda del todo, la
 * instalacion un paso a la derecha y el monitor otro. Lo pidio Adrian —"como si
 * fuesen los espacios de sangria"— y Codex puso las medidas: 0, 16 y 32, y
 * sangra el bloque entero, no solo su cabecera, que si no las clases se escapan
 * por la izquierda de su propio titulo.
 */
/*
 * Los escalones de sangria —zona 0, instalacion 16, monitor 32— se quitaron al
 * poner la cabecera fija: con ellos, las columnas de cada bloque empezaban en
 * un sitio distinto y ninguna cuadraba con su titulo. Lo que decian lo dice
 * ahora la franja lateral de la seccion, que no gasta ancho.
 */
/*
 * La instalacion, teñida con el color de SU zona pero al 4%: lo justo para que
 * se vea de quien es sin convertirse en otra banda protagonista. Solo la
 * cabecera; el cuerpo se queda blanco.
 */
.con-escalones .titulo-bloque.es-instalacion {
  background: color-mix(in srgb, var(--color-chip, var(--marino)) 4%, var(--papel));
}
/* Los colegios no tienen color de zona: los suyos cogen el marino al 3%. */
.seccion-hoy.es-colegios .titulo-bloque.es-instalacion {
  background: color-mix(in srgb, var(--marino) 3%, var(--papel));
}

/* El filtro del dia. Cerrado ocupa una linea; abierto, lo que haga falta. */
.filtro-hoy { padding: 0 20px 4px; }
/*
 * Cerrado no hay caja: la pastilla es el mando y punto. La caja sale al abrir,
 * que es cuando hay algo que encerrar. Con caja siempre parecia un recuadro
 * vacio con una pastilla dentro.
 */
.caja-filtro { border-radius: 12px; }
.caja-filtro[open] { border: 1px solid var(--borde); background: var(--papel); }
.caja-filtro > summary {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 0 0 4px; cursor: pointer; list-style: none;
  font-size: .9rem; color: var(--marino);
}
.caja-filtro[open] > summary { padding: 10px 12px; }
.caja-filtro > summary::-webkit-details-marker { display: none; }
/*
 * "Filtros" es una pastilla y es ella la que abre y cierra, que lo pidio Adrian
 * asi. Lleva la flecha dentro para que se vea si esta abierto o cerrado sin
 * tener que mirar debajo.
 */
.abre-filtro { font-weight: 500; padding: 8px 16px; }
.abre-filtro::after { content: ' ▾'; color: var(--suave); }
.caja-filtro[open] .abre-filtro::after { content: ' ▴'; }
.caja-filtro[open] .abre-filtro { background: var(--cabecera); border-color: var(--marino); }
.caja-filtro > summary:hover .abre-filtro { border-color: var(--suave); }
.cuantos-filtros {
  background: var(--coral-flojo); color: var(--coral-oscuro); font-weight: 600;
  border-radius: 50px; padding: 2px 10px; font-size: .78rem;
}
.resumen-filtro { font-size: .82rem; }
.cuerpo-filtro { padding: 4px 14px 14px; border-top: 1px solid var(--linea); }
.grupo-filtro + .grupo-filtro { margin-top: 14px; }
.titulo-filtro {
  display: flex; gap: 8px; align-items: baseline; margin: 10px 0 7px;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--suave);
}
.titulo-filtro .apagado { font-size: .74rem; letter-spacing: 0; text-transform: none; }
.pastillas-filtro { display: flex; flex-wrap: wrap; gap: 7px; }
/*
 * La pastilla es una casilla de verdad: se pueden marcar varias de cada grupo.
 * Marcada lleva visto y borde, no solo color: ni las instalaciones ni los
 * monitores tienen color propio y no se les va a inventar uno.
 */
.pastilla-filtro {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  min-height: 38px; padding: 4px 13px; border-radius: 50px;
  border: 1px solid var(--borde); background: var(--papel);
  font-size: .85rem; color: var(--marino);
}
.pastilla-filtro:hover { border-color: var(--suave); }
.pastilla-filtro input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
/* El color de la zona, un punto al lado y no el relleno de la pastilla. */
.pastilla-filtro[style*="--color-chip"]::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: var(--color-chip); flex: 0 0 9px;
}
.pastilla-filtro:has(input:checked) {
  border-color: var(--marino); background: var(--cabecera); font-weight: 600;
}
.pastilla-filtro:has(input:checked)::after { content: '✓'; color: var(--marino); font-size: .9rem; }
.pastilla-filtro:has(input:focus-visible) { outline: 2px solid var(--coral); outline-offset: 2px; }
.pie-filtro { margin-top: 14px; }

@media (max-width: 760px) {
  .filtro-hoy { padding: 0 12px 4px; }
  .cuerpo-filtro { padding: 4px 10px 12px; }
}
.titulo-bloque + .titulo-grupo { border-top: 0; }
.clases-hoy { list-style: none; margin: 0; padding: 0; }
/*
 * La clase, en columnas de verdad.
 *
 * Los anchos los dice el servidor en `--ancho-*`, en caracteres y mirando el
 * más largo del día: así todas las listas de la pantalla miden lo mismo y se
 * leen como una tabla. Dejándoselo al navegador, cada lista mide lo suyo y
 * las columnas bailan de un colegio al siguiente.
 *
 * El nombre empezó limitado al máximo calculado; ahora absorbe el espacio
 * libre. Con sitio comparte ese espacio en proporción 2:1 para que el lugar
 * no quede a cero en el portátil. Los responsables conservan los máximos
 * del servidor, limitados por el ancho disponible y comunes a todos los bloques.
 */
/* Las columnas opcionales se deciden para el día entero, no para cada fila.
 * Los límites relativos permiten leer también los días con varios apoyos. */
.agenda-hoy {
  /*
   * Las columnas de personas miden lo que mide su nombre mas largo del dia
   * —lo cuenta el servidor en `--ancho-*`— con un tope por si alguno se
   * desmadra. Y son medidas EXACTAS, no «lo que haga falta»: una columna que
   * se mide por su contenido mide una cosa en la cabecera, donde pone
   * «Sustituto», y otra en las filas, donde hay nombres, y entonces el titulo
   * no cae encima de su columna. Costo una tarde el 9 de noviembre de 2026.
   */
  --col-papel: min(var(--ancho-papel, 24ch), var(--tope-papel, 22%));
  --col-sitio: ;
  /* Lo que ocupa el sitio cuando hay sitio, para poder restarlo de lo que le
     queda al nombre del grupo. Hacen falta dos variables y no una porque la
     que va en la rejilla tiene que poder estar VACIA, y una vacia no resta. */
  --resto-sitio: 0px;
  /*
   * Las seis columnas de siempre —hora inicial, hora final, grupo, monitor,
   * sustituto y apoyo— mas la casilla de marcar delante. Salen todas todos los
   * dias: antes sustituto y apoyo aparecian y desaparecian segun lo que
   * hubiera, y una tabla cuyas columnas cambian de un dia a otro no se
   * aprende nunca.
   */
  /*
   * El nombre del grupo mide lo que mide el más largo del día y ni un pixel
   * más: lo que sobre se queda en la última pista, que está vacía a propósito.
   * Con el nombre quedándose todo lo que sobraba, entre el grupo y el monitor
   * había un desierto de quinientos píxeles.
   */
  --anchas-fijas: 148px;             /* la casilla y las dos horas */
  /*
   * El cuarto de mas no es un capricho: el nombre del grupo se pinta en 1rem y
   * en negrita, y su medida se cuenta en «ch» con la letra de la fila, que es
   * de .85rem y normal. Sin esa correccion la columna salia justa y cuatro
   * nombres de los cuarenta y dos se partian en dos renglones.
   */
  --col-nombre: min(calc(var(--ancho-nombre, 60ch) * 1.25),
    calc(100% - var(--anchas-fijas) - 3 * var(--col-papel) - var(--resto-sitio)));
  --rejilla-hoy: 24px 62px 62px var(--col-nombre)
    var(--col-papel) var(--col-papel) var(--col-papel) var(--col-sitio) minmax(0, 1fr);
  /*
   * Lo que las filas se meten hacia dentro por los dos lados: la franja de la
   * seccion y su relleno (4+12 a la izquierda, 16 a la derecha) mas el borde
   * del recinto (1). Sale igual por los dos lados, y la cabecera fija se mete
   * lo mismo: las columnas son proporcionales, asi que si su caja no mide
   * EXACTAMENTE lo que miden las filas, los titulos no caen sobre su columna.
   */
  --sangria-fila: 17px;
  /*
   * `clip` y no `hidden`: las dos recortan igual, pero `hidden` convierte la
   * tarjeta en una caja con scroll propio y entonces la cabecera fija se queda
   * pegada a ELLA —que no se mueve— en vez de a la pantalla, o sea que deja de
   * ser fija. Se descubrio el 9 de noviembre de 2026 montandola.
   */
  overflow: clip;
}
/* Mirando por monitores hay una columna mas, «Donde»: el sitio no lo dice
   ningun titulo y sin ella no se sabe adonde va cada uno. */
.agenda-hoy.con-sitio {
  /* Lo mismo que las demas: lo que mide el sitio mas largo del dia, con un
     tope. Puesta a ojo en un 16% se llevaba doscientos setenta pixeles que le
     hacian falta al nombre del grupo. */
  --sitio-usable: min(var(--ancho-sitio, 24ch), var(--tope-sitio, 16%));
  --col-sitio: var(--sitio-usable);
  --resto-sitio: var(--sitio-usable);
}
/*
 * En pantallas mas estrechas, las tres columnas de personas se conforman con
 * menos: a 1.280, con el tope de 22% se llevaban dos tercios de la fila y al
 * nombre del grupo le quedaban doscientos pixeles.
 */
@media (max-width: 1500px) {
  .agenda-hoy { --tope-papel: 16%; }
  /* Y con la columna de «Donde» puesta son ocho columnas en un portatil: ahi
     las de personas y la del sitio se aprietan un poco mas, que si no al
     nombre del grupo le quedan doscientos pixeles. */
  .agenda-hoy.con-sitio { --tope-papel: 13%; --tope-sitio: 14%; }
}
.cabeza-hoy, .clase-hoy {
  display: grid;
  grid-template-columns: var(--rejilla-hoy);
  align-items: center; gap: 0;
  /*
   * La MISMA letra en la cabecera y en las filas, y esto no es cosmetico: los
   * anchos se cuentan en «ch», y un ch mide lo que mide la letra de donde se
   * cuenta. Con la cabecera en letra pequeña, sus columnas salian mas
   * estrechas que las de las filas y los titulos no caian sobre su columna.
   * Lo de dentro —el nombre del grupo, las pastillas— pone la suya aparte.
   */
  font-size: .85rem;
}
.clase-hoy { padding: 5px 3px; border-top: 1px solid var(--linea); }
/*
 * Y se diferencian las columnas: una rayita entre una y la siguiente. Lo pidio
 * Adrian con la cabecera —«y se diferencien las columnas»— y hace falta
 * justamente aqui, donde una fila tiene siete celdas y tres son nombres de
 * personas que se parecen entre si. El gris vertical tiene más contraste
 * que las líneas horizontales para guiar la lectura sin añadir fondos.
 */
.cabeza-hoy > *, .clase-hoy > * {
  padding: 0 9px; min-width: 0;
  border-right: 1px solid var(--linea-columna);
  align-self: center;
}
.cabeza-hoy > *:last-child, .clase-hoy > *:last-child { border-right: 0; }
.cabeza-hoy > .cab-casilla, .clase-hoy > .marca-clase-hoy { padding: 0 6px; }
/*
 * La cabecera: los titulos de las columnas, y fijos arriba. Con cuarenta
 * clases y siete columnas, al bajar media pantalla ya no se sabe si la tercera
 * columna es el sustituto o el apoyo.
 */
.cabeza-hoy {
  position: sticky; top: 0; z-index: 3;
  margin: 0 var(--sangria-fila); padding: 5px 3px;
  /* El gris neutro y el límite inferior separan los títulos fijos de las
     selecciones azules que pasan por debajo, sin alterar la rejilla. */
  background: var(--cabeza-fondo); color: var(--marino);
  border-bottom: 1px solid var(--linea-columna-elegida);
  font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  line-height: 1.2;
}
/* La letra menor vive en las celdas: los ch de los tracks se siguen
   calculando con la letra compartida de los contenedores de la rejilla.
   Conservamos dos líneas para no abreviar los títulos ni forzar su ancho. */
.cabeza-hoy > * {
  font-size: .8125rem; letter-spacing: 0; text-transform: none;
  border-right-color: var(--linea-columna);
}
/*
 * Los bloques van uno debajo de otro, a todo el ancho.
 *
 * Estuvieron un rato de dos en dos: la página bajaba de 3.006px a 2.225 y se
 * veían 16 clases en vez de 9. Pero a mitad de ancho el nombre del grupo se
 * parte en dos renglones, y Adrián eligió lo otro el 9 de noviembre de 2026:
 * «no no, en una sola columna, pero cada grupo, al quitar cosas y utilizar
 * todo el ancho, ocupa menos a lo alto». Y es verdad: cada clase es un
 * renglón de 38px en vez de los 96 de antes, que es de donde sale el ahorro.
 */
/* Quién la da, en su columna y sin rótulo: lo dice la cabecera de arriba. */
.quien-clase { font-size: .9rem; color: var(--marino); min-width: 0; overflow-wrap: anywhere; }
.quien-clase .marca-no { font-size: .82rem; }
/*
 * Las pastillas de quién da la clase, con el color diciendo el estado.
 *
 * Verde el titular que va, rojo y tachado el que no, amarillo todo hueco por
 * tapar —no hay titular, falta el sustituto, falta el apoyo—, azul el
 * sustituto puesto y morado el apoyo puesto. Lo dictó Adrián el 9 de noviembre
 * de 2026 papel por papel; está escrito entero en `lasPastillasDeLaClase`.
 *
 * El amarillo es el mismo en los tres sitios a propósito: no son tres avisos
 * distintos, es el mismo —falta alguien— en tres columnas.
 */
.papel-hoy {
  display: inline-block; max-width: 100%;
  padding: 2px 9px; border-radius: 999px;
  font-size: .82rem; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere;
}
.papel-hoy + .papel-hoy { margin-left: 3px; }
.papel-verde { background: var(--estado-bien-fondo); color: var(--estado-bien); }
.papel-rojo { background: var(--coral-flojo); color: var(--coral-legible); }
/* El contorno discontinuo permite localizar los pendientes aunque el verde
   y el amarillo se perciban parecidos; hacia dentro no consume ancho. */
.papel-amarillo {
  background: var(--estado-ojo-fondo); color: var(--estado-ojo);
  outline: 1px dashed currentColor; outline-offset: -1px;
}
.papel-azul { background: var(--monitores-fondo); color: var(--monitores-azul); }
.papel-morado { background: var(--morado-fondo); color: var(--morado); }
/* El tachado se tiene que ver de lejos: con la raya fina de serie, a 14px no
   se distingue de un nombre normal en rojo. */
.papel-rojo s { text-decoration-thickness: 2px; text-decoration-color: var(--coral); }
/* Donde no hay nada que decir no hay pastilla: una raya, y callada. */
.papel-vacio { color: var(--suave); }
.sitio-clase { font-size: .85rem; color: var(--texto); min-width: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
/*
 * Lo que se puede marcar pinchando encima, que es la fila entera y la cabecera
 * entera, lo dice el dedo. Va colgado del formulario de marcar para no
 * prometerlo en las pantallas donde no hay nada que marcar.
 */
#asignar-sesiones .clase-hoy,
#asignar-sesiones .titulo-seccion,
#asignar-sesiones .titulo-bloque,
#asignar-sesiones tr:has(.marca-sesion) { cursor: pointer; }
/* El nombre del grupo no: ese lleva a su grupo, y el dedo de enlace lo dice. */
#asignar-sesiones .grupo-clase > a { cursor: pointer; }

/* La cebra sobra dentro del recinto: ya hay caja, cabecera y linea por fila. */
.clase-hoy:first-child { border-top: 0; }
.clase-hoy:hover { background: var(--cebra); }
/*
 * La fila elegida, en azul. Marcarla dejaba de notarse en cuanto el raton se
 * iba a otra parte: la unica señal era una casilla de dieciseis pixeles al
 * principio de una fila de mil setecientos, y con veinte marcadas no habia
 * manera de ver cuales eran sin recorrerlas.
 *
 * Va en las cuatro pantallas que marcan clases, que la fila sea un `li` o un
 * `tr`. En las tablas hay que teñir tambien las celdas: la cebra las pinta a
 * ellas y taparia el azul.
 */
#asignar-sesiones .clase-hoy:has(.marca-sesion:checked),
#asignar-sesiones tr:has(.marca-sesion:checked),
#asignar-sesiones tr:has(.marca-sesion:checked) > td {
  background: var(--fila-elegida);
}
#asignar-sesiones .clase-hoy:has(.marca-sesion:checked):hover,
#asignar-sesiones tr:has(.marca-sesion:checked):hover,
#asignar-sesiones tr:has(.marca-sesion:checked):hover > td {
  background: var(--fila-elegida-encima);
}
/* Sobre el azul, la raya original se pierde; reforzarla solo aquí mantiene
   la guía vertical también al pasar el ratón, sin añadir grosor. */
#asignar-sesiones .clase-hoy:has(.marca-sesion:checked) {
  --linea-columna: var(--linea-columna-elegida);
}
/* El sustituto comparte el azul de la selección: su propio color de texto
   delimita la pastilla sin cambiar su fondo ni consumir ancho de columna. */
#asignar-sesiones :is(.clase-hoy, tr):has(.marca-sesion:checked) .papel-azul {
  outline: 1px solid currentColor; outline-offset: -1px;
}
/*
 * La hora de empezar, en pastilla; la de acabar, a secas. Las dos con el mismo
 * fondo eran dos manchas iguales seguidas y ninguna de las dos destacaba: la
 * que se busca al mirar un dia es a que hora EMPIEZA.
 */
.hora-clase {
  padding: 2px 6px; border-radius: 10px;
  background: var(--cabecera); color: var(--marino); text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 700;
}
.hora-clase.hora-fin { background: none; color: var(--suave); font-weight: 600; }
.grupo-clase { min-width: 0; overflow-wrap: anywhere; }
.grupo-clase > a { color: var(--marino); font-size: 1rem; font-weight: 700; text-decoration: none; }
.grupo-clase > a:hover { text-decoration: underline; text-decoration-color: var(--coral); }
/* La instalacion, la zona y el nivel en la misma linea cuando caben. */
.detalles-clase { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 3px; }
.instalacion-clase { font-size: .85rem; color: var(--texto); }
/* El nivel, texto y no otra pastilla: con la de zona ya hay bastante color. */
.nivel-clase { font-size: .82rem; color: var(--suave); }
.agenda-hoy .etiqueta-zona, .etiqueta-nivel {
  display: inline-block; padding: 2px 9px; border-radius: 50px;
  font-size: .78rem; font-weight: 600; line-height: 1.5; white-space: normal;
}
.agenda-hoy .etiqueta-zona {
  background: var(--campo); color: var(--marino);
  background: color-mix(in srgb, var(--color-chip, var(--cabecera)) 18%, var(--papel));
  border: 1px solid var(--color-chip, var(--borde));
}
.etiqueta-nivel { background: var(--campo); color: var(--texto); border: 1px solid var(--borde); }
.nivel-iniciacion { background: color-mix(in srgb, var(--verde) 16%, var(--papel)); border-color: var(--verde); color: var(--marino); }
.nivel-intermedio { background: var(--cabecera); border-color: var(--cabecera); color: var(--marino); }
.nivel-intermedio-alto { background: var(--cabecera); border-color: var(--marino); color: var(--marino); }
.nivel-avanzado { background: var(--marino); border-color: var(--marino); color: var(--papel); }
.nivel-precompeticion { background: var(--coral-flojo); border-color: var(--coral); color: var(--marino); }
.nivel-competicion { background: var(--coral); border-color: var(--coral); color: var(--marino); }
.gente-clase { text-align: right; font-variant-numeric: tabular-nums; color: var(--marino); font-weight: 700; }
.gente-clase > span { font-size: .8rem; font-weight: 400; color: var(--texto); }
.estado-clase { text-align: right; }
.pastilla-si, .pastilla-no, .pastilla-ojo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .78rem; font-weight: 600; border-radius: 999px; padding: 4px 9px; white-space: nowrap;
  color: var(--marino);
}
.pastilla-si { background: color-mix(in srgb, var(--verde) 16%, var(--papel)); }
.pastilla-no { background: var(--coral-flojo); }
/* A medias es el tercer estado y no un "sin pasar" suave: por fuera la lista
   parece hecha, y es justo la que hay que mirar. */
.pastilla-ojo { background: #fbeccf; color: #8a5516; }
.pastilla-ojo::before { content: '◐'; }
.pastilla-si::before { content: '✓'; }
.pastilla-no::before { content: '○'; color: var(--coral-oscuro); }
@media (max-width: 640px) {
  .agenda-hoy .barra-herramientas { padding: 14px 12px; }
  .agenda-hoy .paso-dia { width: 100%; }
  .agenda-hoy .paso-dia .boton { padding-inline: 12px; }
  .agenda-hoy .paso-dia input[type=date] { flex: 1; width: 130px; }
  .agenda-hoy .grupo-botones { display: flex; width: 100%; gap: 5px; }
  .agenda-hoy .grupo-botones > a { flex: 1; padding: 8px 6px; font-size: .82rem; }
  .seccion-hoy { padding: 16px 12px; }
  .titulo-seccion { font-size: 1.15rem; }
  /*
   * En el movil no hay columnas que cuadrar, asi que la cabecera fija se va:
   * siete titulos en 375px no son una tabla, son un estorbo. Y cada clase se
   * apila —las dos horas y el nombre arriba, y debajo quien la da—, que es
   * como cabe.
   */
  .cabeza-hoy { display: none; }
  .clase-hoy {
    grid-template-columns: 24px 54px 54px minmax(0, 1fr);
    gap: 4px 6px; padding: 8px;
  }
  .clase-hoy > * { border-right: 0; padding: 0 3px; }
  .clase-hoy .grupo-clase { grid-column: 4; }
  .clase-hoy .quien-clase, .clase-hoy .sitio-clase { grid-column: 2 / -1; }
  /*
   * Apiladas, las tres pastillas de personas se distinguirian solo por el
   * color, y el color no se lee en voz alta ni lo ve todo el mundo igual. En
   * el movil —y solo ahi— cada una dice lo que es. Lo vio Codex.
   */
  .clase-hoy .papel-sustituto::before { content: 'Sustituto: '; }
  .clase-hoy .papel-apoyo::before { content: 'Apoyo: '; }
  .clase-hoy .papel-sustituto::before, .clase-hoy .papel-apoyo::before {
    font-size: .78rem; font-weight: 700; color: var(--suave);
  }
  /* La raya de «aqui no hay nadie» sobra apilada: en una columna dice que esa
     columna esta vacia, pero en un renglon propio es un renglon para nada. */
  .clase-hoy .quien-clase:has(.papel-vacio) { display: none; }
  .agenda-hoy .titulo-seccion, .agenda-hoy .titulo-bloque { flex-wrap: wrap; }
  .agenda-hoy .marca-mes { flex-shrink: 0; }
  .hora-clase { padding: 5px; }
  .gente-clase { grid-column: 3; text-align: left; }
  .estado-clase { grid-column: 3; text-align: left; }
}

/* Dónde se da cada grupo: la pantalla provisional para colocarlos todos. */
.lista-donde { list-style: none; margin: 0; padding: 0; }
/* Zona e instalación delante: es lo que se viene a tocar, y lo que se repasa
   de un vistazo al revisar. El nombre del grupo queda al lado para saber de
   cuál se trata, y se lleva todo el sitio que sobre. */
/*
 * Primero el grupo, que es lo que se lee, y luego donde se da. El nombre se
 * lleva el sitio que sobre y puede partirse en dos lineas: cortarlo justo por
 * el colegio es cortarlo por lo unico que dice donde se da.
 */
.cabeceras-donde {
  display: grid; grid-template-columns: minmax(240px, 1fr) 170px 230px 140px;
  gap: 12px; padding: 10px 16px 8px;
  font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--suave); border-bottom: 1px solid var(--borde);
}
.fila-donde {
  display: grid; grid-template-columns: minmax(240px, 1fr) 170px 230px 140px;
  align-items: center; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid var(--linea);
}
.fila-donde:last-child { border-bottom: 0; }
.fila-donde[hidden] { display: none; }
/* Los que faltan, que son el trabajo, con una marca a la izquierda. */
.fila-donde.sin-sitio { box-shadow: inset 3px 0 0 var(--coral); }
.nombre-donde { min-width: 0; }
/*
 * El nombre del grupo, como en el resto de la casa: marino y sin subrayar. No
 * tenia regla y salia con el azul de serie del navegador, que en una lista de
 * 192 nombres es lo primero que se ve y no pega con nada.
 */
.nombre-donde > a { color: var(--marino); font-weight: 600; text-decoration: none; }
.nombre-donde > a:hover { color: var(--coral); text-decoration: underline; }
.nombre-donde .dato-debajo { display: block; font-size: .82rem; }
.nombre-donde .numero-grupo { margin-right: 6px; }
.fila-donde select { margin-top: 0; }
.aviso-fila { font-size: .8rem; color: var(--suave); text-align: right; min-width: 0; }
.aviso-fila.bien { color: var(--verde); }
.aviso-fila.mal { color: var(--coral); font-weight: 600; }
/* Copiar la de arriba: una accion secundaria, que no compita con los dos campos. */
.copiar-arriba {
  border: 0; background: none; font: inherit; font-size: .8rem; cursor: pointer;
  color: var(--suave); text-decoration: underline; padding: 6px 0;
}
.copiar-arriba:hover { color: var(--coral); }
/* El mensaje y el boton, uno debajo del otro en la misma celda. */
.aviso-fila .texto-aviso { display: block; }

/* Las dos pantallas de asignar, bajo la misma entrada de la barra. */
.pestanas-asignar { margin-bottom: 16px; border-bottom: 1px solid var(--borde); }
.pestanas-asignar .pestana { text-decoration: none; min-height: 44px;
  display: inline-flex; align-items: center; }
/* La de monitor lleva una columna mas: la casilla de "no lleva monitor". */
.cabeceras-monitor, .lista-monitor .fila-donde {
  grid-template-columns: minmax(240px, 1fr) 230px 170px 140px;
}
.sin-monitor { font-size: .84rem; color: var(--suave); }
.lista-monitor .fila-donde select:disabled { opacity: .5; }
@media (max-width: 1200px) {
  .lista-monitor .fila-donde {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "nombre nombre" "quien sinquien" "aviso aviso";
  }
  .lista-monitor .fila-donde > [name=monitor_id],
  .lista-monitor .fila-donde > .escribible[data-campo=monitor_id] { grid-area: quien; }
  .lista-monitor .fila-donde > .sin-monitor { grid-area: sinquien; }
}
.fila-donde:not(.sin-sitio) .copiar-arriba { display: none; }
#cuenta-donde.bien { color: var(--verde); font-weight: 600; }
@media (max-width: 1200px) {
  /* En estrecho, cada fila en tres alturas: arriba el grupo y debajo dónde se
     da. A 1024 el nombre se quedaba en 120 píxeles y se leía en vertical. */
  .cabeceras-donde { display: none; }
  .fila-donde {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "nombre nombre" "zona inst" "aviso aviso";
    row-gap: 8px;
  }
  .fila-donde > .nombre-donde { grid-area: nombre; }
  .fila-donde > .aviso-fila { grid-area: aviso; text-align: left; }
  /* Los desplegables que se escriben van envueltos, así que se coloca el
     recuadro que los envuelve y no el select, que ya no es hijo de la fila. */
  .fila-donde > [name=lugar_id],
  .fila-donde > .escribible[data-campo=lugar_id] { grid-area: zona; }
  .fila-donde > [name=instalacion_id],
  .fila-donde > .escribible[data-campo=instalacion_id] { grid-area: inst; }
}

/*
 * Exportaciones: la lista de grupos que se marcan.
 *
 * Lo normal es que esten todos marcados —filtras y exportas—, asi que la marca
 * no se destaca: lo que se destaca es lo DESMARCADO, que es lo que acabas de
 * decidir dejar fuera. Si se resaltara lo marcado, la pantalla entera seria un
 * resalte y no diria nada.
 */
.barra-marcar-grupos { justify-content: flex-start; }
.barra-marcar-grupos .casilla-suelta { font-weight: 600; color: var(--marino); }
.fila-exportar {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 7px 16px;
}
.casilla-grupo { display: flex; align-items: center; gap: 11px; cursor: pointer; min-width: 0; }
.casilla-grupo input { width: auto; margin: 0; flex: none; accent-color: var(--coral); }
.nombre-grupo-exportar { color: var(--marino); font-weight: 600; }
/* Sin marcar, apagado: se ve de un vistazo lo que se queda fuera. */
.fila-exportar:has(input:not(:checked)) .nombre-grupo-exportar { color: var(--suave); font-weight: 400; }
.fila-exportar:has(input:not(:checked)) .dato-debajo { opacity: .55; }
.fila-exportar .ver-grupo { font-size: .82rem; }
.lista-exportar { max-height: 60vh; overflow-y: auto; }

/*
 * El calendario de un periodo: el del club y el de cada colegio.
 *
 * Se pinta EXACTAMENTE igual que el de los doce meses —lo pidió Adrián así— y
 * por eso aquí casi no hay nada: usa las mismas clases que el global (`dentro`
 * en verde, `festivo` en coral, `fuera` en blanco, `primero` y `ultimo` con su
 * aro, `hoy` con su punto, `marcado` y `marcado-borde` mientras se marca).
 *
 * Lo único propio es el color del trimestre, que sustituye al verde de «hay
 * clase» en los días que son de ese trimestre. Hubo una versión con otro
 * lenguaje —fondo gris, raya verde debajo, una «F» pequeña para el festivo y
 * rayas para lo que faltaba por repartir— y se quitó entera: dos calendarios
 * que se leen distinto en la misma plataforma es uno de más que aprender.
 */

/* Los tres colores los pidió Adrián así: naranja, blanco y amarillo. */
.color-naranja { --color-trimestre: #ffd5a3; }
.color-blanco { --color-trimestre: #ffffff; }
.color-amarillo { --color-trimestre: #fff09a; }
.color-azul { --color-trimestre: #cfe3fb; }
.color-verde { --color-trimestre: #d3eedd; }

/*
 * El festivo sigue mandando sobre el color del trimestre, como manda sobre
 * todo lo demás en el global: es lo que se viene a ver, y un día festivo no es
 * clase de ningún trimestre. Por eso el :not(), y no el orden de las reglas.
 */
.dia.trimestre:not(.festivo) {
  background: var(--color-trimestre); color: var(--marino); font-weight: 600;
}
/* El blanco, encima de un blanco: un filo que diga dónde acaba el cuadradito.
   Sin esto, el 2º trimestre y los días de fuera del curso se ven igual. */
.dia.trimestre.color-blanco:not(.festivo) { box-shadow: inset 0 0 0 1px #c8d2dd; }
/* Y si es el primer o el último día, manda el aro verde del global. */
.dia.trimestre.primero, .dia.trimestre.ultimo { box-shadow: inset 0 0 0 2px #1a7f4b; }

/* Fuera de la temporada no se puede pintar: el global es el que manda. */
.dia.fuera-temporada { cursor: default; opacity: .55; }
.dia.fuera-temporada:hover { outline: 0; }

/* La muestra de color de cada botón de trimestre. */
.muestra-color {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 7px;
  background: var(--color-trimestre, var(--campo)); border: 1px solid #b8c0cc;
  vertical-align: -1px;
}
.leyenda-calendario .muestra::before { background: var(--color-trimestre); border: 1px solid #c8d2dd; }

/* La tira de cuentas: lo primero que se mira, y sin tabla. */
.tira-cuentas {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline;
  padding: 14px 16px; background: var(--campo); border-radius: 10px;
}
.tira-rotulo { font-weight: 700; color: var(--marino); margin-right: 6px; }
.tira-rotulo em { font-weight: 400; color: var(--suave); font-style: normal; }
.tira-dia { display: inline-flex; gap: 6px; align-items: baseline; }
.tira-dia .tira-nombre { font-size: 13px; color: var(--suave); }
.tira-dia strong { font-size: 18px; color: var(--marino); font-variant-numeric: tabular-nums; }
.tira-total { margin-left: auto; color: var(--suave); font-size: 13px; }
.tira-total strong { font-size: 18px; color: var(--coral); }
.nota-tira { font-size: 12.5px; margin: 7px 0 18px; }
.cuentas-calendario.es-previa .tira-cuentas { box-shadow: inset 0 0 0 2px var(--coral-claro); }
.tabla-periodos .punto-trimestre {
  display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px;
  background: var(--color-trimestre); border: 1px solid #b8c0cc; vertical-align: baseline;
}
.detalle-extremos { margin-top: 16px; }
.detalle-extremos > summary { cursor: pointer; color: var(--marino); font-weight: 600; font-size: 14px; }
.detalle-extremos .tabla-extremos { margin-top: 12px; }
/* El verde de la raya de clases: más oscuro que el --verde de WhatsApp de la
   casa, que sobre un fondo claro de 3px no se ve. */
:root { --verde-clases: #27835b; }
/* Tarjetas de calendario en la lista de /calendario. */
.lista-calendarios { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.tarjeta-calendario {
  border: 1px solid var(--borde); border-radius: 12px; background: var(--papel);
  display: flex; flex-direction: column;
}
.tarjeta-calendario:hover { border-color: var(--coral-claro); box-shadow: var(--sombra); }
/* La tapa es el enlace; el pie lleva el quitar, que un formulario no puede ir
   dentro de un enlace. */
.tapa-calendario { display: block; padding: 14px 16px 10px; text-decoration: none; color: inherit; flex: 1; }
.pie-calendario { padding: 0 16px 12px; }
.tarjeta-calendario h4 { margin: 0 0 4px; color: var(--marino); font-size: 16px; }
.tarjeta-calendario .cifra { font-size: 22px; font-weight: 700; color: var(--marino); }
.acciones-calendario > summary { list-style: none; cursor: pointer; display: inline-block; }
.acciones-calendario > summary::-webkit-details-marker { display: none; }
.acciones-calendario[open] { padding: 14px 16px; border: 1px solid var(--borde); border-radius: 12px; background: var(--papel); }

/* La primera columna de las tablas de periodos: el nombre y las dos fechas,
   sin partirse en cuatro líneas. */
.tabla-periodos td:first-child, .tabla-periodos th:first-child { min-width: 190px; }
.tabla-extremos td:first-child, .tabla-extremos th:first-child { min-width: 150px; }
.aviso-sin-repartir { color: var(--coral-oscuro); }
/* "A quién se lleva": las tres casillas juntas a la izquierda, que con
   space-between quedaban en las dos esquinas de la pantalla. */
.quienes-exportar { justify-content: flex-start; gap: 22px; }
/* En el del club, cada celda lleva la cuenta y debajo las dos fechas que Adrián
   ha marcado: verlas al lado del número es lo que permite comprobar que lo
   marcado es lo que se quería marcar. */
.celda-periodo { line-height: 1.25; }
.fechas-celda { display: block; font-size: .76rem; white-space: nowrap; }

/*
 * Montar un tipo de exportación: los datos a la izquierda y el orden a la
 * derecha. Dos listas y no una con casillas, porque el orden es el dato: con
 * una sola, el orden sería el de la ficha y no el que se quiere.
 */
.dos-columnas-tipo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .dos-columnas-tipo { grid-template-columns: 1fr; } }
.columna-orden { position: sticky; top: 16px; }
.seccion-campos { margin-bottom: 18px; }
.seccion-campos h4 {
  margin: 0 0 8px; font-size: 14px; color: var(--marino);
  display: flex; align-items: baseline; gap: 10px;
}
.campos-seccion { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.casilla-campo { flex: 0 0 auto; }
.lista-orden { margin: 0; padding-left: 22px; }
.lista-orden li { padding: 5px 0; border-bottom: 1px solid var(--linea); }
.lista-orden li:last-child { border-bottom: 0; }
.lista-orden li.sin-nada { list-style: none; margin-left: -22px; border: 0; }
.nombre-orden { color: var(--marino); }
.botones-orden { float: right; display: inline-flex; gap: 2px; }
.botones-orden button { padding: 2px 6px; }
.botones-orden button[disabled] { opacity: .3; cursor: default; }
.botones-orden .quitar { color: var(--coral); }
.formatos { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.formato {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 10px 14px; border: 1px solid var(--borde); border-radius: 10px; max-width: 330px;
}
.formato:has(input:checked) { border-color: var(--coral); background: var(--coral-flojo); }
.formato input { width: auto; margin: 2px 0 0; accent-color: var(--coral); }
.muestra-campos { margin-top: 6px; line-height: 1.4; }

/*
 * El filtro de días del resumen de periodos. Pastillas como en Clases hoy, que
 * es donde Adrián ya tiene el gesto aprendido: se pulsa y se queda, se vuelve a
 * pulsar y se quita, y "Todos" las apaga.
 */
.filtro-dias { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.filtro-dias > .apagado { margin-right: 4px; font-size: 13px; }
.pastilla-dia {
  padding: 5px 12px; border: 1px solid var(--borde); border-radius: 999px;
  background: var(--papel); color: var(--marino); font: inherit; font-size: 13px; cursor: pointer;
}
.pastilla-dia:hover { border-color: var(--coral-claro); }
.pastilla-dia.puesta { background: var(--coral); border-color: var(--coral); color: #fff; font-weight: 600; }

/*
 * Los que vinieron y no estaban en la lista: una pastilla cada uno, debajo del
 * botón de añadir, que es donde los pidió Adrián y donde se mira después de
 * pulsarlo. Antes iban en una lista con una raya entre cada uno, encima del
 * formulario, y parecía otra lista de clase.
 */
.lista-visitas {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.pastilla-visita {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 12px; border-radius: 999px;
  background: var(--papel); border: 1px solid #e4cd8c;
  font-size: 13.5px; max-width: 100%;
}
.nombre-visita { font-weight: 600; color: var(--marino); }
/* El porqué va dentro de la misma pastilla y no debajo: separarlos haría dos
   cosas de una, y lo que se lee es «quién, y por qué». */
.porque-visita { color: #6b5300; }
.porque-visita::before { content: '· '; opacity: .5; }
/* El aspa, redonda y con sitio para el dedo: esto se usa de pie en una pista. */
.quitar-visita {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  border: 0; background: rgba(20, 45, 72, .07); color: var(--coral-oscuro);
  cursor: pointer; font-size: 12px; line-height: 1; padding: 0;
}
.quitar-visita:hover { background: var(--coral); color: #fff; }
.alta-visita { display: grid; gap: 10px; }
.motivos-visita { display: grid; gap: 7px; }
.motivos-visita .casilla-suelta { align-items: flex-start; }
#aviso-visita { font-size: .85rem; }
/* El "¿cuál?" de Otra razón: sale al marcarla, y sangrado para que se vea que
   es de esa casilla y no una pregunta suelta más. */
#cual-razon { margin-left: 26px; width: calc(100% - 26px); }
#cual-razon[hidden] { display: none; }

/* ---------------------------------------- el feedback del día, en Inicio

   Diseño de Codex. Lo que manda: primero las clases pendientes, y las cifras
   en una línea y no en tarjetones —orientan, no deben ocupar más sitio que una
   clase—. Y un día a cero tiene que leerse como "todo bien", no como "vacío".
*/
.feedback { margin-bottom: 22px; }
.feedback-cabecera {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.feedback-cabecera h2 { margin: 0 0 2px; font-size: 19px; color: var(--marino); }
.feedback-cabecera p { margin: 0; font-size: 13.5px; }
.feedback-dia { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feedback-dia .boton { padding: 6px 12px; min-width: 40px; text-align: center; }
.feedback-dia-fecha { color: var(--marino); font-size: 14.5px; white-space: nowrap; }
.feedback-dia label { display: inline-flex; align-items: center; gap: 4px; color: var(--suave); cursor: pointer; }
.feedback-dia input[type=date] { width: auto; margin: 0; }
/* El renglón de cifras se quitó el 10 de noviembre de 2026; lo que queda es
   el aviso de quien vino sin estar en la lista, que no se ve en ninguna fila. */
.feedback-visitas { margin: 0 0 10px; }
.feedback-resumen-monitores {
  display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 16px;
  font-size: 13.5px; color: var(--suave);
}
.feedback-resumen-monitores strong { color: var(--marino); }
.feedback-sin-pendientes {
  padding: 18px 20px; background: var(--campo); border-radius: 12px;
}
.feedback-sin-pendientes strong { color: var(--marino); font-size: 16px; }
.feedback-sin-pendientes.bien { background: #eef7f1; }
.feedback-sin-pendientes p { margin: 4px 0 0; font-size: 13.5px; }
.feedback-incorporaciones { list-style: none; margin: 0; padding: 0; }
.feedback-incorporacion { padding: 9px 0; border-bottom: 1px solid var(--linea); }
.feedback-incorporacion:last-child { border-bottom: 0; }
.feedback-incorporacion strong { color: var(--marino); margin-right: 8px; }
.feedback-incorporacion .apagado { font-size: 13px; }
.feedback-incorporacion-motivo { display: block; font-size: 13px; color: #9a5a1e; }
.feedback-completadas { margin-top: 14px; }
.feedback-completadas > summary { cursor: pointer; color: var(--marino); font-weight: 600; font-size: 14px; }
/* Esto no depende del día que se mire, y por eso va al final y separado. */
.feedback-accesos {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde);
  font-size: 13.5px; color: var(--suave);
}
.feedback-accesos p { margin: 0 0 4px; }
.feedback-accesos strong { color: var(--marino); }

/* --------------------------------------------- avisos de monitores */
.avisos-prueba {
  padding: 12px 16px; background: var(--campo); border-radius: 10px;
  font-size: 13.5px; color: var(--suave); margin-bottom: 18px; max-width: 80ch;
}
.avisos-prueba strong { color: var(--marino); }
.avisos-tabla td { vertical-align: middle; }
.avisos-tabla tr.puesto .avisos-monitor-nombre { color: var(--marino); }
.avisos-monitor-correo { font-size: .82rem; }
.avisos-interruptor { margin: 0; }
/* Un interruptor de verdad: es una preferencia que se aplica al momento, y el
   mando cambia de sitio además de cambiar de color. */
.interruptor {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--borde); background: var(--campo); border-radius: 999px;
  padding: 5px 12px 5px 6px; font: inherit; font-size: 13px; color: var(--suave);
  min-height: 34px;
}
.interruptor .mando {
  width: 32px; height: 18px; border-radius: 999px; background: #cfd8e3; position: relative;
  transition: background .12s;
}
.interruptor .mando::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; transition: left .12s;
}
.interruptor.puesto { background: var(--coral-flojo); border-color: var(--coral-claro); color: var(--coral-oscuro); font-weight: 600; }
.interruptor.puesto .mando { background: var(--coral); }
.interruptor.puesto .mando::after { left: 16px; }
.interruptor:hover { border-color: var(--coral-claro); }

/* La ayuda del correo, desplegada paso a paso. */
.ayuda-correo { margin: 0 0 16px; font-size: 14px; }
.ayuda-correo > summary { cursor: pointer; color: var(--marino); font-weight: 600; }
.ayuda-correo ol { margin: 10px 0 0; padding-left: 20px; }
.ayuda-correo li { margin-bottom: 6px; }
.aviso-ok {
  padding: 10px 14px; background: #eef7f1; border-radius: 10px; color: #1a7f4b;
  font-size: 14px; margin: 0 0 14px;
}

/* Cabeceras que ordenan, en Usuarios. La flecha dice cuál manda y hacia dónde:
   el color solo no basta, y sin flecha hay que pulsar para saberlo. */
#tabla-usuarios th.ordenable { cursor: pointer; user-select: none; }
#tabla-usuarios th.ordenable:hover { color: var(--coral); }
#tabla-usuarios th.ordenable::after {
  content: '↕'; margin-left: 6px; opacity: .35; font-size: 11px;
}
#tabla-usuarios th.ordenable.ordenada { color: var(--coral); }
#tabla-usuarios th.ordenable.ordenada::after { content: '↑'; opacity: 1; }
#tabla-usuarios th.ordenable.ordenada.al-reves::after { content: '↓'; }
/* Gmail o no: con Gmail no se pregunta el servidor, que es donde se falla. */
.elegir-correo { display: flex; gap: 14px; flex-wrap: wrap; margin: 0 0 16px; }
.campos-servidor[hidden] { display: none; }
.ajustes-brevo[hidden], .ajustes-smtp[hidden] { display: none; }

/* ------------------------------- el feedback, agrupado por monitor

   Lo pidió Adrián así: el monitor grande y lo suyo alrededor. Y tiene sentido:
   lo que se hace al ver que falta una lista es escribirle, y a quien se escribe
   es a un monitor, no a una clase. */
/*
 * Las tres maneras de mirar el dia, y lo que cambia en cada una.
 *
 * Por monitores manda la persona; en cronológica, la hora exacta de empezar;
 * por zonas, el color de cada zona. La hora debe reconocerse como un título,
 * no como otro dato dentro de una clase.
 */
/*
 * «Visualización», y debajo las pastillas.
 *
 * Codex las pondría en la misma línea para ahorrar un renglón; va encima
 * porque así lo pidió él: «pon un título "Visualización", y debajo las
 * pastillas». Y tiene su razón: son cuatro y en la misma línea que el título
 * empujan la última contra el borde en pantallas normales.
 */
.visualizacion { margin: 0 0 14px; }
.visualizacion-titulo {
  margin: 0 0 6px; font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--suave);
}
.maneras-feedback { margin: 0; }
/* La elegida, maciza: con cuatro pastillas iguales, un borde no basta para
   saber en cuál se está. */
.maneras-feedback .puesta { font-weight: 700; box-shadow: 0 1px 4px rgba(14, 42, 71, .22); }
.feedback-cronologica { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
/*
 * La cronologica, partida por la hora de empezar.
 *
 * Las cifras alineadas permiten recorrer las horas sin confundirlas con las
 * pastillas de clase. La línea sale detrás de las cuentas: distingue este
 * corte temporal de la banda de zona y del subrayado de instalación.
 * Conservamos la cabecera incluso con una clase: aquí unirla al contenido
 * mezclaría el resumen de la hora con el control que despliega la lista.
 */
/*
 * Y la hora, en banda. «Quiero que se diferencien mejor las horas, que la hora
 * sea un titulo que se vea y diferencia mejor con una banda gris/negra en la
 * fila», Adrian, 9 de noviembre de 2026.
 *
 * Empezo siendo un titulo con una raya detras —asi lo dejo Codex, para que no
 * se confundiera con la banda de zona— y no bastaba: con diez horas en una
 * pantalla, un titulo y otro titulo se parecen demasiado. La banda es marino,
 * que es el negro de la casa y el mismo de «Colegios»; la de zona lleva color
 * de zona y la de instalacion no es banda, es un subrayado, asi que las tres
 * siguen sin confundirse.
 */
.hora-cabecera {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 6px; padding: 4px 12px; border-radius: 10px; line-height: 20px;
  background: var(--marino); color: var(--papel);
  font-size: .95rem; font-weight: 700;
}
.hora-reloj {
  flex: 0 0 auto; font-size: 1.05rem; font-variant-numeric: tabular-nums;
}
/* La cuenta de cuantas empiezan, en el blanco de la banda; las de estado
   conservan sus colores, que encima del marino se leen igual de bien. */
.hora-cabecera .cuenta-hoy { background: rgba(255, 255, 255, .22); color: var(--papel); }
/* La cuenta de clases acompaña a la hora sin imponerle otra altura. */
.hora-cabecera .cuenta-hoy { line-height: 18px; }
.feedback-cronologica .monitor-clases { gap: 6px; }
/* El resumen necesita el mismo respiro que en monitores; la franja permite
   seguir reconociendo la zona cuando su cabecera queda fuera de pantalla. */
.zona-feedback {
  margin-top: 16px; padding-left: 12px;
  border-left: 4px solid color-mix(in srgb, var(--color-chip, var(--cabecera)) 85%, transparent);
}
.zona-feedback + .zona-feedback { margin-top: 18px; }
.zona-cabecera {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
  padding: 4px 12px; border-radius: 12px;
  background: color-mix(in srgb, var(--color-chip, var(--cabecera)) 30%, var(--papel));
}
.zona-cabecera h3 { margin: 0; font-size: 1.1rem; color: var(--marino); }
/*
 * Y dentro de la zona, dos escalones mas: la instalacion y, dentro, el
 * monitor. Una zona no es un sitio —el Actur son tres pabellones— y un monitor
 * dentro de un sitio es a quien hay que escribirle.
 *
 * Se marcan con el tamaño y una linea, no con mas bandas de color: encima ya
 * esta la de la zona, y tres bandas apiladas convierten la pantalla en un
 * semaforo. Lo que tiene que destacar es la pastilla de cada clase.
 */
.instalacion-feedback + .instalacion-feedback { margin-top: 10px; }
.instalacion-cabecera {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 4px; padding-bottom: 2px;
  border-bottom: 1px solid var(--borde);
  font-size: .95rem; line-height: 20px; font-weight: 700; color: var(--marino);
}
/* La cuenta no debe imponer más altura que el nombre del sitio. */
.zona-feedback .instalacion-cabecera .cuenta-hoy { line-height: 18px; }
/* La sangría distingue a la persona del sitio sin depender solo del gris. */
.monitor-en-sitio { margin-left: 10px; }
/* El sitio manda y la persona le acompaña: mismo renglon, distinto peso. El
   punto de delante es el que dice que son dos cosas y no un nombre largo. */
.instalacion-cabecera .sitio-monitor {
  font-size: .88rem; font-weight: 400; color: var(--texto);
}
.instalacion-cabecera .sitio-monitor::before { content: '· '; color: var(--suave); }

.monitor-en-sitio + .monitor-en-sitio { margin-top: 6px; }
.monitor-cabecera-pequena {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 3px; font-size: .88rem; line-height: 20px; font-weight: 400; color: var(--texto);
}
/* Sus clases, un paso a la derecha: es lo que dice que son SUYAS y no de la
   instalacion entera, sin gastar otra banda en decirlo. */
.monitor-en-sitio .monitor-clases { padding-left: 10px; border-left: 1px solid var(--linea); gap: 6px; }

/*
 * Quien da la clase y a qué hora empieza ya no son trozos sueltos dentro del
 * nombre: son columnas suyas (.celda-monitor y .celda-empieza, arriba). El
 * oficio «Monitor:» que llevaba delante también se fue: en una columna, lo
 * que es cada cosa lo dice el sitio que ocupa, y repetirlo en treinta y cinco
 * filas era leer la misma palabra treinta y cinco veces.
 */

/*
 * ---- Avisos: de qué me tengo que ocupar
 *
 * La quinta manera de mirar el día, y la única en la que la fila NO es una
 * clase sino un niño dentro de una clase. Por eso tiene columnas propias y no
 * las de las otras cuatro: lo que se lee aquí es un nombre, un número de
 * faltas y una frase escrita por un monitor.
 *
 * Los anchos salen de las medidas reales y suman los 1.690px de la fila:
 * el alumno cabe en 264 («Apellidos, Nombre» llega a 240), el motivo tiene
 * 420 para no cortarse nunca —es lo que se viene a leer— y el grupo se queda
 * el resto. El nombre del grupo sí se corta: con el motivo entero delante no
 * caben los 789px del más largo, y entre cortar la frase del monitor o
 * cortar un nombre que ya está en el número de al lado, se corta el nombre.
 */
.feedback-avisos { margin-top: 16px; }
.avisos-bajada { font-size: 13px; margin: 0 0 14px; }
.avisos-bloque + .avisos-bloque { margin-top: 22px; }
.avisos-titulo {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font-size: 17px; font-weight: 700; color: var(--marino);
}
.avisos-titulo .cuenta-hoy.ambar { background: #fdf0d9; color: #8a4f12; }
.avisos-tabla {
  --cols-aviso: 318px 96px 420px minmax(0, 610px) 246px;
  border: 1px solid var(--borde); border-radius: 12px; overflow: clip;
  background: var(--papel);
}
.aviso-fila {
  display: grid; grid-template-columns: var(--cols-aviso);
  justify-content: start; align-items: stretch; min-height: 40px;
}
.aviso-fila + .aviso-fila { border-top: 1px solid var(--linea); }
.aviso-celda {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 0 12px;
  font-size: 14px;
}
.aviso-celda + .aviso-celda { box-shadow: inset 1px 0 0 rgba(14, 42, 71, .14); }
/* La cabecera dice qué es cada columna. Aquí hace falta y en las otras vistas
   no: allí las cinco cosas se reconocen solas, y un número de faltas al lado
   de una frase entre comillas, no. */
.aviso-cabeza {
  min-height: 30px; background: var(--cabecera);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--suave);
}
.aviso-alumno { justify-content: space-between; }
.aviso-alumno-nombre {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; color: var(--marino);
}
.aviso-racha { justify-content: center; }
/*
 * Dos y cinco no son lo mismo, y se distinguen por TAMAÑO y no por color.
 * Cuatro colores de semáforo para un número que ya se lee sería decir lo
 * mismo dos veces y además mal: el ámbar ya significa «mira esto» en toda la
 * pantalla. Lo que cambia es cuánto ocupa y cuánto pesa, que es lo que hace
 * que un cinco cante bajando la vista por la columna. De Codex.
 */
.racha {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px; background: #fdf0d9; color: #8a4f12; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.racha[data-racha="2"] { width: 28px; height: 24px; font-size: 15px; font-weight: 600; }
.racha[data-racha="3"] { width: 36px; height: 24px; font-size: 16px; font-weight: 700; }
.racha[data-racha="4"] { width: 44px; height: 26px; font-size: 17px; font-weight: 700;
  border: 1px solid #c98a2e; }
.racha[data-racha="5"] { width: 52px; height: 28px; font-size: 18px; font-weight: 800;
  border: 2px solid #8a4f12; }
/* La voz del monitor: entre comillas y sobre gris, en redonda. La cursiva de
   Mukta en un renglón de 40px se lee peor y no añade nada. */
.aviso-motivo { background: var(--campo); }
.aviso-motivo q { quotes: '«' '»'; font-style: normal; color: var(--texto); }
.aviso-motivo.vacio { background: transparent; }
.aviso-grupo-nombre {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--marino); font-weight: 600; text-decoration: none;
}
.aviso-grupo-nombre:hover { color: var(--coral); text-decoration: underline; }
.aviso-monitor { justify-content: space-between; }
.aviso-monitor-nombre { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: var(--texto); }
.boton-whatsapp.chico { width: 26px; height: 26px; border-radius: 7px; flex: 0 0 26px; }
.boton-whatsapp.chico .icono { width: 15px; height: 15px; }
/* En estrecho, la tabla se mira de lado antes que apretarla a ilegible. */
@media (max-width: 900px) {
  .avisos-tabla { overflow-x: auto; }
  .aviso-fila { width: 1290px; }
}

.monitores-feedback { display: grid; gap: 14px; margin-top: 16px; }
.monitor-bloque {
  border: 1px solid var(--borde); border-radius: 14px; padding: 14px 16px;
  background: var(--papel);
}
/* Los que deben algo, con su marca: es por donde se empieza. */
.monitor-bloque.con-pendientes { border-color: var(--coral-claro); box-shadow: inset 3px 0 0 var(--coral); }
.monitor-cabecera { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.monitor-cabecera h3 {
  margin: 0; font-size: 21px; color: var(--marino); font-weight: 700; line-height: 1.2;
}
/*
  * El WhatsApp, PEGADO al nombre y no al otro extremo del renglón.
  *
  * «El icono de whatsapp ponlo nada más acabar el nombre del monitor», 10 de
  * noviembre de 2026. Antes se iba a la derecha del todo con `margin-left:
  * auto`, a 1.600px del nombre: para escribirle a alguien había que cruzar la
  * pantalla con la vista y volver, y con diecisiete monitores eso son treinta
  * y cuatro viajes.
  */
.boton-whatsapp {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; background: #25d366; color: #fff;
  text-decoration: none;
}
.boton-whatsapp:hover { filter: brightness(.93); }
.boton-whatsapp .icono { width: 18px; height: 18px; }
.sin-movil { font-size: 12.5px; }

/* Cada clase, una pastilla que se despliega. */
.monitor-clases { display: grid; gap: 8px; }
.clase-pastilla {
  border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo);
}
.clase-pastilla.estado-sin-pasar { background: var(--coral-flojo); border-color: #f8d7d2; }
.clase-pastilla.estado-parcial { background: #fdf6ea; border-color: #f0dfc2; }
/*
 * La fila de una clase, en COLUMNAS.
 *
 * «Ponlo ordenado por columnas: una columna con el nombre del grupo, la
 * siguiente, el número del grupo […], la siguiente, cuando se pasó, la hora,
 * y la siguiente, los que vinieron y no. Distribuye bien el espacio para que
 * quede agradable, y no haya nada que no queda y vaya a una segunda línea»,
 * Adrián, 10 de noviembre de 2026.
 *
 * Tres decisiones, y las tres de Codex con las medidas de la pantalla real:
 *
 *  1. Las pistas son DEFINITAS y las mismas en todas las filas. Es lo único
 *     que hace que la columna del número caiga en el mismo sitio en las 35
 *     filas: cada clase es su propio <details> y no hay tabla que las ate, así
 *     que si las pistas se midieran por el contenido, cada bloque de monitor
 *     tendría sus propios anchos y las columnas bailarían de uno a otro.
 *  2. El nombre se topa en 580px y se corta con puntos suspensivos. El más
 *     largo mide 789px y solo seis pasan de 580: darles sitio a esos seis
 *     abriría un desierto en las otras veintinueve. El nombre entero sigue
 *     estando en el title y dentro, al desplegar.
 *  3. `justify-content: start`, y por eso las columnas acaban a 1.170px aunque
 *     la fila mida 1.690. El fondo de color sigue ocupando la fila entera —es
 *     lo que dice de un vistazo lo que le pasa a esa clase— pero los datos no
 *     se separan para rellenar: leer de izquierda a derecha un renglón de
 *     1.690px con cuatro datos es lo que se venía a quitar.
 */
/*
 * Y todo lo que envuelve a una fila, con min-width 0.
 *
 * Sin esto, en el móvil la pantalla se iba a 867px: un elemento de rejilla
 * mide por defecto `min-width: auto`, así que el nombre más largo —789px sin
 * partir— estiraba su pastilla, la pastilla estiraba el bloque del monitor y
 * el bloque estiraba la página. El recorte del nombre no llegaba a actuar
 * nunca porque nadie le decía que tenía un techo.
 */
.monitores-feedback, .monitor-bloque, .monitor-clases, .clase-pastilla,
.feedback-cronologica, .hora-feedback, .zona-feedback,
.instalacion-feedback, .monitor-en-sitio { min-width: 0; }
.monitor-clases {
  --cols-clase: minmax(0, 820px) 126px 112px 440px;
  --sangria-clase: 34px;
}
/* La cronológica mete al monitor, que ahí no lo dice nadie más. */
.feedback-cronologica .monitor-clases {
  --cols-clase: minmax(0, 820px) 190px 126px 112px 440px;
}
/* Y por zonas, la hora a la que EMPIEZA la clase, delante del todo. */
.zona-feedback .monitor-clases {
  --cols-clase: 56px minmax(0, 820px) 126px 112px 440px;
}
.clase-pastilla > summary {
  cursor: pointer; list-style: none; position: relative;
  display: grid; grid-template-columns: var(--cols-clase);
  justify-content: start; column-gap: 0; align-items: stretch;
  min-height: 40px; padding: 0 12px 0 var(--sangria-clase);
}
/*
 * Las columnas, separadas por una raya.
 *
 * «Quiero que se diferencien, entonces, sepáralas una de otras de alguna
 * manera», 10 de noviembre de 2026. La raya va de arriba abajo de la fila
 * entera y no solo al alto del texto: es lo que la hace leerse como una
 * columna y no como un palito suelto entre dos palabras. Por eso las celdas
 * se estiran (`align-items: stretch`) y el aire va DENTRO de cada una, con su
 * padding, en vez de en el hueco entre ellas.
 */
.clase-pastilla > summary > * { align-self: stretch; padding: 0 10px; min-width: 0; }
/* La raya, en un gris que se ve sobre los tres fondos de la fila: el blanco de
   una lista pasada, el coral de una sin pasar y el crema de una a medias. La
   variable --linea (#f2f5f9) desaparecía sobre los dos últimos. */
.clase-pastilla > summary > * + * { box-shadow: inset 1px 0 0 rgba(14, 42, 71, .14); }
.clase-pastilla > summary::-webkit-details-marker { display: none; }
.clase-pastilla > summary::before {
  content: '▸'; color: var(--suave); font-size: 11px;
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
}
.clase-pastilla[open] > summary::before { content: '▾'; }

/* Celda 1: el nombre. Es la única que se encoge. Ya no se corta ninguno de los
   de un martes: el más largo mide 789px y la columna llega a 820. */
.celda-nombre { display: flex; align-items: center; }
.clase-nombre {
  display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--marino); font-weight: 600; font-size: 14.5px;
}
/* Celda 2: el número, con su hermanado detrás si lo tiene. */
.celda-numero { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
/* Celda 3: la hora de pasar lista, o la raya de que no se pasó. */
/* Cabe «16:42» y también «10 nov, 09:12», que es lo que pone cuando la lista
   se pasó otro día. Con sitio solo para la hora, esos salían cortados. */
.celda-cuando {
  display: flex; align-items: center;
  white-space: nowrap; font-variant-numeric: tabular-nums;
}
.celda-cuando .sin-dato { color: var(--linea-fuerte, #c3ccd6); }
/*
 * Celda 4: las cuentas, en tres huecos fijos y con el número a la derecha de
 * cada uno. Así los dígitos caen en columna y se recorren hacia abajo sin
 * leerlos: que es para lo que se mira esto.
 */
/*
 * Las cuentas: cuatro huecos fijos, y en cada uno una pastilla de color.
 *
 * Verde los que vinieron, roja los que faltaron, amarilla los que quedan sin
 * contestar, y el cuarto para el aviso de quien vino sin estar en la lista.
 * Los huecos están SIEMPRE, aunque la pastilla no: es lo que hace que las
 * pastillas caigan en vertical de una fila a otra, y lo que evita que el
 * cuarto aviso tire la fila a un segundo renglón cuando aparece.
 *
 * Un cero no pinta pastilla. Una roja con un cero dentro es una alarma que no
 * lo es, y en una columna de treinta y cinco filas eso se nota.
 */
.celda-cuentas {
  display: grid; grid-template-columns: 90px 108px 118px 82px; column-gap: 6px;
  font-size: 12px; white-space: nowrap; align-items: center;
}
.celda-cuentas > span { display: flex; align-items: center; gap: 5px; min-width: 0; }
.pastilla-cuenta {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 2px 9px; border-radius: 999px; font-weight: 600; line-height: 17px;
}
.pastilla-cuenta b { font-weight: 800; font-variant-numeric: tabular-nums; }
.pastilla-cuenta.vino { background: #e2f3e9; color: #146c40; }
.pastilla-cuenta.falto { background: var(--coral-flojo); color: var(--coral-oscuro); }
.pastilla-cuenta.sin-contestar { background: #fdf0d9; color: #8a4f12; }
/* El triángulo: alguien lleva dos o más días seguidos sin venir. Va al lado de
   las faltas porque es lo que explica esa pastilla, no otra cuenta más. */
.aviso-seguidas { display: inline-flex; color: #e0a106; }
.aviso-seguidas .icono { width: 15px; height: 15px; }
/* Celda 0, solo por zonas: a qué hora empieza. */
.celda-empieza {
  display: flex; align-items: center;
  font-size: 12.5px; font-weight: 700; color: var(--marino);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* La celda del monitor, solo en la cronológica. */
.celda-monitor {
  font-size: 13px; color: var(--suave); line-height: 40px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/*
 * En estrecho, dos renglones y no cuatro columnas.
 *
 * A 375px el nombre se quedaba en cero y desaparecía: las cuatro pistas
 * definidas suman más que la pantalla, y la única que se encoge es la del
 * nombre. Así que ahí se deja de forzar la rejilla: el nombre coge el renglón
 * entero y debajo van número, hora y cuentas. Lo de «que nada vaya a una
 * segunda línea» es de la pantalla grande, que es donde se repasa el día; en
 * el móvil dos renglones pensados son mejores que un nombre cortado a la
 * tercera palabra.
 */
@media (max-width: 900px) {
  .clase-pastilla > summary {
    display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 2px;
    padding: 8px 12px 8px 30px; min-height: 0;
  }
  .clase-pastilla > summary::before { left: 12px; }
  .clase-pastilla > summary > * { padding: 0; box-shadow: none; align-self: auto; }
  .celda-monitor { line-height: inherit; }
  .celda-nombre { flex: 1 1 100%; }
  .celda-cuentas { display: flex; column-gap: 10px; }
  .celda-cuentas .cuenta { display: inline-flex; gap: 4px; }
  .celda-cuentas .cuenta:empty { display: none; }
  .celda-monitor { flex: 0 1 auto; }
}
.clase-detalle { padding: 0 12px 12px; }
.clase-donde { font-size: 12.5px; margin: 0 0 8px; }
.alumnos-lista { list-style: none; margin: 0; padding: 0; }
.alumno-lista {
  display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  padding: 5px 0 5px 10px; border-left: 3px solid transparent; font-size: 14px;
}
.alumno-lista.vino { border-left-color: #25835b; }
.alumno-lista.falto { border-left-color: var(--coral); }
.alumno-lista.sin { border-left-color: #d6dde5; color: var(--suave); }
/* Las faltas seguidas, que es el dato por el que se llama por teléfono. Tres o
   más, en coral: una falta suelta la tiene cualquiera. */
.faltas-seguidas { font-size: 12px; color: var(--suave); }
.faltas-seguidas[data-muchas] {
  color: #fff; background: var(--coral); padding: 1px 8px; border-radius: 999px; font-weight: 700;
}
.motivo-falta { font-size: 12.5px; font-style: italic; }

/*
 * Los que vinieron sin estar en la lista, dentro de su clase.
 *
 * Estaban todos juntos al final de la página y Adrián tuvo uno delante sin
 * verlo. Ámbar y no coral: no es un fallo del monitor —hizo bien en apuntarlo—,
 * es algo que el club tiene que mirar. El coral de al lado es para las listas
 * sin pasar, y si esto fuera igual, las dos cosas se leerían como lo mismo.
 */
.alumno-lista.visita { border-left-color: #e0922a; background: #fdf6ea; }
.visita-etiqueta {
  font-size: 11.5px; font-weight: 700; color: #fff; background: #e0922a;
  padding: 1px 8px; border-radius: 999px;
}
/* En la fila de la clase, para no tener que desplegarla: lo que hace falta
   saber de un vistazo es EN CUÁL hay algo. */
.chiva-visita {
  font-size: 11.5px; font-weight: 700; color: #fff; background: #e0922a;
  padding: 2px 9px; border-radius: 999px; cursor: help;
}
.clase-pastilla.con-visita { border-color: #f0dfc2; }
/* Y arriba del todo, en la línea de las tres cuentas. */
.alerta-resumen {
  display: inline-block; margin-left: 8px; font-size: 13px; font-weight: 700;
  color: #8a5516; background: #fbeccf; padding: 2px 11px; border-radius: 999px;
}

/*
 * A qué hora se pasó. La hora que sale es la de la PRIMERA marca, no la del
 * botón de guardar: el botón dice cuándo la dio por cerrada, no cuándo la pasó.
 * El «+» son las veces que volvió a tocarla, y solo sale si volvió.
 */
.clase-hora { font-size: 12.5px; color: var(--suave); font-variant-numeric: tabular-nums; }
.clase-cuando { font-size: 12.5px; color: var(--suave); margin: 0 0 8px; }
.clase-cuando strong { color: var(--marino); font-variant-numeric: tabular-nums; }
.veces-lista { display: inline-block; vertical-align: middle; margin-left: 6px; }
.veces-lista > summary {
  cursor: pointer; list-style: none; display: inline-block;
  background: var(--campo); border: 1px solid var(--linea); border-radius: 999px;
  padding: 0 8px; font-size: 11.5px; font-weight: 700; color: var(--marino);
}
.veces-lista > summary::-webkit-details-marker { display: none; }
.veces-lista > summary:hover { border-color: var(--coral); color: var(--coral); }
.veces-lista ul { list-style: none; margin: 6px 0 0; padding: 0 0 0 2px; }
.veces-lista li { padding: 2px 0; }
.aviso-otro-dia { margin-left: 8px; font-weight: 600; }

/* Repartir los días de un grupo entre dos monitores. Solo sale en los de más de
   un día: en los demás no hay nada que repartir y sería ruido. */
.reparto-dias { grid-column: 1 / -1; margin-top: 8px; font-size: 13.5px; }
.reparto-dias > summary { cursor: pointer; color: var(--marino); }
.reparto-dias[open] > summary { font-weight: 600; margin-bottom: 8px; }
.reparto-cuerpo { padding: 10px 12px; background: var(--campo); border-radius: 10px; }
.reparto-cuerpo > p { margin: 0 0 8px; font-size: 13px; }
.reparto-dia { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.reparto-que-dia { min-width: 86px; color: var(--marino); font-weight: 600; }
.reparto-dia select { margin: 0; max-width: 320px; }

/* El buscador de los cuatro checks. */
.pastillas-check { display: inline-flex; gap: 7px; flex-wrap: wrap; }
.pastilla-check {
  padding: 5px 12px; border: 1px solid var(--borde); border-radius: 999px;
  background: var(--papel); color: var(--marino); font-size: 13px; text-decoration: none;
}
.pastilla-check:hover { border-color: var(--coral-claro); }
.pastilla-check.puesta { background: var(--coral); border-color: var(--coral); color: #fff; font-weight: 600; }
.tabla-gestiones td { vertical-align: middle; }
.tabla-gestiones .dato-debajo { display: block; font-size: .8rem; }
/* El que ya está completo se apaga pero no se va: que desaparezca justo lo que
   acabas de tocar es la manera más rápida de no saber si lo marcaste. */
.tabla-gestiones tr.completo { opacity: .45; }
/* Las pastillas de los checks, pegadas a su rótulo y a la izquierda: repartidas
   a lo ancho de la pantalla no se leen como un grupo. */
.barra-checks { justify-content: flex-start; gap: 12px; }
.cuenta-gestiones { font-size: 13px; }
.barra-anios, .barra-exportar-gestiones, .barra-marcar-gestiones { justify-content: flex-start; gap: 10px; }
.barra-anios input[type=number] { width: 86px; margin: 0; }
.tabla-gestiones th.ordenable { cursor: pointer; user-select: none; }
.tabla-gestiones th.ordenable:hover { color: var(--coral); }
.tabla-gestiones th.ordenable::after { content: '↕'; margin-left: 5px; opacity: .3; font-size: 11px; }
.tabla-gestiones th.ordenable.ordenada { color: var(--coral); }
.tabla-gestiones th.ordenable.ordenada::after { content: '↑'; opacity: 1; }
.tabla-gestiones th.ordenable.ordenada.al-reves::after { content: '↓'; }

/* La barra de lo elegido: sale cuando hay algo marcado y no antes. */
.barra-elegidos { justify-content: flex-start; gap: 10px; background: var(--coral-flojo); }
.barra-elegidos[hidden] { display: none; }
.barra-elegidos strong { color: var(--coral-oscuro); }
.separa-barra { flex: 0 0 1px; align-self: stretch; background: var(--borde); margin: 0 4px; }
/* Los años, estrechos y en la misma fila. Se repite la cadena de :not() del
   estilo base porque esa puntúa más que un `.barra-checks input[type=number]` y
   se comía el ancho: con el 100% los campos se iban cada uno a su línea. Es la
   misma trampa de siempre en esta hoja. */
.barra-checks input[type=number]:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]) {
  width: 84px; margin: 0;
}
.barra-checks select { width: auto; margin: 0; }
.tabla-gestiones .col-casilla { width: 34px; text-align: center; }
.tabla-gestiones .col-casilla input { margin: 0; accent-color: var(--coral); }
/* La fecha debajo del ✓, pequeña: dice cuándo se puso, que es lo que se
   pregunta de verdad al mirar esta pantalla. */
.celda-check { line-height: 1.2; }
.fecha-check { display: block; font-size: .72rem; color: var(--suave); margin-top: 2px; }

/*
 * Lo provisional, agrupado en la barra: se abre al pasar por encima y también
 * al pulsarlo. Solo con el ratón no se podría usar ni con el teclado ni en el
 * móvil, donde «pasar por encima» no existe.
 */
/* El mismo relleno, tamaño y color que un enlace de la barra: es la trampa de
   que `summary` no es `a` y no le llegaba nada de `.lateral nav a`. Sin esto
   «Provisional» empezaba 14px más a la izquierda que los demás y más apretado,
   que es el descuadre que se veía. */
.lateral nav .grupo-barra > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; margin-bottom: 2px; border-radius: 50px;
  color: var(--texto); font-size: 15px; font-weight: 400;
}
.lateral nav .grupo-barra > summary:hover { background: var(--fondo); color: var(--marino); }
.lateral nav .grupo-barra > summary.activo {
  background: var(--coral-flojo); color: var(--coral); font-weight: 600;
}
/* Los iconos de dentro, al mismo ancho que los de fuera: si no, los textos de
   los hijos tampoco empiezan donde deben. */
.lateral nav .grupo-barra > summary > svg { flex: 0 0 auto; }
.grupo-barra > summary::-webkit-details-marker { display: none; }
/* La V que dice que esto se despliega. La había, pero a 10px y medio
   transparente no se veía y parecía un enlace más que no respondía; la pidió
   Adrián otra vez por eso. */
.grupo-barra > summary::after {
  content: '▾'; margin-left: auto; font-size: 20px; line-height: .7;
  color: var(--suave); transition: transform .12s;
}
.grupo-barra[open] > summary::after,
.grupo-barra:hover > summary::after { color: var(--coral); }
.grupo-barra[open] > summary::after { transform: rotate(180deg); }
.grupo-barra:hover > summary { color: var(--coral); }
/* Los de dentro, sangrados hasta donde empieza el texto de arriba (14 de
   relleno + 16 de icono + 10 de hueco), no a un número inventado. */
.lateral nav .grupo-barra a.de-dentro { padding-left: 40px; font-size: 14px; }

/* De quién es cada grupo: el nombre, club o extraescolar, y el colegio. */
.fila-entidad { grid-template-columns: minmax(240px, 1fr) 210px 240px 130px; }
.elige-entidad { display: flex; gap: 12px; flex-wrap: wrap; }
.elige-entidad .casilla-suelta { font-size: 13.5px; }
.fila-entidad select { margin-top: 0; }
.fila-entidad.puesto .nombre-donde > a { color: var(--marino); }
.cifras-aviso { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.cifra-aviso {
  padding: 10px 16px; background: var(--campo); border-radius: 10px; text-align: center;
  min-width: 96px;
}
.cifra-aviso strong { display: block; font-size: 22px; color: var(--marino); }
.cifra-aviso span { font-size: 12.5px; color: var(--suave); }
.cifra-aviso.mal strong { color: var(--coral); }
.cifra-aviso.ojo strong { color: #c97a1e; }
.cifra-aviso.bien strong { color: #1a7f4b; }

/*
 * Apuntar a alguien a un grupo a mano. Plegado, porque no es lo que se viene a
 * hacer a esta pestaña casi nunca, pero arriba del todo: es donde se busca lo
 * que añade.
 */
.apuntar-mano { margin-bottom: 18px; border: 1px dashed var(--linea); border-radius: 10px; }
.apuntar-mano > summary {
  cursor: pointer; padding: 10px 14px; color: var(--marino); font-weight: 600; font-size: 14.5px;
}
.apuntar-mano[open] > summary { border-bottom: 1px solid var(--linea); }
.apuntar-cuerpo { padding: 12px 14px; }
.apuntar-cuerpo > p { margin: 0 0 10px; font-size: 13px; }
.apuntar-barra { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
/* Se repite la cadena de :not() del estilo base, que si no puntúa más y se
   lleva el ancho entero. Es la trampa de siempre en esta hoja. */
.apuntar-barra input[type=search]:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]) {
  width: 320px; max-width: 100%; margin: 0;
}
.apuntar-resultados { list-style: none; margin: 10px 0 0; padding: 0; }
.apuntar-resultados li { border-top: 1px solid var(--linea); }
.apuntar-resultados li:first-child { border-top: 0; }
.apuntar-nada { padding: 8px 2px; font-size: 13.5px; }
/* Cada candidato es un botón de fila entera: apuntar a doce niños son doce
   toques, y una diana pequeña en una lista larga se falla. */
.apuntar-uno {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 8px 10px; border-radius: 8px; font: inherit;
}
.apuntar-uno:hover { background: var(--coral-flojo); }
.apuntar-uno:disabled { opacity: .5; cursor: progress; }
.apuntar-uno strong { display: block; color: var(--marino); font-size: 14.5px; }
.apuntar-pistas { font-size: 12.5px; color: var(--suave); }
.apuntar-aviso { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; }
.apuntar-aviso.bien { color: #1a7f4b; }
.apuntar-aviso.mal { color: var(--coral-oscuro); }

/*
 * El semáforo de las plazas. Los umbrales los puso Adrián: menos del 66% hay
 * sitio, más del 66% son las últimas, el 100% es lleno.
 *
 * Verde, ámbar y coral, en ese orden, y el texto dice lo mismo que el color:
 * «Lleno» en rojo y «Lleno» en gris se leen igual de bien, y quien no
 * distingue los dos colores necesita las dos cosas.
 */
.semaforo {
  display: inline-block; padding: 2px 11px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
.semaforo--disponibles { background: var(--estado-bien-fondo); color: var(--estado-bien); }
.semaforo--ultimas { background: var(--estado-ojo-fondo); color: var(--estado-ojo); }
.semaforo--ultima { background: var(--estado-ultima-fondo); color: var(--estado-ultima); }
.semaforo--lleno { background: var(--coral-flojo); color: var(--coral-oscuro); }
.semaforo--sin-cupo { background: var(--campo); color: var(--suave); }
/* Sin confirmar: ni error ni alarma, una duda. Por eso va con filo y no
   relleno, que un grupo sin confirmar no es un grupo roto. */
.marca-dudosa {
  display: inline-block; padding: 1px 10px; border-radius: 999px;
  border: 1px dashed #c9a227; color: #8a6d10; background: #fffbef;
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
}

/*
 * El buscador público: las únicas pantallas que se ven sin haber entrado.
 *
 * No llevan barra lateral ni nada que enlace al área de gestión. Y se diseñan
 * para el móvil primero: una familia entra desde la página del colegio en
 * zlalom.com, con el teléfono en la mano y de pie en la puerta.
 */
body.publica { background: var(--fondo); }
.cabecera-publica { padding: 18px 20px; background: var(--papel); border-bottom: 1px solid var(--linea); }
.cabecera-publica img { height: 34px; }
.envoltorio-publico { max-width: 760px; margin: 0 auto; padding: 26px 16px 48px; }
.envoltorio-publico h1 { margin: 0 0 6px; color: var(--marino); font-size: 27px; }
.entradilla { margin: 0 0 20px; color: var(--texto); font-size: 15.5px; }
.pie-publico { padding: 22px 16px 40px; text-align: center; color: var(--suave); font-size: 13px; }

.filtros-publicos {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
  padding: 14px 16px; background: var(--papel);
  border: 1px solid var(--linea); border-radius: 12px; margin-bottom: 14px;
}
.filtros-publicos label { display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--suave); }
.filtros-publicos select { margin: 0; min-width: 150px; }
.cuenta-publica { margin: 0 0 12px; color: var(--suave); font-size: 13.5px; }

/* Cada grupo: primero CUÁNDO, que es lo que pregunta una familia —si le cuadra
   el día y la hora—, y no de qué nivel es. */
.grupo-publico {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 16px; align-items: center;
  padding: 16px; margin-bottom: 10px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 12px;
}
.grupo-publico.esta-lleno { background: var(--fondo); }
.grupo-publico-cuando { display: flex; flex-direction: column; }
.grupo-publico-cuando strong { color: var(--marino); font-size: 15px; }
.grupo-publico-cuando span { color: var(--suave); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.grupo-publico-que h3 { margin: 0 0 2px; font-size: 15.5px; color: var(--marino); }
.grupo-publico-que p { margin: 0; font-size: 13.5px; }
.grupo-publico-plazas { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.sin-confirmar-aviso { margin-top: 6px !important; color: #8a6d10; font-size: 13px !important; }

.vacio-publico, .otro-buscador { padding: 18px 2px; color: var(--suave); }
.volver-publico { margin: 0 0 10px; font-size: 14px; }
.datos-publicos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px;
  margin: 18px 0; padding: 18px; background: var(--papel);
  border: 1px solid var(--linea); border-radius: 12px;
}
.datos-publicos dt { color: var(--suave); font-size: 12.5px; }
.datos-publicos dd { margin: 2px 0 0; color: var(--marino); font-weight: 600; font-size: 15px; }
.aviso-publico {
  padding: 12px 16px; background: #fffbef; border: 1px solid #f0e2b4;
  border-radius: 10px; font-size: 14.5px;
}
.apuntarse-caja {
  margin-top: 22px; padding: 20px; background: var(--papel);
  border: 1px solid var(--linea); border-radius: 12px;
}
.apuntarse-caja h2 { margin: 0 0 6px; font-size: 19px; color: var(--marino); }
.apuntarse-caja p { margin: 0 0 14px; font-size: 14.5px; }
.apuntarse-caja .apagado { margin: 12px 0 0; font-size: 13px; }

/* En el móvil, las tres columnas se apilan: con 360px de ancho, «Lunes 16:30»
   y el botón no caben al lado del nombre sin partirse los dos. */
@media (max-width: 620px) {
  .grupo-publico { grid-template-columns: 1fr; gap: 10px; }
  .grupo-publico-cuando { flex-direction: row; gap: 8px; align-items: baseline; }
  .grupo-publico-plazas { flex-direction: row; align-items: center; justify-content: space-between; }
  .filtros-publicos label { flex: 1 1 140px; }
  .filtros-publicos select { min-width: 0; width: 100%; }
}

/* ---------------------------------------------- las clases de recuperación
 * La marca acompaña los tres pasos sin depender de imágenes ni guiones.
 * Los estilos se acotan a estas pantallas para no alterar las fichas del club.
 */
.pantalla-recuperar { min-width: 0; font-size: 17px; overflow-wrap: break-word; }
.pantalla-recuperar h1, .pantalla-recuperar h2, .nivel-nombre {
  font-family: Nunito, Mukta, sans-serif; font-weight: 800;
}
.pantalla-recuperar .cabecera-recuperar {
  padding: 26px 22px; margin-bottom: 24px; border-radius: 20px;
  background: var(--color-nivel, var(--coral)); color: var(--texto-nivel, var(--papel)); overflow: hidden;
}
.pantalla-recuperar .cabecera-recuperar h1 {
  color: inherit; font-size: 30px; line-height: 1.2; margin: 0;
}
.cabecera-recuperar p { margin: 10px 0 0; font-weight: 300; }
.cabecera-recuperar .paso-recuperar { margin: 0 0 12px; font-size: 15px; }
.hora-recuperar { display: block; margin-top: 8px; }
.sello-recuperar {
  display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px;
  border-radius: 100%; background: var(--papel); color: var(--marino); font-size: 28px;
}
.pantalla-recuperar .entradilla { font-size: 17px; }
.pantalla-recuperar .boton {
  display: inline-flex; justify-content: center; align-items: center;
  min-height: 48px; padding: 10px 20px; border-radius: 50px; font-weight: 300;
  font-size: 17px; white-space: normal; text-align: center; box-shadow: none;
}
.pantalla-recuperar .boton.primario {
  background: var(--coral); border-color: var(--coral); color: var(--papel);
}
.pantalla-recuperar .boton.primario:hover { background: var(--marino); border-color: var(--marino); }
.pantalla-recuperar :focus-visible { outline: 3px solid var(--marino); outline-offset: 4px; }
.pantalla-recuperar .volver-publico a, .pantalla-recuperar .otro-buscador a {
  display: inline-block; padding: 10px 0; min-height: 44px; color: var(--marino);
}
.niveles-recuperar { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 14px; }
.niveles-recuperar a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 108px; padding: 22px; background: var(--papel);
  border-radius: 20px; border-left: 6px solid var(--color-nivel, var(--coral));
  text-decoration: none; overflow: hidden;
}
.niveles-recuperar a:hover { box-shadow: inset 0 0 0 2px var(--color-nivel, var(--coral)); }
.nivel-recuperar-texto { min-width: 0; }
.nivel-nombre { display: block; color: var(--marino); font-size: 24px; line-height: 1.3; }
.nivel-cuantas { display: block; color: var(--texto); font-size: 16px; margin-top: 5px; }
.nivel-recuperar-flecha {
  flex: 0 0 42px; height: 42px; display: grid; place-items: center;
  background: var(--color-nivel, var(--coral)); color: var(--texto-nivel, var(--papel));
  border-radius: 100%; font-size: 25px;
}
.zona-recuperar {
  min-width: 0; margin: 28px 0; padding: 18px 14px;
  background: var(--papel); border: 1px solid var(--borde); border-radius: 24px;
}
/* El blanco y los filetes siguen presentes en móviles sin color-mix.
   Solo un 8 % de tinta mantiene claro incluso el negro de Colegios; el
   texto oscuro permite usar la misma mezcla con el amarillo de Miraflores. */
@supports (background: color-mix(in srgb, black 8%, white)) {
  .zona-recuperar { background: color-mix(in srgb, var(--color-zona, var(--suave)) 8%, var(--papel)); }
  .niveles-recuperar a { background: color-mix(in srgb, var(--color-nivel, var(--coral)) 8%, var(--papel)); }
}
.zona-recuperar > .clase-recuperar:last-child { margin-bottom: 0; }
.zona-recuperar-titulo {
  margin: 0 0 14px; padding-left: 12px; border-left: 5px solid var(--color-zona, var(--suave));
  color: var(--marino); font-size: 22px; line-height: 1.3; overflow-wrap: anywhere;
}
/* El día y la hora responden primero a si la familia puede venir. */
.clase-recuperar {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px;
  padding: 22px; margin-bottom: 16px; background: var(--papel);
  /* El filete de cada clase va del color de su nivel: dentro de Iniciación,
     una cabecera verde con tarjetas coral son dos marcas peleándose. */
  border-radius: 20px; overflow: hidden; border-top: 5px solid var(--color-nivel, var(--coral-claro));
}
.clase-recuperar > * { min-width: 0; }
.clase-recuperar .clase-cuando { display: flex; flex-direction: column; gap: 4px; margin: 0; }
.clase-recuperar .clase-cuando strong, .clase-recuperar .clase-cuando span {
  font: 800 23px/1.3 Nunito, Mukta, sans-serif; color: var(--marino);
}
.clase-recuperar .clase-que h3 { margin: 0 0 4px; font-size: 18px; color: var(--marino); }
.clase-recuperar .clase-que p { margin: 0; font-size: 16px; }
/*
 * Lo que dice cada clase, por orden de lo que decide una familia: el nivel en
 * pastilla, el sitio como titular, el punto exacto y con quién es. Lo pidió
 * así Adrián el 5 de noviembre de 2026. La especialidad no se repite aquí: en
 * esos niveles hay una sola puesta arriba y el título de la fila la dice.
 */
.clase-recuperar .clase-que .clase-marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
/* El nivel va del color de su cartel, el mismo que el filete de la tarjeta. */
.marca-nivel-clase {
  display: inline-block; padding: 2px 11px; border-radius: 999px;
  background: var(--color-nivel, var(--marino)); color: var(--texto-nivel, #fff);
  font-size: 12.5px; font-weight: 700; white-space: nowrap;
}
/* La zona encima de la instalación, en su propio renglón: «tiene que poner
   Actur / El Pilar Maristas». Y el horario entero debajo. */
.clase-recuperar .clase-que .clase-zona {
  margin-bottom: 1px; color: var(--suave); font-size: 14.5px; font-weight: 700;
}
.clase-recuperar .clase-que .clase-horario {
  margin-top: 2px; color: var(--marino); font-variant-numeric: tabular-nums;
}
.clase-recuperar .clase-que .clase-monitor { margin-top: 6px; color: var(--suave); }
.clase-recuperar .clase-monitor strong { color: var(--marino); font-weight: 700; }
.clase-recuperar .clase-hueco { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
/*
 * El semáforo de la familia es más grande que el de las tablas, pero con los
 * mismos colores que el resto de la plataforma: verde si hay sitio, ámbar si
 * es la última. Antes iba todo en gris y en coral, y el coral de «última
 * plaza» se leía como un error.
 */
.clase-recuperar .semaforo {
  align-self: flex-start; border-radius: 50px; padding: 5px 12px;
  font-size: 14px; white-space: normal;
}
/* Los enlaces saltan de línea y los nombres largos caben incluso en un móvil. */
.zonas-recuperar { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0; }
/* Con título encima, el margen lo lleva la fila y no la lista de pastillas. */
.filtro-recuperar { margin: 24px 0; }
.filtro-recuperar .zonas-recuperar { margin: 0; }
/*
 * El bocadillo de advertencia que va debajo de unas pastillas: no es un error
 * —de ahi que no sea coral, que es el color de lo que esta mal— sino algo que
 * hay que saber antes de pedir la clase. Ambar, como «Última plaza».
 */
.aviso-recuperar {
  display: flex; align-items: flex-start; gap: 11px;
  margin: -8px 0 24px; padding: 13px 18px; border-radius: 16px;
  background: #fbeccf; color: #7a4a12; font-size: 15px; line-height: 1.5;
}
.aviso-recuperar strong { color: #5f3a0e; }
.aviso-recuperar-marca {
  flex: none; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 50%; background: #e8a33d; color: #fff; font-weight: 800; font-size: 15px;
}
.pastilla-zona-recuperar {
  /* Vale de enlace y de botón: en «¿En qué sitio estás?» elegir guarda dónde
     estás, así que la pastilla es un botón de un formulario. */
  font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; min-height: 50px; max-width: 100%; min-width: 0;
  padding: 12px 20px; border-radius: 50px; border: 1px solid var(--color-pastilla);
  background: var(--papel); color: var(--marino); font-size: 16px;
  font-weight: 600; text-decoration: none; text-align: center; overflow-wrap: anywhere;
}
@supports (background: color-mix(in srgb, black 8%, white)) {
  .pastilla-zona-recuperar {
    background: color-mix(in srgb, var(--color-pastilla) 8%, var(--papel));
  }
}
/* Marcada se nota por el color a tope, sin subrayarla: el subrayado la hacía
   parecer un enlace a medio pulsar, y sobra teniendo el fondo entero. */
.pastilla-zona-recuperar[aria-current="true"] {
  background: var(--color-pastilla); color: var(--texto-pastilla);
  border-color: var(--color-pastilla);
}
.pastilla-zona-recuperar:hover { box-shadow: inset 0 0 0 1px var(--color-pastilla); }
.plazo-recuperar {
  margin: 22px 0; padding: 16px 20px; color: var(--texto); font-size: 15px;
  background: var(--coral-flojo); border-radius: 20px;
}
.indicaciones-recuperar, .formulario-recuperar, .pantalla-recuperar .datos-publicos {
  margin: 20px 0; padding: 22px; background: var(--papel);
  border: 0; border-radius: 20px; overflow: hidden;
}
.pantalla-recuperar .datos-publicos { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.pantalla-recuperar .datos-publicos dt { font-size: 15px; }
.pantalla-recuperar .datos-publicos dd { font-size: 19px; line-height: 1.4; }
.indicaciones-recuperar h2, .formulario-recuperar h2 { margin: 0 0 8px; font-size: 21px; color: var(--marino); }
.indicaciones-recuperar p { margin: 0; line-height: 1.6; }
.formulario-recuperar { display: grid; gap: 18px; }
.formulario-recuperar label { display: grid; gap: 6px; min-width: 0; }
.formulario-recuperar label > span:first-child { color: var(--marino); font-size: 17px; }
.pantalla-recuperar .formulario-recuperar input {
  margin: 0; width: 100%; min-width: 0; min-height: 48px; padding: 10px 14px;
  font-size: 17px; border-radius: 12px;
}
.formulario-recuperar .pie-campo { color: var(--suave); font-size: 15px; }
.formulario-recuperar button { width: 100%; margin-top: 6px; }
.pantalla-recuperar .error-publico {
  background: var(--coral-flojo); border-color: var(--coral); color: var(--marino);
}
.cancelar-recuperar { margin-top: 24px; color: var(--suave); font-size: 15px; }
.cancelar-recuperar a { display: inline-block; padding: 10px 0; color: var(--marino); min-height: 44px; }
/* Las columnas solo aparecen cuando dejan espacio real para leer el sitio. */
@media (min-width: 621px) {
  .pantalla-recuperar .cabecera-recuperar { padding: 32px; }
  .clase-recuperar { grid-template-columns: minmax(0, 1fr) auto; padding: 24px; }
  .clase-recuperar .clase-cuando { grid-column: 1 / -1; }
  .clase-recuperar .clase-hueco { align-items: flex-end; }
  .pantalla-recuperar .datos-publicos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Y en la lista del monitor: el que viene a recuperar va en la misma lista,
   con una pastilla que dice lo que es. No debajo y no en un aviso. */
.marca-recupera {
  display: inline-block; margin-left: 8px; padding: 1px 8px;
  background: #e8f1fb; color: #1d4f86; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; vertical-align: middle;
}

/* ------------------------------------- los WhatsApps de las recuperaciones
 *
 * Son treinta mensajes que se abren a mano, uno detrás de otro. Lo que importa
 * es ver de un vistazo por dónde vas, así que el avisado se apaga entero en
 * vez de llevar una marca pequeña.
 */
.pastillas-dias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.pastilla-dia {
  padding: 7px 13px; border: 1px solid var(--linea); border-radius: 999px;
  background: var(--papel); text-decoration: none; font-size: 14px; color: var(--marino);
}
.pastilla-dia .apagado { margin-left: 6px; font-size: 12.5px; }
.pastilla-dia.puesta { background: var(--coral); border-color: var(--coral); color: #fff; }
.pastilla-dia.puesta .apagado { color: #ffffffcc; }
.resumen-operativa { margin: 14px 2px 10px; }

/*
 * El día de los avisos: dos flechas, el día en grande y un HOY. Lo pidió
 * Adrián el 4 de noviembre de 2026: «en vez de poner qué día con pastillas,
 * hay que poner HOY, y la flecha adelante y atrás… y poner en grande el día
 * que está seleccionado». Con veinte días, veinte pastillas eran una pared.
 */
.navega-dia {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  background: var(--papel); border: 1px solid var(--borde); border-radius: 16px;
  padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--sombra);
}
.dia-elegido { display: flex; flex-direction: column; gap: 2px; }
.navega-botones { display: flex; align-items: center; gap: 10px; }
.navega-calendario {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding-top: 11px; border-top: 1px solid var(--linea); width: 100%;
}
.navega-calendario label {
  font-size: 12px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--suave);
}
/* Con `max-width` y no con `width`: el estilo general de los campos los pone
   al 100% con cinco `:not(...)` encima, que pesan más que cualquier selector
   sensato de aquí. Un tope sí lo recorta sin pelearse con nadie. */
.navega-calendario input[type="date"] { max-width: 12rem; padding: 7px 11px; }
.dia-grande {
  font-size: 23px; line-height: 1.2; font-weight: 700; color: var(--marino);
}
.flecha-dia {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
  border: 1px solid var(--borde); background: var(--papel);
  color: var(--marino); font-size: 20px; text-decoration: none;
}
.flecha-dia:hover { border-color: var(--coral); color: var(--coral); }
.flecha-dia.apagada { color: var(--borde); cursor: default; }
.boton-hoy[aria-current="true"] {
  background: var(--coral); border-color: var(--coral); color: #fff; font-weight: 700;
}
@media (max-width: 700px) {
  .dia-grande { font-size: 19px; }
  .navega-dia { gap: 10px; padding: 12px; }
}

.wa-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 10px 0 16px; }
.wa-barra .apagado { font-size: 12.5px; flex: 1 1 260px; }
/*
 * Una línea por aviso, con el mensaje dentro. Lo pidió Adrián el 4 de
 * noviembre de 2026: «quiero que salga algo sencillo [...] y luego, si le doy
 * a cada una, que se despliegue el mensaje que se le mandaría». Antes eran
 * treinta mensajes enteros, uno debajo de otro.
 *
 * Las columnas se reparten con una rejilla y la cabecera lleva la misma, así
 * que cuadran sin ser una tabla: una tabla no puede esconder nada dentro de
 * una fila sin JavaScript, y un `<details>` sí.
 */
.wa-lista { display: grid; gap: 6px; }
.wa-de-familia { --wa-columnas: minmax(9rem, 1.5fr) 4.2rem minmax(8rem, 2fr)
  minmax(6rem, 1fr) minmax(6rem, 1fr) minmax(7rem, 1.2fr) 6.5rem 2.4rem; }
.wa-de-monitor { --wa-columnas: minmax(9rem, 1.5fr) 6rem minmax(7rem, 1fr) 6.5rem 2.4rem; }
/* Los mensajes al equipo: quién, su correo, cuántos grupos, cómo va y el
   icono. El correo se lleva el ancho porque es lo más largo y lo que hay que
   poder leer entero: es con lo que entra cada uno. */
.wa-de-equipo { --wa-columnas: minmax(9rem, 1.3fr) minmax(10rem, 1.6fr)
  minmax(5rem, .7fr) 6.5rem 2.4rem; }
.wa-fila {
  display: grid; grid-template-columns: var(--wa-columnas);
  align-items: center; gap: 10px; padding: 9px 12px;
}
.wa-cabeza {
  font-size: 11.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--suave); padding-bottom: 4px;
}
.wa-col { min-width: 0; overflow-wrap: anywhere; }
.wa-nombre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; }
.wa-nombre strong { color: var(--marino); font-size: 15px; }
.wa-mensaje {
  border: 1px solid var(--linea); border-radius: 12px; background: var(--papel);
}
.wa-mensaje > summary { cursor: pointer; list-style: none; }
.wa-mensaje > summary::-webkit-details-marker { display: none; }
.wa-mensaje > summary:hover { background: var(--cebra); border-radius: 12px; }
.wa-mensaje[open] > summary { border-bottom: 1px solid var(--linea); border-radius: 12px 12px 0 0; }
.wa-dentro { display: grid; gap: 8px; padding: 12px 14px 14px; }
.wa-mensaje.ya-avisado { opacity: .62; background: var(--fondo); }
/* La pastilla es un botón: se pulsa y cambia de Pendiente a Avisado y al
   revés, así que tiene que parecer pulsable y no un adorno. */
.wa-estado {
  justify-self: start; padding: 3px 11px; border-radius: 999px; border: 1px solid transparent;
  background: #fff4e0; color: #8a6d10; font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer;
}
.wa-estado:hover { border-color: #e0c48a; }
.ya-avisado .wa-estado { background: #e4f5ea; color: #1d6b3e; }
.ya-avisado .wa-estado:hover { border-color: #9ed3b3; }
.wa-icono { justify-self: end; }
.wa-icono .wa svg { width: 20px; height: 20px; }

/* En pantalla pequeña la rejilla no cabe: cada dato en su renglón, y la
   cabecera sobra porque ya no hay columnas que encabezar. */
@media (max-width: 860px) {
  .wa-fila { grid-template-columns: 1fr; gap: 4px; }
  .wa-cabeza { display: none; }
}
.wa-texto {
  width: 100%; margin: 0; font-size: 13.5px; line-height: 1.5;
  font-family: inherit; resize: vertical;
}
.wa-botones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* La vista previa en la ficha del grupo: se lee como un mensaje, no como un
   formulario, así que va en su recuadro y con los huecos marcados. */
.wa-previa-titulo { display: block; margin-top: 16px; }
.wa-previa {
  margin-top: 6px; padding: 14px 16px; white-space: pre-wrap;
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 12px;
  font-size: 13.5px; line-height: 1.6; color: var(--texto);
}
.wa-hueco {
  padding: 0 6px; border-radius: 5px; background: #fff4e0;
  color: #8a6d10; font-style: italic;
}

/*
 * Los papeles: qué ve cada quien. Un recuadro por papel, con sus casillas
 * agrupadas por módulo. Se lee como una lista de la compra, que es lo que es.
 */
.pantalla-papeles { max-width: var(--papeles-ancho); }
.papel { margin-bottom: 18px; padding: 18px; }
.papel-cabeza {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 14px; flex-wrap: wrap;
}
.papel-cabeza h2 { margin: 0 0 2px; }
.papel-cabeza .semaforo { flex-shrink: 0; }
.campo-papel { display: flex; flex-direction: column; gap: 5px; max-width: 24rem;
  font-size: 13px; color: var(--suave); }
.papel-areas {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 14px; margin: 16px 0 4px;
}
/* Escuela necesita una fila propia: sus seis áreas no deben estirar
   los módulos de una sola casilla hasta dejar recuadros vacíos. */
.papel-modulo {
  flex: 1 1 17rem; min-width: 0; padding: 14px;
  border: 1px solid var(--linea); border-radius: 12px;
  background: var(--fondo);
}
.papel-modulo--amplio { flex-basis: 100%; }
.papel-casillas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  column-gap: 22px;
}
.papel-modulo-nombre {
  font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  color: var(--suave); margin-bottom: 7px;
}
.papel-area {
  display: flex; align-items: flex-start; gap: 9px; padding: 6px 0;
  font-size: 14px; color: var(--marino); cursor: pointer; min-width: 0;
  overflow-wrap: anywhere;
}
.papel-area input { margin-top: 3px; flex-shrink: 0; }
.papel-area span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.papel-area .apagado { font-size: 12.5px; line-height: 1.4; }
.papel-pie { margin-top: 12px; }
.papel-borrar { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--linea); }
.papeles-check label { display: flex; align-items: center; gap: 7px; }

/* La lista de buscadores: sobre todo enlaces para copiar y pegar en zlalom.com. */
/* El tope incluye el título y la explicación para que terminen con la
   tarjeta. Así la dirección no acumula cientos de píxeles vacíos. */
.pantalla-buscadores { max-width: var(--buscador-ancho-pantalla); }
.lista-buscadores { list-style: none; margin: 0 0 18px; padding: 0; }
.buscador-fila {
  display: grid; grid-template-columns: minmax(0, var(--buscador-ancho-nombre)) auto minmax(0, 1fr) auto;
  gap: 14px; align-items: center;
  padding: 11px 0; border-bottom: 1px solid var(--linea);
}
.buscador-fila:last-child { border-bottom: 0; }
.buscador-que { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.buscador-nombre { color: var(--marino); font-weight: 600; font-size: 15px; }
.buscador-que .apagado { font-size: 12.5px; }
.buscador-cuantos { color: var(--suave); font-size: 13px; white-space: nowrap; }
.buscador-url {
  font-size: 12.5px; color: var(--suave); background: var(--campo);
  padding: 4px 9px; border-radius: 6px;
  /* Se puede leer y copiar la dirección completa aunque el dominio crezca. */
  min-width: 0; white-space: normal; overflow-wrap: anywhere;
}
.copiar-enlace { padding: 5px 14px; font-size: 13px; }
.aviso-buscadores {
  margin: 18px 0 0; padding: 12px 16px; background: #fffbef;
  border: 1px solid #f0e2b4; border-radius: 10px; font-size: 14px;
}
/* Con la barra lateral, las cuatro columnas dejan de tener sitio antes
   de llegar al móvil; dirección y botón pasan juntos al segundo renglón. */
@media (max-width: 1100px) {
  .buscador-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .buscador-url { grid-column: 1; grid-row: 2; }
  .buscador-fila .copiar-enlace { grid-column: 2; grid-row: 2; }
}

/*
 * Los avisos al móvil. Dos cosas distintas en la misma pantalla: a quién se le
 * mandan (la columna de la tabla) y este móvil (la caja de abajo). El permiso
 * del móvil no lo puede dar el club por nadie, así que no puede ser otra
 * columna más: tiene que ser una caja aparte que lo explique.
 */
.caja-push {
  margin-top: 18px; padding: 20px 22px; max-width: 640px;
  border: 1px solid var(--borde); border-top-width: 3px;
}
.caja-push h2 { margin: 0 0 6px; font-size: 19px; color: var(--marino); }
.caja-push > p { margin: 0 0 14px; font-size: 14.5px; max-width: 70ch; }
.push-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.caja-push #push-estado { margin: 0; font-size: 14px; }
.push-botones:has(> :not([hidden])) { margin-top: 14px; }
.caja-push .boton {
  min-height: 44px; max-width: 100%; white-space: normal;
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
}
.caja-push .boton:focus-visible {
  outline: 2px solid var(--marino); outline-offset: 3px;
}
.caja-push .boton:disabled { opacity: .6; cursor: wait; }
.caja-push .push-instalar { margin-top: 14px; text-decoration: underline; text-underline-offset: 3px; }

/*
 * La caja se ve distinta segun como este este movil, y la clase la pone
 * `push-movil.js` cuando ya lo sabe —antes no se sabe, y una caja que grita
 * antes de mirar grita tambien a quien ya los tiene puestos—.
 *
 * Sin poner: se le ve, que es de lo que se trata. Lo pidio Adrian el 7 de
 * noviembre de 2026: «el aviso de activar las notificaciones si no lo tienen
 * hecho. Les tiene que salir».
 */
.caja-push.sin-poner {
  border-top-color: var(--coral); background: var(--papel);
}
/* «Les tiene que salir», pidió Adrián: el acento invita y el botón destaca,
   sin teñir de alarma toda la explicación. El marino mantiene el contraste. */
.caja-push.sin-poner #push-estado { color: var(--marino); font-weight: 600; }
.caja-push #push-encender { background: var(--marino); border-color: var(--marino); color: var(--papel); }
.caja-push #push-encender:hover { background: var(--texto); border-color: var(--texto); }
/* El verde de la marca es demasiado claro para texto pequeño sobre blanco:
   confirma con un punto, mientras las palabras siguen siendo legibles. */
.caja-push.puestos { box-shadow: none; }
.caja-push .push-proxima-vez { display: none; }
.caja-push.puestos .push-proxima-vez {
  display: block; margin: 12px 0 0; color: var(--suave); font-size: 14px;
}
.caja-push.puestos #push-estado { color: var(--texto); }
.caja-push.puestos #push-estado::before {
  content: ''; display: inline-block; width: 8px; height: 8px;
  margin-right: 8px; border-radius: 50%; background: var(--verde);
}
.caja-push.puestos .boton {
  padding: 8px 10px; border-color: transparent; background: transparent;
  font-size: 14px; text-decoration: underline; text-underline-offset: 3px;
}
.caja-push.puestos .boton:hover { background: var(--fondo); }
/* Si aún no se puede, la salida pesa más que el bloqueo. La instalación
   conserva el nombre y el destino de la tarjeta que está justo encima. */
.caja-push.bloqueados #push-estado,
.caja-push.hay-que-instalar #push-estado {
  padding: 12px 14px; border-radius: 10px;
  background: var(--campo); color: var(--marino);
}
@media (max-width: 560px) {
  .caja-push { padding: 18px; }
  .caja-push .push-botones { flex-direction: column; }
  .caja-push .boton { width: 100%; }
}
.avisos-tabla .interruptor-push { margin: 0 auto; }


/*
 * Cabeceras que ordenan, en cualquier tabla de la casa.
 *
 * Lo pidió Adrián como regla: «todas las columnas en general quiero poder
 * ordenarlas, recuérdalo siempre». La flecha sale apagada en todas —si solo
 * saliera en la que está ordenada, no habría manera de saber que las demás
 * también se pueden pulsar— y se enciende en la que manda.
 */
table[data-ordenable] th:not([data-sin-orden]) {
  cursor: pointer; user-select: none; white-space: nowrap;
}
table[data-ordenable] th:not([data-sin-orden]):hover { color: var(--coral); }
table[data-ordenable] th.ordenable::after {
  content: '↕'; margin-left: 5px; opacity: .3; font-size: 11px;
}
table[data-ordenable] th.ordenable.ordenada { color: var(--coral); }
table[data-ordenable] th.ordenable.ordenada::after { content: '↑'; opacity: 1; }
table[data-ordenable] th.ordenable.ordenada.al-reves::after { content: '↓'; }
/* Que se vea por dónde va el teclado: una cabecera que se puede pulsar con
   Intro tiene que decir cuándo está enfocada. */
table[data-ordenable] th.ordenable:focus-visible {
  outline: 2px solid var(--coral); outline-offset: -2px; border-radius: 4px;
}
/* Lo mismo en las listas que no son tablas —la de monitores— donde la
   cabecera es una fila de `span` y no de `th`. Se pulsa igual y la flecha
   dice lo mismo. */
.wa-lista[data-ordenable] .wa-cabeza .wa-col.ordenable {
  cursor: pointer; user-select: none;
}
.wa-lista[data-ordenable] .wa-cabeza .wa-col.ordenable:hover { color: var(--coral); }
.wa-lista[data-ordenable] .wa-cabeza .wa-col.ordenable::after {
  content: '↕'; margin-left: 5px; opacity: .3; font-size: 11px;
}
.wa-lista[data-ordenable] .wa-cabeza .wa-col.ordenada { color: var(--coral); }
.wa-lista[data-ordenable] .wa-cabeza .wa-col.ordenada::after { content: '↑'; opacity: 1; }
.wa-lista[data-ordenable] .wa-cabeza .wa-col.ordenada.al-reves::after { content: '↓'; }
.wa-lista[data-ordenable] .wa-cabeza .wa-col.ordenable:focus-visible {
  outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 4px;
}

/* En el feedback, el nombre del grupo lleva a su ficha y el número también,
   cada uno en su columna: desde aquí lo que se quiere mirar está a un toque.
   El que se estira es la celda, no el enlace: el blanco de la fila abre la
   clase, que es lo que tiene que hacer el fondo de una fila. */
.clase-pastilla a.clase-nombre { color: var(--marino); text-decoration: none; }
.clase-pastilla a.clase-nombre:hover { color: var(--coral); text-decoration: underline; }
.numero-grupo-feedback {
  flex: 0 0 auto; font-size: 11.5px; font-weight: 700; color: var(--suave);
  background: var(--campo); border-radius: 999px; padding: 1px 8px;
  text-decoration: none; font-variant-numeric: tabular-nums;
}
.numero-grupo-feedback:hover { color: var(--coral); }

/* El resultado de un aviso de prueba. Tres estados y no dos: salió y llegó,
   salió y no se sabe, y no salió. El de en medio es el honesto cuando el móvil
   no contesta: no se puede decir que ha llegado ni que no. */
.probar-push { padding: 3px 12px; font-size: 12.5px; margin-top: 6px; }
.resultado-prueba {
  display: block; font-size: 12px; line-height: 1.5; margin-top: 8px; max-width: 240px;
  padding: 8px 12px; border-radius: 10px; background: var(--campo);
  color: var(--texto); overflow-wrap: anywhere;
}
.resultado-prueba:empty { display: none; }
.resultado-prueba.esperando { color: var(--suave); }
.resultado-prueba.bien { color: var(--estado-bien); background: var(--estado-bien-fondo); }
/* El ámbar informa de una entrega sin confirmar; no es una alarma. */
.resultado-prueba.ojo { color: var(--estado-ojo); background: var(--estado-ojo-fondo); }
.resultado-prueba.mal { color: var(--coral-oscuro); background: var(--coral-flojo); }

/*
 * El buzón de avisos.
 *
 * Cada mensaje es una pastilla suya y separada, que lo pidió Adrián así:
 * antes eran filas con una raya entre medias y con cuatro avisos seguidos no
 * se veía dónde acababa uno y empezaba el siguiente.
 *
 * Un aviso leído no se borra: sigue diciendo que ese día faltó una lista. Se
 * apaga y baja al final, y el aspa sí lo quita.
 */
.lista-buzon { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.aviso-buzon {
  display: flex; gap: 16px; align-items: flex-start; justify-content: space-between;
  padding: 16px 18px;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 14px;
}
/* El sin leer, con filo coral a la izquierda: con doce en la lista, saber
   cuáles son nuevos de un vistazo es toda la utilidad de la pantalla. */
.aviso-buzon:not(.leido) { border-left: 4px solid var(--coral); }
.aviso-buzon.leido { background: var(--fondo); opacity: .7; }
.aviso-cuerpo { min-width: 0; }
.aviso-cuerpo strong { color: var(--marino); font-size: 15.5px; }
.aviso-cuerpo p { margin: 4px 0 2px; font-size: 14px; white-space: pre-line; }
.aviso-cuando { display: block; font-size: 12.5px; }
.aviso-abajo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.aviso-ir { padding: 4px 16px; font-size: 13px; }

/* Marcar como leído, en amarillo y debajo del aviso, como lo pidió. */
.pastilla-marcar {
  cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  padding: 5px 15px; border-radius: 999px;
  background: #fbeccf; border: 1px solid #f0dfc2; color: #8a5516;
}
.pastilla-marcar:hover { background: #f7dfae; }
.pastilla-leido {
  font-size: 12.5px; font-weight: 600; padding: 4px 13px; border-radius: 999px;
  background: var(--campo); color: var(--suave);
}

/*
 * Borrar: el aspa roja a la derecha del todo, con el nombre debajo. Un aspa
 * sola es un acertijo, y más cuando lo que hace no se puede deshacer.
 */
.aviso-borrar {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.aspa-borrar {
  width: 34px; height: 34px; border-radius: 999px; cursor: pointer;
  background: var(--coral-flojo); border: 1px solid #f3cfc8; color: var(--coral-oscuro);
  font-size: 15px; line-height: 1; padding: 0;
}
.aspa-borrar:hover { background: var(--coral); border-color: var(--coral); color: #fff; }
.aviso-borrar-texto { font-size: 11.5px; color: var(--suave); white-space: nowrap; }

@media (max-width: 560px) {
  /* En el móvil, borrar se va abajo del todo y en fila: en columna a la
     derecha se come media pantalla de ancho y el aviso no se lee. */
  .aviso-buzon { flex-direction: column; gap: 10px; }
  .aviso-borrar { flex-direction: row; align-self: flex-end; gap: 8px; align-items: center; }
}

/* --------------------------------------------- grupos en pruebas de monitores
 *
 * La tabla de en qué grupos manda ya la nueva. Dos cosas la separan de las
 * demás: las razones por las que un grupo está dentro, que son varias y van
 * una al lado de otra, y el interruptor de la mano con su camino de vuelta
 * debajo.
 */
.pastillas-prueba { margin: -8px 0 18px; }
.tabla-pruebas td { vertical-align: middle; }
/*
 * Aqui el nombre del grupo se parte en vez de cortarse. En el listado de
 * alumnos cortar esta bien —son 9.828 filas y lo que se busca es el nombre de
 * la persona—, pero aqui hay sesenta filas y lo unico que identifica un grupo
 * es su nombre entero: "26-27 CEIP Parque Venecia Miercoles 15:30..." cortado
 * en "CEIP Parque Ven..." no distingue el del lunes del del miercoles.
 */
.tabla-pruebas td:first-child, .tabla-pruebas td:nth-child(2), .tabla-pruebas .porque-prueba {
  white-space: normal; overflow: visible; text-overflow: clip;
}
.tabla-pruebas td:first-child { line-height: 1.35; padding-top: 9px; padding-bottom: 9px; }
/* Con el reparto fijo, los anchos los manda la cabecera. */
.tabla-pruebas th:nth-child(1) { width: 29%; }
.tabla-pruebas th:nth-child(2) { width: 14%; }
.tabla-pruebas th:nth-child(3) { width: 21%; }
.tabla-pruebas th:nth-child(4) { width: 70px; }
.tabla-pruebas th:nth-child(5) { width: 13%; }
.tabla-pruebas th:nth-child(6) { width: 82px; }
.tabla-pruebas th:nth-child(7) { width: 120px; }
/* El que ya tiene lista pasada es el que de verdad no se puede pisar: se lee
   antes que el que solo está dentro por su monitor. */
.tabla-pruebas tr.puesto strong { color: var(--marino); }
.porque-prueba { line-height: 2.1; }
.porque-prueba .etiqueta { white-space: nowrap; }
.tabla-pruebas .avisos-interruptor { margin: 0; }
.tabla-pruebas .enlace-flojo { font-size: 12px; margin-top: 3px; }
.anadir-a-pruebas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.anadir-a-pruebas label { font-size: 13.5px; color: var(--suave); }
.anadir-a-pruebas select { margin: 0; min-width: 260px; max-width: 100%; }
/* El recuadro de escribir que le pone delante `elegir-escribiendo`: sin esto
   se come la fila entera y el boton se va a la linea de abajo. */
.anadir-a-pruebas .escribible { width: 320px; max-width: 100%; }

/* Comparación de plataformas: el contraste permite revisar muchas fichas sin
   depender solo del color para reconocer un descuadre. */
:root {
  --comparar-bien: #26714f;
  --comparar-mal: #b33e36;
}
.comparar-pantalla { max-width: 1240px; margin: 0 auto; }
.comparar-pantalla [hidden] { display: none !important; }
.comparar-cabecera h1 { font-family: Nunito, Mukta, sans-serif; font-weight: 800; font-size: clamp(25px, 3vw, 36px); margin: 4px 0; color: var(--marino); }
.comparar-cabecera p { margin: 6px 0 18px; }
.comparar-cabecera .comparar-antetitulo { color: var(--suave); margin-bottom: 0; font-weight: 600; }
/* La foto de la vieja puede llegar incompleta: el monitor solo esta en su
   listado, y si el listado venia filtrado la foto se trae sin monitores. Sin
   un aviso bien visible, la pantalla callaria que no puede comparar eso. */
.comparar-aviso { margin: 10px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--coral-flojo); color: var(--comparar-mal); border: 1px solid var(--coral); font-weight: 600; }
.comparar-foto { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 12px 18px; background: var(--cabecera); color: var(--marino); border-radius: 14px; border: 1px solid var(--borde); }
.comparar-ayuda { margin: 12px 0 24px; }
.comparar-pantalla summary { cursor: pointer; }
.comparar-ayuda summary { color: var(--enlace); }
.comparar-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.comparar-filtros .boton { padding: 8px 14px; }
.comparar-filtros strong { margin-left: 8px; }
.comparar-filtros [aria-pressed="true"] { background: var(--marino); color: var(--papel); border-color: var(--marino); }
.comparar-busqueda { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.comparar-busqueda label { flex: 1 1 280px; font-weight: 600; }
.comparar-busqueda input { display: block; width: 100%; margin-top: 5px; border: 1px solid var(--borde); border-radius: 14px; background: var(--papel); color: var(--texto); padding: 11px 16px; font: inherit; }
.comparar-pantalla :focus-visible { outline: 3px solid var(--enlace); outline-offset: 3px; }
.comparar-pantalla button:disabled { opacity: .5; cursor: default; }
.comparar-lista { display: grid; gap: 10px; }
.comparar-recorrido { position: sticky; top: 76px; z-index: 4; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0; margin-top: 8px; background: var(--fondo); }
.comparar-grupo { background: var(--papel); border: 1px solid var(--borde); border-left: 4px solid var(--borde); border-radius: 16px; scroll-margin-top: 158px; min-width: 0; }
.comparar-pendiente { border-left-color: var(--comparar-mal); }
.comparar-grupo > summary { display: flex; align-items: center; gap: 14px; padding: 18px; list-style: none; }
.comparar-grupo > summary::-webkit-details-marker { display: none; }
.comparar-grupo > summary:hover { background: var(--cebra); border-radius: 16px; }
.comparar-numero { font-variant-numeric: tabular-nums; color: var(--suave); font-size: 14px; }
.comparar-identidad { flex: 1; min-width: 0; }
.comparar-identidad strong { display: block; font-size: 17px; color: var(--marino); overflow-wrap: anywhere; }
.comparar-identidad > span { display: block; font-size: 14px; }
/* El monitor en la fila plegada: su propia columna, de ancho fijo, para que
   los 250 queden alineados y se lean bajando con la vista. Lo pidio el. */
.comparar-monitor { flex: 0 0 158px; min-width: 0; display: grid; gap: 1px; font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.comparar-monitor .apagado { font-size: 12px; }
.comparar-monitor-choca { color: var(--comparar-mal); font-weight: 600; }
.comparar-estado { border-radius: 50px; padding: 4px 12px; font-weight: 700; background: var(--fondo); white-space: nowrap; }
.comparar-pendiente > summary .comparar-estado { color: var(--comparar-mal); background: var(--coral-flojo); }
.comparar-cuadra > summary .comparar-estado { color: var(--comparar-bien); }
.comparar-fuera { background: var(--cebra); }
.comparar-fuera > summary .comparar-identidad strong, .comparar-fuera .comparar-estado { color: var(--suave); }
.comparar-desplegar { font-size: 23px; color: var(--suave); }
.comparar-grupo[open] > summary .comparar-desplegar { transform: rotate(45deg); }
.comparar-detalle { padding: 0 22px 22px; border-top: 1px solid var(--borde); }
/* El veredicto, justo encima de las dos fichas: el numero del grupo, si
   cuadra o no, y por que. Al bajar por un grupo abierto la fila de arriba se
   va de la pantalla, y sin esto no se sabe ni que se esta mirando. */
.comparar-encabezado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; background: var(--cebra); }
.comparar-pendiente .comparar-encabezado { background: var(--coral-flojo); }
.comparar-encabezado-numero { font-weight: 800; font-size: 17px; color: var(--marino); font-variant-numeric: tabular-nums; }
.comparar-encabezado-porque { flex: 1 1 240px; color: var(--suave); }
.comparar-encabezado .comparar-estado { background: var(--papel); }
.comparar-pendiente .comparar-encabezado .comparar-estado { color: var(--comparar-mal); }
.comparar-cuadra .comparar-encabezado .comparar-estado { color: var(--comparar-bien); }
.comparar-fuera .comparar-encabezado .comparar-estado { color: var(--suave); }
/* Las dos fichas, una por plataforma: la vieja a la izquierda y esta a la
   derecha, cada una con su enlace dentro. Columnas de ancho igual y topado
   (minmax(0,1fr)) porque si un nombre largo estira su lado, las dos dejan de
   poder leerse en paralelo, que es para lo unico que existe esta pantalla. */
.comparar-caras { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 16px; align-items: start; }
.comparar-cara { min-width: 0; border: 1px solid var(--borde); border-radius: 14px; background: var(--papel); overflow: hidden; }
.comparar-cara-vieja { border-top: 4px solid var(--suave); }
.comparar-cara-nueva { border-top: 4px solid var(--marino); }
.comparar-cara-falta { background: var(--cebra); }
.comparar-cara-cabecera { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: 10px; padding: 14px 16px; background: var(--cabecera); }
.comparar-cara-quien { min-width: 0; flex: 1 1 170px; }
.comparar-cara-quien strong { display: block; color: var(--marino); font-size: 16px; overflow-wrap: anywhere; }
/* Y el monitor pegado al nombre, dentro de la cabecera gris de cada ficha:
   en la lista de campos es el undecimo y hay que bajar a buscarlo. Lo pidio
   el ahi, ademas de en la fila plegada. */
.comparar-cara-monitor { display: block; margin-top: 4px; font-size: 14px; color: var(--texto); overflow-wrap: anywhere; }
.comparar-cara-monitor-choca { color: var(--comparar-mal); font-weight: 600; }
.comparar-cara-cabecera .boton { white-space: nowrap; padding: 8px 14px; }
.comparar-marcas { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.comparar-etiqueta { display: block; color: var(--suave); font-size: 12px; font-weight: 600; }
/* El miniresumen del grupo. Nombre del campo y valor en dos columnas fijas:
   asi la vista baja por los valores de un lado y del otro sin tropezar. */
.comparar-ficha { margin: 0; }
.comparar-dato { display: grid; grid-template-columns: 102px minmax(0, 1fr); gap: 10px; padding: 7px 16px; border-top: 1px solid var(--borde); }
.comparar-dato dt { color: var(--suave); font-size: 13px; }
.comparar-dato dd { margin: 0; overflow-wrap: anywhere; }
.comparar-dato-distinto { background: var(--coral-flojo); }
.comparar-dato-distinto dd { font-weight: 700; color: var(--comparar-mal); }
.comparar-fuera .comparar-dato-distinto { background: var(--cebra); }
.comparar-fuera .comparar-dato-distinto dd { color: var(--texto); font-weight: 600; }
/* Un campo que una plataforma tiene y la otra no: no es una contradiccion que
   haya que ir a arreglar, asi que se dice en gris y no en rojo. */
.comparar-dato-hueco { background: var(--cebra); }
.comparar-marca { display: inline-block; margin-left: 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--comparar-mal); }
.comparar-fuera .comparar-marca { color: var(--suave); }
.comparar-cara-gente { padding: 12px 16px; border-top: 1px solid var(--borde); }
.comparar-cara-gente > strong { color: var(--marino); }
.comparar-cara-gente > span { display: block; font-size: 13.5px; }
.comparar-personas { padding-left: 18px; margin: 8px 0 0; }
.comparar-personas li { padding: 3px 0; }
.comparar-solo { color: var(--comparar-mal); font-weight: 600; }
.comparar-solo .apagado { font-weight: 400; }
.comparar-resto { margin-top: 12px; border-top: 1px solid var(--borde); padding-top: 10px; }
.comparar-resto > summary { font-weight: 600; color: var(--enlace); }
.comparar-nota, .comparar-sin-resultados { background: var(--cabecera); border-radius: 12px; padding: 14px 18px; }
.comparar-cara > .comparar-nota { margin: 14px 16px; border-radius: 10px; }
@media (max-width: 900px) {
  /* Antes de que las dos columnas se queden tan estrechas que todo parta en
     dos lineas, se ponen una debajo de la otra. */
  .comparar-caras { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 650px) {
  .comparar-grupo > summary { flex-wrap: wrap; gap: 6px 10px; padding: 14px; }
  .comparar-identidad { flex-basis: calc(100% - 80px); }
  /* En el telefono el monitor baja a la segunda linea, al lado de la chapa. */
  .comparar-monitor { flex: 1 1 auto; font-size: 13px; }
  .comparar-estado { margin-left: auto; font-size: 13px; }
  .comparar-detalle { padding: 0 12px 16px; }
  .comparar-dato { grid-template-columns: 90px minmax(0, 1fr); }
  .comparar-foto { font-size: 13px; gap: 0; flex-direction: column; }
  .comparar-filtros { gap: 6px; }
  .comparar-filtros .boton { font-size: 14px; padding: 7px 11px; }
  .comparar-recorrido .boton { flex: 1; padding-inline: 12px; }
  /* Dos barras pegadas arriba se comen media pantalla de telefono. En movil la
     de recorrido se queda quieta y solo la fecha de la foto sigue a la vista. */
  .comparar-recorrido { position: static; }
}

/* --------------------------------------------------- quién da cada sesión */
/*
 * La pestaña de Sesiones de un grupo, cuando además de contar clases sirve
 * para decir quién las da. El dato que se mira es un nombre, así que la
 * columna de quién la da es la que lleva el peso; lo que se sale de la norma
 * —que falte alguien, que el titular no fuera— va en coral y el resto apagado.
 */
.rejilla-dias-monitor { flex-wrap: wrap; }
/*
 * Los anchos, uno a uno: la tabla va en table-layout fixed y sin cabecera, asi
 * que sin esto se reparte a partes iguales y la columna del nombre —que es la
 * que se lee— sale igual de ancha que la de la hora.
 */
.tabla-sesiones .celda-marca { width: 34px; padding-right: 0; }
.tabla-sesiones td:nth-child(2) { width: 140px; }
.tabla-sesiones td:nth-child(3) { width: 110px; }
.tabla-sesiones td:nth-child(4) { width: 170px; }
.tabla-sesiones td:last-child { width: 150px; }
/*
 * Las tres columnas de una clase: titular, sustituto y apoyo.
 *
 * Las pidió Adrián el 8 de noviembre de 2026 mirando su hoja de cálculo —«se
 * ve muy bien a simple vista»—, y en las tres pantallas son la misma celda.
 * Estrechas y sin partir palabras por la mitad: lo que llevan son nombres de
 * personas, y un nombre cortado se lee peor que un nombre que sobresale.
 */
/* Arriba, el nombre queda a la altura del grupo, no de su instalación. */
.tabla td.celda-papel { font-size: 14px; width: 175px; vertical-align: top; }
.celda-papel .marca-no { font-size: 13px; }
.tabla-papeles .sesion-cancelada .celda-papel { text-decoration: line-through; }

/*
 * Y sus anchos, en la cabecera y en el cuerpo a la vez.
 *
 * Hacen falta los dos porque estas tres tablas comparten la clase
 * `tabla-papeles` con la de los papeles del expediente, que ya traía anchos
 * para SUS cabeceras. Mientras estas no tuvieron cabecera no se notó; el día
 * que se les puso, la casilla de marcar salía de 271px y el nombre de la
 * clase de 130. Lo que manda el ancho de una columna es su celda más ancha,
 * así que o se dicen las dos o no se dice ninguna.
 *
 * La columna del nombre de la clase se lleva TODO lo que sobre, y por eso
 * pide el 100%: dejándola sin ancho, el navegador repartía el hueco libre
 * entre las ocho a partes iguales y el nombre del grupo se quedaba en 225px,
 * partido en cuatro renglones, mientras tres columnas de nombres sueltos se
 * llevaban 260 cada una.
 */
.tabla-horas thead th:nth-child(1), .tabla-horas .celda-marca { width: 34px; }
.tabla-horas thead th:nth-child(2), .tabla-horas td:nth-child(2) { width: 110px; }
/*
 * El mes, por encima de sus dias, en «Por monitor».
 *
 * La agenda de alguien son cuarenta dias seguidos y al bajar un rato ya no se
 * sabe si el 3 que estas mirando es de noviembre o de diciembre. El mes se
 * marca como una seccion de verdad —banda y franja lateral, como las zonas de
 * «Clases de hoy»— y no como otro titulillo mas, que era justo lo que no
 * distinguia nada.
 */
/*
 * Cada mes, de su color. «El mes se tiene que ver de color diferente, para ver
 * claramente que hemos pasado de mes», Adrian, 9 de noviembre de 2026.
 *
 * Todos en el mismo gris se distinguian de sus dias, pero no entre ellos: dos
 * bandas grises seguidas, a media pantalla de distancia, son la misma banda. El
 * color es el del MES —noviembre siempre es el mismo— y no uno alterno, asi que
 * ademas de avisar del salto se aprende.
 *
 * Son tintes suaves a proposito: en esta casa el color fuerte significa algo
 * —coral lo que falta, verde lo hecho— y un mes no es un estado, es un cajon.
 * Se separan las familias cromáticas contiguas, también diciembre–enero y
 * agosto–septiembre, para que el blanco de la banda no borre el salto de mes.
 * El 45% mantiene el título suave; la franja al color entero permite seguir
 * el mismo mes a lo largo de sus días sin dar más peso visual a toda la banda.
 */
.caja-mes {
  --color-mes: var(--cabecera);
  border-left: 4px solid var(--color-mes); padding-left: 12px;
}
.caja-mes[data-mes="1"] { --color-mes: #8fb4dd; }
.caja-mes[data-mes="2"] { --color-mes: #dd9b9b; }
.caja-mes[data-mes="3"] { --color-mes: #8fcaa9; }
.caja-mes[data-mes="4"] { --color-mes: #b4a3db; }
.caja-mes[data-mes="5"] { --color-mes: #d2cb89; }
.caja-mes[data-mes="6"] { --color-mes: #92bccb; }
.caja-mes[data-mes="7"] { --color-mes: #e5a98c; }
.caja-mes[data-mes="8"] { --color-mes: #9aacdc; }
.caja-mes[data-mes="9"] { --color-mes: #b0cc8c; }
.caja-mes[data-mes="10"] { --color-mes: #d49fc8; }
.caja-mes[data-mes="11"] { --color-mes: #8fc9cd; }
.caja-mes[data-mes="12"] { --color-mes: #e3c088; }
.caja-mes + .caja-mes { margin-top: 28px; }
.titulo-mes {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 4px;
  padding: 8px 12px; border-radius: 8px;
  background: color-mix(in srgb, var(--color-mes) 45%, var(--papel)); color: var(--marino);
  font-size: 1.25rem; line-height: 1.4; font-weight: 700;
}
/* El mes necesita más cuerpo que el día; el recuento, en cambio, debe seguir
   siendo secundario y su pastilla no puede fundirse con la banda. */
.titulo-mes .cuenta-hoy { background: var(--papel); }
.titulo-mes .marca-mes, .titulo-mes .cuenta-hoy,
.titulo-mes .detalle-seccion { flex-shrink: 0; }
/* El primer dia del mes va pegado a su banda: la raya de arriba que separa un
   dia del anterior sobra justo debajo del titulo del mes. */
.titulo-mes + div > .sub:not(:first-child),
.caja-mes > div:first-of-type > .sub { margin-top: 6px; padding-top: 0; border-top: 0; }

/* Con las clases agrupadas por meses, el día va encima de la hora: el título
   del bloque ya no lo dice. En su propio renglón y con algo más de cuerpo,
   que es lo que se busca al recorrer un mes. */
.tabla-horas .celda-cuando { white-space: nowrap; }
.tabla-horas .dia-sesion { display: block; color: var(--marino); font-weight: 500; }
.tabla-horas thead th:nth-child(3), .tabla-horas td:nth-child(3) { width: 100%; }
.tabla-horas thead th:nth-child(n+4):nth-child(-n+6),
.tabla-horas td.celda-papel { width: 175px; }
.tabla-horas thead th:nth-child(7), .tabla-horas .celda-pasa { width: 190px; }
.tabla-horas thead th:nth-child(8), .tabla-horas .celda-horas { width: 76px; }

.tabla-sesiones thead th:nth-child(1), .tabla-sesiones .celda-marca { width: 34px; }
.tabla-sesiones thead th:nth-child(2) { width: 140px; }
.tabla-sesiones thead th:nth-child(3) { width: 110px; }
.tabla-sesiones thead th:nth-child(4) { width: 170px; }
.tabla-sesiones thead th:nth-child(n+5):nth-child(-n+7),
.tabla-sesiones td.celda-papel { width: 175px; }
.tabla-sesiones thead th:last-child { width: 150px; }

.tabla-sin-cubrir thead th:nth-child(1), .tabla-sin-cubrir .celda-marca { width: 34px; }
.tabla-sin-cubrir thead th:nth-child(2), .tabla-sin-cubrir td:nth-child(2) { width: 110px; }
.tabla-sin-cubrir thead th:nth-child(3), .tabla-sin-cubrir td:nth-child(3) { width: 100%; }
.tabla-sin-cubrir thead th:nth-child(n+4):nth-child(-n+6),
.tabla-sin-cubrir td.celda-papel { width: 175px; }
.tabla-sin-cubrir thead th:last-child, .tabla-sin-cubrir td:last-child { width: 220px; }

/*
 * En «Clases de hoy» no hay columnas, que es una lista: cada papel lleva su
 * nombre delante, en pequeño, y así tres nombres seguidos se entienden.
 */
.papel-clase {
  display: inline-flex; align-items: baseline; gap: 6px;
  max-width: 100%; font-size: 13.5px; overflow-wrap: normal;
  padding-right: 12px; border-right: 1px solid var(--borde);
}
.papel-clase:last-child { padding-right: 0; border-right: 0; }
.papel-que {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--suave); flex-shrink: 0;
}

/* La misma exclusión que los campos generales permite ajustar el ancho
   sin que su width: 100% estire las horas y desplace los botones. */
.barra-hora input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]) {
  width: 108px; flex-shrink: 0; font-variant-numeric: tabular-nums;
}

/* La clase que no se dio se lee, pero no compite con las que sí. */
.tabla-sesiones .sesion-cancelada td { opacity: .72; }
.mes-sesiones .marca-mes { margin-right: 8px; font-weight: 400; }

/*
 * La barra de antes de pulsar, la misma idea que la de crear sesiones: sale
 * sola al marcar algo y dice cuántas clases va a cambiar. Fija y no sticky,
 * que la tarjeta lleva overflow:hidden y dentro de un overflow el sticky no
 * pega.
 */
.barra-sesiones {
  position: fixed; left: 216px; right: 0; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;
  padding: 12px 30px;
  background: var(--papel); border-top: 1px solid var(--borde);
  box-shadow: 0 -6px 18px rgba(21, 48, 77, .09);
}
.barra-sesiones[hidden] { display: none; }
@media (max-width: 760px) { .barra-sesiones { left: 0; padding: 10px 14px; } }
.barra-cuantas { font-size: 14.5px; color: var(--marino); }
.barra-acciones-monitor { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; }
/*
 * Los botones van en grupos y cada grupo es una pregunta: a quién, qué quitar,
 * si el titular fue, si hubo clase. Sueltos en una fila de nueve, elegir mal
 * es lo normal.
 */
.barra-grupo {
  display: flex; gap: 6px; align-items: center;
  padding-right: 14px; border-right: 1px solid var(--borde);
}
.barra-grupo:last-child { border-right: 0; padding-right: 0; }
.barra-grupo .boton { font-size: 14px; padding: 7px 11px; }
.barra-grupo select,
.barra-grupo input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]) {
  font-size: 14px; padding: 6px 9px;
}
.barra-grupo input[type="text"] { width: 160px; }

/* ------------------------------------------------------------ sin cubrir */
/*
 * Las clases a las que les falta alguien, por días. Mismos anchos que la tabla
 * de sesiones de un grupo —va en table-layout fixed y sin cabecera— pero aquí
 * lo que crece es el nombre del grupo, que es lo que se lee para decidir.
 */
.tabla-sin-cubrir .celda-marca { width: 34px; padding-right: 0; }
.tabla-sin-cubrir td:nth-child(2) { width: 110px; white-space: nowrap; }
.tabla-sin-cubrir td:last-child { width: 260px; }
.tabla-sin-cubrir .celda-falta { font-size: 13.5px; }
/* Dos motivos en la misma clase —sin monitor y sin apoyo— van uno tras otro. */
.tabla-sin-cubrir .celda-falta .marca-no { margin-right: 6px; }

/*
 * Las dos fechas, en su propia línea debajo del buscador. Van en su formulario
 * y no dentro del panel de filtros: cambiar de fecha no es marcar una casilla,
 * y ahí dentro se enviarían con cada clic.
 */
.linea-fechas {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  padding: 12px 0 2px; border-top: 1px solid var(--borde); margin-top: 12px;
}
.linea-fechas label { display: flex; flex-direction: column; gap: 4px;
  font-size: 13px; color: var(--suave); }
.linea-fechas input[type="date"] { width: 160px; }
/*
 * El desplegable de grupo: largo, que quepa el nombre entero.
 *
 * Estuvo en 300px un día, por lo corto, y no valía: ahí es donde se lee qué
 * grupo estás mirando, y cortado no se distingue del de al lado —«Colegio La
 * Salle Franciscanas Extraes…» vale para cuatro—. El 9 de noviembre de 2026
 * Adrián lo pidió al revés: «que sea más larga para que quepa el nombre del
 * grupo entero y lo pueda ver entero».
 *
 * El más largo de la temporada mide 115 caracteres —682px en pantalla—, así
 * que se estira con la fila hasta 820 y ahí para. Sin ese tope se quedaba en
 * 1.409px: una caja del doble de ancha que lo más largo que va a enseñar, con
 * medio renglón vacío siempre.
 */
.elige-grupo { flex: 1 1 520px; min-width: 0; max-width: 820px; }
.elige-grupo .escribible, .elige-grupo select { width: 100%; }
/* Dos líneas seguidas —elegir y fechas— no necesitan dos separadores. */
.linea-fechas + .linea-fechas { border-top: 0; padding-top: 0; margin-top: 0; }

/*
 * «Hace una sola clase con el 4883»: la pastilla del grupo hermanado.
 *
 * Va pegada al nombre del grupo, en todas las pantallas, y la pone
 * `hermanados.js`. Pequeña y en gris: es un apunte al margen, no el dato.
 * La flecha de dos puntas dice lo que es sin gastar una palabra.
 */
.hermanos { white-space: nowrap; }
.hermano {
  display: inline-block;
  margin-left: 5px;
  padding: 0 6px;
  border: 1px solid var(--borde);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--suave);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.hermano + .hermano { margin-left: 3px; }
.hermano:hover { color: var(--marino); border-color: var(--marino); }
h1 .hermano { font-size: 14px; vertical-align: middle; }

/*
 * El listado de grupos de «Por grupo»: una puerta por fila.
 *
 * El nombre se lleva lo que sobre y las demás miden lo suyo, en la cabecera y
 * en el cuerpo: si solo se dijera en una, la columna la acaba midiendo la otra
 * y las de la derecha se pisan.
 */
.tabla-elegir-grupo td { padding-top: 7px; padding-bottom: 7px; }
.tabla-elegir-grupo tr > *:nth-child(1) { width: 100%; }
.tabla-elegir-grupo tr > *:nth-child(2) { width: 110px; white-space: nowrap; }
.tabla-elegir-grupo tr > *:nth-child(3) { width: 110px; white-space: nowrap; }
.tabla-elegir-grupo tr > *:nth-child(4) { width: 150px; }
.tabla-elegir-grupo tr > *:nth-child(5) { width: 130px; }
.tabla-elegir-grupo tr > *:nth-child(6) { width: 180px; }
.tabla-elegir-grupo tr > *:nth-child(7) { width: 70px; }
.tabla-elegir-grupo tr > *:nth-child(8) { width: 70px; }
.tabla-elegir-grupo .dato-debajo { display: block; font-size: 12.5px; }
.tabla-elegir-grupo .dias-grupo { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* --------------------------------------------------- la barra por segmentos */
/*
 * Las entradas de Escuela, agrupadas por para qué sirven y cada grupo en su
 * color. Lo pidió Adrián: con quince entradas en fila, lo de todos los días y
 * lo de una vez al año pesaban igual.
 *
 * El fondo es un tinte flojo y el rótulo el color de verdad: la barra es
 * blanca y con cinco bloques a todo color no se leería ninguno.
 */
.segmento {
  --segmento: var(--suave);
  --segmento-fondo: var(--linea);
  background: var(--segmento-fondo);
  border-radius: 14px;
  padding: 4px 4px 5px;
  margin: 0 6px 6px;
}
.segmento-titulo {
  font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  color: var(--segmento);
  padding: 4px 10px 4px;
}
/*
 * Con veinte entradas y cinco rotulos la barra ya no cabe de una vez en una
 * pantalla de portatil, asi que dentro de un segmento se aprieta un poco: dos
 * pixeles por entrada son cuarenta en total, que es una entrada y media.
 */
.lateral nav .segmento a { padding: 7px 10px; gap: 9px; }
.segmento-morado { --segmento: #6b4fa8; --segmento-fondo: #f2eefa; }
.segmento-verde  { --segmento: #1f8a52; --segmento-fondo: #e9f6ee; }
.segmento-coral  { --segmento: var(--coral-oscuro); --segmento-fondo: var(--coral-flojo); }
.segmento-ambar  { --segmento: #a9770a; --segmento-fondo: #fcf3de; }
/* El azul del segmento de Monitores, el mismo con el que se marca en las
   listas a quien viene a recuperar: ya es el azul de la casa. */
.segmento-azul   { --segmento: #1d4f86; --segmento-fondo: #e8f1fb; }
.segmento-gris   { --segmento: var(--suave); --segmento-fondo: var(--linea); }

/*
 * Dentro de un segmento la entrada de ahora va en blanco y con el color del
 * segmento: el coral de siempre se perdería justo en el segmento coral.
 */
.segmento nav a, .segmento a { margin-bottom: 1px; }
.lateral nav .segmento a:hover { background: rgba(255, 255, 255, .6); color: var(--marino); }
.lateral nav .segmento a.activo { background: var(--papel); color: var(--segmento); font-weight: 600; }

/* ------------------------------------------------- horas de los monitores */
/*
 * Todas las clases de un periodo y quién da cada una. Dos formas: con un
 * monitor elegido se ve su agenda —y entonces la columna del medio dice qué
 * pinta él en esa clase— y sin elegir a nadie hace falta una columna más para
 * decir quién la da y otra para lo que le pasa.
 */
.tabla-horas .celda-marca { width: 34px; padding-right: 0; }
.tabla-horas td:nth-child(2) { width: 110px; white-space: nowrap; }
.tabla-horas .celda-pasa { width: 190px; font-size: 13.5px; }
.tabla-horas .celda-horas { width: 76px; white-space: nowrap; }
.tabla-horas .sesion-cancelada td, .tabla-horas .sesion-festiva td { opacity: .72; }
/* El papel que hace en esa clase: se distingue de un barrido sin leerlo. */
.papel-sustituto { color: var(--enlace); }
.papel-apoyo { color: #6b4fa8; }

/*
 * La casilla de marcar en las clases del día, delante de la hora. La fila es
 * una rejilla de columnas fijas, así que la casilla necesita la suya: metida
 * sin más, le robaba el sitio al nombre del grupo y lo partía palabra a
 * palabra.
 */
.clase-hoy .marca-clase-hoy { display: flex; align-items: center; justify-content: center;
  align-self: start; min-height: 28px; cursor: pointer; }
.agenda-hoy .marca-mes { display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; min-height: 28px; margin: 0; cursor: pointer; }
.agenda-hoy .marca-mes input { width: auto; margin: 0; }
/* Antes los detalles compartían el ancho sobrante en escritorio y bajaban
   en el portátil. La fila actual separa responsables y sitio; se conserva
   esta disposición para los detalles antiguos que aún puedan aparecer. */
@media (min-width: 1600px) {
  .agenda-hoy .grupo-clase { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 16px; }
  .agenda-hoy .detalles-clase { flex: 1 1 260px; margin-top: 0; }
}

.clase-hoy .marca-clase-hoy input { width: auto; margin: 0; }
/* Quién la da, en la misma línea de detalles que la instalación y el nivel. */
.detalles-clase .monitor-clase { color: var(--marino); font-weight: 500; }
.titulo-bloque .marca-mes { margin-right: 8px; font-weight: 400; }

/* Lo que ofrecemos para recuperar: la foto de los grupos y la de las clases
   de ahora. Dos tablas largas, asi que lo que se lee de un vistazo es la
   pastilla de la lista y lo que queda. */
.tabla-recupera-grupos td, .tabla-recupera-sesiones td { vertical-align: top; }
.tabla-recupera-grupos .numero, .tabla-recupera-sesiones .numero { text-align: right; }
.numero-grupo {
  font-variant-numeric: tabular-nums; color: var(--suave);
  text-decoration: none; border-bottom: 1px dotted var(--borde);
}
.numero-grupo:hover { color: var(--coral); border-bottom-color: var(--coral); }

/* El nombre de un grupo lleva a su ficha. Lo pidió Adrián el 4 de noviembre
   de 2026: «si le clico al grupo, que vaya al grupo de la plataforma (ahora
   solo pasa con el número). En general en la plataforma quiero eso». Va como
   texto normal y se subraya al pasar por encima: una tabla con doscientos
   enlaces azules no se lee. */
.nombre-del-grupo { color: var(--marino); font-weight: 600; text-decoration: none; }
.nombre-del-grupo:hover { color: var(--coral); text-decoration: underline; }
.pastilla-tarjeta {
  display: inline-block; padding: 2px 9px; border-radius: 50px;
  background: var(--color-tarjeta, #eef2f6); color: var(--texto-tarjeta, var(--marino));
  font-size: 13px; font-weight: 500; white-space: nowrap;
}
.marca-solo { color: var(--suave); font-size: 13px; }
.fila-llena td { opacity: .55; }
/* El nombre del grupo y el del profesor, a lo ancho: `.tabla td` los deja en
   `max-width: 1px` para que la columna se encoja, y con el texto partiendo
   sale una palabra por renglón y la fila mide cinco líneas. */
/* `.tabla` va en `table-layout: fixed`, que reparte el ancho a partes iguales
   y recorta lo que no cabe: con diez columnas, la fecha se quedaba en «Jue
   ...». Estas dos ocupan lo que necesitan y el envoltorio se desliza, como la
   tabla de inscritos de un grupo. */
.tabla-recupera-grupos, .tabla-recupera-sesiones {
  table-layout: auto; width: max-content; min-width: 100%;
}
.tabla-recupera-grupos td, .tabla-recupera-sesiones td { max-width: none; }
/* Sin anchos a mano: con `max-width: none` el navegador reparte solo, y lo
   que se encogía era justo la fecha, que es de las columnas que no se puede
   recortar. El nombre del grupo es el único que parte renglón. */
.tabla-recupera-grupos td.apretado, .tabla-recupera-sesiones td.apretado { width: 1%; }
.tabla-recupera-sesiones td .pastilla-tarjeta,
.tabla-recupera-grupos td .pastilla-tarjeta { white-space: normal; line-height: 1.3; }
/* Y un mínimo a las dos columnas de texto, que si no el reparto automático
   las deja en una palabra por renglón. */
.tabla-recupera-grupos td.col-grupo, .tabla-recupera-sesiones td.col-grupo {
  min-width: 15rem; max-width: 24rem;
}
.tabla-recupera-grupos td.col-persona, .tabla-recupera-sesiones td.col-persona { min-width: 9rem; }

/* El filtro de especialidad va encima del de zonas y algo más apretado: son
   dos filas de pastillas seguidas y la de arriba es la del nivel. */
.especialidades-recuperar { margin-bottom: 6px; }

/* El filtro de la pantalla de grupos: dos filas de pastillas, zona y nivel.
   Lo pidió Adrián pequeño, así que va suelto encima de la tabla y no dentro
   del panel grande de buscar grupos. */
.filtro-recupera { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.filtro-recupera .zonas-recuperar { margin: 0; }

/* El número de la cabecera cuando se ordena por varias columnas: va pegado a
   la flecha, que ya está ahí, en vez de meter otro adorno al lado. La que
   manda se queda en coral y las que solo deshacen empates, apagadas. */
table[data-ordenable] th.ordenable.ordenada[data-orden-puesto]::after {
  content: '↑' attr(data-orden-puesto);
}
table[data-ordenable] th.ordenable.ordenada.al-reves[data-orden-puesto]::after {
  content: '↓' attr(data-orden-puesto);
}
table[data-ordenable] th.ordenable.ordenada[data-orden-puesto]:not([data-orden-puesto='1']) {
  color: var(--suave);
}

/*
 * El que viene a recuperar, en la lista del monitor: aparte y en azul.
 *
 * Sigue en la misma lista y se marca igual, que eso lo pidió Adrián desde el
 * principio —«como un alumno más de ese día. No como una alerta»—, pero el 3
 * de noviembre de 2026 pidió que se distinga: «quiero que le salga "a parte",
 * con fondo en otro color, clarito, un azul».
 *
 * El azul del fondo va con `:where()` a propósito, para que pese MENOS que el
 * verde de «vino» y el coral de «faltó»: marcar a uno tiene que seguir
 * viéndose. Lo que no se va nunca es la barra azul de la izquierda y la
 * pastilla, así que marcado o sin marcar se sabe que es una recuperación.
 */
.separa-lista {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 20px 4px; border-top: 1px solid var(--linea);
  color: #1d4f86; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
}
.separa-lista::after {
  content: ''; flex: 1; height: 1px; background: #cfe0f3;
}
.alumno-lista.recupera { border-left: 3px solid #4a8fd4; }
.alumno-lista:where(.recupera) .marca-asistencia { background: #eef5fd; }
.alumno-lista:where(.recupera) .barra-estado { background: #9cc2e8; }

/*
 * La columna de recuperaciones en la rejilla de asistencias.
 *
 * A la derecha del todo y en azul, que lo pidió Adrián así: «quiero que
 * aparezca a un lado, a la derecha del todo, que ese día fue un niño, y cómo
 * se llamaba. Y esa parte en otro color diferente».
 *
 * No hay una columna por niño porque «cada día puede ir un niño diferente»:
 * es una sola, y el nombre va dentro de la celda del día que vino. El azul es
 * el mismo de la pastilla de la lista del monitor, para que las dos pantallas
 * digan lo mismo con el mismo color.
 */
.tabla-asistencias th.col-recupera {
  background: #eef5fd; color: #1d4f86; border-left: 2px solid #9cc2e8;
  min-width: 150px; font-size: 11.5px;
}
.tabla-asistencias td.asis-recupera {
  background: #eaf3fc; border-left: 2px solid #9cc2e8;
  text-align: left; padding: 3px 8px; white-space: normal;
}
.recupera-quien {
  display: block; font-size: 12px; line-height: 1.35; color: #1d4f86;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.recupera-marca { display: inline-block; width: 12px; font-weight: 700; }
.recupera-quien.vino .recupera-marca { color: #1a7f4b; }
.recupera-quien.falto { color: var(--coral-oscuro); }
.recupera-quien.falto .recupera-marca { color: var(--coral); }
.recupera-quien.sin { color: var(--suave); }
.tabla-asistencias td.col-recupera-pie { text-align: center; color: #1d4f86; }

/* Todas las recuperaciones pedidas: la tabla más larga de las cuatro, así que
   igual que las otras dos —se ensancha lo que necesite y el envoltorio se
   desliza— y la cancelada apagada, que ya no cuenta para nada. */
.tabla-recupera-todas {
  table-layout: auto; width: max-content; min-width: 100%;
}
.tabla-recupera-todas td { max-width: none; vertical-align: top; }
.tabla-recupera-todas td.apretado { width: 1%; }
/* Una cancelada se ve de lejos por el fondo, no solo por su pastilla. Lo
   pidió Adrián el 4 de noviembre de 2026: «si una sesión de recuperación
   está cancelada, está bien que el fondo se vea diferente, como en coral,
   para saber que fue cancelado». El fondo va en la celda y no en la fila
   porque la fila la pintan ya la cebra y el ratón, y ganaría la de siempre.
   Y se apaga menos que antes: con el coral debajo, un .62 lo dejaba ilegible. */
.tabla-recupera-todas tr.fila-cancelada td {
  opacity: .8; background: #fbe3df;
}
.tabla-recupera-todas tr.fila-cancelada:hover td { opacity: 1; background: #f8d4ce; }
.estado-rec {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600;
}
.estado-rec.activa { background: #eef5fd; color: #1d4f86; }
.estado-rec.vino { background: #f3fbf6; color: #1a7f4b; }
.estado-rec.falto, .estado-rec.baja { background: var(--coral-flojo); color: var(--coral-oscuro); }
.estado-detalle { font-size: 12px; line-height: 1.35; }
/* Un botón dentro de una fila de tabla: el de siempre es de 15px y 22 de
   relleno, y en una celda de catorce ocupa dos renglones. */
.boton.boton-chico { font-size: 13px; padding: 4px 13px; }

/* Los filtros de «Todas las recuperaciones», cada fila con su título. Lo
   pidió Adrián en secciones —CUÁNDO, ESTADO, ORDEN— porque tres filas de
   pastillas seguidas no dicen a qué contesta cada una. */
.filtro-fila { display: flex; align-items: center; gap: 12px; }
.filtro-titulo {
  flex: 0 0 68px; font-size: 11px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--suave);
}
/* En Grupos el título va ENCIMA de las pastillas y bien marcado, no al lado.
   Lo corrigió Adrián el 4 de noviembre de 2026: «esperaba otra cosa, que
   fuese el título encima de las pastillas. Y que el título se vea bien
   marcado». */
.filtro-fila.encima { display: block; }
.filtro-fila.encima .filtro-titulo {
  display: block; margin-bottom: 7px; flex: none;
  font-size: 12.5px; font-weight: 800; letter-spacing: .8px; color: var(--marino);
}
.filtro-fila.encima + .filtro-fila.encima { margin-top: 12px; }

.marca-hoy {
  display: inline-block; margin-left: 8px; padding: 1px 9px; border-radius: 999px;
  background: var(--coral); color: #fff; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; vertical-align: middle;
}
@media (max-width: 700px) {
  .filtro-fila { flex-direction: column; align-items: flex-start; gap: 2px; }
}
.tabla-recupera-todas .boton-chico { margin-top: 5px; }

/*
 * Las sesiones, por días: cada día una sección encuadrada en gris y con lo de
 * dentro metido hacia la derecha. Lo pidió Adrián el 4 de noviembre de 2026:
 * «que se vea claramente que está dentro… y toda la sección está rodeada de
 * un color (gris), para que se entienda que es el mismo día».
 */
.dia-seccion {
  /* El gris tiene que verse contra el fondo de la página, que ya es casi
     blanco, y contra las tarjetas blancas de dentro: con el gris flojo de los
     bordes era «un bocadillo blanco solapado con otro». */
  background: var(--cabecera); border: 1px solid #d3dde9;
  border-radius: 16px; padding: 14px 16px 16px; margin-bottom: 20px;
}
.dia-titulo {
  margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--marino);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.dia-titulo .apagado { font-weight: 500; font-size: 14px; }
/* Lo de dentro, un poco más a la derecha: es lo que dice de un golpe que
   pertenece al día de arriba. */
.dia-dentro { padding-left: 18px; border-left: 3px solid #c3d0e0; }
.dia-seccion.es-hoy { border-color: var(--coral); }
@media (max-width: 700px) {
  /* En el móvil el sangrado se come la tabla, así que solo queda la raya. */
  .dia-seccion { padding: 12px 10px; }
  .dia-dentro { padding-left: 8px; }
}

/* La columna del mensaje: cerrada es un «Ver» y abierta enseña el mensaje
   entero. Se le pone ancho fijo porque dentro hay párrafos: dejándolo al
   reparto de la tabla, la columna se quedaba en una palabra por renglón. */
.col-mensaje { vertical-align: top; }
.mensaje-grupo > summary {
  cursor: pointer; color: var(--enlace); font-size: 13.5px; white-space: nowrap;
}
.mensaje-grupo > summary:hover { color: var(--coral); text-decoration: underline; }
.mensaje-grupo[open] > summary { margin-bottom: 7px; font-weight: 600; }
.mensaje-grupo .wa-previa { width: var(--recupera-ancho-previa); margin-top: 0; }

/* Los huecos se cambian en la propia tabla de Grupos: una casilla y un OK.
   Lo pidió Adrián así, «editable y que le puedas dar a OK», y es un
   formulario de los de siempre para que funcione sin JavaScript. */
.huecos-editar { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.huecos-editar .boton.boton-chico { padding: 4px 10px; }
.huecos-editar input[type="number"] {
  width: 3.6em; padding: 5px 6px; text-align: right;
  border: 1px solid var(--borde); border-radius: 7px;
  font: inherit; font-variant-numeric: tabular-nums; color: var(--marino);
  background: var(--papel);
}
.huecos-editar input[type="number"]:focus-visible {
  outline: 2px solid var(--coral); outline-offset: 1px; border-color: var(--coral);
}
/* Y esa columna se queda pegada a la derecha: la tabla es ancha y se mueve
   de lado, y lo que hay que poder alcanzar siempre es justo la casilla y el
   OK. Las filas pares llevan su propio gris para que no se transparente lo
   que pasa por debajo. */
.tabla-recupera-grupos td.numero, .tabla-recupera-grupos th.numero {
  position: sticky; right: 0; white-space: nowrap;
  border-left: 1px solid var(--borde);
}
.tabla-recupera-grupos td.numero { background: var(--papel); z-index: 1; }
.tabla-recupera-grupos tbody tr:nth-child(even) td.numero { background: var(--cebra); }
.tabla-recupera-grupos tbody tr:hover td.numero { background: var(--coral-flojo); }
.tabla-recupera-grupos th.numero { background: var(--cabecera); z-index: 2; }

/* Forzar una recuperación: la misma tabla ancha que las otras, y lo que está
   fuera de plazo marcado, que es lo que distingue esta pantalla. */
.tabla-recupera-forzar { table-layout: auto; width: max-content; min-width: 100%; }
.tabla-recupera-forzar td { max-width: none; vertical-align: top; }
.tabla-recupera-forzar td.apretado { width: 1%; }
.marca-fuera {
  display: inline-block; margin-top: 3px; padding: 1px 8px; border-radius: 999px;
  background: #fff3cd; color: #8a6100; font-size: 11.5px; font-weight: 600;
}

/*
 * El mensaje de cada instalación: una tarjeta por sitio.
 *
 * «El mensaje que quiero que salga es uno diferente según la instalación
 * donde sea, no según el grupo», Adrián, 7 de noviembre de 2026. Son doce
 * tarjetas para leer y reescribir párrafos. Caben tres a 2000 px, dos a
 * 1500 px y una en móvil, manteniendo el orden de lectura por filas.
 */
.sitios-recupera {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr));
  gap: 24px; align-items: start;
}
.sitio-recupera { padding: 24px; border: 1px solid var(--borde); border-top: 3px solid var(--marino); }
.sitio-recupera.sin-mensaje { border-top-color: var(--coral); }
.cabeza-sitio {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 20px;
}
.cabeza-sitio > div { flex: 1 1 220px; min-width: 0; }
.cabeza-sitio h2 { margin: 0 0 5px; font-size: 20px; line-height: 1.3; color: var(--marino); overflow-wrap: anywhere; }
.cabeza-sitio .apagado { font-size: 14px; line-height: 1.5; }
.cabeza-sitio .semaforo { flex-shrink: 0; }
.mensaje-sitio label { display: block; margin-bottom: 7px; font-weight: 600; color: var(--marino); }
/* La altura sigue al mensaje para que Guardar quede junto a lo que guarda,
   tanto en una indicación breve como en Montecanal con su enlace largo. */
.mensaje-sitio textarea {
  display: block; width: 100%; min-width: 0; min-height: 4.5rem; field-sizing: content;
  overflow-wrap: anywhere; font: inherit; font-size: 16px; line-height: 1.65;
  padding: 14px 16px; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--campo); color: var(--marino); resize: vertical;
}
.mensaje-sitio textarea:focus-visible {
  background: var(--papel); outline: 2px solid var(--coral); outline-offset: 1px; border-color: var(--coral);
}
.acciones-sitio { display: flex; justify-content: flex-end; margin-top: 14px; }
@media (max-width: 600px) {
  .sitios-recupera { gap: 18px; }
  .sitio-recupera { padding: 18px; }
}

/* El tope incluye título y filtros, como en Monitores; por debajo del mínimo
   se conserva el desplazamiento horizontal para mantener legible la tabla. */
.pantalla-recupera-grupos { max-width: 1500px; }
.tabla-recupera-grupos { table-layout: fixed; width: 100%; min-width: 1224px; }
.tabla-recupera-grupos th, .tabla-recupera-grupos td { padding-left: 10px; padding-right: 10px; white-space: normal; }
.tabla-recupera-grupos .ancho-grupo { width: var(--recupera-ancho-grupo); }
.tabla-recupera-grupos .ancho-zona { width: var(--recupera-ancho-zona); }
.tabla-recupera-grupos .ancho-instalacion { width: var(--recupera-ancho-instalacion); }
.tabla-recupera-grupos .ancho-nivel { width: var(--recupera-ancho-nivel); }
.tabla-recupera-grupos .ancho-dias { width: var(--recupera-ancho-dias); }
.tabla-recupera-grupos .ancho-profesor { width: var(--recupera-ancho-profesor); }
.tabla-recupera-grupos .ancho-mensaje { width: var(--recupera-ancho-mensaje); }
.tabla-recupera-grupos th.numero { width: var(--recupera-ancho-huecos); }
.tabla-recupera-grupos td.col-zona .pastilla-tarjeta,
.tabla-recupera-grupos td.col-persona { white-space: nowrap; }
.tabla-recupera-grupos .huecos-editar input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]) {
  flex: 0 0 3.2em; width: 3.2em; min-width: 0; padding: 5px 6px;
}
.tabla-recupera-grupos .huecos-editar .boton { flex-shrink: 0; }

.tabla-recupera-grupos td.col-grupo, .tabla-recupera-grupos td.col-persona {
  min-width: 0; max-width: none; overflow-wrap: anywhere;
}
.tabla-recupera-grupos td.apretado { width: auto; }
/* La vista previa crece hacia la izquierda, dentro de la tabla, y reserva
   altura en su fila para no tapar los botones de los grupos siguientes. */
.tabla-recupera-grupos td.col-mensaje { overflow: visible; }
.tabla-recupera-grupos .mensaje-grupo .wa-previa {
  position: relative; width: var(--recupera-ancho-previa); max-width: none;
  margin-left: calc(100% - var(--recupera-ancho-previa));
  /* «normal» borraba los renglones en blanco y juntaba los párrafos. */
  white-space: pre-wrap; overflow-wrap: anywhere;
}

/* El guion envuelve el select: hay que vestir el input visible y permitir
   que su envoltorio ceda espacio al OK. La especificidad vence la regla
   general de inputs, que de otro modo conserva el relleno grande. */
.instalacion-editar { display: flex; align-items: center; gap: 5px; }
.instalacion-editar .boton.boton-chico { flex: 0 0 auto; padding: 4px 10px; }
.instalacion-editar .escribible { flex: 1; min-width: 0; }
.instalacion-editar select,
.instalacion-editar input.escribible-texto:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]):not([type=button]) {
  width: 100%; min-width: 0; padding: 5px 26px 5px 6px; font: inherit; font-size: 13px;
  border: 1px solid var(--borde); border-radius: 7px;
  background: var(--papel); color: var(--marino);
}
/* La lista abierta ocupa sitio en la fila: así el envoltorio desplazable
   no recorta las opciones, ni siquiera en el último grupo de la tabla. */
.instalacion-editar:focus-within { align-items: flex-start; }
.instalacion-editar .escribible-lista { position: relative; top: auto; margin-top: 4px; }
.instalacion-editar .escribible-lista li { white-space: normal; }
.instalacion-editar .escribible-aspa { top: 15px; }

/* El aviso de la ficha del grupo que dice dónde se escribe ahora el mensaje. */
.mensaje-del-sitio { margin-top: 4px; }

/*
 * «¿Desde cuándo lo da?», en la ficha del grupo. Sale al cambiar el profesor,
 * asi que tiene que verse que es una pregunta nueva y no un campo mas: va en
 * su recuadro, en ambar, que es el color de lo que esta a medio decidir.
 */
.desde-cuando {
  margin: 10px 0 2px; padding: 10px 14px;
  border: 1px solid var(--estado-ojo-fondo); border-radius: 12px;
  background: color-mix(in srgb, var(--estado-ojo-fondo) 45%, var(--papel));
}
.desde-cuando-titulo { margin: 0 0 6px; font-weight: 700; color: var(--marino); }
.desde-cuando .casilla-suelta { display: flex; align-items: center; gap: 8px; margin: 3px 0; }
.desde-cuando input[type=date] { width: 170px; margin-left: 4px; }
.desde-cuando .nota-bajo-fila { margin: 6px 0 0; }

/* ----------------------------------- los monitores, en pastillas iguales

   Donde salen monitores en pastillas —el buscador de grupos, el filtro de
   «Clases de hoy», la lista de la prueba— van en rejilla y no en fila: todas
   del mismo ancho, en columnas que cuadran de un renglón al siguiente, y el
   nombre pegado a la izquierda dentro de su pastilla. Un nombre de persona
   mide lo que mide —«Ane Sanchez» once letras, «Matthias Kleingries Ortego»
   veintiséis—, y en fila cada renglón empezaba donde acababa el anterior:
   para encontrar a alguien había que leerlas todas. Lo pidió Adrián el 9 de
   noviembre de 2026.

   El ancho se calcula con las letras del nombre más largo de la lista —las
   cuenta el servidor y llegan en --mas-largo— más lo que la pastilla ocupa
   alrededor, que no es igual en todas y lo pone cada una en --de-sobra. Si
   sobra sitio, las columnas se lo reparten.

   Va al final del archivo a propósito: tiene que ganarle al display: flex de
   cada una de las tres listas.  */

.pastillas-iguales {
  display: grid;
  /* La letra de la caja es la de sus pastillas a proposito: el ancho se cuenta
     en «ch», y un ch mide lo que mide la letra de DONDE se cuenta. Con la letra
     de la pagina salian columnas de sobra anchas y una menos por renglon. */
  font-size: var(--letra-pastilla, 13px);
  /* El min(100%) es para el movil: ahi el rotulo «Monitores:» se lleva 143 de
     los 375, la caja se queda en 190 y el nombre mas largo pide 208. Sin el,
     la columna se salia de su caja por esos 18. */
  grid-template-columns: repeat(auto-fill, minmax(
    min(100%, calc(var(--mas-largo, 24) * 1ch + var(--de-sobra, 26px))), 1fr));
  align-items: stretch;
}
.pastillas-iguales > * { min-width: 0; }

/*
 * El nombre, a la izquierda y ocupando su pastilla entera —de ancho y de
 * alto, para que el fondo de dos pastillas del mismo renglon acabe a la misma
 * altura si a una le hicieran falta dos lineas.
 *
 * Y si le hacen falta, se parte: no se corta. Contar letras no garantiza el
 * ancho —un apellido ancho, o el peso de mas de la pastilla marcada, miden
 * algo mas que la cuenta—, y de un nombre de persona cortado no se sabe de
 * quien es. Hoy no se parte ninguno a 2.000, a 1.280 ni a 375.
 */
.pastillas-iguales .casilla > span,
.pastillas-iguales .etiqueta {
  display: block; width: 100%; height: 100%; text-align: left;
}
.pastillas-iguales .pastilla-filtro { justify-content: flex-start; }
.pastillas-iguales .pastilla-filtro > span { flex: 1; min-width: 0; text-align: left; }
.pastillas-iguales .casilla > span,
.pastillas-iguales .etiqueta,
.pastillas-iguales .pastilla-filtro > span { white-space: normal; overflow-wrap: anywhere; }

/* El visto de la marcada se reserva su hueco siempre, y no se encoge. Si
   apareciera al marcar, el nombre se estrecharia justo al elegirlo. */
.pastillas-iguales .pastilla-filtro::after {
  content: '✓'; color: var(--marino); font-size: .9rem; visibility: hidden; flex: none;
}
.pastillas-iguales .pastilla-filtro:has(input:checked)::after { visibility: visible; }

/*
 * Lo que cada pastilla ocupa ademas del nombre: su relleno, su borde y, en
 * «Clases de hoy», el hueco del visto. Y la letra con la que se cuenta.
 *
 * En el buscador, ademas, la caja de opciones es un trozo de una fila
 * flexible: una rejilla sin ancho de verdad se queda en una sola columna, asi
 * que hay que decirle que se quede con lo que sobra de su renglon.
 */
.apartado-opciones.pastillas-iguales { --de-sobra: 26px; --letra-pastilla: 13px; flex: 1 1 auto; }
.pastillas-prueba.pastillas-iguales { --de-sobra: 26px; --letra-pastilla: 13px; }
.pastillas-filtro.pastillas-iguales { --de-sobra: 46px; --letra-pastilla: .85rem; }