/* ==========================================================================
   fix-ana.css — #analytics (criativos + teste A/B) em vidro e luz (26/09)
   Carregado depois de styles.css, fix-base.css e fix-attr.css (que ainda
   carrega as regras antigas de .cre-* / .ab-*). Tudo escopado em #analytics.

   Hierarquia de luz da seção:
     1. o campeão (#1) é o foco: fundo de marca profundo, anel de marca,
        barra acesa e o ÚNICO glow da seção (na barra dele);
     2. a vencedora do A/B ganha a mesma matéria de marca, sem glow;
     3. todo o resto é vidro neutro (anel + molde + véu).
   ========================================================================== */

#analytics {
    /* tokens locais (não existem no fix-base) */
    --ana-fill:      linear-gradient(90deg, #0A3B28, #1C8A63 45%, #2FD693);   /* --brand-grad-lit deitado: a ponta é a parte acesa */
    --ana-fill-ok:   linear-gradient(90deg, rgba(255, 255, 255, .10), rgba(255, 255, 255, .46));
    --ana-fill-neg:  linear-gradient(90deg, #3A1311, #8A3431 55%, var(--neg));
    --ana-gloss:     linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 65%);
    --ana-track: 0 0 #0000;
    --ana-hair:      rgba(255, 255, 255, .06);
    --ana-inner:      rgba(255, 255, 255, .022);
    --ana-inner-grad: linear-gradient(267deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .008));
    --ana-ring-neg:  0 0 0 1px rgba(229, 112, 107, .26);
    --ana-brand-glass: linear-gradient(132deg, rgba(10, 59, 40, .92), rgba(4, 20, 14, .72));
    /* rótulo cinza sobe de #71717A pra passar 4.5:1 sobre o vidro */
    --text-3: #8E8E98;
    overflow-x: clip;
}

/* ---------- luz atrás dos dois cards (é o que o vidro desfoca) ---------- */
#analytics .an-grid { position: relative; isolation: isolate; }
#analytics .an-grid::before {
    content: '';
    position: absolute;
    inset: -70px -60px;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(24% 32% at 28% 42%, rgba(47, 214, 147, .17), rgba(47, 214, 147, 0) 100%),
        radial-gradient(22% 28% at 74% 58%, rgba(47, 214, 147, .09), rgba(47, 214, 147, 0) 100%),
        radial-gradient(30% 16% at 50% 80%, rgba(120, 170, 255, .05), rgba(120, 170, 255, 0) 100%);
    /* cada elipse cabe inteira na caixa: o brilho morre antes da aresta, nunca é cortado */
}

/* ---------- os dois cards: vidro com anel + molde + véu ---------- */
#analytics .frag {
    position: relative;
    background-color: var(--surface);
    background-image: var(--veil), var(--glass-grad);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 0;
    border-radius: var(--r-box);
    box-shadow: var(--ring), var(--mold), var(--drop);
}
/* fio de luz na aresta de cima: nasce e morre em transparente */
#analytics .frag::after {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .22), rgba(255, 255, 255, 0));
}

#analytics .frag-bar {
    padding: 13px 18px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .025), rgba(255, 255, 255, 0));
    border-bottom: 1px solid var(--ana-hair);
}
#analytics .frag-title {
    font-family: var(--display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.02em;
    gap: 7px;
}
#analytics .frag-title b {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: -.005em;
    color: var(--text-3);
}
#analytics .frag-demo {
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-size: 9.5px;
    letter-spacing: .08em;
    color: var(--text-2);
    background: var(--surface-2);
    box-shadow: var(--ring), var(--mold-soft);
}

/* ---------- faixa de números: vidro interno com divisórias finas ---------- */
#analytics .cre-sum {
    gap: 0;
    background-color: var(--ana-inner);
    background-image: var(--ana-inner-grad);
    -webkit-backdrop-filter: var(--glass-blur-2);
    backdrop-filter: var(--glass-blur-2);
    border: 0;
    border-radius: var(--r-card);
    box-shadow: var(--ring), var(--mold-soft);
}
#analytics .cre-sum > span { background: none; padding: 11px 14px; }
#analytics .cre-sum > span + span { border-left: 1px solid var(--ana-hair); }
#analytics .cre-sum small { color: var(--text-3); }
#analytics .cre-sum b { font-size: 15.5px; }
#analytics .cre-sum b.pos { color: var(--brand); }

