/* ═══════════════════════════════════════════════════════════════
   /agenda/ — la portada de la Fundación y el calendario
   ═══════════════════════════════════════════════════════════════
   Sale de `agenda.pdf`, dos pantallas 16:9. El navy de la lámina es
   `#00294F` exacto —o sea el `--navy` del sitio— y el lima del
   titular es el `--lima`, así que no entra ningún color nuevo.

   La portada con figuras es de la agenda de la FUNDACIÓN: el diseño
   es suyo y la del PRODE conserva su cabecera. La clase la pone un
   guion de tres líneas en el `<head>`, leyendo `?programa`: si
   esperara a `contenido.js` —que corre después del fetch— la portada
   genérica se vería un instante.                                   */

/* ── La portada, sólo en la agenda de la Fundación ────────────── */
.ag-cab{position:relative;overflow:hidden}
.ag-cab-foto{display:none}
/* Las figuras van donde estaban: a la derecha, atrás del texto y
   sangrando por el borde. Lo único que cambió es el ARCHIVO: ahora es
   el SVG, que las trae enteras y en vector.

   `contain` y no `cover`: el recorte era lo que las cortaba. La
   lámina mide 924x539 y la caja de la portada es más alta que ancha,
   así que con `cover` se comía la fila de arriba y la de abajo. */
/* La foto va a la derecha, a sangre por el borde y con el velo navy
   que la funde con el fondo: sin eso el rectángulo se recorta contra
   el navy y se lee como una estampilla pegada.

   `cover` y no `contain`: es una foto, y una foto se recorta. El
   dibujo que estaba antes no podía, por eso iba topado por los dos
   lados. */
.prog-fundacion .ag-cab-foto,
.prog-escuelas .ag-cab-foto{
  display:block;position:absolute;z-index:0;
  right:0;top:0;bottom:0;
  width:clamp(260px,42vw,620px);height:100%;
  object-fit:cover;object-position:50% 40%;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 42%);
          mask-image:linear-gradient(to right, transparent 0, #000 42%);
}
.ag-cab > .env{position:relative;z-index:1}
/* El titular en lima, como la lámina. Sobre el navy da 15.8:1. */
.prog-fundacion .ag-cab h1,
.prog-escuelas .ag-cab h1{color:var(--lima)}
/* Con las figuras al lado, el texto no puede ocupar el ancho entero
   o se le mete por debajo. «INSTITUCIONAL» son trece letras que no se
   parten: se topa la MEDIDA y, si aun así no entra, el cuerpo. */
@media (min-width:821px){
  .prog-fundacion .ag-cab h1,
  .prog-fundacion .ag-cab .bajada,
  .prog-escuelas .ag-cab h1,
  .prog-escuelas .ag-cab .bajada{max-width:min(54%, 30ch)}
  .prog-fundacion .ag-cab h1,
  .prog-escuelas .ag-cab h1{font-size:clamp(34px,5.1vw,74px)}
}

/* ── «Nuestra agenda en vivo» · texto y calendario ────────────── */
/* La sección vuelve a tener su relleno de abajo. Estaba en cero para
   que los muñecos sangraran contra el borde como en la lámina, y el
   efecto era que la sección quedaba pegada al pie sin una franja de
   aire: se leía como si el pie empezara en medio del contenido. */
.ag-vivo-duo{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(30px,4vw,68px);align-items:start;
}
.ag-vivo-texto .parrafo{max-width:40ch}


/* ── El calendario ────────────────────────────────────────────── */
.cal{
  background:var(--tinte);border-radius:var(--radio-l);
  padding:clamp(16px,1.8vw,26px);
}
.cal-barra{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:clamp(12px,1.4vw,18px);
}
.cal-mes{
  margin:0;font-family:var(--display);font-weight:800;
  font-size:clamp(19px,1.8vw,26px);letter-spacing:-.015em;
  color:var(--tinta);text-align:center;flex:1;
}
.cal-nav{
  flex-shrink:0;width:42px;height:42px;border-radius:50%;
  border:1.5px solid var(--linea-fuerte);background:var(--blanco);
  color:var(--tinta);cursor:pointer;display:grid;place-content:center;
  transition:background-color var(--t-ui) var(--sal),border-color var(--t-ui) var(--sal);
}
.cal-nav svg{width:18px;height:18px;display:block}
@media (hover:hover) and (pointer:fine){
  .cal-nav:hover{background:var(--naranja);border-color:var(--naranja)}
}

.cal-sem,.cal-rejilla{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
}
.cal-sem{
  gap:2px;margin-bottom:6px;
  font-family:var(--cuerpo);font-weight:700;font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gris-suave);
  text-align:center;
}
.cal-rejilla{gap:clamp(3px,.45vw,6px)}
/* El día: un cuadrado con las esquinas redondeadas, que es la forma
   del sitio. Los que no tienen nada son un <span> y no un <button>:
   un control que no hace nada no se ofrece al teclado. */
.cal-dia{
  position:relative;display:grid;place-content:center;
  aspect-ratio:1;width:100%;border:0;padding:0;
  border-radius:var(--radio-xs);
  background:transparent;color:var(--gris);
  font-family:var(--cuerpo);font-weight:500;
  font-size:clamp(12.5px,1.05vw,15px);
  font-variant-numeric:tabular-nums;
}
.cal-vacio{aspect-ratio:1}
button.cal-dia{cursor:pointer;color:var(--tinta);font-weight:700;background:var(--blanco)}
.cal-dia.hoy{box-shadow:inset 0 0 0 1.5px var(--linea-fuerte)}
.cal-punto{
  position:absolute;left:50%;bottom:14%;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--naranja);
}
@media (hover:hover) and (pointer:fine){
  button.cal-dia:hover{background:var(--tinte-fuerte)}
}
button.cal-dia[aria-current="date"]{background:var(--naranja);color:var(--tinta)}
button.cal-dia[aria-current="date"] .cal-punto{background:var(--tinta)}

