/* NORMATIVA: Actualizar versión, fecha y breve descripción de cambios en cada modificación.
  Versión: v-30MAY26-EXCEP-HINT5
  Fecha: 28 de Mayo de 2026
  Descripción:
  - "Más formas de pago": acordeón convertido en botón-tarjeta prominente (verde, con subtítulo).
  - Selector Cuota 1 / Cuota 2 (bolitas) dentro de "Pagar en cuotas".
  - Sin cambios en la estética pizarra ni en el footer.
*/

/* ⛔⛔⛔ §AHS · 11/09 · EL TEXTO GIGANTE ADENTRO DE OTRA APP · «un aspecto grotesco» ════════════════
   Él, probando el formulario dentro de un navegador embebido de Android: *«en general todo el sitio
   tiene un aspecto grotesco, con las tipografías gigantes y en bold. ¿Es sólo en modo webview? ¿o el
   estilo está roto en todas las recurrencias?»*.

   ⭐ LA RESPUESTA ES: **sólo ahí**, y no es el estilo. Android agranda por su cuenta el texto de las
      páginas cuando cree que el bloque es «el contenido principal» —se llama autoajuste de texto— y
      lo hace **por bloque**, con lo cual unos textos crecen y otros no. Eso es exactamente lo que se
      ve en sus capturas: «Ejemplo», el teléfono y el total enormes, y los rótulos de al lado
      normales. En Chrome de escritorio y en el navegador del teléfono no pasa.

   ⛔ Y NO ALCANZABA CON EL `viewport`, que esta página ya tiene desde siempre: el autoajuste se
      desactiva con **esta propiedad**, que faltaba. Verificado: cero apariciones en las dos hojas
      de estilo del proyecto.

   ⚠ El `100%` significa «no lo toques», no «achicalo»: en un navegador que no hace autoajuste —todos
     los de escritorio— esta regla **no cambia un solo píxel**. Por eso es segura.
   ⚠ Va en `html` y no en `body` porque el autoajuste se decide sobre el bloque raíz. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ══ §KC.4 · EL TAMAÑO DEL RÓTULO Y EL DEL DATO, ATADOS ════════════════════════════════════════
   Su regla: *«el nombre de alumno debe tener el mismo tamaño o mayor que "Datos del Alumno/a", en
   ambos casos»*. Estos dos valores estaban escritos por separado —16 y 15— y se habían cruzado sin
   que nadie lo notara: el rótulo le ganaba al dato.
   ⛔ `--dato` NO es un número: es `--rotulo` más un delta que sólo puede sumar. Así la regla no
      depende de que alguien se acuerde — está en la aritmética. Para agrandar el dato se toca
      `--dato-extra`; para agrandar los dos, `--rotulo`.
   ⚠ Y valen igual en celular: no hay `@media` que los pise, a propósito. «En ambos casos». */
:root {
  /* ⛔⛔ §AYL 53 · 27/09 · «UN POCO» MÁS CHICO · él, probando en el teléfono: *«ajustar "un poco" la cuestión tamaños.
     Los textos al ser bold contra textos no bold o medium ya destacan… no deben ser enormes, deben tener un tamaño
     legible, coherente y destacado»* · *«lo siento un poco TOSCA»*.
     ⭐ Lo que se aprende del admin, que él aprobó: ahí la jerarquía la hacen el PESO y el COLOR, no el tamaño — las
        solapas miden 11,5 px y los datos del encabezado son chicos y en cursiva; el único grande es el nombre corto.
        Acá el dato ya destaca por color (#111 contra el verde lavado del rótulo) y por peso: no necesita 17 px.
     ⚠ La regla de §AYL ㉕ no se toca: `--dato` sigue saliendo de `--rotulo` con un `calc` que nunca puede restar. */
  --rotulo: 15px;        /* «Alumno/a», «Pedido», «Datos de Pago» */
  --dato-extra: 0px;     /* cuánto le gana el dato al rótulo · nunca negativo · el dato destaca por color y peso */
  --dato: calc(var(--rotulo) + var(--dato-extra));
  /* §AYL 53 · la solapa es más chica que el rótulo, como en el admin · él: *«Hermanos puede reducirse un poco» */
  --solapa: 13px;
  /* ⛔⛔ §AYL ㉖ · 26/09 noche · EL RÓTULO TIENE UN SOLO DUEÑO: tamaño, color y peso. Él, mirando las solapas nuevas:
     *«las tipografías de Pedido, o Datos de alumno en la versión publicada tenían otro color… u otra intensidad… hay algo
     que me sigue chocando»*. Medido contra la publicada: el título era SU verde lavado (§KB.5) y las solapas lo escribían
     en verde pleno y en negrita, al lado de un dato que el ㉕ había bajado a medio. O sea que el rótulo le ganaba al dato,
     que es la regla que él repitió tres veces (§JZ.3) — y la suite del admin lo decía en rojo.
     Por eso el `h2` y la solapa leen los mismos tres valores de acá: si algún día se vuelven a separar, es a propósito.
     ⚠ El peso NUNCA por encima del dato (500): con Rubik cargado en 300/400/500/700, un 600 se dibuja 700. Se probó en
       400 y el título quedaba más débil que «+ Hermanos» y que el texto de ayuda; en 500 queda como el publicado, y el
       dato le gana por color (negro contra verde lavado) y por tamaño (`--dato` = rótulo + 1 px). En lo publicado era
       igual: título 600 y dato 700 se dibujaban los dos en 700. */
  --rotulo-color: rgba(20, 56, 34, .58);
  --rotulo-peso: 500;
  /* ⛔ §AYL ⑥ · 26/09 · LA LÍNEA DE LAS SOLAPAS · EL MISMO VALOR QUE EN `admin.css`, a propósito.
     Lo eligió él el 28/07 para el admin: «verde apagado claro pero VISIBLE, no blanco ni el gris genérico».
     Y el 26/09, para acá: «la solapa que podemos usar es la misma solapa de líneas que usamos en ADMIN, no es
     necesario nada más loco ni elaborado: es un efecto de continuidad visual».
     ⚠ Está escrito dos veces —una en cada hoja— y eso es una copia de una regla que ya tenía dueño, que es la
       causa raíz recurrente de este repo. Se acepta porque las dos aplicaciones se publican por separado y no
       comparten CSS, pero si cambia allá tiene que cambiar acá: son la misma decisión. */
  --sol-ln: #b9cbbc;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    margin: 60px 0 0;
    font-family: 'Rubik', Arial, sans-serif;
    padding: 10px;
    background-color: #d1d9d1;
    line-height: 1.6;
}

body.compacto {
    margin-top: 20px;
}

/* Contenedor principal */
.container {
    background-image: url('https://fotoescuela.com.ar/pizarra.jpg');
    /* §AYK.15 · el verde de la casa DETRÁS de la pizarra: si la imagen no carga (señal mala, un filtro), el membrete y
       los textos blancos quedaban sobre el gris de la página. Con la imagen cargada no se ve */
    background-color: #143822;
    background-size: cover;
    background-position: center;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.12);
    max-width: 480px;
    margin: 0 auto;
    overflow: hidden;
}

body.compacto .container {
    background-image: none;
    background-color: #143822;
}

#pedidoForm {
    width: 100%;
}

/* ⭐ §AVW · 22/09 · EL LOGO A LA IZQUIERDA Y LOS DOS RENGLONES A SU DERECHA (pedido suyo) ══════════════════════
   El logo mantiene su tamaño —él lo pidió expreso— y los dos renglones mantienen su peso: lo único que cambia es
   que dejan de estar apilados y centrados. En el teléfono eso devuelve unos 60 px de alto, que es lo que tardaba
   en aparecer lo que la familia vino a hacer.
   ⚠ La MISMA regla, con los mismos números, está en la Cartelera: las dos páginas tienen que verse iguales, y eso
     se rompe solo en cuanto una se toca sin la otra. */
/* ⭐ §AWA · 22/09 · EL TEXTO APOYA EN LA BASE DEL LOGO · él: *«la alineación del texto debe coincidir con la base del
   logo: o bajar el texto o subir el logo»*. Medido antes: el logo terminaba en 126 px y el subtítulo en 115 —once
   px más arriba—, y esa diferencia chica es justo la que se lee como «está flotando».
   ⚠ `flex-end` y no un empujón a mano: así sigue coincidiendo aunque el logo cambie de alto o el nombre se parta. */
.title-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 12px;
    text-align: left;
    margin-bottom: 10px;
}
.title-texto { min-width: 0; }
.title-container .logo-header { flex: 0 0 auto; margin: 0; }
/* §AWY ② · el enlace del logo es ahora el que está en la fila: se lo hace del tamaño exacto de la imagen (bloque,
   sin interlineado) para que el logo siga apoyando en la misma base que el texto (§AWA) y no gane ni un píxel */
.title-container > .logo-link { flex: 0 0 auto; display: block; line-height: 0; }
/* ⭐ §AWL · 22/09 · LOGO Y TEXTO SON UNA SOLA COSA · él: *«logo y las dos líneas de nombre funcionan como un bloque
   y reparten los espacios laterales y se centran… el texto de dos líneas centrado entre sí, y el logo pegado a
   ellos y todo junto centrado en relación a la pastilla»*.
   Son las dos mitades de un mismo pedido, y cada una tiene su renglón:
     · el CONJUNTO se centra → `justify-content: center` en `.title-container` (arriba), sin que ninguna mitad
       se estire: por eso el texto NO lleva `flex: 1` — si lo llevara, empujaría al logo contra el borde y los
       espacios laterales dejarían de repartirse solos;
     · las DOS LÍNEAS se centran ENTRE SÍ → acá. Estaban pegadas a la izquierda, y con «Foto Escuela» a 34 px
       sobre un subtítulo de 16 la línea corta quedaba colgando de un costado en vez de apoyada en el medio. */
.title-texto .title-main,
.title-texto .header-breadcrumb { justify-content: center; text-align: center; }

.logo-header {
    width: 130px;
    height: auto;
    display: block;
    margin: 0 auto 8px auto;
}

/* ⭐ §AVX · 22/09 · LA FUENTE DE FOTO ESCUELA EN EL ENCABEZADO · la misma que la Cartelera, con su copia al lado y la
   dirección relativa (el porqué está escrito entero en el bloque gemelo de `hosting_fotoesc/styles.css`). Es el
   primer intento, no el único: si el archivo no llega, el título sale con la fuente de siempre. */
@font-face {
    font-family: 'FotoEscuela';
    src: url('fotoescuela.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
}
.title-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #fff;
    font-family: 'FotoEscuela', 'Rubik', Arial, sans-serif;
    letter-spacing: .01em;
    /* §AWA · «Foto Escuela» un 30 % más grande (medido: 26 px antes) · es el nombre de la marca y con la letra de
       tiza tiene que leerse como el logo, no como un rótulo más */
    font-size: 34px;
    line-height: 1.05;
}
/* §AWA · y el subtítulo, un poco más chico (18 px antes): el que manda es el nombre */
.title-texto .breadcrumb-form,
.title-texto .header-breadcrumb { font-size: 16px; }

.title-main .mi-title {
    display: none;
}

h1, h2 {
    color: #000;
}

.mi {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 1.2em;
    line-height: 1;
    display: inline-block;
    vertical-align: -0.2em;
    user-select: none;
}

.mi-title {
    font-size: 1.3em;
    margin-right: .35em;
}

.mi-pay {
    color: #16a34a;
}

.mi-info {
    color: #906717;
}

h1 {
    font-size: 26px;
    margin-bottom: 0px;
    font-weight: 500;
    line-height: 1.2;
    color: #fff;
}

h2 {
    /* §KC.4 · el rótulo sale del token · el dato se calcula A PARTIR de éste y nunca puede quedar
       por debajo. Ver el bloque de `:root` arriba de todo. */
    font-size: var(--rotulo);
    margin-top: 10px;
    margin-bottom: 10px;
    /* ⛔ §JZ.3 · LA OTRA MITAD · 27/08: *«quizás lavar los títulos para que destaque y facilite la
       lectura de forma intuitiva»*. Un `h2` viene en 700 por defecto del navegador; el dato de al
       lado está en 600. Con el título más pesado que el dato, el ojo aterriza primero en «Datos del
       Alumno/a» —que la familia ya sabe— y recién después encuentra el nombre, que es lo único que
       vino a leer. Bajarlo a 600 no lo apaga: lo empata en cuerpo y deja que el color decida quién
       manda, que es exactamente lo que hace el color de acá abajo.
       ⛔ §AYL ㉖ · y desde el 26/09 el peso vive en `:root` (`--rotulo-peso`), con la solapa: el dato bajó a medio (㉕). */
    font-weight: var(--rotulo-peso);

    /* §HV · 22/08 · el MISMO verde del fondo, por el mismo motivo que en la Cartelera: un título en
       negro compite con el dato; en el verde del contenedor se lee como rótulo y orienta. Las dos
       páginas comparten criterio porque la familia las ve en el mismo trámite.
       ⛔ §JZ.3 · 27/08 · SE LAVA, PERO NO SE CAMBIA. Sigue siendo `20,56,34` —el verde de §HV, que
       tiene dueño y no se toca— servido lavado. Eso es lo que él pidió con «lavar»: el mismo color,
       menos carga. Cambiarlo por otro verde más claro habría sido pisar una decisión suya con una
       mía, y encima quedaría un literal nuevo que nadie podría rastrear hasta §HV.

       ⛔⛔ §KC.5 · 27/08 · ESTA REGLA VIVÍA EN `body.compacto h2` Y AHORA VIVE ACÁ. Él lo vio en una
          captura mía: *«el color negro de tu test es solo del test… no volvemos a pintar de negro»*.
          Tenía razón en que era de la prueba —sin escuela elegida el formulario está oculto, así que
          en producción nadie ve esos títulos— pero el agujero es real y vale nombrarlo:
          `compacto` es un modo de **layout** (saca la pizarra del fondo), no de tipografía. El `h2`
          pelado no declaraba ningún color, así que **heredaba negro**: dos cosas sin relación
          montadas en la misma clase, y la que manda —«el título no compite con el dato»— dependía
          de que la otra estuviera puesta.
          Ahora el color es del título, siempre, y `compacto` sólo se ocupa del fondo. De paso, mis
          propias pruebas pasan a renderizar lo mismo que ve la familia — que es justo lo que hoy
          falló: una maqueta que se ve distinta de la página real me hizo perseguir un fantasma. */
    color: var(--rotulo-color);   /* §KB.5 · 27/08 · un poco MAS lavado todavia: «para que el contraste siga ganando el dato» · el valor vive en `:root` desde §AYL ㉖ */
}

input, select, textarea, button {
    font-family: 'Rubik', Arial, sans-serif;
    font-size: 14px;
}

input, select, textarea {
    background-color: rgba(247, 247, 247, 0.75);
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
}

body.compacto input,
body.compacto select,
body.compacto textarea {
    background-color: #f7f7f7;
}

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 16px;
    width: 16px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>');
    background-size: 16px 16px;
    cursor: pointer;
    opacity: 1;
}

textarea {
    resize: none;
    height: 50px;
}

button {
    background-color: #25D366;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.45);
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 14px;
    cursor: pointer;
    width: 100%;
    margin-top: 15px;
}

button[disabled] {
    opacity: 0.6;
    cursor: wait;
}

/* ⛔ §ATY.2 · 22/09 · EL VERDE AGUA ES SÓLO DEL BOTÓN DE ENVIAR. Esta regla valía para TODOS los botones, y por ser
   «botón + dos estados» le ganaba a la regla propia de cada uno: al pasar el mouse, Compartir se llenaba de verde agua
   con el ícono oscuro encima, e «Info adicional» quedaba verde agua con letras verde oscuro que no se leían. Él lo vio
   con cuatro capturas. El único botón que usa este color a propósito es «Enviar a WhatsApp», que es el único sin clase
   propia: la regla vale sólo para ése, y cada uno de los demás vuelve a mandar con su propio color. */
button:not([class]):hover:enabled {
    background-color: #128C7E;
}

.form-body {
    margin-top: 8px;
}

.form-body-hidden {
    display: none;
}

.school-header-card {
    /* ⛔ §KB.2 · 27/08 · el ancla del botón a la Cartelera. Va en la esquina de LA PASTILLA, no en
       la del bloque del nombre — anclarlo al nombre es exactamente el error que §JZ.7 acaba de
       corregir del otro lado, donde el botón terminaba encima del texto. */
    position: relative;
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 12px;
    /* §AVU · los íconos casi pegados al borde de arriba (pedido suyo): la pastilla abre con 6 px y el aire de verdad
       queda abajo, donde está el nombre. Antes eran 10 arriba y 10 abajo y la fila de íconos «flotaba». */
    padding: 6px 12px 10px;
    margin-bottom: 10px;
    /* ⭐ §AVE · 22/09 · DOS PISOS: arriba los cuatro íconos, abajo el logo y el nombre con el ancho entero.
       Antes era UNA fila (§ATY.2) y en el teléfono al nombre le quedaban unos 150 px: se partía en tres renglones. */
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* §AVE · el primer piso · la lupa a la izquierda, los tres botones a la derecha, y entre medio el hueco donde se
   expande el buscador. `space-between` no alcanza: el hueco crece y es el que separa los dos grupos. */
.esc-top {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
}
/* ⭐ §AVQ · 22/09 · LA LUPA DESPLIEGA EL CUADRO HACIA LA DERECHA, CON EL MISMO EFECTO QUE «CARTELERA» ═══════════
   Él: *«el botón de búsqueda, a la izquierda arriba, y despliega hacia la derecha con efecto… como el de cartelera
   y más info… un efecto»*.
   ⭐ Y NO ES UN EFECTO NUEVO: son los mismos números que `.cartelera-btn` usa desde §QH para desplegar su palabra
      —`max-width` de 0 a todo, 0,3 s con la curva `.22,.61,.36,1`—. Un tercer tratamiento para lo mismo es lo que
      hace que una pantalla se vea improvisada; acá se copia el que él ya conoce, con el sentido invertido (crece
      hacia la derecha porque la lupa está anclada a la izquierda, y aquél crece hacia la izquierda).
   ⚠ En el teléfono no hay «pasar por encima»: ahí el toque abre la búsqueda de verdad y el cuadro se despliega
     igual, porque `body.buscando` entra por la misma puerta que el hover. */
.esc-busca-hueco {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 0;
    overflow: hidden;
}
/* ⛔⛔⛔ §AWC · 22/09 · AL ABRIRSE, EL RECORTE SE VA · él: «en el home es inteligente, dentro de la escuela se pone
   tonto». No era la búsqueda: la lista SÍ se armaba —medido, con sus resultados adentro— pero este hueco la recortaba,
   porque la lista cuelga por debajo del campo y el `overflow:hidden` que lo mantiene cerrado también le cortaba lo que
   sobresale. El buscador encontraba y nadie lo veía.
   ⚠ El recorte hace falta SÓLO mientras está cerrado (es lo que esconde el campo). Abierto, estorba. */
body.buscando .esc-busca-hueco { max-width: 100%; flex: 1 1 auto; overflow: visible; }
/* ⭐ §AVU · 22/09 · LA LUPA SOLA A LA IZQUIERDA · LOS TRES A LA DERECHA · él, después de que yo lo hiciera al revés:
   *«el ícono buscar a la izquierda… y los tres íconos a la derecha, todos de alto moderado y pegados casi a la línea
   superior, ocupando el renglón superior»*.
   ⚠ Y es la MISMA forma en la Cartelera: ahí los tres son compartir, descargar y la X. La consistencia entre las dos
     páginas es dictado suyo y se rompe sola en cuanto una se toca sin la otra. */
.esc-top > .escuela-cartelera { margin-left: auto; flex: 0 0 auto; }
/* ⛔ adentro del hueco manda el hueco, no el modo: si no, `display:none` lo tapa y no hay nada que desplegar */
body.compacto #escBuscaHueco > #buscadorFila { display: block; }
.esc-busca-hueco > .form-row-full { margin: 0; }
/* ⭐ §AVU · ALTO MODERADO · adentro de la fila de íconos el campo mide lo que miden ellos (28 px), no los 49 que
   mide en el inicio: si no, la fila de íconos crece a 49 y deja de ser una fila de íconos. Él lo pidió con esas
   palabras —«todos de alto moderado y pegados casi a la línea superior»—. */
.esc-busca-hueco .search input[type="search"] { height: 28px; padding-top: 0; padding-bottom: 0; font-size: 13px; }
/* ⭐ §AWK · 22/09 · LA X DE LIMPIAR, SIN CÍRCULO · él: *«la X de limpiar la barra de búsqueda debería ser sin el
   círculo para que no se note la desalineación que tiene»*. Y es el diagnóstico correcto, no un gusto: ese círculo
   va centrado en la altura del campo con un `translateY`, mientras los otros tres círculos de la fila se alinean
   solos por la fila. Un píxel de diferencia entre cuatro discos iguales se ve; sin disco, no hay nada que alinear.
   ⚠ Y sigue siendo el mismo botón, con su globito y su tamaño para el dedo: lo único que se va es el fondo. */
.esc-busca-hueco #btnBuscarCancelar {
    width: 22px; height: 22px;
    /* el radio también: sin fondo no se ve, pero un `:focus` o un `:active` que mañana le ponga color volvería a
       dibujar el disco que él pidió sacar. Se va la forma, no sólo el relleno. */
    border: 0; background: none; box-shadow: none; border-radius: 0;
}
.esc-busca-hueco #btnBuscarCancelar:hover { background: none; color: #143822; }
/* §AVZ.2 · acá había una excepción para «reducir movimiento»: se fue con la animación que la necesitaba */
/* ⭐ §AWO · 22/09 · LA PASTILLA TAMBIÉN ES UN BLOQUE CENTRADO · él, con el encabezado ya resuelto: *«falta además
   centrar como si fuese un bloque los dos renglones de título entre sí —J.I. Nº923 y Albert B. Sabin— y con el logo
   pegado al texto, centrarlo a la pastilla para que quede en el medio»*.
   Es el mismo criterio de §AWL un piso más abajo, y las dos mitades que lo rompían eran las mismas: el conjunto no
   se centraba, y el texto se estiraba para ocupar todo el resto (`flex: 1 1 auto`), que es lo que dejaba al logo
   contra el borde izquierdo y al nombre colgando de un costado.
   ⚠ El texto mantiene `min-width: 0` y puede encogerse: con un nombre largo el bloque llega al ancho disponible y
     ahí el encajador hace su trabajo igual que antes — se midió con el nombre más largo de las escuelas reales. */
