/* ===========================================================================
   Onix — páginas de acceso (login, registro, recuperar contraseña)
   ---------------------------------------------------------------------------
   Fase 7 del rediseño. Las tres páginas compartían el mismo <style> inline
   copiado tres veces; ahora comparten este archivo. Todo el color sale de
   tokens.css, así que funcionan en claro y en oscuro sin una regla extra.
   =========================================================================== */

* { box-sizing: border-box; }

body {
  font-family: var(--onix-font-sans);
  background: var(--onix-bg);
  color: var(--onix-ink);
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 24px 16px;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* El halo de fondo: en claro es un verde muy lavado, en oscuro apenas una
   insinuación. Sale del mismo token, así que no hay dos versiones. */
.blob-1, .blob-2 {
  position: fixed; border-radius: 50%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(circle, var(--onix-accent-ring) 0%, transparent 70%);
}
.blob-1 { top: -240px; left: -200px; width: 600px; height: 600px; }
.blob-2 { bottom: -240px; right: -220px; width: 540px; height: 540px; }

.back-home {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 4px;
  font-size: 13px; font-weight: 550;
  color: var(--onix-muted); text-decoration: none;
}
.back-home:hover { color: var(--onix-ink); }

.card {
  position: relative; z-index: 1;
  width: 100%; max-width: 400px; padding: 32px;
  background: var(--onix-surface);
  border: 1px solid var(--onix-border);
  border-radius: var(--onix-radius-panel);
  box-shadow: var(--onix-shadow-md);
}

.brand {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: 22px;
  text-decoration: none;
}
.brand-logo { height: 34px; width: auto; display: block; }

h1 {
  font-size: 22px; font-weight: 600; letter-spacing: -0.025em;
  text-align: center; margin: 0 0 6px; color: var(--onix-ink);
}
.sub {
  text-align: center; font-size: 13px; color: var(--onix-muted);
  margin: 0 0 22px; line-height: 1.5;
}
h1 + form, h1 + .notice { margin-top: 22px; }

label {
  display: block; font-size: 12px; font-weight: 550;
  margin-top: 16px; margin-bottom: 7px; color: var(--onix-ink-3);
}
input, select {
  width: 100%; height: var(--onix-h-field-lg); padding: 0 14px;
  border: 1px solid var(--onix-border);
  border-radius: var(--onix-radius-control);
  background: var(--onix-surface-field);
  color: var(--onix-ink);
  /* 16px o iOS hace zoom al enfocar el campo. */
  font-size: 16px; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder { color: var(--onix-dim); }
input:focus, select:focus {
  outline: none;
  border-color: var(--onix-accent);
  box-shadow: 0 0 0 3px var(--onix-accent-ring);
}

button {
  width: 100%; height: 48px; margin-top: 22px;
  border: none; border-radius: var(--onix-radius-control);
  background: var(--onix-accent); color: var(--onix-accent-ink);
  font-family: inherit; font-size: 14.5px; font-weight: 650;
  letter-spacing: -0.01em; cursor: pointer;
  transition: background-color .15s;
}
button:hover { background: var(--onix-accent-hover); }
button:focus-visible { outline: 2px solid var(--onix-accent); outline-offset: 2px; }
button[disabled] {
  background: var(--onix-surface-mute); color: var(--onix-dim); cursor: not-allowed;
}

.error {
  display: none; margin-top: 16px; padding: 11px 13px;
  background: var(--onix-danger-soft);
  border: 1px solid var(--onix-danger-line);
  border-radius: var(--onix-radius-control);
  color: var(--onix-danger); font-size: 13px; line-height: 1.45;
}

.notice, .callout {
  margin-top: 16px; padding: 12px 14px;
  background: var(--onix-accent-soft);
  border-radius: var(--onix-radius-control);
  color: var(--onix-ink-2); font-size: 13px; line-height: 1.5;
}

.hint { font-size: 11.5px; color: var(--onix-dim); margin-top: 6px; line-height: 1.5; }

.foot {
  text-align: center; font-size: 13px;
  color: var(--onix-muted); margin-top: 18px;
}
.foot a { color: var(--onix-accent); font-weight: 550; text-decoration: none; }
.foot a:hover { color: var(--onix-accent-hover); text-decoration: underline; }

/* --- Planes (registro) ---------------------------------------------------- */
.plans { display: grid; gap: 10px; margin-top: 16px; }
.plan {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 16px; cursor: pointer;
  border: 1px solid var(--onix-border);
  border-radius: var(--onix-radius-card);
  background: var(--onix-surface);
  transition: border-color .15s, background-color .15s;
}
.plan:hover { border-color: var(--onix-border-strong); background: var(--onix-surface-2); }
.plan.selected {
  border-color: var(--onix-accent);
  background: var(--onix-accent-soft);
  box-shadow: 0 0 0 3px var(--onix-accent-ring);
}
.plan-name { font-size: 13.5px; font-weight: 600; color: var(--onix-ink); }
.plan-price {
  font-family: var(--onix-font-mono); font-variant-numeric: tabular-nums;
  font-size: 14px; font-weight: 500; color: var(--onix-accent);
}

/* --- El conmutador de tema vive arriba a la derecha ----------------------- */
.auth-theme {
  position: absolute; top: 16px; right: 16px; z-index: 2;
}

/* Registro y recuperar contraseña ponen "Volver" y el conmutador en la misma
   fila, dentro del flujo normal - antes el conmutador era position:fixed/absolute
   respecto al body, sin relación con la altura real de "Volver", así que segun
   el contenido su borde inferior terminaba mordiendo la esquina de la tarjeta.
   Esta fila reserva su propia altura (min-height igual al boton en movil) y el
   conmutador se ancla A ELLA, no al body, así que nunca puede invadir lo de abajo. */
.auth-top-row {
  position: relative; z-index: 1;
  width: 100%; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 8px;
}
.auth-top-row .auth-theme {
  position: absolute; top: 0; right: 4px;
}

/* ===========================================================================
   Pantalla dividida (login)
   ---------------------------------------------------------------------------
   Izquierda el formulario, derecha la muestra del producto. Debajo de 900px
   la muestra se oculta: en un teléfono lo único que importa es entrar.
   =========================================================================== */

body.auth-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  justify-content: initial;
  padding: 0;
}

.auth-pane {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  padding: 34px 40px;
  min-width: 0;
}
/* LA MITAD DE LA MUESTRA, EN EL VERDE (26 sep 2026): el formulario en blanco y al lado el mismo verde
   bosque de la franja de la landing, como la barra verde y el blanco del panel. En oscuro --onix-invert es
   carbón, igual que el panel. Las piezas .show-* no cambian: aquí se les reasignan los tokens, así que
   toman los colores del bloque oscuro sin reglas propias. */
.auth-pane-show {
  isolation: isolate; overflow: hidden;
  background: var(--onix-invert);
  --onix-ink: var(--onix-invert-ink);
  --onix-muted: var(--onix-invert-muted);
  --onix-border: var(--onix-invert-border);
  --onix-surface: var(--onix-invert-surface);
  --onix-accent: var(--onix-invert-accent);
  --onix-accent-ink: var(--onix-invert);
  --onix-bubble-in: color-mix(in srgb, var(--onix-invert-ink) 9%, transparent);
  --onix-bubble-in-ink: var(--onix-invert-ink);
  --onix-bubble-out: color-mix(in srgb, var(--onix-invert-accent) 18%, transparent);
  --onix-bubble-out-ink: var(--onix-invert-ink);
}
/* El emblema, grande y tenue, detrás de la muestra: el mismo de la landing y de la Bandeja vacía. */
.auth-pane-show::before {
  content: ""; position: absolute; z-index: -1;
  right: -90px; bottom: -70px; width: 520px; aspect-ratio: 640 / 552;
  background: var(--onix-invert-accent); opacity: 0.06;
  -webkit-mask: url("../img/onix-logo-claro.svg") center / contain no-repeat;
  mask: url("../img/onix-logo-claro.svg") center / contain no-repeat;
}

/* La marca arriba, el formulario al centro, el pie abajo: tres filas y el
   centro se queda con el espacio sobrante. */
.auth-top { flex-shrink: 0; }
.auth-middle {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: 32px 0;
}
/* Centrado en su mitad: pegado a la orilla dejaba media mitad vacía a la derecha. */
.auth-inner { width: 100%; max-width: 400px; margin: 0 auto; }
.auth-pane-show .auth-inner { max-width: 520px; }

.auth-foot-legal {
  flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 18px;
  font-size: 12px; color: var(--onix-dim);
}
.auth-foot-legal a { color: var(--onix-dim); text-decoration: none; }
.auth-foot-legal a:hover { color: var(--onix-ink-2); }

body.auth-split h1 { text-align: left; font-size: 30px; margin-bottom: 7px; }
body.auth-split .sub { text-align: left; margin-bottom: 26px; }

/* Etiqueta con enlace a la derecha (Contraseña / ¿La olvidaste?) */
.label-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 16px; margin-bottom: 7px;
}
.label-row label { margin: 0; }
.label-row a { font-size: 12px; color: var(--onix-muted); text-decoration: none; }
.label-row a:hover { color: var(--onix-accent); }

