/* ====================================================
   ESTILOS MAESTROS JASON OS 🚀
   ==================================================== */

/* Ocultar barras de scroll feas para que se vea como App nativa */
.hide-scrollbar::-webkit-scrollbar, .no-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar, .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* 🪟 Efectos de Cristal (Glassmorphism) */
.glass-panel { 
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(15px); 
    border: 1px solid rgba(255, 255, 255, 0.5); 
}
.dark .glass-panel { 
    background: rgba(15, 23, 42, 0.8); 
    border: 1px solid rgba(255, 255, 255, 0.05); 
}

.glass-header { 
    background: rgba(255, 255, 255, 0.8); 
    backdrop-filter: blur(10px); 
    border-bottom: 1px solid rgba(65, 105, 225, 0.1); 
}
.dark .glass-header { 
    background: rgba(15, 23, 42, 0.8); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05); 
}

/* 🎬 Animaciones Chulas */
.slide-up { animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes slideUp { 
    from { opacity: 0; transform: translateY(20px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.slide-down { animation: slideDown 0.3s ease-out forwards; transform-origin: top; }
@keyframes slideDown { 
    from { transform: scaleY(0); opacity: 0; height: 0; } 
    to { transform: scaleY(1); opacity: 1; height: auto; } 
}

/* 🔄 Rotaciones Suaves (Para los acordeones) */
.rotate-180-smooth { transform: rotate(180deg); transition: transform 0.3s; }
.rotate-0-smooth { transform: rotate(0deg); transition: transform 0.3s; }

/* 🔔 Animación de Campana de Notificaciones */
.campana-activa { animation: vibrar 0.5s cubic-bezier(.36,.07,.19,.97) infinite both; }
@keyframes vibrar {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    75% { transform: rotate(-15deg); }
}

/* 🖱️ Efectos de Botones del Catálogo */
.service-list-item { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.service-list-item:active { transform: scale(0.98); }

/* 📅 Cuadrícula de la Agenda Pro */
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.day-cell { min-height: 60px; transition: all 0.2s; cursor: pointer; }
.day-cell:active { transform: scale(0.95); }
.today { border: 2px solid #4169E1 !important; background: rgba(65, 105, 225, 0.05); }
.selected-day { background: #4169E1 !important; color: white !important; box-shadow: 0 4px 15px rgba(65,105,225,0.3); }
.selected-day span { color: white !important; }

/* 🍞 Alertas Flotantes (Toasts) */
.toast-show { transform: translate(-50%, 0) scale(1) !important; opacity: 1 !important; }