/* ==========================================================================
   Pantallas de autenticación (login, cambio y recuperación de contraseña)
   — lenguaje visual v2.

   Los tokens, la fuente, el fondo (.sky) y la marca vienen de mo_v2_base.css,
   que se carga ANTES que esta hoja. Acá sólo va lo propio de la pantalla, con
   prefijo `lg-` como manda la convención de la casa (`cd-` en calidad de
   datos, `cfg-` en configuración): así dos hojas nunca se pelean por `.card`.

   Reemplaza a login.css, que servía a las tres y quedó sin consumidores.

   Estas pantallas SÍ usan el .sky completo, con las colinas. Las de trabajo
   lo piden liso porque compite con el texto denso; acá no hay nada que leer,
   es la primera impresión del producto.

   UNA PANTALLA, SIN SCROLL DE PÁGINA
   ----------------------------------
   `height` y no `min-height`: la primera versión usaba min-height y la
   tarjeta terminaba midiendo 815px, así que en un notebook de 945px de alto
   la página se pasaba POR 2 PÍXELES y aparecía una barra de scroll para nada.
   Ahora el alto es fijo y el que scrollea, si de verdad no entra, es el
   contenedor de adentro (`.lg-main`), no el documento.

   Por qué `overflow: auto` ahí y no `hidden` en todos lados: con cuatro
   campos (cambio de contraseña), en una ventana baja o con el zoom al 150%,
   `hidden` recorta el formulario y deja el botón de enviar fuera de alcance,
   sin forma de llegar. Así en el caso normal no hay ninguna barra, y en el
   caso feo se puede seguir usando.
   ========================================================================== */

body {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ===== ENCABEZADO ========================================================= */
.lg-top {
  display: flex;
  align-items: center;
  flex: none;
  padding: clamp(14px, 2vh, 22px) var(--gutter);
}

/* Link de volver, a la derecha del encabezado. En las pantallas de contraseña
   es la única salida: si alguien entra por error, tiene que poder irse sin
   tocar el botón de atrás del browser. */
.lg-volver {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--panel-border);
  font-size: 13px;
  color: var(--ink-soft);
  transition: color .18s, border-color .18s, background .18s;
}
.lg-volver:hover { color: var(--ink); background: var(--panel); border-color: var(--panel-border-hi); }
.lg-volver .material-symbols-outlined { font-size: 17px; }

/* ===== ESCENARIO ==========================================================
   La tarjeta se centra en el alto disponible, pero con `margin: auto` en un
   flex y no con `place-items: center`: si la pantalla es baja (o se abre el
   formulario de recuperación) el contenido crece y empuja, en lugar de
   recortarse contra el borde de arriba. */
.lg-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  padding: 0 var(--gutter) clamp(14px, 2.4vh, 28px);
}
.lg-centro { margin: auto; width: 100%; max-width: 460px; }

/* ===== TARJETA ============================================================ */
.lg-card {
  padding: clamp(22px, 2.2vw, 32px);
  border-radius: var(--r-panel);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  backdrop-filter: blur(14px);
  box-shadow: var(--sombra-alta);
}