/* Campo de contraseña con el ojo adentro */
.field-with-action { position: relative; }
.field-with-action input { padding-right: 46px; }
.field-action {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin: 0; padding: 0;
  border: none; border-radius: var(--onix-radius-control);
  background: transparent; color: var(--onix-dim); cursor: pointer;
}
.field-action:hover { color: var(--onix-ink-2); background: var(--onix-surface-2); }

/* Separador con una "o" al medio: el punto solo no se leía. */
.auth-or {
  display: flex; align-items: center; gap: 14px;
  margin: 24px 0;
}
.auth-or::before, .auth-or::after {
  content: ""; flex: 1; height: 1px; background: var(--onix-border);
}
.auth-or span { font-size: 12.5px; color: var(--onix-dim); }

/* Botón secundario a lo ancho (magic link) */
.btn-wide-secondary {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 48px; margin: 0;
  border: 1px solid var(--onix-border);
  border-radius: var(--onix-radius-control);
  background: var(--onix-surface);
  color: var(--onix-ink-2);
  font-family: inherit; font-size: 14px; font-weight: 550;
  text-decoration: none;
}
.btn-wide-secondary:hover { background: var(--onix-surface-2); border-color: var(--onix-border-strong); }

body.auth-split .foot { text-align: left; margin-top: 20px; }

