/**
 * Data Tables & Components - Estilos Genéricos
 * Versión: 3.0
 * Estilos reutilizables para tablas, formularios y componentes de datos
 */

/* ============================================
   AJAX LOADING & TRANSITIONS
   ============================================ */

/* Transiciones suaves para el contenedor de tabla */
#table-container,
#empty-container {
    transition: opacity 0.3s ease-in-out;
}

/* Estados de loading */
.data-loading {
    opacity: 0.4;
    pointer-events: none;
    position: relative;
}

/* Fade in/out para nuevos contenidos */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

.fade-out {
    animation: fadeOut 0.3s ease-in forwards;
}

/* Spinner sutil en la esquina (opcional) */
#ajax-loading-indicator {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    background: var(--bg-card);
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    pointer-events: none;
}

#ajax-loading-indicator.show {
    opacity: 1;
    transform: translateY(0);
}

#ajax-loading-indicator .spinner-border {
    width: 1.25rem;
    height: 1.25rem;
    border-width: 2px;
}

#ajax-loading-indicator .loading-text {
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Skeleton loading (alternativa) */
.skeleton-row {
    animation: skeleton-loading 1.5s ease-in-out infinite;
    background: linear-gradient(90deg,
            var(--bg-card) 0%,
            var(--hover-bg) 50%,
            var(--bg-card) 100%);
    background-size: 200% 100%;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Overlay sutil para la tabla durante carga */
.table-overlay {
    position: relative;
}

.table-overlay::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-card);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.table-overlay.loading::before {
    opacity: 0.7;
}

/* Progress bar en la parte superior */
.ajax-progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg,
            var(--color-action-primary),
            var(--color-action-hover));
    z-index: 10000;
    transition: width 0.3s ease;
    box-shadow: 0 0 10px var(--color-action-primary);
}

.ajax-progress-bar.loading {
    animation: progressBar 1.5s ease-in-out infinite;
}

@keyframes progressBar {
    0% {
        width: 0%;
        opacity: 1;
    }

    50% {
        width: 70%;
        opacity: 1;
    }

    100% {
        width: 100%;
        opacity: 0;
    }
}

/* ============================================
   TABLAS DE DATOS
   ============================================ */

/* Cards específicos del sistema de datos */
.filters-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    transition: all 0.3s ease;
}

.filters-card .card-body {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Card que contiene tabla de datos */
#table-container {
    background-color: transparent !important;
}

#empty-container {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

/* Contenedor responsive de tabla - Adaptado al tema */
.table-responsive {
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-color);
}

