/*
 * Avisos de confirmación con la identidad Viving (2026-10-05).
 * Juan: «mejora muchísimo todos los mensajes de confirmación que aparecen en
 * un modal animado… en el registro, en el admin / panel».
 * Viste el SweetAlert v1 de siempre (sweet-alert.js / .css) sin tocar su API:
 * se carga DESPUÉS de sweet-alert.css en la web y en el panel. Los iconos son
 * SVG que mete viving-alert.js dentro de cada .icon (los <span> originales se
 * quedan ocultos porque la librería los busca).
 * Lleva !important donde la librería pone estilos en línea (margin-top, color
 * del botón) y donde la plantilla fuerza h2/p a #1A3151!important.
 */
.sweet-overlay,.sweet-alert{
  --va-n:#1A3151;--va-cta:#B75A44;--va-cta-h:#9B4532;--va-acc:#C96A54;--va-melo:#F2CDB9;
  --va-cream:#F8F2E8;--va-cielo:#C9D9EA;--va-salvia:#B5C9AE;--va-line:#E3DDD4;--va-t2:#5B6F8B;
  --va-ease:cubic-bezier(.2,.7,.2,1);--va-spring:cubic-bezier(.34,1.45,.64,1)
}

/* Fondo: velo marino con desenfoque */
html body .sweet-overlay{z-index:100000!important;background:rgba(15,30,52,.46)!important;-webkit-backdrop-filter:blur(7px) saturate(1.1);backdrop-filter:blur(7px) saturate(1.1)}

