/**
 * ============================================================================
 * MOBILE RESPONSIVE IMPROVEMENTS - CRM MACINDAR
 * ============================================================================
 *
 * Este archivo contiene todas las mejoras de UI/UX para dispositivos móviles
 * Organizado por módulos y siguiendo las guías de WCAG 2.5.5 para touch targets
 *
 * Breakpoints:
 * - 768px: Tablet/Mobile landscape
 * - 640px: Mobile portrait
 * - 480px: Small mobile
 *
 * Fecha creación: 2026-01-02
 * ============================================================================
 */

/* ============================================================================
   VARIABLES CSS - Facilita personalización futura
   ============================================================================ */
:root {
    /* Touch Target Sizes (WCAG 2.5.5 recomienda mínimo 44x44px) */
    --mobile-touch-target-min: 44px;
    --mobile-touch-target-comfortable: 48px;

    /* Spacing */
    --mobile-spacing-xs: 0.5rem;   /* 8px */
    --mobile-spacing-sm: 0.75rem;  /* 12px */
    --mobile-spacing-md: 1rem;     /* 16px */
    --mobile-spacing-lg: 1.5rem;   /* 24px */

    /* Button padding para alcanzar 44px altura */
    --mobile-btn-padding-y: 0.75rem;  /* 12px */
    --mobile-btn-padding-x: 1.25rem;  /* 20px */

    /* Gaps */
    --mobile-gap-buttons: 0.75rem;    /* Espacio entre botones */
    --mobile-gap-cards: 1rem;         /* Espacio entre cards */
}

/* ============================================================================
   PAQUETE A: QUICK WINS
   ============================================================================ */

/* ----------------------------------------------------------------------------
   PROPUESTA 9: SIDEBAR TÁCTIL MEJORADO
   Mejora el área táctil del menú lateral en móvil
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Aumentar padding de items del sidebar para mejor toque */
    .sidebar-nav a {
        padding: 1.125rem 1.25rem !important;  /* Aumentado de 0.875rem */
        font-size: 1rem;  /* Asegurar legibilidad */
        min-height: var(--mobile-touch-target-min);
        display: flex;
        align-items: center;
    }

    /* Iconos más grandes y separados del texto */
    .sidebar-nav i {
        font-size: 1.25rem !important;  /* Aumentado de 1.125rem */
        min-width: 28px;
        margin-right: 0.75rem;
    }

    /* Mayor espacio entre items */
    .sidebar-nav li {
        margin-bottom: 0.5rem;  /* Aumentado de 0.25rem */
    }

    /* Active state más visible en móvil */
    .sidebar-nav a.active {
        background-color: var(--primary-color, #0d6efd);
        color: white;
        border-radius: 0.375rem;
        margin: 0 0.5rem;
    }
}

/* ----------------------------------------------------------------------------
   PROPUESTA 3: BOTONES TÁCTILES MÍNIMO 44PX
   Aumenta el tamaño de botones pequeños para cumplir WCAG 2.5.5
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Botones pequeños ahora cumplen mínimo 44x44px */
    .btn-sm {
        padding: var(--mobile-btn-padding-y) var(--mobile-btn-padding-x) !important;
        min-height: var(--mobile-touch-target-min);
        min-width: var(--mobile-touch-target-min);
        font-size: 0.9rem;  /* Legible pero no demasiado grande */
    }

    /* Botones regulares también aumentan ligeramente */
    .btn {
        min-height: var(--mobile-touch-target-comfortable);
        padding: 0.625rem 1.5rem;
    }

    /* Mayor gap entre botones contiguos */
    .d-flex.gap-2,
    .btn-toolbar .gap-2 {
        gap: var(--mobile-gap-buttons) !important;
    }

    /* Específicamente para toolbars con múltiples botones */
    .btn-toolbar {
        gap: var(--mobile-gap-buttons);
    }

    /* Botones con solo iconos necesitan ser cuadrados */
    .btn > i.fas:only-child,
    .btn > i.far:only-child {
        margin: 0;
    }
}

/* ----------------------------------------------------------------------------
   PROPUESTA 5: STATS CARDS FULL-WIDTH EN MÓVIL
   Hace que las tarjetas de estadísticas sean legibles en móvil
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Cards de estadísticas: 2 columnas en móvil */
    .row .col-md-2 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    /* Asegurar spacing adecuado */
    .row .col-md-2,
    .row .col-md-3 {
        margin-bottom: var(--mobile-spacing-md);
    }

    /* Cards de stats más compactos pero legibles */
    .card .card-body.p-2 {
        padding: 0.75rem !important;
    }

    /* Títulos de stats cards */
    .card .card-body h6.card-title {
        font-size: 0.85rem;
        margin-bottom: 0.5rem;
    }

    /* Números de estadísticas más prominentes */
    .card .card-body h3,
    .card .card-body h2 {
        font-size: 1.75rem;
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    /* En pantallas muy pequeñas, considera 1 columna si es necesario */
    /* Descomenta si prefieres 1 columna en móviles pequeños */
    /*
    .row .col-md-2,
    .row .col-md-3 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    */
}

