/* sitio/mensajes.css — maria-medjugorge
 *
 * LA HOJA DEL SITIO PÚBLICO. Los valores salen de `diseno/identidad.md` y se
 * escriben acá una sola vez, como variables (regla U24). Un color o una medida
 * que no está en la identidad no se agrega acá sin agregarlo antes allá.
 */

:root {
  color-scheme: dark;
  --fondo: #14110e;
  --panel: #1e1912;
  --hover: #2a231a;
  --borde: #3a322a;
  --primario: #d9b872;
  --primario-claro: #f0d79a;
  --borde-primario: #8c7547;
  --texto: #ede6d8;
  --texto-fuerte: #f5efe3;
  --texto-suave: #b9ae98;
  --texto-tenue: #9c917d;
  --sobre-primario: #1a1510;
  --error: #f0a08a;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Manrope", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
/* `hidden` gana siempre: sin esto, un `display` de la clase lo pisa y el botón
   que tenía que estar escondido aparece ("Buscar mensajes nuevos" a cualquiera). */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--fondo); color: var(--texto); }
body { font: 400 16px/1.5 var(--sans); }
a { color: var(--primario); }
a:hover { color: var(--primario-claro); }
button, select, input { font: inherit; }
:focus-visible { outline: 2px solid var(--primario); outline-offset: 3px; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ------------------------------------------------------------- armado --- */

/* LA PÁGINA NO SE DESPLAZA: ocupa justo la pantalla. Lo único que se mueve es
   la lista de mensajes (`.desplazable`).
   La franja de desarrollo, cuando se ve, va arriba y la página ocupa el resto. */
html, body { height: 100%; overflow: hidden; }
body { display: flex; flex-direction: column; }
.pagina { flex: 1 1 auto; min-height: 0; display: flex; }

.imagen {
  flex: 0 0 44%; height: 100%; padding: 32px 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
/* Debajo de la imagen: abre la pantalla completa para rezar, como la imagen. */
.imagen .rezar { flex: none; min-height: 44px; padding: 8px 20px; font-size: 16px; }
/* La imagen entera, sin recortar ni deformarse, lo más grande que entre en su
   columna. Los bordes se funden con el fondo para que no se vea el corte del
   cielo contra la página. */
.imagen img {
  display: block; max-width: 100%; max-height: 100%; width: auto; height: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 82%, transparent 100%);
}

/* La imagen es un botón: tocarla la abre en pantalla completa. El aviso se ve
   siempre en celular (no hay "pasar el mouse") y al pasar o enfocar en la compu. */
.ampliar {
  position: relative; display: flex; align-items: center; justify-content: center;
  flex: 0 1 auto; min-height: 0; height: 100%; max-width: 100%;
  padding: 0; border: 0; background: none; color: inherit; cursor: zoom-in;
}
.ampliar-aviso {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border: 1px solid var(--borde-primario); border-radius: 999px;
  background: rgba(20, 17, 14, 0.8); color: var(--texto-fuerte);
  font-size: 14px; font-weight: 600; white-space: nowrap;
  opacity: 0; transition: opacity 0.2s;
}
.ampliar:hover .ampliar-aviso, .ampliar:focus-visible .ampliar-aviso { opacity: 1; }
@media (hover: none) { .ampliar-aviso { opacity: 1; } }

/* La imagen entera, lo más grande que entre en la pantalla, sin deformarse. */
.completa {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0;
  padding: 0; border: 0; background: #000; overflow: hidden;
}
/* Tres columnas: a la izquierda la ventana del misterio y el menú; al centro,
   el lugar de la Virgen; a la derecha, el cielo de la imagen. La columna del
   centro tiene el ancho de antes, así la ventana no se mueve. */
.completa[open] {
  display: grid; grid-template-columns: 1fr min(60vw, 100dvh * 1039 / 1514) 1fr; align-items: center;
}
.completa::backdrop { background: #000; }
/* La escena cubre toda la pantalla, detrás de la ventana y del menú: la imagen
   apaisada (2576 × 1438) con la Virgen al centro y las nubes a los costados.
   El lienzo tiene la proporción de la imagen y cubre la pantalla, pegado
   arriba para no cortar la corona: lo que sobra se corta abajo, en las nubes.
   La Virgen va corrida a la derecha (--corrimiento) para equilibrar la ventana
   de la izquierda (pedido del 2026-10-18); el lienzo es dos corrimientos más
   ancho que la pantalla, así no aparece negro a la izquierda. */
.escena {
  position: absolute; inset: 0; overflow: hidden; cursor: zoom-out;
}
.escena-lienzo {
  --corrimiento: 7vw;
  position: absolute; top: 0; left: 50%; transform: translateX(calc(-50% + var(--corrimiento)));
  aspect-ratio: 2576 / 1438;
  width: max(100vw + 2 * var(--corrimiento), 100dvh * 2576 / 1438);
}
.escena img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* EL ACERCAMIENTO: solo la capa de la Virgen, hacia el rostro (el punto de
   transform-origin), en 3 minutos a velocidad pareja, sin frenar, y se queda
   ahí (forwards).
   Cada vez que se abre la imagen empieza de nuevo: al cerrarse el <dialog>,
   la animación se reinicia sola. Hasta 1,6 veces: más cerca, el rostro de la
   imagen (2576 × 1438) se empieza a ver borroso en pantallas grandes. */
.escena-figura { transform-origin: 50% 19%; }
.completa[open] .escena-figura { animation: acercarse 180s linear forwards; }
@keyframes acercarse {
  from { transform: scale(1); }
  to { transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) { .completa[open] .escena-figura { animation: none; } }
.completa .cerrar { position: absolute; top: 16px; right: 16px; background: rgba(20, 17, 14, 0.8); color: var(--texto-fuerte); }

/* ------------------------------------------ rezar el Rosario (completa) --- */

/* Detrás de todo, la escena del misterio muy tenue y desenfocada: tiñe el
   negro de los costados con la luz de cada momento, sin tapar a la Virgen. */
.completa::before {
  content: ""; position: absolute; inset: -64px; z-index: 0; pointer-events: none;
  background: var(--escena-actual, none) center / cover no-repeat;
  filter: blur(40px); opacity: 0.18; transition: opacity 0.8s ease;
}
/* Junto a la X, a su izquierda: el navegador en pantalla completa. Un ícono
   para entrar y otro para salir, según aria-pressed. */
.completa .pantalla-navegador { position: absolute; top: 16px; right: 76px; background: rgba(20, 17, 14, 0.8); color: var(--texto-fuerte); }
.pantalla-navegador .icono-salir, .pantalla-navegador[aria-pressed="true"] .icono-entrar { display: none; }
.pantalla-navegador[aria-pressed="true"] .icono-salir { display: block; }
.escena, .rosario, .completa .cerrar, .completa .pantalla-navegador { z-index: 1; }
/* El menú por encima de la ventana: su panel se abre sobre ella. */
.rosario-menu { z-index: 2; }

/* EL MENÚ: una cápsula chica arriba, en el negro de la izquierda y sobre la
   ventana del misterio, para no tapar a la Virgen. Controles de 32 px; con el dedo, 44 (medida en identidad.md). */
.rosario-menu {
  grid-column: 1; grid-row: 1; align-self: start; justify-self: center; margin-top: 16px;
  display: flex; align-items: center; gap: 2px; padding: 3px; white-space: nowrap;
  border: 1px solid var(--hover); border-radius: 999px; background: rgba(20, 17, 14, 0.72);
  font-size: 12px;
}
.menu-grupo { position: relative; }
.menu-boton, .menu-icono {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 32px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--texto-suave); font-size: 12px; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.menu-icono { min-width: 32px; padding: 0; }
.menu-boton:hover, .menu-icono:hover, .menu-boton[aria-expanded="true"] { background: var(--hover); color: var(--texto-fuerte); }
.menu-boton svg:first-child { color: var(--primario); }
.menu-separador { width: 1px; height: 16px; margin: 0 4px; background: var(--borde); }
.menu-tiempo { padding: 0 4px 0 8px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--texto); }
.menu-icono[aria-pressed="true"] { color: var(--primario); }
@media (pointer: coarse) {
  .menu-boton, .menu-icono { min-height: 44px; }
  .menu-icono { min-width: 44px; }
}

.menu-panel {
  position: absolute; top: calc(100% + 12px); left: 0;
  width: 280px; padding: 8px; display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--borde); border-radius: 16px; background: var(--panel);
  white-space: normal; text-align: left;
}
.menu-ayuda { margin: 0; padding: 4px 8px; font-size: 12px; color: var(--texto-tenue); }
.menu-opcion {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 44px; padding: 8px 12px; border: 0; border-radius: 12px;
  background: transparent; color: var(--texto); text-align: left; cursor: pointer;
}
.menu-opcion span { font: 500 20px/1.1 var(--serif); color: var(--texto-fuerte); }
.menu-opcion small { font-size: 12px; color: var(--texto-tenue); }
.menu-opcion:hover, .menu-opcion[aria-pressed="true"] { background: var(--hover); }
.menu-opcion[aria-pressed="true"] span::after { content: " ✓"; color: var(--primario); font-family: var(--sans); font-size: 14px; }
.segmento.parejo { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0 8px; }
.segmento.parejo button { min-height: 32px; }
#avance-minutos { display: flex; flex-direction: column; gap: 4px; }
#avance-minutos[hidden] { display: none; }

/* Lo del registro va en su propio grupo del menú, que se ve solo con sesión. */
.menu-registro { display: inline-flex; align-items: center; gap: 2px; }
.menu-registro[hidden] { display: none; }
.menu-icono:disabled { opacity: 0.35; cursor: default; }
.menu-icono:disabled:hover { background: transparent; color: var(--texto-suave); }
/* Los misterios ya rezados hoy, y los que no se pueden elegir con otro abierto. */
.menu-opcion.rezado-hoy small::after { content: " · rezado hoy ✓"; color: var(--primario); }
.menu-opcion:disabled { opacity: 0.4; cursor: default; }
.menu-opcion:disabled:hover { background: transparent; }
.aviso-abierto { color: var(--primario); }

/* LA VENTANA DEL MISTERIO: flotante, centrada en el negro de la izquierda. */
.rosario {
  grid-column: 1; grid-row: 1; justify-self: center; align-self: center;
  width: min(420px, calc(100% - 64px)); max-height: calc(100dvh - 96px); overflow-y: auto;
  padding: 16px; border: 1px solid var(--borde); border-radius: 16px;
  background: rgba(20, 17, 14, 0.78); backdrop-filter: blur(12px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
  color: var(--texto); scrollbar-color: var(--borde-primario) transparent;
}
#rosario-rezando, .rosario-fin { display: flex; flex-direction: column; gap: 12px; }
#rosario-rezando[hidden], .rosario-fin[hidden] { display: none; }
.rosario-escena {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; background: var(--fondo);
}
.rosario-escena img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* El centro abre la escena grande; cada borde (un cuarto del ancho) pasa de
   misterio. La flecha se ve al pasar el mouse o con el foco, y siempre en
   pantallas táctiles, donde no hay "pasar el mouse". */
.escena-centro {
  position: absolute; inset: 0; padding: 0; border: 0; background: transparent; cursor: zoom-in;
}
.escena-borde {
  position: absolute; top: 0; bottom: 0; width: 25%; padding: 0 8px; border: 0;
  background: transparent; display: flex; align-items: center; cursor: pointer;
}
.escena-borde.anterior { left: 0; justify-content: flex-start; cursor: w-resize; }
.escena-borde.siguiente { right: 0; justify-content: flex-end; cursor: e-resize; }
.escena-borde[hidden] { display: none; }
.escena-borde span {
  width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px;
  background: rgba(20, 17, 14, 0.7); color: var(--texto-fuerte);
  opacity: 0; transition: opacity 0.2s;
}
.escena-borde:hover span, .escena-borde:focus-visible span { opacity: 1; }
@media (hover: none) { .escena-borde span { opacity: 0.8; } }
.rosario-ampliar {
  position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px;
  display: grid; place-items: center; border-radius: 999px;
  background: rgba(20, 17, 14, 0.8); color: var(--texto-fuerte);
}
.rosario-avance { height: 2px; border-radius: 2px; background: var(--hover); overflow: hidden; }
.rosario-avance[hidden] { display: none; }
#rosario-avance-barra { display: block; height: 100%; width: 0; background: var(--primario); transition: width 0.25s linear; }
.rosario-puntos { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 8px; }
.rosario-puntos button {
  display: block; width: 12px; height: 12px; padding: 0; border-radius: 999px;
  border: 1px solid var(--borde-primario); background: transparent; cursor: pointer;
}
.rosario-puntos button.rezado { background: var(--borde-primario); }
.rosario-puntos button.actual { width: 28px; border-color: var(--primario); background: var(--primario); }
.rosario-texto { display: flex; flex-direction: column; gap: 8px; padding: 0 4px; }
.rosario-ordinal {
  margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--primario);
}
.rosario-titulo { margin: 0; font: 500 30px/1.1 var(--serif); color: var(--texto-fuerte); }
.rosario-titulo.grande { font-size: 36px; }
.rosario-palabras {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px;
  font: italic 500 20px/1.3 var(--serif); color: var(--primario-claro);
}
.rosario-cita { font: 400 12px/1 var(--sans); font-style: normal; color: var(--texto-tenue); white-space: nowrap; }
.rosario-fruto { margin: 0; font-size: 12px; line-height: 1.5; color: var(--texto-tenue); }
.redondo.destacado { border-color: var(--borde-primario); color: var(--primario); }
.rosario-posicion { min-width: 44px; text-align: center; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--texto-tenue); }
.rosario-fin { padding: 8px; align-items: flex-start; }
.rosario-resumen { margin: 0; font-size: 14px; color: var(--texto-suave); }
.rosario-fin .aviso { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* EL REGISTRO: "Gozosos · ☐ Inicio ☐ Fin", solo con sesión de la administradora. */
.registro {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: 8px 12px; border: 1px solid var(--borde); border-radius: 12px; background: rgba(30, 25, 18, 0.6);
}
.registro[hidden] { display: none; }
.registro-nombre { font: 500 20px/1.1 var(--serif); color: var(--texto-fuerte); }
.tilde { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; cursor: pointer; }
.tilde input { width: 20px; height: 20px; margin: 0; accent-color: var(--primario); cursor: pointer; }
/* Inicio tildado queda firme mientras se reza; lo que no se puede tocar, tenue. */
.tilde:has(input:disabled:not(:checked)) { opacity: 0.45; cursor: default; }
.tilde:has(input:disabled) input { cursor: default; }
.registro-estado { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--primario); }
.registro-aviso { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.registro-aviso:empty { display: none; }

/* LAS VENTANAS CHICAS: entrar para registrar, y cerrar con un Rosario empezado. */
.ventana-chica {
  width: min(400px, calc(100vw - 32px)); padding: 24px; box-sizing: border-box;
  border: 1px solid var(--borde-primario); border-radius: 16px;
  background: var(--panel); color: var(--texto);
}
.ventana-chica::backdrop { background: rgba(0, 0, 0, 0.75); }
.ventana-chica form { display: flex; flex-direction: column; gap: 8px; }
.ventana-chica h2 { margin: 0 0 4px; font: 500 30px/1.1 var(--serif); color: var(--texto-fuerte); }
.ventana-chica label { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--texto-suave); }
.ventana-chica input {
  min-height: 44px; padding: 8px 12px; box-sizing: border-box; font-size: 16px;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--fondo); color: var(--texto-fuerte);
}
.ventana-chica input:focus { outline: 2px solid var(--primario); outline-offset: 1px; }
.ventana-chica input[aria-invalid="true"] { border-color: var(--error); }
.ventana-ayuda { margin: 0; font-size: 14px; color: var(--texto-suave); }
.ventana-chica .aviso[hidden] { display: none; }
.ventana-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin: 16px 0 8px; }
.ventana-botones.apiladas { flex-direction: column; align-items: stretch; }
.ventana-botones .secundario { min-height: 44px; justify-content: center; }
.ventana-botones .quitar { align-self: center; min-height: 44px; }

