/* ==========================================================================
   CSS Adaptable (Responsive) para el Dashboard
   ========================================================================== */

/* --- 1. Para Tablets y pantallas medianas --- */
/* Se activa en pantallas de 991px de ancho o menos */
@media (max-width: 991px) {
    /*
     * Apila los campos de filtro que estaban uno al lado del otro.
     * Hacemos que cada columna de filtro ocupe el 100% del ancho.
     */
    .contenedor-filtros .colfiltro {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 20px; /* Añade espacio entre los filtros apilados */
    }

    .contenedor-filtros .colfiltro:last-child {
        margin-bottom: 0;
    }

    /*
     * Los indicadores/gráficos que ocupaban la mitad (col-md-6)
     * se apilarán gracias a las clases de Bootstrap (col-sm-12).
     * Solo nos aseguramos de que tengan un buen margen inferior.
     */
    .div-indicador {
        margin-bottom: 25px;
    }
}


/* --- 2. Para Dispositivos Móviles --- */
/* Se activa en pantallas de 767px de ancho o menos */
@media (max-width: 767px) {
    /* Ajusta el padding general del dashboard para maximizar el espacio */
    .componente-dashboard {
        padding: 15px;
    }
    form#form-filtros-dashboard-63 {
        margin: 0 20px;
    }
    /* Reduce el padding interno de las tarjetas y la caja de filtros */
    .div-indicador .content-indicador,
    #contenedor-filtrosdashboard631753306176628 {
        padding: 15px;
    }

    /* Reduce ligeramente el tamaño del título de los indicadores */
    .titulo-indicador {
        font-size: 1.05em;
        margin-bottom: 15px;
    }

    /*
     * Modifica el grupo de botones "Filtrar" y "Limpiar" para que
     * se apilen y ocupen todo el ancho, siendo más fáciles de presionar.
     */
    .botones-filtros {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .botones-filtros .btn {
        width: 100%;
        margin-bottom: 10px;
    }

    .botones-filtros .btn:last-child {
        margin-bottom: 0;
    }

    /*
     * Permite el desplazamiento horizontal en la tabla dinámica.
     * Esto es fundamental para tablas con muchos datos, evitando que
     * rompan el diseño de la página en pantallas pequeñas.
     */
    #tabla-dinamica-63.pivot {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch; /* Mejora la experiencia de scroll en iOS */
        padding-bottom: 10px; /* Espacio para la barra de scroll */
    }
}