/* ----------------------------------------------------------------------------
   PROPUESTA 6: GRUPOS DE BOTONES STACK VERTICAL
   Apila botones agrupados verticalmente para mejor UX táctil
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Grupos de botones se apilan verticalmente */
    .btn-group {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--mobile-spacing-sm);
        width: 100%;
    }

    /* Cada botón ocupa todo el ancho */
    .btn-group .btn {
        width: 100% !important;
        border-radius: 0.375rem !important;  /* Restaurar border-radius */
        margin: 0 !important;
    }

    /* Botones dropdown en grupos también se adaptan */
    .btn-group > .btn-group {
        width: 100%;
    }

    /* Asegurar que los botones no se peguen */
    .btn-group .btn + .btn {
        margin-left: 0 !important;
        border-left-width: 1px !important;
    }
}

/* ----------------------------------------------------------------------------
   PROPUESTA 8: NOTIFICACIONES DROPDOWN RESPONSIVE
   Optimiza el dropdown de notificaciones para móviles pequeños
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Notificaciones se adaptan al ancho de pantalla */
    .notifications-dropdown {
        width: 95vw !important;
        max-width: 360px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        margin-top: 0.5rem;
    }

    /* Reducir padding interno para aprovechar espacio */
    .notifications-dropdown .dropdown-header {
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
    }

    /* Items de notificación más compactos */
    .notifications-dropdown .dropdown-item {
        padding: 0.75rem 1rem;
        min-height: var(--mobile-touch-target-min);
    }

    /* Max height ajustado para móvil */
    .notifications-dropdown {
        max-height: 70vh !important;
    }
}

@media (max-width: 480px) {
    /* En móviles muy pequeños, casi full width */
    .notifications-dropdown {
        width: calc(100vw - 1rem) !important;
        max-width: none !important;
    }
}

/* ============================================================================
   UTILIDADES GENERALES MÓVIL
   ============================================================================ */

/* Asegurar que elementos táctiles tengan suficiente espacio */
@media (max-width: 768px) {
    /* Links y botones en general */
    a, button, .clickable {
        min-height: var(--mobile-touch-target-min);
    }

    /* Checkboxes y radios más grandes */
    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    /* Labels de forms con más padding para tocar */
    .form-check-label {
        padding-left: 0.5rem;
        cursor: pointer;
        display: inline-block;
        min-height: var(--mobile-touch-target-min);
        line-height: var(--mobile-touch-target-min);
    }
}

/* Prevenir zoom en inputs en iOS */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;  /* iOS no hace zoom si font-size >= 16px */
    }
}

/* Mejorar scroll en tablas responsive */
@media (max-width: 768px) {
    .table-responsive {
        -webkit-overflow-scrolling: touch;  /* Smooth scroll en iOS */
        position: relative;
    }

    /* Indicador visual de que hay scroll horizontal */
    /* .table-responsive::after {
        content: '→';
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        background: linear-gradient(to left, rgba(255,255,255,0.9), transparent);
        padding: 0.5rem 1rem;
        pointer-events: none;
        font-size: 1.5rem;
        color: #666;
    } */

    /* Ocultar indicador cuando se scrollea al final */
    .table-responsive.scrolled-end::after {
        display: none;
    }
}

/* ============================================================================
   MEJORAS DE ACCESIBILIDAD EN MÓVIL
   ============================================================================ */
