/* ════════════════════════════════════════════════════════════════════════════
   TUTORIALES.CSS — capa exclusiva de /tutoriales/

   Se carga APARTE y DESPUÉS de bundle-pages.css, y solo en esta página. No
   entra en el paquete a propósito: son ~9 KB que las otras nueve páginas no
   usarían jamás, y el paquete está precisamente para no arrastrar peso
   muerto por la ruta crítica.

   Esta página NO vende. Es documentación: el entrenador llega desde
   «Ayuda → Tutoriales» dentro de la app con una duda concreta y tiene que
   resolverla en dos clics. Por eso no hay hero, ni glows, ni degradados, ni
   tarjetas grandes: índice a la izquierda, lista compacta a la derecha,
   y la jerarquía la hace el tamaño de letra, no el color de fondo.

   Prefijo .tut- para que nunca colisione con .lp- (páginas de funcionalidad)
   ni con la home. Tokens de variables.css, sin excepciones.
════════════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════
   0. EL ATRIBUTO `hidden` TIENE QUE GANAR

   El proyecto no trae reset: `[hidden] { display: none }` solo existe en la
   hoja del navegador, y CUALQUIER regla de autor con `display` le gana, por
   poca especificidad que tenga. Como el buscador filtra poniendo y quitando
   `hidden`, sin esto las filas (`display:grid`) y los enlaces del índice
   (`display:flex`) seguían viéndose: solo desaparecían las categorías
   enteras, que son las únicas sin `display` propio. Parecía que filtraba.

   Acotado a .tut para no imponerle un reset al resto del sitio.
════════════════════════════════════════ */
.tut [hidden] { display: none !important; }

/* ════════════════════════════════════════
   1. ARMAZÓN
   Dos columnas que comparten el ancho de página del resto del sitio. El
   aside es sticky bajo el header; el main scrollea normal.
════════════════════════════════════════ */
.tut {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-24);
  display: flex;
  gap: 56px;
  align-items: flex-start;
}

/* ── Columna izquierda: el índice ───────── */
.tut-side {
  width: 264px;
  flex-shrink: 0;
  position: sticky;
  top: calc(var(--topbar-h) + var(--header-height));
  /* Altura exacta del hueco que queda bajo el header: así el índice tiene su
     propio scroll cuando no cabe, en vez de empujar la página. */
  height: calc(100vh - var(--header-height) - var(--topbar-h));
  overflow-y: auto;
  padding: 0 var(--spacing-24) var(--spacing-32) 0;
  border-right: 1px solid var(--color-silver);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

/* ── Columna derecha: catálogo o detalle ── */
.tut-main {
  flex: 1;
  /* min-width:0 es obligatorio: sin él, un título largo de la lista impide
     que el grid se encoja y la columna desborda el flex. */
  min-width: 0;
  max-width: 880px;
  padding: var(--spacing-40) 0 var(--spacing-96);
}

/* ════════════════════════════════════════
   2. BUSCADOR
   Pegado arriba dentro del aside, con fondo blanco propio para que los
   enlaces del índice pasen por debajo sin verse.

   El margin-bottom negativo come la mitad del gap de 24px del aside: el
   padding-bottom de 8px de la caja ya hace de separación.
════════════════════════════════════════ */
.tut-side__search {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-white);
  padding: var(--spacing-32) 0 var(--spacing-8);
  margin-bottom: -16px;
}

.tut-search {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-radius: var(--radius-inputs);
  background: var(--color-white);
  border: 1.5px solid var(--color-indigo-light);
  /* La única sombra de color de la página, y es deliberada: el buscador es
     lo primero que tiene que encontrar quien llega con una duda. */
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.12);
  transition: border-color var(--duration-fast) var(--ease);
}

.tut-search:focus-within { border-color: var(--color-indigo); }

.tut-search > i {
  color: var(--color-indigo);
  font-size: 14px;
  flex-shrink: 0;
}

.tut-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-family: var(--font-primary);
  font-size: var(--text-body-sm);
  color: var(--color-deep-navy);
  padding: 0;
}

.tut-search input::placeholder { color: var(--color-slate); }