.esc-id {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 0;
}
/* ⛔⛔⛔ §AVE.3 · 22/09 · ACÁ VIVÍA UNA MEDIA QUERY QUE EN LA COMPUTADORA VOLVÍA A UN SOLO RENGLÓN. SE FUE.
   Él lo dejó dicho sin lugar a dudas: *«los íconos, tanto en responsive como en PC —los de búsqueda, compartir,
   etc.— deben tener esa reserva de espacio superior, así todo lo demás sucede en el renglón por debajo de los
   íconos, así la información puede desarrollarse y no pisarse»*.
   ⛔ Yo había leído su pregunta anterior («en modo desktop los íconos ocupan menos proporcionalmente, ¿correcto?»)
      como un permiso para comprimir en pantalla grande. Era al revés: era la razón por la que ahí NO molesta
      reservarles su renglón. Una observación sobre el costo no es un pedido de optimizar.
   ⭐ Entonces la forma es UNA SOLA en todos los anchos: los íconos arriba, con su renglón propio, y todo lo demás
      debajo. Una forma sola es además una menos que mantener, y la que él ya aprendió en el teléfono. */

.form-card {
    background: #fff;
    border: 1px solid #ededed;
    border-radius: 12px;
    padding: 12px;
}
/* ⛔⛔ §AYL ⑳ · 26/09 noche · UNA SOLA SEPARACIÓN ENTRE LOS BLOQUES APILADOS. Él: *«eso tiene que quedar mínimamente
   separado con una separación constante. consistente»*. Medido pintado: escuela → alumno 10 px, alumno → pago 0 px (se
   tocaban: la pastilla del pago nació el 26/09 y nadie le dio aire), pago → botón 15 px (el `margin-top` genérico de todo
   botón). La medida es la que ya estaba: los 10 px de abajo de la tarjeta de la escuela. La e2e compara las tres reglas
   entre sí, así que no se mueve una sin las otras. */
.form-card + .form-card { margin-top: 10px; }
/* ⛔⛔⛔ §AYL 330 · 16/10 · «Siguiente» EN 3/4 Y «Mi pedido» EN EL CUARTO QUE QUEDA ────────────────────────────────
   Su dictado: *«el botón siguiente ocupe menos lugar, hacia la derecha… 3/4. Y un botón de ver mi pedido o algo así,
   o más breve, con un color apagado, que parezca desactivado»*.
   ⭐ LOS DOS CON EL MISMO ALTO Y EL MISMO BORDE: lo que cambia es el ancho y el color, nunca la forma. Es su §AQO.2
      («los elementos que se repiten deben quedar anclados siempre en la misma ubicación… pero los mismos FIJOS»).
   ⛔ Y «apagado» NO es `disabled`: el botón se toca siempre. Un botón que parece apagado y además no anda sería la
      herramienta que no cumple de la regla 13. Al tocarlo con datos de menos, pinta lo que falta — el mismo gesto que
      ya hace «+ Hermanos» con la hoja a medias. */
.fila-enviar { display: flex; gap: 8px; align-items: stretch; margin-top: 10px; }
.fila-enviar #submitButton { flex: 3 1 0; margin-top: 0; min-width: 0; }
#verPedidoBtn {
    flex: 1 1 0; min-width: 0; margin-top: 0;
    background-color: #e8ebe8; color: #5a645c;
    border: 1px solid #cfd6d0; border-radius: 8px;
    font-size: 15px; font-weight: 600; cursor: pointer;
    padding: 12px 8px; line-height: 1.2;
    box-shadow: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#verPedidoBtn:hover { background-color: #dfe4e0; color: #3d463f; }
#verPedidoBtn:active { background-color: #d6dbd7; }
#verPedidoBtn:focus-visible { outline: 2px solid #1f6b34; outline-offset: 2px; }
/* ⚠ En pantallas angostas el cuarto no alcanza para «Mi pedido»: ahí los dos pasan a mitad y mitad, que sigue
   respetando «el mismo tamaño» y no corta el rótulo (un botón cuyo texto no se lee pide un clic a ciegas). */
@media (max-width: 380px) {
    .fila-enviar #submitButton { flex: 1 1 0; }
    #verPedidoBtn { flex: 1 1 0; }
}
#submitButton { margin-top: 10px; }

.pacifico-font {
    font-family: 'Pacifico', 'Comic Sans MS', cursive;
}

.header-breadcrumb {
    margin-top: 0px;
    font-size: 18px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.3;
}

.breadcrumb-form {
    font-family: 'Rubik', Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.breadcrumb-form strong {
    font-weight: 400;
}

.breadcrumb-form em {
    font-style: normal;
}

.mi-breadcrumb {
    display: none;
}

body.compacto .title-container h1,
body.compacto .title-main,
body.compacto .header-breadcrumb,
body.compacto .breadcrumb-form {
    color: #fff;
}

/* ⚠ §AYL 261 ③ · 13/10 · LA MARQUESINA SE FUE DEL FORMULARIO Y ESTA HOJA SE QUEDA CON SUS REGLAS, A PROPÓSITO.
   El plazo pasó a ser un renglón quieto debajo del botón de enviar, que vive en el resumen (`.res-plazo`). Estas
   reglas NO son residuo: las sigue usando la COPIA CONGELADA del formulario publicado (`_ARCHIVO/tests/_publicado/`),
   que el arnés monta al lado del de hoy para comparar los dos con el mismo pedido. Se van el día que esa copia se
   renueve, no antes. */
.payment-notice {
    margin-top: 10px;
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    font-size: 13px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.marquee-content {
    display: inline-block;
    white-space: nowrap;
    animation: scroll-marquee 18s linear infinite;
}

/* 21/08 (operador): «la de la transferencia en un amarillo apagado, que contraste con el verde».
   Es la única ADVERTENCIA de la zona —si la transferencia no se hace en el día, el pedido se cae—
   así que tiene que separarse del resto. El amarillo la separa por TONO, no por brillo: contra el
   verde del fondo salta sola sin necesidad de gritar en blanco puro.
   Apagado a propósito (#e3c574 y no un amarillo de alarma): avisa, no asusta. */
.payment-notice .text {
    display: inline-block;
    white-space: nowrap;
    color: #e3c574;
    vertical-align: middle;
}

.underline-text {
    text-decoration: underline;
}

.payment-notice .spacer {
    display: inline-block;
    width: 30px;
    min-width: 30px;
    vertical-align: middle;
}

@keyframes scroll-marquee {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(calc(-100% / 3));
    }
}

.footer {
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pd-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

/* ══ §KC.6 · 27/08 · EL CIERRE CON LOGO ES REGLA DE TODO EL SITIO ══════════════════════════════
   Él: *«TODAS LAS PÁGINAS DEL SITIO TIENEN EL CIERRE CON LOGO. TODAS. Y TODAS DEBEN SEGUIR
   TENIÉNDOLO, IGUAL QUE EL ADMIN TAMBIÉN. ESO ES REGLA.»*

   ⛔ LA PLACA OSCURA NO ES DECORACIÓN, ES LO QUE HACE QUE EL LOGO EXISTA. Medido: la tinta del
      archivo promedia rgb(222,210,180) → luminancia 210; el fondo del pie (#d1d9d1) da 215.
      Cuatro puntos de diferencia sobre 255 — por eso él lo había sacado en agosto diciendo que
      «está oculto o de difícil lectura». Tenía razón, y no era el logo: era el fondo.
   ⭐ Se le da el fondo para el que está diseñado —el verde de la casa— en vez de retocarle el
      color al logo, que sería modificar una marca para tapar un error de montaje.
   ⛔ PROPORCIÓN SAGRADA: ancho fijo y `height:auto`. Nunca los dos juntos. */
/* ⛔ ACÁ HUBO UNA PLACA VERDE DETRÁS DEL LOGO Y LA SAQUÉ EN EL ACTO (27/08).
   Él pidió que volviera el logo, y yo le agregué un elemento que nunca pidió: un rectángulo verde
   de fondo, justificado con una medición de contraste que hice por mi cuenta. Su reacción fue
   inmediata: *«¿¿¿¿qué?! ¿¿placa verde?!! noooo»*.
   ⛔⛔ EL ERROR NO FUE EL COLOR, FUE EL PERMISO. Medir el contraste estuvo bien; convertir esa
      medición en una decisión de diseño y entregarla como si fuera parte del pedido, no. El logo
      del admin lleva meses así y a él le parece bien — o sea que la vara de «se lee» ya estaba
      fijada, y no era la mía. Si algo no se lee, se DICE y él decide; no se rediseña de prepo.
   El logo va como en el admin: su ancho, alto automático, y nada más. */
.logo-pd-caja { display: inline-flex; margin-bottom: 6px; }
.logo-pd {
    width: 90px;
    height: auto;      /* ⛔ PROPORCIÓN SAGRADA · nunca width y height juntos */
    display: block;
}

.company-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pd-brand {
    font-size: 13px;
    font-weight: 500;
    color: #36344D;
}

.company-info p {
    font-size: 11px;
    color: #727586;
    margin: 1px 0;
}

.loc {
    font-weight: 500;
}

@media (max-width: 768px) {
    h1 {
        font-size: 22px;
    }
    h2 {
        font-size: 16.2px;
    }
    .payment-notice {
        font-size: 14px;
    }
    .marquee-content {
        animation-duration: 22s;
    }
}

input::placeholder,
textarea::placeholder {
    color: #4b5563;
    font-size: 14px;
}

@media (max-width: 768px) {
    input,
    textarea {
        font-size: 14px;
    }
}

.form-row-full {
    width: 100%;
}

.pago-cuotas-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 10px;
}

.pago-cuotas-container input[type="checkbox"] {
    width: auto;
    margin-right: 8px;
    margin-bottom: 0;
}

.pago-cuotas-label {
    font-weight: normal;
    margin-bottom: 0;
    font-size: 0.9em;
    font-style: italic;
}

.total-amount {
    margin-bottom: 5px;
}

.sena-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
}

/* Aclaraciones: más compacta y discreta */
.obs-label {
    display: block;
    font-weight: normal;
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 4px;
}

textarea.obs-mini {
    /* §AYL ㉓ · como bloque: en línea dejaba 7 px de hueco debajo (el lugar de las patas de las letras), medido al pie de
       la pastilla del alumno, que ahora termina en Observaciones */
    display: block;
    width: 100%;
    height: 41px;
    min-height: 41px;
    resize: vertical;
    font-size: 14px;
    padding: 10px;
    line-height: 1.2;
    white-space: nowrap;
    overflow-x: hidden;
}

textarea.obs-mini:focus {
    height: 62px;
    white-space: pre-wrap;
    overflow-x: auto;
}

/* Cartel neutro de opciones de pago (glosario 1, en vivo) */
.obs-pago-hint {
    margin-top: 6px;
    padding: 7px 10px;
    background: #fff8e1;
    border: 1px solid #f0d878;
    border-radius: 8px;
    font-size: 12px;
    color: #7a5c00;
    line-height: 1.3;
}

.sena-label {
    margin-right: 10px;
    white-space: nowrap;
    margin-bottom: 0;
    font-size: 1em;
    font-weight: normal;
}

.sena-cuota-num {
    font-weight: normal;
}

/* §AYL ㉜ · con «Casos esp.» y cuotas juntas los rótulos son largos («Primer Pago $ARS:»): en un teléfono chico se
   parten en dos renglones en vez de salirse por la izquierda de la tarjeta (medido a 360 px, se salía). El cuadro
   conserva su ancho. */
.sena-container.sena-dos > .sena-label { white-space: normal; min-width: 0; flex: 0 1 auto; text-align: right; line-height: 1.2; }
.sena-container.sena-dos > .sena-input { flex: 0 0 auto; }

.excep-obs-hint {
    margin-left: 24px;
}
/* ⛔⛔ §AYL 128 ④ ⑦ · LAS AYUDAS LLEVAN SU CRUZ Y, LAS DE LAS CASILLAS, LA SALIDA QUE LAS RESUELVE · la cruz va arriba a la
   derecha (`.fe-x`, la de todo lo que avisa) y el texto le deja su lugar · «Ir a Observaciones» es un botón chico, del color
   de la ayuda, debajo del texto. */
.obs-pago-hint { position: relative; padding-right: 38px; }
.obs-pago-hint button.fe-x { top: 4px; right: 4px; width: 26px !important; height: 26px; background: #fdf0c4 !important; color: #7a5c00 !important; }
.obs-pago-hint button.obs-ir {
    display: inline-flex; align-items: center; width: auto !important; margin: 6px 0 0 !important; padding: 4px 10px;
    min-height: 0; border-radius: 999px; border: 1px solid #e6c766; background: #fff !important; color: #7a5c00 !important;
    box-shadow: none !important; font-size: 12px; font-weight: 600; cursor: pointer;
}
.obs-pago-hint button.obs-ir:hover { background: #fdf6dc !important; }
.obs-pago-hint > span { display: block; }
/* §AYL 128 ⑥ · la lista de escuelas que no llegó: el mismo recuadro de ayuda, debajo del buscador, con su salida */
.aviso-lista { margin: 8px 0 0; }
/* §AYL 128 ⑦ · el aviso del pie de los hermanos y el renglón de debajo de Enviar, con su cruz */
#hermanosAviso, #reintentoHint { position: relative; padding-right: 38px !important; }
#hermanosAviso button.fe-x, #reintentoHint button.fe-x { top: 50%; transform: translateY(-50%); right: 4px; width: 26px !important; height: 26px; }
/* §AYL 135 ① · «Mandarlo por WhatsApp», en el aviso de la vuelta: el botón de los avisos del formulario (.wv-btn), en su renglón */
/* ⛔ §AYL 364 · 18/10 · `.reintento-wa` ENTRA ACÁ, Y ESE ERA EL DEFECTO DE LA CAPTURA · el botón «Mandarlo por WhatsApp»
   llevaba una clase que NO tenía ninguna regla, así que quedaba en línea con el texto y lo partía al medio («…de pago.»
   a la izquierda del botón). El de reintento sí la tenía. Una sola regla para los dos: el botón abajo, en su renglón. */
#reintentoHint .reintento-btn, #reintentoHint .reintento-wa { display: flex; flex: none; width: auto; margin: 8px auto 2px; font-size: 13.5px; padding: 9px 14px; }
/* §AYL 135 ⑤ · el «escribinos por WhatsApp» de un rechazo: del color del aviso y subrayado, no el azul del navegador (se vio pintado) */
#reintentoHint a { color: inherit; font-weight: 600; text-decoration: underline; }
/* 06/10 · «escribinos por WhatsApp» medía 158 × 15 px (mirar.ps1 -Medir): un renglón de texto, más chico que un dedo, y es la
   única salida cuando el pedido se rechaza. El relleno de arriba y abajo agranda lo que se toca; en un texto en línea no
   mueve el renglón (la receta del admin, §AXC) */
.fe-escribinos { padding: 4px 0; }
/* §AYL 128 ④ · el lugar donde hay que escribir la aclaración: amarillo apagado y contorneado, mientras no alcance */
#observaciones.pide-aclaracion {
    background-color: #fffbea !important; border-color: #d9a514 !important;
    box-shadow: 0 0 0 2px rgba(217, 165, 20, .22) !important;
}

.sena-input {
    background-color: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    font-size: 14px;
    flex-grow: 0;
    width: 120px;
    text-align: right;
    margin-bottom: 0;
}

/* WhatsApp (solo con Cuotas) */
/* ── WHATSAPP · LA MISMA CAJA QUE «TITULAR», CON EL ÍCONO ADENTRO (21/08, operador) ─────────────
   Antes esto era un `flex` con el ícono como HERMANO del input: el ícono quedaba FUERA de la caja
   y el input, al ser `flex:1`, arrancaba corrido. Encima pisaba el estilo canónico —`border-radius`
   de 4px contra los 8px de todos los demás, y otro fondo—, así que al lado de «Titular de la
   cuenta» se veía como otro componente.
   ⛔ AHORA NO PISA NADA: el input hereda la regla general de `input, select, textarea` (fondo,
   borde, radio 8px, padding 10px y `margin-bottom:10px`), que es exactamente lo que hace que la
   modulación coincida con la de Titular. Lo único propio es el hueco para el ícono. */
.wsp-container {
    position: relative;
    width: 100%;
}

/* El ícono se apoya sobre la CAJA, no sobre el contenedor: por eso `bottom` vale 10px, que es el
   `margin-bottom` del input. Sin eso quedaría 5px más abajo del centro y se notaría. */
.wsp-label {
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 10px;
    display: flex;
    align-items: center;
    margin: 0;
    pointer-events: none;   /* el click cae en el input, no en el ícono */
}

/* ⛔ EL ÍCONO VA DEL COLOR DEL TEXTO, no del verde de WhatsApp (21/08, operador). Adentro de la
   caja, un verde de marca compite con el texto que tiene al lado y convierte un dato del formulario
   en un logo. `#4b5563` es el MISMO valor que `input::placeholder` de acá arriba: si algún día
   cambia el color del texto, este renglón hay que cambiarlo con él.
   Y el 65% es del operador: al mismo tono que el texto, el logo pesaba más que la palabra que tiene
   al lado. Va con `opacity` y no con un gris más claro escrito a mano, a propósito: así queda atado
   al color del texto en vez de ser un segundo valor que alguien tenga que acordarse de cambiar. */
.wsp-icon {
    width: 20px;
    height: 20px;
    fill: #4b5563;
    opacity: .65;
    display: block;
}

/* Sólo el hueco del ícono. Todo lo demás lo pone la regla canónica de arriba. */
.wsp-input {
    padding-left: 38px;
}

/* ⭐ §ATY · 22/09 · EL ÍCONO ADENTRO DEL CUADRO, COMO EL DE WHATSAPP · Carpetas, Copias, Titular y Observaciones. Él:
   *«buscando simplificarle a las familias, que leen poco… donde dice carpetas, el ícono de carpetas como en el
   afiche; donde dice copias, el de copias; en Titular, uno de identificación o carnet»* y, para Observaciones, el globo
   con tres puntitos. Eligió «adentro, a la izquierda», que es la forma que el formulario ya tenía en WhatsApp: son las
   MISMAS medidas y el mismo gris al 65 % (ver el renglón del ícono de WhatsApp, arriba). Clases propias y no las de
   WhatsApp, porque el script busca esas por nombre para su lógica del número. */
.ico-caja { position: relative; }
.ico-lbl {
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 10px;                      /* el margen de abajo del cuadro, igual que el de WhatsApp */
    display: flex;
    align-items: center;
    margin: 0;
    pointer-events: none;              /* el toque cae en el cuadro, no en el dibujo */
}
.ico-caja.ico-arriba .ico-lbl { bottom: auto; top: 10px; height: 20px; }   /* Observaciones puede crecer: arriba */
.ico-svg {
    width: 20px;
    height: 20px;
    fill: #4b5563;
    opacity: .65;
    display: block;
}
.ico-caja > input,
.ico-caja > textarea { padding-left: 38px; }
/* §AYL ㊻ · el desplegable de Nivel del hermano lleva su dibujo como los demás campos · con menos sangría que un
   input, porque comparte renglón con Curso y Turno y el rótulo («Secundario») tiene que entrar entero */
.ico-caja > select { padding-left: 28px; padding-right: 4px; }
.ico-caja > select + .ico-lbl, .ico-caja .ico-lbl .ico-svg { width: 17px; height: 17px; }
.ico-caja.hno-nivcaja .ico-lbl { left: 7px; }
.ico-caja > select + .ico-lbl, .ico-caja > .ico-lbl { z-index: 1; }

/* ⭐ §ATY · 22/09 · LA INFORMACIÓN NO SOBRA · el texto de ayuda va ENTERO y se encaja. Él: *«es importante que aparezca…
   y se autoencaje… estamos armando una página para dummies, la información no sobra»*.
   · Carpetas y Copias: cada cuadro necesita unos 170 px para que «Copias Extras» entre entero al lado del ícono y de la
     «i». Si el renglón no da para los dos (un teléfono de 360 o 375), la fila los pone uno debajo del otro, sola, sin
     un corte de pantalla escrito a mano: se decide por el lugar que hay, no por el nombre del aparato.
   · Observaciones: la letra del texto de ayuda se achica hasta un piso legible y, si ni así entra, el cuadro muestra
     dos renglones mientras está vacío. Lo decide el script (el texto cambia según el modo de pago), acá sólo se aplica. */
/* ⛔⛔ §AYL ㉔ · 26/09 noche · LO DE ARRIBA CAMBIÓ POR DICTADO SUYO, en cuatro mensajes: *«pedido carpeta y copia deberían
   compartir renglón para completar»* · *«son 2 caracteres por cuadro… nadie pide más de 4 carpetas ni más de 10 copias»* ·
   *«Carpetas Copias no es tan grande»* · *«homologá y extrapolá el tamaño a todos los espacios… que haya consistencia
   visual»*.
   · Carpetas y Copias comparten renglón SIEMPRE, y los cuadros dicen «Carpetas» y «Copias» (la ⓘ explica la copia extra).
   · TODOS los textos de ayuda van a UNA letra, la de `input::placeholder` / `textarea::placeholder`: ninguno se achica
     por su cuenta. Observaciones, que era el único que lo hacía, ahora usa su segundo renglón (`ph-2`) a la misma letra.
   Medido con la vista (`?geo=1`): texto contra lugar, a 390, 360 y 320 px. */
.fila-pedido { flex-wrap: nowrap; }
.fila-pedido > .campo-info { flex: 1 1 0; min-width: 0; }
/* §AYL ㉔ · la ficha del hermano no lleva la ⓘ (su globo hablaría del nivel del primero): el lugar que se le reserva a la
   derecha vuelve al texto. */
.hno-fila .campo-info input[type="number"] { padding-right: 10px; }
textarea.obs-mini.ph-2 { height: 58px; white-space: pre-wrap; }

.partic-container {
    margin-bottom: 4px;
    display: flex;
    justify-content: flex-start;
}

.partic-checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.lema-wrap {
    margin-top: 10px;
    text-align: center;
}

/* 21/08 (operador): «el resto en normal cursiva centrado como la otra frase, sin mucho peso visual,
   pero legible». Toda la frase va en cursiva; las dos puntas llevan el <strong>. La opacidad baja
   el peso SIN tocar el tamaño ni el color: achicar la haría menos legible, que es justo lo que él
   pidió evitar. El interlineado se abre porque ahora son dos o tres renglones, no uno. */
/* 21/08 (operador): «la frase en un verde pálido, casi blanco… que no tengan todas el mismo peso
   visual, pero que sean legibles». Era blanco PURO, igual que el aviso de la transferencia, y por
   eso los dos pesaban lo mismo. Éste es el renglón más liviano de la zona: no pide nada, explica.
   El verde pálido lo baja del blanco sin sacarlo del alcance de la vista. */
.lema {
    font-size: 13px;
    color: #cfe0d3;
    font-style: italic;
    line-height: 1.5;
    /* .82 y no .9: medido, con .9 el lema daba 7,9:1 contra el 7,7:1 del aviso de la transferencia
       —o sea que el renglón que sólo explica pesaba MÁS que la única advertencia de la zona—. Con
       .82 baja a ~6,5:1: escalón visible, y sigue muy por encima del piso legible de 4,5:1. */
    opacity: .82;
    max-width: 34em;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;   /* que los renglones queden parejos y no uno huérfano */
}

/* 16px y no 12: es la separación que lo despega del lema. Con 12 quedaba pegado y se leía como un
   tercer renglón de la misma frase, que es exactamente lo que lo hacía desaparecer. */
.faq-wrap {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── §GZ.2 · «PREGUNTAS FRECUENTES» · 21/08 (operador) ───────────────────────────────────────────
   *«prefiero sin contorno, solo la separación, compartiendo paleta y manteniendo los colores…
   para despegar»*.

   ⛔ EL PROBLEMA NO ERA EL CONTRASTE, Y CONVIENE QUE QUEDE ESCRITO. Era blanco puro sobre el verde:
   13:1, el texto de MÁS contraste de toda esa zona —más que el aviso de la transferencia (7,7) y
   que el lema (6,9)— y aun así se perdía. Lo que le faltaba era PARECER TOCABLE: un `<a>` con
   `text-decoration:none` cuya única señal era un `:hover`… y en un teléfono no hay hover, que es
   donde se usa este formulario. Subirle el brillo no habría arreglado nada porque ya estaba al
   máximo. Lo que lo arregla es la FORMA.

   Sin contorno, como se pidió: despega por el bloque. El fondo es un blanco translúcido y no un
   verde nuevo, a propósito — así comparte la paleta POR CONSTRUCCIÓN y no queda un segundo verde
   que alguien tenga que acordarse de sincronizar el día que cambie el del contenedor. */
/* 21/08 (operador): «la caja debería tener el mismo ancho que WhatsApp». Es el ancho del BOTÓN
   «Enviar a WhatsApp» (440), no el del campo de WhatsApp (414): el botón está en esta misma columna
   —los dos cuelgan del contenedor— y el campo vive adentro de la tarjeta blanca, que es otro bloque.
   Con esto la zona queda en una sola columna: botón · aviso · lema · pastilla. */
.faq-link {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .07);
    border: none;
    border-radius: 999px;
    padding: 10px 14px;        /* el MISMO que #submitButton */
    line-height: normal;       /* ⛔ y ESTO es lo que faltaba para el mismo alto */
    box-sizing: border-box;
    /* ⛔ EL ALTO NO LO DABA EL PADDING, LO DABA EL INTERLINEADO HEREDADO. Con el mismo padding que
       el botón la pastilla salía 42 y no 37: un <a> hereda el `line-height: 1.6` del cuerpo (22,4px)
       y un <button> no —el navegador le pone `normal` (~17)—. Cinco píxeles que no estaban en
       ninguna de las dos reglas que yo miraba. Primero culpé a la burbuja del «?» y la achiqué;
       no era. Medir el renglón, y no suponerlo, fue lo que lo encontró. */
    /* Nota: 37 px queda por debajo de los ~44 que se recomiendan para un dedo. Se acepta porque es
       el alto que YA tiene el botón principal —o sea el del formulario entero— y porque el área
       real es de 440 × 37: una barra ancha se acierta sin problema, a diferencia del «?» de 22 px
       que había antes. Si algún día sube el alto del botón, éste lo sigue solo. */
    box-shadow: none;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    transition: background .15s ease;
}

.faq-link:hover,
.faq-link:focus-visible {
    background: rgba(255, 255, 255, .13);
    text-decoration: none;
}

/* ⛔ 16 Y NO 22, y el motivo es de altura, no de gusto: con 22 px la burbuja era MÁS ALTA que la
   línea de texto (17) y pasaba a mandar ella el alto de la pastilla — 42 px contra los 37 del
   botón—. Con 16 vuelve a mandar el padding, que es el mismo que el del botón, y el alto lo sigue
   solo el día que el botón cambie. */
.faq-icon {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    border: none;
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    font-size: 11px;
    line-height: 1;
}

.faq-icon:hover {
    filter: brightness(.95);
}

/* ⭐ §ATY.2 · 22/09 · LA TARJETA DE LA ESCUELA EN UN RENGLÓN · logo a la izquierda, nombre a la derecha. Él: *«que quede
   el logo a un lado y el texto a la derecha… para comprimir más el espacio, y se vea más parecido al admin…
   comprimido»*. Ocupaba unos 170 px de alto (logo de 104 arriba, nombre abajo) y ahora unos 76: el formulario sube.
   ⛔ PROPORCIÓN SAGRADA: el logo lleva sólo topes (alto y ancho máximos) y las dos medidas en automático, así que se
      achica entero y nunca se deforma. Los botones de Cartelera y compartir siguen anclados a la esquina de la tarjeta;
      el nombre les deja su lugar a la derecha. La tarjeta en fila vive en su regla, más arriba. */
.escuela-logo-top-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-bottom: 0;
}