/* Tabla principal genérica - Adaptada al tema */
.table.data-table {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

/* Headers de tabla - FONDO AZUL TURQUESA */
.table.data-table thead {
    background-color: var(--color-header-footer) !important;
}

.table.data-table thead tr {
    background-color: var(--color-header-footer) !important;
}

.table.data-table thead th {
    background-color: var(--color-header-footer) !important;
    color: var(--text-inverse) !important;
    border: none !important;
    padding: 1rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

/* Cuerpo de tabla - FONDO ADAPTABLE AL TEMA */
.table.data-table tbody {
    background-color: var(--bg-card) !important;
}

.table.data-table tbody tr {
    background-color: var(--bg-card) !important;
    transition: background-color 0.3s ease;
    border-bottom: 1px solid var(--border-color) !important;
}

.table.data-table tbody tr:hover {
    background-color: var(--hover-bg) !important;
}

.table.data-table tbody td {
    padding: 1rem;
    vertical-align: middle;
    color: var(--text-primary) !important;
    background-color: var(--bg-card) !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Última fila sin borde inferior */
.table.data-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Textos secundarios en celdas */
.table.data-table tbody td small {
    color: var(--text-secondary) !important;
}

/* Código genérico (puede usarse para links, códigos, etc.) - Adaptado al tema */
.data-code {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: var(--color-action-primary);
    font-size: 0.95rem;
    transition: color 0.3s ease;
    background-color: transparent;
    border: none;
    padding: 0;
}

/* Botón de copiar genérico - Adaptado al tema */
.btn-copy {
    color: var(--color-accent);
    border: none;
    background: transparent;
    padding: 0.25rem 0.5rem;
    transition: all 0.3s ease;
}

.btn-copy:hover {
    color: var(--color-accent-hover);
    transform: scale(1.2);
}

/* Enlaces en tabla - Adaptado al tema */
.data-link {
    color: var(--color-action-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.data-link:hover {
    color: var(--color-action-hover);
    text-decoration: underline;
}

.data-link i {
    color: var(--icon-highlight);
    transition: color 0.3s ease;
}

.data-link:hover i {
    color: var(--icon-highlight-hover);
}

/* Tags genéricos - Los colores se definen inline en el HTML */
.data-tag {
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    /* Los colores de fondo y texto se definen inline por tag */
}

/* Badges de estado - adaptados al tema */
.badge {
    transition: all 0.3s ease;
}

.badge-active {
    background-color: var(--color-success);
    color: var(--text-inverse);
}

.badge-inactive {
    background-color: var(--color-secondary);
    color: var(--text-inverse);
}

.badge-visits {
    background-color: var(--color-info);
    color: var(--text-inverse);
    padding: 0.35rem 0.75rem;
    border-radius: 12px;
    font-weight: 600;
}

/* Small text en tablas - adaptado al tema */
.text-muted-theme {
    color: var(--text-secondary);
}

/* ============================================
   FORMULARIOS DE DATOS - Adaptados al tema
   ============================================ */

/* Card del formulario genérica */
.data-form-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

/* Labels del formulario */
.data-form-label {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.3s ease;
}

.data-form-label i {
    color: var(--input-icon-color);
    transition: color 0.3s ease;
}

.data-form-label small {
    color: var(--text-secondary);
    font-weight: 400;
}

/* Input group con icono */
.data-input-group .input-group-text {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--input-icon-color);
    transition: all 0.3s ease;
}

/* Form text (ayuda) */
.form-text {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: 0.5rem;
    transition: color 0.3s ease;
}

.form-text i {
    color: var(--input-icon-color);
    margin-right: 0.25rem;
    transition: color 0.3s ease;
}

/* Select (form-select) */
.form-select {
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.form-select:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 0.2rem rgba(0, 132, 165, 0.25);
    background-color: var(--input-bg);
    color: var(--text-primary);
}

.form-select option {
    background-color: var(--input-bg);
    color: var(--text-primary);
}

/* ============================================
   FILTROS - Adaptados al tema
   ============================================ */

.filters-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.filter-label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.filter-label i {
    color: var(--color-action-primary);
    margin-right: 0.5rem;
    transition: color 0.3s ease;
}

/* Inputs de filtro - heredan de form-control pero asegurar tema */
#filter-form .form-control {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

#filter-form .form-control:focus {
    background-color: var(--input-bg);
    color: var(--text-primary);
}

#filter-form .form-control::placeholder {
    color: var(--text-muted);
}

/* Botón de filtro durante loading */
#filter-form button[type="submit"] {
    transition: all 0.3s ease;
}

#filter-form button[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#filter-form button[type="submit"]:disabled i {
    opacity: 1;
}

/* ============================================
   PAGINACIÓN - Adaptada al tema
   ============================================ */

.pagination {
    margin: 0;
}

.pagination .page-item .page-link {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.pagination .page-item .page-link:hover {
    background-color: var(--hover-bg);
    border-color: var(--color-action-primary);
    color: var(--color-action-primary);
}

.pagination .page-item.active .page-link {
    background-color: var(--color-action-primary);
    border-color: var(--color-action-primary);
    color: var(--text-inverse);
}

.pagination .page-item.disabled .page-link {
    background-color: var(--bg-card);
    border-color: var(--border-color);
    color: var(--text-muted);
}

/* Texto informativo de paginación */
.text-secondary-theme {
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

/* ============================================
   BOTONES DE ACCIÓN EN TABLA - ESTILO ADMINLTE
   ============================================ */

/* Grupo de botones con separación ligera */
.data-actions .btn-group {
    display: inline-flex;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    border-radius: 0.25rem;
}

/* Botones rectangulares estilo AdminLTE */
.data-actions .btn {
    padding: 0.375rem 0.75rem;
    border: 1px solid transparent;
    font-size: 0.875rem;
    line-height: 1.5;
    transition: all 0.15s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
}

.data-actions .btn i {
    font-size: 0.875rem;
}

/* Hover suave */
.data-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.data-actions .btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Botón Primary (Editar) - Azul del sistema (#42648e) */
.data-actions .btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.data-actions .btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-active);
    color: white;
    box-shadow: 0 2px 6px var(--shadow-primary);
}

.data-actions .btn-primary:active {
    background-color: var(--color-primary-active);
    border-color: var(--color-primary-active);
}

.data-actions .btn-primary:focus {
    box-shadow: 0 0 0 0.2rem var(--focus-primary);
}

/* Botón Danger (Eliminar) - Rojo del sistema */
.data-actions .btn-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: white;
}

