/*
 * Tema Neon do painel logado (03/11 a 30/11, ver ucp/apps/mis/temas.py).
 * O portal publico tem a folha dele em css/temas/portal/neon.css.
 *
 * Os tokens do custom.css ganham um roxo de noite e o destaque vira rosa
 * neon; quase toda tela le desses tokens, entao mudam juntas. Sem enfeite que
 * se mexa: o clima e a cor, um brilho de entardecer no fundo e as palmeiras
 * apagadas no canto de baixo.
 */

html[data-tema="neon"] {
    --neon-rosa-rgb: 255, 61, 154;
    --neon-roxo-rgb: 124, 58, 237;
    --neon-agua-rgb: 34, 211, 197;

    --bns-accent-rgb: var(--neon-rosa-rgb);
    --bns-accent: rgb(var(--neon-rosa-rgb));
    --bns-accent-soft: rgba(var(--neon-rosa-rgb), 0.15);
    --bns-bg: #0b0812;
    --bns-bg-accent: #140a1f;
    --bns-surface: #160f20;
    --bns-surface-hover: #21162e;
    --bns-border: rgba(var(--neon-roxo-rgb), 0.18);
}

html[data-tema="neon"] .main {
    background:
        radial-gradient(1100px 520px at 90% -10%, rgba(var(--neon-rosa-rgb), 0.14), transparent 62%),
        radial-gradient(900px 460px at 0% 100%, rgba(var(--neon-roxo-rgb), 0.12), transparent 60%),
        url("../../img/temas/neon-palmeiras.svg") right -40px bottom -10px / 420px auto no-repeat fixed,
        var(--bns-bg) !important;
}

html[data-tema="neon"] .sidebar-content {
    background-image: linear-gradient(180deg, transparent 55%, rgba(var(--neon-roxo-rgb), 0.14));
}

html[data-tema="neon"] .sidebar-item.active > .sidebar-link::before {
    background: linear-gradient(180deg, rgb(var(--neon-rosa-rgb)), rgb(var(--neon-agua-rgb)));
    box-shadow: 0 0 10px rgba(var(--neon-rosa-rgb), 0.7), 0 0 18px rgba(var(--neon-agua-rgb), 0.4);
}

html[data-tema="neon"] .card {
    box-shadow: var(--bns-shadow-sm), inset 0 1px 0 rgba(var(--neon-rosa-rgb), 0.08);
}

html[data-tema="neon"] .btn-primary {
    background-color: rgb(var(--neon-rosa-rgb));
    border-color: rgb(var(--neon-rosa-rgb));
    box-shadow: 0 6px 18px -8px rgba(var(--neon-rosa-rgb), 0.85), 0 0 0 1px rgba(var(--neon-rosa-rgb), 0.25);
}

html[data-tema="neon"] .btn-primary:hover {
    box-shadow: 0 8px 24px -6px rgba(var(--neon-rosa-rgb), 0.95), 0 0 16px rgba(var(--neon-agua-rgb), 0.35);
}

html[data-tema="neon"] *::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(var(--neon-rosa-rgb), 0.55), rgba(var(--neon-roxo-rgb), 0.55));
}

html[data-tema="neon"] ::selection {
    background: rgba(var(--neon-rosa-rgb), 0.45);
    color: #fff;
}

@media (max-width: 767.98px) {
    html[data-tema="neon"] .main {
        background:
            radial-gradient(600px 320px at 90% -6%, rgba(var(--neon-rosa-rgb), 0.14), transparent 62%),
            var(--bns-bg) !important;
    }
}

html[data-tema="neon"] .cookie-notice__ok {
    background: rgb(var(--neon-rosa-rgb));
}

/* Selo "Neon no BNS" no topo do menu lateral (components/sidebar.html). */
html[data-tema="neon"] .tema-selo {
    align-items: center;
    background: linear-gradient(90deg, rgba(var(--neon-rosa-rgb), 0.16), rgba(var(--neon-agua-rgb), 0.14));
    border: 1px solid rgba(var(--neon-rosa-rgb), 0.35);
    border-radius: 999px;
    color: #ffd1e8;
    display: flex;
    font-size: 0.75rem;
    font-weight: 600;
    gap: 0.45rem;
    list-style: none;
    margin: 0.25rem 1rem 0.75rem;
    padding: 0.4rem 0.75rem;
}

html[data-tema="neon"] .tema-selo__ico {
    background: linear-gradient(180deg, #ffb547, #ff3d9a 55%, #7c3aed);
    border-radius: 50% 50% 4px 4px;
    box-shadow: 0 0 8px rgba(var(--neon-rosa-rgb), 0.8);
    flex: 0 0 auto;
    height: 14px;
    width: 16px;
}

html[data-tema="neon"] .tema-selo__ate {
    color: var(--bns-text-muted);
    font-weight: 500;
    margin-left: auto;
    white-space: nowrap;
}