/**
 * mobile.css — Optimizaciones responsivas para dispositivos móviles y tablets
 * Cubre: layout AdminLTE, navbar, sidebar, tablas, formularios, modales, chat flotante
 * Breakpoints: xs <576px | sm 576-767px | md 768-991px | lg 992-1199px
 */

/* ══════════════════════════════════════════════════════════════════════════
   1. VARIABLES Y RESET GLOBAL
══════════════════════════════════════════════════════════════════════════ */
:root {
    --touch-min: 44px;          /* Tamaño mínimo WCAG para área táctil */
    --chat-width-mobile: min(300px, calc(100vw - 32px));
    --sidebar-transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth scroll en toda la app */
html { scroll-behavior: smooth; }

/* Evitar zoom al enfocar inputs en iOS */
@media (max-width: 767.98px) {
    input, select, textarea, button {
        font-size: 16px !important; /* iOS no hace zoom si font-size >= 16px */
    }
    /* Excepciones donde es aceptable el tamaño reducido */
    .badge, .small, small, .form-text, caption,
    .table th, .table td,
    .nav-link p, .sidebar-menu .nav-link p {
        font-size: inherit !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   2. SAFE AREA / NOTCH (iPhones, Android con barra de navegación)
══════════════════════════════════════════════════════════════════════════ */
body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}
.app-footer {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
}
#chat-container {
    bottom: calc(20px + env(safe-area-inset-bottom));
    right: calc(20px + env(safe-area-inset-right));
}

/* ══════════════════════════════════════════════════════════════════════════
   3. NAVBAR — barra superior
══════════════════════════════════════════════════════════════════════════ */
/* Asegurar que el toggle de sidebar siempre sea fácil de tocar */
.app-header .nav-link {
    min-width: var(--touch-min);
    min-height: var(--touch-min);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.6rem !important;
}

@media (max-width: 575.98px) {
    /* Ocultar toggles de pantalla completa y modo lectura en móviles pequeños para ahorrar espacio */
    .app-header [data-lte-toggle="fullscreen"],
    .app-header #reading-mode-toggle {
        display: none !important;
    }
    /* Reducir padding del navbar en xs */
    .app-header .container-fluid {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    /* Banner de campaña suspendida: fuente más pequeña */
    .alert.rounded-0 .small { font-size: 0.72rem !important; }
}

@media (max-width: 767.98px) {
    /* Menú de usuario: icono sin nombre en móvil ya existe (d-none d-md-inline) — refuerzo */
    .app-header .user-image {
        width: 32px !important;
        height: 32px !important;
    }
    /* Dropdown de notificaciones: ancho full en móvil */
    .app-header .dropdown-menu-lg {
        width: 94vw !important;
        max-width: 320px;
        right: 0 !important;
        left: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   4. SIDEBAR — menú lateral
   - Desktop (≥992px): el CSS en header.php fuerza sidebar siempre visible.
   - Móvil/tablet (<992px): AdminLTE controla apertura/cierre con clases.
   Aquí solo mejoramos UX táctil.
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    /* Sin transición en móvil — apertura instantánea */
    .app-sidebar {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Overlay semitransparente detrás del sidebar cuando está abierto */
    body.sidebar-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 1029;
        animation: fadeInOverlay 0.15s ease forwards;
    }
    @keyframes fadeInOverlay {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* Ítems del menú: área táctil amplia */
    .nav-sidebar .nav-link {
        min-height: var(--touch-min) !important;
        display: flex !important;
        align-items: center;
        padding: 0.55rem 1rem !important;
    }
    .nav-sidebar .nav-treeview .nav-link {
        min-height: 40px !important;
        padding: 0.4rem 1rem 0.4rem 2.2rem !important;
    }
    /* Icono del nav ligeramente más grande para touch */
    .nav-sidebar .nav-icon {
        font-size: 1.05rem !important;
        min-width: 1.5rem;
    }

    /* Dropdown de campaña dentro del sidebar */
    .sidebar-wrapper .dropdown-menu {
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
    }
    /* User panel compacto */
    .sidebar-wrapper .user-panel {
        padding: 0.5rem 0.75rem !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   5. CONTENIDO PRINCIPAL
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Reducir padding de la sección de contenido */
    .app-content { padding: 0.5rem !important; }
    .app-content-header { padding: 0.6rem 0.75rem !important; }
    .app-content-header h3 { font-size: 1.15rem !important; }
    .container-fluid { padding-left: 0.5rem; padding-right: 0.5rem; }

    /* Cards más compactas */
    .card-header { padding: 0.6rem 0.75rem !important; }
    .card-body    { padding: 0.75rem !important; }
    .card-title   { font-size: 0.95rem !important; margin-bottom: 0 !important; }

    /* Breadcrumb: ocultar en móvil */
    .breadcrumb { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   6. SMALL-BOXES (widgets KPI del dashboard)
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    .small-box { min-height: 80px; }
    .small-box h3 { font-size: 1.45rem !important; margin-bottom: 0.1rem !important; }
    .small-box p  { font-size: 0.78rem !important; margin-bottom: 0 !important; }
    .small-box-icon {
        font-size: 3rem !important;
        bottom: 8px !important;
        right: 8px !important;
    }
    /* Más espacio entre los 4 widgets en xs */
    .small-box .inner { padding: 0.6rem 0.8rem !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   7. TABLAS RESPONSIVAS — column hiding por breakpoint
══════════════════════════════════════════════════════════════════════════ */
/* Clases de utilidad para ocultar columnas en tablas según breakpoint.
   Úsalas en <th> y los <td> correspondientes. */

/* Ocultar en xs (<576px) */
@media (max-width: 575.98px) {
    .col-hide-xs { display: none !important; }
}
/* Ocultar en sm (<768px) */
@media (max-width: 767.98px) {
    .col-hide-sm { display: none !important; }
}
/* Ocultar en md (<992px) */
@media (max-width: 991.98px) {
    .col-hide-md { display: none !important; }
}

/* Tabla base: texto más pequeño y celdas compactas en móvil */
@media (max-width: 767.98px) {
    .table-responsive table {
        min-width: 0 !important; /* permite que se comprima antes del scroll */
    }
    .table th, .table td {
        font-size: 0.78rem !important;
        padding: 0.35rem 0.4rem !important;
        vertical-align: middle;
    }
    /* Badges dentro de tablas */
    .table .badge { font-size: 0.68rem !important; }
    /* Botones de acción en tablas */
    .table .btn-sm {
        padding: 0.2rem 0.35rem !important;
        font-size: 0.75rem !important;
        min-width: 30px;
        min-height: 30px;
    }
    .table .d-flex.gap-1 { gap: 3px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   8. FORMULARIOS — inputs, selects, labels
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Inputs estándar con altura táctil mínima */
    .form-control, .form-select {
        min-height: var(--touch-min);
        padding: 0.45rem 0.75rem !important;
    }
    .form-control-sm, .form-select-sm {
        min-height: 36px !important;
        padding: 0.3rem 0.5rem !important;
    }
    .form-label { font-size: 0.82rem !important; margin-bottom: 0.2rem !important; }

    /* Grupos de inputs */
    .input-group .btn { min-height: 36px !important; }

    /* Botones full-width en formularios dentro de cards */
    .card-body .btn.w-100,
    .modal-footer .btn { min-height: var(--touch-min); }
}

/* ══════════════════════════════════════════════════════════════════════════
   9. MODALES — adaptación móvil
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Todos los modales: ancho casi completo con márgenes pequeños */
    .modal-dialog {
        margin: 0.5rem auto !important;
        max-width: calc(100vw - 1rem) !important;
    }
    /* Modales xl/lg/md → todos tratan como full en móvil */
    .modal-xl, .modal-lg {
        max-width: calc(100vw - 1rem) !important;
    }
    /* Modal pegado al fondo (tipo sheet) para acciones rápidas */
    .modal-dialog.modal-bottom {
        margin: 0 !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100vw !important;
    }
    .modal-dialog.modal-bottom .modal-content {
        border-radius: 1rem 1rem 0 0 !important;
    }
    .modal-header { padding: 0.75rem 1rem !important; }
    .modal-body   { padding: 0.75rem 1rem !important; overflow-y: auto; max-height: 75vh; }
    .modal-footer { padding: 0.5rem 1rem !important; flex-wrap: wrap; gap: 0.4rem; }
    .modal-footer .btn { flex: 1 1 auto; min-height: var(--touch-min); }
}

/* ══════════════════════════════════════════════════════════════════════════
   10. CHAT FLOTANTE
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    #chat-container {
        width: var(--chat-width-mobile) !important;
        right: 16px !important;
        bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
    #chat-box {
        width: 100% !important;
        height: 65vh !important;
        max-height: 420px;
    }
    #chat-toggle-btn {
        width: 52px !important;
        height: 52px !important;
        font-size: 1.25rem !important;
    }
    #chat-messages { font-size: 0.82rem !important; }
    #chat-input { font-size: 0.9rem !important; }
}

/* En tablet: chat ligeramente más pequeño */
@media (min-width: 576px) and (max-width: 767.98px) {
    #chat-container { width: 280px !important; }
    #chat-box { height: 380px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   11. LOGIN PAGE
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Caja de login centrada verticalmente y sin desbordar */
    body.login-page {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100svh;          /* svh = small viewport height (sin barras de navegador) */
        padding: 1rem env(safe-area-inset-right) 1rem env(safe-area-inset-left);
    }
    .login-box {
        width: 100% !important;
        max-width: 380px;
        margin: 0 auto !important;
    }
    /* Logo: tamaño razonable en móvil */
    .login-logo img {
        max-height: 100px !important;
        width: auto;
    }
    .login-logo b {
        font-size: 2rem !important;
    }
    /* Card de formulario */
    .login-card-body {
        padding: 1.25rem !important;
    }
    /* Inputs con área táctil adecuada */
    .login-box .input-group .form-control,
    .login-box .input-group .input-group-text {
        height: var(--touch-min) !important;
        font-size: 1rem !important;
    }
    .login-box .btn {
        height: var(--touch-min);
        font-size: 1rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   12. BANNERS Y PUBLICIDAD
══════════════════════════════════════════════════════════════════════════ */
.banner-img {
    height: 280px;
    object-fit: cover;
    width: 100%;
}
@media (max-width: 991.98px) { .banner-img { height: 200px; } }
@media (max-width: 767.98px) { .banner-img { height: 150px; } }
@media (max-width: 575.98px) { .banner-img { height: 120px; } }

/* ══════════════════════════════════════════════════════════════════════════
   13. TARJETAS DE HERRAMIENTAS / ACCESOS RÁPIDOS
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    /* Grid de herramientas: 2 columnas en móvil pequeño */
    .row.row-cols-md-4 > *,
    .row.row-cols-lg-4 > * {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   14. AGENDA / CALENDARIO FULLCALENDAR
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* FullCalendar: ocultar columna de semana, reducir fuente */
    .fc .fc-toolbar { flex-wrap: wrap; gap: 0.4rem; }
    .fc .fc-toolbar-title { font-size: 1rem !important; }
    .fc .fc-button { padding: 0.3rem 0.5rem !important; font-size: 0.8rem !important; }
    .fc .fc-daygrid-day-number { font-size: 0.75rem; }
    .fc .fc-event { font-size: 0.7rem !important; }
    /* Cambiar a vista de lista en móvil (FullCalendar renderiza automáticamente si se configura) */
    .fc-daygrid-day-frame { min-height: 40px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   15. BOTONES DE ACCIÓN FLOTANTES (FAB)
      Elementos con posición fija que pueden solapar el chat
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Subir a ruta / Nueva venta — asegurar que no tape el chat */
    .btn-fab-fixed {
        bottom: calc(90px + env(safe-area-inset-bottom)) !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   16. GRÁFICOS APEXCHARTS
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Reducir altura mínima de contenedores de gráficos */
    [id$="-chart"], [id*="chart-"] {
        min-height: 220px !important;
    }
    /* Leyenda debajo del gráfico en móvil */
    .apexcharts-legend {
        justify-content: center !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   17. GESTIÓN — tabla Seguimiento de Clientes y filtros
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Filtros del card-header: wrap a columna */
    #form_seg_fechas {
        width: 100%;
        justify-content: flex-start;
    }
    #form_seg_fechas input[type="date"] {
        flex: 1 1 120px;
        max-width: 100% !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   18. ASIGNACIÓN DE DATA — tabla de bases de datos
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Los totales de asignación en columnas → apilados */
    .asign-stats-row > [class*="col-md"] {
        margin-bottom: 0.5rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   19. CAPACITACIÓN — panel de archivos
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Columna de gestión (col-md-4) apilada encima del listado */
    .capacitacion-upload-col,
    .capacitacion-list-col {
        width: 100% !important;
        max-width: 100% !important;
    }
    /* iFrame de previsualización: altura reducida */
    iframe[style*="80vh"] {
        height: 55vh !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   20. DROPDOWNS — posicionamiento en pantallas pequeñas
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    /* Evitar que los dropdowns salgan por la derecha */
    .dropdown-menu-end {
        right: 0 !important;
        left: auto !important;
    }
    /* Algunos dropdowns grandes: ancho de pantalla completo */
    .dropdown-menu.dropdown-menu-lg {
        width: calc(100vw - 2rem) !important;
        max-height: 70vh;
        overflow-y: auto;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   21. ESTATUS.PHP — tabla de estatus de clientes
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Input de búsqueda ancho fijo → 100% en móvil */
    .estatus-search-group {
        width: 100% !important;
    }
    /* Columna "Cambiar Estatus" con select: reducir */
    .estatus-select-col { min-width: 130px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   22. PERFIL DE USUARIO
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
    /* Avatar de perfil: más pequeño */
    .profile-photo { max-width: 120px !important; }
    /* Tabs de perfil: scroll horizontal */
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
    .nav-tabs .nav-item { flex-shrink: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   23. LOADING OVERLAY
══════════════════════════════════════════════════════════════════════════ */
#loading-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: white;
}

/* ══════════════════════════════════════════════════════════════════════════
   24. TABLA DE SEGUIMIENTO — column hiding específico
   Columnas ocultas en móvil: Documento, Vendedor, Pago Nómina (reducir a las esenciales)
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    /* Ocultar columnas secundarias en xs */
    #tabla_seguimiento_body td:nth-child(4),  /* Documento */
    #tabla_seguimiento_body td:nth-child(7),  /* Vendedor */
    #tabla_seguimiento_body td:nth-child(9),  /* Pago Nómina */
    .table-seg-head th:nth-child(4),
    .table-seg-head th:nth-child(7),
    .table-seg-head th:nth-child(9) {
        display: none !important;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    /* En sm ocultar solo Pago Nómina y Vendedor */
    #tabla_seguimiento_body td:nth-child(7),
    #tabla_seguimiento_body td:nth-child(9),
    .table-seg-head th:nth-child(7),
    .table-seg-head th:nth-child(9) {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   25. TABLET (768px – 991px) — ajustes intermedios
══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991.98px) {
    .app-content { padding: 0.75rem !important; }
    .container-fluid { padding-left: 0.75rem; padding-right: 0.75rem; }
    .small-box h3 { font-size: 1.6rem !important; }
    .card-header { padding: 0.65rem 1rem !important; }
    /* Tabla: texto ligeramente reducido */
    .table th, .table td { font-size: 0.82rem !important; padding: 0.4rem 0.5rem !important; }
    /* Modal grande → 90% del viewport */
    .modal-xl { max-width: 92vw !important; }
    .modal-lg { max-width: 85vw !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   26. PRINT — por si se imprime desde móvil
══════════════════════════════════════════════════════════════════════════ */
@media print {
    .app-sidebar, .app-header, #chat-container, #loading-overlay,
    .no-print { display: none !important; }
    .app-main { margin-left: 0 !important; }
    .app-content { padding: 0 !important; }
    .table th, .table td { font-size: 0.75rem !important; padding: 0.2rem !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   27. MODAL GESTIÓN UNIFICADA — panel lateral adaptativo
══════════════════════════════════════════════════════════════════════════ */

/* En móvil (<768px): panel de clientes se convierte en banda horizontal superior */
@media (max-width: 767.98px) {
    .gu-modal-body-flex {
        flex-direction: column !important;
        overflow: auto !important;
    }
    #gu-panel-clientes {
        min-width: 100% !important;
        max-width: 100% !important;
        max-height: 180px !important;
        border-right: none !important;
        border-bottom: 1px solid #dee2e6 !important;
        flex-shrink: 0 !important;
    }
    #gu_lista {
        max-height: 130px !important;
    }
    #gu-search-panel {
        position: relative !important;
    }
    /* Área de contenido: espacio mínimo garantizado */
    .gu-modal-body-flex > .flex-grow-1 {
        overflow: auto;
        min-height: 280px;
    }
    /* Tabs más compactas en móvil */
    .gu-tab {
        padding: 5px 8px !important;
        font-size: .75rem !important;
    }
    .gu-tab i {
        display: none !important; /* ocultar íconos en tabs para ganar espacio */
    }
}

/* En tablet (768px–991px): panel más estrecho */
@media (min-width: 768px) and (max-width: 991.98px) {
    #gu-panel-clientes {
        min-width: 190px !important;
        max-width: 210px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   28. CARD-TOOLS — buscadores y selects en cabeceras de tarjeta
       Previene desbordamiento en pantallas pequeñas
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .card-tools {
        width: 100%;
        margin-top: 0.5rem;
    }
    .card-header {
        flex-direction: column;
        align-items: flex-start !important;
    }
    .card-header .card-tools .input-group,
    .card-header .card-tools select,
    .card-header .card-tools input {
        max-width: 100% !important;
        width: 100% !important;
    }
    /* Barra de filtros de llamadas clasificadas */
    .card-tools form {
        flex-direction: column;
        align-items: stretch !important;
        width: 100%;
        gap: 0.4rem !important;
    }
    .card-tools form > div { width: 100% !important; }
    .card-tools form input,
    .card-tools form select { width: 100% !important; max-width: 100% !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   29. GRÁFICOS ApexCharts — altura adaptativa en móvil
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    /* Reducir altura mínima de gráficos en XS para evitar 1200px de scroll */
    [style*="min-height: 300px"] {
        min-height: 220px !important;
    }
    /* Gráfico radial de meta más compacto */
    #chart-meta-radial,
    #chart-numeros-base,
    #chart-estatus-clientes,
    #chart-rendimiento-llamadas {
        max-height: 220px;
    }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    [style*="min-height: 300px"] {
        min-height: 250px !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   30. VISOR DE DOCUMENTOS — iframe PDF adaptativo
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    #pdf-preview-gestion {
        height: 65vh !important;
        min-height: 300px;
    }
    #video-preview-gestion {
        max-height: 55vw !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   31. MODAL NUEVA ORDEN DE VENTA — col-md sin fallback XS
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    /* Columnas que quedaban a col-md-6 sin fallback */
    #modalNuevoCliente .col-md-6,
    #modalNuevaOrdenAdmin .col-md-6 {
        width: 100% !important;
    }
    /* Resumen de impacto en modal admin */
    #modalNuevaOrdenAdmin .d-flex.flex-wrap.gap-2 {
        gap: 0.3rem !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   32. ACORDEÓN DE AGENTES (asignacion_data.php)
       Previene desbordamiento del nombre en pantallas pequeñas
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    .agente-accordion-btn .d-none.d-md-flex { display: none !important; }
    .agente-accordion-btn > div {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   33. PROGRESS OVERFLOW — corregir desbordamiento visual
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    /* Desactivar overflow:visible en progress para móvil
       (el efecto de chispas está solo en desktop vía JS/media query) */
    .progress {
        overflow: hidden !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   34. MODAL ASIGNAR BASE (asignacion_data.php) — lista de usuarios
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    #bvu_lista_usuarios {
        max-height: 200px !important;
    }
    #bcamp_agentes_lista .badge {
        font-size: .65rem !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   35. TABLA HISTORIAL EMAIL VALIDATION — columnas menos críticas en XS
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
    /* Ocultar columnas de menor prioridad en XS */
    #tablaVerificaciones th:nth-child(5),  /* Intentos */
    #tablaVerificaciones td:nth-child(5),
    #tablaVerificaciones th:nth-child(8),  /* IP Origen */
    #tablaVerificaciones td:nth-child(8) {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   35. PWA — Progressive Web App instalada como app nativa
══════════════════════════════════════════════════════════════════════════ */

/* ── Modo standalone: ocultar elementos del navegador, ajustar layout ── */
@media (display-mode: standalone) {
    /* Safe area para notch/Dynamic Island en iPhone */
    .app-wrapper {
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }
    /* Header fijo con safe-area */
    .app-header {
        padding-top: env(safe-area-inset-top);
        top: 0;
    }
    /* Ocultar scroll nativo de browser en sidebar — usar overlay scrollbars */
    .app-sidebar .sidebar-wrapper {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
}

/* ── Scroll táctil fluido en iOS/Android para contenedores scrollables ── */
@media (max-width: 991.98px) {
    /* momentum scroll en iOS — NO usar overscroll-behavior:contain
       porque eso atrapa el scroll y el usuario no puede bajar la página
       tocando sobre tablas, cards o listas */
    .app-main,
    .app-content,
    .table-responsive,
    .sidebar-wrapper,
    .modal-body {
        -webkit-overflow-scrolling: touch;
    }

    /* Touch targets mínimo 44×44px (WCAG 2.5.5) — solo en móvil */
    /* SOLO min-height/padding — NO cambiar display para no romper dropdowns */
    .btn {
        min-height: 44px;
        /* touch-action: manipulation SOLO en botones que no son scrollables */
        /* NO aplicar en contenedores o elementos de lista */
    }
    /* nav-link del sidebar: solo altura mínima */
    .nav-sidebar .nav-link {
        min-height: 44px;
    }
    /* dropdown-item: padding vertical táctil, mantener display:block de Bootstrap */
    .dropdown-item {
        min-height: 44px;
        padding-top: 0.625rem;
        padding-bottom: 0.625rem;
    }
    /* Paginación */
    .pagination .page-link {
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Fix iOS zoom en inputs: font-size mínimo 16px */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    select,
    textarea {
        font-size: max(16px, 1rem) !important;
    }

    /* Evitar selección de texto accidental al hacer tap en botones */
    .btn {
        -webkit-user-select: none;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
    }

    /* CRÍTICO: garantizar que tablas, cards, listas y dashboards
       transmitan el gesto de scroll vertical a la página padre.
       touch-action: pan-y permite scroll vertical y bloquea solo
       el zoom/pan horizontal innecesario. */
    .table-responsive,
    .card,
    .card-body,
    .list-group,
    .info-box,
    .small-box,
    .row,
    .app-content,
    .app-main {
        touch-action: pan-y;
    }
}

/* ── Banner de instalación PWA — no interferir con el layout ─────────── */
#pwa-install-banner {
    /* Mover sobre el toolbar del browser en móvil */
    bottom: calc(1rem + env(safe-area-inset-bottom));
}

#pwa-install-btn {
    border-radius: 2rem;
    padding: 0.6rem 1.25rem;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(230, 92, 0, 0.4) !important;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   36. CONTRASTE EN CARDS CON FONDO DE COLOR — fix sistémico para todos los temas
   Cuando una card tiene fondo oscuro/color via clase bg-* o style="background",
   el tema puede heredar colores de texto inadecuados.
   Estas reglas garantizan contraste blanco en cards coloreadas de Bootstrap.
══════════════════════════════════════════════════════════════════════════ */

/* Cards con clases bg-* de Bootstrap que incluyen texto */
.card.bg-success,
.card.bg-danger,
.card.bg-primary,
.card.bg-warning,
.card.bg-info,
.card.bg-dark,
.card.bg-secondary,
.card.text-bg-success,
.card.text-bg-danger,
.card.text-bg-primary,
.card.text-bg-dark {
    color: #fff !important;
    --bs-card-color: #fff;
    --bs-body-color: #fff;
}

.card.bg-success .card-body,
.card.bg-danger .card-body,
.card.bg-primary .card-body,
.card.bg-dark .card-body,
.card.bg-secondary .card-body,
.card.text-bg-success .card-body,
.card.text-bg-danger .card-body,
.card.text-bg-primary .card-body,
.card.text-bg-dark .card-body {
    color: #fff !important;
    background-color: transparent !important;
}

/* info-box: garantizar contraste en el icono con fondo de color */
.info-box .info-box-icon {
    color: #fff !important;
}

/* small-box: el texto siempre blanco sobre fondo de color */
.small-box .inner h3,
.small-box .inner p {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.2);
}

/* Widgets/cards con text-white en cualquier tema oscuro o sepia */
[data-bs-theme="dark"]  .text-white,
[data-bs-theme="sepia"] .text-white {
    color: #fff !important;
}

/* Cualquier elemento con color inline explícito: respetar el inline style */
[style*="color:#fff"],
[style*="color: #fff"],
[style*="color:white"],
[style*="color: white"] {
    color: #fff !important;
}