/* ============================================================
   portal.css — lo propio del portal de clientes (onboarding)
   ------------------------------------------------------------
   El resto sale de tokens.css y ui.css: la tarjeta del login
   (.login-wrap, .login-card), los campos, los botones y los
   avisos. Solo tokens --at-*: anda igual en los dos temas.
   ============================================================ */

.portal-card .portal-titulo{margin:0 0 12px;font-size:22px;font-weight:700;letter-spacing:-.01em}
.portal-card h2{margin:0 0 8px;font-size:18px;font-weight:700}
.portal-card p{margin:0 0 14px;font-size:15px;line-height:1.55;color:var(--at-text-2)}
.portal-card .alert{margin-bottom:16px}

/* Los links de ayuda debajo de un formulario */
.portal-card .portal-ayuda{margin:16px 0 0;text-align:center;font-size:14px}
.portal-ayuda a{color:var(--at-zona-300);font-weight:600}
.portal-card .portal-ayuda.muted{margin-top:8px;font-size:13px;color:var(--at-muted)}

/* La ayuda y el error de un campo: el error, al lado del campo y en castellano simple (plan §10) */
.portal-ayuda-campo{display:block;margin-top:6px;font-size:13px;color:var(--at-muted)}
.portal-error-campo{margin-top:6px;font-size:13px;font-weight:600;color:var(--at-bad-text)}

/* Las marcas de la cuenta */
.portal-lista{display:grid;gap:10px;margin:0 0 8px}
.portal-marca{padding:18px;border-radius:var(--at-r-md);background:var(--at-surface-2);border:1px solid var(--at-line)}
.portal-marca p{margin:0}

/* El pie: la cuenta y "Salir" */
.portal-pie{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding-top:16px;
  border-top:1px solid var(--at-line);font-size:13px;color:var(--at-muted)}
.portal-pie span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.portal-pie form{flex:none}
.portal-pie .btn-link{font-size:14px}

/* ── El asistente del onboarding (F2): una columna, primero el celular ───────────────────────── */
.portal-card.is-wide{max-width:640px}
.onb-marca{margin:0 0 6px;font-size:13px;color:var(--at-muted)}
.onb-paso-num{margin:0;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--at-zona-300)}
.onb-barra{display:block;width:100%;height:8px;border:0;border-radius:99px;background:var(--at-surface-2);overflow:hidden;margin:4px 0 6px;appearance:none;-webkit-appearance:none}
.onb-barra::-webkit-progress-bar{background:var(--at-surface-2);border-radius:99px}
.onb-barra::-webkit-progress-value{background:var(--at-zona-300);border-radius:99px}
.onb-barra::-moz-progress-bar{background:var(--at-zona-300);border-radius:99px}
.portal-card .onb-progreso{margin:0 0 10px;font-size:13px;color:var(--at-muted)}
.onb-pasos{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 16px}
.onb-paso{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;font-size:13px;font-weight:700;
  border:1px solid var(--at-line);color:var(--at-text-2);text-decoration:none;background:var(--at-surface-2)}
