/**
 * 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 */
    /* Sin blur — eliminado para mejorar rendimiento en móviles */
    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; }
    }
    /* En desktop el overlay nunca debe aparecer */
}

    /* Í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; }
}