/* === VIDEO HUB LIST STYLE === */
.content-section-with-aside {
    max-width: 950px; /* Un ancho mayor para esta sección específica */
    margin: 40px auto; /* Un poco más de margen vertical si lo deseas */
    display: flex; /* Habilita Flexbox */
    flex-direction: column; /* Por defecto, apila los elementos en pantallas pequeñas */
    gap: 30px; /* Espacio entre el contenido principal y el aside cuando están apilados */
}
.main-content-area {
    flex: 3; /* Ocupa 3 partes del espacio disponible en desktop */
    min-width: 0; /* Asegura que no desborde en pantallas pequeñas */
    /* Agrega padding interno si lo necesitas, ya que el padding del .content-section envuelve todo */
}
.section {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  padding: 30px;
}

.sidebar-aside {
    flex: 1; /* Ocupa 1 parte del espacio disponible en desktop */
    background-color: var(--color-contenedor-blanco); /* Fondo para el aside */
    padding: 20px;
    border-radius: 8px;
    /* Usar la misma sombra que .content-section para consistencia */
    box-shadow: 0 4px 15px var(--color-sombra-contenedor); 
    align-self: flex-start; /* Alinea el aside al inicio verticalmente */
    /* Añadir transiciones para efectos de hover, como .content-section */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.sidebar-aside:hover {
    /* Añadir efecto de hover similar a .content-section */
    transform: translateY(-5px);
    box-shadow: 0 8px 25px var(--color-sombra-contenedor);
}

.sidebar-aside h3, .sidebar-aside h4 {
    color: var(--color-acento-retro);
    font-family: var(--font-body); /* Cambia a font-body para subtítulos del aside */
    text-align: left;
    margin-top: 0;
    margin-bottom: 15px;
    text-transform: none; /* No en mayúsculas */
}

/* ... (el resto de los estilos para .sidebar-aside ul, li, a, .ads-banner img se mantienen igual) ... */

.sidebar-aside ul {
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.sidebar-aside ul li {
    margin-bottom: 10px;
}

.sidebar-aside ul li a {
    color: var(--color-texto-principal);
    display: block;
    padding: 5px 0;
    transition: color 0.3s ease;
}

.sidebar-aside ul li a:hover {
    color: var(--color-acento-divertido);
    text-decoration: underline;
}

.sidebar-aside .ads-banner img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}

/* --- Media Query para Desktop (cuando la barra aside se pone al lado) --- */
@media (min-width: 992px) { /* Por ejemplo, a partir de tablets grandes o desktop */
    .content-section-with-aside {
        flex-direction: row; /* Coloca los elementos en fila */
        align-items: flex-start; /* Alinea los elementos en la parte superior */
        gap: 40px; /* Ajusta el espacio entre el contenido principal y el aside en desktop */
    }
}


/* --- Estilos para cada enlace de la barra lateral (simulando el estilo del label) --- */
.sidebar-link {
    background-color: white;
    display: flex; /* Para poner el icono y el texto en línea */
    align-items: center;
    gap: 14px; /* Espacio entre el icono y el texto */
    padding: 10px 15px 10px 10px;
    cursor: pointer;
    user-select: none;
    border-radius: 10px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    color: black; /* Color del texto del enlace */
    text-decoration: none; /* Quita el subrayado del enlace */
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.sidebar-link:hover {
    transform: translateY(-3px); /* Efecto de elevación al pasar el ratón */
    box-shadow: rgba(149, 157, 165, 0.4) 0px 10px 30px; /* Sombra más pronunciada */
    background-color: #f0f0f0; /* Ligero cambio de fondo al pasar el ratón */
}

/* Estilos para el icono SVG dentro del enlace */
.sidebar-link .sidebar-icon {
    width: 24px; /* Tamaño del icono */
    height: 24px;
    fill: none; /* Por defecto sin relleno */
    stroke: black; /* Color del borde del icono */
    transition: stroke 0.3s ease, fill 0.3s ease, transform 0.5s ease;
}

/* Cambio de color y animación del icono al pasar el ratón */
.sidebar-link:hover .sidebar-icon {
    stroke: hsl(0deg 100% 50%); /* Rojo (similar al que tenías para el fill) */
    /* Puedes aplicar la animación aquí, aunque puede ser muy llamativa para navegación */
    /* animation: heartButton 1s; */
}

.sidebar-link span {
    flex-grow: 1; /* Permite que el texto ocupe el espacio restante */
    white-space: nowrap; /* Evita que el texto se rompa */
    overflow: hidden; /* Oculta cualquier texto que se desborde */
    text-overflow: ellipsis; /* Añade puntos suspensivos si el texto es muy largo */
}

@keyframes heartButton {
    0% { transform: scale(1); }
    25% { transform: scale(1.3); }
    50% { transform: scale(1); }
    75% { transform: scale(1.3); }
    100% { transform: scale(1); }
}





/* Contenedor principal con scroll vertical */
.video-row-scroll {
  max-height: 700px;  /* Espacio para ~6 tarjetas aprox */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 10px;
  max-width: 100%; /* Important: Allow it to take full width of its parent */
  margin: 0; /* Remove auto margin to avoid interfering with flex */
}

/* Contenedor adicional opcional por JS */
.video-content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Tarjeta de video */
.video-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: background 0.2s;
}

.video-card:hover {
  background-color: #f0f0f0;
}

/* Miniatura */
.video-thumbnail {
  width: 120px;
  height: 70px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  margin-right: 12px;
}

/* Texto dentro del video */
.video-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.video-title {
  font-size: 1em;
  font-weight: bold;
  color: #222;
  line-height: 1.3;
  margin: 0;
  text-align: left;
  white-space: normal; /* Allow text to wrap */
  overflow: hidden; /* Hide overflow if it still happens */
  text-overflow: ellipsis; /* Add ellipsis if text overflows after wrapping */
  max-height: 3.9em; /* Limit to 3 lines (1.3 * 3) */
}

.video-title a {
  color: inherit;
  text-decoration: none;
}

.video-title a:hover {
  color: #0077cc;
}

.video-description {
  font-size: 0.85em;
  color: #666;
  margin-top: 4px;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal; /* Allow text to wrap */
  max-height: 2.8em; /* Limit to 2 lines (0.85 * 2) */
}

/* New: Container for side-by-side video sections */
.video-category-row {
  display: flex;
  flex-direction: column; /* Default to column for small screens */
  gap: 30px; /* Space between sections when stacked */
  width: 100%; /* Ensure it takes full width */
}

@media (min-width: 768px) { /* Adjust breakpoint as needed for when columns appear */
  .video-category-row {
    flex-direction: row; /* Display as row on larger screens */
    gap: 40px; /* Space between columns */
    justify-content: space-between; /* Distribute space */
    align-items: flex-start; /* Align tops of columns */
  }

  .video-category-row > div {
    flex: 1; /* Each div takes equal space */
    min-width: 0; /* Prevent content from overflowing */
  }
}

/* --- New styles for YouTube videos (ultimosVideosYouTube) --- */
.youtube-grid-container {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    gap: 20px; /* Space between video cards */
    justify-content: center; /* Center cards if there are fewer than a full row */
    max-width: 100%; /* Ensure it doesn't overflow its parent */
    margin-bottom: 20px;
}

.youtube-grid-card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Hide anything that overflows the rounded corners */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1 1 calc(33.33% - 20px); /* For 3 items per row, considering gap */
    max-width: calc(33.33% - 20px); /* Ensures max width for 3 cards */
    min-width: 280px; /* Minimum width for the card before wrapping */
    display: flex;
    flex-direction: column; /* Stack image and text vertically */
    text-align: left;
}