.onb-paso.is-listo{color:var(--at-ok-text,var(--at-text));border-color:var(--at-ok-text,var(--at-line))}
.onb-paso.is-actual{background:var(--at-zona-300);color:var(--at-bg,#0c0c11);border-color:var(--at-zona-300)}
.onb-lista-simple{margin:0;padding-left:18px}
.onb-lista-simple li{margin:3px 0}
.onb-grupo{border:0;padding:0;margin:0 0 22px}
.onb-grupo legend,.onb-grupo h2{font-size:16px;font-weight:700;margin:0 0 10px;padding:0}
.onb-campo{margin-bottom:16px}
.onb-campo.is-revisar,.onb-tarjeta.is-revisar{border-left:3px solid var(--at-warn-text,#e0a100);padding-left:10px}
.onb-reunion{font-size:13px;margin:0 0 6px;color:var(--at-text-2)}
.onb-oblig{color:var(--at-bad-text)}
.onb-opciones{display:grid;gap:6px}
.onb-op{display:flex;gap:8px;align-items:center;font-size:15px;font-weight:500}
.onb-op input{width:auto;margin:0}
.onb-lista{display:grid;gap:6px}
.onb-lista-fila{display:grid;grid-template-columns:1fr;gap:6px}
.onb-lista-fila input+input{font-size:13px}
@media (min-width:540px){.onb-lista-fila:has(input+input){grid-template-columns:1fr 1fr}}
.onb-valor{margin:0;font-size:15px}
.onb-acciones{display:flex;justify-content:space-between;gap:10px;margin-top:20px}
.onb-acciones-chicas{display:flex;gap:12px;align-items:center;margin-top:6px}
.portal-card .onb-guardado{min-height:1.4em;margin:0;font-size:13px;color:var(--at-muted)}
.onb-guardado.is-mal{color:var(--at-bad-text)}
.onb-tarjeta{padding:14px;border-radius:var(--at-r-md);background:var(--at-surface-2);border:1px solid var(--at-line);margin:0 0 12px}
.onb-tarjeta h2{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;font-size:16px;margin:0 0 8px}
.onb-tarjeta summary{cursor:pointer;font-weight:600}
.onb-chip{font-size:12px;font-weight:700;padding:2px 8px;border-radius:99px;border:1px solid var(--at-line)}
.onb-chip.is-ok{color:var(--at-ok-text,var(--at-text))}
.onb-chip.is-falta{color:var(--at-bad-text)}
.onb-chip.is-excepcion{color:var(--at-warn-text,var(--at-text-2))}
.onb-nota{font-size:13px;color:var(--at-text-2)}
.onb-excepcion{margin-top:10px;font-size:14px}
.onb-archivo{display:flex;gap:10px;align-items:center;margin:0 0 8px}
.onb-archivo img{width:56px;height:56px;object-fit:contain;border-radius:8px;background:#fff}
.onb-archivo>div{flex:1;min-width:0;overflow-wrap:anywhere}
.onb-archivo-icono{font-size:28px;width:56px;text-align:center}
.onb-subir{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.onb-resumen{display:grid;grid-template-columns:1fr;gap:2px 12px;margin:0;font-size:14px}
.onb-resumen dt{color:var(--at-muted);margin-top:6px}
.onb-resumen dd{margin:0}
.onb-editar{font-size:13px;font-weight:600;color:var(--at-zona-300)}
.onb-enviar p{font-size:14px}

/* ── 15/10: más sensación de progreso (pedido de Manu) ───────────────────────── */
/* La barra de pasos: verde lo hecho, resaltado dónde estás, apagado lo que todavía no se abre */
.onb-stepper{margin:0 0 12px}
.onb-stepper ol{list-style:none;margin:0;padding:0;display:flex;gap:4px}
.onb-stepper li{flex:1;min-width:0;position:relative}
.onb-stepper li a,.onb-stepper li>span{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--at-muted);
  padding:6px 2px;border-radius:10px}
.onb-stepper li a:hover{background:var(--at-surface-2)}
.onb-stepper-num{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-size:13px;font-weight:800;
  border:2px solid var(--at-line);background:var(--at-surface-2);color:var(--at-text-2)}
.onb-stepper-txt{font-size:11px;font-weight:600;line-height:1.2;text-align:center;overflow:hidden;text-overflow:ellipsis;max-width:100%;white-space:nowrap}
.onb-stepper li.is-listo .onb-stepper-num{background:var(--at-ok-tint,rgba(46,204,113,.15));border-color:var(--at-ok,#2ecc71);color:var(--at-ok,#2ecc71)}
.onb-stepper li.is-listo .onb-stepper-txt{color:var(--at-ok,#2ecc71)}
.onb-stepper li.is-actual .onb-stepper-num{background:var(--at-zona-300);border-color:var(--at-zona-300);color:var(--at-bg,#0c0c11);
  box-shadow:0 0 0 4px var(--at-info-tint-soft,rgba(80,200,200,.18))}
.onb-stepper li.is-actual .onb-stepper-txt{color:var(--at-text);font-weight:800}
.onb-stepper li.is-bloqueado{opacity:.45}
@media (max-width:420px){.onb-stepper-txt{font-size:10px}.onb-stepper-num{width:26px;height:26px;font-size:12px}}

/* "Para seguir, completá" del paso, y el aviso verde cuando el paso está completo */

/* Cada dato: verde cuando está completo; la marca de la reunión, ámbar */
.onb-campo{border-left:3px solid transparent;padding-left:10px;transition:border-color .2s}
.onb-campo.is-completo{border-left-color:var(--at-ok,#2ecc71)}
.onb-campo.is-completo>label::after{content:" ✓";color:var(--at-ok,#2ecc71);font-weight:800}
/* Lo que faltó o está mal, en rojo y sin lugar a dudas (15/10): el bloque entero, su nombre y su caja */
.onb-campo.is-error{border-left:4px solid var(--at-bad-text);background:var(--at-bad-tint);border-radius:0 10px 10px 0;padding:10px 12px}
.onb-campo.is-error>label{color:var(--at-bad-text)}
.onb-campo.is-error input:not([type=radio]):not([type=checkbox]),.onb-campo.is-error select,.onb-campo.is-error textarea{border-color:var(--at-bad-text);box-shadow:0 0 0 1px var(--at-bad-text)}
.onb-objetivo:has(.portal-error-campo){border-color:var(--at-bad-text);background:var(--at-bad-tint)}
.onb-errores p{margin:0 0 6px;color:inherit}
.onb-errores ul{margin:0;padding-left:18px}
.onb-errores li{margin:3px 0}
.onb-errores a{color:inherit;font-weight:700;text-decoration:underline}
.onb-tarjeta.is-completo{border-color:var(--at-ok,#2ecc71)}
.onb-objetivo-num{font-weight:700;margin:0 0 6px}
.onb-ok{color:var(--at-ok,#2ecc71);font-weight:700}

/* Los accesos, de a uno: arriba una fila de círculos (✓ los listos) y "Acceso N de M", en una sola línea (15/10: la lista
   vertical obligaba a bajar mucho para llegar al acceso) */
.onb-accesos-barra{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.onb-accesos-cuenta{margin:0;font-size:13px;color:var(--at-muted);white-space:nowrap}
.onb-accesos-lista{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.onb-accesos-lista a{display:block;text-decoration:none;border-radius:50%}
.onb-acceso-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:12px;font-weight:800;
  border:2px solid var(--at-line);color:var(--at-text-2);flex:none}
.onb-accesos-lista li.is-actual .onb-acceso-num{border-color:var(--at-zona-300);background:var(--at-zona-300);color:var(--at-bg,#0c0c11)}
.onb-accesos-lista li.is-listo .onb-acceso-num{border-color:var(--at-ok,#2ecc71);background:var(--at-ok-tint,rgba(46,204,113,.15));color:var(--at-ok,#2ecc71)}
.onb-accesos-lista li.is-listo.is-actual .onb-acceso-num{box-shadow:0 0 0 2px var(--at-zona-300)}
.onb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* El cartelito de 2 s (assets/envio_suave.js) */
.envio-suave-cartel{position:fixed;right:18px;bottom:18px;z-index:1000;max-width:min(360px,calc(100vw - 36px));padding:12px 16px;border-radius:12px;
  background:var(--at-surface,#1b1d24);color:var(--at-text,#fff);border:1px solid var(--at-ok,#2ecc71);box-shadow:0 10px 30px rgba(0,0,0,.35);
  font-size:14px;font-weight:600;animation:envioSuaveEntra .2s ease-out}
.envio-suave-cartel::before{content:"✓ ";color:var(--at-ok,#2ecc71)}
.envio-suave-cartel.is-mal{border-color:var(--at-bad-text)}
.envio-suave-cartel.is-mal::before{content:"! ";color:var(--at-bad-text)}
.envio-suave-cartel.is-sale{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
@keyframes envioSuaveEntra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* La cabecera de las páginas anchas (el onboarding): el logo y el subtítulo en una fila, la tarjeta arriba (15/10) */
.login-wrap.portal-wrap-arriba{align-items:flex-start;padding-top:16px}
.portal-card.is-wide{padding:20px 28px 24px}
.portal-cabeza{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--at-line)}
.portal-cabeza .brand-logo{font-size:20px}
.portal-logo img{display:block;height:24px;width:auto}
.portal-cabeza-txt{font-size:14px;font-weight:600;color:var(--at-text-2)}
.portal-cabeza a{margin-left:auto;font-size:13px}
.onb-titulo-fila{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.onb-titulo-fila .portal-titulo{margin:0}
.portal-card .onb-titulo-fila .onb-progreso{margin:0;white-space:nowrap}
.onb-cabecera{margin:0 0 14px}
.onb-cabecera .onb-barra{margin:8px 0 0}
@media (max-width:520px){.portal-card.is-wide{padding:16px 16px 20px}.login-wrap.portal-wrap-arriba{padding:8px 8px 16px}}