/* ===========================================================
   responsive.css - Orcinoli Estragó & Asociados
   Ajustes para que el sistema se vea bien en celulares y
   tablets. Se carga después del <style> propio de cada
   página, así estas reglas ganan cuando el ancho de pantalla
   entra en el media query (misma especificidad, pero llega
   después en el documento).
   =========================================================== */

@media (max-width: 900px) {

    /* --- Estructura general: el body pasa de fila a columna --- */
    body {
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow: visible !important;
        overflow-x: hidden !important;
    }

    /* --- Contenido principal ocupa todo el ancho --- */
    .main-content {
        width: 100% !important;
        padding: 16px !important;
        overflow-y: visible !important;
        padding-top: 68px !important; /* deja lugar para la barra superior fija */
    }

    header h1 {
        font-size: 1.25rem !important;
    }

    /* --- Grillas de tarjetas / formularios: una sola columna --- */
    .form-grid,
    .cards-grid,
    .kpi-grid {
        grid-template-columns: 1fr !important;
    }

    .card-form,
    .card-section {
        padding: 16px !important;
    }

    /* --- Tablas: scroll horizontal en vez de romper el layout --- */
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }

    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* --- Modales: ocupan casi toda la pantalla --- */
    .modal-content {
        width: 92% !important;
        max-width: 92% !important;
        padding: 18px !important;
        max-height: 85vh !important;
    }

    /* --- Botones de acción que suelen quedar muy chicos --- */
    .btn-guardar,
    .btn-modal-guardar {
        width: 100% !important;
        text-align: center !important;
    }

    /* --- Buscadores full-width, sin desbordar --- */
    .search-input {
        font-size: 0.95rem !important;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 12px !important;
        padding-top: 64px !important;
    }

    header h1 {
        font-size: 1.1rem !important;
    }
}