/* Reset básico */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Layout base - Contenedor principal Flex */
body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #F4F6FA;
    color: #1F417F;
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    /* Sidebar a la izquierda, Contenido principal a la derecha */
    width: 100%;
    /* Asegura que el body use todo el ancho */
    overflow: hidden;
    /* Evita scroll horizontal a nivel de body */
}

/* Panel lateral izquierdo (Base 15%, NO CRECE, NO SE ENCOGE por debajo de min-width) */
.sidebar {
    flex: 0 0 15%;
    /* flex-grow: 0, flex-shrink: 0, flex-basis: 15% */
    min-width: 250px;
    /* Mínimo para asegurar usabilidad */
    max-width: 350px;
    /* Máximo (opcional, si quieres limitar qué tan ancha se pone) */
    background-color: #1F417F;
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* overflow-y: auto; */
    /* Permite scroll interno si los filtros son muchos */
    color: #ffffff;
    align-items: center;
    /* Centra los elementos del sidebar, incluyendo el logo */
}

.sidebar-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sidebar-filters {
    display: flex;
    flex-direction: column;
    gap: 1.5rem !important;
    width: 100%;
    /* Asegura que los divs de filtro ocupen todo el ancho disponible del sidebar */
}

/* Estilos para el logo dentro del sidebar */
.sidebar-logo {
    max-width: 80%;
    /* Ajusta el ancho máximo para que no se salga del sidebar */
    height: 8rem;
    width: 8rem;
    /* Espacio debajo del logo y encima del título de filtros */
    display: block;
    /* Asegura que ocupe su propia línea y margin-bottom funcione bien */
}


/* Estilo para cada grupo de filtro */
.sidebar>div {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    width: 100%;
    /* Asegura que los divs de filtro ocupen todo el ancho disponible del sidebar */
}

/* Título del panel del sidebar */
.sidebar h2 {
    font-size: 1.5rem;
    color: #FFC20E;
    /* Color de acento */
    text-align: center;
    /* Centra el título de filtros */
    margin-top: 0;
    /* Asegura que no haya margen superior extra si el logo está arriba */
    margin-bottom: 1rem;
    /* Espacio debajo del título de filtros */
    width: 100%;
    /* Asegura que ocupe todo el ancho para centrar el texto */
}

/* Labels */
.sidebar label {
    font-weight: 600;
    color: #ffffff;
    /* Texto blanco */
    font-size: 0.95em;
}

/* Estilos para Selects e Input */
.sidebar select,
.sidebar input[type="text"] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #4B7CBF;
    /* Borde con color secundario */
    border-radius: 8px;
    font-size: 1rem;
    color: #1F417F;
    /* Color principal */
    background-color: #ffffff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Estilos específicos para Select */
.sidebar select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,0 140,0 70,100' fill='%234B7CBF'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    cursor: pointer;
}

/* Estilo para el focus en Selects e Input */
.sidebar select:focus,
.sidebar input[type="text"]:focus {
    outline: none;
    border-color: #FFC20E;
    /* Color de acento al enfocar */
    box-shadow: 0 0 8px rgba(255, 194, 14, 0.5);
    /* Sombra al enfocar */
    background-color: #FFFBE6;
    /* Fondo claro al enfocar */
}