.data-actions .btn-danger:hover {
    background-color: var(--color-danger-hover);
    border-color: var(--color-danger-active);
    color: white;
    box-shadow: 0 2px 6px var(--shadow-danger);
}

.data-actions .btn-danger:active {
    background-color: var(--color-danger-active);
    border-color: var(--color-danger-active);
}

.data-actions .btn-danger:focus {
    box-shadow: 0 0 0 0.2rem var(--focus-danger);
}

/* Botón Success - Verde del sistema (#1c7484) */
.data-actions .btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
    color: white;
}

.data-actions .btn-success:hover {
    background-color: var(--color-success-hover);
    border-color: var(--color-success-active);
    color: white;
    box-shadow: 0 2px 6px var(--shadow-success);
}

.data-actions .btn-success:active {
    background-color: var(--color-success-active);
    border-color: var(--color-success-active);
}

.data-actions .btn-success:focus {
    box-shadow: 0 0 0 0.2rem var(--focus-success);
}

/* Botón Warning - Amarillo del sistema (#ffc107) */
.data-actions .btn-warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
    color: #212529;
}

.data-actions .btn-warning:hover {
    background-color: var(--color-warning-hover);
    border-color: var(--color-warning-active);
    color: #212529;
    box-shadow: 0 2px 6px var(--shadow-warning);
}

.data-actions .btn-warning:active {
    background-color: var(--color-warning-active);
    border-color: var(--color-warning-active);
}

.data-actions .btn-warning:focus {
    box-shadow: 0 0 0 0.2rem var(--focus-warning);
}

/* Botón Info - Cian del sistema (#17a2b8) */
.data-actions .btn-info {
    background-color: var(--color-info);
    border-color: var(--color-info);
    color: white;
}

.data-actions .btn-info:hover {
    background-color: var(--color-info-hover);
    border-color: var(--color-info-active);
    color: white;
    box-shadow: 0 2px 6px var(--shadow-info);
}

.data-actions .btn-info:active {
    background-color: var(--color-info-active);
    border-color: var(--color-info-active);
}

.data-actions .btn-info:focus {
    box-shadow: 0 0 0 0.2rem var(--focus-info);
}

/* Botón Alternative - Púrpura del sistema (#894fa0) */
.data-actions .btn-alternative {
    background-color: var(--color-alternative);
    border-color: var(--color-alternative);
    color: white;
}

.data-actions .btn-alternative:hover {
    background-color: var(--color-alternative-hover);
    border-color: var(--color-alternative-active);
    color: white;
    box-shadow: 0 2px 6px var(--shadow-alternative);
}

.data-actions .btn-alternative:active {
    background-color: var(--color-alternative-active);
    border-color: var(--color-alternative-active);
}

.data-actions .btn-alternative:focus {
    box-shadow: 0 0 0 0.2rem var(--focus-alternative);
}

/* Botón Secondary - Gris del sistema (#6c757d) */
.data-actions .btn-secondary {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: white;
}

.data-actions .btn-secondary:hover {
    background-color: var(--color-secondary-hover);
    border-color: var(--color-secondary-active);
    color: white;
    box-shadow: 0 2px 6px var(--shadow-secondary);
}

.data-actions .btn-secondary:active {
    background-color: var(--color-secondary-active);
    border-color: var(--color-secondary-active);
}

.data-actions .btn-secondary:focus {
    box-shadow: 0 0 0 0.2rem var(--focus-secondary);
}