@media (max-width: 768px) {
    /* Texto más legible */
    body {
        font-size: 16px;
        line-height: 1.5;
    }

    /* Headers más proporcionados */
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    h4 { font-size: 1.1rem; }
    h5 { font-size: 1rem; }
    h6 { font-size: 0.9rem; }

    /* Focus visible más prominente en móvil */
    *:focus-visible {
        outline: 3px solid var(--primary-color, #0d6efd);
        outline-offset: 2px;
    }
}

/* ============================================================================
   FIN PAQUETE A
   ============================================================================ */

/* ============================================================================
   PAQUETE B: MÓDULOS CRÍTICOS
   ============================================================================ */

/* ----------------------------------------------------------------------------
   PROPUESTA 4: FORMULARIOS FULL-WIDTH EN MÓVIL
   Hace que todos los campos de formulario ocupen 100% del ancho en móvil
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Forzar todas las columnas de formularios a 100% en móvil */
    .row .col-md-6,
    .row .col-md-4,
    .row .col-md-3,
    .row .col-md-2,
    .row .col-lg-6,
    .row .col-lg-4,
    .row .col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Excepción: mantener col-6 en casos específicos (como stats cards) */
    .row .col-6.col-md-2,
    .row .col-6.col-md-3,
    .row .col-6.col-md-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Form controls con mejor altura táctil */
    .form-control,
    .form-select {
        min-height: var(--mobile-touch-target-min);
        padding: 0.625rem 0.75rem;
        font-size: 16px; /* Prevenir zoom en iOS */
    }

    /* Textareas con altura mínima razonable */
    textarea.form-control {
        min-height: 100px;
    }

    /* Labels más prominentes */
    .form-label {
        font-weight: 500;
        margin-bottom: 0.5rem;
        font-size: 0.95rem;
    }

    /* Asteriscos de campos requeridos más visibles */
    .form-label .text-danger,
    .text-danger {
        font-size: 1.1em;
        margin-left: 0.25rem;
    }

    /* Form groups con mejor spacing */
    .mb-3,
    .mb-2 {
        margin-bottom: 1rem !important;
    }

    /* Botones de submit full-width en móvil para mejor UX */
    .modal-footer .btn,
    form .btn-primary:not(.btn-sm) {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Excepción: botones en grupos pequeños */
    .btn-group .btn,
    .d-flex .btn {
        width: auto;
    }
}

/* Formularios con tabs - mejorar navegación móvil */
@media (max-width: 768px) {
    /* Nav tabs más grandes y tocables */
    .nav-tabs .nav-link {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        min-height: var(--mobile-touch-target-min);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Reducir iconos en tabs si hay poco espacio */
    .nav-tabs .nav-link i {
        font-size: 1rem;
        margin-right: 0.5rem;
    }

    /* Tabs scrollables horizontalmente si son muchos.
       !important necesario: bootstrap.min.css carga después de este archivo
       y define ".nav{flex-wrap:wrap}" con la misma especificidad que
       ".nav-tabs" — sin esto, los tabs se envuelven en vez de scrollear. */
    .nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden; /* si no se fija, el navegador la computa como
           "auto" igual (spec: overflow-x != visible promueve overflow-y
           visible -> auto), y con 1px de diferencia de alto ya alcanza
           para que aparezca una scrollbar vertical fantasma */
        -webkit-overflow-scrolling: touch;
    }

    /* Tab panes con padding adecuado */
    .tab-content {
        padding: 1rem 0;
    }
}

/* ----------------------------------------------------------------------------
   PROPUESTA 7: MODALES OPTIMIZADOS PARA MÓVIL
   Ajusta modales para que sean usables en pantallas pequeñas
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Modal dialog ocupa casi toda la pantalla */
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
        min-height: calc(100vh - 1rem);
        display: flex;
        align-items: center;
    }

    /* Modal content con scroll interno */
    .modal-content {
        max-height: calc(100vh - 1rem);
        border-radius: 0.5rem;
    }

    /* Modal body scrollable */
    .modal-body {
        padding: 1rem !important;
        max-height: calc(100vh - 200px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Modal header más compacto */
    .modal-header {
        padding: 0.75rem 1rem !important;
        flex-shrink: 0;
    }

    .modal-title {
        font-size: 1.25rem;
    }

    /* Modal footer con botones apilados */
    .modal-footer {
        padding: 0.75rem 1rem !important;
        flex-shrink: 0;
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-footer .btn {
        width: 100%;
        margin: 0 !important;
    }

    /* Orden de botones: primario arriba */
    .modal-footer .btn-primary {
        order: -1;
    }

    /* Close button más grande y fácil de tocar */
    .modal-header .btn-close {
        padding: 0.75rem;
        margin: -0.5rem -0.5rem -0.5rem auto;
        width: var(--mobile-touch-target-min);
        height: var(--mobile-touch-target-min);
    }
}

/* Modales grandes (modal-lg, modal-xl) en móvil */
@media (max-width: 768px) {
    .modal-lg,
    .modal-xl {
        max-width: calc(100vw - 1rem) !important;
    }
}

/* Modales en pantallas muy pequeñas */
@media (max-width: 480px) {
    .modal-dialog {
        margin: 0.25rem !important;
        max-width: calc(100vw - 0.5rem) !important;
    }

    .modal-body {
        padding: 0.75rem !important;
    }

    /* Formularios dentro de modales aún más compactos */
    .modal-body .form-label {
        font-size: 0.9rem;
    }

    .modal-body .form-control,
    .modal-body .form-select {
        font-size: 15px;
    }
}

/* Modales con muchos campos - mejorar UX */
@media (max-width: 768px) {
    /* Scroll suave en modales largos */
    .modal-body .row {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
    }

    .modal-body [class*="col-"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Progress indicators en modales multi-step */
    .modal-body .nav-pills {
        margin-bottom: 1rem;
    }

    .modal-body .nav-pills .nav-link {
        font-size: 0.85rem;
        padding: 0.5rem;
    }
}

/* ============================================================================
   FIN PAQUETE B - PARTE 1 (Formularios y Modales)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   PROPUESTA 1: TABLAS RESPONSIVE CON VISTA CARD EN MÓVIL

   Sistema flexible de tablas que se convierten en cards en móvil.

   USO:
   1. Agregar clase 'table-mobile-cards' a la tabla
   2. Agregar data-label="Nombre Columna" a cada <td> (automático con JS helper)
   3. Las acciones siempre estarán visibles

   Ejemplo:
   <table class="table table-mobile-cards">
     <thead>
       <tr><th>Nombre</th><th>Email</th><th>Acciones</th></tr>
     </thead>
     <tbody>
       <tr>
         <td data-label="Nombre">Juan</td>
         <td data-label="Email">juan@example.com</td>
         <td class="actions">
           <button>Ver</button>
           <button>Editar</button>
         </td>
       </tr>
     </tbody>
   </table>
   ---------------------------------------------------------------------------- */

/* Desktop - tabla normal */
.table-mobile-cards {
    /* Comportamiento normal de tabla en desktop */
}

/* Mobile - convertir a cards */
@media (max-width: 768px) {
    /* Ocultar thead en móvil */
    .table-mobile-cards thead {
        display: none;
    }

    /* Tabla se convierte en block */
    .table-mobile-cards,
    .table-mobile-cards tbody,
    .table-mobile-cards tr {
        display: block;
        width: 100%;
    }

    /* Cada fila es una card */
    .table-mobile-cards tbody tr {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        padding: 1rem;
        margin-bottom: 1rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        position: relative;
    }

    .table-mobile-cards tbody tr:last-child {
        margin-bottom: 0;
    }

    /* Cada celda ocupa una línea */
    .table-mobile-cards td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0 !important;
        border: none !important;
        min-height: var(--mobile-touch-target-min);
        overflow: hidden; /* Evitar que el contenido se salga */
    }

    /* Label antes del contenido (usando data-label) */
    .table-mobile-cards td[data-label]:before {
        content: attr(data-label);
        font-weight: 600;
        color: #495057;
        margin-right: 1rem;
        flex-shrink: 0;
        min-width: 100px;
        font-size: 0.9rem;
    }

    /* Contenido de la celda: mobile-tables.js envuelve todos los hijos de un
       <td> (link/texto principal + badges sueltos) en un único .td-value, para
       que compitan por espacio como UN solo flex-item en vez de varios. Antes,
       con "td > *", un badge corto casi no encogía y el texto principal (mucho
       más largo) absorbía casi toda la falta de espacio y quedaba ilegible. */
    .table-mobile-cards td > .td-value {
        flex: 1 1 auto;
        min-width: 0; /* Permitir que flex encoja el contenido */
        text-align: right;
    }

    /* Títulos y textos largos: si no entran en una línea, bajan de línea en
       vez de comprimirse (antes forzaban nowrap+ellipsis, lo que dejaba el
       texto en 0-9px de ancho cuando compartía celda con un badge). */
    .table-mobile-cards td a:not(.btn),
    .table-mobile-cards td span:not(.badge),
    .table-mobile-cards td div:not(.btn-group) {
        max-width: 100%;
        white-space: normal;
        overflow-wrap: break-word;
        display: block;
    }

    /* Celdas de acciones siempre al final y destacadas */
    .table-mobile-cards td.actions,
    .table-mobile-cards td:last-child {
        margin-top: 0.75rem;
        padding-top: 0.75rem !important;
        border-top: 1px solid #dee2e6 !important;
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .table-mobile-cards td.actions:before,
    .table-mobile-cards td:last-child:before {
        display: none; /* No mostrar label para acciones */
    }

    /* Botones en acciones */
    .table-mobile-cards td.actions .btn,
    .table-mobile-cards td:last-child .btn {
        flex: 0 0 auto;
        min-width: 80px;
    }

    /* Badges y estados más visibles */
    .table-mobile-cards .badge {
        font-size: 0.85rem;
        padding: 0.35rem 0.65rem;
    }

    /* Links en tablas */
    .table-mobile-cards a:not(.btn) {
        color: var(--primary-color, #0d6efd);
        font-weight: 500;
    }
}

/* ----------------------------------------------------------------------------
   VARIANTE: Table Stacked (más compacta)
   Para tablas con menos columnas que no necesitan labels
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .table-mobile-stacked thead {
        display: none;
    }

    .table-mobile-stacked,
    .table-mobile-stacked tbody,
    .table-mobile-stacked tr {
        display: block;
        width: 100%;
    }

    .table-mobile-stacked tbody tr {
        background: white;
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .table-mobile-stacked td {
        display: block;
        padding: 0.25rem 0 !important;
        border: none !important;
        text-align: left !important;
    }

    /* Primera celda como "header" de la card */
    .table-mobile-stacked td:first-child {
        font-weight: 600;
        font-size: 1.05rem;
        color: #212529;
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem !important;
        border-bottom: 1px solid #dee2e6 !important;
    }

    /* Acciones al final */
    .table-mobile-stacked td:last-child {
        margin-top: 0.5rem;
        display: flex;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
}

/* ----------------------------------------------------------------------------
   HELPER: Mejorar table-responsive existentes
   Para las tablas que ya usan .table-responsive
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Mejor indicador de scroll */
    .table-responsive {
        border-radius: 0.375rem;
        box-shadow: inset -10px 0 10px -10px rgba(0,0,0,0.1);
    }

    /* Reducir font-size en tablas responsive tradicionales */
    .table-responsive table:not(.table-mobile-cards):not(.table-mobile-stacked) {
        font-size: 0.85rem;
    }

    .table-responsive table th,
    .table-responsive table td {
        white-space: nowrap;
        padding: 0.5rem 0.75rem !important;
    }

    /* Sticky primera columna (opcional, solo para tablas importantes) */
    .table-responsive.sticky-first-col th:first-child,
    .table-responsive.sticky-first-col td:first-child {
        position: sticky;
        left: 0;
        background: white;
        z-index: 1;
        box-shadow: 2px 0 4px rgba(0,0,0,0.05);
    }
}

/* ----------------------------------------------------------------------------
   ESTADOS Y BADGES EN TABLAS MÓVILES
   Mejorar visibilidad de estados
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Badges más grandes en móvil */
    .table-mobile-cards .badge,
    .table-mobile-stacked .badge {
        font-size: 0.875rem;
        padding: 0.4rem 0.75rem;
        min-width: 80px;
        text-align: center;
    }

    /* Excepción: el chip de mención "#ID" (bg-secondary bg-opacity-50) es
       texto corto, no un badge de estado — el min-width:80px de arriba le
       robaba espacio innecesario al texto principal de la celda. */
    .table-mobile-cards .badge.bg-opacity-50 {
        min-width: auto;
    }

    /* Excepción: los badges "punto" (rounded-circle, 12px inline) usados como
       indicador de estado quedaban estirados en un óvalo ancho sin contenido
       visible por el min-width:80px de arriba, pensado para badges de texto. */
    .table-mobile-cards .badge.rounded-circle {
        min-width: 0;
    }

    /* Iconos en celdas */
    .table-mobile-cards td i.fas,
    .table-mobile-cards td i.far {
        font-size: 1.1rem;
        margin-left: 0.5rem;
    }

    /* Prioridades visibles */
    .table-mobile-cards .text-danger,
    .table-mobile-cards .text-warning,
    .table-mobile-cards .text-success {
        font-weight: 600;
    }
}

/* ----------------------------------------------------------------------------
   FILTROS DE TABLA EN MÓVIL
   Mejorar UX de filtros y búsqueda
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Card de filtros más compacto */
    .card .card-body form.row {
        gap: 0.75rem;
    }

    /* Botones de filtro full-width */
    .card .card-body form button[type="submit"],
    .card .card-body form a.btn {
        width: 100%;
        margin-top: 0.5rem;
    }

    /* Inputs de filtro con iconos */
    .card .card-body form input[type="search"],
    .card .card-body form input[placeholder*="Buscar"] {
        padding-left: 2.5rem;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23999' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: 0.75rem center;
    }
}

/* ============================================================================
   FIN PROPUESTA 1 (Tablas Responsive)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   PROPUESTA 2: KANBAN MÓVIL-FIRST (leads.php?action=kanban)

   El kanban de Leads tiene ~18 columnas fijas de 320px (una por asesor) con
   scroll horizontal crudo — inutilizable en un teléfono. mobile-kanban.js ya
   arma una franja de tabs (una por columna) y llama showColumn()/toggle de
   ".active"; lo que faltaba era el CSS que oculta las columnas no activas.
   Sin esto, aunque el JS corriera, todas las columnas seguían visibles.

   Esta sección NO aplica al kanban de Tareas (tareas/kanban.php): usa clases
   distintas (.kanban-board/.kanban-header/.kanban-count), no ".kanban-
   container"/".kanban-column-header", así que mobile-kanban.js no lo toca.
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Franja de tabs (uno por columna/asesor), scrolleable horizontal */
    .kanban-mobile-tabs {
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 0.5rem 0.25rem;
        margin-bottom: 0.75rem;
        border-bottom: 1px solid #dee2e6;
    }

    .kanban-mobile-tab {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        gap: 0.4rem;
        min-height: var(--mobile-touch-target-min, 44px);
        padding: 0 0.9rem;
        border: 1px solid #dee2e6;
        border-radius: 20px;
        background: #fff;
        color: #495057;
        font-size: 0.85rem;
        font-weight: 500;
        white-space: nowrap;
    }

    .kanban-mobile-tab .badge {
        background: #6c757d;
        color: #fff;
        border-radius: 10px;
        padding: 0.1rem 0.5rem;
        font-size: 0.75rem;
    }

    .kanban-mobile-tab.active {
        background: #0d6efd;
        border-color: #0d6efd;
        color: #fff;
    }

    .kanban-mobile-tab.active .badge {
        background: rgba(255, 255, 255, 0.25);
    }

    /* Solo se ve la columna activa; la navegación es por tabs, no por
       scroll horizontal crudo de ~6000px. !important necesario: estas
       reglas compiten con el <style> inline de kanban.php, que carga
       después de este archivo. */
    .kanban-container {
        overflow-x: visible !important;
    }

    .kanban-column {
        display: none !important;
    }

    .kanban-column.active {
        display: block !important;
        flex: 0 0 100% !important;
        width: 100% !important;
    }
}

