/* ════════════════════════════════════════════════════════════
   modal.css — Capa 1: Modal base
   Solo usa variables de primitives.css. Cero hardcoded.
   ════════════════════════════════════════════════════════════ */

.modal-host {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.38);
  pointer-events: auto;
}

.modal-window {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  pointer-events: auto;
  overflow: hidden;
}

.modal-window--auto {
  width: fit-content;
  height: auto;
  min-width: 280px;
  max-width: 90vw;
  max-height: 90vh;
}

.modal-window--auto .modal-content {
  flex: 0 0 auto;
  overflow: visible;
}

.modal-window--max {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  transform: none !important;
  border-radius: 0 !important;
}

.modal-topbar {
  flex-shrink: 0;
  min-height: var(--lyt-band-min-height);
  display: flex;
  align-items: center;
  padding: 0 var(--space-md);
  gap: var(--space-sm);
  background: var(--lyt-left-bg);
  color: var(--lyt-left-color);
  user-select: none;
}

.modal-host .modal-topbar--draggable,
.modal-host .modal-topbar--draggable * {
  cursor: move;
}

.modal-title {
  flex: 1;
  font-size: var(--toolbar-title-size);
  font-weight: var(--toolbar-title-weight);
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-actions { display: flex; gap: var(--space-xs); }

.modal-btn {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: var(--radius-base);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: var(--font-size-base);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base);
  outline: none;
  opacity: .65;
}

.modal-btn:hover  { background: var(--btn-ghost-hover-bg); opacity: 1; }
.modal-btn:focus  { outline: none; }

.modal-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
  outline: none;
}

.modal-resizer {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  cursor: se-resize;
}

.modal-resizer::after {
  content: '';
  position: absolute;
  bottom: 3px;
  right: 3px;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
}