/* ============================================================
   MENSAJES Y GALERÍA
   La notita con renglones (letra a mano, como en el video) y el
   sobre que la recibe. La galería, cerrada con su candado hasta
   el día siguiente de la boda.
   ============================================================ */

.mensajes__mesa {
  position: relative;
  padding: 6px 4px 0;
}

.mensajes__nota {
  padding: 20px 20px 14px;
  border-radius: 4px;
  background: var(--color-papel);
  box-shadow: 0 16px 34px rgba(35, 35, 31, 0.1);
  transform: rotate(-1.2deg);
}

.mensajes__texto {
  display: block;
  width: 100%;
  min-height: 192px;
  border: 0;
  background: repeating-linear-gradient(transparent 0 31px, var(--color-borde) 31px 32px);
  color: var(--color-ink);
  font-family: var(--font-nota);
  font-size: 24px;
  line-height: 32px;
  resize: none;
}

.mensajes__texto::placeholder {
  color: var(--color-text-muted);
  opacity: 0.7;
}

.mensajes__texto:focus-visible {
  outline: none;
}

.mensajes__nota:focus-within {
  box-shadow: 0 16px 34px rgba(35, 35, 31, 0.1), 0 0 0 2px rgba(92, 107, 58, 0.3);
}

.mensajes__firma {
  margin-top: 6px;
  color: var(--color-text-muted);
  font-family: var(--font-nota);
  font-size: 19px;
  text-align: right;
}

.mensajes__sobre {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 150px;
  height: 105px;
  margin-left: -75px;
  overflow: visible;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.mensajes__llego {
  min-height: 30px;
  margin: 14px 0 6px;
  color: var(--color-primary-dark);
  font-family: var(--font-frase);
  font-size: 22px;
  font-style: italic;
  text-align: center;
  visibility: hidden;
  opacity: 0;
}

.mensajes__enviadas {
  min-height: 20px;
  margin-top: 10px;
  color: var(--color-text-muted);
  font-size: 12px;
  text-align: center;
}

/* --- Galería --- */
.galeria__cerrada,
.galeria__abierta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 24px;
  text-align: center;
}

.galeria__candado {
  width: 64px;
  height: 74px;
  margin-bottom: 8px;
}

.galeria__fecha {
  font-family: var(--font-frase);
  font-size: 28px;
  font-style: italic;
  font-weight: 500;
}

.galeria__dias {
  margin-bottom: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(142, 154, 106, 0.16);
  color: var(--color-primary-dark);
  font-size: 13px;
}