/* ==================================================================== */
/* 🎨 ESTILOS PARA LA SECCIÓN DE DESCARGA DE DATOS (Basado en Imagen.png) */
/* ==================================================================== */

/* Variables de color para consistencia con tu diseño */
:root {
    --primary-green: #38c172; /* Verde de tu header */
    --button-blue: #4a90e2;   /* Azul del botón Buscar */
    --text-dark-gray: #333;   /* Texto principal */
    --text-light-gray: #666;  /* Texto secundario */
    --card-shadow-subtle: 0 2px 8px rgba(0, 0, 0, 0.1);
    --card-border-radius: 8px;
    --download-csv-yellow: #f1c40f; /* Amarillo del botón CSV */
    --download-excel-green: #2ecc71; /* Verde del botón Excel */
}

/* --- Contenedor Principal de la Sección (La tarjeta blanca central) --- */
.main-content-card.data-download-section {
    background-color: white; /* Fondo blanco para todo el contenido */
    padding: 40px 30px;
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow-subtle); /* Sombra sutil para el contenedor principal */
    text-align: center;
    max-width: 1200px;
    width: 95%;
    margin: 40px auto;
    flex-grow: 1;
}

/* --- Títulos y Subtítulos --- */
.section-title {
    font-family: 'Roboto Slab', serif;
    color: var(--text-dark-gray);
    font-size: 2em; /* Tamaño de la imagen */
    font-weight: 700;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.section-title::after {
    content: '';
    display: block;
    width: 100px;
    height: 4px;
    background-color: var(--primary-green); /* Línea verde debajo del título */
    margin: 10px auto 0;
    border-radius: 2px;
}

.section-subtitle {
    text-align: center;
    color: var(--text-light-gray);
    font-size: 1em;
    margin-bottom: 30px; /* Espacio antes del buscador */
    max-width: 800px; /* Limita el ancho para legibilidad */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* --- Buscador (Search Bar) --- */
.search-bar-container {
    display: flex;
    justify-content: center;
    align-items: center; /* Centra verticalmente */
    gap: 10px;
    margin-bottom: 40px; /* Espacio antes del carrusel */
}

.search-input {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 350px; /* Ancho consistente con la imagen */
    font-size: 1em;
    color: var(--text-light-gray);
    transition: border-color 0.2s ease;
}

.search-input:focus {
    border-color: var(--button-blue);
    outline: none;
}

.search-button {
    background-color: var(--button-blue); /* Azul del botón Buscar */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    transition: background-color 0.2s ease;
}

.search-button:hover {
    background-color: #3a7bd5; /* Tono más oscuro de azul */
}

.search-button i {
    margin-right: 8px;
}

/* --- CARRUSEL Y LAYOUT (Asegurando el funcionamiento del Scroll) --- */
.carousel-wrapper {
    position: relative;
    margin: 20px auto;
    padding: 0 40px; /* Espacio para las flechas DENTRO del área visible */
    max-width: 1100px; /* Mantiene un ancho controlado */
}

.carousel-content-wrapper {
    overflow: hidden; /* Esto oculta las flechas si están fuera de aquí */
    width: 100%;
}

.carousel-content {
    display: flex;
    justify-content: flex-start;
    align-items: stretch; /* Asegura que todas las tarjetas tengan la misma altura si no tienen min-height */
    gap: 30px; /* Espacio entre tarjetas */

    /* PROPIEDADES CRÍTICAS PARA EL MOVIMIENTO CON JS */
    overflow-x: scroll; /* Habilita el desplazamiento horizontal */
    overflow-y: hidden; /* Evita barras verticales innecesarias */
    scroll-behavior: smooth; /* Hace que el desplazamiento se vea fluido con el JS */
    
    /* Oculta la barra de desplazamiento visualmente (pero sigue siendo funcional) */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

.carousel-content::-webkit-scrollbar {
    display: none; /* Para navegadores WebKit (Chrome, Safari) */
}

/* --- Tarjetas de Datos (Data Cards) --- */
.data-card {
    background: white;
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow-subtle);
    padding: 20px;
    margin: 0; /* Ya tenemos gap en .carousel-content */
    width: 250px; /* Ancho fijo para 4 tarjetas en un ancho dado, similar a la imagen */
    min-height: 400px; /* Altura ajustada para ser compacta como en la imagen */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    flex-shrink: 0; /* CRÍTICO: Evita que la tarjeta se encoja */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #eee; /* Borde sutil */
}

.data-card:hover {
    transform: translateY(-3px); /* Ligero levantamiento al hover */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

/* Ícono de Documento en la parte superior de la tarjeta */
.card-icon-box {
    margin-bottom: 15px;
    font-size: 4em; /* Tamaño del ícono */
    color: var(--download-excel-green); /* Ícono verde, como en la imagen */
}

.card-title {
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
    color: var(--text-dark-gray);
    min-height: 60px; /* Asegura un espacio consistente para los títulos */
    display: flex; /* Para centrar verticalmente el texto si es corto */
    align-items: center;
    justify-content: center;
}

.card-description {
    font-size: 0.9em;
    color: var(--text-light-gray);
    flex-grow: 1; /* Permite que la descripción ocupe el espacio restante */
    margin-bottom: 20px; /* Espacio antes de los botones */
    line-height: 1.4;
}

/* --- Botones de Descarga (Rectangulares y específicos) --- */
.download-button {
    display: flex; /* Para centrar ícono y texto */
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 0;
    border-radius: 5px; /* Bordes rectangulares como en la imagen */
    text-decoration: none;
    font-weight: 600;
    margin-top: 10px;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.download-button i {
    margin-right: 8px;
    font-size: 1em;
}

.yellow-csv {
    background-color: var(--download-csv-yellow); /* Amarillo específico */
    color: var(--text-dark-gray); /* Texto oscuro para contraste */
}
.yellow-csv:hover {
    background-color: #e6b100; /* Tono más oscuro de amarillo */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.green-excel {
    background-color: var(--download-excel-green); /* Verde específico */
    color: white;
}
.green-excel:hover {
    background-color: #24a760; /* Tono más oscuro de verde */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

/* --- Botones de Navegación del Carrusel (Flechas) --- */
.nav-button {
    background-color: white;
    border: 1px solid #ccc; /* Borde sutil */
    border-radius: 50%;
    width: 45px; /* Tamaño de flecha más pequeño */
    height: 45px;
    cursor: pointer;
    color: var(--text-light-gray); /* Color gris del ícono */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1); /* Sombra más tenue */
    transition: all 0.2s ease;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-button svg {
    fill: currentColor; /* Asegura que el ícono SVG herede el color */
    width: 20px; /* Ajusta el tamaño del ícono SVG */
    height: 20px;
}

.nav-button:hover {
    background-color: var(--primary-green); /* Verde de tu header al hover */
    color: white;
    border-color: var(--primary-green);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.prev-button { left: 0; } /* Posiciona la flecha a la izquierda */
.next-button { right: 0; } /* Posiciona la flecha a la derecha */

/* --- Enlace "Volver al Inicio" --- */
.return-link {
    display: inline-block;
    background-color: transparent; /* Fondo transparente */
    color: var(--button-blue); /* Color azul del botón de búsqueda */
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    padding: 10px 15px;
    border-radius: 5px;
    margin-top: 40px; /* Más espacio */
    transition: background-color 0.2s ease, color 0.2s ease;
}

.return-link:hover {
    background-color: rgba(74, 144, 226, 0.1); /* Fondo azul muy sutil al hover */
    color: var(--dark-blue);
}

/* --- Responsive Design para la sección de datos --- */
@media (max-width: 1200px) {
    .main-content-card.data-download-section { padding: 30px 20px; margin: 30px auto; }
    .carousel-wrapper { padding: 0 30px; }
    .nav-button { width: 40px; height: 40px; }
    .nav-button svg { width: 18px; height: 18px; }
    .data-card { width: 230px; min-height: 380px; }
}

@media (max-width: 992px) {
    .section-title { font-size: 1.8em; }
    .search-bar-container { flex-direction: column; gap: 15px; }
    .search-input { width: 90%; max-width: 380px; }
    .search-button { width: 90%; max-width: 380px; }
    .carousel-wrapper { padding: 0 20px; }
    .nav-button { width: 35px; height: 35px; }
    .nav-button svg { width: 16px; height: 16px; }
    .data-card { width: 200px; min-height: 360px; }
}

@media (max-width: 768px) {
    .main-content-card.data-download-section { padding: 20px 15px; }
    .section-title { font-size: 1.6em; margin-bottom: 15px; padding-bottom: 8px; }
    .section-title::after { width: 80px; height: 3px; margin: 8px auto 0; }
    .section-subtitle { font-size: 0.9em; margin-bottom: 25px; }
    .search-input, .search-button { font-size: 0.9em; padding: 10px 15px; }
    .carousel-wrapper { padding: 0; } /* Sin padding lateral, las flechas quedan pegadas o se ocultan */
    .nav-button { display: none; } /* Ocultar flechas en pantallas muy pequeñas */
    .carousel-content { 
        gap: 20px;
        flex-direction: column; /* Apila las tarjetas verticalmente en móviles */
        align-items: center; /* Centra las tarjetas apiladas */
    }
    .data-card {
        width: 90%; /* Las tarjetas ocupan casi todo el ancho */
        max-width: 320px;
        margin-bottom: 20px; /* Espacio vertical entre tarjetas */
        min-height: auto; /* Altura automática en móvil */
    }
    .card-title { font-size: 1.1em; min-height: auto; }
    .card-description { font-size: 0.85em; margin-bottom: 15px; }
    .download-button { font-size: 0.9em; padding: 8px 0; }
}
/* ==================================================================== */
/* 🎨 ESTILOS FINALES PARA LA SECCIÓN DE DESCARGA DE DATOS (datoscc.jpg) */
/* ==================================================================== */

/* Variables de color de la interfaz general (Header, Acentos) */
:root {
    --primary-green: #38c172; /* Verde del Header/Íconos */
    --accent-magenta: #e91e63; /* Magenta de Botones de Flecha/Volver */
    --button-blue: #4a90e2;   /* Azul del botón Buscar */
    --text-dark-gray: #333;   /* Texto principal */
    --text-light-gray: #666;  /* Texto secundario */
    --download-csv-yellow: #f1c40f; /* Amarillo de Descargar CSV */
    --download-excel-green: #2ecc71; /* Verde de Descargar Excel */
    --card-shadow-subtle: 0 1px 6px rgba(0, 0, 0, 0.08); /* Sombra sutil de tarjetas */
    --card-border-radius: 8px;
}

/* El recuadro blanco está definido por .main-content-card en styles.css.
   Aquí solo definimos los estilos internos para la sección. */

/* --- Títulos y Subtítulos --- */
.section-title {
    color: var(--text-dark-gray);
    font-size: 2em;
    margin-bottom: 20px;
    padding-bottom: 10px;
}

.section-title::after {
    background-color: var(--accent-magenta); /* Línea Magenta debajo del título */
    width: 150px; /* Línea más larga */
}

.section-subtitle {
    color: var(--text-light-gray);
    font-size: 1em;
    margin-bottom: 30px;
    line-height: 1.5;
}

/* --- Buscador (Search Bar) --- */
.search-bar-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 40px;
}

.search-input {
    padding: 10px 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 350px;
    font-size: 1em;
    color: var(--text-light-gray);
}

.search-button {
    background-color: var(--button-blue);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    /* CRÍTICO: Asegura que el ícono de lupa se muestre */
    display: flex;
    align-items: center;
    justify-content: center;
}
.search-button::before {
    content: "\f002"; /* Ícono 'magnifying-glass' (Lupa) */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 8px;
    font-size: 1em;
}

/* --- CARRUSEL Y LAYOUT (Mantenidos para scroll funcional) --- */
.carousel-wrapper {
    position: relative;
    margin: 20px auto;
    padding: 0 40px; /* Espacio para las flechas */
    max-width: 1100px;
}
.carousel-content {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: 30px;
    overflow-x: scroll;
    scroll-behavior: smooth;
    -ms-overflow-style: none; scrollbar-width: none;
}
.carousel-content::-webkit-scrollbar { display: none; }


/* --- Tarjetas de Datos (Data Cards) --- */
.data-card {
    background: white;
    border-radius: var(--card-border-radius);
    box-shadow: var(--card-shadow-subtle);
    padding: 20px;
    margin: 0;
    width: 250px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    flex-shrink: 0;
    border: 1px solid #f0f0f0; /* Borde muy sutil para definición */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.data-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* Ícono de Documento */
.card-icon-box {
    margin-bottom: 15px;
    font-size: 4em;
    color: var(--primary-green); /* Ícono Verde */
}

.card-title {
    font-size: 1.2em;
    font-weight: 700;
    color: var(--text-dark-gray);
    min-height: 60px;
    /* ... Asegura alineación ... */
}

.card-description {
    font-size: 0.9em;
    color: var(--text-light-gray);
    flex-grow: 1;
    margin-bottom: 20px;
    line-height: 1.4;
}

/* --- Botones de Descarga --- */
.download-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 0;
    border-radius: 5px; /* Bordes menos redondeados que en el carrucelbueno.png */
    font-weight: 600;
    margin-top: 10px;
    box-shadow: none; /* Elimina sombras extras para un look más plano */
}

.download-button i { margin-right: 8px; }

.yellow-csv {
    background-color: var(--download-csv-yellow); /* Amarillo */
    color: var(--text-dark-gray);
}
.yellow-csv:hover { background-color: #e6b100; }

.green-excel {
    background-color: var(--download-excel-green); /* Verde */
    color: white;
}
.green-excel:hover { background-color: #24a760; }

/* --- Botones de Navegación (Flechas Magenta) --- */
.nav-button {
    background-color: white;
    border: 1px solid #f0f0f0; /* Borde muy claro */
    border-radius: 50%;
    width: 45px;
    height: 45px;
    color: var(--accent-magenta); /* Flechas Magenta (como en la imagen mapas.PNG) */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.2em;
}

.prev-button::before { content: "\f053"; } /* Flecha izquierda */
.next-button::before { content: "\f054"; } /* Flecha derecha */

.nav-button:hover {
    background-color: var(--accent-magenta);
    color: white;
    border-color: var(--accent-magenta);
}

.prev-button { left: 0; }
.next-button { right: 0; }

/* --- Enlace "Volver al Inicio" (Botón Magenta) --- */
.return-link {
    display: inline-block;
    background-color: var(--accent-magenta); /* Fondo Magenta */
    color: white;
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    padding: 12px 25px;
    border-radius: 5px;
    margin-top: 40px;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.return-link:hover {
    background-color: #d61a55; /* Magenta más oscuro */
    transform: translateY(-1px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Si usas un ícono para el botón de volver: */
/*
.return-link::before {
    content: "\f060"; 
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 10px;
}
*/
/* --- ESTILOS PARA EL ÍNDICE (Tarjetas y Contenedores) --- */

.tarjeta {
    /* CLAVE: Asegura que la posición absoluta del icono y el popup sea relativa a la tarjeta */
    position: relative; 
}

/* Estilo del icono de Bibliografía (para posicionarlo en la esquina) */
.tarjeta .bibliografia-icon {
    position: absolute; 
    top: 15px;
    right: 15px;
    color: var(--header-bg-start); /* Color verde principal */
    font-size: 1.5em;
    cursor: help;
    z-index: 50; 
}

/* Efecto de hover en el icono (opcional) */
.tarjeta .bibliografia-icon:hover {
    color: var(--accent-color); /* Magenta al pasar el ratón */
}

/* --- ESTILO DE LA VENTANA EMERGENTE (POPUP) --- */
.fuentes-popup {
    /* Estado inicial: Oculto y semi-transparente */
    visibility: hidden;
    opacity: 0;
    
    /* Propiedades de la ventana */
    position: absolute;
    top: 30px; /* Posicionado justo debajo del icono */
    right: 0;
    
    /* Diseño: Fondo oscuro y SEMI-TRANSPARENTE (como en la imagen) */
    background-color: rgba(30, 30, 30, 0.9); /* Nivel de transparencia de 0.9 */
    color: white;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    
    /* Dimensiones */
    width: 350px; 
    text-align: left;
    
    /* Animación */
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 100;
}

/* Contenido dentro del popup (Lista) */
.fuentes-popup ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
}

.fuentes-popup li {
    line-height: 1.5;
    margin-bottom: 5px;
    padding-left: 10px;
    position: relative;
}

/* Estilo específico para el título "FUENTES DE INFORMACIÓN:" */
.fuentes-popup li:first-child {
    font-weight: 700;
    color: var(--header-bg-start); /* Color verde del header */
    margin-bottom: 8px;
    padding-left: 0;
}

/* Estilo de la viñeta (se usa el contenido de PHP tal cual, pero añadimos estilo aquí) */
.fuentes-popup li:not(:first-child)::before {
    content: "•";
    color: var(--accent-color); /* Color de acento para la viñeta */
    font-weight: bold;
    display: inline-block;
    width: 10px;
    margin-left: -10px;
}

/* --- CLAVE: MOSTRAR AL HACER HOVER --- */
/* Cuando el cursor está sobre el icono, hacemos visible la ventana emergente */
.bibliografia-icon:hover .fuentes-popup {
    visibility: visible;
    opacity: 1; /* Se muestra completamente */
}
/* --- Estilos para hacer las tarjetas más pequeñas y organizadas --- */

.data-card {
    /* Reducimos el ancho de cada tarjeta. Esto permite que quepan más en una fila. */
    /* Por ejemplo, 300px es un buen tamaño para dos o tres tarjetas en una vista de escritorio. */
    min-width: 300px; 
    max-width: 300px; /* Establece un ancho fijo para todas */
    height: auto; /* Permite que la altura se ajuste al contenido */
    
    /* Añadimos un poco de espacio a los lados para que no se peguen */
    margin: 0 15px; /* Espacio horizontal entre tarjetas */
    
    /* Mantenemos el resto de los estilos de la tarjeta */
    padding: 20px;
    border-radius: 12px;
    background-color: #ffffff; /* Color de fondo claro */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    display: flex; /* Asegura un layout interno flexible */
    flex-direction: column;
    justify-content: space-between; /* Para que los botones de descarga queden abajo */
}

/* Permitimos que las tarjetas se envuelvan si no son parte de un carrusel
   aunque en este caso, es el JS quien maneja el carrusel. */
.carousel-content {
    /* CRÍTICO: Eliminamos o reducimos el 'gap' y ajustamos el 'flex-basis' si es necesario.
       Aseguramos que el contenedor de las tarjetas sea flexible. */
    display: flex;
    overflow-x: hidden; /* Esto es manejado por JS, pero aseguramos que el scroll no sea visible */
    padding: 0 50px; /* Padding para que las tarjetas no se peguen a los bordes del carrusel */
    /* Dejamos el resto de los estilos del carrusel-content (ej: transform para el movimiento) */
}

/* Ajuste para que las flechas de navegación se vean bien */
.carousel-wrapper {
    position: relative;
    overflow: hidden; /* Oculta el overflow del contenido que está fuera del carrusel */
    padding: 20px 0;
}

.carousel-content-wrapper {
    overflow-x: hidden; /* CRÍTICO: Esto oculta las tarjetas que están fuera de la vista */
    width: 100%;
}


/* --- Media Queries (Ajuste para móviles) --- */
@media (max-width: 768px) {
    .data-card {
        min-width: 250px; /* Más estrecho en móvil */
        max-width: 250px;
    }
    
    .carousel-content {
        padding: 0 20px;
    }
}