/* ---------- legenda ---------- */
#analytics .an-legend { align-items: center; }
#analytics .an-legend i { width: 7px; height: 7px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
#analytics .an-legend i.win { background: var(--ana-fill); }
#analytics .an-legend i.ok  { background: var(--ana-fill-ok); }
#analytics .an-legend i.bad { background: var(--ana-fill-neg); }

/* ---------- linhas de criativo: vidro interno ---------- */
#analytics .cre-list { gap: 10px; }
#analytics .cre-list li {
    position: relative;
    padding: 12px 14px 13px;
    border: 0;
    border-radius: var(--r-card);
    background-color: var(--ana-inner);
    background-image: var(--ana-inner-grad);
    -webkit-backdrop-filter: var(--glass-blur-2);
    backdrop-filter: var(--glass-blur-2);
    box-shadow: var(--ring), var(--mold-soft);
}

/* o campeão: matéria de marca, anel de marca, molde cheio */
#analytics .cre-list li.win {
    background-color: transparent;
    background-image:
        radial-gradient(60% 120% at 100% 0%, rgba(47, 214, 147, .14), rgba(47, 214, 147, 0) 70%),
        var(--ana-brand-glass);
    box-shadow: var(--ring-brand), var(--mold), 0 18px 34px -22px rgba(0, 0, 0, .9);
}

/* prejuízo: vidro com viés vermelho, anel vermelho discreto */
#analytics .cre-list li.bad {
    background-image:
        linear-gradient(267deg, rgba(229, 112, 107, .07), rgba(229, 112, 107, .015)),
        linear-gradient(267deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
    box-shadow: var(--ana-ring-neg), var(--mold-soft);
}

#analytics .cre-name { font-family: var(--display); font-size: 13.5px; letter-spacing: -.02em; }
#analytics .cre-name em { font-family: 'Inter', sans-serif; letter-spacing: 0; }
#analytics .cre-list li.win .cre-name em { color: rgba(255, 255, 255, .56); }

/* posição: círculo de vidro */
#analytics .cre-rank {
    width: 20px; height: 20px;
    border: 0;
    border-radius: 50%;
    color: var(--text-2);
    background: var(--surface-2);
    box-shadow: var(--ring), var(--mold-soft);
}
#analytics .cre-list li.win .cre-rank {
    color: #04140E;
    background: linear-gradient(-44deg, #1C8A63, #6FF2BE);
    box-shadow: 0 0 0 1px rgba(111, 242, 190, .35);
}

/* ---------- chips de ROAS: pill com anel ---------- */
#analytics .an-pill {
    padding: 3px 10px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    box-shadow: var(--ring), var(--mold-soft);
    color: var(--text);
}
#analytics .an-pill.win {
    color: var(--brand);
    background: linear-gradient(132deg, rgba(10, 59, 40, .95), rgba(4, 20, 14, .9));
    box-shadow: var(--ring-brand), var(--mold-soft);
}
#analytics .an-pill.bad {
    color: #F2918C;
    background: linear-gradient(132deg, rgba(74, 22, 20, .9), rgba(30, 9, 8, .85));
    box-shadow: var(--ana-ring-neg), var(--mold-soft);
}

/* ---------- barras de ROAS: trilho de vidro + preenchimento em gradiente ---------- */
#analytics .cre-bar,
#analytics .ab-bar i {
    height: 8px;
    border-radius: var(--r-pill);
    overflow: visible;
    background: rgba(0, 0, 0, .32);
    box-shadow: var(--ana-track), 0 0 0 1px rgba(255, 255, 255, .045);
}
#analytics .cre-bar { margin: 11px 0 10px; }
#analytics .cre-bar::after,
#analytics .ab-bar i::after {
    border-radius: var(--r-pill);
    background: var(--ana-gloss), var(--ana-fill-ok);
}
#analytics .cre-bar.win::after,
#analytics .ab-bar.win i::after { background: var(--ana-gloss), var(--ana-fill); }
#analytics .cre-bar.bad::after  { background: var(--ana-gloss), var(--ana-fill-neg); }

/* o ÚNICO glow da seção: a barra do campeão */
#analytics .cre-bar.win::after { box-shadow: var(--glow); }

#analytics .cre-facts i { color: rgba(255, 255, 255, .18); }
#analytics .cre-list li.win .cre-facts { color: rgba(255, 255, 255, .6); }

