/* ---------- Borrar Cuenta ----------
   La ventana que cuenta las consecuencias y la pantalla del borrado, con el
   cielo de estrellas detrás. Sólo tokens de la casa: sirve igual en las dos
   marcas, en claro y en oscuro. Lo que se anima va por `transform` y `opacity`,
   que es lo único que la tarjeta gráfica mueve sola (ver
   scripts/pruebas/animaciones-componibles.mjs). Con «menos movimiento» no hay
   lienzo ni giros: queda la lista de etapas. */

/* ---------- La opción del menú del perfil ---------- */
.perfil-opcion.bc-opcion:hover{
  color:var(--danger-500);
  background:color-mix(in srgb,var(--danger-500) 10%,var(--surface-tint));
  border-color:color-mix(in srgb,var(--danger-500) 40%,transparent)}
.perfil-opcion.bc-opcion[hidden]{display:none}

/* ---------- La ventana de consecuencias ---------- */
.bc-tarjeta{max-width:520px;max-height:calc(100vh - var(--sp-4) * 2);max-height:calc(100svh - var(--sp-4) * 2);
  overflow-y:auto;overscroll-behavior:contain}
.bc-subtitulo{color:var(--danger-500)}
.bc-intro{margin:0 0 var(--sp-3);font-size:var(--fs-sm);color:var(--text-body);line-height:var(--lh-base)}
.bc-rotulo{margin:var(--sp-3) 0 var(--sp-2);font-family:var(--font-display);font-size:var(--fs-sm);
  font-weight:var(--fw-semibold);color:var(--text-title)}
.bc-lista{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--sp-2)}
.bc-lista li{position:relative;padding:var(--sp-2) var(--sp-3) var(--sp-2) calc(var(--sp-3) + 18px);
  border-radius:var(--radius-md);font-size:var(--fs-sm);line-height:var(--lh-base);color:var(--text-body);
  background:var(--surface-tint);border:1px solid var(--border-subtle)}
.bc-lista li::before{content:"";position:absolute;left:var(--sp-3);top:calc(var(--sp-2) + .45em);
  width:8px;height:8px;border-radius:50%}
.bc-lista-sale li::before{background:var(--danger-500)}
.bc-lista-queda li::before{background:var(--success-500)}
.bc-lista strong{color:var(--text-title)}
.bc-acepto{display:flex;align-items:flex-start;gap:var(--sp-2);margin:var(--sp-4) 0 0;cursor:pointer;
  font-size:var(--fs-sm);font-weight:var(--fw-semibold);color:var(--text-title);line-height:var(--lh-base)}
.bc-acepto input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--danger-500)}
.bc-botones{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--sp-2);margin-top:var(--sp-4)}
.bc-confirmar{background:var(--danger-500);border-color:var(--danger-500);color:#fff}
.bc-confirmar:hover:not(:disabled){filter:brightness(.92)}
.bc-confirmar:disabled{opacity:.45;cursor:not-allowed}
@media (max-width:480px){
  .bc-tarjeta{padding:var(--sp-4)}
  .bc-botones{flex-direction:column-reverse}
  .bc-botones .boton{width:100%;justify-content:center}
}

/* ---------- El telón del borrado ---------- */
body.bc-borrando{overflow:hidden}
.bc-telon{position:fixed;inset:0;z-index:1100;background:var(--surface-page);
  display:flex;align-items:center;justify-content:center;overflow-y:auto;
  opacity:0;transition:opacity .45s var(--ease-standard)}
.bc-telon.puesto{opacity:1}
.bc-cielo{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.bc-centro{position:relative;z-index:1;width:min(460px,100%);margin:auto;
  padding:var(--sp-6) var(--sp-4);display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--sp-2)}
.bc-marca{position:relative;width:96px;height:96px;display:flex;align-items:center;justify-content:center}
.bc-marca[hidden],.bc-icono-final[hidden]{display:none}
.bc-halo{position:absolute;inset:-34px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--brand-accent) 38%,transparent) 0%,
    color-mix(in srgb,var(--brand-soft) 16%,transparent) 45%,transparent 70%);
  animation:bc-late 3.6s ease-in-out infinite}
