/* Sinapta: acceso conversacional («una pregunta cada vez») sobre el fondo neuronal.
   Se carga después de auth.css y reutiliza sus piezas (anillo, QR, códigos, casilla). */

/* ------------------------------------------------------------------ Tokens (claro / oscuro) */
body.conv {
  --c-fg: #0b0b0e; --c-muted: #585e68; --c-stage: #edf0f4; --c-card: rgba(255, 255, 255, .8);
  --c-line: rgba(11, 11, 14, .1); --c-line-strong: rgba(11, 11, 14, .22);
  --c-accent: #e51f48; --c-btn: #e51f48; --c-btn-hover: #c8153b; --c-on-btn: #fff; --c-danger: #bf1030;
  --ink-rgb: 11, 11, 14; --acc-rgb: 229, 31, 72; --is-dark: 0;
  --c-pad: clamp(20px, 6vw, 72px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.conv {
    --c-fg: #f5f7fa; --c-muted: #9aa0a9; --c-stage: #0b0b0e; --c-card: rgba(20, 20, 25, .74);
    --c-line: rgba(245, 247, 250, .1); --c-line-strong: rgba(245, 247, 250, .24);
    --c-accent: #ff2d55; --c-btn-hover: #ff2d55; --c-danger: #ff8196;
    --ink-rgb: 245, 247, 250; --acc-rgb: 255, 45, 85; --is-dark: 1;
  }
}
:root[data-theme="dark"] body.conv {
  --c-fg: #f5f7fa; --c-muted: #9aa0a9; --c-stage: #0b0b0e; --c-card: rgba(20, 20, 25, .74);
  --c-line: rgba(245, 247, 250, .1); --c-line-strong: rgba(245, 247, 250, .24);
  --c-accent: #ff2d55; --c-btn-hover: #ff2d55; --c-danger: #ff8196;
  --ink-rgb: 245, 247, 250; --acc-rgb: 255, 45, 85; --is-dark: 1;
}

/* ------------------------------------------------------------------ Estructura a pantalla completa */
body.conv { background: var(--c-stage); color: var(--c-fg); overflow-x: hidden; -webkit-user-select: none; user-select: none; }
.conv .neural { position: fixed; inset: 0; z-index: 0; background: var(--c-stage); touch-action: none; }
.conv .neural canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
.conv .flow {
  position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  padding: 22px var(--c-pad) 36px; pointer-events: none;
}
.conv .ui { pointer-events: auto; touch-action: auto; -webkit-user-select: text; user-select: text; }
.conv .flow-brand { align-self: flex-start; }
.conv .wm { font: 800 24px/1 var(--font); letter-spacing: -.02em; color: var(--c-fg); text-decoration: none; }
.conv .wm-dot { color: var(--c-accent); }
.conv .flow-main { flex: 1; display: flex; align-items: center; padding: 28px 0; }
.conv .conv-form, .conv .cstep-wrap { width: 100%; max-width: 640px; }
.conv a { color: var(--c-fg); text-decoration-color: var(--c-accent); text-underline-offset: 3px; }
.conv a:hover { text-decoration-thickness: 2px; }
.conv :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

/* Un paso: con JS solo se ve uno; los demás quedan en el DOM, fuera de pantalla, para los gestores. */
.conv .cstep { margin: 0 0 32px; }
html.js .conv .cstep { margin: 0; }
html.js .conv .cstep.is-off {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; opacity: 0; pointer-events: none;
}
.conv .cstep.enter { animation: stepIn .55s cubic-bezier(.2, .7, .2, 1); }
@keyframes stepIn { from { opacity: 0; transform: translateY(16px); } }

.conv .ask-eyebrow { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.conv .bar { display: inline-flex; gap: 4px; }
.conv .bar i { width: 18px; height: 3px; border-radius: 2px; background: var(--c-line-strong); }
.conv .bar i.on { background: var(--c-accent); }
.conv .ask { display: block; margin: 0 0 22px; font: 800 clamp(28px, 4.6vw, 52px)/1.06 var(--font); letter-spacing: -.025em; text-wrap: balance; }
.conv .ask label { display: block; cursor: text; }
.conv .sub { margin: -8px 0 22px; max-width: 56ch; font: 400 16px/1.5 var(--font); color: var(--c-muted); }
.conv .sub b { color: var(--c-fg); font-weight: 600; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ Línea de respuesta */
.conv .line { position: relative; display: flex; align-items: center; gap: 14px; padding-bottom: 8px; border-bottom: 1.5px solid var(--c-line-strong); }
.conv .line:focus-within { border-bottom-color: var(--c-accent); }
.conv .line input[type="email"], .conv .line input[type="text"], .conv .line input.plain {
  flex: 1; min-width: 0; padding: 6px 0; border: 0; background: transparent; color: var(--c-fg); outline: none; border-radius: 0;
  font: 600 clamp(20px, 2.8vw, 30px) var(--font); letter-spacing: -.01em;
}
.conv .line input::placeholder { color: var(--c-muted); opacity: .55; }
.conv .line input:-webkit-autofill, .conv .line input:-webkit-autofill:hover, .conv .line input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--c-fg); -webkit-box-shadow: 0 0 0 1000px var(--c-stage) inset; caret-color: var(--c-fg);
  transition: background-color 99999s; animation-name: autofill; animation-duration: .01s;
}
html.js .conv .pw input:-webkit-autofill, html.js .conv .code input:-webkit-autofill { -webkit-text-fill-color: transparent; }
@keyframes autofill { from { opacity: 1; } to { opacity: 1; } }
.conv .syn { position: absolute; bottom: -1.5px; left: -90px; width: 90px; height: 1.5px; background: linear-gradient(90deg, transparent, var(--c-accent), transparent); opacity: 0; pointer-events: none; }
.conv .line.pulse .syn { animation: syn .75s ease-out; }
@keyframes syn { 0% { left: -90px; opacity: 1; } 100% { left: 100%; opacity: 0; } }

.conv .go {
  flex: none; width: 52px; height: 52px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: var(--c-btn); color: var(--c-on-btn); cursor: pointer; transition: transform .2s, opacity .2s, background .2s;
}
.conv .go .ico { width: 24px; height: 24px; }
.conv .go:hover:not(:disabled) { background: var(--c-btn-hover); transform: translateX(2px); }
.conv .go:disabled { opacity: .35; cursor: default; }
.conv .is-busy .go { opacity: .6; cursor: progress; }

.conv .cbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--c-btn); color: var(--c-on-btn); font: 700 16px var(--font); text-decoration: none; cursor: pointer; transition: background .2s, opacity .2s;
}
.conv a.cbtn { color: var(--c-on-btn); }
.conv .cbtn:hover:not(:disabled) { background: var(--c-btn-hover); }
.conv .cbtn:disabled { opacity: .35; cursor: default; }
.conv .cbtn .ico { width: 20px; height: 20px; }
.conv .cbtn-ghost { background: transparent; border: 1.5px solid var(--c-line-strong); color: var(--c-fg); min-height: 44px; padding: 0 16px; font-size: 14px; font-weight: 600; }
.conv .cbtn-ghost:hover:not(:disabled) { background: transparent; border-color: var(--c-fg); }
.conv a.cbtn-ghost { color: var(--c-fg); }
.conv .is-busy .cbtn { opacity: .6; cursor: progress; }

