* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
    overflow: hidden;
}

/* Efectos de fondo flotantes */
body::before,
body::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 0;
}

body::before {
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='0.03' d='M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-2 .89-2 2v11c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zM10 4h4v2h-4V4zm10 15H4V8h16v11z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='0.04' d='M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='0.035' d='M20 2H4c-1 0-2 .9-2 2v3.01c0 .72.43 1.34 1 1.69V20c0 1.1 1.1 2 2 2h14c.9 0 2-.9 2-2V8.7c.57-.35 1-.97 1-1.69V4c0-1.1-1-2-2-2zm-5 12H9v-2h6v2zm5-7H4V4h16v3z'/%3E%3C/svg%3E");
    background-position: 10% 20%, 85% 70%, 50% 50%;
    background-size: 200px, 150px, 180px;
    background-repeat: no-repeat;
    animation: float1 25s ease-in-out infinite;
}

body::after {
    background-image: 
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='0.025' d='M3 3h8v8H3V3zm10 0h8v8h-8V3zM3 13h8v8H3v-8zm15 0h-2v3h-3v2h3v3h2v-3h3v-2h-3v-3z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' fill-opacity='0.03' d='M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z'/%3E%3C/svg%3E");
    background-position: 75% 25%, 20% 75%;
    background-size: 160px, 140px;
    background-repeat: no-repeat;
    animation: float2 30s ease-in-out infinite;
}

@keyframes float1 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    25% {
        transform: translate(10px, -20px) rotate(5deg);
        opacity: 0.8;
    }
    50% {
        transform: translate(-10px, -40px) rotate(-5deg);
        opacity: 1;
    }
    75% {
        transform: translate(15px, -20px) rotate(3deg);
        opacity: 0.9;
    }
}

@keyframes float2 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
        opacity: 1;
    }
    33% {
        transform: translate(-15px, -25px) rotate(-8deg);
        opacity: 0.85;
    }
    66% {
        transform: translate(12px, -35px) rotate(6deg);
        opacity: 0.95;
    }
}

.login-container {
    width: 100%;
    max-width: 450px;
    position: relative;
    z-index: 1;
}

.login-card {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.5s ease;
}

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

.logo-container {
    text-align: center;
    margin-bottom: 30px;
}

.logo-icon {
    font-size: 60px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 10px;
}

.app-name {
    font-size: 24px;
    font-weight: bold;
    color: #1e293b;
    margin-bottom: 5px;
}

.app-subtitle {
    font-size: 14px;
    color: #64748b;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    color: #475569;
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 14px;
}

.input-group {
    position: relative;
    width: 100%;
}

.input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 18px;
    z-index: 10;
    pointer-events: none;
    transition: color 0.3s ease;
}

.input-group:focus-within .input-icon {
    color: #f59e0b;
}

.form-control {
    width: 100%;
    padding: 14px 15px 14px 45px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-size: 15px;
    transition: all 0.3s ease;
    background: #f8fafc;
    display: block;
}

.form-control:focus {
    outline: none;
    border-color: #f59e0b;
    background: white;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.btn-login {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(245, 158, 11, 0.3);
}

.btn-login:active {
    transform: translateY(0);
}

.alert {
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}

.alert-danger {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.alert-success {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

.footer-text {
    text-align: center;
    margin-top: 30px;
    color: #64748b;
    font-size: 13px;
}

.footer-text a {
    color: #f59e0b;
    text-decoration: none;
    font-weight: 600;
}

.footer-text a:hover {
    text-decoration: underline;
}

/* Loading spinner */
.spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
    margin: 0 auto;
}

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

.btn-login.loading .btn-text {
    display: none;
}

.btn-login.loading .spinner {
    display: block;
}

/* Botón ojo contraseña */
.btn-eye {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    z-index: 10;
    color: #64748b;
    padding: 5px;
    transition: color 0.3s ease;
}

.btn-eye:hover {
    color: #f59e0b;
}

/* Responsive */
@media (max-width: 576px) {
    .login-card {
        padding: 30px 20px;
    }
    
    .app-name {
        font-size: 20px;
    }
    
    .logo-icon {
        font-size: 50px;
    }
}