/* ============================================================
   Hub Scarpazi — identidade visual

   Branco e vermelho, sem preto em superfície nenhuma (o texto usa um
   cinza-ardósia escuro, #26262E). A interface NÃO usa emoji: estado e
   hierarquia são feitos com cor, peso de fonte e barra lateral colorida.

   As cores de série (por canal) ficam em src/Theme.php, não aqui — elas são
   aplicadas inline nos gráficos e nas bolinhas, porque vêm do dado.
   ============================================================ */

:root {
    --branco: #FFFFFF;
    --fundo: #F3F3F6;
    --tinta: #26262E;
    --tinta-2: #6E6E7A;
    --tinta-3: #9A9AA6;
    --linha: #ECECEF;
    --borda: #E7E7EC;
    --vermelho: #E63329;
    --vermelho-escuro: #C4241B;
    --vermelho-lavado: #FEF2F1;
    --positivo: #006300;
    --negativo: #d03b3b;
    --menu: 252px;
    --raio: 18px;
    --raio-p: 12px;

    /* Sombras em DUAS camadas: um contato curto e opaco que assenta o card na
       página, e um halo longo e quase transparente que dá a profundidade. Uma
       sombra só, sempre, é o que faz interface parecer barata — ou some, ou
       vira mancha cinza. */
    --sombra-1: 0 1px 2px rgba(38, 38, 46, .05), 0 1px 3px -1px rgba(38, 38, 46, .04);
    --sombra-2: 0 2px 4px rgba(38, 38, 46, .05), 0 10px 26px -8px rgba(38, 38, 46, .13);
    --sombra-3: 0 3px 6px rgba(38, 38, 46, .06), 0 18px 44px -14px rgba(38, 38, 46, .20);
    /* halo da cor da marca, para o card principal */
    --sombra-marca: 0 2px 5px rgba(196, 36, 27, .10), 0 14px 34px -12px rgba(196, 36, 27, .28);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--fundo);
    color: var(--tinta);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
                 "Helvetica Neue", sans-serif;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ------------------------------------------------ estrutura */
.app { display: flex; min-height: 100vh; }

.menu {
    width: var(--menu);
    flex: 0 0 var(--menu);
    background: var(--branco);
    border-right: 1px solid var(--borda);
    padding: 1.1rem .9rem 1.4rem .9rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.conteudo {
    flex: 1;
    min-width: 0;
    padding: 1.4rem 1.6rem 3rem 1.6rem;
    max-width: 1480px;
}

/* ------------------------------------------------ menu lateral */
.menu-logo { padding: .2rem .4rem 0 .4rem; margin-bottom: 1.3rem; }
.menu-logo img { width: 100%; max-width: 146px; display: block; }

.menu-nav { display: flex; flex-direction: column; gap: 2px; }

/* Item de primeiro nível: ícone + rótulo. O grupo usa a mesma classe no
   <summary>, para os dois terem exatamente a mesma altura e alinhamento. */
.menu-item {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .55rem .7rem;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 550;
    color: var(--tinta-2);
    cursor: pointer;
    user-select: none;
    transition: background .14s ease, color .14s ease;
}
.menu-item > svg { width: 19px; height: 19px; flex: 0 0 auto; color: var(--tinta-3); transition: color .14s ease; }
.menu-item > span { flex: 1; min-width: 0; }
.menu-item:hover { background: var(--fundo); color: var(--tinta); }
.menu-item:hover > svg { color: var(--tinta-2); }
.menu-item.ativo {
    background: var(--vermelho-lavado);
    color: var(--vermelho-escuro);
    font-weight: 650;
}
.menu-item.ativo > svg { color: var(--vermelho); }

/* ---- grupos (details/summary: abre e fecha sem JS) */
.menu-grupo > summary { list-style: none; }
.menu-grupo > summary::-webkit-details-marker { display: none; }
.menu-grupo > summary:focus-visible, .menu-filho:focus-visible, .menu-item:focus-visible {
    outline: 2px solid var(--vermelho); outline-offset: -2px;
}
.menu-item > .menu-seta {
    width: 14px; height: 14px; color: var(--tinta-3);
    transition: transform .18s ease;
}
.menu-grupo[open] > summary .menu-seta { transform: rotate(90deg); }
/* o grupo que contém a tela aberta fica marcado mesmo recolhido */
.menu-grupo.contem-ativo > summary { color: var(--tinta); }
.menu-grupo.contem-ativo > summary > svg:first-child { color: var(--vermelho); }

/* Subitens: um fio vertical liga os filhos ao ícone do grupo; o ativo acende
   o trecho do fio dele em vermelho. */
.menu-filhos {
    display: flex; flex-direction: column; gap: 1px;
    margin: 2px 0 6px 1.29rem;
    padding-left: .55rem;
    border-left: 1px solid var(--borda);
}
.menu-filho {
    position: relative;
    display: block;
    padding: .42rem .65rem;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 500;
    color: var(--tinta-2);
    transition: background .14s ease, color .14s ease;
}
.menu-filho:hover { background: var(--fundo); color: var(--tinta); }
.menu-filho.ativo {
    background: var(--vermelho-lavado);
    color: var(--vermelho-escuro);
    font-weight: 650;
}
.menu-filho.ativo::before {
    content: ""; position: absolute; left: calc(-.55rem - 1px); top: 6px; bottom: 6px;
    width: 2px; border-radius: 2px; background: var(--vermelho);
}

@media (prefers-reduced-motion: reduce) {
    .menu-item > .menu-seta { transition: none; }
}

.menu hr {
    border: none; border-top: 1px solid var(--linha); margin: 1rem 0 .9rem 0;
}

.menu-rotulo {
    font-size: .68rem; color: var(--tinta-3); text-transform: uppercase;
    letter-spacing: .06em; font-weight: 600;
}
.menu-valor {
    font-size: .92rem; font-weight: 650; color: var(--tinta); margin-bottom: .6rem;
}
.menu-dica { font-size: .72rem; color: var(--tinta-3); margin-top: .45rem; line-height: 1.45; }

.integra {
    display: flex; align-items: center; gap: .5rem;
    font-size: .8rem; padding: .28rem 0; color: var(--tinta-2);
}
.ponto-ok, .ponto-erro, .ponto-off {
    width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto;
}
.ponto-ok { background: var(--positivo); }
.ponto-erro { background: var(--negativo); }
.ponto-off { background: var(--tinta-3); }

.menu-aviso {
    background: var(--vermelho-lavado); border-left: 3px solid var(--vermelho);
    border-radius: 8px; padding: .6rem .7rem; margin-top: .8rem;
    font-size: .72rem; line-height: 1.5; color: var(--tinta-2);
}
.menu-aviso b { color: var(--vermelho-escuro); }
.menu-aviso code {
    background: var(--fundo); border-radius: 4px; padding: 0 .25rem;
    font-size: .7rem; color: var(--tinta);
}

/* ------------------------------------------------ botões */
.botao-primario, .botao-largo {
    display: block; width: 100%; text-align: center;
    background: var(--vermelho); color: var(--branco); border: none;
    border-radius: 10px; font-weight: 600; font-size: .86rem;
    padding: .55rem .8rem; cursor: pointer; font-family: inherit;
    transition: background .14s ease;
}
.botao-primario:hover, .botao-largo:hover { background: var(--vermelho-escuro); }

.botao-secundario {
    display: block; width: 100%; text-align: center;
    background: var(--branco); color: var(--tinta-2);
    border: 1px solid var(--borda); border-radius: 10px;
    font-weight: 550; font-size: .84rem; padding: .5rem .8rem;
    cursor: pointer; font-family: inherit; margin-top: .5rem;
}
.botao-secundario:hover { border-color: var(--vermelho); color: var(--vermelho-escuro); }

/* ------------------------------------------------ cabeçalho da página */
.cabecalho {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; margin-bottom: 1rem;
}
.cabecalho-direita { text-align: right; }
.pagina-titulo {
    font-size: 1.75rem; font-weight: 700; letter-spacing: -.025em;
    color: var(--tinta); margin: 0; line-height: 1.15;
}
.pagina-sub { font-size: .9rem; color: var(--tinta-2); margin-top: .25rem; }

.aovivo {
    display: inline-flex; align-items: center; gap: .45rem;
    background: var(--vermelho-lavado); color: var(--vermelho-escuro);
    border-radius: 999px; padding: .3rem .75rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .04em;
}
.aovivo .ponto {
    width: 7px; height: 7px; border-radius: 50%; background: var(--vermelho);
    animation: pulsa 1.8s ease-in-out infinite;
}
@keyframes pulsa {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .3; transform: scale(.72); }
}
/* quem pediu menos animação não deve ver um ponto pulsando sem parar */
@media (prefers-reduced-motion: reduce) {
    .aovivo .ponto { animation: none; }
}

/* ------------------------------------------------ cards de KPI */
.grade-kpi {
    display: grid;
    grid-template-columns: repeat(var(--colunas, 4), minmax(0, 1fr));
    gap: .7rem;
    margin-bottom: .8rem;
}
@media (max-width: 1200px) { .grade-kpi { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .grade-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.kpi {
    background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 1.05rem 1.15rem .8rem 1.15rem;
    display: flex; flex-direction: column;
    box-shadow: 0 1px 2px rgba(38, 38, 46, .04);
    transition: box-shadow .16s ease, transform .16s ease;
}
.kpi:hover { box-shadow: 0 6px 20px rgba(38, 38, 46, .09); transform: translateY(-1px); }
.kpi-destaque { border-color: var(--vermelho); box-shadow: 0 2px 10px rgba(230, 51, 41, .12); }
.kpi-label {
    font-size: .72rem; font-weight: 650; letter-spacing: .06em;
    text-transform: uppercase; color: var(--tinta-3);
}
.kpi-valor {
    font-size: 1.95rem; font-weight: 700; color: var(--tinta);
    line-height: 1.12; letter-spacing: -.03em; margin-top: .3rem;
    white-space: nowrap;
}
.kpi-valor-longo { font-size: 1.5rem; }
/* seis cards dividem a largura: no tamanho cheio "R$ 119,59" e "R$ 77,8 mil"
   passam da borda e o nowrap os corta com reticências */
@media (min-width: 1201px) {
    .grade-kpi[style*="--colunas:6"] .kpi-valor { font-size: 1.6rem; }
    .grade-kpi[style*="--colunas:6"] .kpi-valor-longo { font-size: 1.3rem; }
}
.kpi-rodape { font-size: .78rem; margin-top: .3rem; }
.kpi-faisca { margin-top: .55rem; }

.d-pos { color: var(--positivo); font-weight: 700; }
.d-neg { color: var(--negativo); font-weight: 700; }
.d-neutro { color: var(--tinta-3); font-weight: 600; }
.d-ref { color: var(--tinta-3); }

.legenda-caption {
    color: var(--tinta-3); font-size: .78rem; line-height: 1.5;
    margin: -.2rem 0 1rem 0;
}

/* ------------------------------------------------ painéis */
.painel {
    background: var(--branco); border: 1px solid var(--borda);
    border-radius: var(--raio); padding: 1.05rem 1.25rem;
    margin-bottom: .7rem;
    box-shadow: 0 1px 2px rgba(38, 38, 46, .04);
}
.painel-titulo {
    font-size: .95rem; font-weight: 700; color: var(--tinta);
    margin-bottom: .15rem; letter-spacing: -.01em;
}
.painel-sub { font-size: .78rem; color: var(--tinta-3); margin-bottom: .5rem; }
.vazio { text-align: center; padding: 1.6rem 1rem; font-size: .9rem; color: var(--tinta-2); }

/* colunas lado a lado */
.colunas { display: grid; gap: .7rem; margin-bottom: .7rem; }
.col-2-1 { grid-template-columns: 2fr 1fr; }
.col-185-1 { grid-template-columns: 1.85fr 1fr; }
.col-21-1 { grid-template-columns: 2.1fr 1fr; }
.col-1-1 { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) {
    .colunas { grid-template-columns: 1fr !important; }
}
.colunas > * { min-width: 0; }

/* Painéis lado a lado terminam na mesma linha: todos esticam até a altura da
   fileira, para as bordas de baixo casarem. Quem tem gráfico elástico dentro
   ainda vira coluna flex, e aí o gráfico cresce junto em vez de deixar um vão
   branco — é a diferença entre esticar o card e esticar o conteúdo.
   Navegador sem `:has()` só perde o segundo efeito. */
.colunas > * > .painel:only-child { height: 100%; }
.colunas > * > .painel:only-child:has(.grafico-elastico) {
    display: flex;
    flex-direction: column;
}
.grafico-elastico { flex: 1 1 auto; }

/* ------------------------------------------------ lista de canais */
.linha {
    display: flex; align-items: center; gap: .65rem;
    padding: .6rem 0; border-bottom: 1px solid var(--linha);
}
.linha:last-child { border-bottom: none; }
.bolinha { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.linha-nome { font-size: .88rem; color: var(--tinta); font-weight: 500; flex: 1; min-width: 0; }
.linha-aux { font-size: .76rem; color: var(--tinta-3); white-space: nowrap; }
.linha-valor {
    font-size: .9rem; color: var(--tinta); font-weight: 700;
    min-width: 84px; text-align: right;
}
/* barra de proporção embaixo do nome do canal */
.trilho {
    display: block; height: 4px; background: var(--linha); border-radius: 99px;
    margin-top: .3rem; overflow: hidden;
}
.trilho span { display: block; height: 100%; border-radius: 99px; }

/* ------------------------------------------------ avisos */
.aviso {
    background: var(--branco); border: 1px solid var(--borda); border-radius: 14px;
    padding: .85rem 1.1rem; margin-bottom: .9rem;
    font-size: .84rem; line-height: 1.6; color: var(--tinta-2);
}
.aviso code {
    background: var(--fundo); border: 1px solid var(--linha); border-radius: 5px;
    padding: .05rem .3rem; font-size: .8rem; color: var(--tinta);
    word-break: break-all;
}
.aviso b { color: var(--tinta); }
.aviso-ok { border-left: 3px solid var(--positivo); }
.aviso-alerta { border-left: 3px solid var(--negativo); }

/* legenda das classes ABC */
.legenda-classes { display: flex; gap: .9rem; flex-wrap: wrap; margin: 0 0 .4rem 0; }
.tag-classe {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .74rem; color: var(--tinta-3); font-weight: 550;
}
.tag-cor { width: 10px; height: 10px; border-radius: 3px; }

/* ------------------------------------------------ produtos: cards de linha
   `--cor-linha` vem inline do PHP (Catalogo::CORES). A cor da linha só pinta
   MARCA — quadradinho, barra, trilho; número e texto ficam na tinta, porque
   aqua/amarelo/magenta não têm contraste para virar texto sobre o branco. */
.lp-grade {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr));
    gap: .7rem; margin-bottom: 1.1rem;
}
.lp-card {
    display: flex; flex-direction: column; gap: .7rem;
    background: var(--branco); border: 1px solid transparent; border-radius: var(--raio);
    box-shadow: var(--sombra-1); padding: 1rem 1.1rem 1.05rem 1.1rem;
    transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.lp-card:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); }
.lp-card:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.lp-card.ativo { border-color: var(--cor-linha); box-shadow: var(--sombra-2); }

