/* Variables CSS para z-index organizados */
:root {
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    --z-toast: 1080;
    --z-profile-dropdown: 1090;
}

/* Clases utilitarias para z-index */
.z-dropdown { z-index: var(--z-dropdown); }
.z-sticky { z-index: var(--z-sticky); }
.z-fixed { z-index: var(--z-fixed); }
.z-modal-backdrop { z-index: var(--z-modal-backdrop); }
.z-modal { z-index: var(--z-modal); }
.z-popover { z-index: var(--z-popover); }
.z-tooltip { z-index: var(--z-tooltip); }
.z-toast { z-index: var(--z-toast); }
.z-profile-dropdown { z-index: var(--z-profile-dropdown); }

/* Profile Dropdown Styles */
.profile-dropdown-container {
    position: relative;
}

.profile-dropdown-container:hover .profile-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
}

.profile-dropdown-container:hover .profile-chevron {
    transform: rotate(180deg);
}

.profile-dropdown-menu {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 0.75rem;
    width: 16rem;
    background-color: white;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid #f3f4f6;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    transition: all 0.3s ease;
    z-index: var(--z-profile-dropdown);
}

.profile-chevron {
    transition: transform 0.3s ease;
}

/* Profile dropdown fallback positioning */
.profile-dropdown-fallback {
    position: fixed !important;
    top: 60px !important;
    right: 20px !important;
    z-index: 9999 !important;
    max-width: 280px;
    width: auto;
}

/* Backdrop filter support check */
@supports (backdrop-filter: blur(8px)) {
    .profile-dropdown-menu {
        backdrop-filter: blur(8px);
        background-color: rgba(255, 255, 255, 0.95);
    }
}

@supports not (backdrop-filter: blur(4px)) {
    .backdrop-blur-sm {
        background-color: rgba(255, 255, 255, 0.95);
    }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .profile-dropdown-mobile {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding-top: 80px;
        z-index: 9999 !important;
    }
    
    .profile-dropdown-mobile > div {
        max-width: 320px;
        width: 90%;
        margin: 0 auto;
    }
    
    .profile-dropdown-menu {
        position: fixed !important;
        top: 60px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-width: none !important;
        z-index: 9999 !important;
    }
}

/* Animaciones personalizadas para modales y alertas */
@keyframes modal-enter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes slide-in {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-modal-enter {
    animation: modal-enter 0.3s ease-out;
}

.animate-slide-in {
    animation: slide-in 0.3s ease-out;
}

/* Mejoras visuales adicionales */
.hover\:shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 200ms;
}

/* Estilos para DataTables con Tailwind */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    margin: 0.5rem 0;
}

.dataTables_wrapper .dataTables_filter input {
    @apply px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.dataTables_wrapper .dataTables_length select {
    @apply px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    @apply px-3 py-2 mx-1 text-sm font-medium text-gray-500 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 hover:text-gray-700;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    @apply bg-blue-600 text-white border-blue-600 hover:bg-blue-700;
}

/* Efectos hover mejorados */
.hover\:scale-105:hover {
    transform: scale(1.05);
}

.hover\:-translate-y-0\.5:hover {
    transform: translateY(-0.125rem);
}

/* Gradientes personalizados */
.bg-gradient-to-r {
    background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-blue-600 {
    --tw-gradient-from: #2563eb;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(37, 99, 235, 0));
}

.to-blue-700 {
    --tw-gradient-to: #1d4ed8;
}

/* Sombras personalizadas */
.shadow-2xl {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Backdrop blur para navegadores que lo soporten */
.backdrop-blur-sm {
    backdrop-filter: blur(4px);
}

/* Estilos para badges/etiquetas */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-success {
    @apply bg-green-100 text-green-800;
}

.badge-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-danger {
    @apply bg-red-100 text-red-800;
}

.badge-info {
    @apply bg-blue-100 text-blue-800;
}

/* Mejoras para formularios */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 hover:border-gray-400;
}

.form-select {
    @apply w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 hover:border-gray-400 bg-white;
}

.form-textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 hover:border-gray-400 resize-none;
}

/* Botones mejorados */
.btn-primary {
    @apply px-6 py-3 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-xl hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-sm hover:shadow-md transform hover:-translate-y-0.5;
}

.btn-secondary {
    @apply px-6 py-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-xl hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-sm hover:shadow-md;
}

.btn-success {
    @apply px-6 py-3 text-sm font-medium text-white bg-green-600 border border-transparent rounded-xl hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 shadow-sm hover:shadow-md transform hover:-translate-y-0.5;
}

.btn-warning {
    @apply px-6 py-3 text-sm font-medium text-white bg-amber-600 border border-transparent rounded-xl hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 transition-all duration-200 shadow-sm hover:shadow-md transform hover:-translate-y-0.5;
}

.btn-danger {
    @apply px-6 py-3 text-sm font-medium text-white bg-red-600 border border-transparent rounded-xl hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-all duration-200 shadow-sm hover:shadow-md transform hover:-translate-y-0.5;
}

/* Estilos para tablas */
.table-modern {
    @apply min-w-full divide-y divide-gray-200 bg-white shadow-lg rounded-xl overflow-hidden;
}

.table-modern thead {
    @apply bg-gray-50;
}

.table-modern th {
    @apply px-6 py-4 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider;
}

.table-modern td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

.table-modern tbody tr:hover {
    @apply bg-gray-50;
}

/* Indicadores de estado */
.status-indicator {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.status-active {
    @apply bg-green-100 text-green-800;
}

.status-inactive {
    @apply bg-red-100 text-red-800;
}

.status-pending {
    @apply bg-yellow-100 text-yellow-800;
}

/* Mejoras para cards */
.card-modern {
    @apply bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden transition-all duration-200 hover:shadow-xl;
}

.card-header {
    @apply px-6 py-4 border-b border-gray-200 bg-gray-50;
}

.card-body {
    @apply px-6 py-4;
}

.card-footer {
    @apply px-6 py-4 border-t border-gray-200 bg-gray-50;
}

/* Utilidades adicionales */
.text-shadow {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.border-dashed {
    border-style: dashed;
}

/* Responsive utilities */
@media (max-width: 640px) {
    .modal-content {
        margin: 1rem;
        max-width: calc(100vw - 2rem);
    }
    
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Estilos eliminados - usando solo Tailwind CSS */