/* ==========================================================================
   dato luminoso - sala de cine / ficha del documental (modal.css)
   En celular ocupa toda la pantalla como la ficha de una plataforma de
   streaming; en computadora es un panel centrado sobre la página oscurecida.
   ========================================================================== */

:root {
  --fondo-cine: var(--color-fondo-base);         /* misma base blanca de la página */
  --fondo-cine-boton: var(--color-fondo-gris-tarjetas);
}

.modal-cinema {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.modal-cinema.activo {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.modal-fondo {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Contenedor: pantalla completa en celular */
.modal-contenedor {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--fondo-cine);
  color: var(--color-texto-negro);
  font-family: var(--fuente-principal);
  transform: translateY(24px);
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  scrollbar-width: none;
}

.modal-contenedor::-webkit-scrollbar {
  display: none;
}

.modal-cinema.activo .modal-contenedor {
  transform: none; /* sin transform para que el botón volver quede fijo al desplazar */
}

/* Botón volver */
.modal-cerrar {
  position: fixed;
  z-index: 5;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--color-texto-principal);
  cursor: pointer;
}

.modal-cerrar svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   ESCENARIO: portada grande o reproductor
   -------------------------------------------------------------------------- */
.modal-portada {
  position: relative;
  width: 100%;
  height: min(64vh, 620px);
  min-height: 380px;
  overflow: hidden;
  background-color: #000;
}

.modal-miniatura {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, #ffffff 0%, rgba(255, 255, 255, 0.92) 24%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 22%);
}

.modal-encabezado {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  padding: 0 24px;
  text-align: center;
}

.modal-titulo {
  font-size: clamp(26px, 7vw, 40px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: var(--color-texto-negro);
}

.modal-lema {
  margin-top: 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--color-principal-solido);
  text-transform: lowercase;
}

.modal-reproductor-envoltura {
  display: none;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
}

.modal-reproductor-envoltura iframe,
#modalReproductor {
  width: 100%;
  height: 100%;
  border: none;
}

.modal-cinema.reproduciendo .modal-portada { display: none; }
.modal-cinema.reproduciendo .modal-reproductor-envoltura { display: block; }
.modal-cinema.reproduciendo .modal-cerrar { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); }

/* --------------------------------------------------------------------------
   FICHA: acciones, datos, sinopsis y relacionados
   -------------------------------------------------------------------------- */
.modal-detalles {
  padding: 20px 24px max(32px, env(safe-area-inset-bottom));
}

.modal-titulo-secundario {
  display: none;
  margin-bottom: 16px;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.modal-cinema.reproduciendo .modal-titulo-secundario { display: block; }

.modal-acciones {
  display: flex;
  gap: 12px;
}

.modal-boton-ver,
.modal-boton-compartir {
  min-height: 54px;
  border: none;
  border-radius: 8px;
  font-family: var(--fuente-principal);
  cursor: pointer;
  transition: var(--transicion-suave);
}

.modal-boton-ver {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--degradado-principal);
  color: var(--color-texto-principal);
  font-size: 16px;
  font-weight: 800;
}

.modal-boton-ver svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.modal-boton-ver:hover {
  background: var(--degradado-hover);
}

.modal-cinema.reproduciendo .modal-boton-ver { display: none; }

.modal-boton-compartir {
  position: relative;
  flex: 0 0 64px;
  display: grid;
  place-items: center;
  background: var(--fondo-cine-boton);
  color: var(--color-texto-negro);
}

.modal-cinema.reproduciendo .modal-boton-compartir {
  flex: 1;
  display: inline-flex;
  justify-content: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
}

.modal-boton-compartir svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.modal-boton-compartir .texto-compartir { display: none; }
.modal-cinema.reproduciendo .modal-boton-compartir .texto-compartir { display: inline; }

.modal-boton-compartir:hover {
  background: color-mix(in srgb, var(--color-texto-negro) 12%, transparent);
}

.modal-aviso-copiado {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--color-texto-negro);
  color: var(--color-texto-principal);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}

.modal-aviso-copiado.visible {
  opacity: 1;
  transform: translateY(0);
}

