/* Virgen de Medjugorje · Archivo de mensajes
   /mensajes, /mensajes/AAAA, /mensajes/AAAA/MM-DD-tipo, /mensajes/serie/…, /mensajes/vidente/…,
   /mensajes/buscar, /mensajes/sobre-el-archivo y /mensajes/primeros-dias.

   Solo clases con prefijo msj- y solo tokens de sitio.css. Los componentes compartidos (.mensaje,
   .cabecera-pagina, .subnav, .lista-ed, .paginacion, .aviso, .fuentes, .tabla, .chips, .vela…)
   se usan con su marcado y no se redefinen aquí: de ellos solo se ajusta la separación.

   Tres composiciones: A (portada con la foto a sangre) en /mensajes; B (lectura: una columna,
   solo tipografía) en la página de un mensaje; C (índice editorial: filas con filetes) en todo lo demás.
   Sin tarjetas, sin sombras, sin cajas. */

/* ==========================================================================
   Piezas comunes de la sección
   ========================================================================== */

/* Cabecera de las páginas interiores: tipográfica y corta */
.msj-cabecera { padding-bottom: var(--e-5); }
@media (min-width: 900px) {
  .msj-cabecera { padding-block: var(--e-6); }
}

/* Crédito y fuentes generales de una página, una sola vez */
.msj-credito {
  max-width: 46rem;
  margin: 0;
  font-size: var(--t-xs);
  line-height: 1.5;
  color: var(--tinta-3);
}
.msj-credito a { color: var(--enlace); }

/* «Antes de leer»: la Nota «La Reina de la Paz» como introducción de /mensajes y de cada año,
   serie y vidente. Dos o tres líneas a la vista y el resto en un <details>. Sin caja: un filete
   del color del tiempo. */
.msj-antes-envoltura { padding-top: var(--e-4); }
.msj-antes {
  max-width: 58rem;
  margin: 0 0 var(--e-5);
  padding: .125rem 0 0 var(--e-4);
  border-left: 3px solid var(--lit);
  transition: border-color var(--dur-tema) ease;
}
.msj-antes-envoltura .msj-antes { margin-bottom: 0; }
.msj-antes__titulo { margin: 0 0 var(--e-1); }
.msj-antes__texto {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--tinta-2);
  text-wrap: pretty;
}
.msj-antes__mas > summary {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--tinta);
  list-style: none;
  cursor: pointer;
}
.msj-antes__mas > summary::-webkit-details-marker { display: none; }
.msj-antes__mas > summary::after {
  content: "";
  flex: none;
  width: .45rem;
  height: .45rem;
  margin-bottom: .2rem;
  border-right: 1.5px solid var(--lit);
  border-bottom: 1.5px solid var(--lit);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--curva), border-color var(--dur-tema) ease;
}
.msj-antes__mas[open] > summary::after { margin-bottom: -.2rem; transform: rotate(-135deg); }
.msj-antes__mas > summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--lit); }
.msj-antes__lista {
  margin: 0 0 var(--e-2);
  padding-left: 1.1em;
  font-size: var(--t-sm);
  line-height: 1.55;
  color: var(--tinta-2);
}
.msj-antes__lista li + li { margin-top: .35em; }
.msj-antes__lista li::marker { color: var(--lit); }
.msj-antes__enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--e-5);
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.3;
}
.msj-antes__enlaces a { display: inline-block; padding-block: .4rem; color: var(--enlace); text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.msj-antes__enlaces a:hover { text-decoration-color: currentColor; }
.msj-antes__enlaces .enlace { padding-block: .4rem; }
.msj-antes__leer { margin: 0 0 var(--e-2); font-size: var(--t-sm); }
.msj-antes__leer .enlace { padding-block: .4rem; }
/* Con ancho, «Cómo pide leerlos la Nota» y los dos enlaces van en un mismo renglón */
@media (min-width: 760px) {
  .msj-antes { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--e-6); }
  .msj-antes__titulo, .msj-antes__texto { grid-column: 1 / -1; }
  .msj-antes__mas { grid-column: 1; grid-row: 3; }
  .msj-antes__enlaces { grid-column: 2; grid-row: 3; }
  .msj-antes__mas[open] { grid-column: 1 / -1; }
  .msj-antes__mas[open] + .msj-antes__enlaces { grid-column: 1 / -1; grid-row: 4; }
  .msj-antes__enlaces a, .msj-antes__enlaces .enlace { padding-block: .7rem; }
  .msj-antes-envoltura { padding-top: var(--e-5); }
}

/* Dentro de un mensaje: avisos, nota de contexto y fechas sin texto */
.msj-aviso { margin: 0 0 var(--e-4); }
.msj-aviso__oficial a { color: var(--enlace); font-weight: 500; }
.msj-contexto {
  margin: var(--e-4) 0 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-2);
}
.msj-estado {
  padding-left: var(--e-4);
  border-left: 2px solid var(--linea-fuerte);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--tinta-2);
  transition: border-color var(--dur-tema) ease;
}
.msj-estado p { margin: 0 0 .4em; }
.msj-estado p:last-child { margin-bottom: 0; }

/* La marca breve de una fila: «en inglés», «con erratas de la fuente», «no cae en jueves», «sin
   mensaje»… Siempre en el color de los avisos. El texto del mensaje no se toca: la marca avisa. */
.msj-marca { color: var(--piedra-texto); transition: color var(--dur-tema) ease; }

/* La nota bajo la cabeza de un mensaje semanal cuya fecha no cae en jueves (componente .aviso) */
.msj-fecha-nota { margin: 0 0 var(--e-5); border-left-color: var(--piedra); }
.msj-fecha-nota a { color: var(--enlace); }
.msj-fecha-nota__mas { white-space: nowrap; }

/* Una línea de enlaces sueltos, separados por aire */
.msj-enlaces {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--e-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-sm);
  line-height: 1.3;
}
.msj-enlaces a {
  display: inline-block;
  padding-block: .55rem;
  color: var(--enlace);
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.msj-enlaces a:hover { text-decoration-color: currentColor; text-decoration-thickness: 1px; }
.msj-enlaces .enlace { padding-block: .55rem; }
.msj-enlaces__n { color: var(--tinta-3); font-variant-numeric: lining-nums tabular-nums; }

/* ==========================================================================
   /mensajes · composición A (portada) y, debajo, índice editorial
   ========================================================================== */

/* El buscador de la portada: un campo y su botón, en una línea */
.msj-buscador {
  display: flex;
  gap: var(--e-2);
  width: 100%;
  max-width: 30rem;
  margin-top: var(--e-5);
}
.msj-buscador__campo {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 2.75rem;
  padding: .5rem 1.125rem;
  border: 1px solid var(--borde-campo);
  border-radius: 999px;
  background-color: var(--superficie);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--t-base);
  line-height: 1.3;
  transition: border-color var(--dur-rapida) ease, background-color var(--dur-tema) ease;
}
.msj-buscador__campo::placeholder { color: var(--tinta-3); opacity: 1; }
.msj-buscador__campo:hover { border-color: var(--tinta); }
.msj-buscador__campo:focus-visible { outline: 2px solid var(--foco); outline-offset: 1px; border-color: var(--foco); border-radius: 999px; }
.msj-buscador .boton { flex: none; }