/* ============================================================================
   FIN PROPUESTA 2 (Kanban Móvil)
   ============================================================================ */

/* ============================================================================
   FIN PAQUETE B - MÓDULOS CRÍTICOS
   ============================================================================ */

/* ============================================================================
   PAQUETE C: EXPERIENCIA COMPLETA
   ============================================================================ */

/* ----------------------------------------------------------------------------
   DASHBOARD OPTIMIZADO
   Mejoras adicionales para el dashboard principal
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Welcome section más compacta */
    .welcome-section {
        padding: 1rem;
    }

    .welcome-section h2 {
        font-size: 1.5rem;
        margin-bottom: 0.75rem;
    }

    .welcome-section p {
        font-size: 0.95rem;
        line-height: 1.5;
    }

    /* Info box responsive */
    .info-box {
        padding: 1rem;
    }

    .info-box h3 {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }

    .info-box ul {
        padding-left: 1.25rem;
    }

    .info-box li {
        margin-bottom: 0.5rem;
        font-size: 0.9rem;
    }

    /* Cards grid ya está optimizado en style.css, pero aseguramos */
    .cards-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Cards del dashboard más compactos en móvil */
    .cards-grid .card {
        margin-bottom: 0;
    }

    .cards-grid .card-header {
        padding: 0.75rem 1rem;
    }

    .cards-grid .card-body {
        padding: 1rem;
    }

    .cards-grid .card-number {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }

    .cards-grid .card-label {
        font-size: 0.9rem;
    }
}

