/* =========================================
   Responsive Design (Móviles y Tablets Pequeñas)
   ========================================= */

@media (max-width: 768px) {

    /* 1. Espaciados Base y Contenedores */
    body {
        padding: 12px;
        overflow-x: hidden; /* Previene el scroll horizontal global */
    }

    .dashboard-layout {
        gap: 20px;
        max-width: 100vw;
    }

    /* Solución crítica para evitar que el Grid explote el ancho de la pantalla (Grid Blowout) */
    .dashboard-layout > * {
        min-width: 0;
        width: 100%;
    }

    /* 2. Contenedores Glassmorphism (Tarjetas) */
    section[id^="modulo-"], 
    .panel-trazabilidad, 
    .panel-amortizacion, 
    .panel-escenarios, 
    .panel-comparacion, 
    .card-riesgo, 
    .card-decision, 
    .card-reporte {
        padding: 16px;
        margin-bottom: 20px;
        border-radius: 16px; /* Bordes un poco menos pronunciados en celular */
    }

    /* 3. Tipografía */
    section h2 {
        font-size: 1.4rem;
        margin-bottom: 16px;
    }

    h3 {
        font-size: 1.2rem;
    }

    /* 4. Formularios */
    .form-group {
        margin-bottom: 16px;
    }

    .form-group label {
        font-size: 0.9rem;
    }

    input, select, textarea {
        padding: 12px 16px;
        /* 16px previene el Auto-Zoom automático en iOS Safari al tocar un campo */
        font-size: 16px; 
    }

    /* 5. Botones */
    button {
        padding: 12px 20px;
        font-size: 1rem;
        width: 100%; /* Botones de ancho completo para facilitar toque con el pulgar */
        margin-bottom: 10px;
    }

    /* Excepción: Botón pequeño en la tabla de escenarios */
    .btn-accion-amortizacion {
        width: auto;
        padding: 8px 12px;
        font-size: 0.85rem;
        margin-bottom: 0;
    }

    /* Botón de cerrar modal */
    .btn-cerrar {
        width: auto;
        margin-bottom: 0;
        font-size: 1.8rem;
    }

    /* 6. Tablas */
    table {
        /* Reducimos el ancho forzado para que el scroll horizontal sea menor */
        min-width: 600px; 
    }

    th, td {
        padding: 12px 16px;
        font-size: 0.85rem;
    }

    th:first-child, td:first-child {
        padding-left: 16px;
    }

    th:last-child, td:last-child {
        padding-right: 16px;
    }

    /* 7. Modal y Popups */
    .popup-overlay {
        padding: 10px;
    }

    .popup-content {
        max-width: 100%; 
        max-height: 85vh; /* Evita choque con la barra del teclado o navegador inferior */
        border-radius: 16px;
    }

    .popup-header {
        padding: 16px;
    }

    .popup-header h3 {
        font-size: 1.2rem;
    }

    .popup-body {
        padding: 16px;
    }

    /* 8. Otros ajustes misceláneos */
    .trazabilidad-bloque {
        padding: 12px;
    }

    .trazabilidad-bloque h3 {
        font-size: 1rem;
    }

    .formula {
        font-size: 1rem;
        overflow-x: auto; /* Permite desplazamiento si la fórmula es muy larga */
    }

    /* Módulo de escenarios en grid */
    .lista-escenarios {
        grid-template-columns: 1fr; /* Una sola columna en móvil */
        gap: 16px;
        margin-top: 20px;
    }

    .tarjeta-escenario {
        padding: 16px;
    }

    /* Ajustes para el panel de decisión y reportes */
    .decision-recomendacion {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .decision-recomendacion strong {
        font-size: 1.1rem;
    }
}