/* ==============================================
   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-backdrop.closing {
  animation: fadeOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  pointer-events: none !important;
}

#modal-backdrop.closing #modal-container {
  animation: modalSlideDown 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
  pointer-events: none !important;
}

/* 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 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);
  overflow: hidden;        /* Clips children to border-radius — prevents corner bleed */
  border-radius: 1rem;     /* rounded-2xl (matches index.html class) */
}

#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 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: var(--btn-primary-bg, #2563eb) !important;
    background-color: var(--btn-primary-bg, #2563eb) !important;
    color: var(--btn-primary-text, #ffffff) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 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: var(--btn-primary-hover, #1d4ed8) !important;
    background-color: var(--btn-primary-hover, #1d4ed8) !important;
    color: var(--btn-primary-text, #ffffff) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(37, 99, 235, 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: var(--btn-primary-text, #ffffff) !important;
}

/* =====================================================================
   ESTANDARIZACIÓN GLOBAL DE MODALES & ELIMINACIÓN DE DOBLE SCROLL (LEONIX ERP)
   ===================================================================== */

/* 1. Bloqueo universal de scroll en body y contenido de fondo al abrir modales y alertas */
html.modal-open,
body.modal-open,
html:has(#modal-backdrop:not(.hidden)),
body:has(#modal-backdrop:not(.hidden)),
html:has(#system-feedback-overlay),
body:has(#system-feedback-overlay),
html:has(div[id*="modal"][class*="fixed"]:not(.hidden)),
body:has(div[id*="modal"][class*="fixed"]:not(.hidden)),
html:has(.modal-card-standard),
body:has(.modal-card-standard) {
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    overscroll-behavior: none !important;
}

body.modal-open #main-content,
body.modal-open #main-content-wrapper,
body.modal-open #app-container,
body:has(#modal-backdrop:not(.hidden)) #main-content,
body:has(#modal-backdrop:not(.hidden)) #main-content-wrapper,
body:has(#modal-backdrop:not(.hidden)) #app-container,
body:has(#system-feedback-overlay) #main-content,
body:has(#system-feedback-overlay) #main-content-wrapper,
body:has(#system-feedback-overlay) #app-container {
    overflow: hidden !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    overscroll-behavior: none !important;
}

/* Contención estricta de overscroll en todos los modales y contenedores desplazables */
#modal-backdrop,
.modal-backdrop-standard,
[id*="modal-backdrop"],
#modal-container,
.modal-card-standard,
.modal-card,
.modal-body,
[id*="modal"] .modal-body,
[id*="modal"] .overflow-y-auto,
.modal-body .overflow-y-auto,
div[id*="modal"] div[class*="overflow-y-auto"],
div[id*="modal"] div[class*="overflow-auto"] {
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
}

/* 2. Congelamiento del modal padre cuando se abre un modal hijo encima */
.modal-parent-frozen {
    pointer-events: none !important;
    user-select: none !important;
}

#modal-backdrop:not(.modal-parent-frozen),
#modal-backdrop:not(.modal-parent-frozen) #modal-container {
    pointer-events: auto !important;
}

/* 3. Backdrops estandarizados */
#modal-backdrop,
.modal-backdrop-standard,
[id*="modal-backdrop"],
div[class*="fixed inset-0"][class*="z-"]:not(#global-loader):not([id*="loader"]) {
    background-color: var(--modal-overlay, rgba(2, 6, 23, 0.55));
    backdrop-filter: blur(var(--overlay-blur, 8px));
    -webkit-backdrop-filter: blur(var(--overlay-blur, 8px));
}

/* 4. Tarjetas / Contenedores de modales estandarizados */
#modal-container,
.modal-card-standard {
    border-radius: 1.5rem !important; /* rounded-3xl */
    border: 1px solid var(--modal-border, rgba(226, 232, 240, 0.8)) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

html.dark:not([class*="theme-"]) #modal-container,
html.dark:not([class*="theme-"]) .modal-card-standard {
    background-color: var(--modal-bg, #0f172a);
    border-color: var(--modal-border, rgba(30, 41, 59, 0.9));
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
}

/* 5. Cabeceras con gradiente en modales - Unificadas con el gradiente del tema */
[id*="modal"] .modal-header,
[id*="modal"] .dynamic-header-gradient,
.modal-header-gradient,
.dynamic-header-gradient {
    background: var(--header-gradient, linear-gradient(135deg, #1e3a8a, #0f172a)) !important;
    color: var(--header-page-text, #ffffff) !important;
}

html.theme-liquid-glass:not(.dark) [id*="modal"] .dynamic-header-gradient,
html.theme-liquid-glass:not(.dark) [id*="modal"] .modal-header {
    color: #0f172a !important;
}

/* 6. BOTÓN CANCELAR ESTANDARIZADO EN TODO EL SISTEMA */
.btn-modal-cancel,
#modal-container #btn-cancel,
#btn-cancel,
button.btn-cancel,
.btn-submodal-close:not(button:has(i.fa-xmark)):not(button:has(i.fa-close)),
.modal-footer button.btn-secondary,
[id*="modal"] #btn-cancel {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: 0.75rem !important; /* rounded-xl */
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.btn-modal-cancel:hover,
#modal-container #btn-cancel:hover,
#btn-cancel:hover,
button.btn-cancel:hover,
.btn-submodal-close:not(button:has(i.fa-xmark)):not(button:has(i.fa-close)):hover,
.modal-footer button.btn-secondary:hover,
[id*="modal"] #btn-cancel:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
}

html.dark .btn-modal-cancel,
html.dark #modal-container #btn-cancel,
html.dark #btn-cancel,
html.dark button.btn-cancel,
html.dark .btn-submodal-close:not(button:has(i.fa-xmark)):not(button:has(i.fa-close)),
html.dark .modal-footer button.btn-secondary,
html.dark [id*="modal"] #btn-cancel {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}

html.dark .btn-modal-cancel:hover,
html.dark #modal-container #btn-cancel:hover,
html.dark #btn-cancel:hover,
html.dark button.btn-cancel:hover,
html.dark .btn-submodal-close:not(button:has(i.fa-xmark)):not(button:has(i.fa-close)):hover,
html.dark .modal-footer button.btn-secondary:hover,
html.dark [id*="modal"] #btn-cancel:hover {
    background-color: #334155 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
}

/* 7. BOTÓN GUARDAR / ACEPTAR ESTANDARIZADO EN TODO EL SISTEMA */
.btn-modal-save,
#modal-container #btn-confirm,
#modal-container button[type="submit"]:not(.btn-modal-cancel):not(.btn-cancel):not(.btn-secondary):not([class*="rose"]):not([class*="red"]),
.btn-submodal-save,
[id*="modal"] #btn-confirm,
[id*="modal"] [id*="btn-save"],
[id*="modal"] [id*="btn-submit"],
[id*="modal"] button[type="submit"]:not(.btn-modal-cancel):not(.btn-cancel):not(.btn-secondary):not([class*="rose"]):not([class*="red"]) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    padding: 0.625rem 1.5rem !important;
    border-radius: 0.75rem !important; /* rounded-xl */
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    background: var(--btn-primary-bg, #2563eb) !important;
    background-color: var(--btn-primary-bg, #2563eb) !important;
    color: var(--btn-primary-text, #ffffff) !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-modal-save:hover,
#modal-container #btn-confirm:hover,
#modal-container button[type="submit"]:not(.btn-modal-cancel):not(.btn-cancel):not(.btn-secondary):not([class*="rose"]):not([class*="red"]):hover,
.btn-submodal-save:hover,
[id*="modal"] #btn-confirm:hover,
[id*="modal"] [id*="btn-save"]:hover,
[id*="modal"] [id*="btn-submit"]:hover,
[id*="modal"] button[type="submit"]:not(.btn-modal-cancel):not(.btn-cancel):not(.btn-secondary):not([class*="rose"]):not([class*="red"]):hover {
    background: var(--btn-primary-hover, #1d4ed8) !important;
    background-color: var(--btn-primary-hover, #1d4ed8) !important;
    color: var(--btn-primary-text, #ffffff) !important;
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45) !important;
    transform: translateY(-1px);
}

.btn-modal-save:active,
#modal-container #btn-confirm:active,
#modal-container button[type="submit"]:active,
.btn-submodal-save:active {
    transform: translateY(0px) scale(0.98);
}