/* Controle Pleno — janela/modal: fechar padronizado em TODOS os módulos.
   Referência: botão CMV (quadrado cinza-claro com X centralizado).
   Aplica-se no desktop, navegador mobile e assets empacotados no Android.
   Ações de formulário e botões de remoção de linhas não são alterados. */
:root{--cp-close-surface:#eef1f5;--cp-close-surface-hover:#e2e9f1;--cp-close-ink:#53647a}

/* A sobreposição não pode fazer o botão escapar da janela do Avalia Direto. */
#modalRoot .ad-modal{position:relative!important}
#modalRoot .ad-modal-close,
#modalRoot .ad-review-detail-modal .ad-modal-close{
  position:absolute!important;
  top:16px!important;right:18px!important;bottom:auto!important;left:auto!important;
  z-index:25!important;
  float:none!important;margin:0!important;padding:0!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:52px!important;height:52px!important;
  background:transparent!important;
}
#modalRoot .ad-modal-scroll,
#modalRoot .ad-review-detail-modal .ad-modal-scroll{padding-top:72px!important}

/* Um único estilo de controle, mas sem trocar os handlers nativos existentes. */
:is(
  #modalRoot .ad-modal-close button,
  .cp-review-photo-toolbar button.cp-review-photo-close,
  #modal-root .modal-head > button.close-btn,
  .modal.open .modalcard > button.x,
  .modal.open .modalhead > button.x,
  .modal.open .modalhead > button.iconbtn,
  .cp-gastos-photo-toolbar button.cp-gastos-photo-close,
  .cpdx-window > button.cpdx-close,
  #auth button.auth-close
){
  appearance:none!important;
  width:52px!important;height:52px!important;
  min-width:52px!important;min-height:52px!important;
  max-width:52px!important;max-height:52px!important;
  padding:0!important;margin:0!important;
  border:1px solid transparent!important;border-radius:12px!important;
  background:var(--cp-close-surface)!important;color:var(--cp-close-ink)!important;
  box-shadow:none!important;text-shadow:none!important;
  display:inline-flex!important;flex-direction:row!important;
  align-items:center!important;justify-content:center!important;
  flex:0 0 52px!important;
  vertical-align:middle!important;line-height:1!important;
  font:0/1 system-ui,-apple-system,'Segoe UI',sans-serif!important;
  cursor:pointer!important;pointer-events:auto!important;touch-action:manipulation;
  transition:background-color .15s ease,color .15s ease!important;
}
:is(
  #modalRoot .ad-modal-close button,
  .cp-review-photo-toolbar button.cp-review-photo-close,
  #modal-root .modal-head > button.close-btn,
  .modal.open .modalcard > button.x,
  .modal.open .modalhead > button.x,
  .modal.open .modalhead > button.iconbtn,
  .cp-gastos-photo-toolbar button.cp-gastos-photo-close,
  .cpdx-window > button.cpdx-close
)::after{
  content:'×';display:block;font:500 26px/1 Arial,system-ui,sans-serif!important;
  color:var(--cp-close-ink)!important;pointer-events:none!important;
}
:is(
  #modalRoot .ad-modal-close button,
  .cp-review-photo-toolbar button.cp-review-photo-close,
  #modal-root .modal-head > button.close-btn,
  .modal.open .modalcard > button.x,
  .modal.open .modalhead > button.x,
  .modal.open .modalhead > button.iconbtn,
  .cp-gastos-photo-toolbar button.cp-gastos-photo-close,
  .cpdx-window > button.cpdx-close,
  #auth button.auth-close
):hover{background:var(--cp-close-surface-hover)!important;color:#22384f!important}
:is(
  #modalRoot .ad-modal-close button,
  .cp-review-photo-toolbar button.cp-review-photo-close,
  #modal-root .modal-head > button.close-btn,
  .modal.open .modalcard > button.x,
  .modal.open .modalhead > button.x,
  .modal.open .modalhead > button.iconbtn,
  .cp-gastos-photo-toolbar button.cp-gastos-photo-close,
  .cpdx-window > button.cpdx-close,
  #auth button.auth-close
):focus-visible{outline:3px solid #6b9cff!important;outline-offset:3px!important}
/* O X do Gastos usa posicionamento próprio para não ocupar espaço dos formulários. */
.modal.open .modalcard > button.x{position:absolute!important;top:16px!important;right:16px!important;z-index:30!important;float:none!important}
.modal.open .modalhead > button.x,
.modal.open .modalhead > button.iconbtn{position:relative!important;top:auto!important;right:auto!important;z-index:30!important}
/* Evita que título e controles do modal do Gastos entrem debaixo do X absoluto. */
.modal.open .modalcard > button.x + h2,
.modal.open .modalcard > button.x + .modalhead{padding-right:62px!important;min-height:54px!important}
/* Mantém visível a ação no modal de perfil com rolagem própria. */
#profileModal.modal.open .profile-modal > button.x{position:sticky!important;top:12px!important;right:auto!important;float:right!important;z-index:50!important;margin:0 0 -52px 0!important}
/* O botão de confirmação nativo tem fechamento independente de Cancelar/Confirmar. */
.cpdx-window{position:relative!important}
.cpdx-window .cpdx-heading{padding-right:52px!important}
.cpdx-window > button.cpdx-close{position:absolute!important;top:14px!important;right:14px!important;z-index:2!important}
#auth button.auth-close svg{width:21px!important;height:21px!important;display:block!important}
@media (max-width:600px){
  #modalRoot .ad-modal-close{top:12px!important;right:12px!important}
  #modalRoot .ad-modal-scroll,#modalRoot .ad-review-detail-modal .ad-modal-scroll{padding-top:70px!important}
  .modal.open .modalcard > button.x{top:12px!important;right:12px!important}
  .cpdx-window > button.cpdx-close{top:10px!important;right:10px!important}
}