/* ==========================================================================
   AJUSTES RESPONSIVE REFORZADOS -  MVP
   ========================================================================== */

@media (max-width: 1024px) {
    /* 1. ROMPER LA REJILLA DE ESCRITORIO DEL CONTENEDOR */
    .app-container {
        grid-template-columns: 1fr !important; /* Pasamos de 2 columnas a 1 sola vertical */
        grid-template-rows: auto auto 1fr auto !important;
    }
    
    /* 2. RECOLOCAR EL MENÚ LATERAL */
    .app-sidebar, .sidebar {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        padding: 16px !important;
    }

    .sidebar-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 0 !important;
    }

    .sidebar-nav-item {
        margin-bottom: 0 !important;
        flex: 1 1 calc(50% - 8px); /* Hace que los botones del menú se pongan en parejas de dos por fila */
    }

    /* 3. RECOLOCAR EL CUERPO DE LA APLICACIÓN */
    .app-main, .main-content {
        grid-column: 1 !important;
        grid-row: 3 !important;
        padding: 16px !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }
}

@media (max-width: 768px) {
    /* 4. ARREGLAR LA CABECERA DEL PLANIFICADOR (Títulos y Selectores alineados) */
    .page-header-content {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        display: flex !important;
    }

    .page-actions {
        flex-direction: column !important;
        width: 100% !important;
        display: flex !important;
        gap: 12px !important;
        align-items: stretch !important;
    }

    /* Forzar que el formulario del botón "Duplicar" ocupe todo el ancho */
    .page-actions form {
        flex-direction: column !important;
        display: flex !important;
        gap: 10px !important;
        width: 100% !important;
        align-items: stretch !important;
        margin: 0 !important;
    }

    /* 5. ELIMINAR ANCHOS FIJOS EN FORMULARIOS Y BOTONES */
    .page-actions select,
    .page-actions form select[name="id"],
    .page-actions button,
    .page-actions .btn,
    .btn {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        height: 46px !important; /* Altura óptima para pulsaciones táctiles */
        text-align: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* 6. REDISEÑAR LAS REJILLAS DE TARJETAS (Grids de Equipos, Estadísticas o Reportes) */
    .stats-grid, 
    .summary-grid, 
    .reports-grid, 
    .content-grid,
    .actions-grid {
        grid-template-columns: 1fr !important; /* Una sola tarjeta por fila hacia abajo */
        gap: 16px !important;
    }

    /* 7. ASIGNAR SCROLL LATERAL PARA LAS TABLAS DE ASISTENCIA Y PLANTILLAS */
    table, .table, .table-responsive {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        -webkit-overflow-scrolling: touch;
    }
    
    /* 8. ELIMINAR TEXTOS SEPARADORES U OCULTAR DETALLES NO VITALES */
    .user-info {
        display: none !important; /* Oculta el rol/nombre arriba a la derecha para ganar espacio en el móvil */
    }
    
    .page-title {
        font-size: 24px !important;
        text-align: center;
        width: 100%;
    }
}