/* D2SCI — Modal: confirmação Sim / Não (SciConfirm.pas)
   =====================================================
   Namespace próprio (`sconf-`) porque este modal quase sempre abre POR CIMA
   de outro: a trava de rolagem é `body.sconf-open`, separada da do modal de
   baixo, então fechar este não destrava a página com o outro ainda aberto. */

/* ---- Body lock ---- */
.sconf-open { overflow: hidden; }

/* ---- Overlay + diálogo ---- */
.sconf-overlay {
  position: fixed;
  inset: 0;
  /* Acima de TODOS os modais do projeto (1000–1100): a ordem no #modal-root
     é a de primeira abertura, não a de agora, então o empilhamento tem de
     vir daqui. */
  z-index: 1400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.sconf-overlay.is-open { display: flex; }

.sconf-dialog {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 440px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: calc(var(--radius, .5rem) * 1.5);
  box-shadow: 0 25px 50px rgba(0, 0, 0, .35);
  overflow: hidden;
}

/* ---- Cabeçalho ----
   A faixa, a altura e o tamanho do título são os de components/modal-head.css,
   que vale para TODO modal do projeto e é carregado depois deste arquivo —
   repetir aquelas propriedades aqui só deixaria este cabeçalho fora do padrão.
   A única diferença é o peso: o global é 800, pesado demais para uma pergunta
   curta. O seletor com duas classes é o que precisa para ganhar do global sem
   mexer nos outros modais. */
.sconf-dialog .ui-modal-title { font-weight: 600; }

/* ---- Corpo ---- */
.sconf-body { padding: 1.25rem 1.25rem .5rem; }
.sconf-texto {
  margin: 0;
  font-size: .98rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.45;
}
.sconf-detalhe {
  margin: .5rem 0 0;
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.45;
}
/* Sem detalhe o <p> fica vazio: some para não deixar um vão no cartão. */
.sconf-detalhe:empty { display: none; }

/* ---- Rodapé ---- */
.sconf-acoes {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: 1rem 1.25rem 1.25rem;
}
.sconf-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .9rem;
  border: 1px solid var(--card-border);
  border-radius: var(--radius, .5rem);
  background: transparent;
  color: var(--text);
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.sconf-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}
.sconf-btn.is-primary {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-contrast, #fff);
}
.sconf-btn.is-primary:hover { filter: brightness(1.06); }
/* Exclusão: o mesmo botão, em vermelho. */
.sconf-btn.is-primary.is-danger {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
}

@media (max-width: 480px) {
  .sconf-acoes { flex-direction: column-reverse; }
  .sconf-btn { justify-content: center; width: 100%; }
}