/*
 * Videos institucionales — tarjetas y reproductor (docs/videos-institucionales.md). Archivo propio: no toca estilo.css.
 *
 * Causa raíz que corrige: el rótulo de plataforma (.badge) era hijo directo de un contenedor Bootstrap .ratio, cuya regla «.ratio > *» le daba
 * width/height 100 % y position:absolute: un rectángulo OPACO del tamaño de la tarjeta tapaba la miniatura y el botón de reproducir (un clic real del
 * mouse o del dedo caía sobre el rótulo, no sobre el botón). Aquí la proporción se logra con aspect-ratio y cada capa tiene un z-index explícito.
 */

.video-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-carbon, #2c2a2d);
}

/* ----- Miniatura / marcador (capa 1) ----- */
.video-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* en hqdefault (4:3 con barras negras) recorta justo las barras y deja un 16:9 limpio */
  display: block;
}
.video-card__img[hidden],
.video-card__marcador[hidden] { display: none; }

.video-card__marcador {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: rgba(255, 255, 255, 0.9);
  background: linear-gradient(135deg, var(--color-carbon, #2c2a2d), var(--color-gris-oscuro, #55504f));
}
.video-card__marcador .bi { font-size: 2rem; line-height: 1; opacity: 0.85; }
.video-card__logo { max-width: 45%; max-height: 38%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5)); }
.video-card__marcador--youtube { background: linear-gradient(135deg, #3a1010, #c4302b); }
.video-card__marcador--facebook { background: linear-gradient(135deg, #1f3a5f, #0866ff); }
.video-card__marcador--tiktok { background: linear-gradient(135deg, #010101, #25f4ee 160%); }
.video-card__marcador--instagram { background: linear-gradient(135deg, #405de6, #c13584 50%, #fd1d1d 75%, #fcaf45); }

/* ----- Control de reproducir (capa 2): cubre TODA la miniatura, así el clic/toque en cualquier punto reproduce ----- */
.video-card__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgba(0, 0, 0, 0.12);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.video-card__play:hover { background: rgba(0, 0, 0, 0.3); color: #fff; }
.video-card__play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; box-shadow: inset 0 0 0 6px rgba(0, 0, 0, 0.55); }
.video-card__play-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  border: 2px solid rgba(255, 255, 255, 0.9);
  font-size: 2.4rem;
  line-height: 1;
}
.video-card__play-icono .bi { margin-left: 0.15rem; }
@media (prefers-reduced-motion: no-preference) {
  .video-card__play-icono { transition: transform 0.15s ease, background-color 0.15s ease; }
  .video-card__play:hover .video-card__play-icono { transform: scale(1.08); background: rgba(0, 0, 0, 0.8); }
}

/* ----- Rótulo de plataforma (capa 3, solo informativo: no intercepta clics) ----- */
.video-card__plataforma {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 3;
  width: auto;
  height: auto;
  pointer-events: none;
}

.video-card__externo:focus-visible { outline: 3px solid var(--color-carbon, #2c2a2d); outline-offset: 2px; border-radius: 2px; }

/* =============================== Diálogo del reproductor =============================== */
html.video-dialogo-abierto { overflow: hidden; }

.video-dialogo {
  width: min(980px, 96vw);
  max-width: 96vw;
  max-height: 96vh;
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 0.75rem;
  background: #121212;
  color: #fff;
  overflow: hidden;
}
.video-dialogo[open] { display: flex; flex-direction: column; }
.video-dialogo::backdrop { background: rgba(0, 0, 0, 0.78); }

.video-dialogo__cabecera { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.5rem 0.5rem 1rem; }
.video-dialogo__titulo { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.video-dialogo__plataforma { flex: 0 0 auto; font-size: 0.75rem; }
.video-dialogo__cerrar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.video-dialogo__cerrar:hover { background: rgba(255, 255, 255, 0.15); }
.video-dialogo__cerrar:focus-visible,
.video-dialogo__externo:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.video-dialogo__reproductor {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 0;
  max-height: calc(96vh - 9.5rem);
  overflow: auto;
  background: #000;
}
.video-dialogo__reproductor iframe { display: block; border: 0; max-width: 100%; background: #000; }
.video-dialogo__reproductor[data-ratio="16x9"] iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.video-dialogo__reproductor[data-ratio="9x16"] iframe { width: auto; height: min(74vh, 720px); aspect-ratio: 9 / 16; }
.video-dialogo__reproductor[data-ratio="auto"] iframe { width: min(540px, 100%); height: 640px; background: #fff; }
.video-dialogo__reproductor iframe[hidden] { display: none; }

.video-dialogo__estado { margin: 0; padding: 0.6rem 1rem 0; min-height: 1.9rem; font-size: 0.9rem; }
.video-dialogo__estado:empty { padding-top: 0; min-height: 0; }
.video-dialogo__pie { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.6rem 1rem 0.9rem; font-size: 0.9rem; }
.video-dialogo__externo { color: #fff; text-underline-offset: 3px; }
.video-dialogo.is-fallo .video-dialogo__externo {
  display: inline-block;
  padding: 0.55rem 1rem;
  border-radius: 0.4rem;
  background: var(--color-amarillo, #ffe617);
  color: #1a1a1a;
  font-weight: 700;
  text-decoration: none;
}
.video-dialogo.is-fallo .video-dialogo__estado { color: #ffd9d6; }

@media (max-width: 575.98px) {
  .video-dialogo { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 0; }
  .video-dialogo__reproductor { max-height: calc(100vh - 9rem); }
  .video-card__play-icono { width: 3.4rem; height: 3.4rem; font-size: 2rem; }
}