.youtube-grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.youtube-grid-card a {
    text-decoration: none; /* Remove underline from the entire card link */
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%; /* Make the anchor fill the card */
}

.youtube-grid-thumbnail {
    width: 100%;
    height: 180px; /* Fixed height for consistency */
    object-fit: cover; /* Cover the area, cropping if necessary */
    border-bottom: 1px solid #eee;
}

.youtube-grid-info {
    padding: 15px;
    flex-grow: 1; /* Allows info section to expand and push footer down if any */
    display: flex;
    flex-direction: column;
}

.youtube-grid-title {
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 8px;
    color: var(--text-dark);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limit title to 2 lines */
    -webkit-box-orient: vertical;
    white-space: normal;
}

.youtube-grid-description {
    font-size: 0.85em;
    color: var(--text-light);
    margin-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit description to 3 lines */
    -webkit-box-orient: vertical;
    white-space: normal;
}

/* Media query for smaller screens: stack cards */
@media (max-width: 767px) {
    .youtube-grid-card {
        flex: 1 1 100%; /* Take full width on small screens */
        max-width: 100%;
    }
}

/* Adjust for 2 columns on medium screens if desired */
@media (min-width: 768px) and (max-width: 1023px) {
    .youtube-grid-card {
        flex: 1 1 calc(50% - 20px); /* 2 items per row */
        max-width: calc(50% - 20px);
    }
}


/* Estilos para el buscador de videos */
.search-bar-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 30px auto; /* Centrar y darle espacio */
    max-width: 600px; /* Ancho máximo para el buscador */
    position: relative;
}

#videoSearchInput {
    width: 100%;
    padding: 12px 20px 12px 45px; /* Espacio para el icono de búsqueda */
    border: 2px solid var(--color-borde-input);
    border-radius: 25px;
    font-size: 1em;
    outline: none;
    transition: all 0.3s ease;
    background-color: var(--color-fondo-input);
    color: var(--color-texto-principal);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

#videoSearchInput::placeholder {
    color: var(--color-texto-placeholder);
}

#videoSearchInput:focus {
    border-color: var(--color-acento-divertido);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.search-icon {
    position: absolute;
    left: 15px;
    color: var(--color-texto-principal);
    font-size: 1.2em;
}