/* estilo.css — leonardomortola.com
 * Mobile first. Sobrio: el protagonista es el dibujo. Fondo neutro, poca cromática.
 * Se copia tal cual a dist/ con build-html.php.
 */

/* Tipografías, autoalojadas en dist/fuentes/ (sin CDN, igual que el visor). Las fuentes de origen
 * que entregó el cliente (OTF y TTF) están en originales/fuentes/ y no se suben; a dist/ van en WOFF2.
 * Aloevera (salamahtype, familia completa de seis estilos), una sans geométrica, para los títulos.
 * Work Sans (licencia OFL, estáticas recortadas al juego latino) para el menú, el texto y la letra chica.
 * Se declaran todos los estilos disponibles: el navegador solo baja los que alguna regla usa.
 * font-display: swap muestra el texto con la fuente de reserva mientras bajan los archivos. */

@font-face { font-family: "Aloevera"; src: url("fuentes/Aloevera-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Aloevera"; src: url("fuentes/Aloevera-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Aloevera"; src: url("fuentes/Aloevera-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Aloevera"; src: url("fuentes/Aloevera-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Aloevera"; src: url("fuentes/Aloevera-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Aloevera"; src: url("fuentes/Aloevera-MediumItalic.woff2") format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }

@font-face { font-family: "Work Sans"; src: url("fuentes/WorkSans-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("fuentes/WorkSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("fuentes/WorkSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("fuentes/WorkSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("fuentes/WorkSans-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("fuentes/WorkSans-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --fuente-titulo: "Aloevera", "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-texto: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fondo: #ffffff;
  --papel: #ffffff;
  --tinta: #1c1c1c;
  --tinta-suave: #6d6a64;
  --linea: #dcd8d0;
  --acento: #a8392f;   /* rojo apagado, el de la boina de Don Hilario: menú activo, links, tarjetas */
  --ancho-max: 1440px;   /* ancho máximo del contenido y de la cabecera; en pantallas más anchas se centra */
  --hueco: 10px;   /* separación entre dibujos en la grilla */
  --margen: 14px;  /* margen lateral de la página */
}

@media (min-width: 640px) {
  :root { --hueco: 14px; --margen: 24px; }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 5rem;   /* que un salto a #id no quede tapado por la cabecera */
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 16px/1.5 var(--fuente-texto);
}

a { color: inherit; }

/* Cabecera y menú. Sticky: se esconde al bajar y reaparece al subir (sitio.js pone la clase). */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 22px;
  padding: 12px calc(max(0px, (100% - var(--ancho-max)) / 2) + var(--margen));   /* marca y menú alineados con el contenido */
  background: var(--papel);
  border-bottom: 1px solid transparent;   /* la línea aparece solo con la página desplazada */
  transition: transform .25s ease, border-color .25s ease;
}

.cabecera--pegada { border-bottom-color: var(--linea); }

.cabecera--oculta { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
  .cabecera { transition: none; }
}

.marca {
  font-family: var(--fuente-titulo);
  font-size: 1.4rem;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
}

.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0 16px;
  margin-left: auto;   /* botonera a la derecha, con la marca a la izquierda */
  font-size: .95rem;
}

.menu a {
  padding: 4px 0;
  text-align: center;   /* el texto normal, centrado en el ancho que reserva la negrita */
  color: var(--tinta-suave);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.menu a:hover { color: var(--tinta); }

/* Cada botón reserva el ancho de su texto en negrita: una copia invisible de alto cero en ::after
 * (el texto llega en data-texto). Así el activo no cambia de ancho y el resto no se corre. */

.menu a::after {
  content: attr(data-texto);
  display: block;
  height: 0;
  overflow: hidden;
  font-weight: 700;
  visibility: hidden;
}

/* En celular, marca y menú van en dos filas, centradas; desde 640 px, marca a la izquierda y menú a la derecha. */

@media (max-width: 639px) {
  .cabecera {
    justify-content: center;
    gap: 4px 0;
  }

  .marca {
    width: 100%;
    text-align: center;
  }

  .menu {
    justify-content: center;
    width: 100%;
    margin-left: 0;
  }
}

/* Sección activa: tinta y negrita, sin el color de acento (decisión del cliente del 28/9/2026). */

.menu a[aria-current="page"] {
  color: var(--tinta);
  font-weight: 700;
  border-bottom-color: var(--tinta);
}

main {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 16px var(--margen) 32px;
}

h1 {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.2;
}

/* Título de bloque dentro de una sección (Destacados / Todas las tiras) */

.bloque-titulo {
  margin: 0 0 10px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.galeria + .bloque-titulo { margin-top: 30px; }

/* Grilla de dibujos.
 * Cuadrícula regular, no masonry: en deportes y humor general los dibujos son cuadrados o casi
 * (proporción entre 0,88 y 1,38) y en Don Hilario son tiras apaisadas de unos 2,5:1.
 * Cada sección declara su formato con una clase: galeria--cuadrado, galeria--tira.
 * El dibujo nunca se recorta (object-fit: contain): el sobrante de la celda queda blanco, como el papel.
 * La imagen va en posición absoluta para que la altura de la celda la decida solo su aspect-ratio
 * y no el tamaño de la miniatura.
 */

.galeria {
  display: grid;
  gap: var(--hueco);
}

.galeria a {
  position: relative;
  display: block;
  background: var(--papel);
  border: 1px solid var(--linea);
}

.galeria a:hover { border-color: var(--tinta-suave); }

.galeria a:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 2px;
}

.galeria img {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  object-fit: contain;
}

/* Formato cuadrado: 2 columnas en celular, 3 desde 640 px y 4 desde 980 px; nunca 5, para que los
 * dibujos se vean más grandes (decisión del cliente del 25/9/2026). En pantallas de 1440 px o más la
 * celda llega a unos 338 px y la miniatura de 400 se ve entera y nítida. */

.galeria--cuadrado { grid-template-columns: repeat(2, 1fr); }
.galeria--cuadrado a { aspect-ratio: 1 / 1; }

@media (min-width: 640px) { .galeria--cuadrado { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .galeria--cuadrado { grid-template-columns: repeat(4, 1fr); } }

/* Formato tira: 1 columna en celular, 2 desde 640 px y 3 desde 980 px; nunca 4, para que las tiras
 * se lean más grandes (decisión del cliente del 25/9/2026). En pantallas de 1440 px o más la celda
 * llega a unos 455 px de ancho y la miniatura, que mide 400, se agranda apenas un 12 %.
 * Las viñetas sueltas de Don Hilario (casi todas a color) no van en esta grilla: el generador las
 * pone arriba de la primera página, en una grilla cuadrada aparte. Mezclarlas obligaba a celdas de
 * dos filas, y con ellas Chrome calculaba mal la altura de la grilla (los últimos dibujos pisaban
 * la paginación).
 */

.galeria--tira { grid-template-columns: 1fr; }
.galeria--tira a { aspect-ratio: 5 / 2; }

@media (min-width: 640px) { .galeria--tira { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .galeria--tira { grid-template-columns: repeat(3, 1fr); } }

/* Cambio de formato dentro de una página (las viñetas cuadradas y después las tiras): un poco más de aire */

.galeria--cuadrado + .galeria--tira { margin-top: 30px; }

/* Páginas de texto (biografía): columna angosta para leer cómodo, fotos a todo el ancho de la columna */

.texto {
  max-width: 720px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.65;
}

.texto h1 { font-size: 2.2rem; }

.texto p { margin: 0 0 1.1em; }

.texto a { color: var(--acento); }

.texto figure { margin: 0 0 22px; }

.texto figure img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--papel);
  border: 1px solid var(--linea);
}

.texto figcaption {
  margin-top: 6px;
  color: var(--tinta-suave);
  font-size: .85rem;
}

.texto-cabecera { margin: 0 0 18px; }

.bio-fechas {
  margin: 4px 0 0;
  color: var(--tinta-suave);
}

.bio-cierre {
  margin-top: 1.6em;
  font-style: italic;
}

/* Home: un dibujo de portada entero (nunca recortado: tiene texto), el nombre debajo y tres
 * tarjetas de sección. En celular el dibujo va a todo el ancho; en escritorio se centra y no pasa
 * de 60 % del alto de la ventana, para que el título y las tarjetas queden cerca. */

.portada { text-align: center; }

.portada a {
  display: inline-block;
  max-width: 100%;
  background: var(--papel);
}

.portada a:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

.portada img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(60vh, 620px);
}

.home-titulo {
  margin: 30px 0 0;
  text-align: center;
}

.home-titulo h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.6rem);
  line-height: 1.05;
  text-wrap: balance;
}

.home-subtitulo {
  margin: 10px 0 0;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  font-weight: 500;
}


/* Visor con un solo dibujo (la portada): sin flechas */

.pswp--one-slide .pswp__button--arrow { display: none; }

/* Tarjetas de sección: tres en fila siempre (son personajes verticales, en celular se ven bien
 * chicos), con el dibujo en una caja sin borde, de la proporción de las imágenes, y el título centrado
 * debajo, sin contador.
 * Cada tarjeta lleva dos versiones del dibujo superpuestas: la de línea y, encima con opacidad 0,
 * la de color, que se funde al pasar el mouse (o al enfocar con teclado). Las dos se cargan con la
 * página para que el cambio sea instantáneo. En pantallas táctiles no hay hover y queda la de línea. */

.secciones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 5vw, 56px);
  max-width: 960px;
  margin: 44px auto 0;
}

.tarjeta {
  display: block;
  text-align: center;
  text-decoration: none;
}

.tarjeta:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 4px;
}

.tarjeta-imagen {
  position: relative;
  display: block;
  aspect-ratio: 379 / 498;   /* la proporción exacta de las seis imágenes (línea y color): llenan la caja sin bandas */
  background: var(--papel);
}

.tarjeta-imagen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tarjeta-color {
  opacity: 0;
  transition: opacity .3s ease;
}

.tarjeta:hover .tarjeta-color,
.tarjeta:focus-visible .tarjeta-color { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .tarjeta-color { transition: none; }
}

.tarjeta-titulo {
  display: block;
  margin-top: 14px;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.1rem, 2.4vw, 1.6rem);
  font-weight: 400;
  line-height: 1.2;
}

