/*
 * POST TV — avisos flutuantes no cartão dos convites.
 *
 * O aviso de consentimento (inc/audiencia/consentimento.php) e o convite de
 * plantão (assets/js/push.js) seguem o mesmo cartão das caixas da matéria
 * (newsletter, canal do WhatsApp, POST no Google — .ptv-convite no
 * style.css): raio de 14px, borda fina, realce azul em degradê, ícone
 * laranja, título em negrito e botão de ação laranja em pílula.
 *
 * A família é duplicada aqui (.ptv-cartao), e não reaproveitada do
 * .ptv-convite, de propósito: as caixas da matéria mudam conforme o texto
 * da matéria pede, e os avisos não devem mudar junto sem ninguém ver.
 * Decisões em docs/superpowers/pendencias-plantao-cookies-cartao.md.
 */

/* ---------- cartão ---------- */
.ptv-cartao{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px 16px; align-items:center;
  padding:14px 16px; border-radius:14px; border:1px solid var(--line);
  background:linear-gradient(100deg, color-mix(in srgb, var(--blue) 26%, var(--panel)), var(--panel) 65%);
  color:var(--ink); font-family:var(--sans); font-size:.92rem; line-height:1.4;
}
.ptv-cartao__ic{width:26px; height:26px; color:var(--orange); flex-shrink:0;}
.ptv-cartao__tx{margin:0; min-width:0;}
.ptv-cartao__tx b{display:block; font-size:1rem; font-weight:900; color:var(--ink);}
.ptv-cartao__tx > span{display:block; color:var(--ink-soft); font-size:.85rem;}
.ptv-cartao__acoes{display:flex; gap:8px; flex-wrap:wrap;}
.ptv-cartao__bt{
  appearance:none; cursor:pointer; font-family:inherit; font-size:.85rem; font-weight:900; line-height:1.2;
  padding:10px 16px; border-radius:999px; border:1.5px solid var(--orange);
  background:var(--orange); color:#1A0D04; white-space:nowrap; text-align:center;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.ptv-cartao__bt:hover{background:var(--orange-deep); border-color:var(--orange-deep);}
.ptv-cartao__bt:focus-visible{outline:2px solid var(--ink); outline-offset:2px;}
/* Secundário: contorno, para quando a outra opção é só "depois". */
.ptv-cartao__bt--sec{background:transparent; color:var(--ink-soft); border-color:var(--line);}
.ptv-cartao__bt--sec:hover{background:transparent; color:var(--ink); border-color:var(--ink-soft);}

/* ---------- flutuante ---------- */
/* Os dois ficam colados no rodapé da tela, com sombra para descolar do texto
   que passa por baixo. Entram subindo de leve; sem animação para quem pediu
   menos movimento. */
.ptv-push-convite,
.ptv-aviso{
  position:fixed; bottom:calc(24px + env(safe-area-inset-bottom,0px));
  box-shadow:0 18px 44px -14px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.25);
  animation:ptv-cartao-sobe .28s ease-out;
}
@keyframes ptv-cartao-sobe{from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){
  .ptv-push-convite, .ptv-aviso{animation:none;}
}

/* Plantão: cartão estreito no canto, os botões embaixo do texto. No
   computador não tapa a coluna de leitura inteira, só a lateral. */
.ptv-push-convite{
  right:24px; left:auto; z-index:60; width:min(440px, calc(100vw - 48px));
  grid-template-columns:auto minmax(0,1fr); align-items:start;
}
.ptv-push-convite .ptv-cartao__acoes{grid-column:2;}

/* Consentimento: centralizado e mais largo, texto e decisão na mesma linha.
   z-index alto porque a escolha é obrigatória e não pode ficar por baixo de
   nada; a fila de pedidos (assets/js/pedidos.js) segura os outros enquanto
   ele está na tela. */
.ptv-aviso{
  display:none; left:50%; right:auto; z-index:9999; width:min(820px, calc(100vw - 48px));
  transform:translateX(-50%);
}
.ptv-aviso[data-visivel="1"]{display:grid;}
.ptv-aviso{animation-name:ptv-aviso-sobe;}
@keyframes ptv-aviso-sobe{from{opacity:0; transform:translate(-50%,12px);} to{opacity:1; transform:translateX(-50%);}}
.ptv-aviso__link{color:var(--lime); text-decoration:underline; text-underline-offset:2px;}
.ptv-aviso__link:hover, .ptv-aviso__link:focus{color:var(--orange);}
/* Mesmo peso de decisão (LGPD): "Aceitar" e "Recusar" do mesmo tamanho, os
   dois cheios e com o mesmo negrito. Só a cor muda — recusar não pode
   parecer um link apagado ao lado de um botão. */
.ptv-aviso .ptv-cartao__bt{min-width:7.5rem;}
.ptv-aviso .ptv-cartao__bt--sec{background:var(--ink); color:var(--void); border-color:var(--ink);}
.ptv-aviso .ptv-cartao__bt--sec:hover{background:var(--ink-soft); border-color:var(--ink-soft); color:var(--void);}

/* ---------- tema claro ---------- */
/* Mesmas trocas do .ptv-convite: ícone em laranja escuro (o laranja da marca
   some no fundo claro) e link em azul no lugar do lima. */
[data-theme="light"] .ptv-cartao__ic{color:#B5470C;}
[data-theme="light"] .ptv-aviso__link{color:var(--blue);}
[data-theme="light"] .ptv-aviso__link:hover,
[data-theme="light"] .ptv-aviso__link:focus{color:#B5470C;}
[data-theme="light"] .ptv-push-convite,
[data-theme="light"] .ptv-aviso{box-shadow:0 18px 44px -16px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.08);}

/* ---------- celular ---------- */
/* Abaixo de 700px existe a barra de navegação inferior (.ptv-tabbar): os
   cartões sobem acima dela, ocupam a largura com 12px de folga e os botões
   dividem a linha de baixo. */
@media (max-width:700px){
  .ptv-push-convite,
  .ptv-aviso{left:12px; right:12px; width:auto; bottom:calc(74px + env(safe-area-inset-bottom,0px));
    padding:12px 14px; gap:8px 12px; grid-template-columns:auto minmax(0,1fr); align-items:start;}
  .ptv-aviso{transform:none; animation-name:ptv-cartao-sobe;}
  .ptv-cartao__ic{width:22px; height:22px; margin-top:1px;}
  .ptv-push-convite .ptv-cartao__acoes,
  .ptv-aviso .ptv-cartao__acoes{grid-column:1 / -1; flex-wrap:nowrap;}
  .ptv-push-convite .ptv-cartao__bt,
  .ptv-aviso .ptv-cartao__bt{flex:1 1 0; min-width:0;}
}