/* Define variáveis CSS reutilizáveis para manter consistência visual em toda a interface pública. */
:root {
    /* Define o azul aeronáutico principal usado nos botões. */
    --azul-aeronautico: #1f4e79;

    /* Define uma variação mais escura do azul para gradiente e profundidade. */
    --azul-aeronautico-escuro: #163a5a;

    /* Prata base do efeito metálico */
    --prata: #b8bfc7;

    /* Prata claro para o pico do brilho */
    --prata-claro: #e3e7eb;

    /* Prata escuro para profundidade */
    --prata-escuro: #8d959e;

    /* Define a cor principal dos textos claros. */
    --texto-principal: #ffffff;

    /* Define a cor secundária dos textos explicativos. */
    --texto-secundario: #d6dbe3;

    /* Define uma borda translúcida suave. */
    --borda-suave: rgba(255, 255, 255, 0.14);

    /* Define o fundo semitransparente escuro do cartão e navbar. */
    --fundo-translucido: rgba(20, 20, 20, 0.82);

    /* Define uma sombra elegante para profundidade visual. */
    --sombra-forte: 0 20px 50px rgba(0, 0, 0, 0.35);

    /* Define a transição padrão para animações suaves. */
    --transition: all 0.3s ease;
}

/* Reseta margens, paddings e o cálculo de caixa de todos os elementos. */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Estiliza o corpo principal da página pública. */
body {
    min-height: 100vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.65)),
        url('/static/images/logo.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #05070a;
    color: var(--texto-principal);
}

/* Estiliza o topo da área pública. */
.topo-publico {
    width: 100%;
    padding: 20px 24px 0;
}

