/**
 * ============================================
 * MSI STUDIO DESIGN SYSTEM - MODALS
 * ============================================
 *
 * Este archivo contiene todos los estilos para modales:
 * - Modal base (Bootstrap override)
 * - Modal backdrop
 * - Modal dialog (tamaños y variantes)
 * - Modal content (header, body, footer)
 * - Animaciones suaves
 * - Dark mode support
 *
 * Debe importarse después de tokens.css y foundations.css
 */

/* ============================================
   MODAL BACKDROP - Bootstrap Override
   ============================================ */

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: var(--backdrop-light) !important;
  backdrop-filter: blur(4px);
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

[data-bs-theme="dark"] .modal-backdrop {
  background-color: var(--backdrop-dark) !important;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 1 !important;
}

/* ============================================
   MODAL BASE - Bootstrap Override
   ============================================ */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal.fade .modal-dialog {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translate(0, -50px) scale(0.95);
  opacity: 0;
}

.modal.show .modal-dialog {
  transform: translate(0, 0) scale(1) !important;
  opacity: 1;
}

/* ============================================
   MODAL DIALOG - Bootstrap Override
   ============================================ */

.modal-dialog {
  position: relative;
  width: auto;
  margin: var(--spacing-16);
  pointer-events: none;
}

.modal-dialog-scrollable {
  height: calc(100% - (var(--spacing-16) * 2));
}

.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - (var(--spacing-16) * 2));
}

/* ============================================
   MODAL CONTENT - Bootstrap Override
   ============================================ */

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: var(--bg-card) !important;
  background-clip: padding-box;
  border: var(--border-width-1) solid var(--border-primary) !important;
  border-radius: var(--gaia-radius-dialog) !important;
  box-shadow: var(--shadow-2xl) !important;
  outline: 0;
}

/* ============================================
   MODAL HEADER - Bootstrap Override
   ============================================ */

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-24) !important;
  border-bottom: var(--border-width-1) solid var(--border-primary) !important;
  border-top-left-radius: calc(var(--radius-lg) - 1px);
  border-top-right-radius: calc(var(--radius-lg) - 1px);
  background-color: var(--bg-card) !important;
}

.modal-header .btn-close {
  padding: var(--spacing-8) !important;
  margin: calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) calc(var(--spacing-8) * -1) auto;
}

/* ============================================
   MODAL TITLE - Bootstrap Override
   ============================================ */

.modal-title {
  margin: 0 !important;
  font-size: var(--font-size-heading-lg) !important;
  font-weight: var(--font-weight-bold) !important;
  line-height: var(--line-height-heading-lg) !important;
  color: var(--text-primary) !important;
}

/* ============================================
   MODAL BODY - Bootstrap Override
   ============================================ */

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--spacing-24) !important;
  color: var(--text-primary) !important;
  font-size: var(--font-size-body-md);
  line-height: var(--line-height-body-md);
}

.modal-body p {
  color: var(--text-secondary) !important;
  margin-bottom: var(--spacing-16);
}

.modal-body p:last-child {
  margin-bottom: 0;
}

/* ============================================
   MODAL FOOTER - Bootstrap Override
   ============================================ */

.modal-footer {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  align-items: center;
  justify-content: flex-end;
  padding: var(--spacing-20) var(--spacing-24) !important;
  background-color: var(--bg-card) !important;
  border-top: var(--border-width-1) solid var(--border-primary) !important;
  border-bottom-right-radius: calc(var(--radius-lg) - 1px);
  border-bottom-left-radius: calc(var(--radius-lg) - 1px);
  gap: var(--spacing-12);
}

.modal-footer > * {
  margin: 0 !important;
}

/* ============================================
   CLOSE BUTTON - Bootstrap Override
   ============================================ */

.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: var(--spacing-8);
  color: var(--text-primary) !important;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230F172A'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: var(--radius-md);
  opacity: 0.5;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-close:hover {
  color: var(--text-primary) !important;
  text-decoration: none;
  opacity: 1;
  transform: scale(1.1);
}