/* Encuadre de la portada, según la foto que haya tocado (la elige el generador entre las que el
   catálogo da por publicables y sin personas). En el recorte de la estatua, la corona está en el
   borde superior y la figura, a la izquierda del centro: se encuadra desde la esquina superior
   izquierda para que la estatua quede fuera del fundido lateral. */
.cabecera-pagina--foto.msj-portada .msj-portada__foto--reina-de-la-paz-flores-recorte .foto__img { object-position: 0 0; }
.cabecera-pagina--foto.msj-portada .msj-portada__foto--virgen-y-crucifijo .foto__img { object-position: 50% 24%; }
.cabecera-pagina--foto.msj-portada .msj-portada__foto--relieve-podbrdo-2 .foto__img { object-position: 50% 40%; }
/* En escritorio el pie va en la esquina y no pasa del último tercio de la foto: no toca la estatua */
@media (min-width: 900px) {
  .cabecera-pagina--foto.msj-portada .foto__pie { max-width: min(13rem, 30%); padding-right: var(--e-4); }
}
/* El recorte mide 1056 × 776. Cuando el marco es más alto que la foto, esta lo cubre por alto (mide
   136.08cqh de ancho) y la estatua, que va del 28 al 52 % de la foto, se acerca al borde derecho:
   se corre a la izquierda lo justo para que no pase del 68 % del marco (ahí empieza el pie), sin
   meterla en el fundido lateral (que acaba al 32 %). */
@supports (container-type: size) {
  @media (min-width: 900px) {
    .cabecera-pagina--foto.msj-portada .msj-portada__foto--reina-de-la-paz-flores-recorte { container-type: size; }
    .cabecera-pagina--foto.msj-portada .msj-portada__foto--reina-de-la-paz-flores-recorte .foto__img {
      object-position: max(30cqw - 38.1cqh, min(0px, 68cqw - 70.8cqh)) 0;
    }
  }
}

/* En celular la portada se acorta para que «Por año» llegue pronto */
@media (max-width: 899.98px) {
  /* La foto, algo más baja que en las demás portadas: el archivo tiene que empezar pronto */
  .cabecera-pagina--foto.msj-portada .foto__img { height: 21vh; height: 21svh; max-height: 21svh; }
  .msj-portada { padding-bottom: var(--e-4); }
  .msj-portada .migas { margin-bottom: var(--e-3); }
  .msj-portada .bajada { font-size: var(--t-base); }
  .msj-portada .msj-buscador { margin-top: var(--e-4); }
}

.msj-bloque { padding-block: var(--e-5); }
.msj-bloque + .msj-bloque { padding-top: 0; }
.msj-bloque__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-1) var(--e-5);
  margin-bottom: var(--e-3);
}
.msj-bloque__titulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-size: var(--t-xl);
  font-weight: 500;
  line-height: 1.1;
}
.msj-bloque__nota { margin: 0; font-size: var(--t-sm); line-height: 1.4; color: var(--tinta-3); }
.msj-bloque__nota .enlace { padding-block: .35rem; }
.msj-bloque :is(section, div)[id], .msj-bloque[id] { scroll-margin-top: calc(var(--alto-cabecera) + 1rem); }

/* Por año: una fila por década; en cada año, la cifra pequeña cuenta sus mensajes.
   La columna es el último dígito del año: los huecos (1980, 1981, 1983) se ven. */
.msj-decadas { border-top: 1px solid var(--linea); transition: border-color var(--dur-tema) ease; }
.msj-decada { border-bottom: 1px solid var(--linea); transition: border-color var(--dur-tema) ease; }
.msj-decada__titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.msj-anios {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
/* En celular: cuatro columnas, el año y, debajo, su cifra; cada celda mide 44 px de alto */
.msj-anios a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  min-height: 2.75rem;
  padding-block: .2rem;
  color: var(--tinta);
  text-decoration: none;
}
.msj-anios__anio {
  font-family: var(--f-titulo);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.05;
  font-variant-numeric: lining-nums;
}
.msj-anios__n {
  font-size: var(--t-xs);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--tinta-3);
}
.msj-anios a:hover .msj-anios__anio {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  text-decoration-color: var(--lit);
}
.msj-anios a:hover .msj-anios__n { color: var(--lit); }
.msj-anios a:focus-visible { outline-offset: -2px; }
@media (max-width: 759.98px) {
  /* En celular los bloques van un poco más juntos */
  .msj-bloque { padding-block: var(--e-4); }
}
@media (max-width: 639.98px) {
  /* Las migas y el título ya lo dicen: en celular el antetítulo de la portada sobra */
  .msj-portada .etiqueta { display: none; }
  /* En celular los años van seguidos, de cuatro en cuatro, sin renglones a medias: la rejilla es
     una sola y las décadas (que siguen ahí para el lector de pantalla) no parten las filas. */
  .msj-decadas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--linea); }
  .msj-decada, .msj-anios { display: contents; }
}
/* Desde 640 px: cinco columnas, la cifra junto al año. La columna es el último dígito del año
   (dos filas por década), así que los huecos (1980, 1981, 1983) se ven. */
