/* ==========================================================================
   Bloque de YouTube de la home  —  prefijo .dl-yt
   Creado 2026-08 para el bloque de YouTube de la home (rama feature/yt-home-block).
   --------------------------------------------------------------------------
   CSS plano, escrito a mano. NO se importa desde style.scss ni se compila con
   Sass: .vscode/settings.json usa includeItems como whitelist y no lo tocamos.
   Para modificarlo se edita este archivo directamente y se sube el ?v= del
   <link> en htm/page.html.

   Todas las reglas estan scopeadas bajo .dl-yt. Sin selectores de elemento
   sueltos, sin *, :root, html, body, sin !important y sin @font-face.
   No redefine ni pisa ninguna clase existente del sitio.

   Valores de marca copiados (no importados) de public/lb/css/base/variables.scss.
   Mobile first: el layout de dos columnas entra en min-width 1024px, que es el
   corte de facto del sitio.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Contenedor
   Metricas calcadas de .tira (old.scss:4611-4632) para no desentonar con las
   tiras vecinas: 95% de ancho en mobile, margen izquierdo de 3% en desktop.
   -------------------------------------------------------------------------- */

.dl-yt-block {
  box-sizing: border-box;
  width: 95%;
  margin: 0 5% 0 2.5%;
  padding: 15px 0 30px;
}

.dl-yt-block.dl-yt-is-hidden,
.dl-yt-block .dl-yt-is-hidden {
  display: none;
}


/* --------------------------------------------------------------------------
   2. Header de seccion
   Barra con gradiente al estilo de las tiras, pero refleja lo que SUENA:
   "DelSol en YouTube" (o el titulo del video elegido) a la izquierda, linea
   elastica, y a la derecha el link "Mirar en YouTube" alternando visibilidad
   con el boton "Volver al vivo". Visible tambien en mobile.
   -------------------------------------------------------------------------- */

.dl-yt-head {
  /* Valores calcados 1:1 del header de las tiras (.tira h3 a, new.scss:132-163),
     incluido el gradiente DegLeftRight(rgba(245,10,69,1), rgba(245,166,10,1)).
     Copiados, no heredados: este archivo no toca ni extiende reglas del sitio. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  margin: 20px 0 15px 0;
  padding: 7.5px 0 7.5px 15px;
  border-radius: 5px;
  background: linear-gradient(to right, rgba(245, 10, 69, 1) 0%, rgba(245, 166, 10, 1) 100%);
}

.dl-yt-head-name {
  /* min-width 0 + ellipsis: el titulo de un video puede ser larguisimo */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: "motiva-sans", "Raleway", sans-serif;
  font-weight: 800;
  font-size: 2.25em;
  line-height: 1em;
  color: rgba(255, 255, 255, .91);
}

/* La linea elastica solo desde 990px, como en las tiras */
.dl-yt-head-line {
  display: none;
}

/* El <a> "Mirar en YouTube" y el <button> "Volver al vivo" comparten lugar y
   estilo; el JS alterna cual se ve con dl-yt-is-hidden. El reset del button va
   aca mismo, sin tocar reglas globales. En las tiras el "VER TODO" es .5em
   relativo a la barra (2.25em -> 1.125em; 2.75em -> 1.375em): aca va el
   equivalente absoluto. A diferencia de las tiras queda visible en mobile,
   porque es funcional y no solo navegacion. Sin subrayado en hover: solo la
   manito, como los links equivalentes del sitio. */
.dl-yt-head-open,
.dl-yt-head-back {
  flex-shrink: 0;
  margin: 0 20px 0 15px;
  padding: 0;
  border: 0;
  background: none;
  font-family: "motiva-sans", "Raleway", sans-serif;
  font-weight: 600;
  font-size: 1.125em;
  line-height: 1em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: rgba(255, 255, 255, .91);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

@media (min-width: 990px) {
  .dl-yt-head {
    padding: 10px 0 10px 15px;
  }

  .dl-yt-head-name {
    font-size: 2.75em;
  }

  .dl-yt-head-line {
    display: block;
    flex-grow: 1;
    height: 1px;
    margin: 0 20px;
    background-color: rgba(255, 255, 255, .21);
  }

  .dl-yt-head-open,
  .dl-yt-head-back {
    margin-left: 0;
    font-size: 1.375em;
  }
}


/* --------------------------------------------------------------------------
   3. Layout
   Mobile: apilado (reproductor arriba, miniaturas en fila horizontal abajo).
   Desktop: dos columnas, reproductor a la izquierda y lista a la derecha.
   -------------------------------------------------------------------------- */

.dl-yt-body {
  display: block;
}

@media (min-width: 1024px) {
  .dl-yt-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-gap: 20px;
    gap: 20px;
    align-items: stretch;
  }
}


