/**
 * DEMS 2025 - Estilos móviles optimizados para gestión de usuarios
 */

/* Responsive básico */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.show {
        transform: translateX(0);
    }
    
    .content-area {
        margin-left: 0;
        padding: 1rem;
    }
    
    .page-title {
        font-size: 1.5rem;
    }
    
    .card {
        margin-bottom: 1rem;
    }
    
    .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .table-responsive {
        overflow-x: auto;
    }
    
    /* Espaciado para la barra de búsqueda en página de usuarios */
    .mobile-search-container {
        margin-top: 1.2rem !important;
        margin-bottom: 0.25rem !important; /* Mucho menos espacio */
        padding: 0 1rem;
    }
    
    /* Separación adicional entre búsqueda y tabla/cards de usuarios */
    .mobile-search-container + * .form-container {
        margin-top: 0.25rem !important; /* Mucho menos espacio */
    }
    
    /* Tabla de usuarios optimizada para móvil */
    .users-table-container {
        background: rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        overflow-x: hidden !important; /* Sin scroll horizontal */
        overflow-y: auto !important; /* Permitir scroll vertical si es necesario */
        /* Asegurar que se ajuste al contenido en móviles */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        margin-top: 0.25rem !important; /* Muy poco espacio superior */
        margin-bottom: 1rem; /* Espacio para la paginación */
        width: 100% !important; /* Asegurar que use todo el ancho disponible */
        max-width: 100% !important; /* No exceder el ancho disponible */
        padding: 0 !important; /* Sin padding que cause desbordamiento */
    }
    
    .users-table {
        /* Ajustar ancho de columnas para evitar scroll horizontal */
        table-layout: fixed !important; /* Forzar layout fijo */
        width: 100% !important; /* Usar todo el ancho disponible */
        min-width: auto !important; /* Anular cualquier min-width */
        max-width: 100% !important; /* No exceder el contenedor */
        margin: 0 !important; /* Sin márgenes */
    }
    
    /* Ocultar columnas de rol, estado y acciones en móvil */
    .users-table .role-col,
    .users-table .status-col,
    .users-table .estatus-col,
    .users-table .actions-col,
    .users-table .address-col,
    .users-table .role-cell,
    .users-table .status-cell,
    .users-table .estatus-cell,
    .users-table .actions-cell,
    .users-table .address-cell {
        display: none !important;
    }
    
    /* Mostrar explícitamente las columnas de usuario e información en móvil */
    .users-table .user-col,
    .users-table .info-col,
    .users-table .user-cell,
    .users-table .info-cell {
        display: table-cell !important;
    }
    
    /* Ajustar ancho de columnas visibles - ANULAR estilos de escritorio */
    .users-table .user-col {
        width: 35% !important; /* Más compacto */
        min-width: auto !important; /* Anular min-width de escritorio */
        max-width: 35% !important;
    }
    
    .users-table .info-col {
        width: 65% !important; /* Más espacio para info pero no excesivo */
        min-width: auto !important; /* Anular min-width de escritorio */
        max-width: 65% !important;
    }
    
    /* Forzar anchos específicos en las celdas - ANULAR estilos de escritorio */
    .users-table .user-cell {
        width: 35% !important;
        min-width: auto !important; /* Anular min-width de escritorio */
        max-width: 35% !important;
    }
    
    .users-table .info-cell {
        width: 65% !important;
        min-width: auto !important; /* Anular min-width de escritorio */
        max-width: 65% !important;
    }
    
    /* Mejorar separación entre columnas - ultra compacto */
    .users-table thead th {
        padding: 0.5rem 0.3rem !important; /* Padding mínimo */
        background: rgba(248, 249, 250, 0.8);
        backdrop-filter: blur(10px);
        border-bottom: 1px solid rgba(233, 236, 239, 0.5);
        font-size: 0.8rem; /* Fuente más pequeña */
        font-weight: 600;
        color: #495057;
    }
    
    .users-table tbody td {
        padding: 0.4rem 0.3rem !important; /* Padding mínimo */
        border-bottom: 1px solid rgba(233, 236, 239, 0.3);
        vertical-align: middle;
    }
    
    /* Primera columna (usuario) con padding mínimo */
    .users-table .user-cell {
        padding-left: 0.5rem !important; /* Mínimo */
    }
    
    /* Última columna (información) con padding mínimo */
    .users-table .info-cell {
        padding-right: 0.5rem !important; /* Mínimo */
    }
    
    /* Hacer las filas más táctiles */
    .users-table .user-row {
        cursor: pointer;
        transition: background-color 0.2s ease, transform 0.1s ease;
    }
    
    .users-table .user-row:hover {
        background-color: rgba(var(--accent-rgb), 0.08) !important;
        transform: translateY(-1px);
    }
    
    .users-table .user-row:active {
        transform: translateY(0);
        background-color: rgba(var(--accent-rgb), 0.12) !important;
    }
    
    /* Mejorar elementos dentro de las celdas - ultra compactos */
    .user-cell .user-avatar img {
        width: 32px !important; /* Aún más pequeño */
        height: 32px !important; /* Aún más pequeño */
        margin-right: 0.4rem; /* Margen mínimo */
        border: 1px solid rgba(var(--accent-rgb), 0.3); /* Border más fino */
    }
    
    .user-cell h6 {
        font-size: 0.8rem; /* Más pequeño */
        margin-bottom: 2px; /* Pequeño margen */
        font-weight: 600;
        color: #495057;
        line-height: 1.3; /* Mejor legibilidad */
    }
    
    .user-cell small {
        font-size: 0.65rem; /* Más pequeño */
        color: #6c757d;
        line-height: 1.3; /* Mejor legibilidad */
    }
    
    .info-cell p {
        font-size: 0.75rem; /* Más pequeño */
        margin-bottom: 2px; /* Pequeño margen */
        font-weight: 600;
        color: #495057;
        line-height: 1.3; /* Mejor legibilidad */
    }
    
    .info-cell small {
        font-size: 0.65rem; /* Más pequeño */
        color: #6c757d;
        line-height: 1.3; /* Mejor legibilidad */
    }
    
    /* Mejorar el espaciado vertical en las celdas de información - más espacio para contenido */
    .info-cell {
        vertical-align: top !important; /* Alinear al top para mejor lectura */
        padding: 0.5rem !important; /* Más padding para contenido */
    }
    
    /* Asegurar que la información se vea bien en móviles - contenido completo */
    .info-cell div {
        display: block !important;
        width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        overflow: visible !important; /* Permitir que se vea todo el contenido */
    }
    
    /* Mejorar el manejo de texto largo en info-cell - permitir contenido completo */
    .info-cell p,
    .info-cell small {
        white-space: normal !important; /* Permitir salto de línea */
        word-break: break-word !important;
        overflow: visible !important; /* Mostrar todo el contenido */
        text-overflow: initial !important; /* Sin puntos suspensivos */
        max-width: 100% !important;
        line-height: 1.3 !important; /* Mejor legibilidad */
    }
    
    /* Lo mismo para la columna de usuario - contenido completo */
    .user-cell h6,
    .user-cell small {
        white-space: normal !important; /* Permitir salto de línea */
        overflow: visible !important; /* Mostrar todo el contenido */
        text-overflow: initial !important; /* Sin puntos suspensivos */
        max-width: 100% !important;
        line-height: 1.3 !important; /* Mejor legibilidad */
    }
    
    /* Espaciado para cards móviles de usuarios */
    .mobile-search-container + * .mobile-cards-container {
        margin-top: 0.25rem !important; /* Mucho menos espacio */
    }
}

