/* ─── Theme de login SalesFlow MEE — pixel-perfect Fase0-02 ────────────────────
   Fuente de verdad visual: Claude Design "Fase0-02 Login 2FA". Tokens idénticos
   a mee-ui.css. Tema claro por defecto; oscuro con prefers-color-scheme. */

/* Fuentes locales (autonomía: sin CDN de Google en producción). */
@font-face { font-family:'Oswald'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/oswald.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/inter.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400 500; font-display:swap; src:url('../fonts/jetbrains-mono.woff2') format('woff2'); }

:root {
  --t-brand:#D41117; --t-ink:#282F33; --t-white:#FFFFFF; --t-red-700:#8E0B0F;
  --font-display:'Oswald',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif; --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px;
  --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:18px; --r-full:999px;
  --sh-card:0 1px 2px rgba(0,0,0,.05); --sh-pop:0 10px 30px rgba(0,0,0,.14);
  --d-bg:#F7F8F9; --d-surface:#FFFFFF; --d-surface-alt:#F2F3F4; --d-border:#E5E7E9; --d-border-strong:#C9CDD0;
  --d-text:#282F33; --d-text-muted:#5E676D;
  --d-brand:#D41117; --d-brand-hover:#B30E13; --d-brand-soft:#FCEAEA; --d-on-brand:#FFFFFF;
  --d-success:#198754; --d-warning:#D98C00; --d-info:#2563EB; --d-danger:#B3261E;
  --d-success-soft:#E4F2EA; --d-warning-soft:#FBF0DB; --d-info-soft:#E5EDFD; --d-danger-soft:#F8E4E3;
}
/* Modo oscuro SOLO por selección explícita en el producto ([data-theme="dark"]).
   El default es SIEMPRE claro; NO se usa prefers-color-scheme (no se hereda el
   modo del sistema operativo). */
[data-theme="dark"] {
  --d-bg:#1B2024; --d-surface:#232A2F; --d-surface-alt:#2B3338; --d-border:#3A4146; --d-border-strong:#4C545A;
  --d-text:#F2F3F4; --d-text-muted:#AAB0B5;
  --d-brand:#E8494C; --d-brand-hover:#E04A4D; --d-brand-soft:#3A2122; --d-on-brand:#FFFFFF;
  --d-success:#3FB37A; --d-warning:#E5A53B; --d-info:#5B8DEF; --d-danger:#E26B66;
  --d-success-soft:#1E2E26; --d-warning-soft:#332B1A; --d-info-soft:#1E2738; --d-danger-soft:#36211F;
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; height:100%; }
body {
  font-family:var(--font-body); font-size:14px; line-height:1.5; color:var(--d-text);
  background:var(--d-surface); min-height:100dvh;
  -webkit-font-smoothing:antialiased;
}

/* Contenedor split marca + formulario — PANTALLA COMPLETA (fullscreen).
   Llena todo el espacio disponible; sin recuadro/max-width/sombra. Se adapta
   fluido hacia arriba; los breakpoints solo saltan de formato al reducir. */
.sf-split {
  width:100vw; min-height:100dvh; display:flex;
  background:var(--d-surface); overflow:hidden;
}

/* Panel de marca (izquierda) */
.sf-brand {
  width:42%; flex:none; background:var(--t-ink); color:var(--t-white);
  padding:var(--sp-10); display:flex; flex-direction:column; position:relative; overflow:hidden;
}
.sf-brand .sf-ring { position:absolute; border-radius:50%; }
.sf-brand .sf-ring-1 { right:-80px; top:-80px; width:320px; height:320px; border:1px solid rgba(255,255,255,.08); }
.sf-brand .sf-ring-2 { right:-30px; bottom:-120px; width:360px; height:360px; border:1px solid rgba(255,255,255,.06); }
.sf-brand-head { display:flex; flex-direction:column; gap:var(--sp-2); position:relative; }
.sf-brand-head img { height:46px; width:auto; max-width:230px; object-fit:contain; align-self:flex-start; }
.sf-brand-head .sf-brand-sub { font-size:11px; letter-spacing:2px; color:rgba(255,255,255,.6); }
.sf-brand-mid { flex:1; display:flex; flex-direction:column; justify-content:center; max-width:340px; position:relative; }
.sf-brand-mid h2 { font-family:var(--font-display); font-weight:600; font-size:30px; line-height:1.15; margin:0 0 var(--sp-3); }
.sf-brand-mid p { margin:0; color:rgba(255,255,255,.7); font-size:14px; }
.sf-brand-badge {
  display:inline-flex; align-items:center; gap:var(--sp-2); padding:8px 12px; border-radius:var(--r-full);
  background:rgba(255,255,255,.08); width:max-content; font-size:12px; font-weight:600; position:relative;
}