.conv .below { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin: 14px 0 0; font: 13px var(--mono); color: var(--c-muted); }
.conv .below a { color: var(--c-fg); }
.conv .below .linkbtn { padding: 0; border: 0; background: none; font: inherit; color: var(--c-fg); text-decoration: underline; text-decoration-color: var(--c-accent); text-underline-offset: 3px; cursor: pointer; }
.conv .below .linkbtn:disabled { color: var(--c-muted); text-decoration: none; cursor: default; }

/* Passkey: enlace discreto en la fila de pistas (el campo usa autocompletado condicional) */
.conv .pk { display: contents; }
.conv .pk-link {
  display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; color: var(--c-muted);
  cursor: pointer; transition: color .15s ease; pointer-events: auto; -webkit-user-select: none; user-select: none;
}
.conv .pk-link svg { width: 14px; height: 14px; flex: none; }
.conv .pk-link:hover:not(:disabled), .conv .pk-link:focus-visible { color: var(--c-accent); }
.conv .pk-link:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: 3px; }
.conv .pk-link:disabled { opacity: .55; cursor: progress; }
.conv .pk-status { flex-basis: 100%; margin: 0; color: var(--c-muted); }
.conv .pk-status.is-error { color: var(--c-danger); }
.conv .pk-row { margin-top: 18px; }