/* Chrome dibuja su propia ✕ en los input[type=search]; sobra, porque tenemos
   la nuestra con estado y accesible. */
.tut-search input::-webkit-search-decoration,
.tut-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.tut-search__clear {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--color-mist);
  color: var(--color-steel);
  font-size: 11px;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.tut-search__clear:hover {
  background: var(--color-silver);
  color: var(--color-deep-navy);
}

/* ════════════════════════════════════════
   3. ÍNDICE LATERAL
════════════════════════════════════════ */
.tut-side__group + .tut-side__group { margin-top: var(--spacing-20); }

.tut-side__group-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-indigo);
  padding: 0 10px 6px;
  margin: 0;
}

/* El enlace del índice y el «Todos los tutoriales» comparten pinta: son la
   misma clase de cosa, una lista de destinos. */
.tut-side__link,
.tut-side__all {
  display: flex;
  justify-content: space-between;
  /* baseline y no center: el título y la duración son de cuerpos distintos y
     con center la duración queda flotando medio píxel alta. */
  align-items: baseline;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: var(--text-body-sm);
  line-height: 1.4;
  color: var(--color-graphite);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease),
              color var(--duration-fast) var(--ease);
}

.tut-side__link:hover,
.tut-side__all:hover {
  background: var(--color-mist);
  color: var(--color-deep-navy);
}

.tut-side__link.is-active,
.tut-side__all.is-active {
  background: var(--color-indigo-soft);
  color: var(--color-indigo);
  font-weight: 600;
}

.tut-side__link-dur {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 400;
  color: var(--color-slate);
  font-variant-numeric: tabular-nums;
}

.tut-side__all {
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  margin-bottom: var(--spacing-4);
}

.tut-side__all i { font-size: 13px; }

.tut-side__empty {
  margin: 0;
  padding: 0 10px;
  font-size: var(--text-caption);
  color: var(--color-slate);
}

/* ── Contacto, al fondo del índice ──────── */
.tut-side__help {
  /* margin-top:auto lo clava abajo del aside cuando el índice no llena la
     columna, y se deja empujar cuando sí la llena. */
  margin-top: auto;
  padding: var(--spacing-16) 10px 0;
  border-top: 1px solid var(--color-silver);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tut-side__help-title {
  margin: 0 0 2px;
  font-size: var(--text-caption);
  font-weight: 600;
  color: var(--color-deep-navy);
}

.tut-side__help a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-caption);
  color: var(--color-graphite);
  text-decoration: none;
}

.tut-side__help a:hover { color: var(--color-indigo); }
.tut-side__help a i { width: 14px; text-align: center; }
.tut-side__help .fa-whatsapp { color: #25d366; }

.tut-side__help p:last-child {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--color-steel);
}

/* ════════════════════════════════════════
   4. CATÁLOGO
════════════════════════════════════════ */
.tut-head { margin-bottom: var(--spacing-32); }

.tut-head h1 {
  margin: 0 0 6px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--color-deep-navy);
}

.tut-head__sub {
  margin: 0;
  font-size: 15px;
  color: var(--color-steel);
}

.tut-head__count {
  margin: 10px 0 0;
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-indigo);
}

/* ── Buscador duplicado para móvil ───────
   Nace oculto y solo lo enciende el breakpoint de 900px. Es un segundo
   <input> real, no el mismo movido con JS: mover el nodo entre dos sitios
   al redimensionar pierde el foco y el cursor a media palabra. Los dos se
   mantienen sincronizados en tutoriales.js. */
.tut-head__search { display: none; }

.tut-cats {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
}

.tut-cat {
  /* Para que el enlace «Tutoriales › Categoría» del detalle no deje el
     encabezado pegado al header sticky al volver. */
  scroll-margin-top: 96px;
}

.tut-cat__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: var(--spacing-12);
}

.tut-cat__title {
  margin: 0;
  font-size: var(--text-body-lg);
  font-weight: 600;
  color: var(--color-deep-navy);
}

.tut-cat__count {
  font-size: var(--text-caption);
  color: var(--color-slate);
}