/* Panel de formulario (derecha) — columna: tarjeta centrada + footer al fondo. */
.sf-form-panel { flex:1; min-width:0; background:var(--d-surface); display:flex; flex-direction:column; align-items:center; padding:var(--sp-8); overflow-y:auto; }
.sf-card { width:100%; max-width:360px; margin-block:auto; animation:sf-fade .18s ease; }

/* Leyenda inferior: versión del sistema + CTA de soporte (WhatsApp). */
.sf-foot { flex:0 0 auto; width:100%; max-width:360px; padding-top:var(--sp-6); display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; color:var(--d-text-muted); }
.sf-foot-sep { opacity:.5; }
.sf-foot-link { display:inline-flex; align-items:center; gap:5px; color:var(--d-text-muted); text-decoration:none; }
.sf-foot-link:hover { color:var(--d-brand); text-decoration:underline; }

/* Escritorio: el panel de marca (izq.) hace redundante el subtítulo del login →
   solo se muestra en tablet/móvil (donde la marca colapsa a banner superior). */
.sf-subtitle-login { display:none; }
.sf-subtitle-login + form { margin-top:var(--sp-5); }

.sf-title { font-family:var(--font-display); font-weight:600; font-size:26px; margin:0 0 4px; color:var(--d-text); }
.sf-title-sm { font-size:24px; }
.sf-title-xs { font-size:22px; }

/* Identidad fijada en reautenticación (usernameHidden). */
.sf-idtag { display:inline-flex; align-items:center; gap:8px; padding:8px 12px; margin-bottom:var(--sp-4); border:1px solid var(--d-border); border-radius:var(--r-full); background:var(--d-surface-alt); color:var(--d-text); font-size:13px; font-weight:600; }

/* Spinner dentro del botón (estado de carga). */
.sf-btn-spinner { margin-right:2px; }
.sf-subtitle { margin:0 0 var(--sp-5); color:var(--d-text-muted); font-size:13px; }
.sf-icon-badge { display:grid; place-items:center; width:48px; height:48px; border-radius:var(--r-md); background:var(--d-brand-soft); color:var(--d-brand); margin-bottom:var(--sp-3); }

.sf-field { display:block; margin-bottom:var(--sp-3); }
.sf-field > span { display:block; font-weight:600; font-size:13px; margin-bottom:6px; color:var(--d-text); }
.sf-input {
  width:100%; height:44px; padding:0 var(--sp-3); border:1px solid var(--d-border); border-radius:var(--r-md);
  background:var(--d-surface); color:var(--d-text); font-family:var(--font-body); font-size:14px;
}
.sf-input:focus { outline:none; border-color:var(--d-brand); box-shadow:0 0 0 3px var(--d-brand-soft); }
.sf-input.sf-error { border-color:var(--d-danger); }

.sf-pw { display:flex; height:44px; border:1px solid var(--d-border); border-radius:var(--r-md); overflow:hidden; }
.sf-pw:focus-within { border-color:var(--d-brand); box-shadow:0 0 0 3px var(--d-brand-soft); }
.sf-pw input { flex:1; min-width:0; border:none; padding:0 var(--sp-3); background:var(--d-surface); color:var(--d-text); font-family:var(--font-body); font-size:14px; outline:none; }
.sf-pw button { display:grid; place-items:center; width:44px; border:none; border-left:1px solid var(--d-border); background:var(--d-surface-alt); color:var(--d-text-muted); cursor:pointer; }

.sf-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-5); gap:var(--sp-3); }
.sf-check { display:flex; align-items:center; gap:var(--sp-2); cursor:pointer; font-size:13px; color:var(--d-text); }
.sf-check input { width:16px; height:16px; accent-color:var(--d-brand); }
.sf-link { border:none; background:none; color:var(--d-brand); font-weight:600; font-size:13px; cursor:pointer; padding:0; text-decoration:none; }
.sf-link:hover { text-decoration:underline; }

.sf-btn {
  display:flex; align-items:center; justify-content:center; gap:var(--sp-2); width:100%; height:46px;
  border:none; border-radius:var(--r-md); background:var(--d-brand); color:var(--d-on-brand);
  font-family:var(--font-body); font-weight:600; font-size:15px; cursor:pointer; transition:background .12s;
}
.sf-btn:hover { background:var(--d-brand-hover); }
.sf-btn:disabled { opacity:.6; cursor:default; }

