/* ==========================================================
   UI GLOBAL — LOADER + MENSAJES
   ========================================================== */
#app-loader{
  position:fixed;inset:0;z-index:99999;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 50% 32%,rgba(222,182,93,.09),transparent 22rem),
    radial-gradient(circle at 50% 0,rgba(213,16,55,.13),transparent 28rem),
    #060505;
  transition:opacity .38s ease,visibility .38s ease;
}
#app-loader.app-loader-hidden{
  opacity:0;visibility:hidden;pointer-events:none;
}
.app-loader-inner{
  width:min(320px,calc(100% - 42px));
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.app-loader-logo{
  width:48px;height:48px;object-fit:contain;margin-bottom:19px;
  animation:appLogoFloat 2.1s ease-in-out infinite;
  filter:drop-shadow(0 8px 20px rgba(255,255,255,.07));
}
.app-loader-rings{
  position:relative;width:64px;height:64px;margin-bottom:18px;
}
.app-loader-rings::before,
.app-loader-rings::after{
  content:"";position:absolute;border-radius:50%;inset:0;
  border:1px solid rgba(222,182,93,.22);
}
.app-loader-rings::before{
  border-top-color:#deb65d;
  animation:appSpin 1s linear infinite;
}
.app-loader-rings::after{
  inset:8px;border-color:rgba(213,16,55,.18);
  border-bottom-color:#d51037;
  animation:appSpinReverse 1.35s linear infinite;
}
.app-loader-title{
  color:#f5eee8;font-size:.75rem;font-weight:800;
  letter-spacing:1.8px;text-transform:uppercase;
}
.app-loader-subtitle{
  margin-top:7px;color:#776f6b;font-size:.69rem;line-height:1.5;
}
.app-loader-line{
  width:154px;height:2px;margin-top:17px;border-radius:999px;overflow:hidden;
  background:rgba(255,255,255,.06);
}
.app-loader-line::after{
  content:"";display:block;width:42%;height:100%;
  background:linear-gradient(90deg,transparent,#deb65d,#d51037,transparent);
  animation:appLoadLine 1.2s ease-in-out infinite;
}

/* Bloqueo durante acciones */
.app-action-loader{
  position:fixed;inset:0;z-index:99998;
  display:none;place-items:center;padding:22px;
  background:rgba(3,3,3,.72);
  backdrop-filter:blur(11px);
}
.app-action-loader.visible{display:grid;animation:appFadeIn .2s both}
.app-action-card{
  width:min(360px,100%);
  border:1px solid rgba(255,255,255,.10);border-radius:19px;
  padding:27px 24px;text-align:center;
  background:
    radial-gradient(circle at 50% 0,rgba(222,182,93,.07),transparent 14rem),
    rgba(13,11,11,.97);
  box-shadow:0 28px 80px rgba(0,0,0,.46);
}
.app-action-spinner{
  width:38px;height:38px;margin:0 auto 16px;border-radius:50%;
  border:2px solid rgba(255,255,255,.10);
  border-top-color:#deb65d;border-right-color:#d51037;
  animation:appSpin .78s linear infinite;
}
.app-action-title{
  color:#f6f0eb;font-size:.78rem;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;
}
.app-action-text{margin-top:6px;color:#8f8783;font-size:.72rem;line-height:1.55}

/* Modal de mensajes */
.app-message-overlay{
  position:fixed;inset:0;z-index:100000;
  display:none;place-items:center;padding:20px;
  background:rgba(2,2,2,.76);backdrop-filter:blur(13px);
}
.app-message-overlay.visible{display:grid;animation:appFadeIn .2s both}
.app-message-card{
  width:min(430px,100%);
  position:relative;overflow:hidden;
  padding:31px 27px 25px;
  border-radius:22px;border:1px solid rgba(255,255,255,.11);
  background:
    linear-gradient(145deg,rgba(255,255,255,.025),transparent 45%),
    #100e0e;
  box-shadow:0 35px 100px rgba(0,0,0,.55);
  animation:appMessageIn .3s cubic-bezier(.2,.8,.2,1) both;
}
.app-message-card::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:56%;height:1px;background:linear-gradient(90deg,transparent,var(--msg-accent,#deb65d),transparent);
}
.app-message-icon{
  width:52px;height:52px;margin:0 auto 17px;border-radius:50%;
  display:grid;place-items:center;
  color:var(--msg-accent,#deb65d);
  border:1px solid color-mix(in srgb,var(--msg-accent,#deb65d) 45%, transparent);
  background:color-mix(in srgb,var(--msg-accent,#deb65d) 8%, transparent);
  font-size:22px;font-weight:900;
}
.app-message-title{
  margin:0;text-align:center;color:#f5efea;
  font-family:"Playfair Display",Georgia,serif;
  font-size:1.65rem;line-height:1.05;letter-spacing:-.025em;
}
.app-message-text{
  margin:12px auto 0;max-width:340px;text-align:center;
  color:#9d9591;font-size:.78rem;line-height:1.65;
}
.app-message-actions{
  display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:23px;
}
.app-message-btn{
  min-height:42px;padding:0 18px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);
  background:#111;color:#b0a8a3;
  font-size:.71rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
}
.app-message-btn.primary{
  border-color:transparent;color:#fff;
  background:linear-gradient(135deg,#e11340,#b90a31);
  box-shadow:0 10px 28px rgba(213,16,55,.18);
}
.app-message-btn.gold{
  color:#17120c;border-color:transparent;background:linear-gradient(135deg,#efca76,#d9aa4d);
}
.app-message-btn:hover{transform:translateY(-2px)}
.app-message-close{
  position:absolute;right:13px;top:11px;width:32px;height:32px;
  display:grid;place-items:center;border:0;border-radius:50%;
  background:transparent;color:#675f5b;cursor:pointer;font-size:20px;
}
.app-message-close:hover{color:#fff;background:rgba(255,255,255,.05)}

@keyframes appSpin{to{transform:rotate(360deg)}}
@keyframes appSpinReverse{to{transform:rotate(-360deg)}}
@keyframes appLogoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes appLoadLine{0%{transform:translateX(-120%)}100%{transform:translateX(340%)}}
@keyframes appFadeIn{from{opacity:0}to{opacity:1}}
@keyframes appMessageIn{from{opacity:0;transform:translateY(13px) scale(.985)}to{opacity:1;transform:none}}

@media(max-width:560px){
  .app-message-card{padding:29px 19px 22px;border-radius:19px}
  .app-message-actions{flex-direction:column}
  .app-message-btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  #app-loader,.app-action-loader,.app-message-overlay,
  .app-loader-logo,.app-loader-rings::before,.app-loader-rings::after,
  .app-loader-line::after,.app-action-spinner,.app-message-card{
    animation:none!important;transition:none!important;
  }
}