/* --- AJUSTES PARA TABLETS Y TELÉFONOS (HASTA 1024px) --- */
@media (max-width: 1024px) {
    .header { 
        flex-direction: column !important; 
        height: auto !important;
        padding: 15px !important;
        text-align: center;
    }
    .header img { margin-bottom: 15px !important; }
}

/* --- AJUSTES ESPECÍFICOS PARA TELÉFONOS (HASTA 768px) --- */
@media (max-width: 768px) {
    /* 1. Arreglar la barra de controles (Filtros) */
    .controls { 
        flex-direction: column !important; 
        flex-wrap: wrap !important; /* Le gana a tu nowrap en línea */
        align-items: stretch !important; 
        height: auto !important;
        padding: 15px !important;
    }

    /* 2. Estirar los inputs */
    .controls input,
    .controls select,
    .controls button {
        width: 100% !important;
        margin-bottom: 10px !important;
        box-sizing: border-box;
    }

    /* 3. Tabla con scroll horizontal (Porque las filas nacen desde script.js) */
    #mainApp .table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important; 
        white-space: nowrap;
    }
}