/* --------------------------------------------------------------------------
   4. Reproductor principal (facade -> iframe al hacer click)
   -------------------------------------------------------------------------- */

.dl-yt-player {
  min-width: 0;
}

.dl-yt-stage {
  /* Caja 16:9 sin alto fijo: el padding porcentual mantiene la proporcion */
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, .08);
}

.dl-yt-stage .dl-yt-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Facade: portada + boton de play. Neutraliza los estilos de UA del <button>
   sin tocar ninguna regla global. */
.dl-yt-facade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.dl-yt-facade-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dl-yt-facade-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 68px;
  margin: -34px 0 0 -34px;
  border-radius: 50%;
  background-image: linear-gradient(to right, #f50a45 0%, #f5ce0a 100%);
  transition: transform .15s ease-out;
}

/* Triangulo de play dibujado con bordes: sin icon-font ni imagen */
.dl-yt-facade-play:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  margin: -11px 0 0 -7px;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 18px solid rgba(255, 255, 255, .91);
}

.dl-yt-facade:hover .dl-yt-facade-play {
  transform: scale(1.08);
}

.dl-yt-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 10px;
  border-radius: 5px;
  background-color: #f50a45;
  font-family: "motiva-sans", "Raleway", sans-serif;
  font-weight: 800;
  font-size: .875em;
  line-height: 1.2em;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .91);
}


/* --------------------------------------------------------------------------
   5. Lista de miniaturas — SOLO desktop (>= 1024px)
   En mobile no se muestra: solo el reproductor. El <ul> igual viaja en el
   HTML porque la pagina cacheada es la misma para mobile y desktop
   (createIdCache() no distingue user agent); con loading="lazy" en las
   imagenes, ocultarlo no cuesta ancho de banda.
   Desktop: columna vertical con scroll propio, alineada al alto del
   reproductor. La cantidad de items es variable (hoy 15, manana 3): no hay
   alturas ni filas calculadas sobre una cantidad fija.
   -------------------------------------------------------------------------- */

.dl-yt-aside {
  display: none;
  min-width: 0;
}

.dl-yt-item-btn {
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.dl-yt-thumb {
  display: block;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  overflow: hidden;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, .08);
}

.dl-yt-thumb-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dl-yt-meta {
  display: block;
  padding-top: 8px;
}

.dl-yt-title {
  display: block;
  font-family: "Raleway", sans-serif;
  font-weight: 700;
  font-size: 1em;
  line-height: 1.3em;
  color: rgba(255, 255, 255, .91);
}

.dl-yt-item-btn:hover .dl-yt-title {
  /* naranja de hover de las cards de tira — new.scss:100 */
  color: #f57f0a;
}

/* Item que se esta reproduciendo. Puede no haber ninguno: el vivo del panel no
   pertenece necesariamente a esta playlist, y esta bien que asi sea. */
.dl-yt-item-btn.dl-yt-is-active .dl-yt-title {
  color: #f5ce0a;
}

@media (min-width: 1024px) {
  /* La columna se estira al alto de la fila (que lo define el reproductor) y la
     lista scrollea adentro. Con pocos items simplemente no llena, sin deformarse. */
  .dl-yt-aside {
    display: block;
    position: relative;
    min-height: 200px;
  }

  .dl-yt-list {
    display: block;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: 0 6px 0 0;
    list-style: none;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dl-yt-item {
    display: block;
    margin: 0 0 12px;
  }

  .dl-yt-item:last-child {
    margin-bottom: 0;
  }

  /* Fila horizontal estilo YouTube: miniatura a la izquierda, texto a la derecha */
  .dl-yt-item-btn {
    display: flex;
    align-items: flex-start;
  }

  .dl-yt-thumb {
    flex: 0 0 140px;
    width: 140px;
    height: 79px;
    padding-bottom: 0;
  }

  .dl-yt-meta {
    padding: 0 0 0 10px;
    min-width: 0;
  }

  .dl-yt-title {
    /* 1em (heredado de la regla base, antes .9375em) con lh 1.2em: medido con
       las metricas reales de Raleway Bold, el peor titulo del feed (75 chars)
       da 4 lineas = 77px, dentro de los 79px de alto de la miniatura. Con 17px
       el peor caso ya supera el alto: no subir sin recorte de lineas. */
    font-size: 1em;
    line-height: 1.2em;
  }
}