/* Estilos modernos para el Sidebar */

/* Backdrop blur */
.backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur);
    backdrop-filter: var(--tw-backdrop-blur);
}

.backdrop-blur-xl {
    --tw-backdrop-blur: blur(24px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur);
    backdrop-filter: var(--tw-backdrop-blur);
}

.backdrop-blur-2xl {
    --tw-backdrop-blur: blur(40px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur);
    backdrop-filter: var(--tw-backdrop-blur);
}

/* Animación de spin lento */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 8s linear infinite;
}

/* Border width 3 */
.border-3 {
    border-width: 3px;
}

/* Glassmorphism shadows */
.shadow-glass {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 32px rgba(255, 255, 255, 0.05);
}

/* Custom scrollbar para glass */
.custom-scrollbar-glass {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.custom-scrollbar-glass::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar-glass::-webkit-scrollbar-track {
    background: transparent;
    margin: 8px 0;
}

.custom-scrollbar-glass::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1));
    border-radius: 10px;
}

.custom-scrollbar-glass::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
}

/* Blur decorativo */
.blur-3xl {
    --tw-blur: blur(64px);
    filter: var(--tw-blur);
}

/* Tracking widest */
.tracking-widest {
    letter-spacing: 0.1em;
}

/* Transiciones suaves */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Hover translate */
.hover\:-translate-y-0\.5:hover {
    --tw-translate-y: -0.125rem;
    transform: translateY(var(--tw-translate-y));
}

/* Hover scale */
.hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.hover\:scale-110:hover {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.group:hover .group-hover\:scale-110 {
    --tw-scale-x: 1.1;
    --tw-scale-y: 1.1;
    transform: scale(var(--tw-scale-x), var(--tw-scale-y));
}

.group:hover .group-hover\:translate-x-1 {
    --tw-translate-x: 0.25rem;
    transform: translateX(var(--tw-translate-x));
}

/* Shadow colored */
.shadow-emerald-400\/50 {
    --tw-shadow-color: rgba(52, 211, 153, 0.5);
    --tw-shadow: 0 0 10px var(--tw-shadow-color);
    box-shadow: var(--tw-shadow);
}

.shadow-amber-400\/50 {
    --tw-shadow-color: rgba(251, 191, 36, 0.5);
    --tw-shadow: 0 0 10px var(--tw-shadow-color);
    box-shadow: var(--tw-shadow);
}

.shadow-red-500\/30 {
    --tw-shadow-color: rgba(239, 68, 68, 0.3);
}

.hover\:shadow-red-500\/50:hover {
    --tw-shadow-color: rgba(239, 68, 68, 0.5);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color);
    box-shadow: var(--tw-shadow);
}

.hover\:shadow-cyan-500\/20:hover {
    --tw-shadow-color: rgba(6, 182, 212, 0.2);
    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color);
    box-shadow: var(--tw-shadow);
}

/* Colores con opacidad */
.bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.05);
}

.bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1);
}

.bg-white\/15 {
    background-color: rgba(255, 255, 255, 0.15);
}

.bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.2);
}

.hover\:bg-white\/10:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.hover\:bg-white\/20:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.border-white\/10 {
    border-color: rgba(255, 255, 255, 0.1);
}

.border-white\/20 {
    border-color: rgba(255, 255, 255, 0.2);
}

.border-white\/30 {
    border-color: rgba(255, 255, 255, 0.3);
}

.border-white\/40 {
    border-color: rgba(255, 255, 255, 0.4);
}

.hover\:border-white\/40:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.text-white\/40 {
    color: rgba(255, 255, 255, 0.4);
}

.text-white\/50 {
    color: rgba(255, 255, 255, 0.5);
}

.text-white\/60 {
    color: rgba(255, 255, 255, 0.6);
}

.text-white\/70 {
    color: rgba(255, 255, 255, 0.7);
}

.text-white\/75 {
    color: rgba(255, 255, 255, 0.75);
}

.text-white\/80 {
    color: rgba(255, 255, 255, 0.8);
}

.text-white\/90 {
    color: rgba(255, 255, 255, 0.9);
}

.group:hover .group-hover\:text-white\/70 {
    color: rgba(255, 255, 255, 0.7);
}

/* Colores de acento con opacidad */
.bg-emerald-500\/20 {
    background-color: rgba(16, 185, 129, 0.2);
}

.bg-emerald-500\/30 {
    background-color: rgba(16, 185, 129, 0.3);
}

