* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', sans-serif; }
body { min-height: 100vh; background-color: #0d1b2a; }

.icon-front { width: 20px; height: 20px; display: inline-block; position: relative; z-index: 50 !important; }

.login-container { display: grid; grid-template-columns: 450px 1fr; min-height: 100vh; }

.login-left { background-color: #ffffff; padding: 40px; display: flex; flex-direction: column; justify-content: center; box-shadow: 5px 0 15px rgba(0,0,0,0.1); z-index: 10; }

.brand { display: flex; margin-bottom: 30px; justify-content: center; }
.logo-top { max-width: 100%; height: auto; max-height: 55px; filter:drop-shadow(0px 0px 4px rgba(173, 216, 230, 0.95)); /*filter: drop-shadow(0px 0px 4px rgba(173, 216, 230, 0.95)) drop-shadow(0px 0px 8px rgba(135, 206, 250, 0.6));*/  }

.welcome-text { text-align: center; margin-bottom: 25px; }
.welcome-text h2 { color: #1b263b; font-size: 24px; margin-bottom: 10px; }
.welcome-text p { color: #778da9; font-size: 13px; line-height: 1.5; }

.form-group { margin-bottom: 25px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; color: #1e293b; margin-bottom: 8px; }
.input-wrapper input { width: 100%; padding: 12px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 14px; outline: none; }
.input-wrapper input:focus { border-color: #0077b6; }

.sign-in-btn { width: 100%; padding: 14px; background-color: #112952; color: white; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 25px; }
.sign-in-btn:hover { background-color: #0f172a; }

.back-to-login { text-align: center; }
.back-to-login a { color: #64748b; text-decoration: none; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; transition: color 0.2s; }
.back-to-login a:hover { color: #0077b6; }
.back-arrow { width: 16px; height: 16px; }

.login-right { background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 41, 59, 0.9)), url('../../Imagenes/recuperar.jpg') center/cover; padding: 60px; display: flex; flex-direction: column; justify-content: center; color: #ffffff; }
.badge-top { align-self: flex-start; background-color: rgba(255, 215, 0, 0.15); color: #fbbf24; padding: 6px 16px; border-radius: 20px; font-size: 13px; font-weight: 600; margin-bottom: 20px; display: flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 215, 0, 0.3); }
.right-title { font-size: 32px; font-weight: 700; margin-bottom: 10px; }
.right-subtitle { color: #94a3b8; font-size: 15px; }

.feature-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 15px;
    /* display: flex; */
    gap: 15px;
    backdrop-filter: blur(10px);
}


@media (max-width: 950px) { .login-container { grid-template-columns: 1fr; } .login-right { display: none; } }