.modal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 22px;
  font-size: 15px;
  font-weight: 700;
  text-transform: lowercase;
}

.modal-meta .chip-calidad {
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--color-texto-negro) 55%, transparent);
  border-radius: 4px;
  font-size: 12px;
  line-height: 20px;
  text-transform: none;
}

.modal-sinopsis {
  margin-top: 12px;
}

.modal-descripcion {
  font-size: 16px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-texto-negro) 82%, transparent);
  white-space: pre-line;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: 68ch;
}

.modal-sinopsis.expandida .modal-descripcion {
  display: block;
  -webkit-line-clamp: unset;
}

.modal-mas {
  margin-top: 4px;
  padding: 4px 0;
  border: none;
  background: none;
  color: var(--color-principal-solido);
  font-family: var(--fuente-principal);
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}

.modal-relacionados {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid color-mix(in srgb, var(--color-texto-negro) 12%, transparent);
}

.modal-relacionados-titulo {
  margin-bottom: 14px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.modal-relacionados-pista {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 62%;
  gap: 12px;
  margin: 0 -24px;
  padding: 0 24px 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 24px;
  scrollbar-width: none;
}

.modal-relacionados-pista::-webkit-scrollbar { display: none; }

.modal-relacionado {
  scroll-snap-align: start;
  padding: 0;
  border: none;
  background: none;
  text-align: left;
  color: var(--color-texto-negro);
  font-family: var(--fuente-principal);
  cursor: pointer;
}

.modal-relacionado-imagen {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-fondo-gris-tarjetas);
}

.modal-relacionado-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-relacionado-imagen span {
  position: absolute;
  right: 6px;
  bottom: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.75);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-texto-principal);
}

.modal-relacionado-titulo {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

/* Shorts: portada y reproductor verticales */
.modal-cinema.modo-vertical .modal-portada {
  height: auto;
  aspect-ratio: 9 / 16;
  max-height: 82vh;
}

.modal-cinema.modo-vertical .modal-reproductor-envoltura {
  aspect-ratio: 9 / 16;
  max-height: 88vh;
  margin: 0 auto;
  width: auto;
  height: 88vh;
  max-width: 100%;
}

.modal-cinema.modo-vertical .modal-relacionados-pista {
  grid-auto-columns: 38%;
}

.modal-cinema.modo-vertical .modal-relacionado-imagen {
  aspect-ratio: 9 / 16;
}

/* Foco visible */
.modal-cerrar:focus-visible,
.modal-boton-ver:focus-visible,
.modal-boton-compartir:focus-visible,
.modal-mas:focus-visible,
.modal-relacionado:focus-visible .modal-relacionado-imagen {
  outline: 3px solid var(--color-principal-solido);
  outline-offset: 3px;
}

/* Pantalla completa automática del reproductor (celulares Android) */
#modalReproductorEnvoltura:fullscreen {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  max-height: none;
}

#modalReproductorEnvoltura:-webkit-full-screen {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
  max-height: none;
}

/* --------------------------------------------------------------------------
   COMPUTADORA: panel centrado
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .modal-contenedor {
    width: min(920px, 92vw);
    height: auto;
    max-height: 92vh;
    border-radius: 14px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
  }

  .modal-cerrar {
    position: absolute;
    top: 16px;
    left: 16px;
  }

  /* Mientras se reproduce, "volver" sale del video para no tapar los controles de YouTube */
  .modal-cinema.reproduciendo .modal-cerrar {
    position: fixed;
    top: 20px;
    left: auto;
    right: 20px;
    bottom: auto;
  }

  .modal-portada {
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  .modal-encabezado {
    bottom: 28px;
    padding: 0 40px;
  }

  .modal-titulo { font-size: clamp(30px, 4vw, 44px); }

  .modal-detalles { padding: 22px 40px 36px; }

  .modal-acciones { max-width: 420px; }

  .modal-relacionados-pista {
    grid-auto-columns: calc((100% - 3 * 14px) / 4);
    gap: 14px;
    margin: 0;
    padding: 0 0 4px;
    scroll-padding: 0;
  }

  .modal-cinema.modo-vertical .modal-contenedor { width: min(440px, 92vw); }
  .modal-cinema.modo-vertical .modal-portada { aspect-ratio: 9 / 16; max-height: 70vh; }
  .modal-cinema.modo-vertical .modal-reproductor-envoltura { height: min(70vh, 740px); }
  .modal-cinema.modo-vertical .modal-acciones { max-width: none; }
  .modal-cinema.modo-vertical .modal-relacionados-pista { grid-auto-columns: calc((100% - 2 * 14px) / 3); }

  .modal-relacionado:hover .modal-relacionado-titulo { color: var(--color-principal-solido); }
}

