/*
 * 5.0.5 (lote 56) — Selo flutuante (portal e Painel do Gestor) e selo fixo da TV.
 * Padrão de selo de confiança / widget: position fixed no canto inferior DIREITO (o esquerdo é da «Avalie»;
 * o VLibras fica no meio da lateral direita). Altura máxima 96 px no celular. Nunca na impressão.
 */
.selo-flutuante { position: fixed; right: 14px; bottom: 14px; z-index: 890; display: flex; align-items: stretch; gap: 4px;
  padding: 3px; border-radius: 14px; background: #fff; color: #1d2b22; border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .22); }
.selo-flutuante[hidden], .selo-aba[hidden] { display: none !important; }
.selo-flutuante[data-lado="esquerda"] { right: auto; left: 14px; bottom: 74px; } /* acima da «Avalie» */
.selo-flutuante-link { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 8px 4px 4px; border-radius: 10px; color: inherit; text-decoration: none; }
.selo-flutuante-link:hover .selo-flutuante-texto small { text-decoration: underline; }
.selo-flutuante-link img { display: block; height: 64px; width: auto; flex: 0 0 auto; }
.selo-flutuante-texto { display: flex; flex-direction: column; gap: 2px; max-width: 150px; line-height: 1.2; }
.selo-flutuante-texto strong { font-size: 14px; }
.selo-flutuante-texto small { font-size: 13px; font-weight: 700; color: var(--cor-primaria, #0b5d33); }
.selo-flutuante-botoes { display: flex; flex-direction: column; justify-content: space-between; gap: 0; flex: 0 0 auto; }
/* X bem destacado: 44×44, fundo escuro, contraste AA (branco sobre #1d2b22) */
.selo-flutuante-fechar, .selo-flutuante-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  flex: 0 0 44px; border: 0; border-radius: 10px; cursor: pointer; }
.selo-flutuante-fechar { background: #1d2b22; color: #fff; }
.selo-flutuante-fechar:hover { background: #000; }
.selo-flutuante-btn { background: transparent; color: #1d2b22; }
.selo-flutuante-btn:hover { background: rgba(0, 0, 0, .08); }
.selo-flutuante a:focus-visible, .selo-flutuante button:focus-visible, .selo-aba button:focus-visible { outline: 3px solid var(--cor-destaque, #f0c063); outline-offset: 2px; box-shadow: 0 0 0 5px #1d2b22; }
/* some enquanto a pessoa digita (mesma regra da «Avalie») */
.selo-flutuante.em-foco, .selo-aba.em-foco { display: none !important; }

/* Recolhido: aba pequena na lateral (abaixo do VLibras, que fica no meio da lateral) */
.selo-aba { position: fixed; right: 0; bottom: 120px; z-index: 890; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 2px;
  background: #fff; border: 1px solid rgba(0, 0, 0, .12); border-right: 0; border-radius: 12px 0 0 12px; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.selo-aba[data-lado="esquerda"] { right: auto; left: 0; border-right: 1px solid rgba(0, 0, 0, .12); border-left: 0; border-radius: 0 12px 12px 0; }
.selo-aba-abrir { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 2px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; }
.selo-aba-abrir img { display: block; height: 36px; width: auto; }

/* espaço no fim da página: o selo não cobre o último conteúdo */
body.tem-selo { padding-bottom: 110px; }

@media (max-width: 720px) {
  .selo-flutuante { right: 8px; bottom: 8px; }
  .selo-flutuante[data-lado="esquerda"] { left: 8px; bottom: 60px; }
  /* celular: só a imagem + «Saiba mais» embaixo (cabe ao lado da «Avalie»; altura total 96 px) */
  .selo-flutuante-link { flex-direction: column; justify-content: center; gap: 2px; padding: 2px 4px; }
  .selo-flutuante-link img { height: 60px; }
  .selo-flutuante-texto { max-width: none; align-items: center; }
  .selo-flutuante-texto strong { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* só leitor de tela */
  .selo-flutuante-texto small { font-size: 12px; }
}
@media (display-mode: standalone) {
  .selo-flutuante { bottom: calc(14px + env(safe-area-inset-bottom)); }
}
/* Painel do Gestor: o aviso «Instalar app» também fica embaixo à direita — o selo sobe */
body:has(.gestor-instalar:not([hidden])) .selo-flutuante:not([data-lado="esquerda"]) { bottom: 84px; }
@media print { .selo-flutuante, .selo-aba { display: none !important; } }
@media (forced-colors: active) { .selo-flutuante, .selo-aba { border: 2px solid CanvasText; } }

/* TV: selo fixo e pequeno no cabeçalho, sem link e sem botões */
.selo-tv { display: inline-flex; align-items: center; flex: 0 0 auto; margin-left: 12px; padding: 4px; border-radius: 10px; background: #fff; }
.selo-tv img { display: block; height: 52px; width: auto; }