.tarjeta:hover .tarjeta-titulo { color: var(--acento); }

/* Franja oscura de la home (semblanza.php): firma, resumen de la bio, "Ver más" y la foto.
 * Va fuera de <main>, así que el fondo llega de lado a lado de la ventana; el contenido va en una
 * caja interior con el mismo ancho máximo y los mismos márgenes que la cabecera y el contenido.
 * El fondo es --tinta, el mismo gris al que la foto viene fundida por la izquierda, así que no se
 * nota dónde termina. En escritorio, texto a la izquierda (alineado con la marca de la cabecera) y
 * foto a la derecha, que termina donde termina el menú; en celular la foto va arriba, a todo el
 * ancho, fundida hacia el texto. */

.semblanza {
  margin-top: 12px;   /* con el relleno inferior de main suman 44 px desde las tarjetas */
  background: var(--tinta);
  color: #fff;
}

.semblanza-interior {
  display: grid;
  grid-template-columns: 1fr;
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--margen);
}

.semblanza-foto {
  position: relative;
  grid-row: 1;
  margin: 0 calc(-1 * var(--margen));   /* en celular la foto llega a los bordes de la ventana */
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

.semblanza-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

.semblanza-foto::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, var(--tinta));
}

.semblanza-texto {
  grid-row: 2;
  max-width: 640px;
  padding: 4px 6px 32px;
  font-size: 1.05rem;
  line-height: 1.5;
}

