/* =====================================================================
   conseller-polish-v9.css — refinamento do DIÁLOGO GLOBAL
   =====================================================================
   Camada ADITIVA, injetada por último. Não reescreve nenhuma regra das
   folhas anteriores: só sobe a composição de consellerNotice/consellerConfirm,
   que eram uma tira horizontal com ícone de 40px — correta, mas sem peso para
   um "42 etiquetas impressas".

   O que NÃO está aqui, de propósito (medido em 2026-10-13 na tela real):
   contraste 26/26 aprovado, 104 regras de movimento ativas, 11 de :focus-visible,
   15 de :active, 11 de tabular-nums. Mexer nisso seria risco sem evidência.

   Tudo respeita prefers-reduced-motion e as cores por tipo que já existem
   (success verde / error vermelho / info neutro).
   ===================================================================== */

/* ---------- Aviso (consellerNotice): vira cartão centrado ---------- */
.csl-notice-modal{
  grid-template-columns:1fr !important;
  justify-items:center;
  text-align:center;
  padding:30px 28px 26px !important;
  width:min(440px,94vw) !important;
  gap:0 !important;
  border-radius:20px !important;
  box-shadow:0 28px 64px rgba(0,0,0,.46) !important;
}
/* anel de status: 40px -> 60px, com halo na cor do tipo */
.csl-notice-modal .csl-notice-icon{
  width:60px !important;height:60px !important;
  border-radius:50% !important;
  margin:0 0 16px !important;
  box-shadow:0 0 0 8px color-mix(in srgb, currentColor 9%, transparent);
}
.csl-notice-modal .csl-notice-icon .csl-ic{width:27px !important;height:27px !important}
.csl-notice-modal .csl-notice-copy{width:100%}
.csl-notice-modal .csl-notice-copy h3{
  font-size:19px !important;font-weight:700 !important;
  letter-spacing:-.02em !important;margin:0 0 9px !important;
}
.csl-notice-modal .csl-notice-copy pre{
  font-size:14px !important;line-height:1.6 !important;
  color:var(--text-1) !important;text-align:center;
}
/* o × sai do canto e vira alvo confortável */
.csl-notice-modal .csl-notice-x{
  width:34px !important;height:34px !important;min-height:34px !important;
  right:14px !important;top:14px !important;font-size:19px !important;
  border-radius:50% !important;
}
/* a barra de tempo encosta na borda arredondada sem vazar */
.csl-notice-modal .csl-notice-bar{border-radius:0 0 20px 20px;overflow:hidden}

/* ---------- Confirmação (consellerConfirm): mesmo vocabulário ---------- */
.csl-modal:has(.csl-confirm-icon){text-align:center}
.csl-modal .csl-confirm-icon{
  width:60px !important;height:60px !important;
  border-radius:50% !important;
  margin:2px auto 16px !important;
  box-shadow:0 0 0 8px color-mix(in srgb, currentColor 9%, transparent);
}
.csl-modal .csl-confirm-icon svg{width:27px !important;height:27px !important}
.csl-modal:has(.csl-confirm-icon) .csl-modal-head{justify-content:center}
.csl-modal:has(.csl-confirm-icon) .csl-modal-head h3{
  font-size:19px !important;font-weight:700 !important;letter-spacing:-.02em;
}
.csl-modal:has(.csl-confirm-icon) .csl-modal-body{
  font-size:14px !important;line-height:1.6 !important;color:var(--text-1);
}
/* ação destrutiva com peso visual maior que a de escape */
.csl-modal:has(.csl-confirm-icon) .csl-modal-actions{justify-content:center;margin-top:20px}
.csl-modal .csl-modal-actions .btn.danger{font-weight:700}

/* ---------- Números do diálogo em fonte tabular ----------
   Aviso operacional quase sempre traz contagem ("42 etiqueta(s)…").
   Algarismo de largura fixa lê mais rápido e não "dança" ao atualizar. */
.csl-notice-modal .csl-notice-copy pre,
.csl-modal:has(.csl-confirm-icon) .csl-modal-body{font-variant-numeric:tabular-nums}

/* ---------- Entrada: complementa a animação que já existe ----------
   cm-pop (conseller-motion.css) já faz a entrada do cartão. Aqui só o anel
   ganha um pulso curto, para o olho ir ao status antes do texto. */
@keyframes csl-anel-v9{
  from{transform:scale(.72);opacity:0}
  60%{transform:scale(1.06);opacity:1}
  to{transform:scale(1);opacity:1}
}
.csl-notice-overlay.open .csl-notice-icon,
.csl-modal-overlay.open .csl-confirm-icon{
  animation:csl-anel-v9 .34s cubic-bezier(.2,.9,.3,1.25) both;
  animation-delay:.05s;
}
@media (prefers-reduced-motion: reduce){
  .csl-notice-overlay.open .csl-notice-icon,
  .csl-modal-overlay.open .csl-confirm-icon{animation:none}
}

/* ---------- Celular ---------- */
@media (max-width:520px){
  .csl-notice-modal{padding:24px 20px 22px !important;border-radius:18px !important}
  .csl-notice-modal .csl-notice-icon{width:52px !important;height:52px !important}
  .csl-notice-modal .csl-notice-copy h3{font-size:17.5px !important}
}