/* Define um container central reutilizável. */
.container-publico {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

/* Estiliza o navbar público com base visual parecida com o navbar interno. */
.navbar-publica {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 20px 5%;
    background: rgba(20, 30, 40, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid var(--borda-suave);
    border-radius: 18px;
    box-shadow: var(--sombra-forte);
}

/* Agrupa logo e botão mobile em uma linha. */
.navbar-header-publica {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: auto;
}

/* Estiliza a marca institucional. */
.marca-publica {
    color: red;
    text-decoration: none;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Estiliza a parte destacada da marca. */
/* Mantém a cor dourada no texto "Interno" */
.marca-publica span {
    color: #c8a000;
}

/* Aplica o brilho pulsante na marca inteira */
.marca-brilho {
    animation: pulsar-prata 2.6s ease-in-out infinite;
    text-shadow:
        0 0 10px rgba(184, 191, 199, 0.48),
        0 0 20px rgba(227, 231, 235, 0.28),
        0 0 30px rgba(184, 191, 199, 0.16);
}

/* Faz a marca oscilar entre mais opaca e mais brilhante */
@keyframes pulsar-prata {
    0% {
        opacity: 1;
        text-shadow:
            0 0 10px rgba(184, 191, 199, 0.48),
            0 0 20px rgba(227, 231, 235, 0.28),
            0 0 30px rgba(184, 191, 199, 0.16);
    }

    50% {
        opacity: 0.58;
        text-shadow:
            0 0 4px rgba(141, 149, 158, 0.18),
            0 0 10px rgba(141, 149, 158, 0.10);
    }

    100% {
        opacity: 1;
        text-shadow:
            0 0 10px rgba(184, 191, 199, 0.48),
            0 0 20px rgba(227, 231, 235, 0.28),
            0 0 30px rgba(184, 191, 199, 0.16);
    }
}


/* Faz o botão permanecer azul e depois começar a pulsar com brilho metálico */
/* Faz o botão ativo sair do prata atual e chegar ao branco brilhante da primeira versão */
/* Faz o botão oscilar entre prata e branco brilhante enquanto estiver em hover */
@keyframes pulsar-botao-selecionado {
    0% {
        background: linear-gradient(135deg, var(--prata-escuro), var(--prata), var(--prata-claro));
        color: #0f1720;
        border-color: rgba(174, 181, 189, 0.72);
        box-shadow:
            0 0 12px rgba(174, 181, 189, 0.28),
            0 0 22px rgba(142, 150, 159, 0.18);
    }

    50% {
        background: linear-gradient(135deg, #d7dce2, #f3f6f9, #ffffff);
        color: #0f1720;
        border-color: rgba(255, 255, 255, 0.92);
        box-shadow:
            0 0 18px rgba(238, 242, 246, 0.48),
            0 0 30px rgba(255, 255, 255, 0.32);
    }

    100% {
        background: linear-gradient(135deg, var(--prata-escuro), var(--prata), var(--prata-claro));
        color: #0f1720;
        border-color: rgba(174, 181, 189, 0.72);
        box-shadow:
            0 0 12px rgba(174, 181, 189, 0.28),
            0 0 22px rgba(142, 150, 159, 0.18);
    }
}

/* Aplica brilho e pulsação metálica somente no hover do botão do navbar */

.nav-button-publico:hover {
    background: linear-gradient(135deg, var(--prata-escuro), var(--prata), var(--prata-claro));
    color: #0f1720;
    border-color: rgba(174, 181, 189, 0.72);
    box-shadow:
        0 0 12px rgba(174, 181, 189, 0.28),
        0 0 22px rgba(142, 150, 159, 0.18);
    animation: pulsar-botao-selecionado 1.4s ease-in-out infinite;
}





/* Aplica brilho e pulsação metálica somente no hover do botão principal */
.welcome-button:hover {
    background: linear-gradient(135deg, var(--prata-escuro), var(--prata), var(--prata-claro));
    color: #0f1720;
    border-color: rgba(174, 181, 189, 0.72);
    box-shadow:
        0 0 12px rgba(174, 181, 189, 0.28),
        0 0 22px rgba(142, 150, 159, 0.18);
    transform: translateY(-1px);
    animation: pulsar-botao-selecionado 1.4s ease-in-out infinite;
}




/* Estiliza o botão do menu hambúrguer. */
.menu-toggle-publico {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: var(--transition);
}

/* Estiliza cada barra do ícone hambúrguer. */
.menu-toggle-publico span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 999px;
    background: var(--texto-principal);
    transition: var(--transition);
}

/* Define hover do botão hambúrguer. */
.menu-toggle-publico:hover {
    border-color: var(--prata);
    box-shadow: 0 0 14px rgba(238, 242, 246, 0.25);
}

/* Define foco visível do botão hambúrguer. */
.menu-toggle-publico:focus-visible {
    outline: 2px solid var(--prata-claro);
    outline-offset: 3px;
}

/* Anima a primeira barra quando o menu está aberto. */
.menu-toggle-publico[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

/* Esconde a barra central quando o menu está aberto. */
.menu-toggle-publico[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

/* Anima a terceira barra quando o menu está aberto. */
.menu-toggle-publico[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* Só o botão selecionado pulsa e ganha destaque metálico */
.nav-button-publico.is-active,
.welcome-button.is-active {
    animation: pulsar-botao-selecionado 2s ease-in-out infinite;
}

/* Estiliza a lista de links do navbar. */
.nav-links-publico {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 14px;
}

/* Remove margens estranhas de itens individuais da lista. */
.nav-links-publico li {
    margin: 0;
}

/* Estiliza os links do navbar como botões no mesmo espírito dimensional do navbar anterior. */
/* Botão do navbar com azul aeronáutico fixo e transição suave */
/* Mantém o botão normal em azul; sem pulsar sozinho */
.nav-button-publico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 16px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    color: var(--texto-principal);
    border: 1px solid rgba(192, 199, 207, 0.35);
    background: linear-gradient(180deg, var(--azul-aeronautico), var(--azul-aeronautico-escuro));
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
    position: relative;
    touch-action: manipulation;
}



/* Cria o efeito de brilho e destaque ao passar o mouse. */
.nav-button-publico:hover {
    background: linear-gradient(135deg, var(--prata-escuro), var(--prata), var(--prata-claro));
    color: #0f1720;
    border-color: rgba(174, 181, 189, 0.72);
    box-shadow:
        0 0 12px rgba(174, 181, 189, 0.28),
        0 0 22px rgba(142, 150, 159, 0.18);
}

/* Cria um estado claro de foco por teclado. */
.nav-button-publico:focus-visible {
    outline: 3px solid rgba(238, 242, 246, 0.72);
    outline-offset: 3px;
}

/* Define a área principal de conteúdo. */
.conteudo-publico {
    min-height: calc(100vh - 98px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* Centraliza a seção principal. */
.welcome-shell {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estiliza o cartão principal da tela, parecido com o da página de login. */
/* Deixa o card mais largo e mais transparente */
.welcome-card {
    width: 100%;
    max-width: 720px;
    background: rgba(20, 20, 20, 0);
    border: 1px solid rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(8px);
    border-radius: 18px;
    padding: 40px 42px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0);
    color: var(--texto-principal);
    text-align: center;
}

/* Estiliza a badge superior. */
.welcome-badge {
    display: inline-block;
    margin-bottom: 14px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(31, 78, 121, 0.18);
    border: 1px solid rgba(192, 199, 207, 0.25);
    color: var(--prata-claro);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Estiliza o título principal do cartão. */
.welcome-card h1 {
    margin-bottom: 10px;
    font-size: 2rem;
    line-height: 1.2;
}

/* Estiliza o subtítulo. */
.welcome-subtitle {
    margin-bottom: 16px;
    color: var(--texto-secundario);
    font-size: 1rem;
}

/* Estiliza o texto descritivo. */
.welcome-description {
    margin-bottom: 24px;
    color: var(--texto-secundario);
    line-height: 1.7;
}

/* Organiza os botões centrais em coluna. */
.welcome-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Estiliza os botões do cartão principal. */
/* Botão principal com azul inicial e brilho automático após 2 segundos */
/* Mantém o botão principal azul; sem pulsar sozinho */
.welcome-button {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
    padding: 14px 18px;
    border-radius: 10px;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(192, 199, 207, 0.35);
    background: linear-gradient(180deg, var(--azul-aeronautico), var(--azul-aeronautico-escuro));
    color: var(--texto-principal);
    font-weight: 700;
    transition:
        background 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
    box-shadow: 0 8px 22px rgba(10, 25, 40, 0.28);
}



/* Define o hover dos botões do cartão com brilho prateado. */
.welcome-button:hover {
    background: linear-gradient(135deg, var(--prata-escuro), var(--prata), var(--prata-claro));
    color: #0f1720;
    border-color: rgba(174, 181, 189, 0.72);
    box-shadow:
        0 0 12px rgba(174, 181, 189, 0.28),
        0 0 22px rgba(142, 150, 159, 0.18);
    transform: translateY(-1px);
}

/* Define foco visível dos botões do cartão. */
.welcome-button:focus-visible {
    outline: 3px solid rgba(238, 242, 246, 0.72);
    outline-offset: 3px;
}

/* Ajusta o layout para telas até 768px. */
@media (max-width: 768px) {
    /* Faz o navbar empilhar a estrutura verticalmente. */
    .navbar-publica {
        padding: 15px 5%;
        flex-direction: column;
        align-items: stretch;
    }

    /* Faz o cabeçalho ocupar a largura toda. */
    .navbar-header-publica {
        width: 100%;
    }

    /* Exibe o botão hambúrguer no mobile. */
    .menu-toggle-publico {
        display: inline-flex;
    }

    /* Esconde o menu por padrão no mobile. */
    .nav-links-publico {
        display: none;
        margin-top: 15px;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        width: 100%;
        gap: 8px;
        padding: 16px;
        border-radius: 14px;
        background: rgba(13, 23, 33, 0.92);
        box-shadow: var(--sombra-forte);
    }

    /* Exibe o menu quando a classe de estado aberto for aplicada. */
    .nav-links-publico.is-open {
        display: flex;
    }

    /* Faz cada item ocupar a largura inteira. */
    .nav-links-publico li {
        width: 100%;
    }

    /* Faz cada botão ocupar a largura inteira no menu aberto. */
    /* Mantém o botão normal em azul; sem pulsar sozinho */
    .nav-button-publico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 10px 16px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: 600;
        font-size: 16px;
        color: var(--texto-principal);
        border: 1px solid rgba(192, 199, 207, 0.35);
        background: linear-gradient(180deg, var(--azul-aeronautico), var(--azul-aeronautico-escuro));
        transition:
            background 0.3s ease,
            color 0.3s ease,
            border-color 0.3s ease,
            box-shadow 0.3s ease,
            transform 0.3s ease;
        position: relative;
        touch-action: manipulation;
    }


    /* Reduz o padding do cartão em telas menores. */
    /* Mantém boa leitura em telas menores */
    .welcome-card {
        max-width: 100%;
        padding: 28px 24px;
    }

    /* Ajusta o tamanho do título no mobile. */
    .welcome-card h1 {
        font-size: 1.7rem;
    }
}