/* 3D6IA — botão flutuante e painel de conversa das telas da paróquia.
 *
 * O mesmo arquivo do Stella Più Bella (o padrão da 3D6 para o assistente),
 * com o que é desta casa no fim: o botão do tutorial, a lista "Nesta tela" e
 * o lugar do botão flutuante no Caixa.
 *
 * Identidade visual da 3D6, e não a do sistema da paróquia: a 3D6IA é o
 * produto da 3D6 e tem a mesma cara em todos os sistemas. Fonte: documento
 * "3d6 Analytics — Identidade Visual" no Outline (coleção Templates): verde
 * #27a862, grafite #26292e e branco; tipografia Now Alt / ZT Nature, com
 * Montserrat no lugar enquanto a web não tem as fontes da marca.
 *
 * Tudo fica dentro de .ia3d6: as telas do sistema (static/css/3d6.css) não
 * são tocadas, e o painel não herda as cores delas. As cores de estado
 * (erro, aviso, gravando) são as únicas fora da paleta da marca. */

/* Família com nome próprio: o painel não pode depender da fonte de uma tela
 * (o painel do Gestor, por exemplo, não carrega o Bootstrap). */
@font-face {
  font-family: 'Montserrat 3D6IA';
  src: url("fonts/Montserrat-latin-wght.311d352d9323.woff2") format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

.ia3d6 {
  /* ── Marca (os mesmos tokens do stella_ia) ── */
  --ia-verde: #27a862;
  --ia-verde-rgb: 39, 168, 98;
  --ia-verde-escuro: #1e8a4f;
  --ia-verde-mais-escuro: #166b3c;
  --ia-verde-claro: #e6f5ec;
  --ia-verde-palido: #f3faf6;
  --ia-grafite: #26292e;
  --ia-grafite-rgb: 38, 41, 46;
  --ia-grafite-2: #3a3f46;
  --ia-branco: #ffffff;

  /* ── Superfícies e texto ── */
  --ia-fundo: #f4f6f5;
  --ia-borda: #e2e6e4;
  --ia-borda-forte: #cdd3d0;
  --ia-texto: #26292e;
  --ia-texto-suave: #5f6670;
  --ia-texto-apagado: #9aa1a8;

  /* ── Componentes ── */
  --ia-cabecalho: linear-gradient(135deg, var(--ia-grafite) 0%, var(--ia-grafite-2) 100%);
  --ia-foco: 0 0 0 3px rgba(var(--ia-verde-rgb), .22);
  --ia-fonte: 'Montserrat 3D6IA', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* ── Estados (fora da paleta da marca, de propósito) ── */
  --ia-vermelho: #b42318;
  --ia-vermelho-fundo: #fef3f2;
  --ia-ambar: #b54708;
  --ia-ambar-fundo: #fffaeb;
  --ia-gravando: #dc3545;
  --ia-gravando-rgb: 220, 53, 69;

  font-family: var(--ia-fonte);
  -webkit-font-smoothing: antialiased;
}
.ia3d6 button, .ia3d6 textarea { font-family: inherit; }

/* ── Marca: cubo + "3D6IA" (templates/ia3d6/_marca.html) ── */
.ia3d6-cubo { flex-shrink: 0; display: block; }
.ia3d6-nome {
  font-family: var(--ia-fonte);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
}
/* O "3" com a barra de cima em verde, como no logo da 3D6. */
.ia3d6-nome__tres {
  background: linear-gradient(to bottom, var(--ia-verde) 0 30%, currentColor 30% 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ia3d6-nome__ia { color: var(--ia-verde); }

/* ── Botão flutuante ──
 * z-index 1045: acima do conteúdo e da barra (1030), abaixo do fundo dos
 * modais do Bootstrap (1050): um modal aberto na tela fica por cima. */
.ia3d6-botao {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1045;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  padding: 0 20px 0 14px;
  border: 0;
  border-bottom: 3px solid var(--ia-verde);
  border-radius: 24px;
  background: var(--ia-cabecalho);
  color: var(--ia-branco);
  font-size: 1.05rem;
  box-shadow: 0 6px 20px rgba(var(--ia-grafite-rgb), .32);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.ia3d6-botao:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(var(--ia-grafite-rgb), .38); }
.ia3d6-botao:focus-visible { outline: none; box-shadow: var(--ia-foco), 0 6px 20px rgba(var(--ia-grafite-rgb), .32); }
.ia3d6-aberto .ia3d6-botao { display: none; }

/* ── Painel ── */
.ia3d6-painel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1045;
  width: 440px;
  max-width: calc(100vw - 24px);
  height: min(680px, calc(100vh - 96px));
  display: flex;
  flex-direction: column;
  background: var(--ia-branco);
  border: 1px solid var(--ia-borda);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(var(--ia-grafite-rgb), .28);
  overflow: hidden;
}
.ia3d6-painel[hidden] { display: none; }
.ia3d6-ampliado .ia3d6-painel {
  width: min(880px, calc(100vw - 40px));
  height: calc(100vh - 96px);
}

/* Cabeçalho grafite com o filete verde embaixo (o .ia-cabecalho do stella_ia). */
.ia3d6-cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 11px 16px;
  background: var(--ia-cabecalho);
  border-bottom: 3px solid var(--ia-verde);
  color: var(--ia-branco);
  flex-shrink: 0;
}
.ia3d6-cabecalho-texto { flex: 1; min-width: 0; }
.ia3d6-cabecalho h2.ia3d6-marca {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 1.3rem;
  color: var(--ia-branco);
}
.ia3d6-cabecalho p {
  margin: 4px 0 0 39px;
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .72);
}
.ia3d6-acoes { display: flex; gap: 2px; align-self: flex-start; }
.ia3d6-acoes button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  font-size: .95rem;
  cursor: pointer;
}
.ia3d6-acoes button:hover { background: rgba(255, 255, 255, .12); color: var(--ia-branco); }
.ia3d6-acoes button:focus-visible { outline: none; box-shadow: var(--ia-foco); }