/* Botón Dark - Oscuro del sistema (#343a40) */
.data-actions .btn-dark {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    color: white;
}

.data-actions .btn-dark:hover {
    background-color: var(--color-dark-hover);
    border-color: var(--color-dark-active);
    color: white;
    box-shadow: 0 2px 6px var(--shadow-dark);
}

.data-actions .btn-dark:active {
    background-color: var(--color-dark-active);
    border-color: var(--color-dark-active);
}

.data-actions .btn-dark:focus {
    box-shadow: 0 0 0 0.2rem var(--focus-dark);
}

/* Botón Light - Claro del sistema (#f8f9fa) */
.data-actions .btn-light {
    background-color: var(--color-light);
    border-color: var(--color-light);
    color: #212529;
}

.data-actions .btn-light:hover {
    background-color: var(--color-light-hover);
    border-color: var(--color-light-active);
    color: #212529;
    box-shadow: 0 2px 6px var(--shadow-light);
}

.data-actions .btn-light:active {
    background-color: var(--color-light-active);
    border-color: var(--color-light-active);
}

.data-actions .btn-light:focus {
    box-shadow: 0 0 0 0.2rem var(--focus-light);
}

/* Remover borde entre botones del grupo */
.data-actions .btn-group .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 0;
}

.data-actions .btn-group .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* ============================================
   RESPONSIVE - DESKTOP PEQUEÑO (992px - 1286px)
   ============================================ */

@media (max-width: 1286px) and (min-width: 992px) {
    /* CONFIGURACIÓN BASE - Sidebar EXPANDIDO (220px) */
    /* Filtros compactos por defecto */
    #filter-form .filter-label {
        font-size: 0.8rem;
    }
    
    #filter-form .form-control,
    #filter-form .form-select {
        font-size: 0.875rem;
        padding: 0.5rem 0.65rem;
    }
    
    #filter-form button[type="submit"] {
        padding: 0.5rem 0.25rem;
        font-size: 1rem;
    }
    
    #filter-form .col-md-3,
    #filter-form .col-md-2 {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    #filter-form .col-md-1 {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

/* Desktop pequeño con SIDEBAR COLAPSADO - MÁS ESPACIO */
@media (max-width: 1286px) and (min-width: 992px) {
    .sidebar-collapsed #filter-form .filter-label {
        font-size: 0.875rem !important;
    }
    
    .sidebar-collapsed #filter-form .form-control,
    .sidebar-collapsed #filter-form .form-select {
        font-size: 0.95rem !important;
        padding: 0.575rem 0.75rem !important;
    }
    
    .sidebar-collapsed #filter-form button[type="submit"] {
        padding: 0.575rem 0.5rem !important;
        font-size: 1.1rem !important;
    }
    
    .sidebar-collapsed #filter-form .col-md-3,
    .sidebar-collapsed #filter-form .col-md-2,
    .sidebar-collapsed #filter-form .col-md-1 {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ============================================
   RESPONSIVE - TABLET (768px - 992px)
   ============================================ */

@media (max-width: 992px) {
    /* Page header en tablet */
    .page-header h1 {
        font-size: 1.75rem;
    }
    
    .page-header .col-md-6.text-end {
        margin-top: 1rem;
        text-align: left !important;
    }
    
    /* Filtros en tablet - 2 columnas */
    #filter-form .col-md-3,
    #filter-form .col-md-2 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    #filter-form .col-md-1 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-top: 1rem;
    }
    
    #filter-form .col-md-1 button {
        width: 100%;
    }
}

/* ============================================
   RESPONSIVE - MÓVIL MEDIANO (577px - 768px)
   ============================================ */

@media (max-width: 768px) and (min-width: 577px) {
    /* Eliminar márgenes negativos de Bootstrap */
    #filter-form.row,
    .page-header .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Filtros apilados - Sobrescribir Bootstrap */
    #filter-form > .col-md-1,
    #filter-form > .col-md-2,
    #filter-form > .col-md-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 1rem;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Page header apilado */
    .page-header .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .page-header .col-md-6.text-end {
        text-align: center !important;
        margin-top: 1rem;
    }
    
    .page-header .btn {
        width: 100% !important;
    }
    
    /* Tabla más compacta */
    .data-table thead th {
        font-size: 0.875rem;
        padding: 0.75rem 0.5rem;
    }

    .data-table tbody td {
        font-size: 0.875rem;
        padding: 0.75rem 0.5rem;
    }
}

