/* Acceso al Portal de Asesorados (Oct 2026): login, recuperación de contraseña, primer ingreso y creación de contraseña.
   Las tres pantallas son paneles de la misma tarjeta (portal-asesorados/index.html). Opt-in con body.portal-login; se carga
   DESPUÉS de main.css y buttons.css. Tema claro: se restablecen los tokens de botón que main/buttons dejan oscuros para
   `.login-card` y `header.site-nav`. */

body.portal-login {
  --pl-navy: #00133A; --pl-blue: #006BFA; --pl-text: #4A5B7A; --pl-line: #DCE4F0; --pl-field: #F1F4F9;
  background: #fff; color: var(--pl-navy);
}
body.portal-login .login-card,
body.portal-login header.site-nav {
  --btn-primary-start: #1F8BFF; --btn-primary-end: #0A63E6;
  --btn-primary-hover-start: #1A7EF0; --btn-primary-hover-end: #0856CC;
  --btn-primary-shadow: 0 1px 2px rgba(0, 19, 58, .14), 0 8px 18px -8px rgba(0, 107, 250, .55);
  --btn-primary-shadow-hover: 0 2px 4px rgba(0, 19, 58, .16), 0 12px 22px -10px rgba(0, 107, 250, .6);
  --btn-sec-fg: #00133A; --btn-sec-bd: #C9D5E8; --btn-sec-hover-bg: rgba(0, 107, 250, .06); --btn-sec-hover-bd: #6FA2EA;
}

/* Encabezado claro */
body.portal-login header.site-nav {
  background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; box-shadow: none;
}
body.portal-login .nav-logo { height: 30px; width: auto; }

/* Fondo blanco liso */
body.portal-login .login-wrap {
  min-height: 100vh; padding: calc(var(--header-height) + 32px) 20px 48px; position: relative; overflow: hidden; background: #fff;
}
body.portal-login .login-wrap::before { display: none; }

/* Tarjeta */
body.portal-login .login-card {
  background: #fff; border: 1px solid #AFC0DB !important; /* main.css fuerza border-color:transparent a todo [class$="-card"] */ border-radius: 14px; max-width: 430px; width: 100%; padding: 36px 36px 22px;
  box-shadow: 0 8px 24px -16px rgba(0, 40, 110, .14); backdrop-filter: none; position: relative; z-index: 1;
}
body.portal-login .login-accent { display: block; width: 36px; height: 3px; background: var(--pl-blue); border-radius: 2px; margin: 0 0 22px; }
body.portal-login .login-card h1 { font-size: 29px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; color: var(--pl-navy); margin: 0 0 10px; }
body.portal-login .login-card p.login-lead { font-size: 15px; line-height: 1.5; color: var(--pl-text); margin: 0 0 24px; }

body.portal-login .login-form-group { margin-bottom: 16px; }
body.portal-login .login-form-group label { display: block; font-size: 13px; font-weight: 700; color: var(--pl-navy); margin-bottom: 8px; }
.login-field { position: relative; }
.login-field .login-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #6E7F9C; pointer-events: none; }
body.portal-login .login-form-group input {
  width: 100%; box-sizing: border-box; height: 48px; padding: 0 44px 0 44px; border-radius: 10px; border: 1px solid transparent;
  background: var(--pl-field); color: var(--pl-navy); font-size: 15px; outline: none; transition: border-color .15s, background .15s, box-shadow .15s;
}
body.portal-login .login-form-group input::placeholder { color: #8A98B2; }
body.portal-login .login-form-group input:focus { border-color: var(--pl-blue); background: #fff; box-shadow: 0 0 0 3px rgba(0, 107, 250, .14); }
.login-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: none;
  display: grid; place-items: center; color: #6E7F9C; cursor: pointer; border-radius: 8px;
}
.login-eye:hover { color: var(--pl-navy); background: rgba(0, 19, 58, .06); }
.login-eye:focus-visible, .login-forgot:focus-visible, .login-link:focus-visible { outline: 2px solid var(--pl-blue); outline-offset: 2px; }
.login-eye .eye-off { display: none; }
.login-eye.is-on .eye-on { display: none; }
.login-eye.is-on .eye-off { display: block; }

body.portal-login .login-error { min-height: 18px; font-size: 13px; color: #C0392B; margin: -4px 0 12px; }
body.portal-login .login-success { min-height: 18px; font-size: 13px; color: #15803D; margin: -4px 0 12px; line-height: 1.5; }
body.portal-login .login-submit { width: 100%; height: 48px; margin-top: 4px; gap: 10px; font-size: 15px; }
body.portal-login .login-submit::after {
  content: ''; width: 18px; height: 18px; background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* "Olvidé mi contraseña" con líneas a los costados; "Primer ingreso" como enlace subrayado */
.login-forgot {
  display: flex; align-items: center; gap: 14px; width: 100%; margin: 20px 0 0; padding: 6px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 600; color: #0052CC;
}
.login-forgot::before, .login-forgot::after { content: ''; flex: 1; height: 1px; background: var(--pl-line); }
.login-forgot:hover { color: var(--pl-navy); }
.login-forgot.login-back::before { display: none; }
.login-forgot.login-back::after { display: none; }
.login-forgot.login-back { justify-content: center; color: var(--pl-text); }
.login-first { margin: 10px 0 0; text-align: center; font-size: 13.5px; color: var(--pl-text); }
body.portal-login .login-card p.login-first { font-size: 13.5px; margin: 10px 0 0; }
.login-link { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: #0052CC; text-decoration: underline; cursor: pointer; }
.login-link:hover { color: var(--pl-navy); }

/* Pie de la tarjeta */
.login-foot { display: flex; align-items: center; gap: 12px; margin: 22px -36px 0; padding: 16px 36px 0; border-top: 1px solid var(--pl-line); }
.login-foot svg { flex-shrink: 0; }
body.portal-login .login-card .login-foot p { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--pl-text); }
.login-foot a { color: #0052CC; text-decoration: underline; }

body.portal-login .ld-legal-strip { display: none; }

@media (max-width: 520px) {
  body.portal-login .login-wrap { padding: calc(var(--header-height) + 20px) 16px 32px; align-items: flex-start; }
  body.portal-login .login-card { padding: 28px 22px 18px; }
  body.portal-login .login-card h1 { font-size: 26px; }
  .login-foot { margin-inline: -22px; padding-inline: 22px; }
}

/* El botón "Volver al sitio" se mantiene también en celular (main.css oculta .nav-actions por debajo de 860px) */
body.portal-login .nav-actions:not(:has(.nav-user-menu)) { display: flex; }
@media (max-width: 520px) { body.portal-login header.site-nav { padding: 0 16px; } body.portal-login .nav-actions .btn { padding-inline: 12px; } }
