/* Sistema Suyay - hoja unica.
   Movil primero: la pantalla que mas se usa se toca de pie, con una
   mano, entre dos bloques de 45 minutos. Todo lo tocable mide 48px
   como minimo, que es el ancho de un pulgar.

   ==================================================================
   EL LOOK - que se tomo del referente y que no.
   ==================================================================
   Se tomo el OFICIO: aire entre bloques, esquinas muy redondeadas,
   sombras suaves en vez de bordes duros, una escala tipografica con
   contraste real, y el color usado como CODIGO DE ESTADO, no como
   decoracion.

   No se tomo la piel de app infantil. Esto lo abre una terapeuta de
   pie entre dos sesiones y coordinacion para perseguir pagos: cada
   pastel de mas es un dato de menos en pantalla. La calidez esta en
   el papel y en los radios, no en ilustraciones.
   ================================================================== */

:root {
  /* Tinta con un punto de verde: el negro puro sobre papel calido se
     ve sucio. */
  --tinta:      #16211d;
  --tinta-baja: #62726c;
  --tinta-tenue:#93a29c;

  /* El papel no es blanco puro y el fondo no es gris: un hueso muy
     leve quita el brillo de pantalla y hace que las tarjetas blancas
     floten sin necesidad de bordes. */
  --papel:      #ffffff;
  --fondo:      #f6f7f6;
  --linea:      #e7ebe9;
  --linea-suave:#f0f3f2;

  /* LOS COLORES DE SUYAY: morado y ambar (el logo y las portadas de
     su Instagram). El morado del logo es claro, asi que para texto y
     botones se usa uno mas oscuro de la misma familia: sobre blanco
     tiene que leerse, no solo combinar.
     `marca-baja` es fondo de estado, no adorno: donde aparece, algo
     esta hecho o esta bien. */
  --marca:      #7b5aa6;
  --marca-alta: #634689;
  --marca-baja: #f2edfa;
  --marca-viva: #a78bc8;   /* el morado del logo, para acentos */

  /* El ambar de Suyay: es el segundo color de la marca y aqui hace
     doble trabajo — acento y estado PENDIENTE. Lo que falta, lo
     previsto, lo que se debe. Ni error ni exito. */
  --pend:       #b07d16;
  --pend-viva:  #f2b33d;   /* el ambar del logo */
  --pend-baja:  #fdf4e3;

  --alerta:     #b3261e;
  --alerta-baja:#fdeceb;

  /* Radios grandes y consistentes. Un sistema con cuatro radios
     distintos se lee como cuatro sistemas. */
  --radio:    12px;
  --radio-l:  18px;
  --radio-xl: 24px;

  /* Sombras en dos alturas y nada mas. La de reposo casi no se ve: su
     trabajo es despegar la tarjeta del fondo, no dibujar un borde. */
  --sombra:      0 1px 2px rgba(22,33,29,.04), 0 2px 8px rgba(22,33,29,.045);
  --sombra-alta: 0 8px 28px rgba(22,33,29,.12), 0 2px 6px rgba(22,33,29,.06);

  --aire:   1rem;
  --aire-l: 1.5rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.55 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  /* iPhone con notch */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* 54rem y no 46: la hoja de cobros son cuatro columnas —nino, precio,
   observacion y la casilla— y con menos ancho la observacion queda tan
   angosta que no cabe "abono 200, paga el viernes", que es exactamente
   lo que la columna del papel lleva escrito. */
main { max-width: 54rem; margin: 0 auto; padding: 1.25rem 1rem 4rem; }

/* --- Barra superior ---
   Pegajosa: en una pagina de 8.000 px, tener que subir hasta arriba
   para cambiar de pantalla es una deslizada entera de dedo. */
.barra {
  position: sticky; top: 0; z-index: 20;
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.barra-fila {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1rem;
  max-width: 54rem; margin: 0 auto;
}
.marca { font-weight: 700; color: var(--marca); text-decoration: none; font-size: 1.05rem; }
.barra nav { display: flex; gap: .25rem; flex: 1; }
.barra nav a {
  color: var(--tinta); text-decoration: none;
  padding: .5rem .7rem; border-radius: var(--radio); font-size: .95rem;
  white-space: nowrap;
}
.barra nav a:hover, .barra nav a:focus { background: var(--marca-baja); color: var(--marca); }
.barra nav a.aqui { background: var(--marca-baja); color: var(--marca); font-weight: 600; }

/* Pestanas. Es la unica navegacion que este equipo ya usa sin que
   nadie se la explique: asi se mueven entre las hojas del Excel. */
.pestanas {
  display: flex; gap: .1rem;
  max-width: 54rem; margin: 0 auto; padding: 0 1rem;
  overflow-x: auto; scrollbar-width: none;
  border-top: 1px solid var(--linea);
}
.pestanas::-webkit-scrollbar { display: none; }
.pestanas a {
  color: var(--tinta-baja); text-decoration: none; white-space: nowrap;
  padding: .6rem .8rem; font-size: .9rem;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.pestanas a:hover { color: var(--tinta); }
.pestanas a.aqui { color: var(--marca); font-weight: 700; border-bottom-color: var(--marca); }

/* Mi cuenta. El boton de Salir ya no es lo primero que se ve:
   «lo primero que veo, grandote y verde, es SALIR — y yo lo que
   quiero es entrar». */
details.yo { position: relative; flex: 0 0 auto; }
details.yo > summary {
  list-style: none; cursor: pointer;
  min-height: 40px; display: flex; align-items: center;
  padding: 0 .6rem; border-radius: var(--radio);
  border: 1px solid var(--linea); color: var(--tinta-baja); font-size: .85rem;
  white-space: nowrap; max-width: 8rem; overflow: hidden;
}
details.yo > summary::-webkit-details-marker { display: none; }
details.yo[open] > summary { border-color: var(--marca); color: var(--marca); }
.menu-yo {
  position: absolute; right: 0; top: calc(100% + .35rem); z-index: 30;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 12px; padding: .35rem; min-width: 13rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}
.menu-yo a, .menu-yo button {
  display: block; width: 100%; text-align: left;
  padding: .6rem .7rem; border-radius: 8px; font-size: .9rem;
  color: var(--tinta); text-decoration: none;
  background: none; border: 0; cursor: pointer; min-height: 44px;
}
.menu-yo a:hover, .menu-yo button:hover { background: var(--fondo); }
.menu-yo form { margin: 0; }
.menu-yo button { color: var(--alerta); }

/* --- Caja centrada: entrar, cambiar clave, errores --- */
.entrada {
  max-width: 22rem; margin: 8vh auto; background: var(--papel);
  padding: 1.75rem; border-radius: 14px; border: 1px solid var(--linea);
}
.entrada h1 { margin: 0 0 .25rem; font-size: 1.4rem; }
.sub { margin: 0 0 1.25rem; color: var(--tinta-baja); font-size: .95rem; }
.pie { margin: 1.25rem 0 0; color: var(--tinta-baja); font-size: .85rem; }
.pie a { color: var(--marca); }

label { display: block; margin: .9rem 0 .3rem; font-size: .9rem; font-weight: 600; }
label.fila { display: flex; align-items: center; gap: .5rem; font-weight: 400; margin-top: 1rem; }
label.fila input { width: auto; min-height: auto; }

/* Se enumeran los que NO se estilan, no los que si.
   Antes iba al reves —una lista de `input[type=...]`— y todo campo
   escrito como `<input name="monto">`, sin `type`, se quedaba fuera:
   salia con el estilo crudo del navegador al lado de los demas. Pasaba
   en el monto y el proveedor de un gasto, en el celular del padron y en
   media docena mas. Enumerar excepciones falla en silencio cada vez que
   se agrega un campo; enumerar exclusiones, no. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]),
select, textarea {
  width: 100%; min-height: 48px;
  padding: .6rem .75rem;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--papel); color: var(--tinta);
  /* 16px o menos hace que iOS haga zoom al enfocar, y descoloca la pantalla */
  font-size: 16px; font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--marca); outline-offset: 1px; border-color: var(--marca);
}
input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--marca); }

button[type=submit] {
  min-height: 48px; padding: 0 1.1rem;
  background: var(--marca); color: #fff; border: 0;
  border-radius: var(--radio); font-size: 1rem; font-weight: 600; cursor: pointer;
}
button[type=submit]:hover { filter: brightness(.94); }
/* Ancho completo SOLO donde cierra un formulario largo: ahi el boton es
   el final del recorrido y conviene que sea imposible de errar. En una
   fila de la hoja es lo contrario — se lleva el renglon entero. */
.formulario > button[type=submit],
.entrada button[type=submit] { width: 100%; margin-top: 1.25rem; }

.error {
  background: var(--alerta-baja); color: var(--alerta);
  border: 1px solid #f3c3bf; border-radius: var(--radio);
  padding: .7rem .85rem; margin: 0 0 1rem; font-size: .9rem;
}

/* --- Inicio --- */
.panel h1 { font-size: 1.35rem; margin: .5rem 0 1.25rem; }
.tarjetas { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .tarjetas { grid-template-columns: 1fr 1fr; } }
.tarjeta {
  display: block; padding: 1rem; background: var(--papel);
  border: 1px solid var(--linea); border-radius: 12px;
  text-decoration: none; color: var(--tinta); min-height: 48px;
}
.tarjeta:hover { border-color: var(--marca); background: var(--marca-baja); }
.tarjeta strong { display: block; font-size: 1.05rem; }
.tarjeta span { display: block; color: var(--tinta-baja); font-size: .88rem; margin-top: .15rem; }

/* --- Modo oscuro: lo pone el celular, no una preferencia nuestra --- */
@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #e8edeb; --tinta-baja: #9aa8a3;
    --papel: #1a1f1e; --fondo: #101413; --linea: #2c3432;
    --marca: #5fb89c; --marca-baja: #1d2b27;
    --alerta: #ff8a80; --alerta-baja: #2b1b19;
  }
  button[type=submit] { color: #07100d; }
}

/* --- Padron --- */
.resumen { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: 0 0 1rem; }
@media (min-width: 34rem) { .resumen { grid-template-columns: repeat(4, 1fr); } }
.dato {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 12px; padding: .8rem; text-align: center;
}
.dato strong { display: block; font-size: 1.6rem; line-height: 1.1; }
.dato span { display: block; color: var(--tinta-baja); font-size: .78rem; margin-top: .2rem; }
.dato.pendiente { border-color: var(--pend-viva); }
.dato.pendiente strong { color: var(--pend); }
.dato.listo strong { color: var(--marca); }

.aviso {
  background: #fdf6e6; border: 1px solid #e8d5a3; color: #6b4e11;
  border-radius: var(--radio); padding: .75rem .9rem; font-size: .9rem; margin: 0 0 1.25rem;
}
.aviso.listo { background: var(--marca-baja); border-color: var(--marca); color: var(--marca); }

.filtros { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 1.25rem; }
.filtros a {
  padding: .45rem .8rem; border-radius: 999px; text-decoration: none;
  border: 1px solid var(--linea); color: var(--tinta-baja);
  font-size: .85rem; background: var(--papel);
}
.filtros a.on { background: var(--marca); border-color: var(--marca); color: #fff; }

.parecidos {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 12px; padding: 1rem; margin: 0 0 1.5rem;
}
.parecidos h2 { font-size: 1.05rem; margin: 0 0 .25rem; }
.ayuda { color: var(--tinta-baja); font-size: .85rem; margin: 0 0 .9rem; }
.grupo {
  border-top: 1px solid var(--linea); padding: .7rem 0;
  display: flex; flex-wrap: wrap; gap: .8rem;
}
.candidato { flex: 1 1 12rem; }
.candidato .nom { display: block; font-weight: 600; }
.enlinea { display: inline; margin: 0; }
button.chico {
  background: var(--marca-baja); color: var(--marca); border: 1px solid var(--marca);
  border-radius: 999px; padding: .35rem .7rem; font-size: .8rem;
  cursor: pointer; margin: .3rem .3rem 0 0; min-height: 36px;
}
button.chico:hover { background: var(--marca); color: #fff; }

.ficha {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 12px; padding: .85rem; margin: 0 0 .6rem;
}
.ficha.fusionada {
  display: flex; justify-content: space-between; align-items: center;
  color: var(--tinta-baja); font-size: .9rem;
}
.campos { display: grid; gap: .6rem; grid-template-columns: 1fr; align-items: end; }
@media (min-width: 40rem) {
  .campos { grid-template-columns: 1.2fr 1.2fr 1.3fr auto; }
}
.campos label { margin: 0; font-size: .78rem; font-weight: 600; color: var(--tinta-baja); }
.campos input, .campos select { margin-top: .25rem; }
.campos input.falta { border-color: var(--pend-viva); background: var(--pend-baja); }
.campos button {
  width: 100%; margin: 0; min-height: 48px;
  background: var(--marca); color: #fff; border: 0;
  border-radius: var(--radio); padding: 0 1.1rem; font-weight: 600; cursor: pointer;
}
.ficha .meta { color: var(--tinta-baja); font-size: .8rem; margin: .55rem 0 0; }

/* --- Lo que aun no existe, dicho como lo que es --- */
.enobra {
  background: var(--papel); border: 1px dashed var(--linea);
  border-radius: 12px; padding: 1rem; margin: 1.5rem 0 0;
}
.enobra h2 { font-size: .95rem; margin: 0 0 .25rem; color: var(--tinta-baja); }
.enobra ul { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--tinta-baja); font-size: .88rem; }
.enobra li { margin: .25rem 0; }

/* --- Filtros de mes y grupo --- */
.barra-filtro { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.barra-filtro select, .barra-filtro input {
  width: auto; flex: 0 1 14rem; min-height: 44px;
}
/* Sin el tope, un filtro solo —el mes en Gastos— se estira de lado a
   lado y se lee como el campo principal de la pantalla, cuando es un
   ajuste. */
.barra-filtro select, .barra-filtro input[type=month], .barra-filtro input[type=date] {
  max-width: 14rem;
}

h2.sec { font-size: 1rem; margin: 1.75rem 0 .6rem; padding-top: .5rem;
         border-top: 1px solid var(--linea); color: var(--tinta-baja); }

/* --- La hoja de REGISTRO, en pantalla ---
   Mismas columnas y mismo orden que el papel. Quien sabe llenar la
   hoja, sabe llenar esto. */
.hoja { background: var(--papel); border: 1px solid var(--linea); border-radius: 12px; overflow: hidden; }
.hoja-cab, .hoja-fila {
  display: grid; grid-template-columns: 2rem 1fr 5.5rem 2.5rem 4.5rem 3rem;
  gap: .4rem; align-items: center; padding: .55rem .7rem;
}
.hoja-cab {
  background: var(--fondo); font-size: .68rem; letter-spacing: .04em;
  color: var(--tinta-baja); font-weight: 700; border-bottom: 1px solid var(--linea);
}
.hoja-fila { border-bottom: 1px solid var(--linea); font-size: .9rem; }
.hoja-fila:last-child { border-bottom: 0; }
.hoja-fila.pagado { background: var(--marca-baja); }
.hoja-fila .n { color: var(--tinta-baja); font-size: .8rem; }
.hoja-fila .nino { font-weight: 600; }
.hoja-fila .serv, .hoja-fila .dia { color: var(--tinta-baja); font-size: .8rem; }
.hoja-fila .precio { text-align: right; font-variant-numeric: tabular-nums; }
.hoja-grupo {
  background: var(--fondo); padding: .5rem .7rem; font-size: .78rem;
  font-weight: 700; color: var(--marca); border-bottom: 1px solid var(--linea);
}

/* LA BANDA SE PLIEGA. El triangulo propio del navegador se cambia por
   uno dibujado, para que quede a la izquierda del texto y del lado en
   que se toca. */
/* El contador dentro de una pestaña de filtro: dice cuanto trae sin
   obligar a tocarla para averiguarlo. */
.filtros .cuantos {
  font-variant-numeric: tabular-nums; font-size: .78em;
  opacity: .7; margin-left: .15rem;
}
.filtros a.on .cuantos { opacity: .85; }

/* El dia de pago se pone en la fila. El panel flota para no ensanchar
   la columna del nombre. */
.fila-pago details.dia-pago { display: inline-block; position: relative; }
.fila-pago details.dia-pago > summary { list-style: none; cursor: pointer; }
.fila-pago details.dia-pago > summary::-webkit-details-marker { display: none; }
.fila-pago details.dia-pago .accion-caja {
  position: absolute; z-index: 30; left: 0; top: calc(100% + .3rem);
  width: min(15rem, 78vw);
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 12px; padding: .7rem;
  box-shadow: 0 8px 24px -12px rgba(0,0,0,.3);
}
.fila-pago details.dia-pago input { min-height: 38px; }

/* COMBO DE SELECCION MULTIPLE, sin JavaScript.
   Un <select multiple> nativo obliga a ctrl+clic y en un telefono no se
   puede usar. Esto es un <details> que se abre como desplegable y trae
   casillas: se marcan las que sean y se aplica. */
/* UNA SOLA LINEA.
   Los filtros son ajustes, no el trabajo: envueltos en dos filas
   empujaban la semana hacia abajo y se leian como cinco controles del
   mismo rango. Ahora la fecha y los dos combos comparten fila —y el
   mismo <form>, que es lo que de verdad los tenia separados.

   SIN `overflow-x: auto`, a proposito: la caja de cada combo es
   `position: absolute`, y un contenedor con overflow la recortaria
   justo al abrirla. Se encogen con puntos suspensivos (.combo-valor)
   en vez de deslizarse. */
.barra-filtro.combos { align-items: center; flex-wrap: nowrap; gap: .5rem; }
.barra-filtro.combos > * { min-width: 0; }
details.combo { position: relative; min-width: 0; }
/* EL CAMPO DE FECHA, DENTRO DE SU PANEL.
   Dos reglas de mas arriba lo alcanzan por descendencia y las dos
   estorban aqui: `.barra-filtro input { flex: 0 1 14rem }` en una caja
   en columna reparte 14rem de ALTO —un campo de fecha de la altura de
   media pantalla—, y el `width: auto` lo deja mas angosto que su
   panel. Dentro del combo ocupa el ancho completo y su altura normal. */
.combo-caja input[type=date] {
  flex: none; width: 100%; max-width: none; min-height: 44px;
}
details.combo > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: baseline; gap: .4rem;
  min-height: 44px; padding: .35rem .8rem;
  border: 1px solid var(--linea); border-radius: 10px;
  background: var(--papel); max-width: 18rem;
}
details.combo > summary::-webkit-details-marker { display: none; }
details.combo > summary::after {
  content: "▾"; margin-left: auto; padding-left: .4rem;
  color: var(--tinta-baja); font-size: .8rem;
}
details.combo[open] > summary { border-color: var(--marca); }
.combo-rotulo {
  font-size: .68rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-baja); flex: none;
}
.combo-valor {
  font-size: .9rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; min-width: 0;
}
.combo-caja {
  position: absolute; z-index: 40; left: 0; top: calc(100% + .3rem);
  min-width: 14rem; max-width: min(22rem, 88vw);
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 12px; padding: .6rem;
  box-shadow: 0 10px 28px -14px rgba(0,0,0,.35);
  display: flex; flex-direction: column; gap: .15rem;
}
.combo-op {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .3rem; border-radius: 7px; cursor: pointer;
  font-size: .92rem;
}
.combo-op:hover { background: var(--fondo); }
.combo-op input { width: 1.05rem; height: 1.05rem; margin: 0; flex: none; }
.combo-caja button { margin: .4rem 0 0; }
a.limpiar {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: 0 .8rem; border-radius: 10px; font-size: .85rem;
  border: 1px dashed var(--linea); color: var(--tinta-baja);
  text-decoration: none;
}
a.limpiar:hover { color: var(--alerta); border-color: var(--alerta); }

