/* === COMPONENTES ESTILO DAISYUI CON TAILWIND === */

/* Botones */
.btn {
    @apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-full font-semibold transition-all duration-200 cursor-pointer select-none;
    @apply hover:scale-95 active:scale-90;
}

.btn-primary {
    @apply bg-primary text-primary-content;
    @apply hover:opacity-90;
}

.btn-secondary {
    @apply bg-secondary text-secondary-content;
    @apply hover:opacity-90;
}

.btn-ghost {
    @apply bg-transparent text-base-content;
    @apply hover:bg-base-200;
}

.btn-sm {
    @apply px-3 py-1 text-sm;
}

.btn-lg {
    @apply px-6 py-3 text-lg;
}

.btn-circle {
    @apply rounded-full w-12 h-12 p-0;
}

/* Cards */
.card {
    @apply rounded-2xl overflow-hidden;
}

.card-body {
    @apply p-6;
}

.card-title {
    @apply text-xl font-bold mb-2;
}

.card-actions {
    @apply flex gap-2 mt-4;
}

/* Badge */
.badge {
    @apply inline-flex items-center justify-center px-3 py-1 rounded-full text-xs font-semibold;
}

.badge-primary {
    @apply bg-primary text-primary-content;
}

.badge-secondary {
    @apply bg-secondary text-secondary-content;
}

.badge-success {
    @apply bg-success text-success-content;
}

.badge-warning {
    @apply bg-warning text-warning-content;
}

.badge-error {
    @apply bg-error text-error-content;
}

/* Carousel */
.carousel {
    @apply relative overflow-x-auto overflow-y-hidden rounded-2xl flex;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.carousel-item {
    @apply w-full flex-shrink-0;
    scroll-snap-align: center;
}

/* Loading Spinner */
.loading {
    @apply inline-block border-4 border-base-300 border-t-primary rounded-full animate-spin;
}

.loading-spinner {
    @apply w-8 h-8;
}

.loading-lg {
    @apply w-12 h-12;
}

/* Navbar */
.navbar {
    @apply flex items-center justify-between;
}

.navbar-start {
    @apply flex-none;
}

.navbar-center {
    @apply flex-1 flex justify-center;
}

.navbar-end {
    @apply flex-none;
}

/* Footer */
.footer {
    @apply flex flex-col items-center;
}

.footer-center {
    @apply text-center;
}

/* Utilidades */
.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

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

/* Scroll suave */
html {
    scroll-behavior: smooth;
}