/* Media query específica para pantallas muy pequeñas */
@media (max-width: 576px) {
    .users-table-container {
        margin: 0 -0.5rem;
        border-radius: 0;
        /* Asegurar que el contenedor se ajuste al contenido */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        overflow: hidden !important; /* Sin scroll horizontal */
        max-width: 100vw !important;
    }
    
    .users-table {
        font-size: 0.85rem;
        min-width: auto !important; /* Sin ancho mínimo */
    }
    
    .users-table thead th {
        padding: 0.4rem 0.2rem !important; /* Más compacto */
        font-size: 0.75rem;
    }
    
    .users-table tbody td {
        padding: 0.4rem 0.2rem !important; /* Más compacto */
    }
    
    .user-cell .user-avatar img {
        width: 28px !important; /* Más pequeño */
        height: 28px !important;
        margin-right: 0.3rem;
    }
    
    .user-cell h6 {
        font-size: 0.75rem;
    }
    
    .user-cell small,
    .info-cell p,
    .info-cell small {
        font-size: 0.65rem;
    }
    
    .user-cell {
        padding-left: 0.3rem !important; /* Más compacto */
    }
    
    .info-cell {
        padding-right: 0.3rem !important; /* Más compacto */
    }
}

/* Modal de acciones para móvil - SOLUCIÓN NUCLEAR PARA Z-INDEX */
.mobile-actions-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: none;
    justify-content: center;
    align-items: flex-end;
    z-index: 2147483647 !important; /* Valor máximo de z-index */
    animation: fadeIn 0.3s ease;
}