/* ============================================
   RESPONSIVE - MÓVIL (< 576px)
   ============================================ */

@media (max-width: 576px) {
    /* ========== CONTENEDORES ========== */
    
    /* Eliminar márgenes negativos de Bootstrap */
    #filter-form.row,
    .page-header .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* ========== PAGE HEADER ========== */
    
    .page-header h1 {
        font-size: 1.5rem;
    }
    
    .page-header .row {
        text-align: center;
    }
    
    .page-header .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .page-header .col-md-6.text-end {
        text-align: center !important;
        margin-top: 1rem;
    }
    
    .page-header .btn {
        width: 100% !important;
    }
    
    /* ========== CARDS ========== */
    
    .card-body {
        padding: 1rem;
    }
    
    /* ========== FILTROS ========== */
    
    /* Filtros apilados - Sobrescribir Bootstrap */
    #filter-form > .col-md-1,
    #filter-form > .col-md-2,
    #filter-form > .col-md-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: 1rem;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    #filter-form > .col-md-1 {
        margin-bottom: 0;
    }
    
    /* Inputs táctiles */
    #filter-form .form-control,
    #filter-form .form-select {
        font-size: 1rem;
        padding: 0.65rem 0.75rem;
    }
    
    /* Botón de búsqueda */
    #filter-form button[type="submit"] {
        padding: 0.75rem;
        font-size: 1.2rem;
    }
    
    /* ========== TABLA - MODO CARD ========== */
    
    /* Contenedor de tabla sin borde */
    .table-responsive {
        border: none !important;
        border-radius: 0;
        background-color: transparent !important;
        padding: 0;
    }
    
    /* Ocultar header de tabla en móvil */
    .data-table thead {
        display: none !important;
    }
    
    /* Tabla ocupa todo el ancho */
    .data-table {
        width: 100%;
        margin: 0;
    }
    
    /* Convertir filas en cards */
    .data-table tbody tr {
        display: block;
        margin-bottom: 1rem;
        border: 1px solid var(--border-color) !important;
        border-radius: 8px;
        padding: 1rem;
        background-color: var(--bg-card) !important;
    }
    
    .data-table tbody tr:hover {
        box-shadow: var(--shadow-sm);
    }
    
    /* Convertir celdas en bloques con labels */
    .data-table tbody td {
        display: block;
        padding: 0.5rem 0 !important;
        border: none !important;
        text-align: left !important;
    }
    
    /* Agregar labels antes de cada celda usando data-label */
    .data-table tbody td::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--text-secondary);
        display: inline-block !important;
        margin-right: 0.5rem;
    }
    
    /* URL y Acciones con label en bloque */
    .data-table tbody td:nth-child(2)::before,
    .data-table tbody td:nth-child(6)::before {
        display: block !important;
        margin-bottom: 0.5rem;
        margin-right: 0;
    }
    
    /* Sección de acciones separada */
    .data-table tbody td:nth-child(6) {
        margin-top: 1rem;
        padding-top: 1rem !important;
        border-top: 1px solid var(--border-light) !important;
    }
    
    /* Código y botón copiar en la misma línea */
    .data-table tbody td:nth-child(1) {
        display: flex !important;
        align-items: center;
        flex-wrap: wrap;
    }
    
    .data-table tbody td:nth-child(1)::before {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .data-table tbody td:nth-child(1) .data-code {
        flex: 1;
    }
    
    .data-table tbody td:nth-child(1) .btn-copy {
        margin-left: 0.5rem;
    }
    
    /* ========== ELEMENTOS DE TABLA ========== */
    
    .data-code {
        font-size: 0.85rem;
    }

    .data-tag {
        font-size: 0.7rem;
        padding: 0.2rem 0.5rem;
        display: inline-block;
        margin-top: 0.5rem;
    }
    
    .data-link {
        word-break: break-all;
        display: block;
    }
    
    /* Badges más grandes para móvil */
    .badge-visits {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .badge-active,
    .badge-inactive {
        padding: 0.4rem 0.8rem;
        font-size: 0.75rem;
    }
    
    /* ========== BOTONES DE ACCIÓN - ESTILO ADMINLTE MÓVIL ========== */
    
    .data-actions .btn-group {
        flex-direction: row;
        width: 100%;
        justify-content: center;
        gap: 0.5rem;
        box-shadow: none;
    }

    .data-actions .btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.9rem !important;
        min-width: auto !important;
        flex: 1;
        border-radius: 0.25rem !important;
    }
    
    .data-actions .btn i {
        font-size: 1rem !important;
    }
    
    /* Primera y última esquina redondeada en grupo */
    .data-actions .btn-group .btn:first-child {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
    
    .data-actions .btn-group .btn:last-child {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }
    
    /* ========== PAGINACIÓN ========== */
    
    /* Paginación más compacta */
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .pagination .page-link {
        padding: 0.4rem 0.65rem;
        font-size: 0.8rem;
        min-width: 2.5rem;
    }
    
    /* Ocultar algunos números de paginación */
    .pagination .page-item:not(.active):not(:first-child):not(:last-child):not(:nth-child(2)):not(:nth-last-child(2)) {
        display: none;
    }
    
    /* Paginación en columna */
    .d-flex.mt-3.flex-wrap {
        flex-direction: column !important;
    }
    
    #pagination-container {
        width: 100%;
        display: flex;
        justify-content: center;
        order: 1;
        margin-bottom: 1rem;
    }
    
    #showing-text-container {
        width: 100%;
        font-size: 0.85rem;
        text-align: center;
        order: 2;
    }
    
    /* ========== EMPTY STATE ========== */
    
    #empty-container {
        padding: 2rem 1rem;
        text-align: center;
    }
    
    #empty-container i {
        font-size: 3rem;
    }
    
    #empty-container p {
        font-size: 0.95rem;
    }
}

