/* ============================
   RESPONSIVE PARA CELULAR
   ============================ */

@media (max-width: 768px) {

    /* Contenedor global */
    .main {
        padding: 5px !important;
    }

    /* Filas horizontales → verticales en móvil */
    .fila {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Tarjetas / módulos ocupan todo el ancho en móvil */
    .tarjeta, .modulo {
        width: 100% !important;
        min-width: 100% !important;
        margin: 8px 0 !important;
        padding: 12px !important;
    }

    /* Tablas grandes con scroll horizontal */
    .tabla-scroll {
        overflow-x: auto;
        width: 100%;
    }

    .tabla-scroll table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Títulos de sección más pequeños */
    .titulo-seccion {
        font-size: 12px !important;
        letter-spacing: 1px !important;
        text-align: center !important;
    }
}