/* Reset CSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }
  html, body {
  width: 100%;
  height: 100%;
  font-family: Arial, sans-serif;
  }
  body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Permite que el contenido principal ocupe todo el espacio disponible entre el header y el footer */
main {
    flex-grow: 1;
}

  .content-section{
    padding: 40px 20px; height: auto;
  }
  .content-section h1{
    font-weight: bold;
  }
  /* ======================================================
     LAYOUT PRINCIPAL (VISOR + PLAYLIST)
     ====================================================== */
     .video-layout {
      display: flex;
      gap: 30px; /* Espacio fijo entre las columnas */
      max-width: 90vw;
      margin: 30px auto 60px auto;
      text-align: left;
      align-items: flex-start; /* Alinea ambas columnas al inicio */
      justify-content: center;
  }

  .column1 {
    width: 60%;
    flex-shrink: 0; /* Impide que se encoja */
    flex-grow: 0;   /* Impide que crezca */
    display: flex; /* Para contener su contenido */
    flex-direction: column;
    /* Altura Mínima: Ayuda a estabilizar la altura total de la columna */
    min-height: 450px; 
}
  .column2 {
    width: 40%;
    flex-shrink: 0; /* Impide que se encoja */
    flex-grow: 0;   /* Impide que crezca */
    display: flex; /* Para contener su contenido */
    flex-direction: column;
}
  
  .video-player {
    width: 100%; /* Ocupa el 100% del 70% de column1 */
}
  /* Visor Principal (Ocupa 65% del ancho) */
  .main-video-viewer {
    width: 100%; 
    display: flex;
    flex-direction: column;
}
  
  /* iframe dentro del Visor */
  #main-video-frame {
    width: 100%;
    aspect-ratio: 16 / 9; 
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
  
.current-video-title {
  margin-top: 15px;
  font-size: 1.8em;
  color: #003366; 

  display: -webkit-box;
  -webkit-line-clamp: 2; /* Número máximo de líneas */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; 
  line-height: 1.3; 
  max-height: 2.6em; /* 1.3 * 2 = 2.6em, espacio fijo */
}
  
  /* Lista de Reproducción (Ocupa 35% del ancho) */
  .video-playlist {
    width: 100%; /* Ocupa el 100% del 30% de column2 */
    overflow-x: hidden;
}
  
.playlist-container {
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 6px;
  background-color: #fcfcfc;
  max-height: 500px; 
  overflow-y: auto; 
  width: 100%; /* Asegura que la lista ocupe el 100% de su contenedor (30%) */
}
  
  .playlist-container h3 {
      color: #333;
      border-bottom: 2px solid #eee;
      padding-bottom: 10px;
      margin-bottom: 15px;
  }
  
  /* ======================================================
     ESTILOS DE LOS ITEMS DE LA LISTA
     ====================================================== */
     .playlist-item {
      display: flex;
      align-items: center;
      padding: 10px;
      margin-bottom: 10px;
      cursor: pointer;
      border-radius: 4px;
      transition: background-color 0.2s;
      /* IMPORTANTE: Permite que el texto se trunque si es necesario */
      min-width: 0; 
  }
  
  .playlist-item:hover {
      background-color: #f0f0f0;
  }
  
  .playlist-item.active {
      background-color: #E6F0FF; /* Fondo claro para el video activo */
      border-left: 4px solid #003366; /* Línea corporativa para resaltar */
  }
  
  .playlist-item img {
      width: 80px; /* Tamaño de la miniatura */
      height: auto;
      border-radius: 3px;
      margin-right: 15px;
  }

  .item-details {
    flex-grow: 1;
    /* SOLUCIÓN: Ocultar texto largo para evitar scroll lateral */
    min-width: 0; /* Necesario para que el overflow funcione dentro de flex */
    overflow: hidden;
    white-space: nowrap; /* Evita que el texto envuelva */
    text-overflow: ellipsis; /* Añade puntos suspensivos */
}
  
