/*
Este archivo contiene estilos globales y animaciones compartidas
para mantener la consistencia visual en toda la plataforma Conexium.
*/

/* Importación de fuentes del Sistema de Diseño */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');


/* Clase de transición para elementos interactivos (reemplaza el selector global *) */
.transition-colors {
    transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Transiciones específicas para elementos comunes */
button, a, input, select, textarea, .card, .dashboard-card {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* ==========================================
   REGLAS BASE DE TIPOGRAFÍA
   ========================================== */
body {
    @apply font-sans text-light-text-secondary dark:text-dark-text-secondary;
}

h1, h2, h3, h4, h5, h6 {
    @apply text-light-text-main dark:text-dark-text-main;
    line-height: 1.25; /* tight */
}

h1 { @apply text-3xl font-bold; } /* 48px */
h2 { @apply text-2xl font-bold; } /* 36px */
h3 { @apply text-xl font-bold; } /* 28px */
h4 { @apply text-lg font-semibold; } /* 24px */
h5 { @apply text-base font-semibold; } /* 20px */
h6 { @apply text-base font-semibold; } /* 18px */

p, li, span {
    line-height: 1.5; /* normal */
}

p.prose {
    line-height: 1.75; /* relaxed */
}

small {
    @apply text-sm;
}

/* Reglas responsivas para tipografía móvil */
@media (max-width: 768px) {
    h1 { @apply text-2xl; } /* 32px */
    h2 { @apply text-xl; } /* 28px */
    h3 { @apply text-lg; } /* 24px */
    h4 { @apply text-base; } /* 20px */
    /* El texto del cuerpo (16px) no se reduce */
}

/* ==========================================
   REGLAS BASE DE COLORES
   ========================================== */
body {
    @apply bg-light-bg-main dark:bg-dark-bg-base;
}

.card, .dashboard-card, .modal-content {
    @apply bg-light-bg-elevated-1 dark:bg-dark-bg-elevated-1;
}

.modal {
    @apply bg-black/50 dark:bg-black/70;
}

/* ==========================================
   REGLAS BASE DE NOTIFICACIONES
   ========================================== */
.notification {
    @apply p-4 border-l-4 rounded-r-lg;
}
.notification-success {
    @apply bg-green-50 border-brand-green text-green-800 dark:bg-dark-bg-elevated-1 dark:border-dark-brand-green dark:text-dark-brand-green;
}
.notification-info {
    @apply bg-blue-50 border-brand-blue text-blue-800 dark:bg-dark-bg-elevated-1 dark:border-dark-brand-blue dark:text-dark-brand-blue;
}
.notification-warning {
    @apply bg-yellow-50 border-brand-yellow text-yellow-800 dark:bg-dark-bg-elevated-1 dark:border-brand-yellow dark:text-brand-yellow;
}
.notification-error {
    @apply bg-red-50 border-brand-red text-red-800 dark:bg-dark-bg-elevated-1 dark:border-dark-brand-red dark:text-dark-brand-red;
}
.notification strong {
    @apply font-bold;
}


/* ==========================================
   ANIMACIONES
   ========================================== */

/* Animación de aparición */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(1rem); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Animación de pulso para preloader */
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.7; }
}

