/* =========================================
   COMPONENTES compartidos (toasts, compartir, diálogos, boletín, cabeceras).
   Carga en el layout ANTES de extraCSS. Ornamentos, loader-splash, pie.
   ========================================= */

/* Ornamento horizontal reutilizable */
.ornamento-linea {
  width: 60px;
  height: 1px;
  margin-inline: auto;
  background-color: var(--color-ornamentos);
  border: none;
}

.ornamento-linea--larga {
  width: 100px;
  margin-block: var(--espacio-medio);
}

.contenido-principal {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--espacio-largo);
  text-align: center;
}

/* Cabecera de secciones */
.cabecera-secciones {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 48px 32px;
  background-color: var(--color-fondo);
}

.cabecera-logo {
  display: inline-block;
  cursor: pointer;
}

.cabecera-secciones__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color-secundario);
  text-decoration: none;
}

.cabecera-secciones__marca:hover {
  color: var(--color-secundario-activo);
}

.cabecera-secciones__corona {
  display: block;
  margin-bottom: var(--espacio-extra-corto);
  color: var(--color-acento);
  font-size: 12px;
  line-height: 1;
}

.cabecera-secciones__logo {
  font-family: var(--font-electro);
  font-size: 24px;
  line-height: 1;
  color: var(--color-secundario);
}

.cabecera-secciones__marca--ornamentada .cabecera-secciones__logo {
  font-size: 32px;
}

.cabecera-secciones__logo--circular {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-size: 24px;
  border: var(--stroke-general) solid var(--color-secundario);
  border-radius: 50%;
}

/* Pie de página — especificaciones de Figma */
.pie {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  width: 100%;
  padding-bottom: 48px;
  overflow: hidden;
}

.pie__suelo {
  width: 100%;
  height: auto; /* INTENCIONAL: la altura sigue la proporción del Lottie, sin recortar */
  overflow: hidden;
  flex-shrink: 0;
}

.pie__suelo svg {
  width: 100% !important;
  height: auto !important;
  display: block;
}

.pie__contenidos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  padding-top: 8px;
  width: 100%;
}

.pie__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pie__links a,
.link-texto--chico {
  display: inline-block;
  width: auto;
}

.pie__divisor {
  width: 100%;
  height: auto;
  display: block;
}

.pie__marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pie__logo-link {
  display: inline-block;
  width: 40px;
  height: 40px;
  cursor: pointer;
}

.pie__logo {
  width: 40px;
  height: 40px;
  display: block;
}

.pie__disclaimer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.pie__licencia-texto {
  font-family: "all-round-gothic", sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: var(--color-principal);
  width: 100%;
  max-width: 250px;
  text-align: center;
}

.pie__cc-logo {
  width: 93px;
  height: 38px;
  display: block;
}

.pie__copyright {
  font-family: "all-round-gothic", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  color: var(--color-principal);
  text-align: center;
  width: 100%;
}

/* Boletín */
.boletin {
  position: relative;
  display: flex;
  min-height: 635px; /* INTENCIONAL: da aire al círculo del Lottie de fondo sin recortarlo */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  overflow: hidden;
  padding: 120px var(--espacio-largo);
  background-color: var(--color-fondo);
  background-image:
    radial-gradient(ellipse at center, rgba(26, 21, 0, 0.15) 0%, rgb(26, 21, 0) 72%),
    conic-gradient(
      from 0deg at 50% 50%,
      rgba(97, 78, 0, 0.14) 0deg,
      transparent 28deg,
      rgba(241, 203, 12, 0.04) 55deg,
      transparent 90deg,
      rgba(97, 78, 0, 0.12) 125deg,
      transparent 160deg,
      rgba(0, 241, 175, 0.04) 198deg,
      transparent 235deg,
      rgba(97, 78, 0, 0.12) 270deg,
      transparent 310deg,
      rgba(97, 78, 0, 0.14) 340deg,
      transparent 360deg
    );
  text-align: center;
}

.boletin__fondo-animado {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.boletin__fondo-animado svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.boletin__contenido {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  width: 100%;
}

.boletin--suscrito .boletin__contenido {
  gap: 0;
}

.boletin__titulos {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: var(--espacio-extra-corto);
}

.boletin .boletin__titulo {
  color: var(--color-primario);
  /* Excepción: 6px para compensar la tensión visual de Nasalization en el navegador */
  padding-bottom: 6px;
  transition: color 0.45s ease;
}

.boletin--suscrito .boletin__titulo {
  color: var(--color-secundario);
}

.boletin__subtitulo {
  max-width: 285px;
  color: var(--color-principal);
  text-align: center;
}

.boletin form,
.boletin .boletin__formulario {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-height: 320px;
  gap: 24px;
  overflow: hidden;
  transition: opacity 0.45s ease, transform 0.45s ease, max-height 0.45s ease, gap 0.45s ease;
}

.boletin--suscrito {
  gap: 0;
}

.boletin--suscrito .boletin__formulario {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  gap: 0;
}

.boletin .boletin__acciones {
  padding-top: 8px;
}

.boletin .boton--deshabilitado {
  pointer-events: none;
}

.boletin__honeypot {
  display: none;
}

.portada__titulo {
  color: var(--color-texto);
  text-align: center;
}

/* Botones de plataformas musicales (portada y Apoyar)
   El anillo de 1px vive en el SVG. En over, box-shadow inset 2px → borde visual 3px. */
.botones-plataformas {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-regular);
}

.boton-plataforma {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 250ms ease-out;
}

.boton-plataforma img {
  display: block;
  width: 32px;
  height: 32px;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.boton-plataforma:hover,
.boton-plataforma:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-acento);
}

/* ═══ Componente: Toast ═══ */

