/* El onboarding de una marca nueva (docs/PLAN-onboarding.md), con la piel del panel
   (docs/PIEL-ANCESTRA.md): vidrio oscuro, serif con una palabra en itálica, pastilla
   hueso para seguir, mono sólo en los rótulos.

   Accesible para daltónicos (Kalb lo es, y el panel lo asume para todos): ningún
   estado se dice sólo con color. Hecho lleva ✓ y la palabra; salteado, rayas y la
   palabra; lo elegido, borde doble, ✓ y aria-pressed; lo detectado, una marca con
   texto debajo. */

.onb{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;overflow:auto;color:var(--ink)}
.onb[hidden]{display:none}

/* ── la barra de arriba ── */
.onb-barra{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:22px;padding:14px var(--gut);
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:var(--vidrio);-webkit-backdrop-filter:var(--vidrio);
  border-bottom:1px solid var(--line2)}
.onb-casa{display:flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap}
.onb-casa .punto{width:10px;height:10px;background:var(--acc)}
.onb-pasos{flex:1 1 auto;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;max-width:760px;list-style:none;margin:0;padding:0}
.onb-seg{display:flex;flex-direction:column;gap:5px;min-width:0}
.onb-seg button{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:5px;min-width:0}
.onb-seg button:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px}
.onb-seg .raya{height:5px;border-radius:3px;background:var(--line3)}
.onb-seg .nom{font-size:.72rem;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.onb-seg[data-e="hecho"] .raya{background:var(--acc)}
.onb-seg[data-e="hecho"] .nom::before{content:'✓ ';color:var(--acc)}
.onb-seg[data-e="salteado"] .raya{background:repeating-linear-gradient(135deg,var(--ink3) 0 4px,transparent 4px 8px)}
.onb-seg[data-e="salteado"] .nom::after{content:' · salteado'}
.onb-seg[data-vuelta="2"]:not([data-e]) .raya{background:transparent;border:1px dashed var(--ink3);height:3px}
.onb-seg[aria-current="step"] .raya{outline:2px solid var(--ink);outline-offset:2px}
.onb-seg[aria-current="step"] .nom{color:var(--ink);font-weight:600}
.onb-donde{font-family:var(--mono);font-size:.667rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.onb-guardado{margin-left:auto;font-size:.82rem;color:var(--mute);white-space:nowrap}
.onb-guardado button{color:var(--acc);text-decoration:underline;text-underline-offset:3px}
.onb-guardado button:hover{color:var(--ink)}

/* ── el cuerpo ── */
.onb-cuerpo{flex:1 0 auto;display:flex;justify-content:center;padding:34px var(--gut) 60px}
.onb-hoja{width:100%;max-width:1040px;display:flex;flex-direction:column;gap:22px}
.onb-hoja.angosta{max-width:880px}
.onb-cab{display:flex;flex-direction:column;gap:6px}
.onb-cab h1{font-size:clamp(1.9rem,2.6vw,2.5rem);line-height:1.12}
.onb-cab h1 em{font-style:italic;color:var(--acc)}
.onb-cab p{color:var(--ink2);font-size:1.05rem;max-width:62ch}
.onb-vuelta{font-family:var(--mono);font-size:.667rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}

.onb-grilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.onb-grilla.tres{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.onb-grilla,.onb-grilla.tres{grid-template-columns:1fr}.onb-pasos .nom{display:none}.onb-donde{display:none}}

.onb-caja{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;display:flex;flex-direction:column;gap:10px;
  backdrop-filter:var(--vidrio);-webkit-backdrop-filter:var(--vidrio);box-shadow:var(--sombra)}
.onb-caja > .lab{color:var(--acc)}
.onb-caja.ancha{grid-column:1/-1}
.onb-dato{font-size:1.02rem;line-height:1.5}
.onb-origen{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--mute)}
.onb-origen::before{content:'↳';color:var(--ink3)}
.onb-nota{font-size:.84rem;color:var(--mute)}
.onb-nota.ojo{color:var(--ink2)}
.onb-nota.ojo::before{content:'Ojo: ';font-weight:600;color:var(--ocre)}

/* campos */
.onb label.campo{display:flex;flex-direction:column;gap:6px;font-size:.85rem;color:var(--ink2)}
.onb input[type=text],.onb input[type=email],.onb input[type=url],.onb textarea{background:var(--campo);border:1px solid var(--line3);border-radius:var(--r3);
  padding:11px 13px;color:var(--ink);font-size:1rem;width:100%}
.onb input:focus,.onb textarea:focus{background:var(--campo-foco);border-color:var(--acc-borde);outline:none}
.onb textarea{min-height:84px;resize:vertical;line-height:1.5}
.onb-cuenta{font-size:.75rem;color:var(--mute);align-self:flex-end}

/* opciones: tarjetas y chips. Lo elegido: borde doble + ✓ + aria-pressed. */
.onb-opciones{display:flex;flex-wrap:wrap;gap:8px}
.onb-op{border:1px solid var(--line3);border-radius:999px;padding:.5rem .95rem;font-size:.9rem;color:var(--ink2);background:transparent;min-height:40px;
  display:inline-flex;align-items:center;gap:6px}
.onb-op:hover{border-color:var(--ink3);color:var(--ink)}
.onb-op[aria-pressed="true"]{border:2px solid var(--acc);color:var(--ink);background:var(--acc-soft);padding:calc(.5rem - 1px) calc(.95rem - 1px)}
.onb-op[aria-pressed="true"]::before{content:'✓';color:var(--acc);font-weight:700}
.onb-op.sug:not([aria-pressed="true"])::after{content:'sugerida';font-size:.7rem;color:var(--mute);border-left:1px solid var(--line3);padding-left:6px}
.onb-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.onb-tarjeta{text-align:left;border:1px solid var(--line3);border-radius:var(--r2);padding:14px 16px;display:flex;flex-direction:column;gap:5px;background:var(--campo);min-height:96px}
.onb-tarjeta b{font-weight:600;font-size:1rem}
.onb-tarjeta span{font-size:.84rem;color:var(--mute)}
.onb-tarjeta .hoy{font-family:var(--mono);font-size:.72rem;color:var(--ink2);margin-top:auto}
.onb-tarjeta:hover{border-color:var(--ink3)}
.onb-tarjeta[aria-pressed="true"]{border:2px solid var(--acc);background:var(--acc-soft);padding:13px 15px}
.onb-tarjeta[aria-pressed="true"] b::before{content:'✓ ';color:var(--acc)}
.onb-tarjeta:disabled{opacity:.45;cursor:not-allowed}

/* los pares A/B */
.onb-par{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:900px){.onb-par{grid-template-columns:1fr}}
.onb-ab{text-align:left;border:1px solid var(--line3);border-radius:var(--r2);padding:16px;background:var(--campo);font-family:var(--serif);font-size:1.02rem;line-height:1.5;
  display:flex;flex-direction:column;gap:10px;color:var(--ink)}
.onb-ab .quien{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.onb-ab[aria-pressed="true"]{border:2px solid var(--acc);background:var(--acc-soft);padding:15px}
.onb-ab[aria-pressed="true"] .quien::after{content:' · ✓ la elegiste';color:var(--acc)}

/* los controles de tono: 5 posiciones, lo detectado con marca y texto */
.onb-tono{display:grid;grid-template-columns:110px 1fr 110px;align-items:center;gap:12px}
.onb-tono .polo{font-size:.88rem;color:var(--ink2)}
.onb-tono .polo.der{text-align:right}
.onb-seg5{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.onb-seg5 button{position:relative;height:34px;border-radius:8px;border:1px solid var(--line3);background:var(--campo);font-size:.8rem;color:var(--mute)}
.onb-seg5 button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:var(--tinta);font-weight:700}
.onb-seg5 button[aria-pressed="true"]::after{content:'elegido';position:absolute;left:50%;top:38px;transform:translateX(-50%);font-size:.66rem;color:var(--ink);font-weight:500;white-space:nowrap}
.onb-seg5 button[data-detectado="si"]{box-shadow:inset 0 -3px 0 var(--ink3)}
.onb-seg5 button[data-detectado="si"]::before{content:'▲ detectado';position:absolute;left:50%;top:-18px;transform:translateX(-50%);font-size:.64rem;color:var(--mute);white-space:nowrap}
.onb-tonos{display:flex;flex-direction:column;gap:46px;padding:20px 0 16px}

/* el carrusel de muestra */
.onb-aha{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:1000px){.onb-aha{grid-template-columns:1fr}}
.onb-carrusel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.onb-lamina{aspect-ratio:4/5;border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden;
  background:var(--l-fondo,#1b2a20);color:var(--l-tinta,#F3F4EE);box-shadow:var(--sombra)}
.onb-lamina .rot{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;opacity:.8;color:var(--l-acento,currentColor)}
.onb-lamina h3{font-family:var(--l-titulo,var(--serif));font-size:clamp(1rem,1.5vw,1.35rem);line-height:1.15}
.onb-lamina p{font-family:var(--l-texto,var(--sans));font-size:.8rem;line-height:1.45;opacity:.92;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical}
.onb-lamina .pie{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.62rem;opacity:.85}
.onb-lamina .pie span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.onb-lamina .pie img{height:20px;max-width:64px;object-fit:contain;border-radius:4px;flex:none}
.onb-lamina h3{overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical}
.onb-lamina .n{position:absolute;right:12px;top:10px;font-family:var(--mono);font-size:.6rem;opacity:.6}
.onb-caption{white-space:pre-wrap;font-size:.92rem;line-height:1.55;color:var(--ink2);max-height:320px;overflow:auto}
.onb-regla{font-size:.84rem;color:var(--ink2)}
.onb-regla::before{content:'✓ ';color:var(--acc);font-weight:700}

/* la lectura del paso 0 */
.onb-lectura{display:flex;flex-direction:column;gap:10px;font-size:.98rem}
.onb-linea{display:grid;grid-template-columns:118px 1fr;gap:10px;align-items:baseline}
.onb-linea .est{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.onb-linea[data-e="listo"] .est{color:var(--acc)}
.onb-linea[data-e="listo"] .est::before{content:'✓ '}
.onb-linea[data-e="leyendo"] .est{color:var(--ink)}
.onb-linea[data-e="leyendo"] .est::before{content:'… '}
.onb-linea[data-e="mal"] .est{color:var(--ocre)}
.onb-linea[data-e="mal"] .est::before{content:'! '}
.onb-linea[data-e="pendiente"] .est::before{content:'○ '}
.onb-linea[data-e="pendiente"] span:last-child{color:var(--mute)}
.onb-progreso{height:6px;border-radius:3px;background:var(--line3);overflow:hidden}
.onb-progreso i{display:block;height:100%;background:var(--acc);transition:width .4s var(--curva)}

/* la paleta y los logos */
.onb-paleta{display:flex;gap:8px;flex-wrap:wrap}
.onb-color{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--mono);font-size:.64rem;color:var(--mute)}
.onb-color button,.onb-color span.m{width:54px;height:54px;border-radius:10px;border:1px solid var(--line3);display:block}
.onb-color button[aria-pressed="true"]{outline:3px solid var(--ink);outline-offset:2px}
.onb-color button[aria-pressed="true"] + i::before{content:'✓ '}
.onb-color i{font-style:normal}
.onb-logos{display:flex;gap:12px;flex-wrap:wrap}
.onb-logo{border:1px solid var(--line3);border-radius:var(--r2);padding:10px;display:flex;flex-direction:column;align-items:center;gap:6px;width:150px;background:var(--campo)}
.onb-logo img{width:90px;height:90px;object-fit:contain;border-radius:8px;background:#fff1}
.onb-logo span{font-size:.72rem;color:var(--mute);text-align:center}
.onb-logo[aria-pressed="true"]{border:2px solid var(--acc);background:var(--acc-soft);padding:9px}
.onb-logo[aria-pressed="true"] span::before{content:'✓ ';color:var(--acc)}
.onb-tipo{font-size:1.4rem}

/* recursos */
.onb-recurso{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;border:1px dashed var(--line3);border-radius:var(--r2);padding:14px 16px}
.onb-recurso.arrastre{border-color:var(--acc);background:var(--acc-soft)}
.onb-recurso b{font-weight:600}
.onb-recurso .est{font-size:.8rem;color:var(--mute)}
.onb-recurso .est.ok{color:var(--ink)}
.onb-recurso .est.ok::before{content:'✓ ';color:var(--acc);font-weight:700;font-size:1.05em}
.onb-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:6px}
.onb-fotos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px}

/* legal */
.onb-reglas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.onb-reglas li{display:grid;grid-template-columns:26px 1fr auto;gap:10px;align-items:start}
.onb-check{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--ink3);display:grid;place-items:center;font-size:.85rem;line-height:1}
.onb-check[aria-checked="true"]{background:var(--acc);border-color:var(--acc);color:var(--tinta)}
.onb-check[aria-checked="true"]::before{content:'✓';font-weight:700}
.onb-check[aria-disabled="true"]{cursor:not-allowed}
.onb-candado{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.onb-candado::before{content:'🔒 '}

/* cuentas */
.onb-pasos-meta{margin:0;padding-left:1.3rem;display:flex;flex-direction:column;gap:10px;font-size:.98rem}
.onb-id{font-family:var(--mono);background:var(--campo);border:1px solid var(--line3);border-radius:6px;padding:2px 8px}
.onb-puede{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:.92rem}
.onb-puede li.si::before{content:'✓ Sí · ';color:var(--acc);font-weight:600}
.onb-puede li.no::before{content:'✕ No · ';color:var(--error);font-weight:600}
.onb-estado{display:flex;align-items:center;gap:10px;font-size:1rem}
.onb-estado[data-e="compartida"] b::before{content:'✓ ';color:var(--acc)}
.onb-estado[data-e="esperando"] b::before{content:'… '}
.onb-capturas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.onb-capturas figure{margin:0;display:flex;flex-direction:column;gap:6px}
.onb-capturas svg{width:100%;height:auto;border-radius:10px;border:1px solid var(--line3);background:#fff}
.onb-capturas figcaption{font-size:.8rem;color:var(--ink2)}
@media (max-width:900px){.onb-capturas{grid-template-columns:1fr}}

/* cierre */
.onb-piezas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.onb-piezas{grid-template-columns:1fr}}
.onb-pieza{display:flex;flex-direction:column;gap:10px}
.onb-pieza .onb-lamina{aspect-ratio:4/5}
.onb-resto{margin:0;padding-left:1.4rem;display:flex;flex-direction:column;gap:4px;font-size:.84rem;color:var(--ink2)}
.onb-resto li::marker{font-family:var(--mono);color:var(--mute)}
.onb-pieza .est{font-size:.8rem;color:var(--mute)}
.onb-pieza .est[data-e="revision"]{color:var(--ink)}
.onb-pieza .est[data-e="revision"]::before{content:'✓ ';color:var(--acc);font-weight:700;font-size:1.05em}
.onb-pilares{display:flex;flex-wrap:wrap;gap:8px}
.onb-pilar{border:1px solid var(--line3);border-radius:999px;padding:.35rem .8rem;font-size:.84rem}
.onb-pilar b{font-family:var(--mono);font-size:.74rem;margin-left:6px;color:var(--ink2)}
.onb-meta{font-family:var(--serif);font-size:1.25rem;line-height:1.4}

/* acciones de abajo */
.onb-acciones{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding-top:4px}
.onb-acciones .enter{margin-left:auto;font-size:.8rem;color:var(--mute)}
.onb-saltear{color:var(--ink2);padding:.6rem .5rem;text-decoration:underline;text-underline-offset:3px}
.onb-saltear:hover{color:var(--ink)}
.onb .btn.si{min-height:44px;padding:.6rem 1.4rem}

/* el panel de invitaciones (dueño) y el aviso del lobby */
.onb-inv{display:grid;grid-template-columns:1fr 1.3fr auto auto;gap:10px 16px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line2)}
.onb-inv:last-child{border-bottom:0}
.onb-inv .quien{font-size:.84rem;color:var(--mute)}
.onb-inv .estado{display:flex;align-items:center;gap:6px;font-size:.88rem}
.onb-inv .acc{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
@media (max-width:900px){.onb-inv{grid-template-columns:1fr}.onb-inv .acc{justify-content:flex-start}}
.onb-aviso-lobby{display:flex;flex-direction:column;gap:10px;margin:0 0 18px}
.onb-aviso-lobby .onb-caja{flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap}
.onb-aviso-lobby p{flex:1 1 320px}
.onb-cerrar{position:absolute;right:var(--gut);top:14px}

/* teléfono: la barra de pasos se pliega en "Paso X de 8" */
@media (max-width:600px){
  .onb-barra{gap:10px;flex-wrap:wrap;padding:10px 16px}
  .onb-pasos{display:none}
  .onb-donde{display:inline;order:3;width:100%}
  .onb-guardado{font-size:.78rem}
  .onb-cuerpo{padding:22px 16px 48px}
  .onb-tono{grid-template-columns:1fr;gap:6px}
  .onb-tono .polo.der{text-align:left}
  .onb-carrusel{grid-template-columns:1fr}
}