/* ----------------------------------------------------------------------------
   VISTA DETALLE (VER LEAD, VER TAREA, ETC.)
   Optimiza las vistas de detalle con layout col-md-8/col-md-4
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Layout de detalle: forzar una columna */
    .row .col-md-8,
    .row .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Sidebar de acciones después del contenido principal */
    .row .col-md-4 {
        margin-top: 1rem;
    }

    /* Cards de información más compactas */
    .card-body .row.mb-3 {
        margin-bottom: 1rem !important;
    }

    .card-body .row.mb-3 .col-md-6 {
        margin-bottom: 0.75rem;
    }

    /* Strong labels en línea con contenido */
    .card-body strong {
        display: inline-block;
        min-width: 100px;
        font-weight: 600;
        color: #495057;
    }

    /* Excepción: strong dentro de alertas y párrafos de texto corrido */
    .card-body .alert strong,
    .card-body p strong,
    .card-body .text-muted strong {
        display: inline;
        min-width: unset;
        color: inherit;
    }

    /* Badges en vistas de detalle */
    .card-body .badge {
        font-size: 0.85rem;
        padding: 0.375rem 0.625rem;
    }

    /* Botones de acción rápida más grandes */
    .btn-lg {
        padding: 1rem 1.5rem;
        font-size: 1rem;
    }

    .d-grid .btn-lg {
        width: 100%;
    }

    /* Alert boxes más compactos */
    .alert {
        padding: 0.75rem;
        font-size: 0.9rem;
    }

    .alert i {
        margin-right: 0.5rem;
    }
}