/* ── La lista ────────────────────────────
   Un solo borde alrededor y separadores internos: la caja es la unidad, no
   cada fila. Cada tarjeta con su propio marco convertiría una lista de
   consulta en un escaparate. */
.tut-list {
  border: 1px solid var(--color-silver);
  border-radius: 12px;
  overflow: hidden;
}

.tut-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  gap: var(--spacing-16);
  align-items: center;
  padding: 12px var(--spacing-16);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease);
}

.tut-row + .tut-row { border-top: 1px solid #eef0f4; }
.tut-row:hover { background: var(--color-snow); }

.tut-row__thumb {
  width: 112px;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-midnight);
}

.tut-row__thumb video,
.tut-row__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tut-row__body { min-width: 0; }

/* Los hijos de .tut-row ya los blockifica el grid, pero estos dos cuelgan de
   .tut-row__body, que es un bloque normal: sin esto el título y la
   descripción se pintarían en la misma línea. */
.tut-row__title,
.tut-row__desc { display: block; }

.tut-row__title {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-deep-navy);
}

.tut-row__desc {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--color-steel);
  /* Una línea y punto: la lista es para escanear, no para leer. La
     descripción completa está en el detalle. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tut-row__dur {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-caption);
  color: var(--color-steel);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tut-row__dur i {
  font-size: 10px;
  color: var(--color-indigo);
}

/* ── Sin resultados ──────────────────── */
.tut-none {
  border: 1px dashed var(--color-silver);
  border-radius: 12px;
  padding: var(--spacing-32);
  text-align: center;
}

.tut-none p { margin: 0; }

.tut-none__title {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-deep-navy);
}

.tut-none__sub {
  margin-top: 6px !important;
  font-size: var(--text-body-sm);
  color: var(--color-steel);
}

.tut-none__sub a { color: var(--color-indigo); }

/* ════════════════════════════════════════
   5. DETALLE
════════════════════════════════════════ */
.tut-detail {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.tut-crumb {
  font-size: var(--text-caption);
  color: var(--color-steel);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tut-crumb a { color: var(--color-steel); text-decoration: none; }
.tut-crumb a:hover { color: var(--color-indigo); }
.tut-crumb span[aria-hidden] { color: var(--color-slate); }

.tut-detail__title {
  margin: 0;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--color-deep-navy);
  text-wrap: balance;
}

.tut-detail__desc {
  margin: -10px 0 0;
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-steel);
}

/* ── Reproductor ─────────────────────────
   Arranca SIN controls y con una portada encima. Dos razones: el primer
   fotograma del MP4 ya es la miniatura (#t=0.5) y la barra de controles
   nativa encima de ella ensucia; y así el play es un objetivo grande y
   evidente en vez de un triángulo de 20px en una esquina. */
.tut-player {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  border: 1px solid var(--color-silver);
  background: var(--color-midnight);
  overflow: hidden;
}

.tut-player video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.tut-player__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: rgba(2, 14, 46, 0.25);
  cursor: pointer;
}

.tut-player__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-pills);
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-deep-navy);
  transition: transform var(--duration-fast) var(--ease);
}

.tut-player__cover:hover .tut-player__pill { transform: translateY(-1px); }
.tut-player__pill i { color: var(--color-indigo); }

/* ── Bloques etiquetados: ruta y pasos ─── */
.tut-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--color-steel);
}

.tut-route {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.tut-route__chip {
  background: var(--color-mist);
  font-size: var(--text-caption);
  font-weight: 500;
  color: var(--color-deep-navy);
  padding: 3px 10px;
  border-radius: 6px;
}

.tut-route i {
  font-size: 8px;
  color: var(--color-slate);
}

.tut-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tut-steps li {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: baseline;
}

.tut-steps__n {
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-indigo);
  font-variant-numeric: tabular-nums;
}

.tut-steps__t {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-graphite);
}

.tut-steps__t strong {
  font-weight: 600;
  color: var(--color-deep-navy);
}

/* ── Consejo ─────────────────────────────
   Sin borde lateral de color: la regla de la casa es que el acento no se
   pinta en barras verticales. El fondo cian ya lo separa. */