/* --- Panel de muestra ----------------------------------------------------- */
.show-eyebrow {
  font: var(--onix-text-caps); letter-spacing: var(--onix-tracking-caps);
  text-transform: uppercase; color: var(--onix-accent);
  margin-bottom: 16px;
}
.show-headline {
  font-size: 29px; font-weight: 600; line-height: 1.32;
  letter-spacing: -0.02em; color: var(--onix-ink);
  margin: 0 0 30px;
}
.show-headline b { font-weight: 600; color: var(--onix-accent); }

/* El panel del chat va sobre superficie neutra, igual que .show-order, y el
   color lo ponen las burbujas. Estuvo en --onix-accent-soft, que en tema claro
   es casi exactamente el mismo verde que --onix-bubble-out, asi que las
   burbujas de Onix desaparecian y el texto quedaba flotando. En oscuro no se
   notaba porque ahi bubble-out es un verde solido. */
.show-chat {
  padding: 16px;
  border: 1px solid var(--onix-border);
  border-radius: var(--onix-radius-panel);
  background: var(--onix-surface);
}
.show-chat-head {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 13px; margin-bottom: 14px;
  border-bottom: 1px solid var(--onix-border);
}
.show-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 999px;
  background: var(--onix-accent); color: var(--onix-accent-ink);
  font-size: 11px; font-weight: 650; letter-spacing: 0.02em;
}
.show-chat-name { font-size: 13px; font-weight: 600; color: var(--onix-ink); }
.show-chat-state { font-size: 11.5px; color: var(--onix-muted); margin-top: 1px; }

.show-bubbles { display: flex; flex-direction: column; gap: 9px; }
.show-bubble {
  max-width: 88%; padding: 9px 12px;
  border-radius: var(--onix-radius-card);
  font-size: 13px; line-height: 1.45;
}
.show-bubble-in {
  align-self: flex-start;
  background: var(--onix-bubble-in); color: var(--onix-bubble-in-ink);
}
.show-bubble-out {
  align-self: flex-end;
  background: var(--onix-bubble-out); color: var(--onix-bubble-out-ink);
}
.show-bubble .onix-num { font-family: var(--onix-font-mono); font-variant-numeric: tabular-nums; }

.show-order {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding: 14px 16px;
  border: 1px solid var(--onix-border);
  border-radius: var(--onix-radius-card);
  background: var(--onix-surface);
}
.show-order svg { color: var(--onix-accent); flex-shrink: 0; }
.show-order-title { font-size: 13.5px; font-weight: 550; color: var(--onix-ink); }
.show-order-meta {
  font-family: var(--onix-font-mono); font-variant-numeric: tabular-nums;
  font-size: 12px; color: var(--onix-muted); margin-top: 2px;
}

@media (max-width: 900px) {
  body.auth-split { grid-template-columns: 1fr; }
  .auth-pane-show { display: none; }
  .auth-pane-form { border-right: none; }
  .auth-pane { padding: 24px 20px; }
  .auth-inner { max-width: 430px; margin: 0 auto; }
  body.auth-split h1 { font-size: 25px; }
}

@media (max-width: 480px) {
  .card { padding: 24px 20px; border-radius: var(--onix-radius-card); }
  h1 { font-size: 20px; }
}

/* En tema claro el login va limpio, como el panel (estilo Linear, 2026-09-23): sin el halo
   verde, que teñía el fondo. En oscuro se queda, porque ahí apenas se insinúa. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .blob-1, :root:not([data-theme="dark"]) .blob-2 { display: none; }
}
:root[data-theme="light"] .blob-1, :root[data-theme="light"] .blob-2 { display: none; }