.bc-isotipo{position:relative;width:72px;height:72px;object-fit:contain}
.bc-icono-final{animation:bc-llega .7s cubic-bezier(.2,.9,.25,1.2) backwards}
.bc-svg-caja{fill:var(--surface-card);stroke:var(--brand-primary);stroke-width:3}
.bc-svg-led{fill:var(--brand-accent)}
.bc-svg-raya{fill:none;stroke:var(--text-muted);stroke-width:3;stroke-linecap:round;opacity:.6}
.bc-svg-sello{fill:var(--success-500);stroke:var(--surface-page);stroke-width:4}
.bc-svg-visto{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.bc-titulo{margin:var(--sp-3) 0 0;font-family:var(--font-display);font-size:var(--fs-h4);
  font-weight:var(--fw-semibold);color:var(--text-title)}
.bc-frase{margin:0;font-size:var(--fs-sm);color:var(--text-muted);line-height:var(--lh-base)}
.bc-frase.bc-mal{color:var(--danger-500);font-weight:var(--fw-semibold)}

.bc-etapas{margin:var(--sp-3) 0 0;padding:0;list-style:none;width:100%;display:flex;flex-direction:column;gap:var(--sp-2);
  text-align:left}
.bc-telon.terminado .bc-etapas{opacity:.85}
.bc-etapa{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);
  border-radius:var(--radius-md);font-size:var(--fs-sm);line-height:1.35;color:var(--text-muted);
  background:color-mix(in srgb,var(--surface-card) 82%,transparent);border:1px solid var(--border-subtle);
  transition:color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.bc-etapa[data-estado="activa"]{color:var(--text-title);border-color:var(--brand-accent)}
.bc-etapa[data-estado="hecha"]{color:var(--text-title)}
.bc-etapa[data-estado="fallida"]{color:var(--danger-500);border-color:var(--danger-500)}
.bc-marcador{position:relative;flex:none;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--border-strong)}
.bc-etapa[data-estado="activa"] .bc-marcador{border-color:color-mix(in srgb,var(--brand-accent) 28%,transparent);
  border-top-color:var(--brand-accent);animation:bc-gira .9s linear infinite}
.bc-etapa[data-estado="hecha"] .bc-marcador{border-color:var(--success-500);background:var(--success-500);
  animation:bc-pop .38s cubic-bezier(.2,.9,.25,1.3)}
.bc-etapa[data-estado="hecha"] .bc-marcador::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px;
  border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.bc-etapa[data-estado="fallida"] .bc-marcador{border-color:var(--danger-500);background:var(--danger-500)}
.bc-etapa[data-estado="fallida"] .bc-marcador::after{content:"!";position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:var(--fw-bold)}

.bc-pie{width:100%;display:flex;flex-direction:column;align-items:center}
.bc-pie .bc-botones{justify-content:center}
.bc-nota{margin:var(--sp-3) 0 0;font-size:var(--fs-xs);line-height:var(--lh-base);color:var(--text-muted)}
@media (max-width:480px){
  .bc-centro{padding:var(--sp-5) var(--sp-4)}
  .bc-titulo{font-size:var(--fs-md)}
  .bc-pie .bc-botones{width:100%;flex-direction:column-reverse}
  .bc-pie .bc-botones .boton{width:100%;justify-content:center}
}

@keyframes bc-gira{to{transform:rotate(360deg)}}
@keyframes bc-late{0%,100%{transform:scale(.92);opacity:.45}50%{transform:scale(1.08);opacity:.8}}
@keyframes bc-pop{0%{transform:scale(.6)}60%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes bc-llega{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

@media (prefers-reduced-motion:reduce){
  .bc-cielo{display:none}
  .bc-halo,.bc-icono-final,.bc-etapa[data-estado="activa"] .bc-marcador,
  .bc-etapa[data-estado="hecha"] .bc-marcador{animation:none}
  .bc-telon,.bc-fondo{transition:none}
  .bc-etapa{transition:none}
}