/* ----------------------------------------------------------------------------
   PIPELINE VIEW
   Optimiza la vista de pipeline con col-md-3
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Pipeline stages: 2 columnas en móvil */
    .row .col-md-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Cards de pipeline más compactas */
    .row .col-md-3 .card {
        margin-bottom: 0;
    }

    .row .col-md-3 .card-header h5 {
        font-size: 0.95rem;
    }

    .row .col-md-3 .card-body {
        padding: 0.75rem;
    }

    .row .col-md-3 .card-body h3 {
        font-size: 1.75rem;
        margin-bottom: 0.25rem;
    }

    .row .col-md-3 .card-body p {
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }
}

@media (max-width: 480px) {
    /* En pantallas muy pequeñas: 1 columna */
    .row .col-md-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ----------------------------------------------------------------------------
   TABLAS INTERNAS EN VISTAS DE DETALLE
   Optimiza tablas pequeñas dentro de cards
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Tablas pequeñas dentro de cards */
    .card-body .table-responsive {
        margin: -0.5rem;
    }

    .card-body .table-sm {
        font-size: 0.85rem;
    }

    .card-body .table-sm th,
    .card-body .table-sm td {
        padding: 0.5rem 0.25rem;
    }

    /* Botones dentro de tablas pequeñas */
    .card-body .table-sm .btn-sm {
        padding: 0.375rem 0.625rem;
        font-size: 0.8rem;
    }

    /* Btn-group-sm dentro de tablas */
    .card-body .btn-group-sm .btn {
        padding: 0.375rem 0.5rem;
    }
}