.toast {
  position: fixed;
  bottom: var(--espacio-largo);
  left: 50%;
  transform: translate(-50%, 20px);
  display: flex;
  align-items: center;
  gap: var(--espacio-corto);
  padding: var(--espacio-corto) 12px var(--espacio-corto) var(--espacio-corto);
  width: max-content;
  max-width: calc(100vw - 2 * var(--espacio-regular));
  background-color: var(--color-fondo);
  border-radius: var(--radio-estandar);
  box-shadow: 4px 4px 8px rgba(20, 16, 0, 0.5);
  color: var(--color-principal);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
  /* Por encima de diálogos (1000) y de las líneas del lienzo (1100)
     para que “listo para compartir” se vea con el menú de pausa abierto. */
  z-index: 1200;
  pointer-events: none;
}

.toast.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  pointer-events: auto;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s;
}

.toast__icono {
  width: 23px;
  height: 23px;
  flex-shrink: 0;
}

.toast__texto {
  white-space: nowrap;
}

.toast__icono--diamante,
.toast__icono--nota {
  width: 32px;
  height: 32px;
  color: var(--color-texto);
}

.toast--proximamente .toast__texto,
.toast--nota-tap .toast__texto {
  white-space: normal;
  min-width: 0;
}

/* La nota-tap no es un acuse de acción: si el menú de pausa ya está
   abierto, debe quedar detrás (el toast de compartir sigue a 1200). */
.toast--nota-tap {
  z-index: 900;
}

.toast__variante {
  display: none;
  align-items: center;
  gap: var(--espacio-corto);
}

.toast__variante--tactil {
  display: flex;
}

@media (pointer: fine) {
  .toast__variante--tactil {
    display: none;
  }

  .toast__variante--puntero {
    display: flex;
  }
}

/* ═══ Compartir acto (Versos y narrativa) ═══ */
/* Colores de título y link: --compartir-color-* en
   /css/actos/[slug]/versos.css o acto.css */

.compartir-acto {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-largo);
  padding: var(--espacio-gigante) var(--espacio-largo);
  width: 100%;
}

.compartir-acto--versos {
  background-color: var(--color-fondo);
}

.compartir-acto--narrativa {
  background-color: rgb(var(--acto-compartir-fondo));
}

.compartir-acto__titulo {
  color: var(--compartir-color-titulo);
  text-align: center;
  max-width: 311px;
}

.boton-compartir {
  display: inline-flex;
  align-items: center;
  gap: var(--espacio-corto);
  padding: var(--espacio-regular) var(--espacio-medio);
  outline: var(--stroke-delgado) solid var(--color-principal);
  border: none;
  border-radius: var(--radio-estandar);
  background: transparent;
  color: var(--color-principal);
  cursor: pointer;
  transition: all .3s ease-out;
  box-sizing: border-box;
}

.boton-compartir:hover,
.boton-compartir:focus-visible {
  outline-width: var(--stroke-grueso);
}

.boton-compartir__icono {
  width: 16px;
  height: 17px;
  flex-shrink: 0;
}

.compartir-acto__apoyo {
  color: var(--color-principal);
  text-align: center;
  max-width: 311px;
}

.compartir-acto__link-apoyo {
  --color-enlace: var(--compartir-color-link);
}

/* ═══ Diálogos fullscreen (Acerca de, Versos) ═══ */

html.dialogo-abierto,
html.dialogo-abierto body {
  overflow: hidden;
}

/* overflow-x: hidden en .contenedor-app puede anclar position:fixed
   al contenedor (el eje Y pasa a auto). Con el diálogo abierto hace
   falta visible para que el overlay siga el viewport, no el scroll. */
html.dialogo-abierto .contenedor-app {
  overflow: hidden;
}

.boton-cerrar {
  position: absolute;
  top: 22px;
  right: var(--espacio-largo);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.boton-cerrar,
.boton-cerrar *,
.boton-cerrar::before,
.boton-cerrar::after,
.boton-cerrar *::before,
.boton-cerrar *::after {
  cursor: pointer;
}

.boton-cerrar-diamante,
.boton-cerrar-cruz,
.boton-cerrar-cruz::before,
.boton-cerrar-cruz::after {
  pointer-events: none;
}

.boton-cerrar:focus {
  outline: none;
}

.boton-cerrar:focus-visible .boton-cerrar-diamante {
  background-color: var(--color-ornamentos);
  border-color: var(--color-acento);
}

.boton-cerrar:focus-visible .boton-cerrar-cruz::before,
.boton-cerrar:focus-visible .boton-cerrar-cruz::after {
  border-color: var(--color-acento);
}

.boton-cerrar-diamante {
  position: absolute;
  width: 31px;
  height: 31px;
  border: var(--stroke-llamadas) solid var(--color-ornamentos);
  border-radius: var(--radio-chico);
  transform: rotate(45deg);
  background: transparent;
  transition: background-color 0.25s ease-out, border-color 0.25s ease-out;
}

.boton-cerrar-cruz {
  position: relative;
  width: 12px;
  height: 12px;
  z-index: 1;
}

.boton-cerrar-cruz::before,
.boton-cerrar-cruz::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 0;
  border-top: var(--stroke-llamadas) solid var(--color-principal);
  transform-origin: center;
  transition: border-color 0.25s ease-out;
}

.boton-cerrar-cruz::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.boton-cerrar-cruz::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

@media (hover: hover) {
  .boton-cerrar:hover .boton-cerrar-diamante {
    background-color: var(--color-ornamentos);
    border-color: var(--color-acento);
  }

  .boton-cerrar:hover .boton-cerrar-cruz::before,
  .boton-cerrar:hover .boton-cerrar-cruz::after {
    border-color: var(--color-acento);
  }
}