/* ── Mensagens ── */
.ia3d6-mensagens {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  background: var(--ia-fundo);
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: .875rem;
  line-height: 1.55;
  color: var(--ia-texto);
}
.ia3d6-boas-vindas p { margin: 0 0 8px; }
.ia3d6-dica { color: var(--ia-texto-suave); font-size: .8rem; }
.ia3d6-sugestoes { display: flex; flex-direction: column; gap: 6px; }
.ia3d6-sugestao {
  text-align: left;
  padding: 8px 12px;
  border: 1px solid var(--ia-borda);
  border-radius: 8px;
  background: var(--ia-branco);
  color: var(--ia-texto);
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.ia3d6-sugestao:hover { border-color: var(--ia-verde); background: var(--ia-verde-palido); color: var(--ia-verde-escuro); }
.ia3d6-sugestao:focus-visible { outline: none; border-color: var(--ia-verde); box-shadow: var(--ia-foco); }

.ia3d6-msg { max-width: 92%; }
/* A bolha de quem pergunta é grafite, como a da professora no stella_ia. */
.ia3d6-msg-usuario {
  align-self: flex-end;
  background: var(--ia-grafite);
  color: var(--ia-branco);
  padding: 8px 12px;
  border-radius: 12px 12px 2px 12px;
  white-space: pre-wrap;
  word-break: break-word;
}
.ia3d6-msg-ia {
  align-self: flex-start;
  width: 100%;
  max-width: 100%;
  background: var(--ia-branco);
  border: 1px solid var(--ia-borda);
  padding: 10px 14px;
  border-radius: 12px 12px 12px 2px;
  word-break: break-word;
}
.ia3d6-texto > :first-child { margin-top: 0; }
.ia3d6-texto > :last-child { margin-bottom: 0; }
.ia3d6-rodape-msg:empty { display: none; }
.ia3d6-msg-ia p { margin: 0 0 8px; }
/* Os títulos da resposta são rótulos discretos, em verde escuro (como no
 * stella_ia): a bolha já é o recorte, não precisa de hierarquia de título. */
.ia3d6-msg-ia h3, .ia3d6-msg-ia h4 {
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  margin: 12px 0 6px;
  color: var(--ia-verde-escuro);
}
.ia3d6-msg-ia strong { font-weight: 700; }
.ia3d6-msg-ia ul, .ia3d6-msg-ia ol { margin: 0 0 8px; padding-left: 20px; }
.ia3d6-msg-ia li { margin-bottom: 3px; }
.ia3d6-msg-ia li::marker { color: var(--ia-verde-escuro); }
.ia3d6-msg-ia code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .8rem;
  background: var(--ia-verde-claro);
  color: var(--ia-texto);
  padding: 1px 5px;
  border-radius: 4px;
}
.ia3d6-msg-ia a { color: var(--ia-verde-escuro); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ia3d6-msg-ia a:hover { color: var(--ia-verde-mais-escuro); }
.ia3d6-msg-ia blockquote {
  margin: 0 0 8px;
  padding: 6px 10px;
  border-left: 3px solid var(--ia-ambar);
  background: var(--ia-ambar-fundo);
  border-radius: 0 6px 6px 0;
}
.ia3d6-tabela { overflow-x: auto; margin: 0 0 8px; }
.ia3d6-msg-ia table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.ia3d6-msg-ia th, .ia3d6-msg-ia td { border: 1px solid var(--ia-borda); padding: 4px 8px; text-align: left; vertical-align: top; }
.ia3d6-msg-ia th { background: var(--ia-verde-palido); font-weight: 600; }

/* Print de tela do catálogo */
.ia3d6-tela { margin: 4px 0 10px; border: 1px solid var(--ia-borda); border-radius: 8px; overflow: hidden; background: var(--ia-branco); }
.ia3d6-tela img { display: block; width: 100%; height: auto; cursor: zoom-in; }
.ia3d6-tela figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: .75rem;
  color: var(--ia-texto-suave);
  border-top: 1px solid var(--ia-borda);
  background: var(--ia-verde-palido);
}
.ia3d6-tela figcaption a { white-space: nowrap; font-weight: 600; }

