/* =========================================================
   POPUP FLUTUANTE (componente genérico) v1.3 — 2026-07-08
   /assets/css/popup-flutuante.css

   Balão de notificação flutuante, centralizado na tela — ícone grande
   à esquerda, texto à direita, fundo colorido por tipo. Nasceu no
   formulário de Contato, mas é genérico de propósito: QUALQUER página
   pública que precisar avisar sucesso/erro pro usuário deve reaproveitar
   este componente (junto com assets/js/popup-flutuante.js) em vez de
   criar um estilo de popup novo — pedido explícito do Luciano:
   "padronizar cores, fontes, comportamento e ícones pra todos os
   popups do site".

   PALETA (2026-07-08, segundo ajuste): a primeira versão usava o azul
   do site (ficou confuso ao lado de outros elementos azuis da tela). A
   segunda versão trocou por um gradiente verde-oliva/âmbar/vermelho em
   3 tipos (sucesso/atenção/erro) — o Luciano não gostou do tom
   "marrom bronze" do âmbar e pediu pra simplificar: **só 2 tipos
   agora, sucesso (verde) e erro (vermelho)** — qualquer aviso que não
   seja sucesso (campo inválido, conexão, servidor) usa vermelho. O
   tipo 'atencao' ainda é aceito no JS por compatibilidade, mas cai no
   mesmo CSS de 'erro' (não existe mais cor âmbar própria).
   Cores em DUAS chapas sólidas (não gradiente): uma pro fundo do
   ícone, outra levemente diferente pro fundo do texto — valores exatos
   pedidos pelo Luciano. NÃO usa var(--color-hover) (#88a33f, o
   verde-oliva "oficial" do site) de propósito — esse tom fica
   reservado pro "tutorial guiado" do Painel Admin (ideia futura, ainda
   a discutir com o Luciano), pra se destacar dos elementos azuis do
   admin sem se confundir com o sucesso do site público.

   TERCEIRO AJUSTE (2026-07-08): balão aumentado (mais presença/urgência
   visual) e ícone do tipo erro escurecido de #c22525 pra #b32e2e.

   SETA TRIANGULAR — REMOVIDA (2026-07-08): chegou a existir uma seta
   apontando pro campo com problema, mas passou por várias rodadas de
   bugs (direção errada, cor percebida errada, alcance curto) e o
   Luciano decidiu cancelar o recurso de vez, pra este projeto e todos
   os futuros — "não deu, deixa pra lá". Removida por completo (HTML,
   CSS, JS). Só o balão flutuante permanece.
========================================================= */

.popup-flutuante-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;

    background: transparent;

    opacity: 0;
    pointer-events: none;
}

.popup-flutuante-backdrop.is-visivel {
    pointer-events: auto;
}

.popup-flutuante {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1000;

    display: flex;
    align-items: stretch;

    /* aumentado (2026-07-08, pedido do Luciano — "deixe mais claro a
       necessidade da urgência") — era min(440px, ...) */
    width: min(500px, calc(100vw - 32px));

    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    /* clipa o fundo sólido de .popup-flutuante-icone/.popup-flutuante-texto
       nos cantos arredondados do balão — sem isso, os dois blocos de cor
       ficariam com cantos retos "vazando" pra fora da borda arredondada. */
    overflow: hidden;

    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%) scale(.94);

    transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.popup-flutuante.is-visivel {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

/* -------------------------
   CORES POR TIPO — só 2 tipos (sucesso/erro), cada um com uma cor sólida
   pro fundo do ícone e outra levemente diferente pro fundo do texto
   (valores exatos pedidos pelo Luciano, 2026-07-08). 'atencao' (campo
   inválido) usa as mesmas cores de 'erro' — não existe mais tom âmbar
   separado, ver comentário no topo do arquivo.
------------------------- */

.popup-flutuante.tipo-sucesso .popup-flutuante-icone {
    background: #2a773b;
}

.popup-flutuante.tipo-sucesso .popup-flutuante-texto {
    background: #10882a;
}

.popup-flutuante.tipo-erro .popup-flutuante-icone,
.popup-flutuante.tipo-atencao .popup-flutuante-icone {
    /* escurecido de #c22525 pra #b32e2e (2026-07-08, pedido do Luciano) */
    background: #b32e2e;
}

.popup-flutuante.tipo-erro .popup-flutuante-texto,
.popup-flutuante.tipo-atencao .popup-flutuante-texto {
    background: #d32323;
}

.popup-flutuante-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 104px;

    color: #fff;
    font-size: 44px;
}

.popup-flutuante-texto {
    flex: 1;
    display: flex;
    align-items: center;

    padding: 24px 44px 24px 22px;

    color: #fff;
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.5;
}

.popup-flutuante-fechar {
    position: absolute;
    top: 10px;
    right: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    background: rgba(255, 255, 255, .16);
    border: none;
    border-radius: 50%;

    color: #fff;
    font-size: 13px;

    cursor: pointer;
    transition: background .2s ease;
}

.popup-flutuante-fechar:hover {
    background: rgba(255, 255, 255, .32);
}

@media(max-width: 420px) {

    .popup-flutuante {
        flex-direction: column;
    }

    .popup-flutuante-icone {
        width: 100%;
        height: 60px;

        border-radius: var(--radius-lg) var(--radius-lg) 0 0;

        font-size: 30px;
    }

    .popup-flutuante-texto {
        padding: 16px 40px 18px 18px;
    }

}