/* Animaciones del fondo */
@keyframes float {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.6; transform: scale(1.1); }
}

@keyframes drift {
    0% { transform: translateX(0px) translateY(0px); }
    25% { transform: translateX(20px) translateY(-10px); }
    50% { transform: translateX(-15px) translateY(-20px); }
    75% { transform: translateX(-20px) translateY(-5px); }
    100% { transform: translateX(0px) translateY(0px); }
}

@keyframes wave {
    0%, 100% { transform: translateX(0px) translateY(0px) rotate(0deg); }
    25% { transform: translateX(10px) translateY(-5px) rotate(90deg); }
    50% { transform: translateX(-5px) translateY(-10px) rotate(180deg); }
    75% { transform: translateX(-10px) translateY(-5px) rotate(270deg); }
}

@keyframes gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.animated-bg {
    background: linear-gradient(-45deg, #4f46e5, #3b82f6, #2563eb, #1d4ed8, #1e40af);
    background-size: 400% 400%;
    animation: gradient 8s ease infinite;
}

.float-1 { animation: float 6s ease-in-out infinite; }
.float-2 { animation: float 8s ease-in-out infinite reverse; }
.pulse-1 { animation: pulse 4s ease-in-out infinite; }
.pulse-2 { animation: pulse 6s ease-in-out infinite reverse; }
.drift-1 { animation: drift 10s ease-in-out infinite; }
.drift-2 { animation: drift 12s ease-in-out infinite reverse; }
.wave-1 { animation: wave 7s ease-in-out infinite; }
.wave-2 { animation: wave 9s ease-in-out infinite reverse; }

/* Estilos responsivos */

/* Logo responsivo - Evitar estiramiento */
.logo-responsive {
    max-width: 100%;
    height: auto;
    max-height: 12rem; /* 192px */
    object-fit: contain;
    width: auto;
}

/* CORRECIÓN PRINCIPAL: Centrado vertical de iconos */
.input-icon-container {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    padding-left: 0.75rem; /* pl-3 */
    pointer-events: none;
}

.input-icon {
    height: 1.25rem; /* h-5 */
    width: 1.25rem; /* w-5 */
    color: #9CA3AF; /* text-gray-400 */
}

/* Ajuste del padding izquierdo para inputs con iconos */
.input-with-icon {
    padding-left: 2.5rem; /* pl-10 */
}

/* Tablets grandes y laptops pequeñas */
@media (max-width: 1024px) {
    .max-w-4xl {
        max-width: 90%;
        margin: 1.5rem;
    }
    
    .p-12 {
        padding: 2.5rem;
    }
}

/* Tablets */
@media (max-width: 768px) {
    .flex {
        flex-direction: column;
    }
    
    .flex-1:first-child {
        min-height: 350px;
        padding: 2rem !important;
    }
    
    .flex-1:last-child {
        padding: 2rem !important;
    }
    
    .max-w-4xl {
        max-width: 95%;
        margin: 1rem;
    }
    
    .min-h-\[500px\] {
        min-height: 600px;
    }
    
    .logo-responsive {
        max-height: 10rem; /* 160px */
    }
    
    /* Ocultar elementos decorativos grandes en tablets */
    .w-80.h-80 {
        display: none;
    }
    
    /* Ajustes de iconos para tablets */
    .input-icon {
        height: 1.125rem;
        width: 1.125rem;
    }
    
    .input-with-icon {
        padding-left: 2.5rem;
    }
    
    .input-icon-container {
        padding-left: 0.75rem;
    }
}

/* Móviles grandes */
@media (max-width: 640px) {
    .flex-1:first-child {
        min-height: 280px;
        padding: 1.5rem !important;
    }
    
    .flex-1:last-child {
        padding: 1.5rem !important;
    }
    
    .text-3xl {
        font-size: 1.75rem;
        line-height: 1.2;
    }
    
    .text-lg {
        font-size: 1.125rem;
    }
    
    .mb-8 {
        margin-bottom: 1.5rem;
    }
    
    .logo-responsive {
        max-height: 8rem; /* 128px */
    }
    
    .max-w-sm {
        max-width: 100%;
    }
    
    /* Ajustes de iconos para móviles grandes */
    .input-icon {
        height: 1rem;
        width: 1rem;
    }
    
    .input-with-icon {
        padding-left: 2.25rem;
    }
    
    .input-icon-container {
        padding-left: 0.75rem;
    }
}

/* Móviles pequeños */
@media (max-width: 480px) {
    .flex-1:first-child {
        min-height: 250px;
        padding: 1rem !important;
    }
    
    .flex-1:last-child {
        padding: 1rem !important;
    }
    
    .text-3xl {
        font-size: 1.5rem;
    }
    
    .text-lg {
        font-size: 1rem;
    }
    
    .text-2xl {
        font-size: 1.25rem;
    }
    
    .mb-8 {
        margin-bottom: 1rem;
    }
    
    .mb-4 {
        margin-bottom: 0.75rem;
    }
    
    .logo-responsive {
        max-height: 6rem; /* 96px */
    }
    
    .max-w-4xl {
        margin: 0.5rem;
    }
    
    .min-h-\[500px\] {
        min-height: 500px;
    }
    
    /* Ocultar todos los elementos decorativos en móviles pequeños */
    .absolute.w-40.h-40,
    .absolute.w-20.h-20,
    .absolute.w-16.h-16,
    .absolute.w-32.h-32,
    .absolute.w-24.h-24,
    .absolute.w-28.h-28,
    .absolute.w-18.h-18,
    .absolute.w-22.h-22 {
        display: none;
    }
    
    /* Ajustes de iconos para móviles pequeños */
    .input-icon {
        height: 0.875rem;
        width: 0.875rem;
    }
    
    .input-with-icon {
        padding-left: 2rem;
    }
    
    .input-icon-container {
        padding-left: 0.625rem;
    }
}

/* Móviles muy pequeños */
@media (max-width: 320px) {
    .flex-1:first-child {
        min-height: 220px;
        padding: 0.75rem !important;
    }
    
    .flex-1:last-child {
        padding: 0.75rem !important;
    }
    
    .text-3xl {
        font-size: 1.25rem;
    }
    
    .text-lg {
        font-size: 0.875rem;
    }
    
    .text-2xl {
        font-size: 1.125rem;
    }
    
    .logo-responsive {
        max-height: 5rem; /* 80px */
    }
    
    .py-3 {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    
    .space-y-6 > * + * {
        margin-top: 1rem;
    }
    
    /* Ajustes de iconos para móviles muy pequeños */
    .input-icon {
        height: 0.75rem;
        width: 0.75rem;
    }
    
    .input-with-icon {
        padding-left: 1.875rem;
    }
    
    .input-icon-container {
        padding-left: 0.5rem;
    }
}