.item-details .item-title {
  font-weight: 600;
  margin: 0;
  color: #333;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
}
  
  .item-details small {
      color: #666;
      font-size: 0.8em;
  }
  
  /* ======================================================
     ESTILOS DE PESTAÑAS (TABS) - ¡Funcionalidad Corregida!
     ====================================================== */
  .tabs {
    max-width: 100%;
    margin: 0 auto;
    font-family: Arial, sans-serif;
  }
  
  .tab-header {
    display: flex;
    justify-content: center; 
    border-bottom: 2px solid #ddd;
    margin-bottom: 20px;
    overflow-x: auto; /* Scroll horizontal si no caben las 4 en una pantalla pequeña */
  }
  
  .tab {
    padding: 10px 15px; 
    cursor: pointer;
    font-size: 1em; 
    font-weight: bold;
    color: #555;
    transition: color 0.3s, border-bottom 0.3s;
    border-bottom: 3px solid transparent;
    white-space: nowrap; /* Evita que el texto de las pestañas se rompa */
  }
  
  .tab.active {
    color: #007bff;
    border-bottom: 3px solid #007bff;
  }
  
  .tab-body {
    padding: 0;
  }
  
  /* CORRECCIÓN DE LAS PESTAÑAS: Se usa display: none/block para el contenido */
  .tap-body {
    display: none;
  }
  
  .tap-body.active {
    display: block;
    /* Eliminamos la transición de opacidad para asegurar que se muestre inmediatamente */
  }
  
  /* ======================================================
     MEDIA QUERIES (Responsividad)
     ====================================================== */
  @media (max-width: 768px) {

  
    .content-section{
      height: auto;
    }
  
    /* Para móviles, apilar video y tabs */
    .video-layout {
        flex-direction: column;
        max-width: none;
    }
    
    .main-video-viewer, .video-playlist {
        flex-basis: auto; /* Ocupan todo el ancho */
        width: 100%;
    }
  
    /* Ajustes responsivos para las pestañas */
    .tab-header {
      flex-wrap: wrap; /* Permite que las pestañas se envuelvan si no caben */
      justify-content: center;
    }
  
    .tab {
        font-size: 0.9em;
        padding: 8px 10px;
    }
  }
  /* ======================================================
   MEDIA QUERIES (Responsividad)
   ====================================================== */
@media (max-width: 768px) {


  .content-section{
    height: auto;
    padding: 20px 15px; /* Reducir padding horizontal en móviles */
  }

  /* ------------------------------------------------------
     LAYOUT PRINCIPAL
     ------------------------------------------------------ */
  .video-layout {
      flex-direction: column; /* Apilar las columnas */
      max-width: 100%; /* Ocupar todo el ancho disponible */
      margin: 20px auto 40px auto; /* Reducir márgenes */
      gap: 20px; /* Reducir el espacio entre los bloques apilados */
  }
  
  /* ------------------------------------------------------
     COLUMNAS (70/30 -> 100%)
     ------------------------------------------------------ */
  .column1, 
  .column2 {
      width: 100%; /* Ocupar el 100% del ancho del layout */
      flex-basis: auto; /* Dejar que la altura se ajuste al contenido */
      min-height: auto; /* Remover la altura mínima fija de escritorio */
  }

  /* ------------------------------------------------------
     REPRODUCTOR Y TÍTULO
     ------------------------------------------------------ */
  /* Asegurar que el reproductor (iframe) se mantenga responsivo */
  #main-video-frame {
      aspect-ratio: 16 / 9; 
  }
  
  /* Ajustar el tamaño de fuente del título para móviles */
  .current-video-title {
      font-size: 1.4em;
      margin-top: 10px;
      /* Mantenemos el clamping, pero la altura podría reducirse un poco más */
      -webkit-line-clamp: 2;
      max-height: 2.6em; /* Mantener la altura fija para estabilidad */
  }
  
  /* ------------------------------------------------------
     PLAYLIST Y TABS
     ------------------------------------------------------ */
  /* Reducir el tamaño de las miniaturas en la playlist para mejor ajuste */
  .playlist-item img {
      width: 60px; 
      margin-right: 10px;
  }

  /* Ajustar los detalles del ítem */
  .item-details .item-title {
      font-size: 0.9em;
  }

  /* Asegurar que el contenedor de la playlist no sea demasiado alto */
  .playlist-container {
      max-height: 350px; /* Limitar la altura de la lista en móviles */
      padding: 10px;
  }

  /* Ajustes responsivos para las pestañas */
  .tab-header {
    flex-wrap: nowrap; /* Quitar el wrap y forzar el scroll horizontal si es necesario */
    overflow-x: auto;
    justify-content: flex-start; /* Alinear a la izquierda si hay scroll */
  }

  .tab {
      font-size: 0.9em;
      padding: 8px 10px;
  }
}