/*
  Aviso de cookies (componentes/aviso-cookies.php). Não está no Figma: usa
  os tokens do site, no visual dos cards (janela opaca sobre o fundo, borda
  linha, raio 28, sombra).
  Celular: card na largura da tela, a 16px das bordas. A partir de 768px:
  420px no canto inferior direito. Fixo: não empurra o conteúdo.
  Enquanto ele está aberto, o rodapé ganha um respiro embaixo e a rolagem do
  foco desconta a altura dele (--aviso-cookies-altura, medida pelo
  assets/js/consentimento.js), para o fim da página e o elemento focado não
  ficarem por baixo do aviso.
*/

.aviso-cookies {
  position: fixed;
  right: 16px;
  bottom: 16px;
  left: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 20px;
  border-radius: var(--raio-28);
  /* Janela sobre o fundo: opaca, o texto não mistura com a página atrás */
  background: linear-gradient(var(--superficie-janela), var(--superficie-janela)), var(--fundo);
  box-shadow: inset 0 0 0 1px var(--linha), 0 24px 48px rgb(0 0 0 / 0.4);
}

.aviso-cookies[hidden] {
  display: none;
}

.aviso-cookies-texto {
  color: var(--texto);
  font-size: var(--apoio-card);
  line-height: var(--apoio-card-altura);
}

/* Alvo de toque de 44px sem mudar a linha (padding e margem se anulam) */
.aviso-cookies-link {
  display: inline-block;
  margin-block: -12px;
  padding-block: 12px;
  color: var(--texto);
  font-size: var(--apoio-card);
  font-weight: var(--peso-medio);
  line-height: normal;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.aviso-cookies-botoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  margin-top: 4px;
}

.aviso-cookies-botao {
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--raio-999);
  background-color: var(--superficie-sutil);
  box-shadow: inset 0 0 0 1px var(--linha);
  color: var(--texto);
  font-size: var(--navegacao);
  font-weight: var(--peso-medio);
  line-height: normal;
}

@media (hover: hover) and (pointer: fine) {
  .aviso-cookies-botao:hover {
    box-shadow: inset 0 0 0 1px var(--texto-apoio);
  }
}

@media (min-width: 768px) {
  .aviso-cookies {
    right: 24px;
    bottom: 24px;
    left: auto;
    width: 420px;
    padding: 24px;
  }
}

/* Respiro enquanto o aviso está aberto */
.com-aviso-cookies {
  scroll-padding-bottom: calc(var(--aviso-cookies-altura, 0px) + 16px);
}

.com-aviso-cookies .rodape {
  padding-bottom: var(--aviso-cookies-altura, 0px);
}