.semblanza-firma { margin: 0 0 22px; }

.semblanza-firma img {
  display: block;
  width: 150px;
  height: auto;
}

.semblanza-texto p { margin: 0 0 .9em; }

.semblanza-texto p:last-child { margin-bottom: 0; }

.semblanza-link {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.semblanza-link:hover { text-decoration-thickness: 3px; }

.semblanza-link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (min-width: 800px) {
  .semblanza-interior { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .semblanza-foto {
    grid-column: 2;
    margin: 0;
    aspect-ratio: auto;
    min-height: 400px;
  }

  .semblanza-foto::after { display: none; }

  .semblanza-texto {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    padding: 48px 40px 48px 0;
  }

  .semblanza-firma img { width: 170px; }
}

/* En pantallas más anchas que el contenido, la foto termina antes que el fondo negro: un fundido
 * angosto en su borde derecho evita el corte en seco sobre el hombro del autor. */

@media (min-width: 1441px) {
  .semblanza-foto::before {
    content: "";
    position: absolute;
    inset: 0 0 0 auto;
    z-index: 1;
    width: 90px;
    background: linear-gradient(to right, transparent, var(--tinta));
  }
}

/* Paginación */

.paginacion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin: 24px 0 0;
  font-size: .95rem;
}

.paginacion a,
.paginacion-actual {
  min-width: 2.4em;
  padding: 6px 10px;
  text-align: center;
  text-decoration: none;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 3px;
}

.paginacion a:hover { border-color: var(--tinta-suave); }

.paginacion-actual {
  color: var(--acento);
  border-color: var(--acento);
  font-weight: 700;
}

.paginacion[hidden] { display: none; }   /* sitio.js la esconde cuando pone el botón "Ver más" */

/* Botones: "Ver más" de las secciones y las acciones de la página de cada dibujo. Sobrios, con borde;
 * el secundario lleva el borde claro. Los dos se rellenan de tinta al pasar el mouse. */

.boton {
  display: inline-block;
  min-width: 10em;
  padding: 12px 24px;
  color: var(--tinta);
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  background: var(--papel);
  border: 1px solid var(--tinta);
  border-radius: 3px;
  cursor: pointer;
}

.boton:hover {
  color: #fff;
  background: var(--tinta);
}

.boton:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

.boton--secundario { border-color: var(--linea); }

/* "Ver más" (sitio.js): reemplaza a la paginación cuando hay JavaScript, con un contador debajo.
 * Las grillas que se van agregando quedan separadas por un hueco. */

.cargar-mas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 28px 0 0;
  text-align: center;
}