/* ============================================
   ORDENAMIENTO DE TABLAS (SORTABLE HEADERS)
   ============================================ */

/* Header ordenable - Contenedor */
.sortable-header {
    cursor: pointer;
    user-select: none;
    transition: all 0.3s ease;
    position: relative;
}

/* Contenido del th con icono de ordenamiento */
.sortable-header .th-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

/* Icono de ordenamiento */
.sortable-header .sort-icon {
    opacity: 0.4;
    transition: all 0.3s ease;
    font-size: 0.875rem;
    margin-left: 0.25rem;
}

/* Hover en header ordenable */
.sortable-header:hover {
    background-color: var(--color-action-primary) !important;
    color: var(--text-inverse) !important;
}

.sortable-header:hover .sort-icon {
    opacity: 1;
    transform: scale(1.1);
}

/* Header con ordenamiento activo */
.sortable-header.sort-asc .sort-icon,
.sortable-header.sort-desc .sort-icon {
    opacity: 1;
    color: var(--color-accent) !important;
    font-weight: bold;
}

/* Animación al cambiar ordenamiento */
.sortable-header.sort-asc .sort-icon {
    animation: sortBounce 0.3s ease;
}

.sortable-header.sort-desc .sort-icon {
    animation: sortBounce 0.3s ease;
}

@keyframes sortBounce {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

/* Indicador visual de columna ordenada - sutil */
.sortable-header.sort-asc,
.sortable-header.sort-desc {
    background-color: var(--color-header-footer) !important;
    position: relative;
}

.sortable-header.sort-asc::before,
.sortable-header.sort-desc::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent);
}

/* Estado de carga al ordenar */
.sortable-header.loading {
    opacity: 0.6;
    cursor: wait;
}

/* Headers de texto centrado (visitas, estado) */
.sortable-header.text-center .th-content {
    justify-content: center;
}

/* ============================================
   RESPONSIVE - MÓVIL
   ============================================ */

@media (max-width: 576px) {
    /* En móvil, los headers ordenables no son visibles (tabla en modo card) */
    /* pero mantenemos los estilos para transición suave */
    .sortable-header {
        cursor: default;
    }
}