/* Módulo de celebración REMAX Welcome — independiente. Usa variables de la app con valores por defecto. */
.celebracion{position:fixed;inset:0;z-index:2147483000;pointer-events:none;display:flex;align-items:center;justify-content:center;padding:16px;box-sizing:border-box;}
.celebracion-canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;display:block;}
.celebracion-card{
  position:relative;pointer-events:auto;box-sizing:border-box;
  width:min(440px,100%);max-height:calc(100vh - 32px);overflow:auto;
  padding:28px 26px 24px;text-align:center;border-radius:20px;
  color:var(--ink,#f7f5ee);
  background:var(--celeb-bg,var(--auth-card-bg,rgba(12,39,73,.86)));
  border:1px solid var(--line-strong,rgba(247,245,238,.30));
  box-shadow:0 0 0 1px rgba(255,18,0,.0),0 30px 70px -22px rgba(0,0,0,.65),0 0 60px -10px rgba(0,67,255,.35);
  opacity:0;transform:translateY(14px) scale(.94);
  animation:celeb-in .55s cubic-bezier(.2,.9,.25,1.15) forwards;
  font-family:inherit;
}
.celebracion-card::before{ /* filete rojo · blanco · azul */
  content:"";position:absolute;left:22px;right:22px;top:0;height:4px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,#ff1200 0 33.3%,#f7f5ee 33.3% 66.6%,#0043ff 66.6% 100%);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .celebracion-card{-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);}
}
.celebracion-titulo{margin:6px 0 0;font-size:clamp(26px,6.4vw,34px);line-height:1.12;font-weight:800;letter-spacing:-.01em;color:var(--ink,#f7f5ee);}
.celebracion-subtitulo{margin:10px 0 0;font-size:15.5px;line-height:1.45;color:var(--ink-soft,rgba(247,245,238,.72));}
.celebracion-resumen{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center;}
.celebracion-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:14px;font-weight:600;
  color:var(--ink,#f7f5ee);background:var(--ok-bg,rgba(247,245,238,.12));border:1px solid var(--line,rgba(247,245,238,.18));}
.celebracion-chip-i{font-size:15px;line-height:1;}
.celebracion-seguir{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:20px auto 0;min-height:44px;padding:0 26px;border:0;border-radius:999px;
  font:inherit;font-size:15.5px;font-weight:700;cursor:pointer;color:#fff;background:var(--accent,#c80e00);box-shadow:0 8px 20px -8px rgba(200,14,0,.65);}
.celebracion-seguir:hover{filter:brightness(1.08);}
.celebracion-seguir:focus-visible{outline:3px solid #0043ff;outline-offset:3px;}
.celebracion-barra{margin:18px 2px 0;height:4px;border-radius:4px;overflow:hidden;background:var(--line,rgba(247,245,238,.18));}
.celebracion-barra-rel{height:100%;width:100%;border-radius:4px;transform-origin:left center;transform:scaleX(1);transition:transform .12s linear;
  background:linear-gradient(90deg,#ff1200,#0043ff);}
.celebracion--pausa .celebracion-barra-rel{opacity:.45;}
.celebracion-out{animation:celeb-out .3s ease forwards;}
.celebracion--simple .celebracion-card{animation:celeb-fade .35s ease forwards;transform:none;}
.celebracion--simple.celebracion-out .celebracion-card{animation:celeb-fadeout .3s ease forwards;}

/* Velo de fondo: oscuro de noche, claro y translúcido de día */
.celebracion-velo{position:absolute;inset:0;pointer-events:none;background:rgba(4,12,30,.42);opacity:0;animation:celeb-fade .5s ease forwards;}
/* Medalla del nivel medio */
.celebracion-medalla{width:78px;height:78px;margin:2px auto 12px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;line-height:1;color:#fff;
  background:radial-gradient(circle at 30% 25%,#ff6a5c,#c80e00 62%,#7a0800);border:3px solid #f7f5ee;
  box-shadow:0 0 0 4px #0043ff,0 14px 28px -10px rgba(0,0,0,.55),inset 0 -6px 12px rgba(0,0,0,.25);
  opacity:0;transform:scale(.2) rotate(-25deg);animation:celeb-medalla .7s cubic-bezier(.2,1.4,.3,1) forwards;}
.celebracion--simple .celebracion-medalla{animation:celeb-fade .3s ease forwards;transform:none;}
/* Nivel pequeño: aviso arriba que no bloquea */
.celebracion-toast{position:fixed;top:max(14px,env(safe-area-inset-top));left:12px;right:12px;margin:0 auto;width:fit-content;z-index:2147483000;box-sizing:border-box;
  display:flex;align-items:center;gap:12px;max-width:min(440px,calc(100vw - 24px));padding:10px 20px 10px 10px;border-radius:999px;cursor:pointer;
  color:var(--ink,#f7f5ee);background:var(--celeb-bg,var(--auth-card-bg,rgba(12,39,73,.94)));border:1px solid var(--line-strong,rgba(247,245,238,.30));
  box-shadow:0 18px 40px -16px rgba(0,0,0,.6);font-family:inherit;opacity:0;transform:translateY(-22px);animation:celeb-toast-in .45s cubic-bezier(.2,.9,.25,1.15) forwards;}
.celebracion-toast--out{animation:celeb-toast-out .3s ease forwards;}
.celebracion-toast-i{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1;color:#fff;background:linear-gradient(135deg,#ff1200,#0043ff);}
.celebracion-toast-t{display:flex;flex-direction:column;gap:2px;min-width:0;text-align:left;}
.celebracion-toast .celebracion-titulo{margin:0;font-size:15px;line-height:1.25;font-weight:700;color:inherit;}
.celebracion-toast .celebracion-subtitulo{margin:0;font-size:13px;line-height:1.35;color:var(--ink-soft,rgba(247,245,238,.78));}
.celebracion-toast-canvas{position:fixed;left:0;top:0;width:100%;height:200px;pointer-events:none;z-index:2146999999;}

/* Día: tarjeta clara si la app no define su propio fondo de cristal */
:root[data-theme="light"] .celebracion-card{
  background:var(--celeb-bg,var(--auth-card-bg,rgba(255,255,255,.88)));
  color:var(--ink,#0C2749);
  box-shadow:0 28px 60px -24px rgba(0,14,53,.45),0 0 50px -14px rgba(200,14,0,.25);
}
:root[data-theme="light"] .celebracion-velo{background:rgba(255,255,255,.62);}
:root[data-theme="light"] .celebracion-card{background:var(--celeb-bg,var(--auth-card-bg,rgba(255,255,255,.97)));border-color:rgba(12,39,73,.18);}
:root[data-theme="light"] .celebracion-chip{color:#0C2749;background:rgba(12,39,73,.07);border-color:rgba(12,39,73,.18);}
:root[data-theme="light"] .celebracion-barra{background:rgba(12,39,73,.14);}
:root[data-theme="light"] .celebracion-medalla{border-color:#fff;box-shadow:0 0 0 4px #0C2749,0 14px 28px -10px rgba(12,39,73,.45),inset 0 -6px 12px rgba(0,0,0,.2);}
:root[data-theme="light"] .celebracion-toast{color:#0C2749;background:var(--celeb-bg,var(--auth-card-bg,rgba(255,255,255,.98)));border-color:rgba(12,39,73,.2);box-shadow:0 16px 36px -14px rgba(12,39,73,.45);}
:root[data-theme="light"] .celebracion-toast .celebracion-subtitulo{color:#3a4a63;}
:root[data-theme="light"] .celebracion-titulo{color:var(--ink,#0C2749);}
:root[data-theme="light"] .celebracion-subtitulo{color:var(--ink-soft,rgba(12,39,73,.72));}

@keyframes celeb-medalla{0%{opacity:0;transform:scale(.2) rotate(-25deg);}70%{opacity:1;transform:scale(1.12) rotate(6deg);}100%{opacity:1;transform:none;}}
@keyframes celeb-toast-in{to{opacity:1;transform:none;}}
@keyframes celeb-toast-out{from{opacity:1;transform:none;}to{opacity:0;transform:translateY(-14px);}}
@keyframes celeb-in{to{opacity:1;transform:none;}}
@keyframes celeb-fade-t{from{opacity:0}to{opacity:1}}
@keyframes celeb-fade{from{opacity:0}to{opacity:1}}
@keyframes celeb-fadeout{from{opacity:1}to{opacity:0}}
@keyframes celeb-out{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .celebracion-medalla{animation:celeb-fade .3s ease forwards;transform:none;}
  .celebracion-toast{animation:celeb-fade-t .3s ease forwards;transform:none;}
  .celebracion-card{animation:celeb-fade .3s ease forwards;transform:none;}
  .celebracion-barra-rel{transition:none;}
}