.ia3d6-consultando {
  align-self: flex-start;
  font-size: .78rem;
  color: var(--ia-texto-suave);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ia3d6-pontos { display: inline-flex; gap: 3px; }
.ia3d6-pontos span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ia-verde);
  animation: ia3d6-pulo 1.1s infinite ease-in-out;
}
.ia3d6-pontos span:nth-child(2) { animation-delay: .15s; }
.ia3d6-pontos span:nth-child(3) { animation-delay: .3s; }
@keyframes ia3d6-pulo { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }

.ia3d6-erro {
  align-self: stretch;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--ia-vermelho-fundo);
  color: var(--ia-vermelho);
  font-size: .82rem;
}
.ia3d6-alerta {
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--ia-ambar-fundo);
  color: var(--ia-ambar);
  font-size: .78rem;
  margin-top: 6px;
}

.ia3d6-avaliar { display: flex; gap: 4px; margin-top: 8px; align-items: center; font-size: .75rem; color: var(--ia-texto-suave); }
.ia3d6-avaliar button {
  border: 1px solid var(--ia-borda);
  background: var(--ia-branco);
  border-radius: 6px;
  padding: 1px 7px;
  color: var(--ia-texto-suave);
  cursor: pointer;
}
.ia3d6-avaliar button:hover { color: var(--ia-verde-escuro); border-color: var(--ia-verde); }
.ia3d6-avaliar button[aria-pressed="true"] { background: var(--ia-verde); border-color: var(--ia-verde); color: var(--ia-branco); }

/* ── Rodapé: microfone, campo e enviar ── */
.ia3d6-rodape {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--ia-borda);
  background: var(--ia-branco);
  flex-shrink: 0;
}
.ia3d6-rodape textarea {
  flex: 1;
  resize: none;
  min-height: 38px;
  max-height: 140px;
  padding: 8px 12px;
  border: 1px solid var(--ia-borda-forte);
  border-radius: 8px;
  font: inherit;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--ia-texto);
  background: var(--ia-branco);
}
.ia3d6-rodape textarea::placeholder { color: var(--ia-texto-apagado); }
.ia3d6-rodape textarea:focus { outline: none; border-color: var(--ia-verde); box-shadow: var(--ia-foco); }
.ia3d6-rodape textarea:disabled { background: var(--ia-fundo); }

.ia3d6-enviar,
.ia3d6-voz {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background .15s, border-color .15s, color .15s;
}
.ia3d6-enviar {
  border: 0;
  background: var(--ia-verde);
  color: var(--ia-branco);
}
.ia3d6-enviar:hover { background: var(--ia-verde-escuro); }
.ia3d6-enviar:disabled { background: var(--ia-texto-apagado); cursor: not-allowed; }
.ia3d6-enviar:focus-visible, .ia3d6-voz:focus-visible { outline: none; box-shadow: var(--ia-foco); }