.btn-close:focus {
  outline: 0;
  box-shadow: var(--shadow-focus-light);
  opacity: 1;
}

.btn-close:disabled,
.btn-close.disabled {
  pointer-events: none;
  user-select: none;
  opacity: 0.25;
}

/* ============================================
   MODAL SIZES - Bootstrap Override
   ============================================ */

/* Small Modal */
.modal-sm {
  max-width: 25rem !important;  /* 400px convertido a rem */
}

/* Default Modal */
@media (min-width: 36rem) {  /* 576px convertido aproximadamente */
  .modal-dialog {
    max-width: 37.5rem;  /* 600px convertido a rem */
    margin: var(--spacing-32) auto;
  }

  .modal-dialog-scrollable {
    height: calc(100% - (var(--spacing-32) * 2));
  }

  .modal-dialog-centered {
    min-height: calc(100% - (var(--spacing-32) * 2));
  }

  .modal-sm {
    max-width: 25rem;  /* 400px convertido a rem */
  }
}

/* Large Modal */
.modal-lg,
.modal-xl {
  max-width: 56.25rem !important;  /* 900px convertido a rem */
}

/* Extra Large Modal */
@media (min-width: 75rem) {  /* 1200px convertido aproximadamente */
  .modal-xl {
    max-width: 71.25rem !important;  /* 1140px convertido a rem */
  }
}

/* Full Screen Modals */
.modal-fullscreen {
  width: 100vw !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
}

.modal-fullscreen .modal-content {
  height: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
  border-radius: 0 !important;
}

.modal-fullscreen .modal-body {
  overflow-y: auto;
}

