/*
Este archivo contiene clases utilitarias para usar en toda la plataforma Conexium.
Estas clases complementan a Tailwind CSS con funcionalidades específicas del proyecto.
*/

/* ==========================================
   ANIMATION DELAYS
   ========================================== */

/* Delays para animaciones escalonadas */
.animate-delay-0   { animation-delay: 0ms; }
.animate-delay-50  { animation-delay: 50ms; }
.animate-delay-100 { animation-delay: 100ms; }
.animate-delay-150 { animation-delay: 150ms; }
.animate-delay-200 { animation-delay: 200ms; }
.animate-delay-240 { animation-delay: 240ms; }
.animate-delay-250 { animation-delay: 250ms; }
.animate-delay-300 { animation-delay: 300ms; }
.animate-delay-350 { animation-delay: 350ms; }
.animate-delay-360 { animation-delay: 360ms; }
.animate-delay-400 { animation-delay: 400ms; }
.animate-delay-420 { animation-delay: 420ms; }
.animate-delay-450 { animation-delay: 450ms; }
.animate-delay-500 { animation-delay: 500ms; }

/* ==========================================
   TRANSICIONES
   ========================================== */

/* Clase para elementos que necesitan transiciones de color */
.transition-colors {
    transition: background-color 0.3s ease-in-out,
                border-color 0.3s ease-in-out,
                color 0.3s ease-in-out;
}

/* Transición para transformaciones (hover effects, etc.) */
.transition-transform {
    transition: transform 0.3s ease-out;
}

/* Transición completa (color + transform) */
.transition-all-smooth {
    transition: all 0.3s ease-in-out;
}

/* ==========================================
   HELPERS DE PERFORMANCE
   ========================================== */

/* Para elementos que se animan frecuentemente */
.will-change-transform {
    will-change: transform;
}

.will-change-opacity {
    will-change: opacity;
}

/* ==========================================
   Z-INDEX LAYERS (Sistema consistente)
   ========================================== */

.z-base { z-index: 0; }
.z-dropdown { z-index: 10; }
.z-sticky { z-index: 20; }
.z-modal { z-index: 30; }
.z-mobile-menu { z-index: 40; }
.z-popover { z-index: 45; }
.z-toast { z-index: 50; }
.z-notification-dropdown { z-index: 55; }

/* ==========================================
   ACCESSIBILITY HELPERS
   ========================================== */

/* Ocultar visualmente pero mantener para screen readers */
.sr-only-focusable:not(:focus):not(:focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Skip to main content link */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 100;
}

.skip-to-content:focus {
    top: 0;
}

/* ==========================================
   RESPONSIVE HELPERS
   ========================================== */

/*
 * NOTE: .show-mobile and .hide-mobile are in mobile-improvements.css
 * Below are only tablet/desktop helpers not covered there
 */

/* Mostrar solo en tablet */
@media (max-width: 640px), (min-width: 1025px) {
    .show-tablet { display: none !important; }
}

/* Mostrar solo en desktop */
@media (max-width: 1024px) {
    .show-desktop { display: none !important; }
}

/* ==========================================
   SCROLLBAR CUSTOMIZATION
   ========================================== */

/* Scrollbar delgado y moderno */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

.scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgba(156, 163, 175, 0.5);
    border-radius: 3px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: rgba(156, 163, 175, 0.8);
}

/* Dark mode scrollbar */
.dark .scrollbar-thin {
    scrollbar-color: rgba(75, 85, 99, 0.5) transparent;
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: rgba(75, 85, 99, 0.5);
}

.dark .scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: rgba(75, 85, 99, 0.8);
}

/* ==========================================
   LOADING STATES
   ========================================== */

/* Skeleton loader pulse */
.skeleton-pulse {
    animation: skeleton-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Spinner loading */
.spinner {
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-left-color: currentColor;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ==========================================
   TEXT UTILITIES
   ========================================== */

/* Truncar texto con ellipsis */
.truncate-2-lines {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.truncate-3-lines {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Balance de texto para títulos */
.text-balance {
    text-wrap: balance;
}

/* ==========================================
   FOCUS STYLES
   ========================================== */

/* Focus ring moderno */
.focus-ring-modern:focus-visible {
    outline: 2px solid var(--color-primary, #3b82f6);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================
   MISC UTILITIES
   ========================================== */

/* Aspect ratios comunes */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }
.aspect-4-3 { aspect-ratio: 4 / 3; }

/* Backdrop blur para modales */
.backdrop-blur-modern {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}