/**
 * Estilos personalizados para Koalvia
 * Complementa Tailwind CSS con variables CSS y estilos adicionales
 */

:root {
    /* Colores principales - sincronizados con Tailwind config */
    --color-primary: #1f3b61;
    --color-accent: #12b5a2;
    --color-background-light: #f6f7f8;
    --color-background-dark: #14181e;
    
    /* Espaciado y tamaños */
    --max-width-content: 1280px;
    --max-width-form: 1000px;
    
    /* Transiciones */
    --transition-base: all 0.2s ease-in-out;
    --transition-slow: all 0.3s ease-in-out;
}

/* Utilidades adicionales */
.smooth-scroll {
    scroll-behavior: smooth;
}

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

/* Estilos para el header sticky */
#main-header {
    /* Sin transiciones en el header para evitar efectos visuales extraños */
    will-change: auto;
}

/* Optimización para el logo/texto del header - evitar cambios visuales */
#main-header a[href*="index.html"],
#main-header > div > div > a:first-child {
    /* Evitar cambios visuales durante la navegación */
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Asegurar que todos los estados del logo mantengan los mismos estilos - SIN CAMBIOS */
#main-header a[href*="index.html"]:link,
#main-header a[href*="index.html"]:visited,
#main-header a[href*="index.html"]:hover,
#main-header a[href*="index.html"]:active,
#main-header a[href*="index.html"]:focus,
#main-header a[href*="index.html"]:focus-visible,
#main-header > div > div > a:first-child:link,
#main-header > div > div > a:first-child:visited,
#main-header > div > div > a:first-child:hover,
#main-header > div > div > a:first-child:active,
#main-header > div > div > a:first-child:focus,
#main-header > div > div > a:first-child:focus-visible {
    color: #1f3b61 !important;
    text-decoration: none !important;
    outline: none !important;
    border: none !important;
    background: transparent !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Prevenir cambios de color en el icono y texto - FORZAR COLOR FIJO */
#main-header a[href*="index.html"] span,
#main-header a[href*="index.html"] h2,
#main-header > div > div > a:first-child span,
#main-header > div > div > a:first-child h2 {
    color: #1f3b61 !important;
    transition: none !important;
    opacity: 1 !important;
}

/* Dark mode - mantener color consistente */
.dark #main-header a[href*="index.html"],
.dark #main-header > div > div > a:first-child,
.dark #main-header a[href*="index.html"] span,
.dark #main-header a[href*="index.html"] h2,
.dark #main-header > div > div > a:first-child span,
.dark #main-header > div > div > a:first-child h2 {
    color: #ffffff !important;
}

/* Mejoras de focus para accesibilidad */
input:focus,
textarea:focus,
select:focus,
button:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Estilos para formularios */
.form-input {
    transition: var(--transition-base);
}

.form-input:focus {
    box-shadow: 0 0 0 3px rgba(18, 181, 162, 0.1);
}

/* Utilidades de layout */
.layout-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.layout-content-container {
    width: 100%;
    max-width: var(--max-width-content);
    margin-left: auto;
    margin-right: auto;
}

/* Animaciones suaves */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Mejoras de impresión */
@media print {
    header,
    footer,
    nav,
    button,
    .no-print {
        display: none !important;
    }
}