/* ==========================================================
   mv-responsive.css — MultiVentas
   Capa responsive global. Se carga desde header.php, así que
   aplica a TODAS las pantallas internas sin tocar cada archivo.
   ========================================================== */

/* --- Base: nada se sale de la pantalla --- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
.container, .container-fluid { padding-left: 16px; padding-right: 16px; }
pre, code { white-space: pre-wrap; word-break: break-word; }
.card, .card-body { min-width: 0; }
td, th { word-break: normal; }

/* --- Tablas: siempre con scroll horizontal propio --- */
.table-responsive, .mv-table-wrap {
    width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-radius: 10px;
}
.mv-table-wrap > .table { margin-bottom: 0; }
.table td, .table th { vertical-align: middle; }
.table td .btn { white-space: nowrap; }

/* --- Mapas (Leaflet / mapa de clientes y zonas) --- */
#mapa, .mapa, .leaflet-container { width: 100% !important; max-width: 100%; }

/* --- Navbar interna: menú largo, colapsa en < 1200px --- */
@media (max-width: 1199.98px) {
    .mv-navbar .navbar-collapse {
        max-height: calc(100vh - 70px); overflow-y: auto;
        padding: 10px 0 14px;
    }
    .mv-navbar .navbar-nav { align-items: stretch !important; }
    .mv-navbar .mv-nav-link { display: block; padding: 10px 12px !important; }
    .mv-navbar .mv-nav-link.active { background: rgba(255,255,255,0.08); }
    .mv-navbar .mv-nav-link.active::after { display: none; }
    .mv-navbar .dropdown-menu { background: rgba(255,255,255,0.04); border: 0; box-shadow: none !important; }
    .mv-navbar .dropdown-menu .dropdown-item { color: rgba(255,255,255,0.8); }
    .mv-navbar .dropdown-menu .dropdown-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
    .mv-navbar .dropdown-menu .dropdown-item-text,
    .mv-navbar .dropdown-menu .text-muted { color: rgba(255,255,255,0.55) !important; }
    .mv-navbar .dropdown-menu .text-danger { color: #ff8a8a !important; }
    .mv-user-chip { display: inline-flex; margin-top: 8px; }
}

/* --- Tablet y celular --- */
@media (max-width: 991.98px) {
    h1, .h1 { font-size: 1.6rem; }
    h2, .h2 { font-size: 1.4rem; }
    h3, .h3 { font-size: 1.25rem; }
    .display-4, .display-5, .display-6 { font-size: 1.8rem; }
    .modal-dialog.modal-xl, .modal-dialog.modal-lg { max-width: 95vw; }
}

@media (max-width: 767.98px) {
    body { font-size: 15px; }
    .mb-4 { margin-bottom: 1rem !important; }
    .card-body { padding: 14px; }
    .card-header, .card-footer { padding: 10px 14px; }

    /* Encabezados de página con título + botones: se apilan */
    .d-flex.justify-content-between { flex-wrap: wrap; gap: 10px; }
    .d-flex.justify-content-between > .btn,
    .d-flex.justify-content-between > div > .btn { flex-shrink: 0; }

    /* Grupos de botones y acciones */
    .btn-group:not(.btn-group-sm) { flex-wrap: wrap; }
    .btn-toolbar { gap: 8px; }
    .mv-stack-mobile > .btn, .mv-actions > .btn { width: 100%; margin-bottom: 8px; }

    /* Formularios: inputs cómodos para el dedo, sin zoom en iOS */
    .form-control, .form-select, .input-group-text { font-size: 16px; min-height: 44px; }
    .form-control-sm, .form-select-sm { min-height: 36px; }
    .btn { min-height: 40px; }
    .btn-sm { min-height: 32px; }
    form .row > [class*="col-"] { margin-bottom: 4px; }
    .input-group { flex-wrap: nowrap; }

    /* Tablas compactas */
    .table { font-size: 13.5px; }
    .table td, .table th { padding: 8px 6px; white-space: nowrap; }
    .table td.text-wrap, .table td.mv-wrap { white-space: normal; }

    /* Badges y paginación */
    .pagination { flex-wrap: wrap; justify-content: center; }
    .nav-tabs, .nav-pills { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
    .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; }

    /* Modales a pantalla completa en celular */
    .modal-dialog { margin: 0; max-width: 100%; min-height: 100%; }
    .modal-content { border-radius: 0; min-height: 100vh; }

    /* Tarjetas KPI del dashboard */
    .card .fs-1, .card .display-6 { font-size: 1.6rem !important; }

    /* Dropdowns que no se corten */
    .dropdown-menu { max-width: calc(100vw - 24px); }
}

@media (max-width: 575.98px) {
    .container, .container-fluid { padding-left: 12px; padding-right: 12px; }
    .btn-lg { font-size: 1rem; padding: 10px 16px; }
    .table { font-size: 13px; }
}

/* --- POS (pos.php): carrito siempre accesible en celular --- */
@media (max-width: 991.98px) {
    .mv-pos-carrito, #carrito, .pos-carrito { position: static !important; max-height: none !important; }
    .mv-pos-total, #totalVenta { font-size: 1.6rem !important; }
}

/* --- Impresión (tickets, etiquetas): sin navbar --- */
@media print {
    .mv-navbar, .mv-support-banner, .no-print { display: none !important; }
    body { background: #fff !important; }
}