@media (min-width: 640px) {
  .msj-anios { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .msj-anios a { flex-direction: row; align-items: baseline; gap: .25rem; padding-block: .55rem 0; }
  .msj-anios__anio { line-height: 1.2; }
  .msj-anios__c0, .msj-anios__c5 { grid-column: 1; }
  .msj-anios__c1, .msj-anios__c6 { grid-column: 2; }
  .msj-anios__c2, .msj-anios__c7 { grid-column: 3; }
  .msj-anios__c3, .msj-anios__c8 { grid-column: 4; }
  .msj-anios__c4, .msj-anios__c9 { grid-column: 5; }
  .msj-anios__c0, .msj-anios__c1, .msj-anios__c2, .msj-anios__c3, .msj-anios__c4 { grid-row: 1; }
  .msj-anios__c5, .msj-anios__c6, .msj-anios__c7, .msj-anios__c8, .msj-anios__c9 { grid-row: 2; }
}
@media (min-width: 760px) {
  .msj-bloque { padding-block: var(--e-6); }
  .msj-anios a { padding-top: .65rem; }
  .msj-anios__anio { font-size: var(--t-md); }
}

@media (min-width: 960px) {
  .msj-decada { display: grid; grid-template-columns: 7rem minmax(0, 1fr); align-items: center; }
  .msj-decada__titulo {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    font-family: var(--f-texto);
    font-size: var(--t-sm);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    font-variant-numeric: lining-nums tabular-nums;
    color: var(--tinta-3);
  }
  .msj-anios { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .msj-anios a { justify-content: flex-start; min-height: 3.25rem; padding-top: .95rem; }
  .msj-anios__anio { font-size: var(--t-md); }
  .msj-anios__c0 { grid-column: 1; } .msj-anios__c1 { grid-column: 2; } .msj-anios__c2 { grid-column: 3; }
  .msj-anios__c3 { grid-column: 4; } .msj-anios__c4 { grid-column: 5; } .msj-anios__c5 { grid-column: 6; }
  .msj-anios__c6 { grid-column: 7; } .msj-anios__c7 { grid-column: 8; } .msj-anios__c8 { grid-column: 9; }
  .msj-anios__c9 { grid-column: 10; }
  .msj-anios__c5, .msj-anios__c6, .msj-anios__c7, .msj-anios__c8, .msj-anios__c9 { grid-row: 1; }
}

/* El más reciente: una sola fila. Debajo, cuándo se espera el próximo (lo escribe proximo.js) y el feed */
.msj-reciente { margin-top: var(--e-4); }
.msj-reciente .lista-ed { border-top: 0; }
.msj-seguir {
  margin: var(--e-2) 0 0;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-2);
}
.msj-proximo a { color: var(--enlace); }
.msj-seguir__feed {
  display: inline-block;
  padding-block: .2rem;
  color: var(--enlace);
  font-weight: 500;
  white-space: nowrap;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.msj-seguir__feed:hover { text-decoration-color: currentColor; }
.msj-seguir__sep { color: var(--tinta-3); }
/* En celular todo va seguido, como una frase, con aire entre renglones para tocar cada enlace */
@media (max-width: 639.98px) {
  .msj-seguir { line-height: 1.75; }
  .msj-seguir__feed { padding-block: 0; }
  .msj-reciente { margin-top: var(--e-3); }
  .msj-series__rejilla { gap: var(--e-4); }
  .msj-estado-archivo { padding-bottom: var(--e-4); }
}

/* Por tipo y por vidente: una línea por serie, sin tarjetas */
.msj-series__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e-5); }
@media (min-width: 960px) {
  .msj-series__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-8); }
  .msj-tabla th, .msj-tabla td { height: 2.75rem; }
  .msj-tabla thead th { height: 2rem; }
}
.msj-tabla {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--tinta);
  font-size: var(--t-sm);
  line-height: 1.25;
  font-variant-numeric: lining-nums tabular-nums;
  transition: border-color var(--dur-tema) ease;
}
.msj-tabla th,
.msj-tabla td {
  height: 2.5rem;
  padding: 0 var(--e-3) 0 0;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  vertical-align: middle;
  transition: border-color var(--dur-tema) ease;
}
.msj-tabla th:last-child, .msj-tabla td:last-child { padding-right: 0; text-align: right; }
.msj-tabla thead th {
  height: 2rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
  white-space: nowrap;
}
.msj-tabla tbody th {
  font-family: var(--f-titulo);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--tinta);
}
.msj-tabla tbody th a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  color: var(--tinta);
  text-decoration: none;
}
.msj-tabla tbody th a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  text-decoration-color: var(--lit);
}
.msj-tabla td { color: var(--tinta-2); white-space: nowrap; }
.msj-tabla td a { color: var(--enlace); text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.msj-tabla td a:hover { text-decoration-color: currentColor; }
/* «Último» con aviso: la marca («en inglés») va bajo la fecha */
.msj-tabla__marca { display: block; font-size: var(--t-xs); line-height: 1.2; }
.msj-tabla .msj-tabla__n { width: 1%; padding-right: var(--e-4); text-align: right; }
.msj-tabla tbody .msj-tabla__n { font-weight: 600; color: var(--lit); transition: color var(--dur-tema) ease; }
@media (max-width: 759.98px) {
  .msj-tabla th, .msj-tabla td { height: 2.25rem; }
  .msj-tabla tbody th a { min-height: 2.25rem; }
}
/* En pantallas muy angostas la columna de los años cede su sitio */
@media (max-width: 419.98px) {
  .msj-tabla th:nth-child(3), .msj-tabla td:nth-child(3) { display: none; }
  /* El rótulo «Mensajes» ensancharía su columna y partiría los nombres: se deja solo para quien no ve */
  .msj-tabla__rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Qué hay y qué falta en este archivo: el estado dicho en llano. Una frase con cuántos mensajes
   hay y tres renglones (completos, incompletos, con aviso), cada uno con su rótulo, sus frases
   cortas y su enlace. Filetes; sin caja. En celular el rótulo va sobre su texto. */
.msj-estado-archivo { padding-bottom: var(--e-5); }
.msj-estado-archivo > .envoltura { padding-top: var(--e-2); }
.msj-estado-archivo .etiqueta { margin-bottom: var(--e-2); }
.msj-estadol__cuantos {
  max-width: 46rem;
  margin: 0 0 var(--e-3);
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 500;
  line-height: 1.25;
  color: var(--tinta);
  text-wrap: balance;
}
.msj-estadol {
  margin: 0;
  border-top: 1px solid var(--tinta);
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color var(--dur-tema) ease;
}
.msj-estadol__fila {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  column-gap: var(--e-5);
  align-items: baseline;
  padding-block: .7rem;
  border-bottom: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.msj-estadol dt {
  font-family: var(--f-titulo);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tinta);
}
.msj-estadol dd { max-width: 58rem; margin: 0; color: var(--tinta-2); text-wrap: pretty; }
.msj-estadol dd a { color: var(--enlace); text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.msj-estadol dd a:hover { text-decoration-color: currentColor; }
.msj-estadol dd .enlace { padding-block: 0; white-space: nowrap; }
@media (max-width: 699.98px) {
  .msj-estadol__cuantos { font-size: 1.25rem; }
  .msj-estadol__fila { grid-template-columns: minmax(0, 1fr); row-gap: .2rem; padding-block: .65rem; }
  .msj-estadol dd .enlace { display: inline-block; padding-block: .3rem; }
}
.msj-estado-archivo .msj-credito { max-width: 58rem; margin-top: var(--e-3); }
.msj-estado-archivo .msj-credito .enlace { padding-block: .25rem; white-space: nowrap; }

/* ==========================================================================
   /mensajes/AAAA · índice compacto por meses; cada mensaje, un <details>
   ========================================================================== */

.msj-anio { padding-block: var(--e-5) var(--e-7); }
.msj-anio > .msj-credito { margin-top: var(--e-5); }
.msj-anio__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2) var(--e-4);
  min-height: 2.75rem;
  margin-bottom: var(--e-2);
}
.msj-vecinos { display: flex; gap: var(--e-5); font-size: var(--t-sm); font-variant-numeric: lining-nums tabular-nums; }
.msj-vecinos a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 2.75rem;
  color: var(--tinta-2);
  font-weight: 500;
  text-decoration: none;
}
.msj-vecinos a:hover { color: var(--tinta); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--lit); }