.conv .chip {
  display: inline-block; max-width: 100%; margin: 0 0 14px; padding: 6px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-card); color: var(--c-fg); font: 500 13px var(--mono); cursor: pointer;
}
.conv .chip:empty { display: none; }
.conv .chip span { color: var(--c-accent); }

/* Errores y avisos: una línea, sin caja */
.conv .cerror { display: flex; gap: 10px; align-items: flex-start; max-width: 60ch; margin: 0 0 18px; font: 500 14px/1.45 var(--mono); color: var(--c-danger); }
.conv .cerror .ico { width: 18px; height: 18px; margin-top: 1px; }
.conv .cerror p { margin: 0; }
.conv .shake { animation: shake .5s cubic-bezier(.36, .07, .19, .97) both; }

/* ------------------------------------------------------------------ Contraseña como cadena de neuronas */
.conv .pw { position: relative; flex: 1; min-width: 0; height: 52px; }
.conv .pw input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--c-fg); outline: none; font: 600 20px var(--font); }
html.js .conv .pw input { color: transparent; caret-color: transparent; }
html.js .conv .pw input::selection { background: transparent; }
.conv .neurons { position: absolute; left: 0; top: 50%; display: flex; align-items: center; max-width: 100%; overflow: hidden; transform: translateY(-50%); pointer-events: none; }
.conv .neurons .n { flex: none; width: 13px; height: 13px; border-radius: 50%; background: var(--c-fg); opacity: .82; }
.conv .neurons .s { flex: none; width: 14px; height: 1.5px; background: var(--c-line-strong); }
.conv .neurons .n.new { background: var(--c-accent); opacity: 1; animation: pop .4s cubic-bezier(.2, 1.6, .4, 1); }
.conv .neurons .s.new { background: var(--c-accent); }
.conv .neurons .ph { font: 600 clamp(20px, 2.8vw, 30px) var(--font); color: var(--c-muted); opacity: .55; white-space: nowrap; }
.conv .caret { flex: none; width: 2px; height: 30px; margin-left: 8px; background: var(--c-accent); animation: blink 1.05s steps(1) infinite; }
.conv .pw:not(:focus-within) .caret { opacity: 0; animation: none; }

/* ------------------------------------------------------------------ Código: 6 casillas con neuronas */
.conv .line--code { border-bottom: 0; flex-wrap: wrap; }
.conv .code { position: relative; flex: 1 1 320px; min-width: 0; height: 80px; }
.conv .code input {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 12px; background: transparent; color: var(--c-fg); outline: none;
  font: 800 28px var(--font); letter-spacing: .4em; padding: 0 0 0 16px;
}
html.js .conv .code input { color: transparent; caret-color: transparent; }
.conv .slots { position: absolute; inset: 0; display: flex; align-items: center; gap: clamp(6px, 1.6vw, 16px); pointer-events: none; }
.conv .slot {
  position: relative; flex: 1 1 0; min-width: 0; max-width: 56px; height: clamp(52px, 7.4vw, 68px); display: grid; place-items: center;
  border: 1.5px solid var(--c-line-strong); border-radius: 12px; background: var(--c-card); color: var(--c-fg); font: 800 clamp(24px, 3.4vw, 34px) var(--font);
}
.conv .slot.on { border-color: var(--c-accent); }
.conv .slot.cur { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }
.conv .slot.new { animation: pop .35s cubic-bezier(.2, 1.6, .4, 1); }
.conv .slot::after { content: ""; position: absolute; bottom: -10px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--c-line-strong); }
.conv .slot.on::after { background: var(--c-accent); }
.conv .code:not(:focus-within) .slot.cur { box-shadow: none; border-color: var(--c-line-strong); }
.conv .line--code[data-invalid] .slot { border-color: var(--c-danger); }
.conv .line--code .go { margin-top: 18px; }
html.js .conv .line--code .go.auto { display: none; }
.conv .line--code .syn { bottom: 0; }

