/* Kalko — a folha de estilo do produto.
 *
 * As cores saíram das pranchas do canvas (mockups/), contadas uma a uma,
 * não recriadas de memória. Toda cor é variável porque a D5 promete tema
 * escuro persistido no banco: enxertar tema depois, com cor solta no
 * meio do HTML, custa muito mais do que nascer assim.
 */

:root {
    --fundo: #F5F5F2;
    --superficie: #FFFFFF;
    --tinta: #111111;
    --tinta-media: #4A4A46;
    --tinta-fraca: #6B6B66;
    --tinta-apagada: #8A8A85;
    --borda: #DDDDD8;
    --borda-forte: #C9C9C2;
    --linha: #E6E6E1;
    --acento: #FF5A1F;
    --vermelho: #D6293E;
    --vermelho-fundo: #FBEDEF;

    /* Selos de canal — D12: a cor de cada marketplace. */
    --meli: #FFE600;
    --meli-tinta: #111111;
    --amazon: #FF9900;
    --amazon-tinta: #111111;
    --shopee: #EE4D2D;
    --shopee-tinta: #FFFFFF;

    --raio: 8px;          /* cantos como o BI da Universo Genial (pedido do Daniel, 17/09) */
    --raio-miudo: 6px;    /* campos, botoes, selos */
    --sombra: 0 1px 2px rgba(17, 17, 17, 0.04), 0 4px 14px rgba(17, 17, 17, 0.06);
    /* D70 (17/09): as fontes do BI da Universo Genial — DM Sans no texto,
     * DM Mono nos números. A Space Mono fica só na logo: o [K] KALKO_ é
     * desenho, não texto. Syne (títulos do BI) ficou de fora: três famílias
     * é peso demais para o ganho. */
    --fonte: 'DM Sans', 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
    --fonte-marca: 'DM Mono', 'Space Mono', 'Consolas', monospace;
    --fonte-logo: 'Space Mono', 'Consolas', monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--tinta);
    font-family: var(--fonte);
    font-size: 14px;
    line-height: 1.45;
}

a { color: var(--tinta); text-decoration: none; }
a:hover { color: var(--acento); }

/* ------------------------------------------------------------- a marca */

.marca {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fonte-logo);
    font-weight: 700;
    letter-spacing: -0.02em;
}
.marca .colchete { color: var(--acento); }
.marca .risco { color: var(--acento); }

/* --------------------------------------------------- entrar / cadastrar */

.centro {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.porta { width: 100%; max-width: 380px; text-align: center; }
.porta .marca { justify-content: center; font-size: 26px; margin-bottom: 18px; }
.porta .marca .sigla { font-size: 40px; letter-spacing: -0.06em; }
.lema { font-size: 17px; color: var(--tinta-media); margin-bottom: 26px; }
.rodape-lema { font-size: 12px; color: var(--tinta-apagada); margin-top: 20px; }

.cartao {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 26px;
    text-align: left;
}

label { display: block; font-size: 12.5px; color: var(--tinta-fraca); margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password], select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    margin-bottom: 14px;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-miudo);
    background: var(--superficie);
    color: var(--tinta);
    font: inherit;
}
input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: -1px; }

button, .botao {
    width: 100%;
    height: 44px;
    border: 0;
    border-radius: var(--raio-miudo);
    background: var(--tinta);
    color: var(--fundo);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
button:hover { background: var(--acento); }
.botao-acento { background: var(--acento); color: #FFFFFF; }

.entre-links { display: flex; justify-content: space-between; font-size: 12.5px; margin-top: 12px; }
/* D109 — o código de 6 dígitos: grande, espaçado, fácil de conferir com o e-mail. */
.codigo-de-acesso { font-family: var(--fonte-marca); font-size: 26px; letter-spacing: 0.3em; text-align: center; }
.porta .reenviar { margin-top: 14px; }
.porta .reenviar .botao-discreto { width: 100%; }
.entre-links a:first-child { color: var(--tinta-fraca); }
.entre-links a:last-child { font-weight: 600; }

.aviso {
    border-radius: var(--raio);
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 14px;
}
.aviso-erro { background: var(--vermelho-fundo); color: var(--vermelho); }

/* ------------------------------------------------------------ o painel */

.aplicacao { display: flex; flex-direction: column; min-height: 100vh; }

.conteudo { flex: 1; padding: 22px 28px 40px; min-width: 0; width: 100%; }

.cabecalho { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.cabecalho h1 { font-size: 23px; margin: 0; font-weight: 600; }
.cabecalho .contexto { font-size: 12px; color: var(--tinta-apagada); }

/* A faixa da virada de mês (D39). Vem antes de tudo porque é a única
 * coisa da tela que pede ação para o número ficar certo. */
.faixa {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--vermelho-fundo);
    border: 1px solid var(--vermelho);
    border-radius: var(--raio);
    padding: 12px 16px;
    margin-bottom: 18px;
}
/* D111 — o aviso grande da virada do mês: cobre a tela, a faixa fica no
 * fundo. Sem JavaScript: fecha por formulário ("Agora não"). */
.aviso-grande {
    position: fixed; inset: 0; z-index: 60;
    display: flex;
    padding: 16px;
    overflow-y: auto;      /* tela baixa: rola o fundo escuro, não o cartão */
    background: rgba(17, 17, 17, 0.66);
}
.aviso-grande-cartao {
    width: 100%; max-width: 640px;
    margin: auto;          /* centraliza sem cortar o topo quando não cabe */
    background: var(--superficie);
    border: 2px solid var(--vermelho);
    border-radius: 14px;
    padding: 28px 30px 24px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.4);
}
.aviso-grande-icone {
    width: 46px; height: 46px; border-radius: 50%;
    background: var(--vermelho); position: relative; margin-bottom: 16px;
}
.aviso-grande-icone::after {
    content: ""; position: absolute; left: 11px; right: 11px; top: 20px; height: 6px;
    border-radius: 3px; background: #FFFFFF;
}
.aviso-grande-cartao h2 {
    margin: 0 0 12px; font-size: 22px; line-height: 1.25; letter-spacing: -0.01em;
    font-weight: 700; text-transform: none; color: var(--vermelho);
}
.aviso-grande-cartao p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.5; color: var(--tinta-media); }
.aviso-grande-cartao p strong { color: var(--tinta); }
.aviso-grande-cartao .aviso-grande-impacto {
    background: var(--vermelho-fundo); border-radius: var(--raio-miudo);
    padding: 10px 12px; color: var(--vermelho); font-size: 13.5px;
}
.aviso-grande-cartao .aviso-grande-impacto strong { color: var(--vermelho); }
.aviso-grande-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.aviso-grande-acoes form { margin: 0; }
.aviso-grande-acoes .botao, .aviso-grande-acoes button {
    width: auto; height: 42px; line-height: 42px; padding: 0 18px; font-size: 14px;
    display: inline-block; text-align: center; text-decoration: none;
}
.aviso-grande-acoes .botao-quieto {
    background: transparent; color: var(--tinta-fraca); border: 1px solid var(--borda-forte); font-weight: 500;
}
.aviso-grande-acoes .botao-quieto:hover { background: transparent; color: var(--tinta); border-color: var(--tinta); }
@media (max-width: 560px) {
    .aviso-grande-cartao { padding: 22px 18px 18px; }
    .aviso-grande-cartao h2 { font-size: 19px; }
    .aviso-grande-acoes .botao, .aviso-grande-acoes form, .aviso-grande-acoes button { width: 100%; }
}

.faixa .texto { flex: 1; font-size: 13px; }
.faixa strong { color: var(--vermelho); }
.faixa .botao { width: auto; padding: 0 16px; height: 34px; line-height: 34px; text-align: center; font-size: 13px; }

.barra { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; align-items: flex-end; }
.barra .campo { min-width: 160px; }
.barra label { text-transform: uppercase; letter-spacing: 0.04em; font-size: 10.5px; }
.barra input, .barra select { height: 38px; margin-bottom: 0; }
/* D136 — "Colunas ▾" na barra de Vendas: <details> que abre um painel por cima. */
.colunas-menu { position: relative; min-width: 0; }
.colunas-menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; height: 38px; }
.colunas-menu summary::-webkit-details-marker { display: none; }
.colunas-menu .botao-filtro.secundario { background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda-forte); }
.painel-colunas { position: absolute; top: 44px; right: 0; z-index: 6; background: var(--superficie); border: 1px solid var(--borda);
                  border-radius: var(--raio); padding: 14px 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.08); min-width: 320px;
                  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.painel-colunas label { display: flex; align-items: center; gap: 8px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.painel-colunas input[type=checkbox] { height: auto; width: auto; margin: 0; }
.painel-colunas .nota { grid-column: 1 / -1; font-size: 11px; color: var(--tinta-apagada); }
.painel-colunas button { grid-column: 1 / -1; width: auto; justify-self: end; }

.grade { display: grid; grid-template-columns: 340px 1fr; gap: 16px; align-items: start; }
.coluna { display: flex; flex-direction: column; gap: 16px; }
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.bloco {
    background: var(--superficie);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 16px 18px;
    box-shadow: var(--sombra);
}
.bloco h2 {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tinta-apagada);
    margin: 0 0 12px;
    font-weight: 600;
}
.bloco.alerta { background: var(--vermelho-fundo); border-color: var(--vermelho); }
.bloco.alerta h2 { color: var(--vermelho); }

/* A cascata. Cada linha é rótulo à esquerda, valor à direita. */
.linha { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; gap: 12px; }
.linha .valor { font-variant-numeric: tabular-nums; white-space: nowrap; }
.linha.destaque { border-top: 1px solid var(--linha); margin-top: 6px; padding-top: 10px; font-weight: 600; }
.linha.total { border-top: 2px solid var(--tinta); margin-top: 8px; padding-top: 12px; }
.linha.total .rotulo { font-weight: 600; font-size: 13px; }
.linha.total .valor { font-family: var(--fonte-marca); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; }
.linha .rotulo { color: var(--tinta-media); }

/* "sem dado" NUNCA se parece com um número (D1). */
.sem-dado {
    color: var(--tinta-apagada);
    font-style: italic;
    font-size: 12.5px;
    border-bottom: 1px dotted var(--borda-forte);
    cursor: help;
}
.parcial { color: var(--acento); font-size: 11px; margin-left: 5px; }
/* D94 — estimativa pelo histórico: a terceira marca. Nem laranja (teto,
 * falta dado) nem cinza (sem dado): azul, com ponto, e explicação no title. */
.estimado { color: #3B5BDB; font-size: 11px; margin-left: 5px; border-bottom: 1px dotted #3B5BDB; cursor: help; white-space: nowrap; }
.nota-estimado { color: #3B5BDB; font-size: 12.5px; margin-top: 4px; }
/* D110 — a nota dos Ads: informa, não alarma. */
.nota-ads { color: var(--tinta-media); font-size: 12.5px; margin: 4px 0; }
.aviso-estimado { background: #EEF1FB; color: #2B44A8; border: 1px solid #C5CEF0; }

.abertura { padding-left: 14px; }
.abertura .linha { padding: 2px 0; font-size: 12.5px; color: var(--tinta-fraca); }

.negativo { color: var(--vermelho); }
.nota { font-size: 11.5px; color: var(--tinta-apagada); margin-top: 8px; line-height: 1.5; }
.nota-teto { color: var(--acento); }

.selo {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: var(--tinta-media);
    vertical-align: middle;
    margin-right: 8px;
    white-space: nowrap;
}
.selo i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--borda-forte);
    flex: none;
}
/* D137 (06/10) — o selo é o NOME do canal na cor da marca, sem logotipo:
 * nenhuma das três libera o logo dentro de software de terceiro sem
 * autorização escrita (A91; pedido em andamento). ML amarelo com letra
 * escura; TikTok Shop preto; Amazon "squid ink" com o laranja; Shopee
 * vermelha com letra branca. O ponto colorido sai nesses quatro. */
.selo-meli, .selo-amazon, .selo-tiktok, .selo-shopee {
    padding: 1px 7px; border-radius: 4px; font-size: 10.5px; letter-spacing: 0.01em; white-space: nowrap;
}
.selo-meli i, .selo-amazon i, .selo-tiktok i, .selo-shopee i { display: none; }
.selo-meli { background: var(--meli); color: var(--meli-tinta); }
.selo-tiktok { background: #000000; color: #FFFFFF; }
.selo-amazon { background: #333E48; color: var(--amazon); }
.selo-shopee { background: var(--shopee); color: var(--shopee-tinta); }   /* Daniel (06/10, vendo no ar): vermelho com letra branca, como os outros */

table { width: 100%; border-collapse: collapse; font-size: 13px; }
td { padding: 5px 0; vertical-align: baseline; }
td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr + tr td { border-top: 1px solid var(--linha); }

/* O gráfico de 12 meses: barras em CSS, sem biblioteca. */
.barras { display: flex; align-items: flex-end; gap: 4px; height: 92px; }
.barras .mes { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
/* A62 — a haste é um SVG que ocupa o mês inteiro; a altura do valor é o
 * atributo do <rect> (style= inline é descartado pela CSP em produção). */
.barras .haste { display: block; width: 100%; height: 100%; }
.barras .haste rect { fill: var(--tinta); }
.barras .mes.atual .haste rect { fill: var(--acento); }
.barras .mes.vazio .haste rect { fill: var(--linha); }
.eixo { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--tinta-apagada); margin-top: 6px; }

.fila {
    display: flex;
    align-items: center;
    gap: 16px;
    border-left: 3px solid var(--acento);
    background: var(--superficie);
    border-radius: var(--raio);
    padding: 14px 18px;
    margin-top: 16px;
}
.fila .texto { flex: 1; font-size: 13px; }
.fila .botao { width: auto; padding: 0 18px; height: 36px; line-height: 36px; text-align: center; }

.vazio { color: var(--tinta-apagada); font-size: 13px; padding: 8px 0; }

@media (max-width: 1100px) {
    .grade { grid-template-columns: 1fr; }
    .dupla { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .aplicacao { flex-direction: column; }
    .conteudo { padding: 18px; }
}

/* ---------------------------------------------------- tela de Vendas */

.cartoes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.numerao {
    font-family: var(--fonte-marca);
    font-size: 25px;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

/* A tabela tem dezesseis colunas. Sem largura mínima elas se espremem, o
 * título do anúncio quebra em cinco linhas e cada venda vira um bloco alto
 * — a tela fica ilegível justamente onde a leitura é de varredura. Largura
 * mínima aqui, rolagem horizontal no contêiner. */
.grade-vendas { font-size: 12.5px; }   /* largura vem do conteúdo; o bloco rola se faltar tela */
.grade-vendas th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tinta-apagada);
    font-weight: 600;
    padding: 9px 6px;
    border-bottom: 1px solid var(--linha);
    white-space: nowrap;
    background: var(--superficie);
}
.grade-vendas th.num { text-align: right; }
.grade-vendas td { padding: 5px 6px; vertical-align: middle; line-height: 1.25; }
.grade-vendas tr + tr td { border-top: 0; }

/* Cada venda é um <tbody> próprio: as duas linhas (os números e o "ver a
 * conta") formam UMA faixa, e o zebrado alterna por venda, não por linha.
 * Em dezesseis colunas, é a faixa que impede o olho de pular de linha. */
.grade-vendas tbody.venda { border-top: 1px solid var(--linha); }
.grade-vendas tbody.venda:nth-of-type(even) td { background: #FAFAF7; }
.grade-vendas tbody.venda:hover td { background: #F1F0EA; }

.grade-vendas td.quando, .grade-vendas td.onde { white-space: nowrap; }
/* O modal fica EMBAIXO do canal: "Amazon · Envio pelo vendedor" numa linha
 * só custava ~270px, e a venda já tem duas alturas por causa do ↗ do
 * pedido. Foi a coluna que ainda empurrava "MC %" pra fora da tela (22/09). */
.grade-vendas td.onde .modal-sob { display: block; color: var(--tinta-fraca); font-size: 11.5px; line-height: 1.2; }
.grade-vendas td.pedido { font-variant-numeric: tabular-nums; }
.link-pedido-externo {
    margin-left: 4px; color: var(--tinta-media); text-decoration: none;
    font-size: 12px; opacity: 0.6;
}
.link-pedido-externo:hover { opacity: 1; color: var(--acento); }

/* SKU e título na mesma linha, cortados em duas. O título inteiro fica no
 * title= para quem precisar — a tabela não é o lugar de lê-lo. */
.prod {
    display: -webkit-box;
    white-space: nowrap;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.prod .sku { font-family: var(--fonte-marca); font-weight: 700; font-size: 11.5px; }
.prod .tit { color: var(--tinta-fraca); }
.prod .sku + .tit::before { content: " · "; color: var(--tinta-apagada); }
/* Ausência não merece negrito: "sem SKU" é o que falta, não o que é. */
.prod .sem-sku { color: var(--tinta-apagada); font-size: 11.5px; }
/* Cancelada e devolvida continuam na lista: some da tela e o seller vem
 * perguntar por que o pedido que ele viu no marketplace não aparece. */
.riscada { color: var(--tinta-apagada); }
.riscada strong { font-weight: 500; }
.marca-situacao {
    display: inline-block;
    margin-left: 6px;
    padding: 0 5px;
    border: 1px solid var(--borda-forte);
    border-radius: 2px;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tinta-fraca);
}
.miudo { font-size: 11px; color: var(--tinta-apagada); font-weight: 400; }

/* A conta da venda abre por :target — o número do pedido é o link. Fechada,
 * ela não ocupa altura nenhuma: em cinquenta vendas, a linha extra de
 * "ver a conta" custava cinquenta linhas de tela e nenhuma informação. */
.detalhe-venda { display: none; }
.detalhe-venda:target { display: table-row; }
.detalhe-venda td { padding: 0 8px 10px; }
/* 24/09 — a conta da venda ocupa a largura da TABELA (colspan), que é mais
 * larga que a tela: os valores ficavam fora da área visível. Grudada na borda
 * esquerda da rolagem e limitada à largura visível, a conta cabe sempre. */
.detalhe-venda .conta-da-venda { position: sticky; left: 0; max-width: calc(100vw - 120px); }
.grade-vendas td.pedido a { color: var(--tinta-fraca); text-decoration: none; }
.grade-vendas td.pedido a:hover { color: var(--acento); text-decoration: underline; }
.detalhe-venda:target ~ tr td,
.grade-vendas tbody.venda:has(.detalhe-venda:target) .linha-venda td { background: #FFF6F1; }
.fechar-conta { font-size: 11px; color: var(--tinta-apagada); text-decoration: none; }
.fechar-conta:hover { color: var(--acento); }
.bloco .nota a { color: var(--tinta-fraca); }
.bloco .nota a:hover { color: var(--acento); }
.legenda-grade {
    font-size: 11px;
    color: var(--tinta-apagada);
    margin: 16px 0 6px;
}
.detalhe {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    background: var(--fundo);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 14px 16px;
    margin-bottom: 10px;
}
.detalhe h3 {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--tinta-apagada);
    margin: 0 0 8px;
}
.detalhe .linha { padding: 3px 0; font-size: 12.5px; }

.paginacao {
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    font-size: 13px;
}
.paginacao a { color: var(--acento); font-weight: 600; }

@media (max-width: 1100px) {
    .cartoes { grid-template-columns: 1fr 1fr; }
    .detalhe { grid-template-columns: 1fr; }
}

/* --------------------------------------------- tela de Configurações */

.titulo-config { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.etiqueta {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--acento);
    border: 1px solid var(--acento);
    border-radius: 2px;
    padding: 1px 6px;
}
.explicacao { font-size: 13px; color: var(--tinta-media); margin: 0 0 14px; line-height: 1.55; }
.vigente {
    background: var(--fundo);
    border-radius: var(--raio);
    padding: 9px 12px;
    font-size: 13px;
    margin-bottom: 14px;
}
.linha-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.linha-form > div { flex: 1; min-width: 130px; }
.linha-form input { margin-bottom: 0; height: 40px; }
.linha-form button { width: auto; padding: 0 22px; height: 40px; }
.historico { margin-top: 14px; }
.historico summary { cursor: pointer; font-size: 11.5px; color: var(--tinta-apagada); }
.historico summary:hover { color: var(--acento); }
.historico table { margin-top: 8px; font-size: 12.5px; }

/* ------------------------------------------ Canais e Sincronizando */

.canal-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.canal-nome { display: flex; align-items: center; gap: 10px; }
.canal-nome .selo { margin-right: 0; }
/* D103 — várias contas por canal: uma linha por conta dentro do bloco. */
.canal-bloco .canal-linha:last-child { margin-bottom: 0; }
.canal-conta-seguinte { border-top: 1px solid var(--borda); padding-top: 12px; }
.canal-acoes { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.canal-mais { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--borda); padding-top: 12px; }
.canal-mais .canal-antes { flex-basis: 100%; margin: 0; }
/* A78 — Shopee: a segunda autorização (Ads) mora na linha da conta. */
.canal-ads { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-basis: 100%; padding: 6px 0 2px; }
.canal-ads form.inline { margin: 0; display: inline; }
.canal-ads .botao-linha { width: auto; }
details.confirmar > summary { list-style: none; display: inline-flex; align-items: center; cursor: pointer; }
details.confirmar > summary::-webkit-details-marker { display: none; }
details.confirmar[open] form { margin-top: 8px; max-width: 260px; }
details.confirmar[open] form p { margin: 0 0 8px; }
.botao-discreto {
    width: auto; padding: 0 16px; height: 36px;
    background: transparent; color: var(--tinta-fraca);
    border: 1px solid var(--borda-forte); font-weight: 400; font-size: 13px;
}
.botao-discreto:hover { background: transparent; color: var(--vermelho); border-color: var(--vermelho); }

/* A62 — barras em SVG: a largura é atributo do <rect>, que a CSP não bloqueia
 * (style= inline é descartado em produção e toda barra aparecia cheia). */
.progresso { display: block; width: 100%; height: 8px; border-radius: 4px; overflow: hidden; }
.progresso .fundo { fill: var(--linha); }
.progresso .preenchido { fill: var(--acento); }
.etapas { list-style: none; padding: 0; margin: 14px 0 0; font-size: 13px; }
.etapas li { padding: 3px 0; color: var(--tinta-media); }
.etapas li::before { content: "✓ "; color: var(--acento); }
.etapas li.pendente { color: var(--tinta-apagada); }
.etapas li.pendente::before { content: "· "; color: var(--tinta-apagada); }

/* ------------------------------------------------ Catálogo e custos */

.barra-cobertura { display: block; width: 100%; height: 12px; border-radius: 6px; overflow: hidden; }
.barra-cobertura .fundo { fill: var(--linha); }
.barra-cobertura .parte.com-custo { fill: var(--tinta); }
.barra-cobertura .parte.sem-custo { fill: var(--acento); }
.barra-cobertura .parte.sem-sku { fill: var(--borda-forte); }
.legenda { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: var(--tinta-fraca); }
.legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.legenda i.com-custo { background: var(--tinta); }
.legenda i.sem-custo { background: var(--acento); }
.legenda i.sem-sku { background: var(--borda-forte); }

.form-custo { display: flex; gap: 6px; align-items: center; }
.form-custo input { height: 32px; margin-bottom: 0; font-size: 12px; padding: 0 8px; width: 92px; }
.form-custo button { width: auto; height: 32px; padding: 0 12px; font-size: 12px; }
.form-custo .vigencia-fixa { white-space: nowrap; color: var(--tinta-media); border-bottom: 1px dotted var(--borda-forte); cursor: help; }
code { font-family: var(--fonte-marca); font-size: 11.5px; background: var(--fundo); padding: 1px 4px; border-radius: 2px; }

/* A MC é a coluna que o seller veio ver: ganha peso, e a de pós-ads
 * fica ao lado para a comparação ser imediata. */
.grade-vendas th.destaque-col { color: var(--tinta); }
.grade-vendas td.destaque-col { font-weight: 700; }

/* A embalagem por SKU fica escondida atrás do próprio valor: quem usa o
 * geral não vê formulário nenhum, e quem quer o detalhe clica. */
.embalagem-sku summary { cursor: pointer; list-style: none; }
.embalagem-sku summary::-webkit-details-marker { display: none; }
.embalagem-sku summary:hover { color: var(--acento); }
.embalagem-sku[open] { background: var(--fundo); padding: 8px; border-radius: var(--raio); }
.embalagem-sku form { margin-top: 8px; }

/* O painel de embalagem do SKU: dois campos com instrução, não dois
 * campos nus. O texto de ajuda é o que faz a composição funcionar sem
 * um cadastro de insumos por trás. */
.painel-embalagem { text-align: left; margin-top: 10px; min-width: 330px; }
.campo-embalagem { margin-bottom: 12px; }
.campo-embalagem label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tinta-fraca);
}
.campo-embalagem input { height: 36px; margin-bottom: 4px; font-size: 13px; width: 100%; }
.ajuda { font-size: 11px; color: var(--tinta-apagada); line-height: 1.5; }
.ajuda em { color: var(--acento); font-style: normal; font-family: var(--fonte-marca); font-size: 10.5px; }
.painel-embalagem button { width: auto; padding: 0 18px; height: 36px; font-size: 13px; }

/* D92 — o histórico de custo mora atrás da fonte: fechado é uma linha
 * miúda; aberto, uma vigência por linha com valor e data corrigíveis. */
.historico-custo summary { cursor: pointer; list-style: none; white-space: nowrap; }
.historico-custo summary::-webkit-details-marker { display: none; }
.historico-custo .link-historico { text-decoration: underline dotted; }
.historico-custo summary:hover .link-historico { color: var(--acento); }
.historico-custo[open] { background: var(--fundo); padding: 8px; border-radius: var(--raio); }
.painel-historico { margin-top: 8px; min-width: 360px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.vigencia-custo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 6px; border-top: 1px dashed var(--linha); }
.vigencia-custo .form-custo input[type=date] { width: 130px; }
.vigencia-custo .form-apagar { display: inline; }
.vigencia-custo .botao-apagar { width: auto; height: 32px; padding: 0 10px; font-size: 12px; background: transparent; color: var(--tinta-fraca); border: 1px solid var(--borda-forte); font-weight: 400; }
.vigencia-custo .botao-apagar:hover { color: var(--vermelho); border-color: var(--vermelho); background: transparent; }
.vigencia-custo .lancado { color: var(--tinta-apagada); }

.ajuste-embalagem { margin: 4px 0 8px; }
.ajuste-embalagem summary { cursor: pointer; font-size: 11px; color: var(--tinta-apagada); }
.ajuste-embalagem summary:hover { color: var(--acento); }
.ajuste-embalagem form { margin: 8px 0 4px; }

/* ------------------------------------------------ convite do cadastro */

/* O valor antes do formulário. Curto de propósito: cada linha aqui
 * compete com o botão, e cadastro é atrito puro. */
.convite {
    background: var(--superficie);
    border-left: 3px solid var(--acento);
    border-radius: var(--raio);
    padding: 14px 16px;
    margin-bottom: 18px;
    text-align: left;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--tinta-media);
}
.convite strong { color: var(--tinta); }
/* 27/10 — os quatro canais, como selos, logo abaixo da primeira frase do convite */
.convite-canais { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 8px; }
.convite-canais .selo { margin: 0; font-size: 12px; padding: 3px 9px; }

.opcional {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tinta-apagada);
    margin-left: 4px;
}

.caixa { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.caixa input { width: auto; height: auto; margin: 3px 0 0; }
.caixa span { font-size: 12.5px; color: var(--tinta-fraca); line-height: 1.45; }

/* ---------------------------------------------- documentos (termos etc) */

.documento {
    max-width: 680px;
    margin: 0 auto;
    padding: 40px 24px 60px;
    line-height: 1.65;
}
.documento .voltar { display: inline-block; margin-bottom: 30px; }
.documento .voltar .marca { font-size: 18px; }
.documento .voltar .marca .sigla { font-size: 24px; }
.documento h1 { font-size: 27px; margin: 0 0 4px; font-weight: 600; }
.documento .atualizado { color: var(--tinta-apagada); font-size: 12.5px; margin: 0 0 26px; }
.documento h2 {
    font-size: 15px;
    margin: 30px 0 8px;
    font-weight: 600;
}
.documento p, .documento li { color: var(--tinta-media); font-size: 14.5px; }
.documento strong { color: var(--tinta); }
.documento ul { padding-left: 20px; }
.documento li { margin-bottom: 5px; }
.documento a { color: var(--acento); text-decoration: underline; }

/* O resumo no topo: quem não vai ler o documento inteiro — quase todos —
 * sai sabendo o essencial. Esconder o resumo seria contar com isso. */
.documento .resumo {
    background: var(--superficie);
    border-left: 3px solid var(--acento);
    border-radius: var(--raio);
    padding: 16px 18px;
    margin-bottom: 10px;
    font-size: 14.5px;
}
.documento .destaque {
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    padding: 14px 16px;
    margin: 12px 0;
    font-size: 14px;
}
.rodape-doc {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--linha);
    font-size: 13px;
    color: var(--tinta-apagada);
}

/* ===================================================== a página que vende */

.venda { max-width: 1000px; margin: 0 auto; padding: 0 24px 60px; }

.topo { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 60px; }
.topo .marca { font-size: 19px; }
.topo .marca .sigla { font-size: 26px; }
.topo nav { display: flex; align-items: center; gap: 22px; font-size: 14px; }
/* No celular o topo não cabe com os links de canal: ficam no rodapé e na página. */
@media (max-width: 640px) { .topo nav .so-largo { display: none; } .topo nav { gap: 14px; } }
.botao-topo {
    background: var(--tinta); color: var(--fundo);
    padding: 9px 18px; border-radius: var(--raio-miudo); font-weight: 600;
}
.botao-topo:hover { background: var(--acento); color: #FFF; }

.heroi { text-align: center; padding: 30px 0 70px; }
.heroi h1 {
    font-size: 64px; line-height: 1.02; letter-spacing: -0.035em;
    margin: 0 0 22px; font-weight: 600;
}
.chamada {
    font-size: 20px; line-height: 1.5; color: var(--tinta-media);
    max-width: 620px; margin: 0 auto 32px;
}
.botao-grande {
    display: inline-block; background: var(--acento); color: #FFFFFF;
    font-size: 17px; font-weight: 600; padding: 16px 36px;
    border-radius: var(--raio-miudo);
}
.botao-grande:hover { background: var(--acento-forte, #E44A12); color: #FFFFFF; }
.sob-botao { font-size: 13px; color: var(--tinta-apagada); margin-top: 14px; }
/* D236 (19/10) — páginas de destino: a tarja 'exclusivo para quem já vende' e o aviso de que precisa ter loja. */
.tarja-exclusivo { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin: 4px 0 24px;
    background: var(--tinta); color: #FFFFFF; border-radius: 16px; padding: 12px 20px 12px 14px; text-align: left;
    outline: 3px solid var(--acento); outline-offset: 3px; }
.tarja-exclusivo .ic { font-size: 24px; line-height: 1; flex: none; }
.tarja-exclusivo strong { display: block; font-size: 17px; font-weight: 800; line-height: 1.25; }
.tarja-exclusivo small { display: block; font-size: 13.5px; color: #CFCFC8; margin-top: 2px; line-height: 1.35; }
.exige-loja { font-size: 14px; line-height: 1.45; color: var(--tinta-media); margin-top: 14px; max-width: 620px; }
.exige-loja b { color: var(--tinta); }
.heroi .exige-loja { margin: 14px auto 0; }
.heroi h1 .acento { color: var(--acento); }

/* A prova. Um número grande sozinho vale mais que um parágrafo. */
.prova {
    background: var(--tinta); color: var(--fundo);
    border-radius: var(--raio); padding: 48px 40px; text-align: center;
    margin-bottom: 70px;
}
.numerao-venda {
    font-family: var(--fonte-marca); font-size: 96px; font-weight: 700;
    line-height: 1; letter-spacing: -0.05em; color: var(--acento);
}
.prova p { font-size: 19px; max-width: 580px; margin: 16px auto 0; line-height: 1.5; }
.prova .detalhe-prova {
    font-size: 15px; color: #B5B5B0; margin-top: 22px; max-width: 620px;
}
.prova strong { color: var(--fundo); }

.bloco-venda { margin-bottom: 70px; }
.bloco-venda h2 {
    font-size: 30px; letter-spacing: -0.02em; margin: 0 0 10px;
    font-weight: 600; text-transform: none; color: var(--tinta);
}
.explica-venda { font-size: 16px; color: var(--tinta-media); margin: 0 0 26px; }

.tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 26px; }
.dois { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 22px; }
.quatro { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 26px; }
.tres h3, .dois h3, .quatro h3 { font-size: 16px; margin: 0 0 8px; font-weight: 600; }
.tres p, .dois p, .quatro p { font-size: 14.5px; color: var(--tinta-media); line-height: 1.6; margin: 0; }

.passos > div { border-top: 2px solid var(--linha); padding-top: 18px; }
.passo-n {
    display: block; font-family: var(--fonte-marca); font-size: 28px;
    font-weight: 700; color: var(--acento); line-height: 1; margin-bottom: 10px;
}

/* A cascata como peça de venda: a assinatura do produto. */
.cascata-venda {
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio); padding: 26px 30px; max-width: 620px;
}
.linha-venda-demo {
    display: flex; justify-content: space-between; padding: 9px 0;
    font-size: 15px; font-variant-numeric: tabular-nums;
}
.linha-venda-demo.neg span:last-child { color: var(--tinta-fraca); }
.linha-venda-demo.somada { border-top: 1px solid var(--linha); margin-top: 6px; padding-top: 14px; font-weight: 600; }
.linha-venda-demo.total {
    border-top: 2px solid var(--tinta); margin-top: 10px; padding-top: 18px;
    align-items: baseline;
}
.linha-venda-demo.total span:first-child { font-weight: 600; font-size: 13px; letter-spacing: 0.03em; }
.linha-venda-demo.total span:last-child {
    font-family: var(--fonte-marca); font-size: 28px; font-weight: 700; letter-spacing: -0.03em;
}
.linha-venda-demo.total em { font-style: normal; font-size: 16px; color: var(--tinta-fraca); }
.rodape-cascata { font-size: 14px; color: var(--tinta-media); margin-top: 18px; max-width: 620px; }

.destaque-venda {
    background: var(--superficie); border: 1px solid var(--borda);
    border-radius: var(--raio); padding: 34px 36px;
}

.fechamento { text-align: center; padding: 20px 0 70px; }
.fechamento h2 { font-size: 34px; letter-spacing: -0.02em; margin: 0 0 12px; font-weight: 600; }
.fechamento > p { font-size: 18px; color: var(--tinta-media); margin: 0 0 28px; }

.rodape-venda {
    border-top: 1px solid var(--linha); padding-top: 26px;
    display: flex; flex-direction: column; gap: 14px; align-items: center;
    text-align: center;
}
.rodape-venda nav { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; font-size: 13.5px; }
.rodape-venda nav a { color: var(--tinta-fraca); }
.rodape-venda .marca { font-size: 15px; }
.rodape-venda .marca .sigla { font-size: 20px; }

@media (max-width: 820px) {
    .heroi h1 { font-size: 42px; }
    .chamada { font-size: 17px; }
    .tres, .dois { grid-template-columns: 1fr; }
    .numerao-venda { font-size: 72px; }
    .fechamento h2 { font-size: 26px; }
    .prova { padding: 34px 22px; }
}

/* ===== a tela de demonstração da página que vende
 *
 * É a tela real, reduzida a dez colunas. Mostrar o produto funcionando
 * vende mais que descrevê-lo — e o que ela mostra não é uma tela bonita:
 * é uma linha vermelha e uma linha sem dado. */
.tela-demo {
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: var(--superficie);
    overflow: hidden;
    margin-top: 6px;
}
.demo-topo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 16px;
    border-bottom: 1px solid var(--linha);
    font-size: 12px;
    color: var(--tinta-apagada);
}
.demo-topo strong { font-size: 15px; color: var(--tinta); }
.demo-rolagem { overflow-x: auto; }
.grade-demo { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 12.5px; }
.grade-demo th {
    text-align: left;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tinta-apagada);
    font-weight: 600;
    padding: 8px 10px;
    border-bottom: 1px solid var(--linha);
    white-space: nowrap;
}
.grade-demo th.num, .grade-demo td.num { text-align: right; }
.grade-demo td {
    padding: 9px 10px;
    white-space: nowrap;
    border-top: 1px solid var(--linha);
    font-variant-numeric: tabular-nums;
}
.grade-demo tbody tr:nth-child(even) td { background: #FAFAF7; }
.grade-demo .forte { font-weight: 700; }
.grade-demo .sku-demo { font-family: var(--fonte-marca); font-weight: 700; font-size: 11.5px; }
.grade-demo .sem-sku-demo { color: var(--tinta-apagada); font-size: 11.5px; }
/* A linha que vende o produto. Ela é vermelha na tela real também. */
.grade-demo tr.vermelha td { color: var(--vermelho); background: var(--vermelho-fundo); }
.grade-demo tr.vermelha td.forte { font-weight: 700; }
.grade-demo .falta { color: var(--tinta-apagada); font-style: italic; font-weight: 400; }
.demo-pe {
    padding: 9px 16px;
    border-top: 1px solid var(--linha);
    font-size: 11px;
    color: var(--tinta-apagada);
    background: var(--fundo);
}
.leitura-demo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-top: 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--tinta-fraca);
}
.leitura-demo strong { color: var(--tinta); display: block; }

