/* =====================================================
   COOKIE CONSENT (LGPD) — assets/css/cookie-consent.css v1.0
   (2026-07-23)

   Barra fixa no rodapé da tela (não modal central) — de propósito:
   um aviso de cookies não precisa bloquear a navegação com um overlay
   escuro por cima do site inteiro, só precisa ser visível e fácil de
   aceitar. Segue a mesma identidade visual do popup de login
   (staecnon-login-popup-*, ver assets/css/login-popup.css): fundo
   azul-claro de marca (#017198, era verde #88a33f — 2026-09-11), texto branco, cantos arredondados.

   z-index: 9999, igual ao popup de login e à busca — mesma hierarquia
   documentada no CLAUDE.md (busca/popups no topo de tudo). Como os
   dois nunca aparecem ao mesmo tempo na prática (o aviso de cookies
   normalmente já foi aceito antes de alguém abrir login/busca), não
   há necessidade de desempatar entre eles.
   ===================================================== */

.staecnon-cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: none;
    background: #017198; /* era #88a33f (verde) — 2026-09-11, azul-claro da logo nova */
    color: #fff;
    padding: 18px 24px;
    box-shadow: 0 -4px 24px rgba(11, 20, 34, .25);
}

.staecnon-cookie-consent.is-visivel {
    display: block;
    animation: staecnonCookieConsentEntrada .35s ease-out;
}

@keyframes staecnonCookieConsentEntrada {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.staecnon-cookie-consent-conteudo {
    max-width: 1160px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.staecnon-cookie-consent-texto {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    flex: 1 1 420px;
}

.staecnon-cookie-consent-texto a {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
}

.staecnon-cookie-consent-texto a:hover {
    text-decoration: none;
}

.staecnon-cookie-consent-botao {
    flex: 0 0 auto;
    background: #fff;
    color: #016284; /* era #4d5f19 (verde escuro) — 2026-09-11, azul-claro da logo nova */
    border: none;
    border-radius: 8px;
    padding: 11px 28px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
}

.staecnon-cookie-consent-botao:hover {
    background: #E6F8FE; /* era #f0f4e0 (verde claro) — 2026-09-11, azul-claro da logo nova */
}

.staecnon-cookie-consent-botao:active {
    transform: scale(.97);
}

@media (max-width: 640px) {
    .staecnon-cookie-consent-conteudo {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }

    /* 2026-08-03 (bug real, print 30 — Luciano: popup cobrindo 70% da
       tela no celular). Causa: ".staecnon-cookie-consent-texto" tem
       "flex:1 1 420px" — em ".staecnon-cookie-consent-conteudo" com
       flex-direction:ROW (desktop) isso é uma largura mínima (420px),
       normal. Mas aqui dentro, com flex-direction:COLUMN (mobile), o
       eixo principal do flex vira vertical — o MESMO "420px" passa a
       valer como ALTURA mínima do bloco de texto, forçando um parágrafo
       de uma frase a ocupar 420px de altura à toa (esticado por
       "justify-content" nenhum, só o espaço reservado mesmo). Resetar
       pra "flex:none" aqui faz o bloco de texto voltar a ocupar só a
       altura que o próprio texto precisa. */
    .staecnon-cookie-consent-texto {
        flex: none;
    }

    .staecnon-cookie-consent-botao {
        width: 100%;
    }
}

/* 2026-10-14 (pedido do Luciano): aviso mais compacto no celular — texto
   e botão lado a lado em vez de empilhados, fonte e respiros menores
   (antes ocupava ~22% da tela no primeiro acesso). */
@media (max-width: 640px) {
    .staecnon-cookie-consent {
        padding: 12px 14px;
    }

    .staecnon-cookie-consent-conteudo {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 12px;
    }

    .staecnon-cookie-consent-texto {
        flex: 1 1 0;
        min-width: 0;
        font-size: 12px;
        line-height: 1.4;
    }

    .staecnon-cookie-consent-botao {
        width: auto;
        flex: 0 0 auto;
        padding: 9px 16px;
        font-size: 13px;
    }
}