.sidebar button {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid #4B7CBF;
    /* Borde con color secundario */
    border-radius: 8px;
    font-size: 1rem;
    color: #1F417F;
    /* Color principal */
    background-color: #ffffff;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}


/* Contenedor principal de Contenido (Título, Tabla+Stats y Mapa) - Ocupa el espacio restante */
.main-container {
    flex: 1;
    /* Ocupa todo el espacio que deja el sidebar */
    display: flex;
    flex-direction: column;
    /* Apila el título arriba, y el área de contenido (tabla/mapa) abajo */
    gap: 1.5rem;
    /* Espacio entre el título y el área de contenido */
    padding: 2rem;
    background-color: #ffffff;
    height: 100vh;
    overflow: auto;
    /* overflow: hidden; */
    /* Evita scroll en este contenedor */
}

/* Estilos para el Título Principal (Restaurados a la versión original) */
.page-title {
    font-size: 2.5rem;
    color: #1F417F;
    /* Color principal */
    margin-bottom: 1rem;
    /* Espacio debajo del título */
    text-align: center;
    line-height: 1.2;
    /* Ajusta el interlineado para la línea de salto */
    padding-bottom: 10px;
    /* Pequeño padding inferior */
    border-bottom: 3px solid #4B7CBF;
    /* Línea divisoria con color secundario */
}

.page-title span {
    color: #FFC20E;
    /* Color de acento */
    font-weight: 700;
    display: inline-block;
    /* Permite aplicar transformación o margen si se desea */
    margin-top: 5px;
    /* Espacio entre las dos líneas del título */
}

/* Contenedor para el área de contenido (Tabla+Stats y Mapa) - Este tendrá el layout 40/45 */
.content-area {
    flex: 1;
    /* Ocupa el espacio restante en main-container después del título */
    display: flex;
    flex-direction: column;
    /* Tabla/Stats y Mapa lado a lado */
    gap: 1.5rem;
    /* Espacio entre las dos columnas */
    /* overflow: hidden; */
    /* Evita scroll en esta área */
}


/* Contenedor para Indicador y Tabla (Base 40%, CRECE con prioridad media, SE ENCOGE) */
.table-and-stats-container {
    /* flex: 8 1 0; */
    /* flex-grow: 8, flex-shrink: 1, flex-basis: 0 */
    display: flex;
    flex-direction: column;
    gap: 2rem;
    /* Espacio entre stats y tabla */
    overflow-y: auto;
    /* Permite scroll si esta columna es larga */
}

/* Contenedor para el Mapa (Base 45%, CRECE con prioridad ALTA, SE ENCOGE) */
.map-container {
    flex: 9 1 0;
    /* flex-grow: 9, flex-shrink: 1, flex-basis: 0 */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
    /* Espacio entre título y mapa */
    /* overflow: hidden; */
}


/* Títulos de secciones (dentro de content-area) */
.content-area h3 {
    /* Apuntar solo a h3 dentro de content-area */
    color: #4B7CBF;
    margin-bottom: 1rem;
    padding-bottom: 5px;
    border-bottom: 2px solid #f4f6fa;
}


/* Sección de estadísticas */
.stats-summary {
    /* gestionado por gap */
}

/* Contenedor de tarjetas */
.stats-container {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

/* Tarjeta de estadística */
.stat-card {
    min-width: 250px;
    max-width: 350px;
    flex: 0 0 auto;
    /* No crece ni se encoge dentro de su contenedor, base auto */
    background-color: #F4F6FA;
    border-left: 6px solid #FFC20E;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
    color: #1F417F;
    font-weight: 500;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.stat-card h4 {
    font-size: 1.1rem;
    color: #1F417F;
    margin-bottom: 0;
}

.stat-card p {
    font-size: 2em;
    font-weight: 700;
    color: #4B7CBF;
}

/* Sección de la tabla de proveedores */
.proveedores-table-section {
    /* gestionado por gap */
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Espacio entre tabla y paginación */
    flex-grow: 1;
}

.table-container {
    overflow-x: auto;
    flex-grow: 1;
}

.proveedores-table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
}

.proveedores-table th,
.proveedores-table td {
    text-align: left;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
}

.proveedores-table thead tr {
    background-color: #4B7CBF;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9em;
}

.proveedores-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.proveedores-table tbody tr:hover {
    background-color: #eef;
}

.proveedores-table td {
    font-size: 0.95em;
    color: #333;
}

.proveedores-table tbody tr td[colspan] {
    text-align: center;
    font-style: italic;
    color: #666;
    padding: 20px;
}

/* Estilos de Paginación */
.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 1rem;
    padding: 10px;
    background-color: #F4F6FA;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    flex-shrink: 0;
}

.pagination-button {
    padding: 8px 15px;
    border: 1px solid #4B7CBF;
    border-radius: 5px;
    background-color: #ffffff;
    color: #1F417F;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.pagination-button:hover:not(:disabled) {
    background-color: #4B7CBF;
    color: #ffffff;
    border-color: #4B7CBF;
}

.pagination-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-info {
    font-size: 1em;
    color: #1F417F;
    font-weight: 600;
}


/* Sección del mapa - dentro de map-container */
.map-section {
    /* flex-grow: 1; */
    /* height: 100%; */
    /* min-height: 400px; */
    /* background-color: #e0e0e0; */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Espacio entre título h3 y div del mapa */
}

#dynamic-map-container {
    flex-grow: 1;
    height: 100%;
    min-height: 300px;
}