.lg-marca { display: grid; place-items: center; gap: 3px; margin-bottom: 20px; }
.lg-logo {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 11px;
  border-radius: 13px;
  background: var(--chip);
  border: 1px solid var(--panel-border);
}
.lg-logo .brand-mark { width: 24px; height: 23px; }
.lg-logo .material-symbols-outlined { font-size: 23px; color: var(--mo-lavander); }
.lg-marca h1 {
  margin: 0;
  font-size: clamp(19px, 2.2vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.lg-marca .lg-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.lg-marca p {
  margin: 6px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--ink-soft);
  max-width: 34ch;
}

/* ===== SSO =================================================================
   El botón nació como maqueta -sin flujo detrás, con una pill de
   "Próximamente"- y se veía apagado a propósito. Ahora el ingreso con
   Microsoft funciona, así que el estado normal es el de un botón que se puede
   apretar; lo apagado quedó bajo `:disabled`, que es cuando los secretos no
   están y el <button> sale deshabilitado de verdad.

   El tercer estado, `.is-cargando`, lo pone login.js al hacer click y dura lo
   que tarda el server en armar el flujo del SSO. */
.lg-sso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border-radius: var(--r-card);
  background: var(--panel);
  border: 1px solid var(--panel-border);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: color .18s, border-color .18s, background .18s;
}
.lg-sso:hover { background: var(--panel-strong); border-color: var(--panel-border-hi); }
.lg-sso:disabled {
  color: var(--ink-mute);
  cursor: not-allowed;
  background: var(--panel);
  border-color: var(--panel-border);
}
.lg-sso-logo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5px; width: 15px; height: 15px; }
.lg-sso:disabled .lg-sso-logo { opacity: 0.55; }

/* Esperando el redirect a Microsoft. El spinner mide lo mismo que el logo y lo
   reemplaza en su lugar: si se agregara al lado, el texto se correría justo
   cuando la persona lo está leyendo. */
.lg-sso-spin { display: none; }
.lg-sso.is-cargando { cursor: progress; color: var(--ink-soft); }
.lg-sso.is-cargando:hover { background: var(--panel); border-color: var(--panel-border); }
.lg-sso.is-cargando .lg-sso-logo { display: none; }
.lg-sso.is-cargando .lg-sso-spin {
  display: block;
  width: 15px;
  height: 15px;
  border: 2px solid var(--panel-border-hi);
  border-top-color: var(--mo-lavander);
  border-radius: var(--r-pill);
  animation: lg-girar .7s linear infinite;
}
@keyframes lg-girar { to { transform: rotate(360deg); } }

/* Quien pidió menos movimiento igual necesita saber que algo está pasando: el
   spinner sigue girando, mucho más lento. Frenarlo del todo lo volvería un
   círculo quieto, que es justo lo que no queremos decir. */
@media (prefers-reduced-motion: reduce) {
  .lg-sso.is-cargando .lg-sso-spin { animation-duration: 2.4s; }
}
.lg-sso-logo i { display: block; font-style: normal; }
.lg-sso-logo i:nth-child(1) { background: #F25022; }
.lg-sso-logo i:nth-child(2) { background: #7FBA00; }
.lg-sso-logo i:nth-child(3) { background: #00A4EF; }
.lg-sso-logo i:nth-child(4) { background: #FFB900; }
.lg-pronto {
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--panel);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ===== SEPARADOR ========================================================== */
.lg-o {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  font-size: 12px;
  color: var(--ink-mute);
}
.lg-o::before, .lg-o::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--panel-border);
}

/* ===== CAMPOS ============================================================= */
.lg-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.lg-campo > label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
}
.lg-well { position: relative; display: flex; align-items: center; }
.lg-well > .material-symbols-outlined {
  position: absolute;
  left: 13px;
  font-size: 18px;
  color: var(--ink-mute);
  pointer-events: none;
}
.lg-well input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  border-radius: var(--r-card);
  background: var(--ground-deep);
  border: 1px solid var(--panel-border);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}
.lg-well input::placeholder { color: var(--ink-mute); }
.lg-well input:hover { border-color: var(--panel-border-hi); }
.lg-well input:focus {
  outline: none;
  border-color: var(--mo-lavander);
  box-shadow: 0 0 0 2px var(--chip);
}
/* El input de contraseña deja lugar al ojo. */
.lg-well--pass input { padding-right: 44px; }
.lg-ojo {
  position: absolute;
  right: 6px;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  color: var(--ink-mute);
}
.lg-ojo:hover { color: var(--ink); background: var(--panel); }
.lg-ojo .material-symbols-outlined { font-size: 19px; }

.lg-fila {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: -1px 0 16px;
}
.lg-link {
  font-size: 13px;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
}
.lg-link:hover { color: var(--ink); border-bottom-color: var(--panel-border-hi); }

