/* =============================================================================
   FIX-SIDEBAR-SCROLL: Corrige doble SimpleBar en sidebar
   app.min.js (Velzon) inicializa SimpleBar en #scrollbar Y #navbar-nav.
   El wrapper interno (#navbar-nav) captura wheel events sin propagarlos.
   Fix: hacer overflow:visible en el wrapper interno para que wheel events
   lleguen al contenedor externo (#scrollbar) que es el scrollable real.
   ============================================================================= */
#navbar-nav > .simplebar-wrapper > .simplebar-mask > .simplebar-offset > .simplebar-content-wrapper {
    overflow: visible !important;
}

.btn-dt-success{
    color: #fff !important;
    background-color:#0ab39c !important;
    border-color: #0ab39c !important;
    font-weight: 400 !important;
    font-size: .8125rem !important;
}

.btn-dt-info {
    color: #fff !important;
    background-color: #299cdb !important;
    border-color: #299cdb !important;
    font-weight: 400 !important;
    font-size: .8125rem !important;
}

.btn-dt-warning {
    color: #fff !important;
    background-color: #f7b84b !important;
    border-color: #f7b84b !important;
    font-weight: 400 !important;
    font-size: .8125rem !important;
}

.dataTables_length{
    text-align: right;
}


.pac-container {
    z-index: 1061 !important;
}

.swal2-container {
    z-index: 3000;
}

.menu-title{
    font-size:13px !important;
    color: white !important;
}
.menu-title i{
    display: unset !important;
}

.menu-title-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.menu-title-toggle:hover {
    color: inherit;
    text-decoration: none;
}

.menu-title-toggle .section-arrow {
    transition: transform .15s ease;
    transform: rotate(180deg);
    /* derecha */
}

.menu-title-toggle.is-open .section-arrow {
    transform: rotate(0deg);
    /* abajo */
}

/* ============================================================
   CSP Phase 3 — Utility classes para reemplazar style= inline
   ============================================================ */