.msj-meses { margin-top: var(--e-5); border-bottom: 1px solid var(--linea); transition: border-color var(--dur-tema) ease; }
.msj-mes {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: var(--e-2);
  border-top: 1px solid var(--linea);
  scroll-margin-top: calc(var(--alto-cabecera) + .5rem);
  transition: border-color var(--dur-tema) ease;
}
.msj-mes__titulo {
  margin: 0;
  padding-top: .95rem;
  font-family: var(--f-texto);
  font-size: var(--t-xs);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
/* En celular el mes se abrevia a la vista; el nombre entero sigue ahí para quien no ve */
.msj-mes__largo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.msj-mes__dias {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--e-2);
  min-width: 0;
}

.msj-dia { min-width: 0; scroll-margin-top: calc(var(--alto-cabecera) + .5rem); }
.msj-dia__resumen {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  gap: 0 .5rem;
  min-height: 2.75rem;
  padding: .3rem 1.1rem .3rem 0;
  color: var(--tinta);
  list-style: none;
  cursor: pointer;
}
.msj-dia__resumen::-webkit-details-marker { display: none; }
/* El signo: un ángulo que gira al abrir */
.msj-dia__resumen::after {
  content: "";
  position: absolute;
  top: 50%;
  right: .3rem;
  width: .4rem;
  height: .4rem;
  margin-top: -.3rem;
  border-right: 1.5px solid var(--tinta-3);
  border-bottom: 1.5px solid var(--tinta-3);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--curva), border-color var(--dur-rapida) ease;
}
.msj-dia__resumen:hover::after { border-color: var(--lit); }
.msj-dia[open] > .msj-dia__resumen::after { margin-top: -.1rem; border-color: var(--lit); transform: rotate(-135deg); }
.msj-dia__resumen:focus-visible { outline-offset: -2px; }
.msj-dia__num {
  display: inline-block;
  min-width: 1.6rem;
  font-family: var(--f-titulo);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
  text-align: right;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.msj-dia__datos { display: grid; min-width: 0; line-height: 1.2; }
.msj-dia__tipo { font-size: var(--t-sm); font-weight: 500; color: var(--tinta); }
.msj-dia__quien { font-size: var(--t-xs); color: var(--tinta-3); }
/* La marca («en inglés», «con erratas de la fuente», «sin mensaje») va en su propio renglón, a todo
   el ancho de la celda. En celular la celda mide unos 124 px: se ve «erratas de la fuente» y la
   primera palabra queda solo para el lector de pantalla. */
.msj-dia__marcas { flex: 0 0 100%; min-width: 0; padding-top: .1rem; font-size: var(--t-xs); line-height: 1.25; }
.msj-dia__marca { color: var(--piedra-texto); }
@media (max-width: 639.98px) {
  .msj-dia__marcas .msj-marca__con {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
/* La marca «en inglés» que enlaza al archivo de la parroquia, donde ese texto está en español */
a.msj-dia__marca--oficial, a.msj-fechas__marca--oficial {
  color: var(--piedra-texto);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: .2em;
}
a.msj-dia__marca--oficial:hover, a.msj-fechas__marca--oficial:hover { text-decoration-color: currentColor; }
.msj-dia__resumen:hover .msj-dia__tipo {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: var(--lit);
}

/* Abierto: ocupa toda la fila y muestra el mensaje íntegro */
.msj-dia[open] { grid-column: 1 / -1; }
.msj-dia__cuerpo {
  margin-left: calc(-2.75rem - var(--e-2));
  padding: var(--e-3) 0 var(--e-6);
}
.msj-dia__cuerpo .mensaje__cabeza { margin-bottom: var(--e-4); }
.msj-dia__cuerpo .mensaje__fecha { font-size: var(--t-lg); }
.msj-dia__cuerpo .mensaje__pie { margin-top: var(--e-5); }
.msj-dia__mas { margin: var(--e-2) 0 0; font-size: var(--t-sm); }
/* Donde el navegador lo permite, el mensaje se despliega en 280 ms */
@supports (interpolate-size: allow-keywords) {
  .msj-dia { interpolate-size: allow-keywords; }
  .msj-dia::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size var(--dur) var(--curva), content-visibility var(--dur) allow-discrete;
  }
  .msj-dia[open]::details-content { block-size: auto; }
}
/* La regla general de sitio.css no alcanza a ::details-content: aquí también se quita el movimiento */
@media (prefers-reduced-motion: reduce) {
  .msj-dia::details-content { transition: none; }
}
.msj-anio .paginacion { margin-top: var(--e-6); }
/* Año anterior y año siguiente, lado a lado también en celular */
@media (max-width: 639.98px) {
  .msj-anio__pag { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-4); border-bottom: 1px solid var(--linea); transition: border-color var(--dur-tema) ease; }
  .msj-anio__pag a { border-bottom: 0; }
  .msj-anio__pag .paginacion__siguiente { grid-column: 2; }
}

@media (min-width: 640px) {
  .msj-mes { grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: var(--e-4); }
  .msj-mes__titulo {
    padding-top: .7rem;
    font-family: var(--f-titulo);
    font-size: var(--t-md);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tinta);
  }
  .msj-mes__corto { display: none; }
  .msj-mes__largo {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  .msj-mes__dias { grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); column-gap: var(--e-4); }
  /* La marca, alineada con los datos (bajo el tipo y el vidente) */
  .msj-dia__marcas { padding-left: 2.1rem; }
  .msj-dia__cuerpo { margin-left: 0; padding-top: var(--e-4); }
}

/* Desde 1100 px los meses van en dos columnas: de enero a junio y de julio a diciembre. Cada mitad
   es una lista con sus filetes; en media página caben dos días por renglón y el mensaje abierto
   ocupa la mitad entera (unos 600 px: la medida de lectura). Un año con meses en una sola mitad
   la muestra a todo el ancho, como antes. */
@media (min-width: 1100px) {
  .msj-meses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e-7); align-items: start; border-bottom: 0; }
  .msj-meses__mitad { border-bottom: 1px solid var(--linea); transition: border-color var(--dur-tema) ease; }
  .msj-meses__mitad:only-child { grid-column: 1 / -1; }
  .msj-meses__mitad:not(:only-child) .msj-mes { grid-template-columns: 6.75rem minmax(0, 1fr); }
  .msj-meses__mitad:not(:only-child) .msj-mes__dias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .msj-meses__mitad:not(:only-child) .msj-dia__cuerpo { margin-left: calc(-6.75rem - var(--e-4)); }
}

/* ==========================================================================
   /mensajes/AAAA/MM-DD-tipo · composición B: una columna, solo tipografía
   ========================================================================== */

