/* 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;
}

p {
  color: #666666;
  margin-left: 0rem !important;
  margin-right: 0rem !important;
  margin-top: 1rem !important;
}

.copyright p{
  color: #ffffff !important;
}

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

  /* ======================================================
     LAYOUT PRINCIPAL (VISOR + PLAYLIST)
     CAMBIO CLAVE: APILAR (Columna) en desktop
     ====================================================== */
     .video-layout {
      display: flex;
      gap: 30px;
      margin: 30px auto 60px auto;
      text-align: left;
      align-items: flex-start; 
      justify-content: center;
      flex-direction: column; /* Diseño apilado (playlist arriba, video abajo) */
      width: 100%;
  }

  /* Las columnas ahora ocupan el 100% del ancho del layout */
  .column1, .column2 {
    width: 100%; 
    flex-shrink: 0;
    min-height: auto; /* Ajustamos la altura al contenido */
}
  
  .video-player {
    width: 100%; 
}
  /* Visor Principal */
  .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; 
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; 
  line-height: 1.3; 
  max-height: 2.6em; 
}
  
  /* Lista de Reproducción Contenedor Principal */
  .video-playlist {
    width: 100%;
    overflow-x: hidden;
}
  
.playlist-container {
  border: 1px solid #eee;
  padding: 15px;
  border-radius: 6px;
  background-color: #fcfcfc;
  max-height: none; 
  overflow-y: visible; 
  width: 100%; 
}

/* ======================================================
   NUEVO ESTILO CAROUSEL HORIZONTAL CON BOTONES
   ====================================================== */
.horizontal-scroll-container {
    /* Contenedor padre para el carrusel y los botones */
    position: relative; /* Clave para posicionar los botones */
    padding: 0 40px; /* Espacio para los botones */
}

.horizontal-scroll-wrapper {
    /* Wrapper interno que contiene los ítems */
    display: flex;
    overflow-x: hidden; /* OCULTA EL SCROLL NATIVO (usaremos botones) */
    -webkit-overflow-scrolling: touch; 
    white-space: nowrap; 
    gap: 15px; 
    padding-bottom: 0; 
}

/* Ocultar barra de scroll en navegadores WebKit (Chrome, Safari) */
.horizontal-scroll-wrapper::-webkit-scrollbar {
    display: none;
}

/* Ocultar barra de scroll en IE and Edge */
.horizontal-scroll-wrapper {
    -ms-overflow-style: none;
}


/* ======================================================
   ESTILOS DE BOTONES DE SCROLL
   ====================================================== */
.scroll-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    background-color: #003366;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s;
    display: flex /*!important*/;
    align-items: center;
    justify-content: center;
}

.scroll-button:hover {
    background-color: #004d99;
}

.scroll-button.left {
    left: 0;
}

.scroll-button.right {
    right: 0;
}
  
  /* ======================================================
     ESTILOS DE LOS ITEMS DE LA LISTA (Tarjetas Horizontales)
     CAMBIO CLAVE: Reducción del ancho de la tarjeta
     ====================================================== */
     .playlist-item {
      /* ANCHO REDUCIDO: De 280px a 220px */
      flex: 0 0 220px; 
      display: flex;
      flex-direction: column; 
      align-items: flex-start;
      padding: 8px; /* Reducción de padding para compacidad */
      margin-bottom: 0; 
      cursor: pointer;
      border-radius: 4px;
      transition: background-color 0.2s, border 0.2s;
      min-width: 0; 
      border: 1px solid #ddd;
      white-space: normal; 
  }
  
  .playlist-item:hover {
      background-color: #f0f0f0;
  }
  
  .playlist-item.active {
      background-color: #E6F0FF; 
      border: 2px solid #003366; 
  }
  
  .playlist-item img {
      width: 100%; 
      height: auto;
      border-radius: 3px;
      margin-right: 0;
      margin-bottom: 6px; /* Reducción de margen inferior */
  }

  .item-details {
    flex-grow: 1;
    min-width: 0; 
    overflow: visible; 
    white-space: normal; 
    padding-right: 5px;
}
  
.item-details .item-title {
  font-weight: 600;
  /* FUENTE LIGERAMENTE MÁS PEQUEÑA: De 1em (por defecto) a 0.9em */
  font-size: 0.9em; 
  margin: 0;
  color: #333;
  line-height: 1.2; /* Reducción de line-height */
  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; 
}
  
  .item-details small {
      color: #666;
      font-size: 0.7em; /* Reducción de fuente para el detalle */
      display: block; 
      margin-top: 4px; /* Reducción de margen superior */
  }
  
  /* ======================================================
     ESTILOS DE PESTAÑAS (TABS) 
     ====================================================== */
  .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; 
    white-space: nowrap;
  }
  
  .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; 
  }
  
  .tab.active {
    color: #068fd3;
    border-bottom: 3px solid #068fd3;
  }
  
  .tab-body {
    padding: 0;
  }
  
  .tap-body {
    display: none;
  }
  
  .tap-body.active {
    display: block;
  }

  .btn-primary{
    background-color: transparent;
    border: 2px solid #068fd3;
    color: #068fd3;
}
.btn-primary:hover{
    background-color: #068fd3;
    color: white;
    border: 2px solid #068fd3;
}

  .btn-success{
    background-color: #399388;
    border: 2px solid #399388;
    color: white;
}

.btn-success:hover{
    background-color: #1C5E57;
    border: 2px solid #1C5E57;
    color: white;
}

.banner-section{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.news-intro{
  background-color: #f8f9fa !important;
}

strong{
  color: #1b3d73!important;
  font-weight: bold;
}

/* ======================================================
   Video de Inicio
   ====================================================== */
.video-background-wrapper{
  display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
}
.video-background-wrapper video{
    max-width: 100%;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 35px;
    display: block;
    aspect-ratio: 16 / 9;
}
  
  /* ======================================================
     MEDIA QUERIES (Responsividad)
     ====================================================== */
  @media (max-width: 992px) { 
    
    .video-layout {
        gap: 20px; 
        margin: 20px auto 40px auto; 
    }
    .current-video-title {
        font-size: 1.6em;
    }

    .playlist-container {
      max-height: auto; 
      overflow-y: visible;
      padding: 10px;
    }

    /* Mostrar la barra de scroll nativa para mejor experiencia en móvil */
    .horizontal-scroll-wrapper {
        overflow-x: auto; 
        padding-bottom: 10px; 
    }

    /* Ocultar botones en móvil */
    .scroll-button {
        display: none;
    }
    
    .horizontal-scroll-container {
        padding: 0; 
    }
    
    .playlist-item {
        /* Reducir tamaño de las tarjetas para que quepan 1.5 o 2 en pantalla */
        flex: 0 0 180px; /* Ancho de tarjeta ajustado para móvil */
        padding: 8px;
        white-space: normal; 
    }
    
    .item-details .item-title {
        font-size: 0.9em;
    }
    .item-details small {
        font-size: 0.75em;
    }

    /* Ajustes menores de pestañas */
    .tab-header {
      flex-wrap: nowrap; 
      justify-content: flex-start; 
    }
    .tab {
        font-size: 0.9em;
        padding: 8px 10px;
    }
  }