/* ---------------------------------------------------------------------------
   registro.css — registro previo (paso 1 del flujo, antes de cualquier triage).

   Se apoya en `pages/login.css` para la card, el input y el botón; aquí solo
   va lo propio de este formulario: la rejilla de 8 campos y las tarjetas de
   categoría. Orden de links: tokens → base → form-controls → login → registro.
--------------------------------------------------------------------------- */

/* Alias que consume `components/form-controls.css`. Viven en `pages/triage.css`,
   que además trae el layout de dos columnas del triage; aquí solo hacen falta
   estos tres colores. */
:root {
  --triage-border: var(--refi-ink-15);
  --triage-moss-l: var(--refi-green);
  --triage-muted:  var(--refi-ink-50);
}

/* `login.css` centra con `display:grid; place-items:center`. Aquí el contenido
   es más alto que la ventana, así que se pasa a flujo normal y se centra la
   card con `margin:auto`. */
.registro-page { display: block; padding: 0 0 var(--s-8); }
.registro-page .login-wrap { max-width: 620px; margin: var(--s-6) auto 0; padding: 0 var(--gutter); }
.reg-card { padding: var(--s-7) var(--s-7) var(--s-6); }

/* Logo más grande que en `login.css` (44px): esta card es más ancha (620 vs
   460) y el registro es la primera pantalla de marca que ve la persona.
   Override local a propósito — el login se queda como está. */
.registro-page .login-logo { height: 80px; }

/* ── Migas de paso ────────────────────────────────────────────────────────── */
.reg-steps {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 11px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--refi-ink-50);
  margin-bottom: var(--s-5);
}
.reg-steps i { font-style: normal; }
.reg-steps .on { color: var(--refi-green-700); }
.reg-steps .sep { color: var(--refi-ink-30); }

/* ── Rejilla de campos ────────────────────────────────────────────────────── */
.reg-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--s-4); margin-bottom: var(--s-6);
}
.reg-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.reg-field--full { grid-column: 1 / -1; }

/* Bloque, no flex: con flex el punto de obligatorio se va al extremo derecho
   cuando la etiqueta parte en dos líneas. */
.reg-label { display: block; font: 600 var(--fs-sm) var(--font-sans); color: var(--fg); }
.reg-label .req { color: var(--refi-green-700); font-size: 15px; line-height: 1; margin-left: 5px; }
.reg-hint { font-size: 11px; color: var(--fg-subtle); line-height: 1.45; }

/* Usuario: prefijo @ dentro del control */
.reg-at { position: relative; }
.reg-at input { padding-left: 30px; }
.reg-at::before {
  content: '@'; position: absolute; left: 13px; top: 50%;
  transform: translateY(-50%); font: 600 15px var(--font-sans);
  color: var(--refi-ink-50); pointer-events: none;
}

/* Celular: indicativo + número */
.reg-phone { display: grid; grid-template-columns: 104px 1fr; gap: 8px; }
.reg-phone select { padding-right: 28px; background-position: right 9px center; }

/* ── Tarjetas de categoría ────────────────────────────────────────────────── */
.reg-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.reg-cat input { position: absolute; opacity: 0; width: 0; height: 0; }
.reg-cat-box {
  display: flex; gap: 11px; align-items: flex-start; height: 100%;
  border: 1.5px solid var(--border); border-radius: var(--r-md);
  background: var(--refi-white); padding: 13px 14px; cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.reg-cat-box:hover { transform: translateY(-1px); border-color: var(--border-strong); }
.reg-cat-ico { flex-shrink: 0; margin-top: 1px; color: var(--refi-ink-30); line-height: 0; }
.reg-cat-nm { display: block; font: 700 var(--fs-sm) var(--font-sans); color: var(--fg); margin-bottom: 3px; }
.reg-cat-ds { display: block; font-size: 11.5px; line-height: 1.45; color: var(--fg-muted); }

.reg-cat input:checked + .reg-cat-box { border-color: var(--cat-color); background: var(--cat-tint); }
.reg-cat input:checked + .reg-cat-box .reg-cat-ico { color: var(--cat-color); }
.reg-cat input:checked + .reg-cat-box .reg-cat-nm { color: var(--cat-color); }
.reg-cat input:focus-visible + .reg-cat-box { outline: 2px solid var(--refi-blue); outline-offset: 3px; }

.reg-cats.field-error .reg-cat-box { border-color: #c0392b; }

/* ── Cierre ───────────────────────────────────────────────────────────────── */
.reg-submit { margin-top: var(--s-6); }

.reg-error {
  margin-top: var(--s-4); font-size: var(--fs-sm); color: #8E2A30;
  background: #FDEBEC; border: 1px solid #F4C3C7; border-radius: var(--r-md);
  padding: 10px 14px; display: none;
}
.reg-error[data-on] { display: block; }

/* ── Confirmación "revisa tu correo" ──────────────────────────────────────── */
.reg-sent { text-align: center; }
.reg-sent-mark {
  width: 60px; height: 60px; margin: 0 auto var(--s-5);
  display: grid; place-items: center; border-radius: 50%;
  background: var(--refi-green-50); color: var(--refi-green-700);
  border: 1px solid var(--refi-green-100);
}
.reg-sent .login-lead { margin-bottom: var(--s-4); }
.reg-sent .login-lead b { color: var(--fg); font-weight: 600; word-break: break-all; }
.reg-sent-note { font-size: var(--fs-sm); color: var(--fg-subtle); line-height: var(--lh-loose); }
.reg-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--refi-blue-700);
  border-bottom: 1px dotted var(--refi-blue-300);
}
.reg-link:hover { color: var(--refi-blue); }

.reg-foot {
  margin-top: var(--s-5); text-align: center; font-size: var(--fs-xs);
  color: var(--fg-subtle); line-height: var(--lh-normal);
}
.reg-foot a { color: var(--refi-blue-700); text-decoration: none; border-bottom: 1px dotted var(--refi-blue-300); }

@media (max-width: 620px) {
  .reg-grid, .reg-cats { grid-template-columns: 1fr; }
}