/* ==========================================
   5. LAYOUT DE AUTENTICACIÓN (LOGIN/REGISTRO)
   ========================================== */
.auth-layout {
    display: flex;
    height: 100vh;
    width: 100%;
}

.auth-brand {
    flex: 1;
    background-color: var(--color-blue-main);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
}

.auth-brand h1 { color: var(--color-white); }

.logo-circle {
    width: 100px;
    height: 100px;
    background-color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-blue-main);
    font-size: 2rem;
    font-weight: 900;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.auth-form-container {
    flex: 1;
    background-color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    position: relative;
}

.auth-form-wrapper { width: 100%; max-width: 400px; }
.mobile-brand-title { display: none; text-align: center; margin-bottom: 2rem; }

/* Barra de fuerza de contraseña */
.pwd-bar-container { height: 8px; width: 100%; background-color: var(--color-border); border-radius: 4px; overflow: hidden; margin-top: 0.5rem; }
.pwd-bar { height: 100%; width: 0%; transition: width 0.3s, background-color 0.3s; }
.pwd-weak { background-color: var(--color-error); }
.pwd-medium { background-color: var(--color-warning); }
.pwd-strong { background-color: var(--color-green); }

/* RESPONSIVE DESIGN */
@media (max-width: 768px) {
    .auth-brand { display: none; }
    .mobile-brand-title { display: block; }
}