/* Microfone (static/ia3d6/ditado_voz.js), o mesmo comportamento do stella_ia
 * (static/css/ditado_voz.css): em repouso, contorno; gravando, vermelho
 * pulsante, para não restar dúvida de que o microfone está aberto. */
.ia3d6-voz {
  border: 1px solid var(--ia-borda-forte);
  background: var(--ia-branco);
  color: var(--ia-grafite);
}
.ia3d6-voz:hover { border-color: var(--ia-verde); color: var(--ia-verde-escuro); }
.ia3d6-voz.gravando {
  background: var(--ia-gravando);
  border-color: var(--ia-gravando);
  color: var(--ia-branco);
  animation: ia3d6-gravando 1.4s ease-in-out infinite;
}
.ia3d6-voz:disabled { opacity: .55; cursor: wait; }
@keyframes ia3d6-gravando {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--ia-gravando-rgb), .55); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--ia-gravando-rgb), 0); }
}
/* Ditado atrasado: a transcrição ficou para trás da fala. É só reforço — o
 * aviso de verdade é a linha abaixo do campo, porque a cor do botão já
 * significa "gravando". `outline` e não `box-shadow`: o box-shadow do
 * .gravando está sendo animado, e o reforço sumiria justamente enquanto
 * grava. E nada de animação nova: um aviso piscando é pior que nenhum. */
