/* css/dialogs.css */
/* Desktop-only UI (em mobile nem aparece porque o JS faz fallback) */

.app-dialog--lock {
  overflow: hidden !important;
}

/* Overlay */
.app-dialog-overlay{
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

/* Modal */
.app-dialog{
  width: 380px;
  max-width: calc(100vw - 64px);
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Header */
.app-dialog__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: transparent;
}

.app-dialog__title{
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink-800);
  margin: 0;
}

.app-dialog__close{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: var(--surface-soft);
  color: var(--ink-700);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  font-size: .9rem;
}
.app-dialog__close:hover{ opacity: .9; }

/* Body (BASE) — consistente para confirm/prompt */
.app-dialog__body{
  padding: 14px 16px;
}

.app-dialog__msg{
  font-size: .9rem;
  color: var(--ink-600);
  line-height: 1.4;
}

/* Footer — botões sempre na MESMA LINHA e à direita */
.app-dialog__footer{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border-soft);
  background: color-mix(in srgb, var(--surface) 80%, #000);
}

/* =========================
   Alert (layout mais “alto”/equilibrado)
   Classe aplicada NO overlay: .app-dialog-overlay.app-dialog--alert
   ========================= */

.app-dialog-overlay.app-dialog--alert .app-dialog{
  width: 380px;
}

.app-dialog-overlay.app-dialog--alert .app-dialog__header{
  background: transparent;
}

.app-dialog-overlay.app-dialog--alert .app-dialog__body{
  padding: 16px 18px;
  min-height: 76px;
  display: flex;
  align-items: center;
}

/* ✅ alinhado com os restantes: footer à direita e na mesma linha */
.app-dialog-overlay.app-dialog--alert .app-dialog__footer{
  justify-content: flex-end;
  border-top: 1px solid var(--border-soft);
}

/* =========================
   Botões (BASE) — mantém o teu estilo
   ========================= */

.app-btn{
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--ink-900);
  white-space: nowrap;
}

/* ✅ Ajuste de altura/tamanho SÓ DENTRO DO DIALOG
   (não afeta botões da app fora dos dialogs) */
.app-dialog .app-btn{
  height: 36px;
  padding: 0 16px;
  font-size: .9rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-btn--secondary{
  background: var(--surface-soft);
}

.app-btn--primary{
  background: var(--primary-500);
  border-color: color-mix(in srgb, var(--primary-500) 70%, white);
  color: #fff;
}

.app-btn--primary:hover,
.app-btn--secondary:hover,
.app-btn:hover{
  opacity: .92;
}

/* Campo do prompt */
.app-field{
  margin-top: 12px;
  display: grid;
  gap: 6px;
}
.app-field__label{
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink-700);
}
.app-input{
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--border-soft);
  background: var(--surface-soft);
  color: var(--ink-900);
  padding: 0 12px;
  outline: none;
  box-shadow: var(--shadow-sm);
}
.app-input:focus{
  border-color: color-mix(in srgb, var(--primary-500) 60%, white);
  box-shadow: var(--shadow-sm), 0 0 0 4px color-mix(in srgb, var(--primary-500) 18%, transparent);
}

/* Preloader */
.app-preloader{
  position: fixed;
  inset: 0;
  z-index: 3500;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.app-preloader__card{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-md);
  min-width: min(420px, calc(100vw - 48px));
}

.app-preloader__spinner{
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--ink-400) 40%, transparent);
  border-top-color: var(--primary-500);
  animation: app-spin 0.9s linear infinite;
}

.app-preloader__text{
  color: var(--ink-700);
  font-weight: 700;
}

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

/* =====================================================
   TONES (Danger / Info / Success / Warning)
   - Mesmo “efeito” e alinhamento, só muda a cor
   ===================================================== */

/* --------- DANGER (erro) --------- */
.app-dialog-overlay.app-dialog--danger .app-dialog{
  border-color: rgba(239, 68, 68, .22);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(239, 68, 68, .10);
}

.app-dialog-overlay.app-dialog--danger .app-dialog__title{
  color: rgba(248, 113, 113, .95);
}

/* barra no topo continua a ser o “acento” */
.app-dialog-overlay.app-dialog--danger .app-dialog__header{
  position: relative;
}
.app-dialog-overlay.app-dialog--danger .app-dialog__header::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(239, 68, 68, .95);
}

/* botão primary em danger */
.app-dialog-overlay.app-dialog--danger .app-dialog .app-btn.app-btn--primary{
  background: rgba(239, 68, 68, 1) !important;
  border-color: rgba(239, 68, 68, 1) !important;
  color: #fff !important;
}

/* --------- INFO / NORMAL --------- */
.app-dialog-overlay.app-dialog--info .app-dialog{
  border-color: rgba(0, 111, 238, .22);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(0, 111, 238, .10);
}

.app-dialog-overlay.app-dialog--info .app-dialog__title{
  color: var(--primary-600);
}

.app-dialog-overlay.app-dialog--info .app-dialog__header{
  position: relative;
}
.app-dialog-overlay.app-dialog--info .app-dialog__header::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--primary-600);
}

/* botão primary em info (azul) */
.app-dialog-overlay.app-dialog--info .app-dialog .app-btn.app-btn--primary{
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #fff;
}

/* --------- SUCCESS --------- */
.app-dialog-overlay.app-dialog--success .app-dialog{
  border-color: rgba(23, 201, 100, .22);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(23, 201, 100, .10);
}

.app-dialog-overlay.app-dialog--success .app-dialog__title{
  color: rgba(23, 201, 100, .95);
}

.app-dialog-overlay.app-dialog--success .app-dialog__header{
  position: relative;
}
.app-dialog-overlay.app-dialog--success .app-dialog__header::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(23, 201, 100, .95);
}

.app-dialog-overlay.app-dialog--success .app-dialog .app-btn.app-btn--primary{
  background: rgba(23, 201, 100, 1) !important;
  border-color: rgba(23, 201, 100, 1) !important;
  color: #fff !important;
}

/* --------- WARNING --------- */
.app-dialog-overlay.app-dialog--warning .app-dialog{
  border-color: rgba(245, 158, 11, .22);
  box-shadow: var(--shadow-md), 0 0 0 1px rgba(245, 158, 11, .10);
}

.app-dialog-overlay.app-dialog--warning .app-dialog__title{
  color: rgba(245, 158, 11, .95);
}

.app-dialog-overlay.app-dialog--warning .app-dialog__header{
  position: relative;
}
.app-dialog-overlay.app-dialog--warning .app-dialog__header::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(245, 158, 11, .95);
}

.app-dialog-overlay.app-dialog--warning .app-dialog .app-btn.app-btn--primary{
  background: rgba(245, 158, 11, 1) !important;
  border-color: rgba(245, 158, 11, 1) !important;
  color: #111 !important;
}