.sf-code { width:100%; height:56px; padding:0 0 0 16px; border:1px solid var(--d-border); border-radius:var(--r-md); background:var(--d-surface); color:var(--d-text); font-family:var(--font-mono); font-size:30px; letter-spacing:16px; text-align:center; }
.sf-code:focus { outline:none; border-color:var(--d-brand); box-shadow:0 0 0 3px var(--d-brand-soft); }

/* Banner de error / info */
.sf-banner { display:flex; align-items:flex-start; gap:var(--sp-2); padding:10px 12px; border-radius:var(--r-md); margin-bottom:var(--sp-4); font-size:13px; color:var(--d-text); }
.sf-banner svg { flex:none; margin-top:1px; }
.sf-banner.sf-error { background:var(--d-danger-soft); border:1px solid var(--d-danger); }
.sf-banner.sf-error svg { color:var(--d-danger); }
.sf-banner.sf-info { background:var(--d-info-soft); border:1px solid var(--d-info); }
.sf-banner.sf-info svg { color:var(--d-info); }
.sf-banner.sf-success { background:var(--d-success-soft); border:1px solid var(--d-success); }
.sf-banner.sf-success svg { color:var(--d-success); }
.sf-field-error { display:block; font-size:12px; color:var(--d-danger); margin-top:4px; }
.sf-center { text-align:center; margin-top:var(--sp-4); }

@keyframes sf-fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes sf-spin { to { transform:rotate(360deg); } }
.sf-spin { animation:sf-spin .7s linear infinite; }

/* Botón "Volver" (2FA/forgot/recovery). */
.sf-back { display:inline-flex; align-items:center; gap:6px; border:none; background:none; color:var(--d-text-muted); font-family:var(--font-body); font-weight:600; font-size:13px; cursor:pointer; padding:0; margin-bottom:var(--sp-4); text-decoration:none; }
.sf-back:hover { color:var(--d-text); }

/* Error inline con icono (código 2FA). */
.sf-field-error-row { display:flex; align-items:center; gap:5px; margin-top:8px; }
.sf-field-error-row svg { flex:none; }

/* Input de código de respaldo / recuperación (monoespaciado). */
.sf-input-mono { font-family:var(--font-mono); font-size:16px; letter-spacing:2px; height:46px; }

/* Botón secundario (ghost) + enlace en bloque. */
.sf-btn-ghost { background:var(--d-surface); color:var(--d-text); border:1px solid var(--d-border-strong); }
.sf-btn-ghost:hover { background:var(--d-surface-alt); }
.sf-link-block { display:block; margin-top:var(--sp-3); text-align:center; }
.sf-form-block { width:100%; }

/* Selector de credencial OTP (varios dispositivos). */
.sf-otp-devices { display:flex; flex-direction:column; gap:8px; margin-bottom:var(--sp-4); }
.sf-otp-device { display:flex; align-items:center; gap:10px; padding:12px 14px; border:1px solid var(--d-border); border-radius:var(--r-md); cursor:pointer; font-size:14px; }
.sf-otp-device:has(input:checked) { border-color:var(--d-brand); box-shadow:0 0 0 3px var(--d-brand-soft); }
.sf-otp-device input { accent-color:var(--d-brand); }

/* Medidor de fortaleza de contraseña (nueva contraseña). */
.sf-strength-track { height:6px; border-radius:var(--r-full); background:var(--d-surface-alt); overflow:hidden; margin-bottom:6px; }
.sf-strength-fill { height:100%; width:0; background:var(--d-danger); transition:width .2s, background .2s; }
.sf-strength-label { font-size:12px; color:var(--d-text-muted); margin-bottom:var(--sp-3); }

/* Reglas de contraseña. */
.sf-rules { list-style:none; margin:0 0 var(--sp-4); padding:0; display:flex; flex-direction:column; gap:4px; }
.sf-rules li { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--d-text-muted); }
.sf-rules li.sf-rule-ok { color:var(--d-success); }
.sf-rule-icon { font-weight:700; width:14px; display:inline-block; text-align:center; }

