/*
  Videotutoriales: lista de Lecciones, página de Lección y reproductor común.
  Usa los tokens de /comun/taller.css. La pantalla del reproductor es oscura en los dos
  modos de color, como la interfaz de Illustrator que imita.
  La nota verde de la web queda en la barra y, dentro de la pantalla, en las marcas
  didácticas (rótulos y recuadros del reproductor); la Lección y el paso actuales van en tinta.
*/

/* ---------- Lista de Lecciones ---------- */
.vt-indice,
.vt-lista ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.vt-item {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: baseline;
}
.vt-num { font: 12.5px var(--mono); color: var(--secundario); }
.vt-estado { font: 12px var(--mono); color: var(--secundario); }
.vt-item a { text-decoration: none; }
.vt-item a:hover { text-decoration: underline; }
.vt-item.pendiente a { color: var(--secundario); }

/* En la página de Videotutoriales: filas grandes separadas por líneas finas */
.vt-indice { border-top: 1px solid var(--linea); margin-bottom: 72px; }
.vt-indice .vt-item { padding-block: 22px; border-bottom: 1px solid var(--linea); }
.vt-indice .vt-item a { font-size: 22px; font-weight: 300; letter-spacing: -0.01em; }
.vt-indice .vt-num { font-size: 13px; }

/* Lista ilustrada: cada fila lleva la ilustración de su Lección, que cobra color (componente
   .cobra de /comun/taller.css) al pasar el ratón, con el foco o, en el móvil, al aparecer.
   La fila entera es el enlace: su ::after la cubre, y el nombre sigue siendo solo el título. */
.vt-ilustrada .vt-item { position: relative; align-items: center; }
.vt-ilustrada .vt-item a { display: flex; align-items: center; gap: 24px; min-width: 0; }
.vt-ilustrada .vt-item a::after { content: ""; position: absolute; inset: 0; }
.vt-ilustrada .vt-item a:hover { text-decoration: none; }
.vt-ilustrada .vt-item a:hover .vt-titulo,
.vt-ilustrada .vt-item a:focus-visible .vt-titulo { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.vt-ilustrada .vt-item a:focus-visible { outline: none; }
.vt-ilustrada .vt-item a:focus-visible::after { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--radio); }
.vt-dibujo { flex: none; width: 84px; height: 56px; overflow: visible; }

@media (max-width: 520px) {
  .vt-ilustrada .vt-item a { gap: 14px; }
  .vt-dibujo { width: 60px; height: 40px; }
}

/* ---------- Página de Lección ---------- */
.vt {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 0 40px;
  padding-block: 40px 72px;
}

.vt-lista { border-right: 1px solid var(--linea); padding-right: 16px; align-self: start; }
.vt-lista-titulo { font: 12.5px var(--mono); color: var(--secundario); margin-bottom: 12px; }
.vt-lista .vt-item { grid-template-columns: 2.2em minmax(0, 1fr); padding: 8px 10px 8px 12px; font-size: 14.5px; }
.vt-lista .vt-estado { grid-column: 2; font-size: 11.5px; }
.vt-lista .vt-item.actual { background: var(--superficie); box-shadow: inset 2px 0 0 var(--tinta); }
.vt-lista .vt-item.actual a { font-weight: 500; color: var(--tinta); }

.vt-leccion { display: grid; gap: 28px; align-content: start; min-width: 0; }
.vt-cabecera { display: grid; gap: 8px; }
.vt-cabecera h1 { font-size: clamp(32px, 5vw, 44px); }