.mobile-actions-modal.show {
    display: flex !important;
    z-index: 2147483647 !important;
}

/* FORZAR que TODOS los elementos estén por debajo cuando modal esté activo */
/* NOTA: Esta regla es muy agresiva, se aplicará selectivamente */
body.modal-active .content-area,
body.modal-active .container-fluid,
body.modal-active .card,
body.modal-active .table,
body.modal-active .btn:not(.mobile-action-btn),
body.modal-active .form-container,
body.modal-active .pagination {
    z-index: 1 !important;
}

/* EXCEPCIONES: Solo el modal y su contenido pueden tener z-index alto */
body.modal-active .mobile-actions-modal,
body.modal-active .mobile-actions-modal *,
body.modal-active .mobile-actions-modal .mobile-actions-content,
body.modal-active .mobile-action-btn {
    z-index: 2147483647 !important;
}

/* Forzar elementos específicos que causan problemas */
body.modal-active .sidebar,
body.modal-active .page-header-fixed,
body.modal-active .sidebar-toggle,
body.modal-active .navbar,
body.modal-active .nav,
body.modal-active .content-area,
body.modal-active .card,
body.modal-active .btn,
body.modal-active .table,
body.modal-active .notification-container,
body.modal-active .toast-container,
body.modal-active .dropdown-menu,
body.modal-active .modal-backdrop {
    z-index: 1 !important;
}

/* Preservar apariencia visual del header pero forzar z-index bajo */
body.modal-active .page-header-fixed {
    z-index: 1 !important;
    background: var(--neuro-gradient) !important;
    border: 1px solid var(--neuro-border) !important;
    box-shadow: var(--neuro-shadow-raised) !important;
    color: #4a5568 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Preservar sidebar también */
body.modal-active .sidebar {
    z-index: 1 !important;
    background: var(--neuro-gradient) !important;
    border: none !important;
    box-shadow: 
        8px 8px 16px #d1d1d4,
        -8px -8px 16px #ffffff !important;
    color: #495057 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
}

/* Asegurar que todos los elementos del header sean visibles */
body.modal-active .page-header-fixed * {
    opacity: 1 !important;
    visibility: visible !important;
    color: inherit !important;
}

/* Asegurar que el texto del header sea visible */
body.modal-active .page-header-fixed .page-title,
body.modal-active .page-header-fixed .page-subtitle {
    color: #4a5568 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Mantener el fondo del body visible */
body.modal-active {
    background: #f0f0f3 !important;
}

.mobile-actions-modal.show {
    display: flex;
}

.mobile-actions-content {
    background: white !important;
    border-radius: 20px 20px 0 0;
    padding: 1.5rem;
    width: 100%;
    max-width: 500px;
    margin: 0 1rem 0 1rem;
    animation: slideUp 0.3s ease;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    position: relative !important;
    z-index: 2147483647 !important; /* Valor máximo de z-index también para el contenido */
}

.mobile-actions-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
}

.mobile-actions-header .user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 1rem;
    border: 2px solid var(--accent);
}

.mobile-actions-header .user-info h6 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}

.mobile-actions-header .user-info small {
    color: #6c757d;
    font-size: 0.9rem;
}

.mobile-actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mobile-action-btn {
    display: flex;
    align-items: center;
    padding: 1rem;
    border: none;
    border-radius: 12px;
    background: #f8f9fa;
    color: #333;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.mobile-action-btn:hover {
    background: #e9ecef;
    color: #333;
    text-decoration: none;
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .content-area {
        padding: 1.5rem;
    }
}