/* ----------------------------------------------------------------------------
   TIMELINE / ACTIVIDADES
   Optimiza vistas de timeline y actividades
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Timeline items */
    .timeline-item {
        padding-left: 2rem;
        margin-bottom: 1rem;
    }

    .timeline-item:before {
        left: 0.5rem;
    }

    .timeline-item .timeline-time {
        font-size: 0.8rem;
    }

    .timeline-item .timeline-content {
        padding: 0.75rem;
    }

    /* Activity cards */
    .activity-card {
        padding: 0.75rem;
        margin-bottom: 0.75rem;
    }

    .activity-card .activity-header {
        margin-bottom: 0.5rem;
    }

    .activity-card .activity-body {
        font-size: 0.9rem;
    }
}

/* ----------------------------------------------------------------------------
   HEADERS DE PÁGINA
   Mejora headers con título y botones
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Headers con título y botones */
    .d-flex.justify-content-between.align-items-center {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 1rem;
    }

    .d-flex.justify-content-between.align-items-center h2 {
        margin-bottom: 0;
        font-size: 1.5rem;
    }

    /* Botones del header en columna */
    .d-flex.justify-content-between.align-items-center .btn-group,
    .d-flex.justify-content-between.align-items-center .d-flex {
        width: 100%;
    }

    /* Excepción: mantener gap-2 inline si solo son 2-3 botones pequeños */
    .d-flex.gap-2:has(.btn-sm) {
        flex-direction: row !important;
        flex-wrap: wrap;
    }
}

/* ----------------------------------------------------------------------------
   DETALLE DE LEAD: ACCIONES DESPUÉS DEL CONTENIDO
   En leads/ver.php el bloque de botones (Volver/Editar/.../Eliminar) está
   antes del contenido en el DOM. La regla genérica de "HEADERS DE PÁGINA" ya
   los apila full-width, pero acá son 6 botones y quedaban formando una torre
   de ~350-400px ANTES de que el usuario vea de quién es el lead. Se reordena
   solo visualmente (el DOM no cambia) para que el contenido se vea primero.
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .lead-detail-col {
        display: flex;
        flex-direction: column;
    }

    .lead-detail-col #leadDetailActions {
        order: 2;
        margin-top: 1.5rem;
    }

    .lead-detail-col #leadDetailBody {
        order: 1;
    }
}

/* ----------------------------------------------------------------------------
   REFINAMIENTOS GENERALES
   Micro-mejoras de spacing, colores y UX
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Spacing entre secciones */
    .mb-4 {
        margin-bottom: 1.5rem !important;
    }

    .mb-3 {
        margin-bottom: 1rem !important;
    }

    /* Cards con más espacio */
    .card {
        margin-bottom: 1rem;
    }

    .card-header {
        padding: 0.875rem 1rem;
    }

    .card-body {
        padding: 1rem;
    }

    /* Títulos de cards */
    .card-header h5 {
        font-size: 1.05rem;
        margin-bottom: 0;
    }

    /* Links más prominentes */
    a:not(.btn) {
        font-weight: 500;
        text-decoration: none;
    }

    a:not(.btn):hover {
        text-decoration: underline;
    }

    /* Text-muted más legible */
    .text-muted {
        color: #6c757d !important;
        font-size: 0.9rem;
    }

    /* Empty states */
    .text-center.text-muted {
        padding: 2rem 1rem;
    }

    .text-center.text-muted i.fa-3x {
        font-size: 2.5rem;
        margin-bottom: 1rem;
    }

    /* Iconos en headers más pequeños */
    .card-header i,
    h2 i,
    h3 i {
        margin-right: 0.5rem;
        font-size: 0.9em;
    }
}

/* ----------------------------------------------------------------------------
   MEJORAS DE PERFORMANCE
   Smooth scrolling y animaciones optimizadas
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Smooth scroll global */
    html {
        scroll-behavior: smooth;
    }

    /* Reducir motion para performance */
    @media (prefers-reduced-motion: reduce) {
        *,
        *::before,
        *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
        }
    }

    /* Optimizar re-paint */
    .card,
    .btn,
    .modal {
        will-change: auto;
    }

    /* Hardware acceleration para animaciones */
    /* NOTA: .sidebar excluido porque usa transform: translateX() para show/hide en móvil */
    .modal,
    .dropdown-menu {
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}