.bg-amber-500\/10 {
    background-color: rgba(245, 158, 11, 0.1);
}

.bg-amber-500\/20 {
    background-color: rgba(245, 158, 11, 0.2);
}

.bg-amber-500\/30 {
    background-color: rgba(245, 158, 11, 0.3);
}

.bg-red-500\/20 {
    background-color: rgba(239, 68, 68, 0.2);
}

.bg-cyan-400\/20 {
    background-color: rgba(34, 211, 238, 0.2);
}

.bg-amber-400\/10 {
    background-color: rgba(251, 191, 36, 0.1);
}

/* Colores específicos del sidebar */
.bg-\[\#1E4D8A\]\/20 {
    background-color: rgba(30, 77, 138, 0.2);
}

.bg-\[\#1E4D8A\]\/40 {
    background-color: rgba(30, 77, 138, 0.4);
}

.bg-\[\#1E4D8A\]\/50 {
    background-color: rgba(30, 77, 138, 0.5);
}

.bg-\[\#1E4D8A\]\/60 {
    background-color: rgba(30, 77, 138, 0.6);
}

.bg-\[\#1E4D8A\]\/70 {
    background-color: rgba(30, 77, 138, 0.7);
}

.hover\:bg-\[\#1E4D8A\]\/40:hover {
    background-color: rgba(30, 77, 138, 0.4);
}

.hover\:bg-\[\#1E4D8A\]\/70:hover {
    background-color: rgba(30, 77, 138, 0.7);
}

/* Border con colores de acento */
.border-emerald-400\/20 {
    border-color: rgba(52, 211, 153, 0.2);
}

.border-emerald-400\/30 {
    border-color: rgba(52, 211, 153, 0.3);
}

.hover\:border-emerald-400\/30:hover {
    border-color: rgba(52, 211, 153, 0.3);
}

.border-amber-400\/20 {
    border-color: rgba(251, 191, 36, 0.2);
}

.border-amber-400\/30 {
    border-color: rgba(251, 191, 36, 0.3);
}

.hover\:border-amber-400\/20:hover {
    border-color: rgba(251, 191, 36, 0.2);
}

/* Textos de colores de acento */
.text-cyan-300 {
    color: #67e8f9;
}

.text-cyan-400 {
    color: #22d3ee;
}

.text-emerald-300 {
    color: #6ee7b7;
}

.text-emerald-400 {
    color: #34d399;
}

.text-amber-200 {
    color: #fde68a;
}

.text-amber-300 {
    color: #fcd34d;
}

.text-amber-400 {
    color: #fbbf24;
}

.text-amber-400\/60 {
    color: rgba(251, 191, 36, 0.6);
}

.text-purple-300 {
    color: #d8b4fe;
}

.text-purple-400 {
    color: #c084fc;
}

.text-orange-300 {
    color: #fdba74;
}

.text-red-300 {
    color: #fca5a5;
}

.text-red-400 {
    color: #f87171;
}

/* Rounded sizes */
.rounded-2xl {
    border-radius: 1rem;
}

.rounded-3xl {
    border-radius: 1.5rem;
}

/* Inset negativo */
.-inset-0\.5 {
    inset: -0.125rem;
}

.-inset-1 {
    inset: -0.25rem;
}

/* Gradientes para anillo del avatar */
.from-cyan-400 {
    --tw-gradient-from: #22d3ee;
}

.to-blue-400 {
    --tw-gradient-to: #60a5fa;
}

.via-blue-500 {
    --tw-gradient-via: #3b82f6;
}

.to-purple-500 {
    --tw-gradient-to: #a855f7;
}

.from-amber-400 {
    --tw-gradient-from: #fbbf24;
}

.to-orange-400 {
    --tw-gradient-to: #fb923c;
}

.via-orange-500 {
    --tw-gradient-via: #f97316;
}

.to-red-500 {
    --tw-gradient-to: #ef4444;
}

/* Opacidad */
.opacity-60 {
    opacity: 0.6;
}

/* Pointer events */
.pointer-events-none {
    pointer-events: none;
}

/* Responsive translate-x-0 para lg */
@media (min-width: 1024px) {
    .lg\:translate-x-0 {
        --tw-translate-x: 0px !important;
        transform: translateX(0px) !important;
    }
}

/* Fix para sidebar visible en desktop */
@media (min-width: 1024px) {
    aside.translate-x-full.lg\:translate-x-0 {
        transform: translateX(0px) !important;
    }
}