.cargar-mas-boton { min-width: 12em; }

.cargar-mas-boton[aria-busy="true"] {
  opacity: .55;
  pointer-events: none;
}

.cargar-mas-estado {
  margin: 0;
  color: var(--tinta-suave);
  font-size: .9rem;
}

.galeria + .galeria { margin-top: var(--hueco); }

/* Página propia de un dibujo (dibujo.php): el dibujo entero y grande, centrado, y debajo el rótulo
 * de la sección y los botones de ver más, compartir y descargar. */

.dibujo { text-align: center; }

.dibujo-imagen a {
  display: inline-block;
  max-width: 100%;
}

.dibujo-imagen a:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 2px;
}

.dibujo-imagen img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(76vh, 900px);
}

/* Es el h1 de la página (para los buscadores), pero se ve como un rótulo chico. */

.dibujo-seccion {
  margin: 18px 0 0;
  color: var(--tinta-suave);
  font: 400 .95rem/1.5 var(--fuente-texto);
}

/* Texto solo para lectores de pantalla y buscadores: los h1 de las secciones, que no llevan título visible. */

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

/* Página 404 */

.no-encontrada-lista {
  margin: 0 0 1.1em;
  padding-left: 1.2em;
}

/* Libro de visitas (libro.php y libro/moderar.php): formulario arriba, mensajes publicados debajo,
 * en la misma columna angosta que las páginas de texto. Campos sobrios, con el mismo borde y radio
 * que los botones; el foco se marca con la tinta. */

