/* ============================================================================
   Pathfinder — responsive (Fase 4). Aditivo: se carga DESPUÉS de style.css y
   solo aplica en pantallas pequeñas; no modifica el diseño de escritorio.
   NOTA: requiere validación visual en navegador (móvil/tablet).
   ============================================================================ */

/* Tablet y móvil */
@media (max-width: 900px) {
    /* La estructura principal (sidebar + cuerpo) pasa a apilarse */
    .contenedor-total { flex-direction: column; }
    .contenedor-cuerpo { width: 100%; }

    /* Las columnas de formularios/tarjetas se apilan */
    .contenedor-columnas { flex-direction: column; }
    .columna { width: 100%; }

    /* Los grupos de inputs de filtro se ajustan en varias líneas */
    .conjunto-inputs, .exclusor { flex-wrap: wrap; }

    /* La navegación superior puede envolver */
    .contenedor-nav ul, .iconos-top { flex-wrap: wrap; }

    /* Las tablas de DataTables scrollean horizontalmente en vez de desbordar */
    .dataTables_wrapper { overflow-x: auto; }
    table.dataTable { min-width: 720px; }
}

/* Móvil */
@media (max-width: 560px) {
    .contenedor-pagina { padding: 12px; }
    .tarjeta { padding: 12px; }

    /* Botones y campos a ancho completo para pulsar mejor */
    .botonsubmit, .fila-formulario input[type="submit"], #proceedToPayment {
        width: 100%;
    }
    .box { width: 100%; display: block; box-sizing: border-box; }

    /* Cabecera más compacta */
    .contenedor-top { flex-wrap: wrap; gap: 8px; }
    .contenedor-top .logo img { max-height: 40px; }

    /* El lightbox de créditos ocupa casi toda la pantalla */
    #lightbox-content { width: 92%; }
}