.msj-ficha { padding-block: var(--e-5) var(--e-6); }
.msj-ficha .migas { margin-bottom: var(--e-6); }
.msj-ficha .migas ol { justify-content: center; }
.msj-ficha .mensaje { max-width: none; }
.msj-ficha .mensaje__cabeza { margin-bottom: var(--e-6); text-align: center; }
/* Debajo de la cabeza, la cinta del libro */
.msj-ficha .mensaje__cabeza::after {
  content: "";
  display: block;
  width: 2.5rem;
  height: 2px;
  margin: var(--e-5) auto 0;
  background-color: var(--lit);
  transition: background-color var(--dur-tema) ease;
}
.msj-ficha__titulo {
  margin: 0 0 var(--e-3);
  font-family: var(--f-titulo);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0;
}
.msj-ficha__titulo time { display: block; }
.msj-ficha__antes {
  display: block;
  font-size: var(--t-lg);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  color: var(--tinta-2);
}
/* El numeral del día, grande y del color del tiempo */
.msj-ficha__dia {
  display: block;
  margin-block: .04em .02em;
  font-size: clamp(5.5rem, 3.6rem + 9vw, 9.5rem);
  font-weight: 500;
  line-height: .86;
  letter-spacing: -.03em;
  font-variant-numeric: lining-nums;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.msj-ficha__mes { display: block; font-size: var(--t-xl); line-height: 1.1; }
.msj-ficha .mensaje__via { font-size: var(--t-sm); }
/* Una fecha sin texto: la fecha, sin tanto peso, y debajo la frase que lo dice */
.msj-ficha__titulo--sin .msj-ficha__dia { font-size: clamp(4rem, 2.8rem + 6vw, 6.5rem); color: var(--tinta-3); }
.msj-ficha__despues {
  display: block;
  margin-top: var(--e-3);
  font-size: var(--t-lg);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  color: var(--tinta-2);
  text-wrap: balance;
}

.msj-ficha .mensaje__texto { margin-inline: auto; }
/* Crédito y fuente: una línea serena */
.msj-ficha .mensaje__pie {
  max-width: none;
  margin-top: var(--e-6);
  padding-top: var(--e-3);
  font-size: var(--t-xs);
  line-height: 1.55;
}
.msj-ficha .mensaje__pie p { display: inline; margin: 0; }
.msj-ficha .mensaje__credito { color: var(--tinta-2); }
.msj-ficha .mensaje__credito + .mensaje__fuente::before { content: "· "; content: "· " / ""; }

/* Anterior y siguiente de la serie, inmediatamente después */
/* En esta página van lado a lado también en celular, para que queden a la vista sin desplazarse */
.msj-ficha__serie {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--e-4);
  margin-top: var(--e-5);
  border-bottom: 1px solid var(--linea);
}
.msj-ficha__serie a { justify-content: flex-start; padding-block: var(--e-3); border-bottom: 0; }
.msj-ficha__serie .paginacion__siguiente { grid-column: 2; }
/* El primero y el último de una serie solo tienen un vecino: ocupa todo el renglón */
.msj-ficha__serie a:only-child { grid-column: 1 / -1; }
/* El último del día 25: en el lugar de «Siguiente», cuándo se espera el próximo (lo afina
   proximo.js) y el recordatorio para el calendario. No es un enlace: es un dato con dos enlaces. */
.msj-ficha__proximo {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: .2rem;
  min-width: 0;
  padding-block: var(--e-3);
  text-align: right;
}
.msj-ficha__proximo .etiqueta { margin: 0; color: var(--tinta-3); }
.msj-ficha__proximo-texto {
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}
.msj-ficha__serie .msj-ficha__proximo a {
  display: inline-block;
  min-height: 0;
  padding: .35rem 0;
  border: 0;
  color: var(--enlace);
  font-family: var(--f-texto);
  font-size: var(--t-sm);
  font-weight: 500;
  line-height: 1.3;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: .2em;
}
.msj-ficha__serie .msj-ficha__proximo a:hover { text-decoration-color: currentColor; }
.msj-ficha__serie .msj-ficha__proximo a > span:last-child { font: inherit; }

/* El pie de la página: tres filas con su rótulo en versalitas (.etiqueta) a la izquierda:
   «En esta serie», «Este día en otros años» y «Compartir». En celular, el rótulo va encima. */
.msj-pie-ficha { margin-top: var(--e-2); }
.msj-pie-ficha__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--e-2) var(--e-1);
  border-bottom: 1px solid var(--linea);
  transition: border-color var(--dur-tema) ease;
}
.msj-pie-ficha__rotulo { margin: 0; padding-top: var(--e-1); }
.msj-otros-anios {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.3;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--tinta-3);
}
.msj-otros-anios a {
  display: inline-block;
  padding: .55rem .45rem .55rem 0;
  margin-right: .25rem;
  color: var(--enlace);
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.msj-otros-anios a:hover { text-decoration-color: currentColor; }
/* /mensajes/ultimo: la fila que dice que esa dirección no cambia */
.msj-ultimo__nota {
  margin: 0;
  padding-block: .55rem;
  font-size: var(--t-sm);
  line-height: 1.5;
  color: var(--tinta-2);
}

/* Compartir: tres acciones discretas, en una línea */
.msj-compartir__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e-5);
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.3;
}
.msj-accion {
  display: inline-block;
  padding: .6rem .1rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--tinta-2);
  font-family: var(--f-texto);
  font-size: inherit;
  font-weight: 500;
  line-height: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--linea-fuerte);
  text-underline-offset: .25em;
  cursor: pointer;
  transition: color var(--dur-rapida) ease, text-decoration-color var(--dur-rapida) ease;
}
.msj-accion:hover { color: var(--tinta); text-decoration-color: var(--lit); }
.msj-compartir__estado { margin: 0; font-size: var(--t-sm); line-height: 1.4; color: var(--tinta-2); }
.msj-compartir__estado:empty { display: none; }
.msj-impresion { display: none; }

.msj-ficha__silencio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-5);
}
.msj-ficha__silencio .vela { width: 1.25rem; height: 2.5rem; }

@media (min-width: 640px) {
  .msj-ficha { padding-block: var(--e-6) var(--e-9); }
  .msj-ficha .migas { margin-bottom: var(--e-7); }
  .msj-ficha .mensaje__cabeza { margin-bottom: var(--e-7); }
  .msj-ficha .mensaje__cabeza::after { margin-top: var(--e-6); }
  .msj-ficha .mensaje__pie { margin-top: var(--e-7); font-size: var(--t-sm); }
  .msj-ficha__serie { margin-top: var(--e-7); }
  .msj-pie-ficha__fila { grid-template-columns: 9.5rem minmax(0, 1fr); column-gap: var(--e-4); align-items: baseline; padding-block: var(--e-1); }
  .msj-pie-ficha__rotulo { padding-top: 0; }
  .msj-ficha__silencio { margin-top: var(--e-7); }
}