.formulario {
  display: grid;
  gap: 4px;
  margin: 24px 0 40px;
}

.formulario-fila {
  display: grid;
  gap: 4px;
}

@media (min-width: 640px) {
  .formulario-fila {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
}

.campo { margin: 0 0 12px; }

.campo label {
  display: block;
  margin-bottom: 5px;
  font-size: .9rem;
  font-weight: 600;
}

.campo-opcional {
  color: var(--tinta-suave);
  font-weight: 400;
}

.campo input,
.campo textarea {
  display: block;
  width: 100%;
  padding: 10px 12px;
  color: var(--tinta);
  font: inherit;
  line-height: 1.4;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 3px;
}

.campo input:focus,
.campo textarea:focus {
  outline: 2px solid var(--tinta);
  outline-offset: 0;
  border-color: var(--tinta);
}

.campo textarea {
  min-height: 9em;
  resize: vertical;
}

/* El campo trampa contra bots: fuera de la pantalla, sin tabulador. No usar display: none, que los bots lo detectan. */

.campo-extra {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario-pie { margin: 6px 0 0; }

/* Avisos: una línea de acento a la izquierda, nada más de color */

.aviso {
  margin: 0 0 20px;
  padding: 10px 16px;
  border-left: 3px solid var(--tinta);
}

.aviso--error { border-left-color: var(--acento); }

.aviso ul {
  margin: 0;
  padding-left: 1.1em;
}

.libro-vacio { color: var(--tinta-suave); }

/* Mensajes publicados. Escala de lectura: el título de la sección en Aloevera, como los demás títulos del
 * sitio; cada mensaje con una cabecera corta (quién, de dónde, cuándo) y el texto debajo, un punto más
 * chico que el párrafo de presentación. Entre mensajes, una línea y aire; dentro de un mensaje, los
 * párrafos van bastante más juntos que eso, así un mensaje de dos párrafos no parece dos mensajes. */

.firmas-titulo {
  margin: 48px 0 8px;
  font-family: var(--fuente-titulo);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
}

.firmas-cantidad {
  margin-left: .3em;
  color: var(--tinta-suave);
  font-family: var(--fuente-texto);
  font-size: 1rem;
}

.firmas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.firma { padding: 26px 0; }

.firma + .firma { border-top: 1px solid var(--linea); }

.firma-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 14px;
  margin: 0 0 8px;
  font-size: .95rem;
  line-height: 1.4;
}

.firma-nombre { font-weight: 600; }

.firma-lugar {
  color: var(--tinta-suave);
  font-weight: 400;
}

.firma-fecha {
  margin-left: auto;
  color: var(--tinta-suave);
  font-size: .85rem;
}

.firma-texto {
  font-size: 1rem;
  line-height: 1.6;
}

.firma-texto p {
  margin: 0 0 .6em;
  white-space: pre-line;   /* respeta los saltos de línea simples que escribió la persona */
  overflow-wrap: anywhere;
}

.firma-texto p:last-child { margin-bottom: 0; }

/* Moderación: el estado va en la cabecera del mensaje y los botones debajo; entre mensajes, una línea */

.estado {
  color: var(--tinta-suave);
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.estado--pendiente { color: var(--acento); }

.moderar-item + .moderar-item { border-top: 1px solid var(--linea); }

.moderar-item .firma { padding-bottom: 0; }

.moderar .firma-fecha { margin-left: 0; }   /* en moderación la fecha, la hora y el estado siguen al nombre, todo a la izquierda: se lee igual en cada mensaje */

.moderar-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 26px;
}

.moderar-nota {
  margin: 0 0 6px;
  color: var(--tinta-suave);
  font-size: .9rem;
}

.moderar-datos,
.moderar-pie {
  color: var(--tinta-suave);
  font-size: .9rem;
}

.dibujo-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}

/* Botones según el dispositivo: en pantalla táctil, "Compartir" (hoja nativa del sistema);
 * con puntero, "Enviar por WhatsApp" y "Copiar link". Cada uno es un solo clic. */