/* Pasos de alta de 2FA (config-totp). */
.sf-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-5); }
.sf-steps > li { display:flex; gap:var(--sp-3); }
.sf-step-n { flex:none; display:grid; place-items:center; width:26px; height:26px; border-radius:var(--r-full); background:var(--d-brand-soft); color:var(--d-brand); font-weight:700; font-size:13px; }
.sf-step-t { font-weight:600; font-size:14px; margin-bottom:8px; }
.sf-qr { display:inline-block; padding:10px; background:#fff; border:1px solid var(--d-border); border-radius:var(--r-md); }
.sf-qr img { display:block; }
.sf-manual { margin-top:10px; font-size:12px; color:var(--d-text-muted); }
.sf-manual summary { cursor:pointer; color:var(--d-brand); font-weight:600; }
.sf-manual-key { display:block; margin-top:8px; padding:8px 10px; background:var(--d-surface-alt); border-radius:var(--r-sm); font-family:var(--font-mono); font-size:12px; word-break:break-all; color:var(--d-text); }

/* Códigos de recuperación (rejilla). */
.sf-recovery-grid { list-style:none; margin:0 0 var(--sp-4); padding:var(--sp-3); display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; background:var(--d-surface-alt); border:1px dashed var(--d-border-strong); border-radius:var(--r-md); }
.sf-recovery-grid li { display:flex; align-items:baseline; gap:6px; font-family:var(--font-mono); font-size:13px; color:var(--d-text); }
.sf-recovery-n { color:var(--d-text-muted); font-size:11px; min-width:20px; }
.sf-recovery-actions { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:var(--sp-4); }
.sf-chip { padding:6px 12px; border:1px solid var(--d-border); border-radius:var(--r-full); background:var(--d-surface); color:var(--d-text); font-family:var(--font-body); font-size:12px; font-weight:600; cursor:pointer; }
.sf-chip:hover { background:var(--d-surface-alt); }
.sf-recovery-confirm { margin-bottom:0; font-size:13px; }

/* Selección de método (select-authenticator). */
.sf-choices { display:flex; flex-direction:column; gap:10px; }
.sf-choice { display:flex; align-items:center; gap:12px; width:100%; padding:14px; border:1px solid var(--d-border); border-radius:var(--r-md); background:var(--d-surface); color:var(--d-text); font-family:var(--font-body); cursor:pointer; text-align:left; transition:border-color .12s, box-shadow .12s; }
.sf-choice:hover { border-color:var(--d-brand); box-shadow:0 0 0 3px var(--d-brand-soft); }
.sf-choice-ico { flex:none; display:grid; place-items:center; width:40px; height:40px; border-radius:var(--r-md); background:var(--d-brand-soft); color:var(--d-brand); }
.sf-choice-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.sf-choice-t { font-weight:600; font-size:14px; }
.sf-choice-d { font-size:12px; color:var(--d-text-muted); }
.sf-choice-arrow { flex:none; color:var(--d-text-muted); }

/* Escenas centradas (revisar correo, error, expirada, info, logout). */
.sf-center-scene { text-align:center; }
.sf-center-scene .sf-title, .sf-center-scene .sf-subtitle { text-align:center; }
.sf-center-scene .sf-btn, .sf-center-scene form { margin-top:var(--sp-4); }
.sf-icon-circle { display:grid; place-items:center; width:60px; height:60px; margin:0 auto var(--sp-4); border-radius:var(--r-full); }
.sf-icon-circle-success { background:var(--d-success-soft); color:var(--d-success); }
.sf-icon-circle-danger { background:var(--d-danger-soft); color:var(--d-danger); }
.sf-icon-circle-warning { background:var(--d-warning-soft); color:var(--d-warning); }
.sf-icon-circle-info { background:var(--d-info-soft); color:var(--d-info); }

/* Responsive: tablet/móvil → el panel de marca pasa a banda superior. */
/* ≤1024px = tablet (incl. portrait de iPad Pro/Android grandes): layout apilado y
   centrado. El split marca+formulario queda solo para pantallas anchas (>1024:
   escritorio y tablet en landscape), donde el formulario a la derecha es intencional. */
@media (max-width: 1024px) {
  .sf-split { flex-direction:column; }
  .sf-brand { width:100%; padding:var(--sp-8); }
  .sf-brand .sf-ring-1, .sf-brand .sf-ring-2 { display:none; }
  .sf-brand-mid { justify-content:flex-start; margin-top:var(--sp-5); max-width:none; }
  .sf-brand-mid h2 { font-size:24px; }
  /* Tablet/móvil: formulario centrado horizontalmente (columna → align-items = eje horizontal). */
  .sf-form-panel { padding:var(--sp-8) var(--sp-6); align-items:center; }
  /* Tablet/móvil: el subtítulo del login SÍ se muestra (la marca es solo banner). */
  .sf-subtitle-login { display:block; }
  .sf-subtitle-login + form { margin-top:0; }
}
@media (max-width: 480px) {
  .sf-brand-mid p { display:none; }
  .sf-title { font-size:24px; }
}