/* ==========================================================================
   /mensajes/serie/… y /mensajes/vidente/… · la lista compacta por año
   ========================================================================== */

.msj-serie { padding-block: var(--e-5) var(--e-8); }
.msj-huecos { max-width: 52rem; margin: 0 0 var(--e-5); }
.msj-vidente-series { margin-bottom: var(--e-4); }
.msj-vidente-series .etiqueta, .msj-otras .etiqueta { margin-bottom: 0; }
.msj-otras { margin-top: var(--e-7); padding-top: var(--e-4); border-top: 1px solid var(--linea); transition: border-color var(--dur-tema) ease; }
.msj-serie .fuentes { margin-top: var(--e-6); }

/* A. Calendario: una fila por año, una columna por mes; cada número es el día de un mensaje */
.msj-cal {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
}
.msj-cal th,
.msj-cal td {
  padding: 0;
  border-bottom: 1px solid var(--linea);
  text-align: center;
  vertical-align: top;
  transition: border-color var(--dur-tema) ease, background-color var(--dur-tema) ease;
}
.msj-cal thead th {
  position: sticky;
  top: var(--alto-cabecera);
  z-index: 2;
  height: 2.25rem;
  vertical-align: middle;
  border-top: 1px solid var(--tinta);
  border-bottom-color: var(--linea-fuerte);
  background-color: var(--fondo);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tinta-3);
}
.msj-cal thead abbr { text-decoration: none; }
.msj-cal__resto { display: none; }
.msj-cal thead .msj-cal__esquina, .msj-cal tbody th { width: 2.75rem; text-align: left; }
.msj-cal tbody th a {
  display: flex;
  align-items: center;
  min-height: 2rem;
  font-family: var(--f-titulo);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  color: var(--lit);
  text-decoration: none;
  transition: color var(--dur-tema) ease;
}
.msj-cal tbody th a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; }
.msj-cal tbody tr:hover > * { background-color: var(--lit-suave); }
.msj-cal__d {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  min-height: 2rem;
  font-size: var(--t-sm);
  line-height: 1;
  color: var(--tinta);
  text-decoration: none;
}
a.msj-cal__d:hover { color: var(--lit); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
a.msj-cal__d:focus-visible { outline-offset: -2px; }
.msj-cal__d--sin { font-style: italic; color: var(--tinta-3); }
/* Las marcas del calendario, todas en el color de los avisos y cada una con su forma (no solo con
   color): subrayado de puntos, texto en otra lengua; subrayado ondulado, texto con erratas de la
   fuente; un punto arriba a la derecha, fecha de la serie semanal que no cae en jueves. */
.msj-cal__d--idioma { color: var(--piedra-texto); text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.msj-cal__d--erratas { color: var(--piedra-texto); text-decoration: underline wavy; text-decoration-thickness: 1px; text-underline-offset: .25em; }
.msj-cal__d--dia { position: relative; }
.msj-cal__d--dia::after {
  content: "";
  position: absolute;
  top: .3rem;
  right: -.1rem;
  width: .3125rem;
  height: .3125rem;
  border-radius: 50%;
  background-color: var(--piedra-texto);
  transition: background-color var(--dur-tema) ease;
}
.msj-leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem var(--e-5);
  margin: var(--e-3) 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--tinta-3);
}
.msj-leyenda li { margin: 0; }
.msj-leyenda .msj-cal__d { min-height: 0; margin-right: .2rem; font-size: var(--t-sm); }
.msj-leyenda .msj-cal__d--dia { margin-right: .35rem; }
.msj-leyenda .msj-cal__d--dia::after { top: -.05rem; right: -.25rem; }

/* El calendario por décadas: la más reciente a la vista; las anteriores, cada una en un <details>
   con sus años y su cifra (en celular, plegadas; desde 1024 px las abre /js/plegables.js). */
.msj-cal-decada { border-bottom: 1px solid var(--linea); transition: border-color var(--dur-tema) ease; }
.msj-cal-decada > summary {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  min-height: 2.75rem;
  padding-block: .65rem .5rem;
  font-variant-numeric: lining-nums tabular-nums;
  list-style: none;
  cursor: pointer;
}
.msj-cal-decada > summary::-webkit-details-marker { display: none; }
.msj-cal-decada > summary::after {
  content: "";
  flex: none;
  align-self: center;
  width: .45rem;
  height: .45rem;
  margin: 0 .35rem .2rem auto;
  border-right: 1.5px solid var(--tinta-3);
  border-bottom: 1.5px solid var(--tinta-3);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--curva), border-color var(--dur-rapida) ease;
}
.msj-cal-decada[open] > summary::after { margin-bottom: -.2rem; border-color: var(--lit); transform: rotate(-135deg); }
.msj-cal-decada > summary:hover::after { border-color: var(--lit); }
.msj-cal-decada > summary:focus-visible { outline-offset: -2px; }
.msj-cal-decada__anios { font-family: var(--f-titulo); font-size: var(--t-md); font-weight: 600; line-height: 1.1; color: var(--tinta); }
.msj-cal-decada > summary:hover .msj-cal-decada__anios { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .16em; text-decoration-color: var(--lit); }
.msj-cal-decada__n { font-size: var(--t-sm); line-height: 1.2; color: var(--tinta-3); }
.msj-cal-decada .msj-cal { margin-bottom: var(--e-2); }
.msj-cal-decada .msj-cal thead th { border-top-color: var(--linea-fuerte); }
.msj-cal-decada .msj-cal tbody tr:last-child > * { border-bottom: 0; }
@media (min-width: 640px) {
  .msj-cal thead .msj-cal__esquina, .msj-cal tbody th { width: 4.5rem; }
  .msj-cal__resto { display: inline; }
  .msj-cal tbody th a { min-height: 2.25rem; font-size: var(--t-md); }
  .msj-cal__d { min-width: 1.75rem; min-height: 2.25rem; font-size: var(--t-base); }
}

