/* ===== Base ===== */
/* ⛔⛔⛔ §AHS · 11/09 · EL TEXTO GIGANTE ADENTRO DE OTRA APP ═══════════════════════════════════════
Él lo vio en el formulario, abierto dentro de un navegador embebido: *«tipografías gigantes y en
bold»*, con unos textos enormes y los de al lado normales. Es el autoajuste de texto de Android,
que decide por su cuenta agrandar «el contenido principal» de cada bloque.
⭐ ACÁ VA POR LA MISMA RAZÓN AUNQUE ÉL NO LA HAYA VISTO TODAVÍA: la Cartelera es **el link que la
escuela reenvía**, así que se abre adentro de WhatsApp, de Instagram y de cualquier app tanto
o más que el formulario. Arreglar sólo la pieza donde apareció el síntoma sería dejar el mismo
defecto esperando en la pieza que más se comparte.
⚠ El `100%` significa «no lo toques», no «achicalo»: donde no hay autoajuste no cambia un píxel. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{box-sizing:border-box;margin:0;padding:0}
body{
margin-top:60px;
font-family:'Rubik',Arial,sans-serif;
padding:10px;
background-color:#d1d9d1; /* Verde pastel igual a fotoescuela */
line-height:1.6;
}
/* Cuando ya se eligió escuela → pegar la tarjeta arriba (igual que PAGOS) */
body.compacto{
margin-top:20px;
}
/* Icon pack (Material Symbols) */
.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}
/* ⛔⛔⛔ §YB · 31/08 · EL DESTAQUE SE GASTA SOLO DONDE SIGNIFICA ALGO ══════════════════════════════
Él: *«el rojo se usa hoy para dos conceptos distintos: la jornada de ausentes y los vencimientos
de pago. Un mismo color diciendo dos cosas no comunica ninguna.»* Y después, dicho como criterio:
*«no destacar algo que es innecesario destacar.»*
⛔ MEDIDO antes de tocar: dieciséis rojos y cinco bordes rosados escritos a mano en este archivo y
en script.js, repartidos entre TRES conceptos —ausentes, vencimientos e «Info adicional»—. La
misma decisión tomada veintiuna veces.
⭐ Y una fecha «a definir» **no es más urgente: es MENOS CIERTA**. Le corresponde el color más
apagado de la pieza, no el más fuerte. Hoy grita justamente por no saberse.
⭐ El ícono se queda en rojo porque no marca el ESTADO: marca el TEMA, y ata la fila con la nota
al pie que usa el mismo ícono.
⚠ Y el rojo de acá no contradice el amarillo del admin: son dos superficies con restricciones
distintas. `--fib-ausentes` es amarillo porque es la marca interna que él ve en pantalla; acá es
rojo porque **el amarillo no imprime** y esto lo lee una familia sobre papel. Sus palabras.
⚠ El dueño es el CSS y no una constante de JS: la mitad de estos colores vive en hojas de estilo y
una constante de JS no puede ser dueña de eso. Es lo que hacía divergir la salida web de la
imprimible — no era descuido, eran dos idiomas. */
:root{
--rasgo-tx-firme: #111; /* una fecha confirmada: se lee fuerte porque es un hecho */
--rasgo-tx-blando: #9CA3AF; /* «a definir»: menos cierta, no más urgente */
--rasgo-bd-firme: #d1d5db;
--rasgo-bd-blando: #e5e7eb;
--rasgo-neutro: #143822; /* lo que NO es la familia ausentes · igual que Valores y Contenido */
--rasgo-ausentes: #DC2626; /* LA MARCA DE LA FAMILIA · el único rojo que queda en la pieza */
--rasgo-info: #906717; /* «leé esto» · el ocre que la pieza ya usa para info y el título */
/* ⚠ EL AMARILLO ACÁ SIGNIFICA «MARCADO», NO «AUSENTES» · y conviene decirlo, porque en el admin
`--fib-amar` SÍ es ausentes. Son dos superficies con dos públicos: en el admin la fibra amarilla
es su marca interna sobre pantalla; acá, sobre un papel que lee una familia, ausentes es ROJO
—el amarillo no imprime, palabras suyas— y el amarillo queda libre para lo que de verdad es:
un resaltador. No es la misma contradicción que acabamos de arreglar: aquélla eran dos sentidos
EN LA MISMA PIEZA. */
--rasgo-info-bg: #FDF6E3; /* resaltador apagado (sin uso desde §YB.4) */
/* §YB.4 · los verdes que la pieza YA tiene: la pizarra y el cuerpo. Nada nuevo en la paleta. */
--rasgo-verde: #143822; /* el verde oscuro de la pizarra */
--rasgo-verde-lavado: #d1d9d1; /* el verde pastel del cuerpo */
}
/* Colores por bloque */
.mi-info{color:#906717} /* libro / título principal */
.mi-level{color:#3B82F6}
.mi-cal{color:#F97316}
.mi-noph{color:var(--rasgo-ausentes)} /* §YB · el ícono es la marca del TEMA: se queda rojo */
/* §AFS · 08/09 · el ícono de «Única jornada» · es el MISMO azul del afiche (#2b6cb0), a propósito:
las dos piezas dicen lo mismo y tienen que verse como lo mismo. Y NO entra en la paleta de
alertas —esto es un dato del cronograma, no una advertencia—: por eso no es el rojo de ausentes. */
.mi-unica{color:#2b6cb0}
.mi-box{color:#7C3AED}
.mi-pay{color:#16A34A}
/* Contenedor principal - ESTADO INICIAL: pizarra */
.container{
background-image: url('https://fotoescuela.com.ar/pizarra.jpg');
background-size: cover;
background-position: center;
background-color: #fff;
padding:20px;
border-radius:12px;
box-shadow:0 4px 18px rgba(0,0,0,.08);
max-width:480px;
margin:0 auto;
}
/* Cuando hay resultados (body.compacto) → fondo verde oscuro pizarra */
body.compacto .container{
background-image: none;
background-color: #143822; /* Verde oscuro pizarra exacto */
}
/* Encabezado */
/* §AVW · 22/09 · el logo a la izquierda y los dos renglones a su derecha · MISMOS números que el formulario (12 px
de separación, logo con su tamaño intacto): las dos páginas se ven iguales o no se ven bien. */
/* §AWA · 22/09 · el texto apoya en la BASE del logo (pedido suyo), y «Foto Escuela» un 30 % más grande con el
subtítulo un poco más chico · los mismos números que el formulario: las dos páginas se ven iguales o no se ven bien */
.title-container{display:flex;align-items:flex-end;justify-content:center;gap:12px;text-align:left;margin-bottom:10px}
.title-texto .breadcrumb-form,
.title-texto .header-breadcrumb{font-size:16px}
.title-texto{min-width:0}
.title-container .logo-header{flex:0 0 auto;margin:0}
.title-container > .logo-link{flex:0 0 auto;display:block;line-height:0} /* §AWY ② · el enlace, del tamaño exacto del logo */
/* ⭐ §AWL · 22/09 · el conjunto se centra en `.title-container` y las dos líneas se centran entre sí acá · el porqué
entero está en el bloque gemelo de `hosting_pagos/styles.css`, y las dos páginas tienen que verse IGUALES */
.title-texto .title-main,
.title-texto .header-breadcrumb{justify-content:center;text-align:center}
h1,h2{color:#fff} /* Texto blanco sobre pizarra */
/* Mantener blanco SIEMPRE (inicial y con resultados) */
body.compacto .title-container h1,
body.compacto .title-main,
body.compacto .title-main .mi-title,
body.compacto .header-breadcrumb,
body.compacto .breadcrumb-form,
body.compacto .mi-breadcrumb {
color:#fff; /* Blanco siempre */
}
/* Logo en header */
.logo-header{
width: 130px;
height: auto;
display: block;
margin: 0 auto 8px auto;
}
/* Título principal SIN icono - igualado tipográficamente */
/* ⭐ §AVX · 22/09 · LA FUENTE DE FOTO ESCUELA EN EL ENCABEZADO ═══════════════════════════════════════════════════
Él: *«¿qué posibilidad real hay de utilizar la fuente Foto Escuela en los encabezados? Donde dice Foto Escuela,
que el primer intento sea cargar la fuente Foto Escuela»*. Es la tiza del logo, así que el nombre escrito y el
dibujado dejan de ser dos letras distintas pegadas.
⭐ PRIMER INTENTO, NO ÚNICO: si el archivo no llega —datos móviles, un navegador embebido, el hosting caído— el
título sale con la fuente de siempre y no pasa nada. Eso es lo que pidió con «el primer intento».
⚠ `font-display: swap`: el texto se ve DESDE EL PRIMER CUADRO con la fuente de respaldo y cambia cuando llega la
buena. Con `block` habría un hueco en blanco en el título de la página, que es peor que un cambio de letra.
⚠ CADA PÁGINA LLEVA SU COPIA, y la dirección es RELATIVA al CSS. Probé primero con una copia sola y la dirección
desde la raíz del sitio: en el hosting habría andado, pero acá no se puede VERIFICAR —en el repo las carpetas se
llaman `hosting_fotoesc` y `hosting_pagos`, no `fotoesc` y `pagos`— y una pieza que sólo se puede probar después
de publicarla es exactamente lo que este repo no acepta. Con la copia al lado anda en los dos lados, se prueba
antes de subir, y ninguna de las dos páginas depende de que la otra esté arriba. El costo es en el servidor, no
en la familia: cada una baja la suya, una vez, y el navegador la guarda un año.
⛔ PESA 105 KB porque es la familia ENTERA (todas las letras, números y símbolos) y el título usa diez. Recortada
a esas diez quedaría en unos 6 KB. No es urgente —anda igual— pero está dicho para cuando se quiera. */
@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;
/* §AVX · el primer intento es la fuente de Foto Escuela; lo que sigue es exactamente lo que se veía antes */
font-family:'FotoEscuela','Rubik',Arial,sans-serif;
letter-spacing:.01em;
font-size:34px; /* §AWA · 30 % más grande (26 px antes), igual que el formulario */
line-height:1.05;
}
.title-main .mi-title{
display:none; /* Ocultar icono */
}
h1{
font-size:26px;
margin-bottom:0px;
font-weight:500; /* Más delgado, como fotoescuela */
line-height:1.2;
}
/* Cartelera Virtual SIN icono - más cerca del título */
.header-breadcrumb{
margin-top:0px; /* Pegado al título */
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; /* Normal, sin bold */
font-style:normal; /* Sin cursiva */
}
.breadcrumb-form strong{
font-weight:400; /* Quitar bold del strong también */
}
.breadcrumb-form em{
font-style:normal; /* Quitar cursiva del em también */
}
.mi-breadcrumb{
display:none; /* Ocultar icono */
}
/* Buscador */
input,button{font-family:'Rubik',Arial,sans-serif;font-size:14px}
input{
background:rgba(247, 247, 247, 0.75);width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;margin-bottom:10px
}
/* X del input search siempre visible */
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
height: 16px;
width: 16px;
background-image: url('data:image/svg+xml;utf8,');
background-size: 16px 16px;
cursor: pointer;
opacity: 1; /* Siempre visible */
}
/* Input opaco cuando hay resultados */
body.compacto input{
background:#f7f7f7;
}
.btn{
background:#fff;border:1px solid #ddd;border-radius:999px;padding:10px 12px;cursor:pointer;width:100%;
box-shadow:0 1px 2px rgba(0,0,0,.04),0 2px 8px rgba(0,0,0,.02);
transition:background .15s ease,transform .05s ease,box-shadow .15s ease;
}
.btn:hover{background:#f9f9f9}
.btn:active{transform:translateY(1px);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.btn-primary{
color:#fff;
background:#25D366;
border:1px solid #20bf59;
}
.btn-primary:hover{filter:brightness(.96)}
.btn-primary:active{transform:translateY(1px)}
/* Autocompletado */
.search{position:relative}
.suggestions{
position:absolute;left:0;right:0;top:100%;
background:#fff;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:#fff;border:0;padding:10px;cursor:pointer
}
.suggestions button:hover{background:#f7f7f7}
.suggestions button.active{background:#efefef}
/* Tarjetas - BLANCO/BLANCO-TIZA */
.card{
border:1px solid #ededed;border-radius:12px;padding:12px;margin:10px 0;background:#fff;
/* §JZ.7 · 27/08 · el ancla de los botones de acción · ver `.action-buttons` */
position:relative;
}
/* §HV · 22/08 · EL MISMO VERDE OSCURO DEL FONDO DE LA PÁGINA, no negro. Pedido del operador para las
dos páginas: «los títulos —Valores, Plazos, Contenido— en lugar de negro, ayudaría más a orientar
la lectura que tengan exactamente el mismo verde oscuro del fondo».
⛔ SE APLICÓ EN PAGOS Y ACÁ NO, Y YO DIJE QUE SÍ. Él lo vio: «nunca pusiste los títulos de color
verde oscuro como en formulario». La regla quedó escrita en un solo archivo de los dos, que es
la misma forma de falla de siempre — media aplicación contada como completa. */
.card>h3{text-align:left;color:#143822}
.content-center{text-align:center}
/* Header escuela */
.school-header{
/* ⭐ §AVE · 22/09 · DOS PISOS, como la del formulario: arriba los íconos, abajo el logo y el nombre con todo el ancho */
display:flex;flex-direction:column;gap:8px;
/* ⛔ §JZ.7 · LA BANDA DE LOS BOTONES · el logo arranca DEBAJO de ellos y por eso no hay solape
posible, con cualquier logo y a cualquier ancho.
Se eligió esto y no «achicarle el ancho al logo», que fue mi primer intento y estaba MAL POR
PARTIDA DOBLE. Medido en la página viva:
· el descuento que puse (84 px) no alcanzaba: el logo está CENTRADO, así que para despejar la
esquina hay que descontar el doble. A 320 px seguía pisando.
· y con el descuento correcto (148) el logo de JI923 caía de 162 px a 147 en un teléfono de
360 y a 107 en uno de 320 — un tercio menos justo en el aparato donde lo mira la familia.
· peor: un logo apaisado de 300 px se habría pisado HASTA EN ESCRITORIO.
Esta banda cuesta 26 px de alto UNA vez y no toca el logo. Medido: 186 px de tarjeta en los
cuatro anchos, contra 129-160 variables del otro camino. */
padding-top:0; /* §ATY.3 · la banda de §JZ.7 ya no hace falta: el logo va a la izquierda, lejos de los botones */
}
.school-logo{
max-height:56px;max-width:84px;width:auto;height:auto;object-fit:contain;margin-bottom:0;flex:0 0 auto; /* §ATY.3 · sólo topes: nunca se deforma */
}
.school-title-row{
/* ⛔ §JZ.7 · acá había un `position:relative` que existía SÓLO para anclar los botones. Se fue con
ellos: si se queda, el `absolute` de abajo se sigue anclando a esta fila y el arreglo no pasa. */
/* §AWO · 22/09 · el conjunto logo+nombre centrado en la pastilla, igual que en el formulario · el porqué entero
está en el bloque gemelo de `hosting_pagos/styles.css`; las dos pastillas tienen que verse iguales */
flex:0 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;
}
/* §AVV · 22/09 · el título principal por encima de los de sección · él: «no me convence que el título principal sea
menor a todos los demás títulos, ahí hay algo muy serio para ajustar». Medido: el nombre salía a 16 px y los
títulos de las tarjetas («Cronograma», «Valores») a ~18,7. Era la jerarquía al revés. */
/* §AWO · centrado entre sí y sin estirarse · era `text-align:left` con `flex:1 1 auto`, que empujaba el logo al borde */
.school-title{font-size:28px;font-weight:700;text-align:center;color:#000;line-height:1.2;flex:0 1 auto;min-width:0}
/* ⭐ §ATY.3 · 22/09 · LA TARJETA IGUAL A LA DEL FORMULARIO · él: *«las pastillas de escuela se deben ver igual en cada
página… comprimir la pastilla principal para empatarla con la de pagos»*. El primer renglón del nombre les deja su
lugar a los tres botones de la derecha (compartir, descargar, la X) y los que siguen usan el ancho entero; con la
barra «|» (§ATZ) el segundo renglón va más chico y más liviano. */
/* §AVU · los íconos casi pegados al borde de arriba, igual que en el formulario: la pastilla abre con 6 px */
.school-card{padding:6px 12px 10px}
/* §AVU · la lupa sola a la izquierda y los TRES a la derecha (compartir, descargar, la X) · la misma forma que el
formulario, que es lo que él pidió: «el ícono buscar a la izquierda… y los tres íconos a la derecha» */
.esc-top > .action-buttons{margin-left:auto;flex:0 0 auto}
/* ⛔⛔⛔ §AVZ · 22/09 · EL DESPLIEGUE AL PASAR POR ENCIMA SE FUE, Y ROMPÍA LA PÁGINA ═══════════════════════════════
Él: *«en Cartelera no funciona ningún botón, desaparecen»* · *«lo del botón buscar está andando mal, la animación
no funciona, la omitimos: se debe apretar el botón y aparecer el buscador como en tu primera versión»*.
⛔ Y tenía razón, con una causa que da vergüenza: yo había escrito que al pasar el mouse por la fila se escondieran
los otros íconos para dejarle 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 entera
quedaba inutilizable. Un control que se esconde cuando te acercás es peor que uno que no está.
⭐ Queda la forma que él pidió y que ya andaba: se TOCA la lupa y aparece el buscador. Sin animación, sin hover,
sin estados intermedios. El hueco sigue existiendo —es donde se muda el campo— pero sólo se abre con el modo
búsqueda, que enciende su clic y nada más. */
.esc-busca-hueco{flex:0 1 auto;min-width:0;max-width:0;overflow:hidden}
/* ⛔⛔⛔ §AWC · 22/09 · Y AL ABRIRSE EL RECORTE SE VA · él: «por algún motivo el buscador ya no es tan inteligente
como antes». 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. O sea que 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}
body.buscando .esc-top > *:not(.esc-busca-hueco){display:none}
body.compacto .esc-busca-hueco > .search{display:block}
.esc-busca-hueco > .search{margin:0}
/* ⛔ §AVE · 22/09 · acá vivía la reserva de 100 px del primer renglón del nombre. Se fue con los botones al piso de
arriba: el nombre usa el ancho entero desde el primer renglón, que es lo que él pidió del otro lado y vale acá igual. */
.esc-top{display:flex;align-items:center;gap:6px;min-height:28px}
.esc-id{display:flex;align-items:center;justify-content:center;gap:12px;min-width:0;flex:1 1 auto} /* §AWO · el bloque, centrado en la pastilla */
/* ⛔ §AVE.3 · 22/09 · acá vivía la media query que en la computadora volvía a un renglón. Se fue: él pidió la MISMA
forma en los dos anchos —«los íconos, tanto en responsive como en PC, deben tener esa reserva de espacio superior,
así todo lo demás sucede en el renglón por debajo y la información puede desarrollarse y no pisarse»—. */
.school-title.dos .nom-1{display:block;font-weight:700}
.school-title.dos .nom-2{display:block;font-weight:500;font-size:13px;color:#555;margin-top:2px}
.esc-lupa{flex:0 0 auto}
body.buscando .esc-lupa{background:#eef4ea;border-color:#143822}
body.buscando .esc-lupa svg{stroke:#143822}
/* §ATY.3 · con una escuela a la vista el buscador se esconde detrás de la lupa; en el inicio queda abierto */
body.compacto:not(.buscando) .search{display:none}
@media (max-width:420px){ .school-logo{max-width:64px;max-height:48px} }
/* ⛔ §JZ.7 · 27/08 · LOS BOTONES SE FUERON A LA ESQUINA SUPERIOR DERECHA DE LA PASTILLA.
Él: *«los botones deben estar en la pastilla de escuela en el margen superior derecho
(actualmente están en el margen inferior y pisan el nombre de la escuela)»*.
Y no era una impresión suya: está medido. Los botones estaban `absolute` DENTRO de la fila del
título, o sea FUERA DEL FLUJO, mientras el nombre se centraba en esa misma fila usando el ancho
completo. Con nombre largo —«J.I. Nº923 · Albert B. Sabin»— el solape es:
430 px → no se pisan (por 2 px)
390 px → 18 px encima
360 px → 33 px encima
320 px → 53 px encima
La mayoría de los teléfonos están entre 360 y 414. **O sea que casi todas las familias veían el
nombre tapado, y en escritorio no se notaba nunca.** Por eso podía sobrevivir meses.
Ahora se anclan a `.card` —la pastilla— y no a la fila del nombre. El nombre recupera el ancho
entero y no hay nada que lo pise a ningún ancho. */
/* ⭐ §AVE · 22/09 · EN EL FLUJO, en el primer piso de la tarjeta. Estaban anclados con `absolute` a la esquina de la
pastilla, y por eso el nombre tenía que reservarles 100 px de su primer renglón. Ahora empujan para abajo el logo y
el nombre en vez de robarles ancho — y el solape de §JZ.7 sigue siendo imposible, porque ya no se cruzan nunca. */
.action-buttons {
display: flex;
gap: 8px;
flex: 0 0 auto;
margin-left: auto;
}
/* Botón compartir */
.share-btn{
display:inline-grid;place-items:center;width:28px;height:28px;
border-radius:50%;border:1px solid #e2e2e2;background:#f7f7f7;color:#444;cursor:pointer;
}
.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}
/* Botón descargar */
.download-btn{
display:inline-grid;place-items:center;width:28px;height:28px;
border-radius:50%;border:1px solid #e2e2e2;background:#f7f7f7;color:#444;cursor:pointer;
}
.download-btn .mi{
font-size:16px;
line-height:1;
}
.download-btn:hover{background:#efefef}
/* Cronograma – filas de turnos y cursos */
.turn-row{
display:flex;
align-items:center;
gap:6px;
margin:2px 0;
justify-content:center;
flex-wrap:nowrap;
}
.turn-label{
display:inline-block;
font-size:11px;
color:#888;
white-space:nowrap;
text-transform:uppercase;
letter-spacing:0.3px;
flex-shrink:0;
}
.turn-courses{font-weight:700;color:#000}
/* Nota "Único día de la foto grupal" (debajo de la fecha) */
.cronogram-note{
font-style:italic;
font-size:12px;
color:#444;
margin-top:2px;
text-align:center;
}
/* Línea punteada TM/TT */
.tt-sep{
width:50%;
border-top:1px dotted #aaa;
margin:6px auto;
}
/* Divider entre días + fecha subrayada */
.date-line{
border-top:1px solid #ddd;
padding-top:6px;
margin-top:8px;
width:70%;
margin-left:auto;
margin-right:auto;
}
.date-line b{
display:block;
text-decoration:underline;
margin-bottom:2px;
font-size:17px;
color:#000;
}
.date-line.first{border-top:none}
/* Bloques de nivel dentro de Cronograma */
.cron-level-block{
margin-top:10px;
padding-top:10px;
position:relative;
}
/* Línea separadora fina antes de cada nivel de Cronograma */
.cron-level-block::before{
content:'';
display:block;
width:70%;
height:2px;
margin:2px auto 8px auto;
background:rgba(59,130,246,.35);
border-radius:999px;
}
/* Título de nivel dentro de Cronograma (ícono + texto) */
.cron-level-title{
display:flex;
align-items:center;
justify-content:center;
gap:6px;
font-size:14px;
font-weight:700;
color:#3B82F6;
margin-bottom:4px;
text-align:center;
}
/* Subtítulos de grupos / niveles (valores y contenido) */
.sublevels{
font-size:12.5px;
font-weight:700;
color:#222;
margin-top:-4px;
margin-bottom:6px;
text-align:center;
}
/* Línea separadora en Valores (mantiene el color verde) */
.sublevels-valores{
color:#16A34A;
position:relative;
padding-top:8px;
}
.sublevels-valores::before{
content:'';
display:block;
width:70%;
height:2px;
margin:2px auto 8px auto;
background:rgba(22,163,74,.35);
border-radius:999px;
}
/* Línea separadora en Contenido (mantiene el violeta) */
.sublevels-contenido{
color:#7C3AED;
position:relative;
padding-top:8px;
}
.sublevels-contenido::before{
content:'';
display:block;
width:70%;
height:2px;
margin:2px auto 8px auto;
background:rgba(124,58,237,.35);
border-radius:999px;
}
/* Valores y plazos */
.price-list{margin:6px 0}
.price-line{
display:flex;
justify-content:center;
gap:8px;
margin:2px 0;
flex-wrap:wrap;
color:#000;
}
/* ⛔ 27/08 · ESTOS DOS PESOS NO SON LOS QUE SE VEN. Al final del archivo, §IF los pisa (400 y 700)
para que el rótulo vaya en texto normal y el precio en negrita, como en el afiche de papel.
Este puntero existe porque sin él la próxima persona cambia acá, recarga, y no pasa nada — que es
exactamente el rato que se perdió el 23/08 arreglando la implementación que no era.
⚠ Y `.price-line` de arriba TAMPOCO se puede borrar: el bloque de §IF sólo redefine `flex-direction`,
`gap` y `margin`. El `display:flex` y el centrado salen de acá. Son un par, no un duplicado. */
.price-line .lbl{font-weight:600}
.price-line .val{font-weight:700}
.price-note{font-style:italic;font-weight:400;font-size:12px;color:#444}
.price-note-block{
font-style:italic;
font-size:12px;
color:#444;
margin-top:-2px;
line-height:1.3;
text-align:center;
}
/* Deadlines */
.deadline-line{margin:2px 0;text-align:center;color:#000}
.deadline-line strong.underline{text-decoration:underline}
/* ⛔ §YB · LOS VENCIMIENTOS DEJAN EL ROJO. Era el otro concepto que lo usaba, y por eso el rojo no
decía nada. La jerarquía la sostiene el PESO —esto ya es un `strong`—, no el color: un saldo
tardío no deja de destacarse, se destaca con lo que le corresponde. */
.deadline-line strong.red{color:var(--rasgo-tx-firme)}
/* Lista de "Contenido de la carpeta" */
.detail-list{margin-top:6px;text-align:center}
.detail-item{
display:flex;
gap:6px;
margin:2px 0;
justify-content:center;
color:#000;
}
.detail-item .tag{font-weight:600}
/* Lema - siempre blanco */
.lema-wrap{margin-top:10px;text-align:center}
.lema{font-size:13px;color:#fff}
/* Botón pago electrónico */
.btn-pay,.btn-gal{
display:inline-flex;align-items:center;gap:8px;
padding:6px 14px;
border:1px solid #20bf59;border-radius:999px;
background:#25D366;color:#fff;text-decoration:none;cursor:pointer;
box-shadow:0 2px 10px rgba(37,211,102,.25),0 1px 2px rgba(0,0,0,.07);
transition:filter .15s ease,transform .05s ease,box-shadow .2s ease;
}
.btn-pay:hover,.btn-gal:hover{filter:brightness(.96)}
/* ⛔ §AWR · 22/09 · acá vivía el rótulo que se cambiaba al pasar por encima («Pedidos Elec.» → «Formulario Pedidos»,
§AWB). Se fue: yo había leído «en over: Formulario Pedidos» como un texto que muta, y él lo aclaró con la captura
delante: *«lo de Formulario era una ETIQUETA, no que cambie el texto; el texto es siempre el mismo. Queda horrible
el cambio de etiqueta»*. El botón dice siempre lo mismo y «Formulario Pedidos» va en el globito, que es lo que
una etiqueta es. Un botón cuyo nombre cambia mientras lo mirás obliga a leerlo dos veces. */
.btn-pay:active,.btn-gal:active{transform:translateY(1px);box-shadow:0 1px 4px rgba(0,0,0,.12)}
.btn-pay .mi,.btn-gal .mi{vertical-align:middle;font-size:1.1em}
/* §AYL 108 · «Ver las fotos» al lado de «Pedidos Elec.», con su misma forma (su clase propia: «Pedidos Elec.» sigue siendo
el único btn-pay, que es como lo aísla su guardián, §AWR); si no entra en el renglón, baja debajo, centrado */
.gal-ver:not(:empty){display:inline-block;margin:6px 0 0 8px}
/* ===== FAQ - siempre blanco ===== */
.faq-wrap{
margin-top:12px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
}
.faq-link{
background:transparent;
border:none;
padding:0;
box-shadow:none;
color:#fff; /* Siempre blanco */
text-decoration:none;
font-size:14px;
}
.faq-link:hover{text-decoration:underline;background:transparent}
.faq-icon{
width:22px;height:22px;
display:inline-flex;align-items:center;justify-content:center;
border-radius:50%;
background:#666;
border:none;
color:#fff;
text-decoration:none;
font-weight:400;
font-size:12px;
line-height:1;
}
.faq-icon:hover{filter:brightness(.95)}
/* ===== + INFO (acordeón) – botón destacado con animación sutil ===== */
.info-acc-wrap{margin-top:8px}
.info-acc-btn{
display:inline-flex;align-items:center;gap:8px;justify-content:center;
width:100%;
padding:10px 14px;border-radius:999px;
/* ⛔⛔ §YB · «Info adicional» ERA UN TERCER CONCEPTO VESTIDO DE AUSENTES, y no lo vi hasta abrir
el botón: no es una jornada ni un vencimiento, es un desplegable de información. Con TRES cosas
usando el mismo rojo, el rojo no podía significar ninguna de las tres.
⭐ Y SIGUE LLAMANDO A SER LEÍDA, que es lo que él preguntó. Lo que la hacía llamar nunca fue el
rojo: es que ocupa el ancho entero, va en negrita a 15 px, tiene sombra y dos cheurones. Eso
no se toca. Lo único que cambia es de qué color llama — y toma **el ocre que ya es suyo**,
el de `.mi-info`, que es el del ícono que lleva adentro y el del título de la pieza.
⭐ En un afiche el rojo se lee como PROBLEMA. «Info adicional» no es un problema: es un «leé
esto». El ocre dice importante sin decir alarma.
⭐ Y el que más gana es ausentes: con el rojo repartido en tres cosas no destacaba ninguna.
Ahora que es el único rojo de la pieza, salta de verdad. */
/* ⭐ EL DESTAQUE ES UN RESALTADOR, NO UN MOVIMIENTO. Él propuso tres formas —animación, animación
recursiva, o fondo amarillo apagado— y las dos primeras las descarta su propio precedente: al
bajar el cartel de «hay una versión nueva» dijo *«un aviso que suena siempre no informa, SOLO
APORTA RUIDO»*. Una animación en bucle, en una página que se mira una vez, es eso.
⛔ Y hay una razón que decide sola: **una animación no sobrevive a una exportación**. Esta pieza
se baja como imagen; si el destaque vive en el movimiento, en el JPG no existe.
⭐ El amarillo apagado es su propia metáfora: es el RESALTADOR de papel, de donde salió toda su
paleta de fibras. Estático, imprime, y se lee como «esto está marcado» en cualquier soporte. */
/* §YB.4 · y el ocre también se fue. Él: *«no me gusta el dorado… debe estar más integrado a la
paleta establecida»*, y pidió verde oscuro en reposo y verde lavado al pasar por encima.
Los dos ya viven en la pieza: `#143822` es la pizarra y `#d1d9d1` es el cuerpo. */
border:2px solid var(--rasgo-verde); /* Borde más grueso */
background:#fff;
color:var(--rasgo-verde);
font-weight:700;
font-size:15px; /* Letra un poco más grande */
/* §YB · la sombra también era ROJA · acompaña al ocre, o el rojo se cuela por abajo */
box-shadow:0 2px 4px rgba(20,56,34,.15), 0 4px 12px rgba(20,56,34,.08);
/* el resaltador tiene que despegarse del fondo crema de la pieza, no fundirse con él */
border-radius:999px;
cursor:pointer;
transition:all .2s ease;
position:relative;
}
/* Flechas V animadas en +Info */
@keyframes chevron-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(3px); }
}
.info-chevron {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
fill: none;
flex-shrink: 0;
animation: chevron-bounce 1.4s ease-in-out infinite;
transition: transform .3s ease;
}
/* Cuando está abierto: rotar 180° (V → ∧) */
.info-acc-btn[aria-expanded="true"] .info-chevron {
transform: rotate(180deg);
animation: none;
}
.info-acc-btn:hover .info-chevron {
animation: none;
transform: translateY(2px);
}
/* Efecto de entrada + pulso continuo para invitar a leer */
@keyframes info-entrada {
0% { opacity:0; transform:translateY(6px) scale(0.97); }
60% { opacity:1; transform:translateY(-2px) scale(1.01); }
100% { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes pulse-info {
0%, 100% { box-shadow:0 2px 4px rgba(220,38,38,.15), 0 4px 12px rgba(220,38,38,.08); }
50% { box-shadow:0 2px 8px rgba(220,38,38,.30), 0 6px 18px rgba(220,38,38,.18); }
}
/* ⛔⛔⛔ §YB.4 · 31/08 · ACÁ ESTABA EL «SIGUE ROJIZO EN OVER», Y ERA MÁS QUE UN COLOR ═══════════════
Él, después de la primera pasada: *«no me gusta el dorado, y en over sigue rojizo… debe estar más
integrado a la paleta establecida»*.
⛔ Y no era sólo el hover: había un `pulse-info` **latiendo en rojo todo el tiempo**, que es
exactamente lo que su propio canon rechaza —*«algo que se mueve todo el tiempo deja de mirarse
a los treinta segundos»*— y encima con el color que acabábamos de liberar. O sea que mientras
yo sacaba el rojo de un lado, seguía pulsando del otro.
⭐ Ahora manda su indicación, con los verdes que la pieza YA tiene: blanco de fondo y verde oscuro
—el mismo `#143822` de la pizarra— en reposo; verde lavado —el `#d1d9d1` del cuerpo— al pasar
por encima. Nada nuevo en la paleta: dos colores que ya estaban.
⭐ El latido se va y queda el gesto del ícono (§YB.3), que es periódico y se frena al acercarse.
Uno llama; el otro no dejaba mirar. */
.info-acc-btn{
animation: info-entrada .45s ease-out both;
}
.info-acc-btn .mi{ color:inherit; font-size:1.15em; }
.info-acc-btn:hover{
background:var(--rasgo-verde-lavado);
border-color:var(--rasgo-verde);
transform:translateY(-1px);
box-shadow:0 3px 8px rgba(20,56,34,.18), 0 6px 16px rgba(20,56,34,.10);
}
.info-acc-btn:active{
transform:translateY(0);
box-shadow:0 1px 3px rgba(20,56,34,.20);
}
/* Panel del acordeón */
.info-panel{
overflow:hidden;
max-height:0;
transition:max-height .28s ease;
}
/* ⛔⛔⛔ §ABF · 05/09 · «NO SON PARA NADA IGUALES, CUANDO DEBERÍAN SER IGUALES» ═══════════════════
Él, con las dos pantallas al lado: la Cartelera y el «Info adicional» del formulario de las
familias muestran EL MISMO CONTENIDO —los renglones de la columna de info, con sus cuatro
marcas— y no coincidía un solo número entre las dos hojas:
pieza Cartelera (antes) Info adicional
título 14px #000 12px #143822 (700)
cuerpo 13.5px #333 12.5px #111
renglón padding 6px 10px 6px 12px padding 7px 9px
radio 3px 4px
✓ ok #2e8b57 sobre #f0f9f3 #143822 sobre #f2f7f3
⚠ warn #d97706 sobre #fff8eb #d97706 sobre #fdf8ef
✗ no #9ca3af sobre #f3f4f6 #9CA3AF sobre #fafafa
i note #2563eb sobre #eff6ff #2563eb sobre #f2f6fd
⭐ MANDAN LOS NÚMEROS DE PAGOS, y no por gusto: son los que él dictó renglón por renglón en §ZI.6
—*«faltan los títulos, que son muy importantes en la versión de PAGOS»*, y el verde *«de la
página, no un gris más: separa sin competir con los renglones de color»*—. Elegir los otros
sería tirar una decisión suya para conservar una que nadie tomó.
⚠ El verde es el MISMO de la marca en las dos aplicaciones, así que el título deja de ser negro
acá sin traer un color nuevo a la página.
⛔ Y no se copia por costumbre: si mañana uno de los dos lados se retoca, el guardián §ABF de la
suite compara las dos hojas y da rojo. Cuatro copias del mismo criterio no se mantienen
iguales —§ZO ya lo dejó escrito con los botones—: se separan en el primer retoque, y eso fue
exactamente lo que él vio. */
.info-sec{padding:8px 10px}
.info-sec h4{font-size:12px;font-weight:700;margin:10px 0 2px;color:#143822;letter-spacing:.01em}
.info-sec:first-child h4{margin-top:0}
/* ⛔⛔⛔ §AMV · 12/09 · «EMPATÁ EL INTERLINEADO DE +INFO PARA COMPRIMIR» · pedido suyo ────────────
Mandó las dos pantallas al lado: el formulario de pagos con la lista apretada y la Cartelera con
la misma lista mucho más suelta. **Es el MISMO texto y las dos deberían leerse igual.**
⛔ La causa no era el margen: `renderLines` une los renglones con un salto de línea y esta caja
tenía `white-space:pre-wrap`, así que **cada salto se dibujaba como un renglón vacío** — unos
18 px, encima de los 6 del margen. Contra los 6 px limpios de pagos.
⭐ Se copia la receta que ya usa `.info-adic-panel` en pagos, que es el dueño de este aspecto:
columna con `gap`, sin márgenes, y el `pre-wrap` baja al renglón —donde sí hace falta, porque
el texto del Sheet puede traer saltos propios— en vez de vivir en el contenedor.
⚠ Y así quedan idénticas: mismo `gap`, mismo `padding`, mismo cuerpo y mismo interlineado. */
.info-text{
display:flex;
flex-direction:column;
gap:6px;
font-size:12.5px;
color:#111;
line-height:1.45;
text-align:left;
}
.info-text .info-line{
display:block;
white-space:pre-wrap;
padding: 7px 9px;
border-left: 3px solid #d1d5db;
border-radius: 4px;
background: #fafafa;
line-height: 1.45;
}
.info-text .info-ok { border-left-color:#143822; background:#f2f7f3; }
.info-text .info-warn { border-left-color:#d97706; background:#fdf8ef; }
.info-text .info-no { border-left-color:#9CA3AF; background:#fafafa; }
.info-text .info-note { border-left-color:#2563eb; background:#f2f6fd; }
/* Footer – idéntico a fotoescuela/procesosdigitales */
.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;
}
.logo-pd {
width: 90px;
height: auto;
margin-bottom: 6px;
}
.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; }
/* Toast */
.toast{
position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);
background:#222;color:#fff;padding:10px 14px;border-radius:10px;
box-shadow:0 8px 18px rgba(0,0,0,.2);opacity:0;pointer-events:none;
transition:.25s ease;z-index:9999;font-size:13.5px
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* §AYL 128 ⑦ · la cruz del aviso (el resto no recibe toques) */
.toast{padding-right:44px}
.toast .toast-x{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:28px;height:28px;padding:0;margin:0;
border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:grid;place-items:center;cursor:pointer;pointer-events:auto}
.toast .toast-x:hover{background:rgba(255,255,255,.28)}
/* §AYL 132 · 04/10 · y SÓLO con el aviso a la vista: escondido (transparente), la cruz seguía recibiendo toques y quedaba un
botón invisible de 28 px abajo al centro que se comía el toque de la familia (lo encontró la auditoría del sitio entero) */
.toast:not(.show) .toast-x{pointer-events:none}
.toast .toast-x svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
/* Fade-in */
.fade-in{animation:fadeInUp .28s ease-out both}
@keyframes fadeInUp{
from{opacity:0;transform:translateY(6px)}
to{opacity:1;transform:translateY(0)}
}
/* Responsive */
@media(max-width:768px){
h1{font-size:22px}
h2{font-size:16.2px}
input{font-size:14px}
}
/* ===== Bloque gris de nivel + pills de jornada (web) ===== */
.nivel-block {
background: #f2f2f2;
border-radius: 10px;
padding: 8px 10px 6px; /* ← reducido de 10px/8px */
margin-bottom: 6px; /* ← reducido de 8px */
}
.nivel-block-single {
background: none;
padding: 0;
margin-bottom: 0;
}
.nivel-block-title {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
color: #555;
margin-bottom: 6px;
text-align: center;
}
/* Para el cronograma, el título de nivel va en azul */
.nivel-block .nivel-block-title-level {
color: #3B82F6;
font-size: 14px;
}
.nivel-block-pills {
display: flex;
flex-direction: column;
gap: 6px;
}
.jornada-pill {
background: #fff;
border: 1px solid #d1d5db;
border-radius: 8px;
padding: 6px 12px; /* ← reducido de 8px a 6px arriba/abajo */
text-align: center;
}
.jornada-pill-date {
font-size: 15px;
font-weight: 700;
color: #111;
text-decoration: none;
margin-bottom: 3px;
line-height: 1.2;
}
.jornada-pill .turn-courses { font-size: 18px; }
.jornada-pill .turn-label { font-size: 11px; letter-spacing: 0.3px; }
.jornada-pill .tt-sep { width: 50%; margin: 3px auto; }
/* ⭐ §AWV · 23/09 · el cronograma en dos columnas · la decide `cronoColumnas` (script.js) con su regla del 10 %, y
`--crono-k` es cuánto se achicó (1 = nada, 0,9 = el tope). Los mismos tres tamaños de arriba, multiplicados: si
cambia uno allá, acá se cambia el mismo número — están juntos a propósito.
⛔ Lo que no es un día (la fecha de ausentes, un aviso) ocupa las dos columnas, como en el afiche. */
.nivel-block-pills.dos-col { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.nivel-block-pills.dos-col > :not(.crono-dia) { grid-column: 1 / -1; }
.nivel-block-pills.dos-col .crono-dia { padding-left: 6px; padding-right: 6px; }
.nivel-block-pills.dos-col .jornada-pill-date { font-size: calc(15px * var(--crono-k, 1)); }
.nivel-block-pills.dos-col .turn-courses { font-size: calc(18px * var(--crono-k, 1)); }
.nivel-block-pills.dos-col .turn-label { font-size: calc(11px * var(--crono-k, 1)); }
/* Ausentes unificado dentro del cronograma web */
.aus-unified {
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
margin-top: 6px;
padding: 7px 12px;
border: 1px solid var(--rasgo-bd-firme);
border-radius: 8px;
background: #fff;
font-size: 13px;
color: #111;
}
.aus-unified .mi { color: var(--rasgo-ausentes); } /* el ICONO: marca del tema */
.aus-unified-levels { font-weight: 700; }
/* Pill de Ausentes — mismo formato que jornada-pill pero borde rojizo */
.aus-pill {
background: #fff;
border: 1px solid var(--rasgo-bd-firme);
border-radius: 8px;
padding: 6px 12px;
text-align: center;
margin-top: 6px;
}
.aus-pill-unified {
margin-top: 8px;
}
.aus-pill-levels {
font-size: 11px;
letter-spacing: 0.3px;
font-weight: 700;
/* §YB · el rótulo de niveles NO es la marca de la familia: es una etiqueta. Su jerarquía la
sostiene el peso, que ya tiene. */
color: var(--rasgo-neutro);
margin-bottom: 2px;
}
/* ⛔⛔⛔ §YB · ACÁ ESTÁ EL CORAZÓN DEL CRITERIO · la FECHA de ausentes ══════════════════════════════
Era roja siempre, tuviera fecha o dijera «a definir». Y la que más gritaba era justamente la que
no se sabe — que es al revés de lo que corresponde: **una fecha a definir no es más urgente, es
MENOS CIERTA**. El rojo la vestía de alarma cuando lo único que dice es «todavía no».
⭐ Con fecha va firme, porque es un hecho. Sin fecha va apagada, porque es una incógnita. El
ícono se queda rojo en los dos casos: marca el TEMA, no el estado. */
.aus-pill-date {
font-size: 15px;
font-weight: 700;
color: var(--rasgo-tx-firme);
line-height: 1.2;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
}
.aus-pill-date .mi { color: var(--rasgo-ausentes); } /* el ICONO: marca del tema */
/* §YB · el estado va como CLASE, no como estilo escrito en la llamada. Así el que arma el HTML dice
QUÉ es —una fecha pendiente— y no CÓMO se pinta, que es la decisión que acaba de tener dueño. */
.aus-pill-date.pendiente { color: var(--rasgo-tx-blando); }
.aus-pill.pendiente,
.aus-unified.pendiente { border-color: var(--rasgo-bd-blando); }
.aus-pill-detalle {
font-size: 14px;
color: #111;
margin-top: 4px;
line-height: 1.35;
white-space: pre-line;
}
/* ===== ESTILOS PARA LA VERSIÓN IMPRIMIBLE / DESCARGA PNG ===== */
/* Nota: la descarga PNG usa un DOM fresco construido en buildPrintHTML(),
por lo que estos estilos ya no se aplican al PNG. Se mantienen por
compatibilidad en caso de impresión @media print. */
.print-version {
background: #ffffff !important;
padding: 20px !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.print-version .card {
background: #ffffff !important;
border: 2px solid #333 !important;
margin: 10px 0 !important;
page-break-inside: avoid;
}
.print-version .share-btn,
.print-version .download-btn,
.print-version .info-acc-btn {
display: none !important;
}
.print-footer {
text-align: center;
font-size: 12px;
margin-top: 15px;
color: #333 !important;
border-top: 1px solid #aaa;
padding-top: 8px;
}
/* ══ §HU · VALORES Y CONTENIDO, LADO A LADO — COMO EL AFICHE DE PAPEL ════════════════════════════
Pedido del operador (22/08): que compartan el mismo espacio «para comprimir un poco la información
y aprovechar mejor la legibilidad». Apiladas, la familia tiene que scrollear para comparar el
precio contra lo que trae la carpeta — que es justo lo que compara antes de decidir.
No es un criterio nuevo: la exportación a imagen ya las ponía en dos columnas. Esto hace que la
web deje de contradecir al papel que ella misma genera.
⛔ En pantalla angosta vuelven a apilarse: dos columnas en 360 px no comprimen, parten palabras. */
.par-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
/* ⛔ ACÁ DECÍA `align-items: start` con el comentario «que la más corta no se estire al alto de la
otra». Era una decisión mía y estaba al revés: el operador las quiere del MISMO ALTO. Y tiene
razón por lo que son — dos columnas de un mismo aviso, como en el afiche de papel, donde
comparten el recuadro. Con alturas distintas se leen como dos cosas sueltas, y encima el
desnivel se movía solo: al achicar el Contenido de seis renglones a tres, la diferencia pasó de
no notarse a ser el primer defecto que salta. Un alto que depende del largo del texto no es una
decisión de diseño, es una consecuencia. */
align-items: stretch;
}
/* ⛔⛔⛔ §AWP · 22/09 · EL AIRE DE ARRIBA ERA EL DOBLE QUE EL DE ABAJO, Y ERA MEDIO ARREGLO VIEJO ═════════════════
Él: *«¿por qué el espacio que separa Cronograma de Valores y Contenido es mayor que el que separa Valores y
Contenido de Plazos? ¿eso no se puede emparejar?»*. Medido antes de tocar nada: arriba 20 px, abajo 10.
⛔ La causa es que acá se anulaba SÓLO el margen de abajo. Las tarjetas normales llevan 10 px arriba y abajo; las
dos de este par viven adentro de una grilla que ya aporta su propia separación, así que el de arriba se sumaba
al que deja la tarjeta de encima y el de abajo no, porque alguien ya lo había anulado. Medio arreglo se ve
peor que ninguno: empareja un lado y deja el otro como prueba de que el criterio existía.
⭐ Ahora no llevan margen vertical propio: el aire lo ponen las tarjetas vecinas y la grilla, que son sus dueños. */
.par-cards > .card {
margin-top: 0;
margin-bottom: 0;
display: flex; /* para poder repartir el alto sobrante adentro */
flex-direction: column;
}
/* ⛔ EL ALTO SOBRANTE SE LO QUEDA EL RECUADRO BLANCO, NO EL AIRE (23/08).
Primero puse `justify-content: center` en el gris y quedó mal por dos motivos que él vio de una:
el rótulo «Inicial» se iba al medio y dejaba de alinear con el de la columna de al lado, y el
blanco seguía chico con aire arriba y abajo. O sea: estiré la tarjeta y repartí el sobrante en el
lugar equivocado — el vacío no desapareció, se mudó.
Lo que tiene que crecer es la pieza que lleva el contenido. Así el título queda arriba en las dos
columnas (que es lo que las hace verse pareadas) y los dos recuadros blancos terminan del mismo
alto, que es de dónde sale la simetría. */
/* ⛔⛔⛔ §YS · 31/08 · EL SOBRANTE VUELVE A SER AIRE, Y SE REPARTE ═════════════════════════════════
Él, viendo Contenido con el cuadro de Secundario estirado hasta el pie: *«estaría bien que ambos
rectángulos tengan el mismo tamaño y distribuyan el espacio libre alrededor, NO hacer uno más
grande que el otro y compitan»*.
⛔ Y corrige la decisión del 23/08 que está escrita acá arriba. Se ve por qué: cuando una columna
tiene más texto que la otra, el último blanco de la columna corta se infla y queda un
rectángulo enorme con dos renglones flotando en el medio. **Los dos cuadros dejan de parecer
hermanos y compiten** — que es exactamente la palabra que él usó.
⭐ Ahora ninguna caja crece: cada una mide lo que su contenido pide, y el alto que sobra se
reparte ENTRE los bloques con `space-between`. El primer título queda arriba y el último bloque
abajo, así que las dos columnas siguen alineadas **por arriba y por abajo**.
⭐ Y eso es justamente lo que el comentario de arriba temía perder al centrar — pero centrar movía
el título, y repartir no. La lección del 23/08 sirvió: dijo dónde NO poner el sobrante, y de
ahí salió dónde sí.
⚠ Se conserva el centrado VERTICAL del texto adentro de cada blanco. Eso nunca fue el problema:
el problema era el tamaño del blanco, no dónde caía su texto. */
/* ⛔⛔ §YS.2 · 31/08 · `space-between` REPARTIÓ EN EL LUGAR EQUIVOCADO ─────────────────────────────
Él, en dos segundos: *«y alineación superior, eso queda horrible también»*. Y tenía razón: la
tarjeta tiene TRES hijos —el título «Contenido» y los dos bloques—, así que `space-between` clavó
el título arriba, el último bloque abajo… y dejó el PRIMER cuadro flotando en el medio. Justo el
que tiene que alinear con el de la columna de al lado.
⛔ Es la tercera vez que este bloque de CSS aprende lo mismo: el 23/08 con `center`, hoy con
`space-between`. **El sobrante nunca va ARRIBA de lo que tiene que alinear.**
⭐ Arriba y natural: cada caja mide lo que su contenido pide, los títulos de las dos columnas
quedan a la misma altura, y el alto que sobra queda al PIE de la columna corta. Es aire, que es
lo que él pidió que fuera — y ninguna caja se infla para taparlo. */
.par-cards > .card {
justify-content: flex-start;
}
.par-cards > .card > .nivel-block:last-of-type {
flex: 0 0 auto; /* §YS · ya no se come el sobrante */
display: flex;
flex-direction: column;
justify-content: flex-start; /* «Inicial» ARRIBA, alineado con el de al lado */
}
.par-cards > .card > .nivel-block:last-of-type > .nivel-block-pills,
.par-cards > .card > .nivel-block:last-of-type > .price-list {
flex: 0 0 auto; /* §YS · el contenedor mide lo que su contenido pide */
display: flex;
flex-direction: column;
}
.par-cards .nivel-block-pills > .jornada-pill,
.par-cards > .card > .nivel-block > .price-list {
flex: 0 0 auto; /* §YS · y el blanco tampoco se estira */
display: flex;
flex-direction: column;
justify-content: center;
}
@media (max-width: 560px) {
.par-cards { grid-template-columns: 1fr; }
/* §AWP · acá había un `margin-bottom: 10px` para separarlas al apilarse. Se fue: apiladas quedan en dos filas de
la misma grilla, y esa grilla ya separa sus filas con los mismos 10 px. Sumaba, no separaba. */
}
/* ══ §HY · LA PASTILLA VACÍA DEL «INFO ADICIONAL» ════════════════════════════════════════════════
⛔ El panel colapsa con `max-height:0`, que esconde el CONTENIDO — pero el `padding`, el borde y el
fondo blanco que le da la clase `card` se siguen dibujando. Resultado: una pastilla blanca vacía
colgando debajo del botón, que no dice nada y parece un error de carga. El operador: *«esa
pastilla blanca vacía… debería estar oculta o no estar, y expandir directamente»*.
Se apaga todo lo que ocupa mientras está cerrado, y vuelve al abrirse. La transición sigue siendo
la del `max-height`, así que se abre igual de suave. */
#infoBtn[aria-expanded="false"] + .info-panel {
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
margin: 0;
}
/* ══ §HZ · «PREGUNTAS FRECUENTES», CON EL MISMO TRATO QUE EN PAGOS ═══════════════════════════════
Era texto suelto sobre el verde; en Pagos es una pastilla que se despega del fondo sin gritar. La
familia ve las dos páginas en el mismo trámite: el mismo elemento no puede verse de dos maneras.
Los valores son los de allá, no unos nuevos — incluido el `line-height: normal`, que es lo que le
da el alto correcto (lo heredado lo estiraba). */
.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;
line-height: normal;
box-sizing: border-box;
color: #fff;
text-decoration: none;
}
/* ══ §HZ.2 · LA COPIA DE PAGOS ESTABA POR LA MITAD (23/08) ═══════════════════════════════════════
Arriba se copió `.faq-link` y NADA MÁS. Quedaron vivas la `.faq-icon` vieja —círculo GRIS SÓLIDO
de 22 px— y la `.lema` vieja —blanco puro—, así que la pastilla llegó con el trato de Pagos y las
dos piezas que la acompañan con el de antes. El operador lo vio de una: «preguntas frecuentes lo
rompiste» y «la frase tiene el color MAL».
⛔ Y no fue una omisión de estilo: el `?` además estaba FUERA del `` (se corrigió en el HTML),
así que el círculo caía sobre el verde del fondo en vez de sobre el velo de la pastilla. Dos
mitades de un mismo elemento, cada una copiada de un lado distinto.
Los valores de acá abajo son LOS DE PAGOS, medidos en el navegador, no unos nuevos. */
.faq-icon {
/* 16 y no 22: en Pagos está medido y anotado — con 22 la burbuja es más alta que el renglón (17)
y pasa a mandar ella el alto de la pastilla. Con 16 manda el padding, como en el botón. */
width: 16px;
height: 16px;
font-size: 11px;
/* velo blanco al 22 % SOBRE el velo al 7 % de la pastilla: por eso tiene que ser hijo y no
hermano. El `#666` de antes era un gris opaco que no dependía de lo que hubiera detrás. */
background: rgba(255, 255, 255, .22);
border: none;
color: #fff;
}
/* La frase: en Pagos es verde pálido en cursiva, no blanco. Dictado suyo el 21/08 —«la frase en un
verde pálido, casi blanco… que no tengan todas el mismo peso»— y el `.82` de opacidad está medido
allá: con .9 el lema pesaba MÁS que la única advertencia de la zona. Blanco puro lo pone por
encima de todo lo demás, que es exactamente lo que él pidió evitar. */
.lema {
color: #cfe0d3;
font-style: italic;
line-height: 1.5;
opacity: .82;
max-width: 34em;
margin-left: auto;
margin-right: auto;
}
/* ══ §IF · EL FORMATO DEL AFICHE, EN LA TARJETA QUE DE VERDAD SE VE (23/08) ══════════════════════
⛔ HAY DOS IMPLEMENTACIONES COMPLETAS de las tarjetas Valores/Contenido y arregle la que no es.
La del PNG descargable (`innerCard`/`filaValor`, en script.js) y ESTA, la de la web
(`renderPrices` + `.price-line`). Cambie la primera dos veces y le dije al operador que estaba
hecho; el seguia viendo lo mismo con el numero de version nuevo en el pie — o sea que el
archivo SI habia llegado y el arreglo estaba en la mitad que no se muestra.
Es la causa raiz de siempre, en su forma mas cara: dos duenos de la misma pieza.
EL AFICHE ES LA REFERENCIA y pone el rotulo ARRIBA, chico y en texto normal, con el precio DEBAJO,
mas grande y en negrita. Aca los dos estaban en negrita (600 y 700) y en un mismo renglon, asi que
competian por el ancho y el precio dejaba de mandar. Pedido textual: «texto normal… negrita el
valor». */
.price-line{
flex-direction: column; /* el rotulo arriba, el precio abajo — como en el papel */
gap: 0;
margin: 5px 0 0;
}
.price-line .lbl{ font-weight:400; font-size:12.5px; color:#333; line-height:1.3; }
.price-line .val{ font-weight:700; font-size:18px; color:#111; line-height:1.25; }
.price-note-block{ font-size:10px; margin-top:1px; }
/* El contenido: achicado y con los saltos bajo control. Salia en seis renglones porque usaba el
mismo cuerpo que Valores y la columna mide la mitad del ancho. `balance` reparte las palabras
entre los renglones en vez de llenar el primero y dejar una huerfana; `hyphens:none` no parte
ninguna palabra al medio. Legible: 11,5 el producto y 10 la descripcion, no menos. */
.jornada-pill .cont-prod{
font-size:15px; font-weight:700; color:#111; line-height:1.25;
text-wrap:balance; overflow-wrap:break-word; hyphens:none;
}
.jornada-pill .cont-desc{
font-size:11.5px; font-weight:400; color:#333; line-height:1.3;
text-wrap:balance; overflow-wrap:break-word; hyphens:none;
}
/* ══ §KB.3 · 27/08 · EL MENÚ DE COMPARTIR ═══════════════════════════════════════════════════════
Las cuatro acciones de la ficha del admin, con el mismo orden y las mismas palabras, más la
quinta que él eligió (opción B del ítem 136). El porqué entero está en `script.js`, arriba de
`_shAbrirMenu` — acá va sólo la forma.
⛔ Sin franja de color en el encabezado: es la regla 9 del proyecto y vale también acá. El menú no
tiene título; las acciones se explican solas y un rótulo sería un renglón que no informa. */
.sh-velo{position:fixed;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}
/* el foco de teclado se ve · se puede llegar con Tab */
.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;
}
/* ══ §KC.3 · 27/08 · EL BOTÓN QUE ESTÁ TRABAJANDO ══════════════════════════════════════════════
«Apretás compartir… y compartir». El aviso de que la imagen se está armando dejó de ser un
cartel sobre la pantalla y pasó a ser el propio botón: el ícono se apaga y gira un aro fino en
su lugar. Ocupa cero espacio nuevo, está donde el ojo ya está mirando, y se va solo.
⛔ La medida del aro sale del tamaño del botón, no de un número suelto: si mañana el botón crece,
el aro crece con él y no queda un anillo flotando en una esquina. */
.action-buttons button.sh-busy { position: relative; pointer-events: none; }
.action-buttons button.sh-busy > * { opacity: 0; }
.action-buttons button.sh-busy::after {
content: '';
position: absolute;
inset: 28%;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
opacity: .65;
animation: sh-giro .7s linear infinite;
}
@keyframes sh-giro { to { transform: rotate(360deg); } }
/* ⛔ Y RESPETA A QUIEN PIDIÓ NO VER MOVIMIENTO. Sin esto, un usuario con «reducir movimiento»
activado recibe igual una animación infinita — que es justo lo que ese ajuste existe para evitar.
Se queda el aro quieto: sigue diciendo «estoy ocupado» sin girar. */
@media (prefers-reduced-motion: reduce) {
.action-buttons button.sh-busy::after { animation: none; }
}
/* ⛔⛔⛔ §YB.3 · 31/08 · «¿Y CÓMO DESTACÁS INFO ADICIONAL, PARA QUE LLAME A SER LEÍDA?» ═════════════
Pregunta suya, después de sacarle el rojo. Y tenía que contestarse, porque su propio tooltip dice
«Info adicional, importante leer»: eso SÍ hay que destacarlo. Sacarle el rojo sin darle otra cosa
habría sido el error opuesto al que estábamos arreglando.
Él propuso tres caminos —animación, animación recursiva, o fondo amarillo apagado— y yo descarté
los dos primeros con un argumento que NO APLICABA: dije que una animación no sobrevive a la
exportación. Él me corrigió en una línea: **«masinfo no se descarga como imagen»**. Es cierto, el
+Info es sólo web y nunca entra en el JPG. El argumento era bueno y el elemento, equivocado.
⭐ Y sobre la recursiva tenía razón él, con su propio precedente a favor: `carteleraAtencion`, en
el formulario de pagos, ya resolvió exactamente esto y su comentario lo explica —*«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»*—. O sea que la respuesta no era «animación sí»
ni «animación no»: era **cuál**, y ya estaba escrita.
⭐ Se reusa ese canon tal cual, sin retocarle una décima: un instante cada seis segundos, sólo el
ÍCONO, con `transform` para no empujar el layout, y **se frena apenas te acercás** —con el
mouse encima la atención ya está conseguida y seguir sacudiendo es ruido—.
⚠ Y el destaque queda en DOS capas que hacen cosas distintas: el fondo de resaltador MARCA
(estático, imprime, está siempre) y el movimiento LLAMA (sólo web, sólo un instante). Si mañana
esta pieza se exportara, lo que se pierde es la llamada y sobrevive la marca — que es el orden
correcto de las dos.
⚠ `prefers-reduced-motion` se respeta, igual que en pagos: mareo, epilepsia fotosensible, o
simplemente no querer que la pantalla se mueva. */
@keyframes infoAtencion {
0%, 62%, 100% { transform: rotate(0deg); }
68% { transform: rotate(-6deg); }
76% { transform: rotate(5deg); }
84% { transform: rotate(-3deg); }
92% { transform: rotate(0deg); }
}
.info-acc-btn .mi {
display: inline-block;
transform-origin: 50% 58%;
animation: infoAtencion 6s ease-in-out infinite;
}
.info-acc-btn:hover .mi,
.info-acc-btn:focus-visible .mi,
.info-acc-btn[aria-expanded="true"] .mi {
animation: none;
transform: rotate(0deg);
}
@media (prefers-reduced-motion: reduce) {
.info-acc-btn .mi { animation: none; }
}
/* ⛔⛔⛔ §YB.5 · 31/08 · LA PERSECUCIÓN EN EL CONTORNO · elegida por él del catálogo ════════════════
Él: *«me gusta persecución en el contorno y las flechas moviéndose, creo que eso llama la atención
y respeta el diseño establecido»*.
⭐ Las flechas YA se movían —`chevron-bounce`, y ya se frenan al pasar y al abrir—: no hubo que
escribir nada para esa mitad. Sólo faltaba el contorno.
⭐ Y NO INVENTA UN COLOR: la luz que gira es el mismo `#143822` de la pizarra, sobre el blanco del
botón. Es la paleta que ya está, moviéndose.
⛔ Y SE VA EL GESTO DEL ÍCONO de §YB.3. Tres movimientos a la vez —el borde, las flechas y el
ícono— dejan de llamar y pasan a molestar, que es exactamente lo que su canon del formulario
de pagos advierte. Él eligió DOS; el tercero sobra y no se deja «por las dudas».
⚠ CÓMO FUNCIONA, para el que venga: `::before` es un cono de color mucho más grande que el botón,
girando. `::after` es una pastilla blanca 2 px adentro que lo tapa entero salvo el borde. Lo que
se ve moverse es lo que asoma por ese margen de 2 px. No hay un borde animado: hay un fondo que
gira y una tapa que deja ver sólo su filo.
⚠ Los dos van con `z-index` negativo y el botón necesita su propio contexto de apilado, o el cono
tapa el texto. Por eso `isolation:isolate`: crea el contexto sin tocar el `z-index` de la página.
⚠ Y se frena al pasar por encima y con el panel abierto, igual que las flechas: ahí la atención ya
está conseguida y seguir girando es ruido sobre algo que ya se está leyendo. */
@keyframes info-persecucion { to { transform: rotate(1turn); } }
.info-acc-btn{
isolation: isolate;
overflow: hidden;
border-color: transparent;
}
.info-acc-btn::before{
content:"";
position:absolute; inset:-140%; z-index:-2;
background: conic-gradient(from 0turn, transparent 0 58%, rgba(20,56,34,.45) 74%, var(--rasgo-verde) 82%, rgba(20,56,34,.45) 90%, transparent 100%);
/* §YB.6 · SUAVE PERO NECESARIO, palabras suyas. Siete segundos en vez de tres: el ojo lo
encuentra igual y deja de tironear. Y el arco se abre con dos escalones de opacidad, asi
entra y sale en vez de aparecer de golpe. */
animation: info-persecucion 7s linear infinite;
}
.info-acc-btn::after{
content:"";
position:absolute; inset:2px; z-index:-1;
border-radius:999px;
background:#fff;
transition: background .2s ease;
}
.info-acc-btn:hover::after,
.info-acc-btn[aria-expanded="true"]::after{ background: var(--rasgo-verde-lavado); }
.info-acc-btn:hover::before,
.info-acc-btn[aria-expanded="true"]::before{ animation: none; }
/* §YB.5 · el gesto del icono se retira: el eligio el contorno y las flechas, y con tres
movimientos a la vez la atencion se pierde en vez de ganarse. */
.info-acc-btn .mi{ animation: none !important; }