.solo-tactil { display: none; }

@media (hover: none) {
  .solo-tactil { display: inline-block; }
  .solo-puntero { display: none; }
}

.boton .icono {
  width: 1.1em;
  height: 1.1em;
  margin-right: .45em;
  vertical-align: -.2em;
  fill: currentColor;
}

.boton.es-copiado { border-color: var(--tinta); }

/* Visor: etiqueta "Link copiado" colgando debajo del botón de copiar, alineada a su derecha,
 * así no tapa el botón de WhatsApp que está al lado. */

.pswp .pswp__button--copiar {
  position: relative;
  overflow: visible;   /* PhotoSwipe recorta lo que sale del botón (y su CSS carga después): la etiqueta va afuera */
}

.pswp__copiado {
  position: absolute;
  top: 100%;
  right: 6px;
  margin-top: -8px;
  padding: 5px 10px;
  color: #fff;
  background: rgba(0, 0, 0, .7);
  border-radius: 3px;
  font: 14px/1.3 var(--fuente-texto);
  white-space: nowrap;
  pointer-events: none;
}

/* Libro de visitas en la home (libro-home.php): bloque al pie, después de la franja oscura. Título,
 * una línea de invitación, el botón al libro y, con JavaScript, los últimos tres mensajes publicados
 * en tarjetas (sitio.js los trae de libro.php?ultimos=3); sin JavaScript queda la invitación con el botón. */

.libro-home {
  padding: 80px var(--margen) 100px;   /* bien separado de la franja y del pie (cliente, 7/10/2026) */
  text-align: center;
}

.libro-home-interior {
  max-width: 960px;
  margin: 0 auto;
}

.libro-home h2 {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 400;
  line-height: 1.2;
}

.libro-home-texto {
  max-width: 560px;
  margin: 10px auto 0;
  color: var(--tinta-suave);
}

.libro-home-citas {
  display: grid;
  gap: 18px;
  margin: 28px 0 0;
  text-align: left;
}

.libro-home-citas[hidden] { display: none; }

@media (min-width: 800px) {
  .libro-home-citas { grid-template-columns: repeat(3, 1fr); }
  .libro-home-citas[data-cantidad="1"] { grid-template-columns: minmax(0, 560px); justify-content: center; }
  .libro-home-citas[data-cantidad="2"] { grid-template-columns: repeat(2, minmax(0, 440px)); justify-content: center; }
}

.libro-home-cita {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--linea);
  border-radius: 3px;
}

.libro-home-cita p {
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

.libro-home-cita footer {
  color: var(--tinta-suave);
  font-size: .9rem;
}

.libro-home-boton { margin: 28px 0 0; }

/* Toast: confirmación breve, abajo y centrada, sobre tinta ("Gracias por tu mensaje", "Mensaje borrado").
 * La imprime el servidor; sitio.js la esconde a los cinco segundos. Sin JavaScript queda a la vista.
 * Los errores del formulario no van acá: quedan fijos junto a los campos (.aviso), para que se lean. */

.toast {
  position: fixed;
  right: var(--margen);   /* con left y right fijados, width: fit-content más margin auto la centra y la deja crecer hasta los márgenes */
  bottom: 24px;
  left: var(--margen);
  z-index: 20;
  width: fit-content;
  margin: 0 auto;
  padding: 12px 18px;
  color: #fff;
  font-size: .95rem;
  line-height: 1.4;
  text-align: center;
  background: var(--tinta);
  border-radius: 3px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  transition: opacity .3s ease, transform .3s ease;
}

.toast a { color: #fff; }

.toast--oculto {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
}

/* Pie */

.pie {
  padding: 20px var(--margen);
  border-top: 1px solid var(--linea);
  color: var(--tinta-suave);
  font-size: .85rem;
  text-align: center;
}

.pie p { margin: 0; }

/* Visor (PhotoSwipe): fondo casi negro para que el papel blanco del dibujo resalte */

.pswp { --pswp-bg: #141414; }