/* ----------------------------------------------------------------------------
   LANDSCAPE MODE (Móvil horizontal)
   Optimizaciones especiales para móvil en landscape
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) and (orientation: landscape) {
    /* Reducir altura de headers */
    .topbar {
        padding: 0.5rem 1rem;
    }

    /* Cards más compactas en landscape */
    .card-body {
        padding: 0.75rem;
    }

    /* Modales más compactos */
    .modal-header,
    .modal-footer {
        padding: 0.5rem 0.75rem !important;
    }

    .modal-body {
        padding: 0.75rem !important;
    }

    /* Stats cards en 3 columnas en landscape */
    .row .col-6.col-md-2,
    .row .col-6.col-md-3 {
        flex: 0 0 33.333% !important;
        max-width: 33.333% !important;
    }
}

/* ----------------------------------------------------------------------------
   DARK MODE SUPPORT (Preparación)
   Base para implementar dark mode en el futuro
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) and (prefers-color-scheme: dark) {
    /* Nota: Activar cuando se implemente dark mode */
    /*
    .card {
        background-color: #2d3748;
        color: #e2e8f0;
    }

    .table {
        color: #e2e8f0;
    }

    .form-control,
    .form-select {
        background-color: #374151;
        color: #e2e8f0;
        border-color: #4b5563;
    }
    */
}

/* ----------------------------------------------------------------------------
   UTILITIES ADICIONALES
   Clases helper específicas para móvil
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
    /* Hide on mobile */
    .d-mobile-none {
        display: none !important;
    }

    /* Show only on mobile */
    .d-mobile-block {
        display: block !important;
    }

    .d-mobile-inline-block {
        display: inline-block !important;
    }

    .d-mobile-flex {
        display: flex !important;
    }

    /* Text utilities móvil */
    .text-mobile-center {
        text-align: center !important;
    }

    .text-mobile-left {
        text-align: left !important;
    }

    /* Spacing utilities móvil */
    .p-mobile-0 {
        padding: 0 !important;
    }

    .p-mobile-1 {
        padding: 0.5rem !important;
    }

    .m-mobile-0 {
        margin: 0 !important;
    }

    /* Width utilities móvil */
    .w-mobile-100 {
        width: 100% !important;
    }

    .w-mobile-auto {
        width: auto !important;
    }
}

/* ============================================================================
   FIN PAQUETE C - EXPERIENCIA COMPLETA
   ============================================================================ */

/* ============================================================================
   TOPBAR TÍTULO EN MOBILE
   El título de página se mueve debajo de la fila de botones/iconos en mobile
   ============================================================================ */
@media (max-width: 768px) {
    /* Permitir que el topbar envuelva en dos filas */
    .topbar {
        flex-wrap: wrap;
        align-items: center;
    }

    /* Fila 1 izquierda: botón hamburguesa */
    .topbar-left {
        order: 1;
        flex: 0 0 auto;
    }

    /* Fila 1 derecha: iconos (guía, chat, campana, usuario) */
    .topbar-right {
        order: 2;
        margin-left: auto;
        flex: 0 0 auto;
    }

    /* Fila 2: título de página ocupa ancho completo */
    .topbar-title {
        order: 3;
        flex: 0 0 100%;
        font-size: 0.95rem !important;
        padding: 0.25rem 0 0 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        letter-spacing: 0;
    }

    /* El nombre+rol completos ("Administrador / Administrador") no entran
       junto a los íconos y desbordaban el ancho de la página en TODA vista
       (~48px de scroll horizontal). En mobile queda solo el avatar; el
       nombre se ve dentro del menú desplegable (dropdown-header). */
    .user-info-text,
    .user-info-btn .fa-chevron-down {
        display: none;
    }

    .user-info-btn {
        padding: 0.4rem;
        gap: 0;
    }

    .user-avatar-container {
        margin-right: 0;
    }
}

/* ============================================================================
   PAGINACIÓN RESPONSIVE
   Componente de paginación con ventana de páginas + controles primero/último
   ============================================================================ */

/* Botones de control (primero/anterior/siguiente/último) más compactos */
.page-link.pag-ctrl {
    min-width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Texto informativo debajo de la paginación */
.paginacion-info {
    font-size: 0.8rem;
}

/* En mobile: ítems un poco más pequeños para que entren cómodos */
@media (max-width: 576px) {
    .pagination-custom .page-link {
        padding: 0.35rem 0.55rem;
        font-size: 0.85rem;
        min-width: 36px;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pagination-custom {
        gap: 2px;
    }

    /* Ellipsis: menos padding para ahorrar espacio */
    .pag-ellipsis .page-link {
        padding: 0.35rem 0.3rem;
        min-width: auto;
    }
}