/* ===== CTA ================================================================ */
.lg-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--mo-lavander) 0%, var(--mo-violet) 100%);
  color: var(--sobre-violeta);
  font-size: 15px;
  font-weight: 600;
  transition: transform .18s, box-shadow .18s;
}
.lg-cta:hover { transform: translateY(-1px); box-shadow: var(--sombra-alta); }
.lg-cta .material-symbols-outlined { font-size: 19px; }

/* ===== PIE DE LA TARJETA ================================================== */
.lg-pie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-border);
  font-size: 11.5px;
  color: var(--ink-mute);
  text-align: center;
}
.lg-pie .material-symbols-outlined { font-size: 15px; }

/* ===== MENSAJES =========================================================== */
.lg-alerta {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 16px;
  padding: 11px 13px;
  border-radius: var(--r-card);
  font-size: 13px;
  line-height: 1.45;
}
.lg-alerta .material-symbols-outlined { font-size: 18px; flex: none; }
.lg-alerta--mal { background: rgba(251, 113, 133, 0.13); border: 1px solid rgba(251, 113, 133, 0.3); color: var(--bad); }
.lg-alerta--bien { background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.28); color: var(--ok); }

/* ===== RECUPERACIÓN ======================================================= */
.lg-secundarias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-mute);
}
.lg-secundarias button, .lg-secundarias a { color: var(--ink-soft); }
.lg-secundarias button:hover, .lg-secundarias a:hover { color: var(--ink); }

.lg-recuperar {
  margin-top: 16px;
  padding: 18px;
  border-radius: var(--r-card);
  background: var(--panel-strong);
  border: 1px solid var(--panel-border);
}
.lg-recuperar h2 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.lg-recuperar p { margin: 0 0 14px; font-size: 12.5px; color: var(--ink-mute); }
.lg-recuperar-acciones { display: flex; flex-wrap: wrap; gap: 9px; }
.lg-btn-chico {
  padding: 10px 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
}
.lg-btn-chico--fuerte { background: var(--mo-violet); color: var(--sobre-violeta); }
.lg-btn-chico--fuerte:hover { background: var(--mo-violet); }
.lg-btn-chico--suave { background: var(--panel); border-color: var(--panel-border); color: var(--ink); }
.lg-btn-chico--suave:hover { background: var(--panel-strong); border-color: var(--panel-border-hi); }

/* ===== PIE DE PÁGINA ====================================================== */
.lg-foot {
  flex: none;
  padding: 0 var(--gutter) clamp(12px, 2vh, 20px);
  text-align: center;
  font-size: 12px;
  color: var(--ink-mute);
}

[hidden] { display: none !important; }

/* ===== LOGIN EN DOS MITADES ==============================================
   A la izquierda la marca, a la derecha la tarjeta. Con un solo botón para
   entrar, la tarjeta centrada sola dejaba dos tercios de pantalla vacíos.

   El panel de la marca es violeta en los dos temas (como el carrusel del
   home): el logo animado es blanco y sobre violeta se ve igual de día y de
   noche, sin filtros.
   ========================================================================= */
.lg-main--split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: stretch;
}
.lg-main--split .lg-centro { align-self: center; }

.lg-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: clamp(28px, 4.5vh, 56px) clamp(28px, 3.4vw, 60px);
  border-radius: 20px;
  border: 1px solid var(--panel-border);
  background: linear-gradient(150deg, #7512BA 0%, #4a0b7a 52%, #22083a 100%);
  box-shadow: var(--sombra-alta);
  color: var(--sobre-violeta);
}
/* Dos luces que se mueven muy despacio: una lavanda arriba y el naranja de
   marca abajo. Es lo único que se mueve además del logo, y lo bastante lento
   para que se note recién después de unos segundos. */