@media (max-width: 760px) {
    .leitura-demo { grid-template-columns: 1fr; gap: 14px; }
}

/* ===== blocos novos da página que vende (versão 2)
 *
 * "Quem junta isso" é uma escada de concordância: três linhas verdadeiras
 * sobre ferramentas que o leitor JÁ usa, e só então a pergunta. Ele
 * concorda três vezes antes de ser perguntado. */
.quem-junta { max-width: 720px; margin: 0 auto; }
.quem-junta > div {
    padding: 13px 0;
    border-bottom: 1px solid var(--linha);
    font-size: 17px;
    color: var(--tinta-fraca);
}
.quem-junta > div span { color: var(--tinta); font-weight: 600; }
.quem-junta .pergunta {
    border-bottom: 0;
    padding-top: 20px;
    font-size: 21px;
    color: var(--tinta);
    line-height: 1.45;
}
.quem-junta .pergunta strong { color: var(--acento); font-weight: 700; }

/* As cinco deduções: o que some entre o preço e o seu bolso. */
.some { max-width: 720px; margin: 22px auto 0; }
.some > div {
    padding: 11px 0 11px 18px;
    border-left: 2px solid var(--acento);
    margin-bottom: 8px;
    font-size: 14.5px;
    color: var(--tinta-fraca);
    line-height: 1.5;
}
.some > div strong { display: block; color: var(--tinta); font-size: 15px; }
.fecha-bloco {
    max-width: 720px;
    margin: 24px auto 0;
    font-size: 19px;
    font-weight: 600;
    text-align: center;
}

/* A multiplicação — o momento de reflexão da página. Ela é o argumento
 * mais forte que existe aqui, então ganha o fundo escuro. */
.multiplica h2 { color: var(--superficie); margin-bottom: 6px; }
.chamada-multiplica { font-size: 17px; margin-bottom: 4px; }
.chamada-multiplica strong { color: var(--acento); }
.escada { max-width: 480px; margin: 18px auto 22px; }
.escada > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 18px;
    margin-bottom: 7px;
    border-radius: var(--raio);
    background: rgba(255, 255, 255, 0.06);
}
.escada .qtd { font-size: 14px; color: #B9B9B2; }
.escada .perda {
    font-family: var(--fonte-marca);
    font-size: 22px;
    font-weight: 700;
    color: #FF7A4A;
    letter-spacing: -0.02em;
}
.escada .pior { background: rgba(255, 90, 31, 0.16); }
.escada .pior .qtd { color: var(--superficie); }
.escada .pior .perda { font-size: 30px; color: var(--acento); }

@media (max-width: 760px) {
    .quem-junta > div { font-size: 15px; }
    .quem-junta .pergunta { font-size: 18px; }
    .escada .perda { font-size: 19px; }
    .escada .pior .perda { font-size: 24px; }
    .fecha-bloco { font-size: 16px; }
}

/* ===== D73 — a página de vendas mostra as quatro frentes (margem →
 * contas a pagar → DRE → fluxo de caixa), na ordem real do produto.
 * As demos de Contas e Fluxo reaproveitam as MESMAS classes das telas
 * reais (.tabela, .chip-*, .semaforo-*): a prova é o produto, não uma
 * peça de design à parte. */
.quatro-frentes {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
}
.frente {
    background: var(--superficie);
    border: 1px solid var(--linha);
    border-radius: var(--raio);
    padding: 20px 18px;
    box-shadow: var(--sombra);
}
.frente-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--acento);
    color: #FFFFFF;
    font-family: var(--fonte-marca);
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 10px;
}
.frente h3 { font-size: 15px; margin: 0 0 6px; font-weight: 600; }
.frente p { font-size: 13.5px; color: var(--tinta-media); line-height: 1.55; margin: 0; }
.seta-frente { font-size: 20px; color: var(--borda-forte); text-align: center; }

/* As demos de Contas e Fluxo, dentro do mesmo cartão .tela-demo da
 * tela de Vendas — largura contida, sem a rolagem horizontal da grade
 * de 16 colunas. */
.tabela-demo-app { font-size: 13px; }
.tabela-demo-app th { padding: 9px 10px; font-size: 10px; }
.tabela-demo-app td { padding: 9px 10px; }
.miudo-demo { font-size: 10.5px; color: var(--tinta-apagada); }
.linha-estimada td { opacity: 0.6; }
.fechado-demo {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--verde-fundo, #EAF6EE);
    border: 1px solid rgba(46, 158, 91, 0.35);
    border-radius: var(--raio);
    font-size: 13.5px;
    color: #24824A;
    max-width: 720px;
}


@media (max-width: 900px) {
    .quatro-frentes { grid-template-columns: 1fr; }
    .seta-frente { transform: rotate(90deg); }
    .quatro.passos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .quatro.passos { grid-template-columns: 1fr; }
}

/* ===== vínculo de anúncio a SKU (Catálogo)
 * Formulários de linha vivem fora da tabela e são alcançados por form=,
 * porque formulário dentro de formulário não existe em HTML. */
.atalho-canal {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    background: var(--superficie); border: 1px solid var(--acento);
    border-radius: var(--raio); padding: 12px 16px; margin: 12px 0 14px;
}
.atalho-canal strong { display: block; font-size: 13.5px; }
.atalho-canal button { width: auto; height: 36px; padding: 0 16px; white-space: nowrap; }
.grade-vinculo { font-size: 12.5px; }
.rola-tabela { overflow-x: auto; }   /* a tabela de vínculo rola dentro do bloco, não estoura */
/* A42/23-09: tabela larga rola dentro do bloco; antes era style= inline, que a CSP descarta. */
.bloco.tabela-larga { padding: 0; overflow-x: auto; }
/* 23/09 — Vendas: o bloco é a área de rolagem nas duas direções e o cabeçalho
 * gruda no topo dela (sticky só vale dentro do contêiner que rola). Os links
 * da linha não se arrastam: arrastar seleciona o texto para copiar. */
.bloco.tabela-larga.rola-vertical { max-height: calc(100vh - 150px); overflow: auto; }
.rola-vertical .grade-vendas thead th { position: sticky; top: 0; z-index: 2; box-shadow: inset 0 -1px var(--linha); }
/* D136 (Daniel, 06/10): "fixa as duas primeiras colunas, data/hora e canal,
 * quando o seller arrastar para a direita". Sticky à esquerda precisa de
 * largura conhecida na primeira coluna e fundo opaco em todas as linhas. */
.grade-vendas th:nth-child(1), .grade-vendas td.quando { position: sticky; left: 0; width: 84px; min-width: 84px; }
.grade-vendas th:nth-child(2), .grade-vendas td.onde { position: sticky; left: 84px; width: 118px; min-width: 118px; }
/* D247 (22/10; Daniel: "a coluna de produto tem que ser congelada ao arrastar para a direita, senão eu chego
 * em MC pós-Ads e não tenho o nome do produto na tela"): Produto é a terceira coluna e também fica fixa. */