/* Responsive */
@media (max-width: 1024px) {
    body {
        flex-direction: column;
        min-height: auto;
        height: auto;
        overflow-y: auto;
    }

    .sidebar {
        /* flex: 0 0 auto; */
        width: 100%;
        min-width: auto;
        max-width: none;
        padding: 1rem;
        gap: 1rem;
        /* overflow-y: visible; */
        flex-direction: column;
        /* Sidebar en fila en móvil */
        justify-content: space-around;
        /* Distribuye los elementos */
        flex-wrap: wrap;
        /* Permite que los elementos se envuelvan si no caben */
        align-items: center;
        /* Alinea verticalmente en el centro */
    }

    /* Estilos del logo en sidebar en Responsive */
    .sidebar-logo {
        max-width: 100px;
        /* Tamaño más controlado en móvil */
        margin-bottom: 0;
        /* Elimina el margen inferior en layout de fila */
        margin-right: 1rem;
        /* Espacio a la derecha del logo */
    }

    .sidebar-filters {
        width: 100%;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sidebar #clear-filters-button {
        grid-column: 1 / span 2;
    }

    .sidebar h2 {
        margin-bottom: 0.5rem;
        /* Menos margen debajo del título de filtros en móvil */
        width: auto;
        /* Permite que ocupe solo el ancho necesario */
        text-align: left;
        /* Alinea a la izquierda en layout de fila */
    }


    .sidebar>div {
        flex-direction: column;
        gap: 1rem;
        width: auto;
        /* Permite que los divs de filtro ocupen solo el ancho necesario */
        flex-grow: 1;
        /* Permite que crezcan para ocupar espacio */
        min-width: 150px;
        /* Ancho mínimo para los filtros en móvil */
    }

    .main-container {
        flex: 1 1 auto;
        /* Permite que crezca/encoga en columna */
        padding: 1rem;
        gap: 1.5rem;
        /* Espacio entre título y content-area */
        overflow: visible;
    }

    /* Estilos del título en Responsive (restaurados) */
    .page-title {
        font-size: 2rem;
        margin-bottom: 1rem;
        padding-bottom: 8px;
        border-bottom-width: 2px;
        text-align: center;
    }

    .page-title span {
        margin-top: 3px;
    }


    .content-area {
        flex-direction: column;
        /* Apila table-and-stats y map */
        gap: 1.5rem;
        /* Espacio entre ellos */
        overflow: visible;
        flex: 1 1 auto;
        /* Permite que crezca/encoga en columna */
    }

    .table-and-stats-container {
        width: 100%;
        flex: 1 1 auto;
        min-width: auto;
        gap: 1.5rem;
        overflow-y: visible;
    }

    .map-container {
        width: 100%;
        flex: 1 1 auto;
        /* min-height: 300px; */
    }

    .map-section {
        height: auto;
        min-height: auto;
    }

    #dynamic-map-container {
        height: 300px;
        min-height: auto;
    }


    .stats-container {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
        justify-content: center;
    }

    .stat-card {
        width: 100%;
        max-width: none;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: 1rem 1.5rem;
    }

    .stat-card h4 {
        font-size: 1rem;
    }

    .stat-card p {
        font-size: 1.5em;
    }

    .proveedores-table-section {
        gap: 1rem;
    }


    .proveedores-table th,
    .proveedores-table td {
        text-align: left;
        /* Asegura alineación left incluso en móvil */
        padding: 8px 10px;
        font-size: 0.85em;
    }

    .pagination-container {
        flex-wrap: wrap;
        gap: 10px;
    }

    .pagination-button {
        padding: 6px 12px;
        font-size: 0.9em;
    }

    .pagination-info {
        font-size: 0.9em;
    }
}

