/* ==================== RESPONSIVE GENERAL ==================== */
@media (max-width: 768px) {
    .content-wrapper {
        padding: 88px 10px 10px;
    }
    
    .table th, .table td {
        padding: 8px;
    }
}

/* ==================== CONTENEDORES GLOBALES (evitar overflow) ==================== */
@media (max-width: 767px) {
    .container,
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px;
        padding-right: 12px;
    }
    .row {
        margin-left: -8px;
        margin-right: -8px;
    }
    .row [class^="col-"],
    .row [class*=" col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }
}

/* ==================== CONTENT HEADER (título y breadcrumb) ==================== */
@media (max-width: 767px) {
    .content-header {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 10px 0 12px !important;
        margin: 0 0 15px !important;
        border-bottom: 1px solid #E5E7EB;
    }
    .content-header h1 {
        font-size: 1.25rem !important;
        margin: 0 !important;
        word-break: break-word;
        line-height: 1.3;
    }
    .content-header .breadcrumb {
        width: 100%;
        margin: 0 !important;
        padding: 4px 0 0 !important;
        font-size: 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
}

/* ==================== BOX / TARJETAS (todas las pantallas) ==================== */
@media (max-width: 767px) {
    .box,
    .info-box,
    .small-box {
        margin-bottom: 15px;
        border-radius: 12px;
        overflow: hidden;
    }
    .box-header,
    .box-title {
        font-size: 14px !important;
        padding: 10px 12px !important;
    }
    .box-body {
        padding: 12px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .box-footer {
        padding: 10px 12px !important;
    }
}

/* ==================== FOOTER ==================== */
@media (max-width: 767px) {
    .main-footer {
        padding: 10px 12px !important;
        font-size: 12px;
        text-align: center;
    }
    .main-footer .pull-right {
        float: none !important;
        display: block;
        margin-top: 6px;
    }
}

/* ==================== TOUCH DEVICES ==================== */
@media (hover: none) {
    .quick-menu-toggle, 
    .quick-menu-options a {
        padding: 15px;
        min-height: 48px;
    }
    
    .quick-menu-toggle {
        width: 55px;
        height: 55px;
    }
    
    .quick-menu-options a {
        font-size: 16px;
    }
    
    .quick-menu-options a:active {
        background-color: #E0E7FF !important;
        transform: scale(0.98);
    }
    
    .quick-menu-toggle:active {
        transform: rotate(90deg) scale(0.95);
    }
}

@media (pointer: coarse) {
    .quick-menu-toggle {
        width: 56px !important;
        height: 56px !important;
        padding: 16px !important;
    }
    
    .quick-menu-options a {
        padding: 16px 24px !important;
        min-height: 56px !important;
        font-size: 16px !important;
    }
    
    .quick-menu-toggle:active, 
    .quick-menu-toggle.active {
        transform: scale(0.95) rotate(90deg) !important;
        opacity: 0.9;
    }
    
    .quick-menu-options a:active,
    .quick-menu-options a.active {
        background-color: #E0E7FF !important;
        transform: scale(0.98) !important;
    }
    
    .quick-menu-options {
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    
    .quick-menu-options.show {
        transform: translateY(0);
        opacity: 1;
    }
    
    .quick-menu-options:not(.show) {
        transform: translateY(20px);
        opacity: 0;
        pointer-events: none;
    }
    
    .quick-menu-options.hiding {
        transform: translateY(20px);
        opacity: 0;
    }
    
    @supports (-webkit-touch-callout: none) {
        body {
            cursor: pointer;
        }
        
        .quick-menu-toggle {
            -webkit-tap-highlight-color: transparent;
        }
    }
}

/* ==================== PRINT MODE ==================== */
.print_section {
    display: none;
}

@media print {
    .quick-menu-toggle,
    .quick-menu-options,
    .scroll-to-top {
        display: none !important;
    }
    
    .print_section {
        display: inline !important;
    }
    
    .modal-xl {
        width: 100% !important;
    }
    
    ::-webkit-scrollbar {
        display: none !important;
    }
    
    #toast-container {
      display: none;
    }
}

/* ==================== MODAL ==================== */
.modal-xl {
    width: 90%;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =========================================================
   MÓVIL (iPhone / Android) – que todo funcione bien
   Safe area, touch targets, overflow, formularios, tablas.
========================================================= */

/* Safe area: notch iPhone X+ y barra de gestos Android */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-top: env(safe-area-inset-top);
    }
    .main-header {
        padding-left: env(safe-area-inset-left);
        padding-top: env(safe-area-inset-top);
    }
    .content-wrapper {
        padding-left: calc(10px + env(safe-area-inset-left));
        padding-right: calc(10px + env(safe-area-inset-right));
    }
    .main-footer {
        padding-bottom: env(safe-area-inset-bottom);
    }
    .quick-menu-toggle {
        bottom: calc(20px + env(safe-area-inset-bottom));
        right: calc(20px + env(safe-area-inset-right));
        left: auto;
    }
    .quick-menu-options {
        right: calc(20px + env(safe-area-inset-right));
        left: auto;
        bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 767px) {
    /* Evitar scroll horizontal en toda la página */
    html, body {
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .wrapper {
        overflow-x: hidden;
    }

    /* Contenido: padding y ancho útil */
    .content-wrapper {
        padding: calc(70px + env(safe-area-inset-top)) 12px 20px;
        margin-left: 0 !important;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }
    .content-wrapper .content,
    .content-wrapper .content-header {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }
    .content-wrapper .content {
        padding-bottom: 20px;
    }

    /* Header: altura fija y que no se corte */
    .main-header {
        min-height: 50px;
    }
    .main-header .navbar {
        min-height: 50px;
    }
    .main-header .logo {
        max-width: calc(100vw - 120px);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Sidebar abierto: overlay para cerrar al tocar fuera */
    body.sidebar-open {
        overflow: hidden;
    }
    .sidebar-open .content-wrapper::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.4);
        z-index: 1055;
        -webkit-tap-highlight-color: transparent;
    }

    /* Al abrir sidebar en móvil, esconder FABs para que no queden por encima del menú */
    body.sidebar-open .quick-menu-toggle,
    body.sidebar-open .quick-menu-options,
    body.sidebar-open .chat-widget,
    body.sidebar-open #wspChatBox {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.sidebar-open #quickMenuOverlay {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Botones y enlaces: área táctil mínima 44px (Apple HIG / Android) */
    .btn,
    .navbar .nav > li > a,
    .sidebar-toggle {
        min-height: 44px !important;
        min-width: 44px !important;
        padding: 10px 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .sidebar-menu a,
    .sidebar-menu .treeview > a {
        min-height: 44px !important;
        padding: 12px 14px !important;
    }
    .treeview-menu > li > a {
        min-height: 40px !important;
        padding: 10px 14px !important;
    }

    /* Tablas: scroll horizontal sin romper layout */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-left: -12px;
        margin-right: -12px;
        padding-left: 12px;
        padding-right: 12px;
    }
    .table {
        font-size: 12px;
    }
    .table th, .table td {
        padding: 8px 6px;
        white-space: nowrap;
    }

    /* Formularios: inputs a 16px para que iOS no haga zoom al enfocar */
    input.form-control,
    select.form-control,
    textarea.form-control {
        font-size: 16px !important;
        max-width: 100%;
    }
    .form-group {
        margin-bottom: 14px;
    }
    .row [class^="col-"],
    .row [class*=" col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Modales: casi pantalla completa en móvil + 100vh iOS */
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    .modal-xl .modal-dialog {
        width: calc(100% - 20px) !important;
        max-width: none;
    }
    /* Ver producto / modales de detalle: pantalla completa en móvil para que se vea en vertical */
    #view_product_modal .modal-dialog,
    #view_product_modal.modal .modal-dialog,
    .view_product_modal .modal-dialog,
    .product_modal .modal-dialog {
        width: calc(100% - 20px) !important;
        max-width: none !important;
        margin-left: 10px;
        margin-right: 10px;
    }
    #view_product_modal .modal-content,
    #view_product_modal.modal .modal-content,
    .view_product_modal .modal-content,
    .product_modal .modal-content {
        min-height: 70vh;
    }
    .modal-content {
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal-body {
        min-height: 0;
        overflow-y: auto;
    }
    .modal-header .close,
    .modal-footer .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Tabs: scroll horizontal si hay muchos */
    .nav-tabs-custom .nav-tabs {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .nav-tabs-custom .nav-tabs > li {
        flex-shrink: 0;
    }

    /* Botones de acción en tablas: no cortar y área táctil mínima */
    .table .btn,
    .dataTables_wrapper .btn {
        min-height: 40px;
        padding: 8px 12px;
    }
    .table-responsive .btn-group .btn {
        min-width: 36px;
    }

    /* DataTables: fila superior en móvil más compacta */
    .dataTables_wrapper .row:first-child {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
    }
    .dataTables_wrapper .dataTables_length label,
    .dataTables_wrapper .dataTables_filter label {
        font-size: 13px;
    }
    .dataTables_wrapper .dataTables_filter input {
        min-width: 120px;
    }

    /* Box / tarjetas: sin márgenes negativos que salgan de pantalla */
    .box, .info-box {
        margin-left: 0;
        margin-right: 0;
    }

    /* Admin skin aplica margin-top negativo en .content-custom para
       sobreponer tarjetas sobre un hero grande. En móvil rompe el inicio
       y deja contenido bajo el header fijo. */
    .content-wrapper .content-custom {
        margin-top: 0 !important;
    }

    /* Reducir tap highlight en iOS/Android */
    a, button, .btn, [role="button"] {
        -webkit-tap-highlight-color: rgba(109, 40, 217, 0.15);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* En tablet ocurre el mismo recorte por margin-top negativo heredado
       de vendor.css (.content-custom { margin-top: -13.125rem; }). */
    .content-wrapper .content-custom {
        margin-top: 0 !important;
    }
}

/* Altura útil en iOS (100vh incluye barra del navegador) */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 767px) {
        html {
            min-height: -webkit-fill-available;
        }
        body,
        .wrapper {
            min-height: -webkit-fill-available;
        }
        .content-wrapper {
            min-height: -webkit-fill-available;
        }
        .modal-content {
            max-height: min(calc(100vh - 20px), -webkit-fill-available);
        }
    }
}

/* ==================== SIDEBAR MÓVIL (touch y ancho) ==================== */
@media (max-width: 767px) {
    .main-sidebar {
        padding-bottom: env(safe-area-inset-bottom);
    }
    .sidebar-menu .treeview-menu > li > a,
    .sidebar-menu > li > a {
        -webkit-tap-highlight-color: rgba(109, 40, 217, 0.15);
    }
}

/* ==================== BOTONES Y GRUPOS EN MÓVIL ==================== */
@media (max-width: 767px) {
    .btn-group,
    .btn-group-vertical {
        flex-wrap: wrap;
        gap: 6px;
    }
    .btn-group .btn,
    .btn-group-vertical .btn {
        min-height: 44px;
        min-width: 44px;
    }
    .dropdown-menu {
        max-width: calc(100vw - 24px);
        left: 50% !important;
        transform: translateX(-50%);
    }
    .page-header .btn,
    .content-header .btn,
    .box-header .btn {
        min-height: 44px;
        padding: 10px 14px;
    }
}

/* ==================== PÁGINAS ESPECÍFICAS: listados y formularios ==================== */
@media (max-width: 767px) {
    .page-header {
        margin-bottom: 15px;
        flex-wrap: wrap;
        gap: 10px;
    }
    .page-header h1,
    .page-header .pull-right {
        margin: 0;
    }
    .page-header .pull-right {
        width: 100%;
    }
    .page-header .pull-right .btn {
        width: 100%;
        max-width: 100%;
    }
    /* Alerts y mensajes */
    .alert {
        padding: 12px 14px;
        font-size: 14px;
    }
    /* Paneles y wells */
    .panel,
    .well {
        margin-left: 0;
        margin-right: 0;
        padding: 12px;
    }
}

/* ==================== PANTALLAS MUY PEQUEÑAS (320px) ==================== */
@media (max-width: 360px) {
    .content-wrapper {
        padding: calc(70px + env(safe-area-inset-top)) 10px 16px;
    }
    .content-header h1 {
        font-size: 1.1rem !important;
    }
    .btn {
        padding: 8px 12px;
        font-size: 13px;
    }
    .main-header .logo {
        max-width: calc(100vw - 100px);
    }
}

/* ==================== FOOTER: botones táctiles ==================== */
@media (max-width: 767px) {
    .main-footer .btn-group .btn {
        min-height: 44px;
        min-width: 44px;
        padding: 10px 12px;
    }
}