/* Páginas de acceso de Synaptic ID (entrar, crear cuenta, recuperar, confirmar). Una columna, alineada a la izquierda:
   qué pasa, lo único que hay que hacer ahora y adónde lleva. Con un producto (?app= o el cliente OIDC), su nombre y su
   color llegan desde el servidor en el primer pintado: una línea de su color arriba, su monograma y su botón. La persona
   no siente que cambió de sitio; abajo, discreto, dice que es Synaptic ID. html[data-mark="orb"]: el orbe de Brand Vault. */
body.acceso{min-height:100vh;display:flex;flex-direction:column;
  background:radial-gradient(90% 46% at 50% -12%,var(--accent-tint) 0%,transparent 72%) no-repeat,var(--paper)}
body.acceso::before{content:"";display:block;height:4px;background:var(--product,var(--teal))}
html[data-theme-source="fallback"] body.acceso::before,html:not([data-theme-source]) body.acceso::before{
  background:linear-gradient(90deg,var(--teal),var(--glow))}
.account{width:100%;max-width:460px;margin:0 auto;padding:32px 16px 24px;flex:1}
@media (min-width:720px){.account{padding-top:9vh}}
.acc-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:32px}
.acc-brand{display:inline-flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;min-height:var(--tap)}
.acc-orb{width:36px;height:36px;border-radius:50%;flex:none}
.acc-mark.pmark{--m:36px}
.acc-name{display:block;font-weight:640;letter-spacing:-.01em;line-height:1.25}
.acc-name small{display:block;font-weight:450;color:var(--muted);font-size:var(--t-13);letter-spacing:0}
html[data-mark="orb"] .acc-mark{color:transparent;border-radius:50%;background:
  radial-gradient(circle at 50% 50%,#F7F4FF 0 3px,transparent 3.6px),
  radial-gradient(circle at 50% 50%,transparent 10px,var(--product,#A69CFF) 11px 12.5px,transparent 13px),var(--night);
  box-shadow:0 0 18px color-mix(in srgb,var(--product,#A69CFF) 45%,transparent)}
.dest{font-size:var(--t-13);color:var(--muted);text-align:right;line-height:1.3;margin:0}
.dest b{display:block;color:var(--ink);font-weight:600}
.account h1{font-size:var(--t-30);line-height:1.15;letter-spacing:-.025em;font-weight:640}
.account h1:focus{outline:none}  /* el guion lo enfoca para que un lector de pantalla anuncie la vista nueva */
.lead{margin:12px 0 0;color:var(--ink-2);font-size:var(--t-16);max-width:60ch}
.lead strong{color:var(--ink)}
/* pasos de «crear tu cuenta»: es una secuencia de verdad */
.steps{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;counter-reset:s}
.steps li{counter-increment:s;font-size:var(--t-12);line-height:1.3;color:var(--muted);padding-top:10px;
  border-top:3px solid var(--line)}
.steps li::before{content:counter(s) ". "}
.steps li:last-child::before{content:""}
.steps li.done{border-top-color:var(--accent);color:var(--ink)}
.steps li[aria-current="step"]{border-top-color:var(--accent);color:var(--ink);font-weight:650}
.panel{margin-top:24px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r-l);padding:24px 22px;
  box-shadow:var(--sh-2)}
@media (max-width:420px){.panel{padding:20px 16px}}
.panel form{display:flex;flex-direction:column;gap:16px}
.field input{width:100%}
.pw{position:relative;display:flex}
.pw input{padding-right:96px}
.pw button{position:absolute;right:4px;top:50%;transform:translateY(-50%);font:inherit;font-size:var(--t-14);font-weight:600;
  background:none;border:0;color:var(--accent-text);padding:0 12px;min-height:40px;min-width:44px;border-radius:var(--r-xs);
  cursor:pointer}
.pw button:hover{background:var(--accent-tint)}
.btn.wide{width:100%;font-size:var(--t-16);min-height:48px}
.note{margin:0;font-size:var(--t-14);color:var(--muted)}
.facts{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;font-size:var(--t-14)}
.facts li{padding-left:18px;position:relative}
.facts li::before{content:"";position:absolute;left:2px;top:.6em;width:6px;height:6px;border-radius:50%;
  background:var(--accent)}
.msg{border-radius:var(--r-m);padding:12px 14px;font-size:var(--t-14);margin:0;color:var(--ink)}
.msg:empty{display:none}
.msg.bad{background:var(--bad-tint);border-left:3px solid var(--bad)}
.msg.ok{background:var(--ok-tint);border-left:3px solid var(--ok)}
.msg.info{background:var(--accent-tint);border-left:3px solid var(--accent)}
.msg .actions{margin-top:10px}
.actions{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.linkbtn{font:inherit;font-size:var(--t-14);background:none;border:0;padding:8px 0;min-height:var(--tap);
  color:var(--accent-text);text-decoration:underline;text-underline-offset:.18em;cursor:pointer;text-align:left}
.linkbtn[disabled]{color:var(--muted);text-decoration:none;cursor:default}
.alt{margin:18px 0 0;font-size:var(--t-14);color:var(--muted)}
.alt a{display:inline-block;padding:10px 0}
.foot{width:100%;max-width:460px;margin:0 auto;padding:0 16px 28px;display:flex;flex-wrap:wrap;gap:4px 16px;
  align-items:center;font-size:var(--t-14);color:var(--muted)}
.foot nav{display:flex;flex-wrap:wrap;gap:0 4px}
.foot nav a{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 8px;margin-left:-8px;
  color:var(--ink-2)}
.foot .sig{margin:0 0 0 auto;display:inline-flex;align-items:center;gap:6px;font-size:var(--t-13)}
.foot .sig img{border-radius:50%}