/* Responsive Fullscreen Modals */
@media (max-width: 36rem) {  /* 575.98px convertido aproximadamente */
  .modal-fullscreen-sm-down {
    width: 100vw !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
  }

  .modal-fullscreen-sm-down .modal-content {
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .modal-fullscreen-sm-down .modal-header,
  .modal-fullscreen-sm-down .modal-footer {
    border-radius: 0 !important;
  }

  .modal-fullscreen-sm-down .modal-body {
    overflow-y: auto;
  }
}

@media (max-width: 48rem) {  /* 767.98px convertido aproximadamente */
  .modal-fullscreen-md-down {
    width: 100vw !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
  }

  .modal-fullscreen-md-down .modal-content {
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
  }

  .modal-fullscreen-md-down .modal-header,
  .modal-fullscreen-md-down .modal-footer {
    border-radius: 0 !important;
  }

  .modal-fullscreen-md-down .modal-body {
    overflow-y: auto;
  }
}

/* ============================================
   MODAL VARIANTS - Custom
   ============================================ */

/* Success Modal */
.modal-success {
  border-color: var(--success-green) !important;
}

.modal-success .modal-header {
  background-color: var(--success-green) !important;
  color: var(--text-primary-invert) !important;
  border-bottom-color: var(--success-green-dark) !important;
}

.modal-success .modal-title {
  color: var(--text-primary-invert) !important;
}

.modal-success .btn-close {
  filter: brightness(0) invert(1);
}

/* Error/Danger Modal */
.modal-danger,
.modal-error {
  border-color: var(--error-red) !important;
}

.modal-danger .modal-header,
.modal-error .modal-header {
  background-color: var(--error-red) !important;
  color: var(--text-primary-invert) !important;
  border-bottom-color: var(--error-red-dark) !important;
}

.modal-danger .modal-title,
.modal-error .modal-title {
  color: var(--text-primary-invert) !important;
}

.modal-danger .btn-close,
.modal-error .btn-close {
  filter: brightness(0) invert(1);
}

/* Warning Modal */
.modal-warning {
  border-color: var(--alert-yellow) !important;
}

.modal-warning .modal-header {
  background-color: var(--alert-yellow) !important;
  color: var(--text-primary) !important;
  border-bottom-color: var(--alert-yellow-dark) !important;
}

.modal-warning .modal-title {
  color: var(--text-primary) !important;
}

/* Info Modal */
.modal-info {
  border-color: var(--blue-500) !important;
}

.modal-info .modal-header {
  background-color: var(--blue-500) !important;
  color: var(--text-primary-invert) !important;
  border-bottom-color: var(--blue-600) !important;
}

.modal-info .modal-title {
  color: var(--text-primary-invert) !important;
}

.modal-info .btn-close {
  filter: brightness(0) invert(1);
}

/* ============================================
   MODAL SIMPLE (Sin header/footer)
   ============================================ */

.modal-simple .modal-content {
  border: none !important;
  box-shadow: var(--shadow-xl) !important;
}

.modal-simple .modal-body {
  padding: var(--spacing-32) !important;
}

/* ============================================
   MODAL ANIMATIONS - Custom
   ============================================ */

/* Slide from top */
.modal-slide-top.fade .modal-dialog {
  transform: translate(0, -100px);
}

.modal-slide-top.show .modal-dialog {
  transform: translate(0, 0);
}

/* Slide from bottom */
.modal-slide-bottom.fade .modal-dialog {
  transform: translate(0, 100px);
}

.modal-slide-bottom.show .modal-dialog {
  transform: translate(0, 0);
}

/* Zoom in */
.modal-zoom.fade .modal-dialog {
  transform: scale(0.7);
}

.modal-zoom.show .modal-dialog {
  transform: scale(1);
}

/* ============================================
   MODAL UTILITIES
   ============================================ */

/* Modal with icon */
.modal-icon {
  display: flex;
  align-items: center;
  gap: var(--spacing-12);
}

.modal-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;    /* 48px convertido a rem */
  height: 3rem;   /* 48px convertido a rem */
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.modal-success .modal-icon-wrapper {
  background-color: var(--success-green-light);
  color: var(--success-green);
}

.modal-error .modal-icon-wrapper,
.modal-danger .modal-icon-wrapper {
  background-color: var(--error-red-light);
  color: var(--error-red);
}

.modal-warning .modal-icon-wrapper {
  background-color: var(--alert-yellow-light);
  color: var(--alert-yellow-dark);
}

.modal-info .modal-icon-wrapper {
  background-color: var(--blue-100);
  color: var(--blue-600);
}

/* Modal loading state */
.modal-loading {
  pointer-events: none;
}

.modal-loading .modal-content {
  position: relative;
  opacity: 0.6;
}

.modal-loading .modal-content::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5rem;   /* 40px convertido a rem */
  height: 2.5rem;  /* 40px convertido a rem */
  margin: -1.25rem 0 0 -1.25rem;
  border: 0.1875rem solid var(--border-primary);  /* 3px convertido a rem */
  border-top-color: var(--bg-accent);
  border-radius: var(--radius-full);
  animation: modal-spinner 0.8s linear infinite;
  z-index: 1060;
}

@keyframes modal-spinner {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================
   MODAL RESPONSIVE
   ============================================ */

@media (max-width: 36rem) {  /* 575.98px convertido aproximadamente */
  .modal-dialog {
    margin: var(--spacing-12);
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--spacing-16) !important;
  }

  .modal-title {
    font-size: var(--font-size-heading-xl) !important;
  }

  .modal-footer {
    flex-direction: column;
    align-items: stretch;
  }

  .modal-footer > * {
    width: 100%;
  }
}

/* ============================================
   MODAL STATIC (No cierra con backdrop click)
   ============================================ */

.modal.modal-static .modal-dialog {
  animation: modalShake 0.3s;
}

@keyframes modalShake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.modal {
  scrollbar-width: thin;
  scrollbar-color: var(--border-primary) transparent;
}

.modal::-webkit-scrollbar {
  width: 0.5rem;  /* 8px convertido a rem */
}

.modal::-webkit-scrollbar-track {
  background: transparent;
}

.modal::-webkit-scrollbar-thumb {
  background-color: var(--border-primary);
  border-radius: var(--radius-full);
}

.modal::-webkit-scrollbar-thumb:hover {
  background-color: var(--border-secondary);
}