/* Páginas de acceso (registro, recuperar clave, completar perfil…). Vocabulario del login, solo tokens. */
* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-navy-deep);
  font-family: var(--font-ui);
  color: var(--text-primary);
}

/* ── Panel contenedor ── */
.login-wrapper { width: 100%; max-width: 420px; padding: 1rem; }

/* ── Logo / encabezado ── */
.login-header { margin-bottom: 1.8rem; text-align: center; color: var(--sidebar-hover-text); }
.login-header .badge-org {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: 1rem; padding: .35rem 1rem;
  border: 1px solid var(--sidebar-border); border-radius: 2rem;
  background: var(--sidebar-org-bg); color: var(--sidebar-text);
  font-size: .8rem; letter-spacing: .04em;
}
.login-logo { display: block; width: 64px; height: 64px; margin: 0 auto .75rem; border-radius: 50%; }
.login-header h1 { margin: 0 0 .2rem; font-family: var(--font-brand); font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; color: var(--sidebar-hover-text); }
.login-header h1 span { color: var(--brand-gold); }
.login-header p { margin: 0; font-size: .9rem; color: var(--sidebar-text); }

/* ── Tarjeta principal ── */
.login-card { padding: 2.2rem 2rem; background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); }

/* ── Alertas ── */
.alert-login { display: flex; align-items: flex-start; gap: .6rem; padding: .75rem 1rem; border-radius: var(--radius-md); font-size: .9rem; }
.alert-login i { margin-top: 1px; flex-shrink: 0; }

/* ── Labels y controles ── */
.form-label { margin-bottom: .4rem; font-size: .85rem; font-weight: 600; color: var(--text-primary); }
.form-control {
  height: 44px; padding: .6rem .85rem;
  border: 1.5px solid var(--border-input); border-radius: var(--radius-md);
  background: var(--bg-input); color: var(--text-primary); font-size: .95rem;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.form-control:focus { border-color: var(--accent); box-shadow: var(--focus-ring); background: var(--bg-input); color: var(--text-primary); }
.form-control.is-invalid { border-color: var(--money-out); background-image: none; }

/* ── Input-group para contraseña ── */
.input-group .form-control { border-right: none; }
.input-group .btn-eye {
  min-width: 44px; padding: 0 .75rem;
  border: 1.5px solid var(--border-input); border-left: none; border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--bg-input); color: var(--text-secondary);
  transition: color var(--dur-fast);
}
.input-group .btn-eye:hover { color: var(--accent); }
.input-group.invalid .form-control, .input-group.invalid .btn-eye { border-color: var(--money-out); }

/* ── Botón submit ── */
.btn-login {
  width: 100%; min-height: 46px; border: 0; border-radius: var(--radius-md);
  background: var(--accent); color: var(--accent-contrast); font-size: .95rem; font-weight: 600;
  transition: background-color var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.btn-login:hover { background: var(--accent-hover); }
.btn-login:active { transform: scale(.98); }
.btn-login:disabled { opacity: .7; cursor: not-allowed; }
.btn-login .spinner-border { width: 1rem; height: 1rem; border-width: 2px; }

/* ── Recordarme y olvidé clave ── */
.login-check-label { font-size: .85rem; color: var(--text-secondary); cursor: pointer; }
.forgot-link { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; font-size: .85rem; color: var(--text-secondary); text-decoration: none; transition: color var(--dur-fast); }
.forgot-link:hover { color: var(--accent); }

/* ── Separador y Google ── */
.login-divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; font-size: .8rem; color: var(--text-secondary); white-space: nowrap; }
.login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; min-height: 46px; padding: .65rem 1rem;
  border: 1.5px solid var(--border-input); border-radius: var(--radius-md);
  background: var(--bg-card); color: var(--text-primary);
  font-size: .9rem; font-weight: 600; text-decoration: none;
  transition: background-color var(--dur-fast);
}
.btn-google:hover { background: var(--bg-table-hover); color: var(--text-primary); }

/* ── Registro y pie ── */
.login-register { margin-top: 1rem; text-align: center; font-size: .9rem; color: var(--sidebar-text); }
.login-register a { color: var(--brand-gold); font-weight: 600; text-decoration: none; }
.login-footer { margin-top: 1.4rem; text-align: center; font-size: .8rem; color: var(--sidebar-text-dim); }

