@use "tokens" as *;

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $space-4;
}

.modal {
  background: $surface;
  border: 1px solid $border;
  border-radius: $radius-lg;
  box-shadow: $shadow-lg;
  width: 100%;
  // Nunca ocupa toda la pantalla; si el contenido no cabe, hace scroll el body.
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  &--sm { max-width: 380px; }
  &--md { max-width: 560px; }
  &--lg { max-width: 820px; }
  // Formularios con más columnas (el modal de bloque, EditModal): más ancho
  // que el resto, pero sin llegar a ocupar toda la pantalla.
  &--wide { max-width: 940px; }

  &__header {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between; gap: $space-3;
    padding: $space-4 $space-5;
    border-bottom: 1px solid $border;
    background: $surface-2; // cabecera con fondo
    border-radius: $radius-lg $radius-lg 0 0;
  }
  &__title { margin: 0; font-size: $fs-18; }

  // Botón de cerrar: funciona como action-button; en hover se tiñe de rojo.
  &__close {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border: none; background: none; color: $text-2;
    cursor: pointer; border-radius: $radius-sm;
    transition: background-color 0.15s ease, color 0.15s ease;
    &:hover {
      color: $danger;
      background: color-mix(in srgb, #{$danger} 15%, transparent);
    }
  }

  // El cuerpo es la única zona que scrollea (cabecera y pie quedan fijos).
  // Contenedor con nombre (container query, no viewport): los formularios de
  // dentro (SchemaFields/PageBlocks) apilan sus filas de dos columnas según
  // el ANCHO REAL del modal, no el del viewport.
  &__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: $space-5;
    container-type: inline-size;
    container-name: modal-body;
  }

  &__footer {
    flex-shrink: 0;
    display: flex; justify-content: flex-end; gap: $space-3;
    padding: $space-4 $space-5; border-top: 1px solid $border; background: $surface-2;
  }
}

.modal-enter-active, .modal-leave-active { transition: opacity 0.2s ease; }
.modal-enter-from, .modal-leave-to { opacity: 0; }