/* Calendario de Mensajes - Custom Styles */

/* Filter Chips */
.filter-chip {
    @apply px-3 py-1 text-sm rounded-full border transition-all duration-200 cursor-pointer;
    @apply bg-gray-100 border-gray-300 text-gray-700;
    @apply hover:bg-gray-200 hover:border-gray-400;
    @apply dark:bg-gray-800 dark:border-gray-600 dark:text-gray-300;
    @apply dark:hover:bg-gray-700 dark:hover:border-gray-500;
}

.filter-chip.active {
    @apply bg-blue-100 border-blue-300 text-blue-800;
    @apply dark:bg-blue-900/30 dark:border-blue-700 dark:text-blue-400;
}

/* Calendar Grid */
#calendarGrid {
    @apply grid-cols-7 gap-1;
}

#calendarGrid > div {
    @apply min-h-[40px] flex items-center justify-center;
    @apply border border-gray-200 dark:border-gray-700;
    @apply transition-colors duration-200;
}

#calendarGrid > div:hover {
    @apply bg-gray-50 dark:bg-gray-800;
}

/* Event Cards */
.event-card {
    @apply transition-all duration-300;
}

.event-card:hover {
    @apply shadow-md;
}

/* Checkboxes */
.event-checkbox {
    @apply w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded;
    @apply focus:ring-blue-500 dark:focus:ring-blue-600;
    @apply dark:ring-offset-gray-800 focus:ring-2;
    @apply dark:bg-gray-700 dark:border-gray-600;
}

/* Textareas */
.event-copy {
    @apply resize-none;
    @apply focus:ring-2 focus:ring-blue-500 focus:border-blue-500;
    @apply dark:focus:ring-blue-400 dark:focus:border-blue-400;
}

/* Reminder Chips */
.reminder-chip {
    @apply transition-all duration-200 cursor-pointer;
    @apply hover:scale-105;
}

.reminder-chip.active {
    @apply bg-blue-100 border-blue-300 text-blue-800;
    @apply dark:bg-blue-900/30 dark:border-blue-700 dark:text-blue-400;
}

/* Action Buttons */
.action-btn {
    @apply transition-all duration-200;
    @apply hover:scale-105 active:scale-95;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.action-btn:focus {
    @apply focus:ring-blue-500 dark:focus:ring-blue-400;
}

/* FAQ Toggles */
.faq-toggle {
    @apply transition-all duration-200;
    @apply hover:bg-gray-50 dark:hover:bg-gray-800;
}

.faq-icon {
    @apply transition-transform duration-200;
}

.faq-toggle:hover .faq-icon {
    @apply text-gray-700 dark:text-gray-300;
}

/* Toast Notifications */
.toast {
    @apply fixed top-4 right-4 z-50 px-6 py-3 rounded-lg text-white font-medium;
    @apply transition-all duration-300 transform;
    @apply shadow-lg;
}

.toast.success {
    @apply bg-green-600;
}

.toast.error {
    @apply bg-red-600;
}

.toast.info {
    @apply bg-blue-600;
}

/* Loading States */
.loading {
    @apply opacity-50 pointer-events-none;
}

.loading::after {
    content: '';
    @apply absolute inset-0 bg-gray-200 dark:bg-gray-700;
    @apply animate-pulse;
}

/* Print Styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-before: always;
    }
    
    .print-avoid-break {
        page-break-inside: avoid;
    }
}

/* Accessibility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus Styles */
.filter-chip:focus,
.action-btn:focus,
.event-checkbox:focus,
.event-copy:focus {
    @apply outline-none ring-2 ring-blue-500 ring-offset-2;
    @apply dark:ring-blue-400 dark:ring-offset-gray-900;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .filter-chip {
        @apply border-2;
    }
    
    .action-btn {
        @apply border-2 border-current;
    }
    
    .event-card {
        @apply border-2 border-gray-300 dark:border-gray-600;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .reminder-chip:hover,
    .action-btn:hover {
        transform: none !important;
    }
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .filter-chip {
        @apply px-2 py-1 text-xs;
    }
    
    .action-btn {
        @apply px-2 py-1 text-xs;
    }
    
    #calendarGrid {
        @apply gap-0;
    }
    
    #calendarGrid > div {
        @apply min-h-[32px] text-xs;
    }
}

/* Dark Mode Enhancements */
@media (prefers-color-scheme: dark) {
    .filter-chip {
        @apply bg-gray-800 border-gray-600 text-gray-300;
    }
    
    .filter-chip:hover {
        @apply bg-gray-700 border-gray-500;
    }
    
    .filter-chip.active {
        @apply bg-blue-900/30 border-blue-700 text-blue-400;
    }
}

/* Custom Scrollbar */
.event-copy::-webkit-scrollbar {
    width: 6px;
}

.event-copy::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-800;
    @apply rounded;
}

.event-copy::-webkit-scrollbar-thumb {
    @apply bg-gray-300 dark:bg-gray-600;
    @apply rounded;
}

.event-copy::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-400 dark:bg-gray-500;
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

/* Calendar Day Indicators */
.calendar-day {
    @apply relative;
}

.calendar-day.has-events::after {
    content: '';
    @apply absolute top-1 right-1 w-2 h-2 bg-green-500 rounded-full;
    @apply animate-pulse;
}

/* Event Status Indicators */
.event-status {
    @apply inline-flex items-center px-2 py-1 text-xs font-medium rounded-full;
}

.event-status.upcoming {
    @apply bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400;
}

.event-status.today {
    @apply bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400;
}

.event-status.past {
    @apply bg-gray-100 text-gray-800 dark:bg-gray-900/30 dark:text-gray-400;
}

/* Export Progress */
.export-progress {
    @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
}

.export-progress-content {
    @apply bg-white dark:bg-gray-900 rounded-lg p-6 max-w-sm w-full mx-4;
    @apply text-center;
}

.export-progress-bar {
    @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 mt-4;
}

.export-progress-fill {
    @apply bg-blue-600 h-2 rounded-full transition-all duration-300;
    width: 0%;
}

/* Responsive Calendar */
@media (max-width: 640px) {
    #calendarGrid {
        @apply grid-cols-7 gap-0;
    }
    
    #calendarGrid > div {
        @apply min-h-[28px] text-xs p-1;
    }
    
    .calendar-day.has-events::after {
        @apply w-1.5 h-1.5 top-0.5 right-0.5;
    }
}

/* Keyboard Navigation */
.filter-chip:focus-visible,
.action-btn:focus-visible,
.event-checkbox:focus-visible {
    @apply ring-2 ring-blue-500 ring-offset-2;
    @apply dark:ring-blue-400 dark:ring-offset-gray-900;
}

/* Selection States */
.event-card.selected {
    @apply ring-2 ring-blue-500 ring-offset-2;
    @apply dark:ring-blue-400 dark:ring-offset-gray-900;
}

/* Loading Spinner */
.spinner {
    @apply animate-spin rounded-full h-4 w-4 border-2 border-gray-300 border-t-blue-600;
}

/* Empty State */
.empty-state {
    @apply text-center py-12;
}

.empty-state-icon {
    @apply w-16 h-16 mx-auto text-gray-400 dark:text-gray-600 mb-4;
}

.empty-state-title {
    @apply text-lg font-medium text-gray-900 dark:text-white mb-2;
}

.empty-state-description {
    @apply text-gray-600 dark:text-gray-400;
}