/**
 * ============================================================================
 * 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 */
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -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 */
    .table-mobile-cards td > * {
        flex-grow: 1;
        text-align: right;
        min-width: 0; /* Permitir que flex encoja el contenido */
    }

    /* Títulos y textos largos con puntos suspensivos */
    .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%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block; /* block en lugar de inline-block para mejor comportamiento con flex */
    }

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

    /* 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 - DESHABILITADO

   NOTA: Esta sección fue removida porque interfería con el drag & drop
   en móvil. El kanban ahora usa scroll horizontal normal en todas las vistas.

   Los estilos originales se encuentran en src/views/leads/kanban.php
   y src/views/tareas/kanban.php (dentro de las etiquetas <style>)
   ---------------------------------------------------------------------------- */

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

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

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

/* ----------------------------------------------------------------------------
   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
   ============================================================================ */