.w-150px   { width: 150px !important; }
.w-200px   { width: 200px !important; }
.w-250px   { width: 250px !important; }
.w-300px   { width: 300px !important; }
.w-10      { width: 10% !important; }
.w-12      { width: 12% !important; }
.w-15      { width: 15% !important; }
.w-18      { width: 18% !important; }
.w-20      { width: 20% !important; }
.w-30      { width: 30% !important; }
.w-40      { width: 40% !important; }
.w-60      { width: 60% !important; }
.w-80      { width: 80% !important; }
.h-275px   { height: 275px !important; }
.h-300px   { height: 300px !important; }
.h-350px   { height: 350px !important; }
.h-400px   { height: 400px !important; }
.bg-lightgray { background-color: lightgray !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-default { cursor: default !important; }
.min-w-80   { min-width: 80px !important; }
.min-w-100  { min-width: 100px !important; }
.min-w-120  { min-width: 120px !important; }
.min-w-150  { min-width: 150px !important; }
.min-w-200  { min-width: 200px !important; }
.max-w-400  { max-width: 400px !important; }
.ws-nowrap  { white-space: nowrap !important; }
.w-dynamic  { width: var(--csp-w) !important; }
.w-5        { width: 5% !important; }
.w-8        { width: 8% !important; }
.w-68       { width: 68% !important; }
.w-70       { width: 70% !important; }
.w-85       { width: 85% !important; }
.w-100px    { width: 100px !important; }
.w-120px    { width: 120px !important; }
.w-140px    { width: 140px !important; }
.h-6px      { height: 6px !important; }
.h-60px     { height: 60px !important; }
.h-120px    { height: 120px !important; }
.sq-20      { width: 20px !important; height: 20px !important; }
.min-w-32   { min-width: 32px !important; }
.min-w-90   { min-width: 90px !important; }
.min-h-88   { min-height: 88.5px !important; }
.ms-1px     { margin-left: 1px !important; }
.mt-18px    { margin-top: 18px !important; }
.fs-10px    { font-size: 10px !important; }
.fs-13px    { font-size: 13px !important; }
.text-temperature { color: #00bfff !important; }
/* Multi-property utilities */
.overflow-y-init  { overflow-y: initial !important; }
.modal-scroll-80  { height: 80vh; overflow-y: auto; }
.iframe-full      { width: 100%; height: 100vh; border: none; }
.mh-400-scroll    { max-height: 400px; overflow-y: auto; }
.mh-300-scroll    { max-height: 300px; overflow-y: auto; }
.mh-150-scroll    { max-height: 150px; overflow-y: auto; }
.h-40-divider     { height: 40px; border-bottom: 1px solid #ccc; margin-bottom: 6px; }
.w-70-no-border   { width: 70%; border: 0; }
.w-30-no-border   { width: 30%; border: 0; }
.w-10-no-border   { width: 10%; border: 0; }
.w-60-no-border   { width: 60%; border: 0; }
.w-30px    { width: 30px !important; }
.w-50px    { width: 50px !important; }
.w-80px    { width: 80px !important; }
.w-130px   { width: 130px !important; }
.w-180px   { width: 180px !important; }
.sq-64     { width: 64px !important; height: 64px !important; }
.sq-180    { width: 180px !important; height: 180px !important; }
.h-10px    { height: 10px !important; }
.h-20px    { height: 20px !important; }
.h-250px   { height: 250px !important; }
.h-269px   { height: 269px !important; }
.h-390px   { height: 390px !important; }
.min-w-35  { min-width: 35px !important; }
.min-w-60  { min-width: 60px !important; }
.min-w-180 { min-width: 180px !important; }
.fs-9px    { font-size: 9px !important; }
.fs-11px   { font-size: 11px !important; }
.fs-12px   { font-size: 12px !important; }
.fs-18px   { font-size: 18px !important; }
.fs-80-faded { font-size: 80px !important; opacity: 0.5; }
.clear-both  { clear: both !important; }
.cursor-grab { cursor: grab !important; }
.cursor-grab-sm { cursor: grab !important; font-size: 12px !important; }
.overflow-visible { overflow: visible !important; }
.mt-10px   { margin-top: 10px !important; }
.mt-10pct  { margin-top: 10% !important; }
.bg-pink   { background-color: #e91e63 !important; }
.text-italic-muted { color: #666 !important; font-style: italic !important; }
.bg-header-bold { background-color: #e9ecef !important; font-weight: bold !important; }
.bg-gray-w32    { background-color: lightgray !important; width: 32% !important; }
/* Gradientes semánticos */
.bg-grad-danger  { background: linear-gradient(135deg, #dc3545 0%, #e74c3c 100%) !important; }
.bg-grad-success { background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important; }
.bg-grad-warning { background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%) !important; }
.bg-grad-muted   { background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important; }
.bg-grad-green   { background: linear-gradient(135deg, #198754 0%, #28a745 100%) !important; }
.bg-grad-info    { background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important; }
/* Iframes */
.iframe-50vh { width: 100%; height: 50vh; border: none; }
.iframe-60vh { width: 100%; height: 60vh; border: 1px solid var(--vz-border-color); }
/* Flex específicos */
.flex-col-30  { flex: 0 0 30%; min-width: 150px; }
.flex-col-17  { flex: 0 0 17.5%; min-width: 120px; }
.flex-shrink-0-imp { flex-shrink: 0 !important; }
.fs-big-icon { font-size: 2rem !important; line-height: 1 !important; }
/* Bordes semánticos */
.border-bottom-gray { border-bottom: 1px solid #f3f3f3 !important; }
.border-bottom-dashed { border-bottom: 1px dashed #dee2e6 !important; }
.border-left-danger  { border-left-color: #dc3545 !important; }
.border-left-success { border-left-color: #28a745 !important; }
.border-left-info    { border-left-color: #17a2b8 !important; }
.letter-code   { letter-spacing: 0.5em; font-family: 'Courier New', monospace; }
.letter-code-sm { letter-spacing: 0.3em; font-family: 'Courier New', monospace; }
/* Anchos de tabla irregulares → use en tablas específicas */
.mh-219px { max-height: 219px; overflow-y: auto; }
.mh-350px { max-height: 350px; overflow-y: auto; }
.mh-365px { max-height: 365px; overflow-y: auto; }
.mh-405px { max-height: 405px; overflow-y: auto; }
.mh-410px { max-height: 410px; overflow-y: auto; }

/* =============================================================================
   R1-2: TABLE-RESPONSIVE GLOBAL
   Tablas HTML sin clase DataTable obtienen scroll horizontal contenido.
   No aplica a DataTables (se manejan con su propio plugin responsive).
   ============================================================================= */
.page-content table:not(.dataTable):not(.table-borderless) {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.page-content table:not(.dataTable):not(.table-borderless) thead,
.page-content table:not(.dataTable):not(.table-borderless) tbody,
.page-content table:not(.dataTable):not(.table-borderless) tr {
    display: table;
    width: 100%;
    table-layout: auto;
}

/* =============================================================================
   R1-3: MEDIA QUERIES MOBILE — Ajustes globales para < 768px
   ============================================================================= */
@media (max-width: 767.98px) {

    /* --- Modales: reducir padding, maxima anchura --- */
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }
    .modal-body {
        padding: 0.75rem !important;
    }
    .modal-header {
        padding: 0.75rem !important;
    }
    .modal-footer {
        padding: 0.5rem !important;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .modal-footer .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* --- Formularios: campos en columna unica --- */
    .row > [class*="col-md-"],
    .row > [class*="col-lg-"],
    .row > [class*="col-xl-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    /* Excepcion: columnas que explicitamente quieren ser parciales en mobile */
    .row > .col-6,
    .row > .col-4,
    .row > .col-3 {
        flex: unset !important;
        max-width: unset !important;
    }

    /* --- Botones: stack vertical en grupos --- */
    .btn-group:not(.btn-group-sm),
    .d-flex.gap-2,
    .card-footer .d-flex {
        flex-wrap: wrap !important;
    }
    .btn-group:not(.btn-group-sm) .btn {
        flex: 1 1 auto;
    }

    /* --- DataTables: ajustes de tamaño --- */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: left !important;
        margin-bottom: 0.5rem;
    }
    .dataTables_wrapper .dataTables_info {
        font-size: 0.75rem;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }

    /* --- Select2: full width en mobile --- */
    .select2-container {
        width: 100% !important;
    }

    /* --- Cards dashboard: stack vertical --- */
    .dashboard-card {
        margin-bottom: 0.75rem;
    }

    /* --- Clases CSP con ancho fijo: resetear a 100% en mobile --- */
    .w-150px, .w-200px, .w-250px, .w-300px, .w-180px {
        width: 100% !important;
    }

    /* --- Tabs: scroll horizontal si hay muchas --- */
    .nav-tabs, .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .nav-tabs .nav-item,
    .nav-pills .nav-item {
        flex-shrink: 0;
    }
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        white-space: nowrap;
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }

    /* --- Page header: compactar --- */
    .page-title-box {
        padding: 0.5rem 0 !important;
    }
    .page-title-box h4 {
        font-size: 1rem !important;
    }
    .breadcrumb {
        font-size: 0.75rem;
    }

    /* --- Topbar: compactar --- */
    .navbar-header {
        height: auto !important;
    }

    /* --- Flatpickr/Datepicker: full width --- */
    .flatpickr-input,
    input[type="date"] {
        width: 100% !important;
    }
}

/* =============================================================================
   R1-3b: MEDIA QUERIES TABLET — Ajustes para 768px-1024px
   ============================================================================= */
@media (min-width: 768px) and (max-width: 1024.98px) {

    /* Modales XL: reducir a 90vw en tablet */
    .modal-xl {
        max-width: 90vw !important;
    }

    /* Formularios: 2 columnas max en tablet */
    .row > .col-lg-3,
    .row > .col-xl-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* DataTables: font mas compacto */
    .dataTable td, .dataTable th {
        font-size: 0.8125rem;
        padding: 0.4rem 0.5rem !important;
    }
}

/* =============================================================================
   R1-4: MODAL-XL FULLSCREEN EN MOBILE
   Bootstrap 5 tiene modal-fullscreen-md-down pero no se usa en Tripia.
   Esta regla forza todos los modal-xl a fullscreen en < 768px.
   ============================================================================= */
@media (max-width: 767.98px) {
    .modal-xl .modal-dialog,
    .modal-dialog.modal-xl {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        margin: 0 !important;
    }
    .modal-xl .modal-content,
    .modal-dialog.modal-xl .modal-content {
        height: 100% !important;
        border-radius: 0 !important;
        border: none !important;
    }
    .modal-xl .modal-body,
    .modal-dialog.modal-xl .modal-body {
        overflow-y: auto;
        max-height: calc(100vh - 120px);
    }

    /* Lo mismo para modal-lg */
    .modal-lg .modal-dialog,
    .modal-dialog.modal-lg {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
    }
    .modal-lg .modal-content,
    .modal-dialog.modal-lg .modal-content {
        border-radius: 0 !important;
    }
}