/* Sin JS el código es un campo de texto normal */
html:not(.js) .conv .code { flex-basis: 100%; height: 56px; }
html:not(.js) .conv .code input { border: 1.5px solid var(--c-line-strong); color: var(--c-fg); }
html:not(.js) .conv .slots { display: none; }

/* ------------------------------------------------------------------ Elementos reutilizados del kit */
.conv .ring { margin: 26px 0 0; color: var(--c-muted); font: 13px var(--mono); }
.conv .ring-bg { stroke: var(--c-line-strong); }
.conv .ring-fg { stroke: var(--c-accent); }
.conv .ring-n { color: var(--c-fg); }
.conv .resend { margin: 6px 0 0; }
.conv .qr { margin: 0 0 18px; }
.conv .step-text { margin: 0 0 14px; font: 600 16px var(--font); }
.conv .step-sub { margin: 0 0 8px; color: var(--c-muted); font: 13px var(--mono); }
.conv .keybox { margin: 0 0 24px; }
.conv .key { border-color: var(--c-line-strong); background: var(--c-card); color: var(--c-fg); }
.conv .choices { margin: 0 0 24px; max-width: 520px; }
.conv .choices legend { margin: 0 0 12px; font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.conv .choice-card { background: var(--c-card); border-color: var(--c-line-strong); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.conv .choice input:checked + .choice-card { border-color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 8%, var(--c-card)); }
.conv .choice input:checked + .choice-card .choice-radio { border-color: var(--c-accent); }
.conv .choice input:checked + .choice-card .choice-radio::after { background: var(--c-accent); }
.conv .choice-icon { background: color-mix(in srgb, var(--c-accent) 14%, transparent); color: var(--c-accent); }
.conv .choice-desc { color: var(--c-muted); }
.conv .badge { background: var(--c-accent); }
.conv .codes-card { max-width: 520px; background: var(--c-card); border-color: var(--c-line-strong); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.conv .codes code { color: var(--c-fg); }
.conv .codes li { border-color: var(--c-line); }
.conv .btn-ghost { color: var(--c-fg); border-color: var(--c-line-strong); }
.conv .btn-ghost:hover { border-color: var(--c-fg); }
.conv .check { max-width: 520px; }
.conv .check-box { background: var(--c-card); border-color: var(--c-line-strong); }
.conv .check input:checked + .check-box { background: var(--c-accent); border-color: var(--c-accent); }
.conv .progress { max-width: 240px; margin: 18px 0 22px; background: var(--c-line-strong); }
.conv .progress span { background: var(--c-accent); }

.conv .done { margin: 0 0 6px; font: 800 clamp(34px, 6vw, 72px)/1.04 var(--font); letter-spacing: -.03em; }

@media (max-width: 520px) {
  .conv .flow { padding-top: 16px; }
  .conv .go { width: 48px; height: 48px; }
  .conv .codes { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .conv .cstep.enter, .conv .neurons .n.new, .conv .caret, .conv .line.pulse .syn, .conv .slot.new, .conv .shake { animation: none; }
  .conv .go, .conv .pk-link { transition: none; }
}
@media (forced-colors: active) {
  .conv .go, .conv .cbtn { forced-color-adjust: none; }
}
@media print {
  .conv .neural, .conv .flow-brand, .conv .ask-eyebrow { display: none !important; }
  body.conv { background: #fff; color: #000; }
  .conv .flow { display: block; padding: 0; }
}