/* === Yoruba Diapo – Marco 16:9 correcto y sin recortes === */

/* El contenedor ahora define la relación de aspecto (por defecto 16/9) */
.yvd-diapo{
  --yvd-ratio: 16/9;               /* << puedes ajustar si algún día cambias */
  position: relative;
  width: 100%;
  aspect-ratio: var(--yvd-ratio);  /* fuerza el alto según el ancho del contenedor */
  background: #000;
  overflow: hidden;
}

/* Si quieres forzar 16:9 “por clase” en alguna página:
   <div class="yvd-diapo ratio-169">…</div> */
.yvd-diapo.ratio-169 { aspect-ratio: 16/9; }

/* Escenario ocupa todo el marco 16:9 */
.yvd-stage{
  position: relative;
  width: 100%;
  height: 100%;
}

/* El video mantiene proporción sin recortar (barras negras si hace falta) */
.yvd-stage video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;      /* << NO recorta; respeta 16:9 del clip */
  object-position: center;
  background: #000;
  opacity: 0;
}

/* Si algún día quieres “llenar” el marco recortando bordes:
   añade fit-cover en el contenedor:
   <div class="yvd-diapo fit-cover">…</div> */
.yvd-diapo.fit-cover .yvd-stage video{ object-fit: cover; }

/* Capas */
.yvd-stage .A{ z-index: 2; opacity: 1; } /* visible desde el inicio */
.yvd-stage .B{ z-index: 3; }

/* UI */
.yvd-ui{
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 5;
  font: 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
.yvd-audio-toggle{
  background:#111; color:#fff; border:1px solid #333; border-radius:6px; padding:6px 10px; cursor:pointer;
}
.yvd-badge{
  background:rgba(17,17,17,.75); color:#fff; border:1px solid #333; border-radius:6px; padding:6px 10px;
}
.yvd-ver{
  background:rgba(0,0,0,.6); color:#9ae6b4; border:1px solid #2f855a; border-radius:6px; padding:4px 8px;
}
.yvd-debug{
  position:absolute; left:10px; bottom:10px; min-width:180px; max-width:40vw; max-height:30vh; overflow:auto;
  background:rgba(0,0,0,.65); color:#eee; border:1px solid #444; border-radius:6px; padding:8px;
  font:12px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; z-index:6; white-space:pre-wrap;
}

/* --- Opcionales de control por clase ---
   1) fit-contain: no recorta (por defecto)
   2) fit-cover:   llena recortando bordes
   3) ratio-169:   fuerza 16:9 por clase
*/
.yvd-diapo.fit-contain .yvd-stage video{ object-fit: contain; }
.yvd-diapo.fit-cover   .yvd-stage video{ object-fit: cover;   }