/* ---------- teste A/B ---------- */
#analytics .an-badge {
    padding: 3px 11px;
    border: 0;
    border-radius: var(--r-pill);
    color: var(--brand);
    background: linear-gradient(132deg, rgba(10, 59, 40, .8), rgba(4, 20, 14, .7));
    box-shadow: var(--ring-brand), var(--mold-soft);
}
#analytics .an-note b {
    padding: 1px 7px;
    border-radius: var(--r-pill);
    background: rgba(60, 230, 160, .12);
    box-shadow: 0 0 0 1px rgba(60, 230, 160, .22);
}

/* tabela: vidro interno com divisórias finas */
#analytics #frag-ab .an-table {
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--r-card);
    overflow: hidden;
    background-color: var(--ana-inner);
    background-image: var(--ana-inner-grad);
    box-shadow: var(--ring), var(--mold-soft);
}
#analytics #frag-ab .an-table th {
    background: rgba(255, 255, 255, .02);
    border-bottom: 1px solid var(--ana-hair);
}
#analytics #frag-ab .an-table td { border-bottom: 1px solid var(--ana-hair); }
#analytics #frag-ab .an-table tbody tr:last-child td { border-bottom: 0; }

/* a linha vencedora: matéria de marca, não verde chapado */
#analytics #frag-ab .an-table tr.win { background: var(--brand-grad-deep); }
#analytics #frag-ab .an-table tr.win td {
    background: none;
    border-top: 1px solid rgba(60, 230, 160, .16);
    color: var(--text);
}
#analytics #frag-ab .an-table tr.win td small { color: rgba(255, 255, 255, .56); }
#analytics #frag-ab .an-table td.pos,
#analytics #frag-ab .an-table tr.win td.pos { color: var(--brand); }

/* card "Vencedora por receita por visita" */
#analytics .ab-win {
    position: relative;
    margin-top: 12px;
    padding: 14px 16px;
    border: 0;
    border-radius: var(--r-card);
    background-image:
        radial-gradient(70% 140% at 100% 0%, rgba(47, 214, 147, .13), rgba(47, 214, 147, 0) 70%),
        var(--ana-brand-glass);
    -webkit-backdrop-filter: var(--glass-blur-2);
    backdrop-filter: var(--glass-blur-2);
    box-shadow: var(--ring-brand), var(--mold), 0 18px 34px -22px rgba(0, 0, 0, .9);
}
#analytics .ab-win small { color: rgba(255, 255, 255, .6); }
#analytics .ab-win-l b { font-family: var(--display); font-size: 14.5px; letter-spacing: -.02em; }
#analytics .ab-win-r b { color: var(--brand); font-size: 20px; }
#analytics .ab-win-r small { color: rgba(255, 255, 255, .68); }

/* barras de conversão */
#analytics .ab-bars { gap: 10px; margin-top: 18px; }
#analytics #frag-ab .an-clarity { margin-top: 16px; }
#analytics .ab-bar.win em { color: var(--brand); }

/* mapeamento V → página: chips pill de vidro */
#analytics .an-clarity-map {
    padding: 5px 11px;
    border: 0;
    border-radius: var(--r-pill);
    background-color: var(--ana-inner);
    background-image: var(--ana-inner-grad);
    -webkit-backdrop-filter: var(--glass-blur-2);
    backdrop-filter: var(--glass-blur-2);
    box-shadow: var(--ring), var(--mold-soft);
}
#analytics .an-clarity-map b { color: var(--text); }

/* ---------- mobile ---------- */
@media (max-width: 620px) {
    #analytics .an-grid::before { inset: -40px 0; }
    #analytics .frag-bar { padding: 12px 14px; }
    #analytics .cre-sum > span + span { border-left: 0; }
    #analytics .cre-sum > span:nth-child(even) { border-left: 1px solid var(--ana-hair); }
    #analytics .cre-sum > span:nth-child(n+3) { border-top: 1px solid var(--ana-hair); }
    #analytics .cre-list li { padding: 11px 12px 12px; }
    /* legenda numa linha só: o ponto do "Prejuízo" não fica órfão do rótulo */
    #analytics .an-legend { gap: 4px 9px; font-size: 10.5px; letter-spacing: -.01em; }
    #analytics .an-legend i { margin-right: 5px; }
    #analytics .ab-win { padding: 13px 14px; }
}