/*
   ===============================================================================
        MODALS.CSS - Modales e Iframes
   ===============================================================================
*/

.visually-hidden {
  position: absolute;
}

.modal,
.modal-container {
  background: var(--pure-white);
  width: min(900px, 100%);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}

.modal iframe,
.modal-container iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--color-purple-dark);
  font-size: 0.9rem;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-purple-medium);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Modales e Iframes ── */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 1500; }
.modal-backdrop.active { display: flex; }
.modal { background: var(--pure-white); width: min(900px, 100%); border-radius: 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25); overflow: hidden; display: grid; grid-template-rows: auto 1fr; }
.modal-header { padding: 16px 18px; background: var(--color-purple-medium); color: var(--pure-white); display: flex; align-items: center; justify-content: space-between; gap: var(--r-lg); }
.modal-header h2 { font-size: var(--font-size-modal-header-h2); font-weight: 700; }

.close-button { 
  background: transparent; 
  border: none; 
  color: var(--pure-white); 
  font-size: var(--font-size-close-button); 
  /*cursor: pointer; */
  line-height: 1; 
}

.modal-body { background: var(--base-beige); padding: 0; min-height: 540px; }
.modal iframe { width: 100%; height: 100%; border: none; display: block; }

@media (max-width: 820px) {
  .modal { width: min(900px, 100%); margin: 0 8px; }
  .modal-body { min-height: 60vh; }
}
@media (max-width: 420px) {
  .modal-body { min-height: 50vh; }
  .modal iframe { height: 50vh; }
}