/* ── Modal ── */
.modal-content { border: 0; border-radius: var(--radius-lg); background: var(--bg-card); color: var(--text-primary); }
.modal-header { padding: 1.2rem 1.5rem .8rem; border-bottom: 1px solid var(--border-color); }
.modal-body { padding: 1.2rem 1.5rem; }
.modal-footer { padding: .8rem 1.5rem 1.2rem; border-top: 1px solid var(--border-color); }
.admin-email-box {
  display: flex; align-items: center; gap: .6rem; padding: .8rem 1rem;
  border: 1.5px solid var(--badge-info-border); border-radius: var(--radius-md);
  background: var(--accent-soft); color: var(--accent-hover);
  font-size: .92rem; font-weight: 600; word-break: break-all;
}

/* ── Responsive móvil ── */
@media (max-width: 480px) {
  body { padding: 0; }
  .login-wrapper { padding: .5rem; }
  .login-card { padding: 1.5rem 1.25rem; }
  .login-header h1 { font-size: 1.45rem; }
  .btn-login { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }

/* ── Extras compartidos por las páginas de acceso ── */
.login-ico { display: block; margin: 0 auto .75rem; font-size: 2.25rem; line-height: 1; color: var(--brand-gold); }
.login-back { margin-top: 1.2rem; text-align: center; }
.login-back a { display: inline-flex; align-items: center; min-height: 44px; font-size: .85rem; color: var(--sidebar-text); text-decoration: none; }
.login-back a:hover { color: var(--sidebar-hover-text); }
.divider { display: flex; align-items: center; gap: .75rem; margin: 1.25rem 0; font-size: .8rem; color: var(--text-secondary); }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
.step-indicator { display: flex; justify-content: center; gap: .5rem; margin-bottom: 1.25rem; }
.step-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--on-navy-line); }
.step-dot.active { background: var(--on-navy-strong); }
.email-badge, .google-badge { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; padding: .65rem 1rem; border: 1px solid var(--badge-info-border); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--accent-hover); font-size: .85rem; }
.google-badge .avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-card); color: var(--accent); font-size: 1.1rem; font-weight: 700; }
.google-badge .info { flex: 1; min-width: 0; }
.google-badge .name { font-size: .9rem; font-weight: 600; color: var(--text-primary); }
.google-badge .email { overflow: hidden; font-size: .8rem; color: var(--text-secondary); text-overflow: ellipsis; white-space: nowrap; }
.google-badge .google-icon { display: flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--text-secondary); }
.form-hint { margin-top: .35rem; font-size: .8rem; color: var(--text-secondary); }
.plan-card { border: 1.5px solid var(--border-color) !important; border-radius: var(--radius-md); background: var(--bg-sunken); cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.btn-check:checked + .plan-card { border-color: var(--accent) !important; background: var(--accent-soft); }
.plan-title { font-size: .9rem; font-weight: 700; color: var(--text-primary); }
.plan-sub { font-size: .8rem; color: var(--text-secondary); }
.plan-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; font-size: 1.1rem; color: var(--accent); }
.gateway-section, .consent-block { margin-top: 1.1rem; padding: 1rem 1.1rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-sunken); }
.gateway-section .section-label { margin-bottom: .65rem; font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-primary); }
.gateway-option { display: flex; align-items: center; gap: .9rem; margin-bottom: .5rem; padding: .6rem .9rem; border: 1.5px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); cursor: pointer; transition: border-color var(--dur-fast), background-color var(--dur-fast); }
.gateway-option:last-child { margin-bottom: 0; }
.gateway-option input[type=radio] { accent-color: var(--accent); }
.gateway-option.selected { border-color: var(--accent); background: var(--accent-soft); }
.gateway-logo { flex-shrink: 0; height: 22px; object-fit: contain; }
.gateway-badge { flex-shrink: 0; margin-left: auto; padding: .15rem .45rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: .72rem; font-weight: 600; }
.gateway-badge.beta { border-color: var(--badge-warning-border); background: var(--attention-soft); color: var(--attention-text); }
.gateway-badge.active { border-color: var(--badge-success-border); background: var(--money-in-soft); color: var(--money-in); }
.gateway-note { display: flex; align-items: flex-start; gap: .4rem; margin-top: .5rem; font-size: .75rem; line-height: 1.4; color: var(--text-secondary); }
.consent-block { margin-top: 1.25rem; }
.consent-block .form-check { margin-bottom: .6rem; }
.consent-block .form-check:last-child { margin-bottom: 0; }
.consent-block .form-check-input { margin-top: .2rem; cursor: pointer; }
.consent-block .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.consent-block .form-check-label { font-size: .85rem; line-height: 1.4; color: var(--text-primary); cursor: pointer; }
.consent-block .form-check-label a { color: var(--accent); text-decoration: underline; }
.consent-marketing { margin-top: .6rem; padding-top: .65rem; border-top: 1px dashed var(--border-color); }
.strength-bar { height: 4px; margin-top: 6px; border-radius: 2px; background: var(--border-color); }
.strength-bar .fill { width: 0; height: 100%; border-radius: 2px; transition: width var(--dur), background-color var(--dur); }
.login-ico-lg { font-size: 2.75rem; }
.alert-box { margin-bottom: 1.2rem; padding: .75rem 1rem; border: 1px solid var(--badge-warning-border); border-radius: var(--radius-md); background: var(--attention-soft); color: var(--attention-text); font-size: .85rem; text-align: left; }
.alert-box.error { border-color: var(--badge-danger-border); background: var(--money-out-soft); color: var(--money-out); }
.panel-center { text-align: center; }
.panel-center h2 { margin: 0 0 .5rem; font-size: 1.2rem; font-weight: 700; color: var(--text-primary); }
.panel-center .subtitle { margin: 0 0 1.4rem; font-size: .9rem; line-height: 1.6; color: var(--text-secondary); }
.panel-center .email-badge { display: inline-block; margin-bottom: 1.5rem; word-break: break-all; }
.panel-ico { display: block; margin: 0 auto 1.2rem; font-size: 2.5rem; line-height: 1; color: var(--accent); }
.panel-ico.error { color: var(--money-out); }
.resend-form { margin-top: 1.2rem; }
.btn-resend { width: 100%; min-height: 44px; padding: .5rem 1.2rem; border: 1.5px solid var(--accent); border-radius: var(--radius-md); background: none; color: var(--accent); font-size: .9rem; font-weight: 600; cursor: pointer; transition: background-color var(--dur-fast), color var(--dur-fast); }
.btn-resend:hover { background: var(--accent); color: var(--accent-contrast); }
.back-link { display: block; margin-top: 1rem; font-size: .85rem; color: var(--text-secondary); text-decoration: none; }
.back-link:hover { color: var(--accent); }
@media (max-width: 480px) { .login-card { padding: 1.5rem 1.25rem 1rem; } }
.mt-n2 { margin-top: -.5rem; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 0; overflow: hidden; }
.plan-price { font-size: .85rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; }
.plan-per { font-size: .72rem; font-weight: 400; color: var(--text-secondary); }
.alert-box--sm { margin: .5rem 0 0; padding: .65rem 1rem; font-size: .8rem; }
.gateway-name { font-size: .9rem; font-weight: 700; color: var(--text-primary); }
.gateway-desc { flex: 1; font-size: .78rem; color: var(--text-secondary); }
.gateway-badge.soft { border-color: var(--border-color); background: var(--bg-card); color: var(--text-secondary); }
.req { color: var(--money-out); }
.opt-hint { font-size: .78rem; color: var(--text-secondary); }
.login-footer a { color: var(--sidebar-text); text-decoration: none; }
.login-footer a:hover { color: var(--sidebar-hover-text); text-decoration: underline; }
.login-register a:hover { text-decoration: underline; }
.brand { margin-bottom: 1.4rem; font-family: var(--font-brand); font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: var(--text-primary); }
.brand span { color: var(--accent); }
.login-footer a, .login-register a { text-decoration: underline; text-underline-offset: 2px; }
.input-group .form-control:last-child { border-right: 1.5px solid var(--border-input); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.input-group.invalid .form-control:last-child { border-right-color: var(--money-out); }
form .btn-login { margin-top: 1rem; }