/* Los choques de horario: tres o cuatro renglones que se leen y se
   arreglan. No es una tabla. */
.choques { margin: .2rem 0 .8rem; padding-left: 1.1rem; font-size: .88rem; }
.choques li { margin: .15rem 0; }

details.banda { margin: 0 0 .35rem; }
details.banda > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: .45rem;
  text-transform: uppercase; letter-spacing: .04em;
  border-radius: 8px; margin-bottom: .35rem;
}
details.banda > summary::-webkit-details-marker { display: none; }
details.banda > summary::before {
  content: "▸"; font-size: .8rem; line-height: 1;
  transition: transform .12s ease; flex: none;
}
details.banda[open] > summary::before { transform: rotate(90deg); }
details.banda > summary:hover { background: var(--linea); }
details.banda > summary .banda-txt { flex: 1; min-width: 0; }
details.banda > summary .cuantos {
  float: none; font-weight: 600; text-transform: none; letter-spacing: 0;
  color: var(--tinta-baja); font-variant-numeric: tabular-nums;
}
.banda-venc { color: var(--alerta); }
.hay-vencidos { color: var(--alerta); }
@media (max-width: 33rem) {
  .hoja-cab { display: none; }
  .hoja-fila { grid-template-columns: 1fr 4rem 3rem; grid-template-areas: "nino precio tilde" "serv dia tilde"; }
  .hoja-fila .n { display: none; }
  .hoja-fila .nino { grid-area: nino; } .hoja-fila .serv { grid-area: serv; }
  .hoja-fila .dia  { grid-area: dia; }  .hoja-fila .precio { grid-area: precio; }
  .hoja-fila form  { grid-area: tilde; }
}

/* La tilde: un toque. Es el gesto que hoy se esta saltando.
   El boton es SOLO el area tocable; lo que se ve es la casilla que
   dibuja `.caja` mas abajo. */
button.tilde {
  min-width: 44px; min-height: 44px; border-radius: 8px; cursor: pointer;
  border: 0; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
}

