/* Manual de Lenguas — hoja de estilos única.
   Mobile first: los estilos base son para teléfono vertical y luego se amplían. */

:root {
  --tinta: #1f2145;        /* azul del logotipo Manual de Lenguas */
  --tinta-2: #5a5d7d;
  --linea: #e4e6ef;
  --papel: #ffffff;
  --suave: #f6f7fb;
  --foco: #0b6f7a;
  --radio: 12px;
  --sombra: 0 1px 2px rgba(31, 33, 69, .08), 0 10px 30px rgba(31, 33, 69, .07);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--papel);
}

a { color: inherit; }

/* Indicador de foco visible y consistente (no se elimina en ningún sitio) */
:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
  border-radius: 6px;
}

.tenue { color: var(--tinta-2); }

/* ============================================================
   Reproductor: logos arriba, video centrado en la pantalla
   ============================================================ */

.escenario {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;            /* móvil: se ajusta a la barra del navegador */
  position: relative;            /* para el pie anclado abajo */
  /* Tres filas: el espacio libre de arriba y de abajo es idéntico, así el
     video queda centrado en la pantalla de verdad; los logos se apoyan en el
     borde inferior de la fila de arriba y los controles en el superior de la
     de abajo, siempre pegados al video. */
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  align-items: center;
  justify-items: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

/* --- fila de logos --- */
.marcas {
  grid-row: 1;
  align-self: end;               /* justo encima del video */
  margin-bottom: clamp(10px, 2.2vh, 20px);
  display: flex;
  flex-wrap: nowrap;             /* los tres logos siempre en una línea */
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 4.5vw, 30px);
  max-width: 100%;
}

.marcas img {
  display: block;
  height: clamp(30px, 8.5vw, 54px);
  width: auto;
  max-width: 33vw;
  object-fit: contain;
}

/* --- video --- */
.marco {
  grid-row: 2;
  width: 100%;
  /* deja aire para los logos, los controles y el pie: así el video nunca
     queda más alto que la pantalla ni obliga a desplazarse */
  max-width: min(1100px, calc((100dvh - 250px) * 16 / 9));
  background: #000;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: var(--sombra);
}

.video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}

/* --- controles --- */
.controles {
  grid-row: 3;
  align-self: start;             /* justo debajo del video */
  margin-top: clamp(10px, 2.2vh, 20px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 640px;
}

.boton {
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  min-height: 46px;              /* área táctil cómoda */
  padding: 11px 20px;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--papel);
  color: var(--tinta);
  cursor: pointer;
}

.boton:hover { background: var(--suave); }
.boton:active { transform: translateY(1px); }

.boton[aria-pressed="true"] {
  background: var(--tinta);
  border-color: var(--tinta);
  color: #fff;
}

.grupo {
  display: inline-flex;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--papel);
  overflow: hidden;
}

.opcion {
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  min-height: 46px;
  padding: 11px 15px;
  border: 0;
  background: transparent;
  color: var(--tinta-2);
  cursor: pointer;
}

.opcion:hover { background: var(--suave); }

.opcion[aria-pressed="true"] {
  background: var(--tinta);
  color: #fff;
}

/* El estado se anuncia a los lectores de pantalla, pero no ocupa sitio en
   la pantalla: los botones de calidad ya muestran cuál está activa
   (relleno azul + aria-pressed). */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Pie anclado abajo del todo, fuera del centrado. */
body.reproductor .pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(10px, env(safe-area-inset-bottom));
}

.pie {
  text-align: center;
  font-size: .85rem;
  line-height: 1.5;
}

.pie p { margin: 0; }
.pie a { font-weight: 600; }

/* ============================================================
   Índice de clips
   ============================================================ */

.pantalla {
  max-width: 620px;
  margin: 0 auto;
  padding: max(20px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom));
}

.cabecera { text-align: center; margin-bottom: 22px; }

.cabecera h1 {
  margin: 16px 0 4px;
  font-size: clamp(1.4rem, 5.5vw, 1.9rem);
  line-height: 1.2;
}

.sub {
  margin: 0;
  font-size: .9rem;
  color: var(--tinta-2);
}

.lista {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.lista a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 12px 16px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  text-decoration: none;
}

.lista a:hover { background: var(--suave); }

.lista .num {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tinta-2);
  min-width: 1.6em;
}

.lista .texto { display: flex; flex-direction: column; }

.lista .detalle { font-size: .82rem; color: var(--tinta-2); }

.lista .dur {
  margin-left: auto;
  font-size: .82rem;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Adaptaciones a pantallas mayores y a horizontal
   ============================================================ */

@media (min-width: 700px) {
  .marcas { gap: 34px; }
  .aviso { font-size: .9rem; }
  .pantalla { padding-top: 48px; }
}

/* Teléfono en horizontal o ventanas bajas: menos aire, video más grande */
@media (max-height: 560px) and (orientation: landscape) {
  .escenario { padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left)); }
  .marcas { margin-bottom: 6px; }
  .marcas img { height: clamp(20px, 7vh, 34px); }
  .marco { max-width: min(1100px, calc((100dvh - 132px) * 16 / 9)); }
  .controles { margin-top: 6px; gap: 8px; }
  .boton, .opcion { min-height: 40px; padding: 8px 14px; font-size: .85rem; }
  body.reproductor .pie { display: none; }   /* en horizontal no hay altura que gastar */
}

/* Respeta a quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}