/* MI CALENDARIO, flotante: grande, sobre la pantalla completa oscurecida, con
   su propio desplazamiento. Lo de adentro sale de oracion.css. */
.ventana-calendario {
  width: min(1240px, calc(100vw - 48px)); max-height: calc(100dvh - 48px); padding: 24px 32px 32px;
  box-sizing: border-box; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--borde-primario); border-radius: 16px;
  background: var(--fondo); color: var(--texto); scrollbar-color: var(--borde-primario) transparent;
}
.ventana-calendario::backdrop { background: rgba(0, 0, 0, 0.75); }
.ventana-calendario-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.ventana-calendario-cabeza h2 { margin: 0; font: 500 36px/1.1 var(--serif); color: var(--primario); }
#lugar-calendario { display: flex; flex-direction: column; gap: 16px; }

/* LA ESCENA GRANDE: al centro, achicada para que se vea entera con aire. La
   mitad derecha avanza y la izquierda retrocede; el fondo, Escape o la X la
   cierran. */
.escena-grande {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: transparent; color: var(--texto);
}
.escena-grande[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.escena-grande::backdrop { background: rgba(0, 0, 0, 0.94); }
.grande-marco { position: relative; line-height: 0; }
.grande-marco img {
  display: block; max-width: 72vw; max-height: 72vh; width: auto; height: auto;
  border-radius: 12px; box-shadow: 0 0 96px rgba(217, 184, 114, 0.14);
}
.grande-mitad {
  position: absolute; top: 0; width: 50%; height: 100%; padding: 0 16px; border: 0;
  background: transparent; display: flex; align-items: center; cursor: pointer;
}
.grande-mitad.anterior { left: 0; justify-content: flex-start; cursor: w-resize; }
.grande-mitad.siguiente { right: 0; justify-content: flex-end; cursor: e-resize; }
.grande-mitad[hidden] { display: none; }
.grande-mitad span {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 999px;
  background: rgba(20, 17, 14, 0.55); color: var(--texto-fuerte);
}
.grande-pie { margin: 0; display: flex; align-items: baseline; gap: 12px; }
#grande-titulo { font: 500 24px/1.2 var(--serif); color: var(--texto-fuerte); }
.escena-grande .cerrar { position: absolute; top: 16px; right: 16px; background: rgba(20, 17, 14, 0.8); color: var(--texto-fuerte); }

main {
  flex: 1 1 auto; min-width: 0; max-width: 880px; height: 100%; padding: 32px 48px 16px;
  display: flex; flex-direction: column; gap: 16px;
}

.marca { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.marca h1 { margin: 0; font: 500 32px/1.1 var(--serif); color: var(--primario); }
.marca > span { font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--texto-suave); }
.marca .acciones { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.secundario.destacado { border-color: var(--borde-primario); color: var(--primario); }
.secundario.destacado:hover { border-color: var(--primario); color: var(--primario-claro); }
.aviso { margin: 0; font-size: 13px; color: var(--texto-suave); }
.aviso.error { color: var(--error); }

/* ------------------------------------------------------------ filtros --- */

/* Los filtros, chicos: lo que importa es la lista de abajo. */
.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.elegir { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 0; }
.elegir label { font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primario); }
.desplegable { position: relative; flex: 1; min-width: 0; }
.desplegable select {
  appearance: none; width: 100%; min-height: 36px; padding: 6px 36px 6px 12px;
  background: var(--panel); color: var(--texto-fuerte);
  border: 1px solid var(--borde-primario); border-radius: 10px;
  font-size: 14px; font-weight: 500; cursor: pointer;
}
.desplegable select:hover { border-color: var(--primario); }
.desplegable select option { background: var(--panel); color: var(--texto); }
.desplegable svg { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }

.herramientas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.segmento { display: inline-flex; border: 1px solid var(--borde); border-radius: 999px; padding: 2px; }
.segmento button {
  min-height: 30px; padding: 4px 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--texto-suave); font-size: 13px; cursor: pointer;
}
.segmento button[aria-pressed="true"] { background: var(--hover); color: var(--texto); font-weight: 600; }
.segmento button:disabled { opacity: 0.4; cursor: default; }
.buscar {
  /* 320 px de base: una pregunta entera ("¿qué dicen sobre…?") no entra en
     menos, y si no hay lugar al lado de los botones, baja a su propia línea. */
  flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 12px; border: 1px solid var(--borde); border-radius: 999px;
}
.buscar input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--texto); font-size: 14px; outline: none; }
.buscar:focus-within { border-color: var(--primario); }
.buscar input::placeholder { color: var(--texto-tenue); }

