/* ═══════════════════════════════
   MODAL
   ═══════════════════════════════ */
.admin-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.admin-modal-overlay.hidden {
  display: none;
}

.admin-modal-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px;
  box-shadow: var(--shadow-lg);
  animation: modalSlideUp .2s ease;
}

.admin-modal-content:has(.sp-container) {
  max-width: 680px;
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.modal-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.2px;
}

.modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-muted);
  transition: all var(--transition);
}

.modal-close:hover {
  background: var(--rose-soft);
  color: var(--rose);
  border-color: transparent;
}

.modal-close svg,
.modal-close .material-icons-outlined {
  width: 16px;
  height: 16px;
  font-size: 16px;
}

/* ── Pie del modal ──
   El reset global de base.css deja los <button> sin fondo ni borde, y el
   bundle del admin nunca definió `.btn-primary` / `.btn-secondary`: los pies
   de una docena de modales (retos de la ciudad, mini apps, bombazo, stickers…)
   salían como texto suelto sobre el fondo. Aquí viven, apoyados en los tokens
   de ds.css para que el modo oscuro salga solo. */
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* `.btn-submit` nace a lo ancho del formulario (forms.css); dentro del pie
   va junto a los demás, a su tamaño. */
.modal-footer .btn-submit {
  width: auto;
}

.btn-primary,
.btn-secondary {
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  padding: 11px 18px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  transition: background var(--transition), border-color var(--transition),
              color var(--transition), box-shadow var(--transition), transform var(--transition);
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 1px 3px var(--primary-shadow);
}

.btn-primary:hover:not(:disabled) {
  background: var(--primary-hover);
  box-shadow: 0 4px 12px -2px var(--primary-shadow);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--surface);
  color: var(--text-secondary);
  border-color: var(--border);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--bg);
  color: var(--text);
  border-color: var(--border-hover);
}

.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled) {
  transform: translateY(0);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--primary-soft), 0 0 0 1px var(--primary);
}

.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

/* ═══════════════════════════════
   TOAST
   ═══════════════════════════════ */
.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-lg);
  animation: toastSlide .25s ease;
}

@keyframes toastSlide {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.toast svg,
.toast .material-icons-outlined {
  font-size: 18px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.toast.success {
  border-left: 3px solid var(--green);
}

.toast.success svg,
.toast.success .material-icons-outlined {
  color: var(--green);
}

.toast.error {
  border-left: 3px solid var(--rose);
}

.toast.error svg,
.toast.error .material-icons-outlined {
  color: var(--rose);
}

/* ═══════════════════════════════
   CONFIRM DIALOG (in-app popup)
   ═══════════════════════════════ */
.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: confirmFadeIn .18s ease;
}

@keyframes confirmFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.confirm-dialog {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 400px;
  padding: 28px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 255, 255, .05);
  animation: confirmSlideUp .22s cubic-bezier(.22, 1, .36, 1);
  text-align: center;
}

@keyframes confirmSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.confirm-icon .material-icons-outlined {
  font-size: 28px;
}

.confirm-icon.confirm-icon-danger {
  background: var(--rose-soft);
  color: var(--rose);
}

.confirm-icon.confirm-icon-warning {
  background: var(--orange-soft);
  color: var(--orange);
}

.confirm-icon.confirm-icon-info {
  background: var(--primary-soft);
  color: var(--primary);
}

.confirm-icon.confirm-icon-star {
  background: var(--orange-soft);
  color: var(--orange);
}

.confirm-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.2px;
}

.confirm-message {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

.confirm-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.confirm-btn {
  padding: 10px 24px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.confirm-btn:active {
  transform: scale(.97);
}

.confirm-btn-cancel {
  background: var(--bg);
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

.confirm-btn-cancel:hover {
  background: var(--border);
  color: var(--text);
}

.confirm-btn-danger {
  background: var(--rose);
  color: #fff;
  box-shadow: 0 2px 8px rgba(239, 68, 68, .3);
}

.confirm-btn-danger:hover {
  background: #dc2626;
  box-shadow: 0 4px 14px rgba(239, 68, 68, .4);
}

.confirm-btn-primary {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px var(--primary-shadow);
}

.confirm-btn-primary:hover {
  background: var(--primary-hover);
  box-shadow: 0 4px 14px var(--primary-shadow);
}

.confirm-btn-warning {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 2px 8px rgba(245, 158, 11, .3);
}

.confirm-btn-warning:hover {
  background: #d97706;
  box-shadow: 0 4px 14px rgba(245, 158, 11, .4);
}

/* ═══════════════════════════════
   SCROLLBAR
   ═══════════════════════════════ */
.sidebar-nav::-webkit-scrollbar,
.admin-modal-content::-webkit-scrollbar {
  width: 4px;
}

.sidebar-nav::-webkit-scrollbar-thumb,
.admin-modal-content::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}

.sidebar-nav::-webkit-scrollbar-track,
.admin-modal-content::-webkit-scrollbar-track {
  background: transparent;
}

/* ═══════════════════════════════
   API DOCS
   ═══════════════════════════════ */
.apidocs-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.token-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 12px;
  cursor: pointer;
  color: var(--text);
  font-weight: 500;
  transition: all var(--transition);
}

.token-badge:hover {
  background: var(--primary-soft);
  border-color: var(--primary);
}

.token-badge code {
  font-family: 'SF Mono', 'Fira Code', Consolas, monospace;
  font-size: 12px;
  color: var(--primary);
  font-weight: 600;
}