.tut-tip {
  margin: 0;
  background: var(--color-cyan-soft);
  border-radius: 10px;
  padding: 12px var(--spacing-16);
  font-size: var(--text-body-sm);
  line-height: 1.6;
  color: var(--color-graphite);
}

.tut-tip b {
  font-weight: 600;
  /* Verde oscuro, no el cian de marca: sobre el fondo cian claro el #2be0af
     no llega ni a 2:1 de contraste. */
  color: #0d6b4f;
}

/* ── Anterior / Siguiente ────────────────── */
.tut-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-12);
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--color-silver);
}

.tut-nav__card {
  border: 1px solid var(--color-silver);
  border-radius: 10px;
  padding: 12px var(--spacing-16);
  text-decoration: none;
  display: block;
  transition: border-color var(--duration-fast) var(--ease);
}

.tut-nav__card:hover { border-color: var(--color-indigo-light); }

/* El «Siguiente» va SIEMPRE en la segunda columna, aunque no haya
   «Anterior»: si se dejara fluir, en el primer vídeo aparecería a la
   izquierda y el usuario leería «siguiente» donde esperaba «anterior». */
.tut-nav__card--next {
  grid-column: 2;
  text-align: right;
}

.tut-nav__label {
  display: block;
  font-size: 12px;
  color: var(--color-steel);
  margin-bottom: 2px;
}

.tut-nav__title {
  display: block;
  font-size: var(--text-body-sm);
  font-weight: 600;
  color: var(--color-deep-navy);
  line-height: 1.4;
}

/* ════════════════════════════════════════
   6. FOCO
   El outline global de la casa, repetido aquí porque varios de estos
   elementos (filas de la lista, portada del vídeo) no heredan de ningún
   componente que ya lo lleve.
════════════════════════════════════════ */
.tut a:focus-visible,
.tut button:focus-visible,
.tut input:focus-visible {
  outline: 2px solid var(--color-indigo);
  outline-offset: 2px;
}

/* La fila tiene overflow oculto por el radio de la lista: el outline se
   comería por los bordes. Se mete hacia dentro. */
.tut-row:focus-visible { outline-offset: -2px; }

/* ════════════════════════════════════════
   7. RESPONSIVE
════════════════════════════════════════ */

/* ── < 900: fuera el índice ──────────────
   Por debajo de este ancho la columna de 264px deja al contenido menos de
   600px, que es donde la fila de la lista empieza a romperse. Se va entera
   y el buscador reaparece bajo el h1. El contacto no se pierde: el
   .wa-float flotante sigue ahí. */
@media (max-width: 899px) {
  .tut { display: block; padding: 0 var(--spacing-20); }
  .tut-side { display: none; }
  .tut-main { max-width: none; padding-top: var(--spacing-32); }

  .tut-head__search {
    display: block;
    position: sticky;
    top: calc(var(--topbar-h) + var(--header-height));
    background: var(--color-white);
    padding: 12px 0;
    z-index: 5;
    margin-top: var(--spacing-16);
  }

  /* El sticky del buscador tapa el encabezado de sección al saltar a él. */
  .tut-cat { scroll-margin-top: 150px; }
}

/* ── < 768: la fila se parte ─────────────
   Miniatura más pequeña y la duración debajo del título: en dos columnas,
   la tercera dejaba al título en ~120px y partía todas las palabras. */
@media (max-width: 767px) {
  .tut { padding: 0 var(--spacing-16); }
  .tut-main { padding-bottom: var(--spacing-64); }

  .tut-head h1 { font-size: 26px; }
  .tut-detail__title { font-size: 24px; }

  .tut-row {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: start;
  }

  .tut-row__thumb { width: 88px; }

  .tut-row__dur {
    grid-column: 2;
    margin-top: 4px;
  }

  .tut-nav { grid-template-columns: 1fr; }

  .tut-nav__card--next {
    grid-column: auto;
    text-align: left;
  }

  .tut-player__pill {
    height: 42px;
    padding: 0 18px;
    font-size: var(--text-caption);
  }
}