.ia3d6-voz.atrasado { outline: 2px solid #cc9a06; outline-offset: 1px; }

.ia3d6-voz-aviso {
  margin: 0;
  padding: 0 12px;
  font-size: .75rem;
  line-height: 1.4;
  background: var(--ia-branco);
}
.ia3d6-voz-aviso:empty { display: none; }
.ia3d6-voz-aviso--erro { color: var(--ia-vermelho); padding-bottom: 4px; }
.ia3d6-voz-aviso--atraso { color: var(--ia-ambar); padding-bottom: 4px; }

.ia3d6-aviso {
  margin: 0;
  padding: 0 12px 8px;
  font-size: .68rem;
  color: var(--ia-texto-suave);
  background: var(--ia-branco);
}

/* ── Imagem ampliada ── */
.ia3d6-zoom {
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: rgba(var(--ia-grafite-rgb), .86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.ia3d6-zoom[hidden] { display: none; }
.ia3d6-zoom img { max-width: 100%; max-height: 100%; border-radius: 8px; background: var(--ia-branco); box-shadow: 0 12px 40px rgba(0, 0, 0, .4); }
.ia3d6-zoom button {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: var(--ia-branco);
  font-size: 1.1rem;
  cursor: pointer;
}

@media (max-width: 560px) {
  .ia3d6-painel, .ia3d6-ampliado .ia3d6-painel {
    right: 8px;
    left: 8px;
    bottom: 8px;
    width: auto;
    max-width: none;
    height: calc(100vh - 72px);
  }
  .ia3d6-botao { right: 12px; bottom: 12px; }
  #ia3d6-ampliar { display: none; }
  /* Desta casa (a revisão do celular de 28/10/2026, matriz, domínio 15): o
   * campo com 16 px, senão o iPhone dá zoom ao tocar nele, e os botões do
   * painel com 44 px, o alvo do dedo. */
  .ia3d6-rodape textarea { font-size: 16px; min-height: 44px; }
  .ia3d6-acoes button, .ia3d6-enviar, .ia3d6-voz { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .ia3d6-voz.gravando, .ia3d6-pontos span { animation: none; }
  .ia3d6-botao { transition: none; }
}

/* ── Desta casa: o painel é também a porta da Central de Ajuda ── */

/* O rótulo só para o leitor de tela. Próprio, e não o `.visually-hidden` do
 * Bootstrap: o painel do Gestor não carrega o Bootstrap. */
.ia3d6-invisivel {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.ia3d6-painel:focus { outline: none; }

/* O botão de um tutorial: o tour sobre a tela real (o "Mostrar na tela" da
 * FAQ). Alvo de toque grande, como o resto do Caixa: 48 px de altura. */
.ia3d6-tours { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.ia3d6-tour {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  margin: 2px 0 8px;
  padding: 8px 12px;
  border: 1px solid var(--ia-verde);
  border-radius: 10px;
  background: var(--ia-verde-palido);
  color: var(--ia-texto);
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ia3d6-tours .ia3d6-tour { margin: 0; }
.ia3d6-tour:hover { background: var(--ia-verde-claro); border-color: var(--ia-verde-escuro); }
.ia3d6-tour:focus-visible { outline: none; box-shadow: var(--ia-foco); }
.ia3d6-tour .bi { flex-shrink: 0; font-size: 1.5rem; color: var(--ia-verde); }
.ia3d6-tour small {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ia-verde-escuro);
}
/* Item em revisão pelo carimbo da ajuda: só o Gerente o recebe, para conferir. */
.ia3d6-tour .ia3d6-revisao {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 4px;
  background: var(--ia-ambar-fundo);
  color: var(--ia-ambar);
  font-size: .68rem;
  font-weight: 700;
}
.ia3d6-revisao-aviso {
  margin: 0 0 10px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--ia-ambar-fundo);
  color: var(--ia-ambar);
  font-size: .78rem;
}
.ia3d6-faq { margin: 10px 0 0; font-size: .8rem; }
.ia3d6-faq a { color: var(--ia-verde-escuro); font-weight: 600; }

/* No Caixa, o botão flutuante não pode cobrir o Finalizar nem o total, que
 * moram no canto de baixo à direita (no tablet, o carrinho; no celular, a
 * barra presa ao pé). Ali ele vai para o canto de baixo à esquerda e fica só
 * o cubo, num círculo do tamanho do dedo. */
body.tela-caixa .ia3d6-botao {
  right: auto;
  left: 12px;
  bottom: 12px;
  width: 52px;
  height: 52px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}
body.tela-caixa .ia3d6-botao .ia3d6-nome { display: none; }
/* O painel abre do mesmo lado do botão, e não sobre o carrinho. Só fora do
 * celular: abaixo de 561 px o painel ocupa a largura toda (regra acima). */
@media (min-width: 561px) {
  body.tela-caixa .ia3d6-painel { right: auto; left: 20px; }
}
@media (max-width: 767.98px) {
  /* A barra do total e do Finalizar, presa ao pé (pdv/index.html), tem ~76 px. */
  body.tela-caixa .ia3d6-botao { bottom: 88px; }
}

/* ── O ícone escondido (pedido do responsável, 06/11/2026) ──
 * O botão flutuante cobre um canto da tela e, no celular, atrapalha. Quem o
 * esconde — pelo painel ou pelo item do menu do sistema (ia3d6.js,
 * `data-ia3d6-alternar`) — fica sem ele neste aparelho até pedir de volta. Só o
 * botão some: o painel segue existindo, e a página de Ajuda e os tours o abrem
 * como sempre. */
.ia3d6-escondido .ia3d6-botao { display: none; }

/* O aviso de quando o ícone some: ocupa o lugar do botão por alguns segundos,
 * diz como trazê-lo de volta e oferece o Desfazer. */
.ia3d6-escondido-aviso {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1045;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(380px, calc(100vw - 24px));
  padding: 10px 10px 10px 14px;
  border-bottom: 3px solid var(--ia-verde);
  border-radius: 12px;
  background: var(--ia-cabecalho);
  color: var(--ia-branco);
  font-size: .82rem;
  line-height: 1.35;
  box-shadow: 0 6px 20px rgba(var(--ia-grafite-rgb), .32);
}
.ia3d6-escondido-aviso[hidden] { display: none; }
/* 44 px em toda largura: o tablet do Caixa também é de toque. O foco é um aro branco, porque o
 * verde a 22% do resto do painel quase não se vê sobre o grafite. */
.ia3d6-escondido-aviso button {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.ia3d6-escondido-aviso button:hover { background: rgba(255, 255, 255, .12); }
.ia3d6-escondido-aviso button:focus-visible { outline: 2px solid var(--ia-branco); outline-offset: 2px; box-shadow: none; }
@media (max-width: 560px) {
  .ia3d6-escondido-aviso { right: 12px; bottom: 12px; left: 12px; max-width: none; }
}
/* No Caixa, onde o botão mora (canto de baixo à esquerda, acima do Finalizar no celular). */
body.tela-caixa .ia3d6-escondido-aviso { right: auto; left: 12px; bottom: 12px; }
@media (max-width: 767.98px) {
  body.tela-caixa .ia3d6-escondido-aviso { right: 12px; bottom: 88px; }
}
@media (prefers-reduced-motion: no-preference) {
  .ia3d6-escondido-aviso { animation: ia3d6-aviso-entra .2s ease-out; }
}
@keyframes ia3d6-aviso-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media print {
  .ia3d6 { display: none !important; }
}