/* assets/css/login.css */
:root { 
    --coral: #F4694B; 
    --coral-d: #D94F31; 
    --peach: #FDE8DC; 
    --peach-d: #F9D0BB; 
    --brown: #3D2314; 
    --cream: #FFF8F4; 
    --gray: #7A6860; 
    --green: #8BC34A; 
}

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

body { 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    background: var(--cream); 
    display: flex; 
    min-height: 100vh; 
    justify-content: center; 
    align-items: center; 
    padding: 20px; 
}

/* Tarjeta Central Split-Screen */
.auth-card { 
    display: flex; 
    width: 100%; 
    max-width: 880px; 
    min-height: 540px; 
    background: white; 
    border-radius: 28px; 
    overflow: hidden; 
    box-shadow: 0 20px 50px rgba(61, 35, 20, 0.12); 
    border: 1px solid var(--peach); 
}

/* Columna Izquierda (Mensaje fijo corporativo) */
.auth-left { 
    flex: 1; 
    background: linear-gradient(135deg, var(--coral), var(--coral-d)); 
    color: white; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    align-items: center; 
    padding: 40px; 
    text-align: center; 
}

.auth-left h1 { 
    font-family: 'Fraunces', serif; 
    font-size: 2.3rem; 
    font-weight: 900; 
    line-height: 1.15; 
    margin-bottom: 20px; 
}

.auth-left p { 
    font-size: 1.05rem; 
    font-weight: 600; 
    opacity: 0.95; 
    line-height: 1.6; 
}

/* Columna Derecha (Formularios dinámicos) */
.auth-right { 
    flex: 1.1; 
    padding: 45px; 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    position: relative; 
    background: white; 
}

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

.logo-container img { 
    height: 120px; 
    width: auto; 
}

.auth-right h2 { 
    font-family: 'Fraunces', serif; 
    color: var(--brown); 
    font-size: 1.8rem; 
    margin-bottom: 5px; 
}

.auth-subtitle { 
    color: var(--gray); 
    font-size: 0.85rem; 
    margin-bottom: 25px; 
    font-weight: 600; 
}

/* Distintivo Flotante Superior */
.badge-welcome { 
    position: absolute; 
    top: 25px; 
    right: 45px; 
    background: var(--peach); 
    color: var(--coral-d); 
    padding: 5px 14px; 
    border-radius: 20px; 
    font-weight: 800; 
    font-size: 0.75rem; 
    text-transform: uppercase; 
}

.form-container { 
    display: none; 
    animation: fadeIn 0.4s ease; 
}

.form-group { 
    margin-bottom: 15px; 
    text-align: left; 
}

label { 
    display: block; 
    margin-bottom: 5px; 
    font-weight: 700; 
    font-size: 0.85rem; 
    color: var(--gray); 
}

input, select { 
    width: 100%; 
    padding: 12px; 
    border-radius: 12px; 
    border: 1px solid var(--peach-d); 
    outline: none; 
    font-family: inherit; 
}

.btn-primary { 
    background: linear-gradient(135deg, var(--coral), var(--coral-d)); 
    color: white; 
    padding: 12px 24px; 
    border-radius: 50px; 
    font-weight: 800; 
    border: none; 
    cursor: pointer; 
    width: 100%; 
    font-size: 1rem; 
    transition: transform 0.2s ease;
}

.btn-primary:active {
    transform: scale(0.98);
}

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

/* Consultas de Medios para Responsividad */
@media (max-width: 768px) { 
    .auth-card { flex-direction: column; } 
    .auth-left { padding: 40px 20px; }
    .auth-right { padding: 40px 20px; }
    .badge-welcome { top: 15px; right: 20px; } 
}