/* ===========================================================================
   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;
}
/* El emblema sobre pastilla blanca, igual que en el panel (2026-09-18): estas pantallas son oscuras y
   el verde de marca necesita el blanco debajo para leerse como logo. Los verdes se fijan a los de tema
   claro porque el fondo inmediato es blanco siempre, sea cual sea el tema de la pagina. */
.brand-mark {
  width: 34px; height: 34px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--onix-brand-pill); border-radius: 10px; padding: 3px;
  --onix-logo-leaf-dark: var(--onix-brand-pill-leaf-dark);
  --onix-logo-leaf-light: var(--onix-brand-pill-leaf-light);
}
.brand-mark svg, .brand-mark img { width: 100%; height: auto; display: block; }
.brand-name {
  font-size: 16px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--onix-ink);
}

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;
}
.auth-pane-form { border-right: 1px solid var(--onix-border); }
.auth-pane-show { background: var(--onix-surface-nav); }

/* 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;
}
.auth-inner { width: 100%; max-width: 430px; }
.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 un punto al medio */
.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 {
  width: 5px; height: 5px; border-radius: 999px;
  border: 1px solid var(--onix-border-strong);
}

/* 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; }
}

/* --- Formulario de alta: secciones y dos columnas -------------------------- */
/* El alta pedia ocho campos en una sola columna, sin agrupar y sin panel de
   muestra: al lado del login parecia otro producto. Se parte en secciones con
   titulo, y los campos que caben de a dos van de a dos. Mismo layout partido
   que el login, mismas piezas .show-* a la derecha. */
.form-section { margin-top: 26px; }
.form-section:first-of-type { margin-top: 0; }
.form-section-title {
  display: flex; align-items: center; gap: 9px;
  font: var(--onix-text-caps); letter-spacing: var(--onix-tracking-caps);
  text-transform: uppercase; color: var(--onix-dim);
  padding-bottom: 9px; margin-bottom: 4px;
  border-bottom: 1px solid var(--onix-border);
}
.form-section-title span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; flex-shrink: 0;
  border-radius: 999px;
  background: var(--onix-accent-soft); color: var(--onix-accent);
  font-size: 10px; font-weight: 700;
}

.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field-grid > .field-full { grid-column: 1 / -1; }
.field-grid label { margin-top: 14px; }

/* La clave dejo de ser obligatoria: quien la tiene entra activado, quien no,
   entra igual y espera. El campo no puede leerse como un requisito. */
.key-optional {
  margin-top: 14px; padding: 14px 16px;
  border: 1px dashed var(--onix-border-strong);
  border-radius: var(--onix-radius-card);
  background: var(--onix-surface-field);
}
.key-optional label { margin-top: 0; }
/* Las claves se escriben en mayuscula, pero el texto de ayuda del campo no: en
   mayusculas se lee como un requisito a gritos, que es justo lo que dejo de ser. */
.key-optional input { text-transform: uppercase; }
.key-optional input::placeholder { text-transform: none; }
.key-optional .hint { margin-top: 8px; }

.terms-check {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 22px;
  font-size: 12.5px; font-weight: 400; line-height: 1.5; color: var(--onix-ink-3);
}
/* El selector global de `input` le daba alto de campo, fondo y borde de caja de
   texto: la casilla salia como un cuadro negro. */
.terms-check input[type="checkbox"] {
  width: 15px; height: 15px; flex-shrink: 0;
  margin: 2px 0 0; padding: 0;
  background: none; border: none; border-radius: 0;
  accent-color: var(--onix-accent);
  cursor: pointer;
}
.terms-check input[type="checkbox"]:focus { box-shadow: none; }
.terms-check input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--onix-accent); outline-offset: 2px;
}

/* --- Panel de muestra del alta: los tres pasos ---------------------------- */
.show-steps { display: flex; flex-direction: column; gap: 2px; }
.show-step {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px;
  border: 1px solid var(--onix-border);
  border-radius: var(--onix-radius-card);
  background: var(--onix-surface);
}
.show-step + .show-step { margin-top: 10px; }
.show-step-num {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  border-radius: 999px;
  background: var(--onix-accent-soft); color: var(--onix-accent);
  font-family: var(--onix-font-mono); font-size: 11px; font-weight: 600;
}
.show-step-title { font-size: 13.5px; font-weight: 600; color: var(--onix-ink); }
.show-step-text { font-size: 12.5px; line-height: 1.55; color: var(--onix-ink-3); margin-top: 3px; }

@media (max-width: 560px) {
  .field-grid { grid-template-columns: 1fr; }
}