/* AlertV2.vue -- variante v2 de sweetalert2 con la misma esencia que los modales de pago
   (payment-modals.css): icono grande en cuadro redondeado, titulo grande al centro, boton
   principal grande con sombra y el secundario como liga. El overlay/modal (.ep-modal-overlay
   /.ep-modal) vive en v2/app.css; aqui solo va lo propio de la alerta. */

.alertv2 { position: relative; width: 420px; }
.alertv2-close { position: absolute; top: 14px; right: 14px; z-index: 1; }
.alertv2-body { padding: 30px 28px 26px; text-align: center; overflow-y: auto; }

.alertv2-icon {
  width: 58px; height: 58px; margin: 0 auto 14px; border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  background: var(--orange-bg); color: var(--orange-d);
}
.alertv2--success .alertv2-icon { background: var(--green-bg); color: var(--green); }
.alertv2--error .alertv2-icon { background: var(--red-bg); color: var(--red); }

.alertv2-title { margin: 0; font-size: 19px; font-weight: 800; color: var(--tx-strong); letter-spacing: -.02em; line-height: 1.3; }
.alertv2-message { margin: 6px 0 0; font-size: 14px; color: var(--tx-muted); line-height: 1.5; }
.alertv2-message p { margin: 0 0 8px; }
.alertv2-message p:last-child { margin-bottom: 0; }
.alertv2-message ul { margin: 0; padding-left: 18px; text-align: left; }
.ep-modal .alertv2-message a { color: var(--orange-d); font-weight: 600; text-decoration: underline; }

.alertv2-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 22px; }
.alertv2-primary {
  width: 100%; min-height: 50px; justify-content: center; border-radius: var(--r-md);
  font-size: 15px; font-weight: 700;
}
.alertv2-primary.btn--orange { box-shadow: 0 10px 24px rgba(var(--orange-d-rgb), .35); }
.alertv2-primary.btn--danger { box-shadow: 0 10px 24px rgba(220, 38, 38, .28); }
.alertv2-secondary {
  padding: 0; border: none; background: none; cursor: pointer;
  color: var(--tx-muted); font-size: 14px; font-weight: 600;
}
.alertv2-secondary:hover { color: var(--tx-strong); }

.alertv2-progress { height: 3px; background: var(--border); overflow: hidden; }
.alertv2-progress__bar { height: 100%; background: var(--green); width: 100%; transform-origin: left; animation: alertv2-progress-shrink linear forwards; }
.alertv2--error .alertv2-progress__bar { background: var(--red); }
.alertv2--question .alertv2-progress__bar { background: var(--orange); }
@keyframes alertv2-progress-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }

.v2-alert-fade-enter-active,
.v2-alert-fade-leave-active { transition: opacity .15s; }
.v2-alert-fade-enter,
.v2-alert-fade-leave-to { opacity: 0; }