/* ==============================================
   MODAL ANIMATIONS & OPTIMIZATIONS
   ============================================== */

/* Modal Backdrop con transición suave */
#modal-backdrop {
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 0.3s ease;
  will-change: opacity;
}

#modal-backdrop:not(.hidden) {
  animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modal Container con animación de entrada */
#modal-container {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, opacity;
  transform-origin: center;
}

/* Animacion de entrada del modal - Deslizamiento pronunciado desde abajo */
@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(100px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes modalSlideDown {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  to {
    opacity: 0;
    transform: translateY(30px) scale(0.98);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/* Animacion de " sacudida\
/* Animacion de sacudida para modales bloqueantes */
.animate-shake {
    animation: shake 0.5s cubic-bezier(.36, .07, .19, .97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

/* ==============================================
   MODAL WIDTH UTILITIES & RESPONSIVE CONSTRAINTS
   ============================================== */
.max-w-xs { max-width: 20rem !important; }
.max-w-sm { max-width: 24rem !important; }
.max-w-md { max-width: 28rem !important; }
.max-w-lg { max-width: 32rem !important; }
.max-w-xl { max-width: 36rem !important; }
.max-w-2xl { max-width: 42rem !important; }
.max-w-3xl { max-width: 48rem !important; }
.max-w-4xl { max-width: 56rem !important; }
.max-w-5xl { max-width: 64rem !important; }
.max-w-6xl { max-width: 72rem !important; }
.max-w-7xl { max-width: 80rem !important; }

#modal-backdrop {
  padding: 1rem;
  box-sizing: border-box;
}

#modal-container {
  margin: auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: min(94vw, 42rem);
}

#modal-container.max-w-xs { max-width: min(94vw, 20rem) !important; }
#modal-container.max-w-sm { max-width: min(94vw, 24rem) !important; }
#modal-container.max-w-md { max-width: min(94vw, 28rem) !important; }
#modal-container.max-w-lg { max-width: min(94vw, 32rem) !important; }
#modal-container.max-w-xl { max-width: min(94vw, 36rem) !important; }
#modal-container.max-w-2xl { max-width: min(94vw, 42rem) !important; }
#modal-container.max-w-3xl { max-width: min(94vw, 48rem) !important; }
#modal-container.max-w-4xl { max-width: min(94vw, 56rem) !important; }
#modal-container.max-w-5xl { max-width: min(94vw, 64rem) !important; }
#modal-container.max-w-6xl { max-width: min(94vw, 72rem) !important; }
#modal-container.max-w-7xl { max-width: min(94vw, 80rem) !important; }

/* ==============================================
   BOTONES CELESTES / PRIMARIOS DEL SISTEMA (GUARDAR Y ACCIÓN)
   ============================================== */
.bg-button-active-bg,
button.bg-button-active-bg,
[type="submit"].bg-button-active-bg,
.btn-primary,
button.btn-primary,
#modal-container #btn-confirm,
#modal-container #btn-confirm-payment-modal,
#modal-container [id*="confirm-payment"],
#modal-container button[type="submit"]:not(.btn-cancel):not(.btn-secondary):not([class*="rose"]):not([class*="red"]),
.btn-save-cyan,
.product-type-btn.active,
button.product-type-btn.active {
    background: #0891b2 linear-gradient(135deg, #06b6d4 0%, #0891b2 100%) !important;
    background-color: #0891b2 !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(8, 145, 178, 0.35) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bg-button-active-bg:hover,
button.bg-button-active-bg:hover,
[type="submit"].bg-button-active-bg:hover,
.btn-primary:hover,
button.btn-primary:hover,
#modal-container #btn-confirm:hover,
#modal-container #btn-confirm-payment-modal:hover,
#modal-container [id*="confirm-payment"]:hover,
#modal-container button[type="submit"]:not(.btn-cancel):not(.btn-secondary):not([class*="rose"]):not([class*="red"]):hover,
.product-type-btn.active:hover {
    background-color: #0e7490 !important;
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(8, 145, 178, 0.45) !important;
}

.bg-button-active-bg:active,
button.bg-button-active-bg:active,
[type="submit"].bg-button-active-bg:active,
.btn-primary:active,
button.btn-primary:active,
#modal-container #btn-confirm:active,
#modal-container #btn-confirm-payment-modal:active,
#modal-container [id*="confirm-payment"]:active,
#modal-container button[type="submit"]:active,
.product-type-btn.active:active {
    transform: translateY(0px) scale(0.98);
}

.text-button-active-text {
    color: #ffffff !important;
}