/* Tarjeta */
html body .sweet-alert{
  z-index:100001!important;position:fixed;top:50%!important;left:50%!important;right:auto!important;
  margin:0!important;translate:-50% -50%;width:min(440px,calc(100vw - 32px))!important;max-height:calc(100dvh - 32px);overflow:hidden auto;
  padding:40px 32px 28px!important;border-radius:28px!important;background:#FFFCF7!important;
  border:1px solid rgba(227,221,212,.85);box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 50px 100px -30px rgba(10,22,40,.6),0 18px 40px -20px rgba(10,22,40,.35);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif!important;text-align:center;isolation:isolate;box-sizing:border-box
}
/* Halo de color arriba según el tipo de aviso */
html body .sweet-alert::before{content:"";position:absolute;z-index:-1;left:50%;top:-150px;width:420px;height:300px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,var(--va-halo,rgba(242,205,185,.55)),transparent);pointer-events:none}
html body .sweet-alert::after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;background-image:radial-gradient(rgba(26,49,81,.07) 1px,transparent 1.2px);background-size:16px 16px;-webkit-mask-image:linear-gradient(#000,transparent 45%);mask-image:linear-gradient(#000,transparent 45%)}
html body .sweet-alert:has(.icon.success[style*="block"]){--va-halo:rgba(201,217,234,.75)}
html body .sweet-alert:has(.icon.error[style*="block"]){--va-halo:rgba(201,106,84,.28)}
html body .sweet-alert:has(.icon.warning[style*="block"]){--va-halo:rgba(242,205,185,.75)}
html body .sweet-alert:has(.icon.info[style*="block"]){--va-halo:rgba(201,217,234,.75)}

/* Entrada y salida (las clases las pone la librería) */
html body .sweet-alert.showSweetAlert{animation:vaIn .7s var(--va-spring) both!important}
html body .sweet-alert.hideSweetAlert{animation:vaOut .2s var(--va-ease) both!important}
@keyframes vaIn{0%{opacity:0;transform:translateY(28px) scale(.9) rotate(-1deg);filter:blur(6px)}55%{opacity:1;filter:none}100%{opacity:1;transform:none;filter:none}}
@keyframes vaOut{to{opacity:0;transform:translateY(10px) scale(.96)}}

/* Contenido escalonado; también al encadenar un aviso tras otro (.va-swap) */
html body .sweet-alert.showSweetAlert :is(h2,p,button),html body .sweet-alert.va-swap :is(h2,p,button){animation:vaUp .55s var(--va-ease) both}
html body .sweet-alert h2{animation-delay:.16s!important}
html body .sweet-alert p{animation-delay:.24s!important}
html body .sweet-alert button{animation-delay:.32s!important}
html body .sweet-alert button.confirm{animation-delay:.36s!important}
@keyframes vaUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Textos */
html body .sweet-alert h2{
  font-family:"Bricolage Grotesque","Bricolage",Inter,system-ui,sans-serif!important;font-optical-sizing:auto;
  font-size:clamp(1.4rem,1.2rem + .8vw,1.7rem)!important;font-weight:750!important;line-height:1.12!important;letter-spacing:-.025em;
  color:#1A3151!important;margin:20px 0 10px!important;padding:0!important;text-wrap:balance;text-transform:none
}
html body .sweet-alert p{font-family:inherit!important;font-size:1rem!important;font-weight:400!important;line-height:1.55!important;color:#5B6F8B!important;margin:0 auto!important;max-width:34ch;text-wrap:pretty}
html body .sweet-alert p:empty{display:none!important}

/* Botones: confirmar en terracota, cancelar fantasma */
html body .sweet-alert button{
  -webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;justify-content:center;min-width:148px;min-height:50px;
  margin:28px 5px 0!important;padding:0 26px!important;border-radius:12px!important;border:1.5px solid transparent!important;
  font:600 1rem/1 Inter,system-ui,sans-serif!important;letter-spacing:0;cursor:pointer;
  transition:background-color .25s var(--va-ease),color .25s var(--va-ease),border-color .25s var(--va-ease),box-shadow .3s var(--va-ease),transform .25s var(--va-spring)
}
html body .sweet-alert button.confirm{background:var(--va-cta)!important;color:#fff!important;box-shadow:0 1px 0 rgba(26,49,81,.08),0 14px 28px -14px rgba(183,90,68,.75)!important;position:relative;overflow:hidden}
html body .sweet-alert button.confirm:hover{background:var(--va-cta-h)!important;transform:translateY(-1px)}
html body .sweet-alert button.confirm:active{transform:translateY(1px) scale(.98)}
html body .sweet-alert button.confirm::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-110%);pointer-events:none}
html body .sweet-alert.showSweetAlert button.confirm::after{animation:vaShine 1.1s .9s var(--va-ease)}
@keyframes vaShine{to{transform:translateX(110%)}}
html body .sweet-alert button.cancel{background:transparent!important;color:#1A3151!important;border-color:var(--va-line)!important;box-shadow:none!important}
html body .sweet-alert button.cancel:hover{background:var(--va-cream)!important;border-color:#cfc6b9!important}
html body .sweet-alert button:focus{outline:none;box-shadow:none}
html body .sweet-alert button:focus-visible{outline:2px solid rgba(201,106,84,.45)!important;outline-offset:3px}
html body .sweet-alert button.confirm:focus-visible{box-shadow:0 14px 28px -14px rgba(183,90,68,.75)!important}

/* Iconos: los SVG de viving-alert.js; lo original, oculto */
html body .sweet-alert .icon:not(.custom){width:88px!important;height:88px!important;margin:0 auto!important;padding:0!important;border:0!important;border-radius:50%;background:none!important;box-sizing:border-box;position:relative;overflow:visible!important;animation:vaPop .7s .05s var(--va-spring) both!important}
html body .sweet-alert .icon:not(.custom) > :not(svg),html body .sweet-alert .icon:not(.custom)::before,html body .sweet-alert .icon:not(.custom)::after{display:none!important;content:none!important;animation:none!important}
html body .sweet-alert .icon .va-ico{display:block;width:100%;height:100%;overflow:visible}
@keyframes vaPop{from{opacity:0;transform:scale(.3) rotate(-25deg)}to{opacity:1;transform:none}}

.va-ico .va-bg{transform-box:fill-box;transform-origin:center}
.va-ico .va-ring{fill:none;stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0;animation:vaRing 1.2s .35s var(--va-ease) both}
.va-ico .va-ring--2{animation-delay:.6s}
@keyframes vaRing{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
.va-ico .va-draw{fill:none;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:vaDraw .5s .38s cubic-bezier(.65,0,.35,1) forwards}
.va-ico .va-draw + .va-draw{animation-delay:.58s}
.va-ico .va-dot{transform-box:fill-box;transform-origin:center;animation:vaPop .5s .7s var(--va-spring) both}
@keyframes vaDraw{to{stroke-dashoffset:0}}

/* Destellos de éxito */
.va-ico .va-spark circle{transform-box:fill-box;transform-origin:center;opacity:0;animation:vaSpark .9s calc(.55s + var(--i) * 30ms) var(--va-ease) both}
@keyframes vaSpark{0%{opacity:0;transform:translate(0,0) scale(.4)}25%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) scale(1)}}

/* Colores por tipo */
.va-ico--success .va-bg{fill:var(--va-n)}
.va-ico--success .va-ring{stroke:var(--va-n)}
.va-ico--success .va-draw{stroke:var(--va-melo)}
.va-ico--error .va-bg{fill:#F6DDD3}
.va-ico--error .va-ring{stroke:var(--va-acc)}
.va-ico--error .va-draw{stroke:var(--va-cta)}
.va-ico--warning .va-bg{fill:var(--va-melo)}
.va-ico--warning .va-ring{stroke:var(--va-acc)}
.va-ico--warning .va-draw{stroke:var(--va-cta-h)}
.va-ico--warning .va-dot{fill:var(--va-cta-h)}
.va-ico--info .va-bg{fill:var(--va-cielo)}
.va-ico--info .va-ring{stroke:#8FAACB}
.va-ico--info .va-draw{stroke:var(--va-n)}
.va-ico--info .va-dot{fill:var(--va-n)}

/* El error tiembla un poco; el aviso se balancea */
html body .sweet-alert .icon.error.animateErrorIcon{animation:vaPop .6s .05s var(--va-spring) both,vaShake .5s .75s var(--va-ease)!important}
html body .sweet-alert .icon.warning.pulseWarning{animation:vaPop .7s .05s var(--va-spring) both,vaSwing 1s .9s var(--va-ease)!important}
@keyframes vaShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes vaSwing{20%{transform:rotate(10deg)}45%{transform:rotate(-8deg)}70%{transform:rotate(4deg)}}

/* Móvil: botones a lo ancho, confirmar arriba */
@media (max-width:540px){
  html body .sweet-alert{padding:34px 22px 22px!important;border-radius:24px!important}
  /* .showSweetAlert solo está mientras se ve: el display:none en línea manda al cerrar */
  html body .sweet-alert.showSweetAlert[data-has-cancel-button=true]{display:flex!important;flex-direction:column}
  html body .sweet-alert button{width:100%;margin:10px 0 0!important}
  html body .sweet-alert button.confirm{order:2;margin-top:24px!important}
  html body .sweet-alert button.cancel{order:3}
}

@media (prefers-reduced-motion:reduce){
  html body .sweet-alert,html body .sweet-alert *,html body .sweet-alert *::after{animation:none!important;transition:none!important}
  .va-ico .va-draw{stroke-dashoffset:0}
  .va-ico .va-ring,.va-ico .va-spark{display:none}
}