/* Painel de consentimento (LGPD).
   Extraído do Twig para asset próprio: o estilo era emitido inline em toda
   página do site público. Nome com prefixo do produto porque `.cookie-banner`
   casa com listas de incômodos/cookie notices. */
.auati-consent-panel {
    position: relative;
    width: 100%;
    margin: 0;
    background: linear-gradient(135deg, #39258d 0%, #8b5cf6 100%);
    color: #fff;
    padding: 1rem;
    box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.2);
    animation: auatiConsentSlideUp 0.3s ease-out;
}

/* `hidden` precisa vencer o `display` do painel enquanto o script não decidiu. */
.auati-consent-panel[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .auati-consent-panel { animation: none; }
}

@keyframes auatiConsentSlideUp {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.auati-consent-panel__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
}

.auati-consent-panel__text {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    line-height: 1.4;
    flex: 1 1 320px;
    min-width: 0;
}

.auati-consent-panel__text i { flex: 0 0 auto; }

.auati-consent-panel__link {
    color: #F4CC28;
    text-decoration: underline;
}

.auati-consent-panel__link:hover { color: #fff; }

.auati-consent-panel__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

/* As shells standalone (login, cadastro, recuperação de senha, assistente) não
   carregam Bootstrap, e o painel precisa ser legível e clicável nelas. O que
   `.btn`/`.btn-sm` davam fica aqui, escopado ao painel e com os MESMOS valores
   do Bootstrap 4 — onde ele existe, a especificidade maior repete o resultado
   atual em vez de mudar o visual das páginas que já funcionam. */
.auati-consent-panel__actions .btn {
    display: inline-block;
    padding: .25rem .5rem;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .2rem;
    cursor: pointer;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
}

/* Sem Bootstrap não há o box-shadow de foco dele. O contorno explícito garante
   indicação visível de teclado sobre o gradiente roxo nas duas situações. */
.auati-consent-panel__actions .btn:focus-visible {
    outline: 2px solid #F4CC28;
    outline-offset: 2px;
}

/* Utilitários de espaçamento do Bootstrap usados na marcação do painel,
   replicados no mesmo valor para não depender dele. */
.auati-consent-panel .mr-1 { margin-right: .25rem; }
.auati-consent-panel .mr-2 { margin-right: .5rem; }

.auati-consent-panel__actions .btn-outline-light {
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

.auati-consent-panel__actions .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #fff;
}

/* Fundo e borda vêm declarados (e não herdados do `.btn-light` do Bootstrap)
   pelo mesmo motivo: nas shells sem Bootstrap o botão principal ficaria
   transparente sobre o gradiente roxo. O valor é o do próprio Bootstrap. */
.auati-consent-panel__actions .btn-light {
    color: #39258d;
    font-weight: 600;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.auati-consent-panel__actions .btn-light:hover { background-color: #F4CC28; color: #39258d; }

@media (max-width: 767.98px) {
    .auati-consent-panel__content { flex-direction: column; align-items: stretch; }
    /* `flex: 1 1 320px` do estado desktop define a base no eixo principal. Ao
       virar coluna, essa base passa a ser ALTURA: o texto reservava 320px e a
       faixa ocupava ~61% de uma tela de 780px (medido em produção em 390x780),
       empurrando o formulário para fora da área visível. Em coluna o bloco deve
       ter a altura do próprio conteúdo. */
    .auati-consent-panel__text { font-size: 0.85rem; flex: 0 0 auto; }
    .auati-consent-panel__actions { justify-content: stretch; }
    .auati-consent-panel__actions .btn { flex: 1; }
}

@media (max-width: 575.98px) {
    .auati-consent-panel__text { font-size: max(12px, 0.8rem); }
    .auati-consent-panel__actions { flex-direction: column; width: 100%; }
    .auati-consent-panel__actions .btn { width: 100%; }
}

/* Contêiner das faixas inferiores.
   Declarado aqui além do inline de `bo/external_site/layout.twig` porque o
   painel também é renderizado por `bo/main.twig`, que não tem esse bloco. */
.auati-site-bottom-notices {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
}

.auati-site-bottom-notices-verify { order: 1; z-index: 2; }
.auati-site-bottom-notices-consent { order: 2; z-index: 1; }

/* Estado atual em revisão.
   Reabrir as preferências precisa mostrar o que está valendo; sem isso o painel
   volta idêntico ao da primeira visita e "revisar" vira adivinhação.
   O `aria-pressed` é escrito pelo JS e é o que o leitor de tela anuncia. */
.auati-consent-panel__actions .btn[aria-pressed="true"] {
    box-shadow: 0 0 0 2px #F4CC28;
}

/* O painel recebe foco programático ao ser reaberto (tabindex="-1"), então o
   contorno padrão apareceria numa faixa inteira sem que ninguém tenha tabulado
   até ela. Os botões internos mantêm o foco visível normalmente. */
.auati-consent-panel:focus { outline: none; }