.lp-topo { display: flex; align-items: center; gap: .75rem; }
.lp-foto {
    width: 50px; height: 50px; flex: 0 0 auto; border-radius: 12px;
    object-fit: cover; background: var(--fundo); border: 1px solid var(--linha);
}
.lp-foto-vazia { display: block; }
.lp-titulo { flex: 1; min-width: 0; }
.lp-nome {
    display: flex; align-items: center; gap: .4rem;
    font-size: .98rem; font-weight: 700; letter-spacing: -.01em; color: var(--tinta);
}
.lp-marca {
    display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto;
    background: var(--cor-linha);
}
.lp-desc {
    font-size: .74rem; color: var(--tinta-3); margin-top: .1rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-share {
    font-size: .8rem; font-weight: 700; color: var(--tinta-2);
    background: var(--fundo); border-radius: 99px; padding: .18rem .5rem;
    font-variant-numeric: tabular-nums;
}

.lp-numeros { display: flex; align-items: flex-end; justify-content: space-between; gap: .6rem; }
.lp-unidades {
    font-size: 1.75rem; font-weight: 750; letter-spacing: -.03em; line-height: 1;
    color: var(--tinta); font-variant-numeric: tabular-nums;
}
.lp-un-rotulo { font-size: .74rem; color: var(--tinta-3); margin-left: .35rem; }
.lp-direita { text-align: right; font-size: .76rem; line-height: 1.45; }
.lp-receita { font-size: .9rem; font-weight: 650; color: var(--tinta); }

.lp-barra { height: 6px; background: var(--fundo); border-radius: 99px; overflow: hidden; }
.lp-barra span { display: block; height: 100%; border-radius: 99px; background: var(--cor-linha); }

.lp-modelos { display: flex; flex-direction: column; gap: .32rem; }
.lp-modelo {
    display: grid; grid-template-columns: 3.4rem 1fr 2.6rem 3rem;
    align-items: center; gap: .5rem; font-size: .78rem;
}
.lp-modelo-cod {
    font-weight: 650; color: var(--tinta);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lp-modelo-trilho { height: 5px; background: var(--fundo); border-radius: 99px; overflow: hidden; }
.lp-modelo-trilho span { display: block; height: 100%; border-radius: 99px; opacity: .85; }
.lp-modelo-un { text-align: right; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.lp-var { font-size: .72rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-mais { font-size: .72rem; color: var(--tinta-3); }

/* ---- quem subiu / quem caiu */
.mov-item {
    display: grid; grid-template-columns: 38px 1fr auto auto 3rem;
    align-items: center; gap: .7rem;
    padding: .5rem 0; border-bottom: 1px solid var(--linha);
}
.mov-item:last-child { border-bottom: none; }
.mov-foto {
    width: 38px; height: 38px; border-radius: 9px; object-fit: cover;
    background: var(--fundo); border: 1px solid var(--linha);
}
.mov-nome { min-width: 0; font-size: .86rem; color: var(--tinta); }
.mov-nome b { display: block; font-weight: 700; }
.mov-nome span { display: flex; align-items: center; gap: .3rem; font-size: .72rem; color: var(--tinta-3); }
.mov-de { font-size: .8rem; color: var(--tinta-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mov-de b { color: var(--tinta); font-weight: 650; }
.mov-dif { font-size: .82rem; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------ clientes: mapa RFM
   `--cor-rec` é a recência da coluna (rampa de uma matiz: escuro = recente).
   Ela pinta a faixa do topo e a barra de proporção; o texto fica na tinta. */
.rfm {
    display: grid; grid-template-columns: 6.5rem repeat(5, minmax(0, 1fr));
    gap: .45rem; margin-bottom: 1rem;
}
.rfm-col {
    font-size: .7rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
    color: var(--tinta-3); padding: 0 .2rem .15rem .2rem;
    border-bottom: 3px solid var(--cor-rec); align-self: end;
}
.rfm-lin {
    font-size: .78rem; font-weight: 650; color: var(--tinta-2);
    display: flex; align-items: center;
}
.rfm-cel {
    display: flex; flex-direction: column; gap: .12rem;
    background: var(--branco); border: 1px solid transparent; border-radius: 14px;
    box-shadow: var(--sombra-1); padding: .7rem .8rem .75rem .8rem; min-width: 0;
    transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.rfm-cel:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); }
.rfm-cel:focus-visible { outline: 2px solid var(--vermelho); outline-offset: 2px; }
.rfm-cel.ativo { border-color: var(--vermelho); box-shadow: var(--sombra-2); }
.rfm-cel.vazia { opacity: .55; }
.rfm-nome {
    font-size: .74rem; font-weight: 650; color: var(--tinta-2);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rfm-n {
    font-size: 1.45rem; font-weight: 750; letter-spacing: -.03em; line-height: 1.1;
    color: var(--tinta); font-variant-numeric: tabular-nums;
}
.rfm-pct, .rfm-gasto { font-size: .72rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.rfm-barra { height: 4px; background: var(--fundo); border-radius: 99px; overflow: hidden; margin: .3rem 0 .15rem 0; }
.rfm-barra span { display: block; height: 100%; border-radius: 99px; background: var(--cor-rec); }

.seg-acao {
    background: var(--vermelho-lavado); border-left: 3px solid var(--vermelho);
    border-radius: 10px; padding: .6rem .8rem; margin-bottom: .8rem;
    font-size: .84rem; color: var(--tinta-2); line-height: 1.5;
}
.seg-acao b { color: var(--vermelho-escuro); }

/* ---- porta de entrada */
.ent-cab, .ent-item {
    display: grid; grid-template-columns: minmax(0, 1.2fr) 4.5rem minmax(0, 1.6fr) 5rem;
    align-items: center; gap: .7rem;
}
.ent-cab {
    font-size: .68rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
    color: var(--tinta-3); padding-bottom: .35rem; border-bottom: 1px solid var(--linha);
}
.ent-cab span:nth-child(2), .ent-cab span:nth-child(4) { text-align: right; }
.ent-item { padding: .5rem 0; border-bottom: 1px solid var(--linha); font-size: .84rem; }
.ent-item:last-child { border-bottom: none; }
.ent-nome { display: flex; align-items: center; gap: .45rem; min-width: 0; color: var(--tinta); font-weight: 550; }
.ent-n, .ent-ltv { text-align: right; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.ent-rec { display: flex; align-items: center; gap: .55rem; }
.ent-rec b { font-size: .82rem; min-width: 3rem; text-align: right; font-variant-numeric: tabular-nums; }
.ent-trilho {
    position: relative; flex: 1; height: 7px; background: var(--fundo); border-radius: 99px;
}
.ent-trilho span { display: block; height: 100%; border-radius: 99px; }
/* o traço da média geral: referência para ler "acima ou abaixo" sem conta */
.ent-trilho i {
    position: absolute; top: -3px; bottom: -3px; width: 2px; border-radius: 2px;
    background: var(--tinta); opacity: .55;
}

@media (max-width: 760px) {
    .rfm { grid-template-columns: 4.2rem repeat(5, minmax(96px, 1fr)); overflow-x: auto; }
    .ent-cab, .ent-item { grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1.3fr); }
    .ent-cab span:nth-child(4), .ent-ltv { display: none; }
}

/* ---- tabela de SKUs recolhida */
.lp-detalhe > summary {
    list-style: none; cursor: pointer; display: flex; flex-direction: column; gap: .15rem;
}
.lp-detalhe > summary::-webkit-details-marker { display: none; }
.lp-detalhe > summary .painel-titulo::after { content: "  ›"; color: var(--tinta-3); }
.lp-detalhe[open] > summary .painel-titulo::after { content: "  ⌄"; }
.lp-detalhe[open] > summary { margin-bottom: .6rem; }

@media (max-width: 760px) {
    .lp-grade { grid-template-columns: 1fr; }
    .mov-item { grid-template-columns: 34px 1fr auto; }
    .mov-item .mov-de, .mov-item .lp-var { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .lp-card { transition: none; }
    .lp-card:hover { transform: none; }
}

/* ------------------------------------------------ lista de campanhas */
.camp {
    display: flex; align-items: center; gap: 1rem;
    padding: .85rem 0; border-bottom: 1px solid var(--linha);
}
.camp:last-child { border-bottom: none; }
.camp-marca {
    flex: 0 0 92px; display: flex; align-items: center;
    justify-content: center; height: 30px;
}
/* o logo cabe na caixa inteiro, sem esticar */
.camp-logo {
    max-width: 88px; max-height: 26px; width: auto; height: auto;
    object-fit: contain; font-size: .7rem; color: var(--tinta-3);
}
.camp-corpo { flex: 1; min-width: 0; }
.camp-nome {
    font-size: .93rem; font-weight: 650; color: var(--tinta);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.camp-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.chip {
    display: inline-flex; align-items: baseline; gap: .28rem;
    background: var(--fundo); border: 1px solid var(--linha); border-radius: 7px;
    padding: .15rem .45rem; font-size: .72rem; color: var(--tinta-3);
}
.chip b { color: var(--tinta); font-weight: 650; font-size: .78rem; }
.camp-numeros { flex: 0 0 130px; text-align: right; }
.camp-valor { font-size: 1.02rem; font-weight: 700; color: var(--tinta); letter-spacing: -.02em; }
.camp-roas { font-size: .88rem; font-weight: 650; color: var(--tinta-2); margin-top: .12rem; }

/* ------------------------------------------------ integrações */
.integra-card {
    display: flex; align-items: center; gap: 1rem;
    padding: .95rem 1.2rem; margin-bottom: .6rem;
}
.integra-card .nome { font-weight: 650; color: var(--tinta); font-size: .94rem; }
.integra-card .detalhe { font-size: .79rem; color: var(--tinta-2); margin-top: .15rem; }
.selo {
    border-radius: 999px; padding: .22rem .65rem;
    font-size: .68rem; font-weight: 700; letter-spacing: .03em;
    color: var(--branco); white-space: nowrap;
}

/* ------------------------------------------------ filtros */
.faixa-filtros { padding: .85rem 1.25rem .95rem 1.25rem; }
.filtros-grade { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-end; }
.filtro { flex: 1 1 220px; min-width: 200px; }

.rotulo-filtro {
    font-size: .68rem; font-weight: 650; letter-spacing: .07em;
    text-transform: uppercase; color: var(--tinta-3); margin-bottom: .3rem;
}

/* popover feito com <details>: abre sem JS e fecha com Esc */
.pop { position: relative; }
.pop-botao {
    list-style: none; cursor: pointer;
    background: var(--branco); color: var(--tinta);
    border: 1px solid var(--borda); border-radius: 10px;
    font-weight: 550; font-size: .88rem;
    padding: .5rem .8rem; display: flex; align-items: baseline; gap: .5rem;
    transition: border-color .14s ease;
}
.pop-botao::-webkit-details-marker { display: none; }
.pop-botao:hover { border-color: var(--vermelho); color: var(--vermelho-escuro); }
.pop-resumo { font-size: .78rem; color: var(--tinta-3); margin-left: auto; white-space: nowrap; }
.pop[open] .pop-botao { border-color: var(--vermelho); }

.pop-corpo {
    position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
    background: var(--branco); border: 1px solid var(--borda);
    border-radius: 12px; padding: .8rem .9rem;
    box-shadow: 0 10px 30px rgba(38, 38, 46, .13);
    min-width: 260px;
}
.pop-periodo { display: flex; gap: 1.4rem; min-width: 520px; }
.pop-coluna { flex: 1; min-width: 0; }
@media (max-width: 760px) {
    .pop-periodo { flex-direction: column; min-width: 260px; }
    .pop-corpo { left: auto; right: 0; }
}

.atalho {
    display: block; padding: .35rem .55rem; border-radius: 8px;
    font-size: .86rem; color: var(--tinta-2); font-weight: 500;
}
.atalho:hover { background: var(--vermelho-lavado); color: var(--vermelho-escuro); }
.atalho.ativo { background: var(--vermelho-lavado); color: var(--vermelho-escuro); font-weight: 650; }

.pop-acoes { display: flex; gap: .5rem; }
.pop-acoes a {
    flex: 1; text-align: center; padding: .35rem .5rem; border-radius: 8px;
    font-size: .82rem; color: var(--tinta-2); border: 1px solid var(--borda);
}
.pop-acoes a:hover { border-color: var(--vermelho); color: var(--vermelho-escuro); }
.pop-corpo hr { border: none; border-top: 1px solid var(--linha); margin: .6rem 0; }
.pop-dica { font-size: .74rem; color: var(--tinta-3); margin-top: .5rem; line-height: 1.45; }

.form-selecao { max-height: 320px; overflow-y: auto; }
.opcao {
    display: flex; align-items: center; gap: .5rem;
    padding: .3rem .2rem; font-size: .86rem; color: var(--tinta); cursor: pointer;
}
.opcao input { accent-color: var(--vermelho); }
.form-selecao .botao-primario { margin-top: .6rem; position: sticky; bottom: 0; }

.form-calendario label {
    display: block; font-size: .78rem; color: var(--tinta-2); margin-bottom: .5rem;
}
.form-calendario input[type="date"], .form-select select {
    display: block; width: 100%; margin-top: .2rem;
    border: 1px solid var(--borda); border-radius: 10px;
    padding: .45rem .6rem; font-size: .88rem; font-family: inherit;
    color: var(--tinta); background: var(--branco);
}
.form-select select { margin-top: 0; cursor: pointer; }

/* ------------------------------------------------ tabelas */
.tabela-caixa {
    overflow: auto; border: 1px solid var(--borda); border-radius: 12px;
    margin-top: .4rem;
}
.tabela { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tabela thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--fundo); color: var(--tinta-3);
    font-size: .72rem; font-weight: 650; text-transform: uppercase;
    letter-spacing: .04em; text-align: left;
    padding: .55rem .7rem; border-bottom: 1px solid var(--borda);
    cursor: pointer; white-space: nowrap; user-select: none;
}
.tabela thead th:hover { color: var(--vermelho-escuro); }
.tabela thead th.ord-asc span::after  { content: " ▲"; font-size: .7em; }
.tabela thead th.ord-desc span::after { content: " ▼"; font-size: .7em; }
.tabela td {
    padding: .48rem .7rem; border-bottom: 1px solid var(--linha);
    color: var(--tinta); white-space: nowrap;
}
.tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover td { background: var(--fundo); }

/* ------------------------------------------------ gráficos */
.grafico { width: 100%; }

/* ------------------------------------------------ login */
.login-tela {
    min-height: 100vh; display: flex; align-items: flex-start;
    justify-content: center; padding-top: 12vh; background: var(--fundo);
}
.login-caixa {
    width: 100%; max-width: 400px; background: var(--branco);
    border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 1.6rem 1.5rem; box-shadow: 0 1px 2px rgba(38, 38, 46, .04);
}
.login-caixa img { width: 150px; margin-bottom: 1rem; }
.login-caixa p { font-size: .9rem; color: var(--tinta-2); margin: 0 0 .9rem 0; }
.login-caixa input[type="password"] {
    width: 100%; border: 1px solid var(--borda); border-radius: 10px;
    padding: .6rem .8rem; font-size: .95rem; font-family: inherit;
    margin-bottom: .7rem; color: var(--tinta);
}
.login-erro {
    background: var(--vermelho-lavado); color: var(--vermelho-escuro);
    border-radius: 8px; padding: .55rem .7rem; font-size: .84rem;
    margin-bottom: .7rem; font-weight: 550;
}

/* ------------------------------------------------ erro */
.erro-caixa {
    background: var(--branco); border: 1px solid var(--borda);
    border-left: 3px solid var(--negativo); border-radius: 14px;
    padding: 1.2rem 1.4rem; margin: 2rem auto; max-width: 720px;
}
.erro-caixa h1 { font-size: 1.1rem; margin: 0 0 .5rem 0; color: var(--tinta); }
.erro-caixa pre {
    background: var(--fundo); border: 1px solid var(--linha); border-radius: 8px;
    padding: .7rem .8rem; font-size: .8rem; overflow-x: auto;
    color: var(--tinta-2); white-space: pre-wrap;
}

/* Marcar todos / Limpar: botões que agem nas caixas do próprio popover.
   Como <button>, e não <a>, para não navegar — quem aplica é o "Aplicar". */
.pop-acoes button {
    flex: 1; text-align: center; padding: .35rem .5rem; border-radius: 8px;
    font-size: .82rem; color: var(--tinta-2); background: var(--branco);
    border: 1px solid var(--borda); cursor: pointer; font-family: inherit;
}
.pop-acoes button:hover { border-color: var(--vermelho); color: var(--vermelho-escuro); }


/* ============================================================
   CELULAR
   ============================================================
   O desktop tem barra lateral fixa e filtros no topo. No telefone isso não
   funciona: o menu empurraria o conteúdo para baixo da dobra, e o filtro ficaria
   longe do polegar. Então a navegação e os filtros descem para a base da tela,
   no padrão de aplicativo — barra de abas fixa, e tudo que abre vira folha
   deslizante a partir de baixo.

   Os dois menus existem no HTML ao mesmo tempo; quem escolhe é o CSS. Custa
   alguns bytes e evita depender de JS para navegar.
   ============================================================ */

.topo-mobile, .tabbar, .folha { display: none; }

@media (max-width: 900px) {

    /* ---------------------------------------- estrutura */
    .app { flex-direction: column; }
    .menu { display: none; }               /* a barra lateral dá lugar às abas */

    .conteudo {
        padding: .85rem .85rem 0 .85rem;
        max-width: 100%;
        /* espaço para a barra de abas + a faixa de filtros não taparem o fim
           do conteúdo. A variável é redefinida quando a tela tem filtros. */
        /* as alturas reais da barra de abas e da faixa de filtros são medidas em
           JS e viram variáveis — chutar um valor fixo deixava uma fresta em que
           o conteúdo aparecia entre as duas barras */
        padding-bottom: calc(var(--altura-abas, 76px) + var(--altura-filtros, 0px) + .8rem);
    }

    /* ---------------------------------------- topo compacto */
    .topo-mobile {
        display: flex; align-items: center; justify-content: space-between;
        gap: .8rem; padding: .7rem .85rem;
        background: var(--branco); border-bottom: 1px solid var(--borda);
        position: sticky; top: 0; z-index: 20;
    }
    .topo-mobile img { height: 26px; width: auto; display: block; }
    .topo-mobile-estado {
        display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25;
    }
    .topo-mobile-estado span:last-child {
        font-size: .8rem; font-weight: 650; color: var(--tinta);
    }
    /* o topo vem antes do conteúdo na ordem visual, embora esteja depois no HTML */
    .app { display: flex; }
    .topo-mobile { order: -1; }

    /* ---------------------------------------- barra de abas */
    .tabbar {
        /* minmax(0,...) e não 1fr puro: `1fr` equivale a minmax(auto,1fr) e a
           célula se recusa a encolher abaixo do texto, estourando a barra */
        display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        background: var(--branco);
        border-top: 1px solid var(--borda);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -2px 12px rgba(38, 38, 46, .06);
    }
    .tab {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: .18rem; padding: .5rem .2rem .55rem .2rem;
        background: none; border: none; font-family: inherit; cursor: pointer;
        color: var(--tinta-3); font-size: .66rem; font-weight: 600;
        letter-spacing: .01em; -webkit-tap-highlight-color: transparent;
        position: relative;
    }
    .tab svg { width: 22px; height: 22px; }
    .tab span {
        max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .tab.ativo { color: var(--vermelho); }
    /* traço no topo da aba ativa: a cor sozinha não basta para quem não a distingue */
    .tab.ativo::before {
        content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 2.5px;
        background: var(--vermelho); border-radius: 0 0 3px 3px;
    }

    /* ---------------------------------------- faixa de filtros na base */
    .faixa-filtros {
        position: fixed; left: 0; right: 0;
        /* acima da barra de abas no empilhamento: a folha do filtro é filha
           desta faixa e não consegue escapar do contexto criado por ela, então
           um z-index menor que o das abas deixava o "Aplicar" atrás delas */
        z-index: 65;
        bottom: var(--altura-abas, 76px);
        margin: 0; border-radius: 0;
        border-left: none; border-right: none; border-bottom: none;
        padding: .5rem .7rem;
        box-shadow: 0 -1px 8px rgba(38, 38, 46, .05);
    }
    .filtros-grade {
        gap: .45rem; flex-wrap: nowrap;
        overflow-x: auto; scrollbar-width: none; padding-bottom: 1px;
    }
    .filtros-grade::-webkit-scrollbar { display: none; }
    .filtro { flex: 0 0 auto; min-width: 0; }
    /* o rótulo em cima dobraria a altura da faixa; o próprio texto do botão já diz
       o que está filtrado ("Últimos 30 dias", "2 de 7 canais") */
    .faixa-filtros .rotulo-filtro { display: none; }

    .pop-botao {
        padding: .42rem .7rem; font-size: .82rem; border-radius: 999px;
        white-space: nowrap; gap: .35rem;
    }
    .pop-resumo { display: none; }         /* o intervalo aparece dentro da folha */

    /* ---------------------------------------- popover vira folha */
    .pop-corpo {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        min-width: 0; width: 100%;
        max-height: 76vh; overflow-y: auto;
        border-radius: 18px 18px 0 0;
        border-left: none; border-right: none; border-bottom: none;
        padding: .9rem 1rem calc(1rem + env(safe-area-inset-bottom)) 1rem;
        box-shadow: 0 -8px 40px rgba(38, 38, 46, .22);
        z-index: 70;
        animation: sobe .18s ease-out;
    }
    /* alça de arrastar: sinaliza "isto sobe de baixo" sem precisar de texto */
    .pop-corpo::before {
        content: ''; display: block; width: 36px; height: 4px; border-radius: 99px;
        background: var(--borda); margin: -.2rem auto .8rem auto;
    }
    .pop-periodo { flex-direction: column; min-width: 0; gap: .9rem; }
    .pop-titulo-mobile { display: block; }
    /* fundo escurecido: o alvo do toque é o próprio <details>, e o JS fecha por isso */
    details.pop[open]::before {
        content: ''; position: fixed; inset: 0; z-index: 65;
        background: rgba(38, 38, 46, .38);
        animation: aparece .18s ease-out;
    }
    .atalho { padding: .55rem .6rem; font-size: .92rem; }
    .opcao { padding: .5rem .2rem; font-size: .92rem; }
    .form-selecao { max-height: 44vh; }

    @keyframes sobe    { from { transform: translateY(18px); opacity: .6; } }
    @keyframes aparece { from { opacity: 0; } }

    /* ---------------------------------------- folha "Mais" */
    .folha { display: block; position: fixed; inset: 0; z-index: 90; }
    .folha[hidden] { display: none; }
    .folha-fundo {
        position: absolute; inset: 0; background: rgba(38, 38, 46, .38);
        animation: aparece .18s ease-out;
    }
    .folha-corpo {
        position: absolute; left: 0; right: 0; bottom: 0;
        background: var(--branco); border-radius: 18px 18px 0 0;
        padding: .7rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom)) 1.1rem;
        max-height: 86vh; overflow-y: auto;
        box-shadow: 0 -8px 40px rgba(38, 38, 46, .22);
        animation: sobe .2s ease-out;
    }
    .folha-alca {
        width: 36px; height: 4px; border-radius: 99px;
        background: var(--borda); margin: 0 auto .9rem auto;
    }
    .folha-grupo {
        display: flex; align-items: center; gap: .45rem;
        font-size: .68rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
        color: var(--tinta-3); margin: .9rem 0 .45rem .15rem;
    }
    .folha-alca + .folha-grupo { margin-top: 0; }
    .folha-grupo svg { width: 15px; height: 15px; }
    .folha-telas { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
    .folha-tela {
        display: flex; align-items: center; gap: .6rem;
        padding: .8rem .8rem; border-radius: 12px;
        border: 1px solid var(--borda); color: var(--tinta-2);
        font-size: .88rem; font-weight: 550;
    }
    .folha-tela svg { width: 20px; height: 20px; flex: 0 0 auto; }
    .folha-tela.ativo {
        background: var(--vermelho-lavado); border-color: var(--vermelho);
        color: var(--vermelho-escuro); font-weight: 650;
    }

    /* ---------------------------------------- conteúdo */
    .cabecalho { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .cabecalho-direita { text-align: left; }
    .pagina-titulo { font-size: 1.4rem; }
    .pagina-sub { font-size: .85rem; }

    .grade-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
    .kpi { padding: .8rem .85rem .65rem .85rem; border-radius: 14px; }
    .kpi-valor { font-size: 1.4rem; }
    .kpi-valor-longo { font-size: 1.15rem; }
    .kpi-label { font-size: .64rem; letter-spacing: .04em; }
    .kpi-rodape { font-size: .72rem; }
    /* a faísca some: em 160px de largura ela vira um borrão e só rouba altura */
    .kpi-faisca { display: none; }
    .kpi:hover { transform: none; box-shadow: 0 1px 2px rgba(38, 38, 46, .04); }

    .painel { padding: .85rem .9rem; border-radius: 14px; }
    .colunas { gap: .55rem; margin-bottom: .55rem; }

    .linha { gap: .5rem; padding: .55rem 0; }
    .linha-nome { font-size: .84rem; }
    .linha-valor { font-size: .85rem; min-width: 68px; }
    .linha-aux { font-size: .72rem; }

    /* tabela: rola na horizontal, com a primeira coluna fixa para não se perder
       a referência da linha ao arrastar */
    .tabela-caixa { -webkit-overflow-scrolling: touch; }
    .tabela { font-size: .78rem; }
    .tabela td, .tabela thead th { padding: .42rem .55rem; }
    .tabela thead th:first-child, .tabela td:first-child {
        position: sticky; left: 0; z-index: 2;
        background: var(--branco);
        box-shadow: 1px 0 0 var(--linha);
    }
    .tabela thead th:first-child { z-index: 3; background: var(--fundo); }
    .tabela tbody tr:hover td:first-child { background: var(--fundo); }

    .camp { flex-wrap: wrap; gap: .5rem; }
    .camp-marca { flex: 0 0 60px; height: 22px; }
    .camp-logo { max-width: 58px; max-height: 20px; }
    .camp-numeros { flex: 1 1 auto; text-align: right; }
    .camp-corpo { flex: 1 1 100%; order: 3; }

    .integra-card { padding: .8rem .9rem; }
    .aviso { padding: .75rem .9rem; font-size: .8rem; border-radius: 12px; }
    .legenda-caption { font-size: .74rem; }
    .form-calendario input[type="date"] { font-size: 1rem; }  /* < 16px o iOS dá zoom */
}

/* telefones estreitos: KPI em coluna única fica mais legível que dois cards
   espremidos com o número quebrando em duas linhas */
@media (max-width: 380px) {
    .grade-kpi { grid-template-columns: 1fr; }
    .kpi-valor { font-size: 1.6rem; }
    .kpi-faisca { display: block; }
    .folha-telas { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .pop-corpo, .folha-corpo, .folha-fundo, details.pop[open]::before { animation: none; }
}

/* Título dentro da folha do filtro: no celular o resumo do intervalo sai do
   botão (não caberia), então ele reaparece aqui como contexto. */
.pop-titulo-mobile { display: none; }
.pop-titulo-mobile b { color: var(--tinta); font-weight: 700; }
@media (max-width: 900px) {
    .pop-titulo-mobile {
        display: block; font-size: .8rem; color: var(--tinta-3);
        margin: -.2rem 0 .7rem 0; padding-bottom: .6rem;
        border-bottom: 1px solid var(--linha);
    }
}

/* ============================================================
   TELA "HOJE (AO VIVO)"
   ============================================================
   A referência é o "Vendas de hoje ao vivo" do Mercado Livre: uma faixa de
   marca, o número do dia grande e centrado sobre ela, e blocos de leitura
   rápida embaixo. O que muda aqui é o que o painel do ML não tem como mostrar:
   a operação é MULTICANAL (a loja própria, o ML, o Full e a Shopee no mesmo
   número) e o produto é CALÇADO (modelo, numeração e cor contam a venda).

   A faixa é vermelho Scarpazi em vez do amarelo do ML, e o número mora num
   card branco sobreposto — é o que dá a sensação de painel vivo sem escurecer
   nenhuma superfície (a regra do tema: nada de fundo preto). */

.vivo-faixa {
    position: relative;
    /* margem negativa = a faixa vaza o padding do .conteudo e encosta nas
       bordas, como a barra amarela do painel do ML. */
    margin: -1.4rem -1.6rem 0 -1.6rem;
    padding: 1.5rem 1.6rem 4.6rem 1.6rem;
    background: linear-gradient(160deg, var(--vermelho) 0%, var(--vermelho-escuro) 100%);
    overflow: hidden;
}
/* onda inferior: a faixa do ML termina numa curva, não numa aresta. SVG inline
   em background para não pedir mais um arquivo à hospedagem. */
.vivo-faixa::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 46px;
    background: var(--fundo);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46V18c180 22 420-14 600-8s420 34 600 6v30z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0 46V18c180 22 420-14 600-8s420 34 600 6v30z' fill='%23000'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

.vivo-relogio {
    position: relative; z-index: 1;
    display: inline-flex; align-items: center; gap: .5rem;
    margin: 0 auto; padding: .38rem .95rem;
    border-radius: 99px;
    background: rgba(255, 255, 255, .18);
    color: var(--branco);
    font-size: .84rem; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.vivo-relogio .ponto {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--branco);
    animation: pulso-vivo 1.6s ease-in-out infinite;
}
@keyframes pulso-vivo {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.82); }
}
.vivo-faixa-topo {
    display: flex; flex-direction: column; align-items: center; gap: .55rem;
}
.vivo-faixa-titulo {
    position: relative; z-index: 1;
    color: var(--branco); font-size: 1.32rem; font-weight: 700;
    letter-spacing: -.02em; text-align: center;
}

/* O card do número, sobreposto à onda. O -3.4rem de margem é o que o faz
   "flutuar" sobre a faixa em vez de ficar abaixo dela. */
.vivo-heroi {
    position: relative; z-index: 2;
    margin: -3.4rem 1.5rem 0 1.5rem;
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: 0 10px 34px rgba(38, 38, 46, .12);
    padding: 1.5rem 1.6rem 1.35rem 1.6rem;
    text-align: center;
}
.vivo-heroi-rotulo {
    font-size: .74rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--tinta-3);
}
.vivo-heroi-valor {
    font-size: 3.6rem; font-weight: 800; color: var(--tinta);
    letter-spacing: -.045em; line-height: 1.04; margin-top: .3rem;
    font-variant-numeric: tabular-nums;
}
.vivo-heroi-delta { font-size: .92rem; margin-top: .4rem; }

/* Ritmo do dia: a barra que o ML não tem. Compara o acumulado de agora com o
   que costuma ter entrado ATÉ ESTA HORA nos últimos dias — sem isso, "R$ 700
   às 9h" não diz se o dia está bom ou ruim. */
.vivo-ritmo {
    margin-top: 1.15rem; padding-top: 1.05rem;
    border-top: 1px solid var(--linha);
    display: grid; grid-template-columns: 1fr auto; gap: .5rem 1.2rem;
    align-items: end; text-align: left;
}
.vivo-ritmo-texto { font-size: .82rem; color: var(--tinta-2); line-height: 1.5; }
.vivo-ritmo-texto b { color: var(--tinta); font-weight: 700; }
.vivo-ritmo-projecao { text-align: right; white-space: nowrap; }
.vivo-ritmo-projecao .n {
    font-size: 1.42rem; font-weight: 700; color: var(--tinta);
    letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.vivo-trilho {
    grid-column: 1 / -1;
    height: 9px; border-radius: 99px; background: var(--linha);
    overflow: hidden; position: relative;
}
.vivo-trilho span {
    display: block; height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, var(--vermelho-escuro), var(--vermelho));
}
/* marca dos 100% = o ritmo normal do dia; passar dela é dia acima da média */
.vivo-trilho i {
    position: absolute; top: -3px; bottom: -3px; width: 2px;
    background: var(--tinta-3); border-radius: 2px;
}

/* ---------------------------------------------- métricas-chave (grade de ícones) */
.vivo-metricas {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: .7rem; margin: .7rem 0;
}
.vivo-metrica {
    background: var(--branco); border: 1px solid var(--borda);
    border-radius: var(--raio); padding: .95rem 1rem;
    display: flex; flex-direction: column; gap: .1rem;
}
.vivo-metrica-topo { display: flex; align-items: center; gap: .5rem; }
.vivo-metrica-icone {
    width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto;
    display: grid; place-items: center;
}
.vivo-metrica-icone svg { width: 15px; height: 15px; display: block; }
.vivo-metrica-label {
    font-size: .72rem; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--tinta-3);
}
.vivo-metrica-valor {
    font-size: 1.62rem; font-weight: 700; color: var(--tinta);
    letter-spacing: -.03em; line-height: 1.15; margin-top: .35rem;
    font-variant-numeric: tabular-nums;
}
.vivo-metrica-rodape { font-size: .76rem; margin-top: .1rem; }

/* ---------------------------------------------- campeões do dia (calçado) */
.vivo-campeao {
    display: flex; align-items: center; gap: .75rem;
    padding: .62rem 0; border-bottom: 1px solid var(--linha);
}
.vivo-campeao:last-child { border-bottom: none; }
.vivo-campeao-pos {
    width: 24px; height: 24px; border-radius: 8px; flex: 0 0 auto;
    display: grid; place-items: center;
    font-size: .78rem; font-weight: 800;
    background: var(--fundo); color: var(--tinta-2);
}
/* o primeiro colocado ganha o vermelho da marca, como o ML destaca o dele */
.vivo-campeao:first-child .vivo-campeao-pos {
    background: var(--vermelho-lavado); color: var(--vermelho-escuro);
}
.vivo-campeao-corpo { flex: 1; min-width: 0; }
.vivo-campeao-nome {
    font-size: .88rem; font-weight: 600; color: var(--tinta);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vivo-campeao-aux {
    font-size: .74rem; color: var(--tinta-3); margin-top: .12rem;
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
}
.vivo-campeao-valor {
    text-align: right; white-space: nowrap;
    font-size: .92rem; font-weight: 700; color: var(--tinta);
    font-variant-numeric: tabular-nums;
}
.vivo-campeao-valor small {
    display: block; font-size: .72rem; font-weight: 500; color: var(--tinta-3);
}
/* amostra da cor do calçado ao lado do nome escrito — decorativa: a cor nunca
   é o único jeito de ler, o nome vem sempre junto (a "regra de alívio") */
.vivo-cor-amostra {
    width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto;
    border: 1px solid rgba(38, 38, 46, .18);
}

/* ---------------------------------------------- numeração do dia */
.vivo-grade {
    display: flex; flex-wrap: wrap; gap: .38rem; margin-top: .2rem;
}
.vivo-num {
    min-width: 43px; padding: .45rem .3rem .4rem .3rem;
    border-radius: 10px; text-align: center;
    border: 1px solid var(--borda);
    font-variant-numeric: tabular-nums;
}
.vivo-num b { display: block; font-size: .95rem; font-weight: 700; line-height: 1.1; }
.vivo-num span { display: block; font-size: .68rem; color: var(--tinta-3); margin-top: .05rem; }

/* segunda leitura dentro do painel da grade (as cores, abaixo da numeração) */
.grade-secao {
    margin-top: 1rem; padding-top: .85rem;
    border-top: 1px solid var(--linha);
}
.grade-secao .kpi-label { margin-bottom: .25rem; }
/* dentro da .linha (flex), o trilho precisa de base própria: sem ela ele fica
   com largura zero e a barra some */
.grade-cor-trilho { flex: 0 0 78px; margin-top: 0; }
/* a barra usa a cor real do calçado, e as claras (Off White) sumiriam no
   branco — o mesmo contorno da amostra quadrada as devolve */
.grade-cor-trilho > span { box-shadow: inset 0 0 0 1px rgba(38, 38, 46, .18); }

/* ---------------------------------------------- fluxo de pedidos */
.vivo-pedido {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem 0; border-bottom: 1px solid var(--linha);
}
.vivo-pedido:last-child { border-bottom: none; }
.vivo-pedido-hora {
    font-size: .78rem; font-weight: 700; color: var(--tinta-2);
    font-variant-numeric: tabular-nums; width: 42px; flex: 0 0 auto;
}
/* pedido de um dia anterior: hora esmaecida e a data embaixo, senão um pedido
   das 23h aparece no topo da lista e parece do futuro */
.vivo-pedido-hora-antes { color: var(--tinta-3); font-weight: 600; }
.vivo-pedido-hora small {
    display: block; font-size: .66rem; font-weight: 600; color: var(--tinta-3);
    margin-top: .05rem;
}
.vivo-pedido-canal {
    width: 3px; align-self: stretch; border-radius: 2px; flex: 0 0 auto;
}
.vivo-pedido-corpo { flex: 1; min-width: 0; }
.vivo-pedido-nome {
    font-size: .85rem; color: var(--tinta); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vivo-pedido-aux { font-size: .73rem; color: var(--tinta-3); margin-top: .1rem; }
.vivo-pedido-valor {
    font-size: .88rem; font-weight: 700; color: var(--tinta);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* pedido que entrou desde a última carga da tela */
.vivo-tag-novo {
    font-size: .64rem; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--vermelho-escuro);
    background: var(--vermelho-lavado); border-radius: 5px;
    padding: .1rem .32rem; margin-left: .35rem;
}

@media (max-width: 1100px) {
    .vivo-metricas { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
    /* a margem negativa tem de casar EXATAMENTE com o padding do .conteudo
       nesta faixa (.85rem), senão a faixa estoura a largura e a página inteira
       ganha rolagem horizontal */
    .vivo-faixa { padding: 1.15rem .85rem 4.2rem .85rem; margin: -.85rem -.85rem 0 -.85rem; }
    .vivo-heroi { margin: -3.2rem .2rem 0 .2rem; padding: 1.2rem 1rem 1.1rem 1rem; }
    .vivo-heroi-valor { font-size: 2.6rem; }
    .vivo-ritmo { grid-template-columns: 1fr; }
    .vivo-ritmo-projecao { text-align: left; }
    .vivo-metricas { grid-template-columns: repeat(2, 1fr); }
    .vivo-metrica-valor { font-size: 1.4rem; }
}
@media (max-width: 380px) {
    .vivo-metricas { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .vivo-relogio .ponto { animation: none; }
}

/* ============================================================
   BLOCOS DE CANAL E DE MÍDIA (tela ao vivo)
   ============================================================
   Substituem as listas de "nome — barra — valor". A lista respondia DE ONDE
   veio o faturamento; estes blocos respondem O QUE FAZER, que é outra coisa:
   64% da loja própria tanto pode ser a loja indo bem quanto o marketplace
   parado. Cada canal só se explica contra o próprio normal daquela hora, e é
   essa comparação que ganhou espaço aqui. */

.bloco-canal {
    padding: .8rem 0;
    border-bottom: 1px solid var(--linha);
}
.bloco-canal:first-of-type { padding-top: .2rem; }
.bloco-canal:last-of-type { border-bottom: none; padding-bottom: .1rem; }

.bloco-canal-topo {
    display: flex; align-items: center; gap: .45rem;
    margin-bottom: .3rem;
}
.bloco-canal-nome {
    font-size: .86rem; font-weight: 600; color: var(--tinta);
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bloco-canal-fatia {
    font-size: .74rem; font-weight: 700; color: var(--tinta-3);
    font-variant-numeric: tabular-nums;
}
.bloco-canal-valor {
    font-size: 1.32rem; font-weight: 700; color: var(--tinta);
    letter-spacing: -.03em; line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.bloco-canal-barra {
    height: 6px; border-radius: 99px; background: var(--linha);
    margin: .45rem 0 .4rem 0; overflow: hidden; position: relative;
}
.bloco-canal-barra span { display: block; height: 100%; border-radius: 99px; }
/* o traço marca onde este canal costuma estar a esta hora — é o que
   transforma a barra de "fatia do bolo" em "adiantado ou atrasado" */
.bloco-canal-barra i {
    position: absolute; top: -2px; bottom: -2px; width: 2px;
    background: var(--tinta-2); border-radius: 2px;
}
.bloco-canal-pe {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .5rem; font-size: .75rem; color: var(--tinta-3);
}
.bloco-canal-pe .aux { white-space: nowrap; }

/* canal que ainda não vendeu hoje mas costuma ter vendido: o silêncio é a
   informação, então ele continua na lista em vez de sumir */
.bloco-canal-mudo .bloco-canal-valor { color: var(--tinta-3); font-weight: 600; }
.bloco-canal-mudo .bloco-canal-nome { color: var(--tinta-2); }

/* ---------------------------------------------- mídia por plataforma */
.bloco-midia {
    padding: .75rem 0;
    border-bottom: 1px solid var(--linha);
}
.bloco-midia:first-of-type { padding-top: .2rem; }
.bloco-midia:last-of-type { border-bottom: none; }

.bloco-midia-topo {
    display: flex; align-items: center; gap: .45rem; margin-bottom: .35rem;
}
.bloco-midia-nome {
    font-size: .86rem; font-weight: 600; color: var(--tinta);
    flex: 1; min-width: 0;
}
.bloco-midia-gasto {
    font-size: .9rem; font-weight: 700; color: var(--tinta);
    font-variant-numeric: tabular-nums;
}
.bloco-midia-corpo {
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.bloco-midia-roas {
    font-size: 1.22rem; font-weight: 700; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.bloco-midia-ref { font-size: .74rem; color: var(--tinta-3); }
.bloco-midia-aux {
    font-size: .74rem; color: var(--tinta-3); margin-top: .2rem;
    font-variant-numeric: tabular-nums;
}
.bloco-midia-barra {
    height: 5px; border-radius: 99px; background: var(--linha);
    margin-top: .45rem; overflow: hidden;
}
.bloco-midia-barra span { display: block; height: 100%; border-radius: 99px; }

/* legenda dentro de um painel encosta no eixo do gráfico sem este respiro */
.painel > .legenda-caption { margin-top: .6rem; }

/* rodapé de fechamento de conta, comum aos dois painéis */
.painel-conta {
    margin-top: .9rem; padding-top: .85rem;
    border-top: 1px solid var(--linha);
    display: grid; grid-template-columns: 1fr 1fr; gap: .7rem;
}
.painel-conta-item .n {
    font-size: 1.3rem; font-weight: 700; color: var(--tinta);
    letter-spacing: -.03em; line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.painel-conta-item .r { font-size: .72rem; color: var(--tinta-3); margin-top: .1rem; }

@media (max-width: 900px) {
    .painel-conta { grid-template-columns: 1fr; }
}

/* barra dentro da célula da tabela — o valor continua escrito ao lado, a barra
   só faz a coluna virar leitura de relance */
.tab-barra {
    display: inline-block; vertical-align: middle;
    width: 68px; height: 5px; border-radius: 99px;
    background: var(--linha); overflow: hidden; margin-right: .45rem;
}
.tab-barra > span {
    display: block; height: 100%; border-radius: 99px;
    background: var(--vermelho-escuro);
}
.tab-barra-valor { font-variant-numeric: tabular-nums; }

/* quatro destaques numa grade 2×2 dentro do painel */
.painel-conta-4 { grid-template-columns: 1fr 1fr; gap: .9rem .7rem; }
.painel-conta-4 .n { font-size: 1.16rem; }
@media (max-width: 900px) {
    .painel-conta-4 { grid-template-columns: 1fr 1fr; }
}

/* foto do produto na lista de campeões. `object-fit: cover` porque as fotos do
   catálogo não têm proporção única — sem isso o sapato estica. */
.vivo-campeao-foto {
    width: 46px; height: 46px; flex: 0 0 auto;
    border-radius: 10px; object-fit: cover;
    background: var(--fundo);
    border: 1px solid var(--borda);
}
/* sem foto (kit, item fora do catálogo): o código do modelo ocupa o lugar, para
   a lista não perder o alinhamento das colunas */
.vivo-campeao-foto-vazia {
    display: grid; place-items: center;
    font-size: .7rem; font-weight: 700; color: var(--tinta-3);
    letter-spacing: -.02em; text-align: center; line-height: 1;
    padding: 2px; overflow: hidden;
}

/* ============================================================
   VISÃO DIÁRIA — topo (métrica principal + secundárias)
   ============================================================
   Seis cards iguais lado a lado davam o mesmo peso visual a todos, e era
   preciso ler os seis para achar o principal. O faturamento é A pergunta da
   tela; os outros cinco existem para explicá-lo, e ficam menores. */

.periodo-topo {
    display: grid; grid-template-columns: 1fr 2.1fr;
    gap: .7rem; margin-bottom: .7rem;
}

.periodo-heroi {
    background: var(--branco); border: 1px solid var(--vermelho);
    border-radius: var(--raio); padding: 1.25rem 1.35rem 1.1rem 1.35rem;
    box-shadow: 0 2px 14px rgba(230, 51, 41, .10);
    display: flex; flex-direction: column;
}
.periodo-heroi-rotulo {
    font-size: .72rem; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; color: var(--tinta-3);
}
.periodo-heroi-valor {
    font-size: 2.9rem; font-weight: 800; color: var(--tinta);
    letter-spacing: -.045em; line-height: 1.05; margin-top: .35rem;
    font-variant-numeric: tabular-nums;
}
/* o valor grande é arredondado ("R$ 201,4 mil"); o exato fica embaixo, porque
   quem confere número precisa dos centavos */
.periodo-heroi-exato {
    font-size: .8rem; color: var(--tinta-3); margin-top: .15rem;
    font-variant-numeric: tabular-nums;
}
.periodo-heroi-delta { font-size: .92rem; margin-top: .5rem; }
.periodo-heroi-faisca { margin-top: auto; padding-top: .9rem; }
.periodo-heroi-faisca svg { width: 100%; height: auto; }
.periodo-heroi-pe {
    font-size: .74rem; color: var(--tinta-3); margin-top: .5rem;
    padding-top: .6rem; border-top: 1px solid var(--linha);
}

.periodo-secundarias {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: .7rem;
}
.kpi-compacto { padding: .85rem .95rem; }
.kpi-compacto .kpi-valor { font-size: 1.5rem; }
.kpi-compacto .kpi-faisca { margin-top: .4rem; }

/* ---------------------------------------------- atalhos de período */
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin: -.2rem 0 .7rem 0; }
.chip {
    display: inline-flex; align-items: center;
    padding: .38rem .8rem; border-radius: 99px;
    border: 1px solid var(--borda); background: var(--branco);
    font-size: .8rem; font-weight: 600; color: var(--tinta-2);
    text-decoration: none; white-space: nowrap;
    transition: border-color .12s, color .12s, background .12s;
}
.chip:hover { border-color: var(--vermelho); color: var(--vermelho-escuro); }
.chip-ativo {
    background: var(--vermelho); border-color: var(--vermelho);
    color: var(--branco); font-weight: 700;
}
.chip-ativo:hover { background: var(--vermelho-escuro); color: var(--branco); }

/* ============================================================
   VISÃO DIÁRIA — tabela dia a dia, com detalhe que abre
   ============================================================
   Não é <table>: cada dia é um <details>, para a linha abrir sem JS. As colunas
   se mantêm alinhadas porque cabeçalho e linhas usam a MESMA grade — qualquer
   mudança de coluna tem de ser feita nas duas. */

.dia-tabela { --dia-cols: 1.5fr 2.2fr .8fr 1fr .7fr .9fr 24px; }
.dia-tabela.com-midia { --dia-cols: 1.5fr 2fr .8fr 1fr .7fr .9fr 1fr 24px; }
.dia-tabela.com-roas  { --dia-cols: 1.5fr 1.8fr .7fr .9fr .6fr .9fr .9fr .8fr 24px; }

.dia-cabecalho, .dia-resumo {
    display: grid; grid-template-columns: var(--dia-cols);
    gap: .8rem; align-items: center;
}
.dia-cabecalho {
    padding: .5rem .9rem; border-bottom: 1px solid var(--borda);
    font-size: .7rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--tinta-3);
}
.dia-cabecalho .dia-c-num { text-align: right; }

.dia-linha { border-bottom: 1px solid var(--linha); }
.dia-linha:last-child { border-bottom: none; }

.dia-resumo {
    padding: .62rem .9rem; cursor: pointer; list-style: none;
    transition: background .12s;
}
.dia-resumo::-webkit-details-marker { display: none; }
.dia-resumo:hover { background: var(--fundo); }
.dia-linha[open] > .dia-resumo { background: var(--vermelho-lavado); }
.dia-resumo:focus-visible { outline: 2px solid var(--vermelho); outline-offset: -2px; }

/* sábado e domingo levemente rebaixados: o ritmo da semana fica visível na
   própria tabela, sem precisar do gráfico ao lado */
.dia-fds > .dia-resumo { background: rgba(38, 38, 46, .022); }
.dia-fds > .dia-resumo:hover { background: var(--fundo); }

.dia-c-data { display: flex; align-items: baseline; gap: .4rem; min-width: 0; }
.dia-c-data b { font-size: .86rem; font-weight: 600; color: var(--tinta); }
.dia-c-data small { font-size: .72rem; color: var(--tinta-3); }
.dia-c-num {
    text-align: right; font-size: .85rem; color: var(--tinta);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dia-c-barra { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.dia-c-barra b {
    font-size: .86rem; font-weight: 700; color: var(--tinta);
    font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto;
}
.dia-barra {
    flex: 1 1 auto; min-width: 26px; height: 6px;
    border-radius: 99px; background: var(--linha); overflow: hidden;
}
.dia-barra > span {
    display: block; height: 100%; border-radius: 99px;
    background: var(--vermelho-escuro);
}

.dia-marca {
    font-size: .62rem; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; padding: .1rem .34rem; border-radius: 5px;
    white-space: nowrap;
}
.dia-marca-melhor { color: var(--positivo); background: rgba(0, 99, 0, .09); }
.dia-marca-pior { color: var(--negativo); background: rgba(208, 59, 59, .10); }

/* a seta é desenhada em CSS: um SVG inline por linha custava ~200 bytes vezes o
   número de dias, e o período "Máximo" tem quase mil */
.dia-c-seta { display: grid; place-items: center; }
/* o cabeçalho usa a mesma grade das linhas, e a última célula existe só para
   reservar a coluna — sem seta desenhada nela */
.dia-cabecalho .dia-c-seta::after { content: none; }
.dia-c-seta::after {
    content: ''; width: 7px; height: 7px;
    border-right: 1.8px solid var(--tinta-3);
    border-bottom: 1.8px solid var(--tinta-3);
    border-radius: 1px;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .16s, border-color .16s;
}
.dia-linha[open] .dia-c-seta::after {
    transform: translateY(1px) rotate(225deg);
    border-color: var(--vermelho-escuro);
}

/* ---------------------------------------------- o detalhe do dia */
.dia-detalhe {
    padding: .3rem .9rem 1.1rem .9rem;
    background: var(--vermelho-lavado);
    border-top: 1px solid rgba(230, 51, 41, .14);
}
.dia-detalhe-grade {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem;
}
.dia-bloco {
    background: var(--branco); border: 1px solid var(--borda);
    border-radius: 12px; padding: .8rem .9rem;
}
.dia-bloco .kpi-label { margin-bottom: .35rem; }

.dia-item {
    display: flex; align-items: center; gap: .55rem;
    padding: .38rem 0; border-bottom: 1px solid var(--linha);
}
.dia-item:last-child { border-bottom: none; }
.dia-item-nome {
    flex: 1; min-width: 0; font-size: .82rem; color: var(--tinta);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dia-item-barra {
    flex: 0 0 46px; height: 5px; border-radius: 99px;
    background: var(--linha); overflow: hidden;
}
.dia-item-barra > span { display: block; height: 100%; border-radius: 99px; }
.dia-item-valor {
    text-align: right; white-space: nowrap;
    font-size: .82rem; font-weight: 700; color: var(--tinta);
    font-variant-numeric: tabular-nums;
}
.dia-item-valor small {
    display: block; font-size: .7rem; font-weight: 500; color: var(--tinta-3);
}
.dia-item-conta { border-top: 1px solid var(--linha); margin-top: .2rem; padding-top: .5rem; }
.dia-vazio { font-size: .8rem; color: var(--tinta-3); padding: .5rem 0; }
.dia-carregando {
    font-size: .82rem; color: var(--tinta-3);
    padding: 1.1rem 0; text-align: center;
}

.dia-foto {
    width: 30px; height: 30px; flex: 0 0 auto;
    border-radius: 7px; object-fit: cover;
    background: var(--fundo); border: 1px solid var(--borda);
}
.dia-foto-vazia {
    display: grid; place-items: center; font-size: .56rem; font-weight: 700;
    color: var(--tinta-3); line-height: 1; padding: 2px; overflow: hidden;
}

@media (max-width: 1200px) {
    .periodo-secundarias { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .periodo-topo { grid-template-columns: 1fr; }
    .periodo-heroi-valor { font-size: 2.3rem; }
    .periodo-secundarias { grid-template-columns: repeat(2, 1fr); }
    .dia-detalhe-grade { grid-template-columns: 1fr; }

    /* no celular a grade de 8 colunas não cabe: a linha vira duas faixas, com a
       data e o faturamento em cima e os números embaixo, sem rolagem lateral.
       É FLEX, não grid: dar a mesma `grid-area` a todos os números os empilha
       na mesma célula, um por cima do outro. */
    .dia-cabecalho { display: none; }
    .dia-resumo {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: .25rem .7rem;
    }
    .dia-c-data { flex: 1 1 auto; }
    .dia-c-barra { flex: 0 0 auto; }
    .dia-c-seta { flex: 0 0 16px; }
    /* a primeira linha já está cheia, então os números caem para a seguinte */
    .dia-resumo > .dia-c-num {
        flex: 0 0 auto; text-align: left;
        font-size: .76rem; color: var(--tinta-2);
    }
    /* o cabeçalho sumiu; cada número carrega o próprio rótulo */
    .dia-resumo > .dia-c-num[data-r]::before {
        content: attr(data-r) ' ';
        color: var(--tinta-3); font-size: .7rem;
    }
    .dia-c-barra .dia-barra { display: none; }
}
@media (max-width: 380px) {
    .periodo-secundarias { grid-template-columns: 1fr; }
}

/* ============================================================
   ACABAMENTO
   ============================================================
   Camada de refinamento visual aplicada depois das regras de estrutura. Está no
   fim do arquivo de propósito: são ajustes de superfície (sombra, respiro,
   tipografia dos números), e mantê-los juntos deixa claro o que é acabamento e
   o que é layout. Nada aqui muda posição de elemento nenhum. */

/* ---------------------------------------------- superfícies */
.painel, .kpi, .vivo-metrica, .integra-card {
    border-color: var(--borda);
    box-shadow: var(--sombra-1);
}
.painel { padding: 1.2rem 1.35rem; }
.kpi { padding: 1.15rem 1.25rem .95rem 1.25rem; }

.kpi:hover, .vivo-metrica:hover {
    box-shadow: var(--sombra-2);
    transform: translateY(-2px);
}
.vivo-metrica { transition: box-shadow .18s ease, transform .18s ease; }

/* ---------------------------------------------- tipografia dos números
   Todo valor numérico em tabular: sem isso a largura do "1" contra a do "8"
   faz a coluna dançar a cada atualização, e é o detalhe que mais denuncia
   interface improvisada. */
.kpi-valor, .vivo-metrica-valor, .vivo-heroi-valor, .periodo-heroi-valor,
.dia-c-num, .linha-valor, .bloco-canal-valor, .painel-conta-item .n,
.tabela td.num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1, 'cv01' 1;
}
.kpi-valor { font-size: 2rem; font-weight: 750; letter-spacing: -.035em; }
/* Precisa vir DEPOIS da regra acima: a camada de acabamento redefine
   `.kpi-valor` no fim do arquivo e, sem esta linha, anulava o encolhimento —
   "R$ 209,8 mil" em 2rem não cabe num card de seis e vazava para fora. */
.kpi-valor-longo { font-size: 1.45rem; letter-spacing: -.03em; }
/* rede de segurança: nenhum valor pode transbordar o card, aconteça o que
   acontecer com a fonte */
.kpi-valor, .vivo-metrica-valor { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.periodo-heroi-valor, .vivo-heroi-valor { font-weight: 800; letter-spacing: -.05em; }

/* rótulos: o cinza mais claro sumia contra o branco; sobe um degrau e ganha
   peso, que é o que os faz lerem como rótulo e não como texto apagado */
.kpi-label, .vivo-metrica-label, .rotulo-filtro, .periodo-heroi-rotulo {
    color: var(--tinta-2);
    font-weight: 700;
    letter-spacing: .075em;
    font-size: .69rem;
}

.painel-titulo { font-size: 1rem; font-weight: 700; letter-spacing: -.015em; }
.painel-sub { font-size: .79rem; color: var(--tinta-3); margin-bottom: .85rem; }

/* ---------------------------------------------- filtros */
/* a faixa deixa de ser um card: era uma caixa branca em cima de outra, e o
   filtro competia com o conteúdo. Agora são só os controles, soltos. */
.painel.faixa-filtros {
    background: transparent; border: none; box-shadow: none;
    padding: 0; margin-bottom: .8rem;
}
/* ...menos no celular, onde esta mesma faixa é FIXA no rodapé: sem fundo, o
   conteúdo da página passa por baixo dela e os controles ficam ilegíveis */
@media (max-width: 900px) {
    .painel.faixa-filtros {
        background: var(--branco);
        border-top: 1px solid var(--borda);
        box-shadow: 0 -2px 10px rgba(38, 38, 46, .07);
        padding: .5rem .7rem; margin: 0;
    }
}
.pop-botao {
    border-radius: var(--raio-p); padding: .62rem .9rem;
    background: var(--branco); box-shadow: var(--sombra-1);
    transition: border-color .14s ease, box-shadow .14s ease;
}
.pop-botao:hover { box-shadow: var(--sombra-2); }
.pop[open] .pop-botao { box-shadow: var(--sombra-2); }
.pop-corpo { border-radius: var(--raio); box-shadow: var(--sombra-3); }

.chips { margin: 0 0 .85rem 0; gap: .45rem; }
.chip {
    padding: .44rem .95rem; box-shadow: var(--sombra-1);
    transition: border-color .14s, color .14s, background .14s, box-shadow .14s, transform .14s;
}
.chip:hover { box-shadow: var(--sombra-2); transform: translateY(-1px); }
.chip-ativo { box-shadow: var(--sombra-marca); border-color: var(--vermelho-escuro); }

/* ---------------------------------------------- o card principal do período
   A borda vermelha de 1px lia como alerta, não como destaque. O peso agora vem
   de três coisas mais silenciosas: a barra de marca no topo, o halo vermelho da
   sombra e um fundo que clareia de baixo para cima. */
.periodo-heroi, .kpi-destaque {
    border-color: rgba(196, 36, 27, .22);
    box-shadow: var(--sombra-marca);
    position: relative; overflow: hidden;
}
.periodo-heroi {
    background:
        linear-gradient(180deg, rgba(254, 242, 241, .75) 0%, var(--branco) 42%);
    padding: 1.45rem 1.5rem 1.25rem 1.5rem;
}
.periodo-heroi::before, .kpi-destaque::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--vermelho-escuro), var(--vermelho));
}
.periodo-heroi-valor { font-size: 3.05rem; }
.periodo-heroi-exato { font-size: .82rem; color: var(--tinta-2); }
.periodo-heroi-pe { border-top-color: rgba(38, 38, 46, .07); }

/* ---------------------------------------------- tabela dia a dia */
.dia-resumo { padding: .72rem 1rem; }
.dia-cabecalho { padding: .55rem 1rem .6rem 1rem; }
.dia-c-data b { font-size: .88rem; }
.dia-c-num { font-size: .86rem; }

/* a divisória some no hover e na linha aberta: uma linha atravessando um bloco
   destacado quebra a peça em duas */
.dia-linha { border-bottom-color: var(--linha); }
.dia-linha:hover, .dia-linha[open] { border-bottom-color: transparent; }
.dia-linha[open] { box-shadow: var(--sombra-2); border-radius: var(--raio-p); }
.dia-linha[open] > .dia-resumo {
    background: linear-gradient(180deg, var(--vermelho-lavado), rgba(254, 242, 241, .5));
    border-radius: var(--raio-p) var(--raio-p) 0 0;
}
.dia-detalhe { border-radius: 0 0 var(--raio-p) var(--raio-p); }
.dia-bloco { box-shadow: var(--sombra-1); border-radius: var(--raio-p); }

.dia-barra { height: 7px; }
.dia-barra > span {
    background: linear-gradient(90deg, var(--vermelho-escuro), var(--vermelho));
}

/* ---------------------------------------------- blocos de canal e mídia */
.bloco-canal-barra span, .bloco-midia-barra span, .trilho span, .vivo-trilho span {
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .18);
}

/* ---------------------------------------------- gráficos */
/* o gráfico encostava no rodapé do card; um respiro embaixo o assenta */
.grafico { margin-bottom: .1rem; }

/* ============================================================
   VISÃO MENSAL
   ============================================================ */

/* o herói do mês é mais alto que o do período (leva progresso e projeção),
   então as secundárias ficam em duas colunas em vez de três */
.periodo-topo-mensal { grid-template-columns: 1fr 1.5fr; }
.periodo-secundarias-mensal { grid-template-columns: repeat(2, 1fr); }
/* o número de cards varia (o do ano anterior e os de mídia só entram quando há
   dado): num total ímpar o último se estica e a grade fecha sem buraco */
.periodo-secundarias-mensal > :last-child:nth-child(odd) { grid-column: span 2; }

/* quanto do mês já passou: sem isso "R$ 204 mil" no dia 5 e no dia 28 têm
   exatamente a mesma cara */
.mes-progresso { margin-top: 1rem; }
.mes-progresso-linha {
    display: flex; justify-content: space-between;
    font-size: .74rem; color: var(--tinta-3); margin-bottom: .35rem;
    font-variant-numeric: tabular-nums;
}
.mes-progresso .vivo-trilho { height: 7px; }

.mes-projecao {
    margin-top: .95rem; padding-top: .85rem;
    border-top: 1px solid rgba(38, 38, 46, .07);
    display: flex; align-items: flex-end; justify-content: space-between; gap: .8rem;
}
.mes-projecao .n {
    font-size: 1.5rem; font-weight: 700; color: var(--tinta);
    letter-spacing: -.03em; line-height: 1.1; margin-top: .1rem;
    font-variant-numeric: tabular-nums;
}
.mes-projecao-delta { font-size: .8rem; text-align: right; padding-bottom: .15rem; }

/* ---------------------------------------------- tabela mês a mês */
.mes-tabela { --dia-cols: 1.3fr 2fr .8fr 1fr .95fr 1fr .8fr 24px; }
.mes-tabela.com-yoy { --dia-cols: 1.2fr 1.8fr .75fr .95fr .95fr .95fr .95fr .75fr 24px; }

.dia-marca-curso { color: var(--vermelho-escuro); background: var(--vermelho-lavado); }
/* o mês em curso não é comparável aos fechados: fica levemente recuado, como a
   barra translúcida do gráfico */
.mes-parcial > .dia-resumo { background: rgba(230, 51, 41, .035); }
.mes-parcial > .dia-resumo .dia-barra > span { opacity: .55; }

@media (max-width: 1200px) {
    .periodo-topo-mensal { grid-template-columns: 1fr; }
    .periodo-secundarias-mensal { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
    .periodo-secundarias-mensal { grid-template-columns: 1fr; }
}

/* ---------------------------------------------- composição por mês (rosca) */
.composicao-topo {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .6rem; margin-bottom: .2rem;
}
.composicao-titulo {
    font-size: .84rem; font-weight: 700; color: var(--tinta);
}
.composicao-voltar {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: .74rem; font-weight: 600; color: var(--vermelho-escuro);
    text-decoration: underline; text-underline-offset: 2px;
}
.composicao-voltar:hover { color: var(--vermelho); }
.composicao-rosca { margin: .2rem 0 .5rem 0; }

.composicao-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .42rem 0; border-bottom: 1px solid var(--linha);
}
.composicao-item:last-child { border-bottom: none; }
.composicao-nome {
    flex: 1; min-width: 0; font-size: .84rem; color: var(--tinta);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.composicao-fatia {
    font-size: .78rem; font-weight: 700; color: var(--tinta-2);
    font-variant-numeric: tabular-nums; min-width: 42px; text-align: right;
}
.composicao-valor {
    text-align: right; white-space: nowrap;
    font-size: .84rem; font-weight: 700; color: var(--tinta);
    font-variant-numeric: tabular-nums;
}
.composicao-valor small {
    display: block; font-size: .7rem; font-weight: 500; color: var(--tinta-3);
}

/* ---------------------------------------------- abas dentro de um painel */
.abas {
    display: flex; gap: .3rem; flex-wrap: wrap;
    margin: .1rem 0 .55rem 0;
    border-bottom: 1px solid var(--linha);
}
.aba {
    background: none; border: none; cursor: pointer;
    padding: .48rem .7rem .55rem .7rem; margin-bottom: -1px;
    font-size: .84rem; font-weight: 600; color: var(--tinta-2);
    border-bottom: 2px solid transparent;
    transition: color .14s, border-color .14s;
    white-space: nowrap;
}
.aba:hover { color: var(--tinta); }
.aba-ativa {
    color: var(--vermelho-escuro); font-weight: 700;
    border-bottom-color: var(--vermelho);
}
.aba:focus-visible {
    outline: 2px solid var(--vermelho); outline-offset: -2px; border-radius: 6px;
}
/* o subtítulo troca junto com a aba e muda de altura conforme o texto; a
   altura mínima evita o gráfico pulando a cada troca */
.painel-sub[data-alvo="aba-sub"] { min-height: 2.1em; }

@media (max-width: 600px) {
    .abas { gap: .1rem; }
    .aba { padding: .45rem .5rem .5rem .5rem; font-size: .78rem; }
}

/* ============================================================
   MARKETING — os dois ecossistemas
   ============================================================
   Cada plataforma de anúncio só vende no próprio ecossistema (a regra está em
   Theme::ECOSSISTEMAS). Os cards são o número principal da tela, e existem
   para serem comparados um com o outro — daí terem exatamente a mesma
   estrutura, linha por linha. */

.eco-grade {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .7rem; margin-bottom: .7rem;
}
.eco {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-1);
    padding: 1.2rem 1.3rem 1.1rem 1.3rem;
    position: relative; overflow: hidden;
}
/* a faixa da cor do ecossistema, no topo */
.eco::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--eco-cor);
}
.eco-topo { display: flex; align-items: center; gap: .6rem; margin-bottom: .9rem; }
.eco-marca {
    width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto;
    background: var(--eco-cor);
}
.eco-nome {
    font-size: 1rem; font-weight: 700; color: var(--tinta); letter-spacing: -.015em;
}
.eco-plataformas { font-size: .76rem; color: var(--tinta-3); margin-top: .05rem; }

.eco-roas { display: flex; align-items: baseline; gap: .5rem; }
.eco-roas-n {
    font-size: 2.5rem; font-weight: 800; color: var(--tinta);
    letter-spacing: -.045em; line-height: 1;
    font-variant-numeric: tabular-nums;
}
.eco-roas-r { font-size: .78rem; color: var(--tinta-3); }

.eco-linhas { margin-top: 1rem; }
.eco-linha {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .8rem; padding: .4rem 0;
    border-bottom: 1px solid var(--linha);
    font-size: .84rem; color: var(--tinta-2);
}
.eco-linha:last-child { border-bottom: none; }
.eco-linha b {
    color: var(--tinta); font-weight: 700;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* o custo por pedido é a linha que se compara entre os dois cards */
.eco-linha-forte { color: var(--tinta); }
.eco-linha-forte b { font-size: 1.02rem; }

.eco-barra {
    height: 7px; border-radius: 99px; background: var(--linha);
    overflow: hidden; margin-top: .9rem;
}
.eco-barra > span {
    display: block; height: 100%; border-radius: 99px; background: var(--eco-cor);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .18);
}
.eco-pe { font-size: .76rem; color: var(--tinta-3); margin-top: .4rem; }
.eco-pe b { color: var(--tinta-2); font-weight: 700; }

@media (max-width: 900px) {
    .eco-grade { grid-template-columns: 1fr; }
    .eco-roas-n { font-size: 2.1rem; }
}

/* ---------------------------------------------- topo da tela Marketing */
/* o herói é mais estreito que o das outras telas (leva menos linhas), então as
   secundárias ganham espaço e ficam em duas colunas */
.periodo-topo-mkt { grid-template-columns: 1fr 1.35fr; }
.periodo-secundarias-mkt { grid-template-columns: repeat(2, 1fr); }

.mkt-heroi { justify-content: flex-start; }
.mkt-retorno {
    margin-top: 1.15rem; padding-top: .95rem;
    border-top: 1px solid rgba(38, 38, 46, .07);
    display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem;
}
.mkt-retorno-n {
    font-size: 2.1rem; font-weight: 800; color: var(--positivo);
    letter-spacing: -.04em; line-height: 1; margin-top: .2rem;
    font-variant-numeric: tabular-nums;
}
.mkt-retorno-r {
    font-size: .76rem; color: var(--tinta-3); text-align: right;
    line-height: 1.45; padding-bottom: .15rem;
}
.mkt-heroi .periodo-heroi-pe { margin-top: 1.1rem; }

@media (max-width: 1100px) {
    .periodo-topo-mkt { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
    .periodo-secundarias-mkt { grid-template-columns: 1fr; }
}

/* ---------------------------------------------- campanhas (tabela) */
.camp-linha { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.camp-ponto {
    width: 8px; height: 8px; border-radius: 3px; flex: 0 0 auto;
}
.camp-texto { min-width: 0; }
.camp-texto b {
    display: block; font-size: .85rem; font-weight: 600; color: var(--tinta);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.camp-texto small { font-size: .72rem; color: var(--tinta-3); }
/* a coluna do nome é a única alinhada à esquerda — C::tabela alinha números à
   direita por padrão, e um nome à direita fica ilegível numa lista */
.tabela td:first-child, .tabela th:first-child { text-align: left; }

.camp-barra {
    display: inline-block; vertical-align: middle;
    width: 60px; height: 5px; border-radius: 99px;
    background: var(--linha); overflow: hidden; margin-right: .5rem;
}
.camp-barra > span { display: block; height: 100%; border-radius: 99px; }
.camp-barra-valor { font-variant-numeric: tabular-nums; }

/* linhas de subtração no card do ecossistema: comissão e mídia saem da venda */
.eco-linha-menos { color: var(--tinta-3); }
.eco-linha-menos b { color: var(--negativo); font-weight: 650; }
.eco-linha-menos small {
    font-size: .72rem; color: var(--tinta-3); margin-left: .3rem;
    font-variant-numeric: tabular-nums;
}
.eco-roas-r small { display: block; font-size: .7rem; color: var(--tinta-3); margin-top: .1rem; }
.eco-sem-taxa { color: var(--positivo) !important; font-weight: 650 !important; }
/* como .linha-aux, mas quebra linha: aquela é nowrap de propósito (para caber
   numa linha de lista) e vazava o card quando usada em parágrafo */
.nota-aux {
    font-size: .78rem; color: var(--tinta-3); line-height: 1.5;
}
/* composição do custo no herói: mídia + imposto */
.mkt-composicao {
    display: flex; gap: .5rem; flex-wrap: wrap;
    font-size: .76rem; color: var(--tinta-3); margin-top: .3rem;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   FINANCEIRO
   ============================================================ */

.fin-negativo { border-color: rgba(208, 59, 59, .35) !important; }
.fin-margem {
    margin-top: .8rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.fin-margem-n {
    font-size: 1.5rem; font-weight: 750; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}
.fin-margem-r { font-size: .78rem; color: var(--tinta-3); }

/* ---------------------------------------------- cadastro de custo por modelo */

/* topo do painel: o medidor e as ferramentas de filtro */
.custos-topo {
    display: flex; flex-wrap: wrap; gap: 1rem 1.6rem;
    align-items: flex-end; justify-content: space-between;
    padding: 1.1rem 1.35rem .1rem 1.35rem;
}
.custos-medidor { min-width: 260px; flex: 1 1 300px; }
.custos-medidor-topo { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.custos-medidor-n {
    font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em;
    color: var(--tinta); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.custos-medidor-rot { font-size: .78rem; color: var(--tinta-2); }
.custos-barra {
    height: 7px; border-radius: 99px; background: var(--linha);
    overflow: hidden; margin: .45rem 0 .3rem 0;
}
.custos-barra > span {
    display: block; height: 100%; border-radius: 99px;
    background: var(--positivo);
}
.custos-medidor-pe { font-size: .72rem; color: var(--tinta-3); }

.custos-ferramentas {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
.custos-busca input {
    width: 210px; padding: .42rem .7rem;
    border: 1px solid var(--borda); border-radius: 99px;
    font-family: inherit; font-size: .8rem; color: var(--tinta);
    background: var(--branco);
}
.custos-busca input:focus {
    outline: none; border-color: var(--vermelho);
    box-shadow: 0 0 0 3px rgba(230, 51, 41, .1);
}
.custos-filtros { display: flex; gap: .35rem; flex-wrap: wrap; }
.custos-chip {
    padding: .38rem .7rem; border: 1px solid var(--borda);
    border-radius: 99px; background: var(--branco); cursor: pointer;
    font-family: inherit; font-size: .76rem; font-weight: 600; color: var(--tinta-2);
    transition: background .14s, border-color .14s, color .14s;
}
.custos-chip b { font-weight: 800; color: var(--tinta-3); margin-left: .2rem; }
.custos-chip:hover { border-color: var(--tinta-3); }
.custos-chip-ativo {
    background: var(--vermelho); border-color: var(--vermelho); color: #fff;
}
.custos-chip-ativo b { color: rgba(255, 255, 255, .75); }

/* a lista */
.custos-cabecalho, .custos-linha {
    display: grid;
    grid-template-columns: 40px 2.4fr .7fr .9fr .9fr 1fr 1fr;
    gap: .8rem; align-items: center;
}
.custos-cabecalho {
    padding: .5rem .2rem .6rem .2rem; border-bottom: 1px solid var(--borda);
    font-size: .7rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--tinta-3);
}
.custos-cabecalho .num, .custos-linha .num {
    text-align: right; font-variant-numeric: tabular-nums; font-size: .85rem;
}
.custos-linha {
    padding: .4rem .2rem; border-bottom: 1px solid var(--linha);
    transition: background .12s;
}
.custos-linha:hover { background: var(--fundo); }
/* modelo sem custo cadastrado: é ele que infla a margem */
.custos-falta { background: rgba(230, 51, 41, .035); }
.custos-falta:hover { background: rgba(230, 51, 41, .06); }
/* custo zero é cadastro válido e quase sempre engano de digitação */
.custos-zero { background: rgba(230, 51, 41, .07); }

/* `object-fit: cover` porque as fotos do catálogo não têm proporção única —
   sem isso o sapato estica */
.custos-foto {
    width: 40px; height: 40px; flex: 0 0 auto;
    border-radius: 9px; object-fit: cover;
    background: var(--fundo); border: 1px solid var(--borda);
}
.custos-foto-vazia {
    display: grid; place-items: center; overflow: hidden;
    color: var(--borda);
}
.custos-foto-vazia svg { width: 19px; height: 19px; }

.custos-nome { min-width: 0; }
.custos-nome b { font-size: .86rem; font-weight: 700; color: var(--tinta); }
.custos-nome small {
    display: block; font-size: .74rem; color: var(--tinta-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.custos-un, .custos-rec { color: var(--tinta-2); }

/* o campo de custo com o R$ colado, para o número não flutuar sozinho */
.custos-entrada {
    display: inline-flex; align-items: baseline; gap: .3rem;
    padding: .3rem .5rem; width: 100%; max-width: 116px;
    border: 1px solid var(--borda); border-radius: 9px;
    background: var(--branco); transition: border-color .14s, box-shadow .14s;
}
.custos-entrada:focus-within {
    border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(230, 51, 41, .12);
}
.custos-moeda { font-size: .72rem; font-weight: 600; color: var(--tinta-3); }
.custos-linha input[type="number"] {
    flex: 1; min-width: 0; width: 100%; border: none; background: none;
    padding: 0; text-align: right; font-size: .86rem; font-weight: 650;
    font-family: inherit; font-variant-numeric: tabular-nums; color: var(--tinta);
}
.custos-linha input[type="number"]:focus { outline: none; }
.custos-falta .custos-entrada { border-color: rgba(230, 51, 41, .35); }

/* a margem ganha uma barra: com cinquenta linhas, comparar números soltos
   coluna abaixo é mais lento que comparar comprimentos */
/* a célula precisa ser bloco: como `span` inline o `margin-left:auto` da barra
   não valia e ela escapava da coluna */
.custos-margem {
    display: flex; flex-direction: column; align-items: flex-end; gap: .18rem;
}
.custos-margem-n { font-weight: 700; font-size: .85rem; line-height: 1.2; }
.custos-margem-barra {
    height: 3px; border-radius: 99px; width: 48px; max-width: 100%;
    background: var(--linha); overflow: hidden;
}
.custos-margem-barra > span {
    display: block; height: 100%; border-radius: 99px; background: var(--positivo);
}
/* "sem custo" repetido em vinte e três linhas em vermelho vira ruído: a linha
   já está tingida e o campo já tem a borda vermelha. Aqui basta ser discreto. */
.custos-vazio { font-size: .74rem; color: var(--tinta-3); }

.custos-vazio-busca {
    padding: 1.6rem .2rem; text-align: center;
    font-size: .82rem; color: var(--tinta-3);
}
/* escondido pelo filtro ou pela busca */
.custos-linha[hidden] { display: none; }

.custos-acoes {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--linha);
}
/* o painel de custos tem topo próprio; o form não repete o respiro de cima */
.custos-painel .custos-form { padding-top: .6rem; }

@media (max-width: 1050px) {
    .custos-cabecalho, .custos-linha {
        grid-template-columns: 40px 2fr .8fr 1fr 1fr;
    }
    .custos-cabecalho span:nth-child(4), .custos-linha .custos-rec { display: none; }
}
@media (max-width: 780px) {
    .custos-cabecalho { display: none; }
    .custos-linha {
        grid-template-columns: 40px 1fr auto; gap: .3rem .7rem; padding: .7rem .2rem;
    }
    .custos-linha .custos-un, .custos-linha .num:nth-child(5) {
        font-size: .76rem; color: var(--tinta-3); text-align: left;
    }
    .custos-topo { flex-direction: column; align-items: stretch; }
    .custos-busca input { width: 100%; }
}

/* ---------------------------------------------- matriz do extrato por canal */
/* rola na horizontal dentro do próprio painel: com cinco canais a tabela passa
   da largura da tela, e a página inteira não pode rolar de lado por causa dela */
.matriz-caixa { overflow-x: auto; margin: .2rem -.2rem 0 -.2rem; padding: 0 .2rem; }
.matriz {
    width: 100%; border-collapse: collapse; font-size: .85rem;
    min-width: 620px;
}
.matriz th, .matriz td {
    padding: .5rem .7rem; text-align: right; white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.matriz thead th {
    font-size: .74rem; font-weight: 700; color: var(--tinta-2);
    border-bottom: 1px solid var(--borda); vertical-align: bottom;
}
.matriz tbody th {
    text-align: left; font-weight: 500; color: var(--tinta-2);
    font-size: .84rem;
}
.matriz thead th:first-child { text-align: left; }
.matriz-canal { display: inline-flex; align-items: center; gap: .35rem; }

.matriz tbody tr { border-bottom: 1px solid var(--linha); }
.matriz tbody tr:last-child { border-bottom: none; }
.matriz-entrada td, .matriz-entrada th { font-weight: 700; color: var(--tinta); }
.matriz-saida td { color: var(--negativo); }
.matriz-resultado {
    background: var(--fundo);
}
.matriz-resultado td, .matriz-resultado th {
    font-weight: 800; color: var(--tinta); font-size: .92rem;
    border-top: 1px solid var(--borda);
}
.matriz-pct td { font-weight: 700; }

/* nota sob o rótulo de uma linha ou coluna da matriz */
.matriz-nota {
    display: block; font-size: .7rem; font-weight: 400; color: var(--tinta-3);
    line-height: 1.3; white-space: normal;
}
/* a nota segue o alinhamento da célula: no cabeçalho, alinhada à esquerda ela
   caía sob a COLUNA ANTERIOR e parecia pertencer a ela */
.matriz thead th .matriz-nota { text-align: right; margin-top: .15rem; }
/* marca a célula cujo número é em parte estimado */
.matriz-estimado {
    color: var(--tinta-3); font-weight: 700; cursor: help; margin-left: .12rem;
}
/* subtotal: mais peso que uma linha comum, menos que o resultado */
.matriz-subtotal { background: var(--fundo); }
.matriz-subtotal td, .matriz-subtotal th {
    font-weight: 700; color: var(--tinta);
    border-top: 1px solid var(--linha);
}

/* ---------------------------------------------- a DRE (extrato geral)

   Era uma cascata com barra, porcentagem, valor e uma nota em CADA uma das
   catorze linhas — quatro elementos disputando atenção sobre a mesma linha, e
   nenhum deles com o destaque que os marcos da conta mereciam. Virou tabela,
   com o mesmo desenho do extrato por plataforma: a cor continua marcando
   entrada e saída, mas agora ela é a única coisa que varia. */
.dre { min-width: 480px; }
.dre th[scope="row"] { white-space: normal; }
.dre-pct {
    width: 5.5rem; color: var(--tinta-3); font-size: .78rem; font-weight: 600;
}
.dre-valor { width: 9.5rem; font-weight: 650; }
/* as saídas recuam: são subtrações da linha de cima, não itens de mesmo nível */
.dre-saida th[scope="row"] { padding-left: 1.5rem; }
.dre-entrada .dre-valor { color: var(--positivo); }
.dre-subtotal .dre-valor, .dre-subtotal th { font-size: .95rem; }
.dre-resultado .dre-valor { font-size: 1.1rem; letter-spacing: -.02em; }
/* nota de parâmetro faltando: o que está inflando a margem */
.dre-alerta {
    display: block; font-size: .7rem; font-weight: 600; line-height: 1.3;
    color: var(--vermelho-escuro); white-space: normal;
}

/* linha da DRE que abre a explicação ao toque — <details>, sem JS, funciona
   no celular (onde title= não existe) */
.dre-info > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center;
    flex-wrap: wrap; gap: .4rem;
}
.dre-info > summary::-webkit-details-marker { display: none; }
.dre-info > summary::after {
    content: '?'; display: inline-grid; place-items: center;
    width: 15px; height: 15px; border-radius: 50%; font-size: .62rem; font-weight: 800;
    color: var(--tinta-3); border: 1px solid var(--borda);
}
.dre-info[open] > summary::after { content: '×'; }
.dre-explica {
    margin: .45rem 0 .2rem 0; padding: .55rem .7rem; border-radius: var(--raio-p);
    background: var(--fundo); color: var(--tinta-2); font-size: .76rem; font-weight: 400;
    line-height: 1.5; white-space: normal; max-width: 560px;
}

/* selo de origem do número: medido (API/ERP), cadastro (digitado), estimado */
.selo-origem {
    font-size: .6rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    padding: .1rem .38rem; border-radius: 99px; white-space: nowrap;
}
.selo-medido   { background: var(--positivo-lavado, rgba(0,99,0,.085)); color: var(--positivo); }
.selo-cadastro { background: rgba(8, 102, 255, .09); color: #0B57C9; }
.selo-estimado { background: rgba(230, 167, 0, .14); color: #8A6400; }
.selo-misto    { background: rgba(230, 167, 0, .10); color: #6F5400; }

/* ---------------------------------------------- confiabilidade dos números */
.conf-barra {
    display: flex; height: 10px; border-radius: 99px; overflow: hidden;
    background: var(--linha); margin: .8rem 0 .7rem 0;
}
.conf-barra span { display: block; height: 100%; }
.conf-medido   { background: var(--positivo); }
.conf-cadastro { background: #0866FF; }
.conf-estimado { background: #E6A700; }
.conf-legenda {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .5rem 1rem; font-size: .8rem;
}
.conf-legenda div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .4rem; }
.conf-legenda i {
    width: 9px; height: 9px; border-radius: 3px; display: inline-block; align-self: center;
}
.conf-legenda b { color: var(--tinta); }
.conf-legenda span { color: var(--tinta-3); font-size: .74rem; flex-basis: 100%; padding-left: 13px; }
.conf-detalhe { margin-top: .9rem; }
.conf-detalhe > summary {
    cursor: pointer; font-size: .8rem; font-weight: 650; color: var(--tinta-2);
}
.conf-tabela { margin-top: .5rem; min-width: 640px; }
.conf-tabela td.conf-fonte {
    text-align: left; white-space: normal; color: var(--tinta-3); font-size: .76rem;
    min-width: 220px;
}
.conf-fora {
    margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--linha);
    font-size: .8rem; color: var(--tinta-2);
}
.conf-fora b { color: var(--tinta); }
.conf-limites-titulo {
    margin-top: .9rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--tinta-3);
}
.conf-limites {
    margin: .4rem 0 0 0; padding-left: 1.1rem; font-size: .8rem; line-height: 1.5;
    color: var(--tinta-2);
}
.conf-limites li { margin-bottom: .35rem; }
.conf-limites b { color: var(--tinta); }

/* ---------------------------------------------- quem paga o frete */
.frete-quem { margin-top: 1.6rem; padding-top: 1.1rem; border-top: 1px solid var(--linha); }
.frete-quem-sub {
    font-size: .78rem; color: var(--tinta-3); line-height: 1.4;
    margin: .15rem 0 .8rem 0;
}
.frete-quem-grade {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: .7rem;
}
.frete-quem-item {
    padding: .75rem .85rem; border: 1px solid var(--borda);
    border-radius: var(--raio-p); background: var(--branco);
    border-left-width: 3px;
}
.frete-quem-n {
    font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em;
    color: var(--tinta); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.frete-quem-pct { font-size: .72rem; color: var(--tinta-3); margin-bottom: .45rem; }
.frete-quem-tit { font-size: .82rem; font-weight: 700; color: var(--tinta); }
.frete-quem-ajuda { font-size: .72rem; color: var(--tinta-3); line-height: 1.35; }
.frete-quem-val {
    font-size: .72rem; color: var(--tinta-2); margin-top: .4rem;
    padding-top: .4rem; border-top: 1px solid var(--linha);
    font-variant-numeric: tabular-nums;
}
/* a cor diz de quem é a conta, na mesma escala do resto da tela */
.q-empresa  { border-left-color: var(--negativo); }
.q-parcial  { border-left-color: var(--tinta-3); }
.q-cliente  { border-left-color: var(--positivo); }
.q-semdado  { border-left-color: var(--borda); background: var(--fundo); }
.q-semdado .frete-quem-n { color: var(--tinta-3); }

/* painéis de aba: o de conteúdo não precisa do respiro extra do subtítulo */
[data-abas-conteudo] > [data-painel-alvo] > .painel-sub { min-height: 0; margin-bottom: .7rem; }

/* ---------------------------------------------- painel recolhível (parâmetros) */
.param-painel { padding: 0; overflow: hidden; }
.param-topo {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.35rem; cursor: pointer; list-style: none;
    transition: background .14s;
}
.param-topo::-webkit-details-marker { display: none; }
.param-topo:hover { background: var(--fundo); }
.param-topo .painel-titulo, .param-topo .painel-sub { margin-bottom: 0; }
.param-topo .painel-sub { margin-top: .1rem; }
.param-seta {
    width: 9px; height: 9px; flex: 0 0 auto;
    border-right: 2px solid var(--tinta-3);
    border-bottom: 2px solid var(--tinta-3);
    border-radius: 1px;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .16s, border-color .16s;
}
.param-painel[open] .param-seta {
    transform: translateY(1px) rotate(225deg);
    border-color: var(--vermelho-escuro);
}
.param-painel[open] .param-topo { border-bottom: 1px solid var(--linha); }

.param-form, .param-painel .custos-form {
    padding: 1.1rem 1.35rem 1.25rem 1.35rem;
}

/* Os parâmetros em LINHA, não em card.
   São oito campos preenchidos uma vez e quase nunca revisados; em card eles
   tomavam a altura da tela e empurravam o extrato para fora da dobra. O grupo
   virou um rótulo lateral estreito, e cada campo cabe numa linha só. */
.param-grupo {
    display: grid; grid-template-columns: 124px 1fr;
    gap: .1rem .9rem; align-items: start;
    padding: .55rem 0; border-bottom: 1px solid var(--linha);
}
.param-grupo:last-of-type { border-bottom: none; padding-bottom: .2rem; }
.param-grupo-titulo {
    font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--tinta-3);
    padding-top: .5rem;
}
.param-campos {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
    gap: .15rem .9rem;
}
.param-campo {
    display: grid; grid-template-columns: 1fr auto; gap: .7rem;
    align-items: center; padding: .3rem .45rem;
    border: 1px solid transparent; border-radius: var(--raio-p);
    transition: border-color .14s, background .14s;
}
.param-campo:hover { background: var(--fundo); }
.param-campo:focus-within {
    border-color: var(--vermelho); background: var(--branco);
    box-shadow: 0 0 0 3px rgba(230, 51, 41, .1);
}
.param-texto { min-width: 0; }
.param-rotulo {
    display: block; font-size: .78rem; font-weight: 650; color: var(--tinta);
    line-height: 1.25;
}
.param-ajuda {
    display: block; font-size: .68rem; color: var(--tinta-3); line-height: 1.3;
    /* deixa quebrar: cortar com reticências escondia justamente a parte que
       diz o que o número significa ("...sobre o faturamento") */
    text-wrap: pretty;
}
.param-entrada {
    display: flex; align-items: baseline; gap: .25rem; flex: 0 0 auto;
    width: 92px; padding: .18rem .4rem;
    border: 1px solid var(--borda); border-radius: var(--raio-p);
    background: var(--branco);
}
.param-unidade { font-size: .72rem; font-weight: 600; color: var(--tinta-3); }
.param-entrada input {
    flex: 1; min-width: 0; width: 100%;
    border: none; background: none; padding: 0;
    font-size: .92rem; font-weight: 700; color: var(--tinta);
    font-family: inherit; font-variant-numeric: tabular-nums;
    letter-spacing: -.01em; text-align: right;
}
.param-entrada input:focus { outline: none; }
/* parâmetro em zero: é ele que faz a margem parecer melhor do que é */
.param-zero .param-entrada {
    background: rgba(230, 51, 41, .05); border-color: rgba(230, 51, 41, .3);
}
.param-zero .param-rotulo { color: var(--vermelho-escuro); }

@media (max-width: 640px) {
    .param-grupo { grid-template-columns: 1fr; gap: .3rem; }
    .param-grupo-titulo { padding-top: 0; }
}

.param-acoes {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    margin-top: 1.2rem; padding-top: .95rem; border-top: 1px solid var(--linha);
}

/* ---------------------------------------------- tela de frete */
.frete-gratis {
    margin-top: .9rem; padding-top: .8rem;
    border-top: 1px solid rgba(38, 38, 46, .07);
}
.frete-gratis-n {
    font-size: 1.35rem; font-weight: 750; color: var(--negativo);
    letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.frete-gratis-r {
    display: block; font-size: .78rem; color: var(--tinta-3);
    line-height: 1.5; margin-top: .15rem;
}
.frete-gratis-r b { color: var(--tinta-2); font-weight: 700; }

/* ---------------------------------------------- mapa do Brasil (frete) */
.mapa-metricas { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .9rem; }
.mapa-metricas .chip { border: 1px solid var(--borda); cursor: pointer; font-family: inherit; }

.mapa-corpo {
    display: grid; grid-template-columns: 1.4fr 1fr; gap: 1.2rem; align-items: center;
}

.mapa-svg { width: 100%; height: auto; max-height: 460px; display: block; }
.mapa-uf {
    fill: var(--linha);
    stroke: var(--branco);
    stroke-width: 2;
    stroke-linejoin: round;
    transition: fill .14s, filter .14s;
}
.mapa-uf[data-uf] { cursor: pointer; }
.mapa-uf[data-uf]:hover, .mapa-uf[data-uf]:focus-visible {
    filter: brightness(.9);
    outline: none;
}
/* estado sem entrega medida: fica desenhado, em cinza claro — apagá-lo abriria
   um buraco no país, e a ausência de entrega também é informação */
.mapa-uf-vazio { fill: #F0F0F3; }
/* o selecionado ganha contorno escuro em vez de mudar de cor: mudar a cor
   quebraria a leitura da escala */
.mapa-uf-ativo { stroke: var(--tinta); stroke-width: 3; }

.mapa-detalhe {
    background: var(--fundo); border: 1px solid var(--borda);
    border-radius: var(--raio-p); padding: 1rem 1.1rem;
}
.mapa-detalhe-uf {
    font-size: 1.6rem; font-weight: 800; color: var(--tinta);
    letter-spacing: -.03em; line-height: 1;
}
.mapa-detalhe-sub { font-size: .76rem; color: var(--tinta-3); margin-top: .2rem; }
.mapa-detalhe-linhas { margin-top: .9rem; }
.mapa-linha {
    display: flex; justify-content: space-between; align-items: baseline; gap: .8rem;
    padding: .32rem 0; border-bottom: 1px solid var(--linha);
    font-size: .8rem; color: var(--tinta-2);
}
.mapa-linha:last-child { border-bottom: none; }
.mapa-linha b {
    color: var(--tinta); font-weight: 700;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.mapa-escala {
    display: flex; align-items: center; gap: .5rem;
    margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--linha);
    font-size: .7rem; color: var(--tinta-3);
    font-variant-numeric: tabular-nums;
}
.mapa-escala-barra {
    flex: 1; height: 8px; border-radius: 99px;
    background: linear-gradient(90deg, #FDECEA, #F09A92, #D2453A, #8E1913);
}

@media (max-width: 900px) {
    .mapa-corpo { grid-template-columns: 1fr; }
    .mapa-grade { max-width: 100%; margin: 0 auto; }
}

/* ============================================================
   TELA FABRICAÇÃO — a ficha técnica do par
   ============================================================ */

.fab-corpo { padding: 1.1rem 1.35rem 1.25rem 1.35rem; }
.fab-oculto { display: none; }

/* ------------------------------------------------ componentes (lista de preços) */
.fab-comp { min-width: 720px; }
.fab-comp tbody th { font-weight: 650; color: var(--tinta); }
.fab-comp td, .fab-comp th { padding: .45rem .7rem; }
.fab-col-preco { width: 220px; }
.fab-inativo { opacity: .55; }
.fab-acao { width: 40px; }

/* campo de preço: o R$ e a unidade abraçam o número para ninguém confundir
   "preço da unidade de compra" com "valor gasto no par" */
.fab-entrada {
    display: inline-flex; align-items: baseline; gap: .28rem;
    padding: .28rem .5rem; border: 1px solid var(--borda);
    border-radius: 9px; background: var(--branco);
    transition: border-color .14s, box-shadow .14s;
}
.fab-entrada:focus-within {
    border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(230, 51, 41, .12);
}
.fab-moeda, .fab-por {
    font-size: .72rem; font-weight: 600; color: var(--tinta-3); white-space: nowrap;
}
.fab-entrada input {
    width: 72px; border: none; background: none; padding: 0; text-align: right;
    font-size: .86rem; font-weight: 650; font-family: inherit;
    font-variant-numeric: tabular-nums; color: var(--tinta);
}
.fab-entrada input:focus { outline: none; }

.fab-lixo {
    border: none; background: none; cursor: pointer; padding: .1rem .35rem;
    font-size: 1.15rem; line-height: 1; color: var(--tinta-3);
    border-radius: 7px; transition: color .14s, background .14s;
}
.fab-lixo:hover { color: var(--vermelho); background: var(--vermelho-lavado); }

/* ------------------------------------------------ formulário de cadastro novo */
.fab-novo {
    margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--linha);
}
.fab-novo-titulo {
    font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--tinta-3); margin-bottom: .6rem;
}
.fab-novo-campos {
    display: flex; flex-wrap: wrap; gap: .7rem; align-items: flex-end;
}
.fab-novo-campos label { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.fab-novo-campos label > span {
    font-size: .72rem; font-weight: 600; color: var(--tinta-2);
}
.fab-novo-campos input, .fab-novo-campos select {
    padding: .42rem .6rem; border: 1px solid var(--borda); border-radius: 9px;
    font-family: inherit; font-size: .84rem; color: var(--tinta);
    background: var(--branco); min-width: 120px;
}
.fab-novo-campos input:focus, .fab-novo-campos select:focus {
    outline: none; border-color: var(--vermelho);
    box-shadow: 0 0 0 3px rgba(230, 51, 41, .1);
}
.fab-novo .linha-aux { margin-top: .6rem; display: block; }

/* ------------------------------------------------ uma linha de produção */
.fab-linha {
    border: 1px solid var(--borda); border-radius: var(--raio-p);
    margin-top: .7rem; overflow: hidden; background: var(--branco);
}
.fab-linha[open] { border-color: var(--tinta-3); }
.fab-linha-topo {
    display: grid; grid-template-columns: 1fr auto auto 14px;
    gap: 1rem; align-items: center;
    padding: .8rem 1rem; cursor: pointer; list-style: none;
    transition: background .14s;
}
.fab-linha-topo::-webkit-details-marker { display: none; }
.fab-linha-topo:hover { background: var(--fundo); }
.fab-linha-id b { font-size: .95rem; font-weight: 800; letter-spacing: -.02em; }
.fab-linha-id small {
    display: block; font-size: .76rem; color: var(--tinta-3); margin-top: .05rem;
}
.fab-linha-meta { font-size: .76rem; color: var(--tinta-3); text-align: right; }
.fab-linha-custo { text-align: right; font-variant-numeric: tabular-nums; }
.fab-linha-custo b { font-size: 1.05rem; font-weight: 800; letter-spacing: -.02em; }
.fab-linha-custo small { display: block; font-size: .68rem; color: var(--tinta-3); }
.fab-sem-ficha {
    font-size: .74rem; font-weight: 600; color: var(--vermelho-escuro);
}
.fab-linha[open] .param-seta { transform: translateY(1px) rotate(225deg); }
.fab-linha-corpo { padding: .2rem 1rem 1.1rem 1rem; border-top: 1px solid var(--linha); }

/* ------------------------------------------------ o editor da ficha */
.ficha { margin-top: .9rem; }
.ficha-cabecalho, .ficha-linha {
    display: grid; grid-template-columns: 2.4fr 1fr 1.2fr .9fr;
    gap: .8rem; align-items: center;
}
.ficha-cabecalho {
    padding: .4rem .2rem .5rem .2rem; border-bottom: 1px solid var(--borda);
    font-size: .68rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--tinta-3);
}
.ficha-cabecalho .num, .ficha-linha .num { text-align: right; }
.ficha-grupo {
    font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--tinta-3);
    padding: .8rem .2rem .25rem .2rem;
}
.ficha-linha {
    padding: .3rem .2rem; border-bottom: 1px solid var(--linha);
    font-size: .85rem; font-variant-numeric: tabular-nums;
    transition: background .12s;
}
.ficha-linha:hover { background: var(--fundo); }
/* componente que ENTRA no par ganha peso; o resto fica de lembrete do que existe */
.ficha-usada { background: rgba(0, 99, 0, .035); }
.ficha-usada:hover { background: rgba(0, 99, 0, .06); }
.ficha-nome { font-weight: 600; color: var(--tinta); min-width: 0; }
.ficha-linha:not(.ficha-usada) .ficha-nome { font-weight: 400; color: var(--tinta-2); }
.ficha-preco { color: var(--tinta-3); font-size: .78rem; }
.ficha-preco small { font-size: .68rem; }
.ficha-entrada {
    display: inline-flex; align-items: baseline; gap: .28rem;
    padding: .26rem .45rem; border: 1px solid var(--borda);
    border-radius: 9px; background: var(--branco);
}
.ficha-entrada:focus-within {
    border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(230, 51, 41, .12);
}
.ficha-entrada input {
    width: 64px; border: none; background: none; padding: 0; text-align: right;
    font-size: .85rem; font-weight: 650; font-family: inherit;
    font-variant-numeric: tabular-nums; color: var(--tinta);
}
.ficha-entrada input:focus { outline: none; }
.ficha-un { font-size: .7rem; font-weight: 600; color: var(--tinta-3); }
.ficha-sub { font-weight: 650; }
.ficha-total {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: .8rem .2rem .2rem .2rem; margin-top: .3rem;
    border-top: 2px solid var(--tinta); font-weight: 700;
}
.ficha-total-n {
    font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------ composição do par */
.fab-composicao { margin-top: 1.4rem; }
.fab-composicao-barra {
    display: flex; height: 12px; border-radius: 99px; overflow: hidden;
    background: var(--linha); margin: .5rem 0 .6rem 0;
}
.fab-fatia { display: block; height: 100%; }
.fab-composicao-legenda {
    display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
    font-size: .76rem; color: var(--tinta-2);
}
.fab-leg { display: inline-flex; align-items: baseline; gap: .3rem; }
.fab-leg .bolinha { align-self: center; }
.fab-leg b { color: var(--tinta); font-weight: 700; }
.fab-leg small { color: var(--tinta-3); }

/* uma cor por categoria — a mesma na barra e na legenda */
.fab-cat-couro       { background: #8C4A2F; }
.fab-cat-sola        { background: #3F3F46; }
.fab-cat-palmilha    { background: #C08A3E; }
.fab-cat-forro       { background: #A8894C; }
.fab-cat-aviamento   { background: #7A8B99; }
.fab-cat-mao_de_obra { background: #E63329; }
.fab-cat-embalagem   { background: #B7B7C0; }
.fab-cat-outro       { background: #D6D6DC; }

/* ------------------------------------------------ modelos de uma linha */
.fab-modelos { margin-top: 1.4rem; }
.fab-modelo-grade {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: .5rem; margin-top: .5rem;
}
.fab-modelo {
    display: grid; grid-template-columns: 40px 1fr auto;
    gap: .6rem; align-items: center;
    padding: .45rem .55rem; border: 1px solid var(--borda);
    border-radius: var(--raio-p); background: var(--branco);
}
/* modelo com ficha própria não usa a ficha desta linha — precisa se distinguir */
.fab-modelo-excecao { border-color: var(--tinta-3); border-left-width: 3px; }
.fab-modelo-texto { min-width: 0; }
.fab-modelo-texto b { font-size: .82rem; font-weight: 700; display: block; }
.fab-modelo-texto small { font-size: .7rem; color: var(--tinta-3); }
.fab-modelo-custo { text-align: right; font-variant-numeric: tabular-nums; }
.fab-modelo-custo b { font-size: .86rem; font-weight: 700; }
.fab-origem { display: block; font-size: .64rem; }
.fab-origem-ficha_linha  { color: var(--positivo); }
.fab-origem-ficha_modelo { color: var(--positivo); font-weight: 700; }
.fab-origem-manual       { color: var(--tinta-3); }

/* ------------------------------------------------ ações destrutivas */
.fab-apagar-linha { margin-top: 1.2rem; }
.fab-link-perigo {
    border: none; background: none; padding: 0; cursor: pointer;
    font-family: inherit; font-size: .74rem; color: var(--tinta-3);
    text-decoration: underline; text-underline-offset: 2px;
}
.fab-link-perigo:hover { color: var(--vermelho); }

/* ------------------------------------------------ sugestão de linha */
.fab-sugestao {
    display: flex; flex-wrap: wrap; gap: .9rem; align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem; margin-bottom: 1rem;
    border: 1px solid var(--borda); border-left: 3px solid var(--vermelho);
    border-radius: var(--raio-p); background: var(--vermelho-lavado);
    font-size: .82rem; line-height: 1.5;
}
.fab-sugestao .linha-aux { display: block; margin-top: .25rem; }
.fab-col-linha { width: 260px; }
.fab-col-linha select, td select {
    width: 100%; padding: .34rem .5rem; border: 1px solid var(--borda);
    border-radius: 9px; font-family: inherit; font-size: .8rem;
    background: var(--branco); color: var(--tinta);
}

@media (max-width: 900px) {
    .fab-linha-topo { grid-template-columns: 1fr auto 14px; }
    .fab-linha-meta { display: none; }
    .ficha-cabecalho { display: none; }
    .ficha-linha {
        grid-template-columns: 1fr auto auto; gap: .3rem .6rem; padding: .55rem .2rem;
    }
    .ficha-preco { grid-column: 1; font-size: .7rem; }
    .fab-corpo { padding: 1rem .9rem 1.1rem .9rem; }
}

/* modelo cujo custo vem da ficha técnica: sem campo editável, porque digitar
   aqui não mudaria nada enquanto a ficha existir — no lugar, o valor calculado
   e o atalho para onde ele de fato se muda */
.custos-daficha {
    display: flex; flex-direction: column; align-items: flex-end; gap: .05rem;
}
.custos-daficha b { font-size: .86rem; font-weight: 700; color: var(--tinta); }
.custos-daficha a {
    font-size: .66rem; color: var(--positivo); text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.custos-daficha a:hover { color: var(--vermelho); }
.custos-ficha { background: rgba(0, 99, 0, .03); }

/* ============================================================
   PREMIUM
   ============================================================
   Última camada: superfície e controle, nenhuma regra de posição. Três ideias:

   1. FILTROS VIRAM UMA BARRA. Cada filtro era uma caixa branca solta, e três
      caixas lado a lado liam como três formulários. Agora é UMA barra de
      controle — o filtro é um segmento dela, com o rótulo dentro, separados
      por fio de cabelo. Só no desktop: no celular a faixa já é fixa no rodapé
      e tem regras próprias (ver o bloco "@media (max-width: 900px)" acima).
   2. ATALHOS VIRAM CONTROLE SEGMENTADO: uma trilha, uma pílula acesa.
   3. SUPERFÍCIES COM LUZ. Card é branco com três camadas — fio de luz no topo
      (inset), contato curto e halo longo. A variação vira selo: a seta e o
      número numa pílula tingida, em vez de texto verde solto na linha.
   ============================================================ */

:root {
    --raio: 20px;
    --raio-p: 14px;
    --superficie-borda: rgba(38, 38, 46, .075);
    --luz: inset 0 1px 0 rgba(255, 255, 255, .9);
    --sombra-1: var(--luz), 0 1px 2px rgba(38, 38, 46, .04), 0 2px 8px -2px rgba(38, 38, 46, .05);
    --sombra-2: var(--luz), 0 2px 4px rgba(38, 38, 46, .05), 0 14px 32px -10px rgba(38, 38, 46, .16);
    --positivo-lavado: rgba(0, 99, 0, .085);
    --negativo-lavado: rgba(208, 59, 59, .09);
}

html, body {
    font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
/* halo quente da marca no alto da página — atmosfera, não enfeite: some
   atrás dos cards e só aparece no respiro entre eles */
body {
    background:
        radial-gradient(1100px 520px at 88% -8%, rgba(230, 51, 41, .055), transparent 62%),
        radial-gradient(900px 480px at -10% 30%, rgba(142, 25, 19, .025), transparent 60%),
        var(--fundo);
    background-attachment: fixed;
}

/* ---------------------------------------------- cabeçalho da página */
.pagina-titulo { font-size: 2rem; font-weight: 800; letter-spacing: -.04em; }
.pagina-sub { color: var(--tinta-2); font-size: .92rem; }

/* ---------------------------------------------- superfícies */
.painel, .kpi, .vivo-metrica, .integra-card, .lp-card, .rfm-cel {
    border: 1px solid var(--superficie-borda);
    box-shadow: var(--sombra-1);
}
.painel, .kpi, .vivo-metrica, .integra-card { border-radius: var(--raio); }
.kpi { padding: 1.2rem 1.3rem 1rem 1.3rem; }
.kpi:hover, .vivo-metrica:hover, .lp-card:hover, .rfm-cel:hover { box-shadow: var(--sombra-2); }
.painel-titulo { font-size: 1.04rem; font-weight: 750; letter-spacing: -.02em; }

.kpi-label, .vivo-metrica-label, .periodo-heroi-rotulo {
    font-size: .66rem; letter-spacing: .1em; color: var(--tinta-3); font-weight: 750;
}
.kpi-valor { font-weight: 800; letter-spacing: -.04em; }

/* card de destaque: a barra de marca no topo vira um fio que acaba em
   degradê, e o fundo recebe o mesmo rubor do cartão principal */
.kpi-destaque, .periodo-heroi {
    border-color: rgba(196, 36, 27, .18);
    background: linear-gradient(180deg, rgba(254, 242, 241, .8) 0%, var(--branco) 46%);
}
.periodo-heroi::before, .kpi-destaque::before {
    height: 3px;
    background: linear-gradient(90deg, var(--vermelho-escuro) 0%, var(--vermelho) 55%, rgba(230, 51, 41, 0) 100%);
}

/* ---- variação como selo */
.kpi-rodape .d-pos, .kpi-rodape .d-neg, .kpi-rodape .d-neutro,
.vivo-metrica-rodape .d-pos, .vivo-metrica-rodape .d-neg,
.periodo-heroi-delta .d-pos, .periodo-heroi-delta .d-neg, .periodo-heroi-delta .d-neutro {
    display: inline-flex; align-items: center; gap: .2rem;
    padding: .12rem .5rem .14rem .45rem; border-radius: 99px;
    font-size: .74rem; font-weight: 750; letter-spacing: -.005em;
    font-variant-numeric: tabular-nums; margin-right: .15rem;
}
.periodo-heroi-delta .d-pos, .periodo-heroi-delta .d-neg { font-size: .84rem; padding: .18rem .6rem; }
.kpi-rodape .d-pos, .periodo-heroi-delta .d-pos, .vivo-metrica-rodape .d-pos { background: var(--positivo-lavado); }
.kpi-rodape .d-neg, .periodo-heroi-delta .d-neg, .vivo-metrica-rodape .d-neg { background: var(--negativo-lavado); }
.kpi-rodape .d-neutro, .periodo-heroi-delta .d-neutro { background: var(--fundo); }
.kpi-rodape .d-ref, .periodo-heroi-delta .d-ref { font-size: .74rem; }

/* ---------------------------------------------- barra de filtros (desktop) */
@media (min-width: 901px) {
    .painel.faixa-filtros {
        background: rgba(255, 255, 255, .86);
        -webkit-backdrop-filter: saturate(1.4) blur(10px);
        backdrop-filter: saturate(1.4) blur(10px);
        border: 1px solid var(--superficie-borda);
        border-radius: 18px;
        box-shadow: var(--sombra-1);
        padding: .3rem;
        margin-bottom: 1rem;
        position: relative; z-index: 30;   /* o popover aberto passa por cima dos cards */
    }
    .faixa-filtros .filtros-grade { gap: 0; align-items: stretch; flex-wrap: nowrap; }

    .faixa-filtros .filtro {
        position: relative; min-width: 0;
        padding: .5rem .95rem .55rem .95rem;
        border-radius: 14px;
        transition: background .16s ease, box-shadow .16s ease;
    }
    /* o fio entre segmentos some ao lado do segmento em foco */
    .faixa-filtros .filtro + .filtro::before {
        content: ''; position: absolute; left: 0; top: 22%; bottom: 22%;
        width: 1px; background: var(--linha);
    }
    .faixa-filtros .filtro:hover { background: rgba(243, 243, 246, .9); }
    .faixa-filtros .filtro:hover::before,
    .faixa-filtros .filtro:hover + .filtro::before,
    .faixa-filtros .filtro:has(.pop[open])::before,
    .faixa-filtros .filtro:has(.pop[open]) + .filtro::before { opacity: 0; }
    .faixa-filtros .filtro:has(.pop[open]) {
        background: var(--branco);
        box-shadow: 0 0 0 1px rgba(196, 36, 27, .16), 0 8px 22px -10px rgba(196, 36, 27, .35);
    }

    .faixa-filtros .rotulo-filtro {
        font-size: .62rem; letter-spacing: .12em; color: var(--tinta-3);
        font-weight: 750; margin-bottom: .12rem;
    }

    /* o botão perde a caixa: o segmento inteiro é a superfície */
    .faixa-filtros .pop-botao {
        background: none; border: none; box-shadow: none; border-radius: 0;
        padding: 0; font-size: .95rem; font-weight: 650; color: var(--tinta);
        align-items: center;
    }
    .faixa-filtros .pop-botao:hover { box-shadow: none; color: var(--tinta); }
    .faixa-filtros .pop[open] .pop-botao { box-shadow: none; }
    /* chevron desenhado em CSS, que gira ao abrir */
    .faixa-filtros .pop-botao::after {
        content: ''; flex: 0 0 auto; width: 7px; height: 7px; margin: -3px 2px 0 .35rem;
        border-right: 1.75px solid var(--tinta-3); border-bottom: 1.75px solid var(--tinta-3);
        transform: rotate(45deg); transition: transform .18s ease, border-color .18s ease;
    }
    .faixa-filtros .pop[open] .pop-botao::after {
        transform: rotate(-135deg); margin-top: 3px; border-color: var(--vermelho);
    }
    .faixa-filtros .pop-resumo {
        font-size: .8rem; color: var(--tinta-3); font-weight: 500;
        font-variant-numeric: tabular-nums;
    }

    .faixa-filtros .pop-corpo { top: calc(100% + .9rem); left: -.95rem; }

    /* select nativo, vestido: sem borda, com o mesmo chevron */
    .faixa-filtros .form-select select {
        appearance: none; -webkit-appearance: none;
        /* largura do conteúdo, e não 100%: o chevron fica colado ao texto,
           como nos segmentos de popover ao lado */
        width: auto; max-width: 100%;
        border: none; background: transparent; padding: 0 1.4rem 0 0;
        font-size: .95rem; font-weight: 650; color: var(--tinta);
        background-image:
            linear-gradient(45deg, transparent 50%, var(--tinta-3) 50%),
            linear-gradient(135deg, var(--tinta-3) 50%, transparent 50%);
        background-position: calc(100% - 8px) 55%, calc(100% - 3px) 55%;
        background-size: 5px 5px, 5px 5px;
        background-repeat: no-repeat;
        outline: none;
    }
    .faixa-filtros .form-select select:focus-visible { color: var(--vermelho-escuro); }
}

/* ---------------------------------------------- popover */
.pop-corpo {
    border: 1px solid var(--superficie-borda);
    border-radius: 18px;
    box-shadow: var(--luz), 0 4px 10px rgba(38, 38, 46, .06), 0 28px 60px -18px rgba(38, 38, 46, .30);
    padding: 1rem 1.05rem;
    animation: pop-entra .16s ease-out;
}
@keyframes pop-entra {
    from { opacity: 0; transform: translateY(-4px) scale(.985); }
    to   { opacity: 1; transform: none; }
}
.atalho { border-radius: 10px; padding: .42rem .65rem; transition: background .12s, color .12s; }
.atalho.ativo {
    background: linear-gradient(180deg, var(--vermelho-lavado), rgba(254, 242, 241, .6));
    box-shadow: inset 0 0 0 1px rgba(196, 36, 27, .14);
}
.form-calendario input[type="date"] {
    border-radius: 12px; padding: .55rem .7rem;
    transition: border-color .14s, box-shadow .14s;
}
.form-calendario input[type="date"]:focus {
    outline: none; border-color: rgba(196, 36, 27, .45);
    box-shadow: 0 0 0 4px rgba(230, 51, 41, .10);
}
.botao-primario, .botao-largo {
    background: linear-gradient(180deg, #EC4337 0%, var(--vermelho) 45%, var(--vermelho-escuro) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(142, 25, 19, .25),
                0 6px 16px -6px rgba(196, 36, 27, .45);
    border-radius: 12px;
    transition: filter .14s, box-shadow .14s, transform .14s;
}
.botao-primario:hover, .botao-largo:hover {
    filter: brightness(1.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(142, 25, 19, .25),
                0 10px 22px -8px rgba(196, 36, 27, .55);
}
.botao-primario:active, .botao-largo:active { transform: translateY(1px); }

/* ---------------------------------------------- atalhos: controle segmentado */
.chips {
    display: inline-flex; gap: 2px; padding: 3px;
    background: rgba(38, 38, 46, .055);
    border-radius: 99px;
    box-shadow: inset 0 1px 2px rgba(38, 38, 46, .06);
    margin: 0 0 1rem 0;
}
.chip {
    border: none; background: transparent; box-shadow: none;
    padding: .42rem .95rem; font-size: .8rem; font-weight: 650; color: var(--tinta-2);
}
.chip:hover { background: rgba(255, 255, 255, .7); color: var(--tinta); box-shadow: none; transform: none; }
.chip-ativo, .chip-ativo:hover {
    color: var(--branco);
    background: linear-gradient(180deg, #EC4337 0%, var(--vermelho) 50%, var(--vermelho-escuro) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(142, 25, 19, .3),
                0 4px 12px -4px rgba(196, 36, 27, .5);
}

/* ---------------------------------------------- avisos */
.aviso {
    border: 1px solid var(--superficie-borda); border-radius: 16px;
    box-shadow: var(--sombra-1);
}
.aviso-alerta {
    border-left: 1px solid var(--superficie-borda);
    background: linear-gradient(90deg, rgba(254, 242, 241, .9), var(--branco) 38%);
    box-shadow: inset 3px 0 0 var(--negativo), var(--sombra-1);
}
.aviso-ok {
    border-left: 1px solid var(--superficie-borda);
    background: linear-gradient(90deg, rgba(0, 99, 0, .05), var(--branco) 38%);
    box-shadow: inset 3px 0 0 var(--positivo), var(--sombra-1);
}

/* ---------------------------------------------- tabelas */
.tabela thead th { font-size: .66rem; letter-spacing: .09em; font-weight: 750; }
.tabela tbody tr { transition: background .1s; }

@media (prefers-reduced-motion: reduce) {
    .pop-corpo { animation: none; }
    .faixa-filtros .pop-botao::after { transition: none; }
}

/* ============================================================
   META ADS
   ============================================================ */

/* ---- selo de ROAS: verde acima da média da conta, neutro abaixo. Neutro e
   não vermelho de propósito: abaixo da média não é prejuízo */
.roas-selo {
    display: inline-block; padding: .1rem .5rem; border-radius: 99px;
    font-weight: 750; font-size: .8rem; font-variant-numeric: tabular-nums;
}
.roas-bom  { background: var(--positivo-lavado); color: var(--positivo); }
.roas-ruim { background: var(--fundo); color: var(--tinta-2); }

/* ---- funil */
.fn-cab, .fn-etapa {
    display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 5.5rem 4rem 5rem;
    align-items: center; gap: .8rem;
}
.fn-cab {
    font-size: .64rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
    color: var(--tinta-3); padding-bottom: .4rem; border-bottom: 1px solid var(--linha);
}
.fn-cab span:nth-child(n+3) { text-align: right; }
.fn-etapa { padding: .5rem 0; border-bottom: 1px solid var(--linha); font-size: .86rem; }
.fn-etapa:last-child { border-bottom: none; }
.fn-nome { color: var(--tinta); font-weight: 600; }
.fn-trilho { height: 10px; background: var(--fundo); border-radius: 99px; overflow: hidden; }
.fn-trilho span {
    display: block; height: 100%; border-radius: 99px;
    background: linear-gradient(90deg, #1D5FB8, #2a78d6);
}
.fn-topo .fn-trilho span { background: #C9D9EF; }
.fn-valor, .fn-taxa, .fn-custo { text-align: right; font-variant-numeric: tabular-nums; }
.fn-valor { font-weight: 700; color: var(--tinta); }
.fn-taxa { color: var(--tinta-2); font-weight: 600; }
.fn-custo { color: var(--tinta-3); font-size: .8rem; }
.fn-etapa[data-pior] .fn-taxa {
    color: var(--negativo); background: var(--negativo-lavado);
    border-radius: 99px; padding: .05rem .4rem; justify-self: end;
}

/* ---- leitura cruzada */
.lc-grade { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem .8rem; margin-bottom: .9rem; }
.lc-grade div { display: flex; flex-direction: column; gap: .15rem; }
.lc-grade span { font-size: .72rem; color: var(--tinta-3); font-weight: 600; }
.lc-grade b {
    font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; color: var(--tinta);
    font-variant-numeric: tabular-nums;
}
.lc-barra { height: 8px; background: var(--fundo); border-radius: 99px; overflow: hidden; margin-bottom: .2rem; }
.lc-barra span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #1D5FB8, #2a78d6); }

/* ---- criativos */
.cabecalho .chips { margin: 0; }
.cr-grade {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .8rem; margin-bottom: .6rem;
}
.cr-card {
    background: var(--branco); border: 1px solid var(--superficie-borda); border-radius: var(--raio);
    box-shadow: var(--sombra-1); overflow: hidden; display: flex; flex-direction: column;
    transition: box-shadow .16s ease, transform .16s ease;
}
.cr-card:hover { box-shadow: var(--sombra-2); transform: translateY(-2px); }
.cr-midia {
    position: relative; aspect-ratio: 4 / 5; background:
        linear-gradient(135deg, var(--fundo), #E9E9EE);
    overflow: hidden;
}
.cr-midia img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cr-status, .cr-tipo {
    position: absolute; top: .6rem; font-size: .66rem; font-weight: 750; letter-spacing: .04em;
    padding: .18rem .5rem; border-radius: 99px; backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.cr-status { left: .6rem; background: rgba(38, 38, 46, .55); color: var(--branco); }
.cr-status.ativo { background: rgba(0, 99, 0, .82); }
.cr-tipo { right: .6rem; background: rgba(255, 255, 255, .85); color: var(--tinta); }
.cr-corpo { padding: .8rem .9rem .9rem .9rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.cr-nome {
    font-size: .86rem; font-weight: 700; color: var(--tinta); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cr-camp { font-size: .72rem; color: var(--tinta-3); margin-top: -.3rem;
           white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.cr-numeros div { display: flex; flex-direction: column; gap: .1rem; }
.cr-numeros span { font-size: .64rem; color: var(--tinta-3); font-weight: 650; text-transform: uppercase; letter-spacing: .06em; }
.cr-numeros b { font-size: .98rem; font-weight: 800; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cr-numeros b.roas-selo { font-size: .86rem; justify-self: start; width: max-content; }
.cr-barra { height: 4px; background: var(--fundo); border-radius: 99px; overflow: hidden; }
.cr-barra span { display: block; height: 100%; border-radius: 99px; background: var(--vermelho); opacity: .75; }
.cr-meta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; font-size: .74rem; color: var(--tinta-3); }
.cr-meta b { color: var(--tinta); font-weight: 700; }
.cr-link { font-size: .74rem; font-weight: 650; color: var(--vermelho-escuro); margin-top: auto; }
.cr-link:hover { text-decoration: underline; }

/* ---- posicionamentos */
.seg-cab, .seg-item {
    display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem 4rem;
    align-items: center; gap: .7rem;
}
.seg-cab {
    font-size: .64rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
    color: var(--tinta-3); padding-bottom: .4rem; border-bottom: 1px solid var(--linha);
}
.seg-cab span:nth-child(n+2), .seg-item > span:nth-child(n+2) { text-align: right; }
.seg-item { padding: .5rem 0; border-bottom: 1px solid var(--linha); font-size: .84rem; }
.seg-item:last-child { border-bottom: none; }
.seg-nome { color: var(--tinta); font-weight: 550; min-width: 0; }
.seg-n { color: var(--tinta-2); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
    .fn-cab, .fn-etapa { grid-template-columns: 6.5rem minmax(0, 1fr) 4.5rem 3.5rem; }
    .fn-cab span:nth-child(5), .fn-custo { display: none; }
    .cr-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   GOOGLE ADS
   ============================================================ */

/* ---- leilão: uma barra com as três fatias (apareceu / perdeu por orçamento /
   perdeu por ranking), que somam as impressões elegíveis */
.leilao-barra {
    display: flex; height: 16px; border-radius: 99px; overflow: hidden;
    background: var(--fundo); margin: .2rem 0 .8rem 0;
    box-shadow: inset 0 1px 2px rgba(38, 38, 46, .08);
}
.leilao-barra span { display: block; height: 100%; }
.leilao-barra span + span { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .55); }
.leilao-legenda { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .8rem; color: var(--tinta-2); }
.leilao-legenda span { display: inline-flex; align-items: center; gap: .4rem; }
.leilao-legenda i { width: 10px; height: 10px; border-radius: 3px; }
.leilao-legenda b { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* termo que não converteu: neutro-escuro, não vermelho — pode ser prospecção */
.roas-zero { background: var(--fundo); color: var(--tinta-3); font-weight: 650; font-size: .72rem; }

/* resumo no canto do cabeçalho de "Termos de pesquisa" */
.termo-resumo { display: flex; flex-direction: column; align-items: flex-end; gap: .05rem; }
.termo-resumo span {
    font-size: .64rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-3);
}
.termo-resumo b {
    font-size: 1.5rem; font-weight: 800; letter-spacing: -.03em; color: var(--tinta);
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.termo-resumo i { font-style: normal; font-size: .72rem; color: var(--tinta-3); }

/* ============================================================
   MERCADO ADS
   ============================================================ */

/* pago × orgânico: uma barra só, duas fatias */
.po-barra {
    display: flex; height: 16px; border-radius: 99px; overflow: hidden;
    background: var(--fundo); margin: .2rem 0 .8rem 0;
    box-shadow: inset 0 1px 2px rgba(38, 38, 46, .08);
}
.po-barra span { display: block; height: 100%; }
.po-barra span + span { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .55); }

.po-destaque { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .7rem; }
.po-destaque b {
    font-size: 1.8rem; font-weight: 800; letter-spacing: -.035em; color: var(--vermelho-escuro);
    font-variant-numeric: tabular-nums; line-height: 1.1;
}
.po-destaque span { font-size: .78rem; color: var(--tinta-3); }

/* linha de anúncio dentro da tabela: miniatura + título + código */
.an-item { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.an-item img, .an-sem {
    width: 38px; height: 38px; flex: 0 0 auto; border-radius: 8px; object-fit: cover;
    background: var(--fundo); border: 1px solid var(--linha);
}
.an-item span { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.an-item b { font-weight: 650; color: var(--tinta); font-size: .82rem; }
.an-item i { font-style: normal; font-size: .7rem; color: var(--tinta-3); }

/* ============================================================
   CUSTOS
   ============================================================ */

/* ---- margem por linha */
.cs-cab, .cs-item {
    display: grid; grid-template-columns: minmax(0, 1.5fr) 5rem 5rem minmax(0, 1.4fr);
    align-items: center; gap: .7rem;
}
.cs-cab {
    font-size: .64rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
    color: var(--tinta-3); padding-bottom: .4rem; border-bottom: 1px solid var(--linha);
}
.cs-cab span:nth-child(n+2) { text-align: right; }
.cs-item { padding: .55rem 0; border-bottom: 1px solid var(--linha); font-size: .85rem; }
.cs-item:last-child { border-bottom: none; }
.cs-nome { color: var(--tinta); font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; min-width: 0; }
.cs-n { text-align: right; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.cs-margem { display: flex; align-items: center; gap: .55rem; justify-content: flex-end; }
.cs-margem .trilho { flex: 1; }
.cs-margem b { font-variant-numeric: tabular-nums; min-width: 3.2rem; text-align: right; }

/* ---- tabela de custo de cada linha (um <details> por linha) */
.cs-linha { padding: 0; overflow: hidden; }
.cs-linha > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: .9rem;
    padding: 1rem 1.3rem; transition: background .14s ease;
}
.cs-linha > summary::-webkit-details-marker { display: none; }
.cs-linha > summary:hover { background: var(--fundo); }
.cs-linha[open] > summary { border-bottom: 1px solid var(--linha); }
.cs-marca { width: 4px; align-self: stretch; border-radius: 99px; background: var(--cor-linha); flex: 0 0 auto; }
.cs-titulo { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.cs-titulo b { font-size: 1rem; font-weight: 750; letter-spacing: -.02em; color: var(--tinta); }
.cs-titulo i {
    font-style: normal; font-size: .74rem; color: var(--tinta-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-resumo { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.cs-resumo > span { display: flex; flex-direction: column; align-items: flex-end; gap: .05rem; }
.cs-resumo i {
    font-style: normal; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--tinta-3); font-weight: 700;
}
.cs-resumo b { font-size: .92rem; font-weight: 700; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.cs-total b { font-size: 1.25rem; color: var(--tinta); letter-spacing: -.03em; }

.cs-form { padding: .9rem 1.3rem 1.2rem 1.3rem; }
.cs-grade {
    display: grid; grid-template-columns: minmax(0, 1.6fr) 9rem 7rem minmax(0, 1fr) 2rem;
    gap: .5rem; align-items: center; padding: .18rem 0;
}
.cs-grade-cab {
    font-size: .62rem; font-weight: 750; letter-spacing: .09em; text-transform: uppercase;
    color: var(--tinta-3); padding-bottom: .35rem; margin-bottom: .2rem;
    border-bottom: 1px solid var(--linha);
}
.cs-grade input[type="text"], .cs-grade input[type="number"], .cs-grade select {
    width: 100%; padding: .4rem .6rem; border: 1px solid var(--borda); border-radius: 10px;
    font-family: inherit; font-size: .84rem; color: var(--tinta); background: var(--branco);
    transition: border-color .14s, box-shadow .14s;
}
.cs-grade input:focus, .cs-grade select:focus {
    outline: none; border-color: rgba(196, 36, 27, .45); box-shadow: 0 0 0 3px rgba(230, 51, 41, .09);
}
.cs-grade input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; }
.cs-inativo input, .cs-inativo select { opacity: .5; }
.cs-fatia { display: flex; align-items: center; gap: .5rem; }
.cs-fatia .trilho { flex: 1; }
.cs-fatia i { font-style: normal; font-size: .72rem; color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.cs-ativo { display: flex; justify-content: center; }
.cs-ativo input { accent-color: var(--vermelho); width: 16px; height: 16px; }
.cs-novo { margin-top: .5rem; padding-top: .6rem; border-top: 1px dashed var(--borda); }
.cs-acoes { display: flex; align-items: center; gap: 1rem; margin-top: .9rem; flex-wrap: wrap; }
.cs-acoes .botao-primario { width: auto; padding: .55rem 1.2rem; }
.cs-acoes .menu-dica { margin: 0; flex: 1; min-width: 200px; }

/* ---- linha nova e reserva */
.cs-nova { display: flex; gap: .7rem; align-items: flex-end; flex-wrap: wrap; }
.cs-nova label { display: flex; flex-direction: column; gap: .2rem; font-size: .74rem; color: var(--tinta-2); flex: 1 1 8rem; }
.cs-nova input, .cs-nova select {
    padding: .5rem .65rem; border: 1px solid var(--borda); border-radius: 10px;
    font-family: inherit; font-size: .86rem; background: var(--branco); color: var(--tinta);
}
.cs-nova .botao-primario { width: auto; padding: .55rem 1.3rem; }

.cs-reserva { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.cs-reserva > div { flex: 1 1 14rem; }
.cs-reserva p { margin: .4rem 0 0 0; font-size: .82rem; color: var(--tinta-2); line-height: 1.5; }
.cs-reserva form { flex: 0 0 auto; }
.cs-reserva .botao-largo { width: auto; padding: .55rem 1.1rem; }
.cs-reserva-estado {
    display: inline-block; padding: .2rem .65rem; border-radius: 99px;
    font-size: .74rem; font-weight: 750; background: var(--fundo); color: var(--tinta-2);
}
.cs-reserva-estado.ligada { background: var(--positivo-lavado); color: var(--positivo); }

@media (max-width: 900px) {
    .cs-resumo { display: none; }
    .cs-grade { grid-template-columns: minmax(0, 1fr) 6.5rem 2rem; }
    .cs-grade > select, .cs-fatia, .cs-grade-cab span:nth-child(2), .cs-grade-cab span:nth-child(4) { display: none; }
    .cs-cab, .cs-item { grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1fr); }
    .cs-cab span:nth-child(3), .cs-item > .cs-n:nth-of-type(2) { display: none; }
}

/* ---- ligar modelo à linha (tela Custos) */
.cs-ligar { display: flex; flex-direction: column; gap: .4rem; }
.cs-ligar-item {
    display: grid; grid-template-columns: minmax(0, 1fr) 10rem 5.5rem auto;
    gap: .5rem; align-items: center;
    padding: .5rem 0; border-bottom: 1px solid var(--linha);
}
.cs-ligar-item:last-child { border-bottom: none; }
.cs-ligar-nome { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.cs-ligar-nome b { font-size: .86rem; font-weight: 700; color: var(--tinta); }
.cs-ligar-nome i {
    font-style: normal; font-size: .72rem; color: var(--tinta-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-ligar-item select, .cs-pares input {
    width: 100%; padding: .4rem .55rem; border: 1px solid var(--borda); border-radius: 10px;
    font-family: inherit; font-size: .82rem; background: var(--branco); color: var(--tinta);
}
.cs-pares { display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--tinta-3); }
.cs-pares input { width: 3.2rem; text-align: center; font-variant-numeric: tabular-nums; }
.cs-ligar-item .botao-primario { width: auto; padding: .42rem .9rem; font-size: .8rem; }

@media (max-width: 900px) {
    .cs-ligar-item { grid-template-columns: minmax(0, 1fr) 4.5rem auto; }
    .cs-ligar-item select { grid-column: 1 / -1; }
}

/* ---- extrato: marcas de ressalva na matriz por canal */
.matriz-sub {
    display: block; font-size: .62rem; font-weight: 650; color: var(--tinta-3);
    letter-spacing: .04em; margin-left: 1.05rem;
}
.matriz-falta {
    display: inline-block; padding: .05rem .4rem; border-radius: 99px;
    background: var(--negativo-lavado); color: var(--negativo);
    font-size: .68rem; font-weight: 700; cursor: help;
}


/* ============================================================
   EXTRATO — a matriz por canal, versão centrada
   ============================================================
   Coluna de canal é COMPARAÇÃO: o olho corre na horizontal, linha a linha, e
   para isso os números precisam estar no mesmo eixo. Centralizados, com a
   tabular-nums que já vem de cima, as casas ficam alinhadas entre colunas de
   larguras diferentes. O rótulo da linha continua à esquerda, ancorando a
   leitura, e gruda na borda quando a tabela rola de lado. */

.matriz { min-width: 680px; border-collapse: separate; border-spacing: 0; }

.matriz th, .matriz td { text-align: center; padding: .62rem .9rem; }
.matriz tbody th, .matriz thead th:first-child {
    text-align: left; position: sticky; left: 0; z-index: 2;
    background: var(--branco);
}
.matriz tbody th { font-weight: 550; color: var(--tinta-2); }

/* cabeçalho: um fio da cor do canal por cima do nome — identidade sem pintar
   número nenhum, que continua em tinta */
.matriz thead th {
    padding-top: .75rem; border-bottom: 1px solid var(--borda);
    position: relative; color: var(--tinta);
}
.matriz thead th:not(:first-child)::before {
    content: ""; position: absolute; top: 0; left: .7rem; right: .7rem; height: 3px;
    border-radius: 0 0 3px 3px; background: var(--cor-col, var(--borda));
}
.matriz-canal { display: inline-flex; align-items: center; gap: .4rem; font-weight: 750; }
.matriz-canal .bolinha { background: var(--cor-col, var(--tinta-3)); }
.matriz thead th .matriz-sub, .matriz thead th .matriz-nota { text-align: center; margin-left: 0; }

/* linhas: o fio some e vira faixa ao passar o mouse — comparar linha a linha
   exige que a linha inteira acenda, não uma célula */
.matriz tbody tr { border-bottom: none; }
.matriz tbody td, .matriz tbody th { border-bottom: 1px solid var(--linha); }
.matriz tbody tr:hover td, .matriz tbody tr:hover th { background: var(--fundo); }

.matriz-entrada td { font-weight: 750; font-size: .92rem; }
.matriz-saida td { color: var(--negativo); font-weight: 550; }

/* resultado: faixa cheia, cantos arredondados nas pontas */
.matriz-resultado td, .matriz-resultado th {
    background: linear-gradient(180deg, var(--vermelho-lavado), rgba(254, 242, 241, .55));
    border-top: 1px solid rgba(196, 36, 27, .18); border-bottom: none;
    font-size: .98rem; font-weight: 800;
}
.matriz-resultado th:first-child { border-radius: 12px 0 0 0; }
.matriz-resultado td:last-child { border-radius: 0 12px 0 0; }

/* margem: selo, para o número que resume a coluna não se confundir com os
   valores em reais logo acima */
.matriz-pct td { padding-top: .5rem; padding-bottom: .7rem; }
.matriz-pct td, .matriz-pct th {
    background: linear-gradient(180deg, rgba(254, 242, 241, .55), rgba(254, 242, 241, .2));
    border-bottom: none;
}
.matriz-pct th:first-child { border-radius: 0 0 0 12px; }
.matriz-pct td:last-child { border-radius: 0 0 12px 0; }
.matriz-selo {
    display: inline-block; padding: .15rem .62rem; border-radius: 99px;
    font-weight: 800; font-size: .86rem; font-variant-numeric: tabular-nums;
}
.matriz-selo.positivo { background: var(--positivo-lavado); color: var(--positivo); }
.matriz-selo.negativo { background: var(--negativo-lavado); color: var(--negativo); }

/* marcas de ressalva ficam discretas: a informação é a nota de rodapé */
.matriz-estimado { font-size: .78rem; opacity: .75; }
.matriz-falta { font-size: .66rem; }
.matriz-sub { margin-left: 0; }

@media (max-width: 760px) {
    .matriz th, .matriz td { padding: .5rem .6rem; font-size: .8rem; }
    .matriz tbody th, .matriz thead th:first-child { box-shadow: 1px 0 0 var(--linha); }
}