.vt-bloque { display: grid; gap: 12px; border-top: 1px solid var(--linea); padding-top: 20px; }
.vt-bloque h2, .vt-guion summary { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.vt-nota { font-size: 14px; color: var(--secundario); }

.vt-atajos { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 0; padding: 0; list-style: none; }

.atajo { display: inline-flex; align-items: center; gap: 3px; font: 12px var(--mono); color: var(--secundario); }
.atajo kbd { color: var(--tinta); background: var(--fondo); font-size: 12px; padding: 2px 7px; }

.vt-guion { border-top: 1px solid var(--linea); padding-top: 20px; }
.vt-guion summary { cursor: pointer; width: fit-content; }
.vt-guion-texto { display: grid; gap: 14px; margin-top: 16px; max-width: 68ch; color: var(--secundario); }

.vt-video { margin: 0; display: grid; gap: 8px; }
.vt-video video { width: 100%; background: #1e1e1e; border-radius: var(--radio); }
.vt-video figcaption { font: 12.5px var(--mono); color: var(--secundario); }

.vt-otras {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
  border-top: 1px solid var(--linea);
  padding-top: 20px;
}
.vt-otras a { display: grid; gap: 2px; text-decoration: none; }
.vt-otras a:hover span:last-child { text-decoration: underline; }
.vt-otras-sentido { font: 12.5px var(--mono); color: var(--secundario); }
.vt-siguiente { text-align: right; margin-left: auto; }
.vt-todas { flex-basis: 100%; font-size: 14px; text-decoration: underline !important; }

@media (max-width: 820px) {
  .vt { grid-template-columns: minmax(0, 1fr); padding-top: 32px; }
  .vt-lista { order: 2; border-right: 0; border-top: 1px solid var(--linea); padding: 24px 0 0; margin-top: 48px; }
}

/* ---------- Reproductor ---------- */
.reproductor { display: grid; gap: 16px; }

.reproductor-pantalla { background: #1e1e1e; border-radius: var(--radio); overflow: hidden; }
.reproductor-pantalla svg { display: block; width: 100%; height: auto; }

.reproductor-controles { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

.reproductor-boton {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--fondo);
  color: var(--tinta);
  cursor: pointer;
}
.reproductor-boton svg { width: 15px; height: 15px; fill: currentColor; }
.reproductor-boton:hover { border-color: var(--tinta); }
.reproductor-boton[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.reproductor-boton[aria-disabled="true"]:hover { border-color: var(--linea); }
.reproductor-principal { background: var(--boton); color: var(--boton-texto); border-color: var(--boton); }
.reproductor-principal:hover { opacity: 0.88; border-color: var(--boton); }

.reproductor-progreso {
  flex: 1 1 120px;
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.reproductor-progreso button {
  display: block;
  width: 100%;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* La raya fina de cada paso */
.reproductor-progreso button::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--linea);
}
.reproductor-progreso button.hecho::before { background: var(--tinta); }
.reproductor-progreso button[aria-current]::before { background: var(--tinta); height: 5px; }

.reproductor-cuenta {
  font: 12.5px var(--mono);
  color: var(--secundario);
  font-variant-numeric: tabular-nums;
  min-width: 92px;
  text-align: right;
}

.reproductor-paso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px 24px;
  align-items: start;
  border-top: 1px solid var(--linea);
  padding-top: 18px;
}
.reproductor-paso h2 { font-size: 21px; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 6px; }
.reproductor-paso p { color: var(--secundario); max-width: 62ch; }
.reproductor-paso .teclas { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: flex-end; }

.reproductor-ayuda { font-size: 13.5px; color: var(--secundario); }

@media (max-width: 620px) {
  .reproductor-paso { grid-template-columns: minmax(0, 1fr); }
  .reproductor-paso .teclas { justify-content: flex-start; }
  .reproductor-cuenta { min-width: 0; }
}

/* Animaciones de la demostración */
.vt-ai .vt-vista,
.vt-ai .vt-cursor { transition: transform 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
.vt-ai .vt-herramienta-fondo { transition: opacity 0.3s ease; }
.vt-ai .vt-traza { stroke-dasharray: 1; animation: vt-traza 1.2s ease 0.6s both; }
.vt-ai .vt-aparece { animation: vt-aparece 0.4s ease 0.3s both; }
.vt-ai .vt-tecla { animation-delay: 0s; }

@keyframes vt-traza {
  from { stroke-dashoffset: 1; fill-opacity: 0; }
  70% { stroke-dashoffset: 0; fill-opacity: 0; }
  to { stroke-dashoffset: 0; fill-opacity: 1; }
}
@keyframes vt-aparece {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Con movimiento reducido, cada paso aparece ya terminado */
@media (prefers-reduced-motion: reduce) {
  .vt-ai *, .vt-ai *::before, .vt-ai *::after { transition: none !important; animation: none !important; }
}

/* ---------- Enlaces a Recursos: Glosario y Atajos ---------- */
.vt-recursos { font-size: 15px; color: var(--secundario); }
.vt-recursos a { color: var(--tinta); }
.vt-terminos { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 15px; }