/* Contenedor modal único: ningún formulario puede escapar del viewport. */
.modal-back {
  align-items: center;
  padding: 16px;
  overflow: hidden;
}

.modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow: hidden;
}

.modal.large { width: min(1120px, calc(100vw - 32px)); }
.modal-head, .modal-foot { position: sticky; z-index: 2; background: var(--panel); }
.modal-head { top: 0; }
.modal-foot { bottom: 0; }
.modal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.player-form-sections { display: grid; gap: 18px; }
.player-form-sections fieldset { margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 13px; }
.player-form-sections legend { padding: 0 7px; color: var(--accent-ink); font-size: 11px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.player-photo-field { display: grid; gap: 10px; padding: 14px; border: 2px dashed var(--line-strong); border-radius: 14px; background: var(--panel-tint); outline: none; }
.player-photo-field.dragging, .player-photo-field:focus-visible { border-color: var(--accent); background: var(--accent-soft-bg); }
.player-photo-field > label { color: var(--muted-2); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.player-photo-preview { display: grid; place-items: center; gap: 7px; min-height: 150px; border-radius: 11px; background: var(--panel); }
.player-photo-preview .player-avatar { width: 118px; height: 118px; }
.player-photo-preview > span, .player-photo-field > small { color: var(--muted); font-size: 11px; text-align: center; }
.player-photo-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.upload-status.error { color: var(--danger); }

/* Zona de carga de imagen reutilizable: subir, arrastrar o pegar con Ctrl+V. */
.image-upload-field { display: grid; gap: 10px; padding: 14px; border: 2px dashed var(--line-strong); border-radius: 14px; background: var(--panel-tint); outline: none; }
.image-upload-field.dragging, .image-upload-field:focus-visible { border-color: var(--accent); background: var(--accent-soft-bg); }
.image-upload-preview { display: grid; place-items: center; gap: 7px; min-height: 120px; border-radius: 11px; background: var(--panel); overflow: hidden; }
.image-upload-preview img { display: block; max-width: 100%; max-height: 220px; border-radius: 9px; object-fit: contain; }
.image-upload-empty { color: var(--muted); font-size: 12px; }
.image-upload-actions { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

@media (max-width: 600px) {
  .modal-back { padding: 0; }
  .modal, .modal.large { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .modal-head { padding: 14px 16px; }
  .modal-body { padding: 16px; }
  .modal-foot { padding: 12px 16px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .modal-foot .btn { flex: 1; }
  .player-form-sections fieldset { padding: 12px; }
  .player-photo-actions .btn, .image-upload-actions .btn { flex: 1 1 120px; }
}