/* B. Lista de fechas: para las series y los videntes con pocos mensajes por año */
.msj-fechas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--e-4);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tinta);
  transition: border-color var(--dur-tema) ease;
}
.msj-fechas li { border-bottom: 1px solid var(--linea); transition: border-color var(--dur-tema) ease; }
.msj-fechas__a {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  min-height: 2.75rem;
  padding-block: .6rem;
  color: var(--tinta);
  text-decoration: none;
}
.msj-fechas__anio {
  flex: none;
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
.msj-fechas__datos { display: grid; min-width: 0; font-size: var(--t-sm); line-height: 1.3; }
.msj-fechas__meta { font-size: var(--t-xs); color: var(--tinta-3); }
.msj-fechas__a:hover time { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; text-decoration-color: var(--lit); }
.msj-fechas__a--sin time { font-style: italic; color: var(--tinta-3); }
.msj-fechas__a:focus-visible { outline-offset: -2px; }
/* Una fecha cuya marca («en francés») enlaza aparte al archivo de la parroquia */
.msj-fechas__doble { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--e-3); }
.msj-fechas__doble .msj-fechas__a { flex: 1 1 auto; }
.msj-fechas__marca { flex: none; padding-block: .6rem; font-size: var(--t-xs); line-height: 1.3; }
.msj-leyenda a { color: var(--enlace); }
@media (min-width: 640px) { .msj-fechas { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--e-6); } }
@media (min-width: 960px) { .msj-fechas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* C. Los mensajes de la serie semanal que no caen en jueves: una fila por mensaje, con su marca */
.msj-nojueves { margin-top: var(--e-6); scroll-margin-top: calc(var(--alto-cabecera) + 1rem); }
.msj-nojueves .etiqueta { margin-bottom: var(--e-2); }
.msj-nojueves__texto { max-width: 46rem; margin: 0 0 var(--e-3); font-size: var(--t-sm); line-height: 1.55; color: var(--tinta-2); }
.msj-nojueves__texto a { color: var(--enlace); }
.msj-fechas--dia time::first-letter { text-transform: uppercase; }

/* ==========================================================================
   /mensajes/buscar
   ========================================================================== */

.msj-busqueda { padding-block: var(--e-4) var(--e-8); }
.msj-busqueda__form { max-width: 46rem; }
.msj-busqueda__campo { margin-bottom: var(--e-2); }
.msj-busqueda__fila { display: flex; gap: var(--e-2); }
.msj-busqueda__fila input { flex: 1 1 auto; min-width: 0; }
.msj-busqueda__fila .boton { flex: none; }

/* Filtros: plegados por omisión */
.msj-filtros { border-block: 1px solid var(--linea); transition: border-color var(--dur-tema) ease; }
.msj-filtros > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 2.75rem;
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--tinta-2);
  list-style: none;
  cursor: pointer;
}
.msj-filtros > summary::-webkit-details-marker { display: none; }
.msj-filtros > summary::after {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  margin: 0 .35rem .25rem 0;
  border-right: 1.5px solid var(--lit);
  border-bottom: 1.5px solid var(--lit);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--curva), border-color var(--dur-tema) ease;
}
.msj-filtros[open] > summary::after { margin-bottom: -.2rem; transform: rotate(-135deg); }
.msj-filtros > summary:hover { color: var(--tinta); }
.msj-filtros__dentro {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-3) var(--e-4);
  padding: var(--e-2) 0 var(--e-4);
}
.msj-filtros__dentro .campo { margin-bottom: 0; }
.msj-filtros__dentro .campo__etiqueta { font-size: var(--t-sm); }
.msj-filtros__pie { display: flex; align-items: flex-end; }
@media (min-width: 760px) {
  .msj-filtros__dentro { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.msj-rapidas { margin-top: var(--e-5); }
.msj-rapidas .etiqueta { margin-bottom: var(--e-3); }
/* Vuelta al buscador de todo el sitio (/buscar) */
.msj-rapidas__sitio { max-width: 46rem; margin: var(--e-5) 0 0; font-size: var(--t-sm); line-height: 1.5; color: var(--tinta-2); }
.msj-rapidas__ir { margin: 0; font-size: var(--t-sm); }

.msj-resumen {
  min-height: 1.5em;
  margin: var(--e-4) 0 var(--e-2);
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.25;
}
.msj-resumen:empty { display: none; }

/* «Busca también:» — las formas de la misma raíz que existen en los textos. Solo se ofrecen:
   el buscador no las mezcla por su cuenta. */
.msj-tambien {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  margin: 0 0 var(--e-3);
}
.msj-tambien__t { flex: 0 0 100%; margin: 0; font-size: var(--t-sm); font-weight: 500; line-height: 1.3; color: var(--tinta-2); }

/* Resultados. En celular, una columna: cada fila abre su mensaje íntegro en su lugar y los tres
   primeros llegan abiertos. En escritorio, dos: la lista a la izquierda (cada fila con la oración
   literal donde aparece la palabra) y, a la derecha, los mensajes abiertos. */
.msj-doble { display: grid; grid-template-columns: minmax(0, 1fr); }
.msj-doble__lista { min-width: 0; max-width: 46rem; }
.msj-resultados {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tinta);
  transition: border-color var(--dur-tema) ease;
}
.msj-resultados:empty { display: none; }
.msj-res { position: relative; border-bottom: 1px solid var(--linea); transition: border-color var(--dur-tema) ease; }
.msj-res__fila {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: .1rem var(--e-3);
  width: 100%;
  min-height: 3.25rem;
  padding: .6rem 2.25rem .45rem 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--tinta);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.msj-res__fila:focus-visible { outline-offset: -2px; }
/* El cheurón de cada fila, siempre a la vista: gira cuando su mensaje está abierto */
.msj-res__signo {
  position: absolute;
  top: 1.1rem;
  right: .5rem;
  width: .6rem;
  height: .6rem;
  border-right: 2px solid var(--tinta-3);
  border-bottom: 2px solid var(--tinta-3);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--curva), border-color var(--dur-rapida) ease;
}
.msj-res__fila:hover .msj-res__signo { border-color: var(--lit); }
.msj-res__fila[aria-expanded="true"] .msj-res__signo { top: 1.4rem; border-color: var(--lit); transform: rotate(-135deg); }
.msj-res__fecha {
  grid-column: 1 / -1;
  font-family: var(--f-titulo);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.15;
  font-variant-numeric: lining-nums;
}
.msj-res__fila:hover .msj-res__fecha {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .16em;
  text-decoration-color: var(--lit);
}
.msj-res__datos { grid-column: 1; grid-row: 2; font-size: var(--t-sm); line-height: 1.3; color: var(--tinta-3); }
.msj-res__n {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--t-sm);
  line-height: 1.2;
  font-variant-numeric: lining-nums tabular-nums;
  text-align: right;
  color: var(--lit);
  transition: color var(--dur-tema) ease;
}
/* El fragmento: la oración literal donde aparece la palabra. Los puntos suspensivos dicen que es
   un extracto; el texto no se resume ni se retoca. */
