/* Videos (pages/videos.js): el tutorial. En la computadora, el reproductor a la izquierda y la lista a la derecha;
   en el celular, el reproductor arriba y la lista abajo. */
.vid-ppal { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.vid-izq { position: sticky; top: 12px; }
.vid-marco { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.vid-video { display: block; width: 100%; height: 100%; background: #000; }
.vid-botones { margin-top: 12px; flex-wrap: wrap; }
.vid-pie { margin: 10px 0 0; }
.vid-aviso { margin-top: 12px; }
.vid-vacio { min-height: 240px; display: grid; place-items: center; }
/* donde descansa el <video> cuando ninguna pantalla lo muestra: no se ve, pero no se destruye (así sigue en imagen en imagen) */
.vid-bandeja { position: fixed; left: -10px; bottom: -10px; width: 2px; height: 2px; overflow: hidden; opacity: 0; pointer-events: none; }
.vid-bandeja .vid-video { width: 2px; height: 2px; }

.vid-item { display: flex; align-items: center; gap: 10px; }
.vid-item.on { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--pri, currentColor); }
.vid-n { flex: none; min-width: 26px; font-size: 12.5px; font-weight: 650; color: var(--ink-3); font-variant-numeric: tabular-nums; text-align: right; }
.vid-visto { flex: none; display: inline-flex; width: 16px; height: 16px; color: var(--ok); }
.vid-visto svg { width: 16px; height: 16px; }
.vid-dur { flex: none; font-variant-numeric: tabular-nums; }
.vid-grupo + .vid-grupo { margin-top: 12px; }

@media (max-width: 900px) {
  .vid-ppal { grid-template-columns: minmax(0, 1fr); }
  .vid-izq { position: static; }
  .vid-botones .btn { flex: 1 1 auto; }
}
.vid-aviso[hidden] { display: none; }