.escuela-logo-top {
    max-height: 56px;
    max-width: 84px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* §AWO · los dos renglones del nombre, centrados entre sí · y sin estirarse, para que el logo quede pegado a ellos */
.escuela-nombre-wrap {
    text-align: center;
    flex: 0 1 auto;
    min-width: 0;
}
/* ⛔ §AVE · 22/09 · ACÁ VIVÍA LA RESERVA DE 100 px que el primer renglón del nombre le dejaba a los tres botones de la
   derecha. Ya no hace falta y por eso se fue: los botones subieron al primer piso (`.esc-top`), así que el nombre usa
   el ancho entero de la tarjeta desde el primer renglón. Era la mitad de los 150 px que le quedaban en el teléfono.
   ⚠ El script tenía la misma reserva copiada para encajar el tamaño del primer renglón (NOM_RESERVA): ahí también es 0.
     Una medida que vive en dos lados y cambia en uno es la causa raíz que más veces mordió en este proyecto. */
.escuela-nombre.dos .nom-1 { display: block; font-weight: 700; }
.escuela-nombre.dos .nom-2 { display: block; font-weight: 500; font-size: 13px; color: #555; margin-top: 2px; }   /* §ATZ · el de menor peso */

/* §AVV · el título principal por encima de los de sección (medido: los `h2` están en 16,2 px). El encaje lo baja
   solo si el nombre no entra, pero nunca por debajo de 13: ahí volvería a perder contra los títulos de abajo. */
/* ⛔ §AWX.2 · `display:block`: es un <strong>, y un elemento en línea informa ancho visible CERO — el encaje medía
   «0 de 0, entra» y el nombre sin barra se quedaba en 28 px partido en dos renglones. Como bloque mide lo que ocupa */
.escuela-nombre {
    display: block;
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: #000;
}

/* §AVE · el grupo de botones vive en el primer piso, así que no lleva el margen de arriba que usa en otros lados */
.esc-top > .escuela-cartelera { margin-top: 0; }   /* §AVU · el que lo manda a la derecha vive arriba, con su bloque */

.escuela-meta {
    display: none;
    font-size: 12px;
    color: #444;
    margin-top: 2px;
}

.escuela-cartelera {
    margin-top: 6px;
    font-size: 11px;
    color: #444;
}

.escuela-cartelera a {
    color: inherit;
    text-decoration: none;
}

/* ⛔ §JZ.8 · 27/08 · EL BOTÓN A LA CARTELERA.
   Tiene que PARECER un botón, no un texto con link: tag propio, forma propia y estado propio al
   tocarlo. La máxima del proyecto es al revés y vale igual —«sacar el onclick no alcanza si sigue
   siendo el mismo tag que un botón real»—: acá hace falta lo contrario, que se vea como lo que es.
   Ancho por contenido y centrado: en el celular ocupa lo justo y no parte el bloque del nombre. */
/* ⛔ §KB.2 · 27/08 · A LA ESQUINA, Y CON LA FORMA DE LOS DE LA CARTELERA.
   Él: *«el botón de pagos a fotoesc debe ser igual al botón de compartir, símbolo calendario,
   legible, borde derecho superior de la pastilla (igual que los botones de compartir de fotoesc)»*.
   Ayer lo puse DEBAJO del nombre y con la palabra «Cartelera Virtual» al lado: ocupaba un renglón
   entero y no se parecía a nada del resto del sistema.
   ⛔ Las medidas NO son inventadas: son las de `.share-btn` / `.download-btn` de la Cartelera —28 px,
      redondo, borde `#e2e2e2`, fondo `#f7f7f7`— porque son la MISMA pieza en las dos páginas que la
      familia ve en el mismo trámite. Inventar un tamaño propio acá sería un tercer tratamiento para
      lo mismo, que es la causa raíz que más veces mordió en este proyecto.
   ⚠️ Y «legible» es una condición, no un adorno: el ícono va a 16 px con trazo de 1,7 — el mismo peso
      que el de compartir. A menos que eso, un calendario a esta escala se lee como una mancha. */
/* ⛔⛔⛔ §QH · 29/08 · «EL ÍCONO DE CALENDARIO QUEDA PERDIDO» ═══════════════════════════════════════
   Él, mirando el formulario que ve la familia: *«quizás debería tener un poco de color para atraer
   un poco la atención… y cuando pasás por encima, o tocás en el celu, que despliegue hacia la
   izquierda con animación la palabra Cartelera. Y que tenga color, en la gama de los colores de la
   página. Y junto a él, apagado o normal, a la derecha, el ícono de compartir.»*
   ⛔ Y el diagnóstico es correcto: gris sobre blanco, 28 px, sin texto, en un rincón. Para la
      familia que entra por el QR ese botón **no es un atajo: es el ÚNICO acceso** a las fechas, los
      plazos y los avisos —nunca pasa por la Cartelera—. Un acceso único que no se ve es un acceso
      que no existe.
   ⭐ EL COLOR SALE DE LA PÁGINA, no de mi gusto: `#143822` es el verde del encabezado y el mismo que
      ya usaba el foco de teclado de este botón. Es el único acento fuerte que la familia ve, así que
      poner ahí el que ya está es lo que lo hace leerse como parte de la página y no como un pegote.
   ⭐ Y SE DESPLIEGA HACIA LA IZQUIERDA POR CONSTRUCCIÓN, sin una sola cuenta de píxeles: el grupo
      está anclado por la DERECHA (`right:10px`, sin `left`), así que cuando la pastilla crece, su
      borde derecho no se mueve y el ancho se gana hacia el otro lado. Y el de compartir, que va
      después, se queda quieto.
   ⚠ El de compartir queda «normal» —gris, como estaba el calendario— y a propósito: si los dos
     gritan, no grita ninguno. El color es para el que la familia tiene que encontrar. */
/* ⭐ §AVE · 22/09 · EN EL FLUJO, NO FLOTANDO. Estaba anclado con `absolute` a la esquina de la pastilla, y por eso el
   nombre tenía que reservarle 100 px de su primer renglón. Ahora es el grupo derecho del primer piso: empuja para abajo
   el logo y el nombre —que es lo que él pidió— y no le roba ancho a nadie. El despliegue de la palabra «Cartelera» hacia
   la izquierda sigue funcionando por construcción: el grupo se alinea a la derecha y crece hacia el otro lado. */
.esc-acc {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: auto;
}
/* ⭐ §AVE.2 · 22/09 · BUSCANDO, LA FILA ENTERA ES DEL CAMPO. Él, mirando la búsqueda abierta: *«oculta todo el renglón
   de iconos cuando se despliega el de búsqueda»*. Primero se habían apartado sólo los tres de la derecha y quedaba la
   lupa a la izquierda, comiéndole 34 px al campo y encendida para indicar un modo que el propio campo ya grita.
   ⚠ La salida no se pierde: es la X del buscador (§AUV), que vive adentro del campo y no se va con el formulario. */
/* ⛔⛔⛔ §AVZ · 22/09 · ACÁ TAMBIÉN SE FUE EL DESPLIEGUE AL PASAR POR ENCIMA. Él: *«en Cartelera no funciona ningún
   botón, desaparecen»* · *«la animación no funciona, la omitimos»*. Yo había escrito que al pasar el mouse por la
   fila se escondieran los otros íconos para hacerle lugar al campo: o sea que **el gesto de ir hacia un botón lo
   hacía desaparecer antes de llegar**. En el teléfono no se nota —no hay «pasar por encima»—, en la computadora la
   fila quedaba inutilizable. Un control que se esconde cuando te acercás es peor que uno que no está.
   ⭐ Queda sólo el modo búsqueda, que enciende su clic y nada más. */
body.buscando .esc-top > *:not(.esc-busca-hueco) { display: none; }
/* ⛔⛔ §QK · 29/08 · CORREGIDO POR ÉL, Y TENÍA RAZÓN EN LAS TRES ─────────────────────────────────
   Mi primera versión pintó el calendario de verde LLENO, con sombra propia, más alto que el de
   compartir. Él: *«los dos botones deben tener el mismo tamaño · el compartir gris como hasta
   ahora · el de Cartelera quizás verde PERO CON LÍNEAS VERDES».*
   ⛔ Un disco verde macizo con sombra no era «un poco de color»: era una pieza nueva, con otro peso
      y otra altura, al lado de una que ya existía. Dos tratamientos para dos botones que están
      pegados es exactamente lo que hace que una pantalla se vea improvisada.
   ⭐ Mismo fondo, mismo tamaño, misma forma que el de compartir. Lo único que cambia es el TRAZO:
      el borde y el ícono en el verde de la página. Es el mínimo que hace que se encuentre sin
      convertirlo en otra cosa. */
.cartelera-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 28px;
    padding: 0;
    border: 1px solid #143822;
    border-radius: 999px;
    background: #f7f7f7;
    color: #143822 !important;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease, padding .3s cubic-bezier(.22,.61,.36,1);
}
.cartelera-btn:hover,
.cartelera-btn:focus-visible,
.cartelera-btn.abierto {
    background: #eef4ea;
}
/* al desplegarse gana aire a los costados · sin esto la palabra queda pegada al borde */
.cartelera-btn:hover,
.cartelera-btn:focus-visible,
.cartelera-btn.abierto { padding: 0 4px 0 10px; }
/* la palabra, que nace sin ancho y la gana · va ANTES del ícono, así se lee «Cartelera 📅» */
.cartelera-txt {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    margin-right: 0;
    transition: max-width .3s cubic-bezier(.22,.61,.36,1),
                opacity .22s ease,
                margin-right .3s cubic-bezier(.22,.61,.36,1);
}
.cartelera-btn:hover .cartelera-txt,
.cartelera-btn:focus-visible .cartelera-txt,
.cartelera-btn.abierto .cartelera-txt {
    max-width: 110px;
    opacity: 1;
    margin-right: 5px;
    margin-left: 4px;
}
/* ⚠ Y SI PIDIÓ NO MOVER LA PANTALLA, NO SE MUEVE. Una familia puede tener el sistema en «reducir
   movimiento» por mareo o por epilepsia fotosensible: ahí la palabra aparece y desaparece, sin
   deslizarse. La información no se pierde; lo que se saca es el desplazamiento. */
@media (prefers-reduced-motion: reduce) {
    .cartelera-txt { transition: none; }
    .cartelera-btn { transition: none; }
}
/* ⛔ EL DE COMPARTIR: la misma forma de siempre, y en gris · «apagado o normal», dijo él.
   Son las medidas de `.share-btn` de la Cartelera —28 px, redondo, borde tenue— porque es la MISMA
   pieza en las dos páginas que la familia ve en el mismo trámite. */
/* ⛔⛔ §QK · «EL BOTÓN COMPARTIR CON LA EXACTA MISMA E IDÉNTICA DINÁMICA DE LOS DEMÁS BOTONES EN
   CARTELERA, Y EN OTROS LADOS DE LA PÁGINA.» Así que no se escribe uno nuevo: se copian TAL CUAL
   las reglas de `.share-btn` de `hosting_fotoesc/styles.css` —28 px, `#f7f7f7`, borde `#e2e2e2`,
   trazo `#555`, hover `#efefef`—. Es la misma pieza en las dos páginas que la familia ve en el
   mismo trámite; inventar un tercer tratamiento acá es la causa raíz que más veces mordió en este
   proyecto. Y abajo, el MENÚ es el mismo también. */
/* ⛔⛔ §QM · 29/08 · EL HALO VERDE QUE YO NO PUSE ────────────────────────────────────────────
   La captura lo mostró: el botón de compartir salía con un resplandor verde alrededor. No
   estaba en mi regla — lo heredaba de `button` de la línea 196, que en esta página es el botón
   de WhatsApp: fondo #25D366 y una sombra verde de diez píxeles. Mi regla pisaba el fondo y el
   borde, y se olvidó de la SOMBRA, que no se hereda: sigue puesta porque nadie la apagó.
   ⚠ Es el mismo descuido de siempre con otra cara: pisar una parte de una regla ajena y creer
     que se pisó entera. Acá se apagan las CUATRO cosas que el botón de WhatsApp impone —fondo,
     sombra, relleno y tipografía— para que este botón sea de verdad el de la Cartelera.
   ⭐ Y sólo se ve MIRANDO: ninguna suite puede notar una sombra de más. */
.share-btn {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    box-shadow: none;
    font-size: 0;
    /* ⛔⛔⛔ §QS · 29/08 · «ESE DESFASAJE ES UNA ABERRACIÓN» · y era `margin-top: 15px` ─────────────
       Él mandó la captura ampliada: el calendario 7,5 px más arriba que el compartir. Los dos miden
       28×28 y están en una fila con `align-items:center`, así que no había explicación posible… en
       lo que yo estaba mirando.
       ⭐ NO LO DEDUJE: LO MEDÍ. La vista de pagos ahora imprime el rectángulo y los estilos
          calculados de los dos botones, y el número apareció solo: `cal: m0px | sh: m15px`. La regla
          global `button` de esta página —el botón de WhatsApp— trae `margin-top: 15px`, y el centro
          se corre justo la mitad: 7,5.
       ⛔ Es la SEGUNDA propiedad de esa misma regla que se me pasó en el día. La primera fue la
          sombra verde. Pisar una regla ajena obliga a mirarla ENTERA, no la línea que a uno le
          molesta — y las dos veces la respuesta estaba en el mismo lugar.
       ⚠ Y la medición queda puesta en la vista, con su tilde y su cruz: si algún día se vuelven a
         desalinear, la captura lo va a decir con dos cifras en vez de con una impresión. */
    margin: 0;
    border-radius: 50%;
    border: 1px solid #e2e2e2;
    background: #f7f7f7;
    color: #444;
    cursor: pointer;
}
/* el tilde del copiado hereda el verde · el trazo del svg estaba fijo en #555 y lo ignoraba */
/* §ATY.3 · la lupa y la X de la tarjeta son la MISMA pieza que compartir: redondas, 28 px, borde tenue */
.esc-redondo {
    display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; box-shadow: none; font-size: 0;
    margin: 0; border-radius: 50%; border: 1px solid #e2e2e2; background: #f7f7f7; color: #444; cursor: pointer;
    flex: 0 0 auto;
}
.esc-redondo:hover { background: #efefef; }
.esc-redondo:focus-visible { outline: 2px solid #143822; outline-offset: 2px; }
.esc-redondo svg { width: 16px; height: 16px; fill: none; stroke: #555; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
body.buscando .esc-lupa { background: #eef4ea; border-color: #143822; }
body.buscando .esc-lupa svg { stroke: #143822; }
/* §ATY.3 · con una escuela elegida el buscador se esconde detrás de la lupa; en el inicio queda abierto */
body.compacto:not(.buscando) #buscadorFila { display: none; }
/* ⛔⛔ §AVE · 22/09 · MIENTRAS SE BUSCA, LA TARJETA NO SE VA ═══════════════════════════════════════════════════════
   El campo de búsqueda ahora vive adentro de la tarjeta —es lo que hace que la lupa «expanda a un buscar»—, y la
   tarjeta es parte del formulario, que se esconde entero con la primera letra que no coincide con ninguna escuela. Sin
   esta regla, escribir haría desaparecer el propio cuadro donde se está escribiendo: el defecto de §AUV, peor.
   ⭐ Entonces, buscando, el bloque del formulario vuelve a la vista pero SÓLO con la tarjeta: adentro quedan la lupa,
      el campo y su X, porque el logo y el nombre los esconde el motor cuando no hay escuela. Lo demás sigue oculto. */
body.buscando #formBody.form-body-hidden { display: block; }
body.buscando #formBody.form-body-hidden > *:not(.school-header-card) { display: none; }
/* §ATY.3 · el buscador, liviano e IGUAL al de la Cartelera: letra normal de 14 px sobre gris claro, también con la
   escuela elegida. La regla que destaca lo escrito (negrita, más grande) es para los datos del chico, no para esto. */
body .search input[type="search"],
body.compacto .search input[type="search"]:not(:placeholder-shown) {
    font-weight: 400; font-size: 14px; color: #111; background-color: rgba(247, 247, 247, 0.75); border-color: #ddd;
}
@media (max-width: 420px) { .escuela-logo-top { max-width: 64px; max-height: 48px; } }
.share-btn.ok { background: #eef4ea; border-color: #143822; }
.share-btn.ok svg { stroke: #143822; }
.share-btn:hover { background: #efefef; }
.share-btn svg {
    width: 16px; height: 16px;
    fill: none; stroke: #555; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
/* ── EL MENÚ · copiado de `hosting_fotoesc/styles.css`, sin una sola medida propia ───────────── */
.sh-velo { position: fixed; top:0;right:0;bottom:0;left:0; inset: 0; z-index: 9998; background: rgba(0,0,0,.18); }
.sh-menu {
    position: fixed; z-index: 9999; min-width: 216px;
    background: #fff; border: 1px solid #e2e6e2; border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
    padding: 6px;
    font-family: 'Rubik', Arial, sans-serif;
}
.sh-op {
    display: flex; align-items: center; gap: 11px; width: 100%;
    background: none; border: 0; border-radius: 8px;
    padding: 10px 11px;
    font: 500 13.5px/1.2 'Rubik', Arial, sans-serif; color: #143822;
    text-align: left; cursor: pointer;
}
.sh-op:hover { background: #f2f5f2; }
.sh-op:focus-visible { outline: 2px solid #143822; outline-offset: -2px; }
.sh-op svg {
    width: 18px; height: 18px; flex: 0 0 auto;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
}
.share-btn:focus-visible {
    outline: 2px solid #143822;
    outline-offset: 2px;
}
/* el foco de teclado tiene que verse · una familia puede llegar acá con Tab */
.cartelera-btn:focus-visible {
    outline: 2px solid #143822;
    outline-offset: 2px;
}
/* ⛔ el ícono va en SVG y no en la fuente incrustada · el porqué está en `script.js`, donde se
   dibuja: la fuente está recortada y un ícono que no esté adentro sale como PALABRA.
   16 px y trazo 1,7 · las mismas medidas que el ícono de compartir de la Cartelera. */
.cartelera-btn-ico,
.share-btn-ico {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* ⛔ el contenedor no ocupa lugar: el botón era `absolute` sobre la pastilla, así que el bloque que
   lo envolvía no podía empujar nada ni reservar un renglón — que es lo que hacía ayer.
   ⛔⛔⛔ §AVU · 22/09 · Y ESTE `margin: 0` POR ID SE COMÍA EL `margin-left: auto` QUE MANDA LOS TRES BOTONES A LA
      DERECHA. Un selector de id le gana a cualquier clase, así que la regla de la fila (`.esc-top > …`) escribía
      `auto` y ésta lo pisaba con cero, sin que nada lo dijera: los tres quedaban pegados a la lupa, a 166 px de
      donde tenían que estar. Lo encontré preguntándole al navegador QUÉ reglas ganaban, después de comprobar que
      poniendo el mismo valor a mano sí se movía — leer el archivo no alcanzaba, porque la regla estaba bien escrita.
   ⭐ Ahora sólo pone a cero el margen que le sobra (el de arriba y el de abajo) y no opina sobre los laterales,
      que son de la fila. Una regla que apaga algo que no es suyo es la causa raíz de siempre con otra cara. */
#escuelaCartelera { position: static; margin-top: 0; margin-bottom: 0; }

.search {
    position: relative;
}

.suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #ffffff;
    border: 1px solid #ddd;
    border-top: none;
    z-index: 20;
    max-height: 260px;
    overflow: auto;
    border-radius: 0 0 8px 8px;
    display: none;
}

.suggestions button {
    width: 100%;
    text-align: left;
    background: #ffffff;
    border: 0;
    padding: 10px;
    cursor: pointer;
    color: #111111;
    border-radius: 0;
    margin: 0;
    box-shadow: none;
}

.suggestions button:hover {
    background: #f3f4f6;
}

.suggestions button.active {
    background: #e5e7eb;
}

.search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
    color: #9ca3af;
}

.search-clear:hover {
    color: #374151;
}

input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
    outline: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
}

.otras-formas-wrapper {
    margin-top: 4px;
    margin-bottom: 6px;
}

button.otras-formas-toggle {
    width: 100%;
    text-align: left;
    /* ⛔⛔⛔ §BA · 01/09 · ACÁ VIVÍA EL `!important` QUE ANULABA EL ARREGLO DE AYER ────────────────
       §AR unificó los cuatro botones en una sola regla, y él siguió viendo el de la billetera
       distinto: con el contorno y sin el relleno. La razón es que este bloque declaraba el fondo
       con `!important`, y eso le gana a la regla unificada ESTÉ DONDE ESTÉ — el orden no importa
       cuando uno de los dos grita. O sea que §AR decía haber igualado los cuatro y el CSS tenía
       adentro la línea que lo impedía: un arreglo que su propio archivo desmentía.
       ⚠ El marco tampoco se anula acá: lo pone la regla de los cuatro, que es la única que debe
         decidirlo. Dos lugares decidiendo el mismo borde es cómo se separaron en primer lugar. */
    padding: 6px 2px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #2d5016;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    box-shadow: none !important;
    margin: 0;
}

/* §BA · el hover también sale de la regla de los cuatro. Éste lo dejaba transparente con otro
   `!important` y encima repintaba el verde que §AR había sacado: dos formas distintas de anular
   el mismo arreglo, en el mismo archivo, a veinte renglones una de otra. */
button.otras-formas-toggle:hover { box-shadow: none !important; }

.otras-formas-ico-wrap {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #eef4ea;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.otras-formas-ico {
    font-size: 18px;
    /* §BA · el color lo pone el botón, como en los otros tres —que son SVG con el trazo heredado—.
       Éste es una fuente de íconos y el color SÍ le pinta: quedaba verde al lado de tres grises. */
    color: inherit;
}

.otras-formas-textwrap {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 7px;
    line-height: 1.2;
}

.otras-formas-text {
    font-weight: 600;
    font-size: 13px;
}

.otras-formas-sub {
    font-size: 11.5px;
    font-weight: 400;
    color: #6b7280;
}

.otras-formas-arrow {
    font-size: 12px;
    color: #9ca3af;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Opciones en una sola línea: negrita + texto normal */
.otras-formas-line {
    align-items: center;
    font-size: 12.5px;
}

.ofl-text {
    line-height: 1.35;
}

.ofl-text strong {
    font-weight: 700;
}

/* ⛔⛔ §AYL ㉚ · 26/09 · LOS ÍCONOS DE LOS TRES RENGLONES · él: *«en cada categoría poner su propio ícono… algo que ayude
   a la gente a LEER»* · *«todos monocromáticos»*. Dibujados en la página (SVG) y no en la fuente recortada, que obliga a
   bajarla de nuevo de Google por cada glifo. UN color para los tres —el gris oscuro de la ayuda— y la proporción
   sagrada: alto fijo, ancho automático. La caja tiene ancho fijo para que los tres rótulos arranquen en la misma
   columna aunque el de Personal sea más ancho que alto. */
/* alineado con la casilla, arriba: con un rótulo de dos renglones («Casos esp.») el ícono va con el primero, no en el medio */
.ofl-ico { flex: 0 0 22px; height: 1.35em; display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; color: #4b5563; }
.ofl-ico svg { height: 17px; width: auto; fill: currentColor; display: block; }
.ofl-ico-ancho svg { height: 15px; }   /* el de Personal es 5:4: con el mismo alto se vería más grande que los otros */

/* Selector Cuota 1 / Cuota 2 — debajo de "Pagar en cuotas", sin recuadro */
.cuota-num-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 18px;
    margin: 5px 0 2px 24px;
}

.cuota-num-opt {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-size: 12px;
    color: #111;
    line-height: 1.15;
}

.cuota-num-opt input[type="radio"] {
    width: auto;
    margin: 0;
    accent-color: #2d5016;
    cursor: pointer;
}

/* §AYL · la opción NO elegida, en gris al 60 %: *«la opción inhabilitada que quede en un gris 60%, para que no haya
   confusiones»*. Se toca igual (no está deshabilitada): sólo se ve atenuada */
.cuota-num-opt:has(input:not(:checked)) { opacity: .6; }

.cuota-num-txt small {
    display: block;
    font-size: 10px;
    font-weight: 400;
    color: #6b7280;
}

.otras-formas-toggle[aria-expanded="true"] .otras-formas-arrow {
    transform: rotate(180deg);
}

.otras-formas-content {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px dashed #e5e7eb;
}

.otras-formas-opcion {
    margin-top: 6px;
}

.otras-formas-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #111;
}

.otras-formas-label input[type="checkbox"] {
    width: auto;
    margin-top: 2px;
    margin-bottom: 0;
}

.otras-formas-label-main {
    font-weight: 500;
}

.otras-formas-note {
    margin-left: 24px;
    font-size: 11.5px;
    font-style: italic;
    color: #6b7280;
    line-height: 1.4;
}
.icon-link-btn {
    all: unset; /* rompe TODA la herencia del button global */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
}

.icon-link-btn svg {
    width: 15px;
    height: 15px;
    fill: #9ca3af;
    transition: fill 0.15s ease;
}

.icon-link-btn:hover,
.icon-link-btn:hover:enabled {
    background-color: transparent;
    outline: none;
    box-shadow: none;
}

.icon-link-btn:hover svg {
    fill: #6b7280;
}
/* ══ §HI · UN CAMPO LLENO SE TIENE QUE VER LLENO ═════════════════════════════════════════════════
   ⛔ ESTO NACE DE UN PROBLEMA QUE APARECIÓ RECIÉN CUANDO LA PRECARGA EMPEZÓ A FUNCIONAR. El operador:
   *«el texto de carga de datos difiere levemente en contraste e intensidad de un texto cargado…
   ¿hay forma de que el fondo gris se vaya a 10% cuando el dato está cargado?»*.

   El problema real no es el color de la letra —un valor precargado y uno tecleado son el MISMO
   valor— sino que **el campo lleno y el vacío se ven casi iguales**. Con el formulario precargado
   eso pasó de detalle a confusión: la familia no sabe si su nombre está puesto o si es una sugerencia
   que tiene que escribir. Antes no se notaba porque nunca venía nada puesto.

   Se elige su primera opción —el fondo se aclara cuando hay dato— porque es la única que distingue un
   ESTADO en vez de matizar un color: un campo lleno deja de verse como una casilla que espera algo.
   Y va con `:placeholder-shown`, que es CSS puro: lo mismo vale para lo que precargó el QR y para lo
   que la familia acaba de escribir, sin una clase que alguien tenga que acordarse de poner.
   El placeholder se oscurece un punto en el mismo movimiento: son las dos mitades del contraste. */
input:not(:placeholder-shown),
textarea:not(:placeholder-shown) {
  background-color: rgba(255, 255, 255, .92);
  /* ⛔ EL CONTORNO SE VA CASI DEL TODO, y lo pidió así: *«el contorno debería volverse casi
     transparente, un gris 15% cuando el dato está lleno»*. Tiene su lógica y completa la idea del
     fondo: el borde es lo que dibuja una CASILLA A COMPLETAR. Mientras el campo espera algo, el
     recuadro tiene que estar; una vez que el dato está, el recuadro ya cumplió y lo único que
     importa es el dato. Un campo lleno con marco fuerte sigue pareciendo un formulario por llenar.
     22/08 · bajó de 15% a 5%, mirándolo en pantalla. No se borra del todo a propósito: al 0% los
     campos llenos pierden el renglón y el bloque se desarma; al 5% el borde deja de leerse como
     marco y queda apenas como la costura que separa un dato del otro. */
  border-color: rgba(0, 0, 0, .05);
}
body.compacto input:not(:placeholder-shown),
body.compacto textarea:not(:placeholder-shown) {
  background-color: #fff;
}
/* el valor real, a fondo negro y con un punto más de cuerpo que la sugerencia — «medium, no bold»,
   que fue la otra opción que él ofreció: acá van las dos, cada una del lado que le toca.

   ⛔ §JZ.3 · 27/08 · SUBE OTRO PUNTO, porque lo volvió a pedir: *«destacar aún más el texto de los
   alumnos… sobre todo cuando viene precargado»*. Dice «lo que pedí», o sea que el 500 de arriba fue
   la primera vuelta y no alcanzó.
   Va de 500 a **600** y de 14 a **15 px**. Es la mitad que SUBE; la que baja son los `h2` (ver
   «§JZ.3 · la otra mitad» más abajo), y las dos juntas son el pedido completo: él no pidió agrandar
   el nombre, pidió que el nombre le gane al rótulo.
   El «sobre todo cuando viene precargado» es la razón, y conviene tenerla escrita: con el QR la
   familia NO está completando un formulario, está **verificando que ese sea su hijo**. Todo lo que
   tiene que hacer en esa pantalla es leer un nombre y decir «sí, es ése». */
input:not(:placeholder-shown),
/* ══ §KC.4 · 27/08 · LA REGLA QUE FALTABA, Y ESTABA AL REVÉS ═══════════════════════════════════
   Él la dictó así, y no admite interpretación:

     > «El nombre de alumno debe tener el MISMO TAMAÑO O MAYOR que "Datos del Alumno/a",
     >  en ambos casos» — escritorio y celular.

   ⛔⛔ Y HASTA HOY ERA AL REVÉS, medido: el rótulo `h2` en **16 px** y el dato en **15**. O sea que
      «Datos del Alumno/a» —que la familia ya sabe— era MÁS GRANDE que el nombre del chico, que es
      lo único que vino a leer. Yo venía «arreglando» el contraste subiendo el peso y lavando el
      color, y no había mirado el número: el dato perdía por tamaño desde el principio.

   ⭐ LOS DOS NÚMEROS PASAN A SER UN SOLO SISTEMA, en vez de dos valores tipeados que pueden volver
      a cruzarse sin que nadie lo note. `--rotulo` es lo que mide el `h2`; `--dato` sale de él con
      un `calc` que sólo puede dar IGUAL O MÁS. Bajar el dato por debajo del rótulo ya no es un
      descuido posible: habría que escribir un `calc` negativo a propósito.
   ⛔ Y EL PISO DEL AUTOENCAJE ES `--rotulo`, no un número suelto. Un nombre largo se achica —hasta
      empatar al rótulo— y de ahí en más DESBORDA, que es lo que él eligió cuando vio el límite:
      *«poné una letra promedio alta como habías establecido, y listo… que desborde»*. Achicarlo
      más rompería la regla de arriba, y la regla gana. */
textarea:not(:placeholder-shown) { color: #111; font-weight: 500; font-size: var(--dato); }
/* ⛔⛔ §AYL ㉕ · 26/09 noche · CUARTA VUELTA, Y MANDA ÉSTA: 500. Él, viendo la ficha con las solapas nuevas: *«me parece un
   poco tosco el diseño… la letra de los rellenados debería ser medium, ni bold ni regular»*. El 700 de abajo se había
   pedido con los títulos lavados en `h2`; con las solapas al tamaño del rótulo (§AYL ㉑), el dato en negrita al lado se
   leía tosco. Rubik ya se carga en 500 (index.html): no hay peso inventado por el navegador.
   ⚠ Lo de abajo queda como historia: si alguien vuelve a subirlo, que lea antes estas dos líneas. */
/* ⛔ §KB.5 · 27/08 · TERCERA vuelta del mismo pedido, y por eso conviene contar las tres:
     500 (22/08)  ->  600 (§JZ.3)  ->  700 (acá).
   El: «debe tener mas peso el texto del alumno». Ahora el dato esta en 700 y el titulo en 600, o sea
   que el dato pesa MAS que su propio rotulo — que es exactamente al reves de como venia.
   ⚠️ Y 700 es el techo util: arriba de eso Rubik no tiene otro corte, asi que pedir «mas peso»
      despues de esto ya no se resuelve con el peso. Se resolveria con TAMANO o con COLOR, y las dos
      cosas tienen dueno (15 px es el piso que el fijo; el #111 ya es casi negro). */

/* ⛔ Y EL CONTENIDO, CENTRADO. Pedido del operador el 22/08: *«cuando hay texto de contenido, el
   contenido centrado»*. Cierra la idea de las dos reglas de arriba: sin marco y sin fondo gris, un
   dato pegado al borde izquierdo sigue leyéndose como «lo que escribí adentro de la casilla»;
   centrado se lee como el dato y nada más. Y la sugerencia queda a la izquierda, que es donde el ojo
   la busca para empezar a escribir: el movimiento en sí distingue el campo vacío del lleno.
   ⛔ DOS EXCEPCIONES, Y LAS DOS TIENEN MOTIVO:
     · el buscador de institución (`type="search"`) escribe MIENTRAS filtra y tiene la lista de
       sugerencias colgando debajo, alineada a la izquierda: centrar el texto lo despegaría de su
       propia lista mientras la familia tipea;
     · las observaciones son un texto libre de varios renglones — centrar prosa es ilegible. */
input:not([type="search"]):not(:placeholder-shown) { text-align: center; }

/* ══ §HJ · EL ⓘ DE CADA CAMPO, Y SU GLOBO ════════════════════════════════════════════════════════
   Qué trae la carpeta y qué es una copia extra, cada uno colgado de SU campo, con las mismas dos
   líneas que imprime el sobre. No ocupa lugar, no empuja nada y no aparece si nadie lo pide. */
.campo-info { position: relative; flex: 1; min-width: 0; }
.campo-info > input { width: 100%; }

/* ⛔ EL ⓘ VA ADENTRO, A LA DERECHA, y por eso se apaga la flechita del `number`: en un campo de una
   o dos cifras nadie sube de a uno con el mouse, y en el celular esa flecha ni se dibuja. Lo que sí
   hacía era ocupar justo el lugar donde tiene que estar el ⓘ. Se apaga solo en estos dos campos. */
.campo-info input[type="number"] { -moz-appearance: textfield; appearance: textfield; padding-right: 30px; }
.campo-info input[type="number"]::-webkit-outer-spin-button,
.campo-info input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.info-btn {
  position: absolute; top: 9px; right: 7px;
  width: 18px; height: 18px; padding: 0; margin: 0;
  border: 1px solid rgba(0,0,0,.22); border-radius: 50%;
  background: transparent; box-shadow: none;
  color: #4b5563; font-size: 11px; font-weight: 700; font-style: italic;
  line-height: 16px; text-align: center; cursor: pointer;
  opacity: .5; transition: opacity .15s;
}
.info-btn:hover:enabled, .info-btn:focus-visible { background: transparent; opacity: 1; }

/* EL GLOBO · flota, no participa del flujo, y nada de lo que está debajo se entera de que existe */
.campo-tip {
  position: absolute; top: calc(100% - 4px); z-index: 40;
  /* ⛔ 22/08 · EN EL CELULAR SE SALIA DE LA PANTALLA Y QUEDABA ILEGIBLE. Estaba anclado con
     `right:0` a una columna de media pantalla: con 190px de ancho minimo, el globo del campo
     IZQUIERDO se extendia hacia afuera y se cortaba («peta c/ 2 Fotos…»). Ahora cada uno se ancla
     del lado que tiene lugar —el de la izquierda abre a la derecha y viceversa— y el ancho se topea
     contra el viewport, no contra un numero fijo. */
  left: 0; right: auto;
  display: none;
  min-width: 190px; max-width: min(280px, 86vw);
  padding: 8px 11px; border-radius: 9px;
  background: #1f2a22; box-shadow: 0 6px 20px rgba(0,0,0,.3);
  line-height: 1.35; text-align: left;   /* el centrado de los campos no lo alcanza: esto es prosa */
  pointer-events: none;
}
.campo-tip.abierto { display: block; }              /* el toque, en el celular */
.info-btn:hover + .campo-tip { display: block; }    /* el mouse, en la PC */
.campo-tip[hidden] { display: none !important; }    /* sin dato de Cartelera, nunca */
/* mismo tratamiento que el papel: producto en cuerpo normal, aclaración en cursiva y más apagada */
.campo-tip .dn-tit { display: block; font-size: 12.5px; color: #eef3ee; }
.campo-tip .dn-sub { display: block; font-size: 12px; font-style: italic; color: #cfe0d3; opacity: .85; }
/* el globo del campo DERECHO abre hacia la izquierda: es el que no tiene lugar del otro lado */
.campo-info:last-child .campo-tip { left: auto; right: 0; }

/* ══ §HI.2 · UN SELECT ELEGIDO TAMBIÉN ESTÁ LLENO ════════════════════════════════════════════════
   ⛔ SE ME ESCAPÓ, Y EL MOTIVO ES TÉCNICO PERO EL EFECTO NO. Las tres reglas de «campo lleno» —fondo
   claro, borde al 5%, texto centrado— cuelgan de `:placeholder-shown`, y **un `<select>` no tiene
   placeholder**: nunca entraban. Resultado: con el turno ya elegido, el campo seguía viéndose gris,
   como si faltara completarlo. El operador lo marcó así: *«turno definido también debería pintarse
   de blanco, igual que cualquier categoría definida»*. Y es lo mismo que arreglamos en los inputs:
   un campo resuelto no puede parecer un campo pendiente.
   Se resuelve con `:has()` mirando la opción elegida. Si el navegador no lo soporta, la regla se
   ignora y el select queda como está hoy — degrada al estado anterior, no a uno peor. */
select:has(option:checked:not([value=""])) {
  background-color: rgba(255, 255, 255, .92);
  border-color: rgba(0, 0, 0, .05);
  color: #111;
  font-weight: 500;
  text-align: center;
}
body.compacto select:has(option:checked:not([value=""])) { background-color: #fff; }

/* ══ §HS · EL NOMBRE DEL ALUMNO NO ENTRA EN MEDIA PANTALLA ═══════════════════════════════════════
   ⛔ *«Acosta D'a…»* — el apellido se corta. En el celular, Apellido y Nombre comparten el ancho a la
   mitad cada uno, y los apellidos reales de esta escuela no entran ahí. Y ahora que la precarga los
   escribe sola, el problema se ve SIEMPRE, no sólo cuando la familia tipea largo.
   ⛔ Y ES PEOR QUE UN CORTE VISUAL: la familia no puede verificar que el nombre precargado sea el de
      su hijo si no lo lee entero. Es exactamente el dato que el QR vino a garantizar.
   Se apilan sólo en pantalla angosta; en la PC siguen lado a lado, donde sí entran. */
@media (max-width: 560px) {
  .form-row.fila-alumno { flex-direction: column; gap: 0 !important; }
}

/* ⛔⛔ §QH.2 · 29/08 · «QUE EL CENTRO DEL ÍCONO SE MUEVA MÍNIMAMENTE, DENTRO DEL CÍRCULO» ═════════
   Él, después de ver el color: *«si puede tener algún tipo de animación el centro del ícono (girar)
   o algo… que haga que llame un poco la atención también estaría bien… moverse mínimamente DENTRO
   del círculo, dentro de la pastilla.»*
   ⭐ Es una hoja de calendario que se mueve: seis grados para un lado, seis para el otro, y después
      cinco segundos quieta. El movimiento vive dentro de la pastilla —`overflow:hidden` no hace
      falta porque el giro no la desborda— y no empuja nada: `transform` no toca el layout.
   ⚠ NO ES UN LATIDO CONSTANTE, y es a propósito. Algo que se mueve todo el tiempo deja de mirarse a
     los treinta segundos y molesta a los dos minutos, encima arriba de un formulario que la familia
     tiene que LLENAR. Se mueve un instante cada seis segundos: alcanza para que el ojo lo encuentre
     y no compite con lo que ella está escribiendo.
   ⚠ Y SE FRENA APENAS SE ACERCA: con el mouse encima ya está mirando el botón y la palabra se está
     desplegando; seguir sacudiendo el ícono ahí sería ruido sobre una atención ya conseguida. */
@keyframes carteleraAtencion {
    0%, 62%, 100% { transform: rotate(0deg); }
    68%           { transform: rotate(-6deg); }
    76%           { transform: rotate(5deg); }
    84%           { transform: rotate(-3deg); }
    92%           { transform: rotate(0deg); }
}
.cartelera-btn-ico {
    transform-origin: 50% 58%;
    animation: carteleraAtencion 6s ease-in-out infinite;
}
.cartelera-btn:hover .cartelera-btn-ico,
.cartelera-btn:focus-visible .cartelera-btn-ico,
.cartelera-btn.abierto .cartelera-btn-ico {
    animation: none;
    transform: rotate(0deg);
}
/* mareo, epilepsia fotosensible, o simplemente no querer que la pantalla se mueva: se respeta */
@media (prefers-reduced-motion: reduce) {
    .cartelera-btn-ico { animation: none; }
}

/* ══ §ZI · 31/08 · LA ⓘ DE INFO ADICIONAL ═══════════════════════════════════════════════════════
   Él: «un botón que tenga la (i) alineado a la derecha, en el mismo renglón que Total… y si
   clickeás, despliegue el texto de info adicional, porque me parece que esa info debe conocerse».
   ⛔ Las medidas y el verde NO son inventados: son los de `.cartelera-btn` de esta misma página, que
      es la pieza que la familia ya sabe tocar. Un tercer tratamiento para lo mismo sería la causa
      raíz de siempre.
   ⚠ La ⓘ quieta no puede parecer un adorno: lleva el borde y el redondeo del botón de Cartelera. Un
     ícono sin rótulo y sin forma se lee como decoración y nadie lo toca — y ahí se pierde la idea. */
/* ⛔⛔ §ZI.5 · 31/08 · LA ⓘ AL BORDE IZQUIERDO · «en exactamente la misma línea del total» ────────
   Estaba pegada al Total, las dos a la derecha. `space-between` las manda a los dos bordes: la ⓘ a
   la izquierda, el Total donde siempre estuvo. Ninguno de los dos se mueve de su borde cuando la
   pastilla se despliega — crece hacia el medio, que es donde hay lugar. */
.total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.total-row .total-amount { margin: 0; flex: 0 0 auto; white-space: nowrap; }

/* ⛔⛔⛔ §ZI.5 · «EXACTAMENTE EL MISMO ESTILO QUE EL BOTÓN CARTELERA» · dictado suyo ═══════════════
   Yo había escrito una pastilla PARECIDA con medidas propias: radio 14 contra 999, borde gris claro
   contra el verde, mi propia curva de transición y sin `min-width`. Cuatro decisiones inventadas
   para una pieza que ya existe tres centímetros más arriba, en la misma página, y que la familia ya
   sabe tocar. Es la causa raíz del proyecto en su forma más pura: reusar el canon antes de inventar.
   ⭐ Los valores de acá abajo son los de `.cartelera-btn`, uno por uno.
   ⭐ Y el texto sale a la DERECHA porque el ícono va primero. No es una regla nueva: el de Cartelera
      está pegado al borde derecho y por eso crece hacia la izquierda. La regla es la misma en los
      dos — crece hacia el espacio libre. */
.info-adic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 28px;
    /* §ZI.4 · `button{width:100%}` (styles.css:205) vale para todos los botones del formulario, que
       son de ancho completo por diseño. Ésta es la excepción, y va explícita: con el 100% heredado
       salía cruzando la pantalla y saliéndose de la tarjeta. Lo cazó la captura, no la suite. */
    width: auto;
    max-width: 100%;
    padding: 0;
    border: 1px solid #143822;
    border-radius: 999px;
    background: #f7f7f7;
    color: #143822 !important;
    cursor: pointer;
    font: inherit;
    flex: 0 0 auto;
    transition: background .15s ease, padding .3s cubic-bezier(.22,.61,.36,1);
}
.info-adic-btn:hover,
.info-adic-btn:focus-visible,
.info-adic-btn.desplegada,
.info-adic-btn.abierta { background: #eef4ea; padding: 0 10px 0 4px; }
.info-adic-ico { width: 16px; height: 16px; flex: 0 0 auto; fill: none; stroke: currentColor;
                 stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* ⭐ CRECE HACIA LA DERECHA POR CONSTRUCCIÓN, sin una sola cuenta de píxeles: el ícono va PRIMERO y
   la palabra crece de 0 a su ancho. El ícono no se mueve; el botón se estira hacia el medio, que es
   donde tiene lugar. Los valores de la transición son los de `.cartelera-txt`, uno por uno. */
.info-adic-txt {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .01em;
    margin-left: 0;
    transition: max-width .3s cubic-bezier(.22,.61,.36,1),
                opacity .22s ease,
                margin-left .3s cubic-bezier(.22,.61,.36,1);
}
.info-adic-btn:hover .info-adic-txt,
.info-adic-btn:focus-visible .info-adic-txt,
.info-adic-btn.desplegada .info-adic-txt,
.info-adic-btn.abierta .info-adic-txt {
    max-width: 140px;
    opacity: 1;
    margin-left: 6px;
}
.info-adic-btn.abierta { background: #eef4ea; }   /* §AR · ver el porqué abajo */

/* el texto · mismos colores que la Cartelera, para que sea la misma información y no otra */
/* ⛔⛔⛔ §ZI.2 · 31/08 · «APARECE DESPLEGADO TODO EL TIEMPO» · y rompió la página que COBRA ═════════
   `hidden` no es magia: es `display:none` puesto por la hoja del NAVEGADOR, y cualquier regla mía
   con `display` le gana por especificidad. Le puse `display:flex` al panel para apilar los renglones
   y con eso el panel NUNCA estuvo oculto: nacía abierto, con las quince líneas, y empujaba el
   «Total» hasta partirlo en tres renglones verticales.
   ⛔ La suite dio 7116 verdes y las cuatro puertas sobre esto. NINGUNA de las cuatro puede ver un
      layout — y yo había escrito en el informe «la ⓘ no la vi pintada todavía» y la subí igual, en
      la única página que toca dinero. El arreglo son dos renglones; el error fue subir sin mirar. */
.info-adic-panel { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.info-adic-panel[hidden] { display: none; }

.ia-linea {
    display: block;
    font-size: 12.5px;
    line-height: 1.45;
    padding: 7px 9px;
    border-left: 3px solid #d1d5db;
    border-radius: 4px;
    background: #fafafa;
    color: #111;
}
.ia-ok   { border-left-color: #143822; background: #f2f7f3; }
.ia-warn { border-left-color: #d97706; background: #fdf8ef; }
.ia-no   { border-left-color: #9CA3AF; background: #fafafa; }
.ia-note { border-left-color: #2563eb; background: #f2f6fd; }

/* §ZI.6 · el título de cada sección · él: «faltan los títulos, que son muy importantes en la versión
   de PAGOS». Verde de la página, no un gris más: separa sin competir con los renglones de color. */
.ia-tit {
    font-size: 12px;
    font-weight: 700;
    color: #143822;
    margin: 10px 0 2px;
    letter-spacing: .01em;
}
.ia-tit:first-child { margin-top: 0; }

/* ══ §ZO · 31/08 · LOS CUATRO BOTONES SON UNA SOLA REGLA ═════════════════════════════════════════
   Él, con el zoom al lado: «tu estilo y el del botón de Cartelera NO TIENEN NADA QUE VER: tu botón
   tiene fondo verde y una sombra chillona, el de Cartelera no, y así podría seguir un rato. Deben
   tener EXACTAMENTE el mismo estilo. Y el botón de Cartelera NO DEBE TENER ESE CONTORNO VERDE (el de
   la ⓘ tampoco): deben ser todos los botones iguales — billetera, cartelera, compartir e info.»

   ⛔ Y ES MÁS GRANDE QUE UN COLOR. Había CUATRO reglas escritas por separado que INTENTABAN
      parecerse: una con borde verde, otra con borde gris, una con `box-shadow:none` y las demás sin,
      cada una con sus medidas repetidas a mano. Cuatro copias del mismo criterio no se mantienen
      iguales: se separan en el primer retoque, y eso fue exactamente lo que él vio.
   ⭐ Ahora es UNA regla y cuatro selectores. Cambiar el aspecto de los botones redondos de esta
      página es cambiar UN renglón, y no pueden volver a divergir.

   ⛔⛔ Y LA SOMBRA VERDE NO LA PUSE YO: la hereda de la regla global `button` de este formulario —la
      del botón de WhatsApp—. El comentario de `.share-btn`, veinte renglones más arriba, dice
      textual que eso ya pasó DOS VECES el mismo día: «pisar una regla ajena obliga a mirarla ENTERA,
      no la línea que a uno le molesta». Ésta fue la tercera. Por eso `box-shadow` y `margin` van
      explícitos acá y no confiando en que no haya nada que los pise. */
/* ⛔⛔⛔ §AR · 01/09 · «LOS CUATRO» ERAN TRES · la billetera nunca entró ═══════════════════════════
   El párrafo de arriba dice «LOS CUATRO BOTONES SON UNA SOLA REGLA» y cita sus palabras nombrando
   los cuatro: *«billetera, cartelera, compartir e info»*. **Y el selector tenía TRES.** El de
   «Más formas de pago» quedó afuera, con su propia regla: sin borde, fondo transparente, ancho
   completo, esquinas de 8 px y alineado a la izquierda. O sea: el comentario decía que estaban
   unificados y el que él veía distinto era justamente el que no lo estaba.
   ⛔ Es el mismo modo de falla que este día encontró cinco veces: un comentario que afirma un
      arreglo que su código no hace. Y es peor acá, porque el comentario nombraba los cuatro uno por
      uno — o sea que el error estaba a la vista de quien lo escribió.
   ⭐ Él, hoy: *«cartelera se debe ver igual que info, mismo fondo, mismos colores»* y *«el botón de
      más opciones de pago debería tener el mismo estilo que los otros; el contorno no se ve, no
      parece el mismo estilo, y debe estar alineado a la izquierda igual que más info: deben estar
      todos en la misma línea»*. */
.cartelera-btn,
.share-btn,
.info-adic-btn,
button.otras-formas-toggle {
    box-sizing: border-box;
    height: 28px;
    min-width: 28px;
    padding: 0;
    margin: 0;
    border: 1px solid #e2e2e2;
    border-radius: 999px;
    background: #f7f7f7;
    box-shadow: none;
    cursor: pointer;
}
/* ⚠ La billetera necesita tres cosas MÁS que los otros tres, y van acá y no en una regla aparte:
   lleva texto (los otros son redondos), no puede heredar el ancho completo del formulario, y su
   contenido va pegado a la izquierda. Todo lo demás —marco, alto, fondo, esquinas— sale de arriba y
   no se puede volver a separar. */
button.otras-formas-toggle {
    width: auto;
    max-width: 100%;
    padding: 0 10px 0 4px;
    gap: 6px;
    text-align: left;
    justify-content: flex-start;
    font-size: 12.5px;
    font-weight: 700;
}
/* ⚠ El ÍCONO de Cartelera sí queda verde: es una decisión suya de §QH —«quizás debería tener un
   poco de color para atraer la atención»— y es lo ÚNICO que lo distingue. Lo que él mandó sacar es
   el CONTORNO, que es lo que rompía la familia. El marco es igual en los cuatro; el color del ícono
   es la excepción declarada. */
/* ⛔ §AR · 01/09 · Y EL COLOR TAMBIÉN SE UNIFICA. Acá había una excepción declarada —el ícono de
   Cartelera en verde, por §QH— y él la retiró hoy con todas las letras: *«cartelera se debe ver
   igual que info: mismo fondo, mismos colores»*. Una excepción que él mismo había pedido y que hoy
   saca deja de ser excepción; lo que no puede pasar es que quede escrita como vigente. */
.cartelera-btn { color: #444 !important; }
.share-btn     { color: #444; }
.info-adic-btn { color: #444 !important; }
/* ⛔⛔ §AYL ㉓ · 26/09 noche · LA ⓘ DE «INFO ADICIONAL» SE VEÍA AUNQUE LA ESCUELA NO TUVIERA NADA QUE DECIR. El programa la
   esconde con `hidden` («sin texto no hay botón · una ⓘ que abre una caja vacía es un elemento inútil»), y el
   `display:inline-flex` de su regla le ganaba: en el formulario PUBLICADO, en una escuela sin información adicional,
   la ⓘ estaba ahí y abría una caja vacía. Lo encontró el barrido de §AYL ㉓, que buscaba otra cosa. */
.info-adic-btn[hidden] { display: none; }
button.otras-formas-toggle { color: #444 !important; }
.info-adic-btn.abierta { background: #eef4ea; }   /* §AR · ver el porqué abajo */
/* ⚠ el hover sí comparte: es el mismo gesto en los tres */
/* §BA · los CUATRO, también acá: el hover era la otra mitad de la unificación y nombraba tres.
   Es el mismo descuido que §AR ya había encontrado en el selector de arriba — el comentario decía
   «los cuatro» y el selector tenía tres. Dos veces el mismo error, en el mismo archivo. */
.cartelera-btn:hover, .share-btn:hover, .info-adic-btn:hover,
button.otras-formas-toggle:hover,
.cartelera-btn.abierto, .info-adic-btn.desplegada { background: #eef4ea; }
/* ⛔ Y EL ABIERTO VA AL FINAL · lo puse en la lista del hover y esa regla, por venir despues, le
   pisaba el verde oscuro: texto verde claro sobre fondo verde claro, ilegible. Lo cazo la captura
   —la suite no puede ver un contraste— y es la misma leccion del dia, otra vez. */
/* ⛔⛔ §AR · 01/09 · EL ESTADO ABIERTO ERA EL CUARTO ESTILO · el ⓘ se pintaba verde oscuro relleno
   con la letra blanca, algo que ninguno de los otros tres hace nunca. Él lo vio en la captura y lo
   dijo dos veces: «deben ser todos los botones iguales». Un estado propio para uno solo de cuatro
   hermanos es la misma divergencia que §ZO vino a cerrar, escondida en el ESTADO en vez de en el
   reposo. Y estaba escrita TRES veces, en tres reglas distintas del mismo archivo.
   ⭐ Abierto = el mismo fondo del hover, que ya comparten los cuatro: se ve activo sin cambiar de
      familia. */
.info-adic-btn.abierta { background: #eef4ea !important; color: #444 !important; border-color: #e2e2e2 !important; }

/* ⛔⛔⛔ §AHJ · 10/09 · LOS DOS CARTELES DEL NAVEGADOR EMBEBIDO ═══════════════════════════════════
   La forma la corrigió él mirándola: *«el amarillo no me gusta… debería ser blanco el fondo, el
   amarillo sólo en el triángulo… más estético y menos aterrador… no mover todo, es un flotante y la
   página detrás queda blureada… sintético, breve, la gente NO lee, y tampoco entiende»*.

   ⭐ Y LOS DOS FLOTAN, por su argumento, que es mejor que el mío: *«si abrió es porque detectó
      algo… y si el usuario aun así quiere completar, cierra voluntariamente»*. Yo quería que el del
      inicio no tapara nada por miedo a un falso positivo; la ✕ ya resuelve eso, y un cierre
      deliberado es una puerta mejor que un cartel que se puede pasar por alto.

   ⚠ NO ES UN POPUP DEL NAVEGADOR ni un modal que trabe: es una tarjeta de la propia página, con su
     ✕ siempre a mano. Cerrarla devuelve el formulario intacto.
   ⚠ Y el fondo borroso se degrada solo: donde no haya `backdrop-filter`, queda el velo oscuro. La
     tarjeta se lee igual — el desenfoque acompaña, no sostiene. */
.wv-flota{
  /* §AYL 303 · las cuatro puntas antes del atajo: el iOS 12 a 14.4 no conoce «inset» y descarta la que no entiende */
  position:fixed; top:0;right:0;bottom:0;left:0; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:10px;   /* §AHN.3 · cada píxel de acá es un píxel que el título NO tiene para entrar en un renglón */
}
.wv-flota[hidden]{ display:none !important }
.wv-fondo{
  /* §AYL 303 · idem: sin las cuatro puntas, en un teléfono viejo este fondo no tapa nada */
  position:absolute; top:0;right:0;bottom:0;left:0; inset:0; background:rgba(18,28,18,.45);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
/* ⛔⛔⛔ §AHN.3 · 11/09 · ÉL LO MIRÓ EN EL TELÉFONO Y PIDIÓ QUE ENTRE EN MENOS RENGLONES ══════════
   Su corrección, sobre la captura dentro de Instagram: *«esta leyenda debe ser más corta, y ambos
   botones en el mismo renglón… y el texto también un poco más chico y en el mismo renglón. Mejorar
   estética y legibilidad»*. Y escribió él mismo el texto: *«Esta web debe verse en un navegador»*.
   ⭐ Tres renglones de título y dos de botones eran CINCO renglones para decir una cosa. Ahora es
      un renglón de título y uno de botones. La familia no lee un cartel: lo mira.
   ⚠ Los números están elegidos para que el título ENTRE, no de casualidad: la tarjeta da 360, el
     ícono y los dos botoncitos se llevan unos 110, y el título a 12,5 px ocupa unos 235 de los 250
     que quedan. Si mañana el texto crece, no entra — y por eso el texto es corto a propósito. */
.wv-tarjeta{
  position:relative; width:100%; max-width:380px;
  background:#fff; border-radius:14px; padding:12px 12px 11px;
  box-shadow:0 14px 40px rgba(10,20,10,.38);
  max-height:86vh; overflow:auto;
}
.wv-cab{ display:flex; align-items:center; gap:6px }
.wv-ico{ font-size:18px; line-height:1.2; color:#e0a92a; flex:0 0 auto }   /* el amarillo, sólo acá */
.wv-tit{ flex:1 1 auto; margin:0; font-size:12.5px; font-weight:700; color:#1f2a1f; line-height:1.3;
  letter-spacing:-.1px }
.wv-mini{
  flex:0 0 auto; width:22px; height:22px;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:inherit; font-size:13px; font-weight:700; color:#6b7668;
  background:#f2f4f1; border:0; border-radius:7px; cursor:pointer; line-height:1;
}
.wv-mini:hover{ background:#e6eae4; color:#2f3a2f }
.wv-ayuda{ margin:8px 0 0; font-size:12px; line-height:1.45; color:#55604f;
  background:#f6f8f5; border-radius:8px; padding:8px 10px }
.wv-sub{ margin:8px 0 0; font-size:13px; line-height:1.35; color:#34402f }
.wv-msg{
  margin:8px 0 0; padding:8px 10px; max-height:152px; overflow:auto;
  background:#fafbf9; border:1px solid #e2e6df; border-radius:8px;
  font-family:'Rubik',Arial,sans-serif; font-size:12px; line-height:1.45; color:#222c20;
  white-space:pre-wrap; word-break:break-word; -webkit-user-select:text; user-select:text;
}
/* ⛔ LOS DOS BOTONES COMPARTEN EL RENGLÓN, en mitades iguales, y NO se parten (§AHN.3). `nowrap` es
   lo que impide que el segundo se caiga abajo cuando el texto es largo, y `flex:1 1 0` es lo que
   los hace del mismo ancho en vez de uno grande y uno chico. Los dos carteles tienen exactamente
   DOS botones: si mañana aparece un tercero, hay que volver a mirar esto. */
.wv-acciones{ display:flex; flex-wrap:nowrap; align-items:stretch; gap:8px; margin-top:10px }
.wv-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:5px;
  font-family:inherit; font-size:12.5px; font-weight:600; color:#2f3a2f;
  background:#fff; border:1px solid #ccd3c8; border-radius:8px;
  padding:8px 9px; cursor:pointer; min-height:34px; width:auto; flex:1 1 0; min-width:0;
  white-space:nowrap;
}
.wv-btn:hover{ background:#f4f7f2 }
.wv-btn:active{ transform:translateY(1px) }
.wv-btn-pri{ background:#1f6b34; border-color:#1f6b34; color:#fff }
.wv-btn-pri:hover{ background:#1a5c2c }
.wv-cp{ font-size:14px; line-height:1 }

/* ⛔⛔⛔ §AHJ · 10/09 · EL RESPLANDOR VERDE FLUO NO ERA MÍO, Y HABÍA QUE APAGARLO ══════════════════
   Él, mirando la captura: *«el sombreado no debe ser ese verde fluo horrible, no lo uso en ningún
   lado… un sombreado más acorde a toda la página»*. Tenía razón, y no estaba en mi código: viene de
   la regla global `button` de esta hoja, que le pone a TODO botón fondo verde WhatsApp, ancho
   completo, margen arriba y un `box-shadow` verde. Mis botones lo heredaban sin que se viera.
   ⭐ Se apaga acá, explícito, en vez de tocar la regla global: esa regla la usan los botones de
      envío de esta misma página, y cambiarla sería mover algo que anda. */
.wv-flota button{ box-shadow:none !important; width:auto !important; margin-top:0 !important }
.wv-flota .wv-btn{ background:#fff; color:#2f3a2f }
.wv-flota .wv-btn:hover:enabled{ background:#f4f7f2; color:#2f3a2f }
.wv-flota .wv-btn-pri{ background:#1f6b34; color:#fff }
.wv-flota .wv-btn-pri:hover:enabled{ background:#1a5c2c; color:#fff }
.wv-flota .wv-mini{ background:#f0f2ee; color:#6b7668 }
.wv-flota .wv-mini:hover:enabled{ background:#e4e8e0; color:#2f3a2f }
/* ⛔⛔⛔ §AYL 114 · 03/10 · EN LA VENTANA DE PREGUNTA, UN RÓTULO QUE NO ENTRA BAJA DE RENGLÓN · mirando el cartel de cuotas
   pintado a 320 px, «Sí, ya pagué el primero» salía cortado y sin su tilde, y a 360 tocaba los dos bordes del botón. Los
   otros dos carteles de esta familia tienen rótulos fijos y cortos; ESTA ventana recibe el rótulo de quien pregunta, así
   que no puede depender de que cada uno lo escriba corto.
   ⭐ Sólo cambia cuando el texto no entra: el que entra en un renglón se ve exactamente igual que antes. Y los dos botones
      siguen lado a lado, en mitades iguales (§AHN.3): lo que baja de renglón es el texto adentro del botón, no el botón.
   ⚠ Es la única regla de esta hoja atada a un id de estos carteles, y es a propósito: los otros dos se miraron pintados
     con su texto y no se tocan. */
#feConf .wv-btn{ white-space:normal; line-height:1.2; text-align:center }
/* ⛔⛔⛔ §AYL 128 ① · 03/10 · LA PREGUNTA, GRANDE Y CENTRADA · él, con «¿Ya hiciste el primer pago?» delante: *«la pregunta
   debería estar más grande y centrada... y la aclaración, si no la leen, se debería entender... pues lo más probable es que
   NO lean textos aclaratorios. en todos los casos»*. La pregunta pasa a ser lo más grande de la ventana (19 px, el doble de
   peso visual que los botones), centrada y con el signo arriba; la aclaración queda debajo, más chica y sin caja: es un
   complemento, no un párrafo para leer. Sólo esta ventana: los dos carteles del navegador embebido no cambian. */
/* ⛔⛔⛔ §AYL 189 · 06/10 · Y A LA MEDIDA DEL FORMULARIO, NO UN CARTEL GIGANTE · él, con la ventana del cargo al lado de las
   casillas: «esos íconos deberían ser los mismos [que los del formulario] y el tamaño de fuente similar, no hace falta un
   cartel gigante» · «el estilo de los carteles debe ser ESTE [la pantalla de espera «Registrando tu pedido»]: tarjeta blanca,
   título a 16 en negrita, aclaración a 13, ícono chico al lado del texto, con esta tipografía, con este peso visual».
   El título baja de 19 a 16 (sigue siendo lo más grande de la ventana, y centrado: lo de §AYL 128 ① queda), el signo de 40 a
   28 y en el gris de los íconos del formulario (el amarillo era de un aviso, no de una pregunta), y cuando la pregunta trae
   el svg de su casilla (wv-ico-svg, lo pone _preguntarYa) el dibujo va a los 17 px de los rótulos del formulario. */
#feConf .wv-tarjeta{ padding:20px 18px 16px; text-align:center }
#feConf .wv-cab{ flex-direction:column; gap:8px; padding:0 18px }
#feConf .wv-ico{ width:28px; height:28px; border-radius:50%; background:#f1f4f0; color:#4b5563; display:grid; place-items:center; font-size:15px; font-weight:700; line-height:1 }
#feConf .wv-ico svg{ height:17px; width:auto; fill:currentColor; display:block }
#feConf .wv-tit{ font-size:16px; font-weight:600; line-height:1.3; text-align:center; letter-spacing:0; color:#333 }
#feConf .wv-ayuda{ background:none; padding:0; margin:6px 0 0; font-size:13px; line-height:1.4; text-align:center; color:#55604f }
#feConf .wv-acciones{ margin-top:14px }
#feConf .wv-btn{ font-size:13.5px; min-height:40px }
/* §AYL 172 ⑥ · el cuadro para escribir la respuesta ahí mismo (el cargo de «Personal Institución»): 16 px para que el teléfono
   no agrande la pantalla al tocarlo, y el borde rojo apagado cuando falta lo que se pide */
#feConf .fe-campo{ display:block; width:100%; box-sizing:border-box; margin:12px 0 0; padding:10px 12px; font:inherit; font-size:16px;
  border:1px solid #cfd8cc; border-radius:10px; background:#fff; color:#1d2a1a; text-align:left }
#feConf .fe-campo[hidden]{ display:none !important }
/* §AYL 183 · la pregunta que BUSCA: la lista va DEBAJO del cuadro, dentro de la tarjeta (no flotando: la tarjeta la recortaría),
   con tope de alto para el teléfono con el teclado abierto; las filas, a lo ancho y alineadas a la izquierda. Y sin «Sí»/«No»:
   ⚠ `.wv-acciones` tiene display, así que su [hidden] se escribe a mano (una clase con display le gana a hidden) */
#feConf .suggestions{ position:static; display:block; margin-top:6px; max-height:38vh; overflow:auto; text-align:left;
  border:1px solid #cfd8cc; border-radius:10px; background:#fff }
#feConf .suggestions[hidden]{ display:none !important }
#feConf .suggestions button{ width:100% !important }
/* §AYL 188 · sin resultados la lista lo dice en vez de quedar muda («No encontramos «…»» / «Escribí el nombre de la escuela») */
#feConf .suggestions .sug-nada{ padding:10px 12px; font-size:13px; color:#55604f }
#feConf .wv-acciones[hidden]{ display:none !important }
/* §AYL 187 · el cartel de la cuota 2: un solo botón (el «No» escondido de verdad: inline-flex le ganaba a hidden) que arranca
   apagado con su cuenta y se enciende a los 3 segundos */
#feConf .wv-btn[hidden]{ display:none !important }
#feConf .wv-btn:disabled{ opacity:.55; cursor:default }
#feConf .wv-btn:disabled:active{ transform:none }
#feConf .fe-campo.fe-falta{ border-color:#b3412e; box-shadow:0 0 0 2px rgba(179,65,46,.15) }
/* ⛔⛔⛔ §AYL 270 · 13/10 · LA FILA DE OPCIONES DEL CARTEL (la elección que va junto al monto) ══════════════════════
   Dos botones a mitad y mitad, el elegido en verde: es la misma pastilla que la fila «Primer Pago / Segundo pago» del
   formulario, que es de donde esto se mudó. ⚠ La regla global de los botones de esta hoja (verde, ancho completo,
   sombra) ya la apaga `.wv-flota button`; acá sólo se les da forma. */
#feConf .fe-opciones{ display:flex; gap:8px; margin:12px 0 0 }
#feConf .fe-opciones[hidden]{ display:none !important }
#feConf .fe-opcion{
  flex:1 1 0; min-height:40px; padding:8px 6px; border:1px solid #cfd8cc; border-radius:10px;
  background:#fff; color:#55604f; font:inherit; font-size:13.5px; font-weight:600; line-height:1.2;
  cursor:pointer; white-space:normal; text-align:center;
}
#feConf .fe-opcion.activa{ background:#1f6b34; border-color:#1f6b34; color:#fff }
#feConf .fe-opcion:hover:not(.activa){ background:#f4f7f2 }
/* §AYL 270 · el segundo cuadro va pegado al primero: son un solo dato en dos partes, no dos preguntas */
#feConf #feConfCampo2{ margin-top:8px }
/* ⛔⛔ §AYL 283 ⑭ · 14/10 · EL PRINCIPAL DE LOS TRES RECORDATORIOS DE WHATSAPP · él: *«Enviar en WhatsApp es el cartel principal»*.
   Se lo reconoce por su IDENTIDAD (`data-cartel`, que pone `_preguntarYa`) y no por su título. Pesa más que sus dos vecinos —el
   símbolo de WhatsApp más grande en su círculo verde suave, el título a 18 en negrita y lo que la familia GANA, en verde— sin
   llegar al cartel gigante que §AYL 189 sacó (el título más grande de las preguntas siguió en 16). */
#feConf[data-cartel="wsp-enviar"] .wv-ico{ width:44px; height:44px; background:#e6f5ea }
#feConf[data-cartel="wsp-enviar"] .wv-ico svg{ height:26px }
#feConf[data-cartel="wsp-enviar"] .wv-tit{ font-size:18px; font-weight:700; color:#1f2a1f }
#feConf[data-cartel="wsp-enviar"] .wv-ayuda{ font-size:14px; font-weight:600; color:#1f6b34 }
/* los tres, con el título repartido en renglones parejos: «…dentro de los 30 / minutos» dejaba una palabra sola abajo */
#feConf[data-cartel] .wv-tit{ text-wrap:balance }
/* ⛔ §AYL 294 ④ · «que un click saque cada letrero de WhatsApp»: la tarjeta ENTERA recibe el toque (no un botón nuevo), así que se ve tocable. `wv-toca` la pone
   `_preguntarYa` sólo en el recordatorio sin botón y la saca al cerrarse; la cruz conserva su propia manito. */
#feConf.wv-toca .wv-tarjeta{ cursor:pointer }
/* ⛔⛔⛔ §AYL 325 · 16/10 · LA SALIDA QUE EXISTÍA Y NO SE VEÍA ────────────────────────────────────────────────────
   Él, probando la 32.16: *«son como 14 segundos de cartel, da ganas de abandonar, o parece tildado el sistema»*.
   ⭐ El toque para pasar YA estaba desde §AYL 294 ④. Lo único que lo anunciaba era `cursor:pointer`, y eso NO EXISTE
      EN UN TELÉFONO — que es donde él lo probó y donde están las familias. Una salida que no se ve es una salida que
      no existe, y un cartel que no parece pasable parece colgado.
   ⛔ NO ES UN BOTÓN: él los sacó a propósito de estos tres carteles y no vuelven. Es un renglón chico, gris y abajo,
      que dice lo que ya se podía hacer.
   ⚠ `aria-hidden` no hace falta: es texto decorativo generado, y el toque sigue viviendo en la tarjeta entera. */
#feConf.wv-toca .wv-tarjeta::after{
  content:'Tocá para seguir';
  display:block; margin-top:14px;
  font-size:12.5px; font-weight:600; letter-spacing:.02em;
  color:#8a9690; text-align:center;
}
/* ⛔ §AYL 270 · LO CARGADO EN EL CARTEL, AL LADO DE SU CASILLA · una pastilla chica que ADEMÁS es el botón para volver a
   abrirlo. Sin esto, corregir un monto pedía destildar y volver a tildar (regla 12 · regla 13). */
.flot-chip{
  display:inline-flex !important; align-items:center; gap:6px;
  width:auto !important; margin:6px 0 0 30px !important; padding:5px 10px !important; min-height:0 !important;
  border:1px dashed #b9c7b3 !important; border-radius:999px !important;
  background:#f1f5ef !important; color:#2f4a2f !important; box-shadow:none !important;
  font-family:'Rubik',Arial,sans-serif; font-size:12.5px; font-weight:600; line-height:1.3; cursor:pointer;
}
/* ⛔ 13/10 · ACÁ HABÍA UN LÁPIZ (`content:'✏'`) Y SALIÓ COMO UN PALITO · medido pintando: ese carácter no está en
   ninguna de las fuentes de esta página, así que el navegador dibuja lo que puede. Es la misma trampa que §JZ.8
   documentó para los íconos de la fuente recortada —un ícono que no está sale como palabra o como cuadrito— y acá
   no hace falta: la pastilla ya se lee como tocable por su borde punteado, y su `title` dice qué hace. */
.flot-chip:hover{ background:#e6ece3 !important }
.flot-chip[hidden]{ display:none !important }

/* ⛔⛔⛔ §AYL 268 ③ · 13/10 · LA PANTALLA DE OBSERVACIONES · un renglón, a lo sumo dos, cada uno con sus dos salidas ══ */
#feObs .obs-lista{ margin:10px 0 0; text-align:left }
#feObs .obs-fila{ border:1px solid #e2e6df; border-radius:10px; padding:10px 12px; background:#fafbf9 }
#feObs .obs-fila + .obs-fila{ margin-top:8px }
#feObs .obs-txt{ margin:0; font-size:13.5px; line-height:1.4; color:#1f2a1f }
#feObs .obs-acc{ display:flex; gap:8px; margin-top:8px }
#feObs .obs-btn{ flex:1 1 0; min-width:0; min-height:38px; font-size:13px; white-space:normal; line-height:1.2; text-align:center }
#feObs .obs-fila.obs-hecha{ opacity:.55 }
#feObs .obs-btn:disabled{ cursor:default }
/* §AYL 288 · la segunda línea de un renglón («¿Sumás uno adicional?», el pedido a la vista, el saldo de la planilla): más chica y apagada */
#feObs .obs-sub{ margin:3px 0 0; font-size:12.5px; line-height:1.35; color:#5b6b5b }

/* ⛔⛔⛔ §AYL 267 ③ · 13/10 · EL RESUMEN · «para que la persona ENTIENDA» ══════════════════════════════════════════
   Es la misma tarjeta flotante de las preguntas, un poco más ancha y alineada a la izquierda: acá no se decide, se LEE.
   ⚠ El escudo lleva alto fijo y ancho automático (regla 6 · la proporción es sagrada): nunca se deforma. */
/* ⛔⛔ 13/10 · MEDIDO PINTANDO, Y SE SALÍA DEL TELÉFONO · la tarjeta es un elemento flexible dentro de `.wv-flota`, así
   que su ancho mínimo es el de su contenido; y `.wv-btn` trae `white-space:nowrap`, con lo cual «Enviar a WhatsApp» y
   «Corregir» uno al lado del otro FIJABAN un piso más ancho que un teléfono de 390. `min-width:0` le devuelve el
   permiso de achicarse, y los rótulos se parten como en `#feConf` (que ya tenía esta misma corrección). */
#feResumen .res-tarjeta{ max-width:420px; min-width:0; padding:16px 16px 14px; text-align:left }
#feResumen .wv-btn{ white-space:normal; line-height:1.2; text-align:center }
#feResumen .wv-acciones{ flex-wrap:wrap }
#feResumen .res-esc{ display:flex; align-items:center; gap:10px; padding-right:34px }
#feResumen .res-logo{ height:38px; width:auto; max-width:none; flex:0 0 auto }
#feResumen .res-esc-txt{ min-width:0 }
#feResumen .res-esc-nom{ margin:0; font-size:13.5px; font-weight:700; line-height:1.25; color:#1f2a1f }
#feResumen .res-esc-niv{ margin:2px 0 0; font-size:12.5px; font-weight:600; color:#55604f }
#feResumen .res-tit{ margin:12px 0 0; font-size:15px; font-weight:700; color:#333; text-align:left }
#feResumen .res-chicos{ margin:8px 0 0 }
#feResumen .res-chico{ border:1px solid #e2e6df; border-radius:10px; background:#fafbf9; padding:9px 11px }
#feResumen .res-chico + .res-chico{ margin-top:8px }
#feResumen .res-chico-nom{ margin:0; font-size:14.5px; font-weight:700; color:#1f2a1f; line-height:1.25 }
#feResumen .res-chico-donde{ margin:1px 0 0; font-size:12px; font-weight:600; color:#6b7668 }
#feResumen .res-item{ margin:6px 0 0; font-size:13px; line-height:1.4; color:#2f3a2f }
#feResumen .res-item b{ color:#1f6b34 }
/* ⛔⛔ §AYL 337 ⑥ · 17/10 · LA SEGUNDA LÍNEA · él: «PRIMERA LINEA PEDIDO, SEGUNDA LINEA DETALLE» · *«así amontonado no se
   entiende nada»*. Va sangrado hasta donde arranca el texto del renglón de arriba (el dibujo mide 17 y lleva 6 de aire),
   un punto más chico y en el gris del formulario: se lee como lo que es —lo que trae ESE pedido— y no como otro pedido. */
#feResumen .res-item-det{ margin:1px 0 0; padding-left:23px; font-size:12px; line-height:1.35; color:#55604f }
/* §AYL 283 ⑫ · el ícono ACOMPAÑA al texto: el de la línea (carpeta, copia) va delante, en el verde del «1 ×»; el de adentro del
   detalle (retrato, grupal) va chico y en el gris del texto. Son svg que heredan el color: nunca salen como palabra. */
#feResumen .res-ico{ width:15px; height:15px; margin:0 3px 0 0; vertical-align:-3px; fill:currentColor; color:#55604f; display:inline-block }
#feResumen .res-ico-linea{ width:17px; height:17px; margin-right:6px; vertical-align:-4px; color:#1f6b34 }
#feResumen .res-tok{ white-space:nowrap }
#feResumen .res-chico-sub{ margin:6px 0 0; font-size:12.5px; font-weight:700; color:#1f6b34; text-align:right }
#feResumen .res-chico-obs{ margin:6px 0 0; font-size:12px; font-style:italic; color:#55604f }
#feResumen .res-obs{ margin:8px 0 0; border:1px solid #f0d78a; background:#fff8e1; border-radius:10px; padding:8px 11px }
#feResumen .res-obs-rot{ display:block; font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#8a6d1f }
#feResumen .res-obs-txt{ margin:3px 0 0; font-size:13px; line-height:1.4; color:#5b4a12 }
#feResumen .res-total{ display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:12px 0 0; padding-top:10px; border-top:1px solid #e2e6df; font-size:14px; font-weight:600; color:#55604f }
#feResumen .res-total strong{ font-size:19px; color:#1f2a1f }
#feResumen .res-cuotas{ margin:4px 0 0; font-size:12.5px; font-weight:600; color:#1f6b34 }
/* §AYL 261 ③ · «Siempre debajo del botón: la transferencia debe hacerse dentro de los próximos 30 minutos» */
#feResumen .res-plazo{ margin:10px 0 0; font-size:12px; line-height:1.4; text-align:center; color:#8a4b00 }
#feResumen /* ⛔⛔⛔ §AYL 333 ④ · 16/10 · «el pedido se confirma cuando VOS mandás el mensaje» ─────────────────────────────────
   Pesa MÁS que el plazo y por eso no comparte su color apagado: el plazo es una condición, esto es una ACCIÓN que si
   no se hace deja el pedido sin entrar. Verde de la casa, no ámbar de advertencia: no está retando a nadie, está
   diciendo cuál es el último paso. */
/* ⛔ §AYL 363 · EN UN RENGLÓN, Y SI NO ENTRA SE ACHICA LA LETRA — NO SE PARTE EN DOS ─────────────────────────────────
   Su frase son 66 caracteres y a 13,5 px no entran en los ~358 px útiles de un teléfono de 390: la letra baja con el
   ancho (`clamp`) y `nowrap` impide que se parta.
   ⛔ Y NO LLEVA `text-overflow: ellipsis`, A PROPÓSITO. Con `nowrap`, recortar con puntos suspensivos se comería el
      final de la frase («…para confirmarlo y poder abo…»), que es PEOR que dos renglones: la familia se queda sin la
      parte que le dice qué tiene que hacer. Si algún día no entra, se ve entera y de más, y el medidor lo canta.
   ⚠ EL NÚMERO NO ESTÁ PINTADO, Y SE DICE: 2,55vw da ~9,9 px a 390 y ~66 × 0,5 em ≈ 327 px de texto contra 358
     disponibles. Es un CÁLCULO, no una medición — el sondeo no se pudo correr porque el puerto de esta copia lo tiene
     tomado otro proceso que sirve OTRA copia. Queda como riesgo abierto (regla 19) hasta mirarlo pintado a 390. */
.res-confirma{ margin:12px 0 10px; font-size:clamp(11px, 3vw, 13.5px); line-height:1.35; text-align:center; color:#1f4d33; font-weight:600; text-wrap:balance }
.res-confirma b{ color:#14532d }
/* ⛔⛔⛔ §AYL 337 ⑦ · 17/10 · LA MARQUESINA DEL PLAZO, JUNTO AL BOTÓN ──────────────────────────────────────────────
   Él: *«un texto deslizable de color llamativo AMARILLO como en las versiones históricas, EN 1 ÚNICA LÍNEA CORRIENDO
   para llamar a la lectura»*.
   ⭐ UNA SOLA LÍNEA, SIN CORTE: el texto va duplicado en el HTML y la tira se mueve media vuelta, así el renglón
      nunca se ve vacío ni salta al reiniciar.
   ⭐ AMARILLO DE VERDAD, no el ámbar apagado del renglón que había antes: lo que corre tiene que verse, que es para
      lo que él lo pidió.
   ⚠ Y SE DETIENE SOLO para quien tiene el movimiento desactivado en su teléfono: ahí queda la línea quieta y legible,
     que sigue diciendo lo mismo. Un aviso que marea no se lee. */
.res-plazo-marq{
  margin:10px 0 0; padding:6px 0; overflow:hidden; white-space:nowrap;
  background:#fef3c7; border:1px solid #fcd34d; border-radius:8px;
  font-size:12.5px; font-weight:700; color:#8a4b00;
}
.res-plazo-marq span{ display:inline-block; padding-left:100%; animation:fe-marq 18s linear infinite }
.res-plazo-marq span + span{ padding-left:0 }
@keyframes fe-marq{ from{ transform:translateX(0) } to{ transform:translateX(-100%) } }
/* ⛔⛔⛔ §AYL 367 · 18/10 · ACÁ ESTABA EL «NO SE MUEVE Y ESTÁ EN DOS LÍNEAS», Y NO ERA UN DEFECTO: ERA ESTA REGLA ─────
   Un `@media (prefers-reduced-motion: reduce)` dejaba la marquesina QUIETA, en DOS LÍNEAS y centrada — que es, palabra
   por palabra, lo que él reportó tres veces. Su sistema tiene «reducir movimiento» activado, así que para él esta
   pieza NUNCA se movió, por más que el resto estuviera bien.
   ⭐ Él la pidió DOS VECES y en mayúsculas: *«¡y SE DESPLACE!»* · *«EN 1 ÚNICA LÍNEA CORRIENDO para llamar a la
      lectura»*. Entre una buena práctica y un dictado suyo repetido, manda el dictado: se mueve siempre.
   ⚠ Lo que se conserva de la idea: el movimiento es LENTO (18 s una vuelta), que es lo que no marea. */
.res-plazo b{ text-decoration:underline }
/* ⛔⛔⛔ §AYL 128 ⑦ · LA CRUZ DE TODO LO QUE AVISA · él: *«asegurarse que todas las alertas tengan la X de cerrar»* ·
   *«(TODAS)»* · *«(SIEMPRE)»*. Una sola pieza para el formulario y para TuFoto (que carga esta hoja): redonda, 30 px, gris
   tenue, en la esquina de arriba a la derecha de lo que avisa. Cerrar nunca hace la acción: es «no ahora».
   ⚠ La regla global de los botones de esta hoja (verde, ancho completo, margen, sombra) se apaga acá, explícita, como en
     `.wv-flota button`. */
button.fe-x{
  position:absolute; top:8px; right:8px; z-index:2;
  width:30px !important; height:30px; min-height:0; padding:0 !important; margin:0 !important;
  display:grid; place-items:center; border:0; border-radius:50%;
  background:#f2f4f1 !important; color:#55604f !important; box-shadow:none !important; cursor:pointer; font-size:0;
}
button.fe-x:hover, button.fe-x:focus-visible{ background:#e4e8e0 !important; color:#1f2a1f !important }
button.fe-x .wv-svg{ width:14px; height:14px }
/* los íconos son DIBUJOS, no fuente · heredan el color del botón y nunca salen como palabra */
.wv-svg{ width:15px; height:15px; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round }

/* §AHJ · el número, FUERA del scroll · una caja, dos mitades ──────────────────────────────────────
   El pedido puede ser largo y por eso su mitad hace scroll; el número NO puede quedar debajo del
   corte, porque es lo que la persona necesita para encontrar la charla. Queda clavado al pie,
   separado por la línea, y se puede seleccionar solo. */
.wv-caja{ margin:8px 0 0; background:#fafbf9; border:1px solid #e2e6df; border-radius:8px; overflow:hidden }
.wv-caja .wv-msg{ margin:0; border:0; border-radius:0; background:transparent; max-height:132px }
.wv-wsp{
  padding:7px 10px; border-top:1px dashed #cfd6c9; background:#f4f6f2;
  font-family:'Rubik',Arial,sans-serif; font-size:12.5px; font-weight:600; color:#1f2a1f;
  letter-spacing:.2px; -webkit-user-select:text; user-select:text;
}

/* ⛔⛔ §AUV · 22/09 · LA SALIDA DE LA BÚSQUEDA, SIEMPRE A LA VISTA ══════════════════════════════════════════════════
   La lupa y la X viven adentro de la tarjeta, y la tarjeta es parte del formulario: con la primera letra que no coincide
   con ninguna escuela el formulario se esconde entero y las dos se van con él. En la computadora quedaba Escape; en el
   teléfono no quedaba nada. Lo encontró la ronda de refutación. Esta X vive en el buscador, que no se esconde, y sólo
   aparece mientras se está buscando con una escuela elegida detrás. */
#btnBuscarCancelar { display: none; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 14px; line-height: 1; color: #555; z-index: 2; }
body.buscando #btnBuscarCancelar { display: inline-grid; }
body.buscando .search input[type="search"] { padding-right: 44px; }
/* ⛔ §AVE · 22/09 · UNA SOLA X. El navegador dibuja la suya adentro de todo `input[type=search]` con texto, y con el
   campo ya expandido en la fila de la tarjeta quedaban DOS pegadas que hacen cosas distintas: la del navegador borra lo
   escrito, la nuestra sale de la búsqueda. Y la del navegador no agrega nada acá: el nombre ya viene seleccionado, así
   que la primera letra lo reemplaza sin borrar antes. Se va la que no tiene trabajo. */
.search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   §AYL ⑥ · 26/09 · HERMANOS · LAS SOLAPAS Y LAS FICHAS
   Él: «establecer una gama de colores hermano uno hermano dos hermano 3 para que el cliente no se pierda» ·
   «la diagramación actual última es casi la óptima… por eso quiero ver que no se rompa con este cambio».
   ⭐ NADA DE ESTO SE VE CON UN SOLO CHICO: la tira nace `hidden` y la ficha del alumno queda como está hoy.
   ⛔ LOS COLORES SON LOS DE SUS FIBRAS (admin.css), no tonos nuevos: verde la casa para el chico del QR, y
      después azul, violeta y amarillo. El NARANJA no entra en la rueda porque en todo el admin significa
      DOCENTE — y acá el docente es otra cosa, la casilla «Personal Institución». Un color con dos
      significados no ayuda a leer, que es justo lo que él pidió que el color resuelva.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
/* ⛔⛔⛔ LA SOLAPA SE APOYA EN UNA LÍNEA, Y ESA LÍNEA ES LO QUE LA HACE SOLAPA ─────────────────────────────────
   Él, 26/09: *«la solapa es un efecto visual, va por dentro de la pastilla; una pastilla pegada a la otra, esa
   pastilla es espantosa»*. Mi primera versión ponía la tira AFUERA de la tarjeta y quedaba una pastillita suelta
   flotando sobre el fondo verde — lo que él llamó espantoso, y tenía razón: sin la línea que sigue hasta el
   borde, un recuadro con el ángulo redondeado arriba no se lee como solapa, se lee como un botón perdido.
   ⭐ EL CANON YA EXISTÍA Y SE COPIA: `.hlbl` de `admin.css`, el rótulo de sección de TODA la app. Es un flex
      donde la solapa lleva `border-bottom:none` y `border-radius:9px 9px 0 0`, y un `::after` con `flex:1`
      estira la línea `--sol-ln` hasta el final. Ese verde apagado lo eligió él el 28/07: «claro pero VISIBLE,
      no blanco ni el gris genérico». Inventar acá un segundo dibujo de solapa habría sido la variante número
      nueve de un elemento que ya tiene una sola forma.
   ⚠ La línea va con `::after` y no con un `border-bottom` en la tira, porque tiene que quedar DEBAJO de las
     solapas inactivas pero DETRÁS de la activa: es el corte que hace que la activa parezca continuar en la
     ficha de abajo. */
/* §AYL ⑳ · 26/09 noche · SIN HUECO ENTRE SOLAPAS. Con `gap: 4px` cada inactiva dibujaba su pedazo de línea y entre
   pedazo y pedazo quedaban 4 px vacíos: la línea de la tira salía cortada, y la de «Datos de Pago», entera. Él: *«deben
   tener continuidad en el diseño el modelo de solapa»*. El aire entre los nombres lo dan los 13 px de cada lado. */
/* §AYL ㊺ · más aire entre la línea de la tira y el primer campo · él: *«es necesario un poco más de aire entre la línea
   de la solapa y el primer renglón… casi que el doble de espacio»*. Eran 12 px y la ficha arrancaba pegada a la línea. */
.hno-solapas {
  display: flex; align-items: flex-end; gap: 0;
  margin: 0 0 22px; position: relative;
}
.hno-solapas::after { content: ''; flex: 1 0 8px; border-bottom: 1px solid var(--sol-ln, #b9cbbc); align-self: stretch; }
/* ⛔⛔⛔ MEDIDO, NO SUPUESTO · la regla base de este archivo es `button { width:100%; margin-top:15px; box-shadow:
   verde; background:#25D366 }` —la del «Enviar a WhatsApp»— y se aplica a TODO botón sin excepción. Con las
   solapas puestas y sin anularla, cada una medía 289 px y se apilaban una debajo de la otra, verdes y redondas.
   Lo vi pintado: la tira decía `display:flex` y aun así salía en columna, porque cada hijo pedía el ancho entero.
   ⚠ Por eso van `width:auto` y `margin:0` EXPLÍCITOS. Es la trampa de este archivo: un botón nuevo hereda el
     aspecto del botón de enviar, y el defecto no se ve en el CSS — se ve en la pantalla. */
.hno-sol {
  appearance: none; -webkit-appearance: none;
  width: auto; margin: 0; box-shadow: none;
  /* ⛔⛔ §AYL ㉑ · 26/09 noche · LA SOLAPA ES EL RÓTULO, Y USA SU TOKEN. Él, viendo la captura: *«los textos del completado
     parecerían quedar enormes en comparación. ¿puede ser?»*. Podía: medido, el dato a 17 px negrita y la solapa a 11,5 px.
     La regla ya estaba escrita (§KC.4): `--rotulo` es «Datos del Alumno/a», «Pedido», «Datos de Pago», y el dato vale
     el rótulo más 1 px. Las solapas reemplazaron a esos títulos y se habían quedado afuera del token. Mismo peso 600 que
     el título de antes; el color no se lava como el de antes para que se siga viendo cuál solapa está abierta.
     ⛔⛔ §AYL ㉖ · ESA ÚLTIMA FRASE FUE EL ERROR. Sin lavar y en 600 (Rubik lo dibuja 700), la solapa le ganaba al dato
     y él lo sintió sin poder nombrarlo: *«hay algo que me sigue chocando»*. Lo abierto ya lo dice la caja —borde alrededor
     y la línea de abajo cortada— y el punto del chico; el color no hacía falta. Color y peso ahora son los del título. */
  /* §AYL 53 · su propio tamaño, más chico que el rótulo · y la CERRADA con fondo lavado, como las del admin: ahí la
     abierta es blanca y las otras van sobre verde apagado, que es lo que hace que se distingan de un vistazo */
  font-family: inherit; font-size: var(--solapa); font-weight: var(--rotulo-peso); letter-spacing: .01em; line-height: 1.1; text-align: left;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px 5px; border: 1px solid transparent; border-bottom: 1px solid var(--sol-ln, #b9cbbc);
  /* ⛔⛔ §AYL 53 · EL COLOR DE LA CERRADA SUBE AL DE LA ABIERTA, y es una corrección MEDIDA, no un gusto: con el
     gris viejo (#8a9a8c) sobre el lavado nuevo el texto daba 2,6:1 —debajo del 3:1 donde el medidor dice que un
     texto deja de ser texto—, y sobre blanco ya venía en 2,95. O sea que al lavar el fondo estaba empeorando algo
     que ya estaba en el filo. ⭐ Ahora la cerrada y la abierta comparten color y la diferencia la hace el FONDO
     (lavada contra blanca) más el borde verde: 3,2:1, mejor que antes, y sin violar la regla §AYL ㉖ de que la
     cerrada nunca sea más oscura que la abierta — es exactamente igual. */
  border-radius: 9px 9px 0 0; background: #eef3ee; color: var(--rotulo-color); cursor: pointer;
  white-space: nowrap;
  /* §AYL ⑥ · el toque cómodo en el teléfono sin agrandar el dibujo (memoria del proyecto) */
  min-height: 32px;
}
.hno-sol .hno-pt { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .45; flex: 0 0 auto; }
.hno-sol:hover:not(.on) { color: var(--rotulo-color); }   /* §AYL ㉖ · como la abierta, nunca más oscura que ella */
/* ⛔ LA ACTIVA NO LLEVA FONDO · él, 26/09, con la captura de «Datos de Pago» sombreada: *«sin el sombreado, sólo
   el texto»*. Queda el borde que la rodea y la línea de abajo CORTADA — el corte es lo único que hace falta para
   que la solapa se lea como que continúa en la ficha. El relleno, además, competía con los campos blancos de
   abajo y ensuciaba una pastilla que es toda blanca.
   ⚠ Acá me fui del canon sin necesidad: el `.hlbl` del admin sí lleva `--st-ok-bg`, pero ese vive sobre un panel
     gris, no adentro de una tarjeta blanca. Copiar el dibujo no es copiar el valor. */
/* ⛔⛔ §AYL ㊺ · 27/09 · LA ABIERTA SE DISTINGUE POR SU LÍNEA · él, probando: *«las líneas de las solapas activas
   deberían oscurecerse un poco más... para ser claramente activos»*. La abierta no lleva fondo (decisión suya, arriba),
   así que lo único que la dibuja es el borde: con el mismo gris de las cerradas, las tres se leían igual.
   ⭐ Se oscurece SÓLO el borde de la abierta. Las cerradas y la línea de la tira se quedan como estaban: si se
      oscurecieran todas, volveríamos a no distinguir ninguna. */
.hno-sol.on {
  /* §AYL 53 · la abierta es BLANCA sobre las cerradas lavadas, igual que en el admin: la diferencia se ve sin leer */
  background: #fff; color: var(--rotulo-color);   /* §AYL ㉖ · el verde lavado del título publicado */
  border-color: var(--sol-ln-on, #7f9a85); border-bottom-color: transparent;
}
.hno-sol.on .hno-pt { opacity: 1; background: var(--hno-c, #143822); }
.hno-sol:focus-visible { outline: 2px solid var(--hno-c, #1f6b34); outline-offset: -2px; }
/* la rueda · los mismos tonos que el admin usa para las fibras */
/* ⛔ LOS TONOS NO CUELGAN DE `.hno-sol`, y no es estilo: el mismo tono lo lleva la solapa Y el punto del renglón
   del resumen, que es lo único que ata las dos cosas («para que el cliente no se pierda»). Atados a `.hno-sol`,
   el punto del resumen caía al valor por defecto y los tres salían verdes — lo vi pintado, no leyendo. */
.hno-t1 { --hno-c: #143822; --hno-bg: #eef4ea; }   /* el verde de la casa · el chico del QR */
.hno-t2 { --hno-c: #0b5f86; --hno-bg: #e3f4fd; }   /* --fib-azul */
.hno-t3 { --hno-c: #5b21b6; --hno-bg: #efe7fd; }   /* --fib-rosa (violeta) */
.hno-t4 { --hno-c: #8a6100; --hno-bg: #fff6cd; }   /* --fib-amar */
/* ⛔ EL «+ Hermano» NO ES UNA SOLAPA MÁS: no es un chico, es una acción. Por eso no se apoya en la línea con el
   ángulo redondeado —eso prometería una ficha que no existe— sino que va suelto al final, en verde y sin caja.
   Es la misma distinción que el admin hace entre una subvista y un botón de acción. */
/* ⛔⛔ §AYL ⑳ · 26/09 noche · «+ HERMANO» SE VE SIEMPRE. Él: *«no se ve el + Hermano»*. Tres cosas lo escondían: el ⑭ le
   sacaba la palabra apenas había un hermano; quedaba en el borde derecho, que la tira ESFUMA cuando los chicos no
   entran; y un rato lo pasé a gris, leyendo «las solapas inactivas en gris» como si lo incluyera. No es una solapa: es
   la acción. Ahora va en verde, con su palabra, FIJO al borde derecho (sticky) y con fondo propio: los chicos que no
   entran se corren POR DEBAJO y se esfuman contra él —eso ya avisa que hay más—, y la tira no esfuma su borde derecho
   mientras él esté (`hno-con-mas`). Sigue apoyado en la línea, así la línea de la tira no se corta. */
/* §AYL ㉕ · 26/09 noche · y en peso normal y el gris oscuro de los textos de ayuda (#4b5563, el de `::placeholder`). Él:
   *«Hermanos no debería estar en letra bold y debería tener un color gris oscuro legible como un texto de ayuda»*. Se ve
   —fijo a la derecha, con su palabra— sin gritar más que las solapas de los chicos. */
.hno-sol.hno-mas-sol {
  background: #fff; border: 0; border-bottom: 1px solid var(--sol-ln, #b9cbbc);
  color: #4b5563; font-weight: 400; border-radius: 0; padding-inline: 9px;
  position: sticky; right: 0; z-index: 1;
}
.hno-sol.hno-mas-sol:hover { color: #1f2937; }
/* los nombres que pasan por debajo se esfuman contra el «+ Hermano», sólo cuando de verdad hay algo pasando */
.hno-solapas.hno-mas-der .hno-sol.hno-mas-sol::before {
  content: ''; position: absolute; top: 0; bottom: 1px; left: -18px; width: 18px; pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
}

/* ⛔ LA FICHA DE UN HERMANO SE VE IGUAL QUE LA DEL ALUMNO, y no es estética: si se vieran distinto, la familia
   leería la segunda como «otro formulario» y volvería a buscar los campos. Reusa los mismos alto, radio y
   tipografía que `.form-row input` ya define más arriba. */
.hermanos-filas { margin-top: 0; }
/* ⛔⛔ ACÁ HABÍA UN `.hno-fila { display:block }` Y ROMPÍA LAS SOLAPAS EN SILENCIO. `[hidden]` esconde porque la
   hoja del navegador le pone `display:none`, y CUALQUIER regla de clase propia la gana: con `display:block`
   puesto, las fichas de los dos hermanos se veían a la vez y la solapa no cambiaba nada. Lo vi pintado — en el
   código el `hidden` estaba bien puesto y el JS lo aplicaba bien. Un `display` que parece inocuo es la forma más
   barata de desarmar un `hidden`, y un div ya es `block` sin que nadie lo diga. */
/* ⛔⛔⛔ §AYL ㉑ · 26/09 noche · LA FICHA DEL HERMANO NO TIENE REGLAS PROPIAS PARA SUS CAMPOS. Él: *«esta diagramación es
   una aberración… los módulos deben quedar todos iguales… la diagramación original es la correcta»*. Acá vivían sus
   renglones propios (`.hno-l1/l2/l3`), el número en un círculo, la ✕ y el importe al lado de Copias: todo eso se fue.
   La ficha se arma con las clases de la del alumno (`form-row`, `fila-alumno`, `fila-pedido`, `ico-caja`, `obs-mini`)
   y se dibuja con SUS reglas — una sola forma, sin copia que se despegue. Lo único propio es lo que la del alumno no
   tiene: «Nivel diferente» y el buscador. */
/* «Nivel diferente» · debajo del grado y el turno, destildado de entrada · él: *«más intuitivo activar la opción otro
   nivel, que desactivar el mismo nivel… debajo de grado o sala y turno»* */
.hno-otro-lbl { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #4b5563; cursor: pointer; margin: 0 0 10px; }
.hno-otro-lbl input { width: 17px; height: 17px; margin: 0; flex: 0 0 auto; accent-color: #1f6b34; }
.hno-otra { margin: 0 0 10px; }
.hno-otra .hno-esc { width: 100%; }
/* ⛔ §AYL ㉑ · «PEDIDO» COMO SOLAPA SEPARADORA, adentro de la misma pastilla. Él: *«la sección pedido perdió su título.
   No debería… y de hecho podría conservar la estética solapa, como una solapa separadora, dentro de la misma
   pastilla»*. Es la tira de «Datos de Pago» (`hno-solapas-fija`), con el aire de arriba que tenía el título. */
.hno-solapas.hno-sep { margin: 14px 0 10px; }
/* ⛔ §AYL ㉑ · LA ✕ AL BORDE DE LA SOLAPA DEL HERMANO · él: *«la X debe ir al borde de la solapa, no ahí»*. Chica y
   gris como un cierre de pestaña; se pone roja al pasar, y el toque se agranda sin mover el dibujo. */
.hno-sol .hno-sol-x {
  margin: -6px -8px -6px 6px; padding: 6px; font-size: 11px; line-height: 1; font-weight: 400;
  color: #9aa59c; border-radius: 50%; flex: 0 0 auto;
}
.hno-sol .hno-sol-x:hover { color: #b3261e; }
/* §AYL ㉑ · en el teléfono, un poco menos de aire a los costados de CADA solapa —las de los chicos, «Pedido» y «Datos de
   Pago» por igual: una sola forma—. Medido: a 360 px, con tres chicos, «Luis» asomaba 21 px por debajo del «+ Hermanos»
   fijo; con 3 px menos por lado y 2 menos en el «+», entran. Con nombres largos siguen pasando por debajo, que es lo
   pedido: el «+ Hermanos» no se tapa nunca. */
@media (max-width: 400px) {
  .hno-sol { padding-inline: 10px; }
  .hno-sol.hno-mas-sol { padding-inline: 7px; }
}

/* ── §AYL ⑥ · la solapa de una pastilla que no tiene nada que elegir (la del pago) ──
   Se ve igual que la activa de arriba, porque ES la activa: su pastilla tiene una sola.
   ⛔ Sin `cursor:pointer` y sin `:hover`: no se toca, y la regla C3 («lo que tiene la manito hace algo»)
      se mide sola con `mirar.ps1 -Medir`. */
.hno-solapas-fija .hno-sol { cursor: default; }
.hno-t0 { --hno-c: #143822; --hno-ln: #cfe0d3; }
/* §AYL ⑳ · «Datos de Pago» con el MISMO espaciado de letras que las solapas de los chicos: era la única diferencia medida
   entre las dos (alto, letra, relleno y radio ya coincidían). Una forma de solapa, sin excepción. */
h2.hno-sol { margin: 0; letter-spacing: .01em; }   /* §AYL ㉑ · el mismo de `.hno-sol` (lo vigila la e2e §AYL ⑳) */

/* ── §AYL ⑥ · EL RESUMEN DE LA FAMILIA · justo encima del Total, y sólo con más de un chico ──
   ⛔ El punto de color es el MISMO de su solapa: es lo único que ata este renglón con la ficha de
      arriba, y es lo que él pidió con «que el cliente no se pierda». */
.hno-resumen { margin: 4px 0 8px; }
/* §AYL ㉛ · «Precio especial para familias con N o más alumnos/as» (§AYL 76) · una línea, en la letra y el gris de los textos de ayuda */
/* §AYL 77 · en cursiva, las dos frases (familias y personal) · él: «en cursiva ambos textos» */
.hno-res-nota { font-size: 12.5px; line-height: 1.35; color: #4b5563; padding: 2px 0 4px; font-style: italic; }
.hno-ren {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px; padding: 5px 0; border-bottom: 1px solid #ededed;
}
.hno-ren:last-child { border-bottom: 0; }
.hno-ren .hno-pt { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; align-self: center; background: var(--hno-c, #143822); }
.hno-ren .hno-quien { font-weight: 600; color: #2f3a2f; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hno-ren .hno-det { color: #6b7280; font-size: 11.5px; white-space: nowrap; }
.hno-ren .hno-imp { margin-left: auto; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; color: #143822; }
/* §AYL ⑯ · 26/09 · el tachado en el MISMO gris que el detalle (#6b7280, 4,8:1). Estaba en #9ca3af y el medidor lo dio
   a 2,54:1: un precio que la familia no alcanza a leer no explica el descuento, que es para lo que está. */
.hno-ren .hno-imp s { color: #6b7280; font-weight: 400; font-size: 11.5px; }
.hno-desc {
  font-size: 11px; white-space: nowrap; border-radius: 6px; padding: 1px 6px;
  background: #eef4ea; color: #1f6b34;
}
/* ⛔ EL DESCUENTO DE PERSONAL VA EN NARANJA, que es el color de DOCENTE en todo el admin (--fib-nara-tx).
   Por eso el naranja no entra en la rueda de los hermanos: acá tiene su significado de siempre. */
.hno-desc-doc { background: #fff2e3; color: #9a5113; }
/* ⛔⛔⛔ §AYL 74 · 28/09 · EL PORCENTAJE VA PEGADO A «carp», Y SE TOCA ═══════════════════════════════════════════════
   Él: *«carp y cop la nomenclatura, y el descuento va junto a carp (xx%)… si no, no se entiende nada»* · *«y el click
   sobre el % de descuento aclara»*. Es un botón de verdad (abre el globito), así que se tiene que ver tocable sin
   parecer una pastilla nueva: el mismo verde del descuento y un subrayado de puntos, que es la forma de «esto explica». */
/* ⚠ `width:auto` va ESCRITO: la regla general `button { width:100% }` del formulario le llega igual, porque un botón es
   de bloque en línea aunque diga `display:inline`. Medido: el «(50%)» ocupaba 112 px en vez de ~40, y le robaba el
   ancho a los nombres. */
.hno-pct {
  display: inline-block; width: auto; min-width: 0; margin: 0; padding: 0 1px; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; vertical-align: baseline; line-height: inherit;
  font: inherit; font-weight: 700; color: #1f6b34; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 2px;
}
.hno-pct:hover, .hno-pct:focus-visible { background: transparent; color: #143822; }
/* el globito del resumen no flota: se abre como una línea debajo de los renglones. Flotando, en 320 px tapaba el
   Total y el botón de enviar, que son justo lo que la familia está mirando en ese momento. */
.hno-resumen .hno-tip { position: static; margin-top: 6px; min-width: 0; max-width: none; }
@media (max-width: 400px) {
  /* ⛔⛔ §AYL 74 · ACÁ VIVÍA `.hno-ren .hno-det { display:none }`: en el teléfono el detalle se escondía. Con el
     porcentaje ADENTRO del detalle, esconderlo era volver a esconder el descuento en el celular —exactamente lo que
     §AYL ㉗ tuvo que deshacer el 26/09—.
     ⛔ Y dejarlo en la misma línea tampoco: medido a 320 px, «1 carp (50%) + 2 cop» dejaba el nombre en «Ju…». En el
        teléfono el detalle BAJA a una segunda línea, alineado bajo el nombre (9 px del punto + 8 de separación), y el
        monto se queda arriba a la derecha. Nada se esconde y el nombre no se corta. */
  .hno-ren { flex-wrap: wrap; row-gap: 1px; }
  .hno-ren .hno-imp { order: 2; }
  .hno-ren .hno-det { order: 3; flex-basis: 100%; padding-left: 17px; }
  /* ⛔⛔ §AYL ㉗ · 26/09 noche · ACÁ VIVÍA `.hno-ren .hno-desc { display:none }` (§AYL ⑭): a 360 px «1 carpeta al 50 %»
     dejaba los nombres en «An…», y la escondí. Él: *«acá el descuento es importante que esté visible… teníamos un modelo
     avanzado… y retrocedemos»*. Arreglé el ancho sacando lo que él pidió ver. Ahora la etiqueta es corta («50 % desc.»)
     y se queda en todos los anchos; lo vigila la e2e §AYL ㉗, que da rojo si alguna regla la vuelve a esconder. */
}
@media (max-width: 340px) {
  /* §AYL ㉗ · en el teléfono más chico (320 px, medido) no entran las cuatro cosas y los nombres quedaban en «J…»: cede el
     precio TACHADO, que es la única repetida — «50 % desc.» ya dice que hubo descuento, y el monto que se paga queda. */
  .hno-ren .hno-imp s { display: none; }
}

/* ⛔⛔ §AYL ⑥ · LA TIRA NO ENVUELVE: SE DESLIZA ──────────────────────────────────────────────────────────────
   Con seis chicos no hay ancho de teléfono que alcance, y envolver deja la fila de arriba flotando lejos de su
   pastilla: la solapa deja de leerse como el borde de la tarjeta, que es todo lo que la hace una solapa.
   ⭐ Deslizar de costado es el gesto que la gente ya conoce de las pestañas del navegador en el celular.
   ⚠ El canon prohíbe el scroll horizontal DE LA PÁGINA, no el de un contenedor que se desliza a propósito.
     `scrollbar-width:none` porque en el teléfono la barra no se usa y acá robaría 6 px del alto de la solapa. */
.hno-solapas {
  flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-top: 2px;                 /* el `outline` del foco no se corta contra el borde de arriba */
  scroll-padding-inline: 12px;
}
.hno-solapas::-webkit-scrollbar { display: none; }
.hno-sol { flex: 0 0 auto; max-width: 46vw; }
.hno-sol > :not(.hno-pt) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ══ §AYL ㉑ · 26/09 noche · EL PIE DE LA SOLAPA · el Subtotal de ese chico, y lo que falta ═════════════════════
   Acá vivía el «✓ Listo», y se fue: *«me parece que la idea de "listo" no es a prueba de dummies»* · *«Sacarlo: valida
   solo»*. En su renglón queda el Subtotal, a la izquierda y en letra normal: *«a la izquierda en el mismo renglón… en
   el borde izquierdo el total parcial… Quizás en letra normal»* · *«Subtotal (1), subtotal (2) según el hermano»*.
   ⭐ Con la forma del Total de abajo («Total $ARS: …»), un escalón más chico: es la parte, no el todo.
   ⚠ El aviso de lo que falta va ARRIBA, en su renglón entero: lo dice «+ Hermanos» cuando la solapa está a medias, y es
     lo primero que hay que leer. */
.hermanos-pie { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin: 2px 0 6px; }
/* ⛔⛔ §AYL ㉓ · 26/09 noche · SIN ESTO EL PIE SE DIBUJABA SIEMPRE: el `display:flex` de arriba le gana al `hidden` del
   navegador, y en la 30.72 toda familia con un solo chico veía el «Listo» suelto debajo de Observaciones. Lo encontró
   la medición del aire al pie de la pastilla; lo vigila un barrido de TODO el formulario en la e2e (§AYL ㉓). */
.hermanos-pie[hidden] { display: none; }
.hno-subtotal { font-size: 15px; font-weight: 400; color: #000; white-space: nowrap; font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; gap: 6px; }
/* ⛔⛔ §AYL ㉗ · 26/09 noche · *«Subtotal "1" con globito… la tipografía de Subtotal levemente más pequeña que el número… y el
   número no debe ser enorme, para no confundir con el total»*. El rótulo 13 px, el número 14 px en su globito, el monto
   14,5 px: los tres por debajo del Total. El globito toma el tono del chico (`.hno-tN`), el mismo del punto de su solapa. */
.hno-subtotal .hno-sub-rot { font-size: 13px; color: #4b5563; }
.hno-subtotal .hno-sub-n {
  font-size: 14px; font-weight: 500; line-height: 1; color: #fff; background: var(--hno-c, #143822);
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
}
.hno-subtotal .hno-sub-monto { font-size: 14.5px; }
/* el aviso: amarillo de «ojo», no rojo de error — la familia no hizo nada mal, le falta terminar */
.hermanos-aviso {
  flex: 1 1 100%; min-width: 0;
  font-size: 12.5px; line-height: 1.4; color: #8a6100;
  background: #fff6cd; border: 1px solid #f3dd8e; border-radius: 8px; padding: 6px 10px;
}
.hermanos-aviso b { font-weight: 700; }
/* ⛔⛔⛔ §AYL 56 · 27/09 · EL AVISO DE LO QUE FALTA, FLOTANTE ═══════════════════════════════════════════════════════
   Acá había un cartel FIJO adentro de la ficha (`.hno-guia`) y él lo rechazó al verlo: *«no quiero ese cartel»* ·
   *«es una aberración confusa»* · *«el cartel va si el pedido está incompleto COMO FLOTANTE»*.
   ⭐ Flotando no ocupa lugar ni empuja la pantalla al aparecer o al irse, que era la mitad de lo confuso. Y va en el
      ÁMBAR del aviso de hermanos (`--fib-amar`, #8a6100 sobre #fff6cd), que ya es el color aprobado para «ojo, te
      falta terminar»: no inventa un color nuevo ni usa el rojo, porque la familia no hizo nada mal.
   ⛔ `pointer-events:none` NO ES UN DETALLE: queda apoyado abajo, donde está el botón de Enviar. Sin esto, un aviso
      que tapa el botón lo deja muerto — y el síntoma sería «le doy a Enviar y no pasa nada», que es exactamente lo
      que él reportó en agosto por otro motivo. Es informativo: el toque lo atraviesa.
   ⚠ `max-width` y los bordes laterales van atados al ancho de la tarjeta, no a la pantalla: centrado y angosto se
     lee como parte del formulario; pegado a los bordes del teléfono, como una notificación del sistema. */
/* ⛔⛔ §AYL 128 ② · 03/10 · CUELGA DEBAJO DEL RENGLÓN QUE FALTA · ya no abajo de la pantalla, lejos del campo en rojo: lo
   ubica `_faltaFlota` con la caja de ese renglón (arriba, izquierda y ancho), y el piquito de arriba apunta al campo. Sigue
   sin interceptar toques (el renglón de abajo se puede tocar a través), salvo su cruz. */
.fe-falta {
  position: fixed; left: 12px; top: 0; z-index: 60;
  box-sizing: border-box; margin: 0;
  padding: 8px 40px 8px 12px; border-radius: 10px;
  background: #fff6cd; border: 1px solid #f3dd8e; color: #8a6100;
  box-shadow: 0 6px 18px rgba(20, 56, 34, .22);
  font-family: 'Rubik', Arial, sans-serif; font-size: 13px; line-height: 1.4; text-align: left;
  pointer-events: none;
}
.fe-falta::before {
  content: ''; position: absolute; top: -7px; left: 18px;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #f3dd8e;
}
.fe-falta button.fe-x { pointer-events: auto; top: 50%; right: 5px; transform: translateY(-50%); width: 28px !important; height: 28px; }
.fe-falta b { font-weight: 700; }
/* ⛔ EL CAMPO QUE FALTA SE MARCA SOLO —al tocar «+ Hermanos», al pasar de solapa y al Enviar— y el rojo se va en
   cuanto lo escribe: dejarlo puesto después de corregido es mentirle a quien ya hizo lo que le pediste. */
/* §AYL 128 ③ · él: *«el resaltado del error, el contorno está bien, pero el sombreado más apagado»*: el borde rojo queda, el
   relleno pasa del rosado a un rosa casi blanco */
input.hno-falta, select.hno-falta { border-color: #b3261e !important; background-color: #fcf5f4 !important; }   /* §AYL ㉑ · el turno es un desplegable */
/* ⛔ EL BOTÓN DE ENVIAR NO SE DESHABILITA cuando falta alguien: un botón gris no explica nada y lo tocan igual.
   Queda vivo, dice a quién le falta, y al tocarlo lleva a esa solapa. Cambia de color para que no parezca que
   ya se puede mandar, pero sigue siendo el mismo botón. */
/* §AYL ⑯ · 26/09 · el ámbar es el de la solapa amarilla (--fib-amar, #8a6100: blanco encima a 5,5:1). Era #b8860b y
   el medidor dio «Faltan datos del hermano 3» a 3,25:1 — justo el botón que tiene que leerse para saber qué falta. */
#submitButton.falta-alguien { background-color: #8a6100; box-shadow: 0 4px 10px rgba(138, 97, 0, .35); font-size: 15px; }

/* §AYL ⑨ · 26/09 · UNA FORMA DE PAGO QUE NO SE PUEDE ELEGIR SE VE APAGADA, y la nota de al lado dice por qué y qué
   hacer. ⛔ Sin esto la casilla deshabilitada se ve igual que una activa: la familia la toca, no pasa nada, y no
   sabe si el formulario se colgó — un elemento que parece botón y no lo es (memoria del proyecto). */
/* §AYL ㉚ · `~` y no `+`: desde que cada renglón lleva su ícono entre la casilla y el texto, el texto ya no está PEGADO a
   la casilla, y con `+` un renglón apagado se veía igual que uno vivo. El ícono se apaga con su texto. */
.otras-formas-label input[type="checkbox"]:disabled ~ .ofl-text,
.otras-formas-label input[type="checkbox"]:disabled ~ .ofl-ico { opacity: .45; }
.otras-formas-label input[type="checkbox"]:disabled { cursor: not-allowed; }

/* ⛔⛔ §AYL ⑬ · 26/09 · CON HERMANOS EN CUOTAS, LA SEÑA ES EL MISMO RENGLÓN QUE EL TOTAL ─────────────────────────────
   Él: *«en cuotas no habrá cuadro editable (para hermanos)»* · y viendo la 30.70, con el número corrido al centro y el
   ícono de enlace al lado: *«corregir la presentación visual, la alineación… debería desaparecer el linkeador de monto…
   debería quedar más "integrado" el diseño y no tanto parche»*.
   ⭐ La primera versión le sacaba el borde al cuadro y dejaba todo lo demás: el relleno de 10 px, el ancho fijo de 120 px,
      el rótulo en negrita con su ícono. Por eso quedaba corrido: seguía siendo un cuadro, disfrazado. Ahora el cuadro se
      esconde (guarda el número) y va un texto con la letra MEDIDA del Total —Rubik 16 px, peso normal, negro, sin
      relleno—, así los dos terminan en el mismo borde derecho. El rótulo con el ícono se va: el texto ya dice «$ARS:».
   ⚠ Con un solo chico no aplica: el renglón no lleva `.sena-hno` y la seña es el cuadro de siempre. */
.sena-container.sena-hno > .sena-label { display: none; }
.sena-auto {
  font-family: inherit; font-size: 16px; font-weight: 400; color: #000; line-height: 1.6;
  white-space: nowrap; margin: 0; padding: 0;
}

/* §AYL ⑭ · 26/09 · EL BORDE DE LA TIRA SE DESVANECE DEL LADO DONDE HAY MÁS · es la única señal de que se puede deslizar,
   porque la barra de desplazamiento está escondida (robaría alto a la solapa). Medido a 360 px: con tres chicos de nombre
   compuesto, el tercero y el «+» quedaban fuera sin ningún aviso. */
/* §AYL ⑳ · el borde derecho se esfuma SÓLO sin el «+ Hermano» (con seis chicos ya no hay «+»): con él, el esfumado lo
   borraba justo a él. Con el «+», lo que pasa por debajo se esfuma contra su propio fondo (regla de arriba). */
.hno-solapas.hno-mas-der:not(.hno-con-mas) { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); }
.hno-solapas.hno-mas-izq { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent); }
.hno-solapas.hno-mas-izq.hno-mas-der:not(.hno-con-mas) { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
/* §AYL ⑬ · 26/09 · y en NEGRITA · él, viendo «$ARS: 25500» debajo del Total: *«acá el a pagar debe tener tipografía bold,
   como hasta ahora»*. Es lo que la familia transfiere: el renglón que más tiene que leerse. La alineación no cambia —los dos
   terminan en el mismo borde derecho—; cambia el peso. */
.sena-auto { font-weight: 700; }