.msj-res__fragmento {
  margin: 0;
  padding: 0 2.25rem .75rem 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta-2);
  white-space: pre-line;
}
.msj-res__corte { color: var(--tinta-3); }
.msj-res__integro { display: inline-block; margin-left: .35rem; font-size: var(--t-sm); color: var(--enlace); white-space: nowrap; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.msj-res__integro:hover { text-decoration-color: currentColor; }
/* En una columna, la fila abierta ya muestra el mensaje íntegro: el fragmento sobra */
.msj-res[data-abierto] .msj-res__fragmento { display: none; }
.msj-res__cuerpo { padding: var(--e-2) 0 var(--e-6); }
.msj-res__cabeza { display: none; }
.msj-res__cuerpo .mensaje__pie { margin-top: var(--e-5); }
.msj-res__mas { margin: var(--e-2) 0 0; font-size: var(--t-sm); }
.msj-busqueda mark {
  padding: 0 .08em;
  border-radius: 2px;
  background-color: color-mix(in srgb, var(--vela) 34%, transparent);
  color: inherit;
}
.msj-panel { display: none; }
.msj-mas-resultados { margin-top: var(--e-5); }
.msj-sin-resultados { max-width: 46rem; margin-top: var(--e-3); color: var(--tinta-2); }
.msj-sin-resultados .chips { margin-bottom: var(--e-4); }
.msj-busqueda > .msj-credito { margin-top: var(--e-6); }
.msj-busqueda > .msj-credito a { color: var(--enlace); }
@media (min-width: 640px) {
  .msj-res__fila { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; }
  .msj-res__fecha { grid-column: 1; }
  .msj-res__datos { grid-column: 2; grid-row: 1; }
  .msj-res__n { grid-column: 3; grid-row: 1; }
}
@media (min-width: 1024px) {
  .msj-doble { grid-template-columns: minmax(20rem, 5fr) minmax(0, 7fr); column-gap: var(--e-7); align-items: start; }
  .msj-doble__lista { max-width: none; }
  /* En la lista de la izquierda la fila vuelve a dos renglones y el fragmento se ve siempre */
  .msj-res__fila { grid-template-columns: minmax(0, 1fr) auto; }
  .msj-res__fecha { grid-column: 1 / -1; }
  .msj-res__datos { grid-column: 1; grid-row: 2; }
  .msj-res__n { grid-column: 2; grid-row: 2; }
  .msj-res[data-abierto] .msj-res__fragmento { display: block; }
  /* La fila cuyo mensaje está abierto a la derecha lleva la cinta del tiempo */
  .msj-res[data-abierto]::before {
    content: "";
    position: absolute;
    top: .7rem;
    bottom: .7rem;
    left: -.75rem;
    width: 3px;
    background-color: var(--lit);
    transition: background-color var(--dur-tema) ease;
  }
  .msj-panel {
    display: block;
    min-width: 0;
    padding-left: var(--e-6);
    border-left: 1px solid var(--linea);
    transition: border-color var(--dur-tema) ease;
  }
  /* Con un solo mensaje abierto, el panel acompaña a la lista mientras se desplaza */
  .msj-panel[data-uno] {
    position: sticky;
    top: calc(var(--alto-cabecera) + var(--e-4));
    max-height: calc(100vh - var(--alto-cabecera) - var(--e-6));
    overflow-y: auto;
    padding-right: var(--e-2);
  }
  .msj-panel .msj-res__cuerpo { padding: 0 0 var(--e-6); }
  .msj-panel .msj-res__cuerpo + .msj-res__cuerpo { padding-top: var(--e-6); border-top: 1px solid var(--linea); }
  .msj-panel .msj-res__cabeza { display: block; margin: 0 0 var(--e-4); }
  .msj-panel .msj-res__cabeza-fecha {
    margin: 0;
    font-family: var(--f-titulo);
    font-size: var(--t-lg);
    font-weight: 500;
    line-height: 1.1;
    font-variant-numeric: lining-nums;
  }
  .msj-panel .msj-res__cabeza-datos { margin: var(--e-1) 0 0; font-size: var(--t-sm); color: var(--tinta-3); }
}

/* ==========================================================================
   /mensajes/sobre-el-archivo y /mensajes/primeros-dias
   ========================================================================== */

.msj-sobre { padding-block: var(--e-6) var(--e-7); }
.msj-primeros { padding-block: var(--e-6) var(--e-8); }
/* Sobre el archivo: cada apartado deja a la vista lo esencial; las tablas y las listas largas van
   en acordeones (.acordeon, de sitio.css). En celular, con la página ya corta, el índice sobra. */
@media (max-width: 1023.98px) { .msj-sobre .indice { display: none; } }
.msj-sobre .prosa > h2:not(.etiqueta) { margin-top: 1.3em; }
.msj-sobre .prosa > h2:first-child { margin-top: 0; }
.msj-sobre .prosa > p { margin-bottom: .8em; }
.msj-sobre .acordeon > summary { padding-block: var(--e-3); }
.msj-sobre .acordeon .tabla-envoltura { margin-block: 0 var(--e-2); border-top: 0; }
.msj-sobre .acordeon > div > p { font-size: var(--t-sm); line-height: 1.55; }
.msj-sobre .acordeon > div > :is(ul, ol) { font-size: var(--t-sm); line-height: 1.55; }
/* La lista de los textos con aviso, por motivo: cada motivo, su título, una línea y sus fechas */
.msj-sobre .acordeon .msj-motivo { margin: 1.2em 0 .3em; font-size: var(--t-md); }
.msj-sobre .acordeon > div > .msj-motivo:first-child { margin-top: 0; }
.msj-sobre .acordeon .msj-lista-corta + .msj-motivo { margin-top: 1.4em; }
.msj-sobre .acordeon[id] { scroll-margin-top: calc(var(--alto-cabecera) + .5rem); }
.msj-huecos-lista { margin-bottom: var(--e-4); }
.msj-huecos-lista .enlace { padding-block: 0; }
.msj-sobre .fuentes { margin-top: var(--e-6); }
.msj-lista-corta {
  columns: 2;
  column-gap: var(--e-5);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-sm);
  line-height: 1.4;
}
.msj-lista-corta li { break-inside: avoid; padding-block: .3rem; }
.msj-lista-corta li + li { margin-top: 0; }
.msj-lista-corta__meta { font-size: var(--t-xs); color: var(--tinta-3); white-space: nowrap; }
@media (max-width: 479.98px) { .msj-lista-corta { columns: 1; } }

/* ==========================================================================
   Impresión
   ========================================================================== */

@media print {
  .migas, .msj-buscador, .msj-anio__barra, .msj-dia__mas, .msj-pie-ficha, .msj-ficha__silencio,
  .msj-seguir, .msj-otras, .msj-vidente-series, .msj-busqueda__form, .msj-rapidas, .msj-antes__mas,
  .msj-mas-resultados, .msj-sin-resultados, .msj-res__mas, .msj-res__signo { display: none !important; }
  .msj-impresion { display: block !important; margin-top: 1rem; font-size: 10pt; word-break: break-all; }
  .msj-ficha { padding: 0; }
  .msj-ficha__dia { font-size: 48pt; }
  .msj-dia, .msj-res { break-inside: avoid; }
  .msj-dia::details-content { transition: none; }
  .msj-dia__cuerpo { margin-left: 0; }
  .msj-dia__resumen::after { display: none; }
  .msj-cal thead th { position: static; }
  .msj-panel[data-uno] { position: static; max-height: none; overflow: visible; }
}