/* ── El detalle del día ───────────────────────────────────────── */
.cal-detalle{
  margin-top:clamp(14px,1.6vw,20px);
  border-top:1px solid var(--linea);padding-top:clamp(14px,1.6vw,20px);
}
.cal-fecha{
  margin:0 0 10px;font-family:var(--cuerpo);font-weight:700;
  font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--naranja-texto);
}
.cal-nada{margin:0;font-size:14.5px;line-height:1.5;color:var(--gris-suave)}
.cal-ev{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.cal-ev + .cal-ev{margin-top:16px;border-top:1px solid var(--linea);padding-top:16px}
.cal-ev > img{
  width:clamp(74px,7vw,104px);aspect-ratio:1;object-fit:cover;
  border-radius:var(--radio-s);display:block;
}
.cal-ev h3{
  margin:0;font-family:var(--cuerpo);font-weight:700;
  font-size:clamp(15px,1.2vw,17.5px);line-height:1.28;color:var(--tinta);
}
.cal-meta{margin:5px 0 0;font-size:13.5px;line-height:1.4;color:var(--gris-suave)}
.cal-det{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--gris)}
.cal-res{
  margin:8px 0 0;font-family:var(--cuerpo);font-weight:700;
  font-size:13.5px;color:var(--naranja-texto);
}

@media (max-width:900px){
  .ag-vivo-duo{grid-template-columns:minmax(0,1fr);gap:clamp(26px,6vw,40px)}
  /* La figura decorativa se va: en una columna empuja el calendario
     media pantalla hacia abajo y lo que se vino a ver es el
     calendario. */
  .prog-fundacion .ag-cab,
  .prog-escuelas .ag-cab{display:flex;flex-direction:column}
  .prog-fundacion .ag-cab > .env,
  .prog-escuelas .ag-cab > .env{order:1}
  /* En angosto la foto deja de ir al costado y pasa a ser una banda
     a sangre debajo del texto: superpuesta, el titular en lima le
     quedaba encima y no se leía ninguno de los dos. */
  .prog-fundacion .ag-cab-foto,
  .prog-escuelas .ag-cab-foto{
    order:2;position:static;width:100%;height:clamp(180px,46vw,260px);
    margin:clamp(18px,5vw,28px) 0 0;
    -webkit-mask-image:none;mask-image:none;
  }
  .cal-sem{font-size:11px}
  .cal-ev{grid-template-columns:minmax(0,1fr)}
  .cal-ev > img{width:100%;aspect-ratio:16/9}
}

@media (prefers-reduced-motion:reduce){
  .cal-nav{transition-duration:.01ms}
}

/* La lista completa no va en la agenda de la Fundación: ahí quedan la
   portada y el calendario, que son las dos pantallas de la lámina. Se
   esconde con CSS y no se borra del marcado: ahí es donde el panel
   escribe entre sus marcas, y borrarlo dejaría a la fundación sin
   poder cargar un evento. */
/* Las dos agendas filtradas son DOS pantallas: la portada y el
   calendario. La lista larga queda para /agenda/ sin filtro, que es
   la agenda entera. Se esconde y NO se borra: ahí escribe el panel
   entre sus marcas, y es lo que leen Google y las IA. */
.prog-fundacion .ag-todo,
.prog-escuelas .ag-todo{display:none}

/* ── La marca: cada agenda con la suya ───────────────────────────
   La página es la misma para las dos agendas, así que van los cuatro
   archivos —el par del PRODE y el par de la Fundación— y `?programa`
   elige el par. El cruce claro/oscuro NO se toca: lo sigue haciendo
   `prode.css` con `opacity`, porque las dos imágenes de un par van
   apiladas y la clara es `position:absolute`. Acá sólo se saca del
   flujo el par que no va. */
.marca-fu{display:none}
.prog-fundacion .marca-prode{display:none}
.prog-fundacion .marca-fu{display:block}

/* El atajo al próximo evento cuando el mes que se mira está vacío.
   Es un <button>, no un <a>: no navega a ningún lado, mueve el
   calendario. */
.cal-salto{margin:10px 0 0}
.cal-salto .link{
  background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--naranja-texto);
  text-decoration:underline;text-underline-offset:3px;
}
@media (hover:hover) and (pointer:fine){
  .cal-salto .link:hover{color:var(--tinta)}
}

/* Las pastillas por escuela, arriba del calendario y en su misma
   columna: sueltas eran un ítem más de la grilla de dos columnas y
   empujaban el calendario a una fila nueva. */
.ag-vivo-col{min-width:0}
.ag-vivo .ag-escuelas{margin:0 0 clamp(12px,1.4vw,18px)}

/* De qué cancha es el evento, dentro de la ficha del calendario. Sólo
   se dibuja mirando «Todas»: filtrando por una, sobra. */
.cal-esc{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.cal-esc span{
  font-size:11.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;
  color:var(--naranja-texto);background:var(--blanco);
  border:1px solid var(--linea);border-radius:var(--radio-xs);
  padding:3px 8px;
}
@media (max-width:900px){
  .cal-esc span{font-size:12.5px}
}