/* ══ ENTRAR y REGISTRO · opción D (Bryan, 2026-09-11) ═══════════════════════════════════
   Las dos puertas del app (entrar y crear la cuenta) sobre el MISMO lienzo claro de la
   bandeja: una tarjeta translúcida centrada, la marca arriba como en el menú (el cuadro
   violeta con el swoosh y «Venfly») y los campos y el botón de la casa. Nada flota suelto,
   nada se mueve salvo la tarjeta al aparecer. Comparten esta hoja para que no se despeguen.
   Se fueron el cielo de estrellas, la aurora y la tarjeta azul marino del tema viejo.
   ══════════════════════════════════════════════════════════════════════════════════════ */

html, body { margin: 0; min-height: 100%; }
/* Con clase en el body: main.css pinta `html body` con su propio fondo y le ganaría. */
html body.entrar {
  background: var(--lienzo-fin, #EEEAF8);
  font-family: var(--body); color: var(--text); -webkit-font-smoothing: antialiased;
}

.login-page {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100dvh; box-sizing: border-box;
  display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); gap: 8px;
  /* estirar explícito: main.css le deja a .login-page un centrado viejo que encogía las filas al ancho de su texto */
  justify-items: stretch; align-items: stretch; justify-content: stretch;
  padding: 16px 20px 18px;
  background: var(--lienzo, linear-gradient(160deg, #F6F3FE 0%, #EEEAF8 55%, #F3EEF6 100%));
}
/* El lienzo del app: un aliento violeta arriba y un ámbar tenue abajo a la derecha. */
.login-page::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(56% 42% at 50% -4%, rgba(110, 59, 255, .16), transparent 70%),
    radial-gradient(34% 34% at 100% 100%, rgba(255, 157, 46, .09), transparent 70%);
}
/* Tema oscuro: el lienzo negro del app no viene por variable (main.css lo pinta en `html body`),
   así que aquí se pone a mano el mismo tono, con su aliento violeta. */
html[data-theme="negro"] body.entrar, [data-theme="negro"] .login-page { background: #0B0914; }
[data-theme="negro"] .login-page::before {
  background:
    radial-gradient(56% 42% at 50% -4%, rgba(110, 59, 255, .28), transparent 70%),
    radial-gradient(34% 34% at 100% 100%, rgba(255, 157, 46, .06), transparent 70%);
}

/* ── Arriba: volver ── */
.login-arriba { display: flex; align-items: center; justify-content: space-between; min-height: 40px; }
.login-back {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  height: 36px; padding: 0 12px 0 9px; border-radius: 999px;
  font: 600 13px/1 var(--body); color: var(--text-muted);
  background: rgba(255, 255, 255, .6); border: 1px solid var(--hairline);
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
[data-theme="negro"] .login-back { background: rgba(255, 255, 255, .06); }
.login-back svg { width: 14px; height: 14px; }
.login-back:hover { color: var(--text); border-color: var(--hairline-strong, var(--border)); background: rgba(255, 255, 255, .9); }
[data-theme="negro"] .login-back:hover { background: rgba(255, 255, 255, .1); }
.login-back:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }

/* ── Centro: marca + tarjeta ── */
/* Una columna explícita de todo el ancho: con la columna «auto» de un grid, el 100% de la
   tarjeta no tenía contra qué medirse y la tarjeta salía del ancho de su texto (390px). */
.login-centro { display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; align-content: center; gap: 18px; padding: 8px 0; }
.marca {
  display: inline-flex; align-items: center; gap: 12px; text-decoration: none;
  font-family: 'Syne', var(--body); font-weight: 600; font-size: 27px; letter-spacing: -.012em; color: var(--text); line-height: 1;
  animation: marcaEntra .6s var(--ease-out-quint, cubic-bezier(.22, 1, .36, 1)) both;
}
.marca__cuadro {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #8B7DFF 0%, #6E3BFF 55%, #5A29E6 100%);
  box-shadow: 0 14px 28px -12px rgba(110, 59, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.marca__cuadro svg { width: 26px; height: 19px; display: block; }
@keyframes marcaEntra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

.login-card {
  /* max-width explícito: main.css le deja a .login-card un tope viejo de 390px */
  width: min(440px, 100%); max-width: none; padding: 28px 28px 22px; box-sizing: border-box; color: var(--text); text-align: left;
  background: var(--tarjeta-fondo, rgba(255, 255, 255, .9)); border: 1px solid var(--tarjeta-borde, rgba(110, 59, 255, .18));
  border-radius: 18px; box-shadow: var(--tarjeta-sombra, 0 24px 48px -24px rgba(90, 41, 230, .3));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  position: relative; animation: tarjetaEntra .55s var(--ease-out-quint, cubic-bezier(.22, 1, .36, 1)) .05s both;
}
/* main.css trae reglas viejas para .login-card (brillo ::before). Se apagan. */
.login-card::before { content: none; }
/* El relieve del borde de la casa: blanco arriba a la izquierda, violeta abajo a la derecha. */
.login-card::after {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 2;
  background: linear-gradient(155deg, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .45) 26%, rgba(110, 59, 255, .10) 55%, rgba(110, 59, 255, .34) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
[data-theme="negro"] .login-card::after { background: linear-gradient(155deg, rgba(255, 255, 255, .26) 0%, rgba(255, 255, 255, .07) 28%, rgba(169, 140, 255, .12) 58%, rgba(169, 140, 255, .42) 100%); }
@keyframes tarjetaEntra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.login-card--ancha { width: min(480px, 100%); }
/* Con el padre en el selector: main.css fija otro ancho a .login-card y en Entrar seguía en 390. */
.login-centro > .login-card { width: min(440px, 100%); max-width: none; }
.login-centro > .login-card--ancha { width: min(480px, 100%); }

.login-card__cab { margin: 0 0 18px; text-align: left; }
.login-card__cab h1 { margin: 0; font: 700 22px/1.15 var(--body); letter-spacing: -.015em; color: var(--text); text-transform: none; }
.login-card__cab p { margin: 6px 0 0; font: 400 13.5px/1.45 var(--body); font-style: normal; color: var(--text-muted); }
/* En las vistas alternas (recuperar, nueva contraseña, verificar) el encabezado y el
   «¿No tienes cuenta?» se guardan: cada vista trae su propio título. */
.login-card.en-alterna .login-card__cab, .login-card.en-alterna .login-alt { display: none; }

.login-error {
  display: none; margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; font-size: 13px; line-height: 1.45; font-weight: 500;
  color: var(--danger-700, #B3232E); background: var(--danger-100, #FDE7E9); border: 1px solid color-mix(in srgb, var(--danger, #D9434E) 30%, transparent);
}
.login-error.show { display: block; animation: avisoEntra var(--t-base, .22s) var(--ease-out-quint, ease) both; }
@keyframes avisoEntra { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.login-form { display: flex; flex-direction: column; gap: 14px; }
.login-form .form-group { margin: 0; }
.login-form .form-label { display: block; margin: 0 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.login-form .form-control { width: 100%; box-sizing: border-box; font-size: 15px; }
/* Códigos: el de verificación, el de recuperación y el de invitación, a espacio fijo. */
.login-form #totp, .login-form #recovery, .login-form #code {
  font-family: var(--mono, ui-monospace, monospace); letter-spacing: .18em; font-size: 16px;
}
.login-form #totp { text-align: center; letter-spacing: .3em; font-size: 18px; }
.login-form #code { text-transform: uppercase; }
.login-form #code::placeholder { text-transform: none; letter-spacing: 0; font-family: var(--body); font-size: 14px; }
.login-form #totp-group[hidden], .login-form #recovery-group[hidden] { display: none; }
.totp-hint { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.totp-alt-link {
  appearance: none; background: none; border: 0; padding: 6px 0 0; cursor: pointer;
  font: 600 12.5px/1.2 var(--body); color: var(--violet); text-align: left;
}
.totp-alt-link:hover { text-decoration: underline; }
/* La casilla de términos, con el texto a su lado y los enlaces en violeta. */
.login-form .form-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.login-form .form-check input { margin-top: 2px; }
.login-form .form-check a { color: var(--violet); font-weight: 600; text-decoration: none; }
.login-form .form-check a:hover { text-decoration: underline; }

.btn-login {
  appearance: none; border: 0; cursor: pointer; width: 100%; height: 44px; margin-top: 4px;
  border-radius: var(--r-sm, 10px); background: var(--violet); color: #fff;
  font: 700 15px/1 var(--body); letter-spacing: .005em; text-transform: none; box-shadow: var(--sh-violet-sm);
  transition: background var(--t-fast), transform var(--t-fast) var(--ease-out-quint, ease), box-shadow var(--t-fast);
}
.btn-login:hover { background: var(--violet-700); }
.btn-login:active { transform: translateY(1px); }
.btn-login:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.btn-login:disabled { opacity: .6; cursor: progress; transform: none; }

.login-forgot { text-align: center; margin-top: 14px; }
.login-forgot button, .login-card .alt-back {
  appearance: none; background: none; border: 0; cursor: pointer; padding: 6px 8px; border-radius: 8px;
  font: 600 13px/1.2 var(--body); color: var(--violet);
}
.login-forgot button:hover, .login-card .alt-back:hover { background: var(--violet-050, #F3EEFF); }
.login-alt { text-align: center; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--text-muted); }
.login-forgot + .login-alt { margin-top: 8px; }
.login-alt a { color: var(--violet); font-weight: 600; text-decoration: none; margin-left: 4px; }
.login-alt a:hover { text-decoration: underline; }

/* Vistas alternas (recuperar, nueva contraseña, verificar, cuenta creada): sin emojis. */
.alt-cab { text-align: center; margin: 0 0 16px; }
.alt-ico { width: 44px; height: 44px; margin: 0 auto 10px; border-radius: 12px; display: grid; place-items: center; background: var(--violet-100); color: var(--violet); }
.alt-ico--ok { background: var(--success-100, #E4F6EB); color: var(--success); }
.alt-ico svg { width: 20px; height: 20px; }
.login-card .alt-title, .login-card .signup-done-title { font: 700 18px/1.2 var(--body); letter-spacing: -.01em; color: var(--text); }
.login-card .alt-sub, .login-card .signup-done-sub { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.alt-volver { text-align: center; margin-top: 10px; }
#reset-confirm-screen .btn-login { max-width: 320px; margin: 0 auto; display: block; }
#signup-success { text-align: center; padding: 8px 0 4px; }

/* ── Abajo: la confianza, fuera de la tarjeta ── */
.login-foot { text-align: center; font-size: 12px; color: var(--text-dim); display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; align-items: center; }
.login-foot .trust { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-weight: 500; }
.login-foot .trust svg { width: 14px; height: 14px; color: var(--success); }

/* ── Elección de nombre (cuentas compartidas): misma tarjeta, sobre el lienzo atenuado ── */
.vendor-picker-overlay {
  position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px;
  background: rgba(22, 19, 31, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.vendor-picker-card {
  width: min(420px, 100%); padding: 26px 24px 20px; text-align: center; color: var(--text);
  background: var(--tarjeta-fondo, rgba(255, 255, 255, .92)); border: 1px solid var(--tarjeta-borde, rgba(110, 59, 255, .18)); border-radius: 18px;
  box-shadow: 0 32px 70px -30px rgba(0, 0, 0, .5);
}
.vendor-picker-title { margin: 0; font: 700 20px/1.2 var(--body); letter-spacing: -.01em; }
.vendor-picker-sub { margin: 6px 0 16px; font-size: 13.5px; color: var(--text-muted); }
.vendor-names-list { display: grid; gap: 8px; }
.vendor-name-btn {
  appearance: none; cursor: pointer; height: 44px; border-radius: var(--r-sm, 10px);
  background: var(--surface, #fff); border: 1px solid var(--hairline); color: var(--text); font: 600 14px/1 var(--body);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.vendor-name-btn:hover { border-color: var(--violet); background: var(--violet-050, #F3EEFF); }
.vendor-skip-btn { appearance: none; background: none; border: 0; cursor: pointer; margin-top: 12px; font: 600 13px/1 var(--body); color: var(--violet); }

/* ── Teléfono ── */
@media (max-width: 600px) {
  .login-page { padding: 12px 14px 16px; gap: 6px; }
  .login-centro { gap: 14px; align-content: start; padding-top: 10px; }
  .marca { font-size: 24px; gap: 10px; }
  .marca__cuadro { width: 42px; height: 42px; border-radius: 12px; }
  .marca__cuadro svg { width: 24px; height: 17px; }
  .login-card { padding: 22px 18px 18px; border-radius: 16px; }
  .login-card__cab h1 { font-size: 20px; }
  .login-foot { font-size: 11.5px; gap: 8px; }
}
/* Ventana muy baja (teléfono acostado): la marca se hace chica y se pega arriba. */
@media (max-height: 560px) {
  .login-centro { align-content: start; gap: 10px; }
  .marca { font-size: 20px; } .marca__cuadro { width: 34px; height: 34px; border-radius: 10px; } .marca__cuadro svg { width: 19px; height: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .login-card, .marca, .login-error.show { animation: none; }
}

/* ── Avisos (404, 403, 429, 500, 502, mantenimiento, sin conexión) ───────────────────────
   La misma puerta, otro mensaje: lienzo, marca y tarjeta de Entrar. Dentro: el código en
   chico, un ícono de la casa (se fueron los números gigantes y el «señal perdida»), un
   título que se entiende, una línea de qué pasó y qué hacer, y los botones de siempre. */
.aviso-card { text-align: center; padding: 30px 28px 24px; }
.aviso-ico { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 12px; display: grid; place-items: center; background: var(--violet-100, #EFE9FF); color: var(--violet); }
.aviso-ico svg { width: 20px; height: 20px; display: block; }
.aviso-ico--espera { background: var(--amber-100, #FFEFD9); color: var(--amber-700, #D9760A); }
.aviso-ico--gira svg { animation: avisoGira 2.4s linear infinite; }
@keyframes avisoGira { to { transform: rotate(360deg); } }
.aviso-card h1 { margin: 0; font: 700 24px/1.15 var(--body); letter-spacing: -.02em; color: var(--text); text-transform: none; }
.aviso-texto { margin: 10px auto 0; max-width: 36ch; font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.aviso-acciones { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.aviso-acciones .btn-login { margin: 0; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.aviso-sec {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; border-radius: var(--r-sm, 10px); text-decoration: none;
  border: 1px solid var(--hairline); background: var(--surface, #fff); color: var(--text); font: 600 14px/1 var(--body); cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.aviso-sec:hover { border-color: var(--violet); background: var(--violet-050, #F6F3FF); }
.aviso-sec:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
/* La espera (429, 502): una barra fina y la cuenta en palabras. */
.aviso-espera { margin-top: 20px; }
.aviso-barra { height: 6px; border-radius: 999px; background: var(--violet-100, #EFE9FF); overflow: hidden; }
.aviso-barra i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--violet); }
.aviso-cuenta { display: block; margin: 8px 0 0; font-size: 12.5px; color: var(--text-muted); }
.aviso-cuenta b { color: var(--text); font-variant-numeric: tabular-nums; }
.aviso-nota { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--hairline); font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
/* El código del error, mudo, al pie: es para soporte, no para el ojo. */
.aviso-pie { margin: 18px 0 0; font-size: 12px; line-height: 1.4; color: var(--text-dim); }
.aviso-pie span { font-family: var(--mono, ui-monospace, monospace); letter-spacing: .03em; }
@media (max-width: 600px) { .aviso-card { padding: 24px 18px 20px; } .aviso-card h1 { font-size: 21px; } }
@media (prefers-reduced-motion: reduce) { .aviso-ico--gira svg { animation: none; } }