/* =============================================================================
   INMOCRM - COMMON STYLES (Mediterranean Luxury)
   Refactored for Tailwind CSS v4
   ========================================================================== */

/* 1. COMPONENTES BASE (Utilities that go beyond Tailwind) */

/* Typography Helpers */
.font-brand-serif { font-family: var(--font-serif); }
.font-brand-sans { font-family: var(--font-sans); }

.text-gradient-gold {
    background: linear-gradient(135deg, var(--color-gold-sand) 0%, #8a6d3b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glassmorphism */
.glass-effect {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-dark {
    background: rgba(26, 42, 58, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 2. REUSABLE COMPONENTS */

/* Buttons Premium */
.btn-premium {
    @apply inline-flex items-center justify-center gap-2 px-8 py-4 rounded-xl font-black uppercase tracking-widest text-[10px] transition-all duration-300 transform active:scale-95 shadow-lg hover:shadow-xl;
}

.btn-premium-gold {
    @apply btn-premium bg-gold-sand text-med-navy border border-gold-sand/20 hover:bg-white;
}

.btn-premium-navy {
    @apply btn-premium bg-med-navy text-gold-sand border border-white/10 hover:bg-brand-800;
}

/* Mediterranean Cards - Handled by utility card-mediterranean */

/* 3. LAYOUT UTILITIES - Handled by container-premium utility */

/* 4. HEADER & NAVIGATION - Logic for scrolled state handled here if not in utility */
.site-header.scrolled .brand-name {
    @apply text-med-navy;
}

.site-header.scrolled .nav-link {
    @apply text-brand-600 hover:text-med-navy;
}

.site-header.scrolled .header-divider {
    @apply bg-brand-100;
}

/* Nav Links Premium State */
.site-header .nav-link {
    @apply relative transition-all duration-300;
}

.site-header .nav-link::after {
    content: '';
    @apply absolute bottom-0 left-1/2 w-0 h-0.5 bg-gold-sand transition-all duration-300 -translate-x-1/2;
}

.site-header .nav-link:hover::after {
    @apply w-1/2;
}

.site-header .nav-link.active {
    @apply text-gold-sand !opacity-100;
}

.site-header .nav-link.active::after {
    @apply w-full;
}

/* Dropdown Premium Styling */
.dropdown-menu.glass-dark {
    @apply bg-med-navy/95 backdrop-blur-2xl border border-white/10 shadow-2xl p-2;
}

.dropdown-item {
    @apply rounded-xl transition-all duration-300;
}

/* 5. ANIMATIONS (Persistent) */
@utility text-shadow-premium {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 40px rgba(0, 0, 0, 0.2);
}

@utility text-shadow-subtle {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 5. V4 COMPATIBILITY OVERRIDES */

/* Ensure native CSS variables from @theme are used when possible */

:root {

    /* Map legacy common-styles names to new theme variables if needed by old scripts */

    --color-primary: var(--color-med-navy);

    --color-secondary: var(--color-gold-sand);

    --color-accent: var(--color-sea-teal);

}



/* 6. AVATAR & SYNC STATUS RING */

.avatar-status-ring {

    position: relative;

    border: 2px solid transparent;

    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

}



/* Booting State (Loading UI - Solid Gold Glow) */

.avatar-status-ring.status-booting {

    border-color: var(--color-gold-sand);

    box-shadow: 0 0 20px rgba(197, 160, 89, 0.4);

    animation: avatar-boot-pulse 2s infinite;

}



@keyframes avatar-boot-pulse {

    0%, 100% { box-shadow: 0 0 10px rgba(197, 160, 89, 0.2); border-color: rgba(197, 160, 89, 0.6); }

    50% { box-shadow: 0 0 25px rgba(197, 160, 89, 0.5); border-color: var(--color-gold-sand); }

}



/* Online/Synced State (Sea Teal) */

.avatar-status-ring.status-online {

    border-color: var(--color-sea-teal);

    box-shadow: 0 0 10px rgba(45, 156, 139, 0.2);

}



/* Syncing/Updating State (Pulsing Gold) */

.avatar-status-ring.status-syncing {

    border-color: var(--color-gold-sand);

    animation: avatar-pulse 1.5s ease-in-out infinite;

    box-shadow: 0 0 15px rgba(197, 160, 89, 0.3);

}



/* Offline State (Gray) */

.avatar-status-ring.status-offline {

    border-color: #94a3b8;

    filter: grayscale(0.8);

    opacity: 0.7;

}



/* Error State (Red) */

.avatar-status-ring.status-error {

    border-color: #ef4444;

    animation: avatar-shake 0.5s cubic-bezier(.36,.07,.19,.97) both;

}



@keyframes avatar-spin {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}



@keyframes avatar-pulse {

    0%, 100% { opacity: 1; transform: scale(1); }

    50% { opacity: 0.8; transform: scale(0.98); border-width: 3px; }

}



@keyframes avatar-shake {

    10%, 90% { transform: translate3d(-1px, 0, 0); }

    20%, 80% { transform: translate3d(2px, 0, 0); }

    30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }

    40%, 60% { transform: translate3d(3px, 0, 0); }

}