.lg-hero::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background:
    radial-gradient(38% 34% at 78% 22%, rgba(181, 132, 255, 0.42), transparent 70%),
    radial-gradient(34% 30% at 18% 88%, rgba(251, 61, 1, 0.30), transparent 70%);
  animation: lg-luces 18s ease-in-out infinite alternate;
}
@keyframes lg-luces {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(-6%, 5%) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .lg-hero::before { animation: none; }
}

.lg-video {
  display: block;
  /* El archivo mide 500x278: más grande que eso se pixela. El tope en `vh` es
     para las pantallas bajas, donde a 360px se comía el alto del lema. */
  width: min(360px, 100%, 44vh);
  aspect-ratio: 500 / 278;
  margin: 0 0 clamp(18px, 3.4vh, 40px) -6px;
  pointer-events: none;
}
.lg-hero-kicker {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.lg-hero-lema {
  margin: 0;
  font-size: clamp(32px, 3.4vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 700;
  max-width: 13ch;
  text-wrap: balance;
}
.lg-hero-bajada {
  margin: 16px 0 0;
  max-width: 44ch;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

/* Angosta: la marca pasa arriba, más chica, y deja de pelear por el alto con
   el botón. */
@media (max-width: 900px) {
  body { height: auto; min-height: 100dvh; overflow: auto; }
  /* align-content: center porque, en una columna, la grilla estiraba las filas
     hasta el alto de la pantalla: el panel violeta crecía y la tarjeta quedaba
     flotando abajo, lejos de la marca. Centrado, marca y tarjeta van juntas. */
  .lg-main--split { grid-template-columns: minmax(0, 1fr); overflow: visible; align-content: center; }
  .lg-hero { padding: 24px 22px; }
  .lg-video { width: 200px; margin-bottom: 14px; }
  .lg-hero-lema { font-size: 30px; }
}

/* Teléfono: el panel violeta ocupaba toda la primera pantalla y el botón de
   Microsoft quedaba abajo del pliegue (en uno de 360x640, afuera). Arriba
   queda solo el logo animado de Market One, y la tarjeta se reduce al título y
   al botón: lo que hay que ver de una es cómo se entra. */
@media (max-width: 760px) {
  .lg-hero { padding: 18px 20px; }
  .lg-video { display: block; width: 150px; margin: 0 auto; }
  .lg-hero-kicker, .lg-hero-lema, .lg-hero-bajada { display: none; }

  .lg-marca .lg-logo, .lg-marca p, .lg-pie { display: none; }
  .lg-marca h1 { font-size: 19px; }
}

@media (max-width: 420px) {
  .lg-card { padding: 22px 18px; }
}

/* ===== MODO CLARO ========================================================
   Estas tres pantallas no tienen barra violeta: el contenido se apoya directo
   sobre el fondo de la pagina. En claro, entonces, la marca no puede ser el
   PNG blanco -desaparece- y el interruptor de tema tampoco puede ir en blanco.
   ========================================================================= */
:root[data-theme="light"] .lg-top .brand-mark,
:root[data-theme="light"] .lg-logo .brand-mark { filter: invert(1); }

/* El interruptor arriba a la derecha, para poder elegir el tema antes de
   entrar. Sobre fondo neutro sigue los tokens de texto, no el blanco de las
   barras. */
.lg-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.lg-top .tema-btn { color: var(--ink-mute); }
.lg-top .tema-btn:hover { background: var(--panel-strong); color: var(--ink); }
.lg-top-acciones { display: flex; align-items: center; gap: 10px; }

/* El ingreso con Microsoft es un <a> cuando esta disponible y un <button>
   deshabilitado cuando no: los dos tienen que verse igual. */
a.lg-sso { text-decoration: none; justify-content: center; }

/* El icono de las pantallas de error del SSO: mismo cuadradito que la marca,
   en el color de alerta. */
.lg-logo--alerta { background: rgba(251, 61, 1, 0.12); }
.lg-logo--alerta .material-symbols-outlined { color: var(--warn); }