/* ------------------------------------------------------------ mensajes --- */

/* El lector llena lo que queda de alto; adentro, solo la lista se desplaza. */
.lector { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.cabeza { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 24px; }
.cabeza h2 { margin: 0; font: italic 500 28px/1.2 var(--serif); color: var(--primario); }
.cabeza p { margin: 0; font-size: 13px; color: var(--texto-suave); }

.desplazable {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding-right: 8px; scrollbar-color: var(--borde-primario) transparent;
}
.desplazable:focus-visible { outline-offset: -2px; }
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }

.tarjeta { padding: 20px 28px 16px; background: var(--panel); border: 1px solid var(--borde-primario); border-radius: 16px; }
.tarjeta .fecha {
  margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primario);
}
.tarjeta .texto { margin: 0; font: 500 24px/1.45 var(--serif); color: var(--texto-fuerte); }
.tarjeta .contexto { margin: 8px 0 0; font-size: 14px; font-style: italic; color: var(--texto-suave); }
.tarjeta .original { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--texto-tenue); }
.tarjeta .original:hover { color: var(--primario); }

.fin { margin: 0; padding: 16px 0; color: var(--texto-suave); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fin:empty { padding: 0; }
.fin.error { color: var(--error); }

.secundario {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px;
  border: 1px solid var(--borde); border-radius: 999px; background: transparent;
  color: var(--texto); text-decoration: none; font-size: 14px; font-weight: 500; cursor: pointer;
}
.secundario:hover { border-color: var(--borde-primario); color: var(--texto-fuerte); }

.redondo {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 999px;
  border: 1px solid var(--borde); background: transparent; color: var(--texto); cursor: pointer;
}
.contador { font-variant-numeric: tabular-nums; }

footer { flex: none; font-size: 12px; color: var(--texto-tenue); }

/* ------------------------------------------------------ último mensaje --- */

/* El último mensaje, solo y grande, sobre la página oscurecida. Se cierra con
   la X o con Escape (eso lo da <dialog>). */
.ultimo {
  width: min(720px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0;
  background: var(--panel); color: var(--texto); border: 1px solid var(--borde-primario);
  border-radius: 16px; overflow: auto;
}
.ultimo::backdrop { background: rgba(10, 8, 6, 0.75); }
.ultimo-cabeza {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 28px 0;
}
.ultimo-cabeza h2 { margin: 0; font: italic 500 28px/1.2 var(--serif); color: var(--primario); }
.ultimo-cuerpo { padding: 12px 28px 24px; }
.ultimo-cuerpo .fecha {
  margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primario);
}
.ultimo-cuerpo .texto { margin: 0; font: 500 28px/1.45 var(--serif); color: var(--texto-fuerte); }
.ultimo-cuerpo .contexto { margin: 12px 0 0; font-size: 14px; font-style: italic; color: var(--texto-suave); }
.ultimo-cuerpo .original { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--texto-tenue); }
.ultimo-cuerpo .estado { margin: 0; color: var(--texto-suave); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ultimo-cuerpo .estado.error { color: var(--error); }

/* ------------------------------------------------------------- música --- */

.musica { display: inline-flex; align-items: center; gap: 8px; }
.redondo.chico { width: 36px; height: 36px; }
.redondo[aria-pressed="true"] { border-color: var(--primario); color: var(--primario); }
.volumen { width: 88px; accent-color: var(--primario); cursor: pointer; }

.boton-principal {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 18px;
  border: 0; border-radius: 999px; background: var(--primario); color: var(--sobre-primario);
  font-size: 14px; font-weight: 600; cursor: pointer;
}
.boton-principal:hover { background: var(--primario-claro); }

.panel-musica { width: min(560px, calc(100vw - 32px)); }
.panel-musica .ultimo-cabeza h2 { font-size: 24px; }
.musica-cuerpo { display: flex; flex-direction: column; gap: 16px; }
.cancion { margin: 0; font-size: 14px; color: var(--primario); }
.musica-elegir { display: flex; flex-wrap: wrap; gap: 8px; }
.musica-elegir .secundario { min-height: 44px; }
.casilla { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.casilla input { width: 20px; height: 20px; accent-color: var(--primario); cursor: pointer; }
.formatos { margin: 0; font-size: 13px; color: var(--texto-tenue); }
.quitar {
  align-self: flex-start; padding: 0; border: 0; background: none; font-size: 13px;
  color: var(--texto-suave); text-decoration: underline; cursor: pointer;
}
.quitar:hover { color: var(--error); }

/* ------------------------------------------------------------ celular --- */

@media (max-width: 900px) {
  /* EN CELULAR LA PÁGINA SÍ SE DESPLAZA (pedido del 2026-10-18): la Virgen
     ocupa la mitad de la pantalla y los mensajes siguen debajo; la lista ya
     no tiene su propio desplazamiento. */
  html, body { height: auto; overflow: visible; }
  .pagina { flex-direction: column; }
  .imagen { flex: none; height: auto; padding: 8px 0 0; gap: 8px; }
  .imagen img { height: 50dvh; max-height: none; }
  .ampliar { height: auto; }
  /* El aviso tapaba a la Virgen: tocarla sigue abriendo, y abajo está el botón. */
  .ampliar-aviso { display: none; }
  .imagen .rezar { min-height: 40px; padding: 4px 14px; font-size: 13px; }
  main { flex: none; min-height: 0; height: auto; padding: 8px 16px 16px; gap: 8px; }
  .desplazable { flex: none; overflow: visible; padding-right: 0; }
  .marca h1 { font-size: 20px; }
  .marca > span { display: none; }
  .marca .acciones { gap: 6px; }
  /* 36 px: más chicos que en la compu, pero todavía cómodos con el dedo. */
  .secundario { min-height: 36px; padding: 4px 12px; font-size: 13px; }
  .cabeza h2 { font-size: 18px; }
  .cabeza p { font-size: 12px; }
  /* 16 px: con menos, el iPhone agranda la página al tocar el campo. */
  .buscar input, .desplegable select { font-size: 16px; }
  .tarjeta { padding: 12px 14px 10px; }
  .tarjeta .texto { font-size: 18px; }
  /* En celular no hay costado libre: la Virgen arriba y la ventana del
     misterio debajo, con su propio desplazamiento si no entra. El menú pasa
     abajo de la X, en una línea. */
  .completa[open] { display: flex; flex-direction: column; align-items: center; padding-top: 72px; }
  .escena { position: relative; inset: auto; flex: none; width: 100vw; height: 32dvh; }
  /* Más cerca que en la compu: la Virgen llena el alto y las nubes de los
     costados quedan afuera. */
  .escena-lienzo { --corrimiento: 0px; width: calc(32dvh * 1.3 * 2576 / 1438); }
  .rosario-menu {
    position: absolute; top: 16px; left: 8px; margin: 0; max-width: calc(100vw - 132px);
    overflow-x: auto; scrollbar-width: none;
  }
  /* Que entre en una línea con la X: sin flechitas ni separador, y menos aire. */
  .menu-boton { padding: 0 8px; }
  .menu-boton svg:last-child, .menu-separador { display: none; }
  .menu-tiempo { padding: 0 4px; }
  .menu-panel { position: fixed; top: 72px; left: 50%; transform: translateX(-50%); width: min(280px, calc(100vw - 32px)); }
  .rosario {
    flex: 0 1 auto; min-height: 0; max-height: none; width: calc(100% - 32px);
    margin: 12px 0 16px; padding: 12px;
  }
  .rosario-titulo { font-size: 24px; }
  .rosario-palabras { font-size: 18px; }
  .grande-marco img { max-width: 100vw; max-height: 60vh; border-radius: 0; }
  .ventana-calendario { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 16px; border: 0; border-radius: 0; }
  .ventana-calendario-cabeza h2 { font-size: 30px; }
  .ultimo-cabeza { padding: 16px 18px 0; }
  .ultimo-cuerpo { padding: 8px 18px 18px; }
  .ultimo-cuerpo .texto { font-size: 22px; }
}