/* ============================================================
   KUARAHY PDV · responsive.css
   Ajustes para MÓVIL y TABLET: formularios cómodos con el dedo,
   tablas que se desplazan en vez de romper el layout y modales a
   pantalla completa. NO cambia nada en escritorio (todo va dentro
   de @media). Se carga desde las vistas con ../../assets/css/responsive.css
   ============================================================ */

/* ---------- Notebook chica / tablet horizontal ---------- */
@media (max-width: 1100px) {
    .container, .wrap, .contenedor { max-width: 100% !important; }
    body { padding-left: 12px !important; padding-right: 12px !important; }
    .acciones, .acciones-top, .toolbar, .header, .topbar { flex-wrap: wrap !important; gap: 8px !important; }
}

/* ---------- Tablet y celular horizontal ---------- */
@media (max-width: 820px) {
    body { padding: 10px !important; }
    .header, .topbar, .toolbar { gap: 8px !important; }
    .header h1, .topbar h1 { font-size: 18px !important; }
    .toolbar input, .toolbar select { flex: 1 1 150px !important; min-width: 0 !important; }
    .btn, .toolbar .btn { min-height: 42px; }
    .kpis, .stats, .cards, .tarjetas { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important; }

    /* Tablas: se desplazan con el dedo (no rompen el ancho de la pantalla) */
    .card > table, .tabla-wrap table, table.datos { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* Modales: pantalla completa (formularios cómodos en el celular) */
    .modal { padding: 0 !important; align-items: flex-start !important; }
    .modal-content {
        width: 100% !important; max-width: 100% !important;
        height: 100dvh !important; max-height: 100dvh !important;
        border-radius: 0 !important; margin: 0 !important;
        overflow-y: auto !important; -webkit-overflow-scrolling: touch;
    }
    .modal-header { position: sticky; top: 0; background: #fff; z-index: 6; }
    .modal-footer, .modal .acciones { position: sticky; bottom: 0; background: #fff; padding-top: 8px; }

    /* Mapas: altura garantizada (si el CSS del mapa no carga, no queda un hilo gris) */
    #mapa, #mapa-nueva, #d_mapa, .mapa, .leaflet-container { min-height: 240px; width: 100% !important; }
}

/* ---------- Celular ---------- */
@media (max-width: 680px) {
    body { font-size: 15px !important; }

    /* Cualquier grilla de formulario pasa a una sola columna */
    [class*="-grid"]:not(.kpis):not(.cards):not(.tarjetas),
    [class*="grid-"]:not(.kpis):not(.cards):not(.tarjetas),
    .form-grid, .grid, .row, .form-row, .fila-form, .acc {
        grid-template-columns: 1fr !important;
    }
    .split, .dos-columnas, .columnas, .flex-row { flex-direction: column !important; }
    .split > *, .dos-columnas > *, .columnas > * { max-width: 100% !important; width: 100% !important; }

    /* Inputs a 16px = el navegador del celular NO hace zoom al escribir */
    input, select, textarea { font-size: 16px !important; }
    .toolbar input, .toolbar select, .form-group input, .form-group select, .form-group textarea,
    .card input, .card select, .card textarea, .modal-content input, .modal-content select, .modal-content textarea { width: 100% !important; }
    input[type=checkbox], input[type=radio] { width: auto !important; min-height: 20px; min-height: 20px; }
    label { display: block; margin-bottom: 4px; }
    .form-group { margin-bottom: 12px !important; }

    .btn, button, .btn-sm, a.btn { min-height: 44px; line-height: 1.2; }
    .btn-sm { min-height: 40px; }
    th, td { font-size: 13px !important; padding: 8px !important; }

    /* Barra inferior de la WebApp: que no tape contenido */
    body { padding-bottom: 76px !important; }
    h1 { font-size: 19px !important; } h2 { font-size: 17px !important; }
    .modal-content { padding: 14px !important; }
}

/* ---------- Impresión: sin los retoques de pantalla ---------- */
@media print {
    .toolbar, #barra, .acciones, .btn { display: none !important; }
}