/* Sistema de delays para animaciones escalonadas */
.animate-on-load {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Delays automáticos para elementos secuenciales */
.animate-on-load:nth-child(1) { animation-delay: 0ms; }
.animate-on-load:nth-child(2) { animation-delay: 100ms; }
.animate-on-load:nth-child(3) { animation-delay: 200ms; }
.animate-on-load:nth-child(4) { animation-delay: 300ms; }
.animate-on-load:nth-child(5) { animation-delay: 400ms; }
.animate-on-load:nth-child(6) { animation-delay: 500ms; }

/* Animación de rebote para logros */
@keyframes bounceIn {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}
.bounce-in {
    animation: bounceIn 0.6s ease-out;
}

/* ==========================================
   FONDOS DECORATIVOS
   ========================================== */

/* Fondo de grilla para páginas */
.grid-background {
    background-image: linear-gradient(to right, #e2e8f0 1px, transparent 1px),
                      linear-gradient(to bottom, #e2e8f0 1px, transparent 1px);
    background-size: 25px 35px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 100%, #000 60%, transparent 100%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 100%, #000 60%, transparent 100%);
}
.dark .grid-background {
    background-image: linear-gradient(to right, #1e293b 1px, transparent 1px),
                      linear-gradient(to bottom, #1e293b 1px, transparent 1px);
}

.grid-background-fade {
    background-image: linear-gradient(to right, #e2e8f0 1px, transparent 1px),
                      linear-gradient(to bottom, #e2e8f0 1px, transparent 1px);
    background-size: 20px 30px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 100%, #000 60%, transparent 100%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 100%, #000 60%, transparent 100%);
}
.dark .grid-background-fade {
    background-image: linear-gradient(to right, #1e293b 1px, transparent 1px),
                      linear-gradient(to bottom, #1e293b 1px, transparent 1px);
}

/* ==========================================
   PRELOADER
   ========================================== */

#preloader {
    position: fixed;
    inset: 0;
    background-color: #f8fafc;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.6s ease-out;
}
.dark #preloader {
    background-color: #020617;
}
#preloader img {
    animation: pulse 1.8s ease-in-out infinite;
}

/* ==========================================
   MODALES
   ========================================== */

.modal {
    transition: opacity 0.3s ease-in-out;
}
.modal-content {
    transition: transform 0.3s ease-in-out;
}
.modal.opacity-0 {
    pointer-events: none;
}
.modal.opacity-0 .modal-content {
    transform: translateY(1rem) scale(0.95);
}

/* ==========================================
   NOTIFICACIONES TOAST
   ========================================== */

#toast-notification {
    transition: opacity 0.3s, transform 0.3s;
    transform: translateY(-20px) scale(0.95);
}
#toast-notification.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ==========================================
   COMPONENTES INTERACTIVOS
   ========================================== */

/* Botones touch-friendly */
.touch-target {
    min-height: 44px;
    min-width: 44px;
}

/* Cards con hover effect */
.dashboard-card {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
.dashboard-card:hover {
    transform: translateY(-2px);
}

/* ==========================================
   MEDIA QUERIES
   ========================================== */

/* Optimizaciones para móvil */
@media (max-width: 640px) {
    /* Títulos más pequeños en móvil */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 1.5rem !important;
    }

    /* Botones touch-friendly en móvil */
    button,
    a[class*="btn"],
    a[class*="button"],
    .touch-target {
        min-height: 48px;
        min-width: 48px;
    }

    /* Cards con menos padding en móvil */
    .dashboard-card {
        padding: 1rem !important;
    }

    /* Deshabilitar efectos hover en móvil */
    .dashboard-card:hover {
        transform: none !important;
    }

    /* Modales ocupan toda la pantalla en móvil */
    .modal .modal-content {
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
        width: 100vw;
    }
}
/* Estilos de formularios optimizados para móvil */
@media (max-width: 640px) {
    input[type="text"],
    input[type="date"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="file"],
    textarea,
    select {
        /* Aumentar el tamaño de fuente a 16px previene el zoom automático en iOS */
        font-size: 16px !important;
        /* Aumentar el padding para un mejor toque */
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* Botones de formulario a ancho completo para fácil acceso */
    .form-actions {
        flex-direction: column-reverse;
        gap: 12px;
    }

    .form-actions a,
    .form-actions button {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

/* Tablet adjustments */
@media (min-width: 641px) and (max-width: 1024px) {
    h1 {
        font-size: 2.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    body * {
        visibility: hidden;
    }
    .print-content, .print-content * {
        visibility: visible;
    }
}