/**
 * Estilos específicos para página de Login
 */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: var(--spacing-lg);
}

.login-container {
    width: 100%;
    max-width: 420px;
}

.login-card {
    background: var(--color-white);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-2xl);
    animation: fadeIn 0.5s ease;
}

.login-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.login-logo {
    width: 120px;
    height: auto;
    margin-bottom: var(--spacing-lg);
}

.login-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--color-gray-800);
    margin-bottom: var(--spacing-xs);
}

.login-subtitle {
    color: var(--color-gray-600);
    font-size: var(--font-size-sm);
}

.login-form .form-group {
    margin-bottom: var(--spacing-lg);
}

.login-form .form-control {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-base);
}

.login-form .btn-primary {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-lg);
    width: 100%;
    margin-top: var(--spacing-md);
}

.login-footer {
    text-align: center;
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-gray-200);
}

.login-footer p {
    font-size: var(--font-size-sm);
    color: var(--color-gray-600);
}

/* Input with icon */
.input-group {
    position: relative;
}

.input-icon {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-500);
    font-size: var(--font-size-lg);
}

.input-group .form-control {
    padding-left: calc(var(--spacing-lg) + var(--spacing-xl));
}

/* Password toggle */
.password-toggle {
    position: absolute;
    right: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-gray-500);
    cursor: pointer;
    padding: var(--spacing-xs);
}

.password-toggle:hover {
    color: var(--color-primary);
}

/* Remember me checkbox */
.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

/* Error shake animation */
@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-10px);
    }

    75% {
        transform: translateX(10px);
    }
}

.shake {
    animation: shake 0.3s ease;
}

/* Responsive */
@media (max-width: 480px) {
    .login-card {
        padding: var(--spacing-lg);
    }

    .login-logo {
        width: 100px;
    }

    .login-title {
        font-size: var(--font-size-xl);
    }
}