@media (prefers-reduced-motion: reduce) {
  .modal-cinema, .modal-contenedor { transition: none; }
}

/* ==========================================================================
   dato luminoso - modal legal (plataforma)
   ========================================================================== */

.modal-legal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-in-out;
}

.modal-legal.activo {
  opacity: 1;
  pointer-events: auto;
}

.modal-legal-fondo {
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--color-texto-negro) 85%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal-legal-tarjeta {
  position: relative;
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  background-color: var(--color-fondo-base);
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  border: 1px solid color-mix(in srgb, var(--color-texto-negro) 8%, transparent);
  display: flex;
  flex-direction: column;
  z-index: 2;
  transform: translateY(12px) scale(0.98);
  transition: var(--transicion-suave);
}

.modal-legal.activo .modal-legal-tarjeta {
  transform: translateY(0) scale(1);
}

/* Cabecera */
.modal-legal-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-texto-negro) 10%, transparent);
}

.modal-legal-marca {
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-legal-insignia {
  font-family: var(--fuente-principal);
  font-size: var(--tamano-meta-info);
  font-weight: 700;
  background-color: var(--color-principal-solido);
  color: var(--color-texto-principal);
  padding: 2px 6px;
  border-radius: var(--radio-borde);
  text-transform: lowercase;
}

.modal-legal-titulo {
  font-family: var(--fuente-principal);
  font-size: var(--tamano-titulo);
  font-weight: 800;
  color: var(--color-texto-negro);
  letter-spacing: -0.5px;
  text-transform: lowercase;
  margin: 0;
}

.modal-legal-btn-cerrar {
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-texto-negro);
  opacity: 0.6;
  border-radius: 50%;
  transition: var(--transicion-suave);
}

.modal-legal-btn-cerrar svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  fill: none;
}

.modal-legal-btn-cerrar:hover {
  opacity: 1;
  color: var(--color-principal-solido);
  background-color: color-mix(in srgb, var(--color-principal-solido) 10%, transparent);
}

/* Cuerpo con scroll propio */
.modal-legal-cuerpo {
  padding: 24px;
  overflow-y: auto;
  font-family: var(--fuente-principal);
  font-size: var(--tamano-texto-normal);
  color: color-mix(in srgb, var(--color-texto-negro) 80%, transparent);
  line-height: 1.65;
}

.modal-legal-cuerpo h4 {
  font-size: var(--tamano-subtitulo);
  font-weight: 700;
  color: var(--color-texto-negro);
  margin: 20px 0 8px 0;
  text-transform: lowercase;
}

.modal-legal-cuerpo h4:first-child {
  margin-top: 0;
}

.modal-legal-cuerpo p {
  margin-bottom: 14px;
  text-transform: lowercase;
}

.modal-legal-cuerpo ul {
  margin-left: 20px;
  margin-bottom: 16px;
}

.modal-legal-cuerpo li {
  margin-bottom: 6px;
  text-transform: lowercase;
}

.modal-legal-cuerpo a {
  color: var(--color-principal-solido);
  text-decoration: none;
  font-weight: 600;
}

.modal-legal-cuerpo a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .modal-legal {
    padding: 12px;
  }
  .modal-legal-tarjeta {
    max-height: 90vh;
  }
  .modal-legal-cabecera {
    padding: 16px 20px;
  }
  .modal-legal-cuerpo {
    padding: 20px;
  }
}