/* --- Hoy: un toque por nino --- */
.marca-fila {
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 12px; padding: .7rem .85rem; margin-bottom: .5rem;
}
.marca-fila.marcado { border-color: var(--marca); background: var(--marca-baja); }
.marca-fila .nino { font-weight: 600; }
.botones { display: flex; gap: .4rem; }
.btn-vino, .btn-falto {
  width: auto; margin: 0;
  min-height: 48px; padding: 0 .95rem; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--linea); background: var(--papel);
  font-size: .9rem; font-weight: 600; color: var(--tinta-baja);
}
.btn-vino.on  { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn-falto.on { background: var(--alerta); border-color: var(--alerta); color: #fff; }

/* --- Formularios --- */
.formulario {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 12px; padding: 1rem; margin: 0 0 1.25rem;
}
.formulario hr { border: 0; border-top: 1px solid var(--linea); margin: 1.1rem 0; }
.par { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 34rem) { .par { grid-template-columns: 1fr 1fr; } }
.formulario label { font-size: .8rem; color: var(--tinta-baja); }
.formulario.compacto button[type=submit] { max-width: 14rem; }

/* --- Tablas --- */
.tabla-envoltura { overflow-x: auto; background: var(--papel);
  border: 1px solid var(--linea); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--linea); }
th { background: var(--fondo); font-size: .72rem; letter-spacing: .03em;
     color: var(--tinta-baja); text-transform: uppercase; white-space: nowrap; }
td.der, th.der { text-align: right; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: 0; }
tr.rojo td { background: var(--alerta-baja); }
.etiqueta { font-size: .68rem; background: var(--fondo); color: var(--tinta-baja);
  border: 1px solid var(--linea); border-radius: 999px; padding: .1rem .45rem; margin-left: .3rem; }

/* --- Barras del tablero: SVG seria mas, y esto basta --- */
.barras { display: flex; gap: .75rem; align-items: flex-end;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 12px; padding: 1rem; }
.barra-col { flex: 1; text-align: center; }
.tubo { height: 90px; display: flex; align-items: flex-end;
  background: var(--fondo); border-radius: 6px; overflow: hidden; }
.relleno { width: 100%; background: var(--marca); border-radius: 6px 6px 0 0; }
.barra-col .valor { display: block; font-size: .8rem; font-weight: 700; margin-top: .3rem; }
.barra-col .etiq { display: block; font-size: .7rem; color: var(--tinta-baja); }

.consulta { display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; flex-wrap: wrap; }
.consulta .meta { display: block; color: var(--tinta-baja); font-size: .78rem; }
/* Las dos tildes de una consulta son ETIQUETAS que se encienden
   —"asistio", "contrato"—, no casillas. Compartian la clase `.tilde`
   con la casilla de la hoja, y al dibujar esa con CSS estas se
   quedaban sin borde y parecian texto suelto. */
.consulta button.chip {
  width: auto; margin: 0; min-height: 40px; padding: 0 .8rem;
  border: 2px solid var(--linea); border-radius: 999px;
  background: var(--papel); color: var(--tinta-baja);
  font-size: .82rem; font-weight: 600; cursor: pointer;
}
.consulta button.chip:hover { border-color: var(--marca); color: var(--marca); }
.consulta button.chip.si {
  background: var(--marca); border-color: var(--marca); color: #fff;
}

/* --- Admin, historial y flujo --- */
pre.clave {
  background: var(--marca-baja); color: var(--marca); border: 1px solid var(--marca);
  border-radius: var(--radio); padding: .9rem; font-size: 1.05rem; font-weight: 700;
  letter-spacing: .04em; overflow-x: auto; margin: .5rem 0 0;
}
tr.apagado td { opacity: .5; }
td.tenue { color: var(--tinta-baja); font-size: .82rem; }
.roles { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .3rem; }
.roles label.fila { margin-top: 0; }
input.mini { width: auto; min-height: 36px; font-size: .85rem; padding: .3rem .5rem; }
.descargas { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }
.descargas a.chico { text-decoration: none; display: inline-block; line-height: 34px; }


/* --- La barra en el celular ---
   Con diez enlaces envueltos ocupaba 450 px de una pantalla de 844:
   mas de la mitad antes de ver nada util. Ahora cada rol ve dos o
   tres, y caben en una linea sin deslizar. */
@media (max-width: 46rem) {
  .barra-fila { gap: .4rem; padding: .5rem .6rem; }
  /* La tira de enlaces se desliza; la marca y la cuenta se quedan
     clavadas a los lados. Sin el `min-width: 0` el nav no se deja
     encoger y empuja la cuenta fuera de la pantalla: se veia
     "El cen" cortado debajo del boton de la cuenta. */
  .barra nav {
    flex: 1 1 auto; min-width: 0;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, #000 90%, transparent);
  }
  .barra nav::-webkit-scrollbar { display: none; }
  .barra nav a { padding: .45rem .55rem; font-size: .9rem; }
  .marca { flex: 0 0 auto; font-size: 1rem; }
  .pestanas { padding: 0 .6rem; }
  details.yo { flex: 0 0 auto; }
  details.yo > summary { max-width: none; padding: 0 .5rem; min-height: 36px; }
}

/* Los filtros de la hoja, en una linea en vez de tres bloques
   apilados: son ajustes, no el trabajo. */
@media (max-width: 40rem) {
  .barra-filtro { gap: .4rem; }
  .barra-filtro select { flex: 1 1 8rem; min-width: 0; font-size: .9rem;
                         padding: .4rem .5rem; min-height: 42px; }
  .barra-filtro .chico { flex: 1 1 100%; text-align: center; }
}

/* En el celular la cabecera de la hoja se oculta, y sin ella un "20"
   suelto no significa nada. Se le pone la etiqueta al lado. */
@media (max-width: 33rem) {
  .hoja-fila .dia::before { content: "paga el "; color: var(--tinta-baja); }
  .hoja-fila .serv { font-size: .75rem; }
}

/* LA CASILLA — el gesto mas repetido de todo el sistema.
   Se dibuja con CSS y no con el caracter ☐: cada sistema lo pinta a su
   manera y en el iPhone salia diminuto flotando dentro del recuadro,
   asi que se leia como un campo roto y no como "falta marcar". */
button.tilde:hover { background: rgba(0,0,0,.04); }
button.tilde .caja {
  width: 24px; height: 24px; border-radius: 6px;
  border: 2px solid var(--tinta-baja); background: var(--papel);
  display: block; position: relative; transition: none;
}
button.tilde:hover .caja { border-color: var(--marca); }
button.tilde.si .caja { background: var(--marca); border-color: var(--marca); }
/* El tick, con dos lineas: se ve nitido en cualquier pantalla. */
button.tilde.si .caja::after {
  content: ""; position: absolute; left: 7px; top: 2px;
  width: 6px; height: 12px; border: solid #fff;
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}

/* Corregir un gasto en su propia fila: sin pantalla aparte, sin buscarlo
   de nuevo. Un monto mal escrito se arregla donde se ve. */
.corregir { display: inline-flex; gap: .3rem; align-items: center; margin: 0; }
.corregir input { width: 6.5rem; min-height: 36px; font-size: .85rem;
  padding: .25rem .45rem; text-align: right; }
button.chico.borrar { border-color: var(--linea); color: var(--tinta-baja); background: none; }
button.chico.borrar:hover { border-color: var(--alerta); color: var(--alerta); background: none; }

/* El contador de sesiones del paquete.
   Las terapeutas ya lo llevaban a mano en la grilla de Excel: los
   numeros 1,2,3... eran las sesiones consumidas, y volver a 1 marcaba
   un paquete nuevo. Aqui se lleva solo. Cuando se acaba, hay que
   renovar — que es lo mismo que decir: hay que cobrar. */
.paquete {
  display: block; font-size: .78rem; font-weight: 400;
  color: var(--tinta-baja); margin-top: .15rem;
}
.paquete.poco    { color: var(--pend); font-weight: 600; }
.paquete.agotado { color: var(--marca); font-weight: 700; }

/* "+ apellido" en la lista de marcar.
   Dos ninos que se llaman igual y ninguno tiene apellido son la misma
   fila repetida: hay que abrir las dos fichas para saber a cual marcar.
   El enlace pone el arreglo DONDE se sufre el problema — y es la misma
   terapeuta la que sabe el apellido. */
.falta-ape {
  display: inline-block; margin-left: .4rem; font-size: .72rem;
  font-weight: 600; color: var(--pend); text-decoration: none;
  border: 1px dashed var(--pend-viva); border-radius: 6px; padding: .05rem .35rem;
  vertical-align: middle;
}
.falta-ape:hover { background: var(--pend-baja); }


/* ==================================================================
   QUE FALTA HOY — el inicio dejo de ser un menu
   Un menu obliga a decidir cual de diez tarjetas iguales tocar.
   Una lista de pendientes empuja: dice que falta y adonde ir.
   ================================================================== */
.pendientes { display: grid; gap: .6rem; }
.pendiente {
  display: block; text-decoration: none; color: inherit;
  background: var(--papel); border: 1px solid var(--linea);
  border-left: 4px solid var(--linea);
  border-radius: 12px; padding: .85rem 1rem;
}
.pendiente:hover { border-color: var(--marca); border-left-color: var(--marca); }
.pendiente strong { display: block; font-size: 1.02rem; }
.pendiente span { display: block; color: var(--tinta-baja); font-size: .87rem; margin-top: .15rem; }
.pendiente.urgente { border-left-color: var(--alerta); }
.pendiente.urgente strong { color: var(--alerta); }

/* ==================================================================
   COBRAR — tarjetas, no tabla
   En el celular la tabla se cortaba justo en la columna del celular,
   que es la unica que sirve para cobrar.
   ================================================================== */
.cobrar-tarjeta {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: var(--papel); border: 1px solid var(--linea);
  border-left: 4px solid var(--linea);
  border-radius: 12px; padding: .75rem .9rem; margin-bottom: .5rem;
}
.cobrar-tarjeta.tarde { border-left-color: var(--alerta); }
.cobrar-tarjeta .quien { flex: 1 1 11rem; color: inherit; font-size: inherit; }
.cobrar-tarjeta .quien strong { display: block; }
.cobrar-tarjeta .meta { display: block; color: var(--tinta-baja); font-size: .78rem; }
.cobrar-tarjeta .cuanto { text-align: right; font-variant-numeric: tabular-nums; }
.cobrar-tarjeta .cuanto strong { display: block; font-size: 1.05rem; }
.cobrar-tarjeta .sin-celular {
  font-size: .75rem; color: var(--tinta-baja);
  border: 1px dashed var(--linea); border-radius: 999px; padding: .3rem .6rem;
}
/* El boton que hace el trabajo: abre WhatsApp con el mensaje escrito. */
a.wa {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 1rem; border-radius: 10px;
  background: var(--marca); color: #fff; text-decoration: none;
  font-weight: 600; font-size: .9rem; white-space: nowrap;
}
a.wa:hover { filter: brightness(1.08); }
h2.sec { font-size: 1.05rem; margin: 1.75rem 0 .25rem; }

/* ==================================================================
   LA HOJA — una fila por cobro, con su monto y su observacion
   El papel tiene columna OBSERVACION y ahi va "abono S/200, paga el
   resto el viernes". Sin eso, coordinacion mantiene un cuaderno al
   lado — y ahi es donde el sistema pierde.
   ================================================================== */
.buscador { display: flex; gap: .5rem; margin: 0 0 .75rem; align-items: center; }
.buscador input[type=search] { flex: 1; min-height: 48px; margin: 0; }
.buscador button {
  min-height: 48px; padding: 0 1rem; width: auto; margin: 0;
  border-radius: var(--radio); border: 0; background: var(--marca);
  color: #fff; font-weight: 600; cursor: pointer;
}

.fila-pago {
  display: grid;
  /* nombre · monto · con que pago · nota · la tilde */
  grid-template-columns: minmax(0, 1fr) 5.5rem 8.75rem minmax(5rem, 1fr) 52px;
  align-items: center; gap: .5rem;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 10px; padding: .45rem .6rem; margin: 0 0 .35rem;
  scroll-margin-top: 8rem;   /* para que el ancla no quede bajo la barra */
}
/* Marcado = fuera del camino. La lista se acorta a medida que avanzas. */
.fila-pago.pagado { background: var(--marca-baja); border-color: var(--marca); }
/* VENCIDO = se ve sin leer. Con «vence el 4» en gris al lado de «vence
   el 15» en gris, saber cual ya se paso obliga a mirar el calendario y
   restar. El borde lo dice antes de leer la fila. */
.fila-pago.vencido { border-left: 4px solid var(--alerta); }
.fila-pago.pagado .dato-nino strong { font-weight: 600; }

.fila-pago .dato-nino { min-width: 0; }
.fila-pago .dato-nino strong { display: block; line-height: 1.25; }
.fila-pago .meta { display: block; color: var(--tinta-baja); font-size: .76rem; line-height: 1.3; }
.fila-pago .obs {
  display: block; font-size: .74rem; color: #8a5a00;
  background: #fff7e6; border-radius: 5px; padding: .1rem .35rem; margin-top: .15rem;
}

/* Los controles NO heredan el ancho completo de la regla base. */
.fila-pago input {
  width: 100%; margin: 0; min-height: 40px;
  padding: .35rem .5rem; font-size: .9rem;
}
.fila-pago input.monto { text-align: right; font-variant-numeric: tabular-nums; }
.fila-pago input.obs-input {
  border-color: transparent; background: var(--fondo); font-size: .85rem;
}
.fila-pago input.obs-input:hover { border-color: var(--linea); }
.fila-pago input.obs-input:focus { background: var(--papel); }
.fila-pago .pagado-info {
  grid-column: 2 / 5; text-align: right;
  font-variant-numeric: tabular-nums; font-size: .85rem;
}
.fila-pago .pagado-info strong { font-size: 1rem; }
.fila-pago .pagado-info .meta { display: inline; margin-left: .4rem; }

/* CON QUE PAGO. Arranca atenuado —«¿como pago?»— porque no elegir es
   un estado valido: el papel tampoco lo traia. Al elegir se enciende,
   para que se vea de un vistazo cual quedo sin registrar. */
.fila-pago select.medio {
  width: 100%; margin: 0; min-height: 40px;
  /* Tenia 7rem y «¿cómo pagó?» salia cortado en «¿cómo pagó`». Un
     control que no deja leer su propia etiqueta no se usa. */
  padding: .35rem .45rem; font-size: .85rem;
  border-color: transparent; background: var(--fondo); color: var(--tinta-baja);
}
.fila-pago select.medio:hover { border-color: var(--linea); }
.fila-pago select.medio:focus { background: var(--papel); }

/* CUANTO LLEVA VENCIDO. Es la unica cifra de la fila que cambia sola
   con el calendario, asi que se dibuja aparte y no como texto gris mas. */
.fila-pago .atraso {
  display: inline-block; font-size: .72rem; font-weight: 600;
  color: #8a5a00; background: #fff7e6;
  border-radius: 5px; padding: .05rem .35rem;
}
.fila-pago .atraso.tarde { color: var(--alerta); background: var(--alerta-baja, #fdeceb); }
/* Dar una deuda por no cobrable: va aparte y en tono de aviso, porque
   es lo unico de esta pantalla que hace desaparecer una cifra. */
.acciones-deuda details.confirma { margin: 0; }
.deuda-perdida {
  display: block; font-size: .78rem; color: var(--tinta-baja);
  margin-top: .2rem;
}

/* Las dos salidas de una deuda vieja: marcarla en su mes, o escribirle.
   Van juntas y al final de la tarjeta, que es donde termina de leerse. */
.acciones-deuda { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.acciones-deuda .boton-chico {
  display: inline-flex; align-items: center; min-height: 34px;
  padding: 0 .7rem; border-radius: 8px; font-size: .82rem;
  border: 1px solid var(--linea); background: var(--papel);
  color: var(--tinta); text-decoration: none;
}
.acciones-deuda .boton-chico:hover { border-color: var(--marca); color: var(--marca); }
.acciones-deuda .sin-celular { font-size: .78rem; }

/* La deuda de ANTES. Es un enlace: lleva a la hoja del mes mas viejo
   que quedo sin pagar, que es donde se marca. */
.fila-pago .atraso.deuda {
  color: var(--alerta); background: var(--alerta-baja, #fdeceb);
  text-decoration: none; margin-left: .25rem; border: 1px solid currentColor;
}
.fila-pago .atraso.deuda:hover { text-decoration: underline; }
/* «+1 servicio · manda S/830» — el aviso de que ese boton no manda
   esta fila sola, sino la cuenta completa del niño. */
.fila-pago .junto {
  font-size: .72rem; color: var(--tinta-baja); margin-left: .3rem;
}
.fila-pago .wa.chico {
  display: inline-block; margin-left: .3rem;
  font-size: .72rem; padding: .05rem .4rem; min-height: 0;
}

/* Cuantos trae cada servicio. La banda pasa de rotulo a resumen. */
.hoja-grupo .cuantos {
  float: right; font-weight: 500; color: var(--tinta-baja);
  font-variant-numeric: tabular-nums;
}

/* La tilde: un toque, y del tamano de un pulgar. */
.fila-pago button.tilde {
  width: 100%; margin: 0; justify-self: end;
  min-width: 44px; min-height: 44px;
}

/* En el celular no caben cuatro columnas. El nombre manda arriba, los
   dos campos abajo, y la tilde ocupa la altura de las dos filas: es el
   gesto que mas se repite y tiene que ser el mas facil de acertar. */
@media (max-width: 40rem) {
  .fila-pago {
    grid-template-columns: 5rem minmax(0, 1fr) 52px;
    grid-template-areas:
      "nino  nino  tilde"
      "monto medio tilde"
      "obs   obs   tilde";
    row-gap: .4rem; column-gap: .4rem;
  }
  .fila-pago .dato-nino   { grid-area: nino; }
  .fila-pago input.monto  { grid-area: monto; }
  .fila-pago select.medio { grid-area: medio; }
  .fila-pago input.obs-input { grid-area: obs; }
  .fila-pago .pagado-info { grid-area: monto; grid-column: 1 / 3; text-align: left; }
  .fila-pago button.tilde { grid-area: tilde; height: 100%; align-self: stretch; }
}

/* ==================================================================
   CONFIRMAR ANTES DE ALGO QUE NO SE DESHACE
   Cerrar un mes, juntar dos ninos, borrar un gasto: cosas que en el
   papel no existen y que aqui se hacen con un toque.

   Es un <details>, no un confirm() de JavaScript. El sistema entero
   funciona sin una linea de JS en el navegador y esto no va a ser la
   excepcion: sin JS, un onsubmit que no corre no avisa — ejecuta.
   ================================================================== */
details.confirma { display: inline-block; position: relative; margin: .2rem .25rem 0 0; }
details.confirma > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 .7rem; border-radius: 8px;
  border: 1px solid var(--linea); background: var(--papel);
  color: var(--tinta-baja); font-size: .82rem;
}
details.confirma > summary::-webkit-details-marker { display: none; }
details.confirma > summary:hover { border-color: var(--alerta); color: var(--alerta); }
details.confirma[open] > summary { border-color: var(--alerta); color: var(--alerta); }
.confirma-caja {
  position: absolute; z-index: 25; left: 0; top: calc(100% + .3rem);
  width: min(20rem, 78vw);
  background: var(--papel); border: 1px solid var(--alerta);
  border-radius: 12px; padding: .8rem;
  box-shadow: 0 10px 28px rgba(0,0,0,.16);
}
.confirma-caja p { margin: 0 0 .6rem; font-size: .85rem; line-height: 1.45; }
button.peligro, button.chico.peligro {
  background: var(--alerta); border-color: var(--alerta); color: #fff;
  min-height: 40px; padding: 0 .9rem; font-weight: 600;
}
button.peligro:hover { filter: brightness(1.08); }

/* ==================================================================
   MI DIA — agrupado como transcurre el dia de verdad
   No son 15 ninos sueltos: son tres grupos que entran uno tras otro.
   ================================================================== */
.grupo-dia { margin: 0 0 1.25rem; }
.grupo-cab {
  position: sticky; top: 3.4rem; z-index: 5;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--fondo); padding: .5rem 0 .4rem;
  border-bottom: 2px solid var(--linea); margin-bottom: .5rem;
}
.grupo-nom { font-weight: 700; color: var(--marca); flex: 1 1 auto; }
.grupo-cuenta { color: var(--tinta-baja); font-size: .82rem; font-variant-numeric: tabular-nums; }
.grupo-listo { color: var(--marca); font-size: .85rem; font-weight: 600; }

/* El dia NORMAL en una sola pulsacion. */
.btn-todos {
  min-height: 40px; padding: 0 .9rem; border-radius: 10px; cursor: pointer;
  border: 2px solid var(--marca); background: var(--marca-baja);
  color: var(--marca); font-weight: 700; font-size: .85rem; white-space: nowrap;
}
.btn-todos:hover { background: var(--marca); color: #fff; }
.btn-todos .cuantos { font-weight: 400; opacity: .8; }

/* Vuelve a la MISMA fila despues de marcar. Sin el margen, el ancla
   deja la fila justo debajo de la barra pegajosa y no se ve. */
.marca-fila { scroll-margin-top: 8rem; }
.grupo-dia  { scroll-margin-top: 6rem; }
/* Lo ya marcado se aparta del camino: la lista se acorta a medida
   que avanzas, en vez de quedarse igual de larga todo el rato. */
.marca-fila.marcado { opacity: .68; }
.marca-fila.marcado:hover { opacity: 1; }

/* ==================================================================
   FLUJO DE CAJA — tabla en pantalla grande, tarjetas en el celular
   En el celular la tabla se cortaba justo en la columna SALDO, que
   es la unica que se viene a mirar. Una tabla que se desliza de lado
   esconde su columna mas importante detras de un gesto que nadie
   sabe que tiene que hacer.
   ================================================================== */
.flujo-semanas { background: var(--papel); border: 1px solid var(--linea);
  border-radius: 12px; overflow: hidden; }
.flujo-cab, .flujo-fila {
  display: grid; grid-template-columns: 1fr 6rem 6rem 6rem 7rem;
  gap: .4rem; padding: .55rem .8rem; align-items: center;
}
.flujo-cab { background: var(--fondo); font-size: .72rem; letter-spacing: .03em;
  color: var(--tinta-baja); text-transform: uppercase; }
.flujo-fila { border-top: 1px solid var(--linea); font-size: .88rem; }
.flujo-fila .der { text-align: right; font-variant-numeric: tabular-nums; }
.flujo-fila.rojo { background: var(--alerta-baja); }
.flujo-fila.rojo .saldo strong { color: var(--alerta); }
.flujo-fila.esta { box-shadow: inset 3px 0 0 var(--marca); }
.flujo-fila .sale { color: var(--tinta-baja); }
.etiqueta.proy { background: #fff7e6; color: #8a5a00; border-color: #f0d9a8; }

@media (max-width: 40rem) {
  .flujo-cab { display: none; }
  .flujo-fila {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "sem sem" "entra sale" "neto saldo";
    row-gap: .15rem; padding: .7rem .8rem;
  }
  .flujo-fila .sem   { grid-area: sem; font-weight: 600; margin-bottom: .2rem; }
  .flujo-fila .entra { grid-area: entra; text-align: left; }
  .flujo-fila .sale  { grid-area: sale; }
  .flujo-fila .neto  { grid-area: neto; text-align: left; }
  .flujo-fila .saldo { grid-area: saldo; }
  /* Sin cabecera, un "1,240" suelto no dice si entra o sale. */
  .flujo-fila .der::before {
    content: attr(data-et) " "; color: var(--tinta-baja);
    font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
  }
}

/* ==================================================================
   GASTOS — lista y no tabla
   Cada movimiento trae un formulario para corregir el monto y un
   boton de borrar con su confirmacion flotante. Dentro de una tabla
   que se desliza de lado, en el celular eso queda fuera de pantalla,
   y el mismo contenedor que hace el desliz le recorta la cajita de
   confirmar.
   ================================================================== */
.gastos-lista { display: grid; gap: .45rem; }
.gasto-fila {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 12px; padding: .6rem .8rem;
}
.gasto-que { flex: 1 1 12rem; min-width: 0; }
.gasto-que strong { display: block; }
.gasto-que .meta { display: block; color: var(--tinta-baja); font-size: .77rem; }
.gasto-fila .corregir input { width: 6.5rem; min-height: 44px; }
@media (max-width: 33rem) {
  .gasto-que { flex: 1 1 100%; }
}


/* El separador de grupo dentro de la hoja. Hay quince: si pesan tanto
   como los nombres de los ninos, compiten con lo que se viene a buscar. */
.panel > .hoja-grupo {
  background: none; border: 0; border-bottom: 1px solid var(--linea);
  padding: 0 0 .25rem; margin: 1.1rem 0 .5rem;
  font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tinta-baja); font-weight: 700;
}
.panel > .hoja-grupo:first-of-type { margin-top: .6rem; }

/* ==================================================================
   BUSCADOR GLOBAL — en la barra, en todas las pantallas
   Antes cada pantalla tenia el suyo, asi que para buscar a Thiago
   habia que acertar PRIMERO en que pantalla vive la respuesta: el
   pago en una, el celular en otra, la asistencia en una tercera.
   ================================================================== */
.buscar-barra { margin: 0; flex: 0 1 13rem; min-width: 0; }
.buscar-barra input[type=search] {
  width: 100%; min-height: 38px; margin: 0;
  padding: .3rem .7rem; font-size: .9rem;
  border-radius: 999px; background: var(--fondo);
}
.buscar-barra input:focus { background: var(--papel); }

/* ==================================================================
   RESULTADOS DE BUSQUEDA
   ================================================================== */
.resultado {
  display: block; text-decoration: none; color: inherit;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 10px; padding: .7rem .85rem; margin: 0 0 .4rem;
}
.resultado:hover { border-color: var(--marca); background: var(--marca-baja); }
.resultado strong { display: block; }
.resultado .meta { display: block; color: var(--tinta-baja); font-size: .8rem; }
.resultado.inactivo { opacity: .6; }

/* ==================================================================
   FICHA DEL NIÑO — todo lo suyo en una pantalla
   La pregunta real de un martes es "Thiago: ¿esta al dia, vino ayer,
   cual es el celular de su mama?", y cruzaba tres pantallas.
   ================================================================== */
.ficha h2.sec { font-size: 1rem; margin: 1.6rem 0 .5rem;
  padding-bottom: .25rem; border-bottom: 1px solid var(--linea);
  color: var(--tinta-baja); text-transform: uppercase;
  letter-spacing: .04em; font-size: .78rem; }
.ficha-datos { margin: 0; }

.matri {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 10px; padding: .65rem .85rem; margin: 0 0 .4rem;
}
.matri.cerrada { opacity: .6; }
.matri-que { flex: 1 1 12rem; min-width: 0; }
.matri-que strong { display: block; }
.matri .meta { display: block; color: var(--tinta-baja); font-size: .78rem; }
.matri .obs { display: block; font-size: .76rem; color: #8a5a00;
  background: #fff7e6; border-radius: 5px; padding: .1rem .4rem; margin-top: .2rem; }
.matri-precio { text-align: right; font-variant-numeric: tabular-nums; }
.matri-precio strong { display: block; font-size: 1.05rem; }
.matri-estado { font-size: .76rem; color: var(--tinta-baja); }
.matri-estado .viva { color: var(--marca); font-weight: 700; }

/* Los meses, con los huecos a la vista: el hueco ES el dato. */
.pagos-meses { display: grid; gap: .35rem; }
.pago-mes {
  /* La cuarta columna es la accion. Caia debajo del mes, en su propio
     renglon, y eso partia en dos lo que se lee de un vistazo: el mes,
     cuanto, y que hacer al respecto. */
  display: grid; grid-template-columns: 9rem 6rem 1fr auto; align-items: baseline;
  gap: .5rem; padding: .5rem .8rem; border-radius: 8px;
  border-left: 4px solid var(--linea); background: var(--papel);
  border-top: 1px solid var(--linea); border-right: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.pago-mes .mes { font-weight: 600; }
.pago-mes .cuanto { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }
.pago-mes .meta { color: var(--tinta-baja); font-size: .8rem; }
.pago-mes.ok      { border-left-color: var(--marca); }
.pago-mes.ok .cuanto { color: var(--marca); }
.pago-mes.parcial { border-left-color: var(--pend-viva); }
.pago-mes.falta   { border-left-color: var(--alerta); }
.pago-mes.falta .cuanto { color: var(--alerta); }
.pago-mes.nada    { opacity: .55; }
.pago-mes .obs { grid-column: 1 / -1; font-size: .76rem; color: #8a5a00; }
.pago-acciones {
  grid-column: 4; justify-self: end; align-self: center;
  display: flex; gap: .3rem; flex-wrap: wrap; justify-content: flex-end;
}
.pago-acciones .accion { margin: 0; }
@media (max-width: 34rem) {
  .pago-mes { grid-template-columns: 1fr auto; }
  .pago-mes .meta { grid-column: 1 / -1; }
  .pago-acciones { grid-column: 1 / -1; justify-self: stretch; justify-content: flex-start; }
}

.paquete-linea { margin: .2rem 0; font-size: .9rem; }
.paquete-linea.poco { color: var(--pend); }
.paquete-linea.agotado { color: var(--marca); font-weight: 600; }

.sesiones { display: flex; flex-wrap: wrap; gap: .35rem; }
.sesion {
  font-size: .78rem; padding: .3rem .55rem; border-radius: 999px;
  border: 1px solid var(--linea); background: var(--papel);
  font-variant-numeric: tabular-nums;
}
.sesion em { font-style: normal; color: var(--tinta-baja); }
.sesion.vino  { border-color: var(--marca); color: var(--marca); }
.sesion.vino em { color: var(--marca); }
.sesion.falto { border-color: var(--alerta); color: var(--alerta); }
.sesion.falto em { color: var(--alerta); }

ul.cambios { list-style: none; margin: 0; padding: 0; font-size: .84rem; }
ul.cambios li { padding: .45rem 0; border-bottom: 1px solid var(--linea);
  color: var(--tinta-baja); }
ul.cambios li:last-child { border-bottom: 0; }
ul.cambios strong { color: var(--tinta); }
ul.cambios .meta { display: block; font-size: .78rem; font-style: italic; }

/* El nombre lleva a la ficha, desde donde se lo vea. Es la unica
   forma de que la ficha se descubra sola: aparece cuando ya estas
   mirando al niño del que quieres saber mas. Se subraya al pasar y
   no antes — sesenta nombres subrayados serian una malla. */
a.a-ficha {
  color: inherit; text-decoration: none; font-weight: 700;
  border-bottom: 1px dotted transparent;
}
a.a-ficha:hover, a.a-ficha:focus {
  color: var(--marca); border-bottom-color: var(--marca);
}

/* En el celular la barra no aguanta un campo mas sin comerse los
   enlaces: el buscador se vuelve un boton que abre /buscar con el
   cursor ya puesto. */
.buscar-boton { display: none; }
@media (max-width: 52rem) {
  .buscar-barra { display: none; }
  .buscar-boton {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    min-height: 36px; padding: 0 .7rem; border-radius: 999px;
    border: 1px solid var(--linea); background: var(--fondo);
    color: var(--tinta-baja); text-decoration: none; font-size: .82rem;
    white-space: nowrap;
  }
  .buscar-boton:hover { border-color: var(--marca); color: var(--marca); }
}

/* La ficha se LEE por defecto. La primera version abria con cinco
   casillas de formulario y habia que pasarlas de largo para llegar a
   lo que uno viene a mirar: a esta pantalla se entra con una pregunta
   —"¿esta al dia?"—, no con una correccion. */
.datos-linea {
  display: flex; flex-wrap: wrap; gap: .35rem 1.25rem;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 10px; padding: .7rem .9rem; margin: 0 0 .6rem;
  font-size: .9rem;
}
.datos-linea strong { color: var(--tinta-baja); font-weight: 600;
  font-size: .75rem; text-transform: uppercase; letter-spacing: .03em;
  display: block; }
.datos-linea .falta-dato { color: var(--pend); }

/* ==================================================================
   LAS ACCIONES — editar, agregar, dar de baja
   La version anterior de la ficha no tenia NINGUNA a la vista:
   parecia una pantalla de solo mirar. Un <details> con aspecto de
   boton es un boton que ademas dice, al abrirse, que va a pasar.
   ================================================================== */
details.accion { display: inline-block; position: relative; margin: 0 .3rem .3rem 0; }
details.accion > summary { list-style: none; cursor: pointer; }
details.accion > summary::-webkit-details-marker { display: none; }

summary.boton, button.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 0 .95rem; border-radius: var(--radio);
  border: 1px solid var(--linea); background: var(--papel);
  color: var(--tinta); font-size: .88rem; font-weight: 600;
  white-space: nowrap; width: auto; margin: 0; cursor: pointer;
}
summary.boton:hover, button.boton:hover,
details.accion[open] > summary.boton { border-color: var(--marca); color: var(--marca); }
/* Verde el que CREA: es la unica accion que suma algo nuevo. */
summary.boton.nuevo { border-color: var(--marca); color: var(--marca); background: var(--marca-baja); }
summary.boton.nuevo:hover { background: var(--marca); color: #fff; }
/* Rojo el que quita: se ve distinto ANTES de tocarlo, no despues. */
summary.boton.peligroso, summary.chico.peligroso { color: var(--alerta); }
summary.boton.peligroso:hover, details.accion[open] > summary.boton.peligroso,
summary.chico.peligroso:hover { border-color: var(--alerta); color: var(--alerta); }

summary.chico {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 0 .7rem; border-radius: 8px; border: 1px solid var(--linea);
  background: var(--papel); color: var(--tinta-baja); font-size: .82rem;
  white-space: nowrap;
}
summary.chico:hover, details.accion[open] > summary.chico {
  border-color: var(--marca); color: var(--marca);
}

.accion-caja {
  position: absolute; z-index: 30; right: 0; top: calc(100% + .35rem);
  width: min(26rem, 88vw); text-align: left;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 12px; padding: .9rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
}
.accion-caja.ancha { width: min(34rem, 90vw); }
.accion-caja p { margin: 0 0 .7rem; font-size: .85rem; line-height: 1.45; }
.accion-caja .campos { gap: .5rem; }
.accion-caja label { font-size: .78rem; }

/* EL FORMULARIO DE UNA CAJA FLOTANTE NO ES EL DE LA PAGINA.
   `.campos` se vuelve una grilla de CUATRO columnas segun el ancho de
   la VENTANA — pero vive dentro de una caja de 26rem. En un monitor
   ancho, cinco campos entraban a la fuerza en esas cuatro columnas y
   quedaban en "Ale" y "q", con las etiquetas partidas en tres lineas.
   Dentro de la caja manda la caja, no la ventana. */
.accion-caja .campos { grid-template-columns: 1fr; }
@media (min-width: 40rem) {
  .accion-caja .campos { grid-template-columns: 1fr 1fr; }
  .accion-caja .campos > button { grid-column: 1 / -1; }
}
.accion-caja .campos input,
.accion-caja .campos select { width: 100%; box-sizing: border-box; }
details.accion.antes { display: block; margin: .5rem 0 0; }

/* EN EL CELULAR NO FLOTA: se abre en su sitio, a lo ancho.
   La caja flotante mide hasta 34rem y en un telefono de 390 px se
   salia por el borde derecho — el formulario de "agregar un
   servicio" quedaba con los campos cortados a la mitad. Un panel
   que se despliega donde estaba el boton nunca se sale de la
   pantalla, y ademas se entiende sin explicacion: es el mismo gesto
   de abrir una carpeta. */
@media (max-width: 46rem) {
  .acciones, .sec-cab, .matri-acciones { display: block; }
  .acciones > *, .sec-cab > .accion, .matri-acciones > * { width: 100%; }
  details.accion { display: block; width: 100%; margin: 0 0 .35rem; }
  details.accion > summary.boton,
  details.accion > summary.chico { width: 100%; justify-content: center; }
  .acciones a.wa, .acciones form, .acciones button.boton { width: 100%; margin: 0 0 .35rem; }
  .matri-acciones .matri-estado { display: block; margin: .3rem 0; }
  .accion-caja, .accion-caja.ancha {
    position: static; width: 100%; margin-top: .4rem;
    box-shadow: none; border-color: var(--marca);
  }
  .sec-cab h2.sec { margin-bottom: .5rem; }
}
details.accion.antes .accion-caja,
details.accion.antes .antes-caja { position: static; width: auto; box-shadow: none;
  border: 0; padding: 0; }
.antes-caja { margin-top: .5rem; }

/* La cabecera de la ficha: quien es a la izquierda, que puedes
   hacerle a la derecha. */
.ficha-cab {
  display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap;
  margin: 0 0 .8rem;
}
.ficha-quien { flex: 1 1 14rem; min-width: 0; }
.ficha-cab h1 { margin: 0; }
.ficha-cab .sub { margin: .2rem 0 0; }
.acciones { display: flex; flex-wrap: wrap; gap: .3rem; align-items: flex-start; }
.etiqueta.baja { background: var(--alerta-baja); color: var(--alerta); border-color: var(--alerta); }

/* El titulo de una seccion y el boton que le agrega algo, juntos:
   "+ Agregar un servicio" pertenece a "Qué lleva", no a la pagina. */
.sec-cab { display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin-top: 1.6rem; }
.sec-cab h2.sec { margin: 0; border: 0; flex: 1 1 auto; }

.matri-acciones { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
@media (max-width: 40rem) {
  .matri-acciones { width: 100%; justify-content: flex-start; }
  .accion-caja { right: auto; left: 0; }
}

/* En una pantalla angosta el nombre completo de quien entro empuja
   los enlaces fuera. La inicial alcanza: solo hay una persona sentada
   delante del telefono y ya sabe quien es. */
details.yo .inicial { display: none; font-weight: 700; }
@media (max-width: 46rem) {
  details.yo > summary { padding: 0; width: 36px; justify-content: center;
    border-radius: 999px; }
  details.yo .inicial { display: block; }
  details.yo .nombre-largo { display: none; }
}
details.editar.antes { display: block; margin: .5rem 0 0; }
.antes-caja { margin-top: .5rem; }

/* El monto de un gasto fijo, alineado con los demas. */
.gasto-monto { font-variant-numeric: tabular-nums; text-align: right; min-width: 5.5rem; }
.gasto-fila.cerrada { opacity: .6; }
.gasto-fila.cerrada .gasto-monto { text-decoration: line-through; }

/* El paso cero de matricular: buscar antes de crear.
   Los duplicados son el problema numero uno de este proyecto — por
   ellos el numero de niños era un rango de 53 a 65 en vez de un
   numero. Un buscador antes del formulario cuesta un segundo y
   ahorra una fusion. */
.antes-de-crear {
  background: var(--marca-baja); border: 1px solid var(--marca);
  border-radius: 12px; padding: .9rem; margin: 0 0 1.25rem;
}
.antes-de-crear p { margin: 0 0 .6rem; font-size: .9rem; line-height: 1.45; }
.antes-de-crear .buscador { margin: 0; }
.antes-de-crear input[type=search] { background: var(--papel); }

/* Lo obligatorio se ve ANTES de escribir, no despues de que el
   formulario rebote. */
.obligatorio { color: var(--alerta); font-weight: 700; }
h3.sub-sec { font-size: .95rem; margin: 0 0 .75rem; color: var(--marca); }

/* Una consulta: quien es a la izquierda, que le haces a la derecha. */
.consulta-quien { flex: 1 1 12rem; min-width: 0; }
.consulta .botones { flex-wrap: wrap; gap: .3rem; }
@media (max-width: 46rem) {
  .consulta .botones { width: 100%; }
  .consulta .botones .enlinea { display: inline-block; }
  .consulta .botones button.chip { width: auto; }
}

/* ============================================================
   GRUPOS — la pantalla que faltaba.
   La jerarquia visual copia el orden en que se pregunta:
   1) a que hora   2) que dias   3) que es y con quien   4) quienes.
   Por eso la hora es lo mas grande de la tarjeta y el servicio,
   que es lo que la docente ya sabe, es lo mas chico.
   ============================================================ */

.tarjeta-grupo {
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: .9rem 1rem 1rem;
  margin-bottom: .9rem;
}

.tg-cab { display: flex; align-items: flex-start; gap: 1rem; }
.tg-cuando { flex: 1; min-width: 0; }

/* La hora en tabular para que las cifras se alineen entre tarjetas:
   leidas en columna, 09:00 y 17:00 tienen que empezar en el mismo pixel. */
.tg-hora {
  display: inline; font-size: 1.6rem; font-weight: 700; line-height: 1.1;
  color: var(--tinta); font-variant-numeric: tabular-nums;
}
.tg-hora.sin { font-size: 1.15rem; }
.tg-hasta { font-size: 1rem; font-weight: 400; color: var(--tinta-baja); margin-left: .35rem; }

/* Los dias, en palabras y debajo de la hora. Nunca 'L-M-V': en el papel
   del centro esa M es miercoles y desde fuera se lee martes. */
.tg-dias { display: block; margin-top: .15rem; color: var(--marca); font-weight: 600; font-size: .9rem; }

.tg-cupo { text-align: right; flex: 0 0 auto; }
.tg-cupo strong { display: block; font-size: 1.25rem; line-height: 1.1; }
.tg-cupo strong.hay   { color: var(--marca); }
.tg-cupo strong.lleno { color: var(--tinta-baja); font-size: 1rem; }
.tg-cupo span { display: block; font-size: .72rem; color: var(--tinta-baja); text-transform: uppercase; letter-spacing: .03em; }

.tg-que { margin: .5rem 0 .1rem; font-size: .9rem; color: var(--tinta-baja); }
.tg-miss { color: var(--tinta); font-weight: 600; }

.tg-ninos { list-style: none; margin: .6rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--linea); }
.tg-ninos li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .75rem; padding: .45rem 0;
}
.tg-ninos li + li { border-top: 1px solid var(--fondo); }
.tg-ninos a { color: var(--tinta); text-decoration: none; font-weight: 600; }
.tg-ninos a:hover, .tg-ninos a:focus { color: var(--marca); text-decoration: underline; }

/* "hace 12 dias" en rojo suave: es la lectura de asistencia que antes
   solo existia escribiendo. No grita — informa. */
.tg-visto { font-size: .8rem; color: var(--tinta-baja); white-space: nowrap; }
.tg-visto.ojo { color: var(--alerta); background: var(--alerta-baja); padding: .1rem .45rem; border-radius: 999px; }

/* --- Encabezado de grupo dentro de "Mi dia" --- */
.grupo-que { flex: 1; min-width: 0; }
.grupo-hora {
  display: block; font-size: 1.3rem; font-weight: 700; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.grupo-hora.sin-hora { font-size: 1.05rem; }
.grupo-hasta { font-size: .9rem; font-weight: 400; color: var(--tinta-baja); }
.grupo-cuando { display: block; color: var(--marca); font-weight: 600; font-size: .85rem; }
.grupo-serv { display: block; color: var(--tinta-baja); font-size: .8rem; margin-top: .1rem; }
.tg-dias.vacio { color: var(--tinta-baja); font-weight: 400; font-style: italic; }
/* Que el grupo entero este sin marcar se dice UNA vez, aqui — no ocho
   veces en forma de alarma al lado de cada niño. */
.tg-pausa {
  margin: .6rem 0 0; padding: .5rem .7rem;
  background: var(--fondo); border-radius: var(--radio);
  font-size: .85rem; color: var(--tinta-baja);
}

/* El encabezado de grupo en "Mi día" pasó a llevar tres datos (hora,
   días, servicio) mas la cuenta y el boton. En 390px eso ya no cabe en
   una fila: el servicio se partia en dos lineas y chocaba con el boton.
   Se apila — identidad arriba, accion abajo — que ademas pone el boton
   grande al alcance del pulgar. */
.grupo-cab { align-items: flex-end; }
.grupo-que { flex: 1 1 100%; }
.grupo-cab .grupo-cuenta { margin-right: auto; }
@media (min-width: 30rem) {
  .grupo-que { flex: 1 1 auto; }
  .grupo-cab .grupo-cuenta { margin-right: 0; }
}

/* --- COBRAR: una tarjeta por familia ---
   El total manda porque es lo que se pide por telefono; el desglose va
   debajo y en chico, para poder responder "¿de que es?" sin cambiar de
   pantalla. */
.familia {
  background: var(--papel); border: 1px solid var(--linea);
  border-left: 3px solid var(--linea); border-radius: var(--radio);
  padding: .75rem .9rem; margin-bottom: .6rem;
}
.familia.tarde { border-left-color: var(--alerta); }
.fam-cab { display: flex; align-items: flex-start; gap: 1rem; }
.fam-quien { flex: 1; min-width: 0; }
.fam-quien strong { display: block; font-size: 1.02rem; }
.fam-quien .meta { display: block; color: var(--tinta-baja); font-size: .78rem; }
.fam-total { text-align: right; flex: 0 0 auto; }
.fam-total strong { display: block; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.fam-detalle { list-style: none; margin: .55rem 0 0; padding: .5rem 0 0; border-top: 1px solid var(--fondo); }
.fam-detalle li { display: flex; align-items: baseline; gap: .5rem; padding: .2rem 0; font-size: .85rem; }
.fam-detalle a { color: var(--tinta); text-decoration: none; font-weight: 600; }
.fam-detalle a:hover { color: var(--marca); text-decoration: underline; }
.fam-detalle .serv { color: var(--tinta-baja); flex: 1; }
.fam-detalle .mon { font-variant-numeric: tabular-nums; color: var(--tinta-baja); }

/* --- PADRON: la lista se lee ---
   Cada niño era un formulario de 5 campos siempre abierto: con 62 niños,
   ~310 casillas de texto en una pagina. La fila ahora dice quien es; el
   formulario sigue existiendo, plegado. */
.ficha-nino {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: .6rem .8rem; margin-bottom: .4rem;
}
.fn-cab { display: flex; align-items: flex-start; gap: .75rem; }
.fn-quien { flex: 1; min-width: 0; }
.fn-nombre { display: block; color: var(--tinta); font-weight: 600; text-decoration: none; font-size: 1rem; }
.fn-nombre:hover, .fn-nombre:focus { color: var(--marca); text-decoration: underline; }
/* Donde esta cada niño: "Kristty · Lun · Mié · Vie · 17:00". Sin esto la
   ficha decia solo "estimulacion", que no lo distingue de otros treinta. */
.fn-donde {
  display: inline-block; margin: .2rem .35rem 0 0;
  font-size: .78rem; color: var(--marca);
  background: var(--marca-baja); padding: .1rem .45rem; border-radius: 999px;
}
.fn-donde.vacio { color: var(--tinta-baja); background: var(--fondo); }
.fn-faltas { flex: 0 0 auto; text-align: right; }
.falta-chip {
  display: inline-block; margin-left: .25rem;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--alerta); background: var(--alerta-baja);
  padding: .1rem .4rem; border-radius: 999px;
}
.falta-chip.suave { color: var(--tinta-baja); background: var(--fondo); }
.fn-editar > summary { margin-top: .4rem; cursor: pointer; color: var(--tinta-baja); }
.fn-editar[open] > summary { color: var(--marca); font-weight: 600; }
.fn-editar .ficha { border: 0; padding: .5rem 0 0; margin: 0; background: transparent; }
/* Los duplicados seguros van con borde de alerta: no es una sospecha
   que evaluar, es la misma ficha dos veces. */
.parecidos.exactos { border-left: 3px solid var(--alerta); padding-left: .8rem; }


/* ==================================================================
   LA AGENDA — la semana, las citas y los horarios
   Llegan con el arreglo del defecto de raiz: hasta aqui el horario se
   deducia leyendo el NOMBRE del grupo, no habia cita que mover, y
   quien atendia una sesion no quedaba registrado en ninguna parte.
   ================================================================== */

/* La hora del niño en la lista de marcar. En terapia cada uno tiene la
   suya: sin esto, ocho citas distintas se leen como una sola tanda. */
.fila-hora {
  display: inline-block; min-width: 3.2rem; font-variant-numeric: tabular-nums;
  font-size: .82rem; font-weight: 700; color: var(--marca);
}

/* LA SEMANA. Seis columnas en el escritorio; apiladas en el celular,
   porque una semana repartida en columnas de 60 px no se lee. */
.semana { display: grid; gap: .6rem; grid-template-columns: 1fr; margin: 1rem 0 0; }
@media (min-width: 62rem) { .semana { grid-template-columns: repeat(6, 1fr); } }

.dia-col {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 12px; padding: .6rem; min-width: 0;
}
.dia-col.es-hoy { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca); }
.dia-cab {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .4rem; margin: 0 0 .5rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--linea);
}
.dia-cab strong { font-size: .9rem; }
.dia-num { color: var(--tinta-baja); font-size: .75rem; }
.dia-vacio { color: var(--tinta-baja); font-size: .8rem; margin: .3rem 0; font-style: italic; }

.bloqueo {
  background: var(--alerta-baja); border: 1px dashed var(--alerta);
  border-radius: 8px; padding: .4rem .5rem; margin: 0 0 .45rem; font-size: .78rem;
}
.bloqueo .meta { display: block; color: var(--tinta-baja); }
.bloqueo form { margin: .3rem 0 0; }

/* HORARIOS. Una fila por grupo o por niño: lo que es a la izquierda,
   el boton de cambiar a la derecha. */
.horario-fila {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: .8rem; flex-wrap: wrap;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 12px; padding: .7rem .85rem; margin: 0 0 .5rem;
}
.horario-que { flex: 1 1 16rem; min-width: 0; }
.horario-que strong { display: block; }
.horario-que .meta { display: block; color: var(--tinta-baja); font-size: .78rem; margin-top: .15rem; }
/* Las etiquetas de esta fila son CHIPS, no bloques. Sin esto se estiran
   a todo el ancho de la columna y una fila con dos avisos se lee como
   tres cajas apiladas del mismo peso que el nombre del grupo. */
.horario-que .etiqueta {
  display: inline-block; width: auto; max-width: 100%;
  margin-top: .25rem; font-size: .74rem;
}
.horario-que .aviso { margin: .35rem 0 0; font-size: .82rem; padding: .5rem .7rem; }
/* El aviso de contradiccion: dos renglones cortos, uno por cosa que no
   cuadra. En prosa corrida quedaba una frase con cuatro negritas que
   habia que leer dos veces para saber que discrepa. */
.choque-horario ul { margin: .3rem 0 .4rem; padding-left: 1.1rem; }
.choque-horario li { margin: .1rem 0; }
.choque-horario p { margin: 0; }

/* Los dias, como casillas. Escribir 'L-M-V' es justo lo que hizo que
   la M significara miercoles en un grupo y martes en otro. */
.dias-check { border: 0; padding: 0; margin: 0 0 .7rem; }
.dias-check legend { font-size: .78rem; font-weight: 600; color: var(--tinta-baja); padding: 0; }
/* 44 px, no 40: es el minimo de WCAG 2.5.8 y de Apple, y esto se toca
   con el pulgar de pie. Estaba a 40 desde que se escribio — cuatro
   pixeles que no se ven y que se fallan. */
.dias-check label {
  display: inline-flex; align-items: center; gap: .3rem;
  margin: .35rem .55rem 0 0; font-size: .85rem; min-height: 44px;
}
.dias-check input { width: 20px; height: 20px; margin: 0; }

.generar {
  background: var(--marca-baja); border: 1px solid var(--marca);
  border-radius: 12px; padding: .9rem; margin: 1rem 0;
}
.generar form { margin: 0; }
.generar button { width: auto; }
.generar .ayuda { margin: .6rem 0 0; }

.etiqueta.pendiente {
  background: var(--pend-baja); color: var(--pend); border-color: var(--pend-viva);
}


/* --- El horario de un niño: una hora POR DIA ---------------------
   Seis filas fijas y sin JavaScript. La casilla dice si viene ese
   dia; el campo de al lado, a que hora. Un solo campo hora para
   toda la semana obligaba a mentir en el lunes o en el jueves. */
.dias-horas { display: grid; gap: .4rem; margin: 0 0 .9rem; grid-template-columns: 1fr; }

/* GRID, NO FLEX, Y POR UNA RAZON.
   La regla global de los campos es `width: 100%` con cinco :not()
   encima, o sea mas especifica que cualquier `.clase input` que se
   escriba aqui. En una fila flex ese 100% se mide contra la fila
   ENTERA: el campo de hora se salia de su caja y el reloj terminaba
   pisando la casilla del dia siguiente.
   En una grilla, ese mismo 100% se mide contra SU celda. El campo
   ocupa sus 8rem y no hay pelea de especificidad que ganar. */
.dia-hora {
  display: grid; grid-template-columns: 1fr 8.5rem; align-items: center;
  gap: .5rem; padding: .25rem .5rem;
  border: 1px solid var(--linea); border-radius: 10px;
}
.dia-marca { display: flex; align-items: center; gap: .45rem; min-width: 0;
             margin: 0; font-size: .9rem; min-height: 44px; cursor: pointer; }
.dia-marca input { width: 20px; height: 20px; margin: 0; flex: 0 0 auto; }
.dia-hora input[type="time"] { margin: 0; }

/* Un dia marcado se distingue de un dia vacio: la casilla sola, en
   seis filas iguales, obliga a mirar de cerca cual esta puesta. */
.dia-hora:has(input[type=checkbox]:checked) {
  border-color: var(--marca); background: var(--marca-baja);
}

/* --- Bloquear: un rango, y en filas legibles ---------------------
   Antes eran cuatro campos apretados en una grilla de cuatro
   columnas dentro de una caja de 26rem: "Dia / Desde / Hasta /
   Motivo" se leia como si Desde y Hasta fueran fechas, cuando eran
   horas. Ahora cada cosa va en su renglon y con su nombre. */
/* NO HEREDA `.accion-caja`. Esa caja es un panel flotante, y con la
   clase `.antes` encima se queda sin borde y sin relleno: el
   formulario salia pegado al borde y estirado a 830 px, con los dos
   campos de fecha separados por medio metro de blanco. Un formulario
   de seis campos se lee en una columna angosta, no a lo ancho de un
   monitor. */
.bloq-caja {
  max-width: 32rem; margin: .5rem 0 0; padding: 1rem;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 12px;
}
.bloq-caja > p:first-child { margin: 0 0 .9rem; font-size: .85rem; line-height: 1.45; }
.bloq-caja button[type=submit] { width: auto; }

/* Grid y no flex: la regla global de los campos es `width: 100%` con
   cinco :not() encima, imposible de ganar por especificidad desde
   aqui. En una grilla ese 100% se mide contra su celda y se acabo. */
.bloq-fila { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 0 0 .3rem; }
.bloq-fila.una { grid-template-columns: 1fr; }
.bloq-fila label { margin: 0; font-size: .8rem; font-weight: 600; color: var(--tinta-baja); }
.bloq-fila input { margin-top: .2rem; }
.bloq-caja .ayuda { margin: .1rem 0 .9rem; }
.sub-opcion { margin: .2rem 0 .8rem; }
.sub-opcion > summary { cursor: pointer; font-size: .85rem; color: var(--marca);
                        min-height: 40px; display: flex; align-items: center; }
.bloq-alcance { border: 1px solid var(--linea); border-radius: 10px;
                padding: .5rem .7rem; margin: 0 0 .9rem; }
.bloq-alcance legend { font-size: .8rem; font-weight: 600; color: var(--tinta-baja); padding: 0 .3rem; }
.bloq-alcance label { display: flex; align-items: center; gap: .45rem;
                      min-height: 40px; font-size: .88rem; cursor: pointer; }
.bloq-alcance input { width: 18px; height: 18px; margin: 0; }

/* La propuesta que sale de la asistencia ya cargada.
   Se ve distinta de un dato guardado a proposito: es una pregunta,
   no una afirmacion. Quien la confirma es quien atiende al niño. */
.sugerencia {
  margin: .45rem 0 0; padding: .5rem .6rem;
  background: var(--marca-baja); border-radius: 10px;
}
.sugerencia .meta { display: block; color: var(--tinta-baja); font-size: .78rem; }
.sugerencia form { margin: .4rem 0; }
.sugerencia button { width: auto; }

/* --- Las dos vistas de la agenda ---------------------------------
   La semana es para MIRAR; el dia, para TRABAJAR. */
.filtros.vistas { margin-bottom: .2rem; }
.filtros.vistas a.on { background: var(--marca); color: #fff; border-color: var(--marca); }
.dia-nombre { color: inherit; text-decoration: none; font-weight: 700; font-size: .9rem; }
.dia-nombre:hover { color: var(--marca); text-decoration: underline; }

/* LA SEMANA: el panel FLOTA sobre el calendario en vez de abrirse
   dentro de la columna. Una columna mide ~130 px: un formulario de
   tres campos ahi dentro queda en una tira ilegible, con la ayuda
   partida en ocho renglones. Los tres ultimos dias abren hacia la
   izquierda o el panel se sale por el borde de la pantalla. */
/* El ancla del panel flotante es la TARJETA, en las dos vistas. */
.cita { position: relative; }
details.accion.sobre { position: static; }
.accion-caja.flota {
  position: absolute; z-index: 40; top: auto; left: 0;
  width: 17rem; max-width: 88vw; text-align: left;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 12px; padding: .8rem;
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
details.accion.sobre.izq .accion-caja.flota { left: auto; right: 0; }
.accion-caja.flota label { display: block; margin: 0 0 .5rem;
                           font-size: .78rem; font-weight: 600; color: var(--tinta-baja); }
.accion-caja.flota input { margin-top: .2rem; }
.accion-caja.flota .ayuda { margin: .6rem 0 0; font-size: .78rem; }
/* En el celular la semana ya viene apilada a lo ancho: ahi el panel
   no necesita flotar, y flotando se saldria de la tarjeta. */
@media (max-width: 62rem) {
  .accion-caja.flota { position: static; width: 100%; box-shadow: none; margin-top: .4rem; }
}


/* ==================================================================
   LA TARJETA DE UNA CITA — hora · quien · que se le puede hacer
   La misma en las dos vistas: apilada en la columna de la semana,
   en tres columnas en la fila del dia.
   ================================================================== */
.cita {
  border-left: 3px solid var(--linea);
  padding: .45rem 0 .5rem .6rem; margin: 0 0 .5rem;
  font-size: .85rem;
}
.cita.programada { border-left-color: var(--marca); }
.cita.vino  { border-left-color: #b9cfc7; }
.cita.falto { border-left-color: var(--alerta); }

/* LA HORA ES EL BOTON.
   Se toca la hora y se edita la hora — no un boton aparte, en otro
   sitio de la tarjeta, que ademas decia "Ponerle la hora" teniendo un
   16:00 justo encima. Es un <summary>, asi que se comporta como un
   boton de verdad sin una linea de JavaScript. */
.hora-edita { display: block; }
.hora-edita > summary { list-style: none; cursor: pointer; }
.hora-edita > summary::-webkit-details-marker { display: none; }

.cita-hora {
  display: inline-block; font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: .82rem; color: var(--marca); line-height: 1.4;
  padding: .12rem .4rem; margin-left: -.4rem; border-radius: 7px;
  border: 1px solid transparent; white-space: nowrap;
}
.hora-edita > summary:hover .cita-hora,
.hora-edita[open] > summary .cita-hora {
  background: var(--marca-baja); border-color: var(--marca);
}

/* La hora que le TOCA, no la que se registro. Atenuada y punteada a
   proposito: la diferencia entre "esto paso a las 4" y "a las 4 es
   cuando le toca" es justo lo que no se puede borrar. */
.cita-hora.prevista {
  color: var(--tinta-baja); font-weight: 600;
  border-style: dashed; border-color: var(--linea);
}

/* Sin hora no va un boton del ancho de la tarjeta: va una pastilla
   pequeña, en el mismo sitio donde estaria la hora. */
.cita-hora.vacia {
  color: var(--tinta-baja); font-weight: 600; font-size: .7rem;
  text-transform: lowercase; letter-spacing: .01em;
  border-style: dashed; border-color: var(--linea); background: var(--fondo);
}
.hora-edita > summary:hover .cita-hora.vacia { color: var(--marca); }

.cita-nino { display: block; font-weight: 600; color: var(--tinta); text-decoration: none; }
.cita-nino:hover { color: var(--marca); text-decoration: underline; }
.cita .meta { display: block; color: var(--tinta-baja); font-size: .72rem; }
.cita-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin-top: .35rem; }

/* El estado, como una pastilla que se lee de un vistazo y no compite
   con el nombre. */
.etiqueta.est-vino  { background: var(--marca-baja); color: var(--marca); border-color: transparent; }
.etiqueta.est-falto { background: var(--alerta-baja); color: var(--alerta); border-color: transparent; }

/* --- EL DIA: una fila por cita, a lo ancho -----------------------
   Aqui los formularios se abren donde estan porque hay sitio.
   Tres columnas: la hora fija a la izquierda —alineada entre filas,
   que es lo que hace que un dia se lea de un vistazo—, el nombre
   ocupando el resto, y las acciones a la derecha. */
.dia-lista { display: grid; gap: .5rem; margin: 1rem 0 0; max-width: 44rem; }
.dia-lista .cita {
  background: var(--papel); border: 1px solid var(--linea); border-left-width: 3px;
  border-radius: 12px; padding: .75rem .9rem; margin: 0;
  /* La primera columna da para "indicar hora" en UNA linea: partido
     en dos, un boton de dos palabras parece un error de maquetacion. */
  display: grid; grid-template-columns: 5.6rem minmax(0, 1fr) auto;
  gap: .15rem .9rem; align-items: start;
}
.dia-lista .cita:hover { border-color: #cfd9d5; }
.dia-lista .cita > .hora-edita { grid-column: 1; grid-row: 1 / 3; }
.dia-lista .cita .cita-hora { font-size: .95rem; }
.dia-lista .cita-quien { grid-column: 2; grid-row: 1 / 3; min-width: 0; }
.dia-lista .cita .cita-nino { font-size: .98rem; }
.dia-lista .cita .meta { font-size: .78rem; margin-top: .1rem; }
.dia-lista .cita-acciones { grid-column: 3; grid-row: 1 / 3; margin-top: 0;
                            justify-content: flex-end; }
.dia-lista .cita .accion-caja.flota { width: 20rem; }
.dia-lista .bloqueo { max-width: 44rem; }

@media (max-width: 36rem) {
  .dia-lista .cita { grid-template-columns: 5.4rem minmax(0, 1fr); }
  .dia-lista .cita-acciones { grid-column: 1 / -1; grid-row: auto; margin-top: .5rem;
                              justify-content: flex-start; }
}

/* --- La cita PREVISTA: lo que su horario dice, sin fila todavia ---
   Punteada y palida: una agenda que pinta igual "esto esta agendado"
   y "esto deberia estar agendado" miente en la mitad de sus filas. */
/* SIN `opacity`, A PROPOSITO.
   Una opacidad menor que 1 crea un CONTEXTO DE APILAMIENTO, y con el
   la tarjeta se pintaba ENCIMA del panel flotante de la tarjeta de
   arriba — el formulario se veia atravesado por el nombre del niño
   siguiente. Lo atenuado se consigue con color, que no apila nada. */
.cita.prevision { border-left-style: dashed; border-left-color: #cbd5d0; }
.cita.prevision .cita-nino { color: var(--tinta-baja); }
.dia-lista .cita.prevision { border-style: dashed; border-left-style: dashed; background: transparent; }
.cita.prevision .cita-nino { font-weight: 500; }

/* Los seis dias, cada uno un boton. Mover al miercoles a la misma
   hora es un toque, no escribir una fecha entera. */
.etiq-campo { display: block; font-size: .78rem; font-weight: 600;
              color: var(--tinta-baja); margin: 0 0 .3rem; }
.dias-rapidos { display: grid; grid-template-columns: repeat(6, 1fr);
                gap: .25rem; margin: 0 0 .8rem; }
.dias-rapidos button {
  width: 100%; margin: 0; min-height: 40px; padding: 0 .1rem;
  font-size: .78rem; font-weight: 600; cursor: pointer;
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--linea); border-radius: 8px;
}
.dias-rapidos button:hover { background: var(--marca-baja); border-color: var(--marca); color: var(--marca); }
/* DONDE ESTA AHORA, RESALTADO.
   Estaba en gris sobre gris: el dia actual de la cita se perdia entre
   los otros cinco, y sin saber de donde sale no se sabe a donde se
   esta moviendo. Morado lleno y letra blanca — es un estado, no un
   boton apagado. */
.dias-rapidos button.hoy-no,
.dias-rapidos button.suyo {
  background: var(--marca); border-color: var(--marca); color: #fff;
  font-weight: 700; cursor: default;
  box-shadow: 0 2px 8px rgba(123,90,166,.3);
}
.dias-rapidos button.hoy-no:hover,
.dias-rapidos button.suyo:hover {
  background: var(--marca); border-color: var(--marca); color: #fff;
}

/* Reprogramar desde Mi dia. Va antes de los botones de marcar y en
   chico: lo frecuente es marcar; mover una cita es la excepcion. */
.cambiar-cita { margin: .35rem 0 0; }
.cambiar-cita > summary { font-size: .75rem; }
.cambiar-cita .accion-caja { max-width: 20rem; }

/* --- Las citas por venir, en la ficha del niño -------------------
   En orden de atencion —por el dia en que va a suceder la terapia—
   y cada una editable ahi mismo. */
.sec-chica { font-size: .9rem; margin: 1.1rem 0 .5rem; color: var(--tinta-baja);
             text-transform: uppercase; letter-spacing: .04em; }
.tabla-citas { display: grid; gap: .3rem; max-width: 38rem; }
.fila-cita {
  display: grid; grid-template-columns: 1fr 4rem 1fr auto; gap: .6rem;
  align-items: center; padding: .5rem .7rem;
  background: var(--papel); border: 1px solid var(--linea); border-radius: 10px;
}
.fila-cita:hover { border-color: #cfd9d5; }
.fc-dia { font-weight: 600; font-size: .88rem; }
.fc-fecha { color: var(--tinta-baja); font-weight: 400; font-size: .8rem; }
.fc-hora { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--marca); font-size: .88rem; }
.fc-serv { color: var(--tinta-baja); font-size: .78rem; }
.fc-mover .accion-caja { max-width: 20rem; }
@media (max-width: 36rem) {
  .fila-cita { grid-template-columns: 1fr auto; }
  .fc-serv { grid-column: 1 / -1; }
}

/* La prevision, rotulada como lo que es. Caia en el estado por
   defecto y salia como «faltó»: el sistema afirmando que un niño no
   vino a algo que todavia no ocurre. */
.etiqueta.est-prevista { background: var(--fondo); color: var(--tinta-baja);
                         border-color: var(--linea); border-style: dashed; }



/* ==================================================================
   REGLA GENERAL: UN PANEL ABIERTO SE PONE POR ENCIMA DE TODO.
   Vale para cualquier tarjeta con un <details> desplegable, en
   cualquier pantalla. Sin esto, el panel de una tarjeta compite con
   las de abajo y quien gane depende del orden del DOM y de si alguien
   creo un contexto de apilamiento sin darse cuenta (una opacidad, un
   transform, un filter). Que la regla sea una sola evita ir
   descubriendo el mismo bug tarjeta por tarjeta.
   ================================================================== */
.cita:has(details[open]),
.fila-cita:has(details[open]),
.horario-fila:has(details[open]),
.marca-fila:has(details[open]),
.matri:has(details[open]) { position: relative; z-index: 60; }

/* «Avisó» — la falta justificada. Distinta de «faltó» porque para el
   centro son opuestas: una consume el paquete y la otra no, y queda
   pendiente de recuperar. Con un solo boton, el centro le cobraba a
   la familia una sesion que le debia. */
.btn-justif {
  width: auto; margin: 0; min-height: 48px; padding: 0 .8rem;
  border-radius: 10px; cursor: pointer; font-size: .85rem; font-weight: 600;
  border: 2px solid var(--linea); background: var(--papel); color: var(--tinta-baja);
}
.btn-justif.on { background: var(--pend); border-color: var(--pend); color: #fff; }
.paquete .debe { color: var(--pend); font-weight: 600; }

/* Lo que el centro le debe a la familia: justificadas sin reponer. */
.fila-cita.debe { border-left: 3px solid var(--pend-viva); }
.fila-cita.debe .fc-hora { color: var(--pend); }

/* Los niños sin horario: aparte y plegados. No se cuelan en el dia
   —no se sabe si hoy les toca— pero se pueden marcar igual. */
.sin-horario { margin: 1.2rem 0 0; border: 1px dashed var(--linea);
               border-radius: 12px; background: var(--papel); }
.sin-horario > summary { cursor: pointer; padding: .8rem .9rem; font-size: .88rem;
                         color: var(--tinta-baja); min-height: 48px;
                         display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.sin-horario > summary strong { color: var(--pend); }
.sin-horario[open] > summary { border-bottom: 1px solid var(--linea); }
.sin-horario-caja { padding: .3rem .9rem .9rem; }



/* ==================================================================
   CAPA DE ESTETICA - TODO EL SISTEMA
   Va al final a proposito: no reescribe las reglas de estructura ya
   probadas, solo les cambia la piel. Asi un cambio de look no puede
   romper un layout que costo tres correcciones.
   ================================================================== */

/* --- Aire y ritmo ------------------------------------------------ */
.panel { padding: var(--aire-l) var(--aire); }
@media (min-width: 48rem) { .panel { padding: 2rem 1.75rem; } }

h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
h2.sec, .sec-chica {
  font-size: .72rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-tenue);
  margin: 2rem 0 .75rem; padding-bottom: .5rem;
  border-bottom: 1px solid var(--linea-suave);
}
.sub { color: var(--tinta-baja); font-size: .95rem; }
.ayuda { color: var(--tinta-baja); line-height: 1.55; }

/* --- Tarjetas: sombra en vez de borde ---------------------------- */
.dia-col, .horario-fila, .fila-cita, .marca-fila, .matri, .bloq-caja,
.generar, .dia-lista .cita, .sin-horario, .hoja-fila, .pendiente,
.resumen .dato, .entrada, .nino-fila, .grupo, .candidato {
  border-radius: var(--radio-l);
  box-shadow: var(--sombra);
  border-color: transparent;
}
.marca-fila {
  border: 1px solid transparent; padding: .85rem 1rem; margin-bottom: .55rem;
  transition: box-shadow .12s ease;
}
.marca-fila:hover, .hoja-fila:hover, .dia-lista .cita:hover,
.fila-cita:hover, .horario-fila:hover { box-shadow: var(--sombra-alta); }
.marca-fila.marcado {
  background: var(--marca-baja); box-shadow: none;
  border-color: rgba(123,90,166,.22);
}

.dia-col { padding: .85rem .75rem; background: var(--papel); }
.dia-col.es-hoy { box-shadow: 0 0 0 2px var(--marca), var(--sombra-alta); }
.dia-cab { border-bottom: 1px solid var(--linea-suave); padding-bottom: .55rem; margin-bottom: .7rem; }

/* --- Botones ------------------------------------------------------ */
button, .boton, .btn-vino, .btn-falto, .btn-justif, .btn-todos, .wa, .tilde {
  border-radius: 999px;
  transition: background .12s ease, color .12s ease,
              box-shadow .12s ease, border-color .12s ease;
}
button[type=submit], .boton { box-shadow: 0 1px 2px rgba(22,33,29,.06); }
button[type=submit]:hover { background: var(--marca-alta); }

/* Los tres botones del gesto mas repetido: distintos de un vistazo,
   sin leerlos. Verde lleno, gris de contorno, ambar de contorno. */
.btn-vino, .btn-falto, .btn-justif {
  border-width: 1.5px; font-weight: 650; padding: 0 1.05rem;
}
.btn-vino:hover  { border-color: var(--marca); color: var(--marca); background: var(--marca-baja); }
.btn-falto:hover { border-color: var(--alerta); color: var(--alerta); background: var(--alerta-baja); }
.btn-justif:hover{ border-color: var(--pend); color: var(--pend); background: var(--pend-baja); }
.btn-vino.on  { box-shadow: 0 2px 8px rgba(123,90,166,.3); }
.btn-falto.on { box-shadow: 0 2px 8px rgba(179,38,30,.24); }
.btn-justif.on{ box-shadow: 0 2px 8px rgba(176,125,22,.28); }
.btn-todos { font-weight: 650; box-shadow: 0 1px 3px rgba(123,90,166,.16); }

/* --- Pastillas de estado ----------------------------------------- */
.etiqueta {
  border-radius: 999px; font-size: .7rem; font-weight: 700;
  letter-spacing: .02em; padding: .2rem .6rem; border-width: 1px;
}
.paquete, .falta-ape, .sesion, .cita-hora { border-radius: 999px; }
.falta-ape { padding: .1rem .5rem; color: var(--pend); border-color: rgba(176,125,22,.42); }

/* --- Navegacion --------------------------------------------------- */
.barra { box-shadow: 0 1px 0 var(--linea-suave); }
.barra nav a, .pestanas a, .filtros a {
  border-radius: 999px; font-weight: 600;
  transition: background .12s ease, color .12s ease;
}
.filtros a { border: 1px solid var(--linea); padding: .45rem .95rem; }
.filtros a:hover { border-color: var(--marca); color: var(--marca); background: var(--marca-baja); }
.filtros a.on, .filtros.vistas a.on {
  background: var(--marca); color: #fff; border-color: var(--marca);
  box-shadow: 0 2px 8px rgba(123,90,166,.28);
}

/* --- Avisos: bloques de color plano, sin caja -------------------- */
.aviso {
  border-radius: var(--radio-l); border: 0; padding: .9rem 1.05rem;
  background: var(--pend-baja); color: #7a5510; font-size: .9rem; line-height: 1.5;
}
.aviso strong { color: #5c3f0b; }
.aviso.listo { background: var(--marca-baja); color: var(--marca-alta); }
.aviso.listo strong { color: var(--marca-alta); }
.aviso a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* --- Campos ------------------------------------------------------- */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=file]),
select, textarea {
  border-radius: var(--radio); border-color: var(--linea);
  padding: .7rem .85rem; transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(123,90,166,.16);
  outline: none;
}

/* --- Paneles flotantes -------------------------------------------- */
.accion-caja, .accion-caja.flota, .menu-yo {
  border-radius: var(--radio-l); box-shadow: var(--sombra-alta);
  border-color: var(--linea-suave); padding: 1rem;
}

/* --- La hora: ancla visual de la agenda --------------------------- */
.cita-fin {
  display: block; font-size: .66rem; font-weight: 500;
  color: var(--tinta-tenue); letter-spacing: 0;
}
.fila-hora {
  background: var(--marca-baja); border-radius: 999px;
  padding: .1rem .45rem; margin-right: .1rem;
}

/* --- Lo pendiente, en ambar y no en gris -------------------------- */
.etiqueta.pendiente, .etiqueta.est-prevista { background: var(--pend-baja); color: var(--pend); }
.paquete.poco { color: var(--pend); }
.sugerencia { border-radius: var(--radio-l); padding: .75rem .85rem; }

/* --- El dia de trabajo -------------------------------------------- */
.dia-lista .cita { padding: .95rem 1.1rem; background: var(--papel); }
.grupo-dia { background: transparent; box-shadow: none; }
.grupo-cab { padding: .2rem .25rem .8rem; }

/* --- Inicio: las tarjetas de lo que falta hoy --------------------- */
.pendiente {
  background: var(--papel); padding: 1.1rem 1.2rem;
  border-left: 4px solid var(--marca);
}
.pendiente:hover { box-shadow: var(--sombra-alta); }
.pendiente.urgente { border-left-color: var(--alerta); }

/* --- Tablas del tablero: sin rejilla, con ritmo ------------------- */
table { border-collapse: separate; border-spacing: 0; }
th {
  font-size: .68rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta-tenue); font-weight: 700;
  border-bottom: 1px solid var(--linea); padding: .6rem .7rem;
}
td { border-bottom: 1px solid var(--linea-suave); padding: .7rem; }
tr:last-child td { border-bottom: 0; }

/* --- Entrar: la primera pantalla que ve el equipo ----------------- */
.entrada { border: 0; padding: 2rem 1.75rem; border-radius: var(--radio-xl); }
.entrada h1 { font-size: 1.75rem; }

/* ==================================================================
   LA AGENDA A LO ANCHO
   El resto del sistema vive en 54rem: una lista de nombres mas ancha
   obliga a barrer la pantalla para unir el nombre con su boton. Pero
   una SEMANA son seis columnas, y en 54rem cada dia mide 130 px — los
   nombres se parten en tres lineas y no cabe ni una hora.
   ================================================================== */
main.ancho { max-width: 85vw; }
/* En pantallas enormes el 85% se vuelve inmanejable: la vista pasa a
   medir mas que el campo visual y hay que girar la cabeza. */
@media (min-width: 120rem) { main.ancho { max-width: 100rem; } }
/* Y en tablet o telefono no hay 85% que repartir: vuelve a ser una
   columna, y las seis columnas de la semana ya se apilan solas. */
@media (max-width: 62rem) { main.ancho { max-width: 54rem; } }

/* Por donde te mueves, a la izquierda. Como lo miras, a la derecha.
   Apiladas en dos filas se leian como cinco botones del mismo rango,
   y dos de ellos hacen algo muy distinto que los otros tres. */
.barra-agenda {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; margin: 0 0 1.1rem;
}
.barra-agenda .filtros { margin: 0; }
.barra-agenda .filtros.vistas {
  margin-left: auto;
  background: var(--linea-suave); border-radius: 999px; padding: .25rem;
  gap: .2rem;
}
.barra-agenda .filtros.vistas a { border: 0; padding: .45rem 1.1rem; }
.barra-agenda .filtros.vistas a:hover { background: var(--papel); }
/* En el telefono se apilan y el selector de vista ocupa la fila
   entera: es lo primero que se toca al abrir. */
@media (max-width: 40rem) {
  .barra-agenda { flex-direction: column-reverse; align-items: stretch; }
  .barra-agenda .filtros.vistas { margin-left: 0; justify-content: center; }
  .barra-agenda .filtros.vistas a { flex: 1 1 0; text-align: center; }
}

/* La X de los paneles. La agrega cerrar.js al abrirlos: pintarla en
   el HTML y que no cerrara nada sin JavaScript seria un boton roto,
   y es peor un boton que no hace nada que no tener boton. */
.cerrar-panel {
  position: absolute; top: .45rem; right: .45rem;
  width: 32px; height: 32px; min-height: 32px; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; line-height: 1; font-weight: 400;
  color: var(--tinta-tenue); background: transparent;
  border: 0; border-radius: 999px; cursor: pointer;
}
.cerrar-panel:hover { background: var(--linea-suave); color: var(--tinta); }
.cerrar-panel:focus-visible { outline: 2px solid var(--marca); outline-offset: 1px; }
/* La caja necesita ser el ancla de la X, y dejarle sitio para que no
   se monte sobre la primera etiqueta del formulario. */
.accion-caja, .bloq-caja, .sin-horario-caja { position: relative; }
.accion-caja > *:first-child, .bloq-caja > *:first-child { margin-top: 0; }
.accion-caja .etiq-campo:first-of-type,
.accion-caja label:first-of-type,
.bloq-caja > p:first-of-type { padding-right: 2rem; }

/* ==================================================================
   EL ESTADO ES UN SELECTOR, NO UNA ETIQUETA MUERTA
   Antes, para decir que un niño falto habia que salir del calendario,
   entrar a Mi dia y buscar su fila. Ahora se cambia donde se ve.
   ================================================================== */
.estado-elige > summary {
  list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; gap: .15rem; border-radius: 999px;
  padding: .1rem .3rem .1rem .1rem; min-height: 32px;
}
.estado-elige > summary::-webkit-details-marker { display: none; }
.estado-elige > summary:hover { background: var(--linea-suave); }
.estado-elige .flechita { font-size: .62rem; color: var(--tinta-tenue); line-height: 1; }
.estado-elige[open] > summary .flechita { transform: rotate(180deg); }

/* Los tres, apilados y del ancho del panel: se tocan con el pulgar y
   se leen sin comparar. */
.estados-tres { display: grid; gap: .4rem; margin: .1rem 0 .7rem; }
/* `.estados-tres .est-b` y no `.est-b` a secas: la regla global de
   los botones es `button[type=submit]`, que tiene mas especificidad
   que una clase suelta — los tres salian morados y no se distinguian
   entre si. */
.estados-tres .est-b {
  width: 100%; margin: 0; min-height: 46px; border-radius: 999px;
  font-size: .9rem; font-weight: 650; cursor: pointer;
  background: var(--papel); border: 1.5px solid var(--linea); color: var(--tinta-baja);
  box-shadow: none;
}
.estados-tres .est-b.vino:hover   { border-color: var(--marca); color: var(--marca); background: var(--marca-baja); }
.estados-tres .est-b.falto:hover  { border-color: var(--alerta); color: var(--alerta); background: var(--alerta-baja); }
.estados-tres .est-b.justif:hover { border-color: var(--pend); color: var(--pend); background: var(--pend-baja); }
.estados-tres .est-b.vino.on   { background: var(--marca); border-color: var(--marca); color: #fff; }
.estados-tres .est-b.falto.on  { background: var(--alerta); border-color: var(--alerta); color: #fff; }
.estados-tres .est-b.justif.on { background: var(--pend); border-color: var(--pend); color: #fff; }

/* ==================================================================
   LA FILA DE UN NIÑO — MENOS ALTO, MISMA INFORMACION
   Con 60 niños, cada 20 px de alto de mas son 1.200 px de pagina y
   una deslizada entera de dedo. Todo en UNA linea: nombre, donde
   esta, que le falta, y el boton de editar. La edicion sigue plegada.
   ================================================================== */
.ficha-nino {
  padding: .5rem .8rem; margin: 0 0 .35rem;
  border-radius: var(--radio); box-shadow: var(--sombra);
  background: var(--papel); border: 1px solid transparent;
  transition: box-shadow .12s ease;
}
.ficha-nino:hover { box-shadow: var(--sombra-alta); }
.fn-cab {
  display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; row-gap: .15rem;
}
.fn-quien { display: flex; align-items: baseline; gap: .5rem;
            flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.fn-nombre { font-weight: 650; font-size: .95rem; text-decoration: none; color: var(--tinta); }
.fn-nombre:hover { color: var(--marca); text-decoration: underline; }
.fn-donde { font-size: .74rem; color: var(--tinta-tenue); }
.fn-donde.vacio { font-style: italic; }
.fn-faltas { display: flex; gap: .3rem; flex-wrap: wrap; }
.falta-chip {
  font-size: .66rem; font-weight: 700; letter-spacing: .01em;
  padding: .12rem .5rem; border-radius: 999px;
  background: var(--pend-baja); color: var(--pend);
}
.falta-chip.suave { background: var(--linea-suave); color: var(--tinta-baja); }

/* El boton de editar entra en la MISMA linea, a la derecha. Antes
   ocupaba un renglon propio debajo: 60 niños, 60 renglones de mas. */
.fn-editar { margin: 0; flex: 0 0 auto; }
.fn-editar > summary {
  margin: 0; padding: .25rem .7rem; border-radius: 999px;
  border: 1px solid var(--linea); font-size: .75rem; font-weight: 600;
  color: var(--tinta-baja); min-height: 32px; display: inline-flex; align-items: center;
}
.fn-editar > summary:hover { border-color: var(--marca); color: var(--marca); background: var(--marca-baja); }
.fn-editar[open] > summary { border-color: var(--marca); color: var(--marca); background: var(--marca-baja); }
.fn-editar .ficha { padding: .6rem 0 .2rem; }

/* El boton de editar vive FUERA de .fn-cab en el HTML, asi que para
   subirlo a la misma linea la fila entera se vuelve flex. Al abrirlo,
   el formulario ocupa el ancho completo debajo. */
.ficha-nino { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ficha-nino > .fn-cab { flex: 1 1 16rem; min-width: 0; }
.ficha-nino > .fn-editar { flex: 0 0 auto; }
.ficha-nino > .fn-editar[open] { flex: 1 1 100%; }
/* Las etiquetas de lo que falta, en minuscula: en mayuscula gritan
   mas que el nombre del niño, que es lo que se viene a leer. */
.falta-chip { text-transform: none; }

/* --- Editar un niño: abrir y cerrar con el mismo boton -----------
   Abrir era claro y cerrar no: habia que adivinar que se cerraba
   tocando otra vez un boton que decia "Editar". Las dos palabras
   viven en el HTML y aqui se enseña una segun el estado — sin
   JavaScript, asi que funciona igual si el script no carga. */
.fn-editar > summary .ed-cerrar { display: none; }
.fn-editar[open] > summary .ed-abrir { display: none; }
.fn-editar[open] > summary .ed-cerrar { display: inline; }
.fn-editar[open] > summary {
  background: var(--marca); border-color: var(--marca); color: #fff;
}
.fn-editar[open] > summary:hover { background: var(--marca-alta); color: #fff; }

/* CERRAR VA ARRIBA A LA DERECHA.
   Abierto, el <details> pasa a ocupar la fila entera debajo del
   nombre, y su boton caia a la IZQUIERDA de esa fila nueva — que no
   es donde nadie busca un cerrar. Se saca del flujo y se clava en la
   esquina de la tarjeta, que es donde cierra todo lo demas del
   sistema: el panel de mover una cita, los desplegables, un dialogo. */
.ficha-nino { position: relative; }
.ficha-nino > .fn-editar[open] > summary {
  position: absolute; top: .5rem; right: .8rem; margin: 0; z-index: 2;
}
/* Las etiquetas de lo que falta ocupan justo esa esquina — y ademas
   sobran mientras se edita: los campos vacios ya se ven vacios en el
   formulario, con su marcador diciendo «falta». */
.ficha-nino:has(> .fn-editar[open]) .fn-faltas { display: none; }

/* QUIEN LO TRAE: el campo libre solo aparece si se eligio «Otro».
   El selector mira que opcion quedo marcada — sin JavaScript. Si el
   navegador no entiende :has(), el campo se queda visible: uno de
   mas, que es mucho mejor que no poder escribir que lo trae la
   abuela. Por eso la regla ESCONDE en vez de mostrar. */
form:has(select[name="apoderado"] option:not([value="otro"]):checked) .campo-otro {
  display: none;
}

/* Guardar a la derecha; Cancelar al lado y en segundo plano, porque
   lo normal es guardar. */
.fn-pie {
  display: flex; align-items: center; justify-content: flex-end;
  gap: .75rem; margin: .8rem 0 .2rem;
  padding-top: .75rem; border-top: 1px solid var(--linea-suave);
}
.fn-pie a.chico { color: var(--tinta-baja); text-decoration: none; padding: .4rem .3rem; }
.fn-pie a.chico:hover { color: var(--alerta); text-decoration: underline; }
.fn-pie button { width: auto; min-width: 9rem; }
/* El formulario, abierto, ocupa la fila entera debajo del nombre. */
.ficha-nino > .fn-editar[open] > .ficha { width: 100%; }

/* ==================================================================
   CELULAR — ES DONDE SE OPERA ESTO
   La barra a 390 px no aguanta marca + cuatro enlaces + buscador +
   cuenta: "Niños" quedaba tapado por "Buscar". Se recorta lo que
   menos informa, en este orden: el texto del buscador primero, los
   espacios despues. Los enlaces nunca — son la unica forma de moverse.
   ================================================================== */
.buscar-boton .lupa { display: none; }
@media (max-width: 30rem) {
  .buscar-boton .txt { display: none; }
  .buscar-boton .lupa { display: inline; font-size: 1.05rem; line-height: 1; }
  .buscar-boton { padding: 0 .6rem; }
  .barra { padding-left: .5rem; padding-right: .5rem; }
  .barra nav { gap: .1rem; }
  .barra nav a { padding: .4rem .45rem; font-size: .85rem; }
  .marca { font-size: .95rem; }
}

/* La fila de un niño en el celular: nombre arriba, y el boton de
   editar a la DERECHA en la misma linea. Dejarlo caer a un renglon
   propio son 60 renglones de mas en una lista de 60 niños, que en un
   telefono es media pantalla por cada uno. */
@media (max-width: 46rem) {
  .ficha-nino { display: grid; grid-template-columns: minmax(0,1fr) auto;
                gap: .3rem .6rem; align-items: center; }
  .ficha-nino > .fn-cab { grid-column: 1; }
  .ficha-nino > .fn-editar { grid-column: 2; grid-row: 1; }
  .ficha-nino > .fn-editar[open] { grid-column: 1 / -1; grid-row: 2; }
  .fn-cab { display: block; }
  .fn-quien { gap: .2rem .45rem; }
  .fn-faltas { margin-top: .15rem; }
  /* En el celular el formulario va en UNA columna: cuatro campos en
     fila hacen que cada uno mida 80 px y no quepa un apellido. */
  .fn-editar .campos { grid-template-columns: 1fr; }
  .fn-pie { flex-direction: column-reverse; align-items: stretch; gap: .5rem; }
  .fn-pie button { width: 100%; min-width: 0; }
  .fn-pie a.chico { text-align: center; }
}

/* LA FILA DE MARCAR, EN EL CELULAR.
   Los tres botones al lado del nombre le dejaban ~90 px: «Luna
   (Lu-Ma-Jue)» se partia en cuatro renglones y la fila media mas alto
   que si estuvieran debajo. Nombre arriba a lo ancho, y los tres
   repartidos en una fila — cada uno de un tercio de pantalla, que es
   mas grande que un pulgar y no hay forma de errarle. */
@media (max-width: 34rem) {
  .marca-fila { display: block; padding: .8rem .9rem; }
  .marca-fila .nino { display: block; margin-bottom: .6rem; }
  .botones { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; }
  .btn-vino, .btn-falto, .btn-justif {
    width: 100%; padding: 0 .2rem; font-size: .84rem; min-height: 46px;
  }
  .grupo-cab { display: block; }
  .grupo-cab .btn-todos { width: 100%; margin-top: .5rem; }
  .grupo-cuenta { display: block; margin: .3rem 0 0; }
}

/* --- Un bloque de clase: nido y estimulacion ---------------------
   Son grupales — seis niños en la misma sala a la misma hora — y en
   una agenda eso es UNA cita. Se distingue de una terapia individual
   por el fondo lleno: de un vistazo se ve que ese hueco de la tarde
   lo ocupa un grupo entero, no un niño. */
.cita.bloque-clase {
  background: var(--marca-baja); border-left-color: var(--marca);
  border-radius: var(--radio); padding: .55rem .7rem;
}
.cita.bloque-clase .cita-nino { color: var(--marca-alta); }
.cita.bloque-clase .cita-acciones .etiqueta {
  text-decoration: none; cursor: pointer;
}
/* TERMINADO NO SE DICE PINTANDO LA TARJETA ENTERA.
   Se pintaba de morado solido, y solo se blanqueaba el texto de una
   cita INDIVIDUAL (.cita-nino, .cita-hora). Un bloque de clase usa
   otras clases —.bc-titulo, .bc-dias, .bc-hora— asi que quedaba
   morado oscuro sobre morado: el titulo y los dias no se leian.
   Y aunque se hubieran blanqueado, tres bloques rellenos en una
   semana de trece tarjetas se comen la pantalla para gritar lo unico
   que YA no hay que hacer.
   La tarjeta se queda clara siempre. Lo que dice «esto ya esta» es la
   pastilla de la cuenta, que es justo donde se va a mirar. */
.cita.bloque-clase.listo { background: var(--marca-baja); }

/* --- El bloque de clase: servicio arriba, hora a la derecha, dias
   debajo. Es como se lee un turno: primero QUE es, luego cuando. --- */
a.cita.bloque-clase { display: block; text-decoration: none; color: inherit; }
.bc-alto { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.bc-titulo { font-size: .88rem; font-weight: 700; color: var(--marca-alta); line-height: 1.25; }
.bc-apodo { font-weight: 600; color: var(--marca); }
.bc-hora { font-variant-numeric: tabular-nums; font-weight: 700; font-size: .85rem;
           color: var(--marca); white-space: nowrap; text-align: right; }
/* SE ENVUELVE, NO SE APLASTA. En la semana la columna mide 130 px y
   ahora esta fila puede llevar tres cosas —dias, cupo y cuenta—. Sin
   `wrap`, flex le come el ancho a los dias hasta dejarlos en una letra
   y media; con `wrap` el cupo baja a su propia linea y se sigue
   leyendo. En el dia, donde sobra ancho, no se nota. */
.bc-bajo { display: flex; align-items: center; justify-content: space-between;
           flex-wrap: wrap; gap: .5rem .5rem; margin-top: .3rem; }
.bc-dias { font-size: .74rem; color: var(--tinta-baja); }
/* EL CUPO SE DICE DISTINTO DE LA CUENTA. Las dos son pastillas en la
   misma fila y dicen cosas distintas —«2 libres» es sitio en la clase,
   «3 de 6» es lo marcado hoy—, asi que la de cupo va perfilada y la
   otra rellena. Solo se pinta cuando hay sitio: sin pastilla, llena. */
.bc-libres {
  font-size: .7rem; font-weight: 700; border-radius: 999px;
  padding: .12rem .55rem; white-space: nowrap;
  background: rgba(255,255,255,.75); color: var(--marca-alta);
  box-shadow: inset 0 0 0 1px currentColor;
}
.bc-cuenta {
  font-size: .7rem; font-weight: 700; border-radius: 999px;
  padding: .12rem .55rem; background: var(--pend-baja); color: var(--pend);
  white-space: nowrap;
}
/* Los tres estados de la cuenta, los tres CLAROS y distintos entre
   si por el tono, no por el peso: ambar mientras falta marcar,
   blanca con palomita cuando ya estan todos. La de «libres» va
   perfilada y estas rellenas, para que no se confundan. */
.bc-cuenta.listo {
  background: var(--papel); color: var(--marca-alta);
}
/* LA FALTA, APARTE Y EN ROJO CLARO. No es una alarma —en un centro
   infantil faltar es normal— pero si es lo unico de la tarjeta que
   pide hacer algo, y pegada a la cuenta se perdia dentro de ella. */
.bc-falta {
  font-size: .7rem; font-weight: 700; border-radius: 999px;
  padding: .12rem .55rem; white-space: nowrap;
  background: var(--alerta-baja); color: var(--alerta);
}
a.cita.bloque-clase:hover { box-shadow: var(--sombra-alta); }

/* ==================================================================
   EL TURNO — encabezado plegable
   Tenia el markup pero no los estilos: caia apilado en cuatro lineas
   sueltas con la flecha del navegador flotando encima, que se lee
   como una vineta perdida y no como "esto se pliega".
   ================================================================== */
.turno { margin: 0 0 1.1rem; }
.turno > summary { list-style: none; cursor: pointer; }
.turno > summary::-webkit-details-marker { display: none; }

.turno-cab {
  display: grid;
  grid-template-columns: 1.4rem minmax(0, 1fr) auto;
  align-items: center; gap: .1rem .7rem;
  padding: .7rem .9rem; border-radius: var(--radio-l);
  background: var(--papel); box-shadow: var(--sombra);
  transition: box-shadow .12s ease;
}
.turno-cab:hover { box-shadow: var(--sombra-alta); }

/* La flecha: dentro del encabezado, y gira al abrir. */
.turno-flecha {
  grid-column: 1; grid-row: 1 / 3;
  font-size: .7rem; color: var(--tinta-tenue); line-height: 1;
  transition: transform .15s ease; transform: rotate(-90deg);
}
.turno[open] > summary .turno-flecha { transform: rotate(0deg); color: var(--marca); }

.turno-que { grid-column: 2; grid-row: 1; min-width: 0; }
.turno-serv { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; }
.turno-dias { grid-column: 2; grid-row: 2; font-size: .78rem; color: var(--tinta-baja); }

/* La hora a la derecha, alineada entre turnos: asi la columna de
   horas se lee de arriba abajo sin buscarla. */
.turno-hora { grid-column: 3; grid-row: 1; text-align: right;
              font-variant-numeric: tabular-nums; white-space: nowrap; }
.turno-hora strong { font-size: 1rem; color: var(--marca); }
.turno-hasta { font-size: .78rem; color: var(--tinta-baja); }
.turno-cuenta { grid-column: 3; grid-row: 2; text-align: right;
                font-size: .76rem; font-weight: 600; color: var(--tinta-baja); }

.turno-cuerpo { padding: .7rem 0 0; }
.turno-todos { display: flex; justify-content: flex-end; margin: 0 0 .6rem; }
.turno-listo {
  margin: 0 0 .6rem; text-align: right; font-size: .82rem;
  font-weight: 650; color: var(--marca);
}

/* En el celular el encabezado se toca entero y el boton ocupa el
   ancho: es el gesto mas repetido del dia. */
@media (max-width: 34rem) {
  .turno-cab { padding: .8rem .75rem; gap: .1rem .5rem; }
  .turno-serv { font-size: .9rem; }
  .turno-todos { display: block; }
  .turno-todos .btn-todos { width: 100%; }
}

/* La flecha tenia 11 px y se leia como una mota, no como un control.
   Con area de toque propia y un fondo al pasar, dice lo que hace. */
.turno-flecha {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; margin-left: -.25rem;
  font-size: .95rem; border-radius: 999px;
}
.turno > summary:hover .turno-flecha { background: var(--marca-baja); color: var(--marca); }
.turno-cab { grid-template-columns: 1.9rem minmax(0, 1fr) auto; }

/* "Todos vinieron" pegado al bloque de su turno, no flotando entre
   dos tarjetas: es la accion DEL turno. */
.turno-todos { margin: .55rem 0 .7rem; padding-right: .1rem; }

/* ==================================================================
   EL TURNO ES UN BLOQUE, Y LOS NIÑOS SON SUS LINEAS
   Antes el encabezado y cada niño eran tarjetas blancas sueltas del
   mismo peso: nada decia que esos seis niños son de ESE turno y no
   del siguiente. Con tres turnos un miercoles, la pantalla era una
   pila de tarjetas iguales sin jerarquia.
   Ahora el turno es UNA tarjeta: el encabezado arriba y los niños
   como renglones dentro, separados por una linea fina.
   ================================================================== */
.turno {
  background: var(--papel); border-radius: var(--radio-l);
  box-shadow: var(--sombra); overflow: hidden; margin: 0 0 .9rem;
}
.turno:hover { box-shadow: var(--sombra-alta); }

/* El encabezado deja de ser tarjeta propia: es la cabecera del bloque. */
.turno-cab { background: transparent; box-shadow: none; border-radius: 0; }
.turno-cab:hover { box-shadow: none; background: var(--linea-suave); }
/* La clase vive EN el <summary>, no dentro: con el selector de
   descendiente no encontraba nada y el encabezado quedaba pegado a
   la primera fila sin linea que los separe. */
.turno[open] > summary.turno-cab { border-bottom: 1px solid var(--linea); }

.turno-cuerpo { padding: 0; }
.turno-todos { margin: 0; padding: .6rem .9rem; border-bottom: 1px solid var(--linea-suave); }
.turno-listo { margin: 0; padding: .6rem .9rem; border-bottom: 1px solid var(--linea-suave); }

/* Los niños: renglones, no tarjetas. Sin sombra, sin borde propio,
   sin margen — solo una linea fina que los separa. */
.turno .marca-fila {
  box-shadow: none; border: 0; border-radius: 0; margin: 0;
  background: transparent; padding: .7rem .9rem;
  border-top: 1px solid var(--linea-suave);
}
.turno .turno-cuerpo > .marca-fila:first-child { border-top: 0; }
.turno .marca-fila:hover { box-shadow: none; background: var(--fondo); }
.turno .marca-fila.marcado { background: var(--marca-baja); border-color: transparent; }
.turno .marca-fila.marcado + .marca-fila { border-top-color: transparent; }

/* "Todos vinieron" sube a la altura de la hora: ocupaba un renglon
   entero para un boton, y con tres turnos son tres renglones de
   pantalla en un telefono. Va superpuesto sobre la fila de la hora,
   alineado a la derecha, sin robarle sitio al encabezado. */
.turno-cuerpo { position: relative; }
.turno-todos {
  position: absolute; top: -3.05rem; right: .9rem;
  margin: 0; padding: 0; border: 0; z-index: 2;
}
.turno-todos .btn-todos { min-height: 40px; font-size: .82rem; padding: 0 .95rem; }
.turno-listo {
  position: absolute; top: -2.6rem; right: .9rem;
  margin: 0; padding: 0; border: 0; font-size: .8rem;
}
/* El encabezado deja sitio a la derecha para ese boton. */
.turno[open] > summary.turno-cab { padding-right: 11.5rem; }
@media (max-width: 40rem) {
  /* En el telefono no cabe al lado: vuelve a su renglon, pero pegado
     al encabezado y a lo ancho, que es como se toca con el pulgar. */
  .turno[open] > summary.turno-cab { padding-right: .9rem; }
  .turno-todos, .turno-listo {
    position: static; padding: .6rem .9rem;
    border-bottom: 1px solid var(--linea-suave);
  }
  .turno-todos .btn-todos { width: 100%; }
}

/* Una cita de clase grupal no se mueve niño por niño: se dice por que
   en vez de dejar un hueco donde estaba el boton. */
.fc-fija {
  font-size: .7rem; font-weight: 700; border-radius: 999px;
  padding: .2rem .6rem; background: var(--linea-suave); color: var(--tinta-baja);
  cursor: help; white-space: nowrap;
}

/* ==================================================================
   ENVIANDO — la respuesta al toque
   ==================================================================
   El sistema navega por recarga completa: entre el toque y la página
   nueva no había ninguna señal. Esto la pone, y es lo único que hay
   entre «marcar un pago» y «marcarlo dos veces».

   Sin animación a propósito: es un estado que dura uno o dos segundos
   y desaparece con la página. Un spinner girando en noventa botones a
   la vez sería más ruido que información. */
button.enviando {
  opacity: .72; cursor: progress;
}
button.enviando::after {
  content: "…"; margin-left: .3rem; font-weight: 700;
}
form.enviando { cursor: progress; }

/* ==================================================================
   EL ACUERDO DE CONFIDENCIALIDAD
   La primera pantalla de cada persona del centro. Usa la caja
   `.entrada` del login, pero mas ancha: cinco puntos numerados en
   22 rem quedan en columnas de tres palabras.
   ================================================================== */
.entrada.acuerdo { max-width: 32rem; margin: 4vh auto; }

.acuerdo-puntos {
  margin: 0 0 1.25rem; padding-left: 1.4rem;
  display: flex; flex-direction: column; gap: .7rem;
}
.acuerdo-puntos li { font-size: .95rem; line-height: 1.45; }

/* LA CASILLA NO ES UN CAMPO DE FORMULARIO, ES UNA DECISION.
   Con el estilo de `label` normal quedaba el texto arriba y el cuadro
   debajo, separados: hay que leer una cosa y tocar otra. Aqui van en
   la misma linea y TODA la fila es el area tocable — 48 px de alto,
   que es lo que pide un dedo. */
.acuerdo-casilla {
  display: flex; align-items: flex-start; gap: .65rem;
  font-weight: 400; font-size: .95rem; line-height: 1.4;
  margin: 0; padding: .75rem .85rem; min-height: 48px;
  background: var(--marca-baja); border: 1px solid var(--marca);
  border-radius: var(--radio); cursor: pointer;
}
.acuerdo-casilla input { width: 22px; height: 22px; margin-top: .1rem; flex: none; }

/* La salida, discreta pero presente. Quien no quiere aceptar no puede
   quedarse encerrado: eso seria obligar a firmar. */
.acuerdo-salir { margin-top: .9rem; text-align: center; }
.acuerdo-salir button {
  width: auto; background: none; border: none; color: var(--tinta-baja);
  text-decoration: underline; min-height: 44px; padding: 0 .5rem;
}

/* UN DATO QUE EXISTE PERO NO ES TUYO.
   No es lo mismo que un dato que falta: `.falta-dato` empuja a
   completarlo y este dice que ya esta, en manos de otro puesto. Con la
   misma clase, la terapeuta salia a pedir telefonos ya cargados. */
.dato-ajeno { color: var(--tinta-baja); font-style: italic; }

/* DOS NIÑOS QUE SE LLAMAN IGUAL EN EL MISMO TURNO.
   Sin apellido son la misma fila dos veces, y marcar la equivocada le
   consume el paquete a otra familia. Por eso el aviso de apellido pasa
   de gris a rojo cuando hay homónimo: deja de ser una deuda de dato y
   pasa a ser algo que hay que resolver hoy. */
.falta-ape.urge {
  background: var(--alerta-baja); color: var(--alerta);
  box-shadow: inset 0 0 0 1px currentColor; font-weight: 700;
}
.hom {
  font-size: .68rem; font-weight: 700; border-radius: 999px;
  padding: .1rem .45rem; margin-left: .35rem; white-space: nowrap;
  background: var(--pend-baja); color: var(--pend);
}

/* ==================================================================
   E1 · LOS TRES COMBOS NO CABEN EN UN TELEFONO
   Medido por el QA de ergonomía (nivel 4): en 375 px visibles, la fila
   llegaba a 379 y el panel del tercer combo se abría hasta 482 — o sea
   107 px fuera de la pantalla, donde no se puede ni ver ni tocar.

   Son DOS problemas distintos en el mismo sitio, y cada uno pide otra
   cosa.
   ================================================================== */

/* 1 · LA FILA. Tres combos con su rótulo, su flecha y sus dos padding
   no entran en 375 px: lo único que se encoge es el valor, y encogerlo
   más lo deja en «Est…», que no dice nada.

   Se deja envolver SOLO en pantalla angosta. El comentario de arriba
   descartó envolver —«empujaban la semana hacia abajo»— y tenía razón
   con cinco controles en una pantalla ancha; con tres en un teléfono la
   cuenta se invierte: 44 px de alto se recuperan deslizando, y un
   control que se sale de la pantalla no se recupera de ninguna forma. */
@media (max-width: 26rem) {
  .barra-filtro.combos { flex-wrap: wrap; }
  .barra-filtro.combos > * { flex: 1 1 auto; }
  details.combo > summary { max-width: none; width: 100%; }
}

/* 2 · EL PANEL. Está anclado a `left: 0` de su combo, así que el del
   último se abre hacia afuera de la pantalla. Se ancla por la derecha,
   que es hacia donde tiene sitio.

   `:last-of-type` y no una clase: la regla debe seguir siendo cierta si
   mañana se agrega o se quita un combo. Una clase «este es el último»
   hay que acordarse de moverla, y nadie se acuerda. */
details.combo:last-of-type > .combo-caja { left: auto; right: 0; }

/* Y un tope duro para cualquiera de ellos: pase lo que pase con el
   anclaje, el panel no puede ser más ancho que la pantalla menos un
   margen. Es la red que evita que esto vuelva por otro camino. */
.combo-caja { max-width: min(22rem, calc(100vw - 1.5rem)); }

/* ==================================================================
   E3 · LA BARRA NO SE PODÍA TOCAR BIEN
   El QA de ergonomía la midió en las 29 pantallas: los enlaces del menú
   daban 34 px de alto y la marca «Suyay» 24. El mínimo para el dedo es
   44 (WCAG 2.5.8, y el de Apple desde siempre).

   No es un detalle de estética. Esta barra es lo que se toca con el
   pulgar sosteniendo el teléfono con la misma mano, que es exactamente
   cómo la va a usar una mis entre dos clases. Fallar el toque ahí manda
   a otra pantalla, y volver cuesta dos toques más.

   Se arregla con `min-height` y centrando, NO agrandando la letra: el
   área tocable crece y la barra se ve igual.
   ================================================================== */
.barra nav a,
.pestanas a,
.marca {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* La marca lleva su propio padding: sin él, 44 px de alto con el texto
   pegado al borde izquierdo se toca fuera del área que se ve. */
.marca { padding: 0 .35rem; }

/* Las pestañas mantienen su subrayado pegado abajo. Con `inline-flex` y
   `align-items: center` el borde inferior seguía en su sitio, pero el
   texto quedaba flotando en medio de los 44 px: se baja el peso visual
   con un padding asimétrico, más abajo que arriba. */
.pestanas a { padding: .55rem .8rem .5rem; }

/* ==================================================================
   E3 (segunda vuelta) · LOS TRES QUE QUEDABAN BAJO 44 px
   Con la barra ya corregida, el QA dejó ver los que estaban debajo:
   la lupa (36), el botón de cuenta (36 en móvil, 40 en escritorio) y
   «Todos vinieron» (40).

   Los dos primeros son navegación; el tercero no: es EL botón del día
   de una docente —el que convierte quince toques en tres— y estaba
   cuatro píxeles por debajo del mínimo. De los tres, es el que más
   caro sale fallar.

   Van al final del archivo a propósito: estas reglas ganan sobre las
   media queries de arriba, que es exactamente lo que hace falta —
   varias de ellas ENCOGÍAN el objetivo en pantalla angosta, que es
   donde más falta hace que sea grande.
   ================================================================== */
details.yo > summary,
.buscar-boton,
.btn-todos { min-height: 44px; }

/* La lupa y el botón de cuenta son cuadrados en móvil: si solo crecen
   de alto quedan como una pastilla vertical. Crecen a la par. */
@media (max-width: 40rem) {
  .buscar-boton { min-width: 44px; }
  details.yo > summary { min-width: 44px; }
}

/* ==================================================================
   E3 (tercera vuelta) · LOS QUE LA ESPECIFICIDAD DEJABA FUERA
   La regla `.btn-todos { min-height: 44px }` de arriba no llegaba a
   surtir efecto: `.turno-todos .btn-todos` es más específica y la
   pisaba, dejándolo en 40 px. Orden no gana a especificidad.

   Estos tres son controles de verdad, no enlaces dentro de una frase:
     · «Todos vinieron»  el botón del día de una docente
     · «Editar»          el que abre la fila de un niño en el padrón
     · la navegación de semana en la agenda
   ================================================================== */
.turno-todos .btn-todos { min-height: 44px; }
.fn-editar > summary { min-height: 44px; }

/* Las tiras `.filtros` son navegación —semana anterior, esta semana,
   los cortes de la hoja de cobros— y se tocan con el pulgar como la
   barra de arriba. No se les agranda la letra: solo el área. */
nav.filtros a { min-height: 44px; display: inline-flex; align-items: center; }

/* LA FICHA DE INSCRIPCIÓN, EN LA FICHA DEL NIÑO.
   Es una declaración de los padres —alergias, miedos, antecedentes— y
   nadie la edita: «queda tal cual», dijo Evelyn. Por eso se ve como un
   estado y no como un formulario. */
.ficha-inscripcion {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
  background: var(--papel); border: 1px solid var(--linea);
  border-left: 3px solid var(--pend);
  border-radius: var(--radio); padding: .7rem .85rem; margin: .75rem 0 0;
}
.ficha-inscripcion.lista { border-left-color: var(--marca); }
.fi-estado { display: flex; flex-direction: column; gap: .1rem; flex: 1 1 14rem; min-width: 0; }
.fi-acciones { display: flex; gap: .4rem; flex-wrap: wrap; }
.ficha-inscripcion .ayuda { flex: 1 1 100%; margin: 0; }

/* EL NIÑO QUE LLEGA POR PRIMERA VEZ, y lo que le falta.
   Van juntos a propósito: el día que llega es cuando hace falta saber
   sus alergias. Verde el aviso, ámbar lo que falta — el primero es una
   noticia, el segundo es algo que hacer. */
.nuevo, .sin-ficha-chip {
  font-size: .68rem; font-weight: 700; border-radius: 999px;
  padding: .1rem .45rem; margin-left: .35rem; white-space: nowrap;
}
.nuevo { background: var(--marca-baja); color: var(--marca-alta); }
.sin-ficha-chip { background: var(--pend-baja); color: var(--pend); }

/* LAS PESTAÑAS DE LA FICHA DEL NIÑO.
   Son locales a la ficha, no del menú: `Niños` ya ES la ficha, y sacar
   la historia clínica al menú crearía dos puertas a la misma persona.
   Se parecen a las pestañas de sección a propósito — es la única
   navegación que este equipo usa sin que se la expliquen. */
.pestanas-ficha {
  display: flex; gap: .1rem; margin: .25rem 0 1rem;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--linea);
}
.pestanas-ficha::-webkit-scrollbar { display: none; }
.pestanas-ficha a {
  color: var(--tinta-baja); text-decoration: none; white-space: nowrap;
  padding: .55rem .8rem .5rem; font-size: .9rem;
  min-height: 44px; display: inline-flex; align-items: center;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.pestanas-ficha a:hover { color: var(--tinta); }
.pestanas-ficha a.aqui { color: var(--marca); font-weight: 700; border-bottom-color: var(--marca); }

/* ==================================================================
   LA HISTORIA CLÍNICA
   Fichas en orden cronológico. Se leen mucho más de lo que se
   escriben: por eso el cuerpo es texto, no un formulario deshabilitado
   —que se ve como algo roto— y las acciones van arriba, discretas.
   ================================================================== */
.formatos-nuevos { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }

.ficha-clinica {
  background: var(--papel); border: 1px solid var(--linea);
  border-left: 3px solid var(--marca);
  border-radius: var(--radio); padding: .8rem .9rem; margin: 0 0 .75rem;
}
.ficha-clinica.anulada { border-left-color: var(--linea); opacity: .7; }
.fc-cab {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: .75rem; flex-wrap: wrap; margin-bottom: .6rem;
}
.fc-cab .meta { display: block; font-size: .8rem; color: var(--tinta-baja); }
.fc-acciones { display: flex; gap: .4rem; flex: none; }
.fc-cuerpo { display: flex; flex-direction: column; gap: .55rem; }

/* Un campo leído: la pregunta chica encima, la respuesta debajo. Es
   como se lee una ficha en papel, y es lo que hace que un párrafo largo
   no se confunda con la siguiente pregunta. */
.campo-leido { display: flex; flex-direction: column; gap: .1rem; }
.campo-etiqueta {
  font-size: .7rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tinta-baja);
}
.campo-valor { font-size: .95rem; line-height: 1.45; }
.campo-valor.largo { white-space: pre-wrap; }
.campo-valor.vacio { color: var(--tinta-baja); font-style: italic; }

.campo-casilla {
  display: flex; align-items: center; gap: .6rem; font-weight: 400;
  min-height: 44px; margin: .5rem 0 0;
}
.campo-casilla input { width: 22px; height: 22px; margin: 0; flex: none; }

.pie-clinica { margin-top: 1.5rem; border-top: 1px solid var(--linea); padding-top: .8rem; }

/* ==================================================================
   EL ACUERDO PARA IMPRIMIR Y FIRMAR
   Evelyn lo pidió como un papel firmado. No hace falta una librería de
   PDF: el navegador de cualquier teléfono imprime a PDF desde
   «Compartir → Imprimir». Una dependencia nueva se paga en despliegues
   y parches de seguridad para siempre; esto lo resuelve el sistema
   operativo que ya tienen.
   ================================================================== */
.documento {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 1.5rem 1.4rem; line-height: 1.55;
}
.doc-cab { text-align: center; margin-bottom: 1.4rem; }
.doc-cab h1 { font-size: 1.3rem; margin: 0 0 .3rem; }
.doc-sub { color: var(--tinta-baja); font-size: .85rem; margin: 0; }
.doc-puntos { padding-left: 1.3rem; display: flex; flex-direction: column; gap: .6rem; }
.doc-puntos li { line-height: 1.5; }
.doc-legal { font-size: .88rem; color: var(--tinta-baja); margin-top: 1.2rem; }

/* Las tres rayas de firmar. En pantalla se ven como lo que son —un
   sitio donde va a ir un bolígrafo— y en papel quedan a lo ancho. */
.doc-firma {
  display: flex; flex-wrap: wrap; gap: 1.6rem 2.4rem; margin: 3rem 0 1.2rem;
}
.doc-linea { flex: 1 1 11rem; display: flex; flex-direction: column; gap: .3rem; }
.doc-raya { display: block; border-bottom: 1px solid var(--tinta); height: 2.2rem; }
.doc-rotulo { font-size: .78rem; color: var(--tinta-baja); }
.doc-pie { font-size: .78rem; color: var(--tinta-baja); border-top: 1px solid var(--linea);
           padding-top: .6rem; margin-top: 1.5rem; }

/* LO QUE SALE POR LA IMPRESORA ES UN DOCUMENTO, NO UNA CAPTURA.
   Sin esto, la hoja que Evelyn archiva lleva arriba la barra de
   navegación con un botón de «Salir». */
@media print {
  .barra, .pestanas, .no-imprimir, footer { display: none !important; }
  body { background: #fff; }
  .panel.imprimible { max-width: none; padding: 0; margin: 0; }
  .documento { border: none; border-radius: 0; padding: 0; }
  .doc-raya { border-bottom-color: #000; }
  a[href]::after { content: ""; }        /* sin la URL entre paréntesis */
}

/* El enlace para bajarse el acuerdo y firmarlo. Va DESPUÉS del botón
   de aceptar: pedir que impriman algo para poder entrar convierte un
   compromiso de dos minutos en un trámite con impresora de por medio. */
.acuerdo-papel {
  margin: 1.1rem 0 0; padding-top: .9rem; border-top: 1px solid var(--linea);
  display: flex; flex-direction: column; gap: .2rem;
}
.acuerdo-papel a { color: var(--marca); font-weight: 600; min-height: 44px;
                   display: inline-flex; align-items: center; }
.acuerdo-papel .ayuda { margin: 0; }

/* ============================================================
   LA PROGRAMACION DEL MES

   Evelyn supervisa entrando al aula con la programación en la mano.
   Por eso estas pantallas están pensadas para leerse DE PIE, en un
   celular: una línea grande con lo que toca ahora, y el resto en gris.
   ============================================================ */
.prog-tarjeta { display: flex; flex-direction: column; gap: .25rem; }
.prog-grupo   { font-weight: 700; }
.prog-serv    { font-size: .8rem; color: var(--tinta-baja); }
.prog-tema    { font-size: .9rem; }
.prog-cuenta  { font-size: .78rem; color: var(--tinta-baja); }

.prog-dia     { margin: .9rem 0; }
.prog-dia-nom { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em;
                color: var(--tinta-baja); margin: 0 0 .35rem; }

.prog-bloque  { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
                padding: .55rem .7rem; border: 1px solid var(--linea);
                border-radius: 8px; margin-bottom: .4rem; background: var(--papel); }
.prog-hora    { font-variant-numeric: tabular-nums; font-weight: 600;
                min-width: 6.5rem; font-size: .88rem; }
.prog-act     { flex: 1 1 12rem; }
.prog-det     { display: block; font-size: .8rem; color: var(--tinta-baja); }

/* Un día especial reemplaza la rutina de ese día: se distingue a la
   vista, porque leerlo como si fuera un bloque más de la semana es
   exactamente el error que haría entrar al aula esperando otra cosa. */
.prog-puntual { border-left: 3px solid var(--marca); }

.prog-cuando  { display: flex; flex-direction: column; gap: .45rem;
                border: 1px solid var(--linea); border-radius: 8px; padding: .7rem; }

.prog-panel     { border: 1px solid var(--linea); border-radius: 10px;
                  padding: .8rem .9rem; margin-bottom: .7rem; background: var(--papel); }
.prog-panel-cab { display: flex; flex-direction: column; margin-bottom: .4rem; }
/* Lo que toca AHORA es la única línea que se lee de lejos. */
.prog-ahora     { font-size: 1.15rem; margin: .2rem 0; }
.prog-hasta     { font-size: .8rem; color: var(--tinta-baja); font-weight: 400;
                  margin-left: .4rem; }
.prog-vacio     { color: var(--tinta-baja); margin: .2rem 0; }

/* Los botones de estas pantallas se tocan de pie, con una mano. */
.prog-bloque button { min-height: 44px; }

/* La programación dentro del turno de Asistencia: un recordatorio, no
   un control. Por eso va en gris y arriba, sin competir con los
   botones de marcar. */
.prog-enturno { margin: 0 0 .6rem; font-size: .9rem; }
.prog-rotulo  { display: inline-block; font-size: .72rem; text-transform: uppercase;
                letter-spacing: .05em; color: var(--tinta-baja); margin-right: .4rem; }

/* Los dias y las dos formas de bloque se eligen con el pulgar: el area
   que se toca es la ETIQUETA entera, no el circulito de 20 px. */
.prog-cuando > label.fila, .prog-cuando .dias-check label { min-height: 44px; }
.prog-cuando .dias-check { display: flex; flex-wrap: wrap; gap: 0 .4rem; }

/* «sin cargar» es un ESTADO, no una tarjeta.
   Antes reusaba `.pendiente`, que es la tarjeta de los pendientes del
   inicio —display:block y un padding grande—: salía un bloque ámbar del
   ancho de la tarjeta que se comía el resto. */
.prog-falta {
  display: inline-block; font-size: .78rem; font-weight: 600;
  color: #8a5a00; background: #fff6e5; border: 1px solid #f0d9a8;
  border-radius: 999px; padding: .15rem .55rem; margin-top: .2rem;
}

/* El filtro de mes tiene su propia caja: dentro de `.filtros` —que es
   un flex de pastillas— el <label> se estiraba y el botón salía como
   una píldora torcida al lado del campo. */
.prog-mes { display: flex; align-items: flex-end; gap: .5rem; margin: 0 0 1.1rem; }
.prog-mes label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem;
                  color: var(--tinta-baja); }
.prog-mes button { min-height: 44px; }

/* El formulario de agregar, separado de la lista que lo precede. */
.prog-agregar {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 12px; padding: .9rem 1rem; margin: 1rem 0;
}
.prog-agregar .formulario { margin: 0; }

/* El día distinto pasa una o dos veces al mes: va cerrado y aparte, no
   compitiendo con la rutina dentro del mismo formulario. */
.prog-especial { margin: 1.2rem 0; border: 1px solid var(--linea);
                 border-radius: 12px; padding: .7rem .9rem; background: var(--papel); }
.prog-especial > summary { cursor: pointer; font-weight: 600; min-height: 44px;
                           display: flex; align-items: center; }