/* Ajustes adicionales para pantallas aún más pequeñas */
@media (max-width: 480px) {
    .sidebar {
        padding: 0.8rem;
        gap: 0.8rem;
        flex-direction: column;
        /* Apila elementos del sidebar en pantallas muy pequeñas */
        align-items: center;
    }

    .sidebar-filters {
        flex-direction: row !important;
        /* Layout de fila en móvil */
        justify-content: space-between;
        /* Distribuye los elementos horizontalmente */
        flex-wrap: wrap;
        /* Permite que los elementos se envuelvan si no caben */
        align-items: center;
        /* Alinea verticalmente en el centro */
    }

    /* Estilos del logo en sidebar en pantallas muy pequeñas */
    .sidebar-logo {
        max-width: 80%;
        /* Vuelve a permitir que sea un poco más grande */
        margin-bottom: 0.8rem;
        /* Espacio debajo del logo apilado */
        margin-right: 0;
        /* Elimina el margen a la derecha */
    }

    .sidebar h2 {
        margin-bottom: 0.8rem;
        text-align: center;
        /* Centra el título apilado */
    }

    .sidebar>div {
        width: 100%;
        /* Ocupa todo el ancho disponible */
        min-width: auto;
        /* Elimina el mínimo en pantallas muy pequeñas */
    }


    .main-container {
        padding: 0.8rem;
        gap: 1rem;
    }

    .page-title {
        font-size: 1.6rem;
        margin-bottom: 0.8rem;
        padding-bottom: 6px;
    }

    .page-title span {
        margin-top: 2px;
    }

    .content-area {
        gap: 1rem;
    }

    .main-container h3 {
        margin-bottom: 0.8rem;
    }

    .stat-card {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 0.3rem;
        padding: 1rem;
    }

    .stat-card h4 {
        font-size: 0.9rem;
    }

    .stat-card p {
        font-size: 1.3em;
    }

    .proveedores-table th,
    .proveedores-table td {
        padding: 6px 8px;
        font-size: 0.8em;
    }

    #dynamic-map-container {
        height: 250px;
    }
}

/* --- New Styles for Download Button --- */
.table-actions {
    display: flex;
    justify-content: flex-end;
    /* Align to the right */
    margin-bottom: 1rem;
    /* Space between button and table/pagination */
    padding-right: 10px;
    /* Optional: Align with table padding */
}

.download-button {
    padding: 10px 20px;
    background-color: #FFC20E;
    /* Accent color */
    color: #1F417F;
    /* Main text color */
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.download-button:hover {
    background-color: #e0a900;
    /* Darker accent on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.download-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Adjustments for smaller screens */
@media (max-width: 1024px) {
    .table-actions {
        justify-content: center;
        /* Center button on smaller screens */
        padding-right: 0;
    }
}

.custom-select-container {
    position: relative;
    font-family: sans-serif;
}

.custom-select-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-sizing: border-box;
}

.custom-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #aaa;
    background: #ffffff;
    color: #1F417F;
    border-top: none;
    z-index: 1000;
    display: none;
    border-radius: 8px;
}

.custom-select-dropdown.open-up {
    top: auto;
    bottom: 100%;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

.custom-select-dropdown.visible {
    display: block;
}

.custom-select-option {
    padding: 8px;
    cursor: pointer;
}

.custom-select-option:hover {
    background-color: #f0f0f0;
}

.custom-select-option.hidden {
    display: none;
}