/* 0148 · La pantalla del PIN, «como Trade Republic»: oscura, el PIN en puntos y un teclado grande.
   No depende del estilo elegido (Color, Claro, Cuaderno…): siempre la misma, con el color de la consulta. */
.bloqueo {
  --bq-fondo: color-mix(in oklab, var(--marca, #1B8F8B) 16%, #050b0c);
  --bq-texto: #f3f7f7;
  --bq-suave: rgba(243, 247, 247, .62);
  --bq-tecla: rgba(255, 255, 255, .07);
  --bq-tecla-pulsada: rgba(255, 255, 255, .18);
  --bq-acento: color-mix(in oklab, var(--marca, #1B8F8B) 70%, #fff);
  --bq-error: #ff8a7a;
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in oklab, var(--marca, #1B8F8B) 34%, transparent), transparent 62%),
    var(--bq-fondo);
  color: var(--bq-texto);
  font-family: var(--font-ui, system-ui, sans-serif);
  opacity: 0; transition: opacity .22s ease;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.bloqueo.visible { opacity: 1; }
.bloqueo.saliendo { opacity: 0; pointer-events: none; }
html.con-bloqueo, html.con-bloqueo body { overflow: hidden; }

.bloqueo-caja {
  position: relative; width: min(340px, 100%);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.bloqueo-cerrar {
  position: absolute; top: -6px; right: -4px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: transparent; color: var(--bq-suave); font-size: 30px; line-height: 1; cursor: pointer;
}
.bloqueo-cerrar:hover { color: var(--bq-texto); background: var(--bq-tecla); }

.bloqueo-quien { margin-bottom: 18px; }
.bloqueo-avatar {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: color-mix(in oklab, var(--marca, #1B8F8B) 55%, #0b1617); color: #fff;
  font-weight: 600; font-size: 19px; letter-spacing: .02em;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 30px -10px rgba(0, 0, 0, .6);
}
.bloqueo-titulo { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: var(--bq-texto); }
.bloqueo-sub { margin: 6px 0 0; min-height: 1.3em; font-size: 14.5px; color: var(--bq-suave); max-width: 30ch; }

.bloqueo-puntos { display: flex; gap: 18px; justify-content: center; margin: 30px 0 6px; height: 16px; }
.bloqueo-puntos i {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.6px solid rgba(243, 247, 247, .55); transition: background .12s, border-color .12s, transform .12s;
}
.bloqueo-puntos i.lleno { background: var(--bq-texto); border-color: var(--bq-texto); transform: scale(1.06); }
.bloqueo-puntos.sacude { animation: bloqueo-sacude .42s cubic-bezier(.36, .07, .19, .97); }
.bloqueo-puntos.sacude i { border-color: var(--bq-error); }
@keyframes bloqueo-sacude {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); }
}
.bloqueo-error { min-height: 2.6em; margin: 10px 0 0; font-size: 13.5px; line-height: 1.35; color: var(--bq-error); max-width: 32ch; }

.bloqueo-entrar {
  margin: 0 0 8px; padding: 11px 30px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--bq-texto); color: #0a1415; font: inherit; font-weight: 600; font-size: 15px;
}
.bloqueo-entrar:disabled { opacity: .5; cursor: default; }

.bloqueo-teclado {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 26px;
  width: min(300px, 100%); margin-top: 6px;
}
.bloqueo-tecla {
  justify-self: center; display: grid; place-items: center;
  width: 74px; height: 74px; border-radius: 50%; border: 0; cursor: pointer;
  background: transparent; color: var(--bq-texto);
  font: inherit; font-size: 30px; font-weight: 400; font-variant-numeric: tabular-nums;
  transition: background .18s ease, transform .1s ease;
}
.bloqueo-tecla[data-n] { background: var(--bq-tecla); }
.bloqueo-tecla:hover:not(:disabled) { background: rgba(255, 255, 255, .11); }
.bloqueo-tecla:active:not(:disabled) { background: var(--bq-tecla-pulsada); transform: scale(.95); transition-duration: 0s; }
.bloqueo-tecla:disabled { opacity: .3; cursor: default; }
.bloqueo-tecla[data-huella]:not(.lista) { visibility: hidden; pointer-events: none; }
.bloqueo:focus { outline: none; }
.bloqueo-tecla-icono { color: var(--bq-suave); }
.bloqueo-tecla-icono[data-huella] { color: var(--bq-acento); }
.bloqueo-tecla:focus-visible, .bloqueo-enlace:focus-visible, .bloqueo-entrar:focus-visible, .bloqueo-cerrar:focus-visible {
  outline: 2px solid var(--bq-acento); outline-offset: 3px;
}

.bloqueo-enlace {
  margin-top: 26px; padding: 8px 10px; border: 0; background: none; cursor: pointer;
  color: var(--bq-suave); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px;
}
.bloqueo-enlace:hover { color: var(--bq-texto); }
.bloqueo-enlace:disabled { opacity: .5; cursor: default; }
.bloqueo-enlace-mini { margin-top: 2px; font-size: 13px; text-decoration: none; opacity: .75; }
.bloqueo-aviso { margin: 18px 0 0; max-width: 32ch; font-size: 13.5px; line-height: 1.45; color: var(--bq-texto);
  background: var(--bq-tecla); border-radius: 12px; padding: 10px 14px; }

/* La oferta de la huella, después de crear el PIN */
.bloqueo-oferta .bloqueo-caja { gap: 2px; }
.bloqueo-oferta-icono {
  display: grid; place-items: center; width: 76px; height: 76px; margin-bottom: 20px; border-radius: 50%;
  background: var(--bq-tecla); color: var(--bq-acento);
}
.bloqueo-oferta-icono svg { width: 40px; height: 40px; }
.bloqueo-oferta .bloqueo-entrar { margin-top: 8px; min-width: 200px; }
.bloqueo-oferta .bloqueo-enlace { margin-top: 8px; text-decoration: none; }

@media (max-height: 640px) {
  .bloqueo-quien { margin-bottom: 10px; }
  .bloqueo-avatar { width: 46px; height: 46px; font-size: 16px; }
  .bloqueo-puntos { margin-top: 18px; }
  .bloqueo-tecla { width: 64px; height: 64px; font-size: 26px; }
  .bloqueo-teclado { gap: 10px 24px; }
  .bloqueo-enlace { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .bloqueo, .bloqueo-puntos i, .bloqueo-tecla { transition: none; }
  .bloqueo-puntos.sacude { animation: none; }
}

/* «Mi cuenta» · PIN y huella */
.ap-huella { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 14px; }
.ap-huella svg { width: 22px; height: 22px; color: var(--marca); flex: none; }
.ap-huella span { flex: 1; }
[data-activar-huella] { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; }
[data-activar-huella] svg { width: 20px; height: 20px; }
.msg-candado-huella { margin-top: 10px; }
.msg-candado-caja .error-form.msg-candado-ok { color: var(--text-dark); background: var(--dash-bg); border-color: transparent; }