.grade-vendas th:nth-child(3), .grade-vendas td.produto { position: sticky; left: 202px; width: 230px; min-width: 230px; max-width: 230px; }
.grade-vendas td.quando, .grade-vendas td.onde, .grade-vendas td.produto { z-index: 1; background: var(--superficie); }
.rola-vertical .grade-vendas thead th:nth-child(1), .rola-vertical .grade-vendas thead th:nth-child(2),
.rola-vertical .grade-vendas thead th:nth-child(3) { z-index: 3; }
.grade-vendas tbody.venda:nth-of-type(even) td.quando, .grade-vendas tbody.venda:nth-of-type(even) td.onde,
.grade-vendas tbody.venda:nth-of-type(even) td.produto { background: #FAFAF7; }
.grade-vendas tbody.venda:hover td.quando, .grade-vendas tbody.venda:hover td.onde,
.grade-vendas tbody.venda:hover td.produto { background: #F1F0EA; }
.grade-vendas td.produto, .grade-vendas th:nth-child(3) { box-shadow: inset -1px 0 var(--linha), 6px 0 8px -6px rgba(0,0,0,.18); }   /* a borda que separa o fixo do que rola */
/* A barra horizontal sempre à vista: o Chrome no Windows 11 esconde a barra até o mouse passar ("tinha que
 * aparecer a barra na parte inferior"). Estilizar a barra desliga esse sumiço. */
.rola-vertical::-webkit-scrollbar { height: 12px; width: 12px; }
.rola-vertical::-webkit-scrollbar-track { background: #F1F0EA; }
.rola-vertical::-webkit-scrollbar-thumb { background: #B8B8B0; border-radius: 6px; border: 3px solid #F1F0EA; }
.rola-vertical::-webkit-scrollbar-thumb:hover { background: #8E8E86; }
.rola-vertical { scrollbar-width: auto; scrollbar-color: #B8B8B0 #F1F0EA; }
.rola-vertical .grade-vendas .detalhe-venda { scroll-margin-top: 34px; }   /* a âncora #v… não fica sob o cabeçalho fixo */
.grade-vendas a { -webkit-user-drag: none; }
.grade-vendas .estimado { font-size: 9.5px; margin-left: 2px; vertical-align: super; border-bottom: none; }
.grade-vinculo th {
    text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tinta-apagada); font-weight: 600; padding: 8px 6px;
    border-bottom: 1px solid var(--linha); white-space: nowrap;
}
.grade-vinculo th.num { text-align: right; }
.grade-vinculo td { padding: 6px; vertical-align: middle; border-top: 1px solid var(--linha); }
.titulo-vinculo {
    display: inline-block; max-width: 230px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; color: var(--tinta-fraca);
}
/* Zebrado na tabela de SKUs do Catálogo (Daniel, 23/09, lançando custos:
 * "uma linha mais clara outra mais escura para facilitar os lançamentos").
 * Na tela de Vendas o zebrado é por tbody (uma venda = um tbody); aqui
 * cada SKU é uma linha só, então é por tr. */
.grade-catalogo tbody tr.linha-venda:nth-of-type(even) td { background: #F3F3EE; }
.grade-catalogo tbody tr.linha-venda:hover td { background: #ECEBE4; }
/* D95 — custos em lote por planilha: fechado é uma linha; aberto, os dois passos. */
.importar-custos summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 12px; }
.importar-custos summary::-webkit-details-marker { display: none; }
.importar-custos summary h2 { margin: 0; }
.importar-custos summary::before { content: "▸"; color: var(--tinta-apagada); }
.importar-custos[open] summary::before { content: "▾"; }
.passos-planilha { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 14px; }
.passos-planilha .ajuda { margin-top: 8px; }
.form-planilha input[type=file] { width: auto; height: auto; padding: 6px 0; margin: 0 8px 0 6px; font-size: 12.5px; }
@media (max-width: 900px) { .passos-planilha { grid-template-columns: 1fr; } }

/* D91 — sem custo no topo, com faixa e fundo próprios. */
.grade-catalogo tr.separador td { padding: 8px 12px; font-size: 12.5px; color: var(--tinta-media); background: var(--fundo); border-top: 2px solid var(--linha); }
.grade-catalogo tr.separador.sem-custo td { color: #7A2E0E; background: #FFF6F1; border-top-color: var(--acento); }
.grade-catalogo tr.separador.sem-custo strong { color: var(--acento); font-size: 14px; }
.grade-catalogo tbody tr.linha-venda.falta-custo td { background: #FFF9F5; box-shadow: inset 3px 0 0 var(--acento); }
.grade-catalogo tbody tr.linha-venda.falta-custo:nth-of-type(even) td { background: #FFF3EC; }
.grade-catalogo tbody tr.linha-venda.falta-custo:hover td { background: #FFEBDF; }
.link-anuncio { text-decoration: underline dotted; text-underline-offset: 2px; }
.link-anuncio:hover { color: var(--acento); text-decoration: underline; }
.acoes-vinculo { white-space: normal; }
.acao-linha { display: flex; align-items: center; white-space: nowrap; }
.acao-linha + .acao-linha { margin-top: 4px; }
.acoes-vinculo .ou { margin: 0 6px; color: var(--tinta-apagada); font-size: 11px; }
.campo-linha { height: 28px; margin: 0; padding: 0 8px; font-size: 12px; width: 110px; display: inline-block; vertical-align: middle; }
.campo-linha.fator { width: 44px; text-align: center; }
.botao-linha {
    width: auto; height: 28px; padding: 0 10px; font-size: 12px;
    display: inline-block; vertical-align: middle; margin-left: 4px;
}
.botao-linha.secundario { background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda-forte); }
.botao-linha.secundario:hover { border-color: var(--tinta); }
.agrupar-rodape { display: flex; align-items: center; gap: 16px; padding: 12px 6px 2px; flex-wrap: wrap; }
.agrupar-alerta { font-size: 16px; font-weight: 700; color: var(--acento); white-space: nowrap; }
.agrupar-opcoes { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 260px; }
.agrupar-opcao { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.agrupar-opcao + .agrupar-opcao { padding-top: 8px; border-top: 1px dashed var(--borda); }
/* Marcou uma caixa lá em cima da lista de 70+ anúncios e não achava o
   botão "Agrupar" (queixa direta, 22/09). A primeira tentativa usou
   position:sticky, que só gruda DEPOIS que a rolagem passa da posição
   normal da barra — quem marca uma caixa no topo e não rola até o fim
   da tabela nunca vê o efeito, porque a barra continua fora da tela
   (mesma queixa se repetiu depois de publicado). position:fixed não
   tem esse problema: aparece assim que uma caixa é marcada, em
   qualquer ponto da rolagem. Sem JavaScript: `:has()` liga o modo fixo
   só quando existe alguma caixa marcada. */
#sem-sku:has(input[name="anuncio"]:checked) .agrupar-rodape {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: var(--superficie); border-top: 2px solid var(--acento);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.12);
    padding: 12px 24px; align-items: center;
}
.anuncios-do-sku summary { cursor: pointer; list-style: none; text-decoration: underline dotted; }
.anuncios-do-sku summary::-webkit-details-marker { display: none; }
.lista-anuncios { text-align: left; margin-top: 8px; min-width: 420px; font-size: 12px; }
.lista-anuncios > div { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-top: 1px solid var(--linha); }
.lista-anuncios .titulo-vinculo { max-width: 220px; flex: 1; }
.lista-anuncios form { margin: 0; margin-left: auto; }

/* ===== Resultado do mês (DRE, D60) */
.dre .linha.fixa .rotulo { padding-left: 14px; color: var(--tinta-fraca); }
.dre .linha.total-dre {
    margin-top: 8px; padding-top: 12px; border-top: 2px solid var(--tinta);
    font-weight: 700;
}
.dre .linha.total-dre .rotulo { letter-spacing: 0.04em; }
.dre .linha.total-dre .valor { font-family: var(--fonte-marca); font-size: 20px; }
.seguranca { margin-top: 12px; padding: 10px 12px; border-radius: var(--raio); font-size: 13px; }
.seguranca strong { font-family: var(--fonte-marca); font-size: 18px; margin-right: 4px; }
.seguranca.verde { background: #EAF3E6; color: #3F6B2E; }
.seguranca.amarelo { background: #FBF3DC; color: #7A5A00; }
.seguranca.vermelho { background: var(--vermelho-fundo); color: var(--vermelho); }
.grade-fixas .linha-fixa {
    display: grid; grid-template-columns: 1fr 120px 160px; gap: 8px; align-items: center;
    padding: 6px 0; border-top: 1px solid var(--linha);
}
.grade-fixas label { font-size: 13px; }
.grade-fixas label .miudo { display: block; }
.grade-fixas input { height: 32px; margin: 0; font-size: 12.5px; padding: 0 8px; }
.grade-fixas input[name^="valor_"] { text-align: right; font-variant-numeric: tabular-nums; }
.acoes-fixas { margin-top: 12px; }
.acoes-fixas button { width: auto; height: 36px; padding: 0 18px; }
@media (max-width: 760px) { .grade-fixas .linha-fixa { grid-template-columns: 1fr; } }

/* ===== Conta, assinatura e indicação (D62, D63) */
.indique { border-left: 3px solid var(--acento); }
.link-indicacao {
    margin-top: 10px; padding: 10px 12px; background: var(--fundo);
    border: 1px dashed var(--borda-forte); border-radius: var(--raio);
    overflow-wrap: anywhere;
}
.link-indicacao code { background: none; font-size: 13px; padding: 0; }
.funil-mini { display: flex; gap: 18px; margin-top: 16px; }
.funil-mini > div { display: flex; flex-direction: column; }
.funil-mini strong { font-family: var(--fonte-marca); font-size: 20px; }
.funil-mini span { font-size: 11px; color: var(--tinta-apagada); }
.alerta-bom { border-left: 3px solid #3F6B2E; }
.selo-ok { color: #3F6B2E; font-weight: 600; font-size: 12px; }
textarea.zap {
    width: 100%; font: inherit; font-size: 13px; line-height: 1.5; padding: 10px 12px;
    border: 1px solid var(--borda); border-radius: var(--raio-miudo); background: var(--fundo);
    resize: vertical; color: var(--tinta-media);
}
.opcao-plano {
    display: flex; gap: 12px; align-items: flex-start; padding: 12px;
    border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 10px; cursor: pointer;
}
.opcao-plano:has(input:checked) { border-color: var(--acento); background: #FFF6F1; }
.opcao-plano input { margin-top: 3px; }
.opcao-plano .miudo { display: block; }

/* D83 — a forma de pagamento do anual só importa quando o anual está
 * escolhido; sem JS, mostra/esconde pelo próprio estado do radio. */
.forma-anual { display: none; }
form:has(input[name="plano"][value="anual"]:checked) .forma-anual { display: block; }


/* ===== a barra do topo (D64) — no lugar do menu lateral
 * 210px de largura em toda tela, para sete itens, era caro demais numa
 * aplicação cuja informação é larga. Altura é barata; largura não. */
.barra-topo {
    display: flex; align-items: center; gap: 22px;
    height: 56px; padding: 0 22px;
    background: var(--superficie); border-bottom: 1px solid var(--linha);
    position: sticky; top: 0; z-index: 5;
}
.marca-topo { text-decoration: none; color: inherit; flex: none; }
.marca-topo .marca { font-size: 15px; }
.marca-topo .marca .sigla { font-size: 19px; }
.barra-topo nav { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; }
.barra-topo nav a {
    padding: 8px 12px; color: var(--tinta-fraca); text-decoration: none;
    font-size: 13.5px; white-space: nowrap; border-radius: var(--raio);
    border-bottom: 2px solid transparent;
}
.barra-topo nav a:hover { color: var(--tinta); background: var(--fundo); }
.barra-topo nav a.ativo { color: var(--tinta); font-weight: 600; border-bottom-color: var(--acento); border-radius: 0; }
.conta-topo { display: flex; align-items: center; gap: 12px; flex: none; }
/* D133 — versículo do dia: itálico, miúdo, à direita, como no BI. */
.versiculo-dia { text-align: right; font-style: italic; font-size: 11.5px; color: var(--tinta-apagada);
                 line-height: 1.5; padding: 6px 22px 0; }   /* termina na borda da barra, sob o "Sair" */
.versiculo-dia strong { font-style: normal; color: var(--acento); font-weight: 600; margin-left: 6px; }
.loja-topo { font-size: 12.5px; color: var(--tinta-media); font-weight: 600; white-space: nowrap; }
.loja-topo .miudo { font-weight: 400; }
.form-sair { margin: 0; }
.botao-sair {
    width: auto; height: 30px; padding: 0 12px; font-size: 12.5px;
    background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda-forte);
}
.botao-sair:hover { border-color: var(--tinta); }
/* ===== D153 (08/10) — a barra em cinco áreas, a busca única, o sino e o
 * menu da loja. Segundo nível em abas dentro da tela (.abas-area). */
.barra-topo { gap: 16px; }
.barra-topo .areas { flex: none; }
.barra-topo .areas a { font-size: 14px; padding: 8px 13px; }
.busca-topo { flex: 1; min-width: 0; max-width: 320px; margin-left: auto; }
.busca-topo input[type="search"] {
    width: 100%; height: 34px; margin: 0; padding: 0 12px 0 32px; font-size: 13px;
    border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--fundo);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6B66' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-4-4'/></svg>");
    background-repeat: no-repeat; background-position: 10px center;
}
.busca-topo input[type="search"]:focus { background-color: var(--superficie); border-color: var(--tinta); outline: none; }
.conta-topo { gap: 10px; position: relative; }
.menu-loja { position: relative; }
.menu-loja > summary {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
    padding: 3px 8px 3px 3px; border: 1px solid var(--borda); border-radius: 999px;
    font-size: 13px; font-weight: 600; color: var(--tinta); white-space: nowrap;
}
.menu-loja > summary::-webkit-details-marker { display: none; }
.menu-loja > summary:hover { border-color: var(--borda-forte); background: var(--fundo); }
.menu-loja .avatar {
    width: 26px; height: 26px; border-radius: 50%; background: var(--acento); color: #FFFFFF;
    font-style: normal; font-size: 11.5px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.menu-loja .seta { color: var(--tinta-apagada); font-size: 11px; }
.menu-loja .drop {
    position: absolute; right: 0; top: calc(100% + 8px); width: 250px; z-index: 30;
    background: var(--superficie); border: 1px solid var(--borda); border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); padding: 8px;
}
.menu-loja .drop .t { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tinta-apagada); padding: 6px 10px 4px; }
.menu-loja .drop a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 6px; color: var(--tinta); font-size: 13.5px; }
.menu-loja .drop a:hover { background: var(--fundo); color: var(--tinta); }
.menu-loja .drop a span { color: var(--tinta-apagada); font-size: 12px; }
.menu-loja .drop hr { border: 0; border-top: 1px solid var(--linha); margin: 6px 0; }
.menu-loja .drop .sync-topo { font-size: 11.5px; color: var(--tinta-apagada); padding: 2px 10px 8px; }
.menu-loja .drop .form-sair { padding: 0 10px 4px; }
.menu-loja .drop .botao-sair { width: 100%; }
/* As abas de área: botão com ícone, nome e contador (Daniel: "algum destaque
 * no botão do submenu"). O contador é pendência; no botão ativo, laranja. */
.abas-area > a { gap: 7px; height: 36px; line-height: 34px; padding: 0 15px; font-size: 13.5px; box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04); }
.abas-area > a i { font-style: normal; font-size: 14px; color: var(--tinta-fraca); }
.abas-area > a.ativo { box-shadow: 0 3px 10px rgba(17, 17, 17, 0.18); }
.abas-area > a.ativo i { color: var(--fundo); }
.abas-area .badge { line-height: 1.4; }
.abas-area .badge.neutro { background: var(--fundo); color: var(--tinta-fraca); }
.abas-area > a.ativo .badge { background: var(--acento); color: #FFFFFF; }
.abas-area > a.ativo .badge.neutro { background: rgba(255, 255, 255, 0.18); color: #FFFFFF; }
/* D154 — a tela de Avaliações chega com um pedido só. */
.chip-filtro { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--borda-forte); border-radius: var(--raio-miudo); background: var(--fundo); font-family: var(--fonte-marca); font-size: 12px; }
.chip-filtro a { color: var(--tinta-fraca); font-size: 14px; }
/* A barra de baixo do celular. */
.barra-celular { display: none; }
@media (max-width: 760px) {
    .barra-topo { height: auto; padding: 8px 12px; gap: 8px; }
    .barra-topo .areas, .menu-loja .nome-loja, .selo-avisos .rotulo { display: none; }
    .busca-topo { max-width: none; margin-left: 0; }
    .menu-loja .drop { position: fixed; right: 8px; left: 8px; top: 60px; width: auto; }
    .barra-celular {
        display: flex; justify-content: space-around; align-items: center;
        position: fixed; left: 0; right: 0; bottom: 0; height: 60px; z-index: 35;
        background: var(--superficie); border-top: 1px solid var(--borda); padding: 0 4px 4px;
    }
    .barra-celular a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; color: var(--tinta-fraca); width: 64px; }
    .barra-celular a i { font-style: normal; font-size: 19px; }
    .barra-celular a.ativo { color: var(--acento); font-weight: 600; }
    .aplicacao .conteudo { padding-bottom: 80px; }
    .abas-area { flex-wrap: nowrap; overflow-x: auto; padding: 8px 10px; gap: 6px; }
    .abas-area > a { padding: 0 11px; font-size: 12.5px; white-space: nowrap; flex: none; }
}


/* ===== D65 — preço, garantia e o motor de indicação */
.preco-venda .dois { align-items: stretch; }
.cartao-preco {
    background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
    padding: 24px 26px;
}
.cartao-preco.destaque-preco { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(255, 90, 31, 0.12); }
.rotulo-preco { font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-fraca); font-weight: 600; }
.valor-preco { font-family: var(--mono, "Space Mono", monospace); font-size: 40px; font-weight: 700; margin: 8px 0 10px; letter-spacing: -0.02em; }
.valor-preco span { font-size: 16px; font-weight: 400; color: var(--tinta-fraca); margin-left: 4px; }
.cartao-preco p { margin: 0; font-size: 15px; color: var(--tinta-media); line-height: 1.5; }
.botao-plano { display: block; text-align: center; text-decoration: none; margin-top: 18px; }
.garantia {
    margin-top: 22px; padding: 16px 20px; border-radius: var(--raio);
    background: #EAF3E6; color: #3F6B2E; font-size: 15px; line-height: 1.5;
}
.nota-preco {
    margin: 0 0 18px; padding: 12px 14px; border-radius: var(--raio);
    background: var(--superficie); border: 1px solid var(--linha); font-size: 13.5px; line-height: 1.5;
    color: var(--tinta-media);
}
.faixa-indicacao { background: #FFF1EA; border-color: rgba(255, 90, 31, 0.35); }
.faixa-indicacao strong { color: var(--tinta); }
.faixa-indicacao .miudo { display: block; margin-top: 4px; font-family: var(--mono, "Space Mono", monospace); }
@media (max-width: 760px) {
    .preco-venda .dois { grid-template-columns: 1fr; }
    .valor-preco { font-size: 32px; }
}

.cartao, .cartao-preco, .faixa, .aviso { box-shadow: var(--sombra); }


/* ===== D68 — contas a pagar */
.aviso-ok { background: #EAF3E6; color: #3F6B2E; }

/* ===== A42/A62 (24/09) — utilitárias que substituem TODO `style=` inline.
 * A CSP de produção (style-src 'self') descarta o atributo style: o que era
 * inline valia no meu navegador e não no do seller — botões largos, avisos
 * verdes sem cor, barras cheias. Um teste reprova `style="` em qualquer
 * template com sessão, para não voltar. */
.acao-inline { width: auto; padding: 0 18px; height: 36px; line-height: 36px; display: inline-block; text-align: center; }
.acao-inline.alta { height: 40px; line-height: 40px; padding: 0 20px; }
.acao-inline.baixa { height: 34px; line-height: 34px; padding: 0 16px; }
button.botao-filtro { width: auto; padding: 0 20px; height: 38px; }
.nota-senha, .nota-campo { margin: -8px 0 14px; }
.maiusculo { text-transform: uppercase; }
.apagado { color: var(--tinta-fraca); }
.campo.cresce { flex: 1; }
input.largura-160 { width: 160px; }
td.vazio.amplo { padding: 20px; }
.m0 { margin: 0; }
.mt4 { margin-top: 4px; } .mt6 { margin-top: 6px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; }
.mt14 { margin-top: 14px; } .mt16 { margin-top: 16px; } .mt18 { margin-top: 18px; } .mt20 { margin-top: 20px; }
.mt24 { margin-top: 24px; }
/* D98 — canais conectados no topo do Painel: um chip por canal, com a hora da última sync. */
.canais-conectados { display: flex; flex-wrap: wrap; gap: 8px; margin: -6px 0 16px; }
.canal-conectado {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
    background: var(--superficie); border: 1px solid var(--linha); color: var(--tinta); text-decoration: none; font-size: 12.5px;
}
.canal-conectado:hover { border-color: var(--acento); }
.canal-conectado .miudo { color: var(--tinta-apagada); }
.canal-conectado.mais, .canal-conectado.vazio { color: var(--tinta-apagada); border-style: dashed; }
.canal-conectado.vazio strong { color: var(--acento); }
/* D96 — avisos por e-mail em Configurações: uma linha por aviso, caixa e texto alinhados. */
.opcoes-avisos label { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.5; margin: 0 0 10px; cursor: pointer; }
.opcoes-avisos input[type="checkbox"] { width: 16px; height: 16px; margin: 3px 0 0; flex: none; accent-color: var(--acento); }
.opcoes-avisos button { width: auto; padding: 0 22px; height: 40px; margin-top: 4px; }
.mb14 { margin-bottom: 14px; } .mb16 { margin-bottom: 16px; }
.fila.neutra { border-left-color: var(--borda-forte); }
main.conteudo.largura-640 { max-width: 640px; }
main.conteudo.largura-760 { max-width: 760px; }
main.conteudo.largura-820 { max-width: 820px; }
.explicacao.destacada { font-size: 15px; color: var(--tinta); }
h3.pergunta { font-size: 13px; color: var(--tinta-fraca); margin: 16px 0 8px; }
/* Onde uma regra de contexto (.bloco h2, .detalhe h3, .barra button) venceria a utilitária. */
.bloco h2.m0 { margin: 0; }
.detalhe h3.mt14 { margin-top: 14px; }
.barra button.botao-filtro { padding: 0 20px; }
.navega-mes { display: flex; gap: 14px; align-items: flex-end; padding-bottom: 8px; }
.navega-mes a { font-size: 13px; color: var(--tinta-media); text-decoration: none; }
.navega-mes a:hover { color: var(--tinta); }
.alerta-ruim { border-color: var(--vermelho); }
.grade-contas { grid-template-columns: 1fr 340px; }
.filtros-contas { display: flex; gap: 4px; margin-bottom: 10px; }
.filtros-contas a { padding: 5px 10px; border-radius: var(--raio-miudo); color: var(--tinta-fraca); text-decoration: none; font-size: 13px; }
.filtros-contas a.ativo { background: var(--fundo); color: var(--tinta); font-weight: 600; }
.tabela-contas th { text-align: left; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-fraca); padding: 4px 6px; border-bottom: 1px solid var(--linha); }
.tabela-contas th.num { text-align: right; }
.tabela-contas td { padding: 6px; border-bottom: 1px solid var(--linha); }
.tabela-contas.compacta td { padding: 4px 4px; font-size: 12.5px; }
.tabela-contas tr.conta-paga td { color: var(--tinta-media); }
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; white-space: nowrap; }
.chip-paga { background: #EAF3E6; color: #3F6B2E; }
.chip-pendente { background: #FBF3DC; color: #7A5A00; }
.chip-vencida { background: var(--vermelho-fundo); color: var(--vermelho); font-weight: 600; }
.acoes-conta { white-space: nowrap; }
.acoes-conta form { display: inline-flex; gap: 4px; align-items: center; margin: 0 4px 0 0; }
.acoes-conta input[type="date"] { height: 28px; padding: 0 6px; font-size: 12px; width: 130px; }
.acoes-conta .botao-linha { height: 28px; line-height: 28px; padding: 0 10px; font-size: 12px; width: auto; }
.copiar-mes { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; font-size: 13px; }
.copiar-mes select { width: auto; height: 32px; }
.copiar-mes .botao-linha { width: auto; height: 32px; line-height: 32px; padding: 0 12px; }
.form-conta .campo { margin-bottom: 10px; }
.form-conta .caixa { margin: 6px 0; }
.discreto { color: inherit; text-decoration: none; }
.discreto:hover { text-decoration: underline; }
@media (max-width: 760px) {
    .grade-contas { grid-template-columns: 1fr; }
    .acoes-conta form { display: flex; margin-bottom: 4px; }
}



/* ===== D69 — o padrão visual do BI da Universo Genial em todo o Kalko
 * (pedido do Daniel, 17/09: "replica esse padrão para todo o Kalko").
 * Números grandes em cima, tabela na largura toda com % e subtotais
 * destacados, abas em botão com contador, navegador de mês ‹ ›. As
 * fontes e as cores da marca ficam; muda a estrutura. */
:root { --verde: #2E9E5B; --verde-fundo: #EAF6EE; --azul-fundo: #EEF3FB; }

.conteudo { padding: 24px 32px 48px; max-width: 1520px; margin: 0 auto; }
.cabecalho { margin-bottom: 20px; }
.cabecalho h1 { font-size: 26px; letter-spacing: -0.01em; }

.bloco { padding: 20px 22px; border-color: var(--linha); }
.bloco h2 { font-size: 11px; letter-spacing: 0.08em; color: var(--tinta-fraca); margin-bottom: 10px; }
.bloco.sem-padding { padding: 0; overflow: hidden; }
.bloco.sem-padding > h2 { padding: 18px 22px 0; margin-bottom: 8px; }

.cartoes { gap: 18px; margin-bottom: 18px; }
.cartoes .bloco { padding: 22px 24px; }
.numerao { font-size: 30px; }
.numerao.positivo { color: var(--verde); }
.numerao .pct { font-family: var(--fonte); font-size: 14px; font-weight: 500; color: var(--tinta-fraca); margin-left: 8px; letter-spacing: 0; }
.cartoes .nota { margin-top: 6px; }

.barra button, .barra .botao { width: auto; height: 38px; padding: 0 18px; font-size: 13px; }
/* D116 — "Chegou um pacote": o campo de foto e a nota de que a foto não fica. */
.chegou-pacote { background: var(--azul-fundo); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; }
.chegou-pacote input[type="file"] { height: auto; padding: 8px; font-size: 13px; }
.chegou-pacote .campo-nota { flex-basis: 100%; color: var(--tinta-fraca); }
.botao-inline { width: auto; padding: 0 18px; height: 36px; line-height: 36px; display: inline-block; margin: 8px 0; }

/* abas em botão */
.abas { display: flex; gap: 8px; align-items: center; margin-bottom: 18px; flex-wrap: wrap; }
.abas > a {
    display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
    border: 1px solid var(--linha); background: var(--superficie); border-radius: var(--raio);
    color: var(--tinta-media); font-size: 13.5px; font-weight: 500; box-shadow: var(--sombra);
}
.abas > a:hover { color: var(--tinta); border-color: var(--borda-forte); }
.abas > a.ativo { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }
.abas .badge { background: var(--vermelho-fundo); color: var(--vermelho); border-radius: 999px; padding: 1px 8px; font-size: 11.5px; font-weight: 600; }
.abas > a.ativo .badge { background: var(--vermelho); color: #FFFFFF; }
.abas .direita { margin-left: auto; display: flex; align-items: center; gap: 8px; }

/* navegador de mês */
.navega-mes { display: inline-flex; align-items: center; gap: 6px; padding: 0; }
.navega-mes .seta {
    display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border: 1px solid var(--linha); border-radius: var(--raio-miudo); background: var(--superficie);
    color: var(--tinta-media); font-size: 18px; box-shadow: var(--sombra);
}
.navega-mes .seta:hover { color: var(--tinta); border-color: var(--borda-forte); }
.navega-mes .mes-atual { font-family: var(--fonte-marca); font-weight: 700; font-size: 14px; padding: 0 8px; white-space: nowrap; }
.navega-mes form { display: inline-flex; gap: 4px; margin: 0 0 0 6px; }
.navega-mes input[type=month] { height: 36px; margin: 0; width: 172px; font-size: 13px; padding: 0 8px; }
.navega-mes button { width: auto; height: 36px; padding: 0 12px; font-size: 12.5px; }
.navega-mes button.secundario { background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda-forte); }
.navega-mes button.secundario:hover { border-color: var(--tinta); }
/* D134 — as setas dentro da barra de filtros (Painel, Vendas, Devoluções). */
.barra .setas-mes { display: flex; gap: 4px; }
.barra .setas-mes input[type=month] { width: 150px; }
.setas-mes .seta-vazia { color: var(--borda-forte); cursor: default; }
.setas-mes .seta-vazia:hover { color: var(--borda-forte); border-color: var(--linha); }

/* a tabela padrão */
.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
    text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--tinta-fraca); font-weight: 600; padding: 12px 16px; background: var(--fundo);
    border-bottom: 1px solid var(--linha);
}
.tabela th.num, .tabela td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela td { padding: 11px 16px; border-top: 1px solid var(--linha); vertical-align: middle; font-size: 14px; }
/* D81 — a DRE navegável (abaixo) agrupa linhas em <tbody> por bloco que
   abre; ":first-child" sozinho pegaria o primeiro <tr> de CADA tbody, não
   só o da tabela. Escopado ao primeiro tbody para o topo continuar sem
   risco em toda tabela que usa .tabela, mesmo as de tbody único. */
.tabela tbody:first-of-type tr:first-child td { border-top: 0; }
.tabela tr.sub td { color: var(--tinta-media); }
.tabela tr.sub td:first-child { padding-left: 30px; }
.tabela tr.subtotal td { background: var(--azul-fundo); font-weight: 600; }
.tabela tr.total td { background: var(--azul-fundo); font-weight: 700; font-size: 15px; border-top: 2px solid var(--tinta); }
.tabela tr.total td.num { font-family: var(--fonte-marca); font-size: 19px; letter-spacing: -0.02em; }
.tabela td.pct { color: var(--tinta-apagada); font-size: 12.5px; text-align: right; width: 90px; font-variant-numeric: tabular-nums; }
.tabela td.positivo { color: var(--verde); }
.tabela.compacta td { padding: 8px 16px; font-size: 13px; }
.rodape-tabela { padding: 14px 22px 18px; font-size: 12px; color: var(--tinta-apagada); line-height: 1.6; border-top: 1px solid var(--linha); }
.rodape-tabela a { color: var(--tinta); font-weight: 600; }
.rodape-tabela .nota-teto { color: var(--acento); margin-bottom: 4px; }

/* contas: a mesma tabela */
.tabela-contas th { background: var(--fundo); padding: 11px 10px; font-size: 11px; letter-spacing: 0.08em; }
.tabela-contas td { padding: 10px; font-size: 13.5px; }

/* painel: a cascata ganha largura e a coluna de % */
.grade { grid-template-columns: minmax(400px, 2fr) 3fr; gap: 18px; }
.grade-contas { grid-template-columns: 1fr 360px; }

@media (max-width: 760px) {
    .abas .direita { margin-left: 0; width: 100%; }
    .navega-mes form { display: none; }
    .conteudo { padding: 18px 16px 40px; }
}
.tabela tr.abertura-linha td { font-size: 12.5px; color: var(--tinta-fraca); padding-top: 4px; padding-bottom: 4px; }
.tabela tr.abertura-linha td:first-child { padding-left: 48px; }

/* D81 — DRE navegável: clica pra abrir, sem JavaScript. Cada bloco que
 * abre (receita por canal, taxa por canal, despesa por categoria) é o
 * seu próprio <tbody>; a caixinha marcada revela as linhas dele via
 * :has(), sem vazar para os outros blocos da mesma tabela. */
.abre-linha { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.checa-abre { cursor: pointer; margin: 0; width: 14px; height: 14px; accent-color: var(--acento); }
.seta-abre { display: inline-block; font-size: 10px; color: var(--tinta-apagada); transition: transform 0.15s; }
.checa-abre:checked ~ .seta-abre { transform: rotate(90deg); }
.grupo-abre .abertura-linha { display: none; }
.grupo-abre:has(.checa-abre:checked) .abertura-linha { display: table-row; }

/* DM Mono só existe até o peso 500: o negrito sintético fica borrado. */
.numerao, .tabela tr.total td.num, .linha.total .valor, .seguranca strong { font-weight: 500; }

/* ===== Contas no padrão do BI (17/09): filtros em pílula, ações à direita,
 * formulário num painel que abre sem JavaScript (<details>). */
.linha-acoes { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.linha-acoes .direita { margin-left: auto; display: flex; gap: 8px; align-items: center; position: relative; }
.pilulas { display: flex; gap: 6px; }
.pilulas a {
    padding: 8px 16px; border: 1px solid var(--linha); border-radius: var(--raio-miudo);
    background: var(--superficie); color: var(--tinta-media); font-size: 13px; font-weight: 500;
}
.pilulas a:hover { border-color: var(--borda-forte); color: var(--tinta); }
.pilulas a.ativo { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); }
.painel-suspenso { position: relative; }
.painel-suspenso summary { list-style: none; cursor: pointer; display: inline-block; width: auto; height: 38px; line-height: 38px; padding: 0 16px; font-size: 13px; font-weight: 600; border-radius: var(--raio-miudo); }
.painel-suspenso summary::-webkit-details-marker { display: none; }
.painel-suspenso summary.secundario { background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda-forte); }
.painel-suspenso summary.secundario:hover { border-color: var(--tinta); }
.painel-suspenso[open] summary.botao-acento { background: var(--tinta); }
.conteudo-suspenso {
    position: absolute; right: 0; top: 46px; z-index: 6; width: 400px; max-width: calc(100vw - 32px);
    background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
    box-shadow: 0 12px 40px rgba(17, 17, 17, 0.14); padding: 18px 20px 16px;
}
.conteudo-suspenso h2 { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-fraca); margin: 0 0 12px; }
.conteudo-suspenso .campo { margin-bottom: 10px; }
.conteudo-suspenso input, .conteudo-suspenso select { margin-bottom: 0; height: 40px; }
.conteudo-suspenso .dois-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; }
.conteudo-suspenso .caixa { display: flex; align-items: center; gap: 8px; font-size: 13px; height: 40px; }
.conteudo-suspenso button[type=submit] { height: 40px; margin-top: 4px; }
.conteudo-suspenso .nota { margin-top: 8px; }
.chip-categoria { background: var(--fundo); color: var(--tinta-media); border: 1px solid var(--linha); }
.tabela-contas td.acoes-conta { text-align: right; }
.acoes-conta .botao-linha.secundario { min-width: 32px; padding: 0 8px; }
@media (max-width: 760px) {
    .linha-acoes .direita { margin-left: 0; width: 100%; }
    .conteudo-suspenso { right: auto; left: 0; }
}

/* Os cartões nas mesmas proporções (pedido do Daniel, 17/09): a mesma
 * altura na linha, rótulo em cima, número, uma linha de apoio embaixo. */
.cartoes { align-items: stretch; }
.cartoes .bloco { display: flex; flex-direction: column; justify-content: flex-start; gap: 4px; min-height: 132px; }
.cartoes .bloco h2 { margin-bottom: 4px; }
.cartoes .numerao { font-size: 28px; line-height: 1.15; }
.cartoes .nota { margin-top: 2px; font-size: 12px; }
.cartoes .seguranca { margin-top: 6px; padding: 8px 10px; font-size: 12.5px; }
.cartoes .seguranca strong { font-size: 15px; }
.cartoes .bloco.alerta { background: var(--superficie); border-color: var(--vermelho); }
.cartoes .bloco.alerta h2 { color: var(--vermelho); }

/* Os cartões nas proporções EXATAS do BI (medidas no código dele, 17/09):
 * padding 14px 16px · rótulo 10px maiúsculo, espaçamento .04em · número
 * 20px peso 600 na DM Sans (não na mono) · apoio 10,5px · 10px entre cartões.
 * "Os cards do Kalko estão muito grandes" — Daniel. */
.cartoes { gap: 10px; margin-bottom: 14px; }
.cartoes .bloco { padding: 14px 16px; min-height: 0; gap: 0; box-shadow: none; }
.cartoes .bloco h2 { font-size: 10px; letter-spacing: 0.04em; margin: 0 0 4px; color: var(--tinta-apagada); }
.cartoes .numerao { font-family: var(--fonte); font-size: 20px; font-weight: 600; letter-spacing: 0; line-height: 1.25; }
.cartoes .numerao .pct { font-size: 12px; font-weight: 500; margin-left: 6px; }
.cartoes .nota { font-size: 10.5px; margin-top: 2px; line-height: 1.4; }
.cartoes .seguranca { margin-top: 6px; padding: 6px 8px; font-size: 11px; }
.cartoes .seguranca strong { font-size: 12.5px; }

/* Vendas estourava à direita (Daniel, 17/09): a DM Sans é mais larga e o
 * limite de 1520px da D69 cortava a tabela de dezesseis colunas numa tela
 * de 1920. A página usa a largura toda, como o BI; a tabela fica mais densa. */
.conteudo { max-width: none; }
.grade-vendas { font-size: 12px; }
.grade-vendas th { padding: 8px 5px; font-size: 9.5px; letter-spacing: 0.04em; }
.grade-vendas td { padding: 4px 5px; }

/* Campos de mês, data e número herdam a fonte e o desenho dos outros
 * (o navegador punha a fonte dele — Daniel, 17/09). */
input[type=month], input[type=date], input[type=number], textarea {
    font: inherit; color: var(--tinta); background: var(--superficie);
    border: 1px solid var(--borda-forte); border-radius: var(--raio-miudo); padding: 0 12px;
}
input[type=month], input[type=date], input[type=number] { height: 38px; }
.barra input[type=month], .barra input[type=date] { height: 38px; margin-bottom: 0; }

/* D71 — venda de produto sem custo: destaque forte na linha, e o botão que
 * resolve no lugar do "sem dado". Laranja porque é ação, não erro. */
.grade-vendas tbody.venda.sem-custo td { background: #FFF3EC; }
.grade-vendas tbody.venda.sem-custo:nth-of-type(even) td { background: #FFF3EC; }
.grade-vendas tbody.venda.sem-custo .linha-venda td:first-child { box-shadow: inset 3px 0 0 var(--acento); }
.cadastrar-custo {
    display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--acento); color: #FFFFFF;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.cadastrar-custo:hover { background: var(--acento-forte, #E44A12); color: #FFFFFF; }


/* ===== D67 fechamento · D71 escada e trancas · D72 fluxo de caixa */
.cadeado { font-size: 13px; }
.abas > a .cadeado { font-size: 12px; opacity: 0.8; }
.fechado {
    display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; padding: 12px 16px;
    background: var(--verde-fundo); border: 1px solid rgba(46, 158, 91, 0.35); border-radius: var(--raio); font-size: 13px;
}
.fechado .texto { flex: 1; }
.fechado .form-inline { margin: 0; }
.diferencas { margin-top: 8px; }
.diferencas summary { cursor: pointer; color: #7A5A00; font-weight: 600; }
.diferencas table { margin-top: 8px; background: var(--superficie); border-radius: var(--raio-miudo); }
.fechar-mes { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.fechar-mes input[type=text] { width: 360px; max-width: 100%; height: 36px; margin: 0; }
.fechar-mes .botao-fechar { background: var(--verde); color: #FFFFFF; height: 36px; line-height: 36px; padding: 0 14px; width: auto; }
.fechar-mes .botao-fechar:hover { background: #24824A; }
.fechar-mes.trancado { padding: 10px 14px; background: var(--fundo); border: 1px dashed var(--borda-forte); border-radius: var(--raio); font-size: 13px; }
.form-inline { display: inline; }

.grade-trancada { grid-template-columns: minmax(380px, 1fr) minmax(380px, 1fr); }
.tranca .explicacao { font-size: 14px; line-height: 1.55; }
.degraus { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.degraus li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--fundo); }
.degraus li.proximo { border-color: var(--acento); background: #FFF6F1; }
.degraus .degrau-texto { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.degraus .botao-inline { margin: 0; height: 32px; line-height: 32px; padding: 0 14px; font-size: 12.5px; }
.exemplo { position: relative; }
.exemplo::after {
    content: "exemplo"; position: absolute; top: 14px; right: 16px; font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--acento); border: 1px solid var(--acento); border-radius: 999px; padding: 2px 8px;
}
.exemplo .tabela td { color: var(--tinta-fraca); }
.exemplo .tabela tr.subtotal td, .exemplo .tabela tr.total td { color: var(--tinta-media); }
.escada { margin-bottom: 16px; border-left: 3px solid var(--acento); }
.escada-cabecalho { display: flex; align-items: center; gap: 14px; }
.escada-cabecalho h2 { margin: 0; }
.barra-progresso { flex: 1; max-width: 260px; height: 6px; border-radius: 999px; overflow: hidden; display: block; }
.barra-progresso .fundo { fill: var(--linha); }
.barra-progresso .feito { fill: var(--acento); }
.escada .degraus { margin-top: 12px; }
.escada .degraus li:not(.proximo) { background: var(--superficie); }
/* D91 — a escada do Painel é baixa: só o próximo degrau tem card; o resto é uma linha. */
.escada.bloco { padding: 14px 18px 12px; max-width: 760px; margin-left: auto; margin-right: auto; }
.escada .degraus { margin-top: 10px; }
.escada .degraus li { padding: 8px 12px; }
.escada .degraus-depois { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 8px; color: var(--tinta-fraca); }
.escada .degraus-depois .rotulo { font-weight: 600; color: var(--tinta-media); }
.escada .degraus-depois .sep { color: var(--linha); }
.saldo-form { gap: 10px; flex-wrap: wrap; }
.saldo-form label { margin: 0; }
.saldo-form input { width: 180px; height: 36px; margin: 0; }
.saldo-form .botao-linha { height: 36px; line-height: 36px; padding: 0 14px; width: auto; }
.fluxo tr.estimada td { opacity: 0.6; }
.fluxo tr.sem-contas td:first-child { box-shadow: inset 3px 0 0 var(--vermelho); }
.fluxo .aviso-linha { color: var(--vermelho); }
.semaforo-verde { background: var(--verde-fundo); color: #24824A; }
.semaforo-amarelo { background: #FBF3DC; color: #7A5A00; }
.semaforo-vermelho { background: var(--vermelho-fundo); color: var(--vermelho); }
.form-declarar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.form-declarar .caixa { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; }
.form-declarar .botao-linha { width: auto; height: 34px; line-height: 34px; padding: 0 14px; }
@media (max-width: 1100px) { .grade-trancada { grid-template-columns: 1fr; } }
.tabela-demo-app { min-width: 480px; }

/* ===== D74 — a página de vendas v3: o vilão, o case, a frase-âncora.
 * Reordena para "descoberta antes de mecanismo" (Schwartz/Halbert): o
 * leitor vê o que vai descobrir antes de ver como o Kalko funciona. */

/* A prova visual logo no hero — duas linhas reais, uma no vermelho,
 * sem explicação em volta. É o "print grande" antes do texto. */
.prova-visual { max-width: 640px; margin: 0 auto 70px; }
.tela-demo-hero { box-shadow: var(--sombra); }
/* D141 — a tela real de Vendas no Passo 1 da página inicial. */
.tela-real { margin: 18px 0 10px; }
.tela-real img { display: block; width: 100%; height: auto; border: 1px solid var(--borda); border-radius: var(--raio);
                 box-shadow: var(--sombra); }
.tela-real figcaption { font-size: 12px; color: var(--tinta-apagada); margin-top: 8px; }
/* As pílulas de canal no meio de uma frase da página pública: alinhadas ao texto. */
.venda .chamada .selo, .venda p .selo { font-size: 0.72em; vertical-align: 0.15em; margin-right: 4px; }
.tela-demo-hero .tabela-demo-app td, .tela-demo-hero .tabela-demo-app th { padding: 12px 14px; }
.tela-demo-hero tr.linha-vilao td { background: var(--vermelho-fundo); }
.legenda-prova { text-align: center; font-size: 14.5px; color: var(--tinta-media); margin-top: 12px; }

/* O vilão: fundo escuro como a multiplicação, porque é o outro momento
 * de reflexão da página. Cascata vertical, uma seta entre cada degrau. */
.vilao {
    background: var(--tinta); color: var(--superficie);
    border-radius: var(--raio); padding: 46px 40px; margin-bottom: 70px; text-align: center;
}
.vilao h2 { font-size: 27px; font-weight: 700; margin: 0 0 30px; letter-spacing: -0.01em; }
.cascata-vilao { max-width: 380px; margin: 0 auto; }
.degrau-vilao {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 10px 4px; font-size: 14.5px; color: #B9B9B2;
}
.degrau-vilao strong { color: var(--superficie); font-weight: 500; text-align: right; }
.degrau-vilao.topo-vilao { font-size: 16px; }
.degrau-vilao.topo-vilao strong { font-family: var(--fonte-marca); font-size: 22px; font-weight: 700; color: var(--superficie); }
.degrau-vilao.fim-vilao {
    margin-top: 4px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.14);
}
.degrau-vilao.fim-vilao span { color: var(--acento); font-weight: 700; font-size: 16px; }
.degrau-vilao.fim-vilao strong { color: rgba(255,255,255,0.75); font-weight: 400; font-size: 13px; max-width: 220px; text-align: right; }
.seta-vilao { color: #555; font-size: 13px; line-height: 1.2; }
.tese-vilao { max-width: 520px; margin: 30px auto 0; font-size: 16px; color: rgba(255,255,255,0.85); line-height: 1.6; }

/* O case real: três etapas, antes → descoberta → depois. */
.case-real { max-width: 900px; margin: 0 auto 70px; text-align: center; }
.case-intro { font-size: 18px; color: var(--tinta-media); max-width: 640px; margin: 0 auto 30px; line-height: 1.55; }
.case-intro strong { color: var(--tinta); }
.case-grade { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; text-align: left; }
.case-etapa {
    background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
    padding: 22px 20px; box-shadow: var(--sombra);
}
.case-etapa.case-depois { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(255,90,31,0.12); }
.case-rotulo { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-fraca); font-weight: 600; }
.case-numero {
    font-family: var(--fonte-marca); font-size: 44px; font-weight: 700; letter-spacing: -0.03em;
    color: var(--acento); margin: 8px 0 10px; line-height: 1;
}
.case-etapa.case-depois .case-numero { color: var(--verde, #2E9E5B); }
.case-numero .case-unidade { font-size: 16px; font-weight: 500; color: var(--tinta-fraca); margin-left: 4px; }
.case-etapa p { font-size: 13.5px; color: var(--tinta-media); line-height: 1.55; margin: 0; }
.case-seta { font-size: 22px; color: var(--borda-forte); text-align: center; }
/* Era um link de texto — Daniel: "precisa colocar 'Quero ver isso na
 * minha operação' com maior destaque". O caso 9→2 é o clímax emocional
 * da prova; o CTA que fecha ele merece o mesmo peso do botão do hero,
 * não um link discreto que passa despercebido depois de tanta tensão. */
.botao-caso { margin-top: 30px; }

/* A frase-âncora, isolada, para ficar na cabeça. */
.tese { text-align: center; padding: 30px 0 70px; }
.tese h2 { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; line-height: 1.3; }
.tese p { font-size: 17px; color: var(--tinta-media); margin: 0; }

@media (max-width: 760px) {
    .vilao { padding: 34px 22px; }
    .vilao h2 { font-size: 22px; }
    .case-grade { grid-template-columns: 1fr; }
    .case-seta { transform: rotate(90deg); }
    .tese h2 { font-size: 23px; }
}

/* D83 — dois cartões (mensal e anual), lado a lado, na página pública. O
 * anual é público de propósito (ao contrário da escada mensal, D65) —
 * ele mesmo é o gatilho de urgência: "esse preço sobe conforme mais
 * gente assina". D75 continua valendo pro mensal: desconto reservado a
 * quem chega pelo link, nunca mostrado aqui. */
.preco-dois { max-width: 760px; margin: 26px auto 0; text-align: left; }
.chip-agressivo {
    display: inline-block; background: var(--acento); color: #FFFFFF;
    font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: none;
    padding: 2px 7px; border-radius: 20px; margin-left: 6px; vertical-align: middle;
}

/* Vilão no celular: rótulo e valor lado a lado (space-between) quebravam
 * em duas linhas cada e o vão ficava enorme (Daniel, 18/09, com foto do
 * celular). Empilha rótulo sobre valor, mais compacto. */
@media (max-width: 480px) {
    .vilao { padding: 30px 20px; }
    .vilao h2 { font-size: 20px; margin-bottom: 22px; }
    .degrau-vilao {
        flex-direction: column; align-items: flex-start; gap: 2px;
        padding: 7px 0; font-size: 13.5px;
    }
    .degrau-vilao strong { text-align: left; font-size: 13.5px; font-weight: 400; }
    .degrau-vilao.topo-vilao strong { font-size: 20px; font-weight: 700; }
    .degrau-vilao.fim-vilao strong { max-width: none; font-size: 12.5px; }
    .seta-vilao { padding: 1px 0; }
    .tese-vilao { font-size: 14px; }
}

/* 28/09 — a regra da vigência explicada no bloco da planilha do Catálogo. */
.regra-vigencia { margin-top: 8px; }
.regra-vigencia ul { margin: 6px 0 6px 18px; padding: 0; }
.regra-vigencia li { margin: 3px 0; }

/* 28/09 — página do vídeo de demonstração (/video-demo), servido do próprio site. */
.porta.largura-video { max-width: 880px; }
.video-demo { width: 100%; border-radius: var(--raio); background: #000; margin: 12px 0 8px; }


/* ------------------------------------------------ Devoluções (D101) */

.contador-topo {
    display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px;
    border-radius: 9px; background: var(--acento); color: #FFFFFF;
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.explica-devolucoes p { margin: 0 0 6px; font-size: 13px; color: var(--tinta-media); }
.explica-devolucoes p:last-child { margin-bottom: 0; }
.tabela-rolavel { overflow-x: auto; }
.grade-devolucoes td { vertical-align: top; }
.grade-devolucoes .pendente { color: var(--vermelho); font-weight: 600; }
.baixa-devolucao summary { cursor: pointer; color: var(--acento); font-size: 13px; white-space: nowrap; }
.form-baixa { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; min-width: 240px; font-size: 13px; }
.form-baixa label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.form-baixa input[type="date"], .form-baixa input[type="text"] {
    padding: 4px 6px; border: 1px solid var(--borda-forte); border-radius: var(--raio-miudo); font: inherit;
}
.lote-devolucoes { margin-top: 0; }
.nota-linha td { font-size: 12px; color: var(--tinta-fraca); padding-top: 0; }
.nota-linha a { color: var(--tinta-fraca); }

.marca-full {
    display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: var(--raio-miudo);
    background: var(--meli); color: var(--meli-tinta); font-size: 11px; font-weight: 700; line-height: 16px;
}
.numero-venda { white-space: nowrap; font-family: var(--fonte-marca); font-size: 12px; }
.numero-venda a { color: var(--tinta); }
/* Zebrado como o Catálogo (Daniel, 29/09: "o mesmo padrão de outras telas, uma linha mais clara, outra mais escura"). */
.grade-devolucoes tbody tr:nth-of-type(even) td { background: #F3F3EE; }
.grade-devolucoes tbody tr:hover td { background: #ECEBE4; }
.rola-vertical .grade-devolucoes tr[id] { scroll-margin-top: 34px; }   /* a âncora #d… não fica sob o cabeçalho fixo */
.cartoes.tres { grid-template-columns: repeat(3, 1fr); }
.cartao-link { text-decoration: none; color: inherit; }
.cartao-link:hover, .cartao-link.ativo { border-color: var(--acento); }
.explica-devolucoes summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.explica-devolucoes[open] summary { margin-bottom: 8px; }

/* D105 — checkout transparente: os campos do cartão somem no Pix do anual. */
form:has(input[name="plano"][value="anual"]:checked):has(input[name="forma"][value="pix"]:checked) .dados-cartao { display: none; }
.linha-campos { display: flex; gap: 10px; flex-wrap: wrap; }
.linha-campos .campo { flex: 1 1 90px; }
.pix-qr { display: block; width: 220px; height: 220px; margin: 12px 0; image-rendering: pixelated; }
.pix-copia { width: 100%; min-height: 80px; font-family: var(--fonte-marca); font-size: 12px; }

/* ===== D121 (03/10) — a máquina de avisos: o selo no topo de toda tela e os
 * cartões da tela de Avisos. O selo é a pílula vermelha do BI ("Reclamação
 * com prazo: 1"): só existe com aviso vivo; `grave` = prazo vencido ou
 * prejuízo de ontem. Cartão: título com o número, a conta em uma frase, UM
 * botão (regra da D121). */
/* 05/10 (Daniel: "estava no canto esquerdo acompanhando a tela... acho melhor
 * mudar"): como no BI, a pílula FLUTUA no canto inferior esquerdo, visível em
 * qualquer ponto da rolagem e em qualquer largura. Fica abaixo da barra de
 * agrupar do Catálogo (z 50) e do aviso grande da virada (z 60). */
/* Medidas e cores do botão do BI (dashboard, `pp-botao`): bottom/left 16px,
 * raio 20px, 8px 14px, 12px/600, texto branco, sombra 0 4px 16px .5; vermelho
 * #e5484d, âmbar #f5a524 com texto escuro; pisca 1.1s com reclamação. */
/* D153 (08/10): a pílula sai do canto e vira o SINO no topo, com o número;
 * no computador o texto da reclamação continua ao lado. As cores e o piscar
 * são os mesmos do BI. */
.selo-avisos {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px;
    border-radius: 20px; background: #e5484d; color: #FFFFFF;
    border: none; font-size: 12px; font-weight: 600; line-height: 1;
    text-decoration: none; white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
.selo-avisos .sino { font-size: 15px; }
.selo-avisos .n { font-size: 12px; font-weight: 700; background: rgba(255, 255, 255, 0.28); border-radius: 999px; padding: 2px 7px; }
.selo-avisos.atencao .n { background: rgba(0, 0, 0, 0.12); }
.selo-avisos.grave { background: #e5484d; color: #FFFFFF; }
.selo-avisos.atencao { background: #f5a524; color: #1A1A1A; }
.selo-avisos.ativo { outline: 2px solid #1A1A1A; outline-offset: 2px; }
.selo-avisos:hover { filter: brightness(0.95); color: inherit; }
@keyframes selo-pisca { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.selo-avisos.pisca { animation: selo-pisca 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .selo-avisos.pisca { animation: none; } }
.cartoes-avisos { display: grid; gap: 12px; }
.cartao-aviso {
    display: flex; gap: 16px; align-items: center; justify-content: space-between;
    padding: 14px 16px; background: var(--superficie); border: 1px solid var(--borda);
    border-left: 5px solid var(--borda-forte); border-radius: var(--raio); box-shadow: var(--sombra);
}
.cartao-aviso.vencido, .cartao-aviso.hoje { border-left-color: var(--vermelho); }
.cartao-aviso.atencao { border-left-color: var(--acento); }
.cartao-aviso h2 { margin: 0 0 4px; font-size: 15.5px; }
.cartao-aviso.vencido h2, .cartao-aviso.hoje h2 { color: var(--vermelho); }
.cartao-aviso p { margin: 0; font-size: 13.5px; color: var(--tinta-media); }
.cartao-aviso ul { margin: 6px 0 0; padding-left: 18px; }
.cartao-aviso-texto { flex: 1 1 auto; min-width: 0; }
.botao-aviso { flex: 0 0 auto; white-space: nowrap; }
.aviso-neutro { background: var(--superficie); color: var(--tinta-media); border: 1px solid var(--borda); }
.grade-vendas tr.vencida td { background: var(--vermelho-fundo); }
.grade-vendas tr.urgente td:first-child { color: var(--vermelho); }
@media (max-width: 720px) {
    .cartao-aviso { flex-direction: column; align-items: stretch; }
}

/* D124 — as três mensagens prontas de indicação, uma abaixo da outra. */
.mensagem-zap + .mensagem-zap { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha); }

/* D124 — a barra das 12 vagas de mês grátis (Indicar e Conta). Casa `ganha`
 * = mês grátis já do seller (laranja cheio); `a_caminho` = indicado pagou e a
 * garantia corre (listrada); `vazia` = vaga aberta. Sem JavaScript. */
.vagas-gratis .vagas-texto { font-size: 13.5px; color: var(--tinta-media); margin-bottom: 10px; }
.vagas-gratis .vagas-texto strong { color: var(--tinta); }
.barra-vagas { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; }
.barra-vagas .casa {
    height: 34px; border-radius: var(--raio-miudo); border: 1px solid var(--borda-forte);
    background: var(--superficie); display: flex; align-items: center; justify-content: center;
    font-family: var(--fonte-marca); font-size: 12px; color: var(--tinta-apagada);
}
.barra-vagas .casa.ganha { background: #2F8F4E; border-color: #2F8F4E; color: #FFFFFF; font-weight: 700; }
.barra-vagas .casa.a_caminho {
    background: repeating-linear-gradient(135deg, #FFE3D6 0 6px, #FFF3EC 6px 12px);
    border-color: var(--acento); color: var(--acento);
}
.vagas-legenda { margin-top: 8px; }
.vagas-legenda .amostra { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 3px; border: 1px solid var(--borda-forte); }
.vagas-legenda .amostra.ganha { background: #2F8F4E; border-color: #2F8F4E; }
.vagas-legenda .amostra.a_caminho { background: repeating-linear-gradient(135deg, #FFE3D6 0 3px, #FFF3EC 3px 6px); border-color: var(--acento); }
@media (max-width: 720px) { .barra-vagas { grid-template-columns: repeat(6, 1fr); } }

/* D125-A — a linha do tempo da assinatura: cinza = pago e já passou; preto =
 * pago, a vencer; laranja = mês grátis por indicação. */
.linha-assinatura { margin: 10px 0 6px; }
.linha-assinatura .casas { display: flex; gap: 3px; }
.linha-assinatura .casa { flex: 1 1 0; height: 14px; border-radius: 3px; background: var(--superficie); border: 1px solid var(--borda-forte); }
.linha-assinatura .casa.decorrido { background: var(--borda); border-color: var(--borda); }
.linha-assinatura .casa.pago { background: var(--tinta); border-color: var(--tinta); }
.linha-assinatura .casa.gratis { background: #2F8F4E; border-color: #2F8F4E; }
.linha-assinatura .legenda { margin-top: 6px; line-height: 1.6; }
.linha-assinatura .amostra { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 3px; border: 1px solid var(--borda-forte); }
.linha-assinatura .amostra.decorrido { background: var(--borda); border-color: var(--borda); }
.linha-assinatura .amostra.pago { background: var(--tinta); border-color: var(--tinta); }
.linha-assinatura .amostra.gratis { background: #2F8F4E; border-color: #2F8F4E; }

/* D127 — a conta corrente do seller. */
table.extrato { width: 100%; font-size: 13px; }
table.extrato th { text-align: left; font-size: 11px; color: var(--tinta-fraca); text-transform: uppercase; letter-spacing: .04em; }
table.extrato th.num, table.extrato td.num { text-align: right; font-family: var(--fonte-marca); }
table.extrato tr.mov-credito_indicacao td { background: #EAF3E6; }

/* D124 — abas de situação das mensagens de indicação (links, sem JavaScript). */
.abas-situacao { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.abas-situacao a {
    padding: 6px 12px; border: 1px solid var(--borda-forte); border-radius: 16px;
    font-size: 13px; color: var(--tinta-media); text-decoration: none; background: var(--superficie);
}
.abas-situacao a.ativa { background: var(--tinta); border-color: var(--tinta); color: #FFFFFF; }
.abas-situacao a.ativa .miudo { color: #DDDDD8; }

/* D128 — a tela que trava na reclamação vencendo em 24 h (mesmo cartão do
 * aviso grande da virada do mês). Um bloco por reclamação, com as opções. */
.trava-reclamacao .aviso-grande-cartao { max-width: 720px; }
.trava-item { border-top: 1px solid var(--linha); padding-top: 14px; margin-top: 14px; }
.trava-cabeca { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; }
.trava-prazo { font-family: var(--fonte-marca); font-size: 13px; color: var(--tinta-media); }
.trava-prazo.negativo { color: var(--vermelho); font-weight: 700; }
.trava-sair { margin-top: 6px; text-align: right; }
.trava-sair button { width: auto; }

/* 05/10 — cartões que filtram a lista de Vendas (margem negativa, devolvidas):
 * clicar liga o filtro, clicar de novo tira; o ligado fica marcado. */
.cartoes.cartoes-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) { .cartoes.cartoes-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .cartoes.cartoes-5 { grid-template-columns: 1fr 1fr; } }
a.cartao-filtro { text-decoration: none; color: inherit; cursor: pointer; }
a.cartao-filtro:hover { border-color: var(--acento); }
a.cartao-filtro.ativo { outline: 2px solid var(--acento); outline-offset: -2px; }

/* D129 — botões em linha na tela de Recursos do admin. */
.form-inline-admin { display: inline-block; margin: 2px 4px 2px 0; }
.form-inline-admin button { width: auto; }

/* 11/10 — admin: marcar o navegador como tráfego interno (link para kalko.com.br). */
.bloco.interno { margin-top: 16px; }
.bloco.interno p { margin: 0 0 12px; max-width: 760px; }
.interno-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.interno-acoes .botao { width: auto; display: inline-flex; align-items: center; justify-content: center; padding: 0 18px; text-align: center; }
.interno-acoes .botao:hover { background: var(--acento); color: #FFFFFF; }
.interno-acoes .botao.secundario { background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda-forte); font-weight: 500; }
.interno-acoes .botao.secundario:hover { border-color: var(--tinta); }
@media (max-width: 640px) { .interno-acoes .botao { width: 100%; height: auto; min-height: 40px; padding: 8px 14px; } }

/* 05/10 — página pública /amazon (caso 22158179861 da Amazon): os serviços em
 * cartões e as listas de dados e preço. */
.lista-recursos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.lista-recursos > div { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px 18px; }
.lista-recursos h3 { margin: 0 0 6px; font-size: 15px; }
.lista-recursos p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--tinta-media); }
.lista-simples { margin: 10px 0 0; padding-left: 20px; line-height: 1.6; }
.lista-simples li + li { margin-top: 6px; }
/* /tiktok?de=mercado — quem autorizou no Mercado de serviços e ainda não tem conta. */
.aviso-mercado { border: 2px solid var(--acento); border-radius: 14px; padding: 22px 26px; margin-top: 24px;
                 background: var(--superficie); }
.aviso-mercado h2 { margin-top: 0; }
@media (max-width: 900px) { .lista-recursos { grid-template-columns: 1fr; } }

/* ===== D143 (06/10) — o passe de layout do Painel, aprovado na prévia
 * (ATAS E DOCUMENTOS/layout/261006_previa_painel.html). Mesmas cores,
 * mesmas fontes; muda densidade, hierarquia e botões. Vem por último na
 * folha de propósito: vence as regras anteriores por ordem, sem mexer nelas.
 *
 * 1. Cabeçalho: os canais sobem para a linha do título. */
.cabecalho { align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 14px; }
.cabecalho .canais-conectados { margin: 0; gap: 6px; }
.canal-conectado { padding: 4px 10px; font-size: 12px; gap: 6px; }
.canal-conectado .miudo { font-size: 10.5px; }

/* 2. Barra de filtros: mais baixa, num bloco só. "Aplicar" deixa de ser
 *    preto — na tela inteira só o que pede ação fica em cor. */
.barra { gap: 10px; margin-bottom: 14px; padding: 10px 12px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); }
.barra .campo { min-width: 140px; }
.barra label { font-size: 10px; margin-bottom: 3px; }
.barra input, .barra select, .barra .navega-mes .seta, .barra .navega-mes input[type=month] { height: 34px; font-size: 13px; }
.barra .navega-mes .seta { width: 34px; box-shadow: none; }
.barra .setas-mes input[type=month] { width: 140px; }
.barra button.botao-filtro, .colunas-menu summary { height: 34px; }
.barra button.botao-filtro { background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda-forte); font-weight: 500; }
.barra button.botao-filtro:hover { background: var(--superficie); border-color: var(--tinta); }
.painel-colunas { top: 40px; }

/* 3. A faixa da virada: mesma cor, menos altura. */
.faixa { padding: 9px 14px; margin-bottom: 14px; }
.faixa .botao { height: 30px; line-height: 30px; font-size: 12.5px; }

/* 4. Os números: a MARGEM é o herói — primeira, maior, barra laranja em
 *    cima. Os outros são apoio. */
.cartoes { gap: 14px; margin-bottom: 14px; }
.cartoes .bloco { padding: 16px 18px; min-height: 0; box-shadow: none; }
.cartoes .numerao { font-size: 24px; }
.cartoes .nota { font-size: 11.5px; }
.cartoes.com-destaque { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.cartoes .bloco.mc-destaque { border-top: 3px solid var(--acento); }
.cartoes .bloco.mc-destaque .numerao { font-size: 38px; }
.cartoes .bloco.mc-destaque .numerao .pct { font-size: 16px; }
@media (max-width: 1100px) { .cartoes.com-destaque { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .cartoes.com-destaque { grid-template-columns: 1fr; } }

/* 5. A cascata: linhas mais baixas (era a coisa mais alta da tela) e os
 *    dois totais com faixa — o olho acha a margem sem ler. */
.grade, .coluna, .dupla { gap: 14px; }
.bloco { padding: 16px 18px; box-shadow: none; }
.bloco.sem-padding { padding: 0; }
.bloco.sem-padding > h2 { padding: 14px 18px 0; }
.tabela.cascata th { padding: 8px 14px; font-size: 10.5px; }
.tabela.cascata td { padding: 7px 14px; font-size: 13px; }
.tabela.cascata tr.sub td:first-child { padding-left: 26px; }
.tabela.cascata tr.abertura-linha td { padding-top: 3px; padding-bottom: 3px; font-size: 12px; }
.tabela.cascata tr.abertura-linha td:first-child { padding-left: 40px; }
.tabela.cascata tr.total td { background: var(--verde-fundo); font-weight: 700; padding: 10px 14px; font-size: 14px; }
.tabela.cascata tr.total td.num { font-family: var(--fonte-marca); font-size: 16px; }
.tabela.cascata + .rodape-tabela { padding: 10px 18px 14px; }

/* 6. Margem por canal e por modal: a barrinha diz a proporção sem o seller
 *    comparar números. SVG com largura no atributo, como as barras dos 12
 *    meses (A62: style= inline é descartado pela CSP). */
.linha.com-medida { position: relative; padding: 7px 0 9px; }
.linha.com-medida .medida { position: absolute; left: 0; bottom: 3px; width: 100%; height: 3px; display: block; }
.linha.com-medida .medida rect { fill: var(--verde); opacity: 0.7; }
.linha.com-medida .medida.negativo rect { fill: var(--vermelho); }

/* 8. Um botão em cor por tela: "Cadastrar custos" é ele. */
.fila { margin-top: 14px; padding: 12px 18px; }
.fila .botao { height: 34px; line-height: 34px; font-size: 13px; }
.tabela.cascata tr.total:has(td.negativo) td { background: var(--vermelho-fundo); }   /* margem negativa: a faixa acompanha */
/* A93 — o bloco D69 (linha ~1460) redeclarava .grade com minmax(400px) DEPOIS
 * da regra de celular, e o Painel abria em duas colunas no telefone, com
 * rolagem lateral. A regra de celular precisa vir por último. */
@media (max-width: 1100px) { .grade, .dupla { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    .faixa, .fila { flex-wrap: wrap; }
    .faixa .botao, .fila .botao { width: 100%; }
}

/* ===== D143 (06/10) — Canais, aprovado na prévia (layout/261006_previa_canais*.png).
 * Um nome só (selo = canal, negrito = loja); estado como sinal: ponto + hora,
 * vermelho com sync de mais de 24 h; ações secundárias discretas. */
.tela-canais .canal-bloco { padding: 14px 18px; }
.tela-canais .canal-nome { gap: 12px; }
.tela-canais .canal-nome .selo { font-size: 11.5px; padding: 2px 9px; flex: none; }
.tela-canais .canal-nome strong { font-size: 14px; }
.tela-canais .estado { font-size: 12px; color: var(--tinta-media); margin-top: 2px; line-height: 1.5; }
.tela-canais .estado .velha { color: var(--vermelho); font-weight: 600; }
.tela-canais .estado .le { color: var(--tinta-apagada); }
.ponto { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--verde); margin-right: 6px; vertical-align: middle; }
.ponto.ruim { background: var(--vermelho); }
.ponto.espera { background: #f5a524; }
.tela-canais .canal-acoes { gap: 14px; align-items: center; flex: none; white-space: nowrap; }
.tela-canais .canal-acoes a:not(.botao) {
    font-size: 12.5px; color: var(--tinta-fraca); text-decoration: underline;
    text-decoration-color: var(--borda-forte); text-underline-offset: 3px;
}
.tela-canais .canal-acoes a:not(.botao):hover { color: var(--tinta); text-decoration-color: var(--tinta); }
/* Shopee Ads — cartão próprio, colado no da Shopee (Daniel, 06/10: "muito discreto"). */
.tela-canais .canal-bloco.canal-ads-bloco { margin-top: -8px; border-top-left-radius: 0; border-top-right-radius: 0; border-top: 1px dashed var(--borda); }
/* D163 — Ads sem loja Shopee: apagada, sem clique, mas legível. */
.tela-canais .canal-ads-bloqueado { background: var(--fundo); }
.tela-canais .canal-ads-bloqueado .selo { opacity: .55; }
.tela-canais .canal-ads-bloqueado strong { color: var(--tinta-fraca); }
.botao-apagado { background: var(--borda); color: var(--tinta-apagada); cursor: not-allowed; pointer-events: none; box-shadow: none; }
/* Explicação só no canal não conectado, recolhida. */
details.como-funciona { margin-top: 10px; }
details.como-funciona summary {
    list-style: none; cursor: pointer; font-size: 12.5px; color: var(--tinta-fraca);
    text-decoration: underline; text-decoration-color: var(--borda-forte); text-underline-offset: 3px;
}
details.como-funciona summary::-webkit-details-marker { display: none; }
details.como-funciona .explicacao { margin: 10px 0 0; }
.promessa-canais { font-size: 12px; color: var(--tinta-apagada); line-height: 1.6; margin: 16px 0 0; }
@media (max-width: 640px) {
    .tela-canais .canal-linha { flex-wrap: wrap; }
    .tela-canais .canal-acoes { white-space: normal; flex-wrap: wrap; justify-content: flex-start; }
}

/* Desconectar — janela por cima, sem JavaScript (:target; a CSP não roda
 * script inline). Como o aviso grande da D111. Cancelar em destaque. */
.modal-confirmar { display: none; position: fixed; inset: 0; z-index: 60; background: rgba(17, 17, 17, 0.6); padding: 16px; overflow-y: auto; }
.modal-confirmar:target { display: flex; }
.modal-confirmar .cartao-modal {
    margin: auto; width: 100%; max-width: 460px; background: var(--superficie);
    border-radius: 14px; padding: 26px 28px 22px; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}
.modal-confirmar h2 {
    margin: 0 0 10px; font-size: 19px; text-transform: none; letter-spacing: -0.01em; color: var(--tinta);
    font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.3;
}
.modal-confirmar h2 .selo { margin: 0; font-size: 12px; padding: 2px 8px; }
.modal-confirmar p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--tinta-media); }
.modal-confirmar ul { margin: 0 0 4px; padding-left: 18px; font-size: 13.5px; color: var(--tinta-media); line-height: 1.6; }
.modal-confirmar .acoes-modal { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin: 18px 0 0; }
.modal-confirmar .acoes-modal a, .modal-confirmar .acoes-modal button {
    width: auto; height: 40px; line-height: 40px; padding: 0 18px; font-size: 14px;
    border-radius: var(--raio-miudo); display: inline-block; text-align: center; text-decoration: none;
}
.modal-confirmar .acoes-modal .cancelar { background: var(--tinta); color: #FFFFFF; font-weight: 600; }
.modal-confirmar .acoes-modal .cancelar.secundario { background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda-forte); line-height: 38px; }
.modal-confirmar .acoes-modal .botao-acento { font-weight: 600; }
.modal-confirmar .acoes-modal .confirmar-sim {
    background: var(--superficie); color: var(--vermelho); border: 1px solid var(--vermelho); font-weight: 600; line-height: 38px;
}
.modal-confirmar .acoes-modal .confirmar-sim:hover { background: var(--vermelho); color: #FFFFFF; }
/* 14/10 — no celular o rótulo pode quebrar em duas linhas: o botão cresce com o texto (a altura fixa
   deixava a 2ª linha cair para fora — "+ conectar outra conta Mercado Livre" saía vazio). */
@media (max-width: 480px) {
    .modal-confirmar .acoes-modal a, .modal-confirmar .acoes-modal button {
        width: 100%; height: auto; line-height: 1.3; padding: 11px 16px;
    }
}

/* D135 — dados da nota fiscal (Assinar e Conta). Com CPF, a razão social some. */
.dados-fiscais.com-cpf .so-cnpj { display: none; }
.dados-fiscais .campo-uf { flex: 0 0 90px; }
.dados-fiscais .fiscal-status:empty { display: none; }
.dados-fiscais .fiscal-status { color: var(--tinta-media); }
/* Com os dados da nota o formulário cresceu: o Resumo (com o "Pagar e entrar")
 * acompanha a rolagem no desktop, para o botão estar à vista no fim. */
@media (min-width: 1101px) { .form-assinar > .bloco { position: sticky; top: 72px; } }

/* D143 — Vendas: cinco cartões, a margem como herói; Devoluções: as pendências
 * (o que pede ação) primeiro, os valores do mês depois, com o custo como herói. */
.cartoes.cartoes-5.com-destaque { grid-template-columns: 1.4fr repeat(4, 1fr); }
@media (max-width: 1100px) { .cartoes.cartoes-5.com-destaque { grid-template-columns: 1fr 1fr; } .cartoes.cartoes-5.com-destaque .mc-destaque { grid-column: 1 / -1; } }
@media (max-width: 480px) { .cartoes.cartoes-5.com-destaque { grid-template-columns: 1fr; } }
.cartoes.tres + .cartoes.com-destaque { margin-top: 0; }
.cartoes .nota .selo { margin-right: 4px; }
.barra .colunas-menu summary.botao-filtro {
    padding: 0 16px; height: 34px; border: 1px solid var(--borda-forte); border-radius: var(--raio-miudo);
    background: var(--superficie); color: var(--tinta); font-size: 13px; font-weight: 500; gap: 6px;
}
.barra .colunas-menu summary.botao-filtro:hover { border-color: var(--tinta); }

/* ===== D143 (07/10) — Financeiro, Catálogo, Configurações e Conta, aprovados na prévia
 * (layout/261007_previa_*_lado_a_lado.png; Daniel: "pode fazer"). Um conjunto só de regras:
 * campo de trabalho de 36px (o 44px fica na porta: entrar/cadastrar/assinar não têm .conteudo
 * de aplicação? — têm; vale para eles também, é a mesma régua), "Salvar" discreto, tabela
 * mais baixa, abas do Financeiro como a barra de filtros. */
.conteudo input[type=text], .conteudo input[type=email], .conteudo input[type=password],
.conteudo input[type=month], .conteudo input[type=date], .conteudo input[type=number],
.conteudo select { height: 36px; padding: 0 12px; margin-bottom: 10px; font-size: 13.5px; }
.conteudo label { font-size: 11.5px; margin-bottom: 4px; }
.conteudo button, .conteudo .botao { height: 36px; font-size: 13.5px; }
.conteudo .linha-form input, .conteudo .linha-form select { height: 36px; }
/* "Salvar" discreto em todo formulário de trabalho; a cor fica para a ação que importa na tela. */
.conteudo .linha-form button, .conteudo .opcoes-avisos button, .conteudo .form-conta button,
.conteudo #nota-fiscal button, .conteudo .form-declarar button {
    height: 36px; background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda-forte); font-weight: 500;
}
.conteudo .linha-form button:hover, .conteudo .opcoes-avisos button:hover, .conteudo .form-conta button:hover,
.conteudo #nota-fiscal button:hover, .conteudo .form-declarar button:hover { background: var(--superficie); border-color: var(--tinta); }
/* A tabela padrão (DRE, contas, faturas) mais baixa; RESULTADO com faixa, como a margem na cascata. */
.tabela th { padding: 8px 14px; font-size: 10.5px; }
.tabela td { padding: 8px 14px; font-size: 13px; }
.tabela tr.sub td:first-child { padding-left: 26px; }
.tabela tr.total td, .tabela tr.resultado td { background: var(--verde-fundo); font-weight: 700; padding: 10px 14px; font-size: 14px; }
.tabela tr.total td.num, .tabela tr.resultado td.num { font-family: var(--fonte-marca); font-size: 16px; }
.tabela tr.total:has(td.negativo) td, .tabela tr.resultado:has(td.negativo) td { background: var(--vermelho-fundo); }
/* Financeiro: abas e mês no molde da barra de filtros. */
.abas { gap: 6px; margin-bottom: 14px; padding: 10px 12px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); }
.abas > a { height: 34px; line-height: 32px; padding: 0 14px; font-size: 13px; border-radius: var(--raio-miudo); border: 1px solid var(--borda-forte); background: var(--superficie); color: var(--tinta); font-weight: 500; }
.abas > a.ativo { background: var(--tinta); color: var(--fundo); border-color: var(--tinta); font-weight: 600; }
.abas .direita .navega-mes { gap: 4px; }
.abas .direita .navega-mes .seta { width: 34px; height: 34px; box-shadow: none; }
.abas .direita .navega-mes .mes-atual { font-size: 13px; }
.abas .direita input[type=month] { height: 34px; width: 140px; margin: 0; font-size: 13px; }
.abas .direita button { height: 34px; background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda-forte); font-weight: 500; }
/* Catálogo: campos da linha compactos; "Salvar" discreto — laranja só na linha SEM custo. */
.grade-catalogo td input[type=text], .grade-catalogo td input[type=date] { height: 32px; margin: 0; font-size: 13px; }
.grade-catalogo td button { height: 32px; padding: 0 12px; font-size: 12.5px; background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda-forte); font-weight: 500; }
.grade-catalogo tbody tr.linha-venda.falta-custo td button { background: var(--acento); color: #FFFFFF; border-color: var(--acento); font-weight: 600; }
.grade-catalogo td { padding: 6px 8px; }
/* Configurações: etiqueta e "nada cadastrado" mais discretos. */
.etiqueta { font-size: 10px; padding: 1px 6px; }
.vigente.vazio { padding: 8px 12px; font-size: 12.5px; }
.bloco .explicacao { font-size: 12.5px; }
/* Conta: vagas menores. */
.barra-vagas > * { height: 28px; line-height: 26px; font-size: 12px; }

/* ===== Espera do pagamento (07/10; Daniel: "texto em destaque mais amigável, em processamento, aguarde") ===== */
.espera-pagamento {
    max-width: 560px; margin: 32px auto 0; padding: 36px 32px 30px; text-align: center;
    background: var(--superficie); border: 1px solid var(--linha); border-top: 4px solid var(--acento);
    border-radius: var(--raio); box-shadow: var(--sombra);
}
.espera-pagamento h1 { font-size: 24px; line-height: 1.25; margin: 0 0 12px; letter-spacing: -0.01em; }
.espera-rotulo {
    display: inline-block; margin: 0 0 14px; padding: 4px 12px; border-radius: 999px;
    font-family: var(--fonte-marca); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--acento); background: #FFF0EA;
}
.espera-pagamento.demorou .espera-rotulo { color: var(--tinta-media); background: var(--fundo); }
.espera-pagamento.demorou { border-top-color: var(--borda-forte); }
.espera-texto { margin: 0 auto 14px; max-width: 440px; font-size: 15px; line-height: 1.55; color: var(--tinta-media); }
.espera-cartao { margin: 0 0 14px; font-family: var(--fonte-marca); font-size: 13px; color: var(--tinta-fraca); }
.espera-nota { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--linha); font-size: 13px; color: var(--tinta-fraca); }
.espera-acoes { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 4px 0 0; }
.espera-acoes .botao, .espera-acoes .botao-acento { height: 40px; line-height: 38px; padding: 0 18px; }
.espera-anel {
    width: 44px; height: 44px; margin: 0 auto 18px; border-radius: 50%;
    border: 4px solid #FFE1D5; border-top-color: var(--acento);
    animation: espera-gira 0.9s linear infinite;
}
@keyframes espera-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .espera-anel { animation: none; border-top-color: #FFE1D5; border-right-color: var(--acento); } }
@media (max-width: 600px) {
    .espera-pagamento { margin-top: 12px; padding: 28px 18px 22px; }
    .espera-pagamento h1 { font-size: 21px; }
    .espera-acoes .botao, .espera-acoes .botao-acento { width: 100%; }
}
.espera-acoes .botao { background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda-forte); font-weight: 500; }
.espera-acoes .botao:hover { border-color: var(--tinta); }

/* ===== D152 — Painel v2: "quanto vendi" ao lado de "quanto sobrou" (07/10) ===== */
.painel-v2 .p2-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.painel-v2 .p2-topo h1 { margin: 0 0 6px; }
.painel-v2 .p2-filtros { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.p2-pilulas { display: flex; gap: 3px; background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio); padding: 3px; flex-wrap: wrap; }
.p2-pilulas a { padding: 5px 11px; font-size: 13px; border-radius: var(--raio-miudo); color: var(--tinta-media); text-decoration: none; }
.p2-pilulas a:hover { background: var(--fundo); color: var(--tinta); }
.p2-pilulas a.on { background: var(--tinta); color: #fff; font-weight: 600; }
.p2-mes { display: flex; align-items: center; gap: 2px; background: var(--superficie); border: 1px solid var(--borda-forte); border-radius: var(--raio); padding: 3px; }
.p2-mes span { padding: 5px 10px; font-size: 13.5px; font-weight: 600; }
.p2-mes a, .p2-mes .vazio { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--raio-miudo); color: var(--tinta-fraca); text-decoration: none; padding: 0; font-weight: 500; }
.p2-mes a:hover { background: var(--fundo); color: var(--tinta); }
.p2-mes .vazio { opacity: .35; }
.p2-alerta { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #FFF6F1; border: 1px solid #FFD8C6; border-radius: var(--raio); padding: 9px 14px; font-size: 13.5px; margin-bottom: 10px; }
.p2-alerta a { font-weight: 600; color: var(--acento); text-decoration: none; white-space: nowrap; }
.p2-mais-filtros { margin: 4px 0 14px; }
.p2-mais-filtros > summary { cursor: pointer; font-size: 12.5px; color: var(--tinta-fraca); list-style: none; display: inline-block; padding: 2px 0; }
.p2-mais-filtros > summary::-webkit-details-marker { display: none; }
.p2-mais-filtros > summary::before { content: "▸ "; }
.p2-mais-filtros[open] > summary::before { content: "▾ "; }
.p2-mais-filtros[open] > .barra { margin-top: 8px; }
.p2-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 14px; }
.p2-kpi { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; min-width: 0; }
.p2-kpi .r { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-fraca); font-weight: 600; }
.p2-kpi .v { font-size: 24px; font-weight: 700; margin: 6px 0 4px; letter-spacing: -0.01em; line-height: 1.2; }
.p2-kpi .v.negativo { color: var(--vermelho); }
.p2-kpi .n { font-size: 12px; color: var(--tinta-fraca); line-height: 1.45; }
.p2-kpi .n a { color: var(--tinta); font-weight: 600; text-decoration: none; }
.p2-kpi.heroi { border-color: var(--acento); box-shadow: 0 0 0 3px #FFE7DC; }
.p2-kpi.heroi .v { color: var(--acento); }
.p2-kpi.heroi .v.negativo { color: var(--vermelho); }
.p2-chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 3px; letter-spacing: 0; }
.p2-chip.bom { color: var(--verde); background: var(--verde-fundo); }
.p2-chip.ruim { color: var(--vermelho); background: var(--vermelho-fundo); }
.p2-tab .p2-chip { margin-left: 0; vertical-align: 0; }
/* D285 — a comparação com o período anterior dentro da célula, embaixo do número (Por canal). */
.p2-tab .p2-var { display: block; width: max-content; margin: 3px 0 0 auto; font-size: 10.5px; padding: 0 6px; line-height: 16px; }
.p2-tab td .parcial { margin-left: 4px; }
.p2-linha { display: grid; grid-template-columns: 1.55fr 1fr; gap: 12px; margin-bottom: 14px; }
.p2-bloco { padding: 16px 18px; }
.p2-espaco { margin-bottom: 14px; }
.p2-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.p2-cab h2 { margin: 0; }
.p2-cab span { font-size: 12px; color: var(--tinta-apagada); }
.p2-grafico { display: block; width: 100%; height: 190px; }
.p2-grafico .vend { fill: #C9C9C2; }
.p2-grafico .fds { fill: #DDDDD7; }
.p2-grafico .mc { fill: var(--acento); }
.p2-grafico .mc-neg { fill: var(--vermelho); }
.p2-eixo { display: flex; justify-content: space-between; font-size: 11px; color: var(--tinta-apagada); margin-top: 4px; }
.p2-nota { font-size: 12px; color: var(--tinta-apagada); margin-top: 10px; line-height: 1.5; }
.p2-cem .item { display: grid; grid-template-columns: minmax(120px, 42%) 1fr 64px; align-items: center; gap: 10px; font-size: 13px; padding: 5px 0; }
.p2-cem .p2-barra { display: block; width: 100%; height: 10px; }
.p2-cem .p2-barra rect { fill: #BDBDB6; }
.p2-cem .p2-barra rect.fundo { fill: #EDEDE8; }
.p2-cem .item.sobra { font-weight: 700; border-top: 1px solid var(--linha); margin-top: 4px; padding-top: 9px; }
.p2-cem .item.sobra .p2-barra rect { fill: var(--acento); }
.p2-cem .item.sobra .p2-barra rect.fundo { fill: #EDEDE8; }
.p2-cem .item.sobra .p2-barra rect.neg { fill: var(--vermelho); }
.p2-cem .num { text-align: right; font-family: var(--fonte-marca); }
.p2-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.p2-tab th { text-align: left; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-fraca); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.p2-tab th a { color: inherit; text-decoration: none; }
.p2-tab th a:hover { color: var(--tinta); }
.p2-tab th.num, .p2-tab td.num { text-align: right; }
.p2-tab th.ord, .p2-tab th.ord a { color: var(--tinta); }
.p2-tab td { padding: 8px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.p2-tab td.num { font-family: var(--fonte-marca); white-space: nowrap; }
.p2-tab td.num.positivo { color: var(--verde); }
.p2-tab td.num.negativo { color: var(--vermelho); }
.p2-tab tr:last-child td { border-bottom: none; }
.p2-tab tr.preju td { background: #FFF5F6; }
.p2-tab td a { text-decoration: none; }
.p2-selos { white-space: nowrap; }
.p2-selos .selo { margin-right: 6px; }
.p2-mini { display: inline-block; width: 64px; height: 6px; margin-left: 8px; vertical-align: middle; }
.p2-mini rect { fill: var(--acento); }
.p2-mini rect.fundo { fill: #EDEDE8; }
.p2-mini rect.neg { fill: var(--vermelho); }
.p2-ordem { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; color: var(--tinta-fraca); }
.p2-ordem a.op { padding: 3px 10px; border: 1px solid var(--borda-forte); border-radius: 999px; color: var(--tinta-media); text-decoration: none; }
.p2-ordem a.op:hover { border-color: var(--tinta); }
.p2-ordem a.op.on { background: var(--tinta); color: #fff; border-color: var(--tinta); }
.p2-ver { font-size: 13px; font-weight: 600; color: var(--tinta); text-decoration: none; white-space: nowrap; }
.p2-secao { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 0 10px; }
.p2-secao h2 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-fraca); margin: 0; }
.p2-secao span { font-size: 12px; color: var(--tinta-apagada); }
.p2-rodape { margin-top: 18px; display: grid; gap: 12px; }
@media (max-width: 1100px) {
    .p2-kpis { grid-template-columns: repeat(3, 1fr); }
    .p2-linha { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .p2-kpis { grid-template-columns: 1fr 1fr; }
    .p2-kpi .v { font-size: 20px; }
    .painel-v2 .p2-filtros { width: 100%; }
    .p2-pilulas { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .p2-tab { font-size: 12px; }
    .p2-tab th, .p2-tab td { padding: 7px 6px; }
    .p2-tab .p2-mini, .p2-selos { display: none; }
    /* D285 — no celular a tabela Por canal fica com Canal, Vendido, Margem % e Pós-Ads %: Pedidos, Margem R$ e
       Pós-Ads R$ ficam na tela do canal (Daniel, 30/10). */
    .p2-canais .so-largo { display: none; }
    .p2-canais th, .p2-canais td { padding: 7px 3px; }
    .p2-canais td:first-child, .p2-canais th:first-child { padding-left: 0; }
    .p2-canais td:last-child, .p2-canais th:last-child { padding-right: 0; }
    .p2-canais .p2-var { font-size: 9.5px; padding: 0 4px; line-height: 15px; }
    .p2-canais th { white-space: normal; line-height: 1.2; }   /* "Margem %" e "Pós-Ads %" quebram; a coluna fica na largura do número */
    .p2-bloco.p2-espaco, #produtos { overflow-x: auto; }
}

/* ===== D154 (08/10) — Avaliações: um cartão por canal, a lista com a MC da venda. */
/* 18/10 (Daniel, no celular: "card das avaliações está estourando para a direita"): minmax(0, 1fr) deixa a coluna encolher
   abaixo do conteúdo; o nome do canal fica só no selo (estava escrito duas vezes) e o rótulo quebra linha se faltar espaço. */
.cartoes-avaliacoes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.cartao-avaliacao { min-width: 0; overflow-wrap: anywhere; display: block; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 13px 16px; color: inherit; text-decoration: none; }
.cartao-avaliacao:hover, .cartao-avaliacao.ativo { border-color: var(--acento); color: inherit; }
.cartao-avaliacao .rotulo { font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--tinta-fraca); font-weight: 600; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; }
.cartao-avaliacao .rotulo [class^="selo-"] { text-transform: none; letter-spacing: 0; white-space: nowrap; }
.cartao-avaliacao .valor { font-size: 24px; font-weight: 700; margin: 6px 0 3px; }
.cartao-avaliacao .valor.bom { color: var(--verde); }
.cartao-avaliacao .valor.ruim { color: var(--vermelho); }
.cartao-avaliacao .valor.semdado { color: var(--tinta-apagada); font-weight: 500; font-size: 18px; }
.cartao-avaliacao .nota { font-size: 12px; color: var(--tinta-fraca); line-height: 1.45; }
/* Revisão (Daniel, 08/10, vendo no ar: "as tags Mercado Livre ocupando duas
 * linhas, botão no canal também… revise profundamente"): colunas com largura
 * fixa, selo numa linha, produto com o SKU em cima e o nome em UMA linha,
 * resenha em duas linhas (o resto no passar do mouse), ação só o ícone. */
.grade-avaliacoes { table-layout: fixed; width: 100%; min-width: 980px; font-size: 12.5px; }   /* 09/10: no celular as colunas fixas se espremiam e se sobrepunham; agora o bloco rola para o lado, como em Vendas */
.grade-avaliacoes col.c-venda { width: 104px; } .grade-avaliacoes col.c-pedido { width: 150px; }
.grade-avaliacoes col.c-produto { width: 26%; } .grade-avaliacoes col.c-num { width: 84px; }
.grade-avaliacoes col.c-mc { width: 64px; } .grade-avaliacoes col.c-data { width: 64px; }
.grade-avaliacoes col.c-nota { width: 86px; } .grade-avaliacoes col.c-acao { width: 36px; }
.grade-avaliacoes td { padding: 7px 8px; vertical-align: middle; }
.grade-avaliacoes tbody tr + tr td { border-top: 1px solid var(--linha); }
.grade-avaliacoes .venda-canal { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.grade-avaliacoes .venda-canal [class^="selo-"] { white-space: nowrap; }
.grade-avaliacoes .numero-venda { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; }
.grade-avaliacoes .produto strong { display: block; font-family: var(--fonte-marca); font-size: 12px; }
.grade-avaliacoes .produto .nome { display: block; color: var(--tinta-fraca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grade-avaliacoes .texto-avaliacao { max-width: none; }
.grade-avaliacoes .resenha { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
.grade-avaliacoes .tags { display: block; margin-top: 3px; }
.grade-avaliacoes .tags .tag { margin: 0 6px 0 0; }
.grade-avaliacoes .abrir { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 1px solid var(--borda-forte); border-radius: 6px; color: var(--tinta); font-size: 14px; }
.grade-avaliacoes .abrir:hover { border-color: var(--tinta); }
.grade-avaliacoes .estrelas { color: #E7A000; letter-spacing: 1px; white-space: nowrap; }
.grade-avaliacoes .estrelas.ruim { color: var(--vermelho); }
.grade-avaliacoes .mc.ok { color: var(--verde); }
.grade-avaliacoes .mc.meio { color: #B7791F; }
.grade-avaliacoes .mc.ruim { color: var(--vermelho); }
.grade-avaliacoes tr.ruim td { background: #FFF5F6; }
.grade-avaliacoes .texto-avaliacao { max-width: 420px; line-height: 1.35; }
.grade-avaliacoes .tag { display: inline-block; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--fundo); color: var(--tinta-fraca); margin-left: 6px; white-space: nowrap; }
.grade-avaliacoes .tag.alerta { background: var(--vermelho-fundo); color: var(--vermelho); }
@media (max-width: 900px) { .cartoes-avaliacoes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .cartoes-avaliacoes { gap: 10px; } .cartao-avaliacao { padding: 12px 13px; } .cartao-avaliacao .valor { font-size: 22px; } .cartao-avaliacao .valor.semdado { font-size: 16px; } }


/* ===== D159 (08/10) — a página principal v4: os depoimentos como prova,
 * as telas reais, o vilão com as 18 linhas, 10 blocos. Prefixo h4- para
 * não brigar com a v3 (.venda), que as páginas por canal ainda usam. */
.h4 { max-width: 1180px; margin: 0 auto; padding: 0 28px; font-size: 16px; line-height: 1.5; }
.h4 h1, .h4 h2, .h4 h3 { margin: 0; letter-spacing: -0.02em; }
.h4 h2 { font-size: 38px; font-weight: 800; line-height: 1.12; }
.h4-sub { font-size: 18px; color: var(--tinta-media); max-width: 640px; margin: 14px 0 0; }
.h4-sob { font-size: 13px; color: var(--tinta-fraca); margin-top: 14px; }
.h4 .selo-meli, .h4 .selo-amazon, .h4 .selo-tiktok, .h4 .selo-shopee { font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 5px; vertical-align: 2px; }
.h4-botao { display: inline-flex; align-items: center; gap: 10px; background: var(--acento); color: #FFFFFF; font-weight: 700; font-size: 17px; padding: 16px 28px; border-radius: 999px; box-shadow: 0 10px 30px rgba(255, 90, 31, 0.32); transition: transform .15s, background .15s; }
.h4-botao:hover { transform: translateY(-1px); background: #E44A12; color: #FFFFFF; }
.h4-botao.claro { background: var(--superficie); color: var(--tinta); box-shadow: none; border: 1.5px solid var(--borda-forte); }
.h4-botao.claro:hover { background: var(--superficie); color: var(--tinta); border-color: var(--tinta); }
.h4-topo { height: 72px; display: flex; align-items: center; justify-content: space-between; }
.h4-topo .marca { font-size: 18px; }
.h4-topo nav { display: flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 500; color: var(--tinta-media); }
.h4-topo nav a:hover { color: var(--tinta); }
.h4-cta-topo { background: var(--tinta); color: #FFFFFF !important; padding: 10px 18px; border-radius: 999px; font-weight: 700; }
/* abertura */
.h4-heroi { display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; padding: 52px 0 44px; }
.h4-olho { font-family: var(--fonte-marca); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--acento); margin-bottom: 18px; display: flex; align-items: center; gap: 10px; }
.h4-olho::before { content: ""; width: 28px; height: 2px; background: var(--acento); flex: none; }
.h4-heroi h1 { font-size: 64px; font-weight: 800; line-height: 1.02; }
.h4-heroi h1 span { color: var(--acento); }
.h4-heroi .h4-sub { font-size: 20px; margin-top: 22px; }
.h4-acoes { margin-top: 30px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.h4-fone { position: relative; width: 340px; margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 34px; background: #000; padding: 10px; box-shadow: 0 30px 70px rgba(17, 17, 17, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.4); }
.h4-fone video { width: 100%; height: 100%; object-fit: cover; border-radius: 26px; display: block; background: #111; }
.h4-som { position: absolute; right: 24px; top: 24px; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, 0.55); color: #FFFFFF; font-size: 18px; cursor: pointer; padding: 0; }
.h4-som:hover { background: rgba(0, 0, 0, 0.75); }
/* no topo, longe do terço de baixo onde a legenda queimada do vídeo passa
   (A108, 08/10: no celular "Rafael" ficava embaixo da legenda) */
.h4-quem { position: absolute; left: 24px; top: 24px; max-width: calc(100% - 100px); color: #FFFFFF; font-size: 12.5px; font-weight: 700; line-height: 1.25; background: rgba(0, 0, 0, 0.55); padding: 7px 11px; border-radius: 14px; }
.h4-quem span { display: block; font-weight: 400; opacity: .85; font-size: 11.5px; }
.h4-fone-vazio { background: var(--superficie); padding: 18px; border: 1px solid var(--linha); box-shadow: var(--sombra); aspect-ratio: auto; width: auto; border-radius: var(--raio); }
/* confiança */
.h4-confianca { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 26px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; margin: 8px 0 72px; flex-wrap: wrap; }
.h4-confianca .canais { display: flex; gap: 8px; align-items: center; font-size: 14px; color: var(--tinta-fraca); flex-wrap: wrap; }
.h4-confianca .itens { display: flex; gap: 26px; font-size: 14.5px; font-weight: 500; color: var(--tinta-media); flex-wrap: wrap; }
.h4-confianca .itens span::before { content: "✓"; color: var(--verde); font-weight: 800; margin-right: 7px; }
/* seções */
.h4-secao { padding: 36px 0 72px; }
.h4-cab { margin-bottom: 30px; }
/* vídeos */
.h4-videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 262px)); justify-content: start; gap: 18px; }  /* 09/10: cartões do mesmo tamanho com 2, 3 ou 4 vídeos, alinhados ao título */
.h4-cartao-video { position: relative; height: auto; border-radius: 16px; overflow: hidden; background: #141414; color: #FFFFFF; box-shadow: 0 14px 34px rgba(17, 17, 17, 0.14); border: 0; padding: 0; cursor: pointer; text-align: left; font: inherit; width: 100%; }
.h4-cartao-video img { width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; display: block; transition: transform .3s; }  /* a proporcao fica na imagem: o Chrome ignora aspect-ratio em <button> (cartao saiu com 44px, 08/10) */
.h4-cartao-video:hover img { transform: scale(1.03); }
.h4-cartao-video .texto { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.82)); }
.h4-cartao-video .pergunta { display: block; font-size: 21px; font-weight: 800; line-height: 1.15; }
.h4-cartao-video .quem { display: block; font-size: 12.5px; opacity: .85; margin-top: 8px; font-family: var(--fonte-marca); }
.h4-cartao-video .play { position: absolute; top: 14px; left: 14px; width: 44px; height: 44px; border-radius: 50%; background: var(--acento); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); }
.h4-cartao-video .play::after { content: ""; position: absolute; left: 17px; top: 13px; border-left: 14px solid #FFFFFF; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.h4-cartao-video .dur { position: absolute; top: 20px; right: 14px; font-family: var(--fonte-marca); font-size: 12px; background: rgba(0, 0, 0, 0.5); padding: 2px 8px; border-radius: 999px; }
.h4-player { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; }
.h4-player::backdrop { background: rgba(0, 0, 0, 0.86); }
.h4-player video { width: min(92vw, calc(88vh * 9 / 16)); aspect-ratio: 9 / 16; border-radius: 18px; background: #000; display: block; }
.h4-fechar { position: fixed; top: 16px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.15); color: #FFFFFF; font-size: 28px; line-height: 1; cursor: pointer; }
/* vilão */
.h4-vilao { background: #141414; color: #FFFFFF; border-radius: 28px; padding: 64px 60px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.h4-vilao h2 { color: #FFFFFF; }
.h4-vilao h2 span { color: var(--acento); }
.h4-vilao p { color: #CFCFC9; font-size: 17px; }
.h4-vilao .linhas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 22px; margin-top: 22px; font-size: 14.5px; color: #E8E8E3; }
.h4-vilao .linhas div::before { content: "−"; color: var(--acento); font-weight: 800; margin-right: 8px; }
.h4-dre { min-width: 0; background: var(--superficie); color: var(--tinta); border-radius: 16px; padding: 20px 22px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); font-size: 14px; }
.h4-dre .t { font-family: var(--fonte-marca); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-apagada); display: flex; justify-content: space-between; margin-bottom: 8px; }
.h4-dre .r { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid var(--linha); }
.h4-dre .r.f { font-weight: 800; background: var(--fundo); margin: 0 -10px; padding: 7px 10px; border-radius: 6px; border: 0; }
.h4-dre .r .v { font-family: var(--fonte-marca); white-space: nowrap; }
.h4-dre .r .n { color: var(--vermelho); font-family: var(--fonte-marca); white-space: nowrap; }
.h4-dre .r.res { font-weight: 800; font-size: 16px; background: #FFF0E8; margin: 8px -10px 0; padding: 10px; border-radius: 8px; border: 0; }
.h4-dre .r.res .v { color: var(--acento); }
.h4-dre .nota { margin-top: 8px; font-size: 11px; color: var(--tinta-apagada); text-align: right; }
.h4-dre .selo-meli, .h4-dre .selo-amazon, .h4-dre .selo-tiktok, .h4-dre .selo-shopee { font-size: 10px; padding: 1px 6px; }
/* telas */
.h4-telas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.h4-tela { background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(17, 17, 17, 0.06); }
.h4-tela img { width: 100%; display: block; border-bottom: 1px solid var(--linha); }
.h4-tela .leg { padding: 16px 18px 20px; }
.h4-tela .leg b { display: block; font-size: 16px; margin-bottom: 4px; }
.h4-tela .leg span { font-size: 14px; color: var(--tinta-fraca); }
/* canais */
.h4-canais { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.h4-canal { background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; min-height: 190px; align-items: flex-start; }
.h4-canal b { font-size: 17px; line-height: 1.25; }
.h4-canal p { margin: 0; font-size: 14px; color: var(--tinta-fraca); flex: 1; }
.h4-canal a { color: var(--acento); font-weight: 700; font-size: 14px; }
/* como funciona */
.h4-passos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.h4-passo { background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; padding: 26px 24px; }
.h4-passo i { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; background: var(--tinta); color: #FFFFFF; font-style: normal; font-family: var(--fonte-marca); font-weight: 700; align-items: center; justify-content: center; margin-bottom: 14px; }
.h4-passo b { display: block; font-size: 18px; margin-bottom: 6px; }
.h4-passo p { margin: 0; color: var(--tinta-fraca); font-size: 15px; }
/* objeções */
.h4-faq { max-width: 820px; }
.h4-faq details { border-top: 1px solid var(--borda); padding: 18px 0; }
.h4-faq details:last-child { border-bottom: 1px solid var(--borda); }
.h4-faq summary { cursor: pointer; list-style: none; font-size: 18px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.h4-faq summary::-webkit-details-marker { display: none; }
.h4-faq summary::after { content: "+"; color: var(--acento); font-size: 24px; font-weight: 400; flex: none; }
.h4-faq details[open] summary::after { content: "−"; }
.h4-faq p { margin: 10px 0 0; color: var(--tinta-media); max-width: 700px; }
/* preço (reaproveita _preco_publico.html) */
.h4-preco .preco-dois { max-width: 860px; }
.h4-preco .garantia { max-width: 860px; margin-top: 16px; }
.h4-acoes-preco { margin-top: 26px; }
/* fecho e rodapé */
.h4-fecho { text-align: center; padding: 80px 0 90px; }
.h4-fecho h2 { font-size: 44px; max-width: 820px; margin: 0 auto 26px; }
.h4-rodape { border-top: 1px solid var(--borda); padding: 26px 0 40px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--tinta-fraca); flex-wrap: wrap; gap: 12px; }
.h4-rodape nav { display: flex; gap: 16px; flex-wrap: wrap; }
.h4-rodape .marca { font-size: 14px; }
@media (max-width: 760px) {
    .h4 { padding: 0 18px; }
    .h4-topo nav .so-largo { display: none; }
    .h4-heroi { grid-template-columns: 1fr; gap: 30px; padding: 24px 0 26px; }
    .h4-heroi h1 { font-size: 42px; }
    .h4-heroi .h4-sub { font-size: 17px; }
    .h4-fone { width: 260px; }
    .h4 h2 { font-size: 30px; }
    .h4-confianca { margin-bottom: 44px; gap: 12px; flex-direction: column; align-items: flex-start; }
    .h4-confianca .itens { gap: 12px; font-size: 13.5px; }
    /* celular: faixa deslizante, um cartão grande por vez e a ponta do próximo
       (A108, 08/10: em duas colunas a pergunta subia até o play e o rosto sumia) */
    .h4-videos { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px; margin: 0 -18px; padding: 0 18px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .h4-videos::-webkit-scrollbar { display: none; }
    .h4-cartao-video { flex: 0 0 74%; max-width: 300px; scroll-snap-align: start; }
    .h4-cartao-video .texto { padding: 14px; }
    .h4-cartao-video .pergunta { font-size: 18px; }
    .h4-cartao-video .quem { font-size: 11.5px; margin-top: 6px; }
    .h4-vilao { grid-template-columns: minmax(0, 1fr); padding: 34px 22px; gap: 28px; border-radius: 20px; }
    .h4-vilao .linhas { grid-template-columns: 1fr; }
    .h4-telas, .h4-canais, .h4-passos { grid-template-columns: 1fr; }
    .h4-secao { padding: 24px 0 48px; }
    .h4-fecho h2 { font-size: 32px; }
}

/* ===== D164 (08/10) — página do reel, destino de anúncio (/v/<nome>).
 * Celular: o vídeo é a tela (fundo igual ao do vídeo, as faixas somem).
 * Computador: vídeo no centro, texto ao lado. */
.va { min-height: 100vh; min-height: 100svh; background: #141414; color: #FFFFFF; display: flex; align-items: center; justify-content: center; gap: 64px; padding: 0; }
.va-palco { position: relative; height: 100vh; height: 100svh; width: 100vw; max-width: calc(100svh * 9 / 16); background: #141414; overflow: hidden; }
.va-video { width: 100%; height: 100%; object-fit: contain; display: block; background: #141414; }
.va-pular { position: absolute; top: 14px; right: 14px; background: rgba(0, 0, 0, 0.6); color: #FFFFFF; font-size: 13.5px; font-weight: 700; padding: 8px 14px; border-radius: 999px; text-decoration: none; }
.va-pular:hover { background: rgba(0, 0, 0, 0.8); color: #FFFFFF; }
.va-som { position: absolute; right: 14px; bottom: 22px; width: auto; height: auto; background: rgba(0, 0, 0, 0.6); color: #FFFFFF; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 999px; border: 0; cursor: pointer; }
.va-tocar { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; border-radius: 50%; background: var(--acento); color: #FFFFFF; font-size: 30px; border: 0; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); padding: 0; }
.va-fim { position: absolute; inset: 0; background: rgba(20, 20, 20, 0.88); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 24px; }
.va-fim p { font-size: 19px; color: #FFFFFF; margin: 0; }
.va-fim b { color: var(--acento); }
.va-fim[hidden], .va-tocar[hidden] { display: none; }
.va-barra { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, 0.12); }
.va-barra i { display: block; height: 100%; width: 0; background: var(--acento); }
.va-lado { display: none; max-width: 400px; }
.va-marca { font-family: var(--fonte-logo); font-weight: 700; font-size: 17px; margin-bottom: 40px; }
.va-marca b { color: var(--acento); }
.va-kicker { font-family: var(--fonte-marca); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--acento); margin-bottom: 14px; }
.va-lado h1 { font-size: 42px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; color: #FFFFFF; margin: 0 0 18px; }
.va-lado p { font-size: 17px; line-height: 1.5; color: #CFCFC9; margin: 0 0 26px; }
.va-lado .va-miudo { font-size: 13px; color: #8A8A85; margin: 16px 0 0; }
.va-cta { display: inline-block; width: auto; height: auto; padding: 14px 24px; border-radius: 999px; font-weight: 700; text-decoration: none; }
@media (min-width: 900px) {
    .va { padding: 4vh 40px; }
    .va-palco { height: 90vh; width: auto; max-width: none; aspect-ratio: 9 / 16; border-radius: 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06); }
    .va-lado { display: block; }
    .va-pular { display: none; }   /* no computador o botão ao lado faz o mesmo */
}

/* ===== D165 (08/10) — o preço do link no topo, ao lado do vídeo (só com link). */
.h4-link-preco { margin-top: 22px; max-width: 440px; background: #FFF0E8; border: 1px solid #FFD2BD; border-radius: 14px; padding: 14px 18px; }
.h4-link-preco .rot { font-family: var(--fonte-marca); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--acento); }
.h4-link-preco .val { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--tinta); margin-top: 2px; line-height: 1.1; }
.h4-link-preco .val span { font-size: 15px; font-weight: 600; color: var(--tinta-media); }
.h4-link-preco .val s { font-size: 16px; font-weight: 500; color: var(--tinta-apagada); margin-left: 6px; }
.h4-link-preco p { font-size: 13px; color: var(--tinta-media); margin: 4px 0 0; line-height: 1.4; }
.va-link-preco { margin: 0 0 22px; background: rgba(255, 90, 31, 0.1); border-color: rgba(255, 90, 31, 0.35); }
.va-link-preco .val { color: #FFFFFF; }
.va-link-preco .val span, .va-link-preco p { color: #CFCFC9; }
.va-link-preco .val s { color: #8A8A85; }
.va-fim .va-preco { font-size: 16px; color: #CFCFC9; }
.va-fim .va-preco b { color: #FFFFFF; }
.va-fim .va-preco s { color: #8A8A85; margin-left: 4px; }
.h4-link-preco .vagas { margin-top: 6px; color: var(--tinta); }
.h4-link-preco .vagas b { color: var(--acento); }
/* o botão que acompanha (só com link) */
.h4-flutuante { position: fixed; z-index: 40; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 16px; background: #141414; color: #FFFFFF;
                border-radius: 999px; padding: 10px 10px 10px 22px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); transition: opacity .25s, transform .25s; }
.h4-flutuante[hidden] { display: flex; opacity: 0; transform: translateY(16px); pointer-events: none; }
.h4-flutuante .txt { font-size: 14px; line-height: 1.2; }
.h4-flutuante .txt b { font-size: 17px; }
.h4-flutuante .txt s { color: #8A8A85; margin-left: 4px; font-size: 13px; }
.h4-flutuante .txt span { display: block; font-size: 11.5px; color: #CFCFC9; }
.h4-flutuante .h4-botao { padding: 12px 20px; font-size: 15px; white-space: nowrap; }
@media (max-width: 760px) {
    .h4-flutuante { left: 12px; right: 12px; bottom: 12px; justify-content: space-between; padding: 8px 8px 8px 16px; border-radius: 16px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
}
/* o mesmo cartão no cadastro, na largura do formulário */
.cad-link-preco { max-width: none; margin: 0 0 16px; }
/* D166 — o cronômetro da janela "só nesta visita": conta até o prazo real do servidor. */
.cron { display: inline-flex; align-items: center; gap: 6px; }
.cron b { font-family: var(--fonte-marca); font-variant-numeric: tabular-nums; }
.ponto-vivo { width: 8px; height: 8px; border-radius: 50%; background: #FF3B30; display: inline-block; flex: none; animation: ponto-pisca 1s ease-in-out infinite; }
@keyframes ponto-pisca { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@media (prefers-reduced-motion: reduce) { .ponto-vivo { animation: none; } }
.h4-flutuante .txt .cron { display: flex; font-size: 12px; color: #FFFFFF; margin-top: 2px; }
.h4-flutuante .txt .cron b { color: #FF8A5C; font-size: 13px; }
/* 17/10 — a linha do relógio quebrava em celular de 430 px (ponto na esquerda, tempo na direita): vira texto corrido, centralizado. */
.cad-link-preco .cron { display: block; text-align: center; color: var(--tinta); font-weight: 600; }
.cad-link-preco .cron .ponto-vivo { margin-right: 8px; vertical-align: middle; }
.cad-link-preco .cron b { color: var(--acento); }
/* D166 — no "Quanto custa", para quem veio do anúncio: o normal riscado e a faixa do prazo. */
.de-preco { font-size: 14px; color: var(--tinta-apagada); margin-top: 6px; }
.de-preco s { color: var(--tinta-fraca); }
.promo-agora { display: flex; align-items: center; gap: 10px; max-width: 860px; margin: 0 0 14px; padding: 12px 16px; border-radius: 12px;
               background: #FFF0E8; border: 1px solid #FFD2BD; color: var(--tinta); font-size: 15px; }
.promo-agora b { color: var(--acento); }
.promo-agora b[data-cronometro] { font-family: var(--fonte-marca); font-variant-numeric: tabular-nums; }
/* Três telas: clicar amplia (dialog). */
.h4-ampliar { display: block; position: relative; width: 100%; height: auto; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 0; }
.h4-ampliar img { width: 100%; display: block; border-bottom: 1px solid var(--linha); transition: transform .3s; }
.h4-ampliar:hover img { transform: scale(1.015); }
.h4-ampliar .lupa { position: absolute; right: 10px; top: 10px; background: rgba(17, 17, 17, 0.78); color: #FFFFFF; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; }
.h4-zoom { border: 0; padding: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: auto; }
.h4-zoom::backdrop { background: rgba(0, 0, 0, 0.88); }
.h4-zoom img { display: block; width: min(1600px, 94vw); height: auto; border-radius: 12px; }
.h4-zoom .h4-fechar { position: fixed; right: 16px; top: 16px; z-index: 2; }

/* ===== 09/10 — página principal: as avaliações (recorte da tela real; clicar abre a tela inteira) */
.h4-destaque { color: var(--acento); }
.h4-recorte { border: 1px solid var(--linha); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(17, 17, 17, 0.06); background: var(--fundo); }
.h4-recorte img { border-bottom: 0; }
.h4-recorte .h4-ampliar .lupa { display: none; }   /* sobre a imagem, a lupa cobria selos e botões: vira a legenda abaixo */
.h4-arraste { font-size: 12.5px; color: var(--tinta-fraca); margin: 10px 2px 0; font-family: var(--fonte-marca); }
.h4-arraste .so-celular { display: none; }
.h4-aval-itens { grid-template-columns: repeat(4, 1fr); margin-top: 18px; }
.h4-aval-itens .h4-passo { padding: 22px 22px; }
.h4-aval-itens .h4-passo b { font-size: 17px; }
.h4-aval-itens .h4-passo p { font-size: 14.5px; }
@media (max-width: 1100px) { .h4-aval-itens { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) {
    /* celular: o recorte é largo; fica legível rolando para o lado (kalko.js abre na margem e na nota) */
    .h4-recorte { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .h4-recorte::-webkit-scrollbar { display: none; }
    .h4-recorte .h4-ampliar { width: 1060px; }
    .h4-arraste .so-largo { display: none; }
    .h4-arraste .so-celular { display: inline; }
    .h4-aval-itens { grid-template-columns: 1fr; }
}
/* 10/10 — o Reel das avaliações num celular, ao lado dos quatro pontos; o recorte da tela vem logo abaixo. */
.h4-aval-reel { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 40px; align-items: center; margin-bottom: 28px; }
.h4-reel { margin: 0; }
.h4-aval-reel .h4-fone { width: 300px; }
.h4-reel figcaption { margin-top: 14px; text-align: center; font-size: 12.5px; color: var(--tinta-fraca); font-family: var(--fonte-marca); line-height: 1.5; }
.h4-reel figcaption b { display: block; color: var(--tinta); font-weight: 700; }
.h4-reel figcaption span { display: block; font-size: 11.5px; }
.h4-aval-reel .h4-aval-itens { grid-template-columns: 1fr 1fr; margin-top: 0; }
@media (max-width: 900px) {
    .h4-aval-reel { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@media (max-width: 760px) {
    .h4-aval-reel .h4-fone { width: 260px; }
    .h4-aval-reel .h4-aval-itens { grid-template-columns: 1fr; }
}

/* D176 — painel dos lembretes por e-mail (admin › Contas). */
.rmk { margin-bottom: 16px; }
.rmk-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.rmk-cab p { margin: 4px 0 0; }
.rmk-chave { display: flex; align-items: center; gap: 10px; flex: none; }
.rmk-estado { font-family: var(--fonte-marca); font-size: 12px; padding: 3px 10px; border-radius: 999px; }
.rmk-estado.ligado { background: #EAF3E6; color: #3F6B2E; }
.rmk-estado.desligado { background: var(--vermelho-fundo); color: var(--vermelho); }
.rmk-numeros { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 14px; }
.rmk-numeros > div { border: 1px solid var(--linha); border-radius: var(--raio-miudo); padding: 10px 12px; }
.rmk-numeros b { display: block; font-family: var(--fonte-marca); font-size: 22px; letter-spacing: -0.03em; line-height: 1.1; }
.rmk-numeros b i { font-style: normal; font-size: 13px; color: var(--tinta-apagada); }
.rmk-numeros span { display: block; font-size: 12px; color: var(--tinta-media); margin-top: 2px; }
.rmk-numeros small { display: block; font-family: var(--fonte-marca); font-size: 10.5px; color: var(--tinta-apagada); margin-top: 4px; }
.rmk-numeros .destaque { border-color: var(--acento); background: #FFF6F1; }
.rmk-numeros .destaque b { color: var(--acento); }
.rmk-linha { display: flex; gap: 4px; }
.rmk-ponto { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
             font-family: var(--fonte-marca); font-size: 10px; border: 1.5px solid var(--borda-forte); color: var(--tinta-apagada); background: var(--superficie); }
.rmk-ponto.enviado { background: var(--tinta); border-color: var(--tinta); color: #FFFFFF; }
.rmk-ponto.clicou { background: var(--acento); border-color: var(--acento); color: #FFFFFF; }
.rmk-ponto.proximo { border-color: var(--acento); color: var(--acento); border-style: dashed; }
.rmk-ponto.pulado { opacity: .35; }
.rmk-pausar { margin-top: 4px; }
.rmk-pausar button { background: none; border: 0; padding: 0; font-size: 11.5px; color: var(--tinta-fraca); text-decoration: underline; cursor: pointer; }
@media (max-width: 760px) {
    .rmk-cab { flex-direction: column; }
    .rmk-numeros { grid-template-columns: repeat(2, 1fr); }
}

/* 10/10 — o @kalko.bi nos rodapés das páginas públicas (_instagram.html). */
.link-instagram { display: inline-flex; align-items: center; gap: 7px; color: var(--tinta); text-decoration: none; font-weight: 600; font-size: 13px;
                  border: 1px solid var(--borda); border-radius: 999px; padding: 6px 12px 6px 10px; background: var(--superficie); }
.link-instagram svg { color: var(--acento); flex: none; }
.link-instagram:hover { border-color: var(--acento); color: var(--acento); }

/* D178 — implantação de quem pagou (admin › Contas) e as etiquetas de origem. */
.imp-numeros { grid-template-columns: repeat(3, 1fr); }
.imp-tabela { margin-top: 14px; }
.imp-tabela td { vertical-align: top; }
.chip-origem { display: inline-block; font-family: var(--fonte-marca); font-size: 10.5px; padding: 2px 8px; border-radius: 999px; margin: 2px 4px 0 0; white-space: nowrap; }
.chip-origem.gpt { background: #EEF3FB; color: #2B4C8C; }
.chip-origem.meta { background: #E8F0FE; color: #1B5FD1; }
.chip-origem.indicacao { background: #EAF6EE; color: #2E7A48; }
.chip-origem.disp { background: #F1F0EA; color: var(--tinta-media, #555); }   /* celular / computador (14/10) */
.chip-origem.porte { background: #FFF1EA; color: #9A3A12; }   /* vendas/mês do cadastro (D218, 16/10) */
/* Lista de contas (14/10): canal conectado no selo da marca, ou "sem conexão" — para bater o olho. */
.lojas-da-conta { margin-top: 6px; }
.lojas-da-conta .selo { margin-right: 4px; }
.sem-conexao { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 4px;
               background: #FDECEC; color: #B42318; border: 1px solid #F5C2C0; letter-spacing: 0.02em; text-transform: uppercase; }

/* 11/10 — checkout: o campo com erro volta vazio, marcado, com a mensagem embaixo. */
.campo-erro input { border-color: var(--vermelho); background: var(--vermelho-fundo); }
.campo-erro label { color: var(--vermelho); }
.erro-campo { color: var(--vermelho); font-size: 12.5px; margin: 4px 0 10px; }
.nota-redigitar { margin-bottom: 10px; }

/* D181 — admin: os e-mails da implantação, o uso por conta, a Jornada e o "ver e-mail". */
.imp-email { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; padding: 2px 0; white-space: nowrap; }
.imp-email a { font-weight: 600; color: var(--tinta); }
.imp-email a:hover { color: var(--acento); }
a.rmk-ponto { text-decoration: none; cursor: pointer; }
a.rmk-ponto:hover { outline: 2px solid var(--acento); outline-offset: 1px; }
.uso-celula { white-space: nowrap; }
.links-conta { white-space: nowrap; }
.links-conta a + a { margin-left: 10px; }
.cabecalho-quebra { flex-wrap: wrap; gap: 4px 16px; }
.jor-numeros b.jor-data { font-size: 17px; letter-spacing: -0.02em; }
.jor-numeros b .sem-dado { font-family: var(--fonte); font-size: 13px; letter-spacing: 0; }
.jor-bloco .jor-dia { font-size: 13px; font-weight: 600; color: var(--tinta); margin: 18px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--linha); }
.jor-bloco .jor-dia:first-of-type { margin-top: 4px; }
.jor-linha { list-style: none; margin: 0; padding: 0; }
.jor-passo { display: grid; grid-template-columns: 112px 88px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--linha); }
.jor-passo:last-child { border-bottom: 0; }
.jor-hora { font-family: var(--fonte-marca); font-size: 13px; color: var(--tinta); }
.jor-hora small { display: block; font-size: 10.5px; color: var(--tinta-apagada); margin-top: 1px; }
.jor-selo { justify-self: start; font-family: var(--fonte-marca); font-size: 10.5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
            background: var(--fundo); color: var(--tinta-media); }
.jor-selo.jor-cadastro { background: #EEF3FB; color: #2B4C8C; }
.jor-selo.jor-acesso { background: var(--fundo); color: var(--tinta-media); }
.jor-selo.jor-uso { background: #F1F0EA; color: var(--tinta-fraca); }
.jor-selo.jor-canal { background: #FFF8D6; color: #6B5A00; }
.jor-selo.jor-pagamento { background: var(--verde-fundo); color: #2E7A48; }
.jor-selo.jor-recusa { background: var(--vermelho-fundo); color: var(--vermelho); }
.jor-selo.jor-email { background: #FFF1EA; color: #B8410F; }
.jor-selo.jor-clique { background: var(--acento); color: #FFFFFF; }
.jor-selo.jor-whatsapp { background: #E4F6EA; color: #17773E; }   /* D194 */
.jor-selo.jor-mensagem { background: #EEF3FB; color: #2B4C8C; }
.jor-selo.jor-sugestao { background: #FFE8DC; color: #B8410F; }   /* D257: peça enviada à mão */
.jor-selo.jor-acao { background: #DFF5E1; color: #1F6B3A; }       /* D257: o seller agiu na loja */
.jor-selo.jor-resposta { background: #E8EEFB; color: #2B4C8C; }   /* D257: resposta no número do Kalko */
.jor-texto { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 13.5px; }
.jor-texto b { font-weight: 600; }
.jor-texto .miudo { font-size: 12px; }
.jor-texto a { font-size: 12.5px; }
.email-meta dl { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 0; }
.email-meta dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tinta-apagada); font-weight: 600; }
.email-meta dd { margin: 3px 0 0; font-size: 14px; }
.email-meta { margin-bottom: 14px; }
.aviso-reconstruido { background: #FFF6F1; color: #8A3A0F; border: 1px solid #F7C9B3; }
.aviso-d84 { background: var(--fundo); color: var(--tinta-media); border: 1px dashed var(--borda-forte); font-size: 14px; padding: 18px 16px; }
.email-nota { margin: -6px 0 10px; }
.email-quadro { display: block; width: 100%; max-width: 560px; height: 1600px; border: 1px solid var(--borda); border-radius: var(--raio); background: #F5F5F2; }
@media (max-width: 760px) {
    .jor-passo { grid-template-columns: 74px minmax(0, 1fr); gap: 4px 10px; }
    .jor-passo .jor-texto { grid-column: 2; }
    .jor-hora { grid-row: span 2; }
    .email-meta dl { grid-template-columns: 1fr 1fr; }
    .email-meta dl > div:first-child { grid-column: 1 / -1; }
    .email-quadro { height: 2000px; }
}
.rola-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* D183 — a mensagem do Kalko dentro do Kalko (Panorama, Tarefas): o cartão do
 * aviso grande, com a moldura escura da marca em vez do vermelho de alerta —
 * é conversa, não problema. O corpo usa só classes daqui (a CSP não deixa
 * estilo embutido). */
.mensagem-kalko-cartao { max-width: 720px; border-color: var(--tinta); }
.mensagem-kalko-cartao h2 { color: var(--tinta); }
.mensagem-kalko-de { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--borda); }
.mensagem-kalko-de .marca { margin: 0; font-size: 15px; }
.mensagem-kalko-de span:last-child { font-family: var(--fonte-marca); font-size: 11px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--tinta-apagada); }
.mensagem-kalko-corpo { font-size: 14.5px; line-height: 1.55; color: var(--tinta-media); }
.mensagem-kalko-corpo p { margin: 0 0 12px; }
.mensagem-kalko-corpo strong, .mensagem-kalko-corpo b { color: var(--tinta); }
.mensagem-kalko-corpo h3 { margin: 22px 0 10px; font-size: 16px; color: var(--tinta); }
.mensagem-kalko-corpo h4 { margin: 16px 0 8px; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
    font-family: var(--fonte-marca); color: var(--acento); }
.mensagem-kalko-corpo ul, .mensagem-kalko-corpo ol { margin: 0 0 12px; padding-left: 20px; }
.mensagem-kalko-corpo li { margin-bottom: 6px; }
.mensagem-kalko-corpo table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 13.5px; }
.mensagem-kalko-corpo th, .mensagem-kalko-corpo td { padding: 8px 10px; border-bottom: 1px solid var(--borda); text-align: left; }
.mensagem-kalko-corpo td.num, .mensagem-kalko-corpo th.num { text-align: right; font-variant-numeric: tabular-nums; }
.mensagem-kalko-corpo .destaque { background: var(--fundo); border-left: 3px solid var(--acento); border-radius: var(--raio-miudo);
    padding: 12px 14px; margin: 12px 0 16px; }
.mensagem-kalko-corpo .alerta { color: var(--vermelho); }
.mensagem-kalko-corpo .tarefa { background: var(--tinta); color: #FFFFFF; border-radius: var(--raio); padding: 16px 18px; margin: 16px 0; }
.mensagem-kalko-corpo .tarefa strong, .mensagem-kalko-corpo .tarefa h3 { color: #FFFFFF; margin-top: 0; }
.mensagem-kalko-corpo .assinatura { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--borda);
    font-size: 13px; color: var(--tinta-fraca); }
@media (max-width: 560px) {
    .mensagem-kalko-corpo table { font-size: 12.5px; }
    .mensagem-kalko-corpo th, .mensagem-kalko-corpo td { padding: 6px 6px; }
}
.mensagem-kalko-corpo .kpi-grande { margin: 6px 0 12px; }
.mensagem-kalko-corpo .kpi-grande b { display: block; font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; color: var(--tinta); }
.mensagem-kalko-corpo .kpi-grande span { font-size: 13px; color: var(--tinta-fraca); }
.mensagem-kalko-corpo .kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.mensagem-kalko-corpo .kpi { background: var(--fundo); border-radius: var(--raio); padding: 12px 14px; font-size: 13px; line-height: 1.45; }
.mensagem-kalko-corpo .kpi b { display: block; font-size: 24px; line-height: 1.15; color: var(--tinta); margin-bottom: 4px; }
.mensagem-kalko-corpo .kpi.alerta b { color: var(--vermelho); }
.mensagem-kalko-corpo small { font-size: 12.5px; color: var(--tinta-fraca); }
.mensagem-kalko-corpo .tarefa h4 { color: var(--acento); margin-top: 0; }
.mensagem-kalko-corpo .tarefa small { color: rgba(255, 255, 255, 0.7); }
.mensagem-kalko-corpo .tarefa .link-tarefa { display: inline-block; margin-top: 4px; background: var(--acento); color: #FFFFFF;
    padding: 9px 16px; border-radius: 999px; font-weight: 600; text-decoration: none; }
@media (max-width: 560px) { .mensagem-kalko-corpo .kpis { grid-template-columns: 1fr; } }
/* Prévia de 12/10: texto do bloco preto ilegível, cartão de alerta todo
 * vermelho e link sem cara de link — corrigidos antes de ir ao ar. */
.mensagem-kalko-corpo .tarefa p { color: rgba(255, 255, 255, 0.86); }
.mensagem-kalko-corpo .kpi.alerta { color: var(--tinta-media); }
.mensagem-kalko-corpo a:not(.link-tarefa) { color: var(--acento); text-decoration: underline; text-underline-offset: 2px; }

/* 12/10 — Canais no celular: o caminho principal é o computador (o app do
   Mercado Livre toma a autorização e a conexão não volta). */
.aviso-celular {
    background: var(--azul-fundo);
    border: 1px solid #C5CEF0;
    border-left: 4px solid var(--acento);
    border-radius: var(--raio);
    padding: 14px 16px;
    margin-bottom: 16px;
    color: var(--tinta);
    font-size: 14px;
    line-height: 1.5;
}
.aviso-celular h2 { margin: 0 0 6px; font-size: 17px; }
.aviso-celular p { margin: 0 0 8px; }
.aviso-celular ol { margin: 0 0 8px; padding-left: 20px; }
.aviso-celular li { margin: 2px 0; }
.aviso-celular-nota { color: var(--tinta-media); font-size: 13px; margin: 0; }
.pelo-computador { color: var(--tinta-media); font-weight: 600; white-space: nowrap; }
/* 27/10 — no celular, sem loja: "o ideal e mais simples é pelo computador", com as duas saídas. */
.escolha-celular { text-align: center; border-top: 4px solid var(--acento); padding: 28px 22px 22px; margin-bottom: 16px; }
.escolha-icone { color: var(--acento); margin-bottom: 6px; }
.bloco h2.escolha-titulo { font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; color: var(--tinta);
    text-transform: none; font-weight: 700; margin: 0 auto 10px; max-width: 30ch; }
.escolha-texto { font-size: 14.5px; line-height: 1.55; color: var(--tinta-media); margin: 0 auto 18px; max-width: 46ch; }
.escolha-acoes { display: grid; gap: 10px; max-width: 360px; margin: 0 auto; }
.escolha-acoes form { margin: 0; }
.escolha-acoes button { height: 50px; font-size: 15px; }
.escolha-acoes button.botao-acento:hover { background: var(--tinta); }
.escolha-acoes button.secundario, .pc-acoes button.secundario { background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda-forte); }
.escolha-acoes button.secundario:hover, .pc-acoes button.secundario:hover { border-color: var(--tinta); background: var(--superficie); }
/* a tela "Pronto! Mandamos o link" depois de "Vou fazer no computador" */
.pc-pronto { text-align: center; padding: 28px 22px 22px; }
.pc-selo { width: 48px; height: 48px; border-radius: 50%; background: var(--verde); color: #FFFFFF; font-size: 24px;
    font-weight: 700; line-height: 48px; margin: 0 auto 12px; }
.pc-pronto h1 { font-size: 21px; line-height: 1.25; margin: 0 auto 10px; max-width: 28ch; }
.pc-email { font-size: 17px; font-weight: 700; color: var(--tinta); margin: 0; overflow-wrap: anywhere; }
.pc-passos { text-align: left; max-width: 440px; margin: 18px auto 12px; padding-left: 22px; font-size: 14px; line-height: 1.55; color: var(--tinta-media); }
.pc-passos li { margin: 0 0 8px; }
.pc-passos strong { color: var(--tinta); }
.pc-nota { max-width: 440px; margin: 0 auto 16px; font-size: 13px; line-height: 1.55; color: var(--tinta-fraca); text-align: left; }
.pc-acoes { display: grid; gap: 8px; max-width: 360px; margin: 0 auto; }
.pc-acoes form { margin: 0; }
button.link-discreto { background: none; color: var(--tinta-media); height: auto; padding: 6px 0; font-weight: 500; font-size: 13.5px; text-decoration: underline; }
button.link-discreto:hover { background: none; color: var(--tinta); }
.acoes-modal .form-inline { display: contents; }
/* a página do link de acesso (kalko.com.br/acesso#…) */
.acesso-titulo { font-size: 19px; line-height: 1.3; margin: 0 0 10px; }
.acesso-texto { font-size: 14px; line-height: 1.55; color: var(--tinta-media); margin: 0 0 16px; }
.acesso-texto-curto { margin-bottom: 4px; }
.acesso-conta { font-size: 16px; font-weight: 700; color: var(--tinta); margin: 0 0 4px; overflow-wrap: anywhere; }
.acesso-cartao button.botao-acento:hover { background: var(--tinta); }
.acesso-nota { font-size: 12.5px; line-height: 1.55; color: var(--tinta-fraca); margin: 14px 0 0; }
a.acesso-botao { display: block; line-height: 44px; text-align: center; text-decoration: none; }
/* 12/10 — os dois caminhos de quem já tem cadastro, dentro do aviso. */
.aviso-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.aviso-acoes a {
    display: inline-flex; align-items: center; justify-content: center;
    height: 40px; padding: 0 18px; border-radius: var(--raio);
    font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
    flex: 1 1 160px; width: auto; margin: 0;           /* os dois do mesmo tamanho; no celular, um embaixo do outro */
}
.aviso-acoes a.botao-acento { background: var(--acento); color: #FFFFFF; border: 1px solid var(--acento); }
.aviso-acoes a.secundario { background: var(--superficie); color: var(--tinta); border: 1px solid var(--borda-forte); }

/* D187 — o slogan oficial (rodapé das páginas públicas, mensagem do Kalko). */
.slogan { font-size: 13px; font-weight: 600; color: var(--tinta-media); line-height: 1.5; margin: 6px 0 8px; }
.slogan-destaque { color: var(--acento); white-space: nowrap; }

/* D190 — botão de cadastro logo abaixo do vídeo do topo e depois dos depoimentos. */
.h4-fone-col { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.h4-fone-col .h4-fone { margin: 0; }
.h4-cta-video { width: 340px; max-width: 100%; box-sizing: border-box; justify-content: center; text-align: center; }
.h4-sob-video { margin-top: 0; text-align: center; }
.h4-acoes-depoimentos { margin-top: 28px; }
.h4-acoes-depoimentos .h4-sob { margin-top: 0; }
@media (max-width: 760px) {
    .h4-cta-video { width: 260px; }
}

/* D196 — o fluxo de mensagens no admin. */
.fluxo-legenda { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.sit { display: inline-block; font-family: var(--fonte-marca); font-size: 10.5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.sit-auto { background: var(--verde-fundo, #EAF6EE); color: #2E7A48; }
.sit-off { background: var(--vermelho-fundo, #FDECEA); color: var(--vermelho); }
.sit-manual { background: #EEF3FB; color: #2B4C8C; }
.fluxo-etapa-cab { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.fluxo-etapa-cab h2 { margin: 0; }
.fluxo-etapa-cab p { margin: 2px 0 0; }
.fluxo-n { flex: none; width: 26px; height: 26px; border-radius: 999px; background: var(--tinta); color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-family: var(--fonte-marca); font-size: 12px; }
.fluxo-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 12px; align-items: start; }
.fluxo-cartao { min-width: 0; border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; background: var(--superficie); display: flex; flex-direction: column; gap: 6px; }
.fluxo-cartao h3 { margin: 2px 0 0; font-size: 15px; }
.fluxo-topo { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 8px; }
.fluxo-canal { font-family: var(--fonte-marca); font-size: 10.5px; padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
.fluxo-email { background: #FFF1EA; color: #B8410F; }
.fluxo-whatsapp { background: #E4F6EA; color: #17773E; }
.fluxo-sistema { background: #F1F0EA; color: var(--tinta-fraca); }
.fluxo-gatilho { margin: 0; font-size: 13px; color: var(--tinta-media); }
.fluxo-numeros { margin: 2px 0 0; font-size: 13px; }
.fluxo-ver { font-weight: 600; font-size: 13.5px; margin-top: 4px; }
.fluxo-modelo { margin: 0; }
.wa-balao { background: #DCF8C6; border-radius: 10px 10px 10px 2px; padding: 8px; font-size: 13px; line-height: 1.4; color: #111111; }
.wa-balao img { display: block; width: 100%; border-radius: 6px; margin-bottom: 6px; }
.wa-sem-imagem { border: 1.5px dashed rgba(0, 0, 0, 0.25); border-radius: 6px; margin-bottom: 6px; padding: 18px 10px; text-align: center; font-size: 12.5px; color: var(--tinta-apagada); }
.wa-balao p { margin: 0; white-space: pre-line; }
.wa-balao .wa-rodape { margin-top: 6px; font-size: 11.5px; color: #667781; }
.wa-botao { margin-top: 6px; padding: 6px; border-top: 1px solid rgba(0, 0, 0, 0.08); text-align: center; color: #027EB5; font-weight: 600; }

/* D199 — acesso travado na Visão geral do admin */
.acesso-travado { border-color: var(--acento); margin-bottom: 16px; }
.acesso-travado h2 { margin: 0 0 8px; }
.acesso-travado ul { margin: 0; padding-left: 18px; }
.acesso-travado li { margin: 4px 0; }

/* 14/10 — orientação da tela de login da Shopee (inglês, região SG) */
.aviso-shopee-login { display: block; margin-top: 6px; padding: 6px 10px; border-radius: var(--raio-miudo);
    background: #FFF4EC; color: var(--tinta-media); font-size: 13px; line-height: 1.4; }
.aviso-shopee-login strong { color: var(--tinta); }
/* 14/10 — o Mercado Livre pelo celular: a verificação de identidade que vem antes de autorizar. */
.passos-celular { margin: 12px 0 16px; padding-left: 20px; font-size: 14.5px; line-height: 1.5; color: var(--tinta-media); }
.passos-celular li { margin: 6px 0; }
.passos-celular strong { color: var(--tinta); }
.acoes-modal a.confirmar-sim { text-decoration: none; text-align: center; }

/* D203 (14/10) — "Acontecendo agora", topo da Visão geral do admin. */
.agora { margin-bottom: 18px; }
.agora-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.agora-topo h2 { margin: 0; }
.agora-novos { font-family: var(--fonte-marca); font-size: 12px; background: var(--acento); color: #FFFFFF; border-radius: 999px; padding: 3px 10px; }
.agora-abas { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 14px; }
.agora-abas a { font-size: 12.5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--borda); color: var(--tinta-media); text-decoration: none; }
.agora-abas a.ativo { background: #1A1A1A; border-color: #1A1A1A; color: #FFFFFF; }
.agora-abas a b { font-weight: 700; margin-left: 3px; }
.agora-abas a.acao b { color: #D6293E; }
.agora-abas a.ativo b { color: #FFFFFF; }
.agora-sec { font-family: var(--fonte-marca); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-apagada); margin: 16px 0 8px; }
.agora .ev { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: start; padding: 11px 12px; border-top: 1px solid #ECECE7; }
.agora .ev:first-child { border-top: 0; }
.agora .ev .h { font-family: var(--fonte-marca); font-size: 12px; color: var(--tinta-apagada); padding-top: 2px; }
.agora .ev .t { font-size: 14px; line-height: 1.5; }
.agora .ev .t b { font-weight: 600; }
.agora .ev .t .selo { margin: 0 0 0 4px; }
.agora .ev .d { font-size: 12.5px; color: var(--tinta-media); margin-top: 3px; line-height: 1.45; }
.agora .ev .lk { font-size: 12.5px; white-space: nowrap; padding-top: 2px; }
.agora .ev .lk a { color: var(--tinta); }
.agora .ev.novo .h::before { content: "●"; color: var(--acento); margin-right: 4px; font-size: 9px; vertical-align: 2px; }
.agora .lista-acao { border: 1px solid #F5C2C0; border-radius: 10px; background: #FFFAFA; }
.agora .lista-acao .ev { border-top-color: #F6DCDB; }
.agora .lista-acao .ev .t b.sinal { color: #B42318; }
.agora .lista-tempo { border: 1px solid #ECECE7; border-radius: 10px; }
.agora .tag { display: inline-block; font-family: var(--fonte-marca); font-size: 10.5px; letter-spacing: .04em; padding: 1px 7px; border-radius: 4px; margin-right: 6px; vertical-align: 1px; }
.agora .tag.cad { background: #EEF3FB; color: #2B4C8C; }
.agora .tag.loja, .agora .tag.pag { background: #EAF6EE; color: #2E7A48; }
.agora .tag.voltou { background: #FFF4EC; color: #B4541F; }
.agora .tag.alerta { background: #FDECEC; color: #B42318; }
.vazio-agora { font-size: 13px; color: var(--tinta-apagada); padding: 10px 12px; margin: 0; }
@media (max-width: 640px) {
    .agora .ev { grid-template-columns: 52px 1fr; }
    .agora .ev .lk { grid-column: 2; }
}

/* 14/10 — ao voltar com "Vou fazer no computador", o quadro não fica escondido atrás da barra do topo. */
#aviso-computador, #aviso-celular { scroll-margin-top: 96px; }

/* D205 (15/10) — "onde você vende hoje?" no cadastro: selos dos canais que viram caixas de marcar. */
.canais-cadastro { border: 0; padding: 0; margin: 0 0 14px; }
.canais-cadastro legend { display: block; font-size: 12.5px; color: var(--tinta-fraca); margin-bottom: 8px; padding: 0; }
.canais-cadastro .opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.canais-cadastro .opcao { position: relative; margin: 0; cursor: pointer; }
.canais-cadastro .opcao input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.canais-cadastro .opcao .selo { margin: 0; padding: 9px 14px; font-size: 13px; border-radius: 999px; border: 1.5px solid var(--borda-forte);
    background: var(--fundo); color: var(--tinta-media); opacity: .75; transition: opacity .12s, box-shadow .12s; }
.canais-cadastro .opcao .selo i { display: none; }
.canais-cadastro .opcao input:checked + .selo { opacity: 1; box-shadow: 0 0 0 2px var(--tinta); }
.canais-cadastro .opcao input:checked + .selo-meli { background: var(--meli); color: var(--meli-tinta); border-color: var(--meli); }
.canais-cadastro .opcao input:checked + .selo-shopee { background: var(--shopee); color: var(--shopee-tinta); border-color: var(--shopee); }
.canais-cadastro .opcao input:checked + .selo-tiktok { background: #000000; color: #FFFFFF; border-color: #000000; }
.canais-cadastro .opcao input:checked + .selo-amazon { background: #333E48; color: var(--amazon); border-color: #333E48; }
.canais-cadastro .opcao input:checked + .selo-nenhum { background: var(--tinta); color: #FFFFFF; border-color: var(--tinta); }
.canais-cadastro .opcao input:focus-visible + .selo { box-shadow: 0 0 0 3px var(--acento); }
/* D218 (16/10) — quantas vendas por mês: mesmas pílulas, cor neutra; e os canais travados depois da resposta. */
.canais-cadastro .opcao input:checked + .selo-porte { background: var(--tinta); color: #FFFFFF; border-color: var(--tinta); }
.porte-cadastro .porte-trava { margin-top: 8px; }
.porte-cadastro .porte-trava a { color: var(--acento); font-weight: 600; text-decoration: none; }
.canais-cadastro.travado .opcao { pointer-events: none; cursor: default; }
.canais-cadastro.travado .opcao input:not(:checked) + .selo { opacity: .35; }
.canais-cadastro.travado .opcao input:checked + .selo { box-shadow: none; }
.canais-cadastro.travado legend::after { content: " · fixo"; color: var(--tinta-fraca); }

/* D205/D207 (15/10) — Canais sem loja: a prova de valor; e a tag de quem ainda não vende, no admin. */
/* D205 (15/10) — as 4 perguntas na tela travada: a dúvida antes da prova */
.quatro-perguntas { list-style: none; counter-reset: pergunta; margin: 6px 0 14px; padding: 0; display: grid; gap: 8px; }
.quatro-perguntas li { counter-increment: pergunta; display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
    background: var(--fundo); border: 1px solid var(--borda); border-radius: var(--raio);
    font-size: 16px; line-height: 1.4; font-weight: 500; color: var(--tinta); }
.quatro-perguntas li::before { content: counter(pergunta); flex: 0 0 28px; height: 28px; border-radius: var(--raio-miudo); display: grid;
    place-items: center; font-family: "DM Mono", ui-monospace, monospace; font-size: 13px; font-weight: 700;
    color: var(--acento); border: 1.5px solid var(--acento); }
/* D210 — sei / não sei, obrigatórios; sem JavaScript */
.quatro-perguntas li { flex-wrap: wrap; }
.quatro-perguntas .pergunta-texto { flex: 1 1 0; min-width: 0; }   /* ao lado do número, sempre */
.quatro-perguntas .pergunta-opcoes { display: flex; gap: 6px; flex: 0 0 auto; margin-left: auto; }
.opcao-sei input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcao-sei span { display: inline-block; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--borda-forte);
    background: var(--superficie); color: var(--tinta-media); font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; }
.opcao-sei input:focus-visible + span { outline: 2px solid var(--acento); outline-offset: 2px; }
.opcao-sei input:checked + span { background: var(--tinta); color: var(--superficie); border-color: var(--tinta); }
.opcao-sei input[value="nao_sei"]:checked + span { background: var(--acento); border-color: var(--acento); color: #FFFFFF; }
.form-perguntas .botao { margin-top: 4px; }
.quatro-perguntas.respondidas li.nao-sei { border-color: var(--acento); }
.quatro-perguntas .pergunta-marca { margin-left: auto; font-family: "DM Mono", ui-monospace, monospace; font-size: 12px;
    letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-media); }
.quatro-perguntas li.nao-sei .pergunta-marca { color: var(--acento); font-weight: 700; }
.perguntas-antes { border-style: dashed; }
@media (max-width: 480px) {
  .quatro-perguntas .pergunta-opcoes { width: 100%; margin-left: 40px; }
  .opcao-sei span { flex: 1; text-align: center; }
  .opcao-sei { flex: 1; }
}
/* D211 — Admin › ChatGPT Ads */
.gpt-cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.gpt-cartao { padding: 12px 14px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--fundo); }
.gpt-cartao.destaque { border-color: var(--acento); background: var(--superficie); }
.gpt-nome { font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-media); }
.gpt-verba { font-family: "DM Mono", ui-monospace, monospace; font-size: 22px; font-weight: 700; margin: 4px 0 2px; color: var(--tinta); }
.gpt-custo { margin-top: 6px; font-size: 13px; color: var(--acento); font-weight: 600; }
.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gpt-dias tr.hoje td { background: var(--fundo); }
.gpt-horas { white-space: nowrap; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.gpt-dias td, .gpt-dias th { white-space: nowrap; }
/* D214 — sem a busca (tela travada), o menu da conta continua no canto direito */
.barra-topo .conta-topo { margin-left: auto; }
/* D209 — o áudio da Marianne no cartão do canal */
.audio-conexao { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-width: 360px; }
.audio-conexao audio { width: 100%; height: 34px; }
/* D220 (16/10) — o vídeo da conexão no lugar do áudio: 16:9 no computador, 9:16 no celular; botão de som como na página inicial. */
.video-conexao { position: relative; margin-top: 12px; max-width: 520px; }
.video-conexao video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0F0F0F; border-radius: 14px; }
.video-conexao .som-conexao { position: absolute; right: 12px; top: 12px; width: auto; height: 36px; margin: 0; padding: 0 14px;
    border-radius: 999px; border: 0; background: rgba(0, 0, 0, 0.6); color: #FFFFFF; font-size: 15px; line-height: 36px; cursor: pointer; }
.video-conexao .som-conexao:hover { background: rgba(0, 0, 0, 0.8); }
.video-conexao .som-conexao span { font-size: 12px; margin-left: 4px; }
.video-conexao > .miudo { display: block; margin-top: 6px; }
@media (max-width: 700px) {
  /* o selo fica em cima e o vídeo vertical ocupa a largura inteira do cartão */
  .canal-nome:has(.video-conexao) { flex-wrap: wrap; }
  .canal-nome:has(.video-conexao) > div { flex-basis: 100%; }
  .video-conexao { max-width: 100%; }
  .video-conexao video { aspect-ratio: 9 / 16; max-height: 72vh; }
}
/* D269 (27/10) — a tela de quem ainda não conectou: o vídeo da Marianne primeiro, sem controles; os selos dos
 * canais aparecem quando ele termina; cada selo abre só o cartão daquele canal (:target). */
.conecte-agora { padding: 22px; }
.video-marianne { position: relative; max-width: 640px; margin: 0 auto; }
.video-marianne video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #0F0F0F; border-radius: 14px; }
.video-marianne .tocar-marianne { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; height: 52px;
    margin: 0; padding: 0 22px; border-radius: 999px; border: 0; background: var(--acento); color: #FFFFFF; font-size: 16px; font-weight: 700;
    white-space: nowrap; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); cursor: pointer; }
.video-marianne .tocar-marianne:hover { background: #E04E18; }
/* D273 — o vídeo já corre mudo; o botão do som é o único convite: pulsa de leve até o toque. */
.video-marianne .tocar-marianne { animation: pulso-som 1.8s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(255, 90, 31, 0.55); }
@keyframes pulso-som { 0% { box-shadow: 0 0 0 0 rgba(255, 90, 31, 0.55); } 70% { box-shadow: 0 0 0 14px rgba(255, 90, 31, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 90, 31, 0); } }
@media (prefers-reduced-motion: reduce) { .video-marianne .tocar-marianne { animation: none; } }
.video-marianne .tocar-marianne span { margin-left: 6px; }
.video-marianne .mudo-marianne { position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; margin: 0; padding: 0; border-radius: 999px;
    border: 0; background: rgba(0, 0, 0, 0.6); color: #FFFFFF; font-size: 15px; line-height: 36px; cursor: pointer; }
.video-marianne .mudo-marianne:hover { background: rgba(0, 0, 0, 0.8); }
.video-marianne > .miudo { display: block; margin-top: 6px; text-align: center; }
.conecte-selos { margin-top: 20px; text-align: center; }
.bloco h2.conecte-titulo { font-size: 21px; line-height: 1.25; text-transform: none; letter-spacing: -0.01em; color: var(--tinta); font-weight: 700; margin: 0 0 4px; }
.conecte-selos .explicacao { margin: 0 auto; max-width: 46ch; }
.selos-canais { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.selos-canais .selo-botao { text-decoration: none; }
.selos-canais .selo { margin: 0; font-size: 15px; padding: 11px 18px; border-radius: 10px; cursor: pointer; transition: transform .1s, box-shadow .1s; }
.selos-canais .selo-botao:hover .selo { transform: translateY(-1px); box-shadow: 0 0 0 2px var(--tinta); }
.canal-escolha { display: none; }
.canal-escolha:target { display: block; }
@media (max-width: 700px) {
  .conecte-agora { padding: 16px; }
  .video-marianne video { aspect-ratio: 9 / 16; max-height: 72vh; }
  .selos-canais .selo { font-size: 14px; padding: 10px 14px; }
}
/* D205/D210 — as enquetes na Jornada da conta */
.enquete-linha { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 6px 0; }
.enquete-rotulo { font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--tinta-media); flex: 0 0 100%; }
@media (min-width: 640px) { .enquete-rotulo { flex: 0 0 220px; } }
.enquete-perguntas { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.enquete-perguntas li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--borda);
    border-radius: var(--raio-miudo); font-size: 14px; }
.enquete-perguntas li b { font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--tinta-media); white-space: nowrap; }
.enquete-perguntas li.nao-sei { border-color: var(--acento); }
.enquete-perguntas li.nao-sei b { color: var(--acento); }
/* D212 — Admin › Contas: cards (atalhos de filtro) + filtros combináveis */
.cards-contas { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; margin: 0 0 14px; }
.card-conta { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border: 1px solid var(--borda); border-radius: var(--raio);
    background: var(--superficie); text-decoration: none; color: var(--tinta); }
.card-conta b { font-family: "DM Mono", ui-monospace, monospace; font-size: 22px; font-weight: 700; line-height: 1.1; }
.card-conta span { font-size: 12px; color: var(--tinta-media); }
.card-conta:hover { border-color: var(--borda-forte); }
.card-conta.ativo { border-color: var(--acento); background: var(--fundo); }
.filtros-contas { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin: 0 0 14px; }
.filtros-contas .campo { display: flex; flex-direction: column; gap: 4px; min-width: 120px; }
.filtros-contas .campo.cresce { flex: 1 1 220px; }
.filtros-contas label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-media); }
.filtros-contas select, .filtros-contas input { height: 36px; }
.limpar-filtros { margin-left: 8px; }
.fluxo-extras { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0 8px; font-size: 13px; color: var(--tinta-media); }
.fluxo-extras b { font-family: "DM Mono", ui-monospace, monospace; color: var(--tinta); }
.previas-botoes { display: flex; flex-wrap: wrap; gap: 8px; }
.fluxo-cartao .fluxo-chave { display: inline-block; margin: 0 8px 8px 0; vertical-align: top; }
/* o menu do admin ganhou um 5º item (D211): no celular rola de lado em vez de cortar */
.barra-admin nav { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.barra-admin nav::-webkit-scrollbar { display: none; }
.chip-origem.nao-vende { background: #FDECEC; color: #B42318; }
/* D224/D225 (16/10) — a pesquisa na entrada (NPS de 0 a 10 + duas perguntas) e o agradecimento com o link de indicação. */
.porta-pesquisa { max-width: 560px; }
.pesquisa h1 { font-size: 22px; line-height: 1.2; margin: 6px 0 10px; letter-spacing: -.01em; }
.legenda-pesquisa { font-family: var(--fonte-marca); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-fraca); }
.nps { border: 0; padding: 0; margin: 14px 0 18px; }
.nps legend { display: block; font-size: 14px; font-weight: 600; color: var(--tinta); margin-bottom: 10px; padding: 0; line-height: 1.4; }
.nps-escala { display: grid; grid-template-columns: repeat(11, 1fr); gap: 5px; }
.nps-nota { position: relative; margin: 0; cursor: pointer; }
.nps-nota input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.nps-nota span { display: grid; place-items: center; height: 40px; border-radius: var(--raio-miudo); border: 1.5px solid var(--borda-forte);
    background: var(--fundo); font-family: var(--fonte-marca); font-weight: 700; font-size: 14px; color: var(--tinta-media); transition: all .12s; }
.nps-nota input:checked + span { background: var(--tinta); color: #FFFFFF; border-color: var(--tinta); }
.nps-nota input:focus-visible + span { box-shadow: 0 0 0 3px var(--acento); }
.nps-nota:nth-child(n+10) input:checked + span { background: var(--acento); border-color: var(--acento); }
.nps-pontas { display: flex; justify-content: space-between; font-size: 11px; color: var(--tinta-fraca); margin-top: 6px; }
.pesquisa label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 6px; line-height: 1.4; }
.pesquisa textarea { width: 100%; box-sizing: border-box; border: 1.5px solid var(--borda-forte); border-radius: var(--raio); padding: 10px 12px;
    font: inherit; font-size: 14px; resize: vertical; min-height: 72px; background: var(--fundo); }
.pesquisa textarea:focus { outline: 0; border-color: var(--acento); box-shadow: 0 0 0 3px #FFE3D6; }
.pesquisa .botao { margin-top: 16px; }
.link-indicacao { display: flex; gap: 8px; margin: 10px 0 8px; }
.link-indicacao input { flex: 1; min-width: 0; border: 1.5px solid var(--borda-forte); border-radius: var(--raio); padding: 10px 12px; font-family: var(--fonte-marca); font-size: 13px; background: var(--fundo); }
.link-indicacao .botao { margin: 0; width: auto; }
.pesquisa-whatsapp { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borda); display: grid; gap: 8px; }
.pesquisa-whatsapp .botao { margin: 0; }
.botao-linha { background: transparent; color: var(--tinta); border: 1.5px solid var(--borda-forte); text-align: center; }
@media (max-width: 480px) { .nps-escala { gap: 3px; } .nps-nota span { height: 36px; font-size: 13px; } }
/* D224 — a pesquisa na Jornada do admin */
.nps-nota-admin { font-family: var(--fonte-marca); font-size: 16px; }
.nps-nota-admin.promotor { color: #2E7A48; } .nps-nota-admin.neutro { color: #9A3A12; } .nps-nota-admin.detrator { color: #B42318; }
.pesquisa-respostas { margin: 8px 0 12px; display: grid; gap: 6px; }
.pesquisa-respostas dt { font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinta-fraca); }
.pesquisa-respostas dd { margin: 0 0 4px; font-size: 14px; white-space: pre-wrap; }
.botao-linha-admin { font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: var(--raio-miudo); border: 1.5px solid var(--borda-forte); background: var(--fundo); cursor: pointer; width: auto; }
/* D223 (16/10) — a trilha da implantação na lista de contas: um passo por pílula, estado pela cor. */
.trilha { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.trilha span { font-family: "DM Mono", ui-monospace, monospace; font-size: 10.5px; line-height: 1; padding: 4px 8px; border-radius: 999px;
    border: 1px solid var(--borda); color: var(--tinta-fraca); background: var(--fundo); white-space: nowrap; }
.trilha .ok { background: #EAF6EE; color: #2E7A48; border-color: transparent; }
.trilha .parcial { background: #FFF1EA; color: #9A3A12; border-color: transparent; }
.trilha .neutro { color: var(--tinta-media); border-style: dashed; }
.acesso-conta { white-space: nowrap; }
.acesso-conta .miudo { display: block; }

/* D226 (16/10) — o mapa dos caminhos e das mensagens: o que sai sozinho (verde), o que sai à mão (azul),
   o automático desligado (vermelho) e o planejado (tracejado). Mesmas cores dos selos do fluxo. */
.sit-plan { background: transparent; color: var(--tinta-fraca); border: 1px dashed var(--borda-forte); }
.fluxo-resumo { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 12px; font-size: 13px; color: var(--tinta-media); }
.fluxo-resumo b { font-family: var(--fonte-marca); font-size: 15px; color: var(--tinta); margin-right: 2px; }
.mapa-bloco h2 { margin-bottom: 2px; }
.mapa-rolagem { overflow-x: auto; margin-top: 4px; }
.mapa-svg { display: block; width: 100%; min-width: 760px; height: auto; }
.mapa-aresta { fill: none; stroke: var(--tinta-apagada); stroke-width: 1.5; }
.mapa-aresta.tracejada { stroke-dasharray: 5 5; }
.mapa-seta { fill: var(--tinta-apagada); }
.mapa-rotulo { font-size: 12px; fill: var(--tinta-fraca); }
.mapa-aresta.apagada, .mapa-rotulo.apagada { opacity: .25; }
.mapa-caixa { fill: var(--superficie); stroke: var(--borda-forte); stroke-width: 1.2; }
.mapa-no a { cursor: pointer; }
.mapa-no a:hover .mapa-caixa { stroke-width: 2.4; }
.mapa-titulo { font-size: 15px; font-weight: 600; fill: var(--tinta); }
.mapa-sub { font-size: 12px; fill: var(--tinta-fraca); }
.mapa-selo { font-family: var(--fonte-marca); font-size: 10px; letter-spacing: .08em; fill: var(--tinta-fraca); }
.mapa-no.modo-auto .mapa-caixa { fill: #EAF6EE; stroke: #2E7A48; }
.mapa-no.modo-auto .mapa-selo { fill: #2E7A48; }
.mapa-no.modo-manual .mapa-caixa { fill: #EEF3FB; stroke: #2B4C8C; }
.mapa-no.modo-manual .mapa-selo { fill: #2B4C8C; }
.mapa-no.modo-desligado .mapa-caixa { fill: #FDECEA; stroke: var(--vermelho); }
.mapa-no.modo-desligado .mapa-selo { fill: var(--vermelho); }
.mapa-no.modo-plano .mapa-caixa { fill: var(--fundo); stroke: var(--tinta-fraca); stroke-dasharray: 5 4; }
.mapa-no.modo-misto .mapa-caixa { stroke: var(--tinta); }
.mapa-no.modo-nenhuma .mapa-caixa { stroke-dasharray: 2 3; }
.mapa-ponto { stroke-width: 1.6; }
.ponto-auto { fill: #2E7A48; stroke: #2E7A48; }
.ponto-manual { fill: #2B4C8C; stroke: #2B4C8C; }
.ponto-desligado { fill: var(--superficie); stroke: var(--vermelho); }
.ponto-plano { fill: transparent; stroke: var(--tinta-fraca); stroke-dasharray: 2 2; }
.mapa-no.estado-fora { opacity: .35; }
.mapa-no.estado-visitado .mapa-caixa { fill: #F1F0EA; stroke: var(--tinta-media); }
.mapa-no.estado-aqui .mapa-caixa { fill: #FFF3EC; stroke: var(--acento); stroke-width: 3; }
.mapa-no.estado-aqui .mapa-selo { fill: var(--acento); }
.mapa-conta { margin-bottom: 16px; }
.mapa-conta summary { cursor: pointer; font-size: 14.5px; }
.mapa-conta summary b { font-weight: 600; }
.fluxo-cartao.cartao-auto { border-left: 3px solid #2E7A48; }
.fluxo-cartao.cartao-manual { border-left: 3px solid #2B4C8C; }
.fluxo-cartao.cartao-desligado { border-left: 3px solid var(--vermelho); }
.fluxo-cartao.cartao-plano { border-left: 3px dashed var(--tinta-fraca); background: var(--fundo); }
.fluxo-cartao:target { outline: 2px solid var(--acento); outline-offset: 2px; }

/* D227 (17/10) — "Como acessam": os mesmos cartões da lista de contas, sem link. */
.acessos-aparelho { margin-bottom: 14px; }
.acessos-aparelho h2 { margin: 0 0 8px; }
.acessos-aparelho .cards-contas { margin-bottom: 8px; }

/* D230 — o primeiro valor de um custo vale desde a primeira venda importada */
.vigente.vazio .vigencia-primeira { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--tinta-apagada); }

/* D232 — a tela de pagamento diz o que o Kalko já leu da loja conectada */
.aviso.aviso-loja-lida { border-left: 3px solid var(--acento); }

/* D246 — tela Estoque Full. D259 — a tabela do Full NÃO é a de Vendas: desfaz as colunas fixas (sticky à esquerda)
   e as larguras herdadas de .grade-vendas. D276 (28/10; Daniel: "poder ter filtro, poder ordenar, as linhas todas nas
   mesmas cores ficam difícil leitura, apertar um pouco mais talvez caiba tudo na tela sem arrastar, o cabeçalho não
   congela") — largura fixa por coluna e o produto fica com o resto: nada rola de lado; letra e espaços menores;
   zebrado + fio da cor na borda esquerda; o bloco rola por dentro e o cabeçalho gruda (reaproveita .rola-vertical/D136). */
.bloco-full { padding: 0; width: auto; overflow: auto; }
.bloco-full.rola-vertical { max-height: calc(100vh - 230px); }
.grade-full { width: 100%; min-width: 0; table-layout: fixed; font-size: 12px; }
.grade-full th:nth-child(1), .grade-full td:nth-child(1), .grade-full th:nth-child(2), .grade-full td:nth-child(2),
.grade-full th:nth-child(3), .grade-full td:nth-child(3) { position: static; left: auto; width: auto; min-width: 0; max-width: none; box-shadow: none; background: transparent; }
.grade-full th { padding: 7px 8px; font-size: 9.5px; }
.grade-full td { padding: 4px 8px; line-height: 1.2; }
.grade-full th:nth-child(1), .grade-full td:nth-child(1) { width: 124px; white-space: nowrap; padding-left: 12px; }
/* D278 — com mais de um armazém a coluna Anúncio leva o selo do canal: precisa de mais largura (a foto de 29/10 mostrou
 * "Mercado Livre MLB416…" invadindo a coluna Produto) */
.grade-full.com-canais th:nth-child(1), .grade-full.com-canais td:nth-child(1) { width: 222px; }
.grade-full td:nth-child(2) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grade-full th:nth-child(3), .grade-full td:nth-child(3) { width: 72px; }
.grade-full th:nth-child(4), .grade-full td:nth-child(4),
.grade-full th:nth-child(5), .grade-full td:nth-child(5) { width: 64px; }
.grade-full th:nth-child(6), .grade-full td:nth-child(6) { width: 76px; }
.grade-full th:nth-child(7), .grade-full td:nth-child(7) { width: 104px; }
.grade-full th:nth-child(8), .grade-full td:nth-child(8) { width: 90px; }
.grade-full th.num, .grade-full td.num { white-space: nowrap; }
.grade-full td:last-child { white-space: nowrap; }
.grade-full td.giro-sem { font-family: var(--fonte-marca); font-size: 12px; color: var(--tinta-media); white-space: nowrap; }
.grade-full td.negativo { color: var(--vermelho, #B42318); font-weight: 600; }
/* o cabeçalho gruda no topo do bloco que rola */
.rola-vertical .grade-full thead th { position: sticky; top: 0; z-index: 2; background: var(--superficie); box-shadow: inset 0 -1px var(--linha); }
/* ordenar: o título é clicável; a seta mostra o sentido */
.grade-full th[data-ordena] { cursor: pointer; user-select: none; }
.grade-full th[data-ordena]:hover { color: var(--tinta); }
.grade-full th[data-ordena]::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 5px; vertical-align: middle; border: 4px solid transparent; }
.grade-full th[aria-sort="ascending"]::after { border-bottom-color: currentColor; border-top: 0; }
.grade-full th[aria-sort="descending"]::after { border-top-color: currentColor; border-bottom: 0; }
.grade-full th[aria-sort="ascending"], .grade-full th[aria-sort="descending"] { color: var(--tinta); }
/* zebrado (o JavaScript marca .par só nas linhas visíveis, para o filtro não quebrar a alternância) e o fio da cor */
.grade-full tbody tr.par td { background: #FAFAF7; }
.grade-full tbody tr:hover td { background: #F1F0EA; }
.grade-full tbody tr td:first-child { box-shadow: inset 3px 0 0 var(--linha); }
.grade-full tbody tr.verde td:first-child { box-shadow: inset 3px 0 0 #2E9E5B; }
.grade-full tbody tr.amarelo td:first-child { box-shadow: inset 3px 0 0 #E0A800; }
.grade-full tbody tr.vermelho td:first-child { box-shadow: inset 3px 0 0 var(--vermelho); }
.grade-full tbody tr.zerado td:first-child { box-shadow: inset 3px 0 0 #111111; }
.grade-full tbody tr.cinza td:first-child { box-shadow: inset 3px 0 0 #B8B8B0; }
.grade-full tr.cinza td { color: var(--tinta-fraca); }
.grade-full tr[hidden] { display: none; }
.giro-vazio { padding: 16px 12px; margin: 0; }
/* D259 — giro do Full: a cor de cada anúncio */
.giro-chip { display: inline-block; font-family: var(--fonte-marca); font-size: 10.5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.giro-chip.verde { background: var(--verde-fundo); color: #2E7A48; }
.giro-chip.amarelo { background: #FFF3C4; color: #7A5A00; }
.giro-chip.vermelho { background: var(--vermelho-fundo); color: var(--vermelho); }
.giro-chip.zerado { background: #111111; color: #FFFFFF; }
.giro-chip.cinza { background: #ECECE8; color: #666666; }
.giro-chip.todos { background: var(--superficie); color: var(--tinta); border-color: var(--borda-forte); }
/* D276 — os chips filtram (botões), com a caixa de busca ao lado */
.giro-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; }
.giro-resumo { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.giro-resumo .giro-chip { display: inline-block; width: auto; height: auto; font-size: 12px; font-weight: 500; padding: 6px 12px; margin: 0; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-family: var(--fonte-marca); line-height: 1.2; }
.giro-resumo .giro-chip:hover { filter: brightness(0.96); }
.giro-resumo .giro-chip.verde:hover { background: var(--verde-fundo); }   /* o hover geral de button pinta de laranja; aqui a cor é a da situação */
.giro-resumo .giro-chip.amarelo:hover { background: #FFF3C4; }
.giro-resumo .giro-chip.vermelho:hover { background: var(--vermelho-fundo); }
.giro-resumo .giro-chip.zerado:hover { background: #111111; }
.giro-resumo .giro-chip.cinza:hover { background: #ECECE8; }
.giro-resumo .giro-chip.todos:hover { background: var(--superficie); }
.giro-resumo .giro-chip[aria-pressed="true"] { border-color: var(--tinta); box-shadow: 0 0 0 1px var(--tinta); }
.giro-resumo .giro-chip.zerado[aria-pressed="true"] { border-color: var(--acento); box-shadow: 0 0 0 1px var(--acento); }
/* D278 — um chip por armazém (Mercado Livre, Shopee, Amazon), nas cores dos selos de canal (D137); só aparece
 * quando a loja tem mais de um. E o selo do canal dentro da tabela, menor que o do resto do sistema. */
.giro-canais { margin-top: 2px; }
.giro-resumo .giro-chip.canal-meli { background: var(--meli); color: var(--meli-tinta); }
.giro-resumo .giro-chip.canal-shopee { background: var(--shopee); color: var(--shopee-tinta); }
.giro-resumo .giro-chip.canal-amazon { background: #333E48; color: var(--amazon); }
.giro-resumo .giro-chip.canal-meli:hover, .giro-resumo .giro-chip.canal-shopee:hover, .giro-resumo .giro-chip.canal-amazon:hover { filter: brightness(0.94); }
.grade-full .selo { margin-right: 3px; padding: 0 5px; font-size: 9.5px; line-height: 15px; vertical-align: 1px; }
.giro-busca { flex: 1; min-width: 200px; max-width: 300px; margin-left: auto; }
.giro-busca input[type="search"] {
    width: 100%; height: 32px; margin: 0; padding: 0 12px 0 30px; font-size: 13px;
    border: 1px solid var(--borda-forte); border-radius: var(--raio); background: var(--superficie);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B6B66' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='m20 20-4-4'/></svg>");
    background-repeat: no-repeat; background-position: 9px center;
}
.giro-busca input[type="search"]:focus { border-color: var(--tinta); outline: none; }
.giro-contagem { white-space: nowrap; }
.giro-legenda { margin-top: 12px; }
.giro-legenda summary { cursor: pointer; }
.giro-legenda summary:hover { color: var(--acento); }
.giro-legenda p { margin: 8px 0 0; line-height: 1.5; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tendencia { font-size: 10px; } .tendencia.sobe { color: #2E7A48; } .tendencia.cai { color: var(--vermelho); }
.giro-so-celular { display: none; }
@media (max-width: 640px) {
  .giro-so-celular { display: inline-block; margin-top: 3px; }          /* no celular a cor vai junto do código */
  .grade-full .oculta-celular { display: none; }
  .bloco-full.rola-vertical { max-height: none; }                        /* o JS (D136) ajusta a altura ao que sobra da tela */
  .grade-full th:nth-child(1), .grade-full td:nth-child(1) { width: 30%; white-space: normal; padding-left: 10px; }
  .grade-full th:nth-child(2), .grade-full td:nth-child(2) { width: auto; }
  .grade-full td:nth-child(2) { white-space: normal; padding-right: 8px; overflow-wrap: anywhere; }
  .grade-full td:nth-child(2) .giro-nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }   /* no máximo 2 linhas no celular;
     o corte vai no <span>: `display:-webkit-box` na própria <td> tira a célula da tabela e as colunas se sobrepõem */
  .grade-full th:nth-child(3), .grade-full td:nth-child(3) { width: 15%; }
  .grade-full th:nth-child(7), .grade-full td:nth-child(7) { width: 22%; white-space: normal; }
  .giro-busca { max-width: none; margin-left: 0; }
  .giro-so-largo { display: none; }                                      /* "gira · 7 · 88 un": dois ou três chips por linha */
  .giro-resumo { gap: 6px; }
  .giro-resumo .giro-chip { font-size: 11px; padding: 5px 9px; }
  /* D278 — no celular o selo do canal vira a sigla (ML · Shopee · Amazon) para não ocupar uma linha inteira */
  .grade-full .selo { font-size: 0; padding: 0 4px; }
  .grade-full .selo::after { content: attr(data-curto); font-size: 9px; font-weight: 700; }
  .grade-full.com-canais th:nth-child(1), .grade-full.com-canais td:nth-child(1) { width: 30%; }
}

/* D249 — WhatsApp editável em Conta: a linha tem o mesmo rótulo das vizinhas e o campo cabe o número inteiro. */
.linha-whatsapp { align-items: center; }
.linha-whatsapp .rotulo { font-size: inherit; font-weight: 400; margin: 0; }
.linha-whatsapp .valor { display: flex; gap: 6px; align-items: center; }
.linha-whatsapp .campo-linha { width: 150px; height: 32px; font-size: 13px; }

/* D248 — Admin › ChatGPT: a escada do lance (sobe e desce do CPC máximo). */
.gpt-escada h2 .miudo { font-weight: 400; margin-left: 8px; }
.gpt-escada-topo { display: flex; align-items: center; gap: 24px; margin: 6px 0 12px; }
.gpt-sparkline { display: block; }
.gpt-movimento { display: inline-block; width: 16px; font-family: "DM Mono", ui-monospace, monospace; }
.gpt-movimento.subiu { color: var(--vermelho); }
.gpt-movimento.desceu { color: #2E8B57; }
.gpt-movimento.segurou { color: var(--tinta-apagada); }
.gpt-degraus td { white-space: nowrap; }
.gpt-degraus td:last-child { white-space: normal; max-width: 520px; }


/* D261 — quiz público "/lucro-real": diagnóstico de um toque. Celular primeiro; no computador a coluna fica em 480px.
   Mesma identidade do app (fundo, superfície, acento, DM Sans/DM Mono). Nada aqui é usado pelas telas logadas. */
.lr { max-width: 480px; margin: 0 auto; padding: 18px 20px 48px; min-height: 100vh; }
.lr-topo { display: flex; align-items: center; justify-content: space-between; }
.lr-marca { font-family: var(--fonte-marca); font-weight: 700; font-size: 15px; color: var(--tinta); text-decoration: none; letter-spacing: .02em; }
.lr-marca b { color: var(--acento); font-weight: 700; }
.lr-passo { font-family: var(--fonte-marca); font-size: 11px; letter-spacing: .06em; color: var(--tinta-apagada); }
.lr-prog { height: 3px; background: var(--linha); border-radius: 3px; margin-top: 14px; }
.lr-prog i { display: block; height: 3px; width: 0; background: var(--acento); border-radius: 3px; transition: width .3s; }
.lr-tela { padding-top: 22px; }
.lr h1 { font-size: 27px; line-height: 1.12; letter-spacing: -.02em; font-weight: 800; margin: 0; }
.lr h1 em { font-style: normal; color: var(--acento); }
.lr-apoio { margin: 10px 0 0; font-size: 15px; line-height: 1.45; color: var(--tinta-media); }
.lr-pergunta { margin: 0; font-size: 23px; line-height: 1.18; font-weight: 800; letter-spacing: -.02em; }
.lr-cartao { margin-top: 18px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px; }
.lr-cartao-mini { margin-top: 14px; }
.lr-cartao-t { font-family: var(--fonte-marca); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-apagada); }
.lr-lista { list-style: none; margin: 4px 0 0; padding: 0; }
.lr-lista li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: 14.5px; }
.lr-lista li:last-child { border-bottom: 0; }
.lr-tag { font-family: var(--fonte-marca); font-size: 11px; letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; font-weight: 500; }
.lr-tag.esp { background: var(--linha); color: var(--tinta-apagada); }
.lr-tag.nao { background: var(--vermelho-fundo); color: var(--vermelho); }
.lr-tag.sim { background: #E6F4EA; color: #2E7A48; }
.lr-botao { display: block; width: 100%; margin-top: 18px; background: var(--tinta); color: #fff; text-align: center; font: inherit; font-weight: 700; font-size: 16px; padding: 15px; border: 0; border-radius: 10px; cursor: pointer; text-decoration: none; box-sizing: border-box; }
.lr-botao-acento { background: var(--acento); }
.lr-botao:focus-visible { outline: 3px solid rgba(255, 90, 31, .35); outline-offset: 2px; }
.lr-voltar { display: block; margin: 14px auto 0; background: none; border: 0; font: inherit; font-size: 13.5px; color: var(--tinta-apagada); cursor: pointer; text-decoration: underline; }
.lr-miudo { margin: 12px 0 0; font-size: 12.5px; color: var(--tinta-apagada); line-height: 1.45; text-align: center; }
.lr-opcoes { margin-top: 16px; display: grid; gap: 9px; }
.lr-op { display: flex; justify-content: space-between; align-items: center; width: 100%; background: var(--superficie); border: 1.5px solid var(--linha); border-radius: 12px; padding: 14px 16px; font: inherit; font-size: 15.5px; color: var(--tinta); text-align: left; cursor: pointer; box-sizing: border-box; }
.lr-op i { font-style: normal; opacity: 0; }
.lr-op.marcada { border-color: var(--tinta); background: var(--tinta); color: #fff; }
.lr-op.marcada i { opacity: 1; }
.lr-op:focus-visible { outline: 3px solid rgba(17, 17, 17, .2); outline-offset: 2px; }
.lr-faz { margin-top: 14px; background: #FFF6F1; border-left: 3px solid var(--acento); border-radius: 0 10px 10px 0; padding: 11px 13px; font-size: 14px; line-height: 1.45; }
.lr-faz b { color: var(--acento); }
.lr-acoes { margin-top: 4px; }
.lr-video { position: relative; margin-top: 16px; border-radius: 16px; overflow: hidden; background: #000; aspect-ratio: 9 / 13; max-height: 62vh; }
.lr-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lr-som { position: absolute; left: 12px; bottom: 12px; background: rgba(0, 0, 0, .65); color: #fff; border: 0; border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.lr-check { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 12px; }
.lr-check li { display: flex; align-items: center; gap: 12px; font-size: 15.5px; }
.lr-check em { font-style: normal; }
.lr-c { width: 24px; height: 24px; border-radius: 50%; background: #2E7A48; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 24px; }
.lr-c.esp { background: var(--linha); color: var(--tinta-apagada); }
.lr-grande { margin-top: 16px; background: var(--tinta); color: #fff; border-radius: 14px; padding: 16px 18px; }
.lr-grande .k { font-family: var(--fonte-marca); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #BBB; }
.lr-grande .v { font-size: 34px; font-weight: 800; margin-top: 4px; letter-spacing: -.02em; }
.lr-grande .v small { font-size: 16px; font-weight: 500; color: #CCC; margin-left: 8px; }
.lr-grande .d { font-size: 13px; color: #CCC; margin-top: 4px; }
.lr-mapa { margin-top: 16px; }
.lr-mapa .lr-cartao-t { margin-bottom: 8px; }
.lr-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.lr-par .voce, .lr-par .kalko { border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.4; }
.lr-par .voce { background: var(--superficie); border: 1px solid var(--linha); color: var(--tinta-media); }
.lr-par .kalko { background: #E6F4EA; color: #1F5A33; }
.lr-par .kalko b { color: #2E7A48; }
.lr-par.nao .voce { border-color: #F3C9C0; }
.lr-oferta { margin-top: 18px; background: var(--superficie); border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px; }
.lr-oferta p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.45; }
.lr-oferta .lr-botao { margin-top: 6px; }
@media (min-width: 761px) {
  .lr { padding-top: 36px; }
  .lr h1 { font-size: 30px; }
}
/* o quiz usa o atributo hidden para trocar de tela; as classes acima definem display, então o hidden precisa vencer.
   E o `button:hover` global (laranja) não vale aqui: opção, "voltar" e "continuar" têm o próprio hover. */
.lr [hidden] { display: none !important; }
.lr-op:hover { background: var(--superficie); border-color: var(--tinta-apagada); color: var(--tinta); }
.lr-op.marcada:hover { background: var(--tinta); border-color: var(--tinta); color: #fff; }
.lr-voltar:hover, .lr-refazer:hover { background: none; color: var(--tinta); }
.lr-botao:hover { background: #000; color: #fff; }
.lr-botao-acento:hover { background: #E64E15; }
.lr-som:hover { background: rgba(0, 0, 0, .8); }

/* D265 — teste de elasticidade de preço (Vendas › Teste de elasticidade). */
.abas-area > span.aba-travada { display: inline-flex; align-items: center; gap: 7px; height: 36px; line-height: 34px; padding: 0 13px 0 15px;
    font-size: 13.5px; border: 1px dashed var(--borda); border-radius: var(--raio); color: var(--tinta-apagada); background: var(--fundo);
    cursor: help; white-space: nowrap; }
.abas-area > span.aba-travada i { font-style: normal; font-size: 14px; }
.abas-area > span.aba-travada .aba-ajuda { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px;
    border-radius: 50%; background: var(--borda); color: var(--tinta-media); font-size: 11px; font-weight: 700; line-height: 1; }
.abas-area > span.aba-travada:focus { outline: 2px solid var(--acento); outline-offset: 2px; }
.aba-dica { display: none; margin: -8px 0 16px; padding: 12px 14px; border-radius: var(--raio); background: var(--superficie);
    border: 1px solid var(--borda); box-shadow: var(--sombra); font-size: 13px; line-height: 1.5; color: var(--tinta-media); max-width: 640px; }
.aba-dica strong { color: var(--tinta); }
.abas-area:has(.aba-travada:hover) + .aba-dica, .abas-area:has(.aba-travada:focus) + .aba-dica { display: block; }
.el-regra p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--tinta-media); max-width: 760px; }
.el-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.el-checklist li.feito { color: var(--verde); }
.el-checklist li.falta { color: var(--vermelho); }
.el-checklist a { color: var(--acento); font-weight: 600; }
.el-teste { margin-bottom: 18px; scroll-margin-top: 80px; }
.el-teste-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.el-titulo { font-size: 17px; font-weight: 700; margin: 2px 0 4px; }
.el-chip { font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.el-chip-espera { background: #FFF3C4; color: #7A5A00; }
.el-chip-decidir { background: var(--acento); color: #FFFFFF; }
.el-aviso-neutro { background: var(--fundo); color: var(--tinta-media); border: 1px solid var(--borda); }
.el-ciclo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.el-fase { border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; background: var(--superficie); }
.el-fase-t { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-apagada); font-weight: 600; }
.el-fase-n { font-size: 15px; font-weight: 700; margin-top: 4px; }
.el-fase-s { font-size: 12.5px; color: var(--tinta-media); margin-top: 2px; }
.el-fase.el-completo { border-color: #BFE0CA; } .el-fase.el-completo .el-fase-t { color: var(--verde); }
.el-fase.el-andamento { border: 2px solid var(--acento); } .el-fase.el-andamento .el-fase-t { color: var(--acento); }
.el-fase.el-aberto:not(.el-base) { background: transparent; border-style: dashed; } .el-fase.el-aberto .el-fase-n { color: var(--tinta-apagada); }
.el-barra { display: block; width: 100%; height: 6px; margin-top: 8px; border: 0; border-radius: 3px; background: var(--linha); overflow: hidden; -webkit-appearance: none; appearance: none; }
.el-barra::-webkit-progress-bar { background: var(--linha); border-radius: 3px; }
.el-barra::-webkit-progress-value { background: var(--verde); border-radius: 3px; }
.el-barra::-moz-progress-bar { background: var(--verde); border-radius: 3px; }
.el-andamento .el-barra::-webkit-progress-value { background: var(--acento); }
.el-andamento .el-barra::-moz-progress-bar { background: var(--acento); }
.el-cartoes { margin: 0 0 14px; }
.el-cartoes .nota { font-size: 12px; }
.el-sobe { color: var(--verde); font-weight: 600; } .el-cai { color: var(--vermelho); font-weight: 600; }
.el-rola { overflow-x: auto; margin: 0 0 12px; }
.el-grade { width: 100%; border-collapse: collapse; font-size: 13px; }
.el-grade th { text-align: left; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-apagada); font-weight: 600;
    padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.el-grade td { padding: 8px 10px; border-bottom: 1px solid var(--linha); }
.el-grade th.num, .el-grade td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.el-grade tr:last-child td { border-bottom: 0; }
.el-grade .el-agora { color: var(--acento); }
.el-grade tr.el-forte td { font-weight: 700; }
.el-frase { font-size: 14px; line-height: 1.5; margin: 4px 0 12px; }
.el-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0 10px; }
.el-acoes form { margin: 0; }
.el-acoes button.el-quieto, .el-acoes .el-quieto { background: transparent; color: var(--tinta-media); border: 1px solid var(--borda); }
.el-acoes button.el-quieto:hover { background: transparent; color: var(--tinta); border-color: var(--tinta); }
.el-diario summary { cursor: pointer; font-size: 12.5px; color: var(--tinta-fraca); }
.el-diario ul { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--tinta-media); }
.el-novo { scroll-margin-top: 80px; margin-bottom: 18px; }
.el-novo p { font-size: 14px; color: var(--tinta-media); margin: 0 0 12px; }
.el-candidatos td label { font-weight: 600; cursor: pointer; }
.el-preco { display: flex; align-items: center; gap: 10px; margin: 12px 0; flex-wrap: wrap; }
.el-preco label { font-weight: 600; font-size: 14px; }
.el-preco input { width: 120px; height: 38px; padding: 0 10px; border: 1px solid var(--borda); border-radius: var(--raio); font: inherit; font-size: 15px; }
.el-previa { border-top: 1px solid var(--linha); padding-top: 14px; margin-top: 6px; }
.el-iniciar fieldset { border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 14px; margin: 0 0 12px; }
.el-iniciar legend { font-size: 12px; font-weight: 600; color: var(--tinta-fraca); padding: 0 4px; }
.el-iniciar label { display: block; font-size: 13.5px; margin: 6px 0; line-height: 1.4; }
.el-encerrados { margin: 0; padding-left: 18px; font-size: 13px; color: var(--tinta-media); line-height: 1.7; }
@media (max-width: 640px) {
    .el-teste-topo { flex-direction: column; }
    .el-ciclo { grid-template-columns: 1fr 1fr; }
    .el-cartoes { grid-template-columns: 1fr 1fr; }
    .el-grade { font-size: 12px; } .el-grade th, .el-grade td { padding: 7px 6px; }
}
.el-preco button, .el-iniciar button, .el-acoes button { width: auto; padding: 0 18px; }

/* ------------------------------------------------ D267 — Fechar o mês (três passos, revisão do extrato) */
.fm-passos { list-style: none; margin: 0 0 16px; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; counter-reset: none; }
.fm-passos li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 8px; border: 1px solid var(--borda);
    border-radius: 999px; background: var(--superficie); font-size: 13px; font-weight: 600; color: var(--tinta-apagada); }
.fm-passos li span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
    background: var(--linha); color: var(--tinta-fraca); font-size: 12px; font-family: var(--fonte-marca); }
.fm-passos li.feito { color: var(--verde); border-color: #BFE0CA; }
.fm-passos li.feito span { background: var(--verde); color: #FFFFFF; }
.fm-passos li.atual { color: var(--tinta); border: 2px solid var(--acento); padding: 6px 13px 6px 7px; }
.fm-passos li.atual span { background: var(--acento); color: #FFFFFF; }
.fm-passo { margin-bottom: 16px; scroll-margin-top: 80px; }
.fm-frase { font-size: 14px; line-height: 1.5; color: var(--tinta-media); margin: 10px 0 0; max-width: 760px; }
.fm-frase strong { color: var(--tinta); }
.fm-espera { margin: 0; }

.fm-sabe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fm-sabe > div { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--fundo); }
.fm-ok-falta { background: var(--tinta-apagada) !important; }
.fm-ok { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
    background: var(--verde); color: #FFFFFF; font-size: 11px; font-weight: 700; margin-top: 1px; }
.fm-rotulo { font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-apagada); font-weight: 600; }
.fm-valor { font-family: var(--fonte-marca); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin: 3px 0 1px; font-variant-numeric: tabular-nums; }
.fm-valor.fm-forte { font-size: 19px; }

.fm-ja { font-size: 13.5px; color: var(--tinta-media); margin: 0 0 12px; padding: 10px 12px; background: var(--fundo); border-radius: var(--raio); }
.fm-ja a { color: var(--acento); font-weight: 600; white-space: nowrap; }
.fm-envio .fm-frase { margin: 0 0 12px; }
.fm-arquivos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fm-arquivo { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1.5px dashed var(--borda-forte); border-radius: var(--raio);
    background: var(--fundo); cursor: pointer; }
.fm-arquivo:hover, .fm-arquivo:focus-within { border-color: var(--acento); background: #FFF8F4; }
.fm-arquivo-t { font-size: 14px; font-weight: 700; }
.fm-arquivo input[type=file] { margin-top: 6px; font: inherit; font-size: 12.5px; max-width: 100%; }
.fm-arquivo input[type=file]::file-selector-button { height: 32px; padding: 0 14px; margin-right: 10px; border: 1px solid var(--borda-forte);
    border-radius: var(--raio-miudo); background: var(--superficie); color: var(--tinta); font: inherit; font-weight: 600; cursor: pointer; }
.fm-arquivo input[type=file]::file-selector-button:hover { border-color: var(--tinta); }
.fm-ler { width: auto; padding: 0 22px; margin-top: 14px; }
.fm-ajuda { margin-top: 12px; font-size: 13px; color: var(--tinta-media); }
.fm-ajuda summary { cursor: pointer; color: var(--tinta-fraca); font-weight: 600; }
.fm-ajuda p { margin: 8px 0 0; line-height: 1.5; max-width: 760px; }
.fm-privado { margin: 10px 0 0; }
.fm-ads { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-top: 14px; padding: 12px 14px;
    border: 1px solid var(--borda); border-radius: var(--raio); font-size: 13px; line-height: 1.5; color: var(--tinta-media); }
.fm-ads form { margin: 0; flex: none; }
.fm-ads .botao-linha { height: 34px; padding: 0 14px; }

.fm-resumo { display: grid; gap: 3px; padding: 12px 14px; margin-bottom: 14px; border-radius: var(--raio); background: var(--fundo); font-size: 13.5px; }
.fm-resumo-n { font-size: 16px; font-weight: 700; }
.fm-falta { color: var(--acento); }
.fm-grupo { border-top: 1px solid var(--linha); padding: 14px 0 4px; }
.fm-grupo:first-of-type { border-top: 0; padding-top: 0; }
details.fm-grupo > summary { cursor: pointer; list-style: none; }
details.fm-grupo > summary::-webkit-details-marker { display: none; }
details.fm-grupo > summary h3::before { content: "▸ "; color: var(--tinta-apagada); }
details.fm-grupo[open] > summary h3::before { content: "▾ "; }
.fm-grupo-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.fm-grupo-topo h3 { margin: 0; font-size: 14.5px; font-weight: 700; }
.fm-conta { display: inline-block; min-width: 22px; padding: 1px 7px; margin-left: 4px; border-radius: 999px; background: var(--linha);
    font-size: 11.5px; font-weight: 700; text-align: center; color: var(--tinta-media); }
.fm-grupo-novas .fm-conta { background: var(--acento); color: #FFFFFF; }
.fm-grupo-total { font-family: var(--fonte-marca); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fm-grupo-mercadoria .fm-grupo-total, .fm-grupo-nao_lancar .fm-grupo-total { color: var(--tinta-apagada); }
.fm-grupo-ajuda { margin: 3px 0 8px; font-size: 12px; }
.fm-linhas { display: grid; }
.fm-linha { display: grid; grid-template-columns: 52px minmax(0, 1fr) 110px 290px; gap: 12px; align-items: center;
    padding: 9px 8px; border-bottom: 1px solid var(--linha); }
.fm-linha:last-child { border-bottom: 0; }
.fm-linha.fm-sem { background: #FFF8F4; box-shadow: inset 3px 0 0 var(--acento); }
.fm-dia { font-family: var(--fonte-marca); font-size: 12.5px; color: var(--tinta-fraca); }
.fm-desc-t { font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.fm-lembrou { color: var(--verde); font-weight: 600; }
.fm-valor-linha { text-align: right; font-family: var(--fonte-marca); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fm-grupo-mercadoria .fm-valor-linha, .fm-grupo-nao_lancar .fm-valor-linha { color: var(--tinta-fraca); }
.fm-escolha { display: flex; gap: 10px; align-items: center; }
.fm-escolha select { height: 34px; margin: 0; padding: 0 8px; font-size: 12.5px; flex: 1; min-width: 0; }
.fm-todo-mes { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tinta-media); white-space: nowrap; cursor: pointer; }
.fm-todo-mes input { width: 15px; height: 15px; margin: 0; accent-color: var(--acento); }
.fm-todo-mes[hidden] { display: inline-flex; visibility: hidden; }
.fm-rodape { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 16px; margin: 14px -18px -16px; padding: 12px 18px;
    background: var(--superficie); border-top: 1px solid var(--borda); border-radius: 0 0 var(--raio) var(--raio);
    box-shadow: 0 -6px 14px rgba(17, 17, 17, 0.05); }
.fm-rodape-t { flex: 1; font-size: 13.5px; }
.fm-voltar { font-size: 12.5px; color: var(--tinta-fraca); white-space: nowrap; }
.fm-lancar { width: auto; padding: 0 22px; }

.fm-final { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 24px; align-items: center; }
.fm-sobrou { font-size: 34px; margin: 4px 0 2px; }
.fm-conta-final .linha { font-size: 13.5px; }
.fm-fechar { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
.fm-fechar button { width: auto; padding: 0 22px; }
.fm-falta-fechar { margin-top: 14px; font-size: 13.5px; color: var(--tinta-media); }
.fm-falta-fechar a { color: var(--acento); font-weight: 600; }

@media (max-width: 1100px) {
    .fm-sabe { grid-template-columns: 1fr 1fr; }
    .fm-linha { grid-template-columns: 52px minmax(0, 1fr) 100px; }
    .fm-escolha { grid-column: 2 / -1; }
}
@media (max-width: 640px) {
    .fm-arquivos, .fm-final { grid-template-columns: 1fr; }
    .fm-final { gap: 12px; }
    .fm-linha { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 8px; padding: 10px 4px; }
    .fm-sabe { grid-template-columns: 1fr 1fr; gap: 8px; }
    .fm-sabe > div { padding: 10px; gap: 8px; }
    .fm-sabe .fm-ok { display: none; }
    .fm-valor, .fm-valor.fm-forte { font-size: 15px; }
    .fm-escolha { grid-column: 1 / -1; }
    .fm-escolha select { height: 40px; font-size: 14px; }
    .fm-ads { flex-direction: column; align-items: stretch; }
    .fm-ads .botao-linha { width: 100%; }
    .fm-rodape { flex-wrap: wrap; gap: 8px 12px; margin: 14px -18px -16px; }
}
@media (max-width: 760px) {
    .fm-rodape { bottom: 60px; }   /* acima da barra do celular */
    .fm-rodape-t { flex-basis: 100%; }
    .fm-lancar { flex: 1; }
    .fm-passos li { font-size: 12px; }
}

/* ===== D290 (30/10) — Admin · Últimos acessos: a linha de hoje em destaque, as telas em chips. */
.tabela-acessos tr.acesso-hoje td { background: #FFF7F2; }
.tabela-acessos td.telas { max-width: 420px; }
.tela-chip { display: inline-block; font-family: var(--fonte-marca); font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: #EDEDE8; color: var(--tinta-media); margin: 2px 4px 2px 0; white-space: nowrap; }
.opcao-regime { display: block; padding: 10px 12px; border: 1px solid var(--linha); border-radius: var(--raio-miudo); margin-bottom: 8px; cursor: pointer; }
.opcao-regime:hover { border-color: var(--tinta); }