/* Diálogo de confirmação — ver js/confirmar.js.
   Escuro como o resto do painel, com o vermelho reservado para o que destrói. */

.confirmar {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--panel-bg);
  color: var(--text);
  padding: 24px;
  width: min(440px, calc(100vw - 32px));
  box-shadow: var(--shadow-lg);
  /* <dialog> modal centraliza sozinho por margin:auto do navegador. O reset
     do projeto zera margens, então a centralização precisa voltar aqui —
     sem isto o diálogo cola no canto superior esquerdo. */
  margin: auto;
}
.confirmar::backdrop { background: rgba(0, 0, 0, .66); }

.confirmar__cabecalho { margin-bottom: 12px; }

/* "Etapa 1 de 2" — a pessoa precisa saber que ainda há uma pergunta pela
   frente, senão a segunda parece um erro do sistema. */
.confirmar__passo {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.confirmar__titulo {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.3;
}

.confirmar__texto {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* O que se perde junto. Fundo próprio para não passar batido como texto. */
.confirmar__perdas {
  margin: 14px 0 4px;
  padding: 12px 16px 12px 30px;
  border-radius: var(--r-md);
  background: var(--elevado);
  border-left: 3px solid var(--accent);
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-muted);
}

.confirmar__rotulo {
  display: block;
  margin: 18px 0 6px;
  font-size: 13px;
  color: var(--text-muted);
}
.confirmar__rotulo strong { color: var(--text); font-family: 'IBM Plex Mono', monospace; }

.confirmar__campo {
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
.confirmar__campo:focus { outline: none; border-color: var(--accent); }

.confirmar__acoes {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.confirmar__btn {
  padding: 9px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--elevado);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: background .18s, border-color .18s, opacity .18s;
}
.confirmar__btn:hover { background: var(--panel-bg-hover); }
.confirmar__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.confirmar__btn--perigo {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.confirmar__btn--perigo:hover { filter: brightness(1.1); }

/* Desabilitado enquanto o nome não confere. Some o cursor de clique junto —
   botão que parece clicável e não responde passa impressão de travamento. */
.confirmar__btn:disabled { opacity: .45; cursor: not-allowed; }
.confirmar__btn:disabled:hover { background: var(--elevado); }

@media (prefers-reduced-motion: reduce) {
  .confirmar__btn { transition: none; }
}