vira um cartão
compacto (CSS puro, mesmo DOM/mesma renderização de desktop — sem
segunda fonte de verdade); cada exige um atributo data-label no
JS para o rótulo aparecer via ::before. A 1ª coluna (nome do
registro) não leva rótulo, funciona como título do cartão. */
.record-list-mobile.table-scroll { overflow-x: visible; }
/* A tabela some do algoritmo de layout de tabela (senão o calcula
largura de coluna a partir do conteúdo, ignorando os virarem
grid) — sem isso o min-width:max-content de .table-scroll .data-table
ainda força a tabela a ficar larguíssima mesmo com as linhas em grid. */
.record-list-mobile .data-table { display: block; min-width: 0; width: 100%; }
.record-list-mobile thead { display: none; }
.record-list-mobile tbody { display: flex; flex-direction: column; gap: 10px; }
.record-list-mobile tr {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 14px;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 14px;
}
.record-list-mobile td { display: block; padding: 0; border-bottom: 0; }
.record-list-mobile td:first-child { grid-column: 1 / -1; font-weight: 700; font-size: 14px; overflow-wrap: anywhere; white-space: normal; max-width: none; }
.record-list-mobile td.num { text-align: left; }
.record-list-mobile td[data-label]::before {
content: attr(data-label);
display: block;
color: var(--text-faint);
font-size: 10.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 2px;
}
.performance-pagination { justify-content: center; }
}
/* Respeita a preferência do sistema — nenhuma transição/animação desta
carta (hover de card, troca de tab/métrica) reforça mudança de estado
quando o usuário pediu para reduzir movimento (carta, seção 14). */
@media (prefers-reduced-motion: reduce) {
* { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
}
/* ==========================================================================
IMPLEMENTATION-02-OVERVIEW-V1.1 — Visão Geral V1.1.
Tudo abaixo é escopado a body.page-overview (só existe em index.html):
.filter-presets/.filter-bar/.kpi-grid-secondary são compartilhados com
Performance/Mídia Paga/etc. e não podem mudar de aparência lá. Classes
inteiramente novas (.kpi-card-featured, .kpi-row-compact, .insights-
columns, .detail-links) não precisam do escopo por não existirem em
nenhuma outra página, mas ficam aqui juntas por organização.
========================================================================== */
.page-overview .period-controls { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
/* Ativo em bronze com sublinhado discreto — nunca o bloco laranja sólido
(carta: "sem grande botão preenchido"). Sobrescreve só dentro da Visão
Geral; Performance/Mídia Paga continuam com o preset ativo em --accent. */
.page-overview .filter-presets button.active {
background: var(--brand-bronze-soft);
border-color: transparent;
border-bottom: 2px solid var(--brand-bronze);
color: var(--brand-bronze);
font-weight: 700;
}
.page-overview .filter-more { position: relative; }
.filter-more-toggle {
display: inline-flex;
align-items: center;
gap: 4px;
border: 1px solid var(--border);
background: var(--surface-sunken);
border-radius: 999px;
padding: 6px 13px;
cursor: pointer;
color: var(--text);
font-weight: 500;
}
.filter-more-toggle:hover { border-color: var(--border-strong); }
.filter-more-toggle.active {
background: var(--brand-bronze-soft);
border-color: transparent;
border-bottom: 2px solid var(--brand-bronze);
color: var(--brand-bronze);
font-weight: 700;
}
.filter-more-caret { font-size: 10px; }
.filter-more-popover {
position: absolute;
top: calc(100% + 6px);
left: 0;
z-index: 20;
min-width: 320px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
.filter-more-popover[hidden] { display: none; }
.filter-more-presets button.active {
background: var(--brand-bronze-soft);
border-color: transparent;
border-bottom: 2px solid var(--brand-bronze);
color: var(--brand-bronze);
font-weight: 700;
}
/* Resultado após mídia — único card com destaque (carta: "leve sombra;
detalhe bronze; valor com maior presença"). Classe própria, não reaproveita
.kpi-card-hero (que outras páginas usam com --brand/laranja). */
.kpi-card-featured {
position: relative;
border-left: 3px solid var(--brand-bronze);
padding-left: calc(18px - 2px);
box-shadow: var(--shadow-md);
}
.kpi-card-featured .kpi-value { font-size: 28px; }
/* Linha secundária compacta (ROAS/Pedidos atribuídos/CPA) — separadores,
não 3 cartões com borda/sombra própria (carta: "não usar três novos
cards"). */
.kpi-row-compact {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 18px;
margin-bottom: var(--space-3);
}
.kpi-row-item { display: flex; align-items: baseline; gap: 8px; padding-right: 20px; border-right: 1px solid var(--border); }
.kpi-row-item:last-child { border-right: none; padding-right: 0; }
.kpi-row-label { color: var(--text-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
.kpi-row-value { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Gráfico "Evolução no período" — linha navy/neutra em vez de laranja
(carta: "sem bronze como linha principal" — navy é a escolha neutra que
sobra; laranja continua em uso normal no resto do produto, escopado
só a este gráfico via #daily-chart). */
#daily-chart .chart-area { fill: var(--brand-navy); fill-opacity: 0.08; }
#daily-chart .chart-line { stroke: var(--brand-navy); }
#daily-chart .chart-dot { fill: var(--brand-navy); }
#daily-chart .chart-guide { stroke: var(--border-strong); }
/* Onde estou ganhando | Onde estou perdendo lado a lado no desktop. */
.insights-columns { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
.detail-links { display: flex; flex-wrap: wrap; gap: 20px; margin: -6px 0 var(--space-3); }
.detail-link { font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.detail-link:hover { text-decoration: underline; }
@media (min-width: 861px) {
.insights-columns { grid-template-columns: 1fr 1fr; }
.insights-columns .panel { margin-bottom: 0; }
}
@media (max-width: 860px) {
.page-overview .period-controls { width: 100%; }
.filter-more-popover { left: 0; right: 0; min-width: 0; }
.filter-more-toggle { min-height: 40px; }
.kpi-row-compact { gap: 14px; padding: 12px 14px; }
.kpi-row-item { padding-right: 14px; }
}
@media (max-width: 640px) {
.kpi-row-compact { flex-direction: column; align-items: stretch; gap: 10px; }
.kpi-row-item { border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 10px; justify-content: space-between; }
.kpi-row-item:last-child { border-bottom: none; padding-bottom: 0; }
/* Dentro do popover "Mais" (poucos itens, largura já limitada ao próprio
popover), quebra de linha lê melhor que o scroll horizontal que
.filter-presets usa nas páginas com filtros extensos. */
.filter-more-presets { flex-wrap: wrap; overflow-x: visible; }
.filter-more-presets button { min-height: 40px; }
/* BUG REAL (QA) — .period-controls (flex:1, encolhe livremente porque
.filter-presets tem overflow-x:auto) disputava a mesma linha com
.filter-compare, comprimindo os presets e cortando "Ontem" visualmente.
Cada um ganha a própria linha cheia. */
.page-overview .filter-bar { flex-direction: column; align-items: stretch; }
.page-overview .period-controls { width: 100%; }
}
/* ==========================================================================
IMPLEMENTATION-02.1-OVERVIEW-V1.1 — 4 ajustes visuais pontuais sobre a
V1.1 já implementada (nenhuma lógica/HTML tocado, só apresentação).
Tudo escopado a body.page-overview, #apply-custom ou #primary-kpi-section
(todos exclusivos de index.html) — .filter-custom button,
.chart-metric-tabs, .freshness-indicator e .coverage-compact-panel são
compartilhados com Performance/Mídia Paga/Operação e continuam com a
aparência antiga lá.
========================================================================== */
/* BLOCKER A — Aplicar (personalizado) e seletor do gráfico usavam
--accent/laranja (resquício da apresentação antiga). Bronze com estados
de hover/focus/disabled — nunca danger/success/warning: Aplicar não é
ação destrutiva nem semântica. Mesmo contraste já validado na Foundation
(bronze ⇄ branco = 5.52:1, simétrico para texto-sobre-fundo ou o
inverso — ambos acima de AA 4.5:1). */
body.page-overview #apply-custom {
border: 1px solid var(--brand-bronze);
background: var(--brand-bronze-soft);
color: var(--brand-bronze);
}
body.page-overview #apply-custom:hover { background: var(--brand-bronze); color: #fff; }
body.page-overview #apply-custom:focus-visible { outline: 2px solid var(--brand-bronze); outline-offset: 2px; }
body.page-overview #apply-custom:disabled { opacity: 0.55; cursor: not-allowed; }
/* Seletor do gráfico: mesmo padrão bronze discreto já usado pelos presets
de período desta página (consistência interna) — fundo sutil + linha
inferior, não um preenchimento pesado (carta: "não transformar em CTA
primário"). */
body.page-overview .chart-metric-tabs button.active {
background: var(--brand-bronze-soft);
border-color: transparent;
border-bottom: 2px solid var(--brand-bronze);
color: var(--brand-bronze);
font-weight: 700;
}
/* BLOCKER B — freshness deixa de ser um card/banner de largura total e
vira uma linha compacta de metainformação (mesmo texto/lógica/estados —
só a apresentação). O indicador colorido (dot) continua semântico por
tom; o card grande é que some. */
body.page-overview .freshness-indicator {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: none;
margin: 2px 0 16px;
padding: 0;
border: none;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--text-muted);
}
body.page-overview .freshness-dot { margin-top: 0; }
body.page-overview .freshness-copy { flex-direction: row; gap: 5px; align-items: baseline; font-size: 12.5px; }
body.page-overview .freshness-copy strong { font-size: 12.5px; font-weight: 650; }
body.page-overview .freshness-copy span::before { content: '· '; }
/* BLOCKER C — cobertura de atribuição é metadata dos KPIs secundários, não
um painel próprio (compartilha classe com Mídia Paga/Operação, que
continuam com o card). Mesmo texto/valor/cálculo, só deixa de ter
card/borda/sombra. */
body.page-overview .coverage-compact-panel {
background: none;
border: none;
border-radius: 0;
box-shadow: none;
padding: 0;
margin: -6px 0 var(--space-3);
color: var(--text-muted);
font-size: 12.5px;
}
/* BLOCKER D — .kpi-grid (compartilhado) usa auto-fit, que em larguras
intermediárias (~1024–1200px de viewport) encaixa 3 dos 4 cards numa
linha e deixa o 4º sozinho — quebra visual, não intencional. Breakpoints
explícitos só para #primary-kpi-section (exclusivo da Visão Geral):
4 colunas quando a área de conteúdo cabe confortavelmente os 4 cards,
2×2 na faixa intermediária, 1 coluna no mobile (comportamento padrão do
auto-fit da base, já correto, não precisa de regra própria). */
@media (min-width: 861px) and (max-width: 1239px) {
#primary-kpi-section { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1240px) {
#primary-kpi-section { grid-template-columns: repeat(4, 1fr); }
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ==========================================================================
IMPLEMENTATION-03-PAID-MEDIA-V1.1 — Mídia Paga V1.1.
Escopado a body.page-paid-media (só existe em paid-media.html):
.filter-presets/.filter-bar/#apply-custom/.coverage-compact-panel/
.table-action-chip/.pagination-pages/.pagination-size são compartilhados
com Visão Geral/Performance/Operação e não podem mudar de aparência lá.
Classes inteiramente novas (.table-toolbar, .campaign-expand-*,
.row-expand-*, .table-action-chip-warning, .linking-summary-panel-pending)
não precisam do escopo por não existirem em nenhuma outra página, mas
ficam aqui juntas por organização. Nenhum HTML/JS de outra página, nenhum
cálculo, nenhuma fórmula muda nesta seção.
========================================================================== */
.page-paid-media .period-controls { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.page-paid-media .filter-presets button.active {
background: var(--brand-bronze-soft);
border-color: transparent;
border-bottom: 2px solid var(--brand-bronze);
color: var(--brand-bronze);
font-weight: 700;
}
.page-paid-media .filter-more { position: relative; }
.page-paid-media .filter-more-toggle.active,
.page-paid-media .filter-more-presets button.active {
background: var(--brand-bronze-soft);
border-color: transparent;
border-bottom: 2px solid var(--brand-bronze);
color: var(--brand-bronze);
font-weight: 700;
}
body.page-paid-media #apply-custom {
border: 1px solid var(--brand-bronze);
background: var(--brand-bronze-soft);
color: var(--brand-bronze);
}
body.page-paid-media #apply-custom:hover { background: var(--brand-bronze); color: #fff; }
body.page-paid-media #apply-custom:focus-visible { outline: 2px solid var(--brand-bronze); outline-offset: 2px; }
body.page-paid-media #apply-custom:disabled { opacity: 0.55; cursor: not-allowed; }
/* Cobertura de atribuição como metadata dos KPIs secundários, não um painel
próprio (mesmo texto/cálculo de sempre — carta "SECUNDÁRIOS": "coverage
não possui card/container próprio"). */
body.page-paid-media .coverage-compact-panel {
background: none;
border: none;
border-radius: 0;
box-shadow: none;
padding: 0;
margin: -6px 0 var(--space-3);
color: var(--text-muted);
font-size: 12.5px;
}
/* Faixa "Vínculos de atribuição" — ATENÇÃO/âmbar, nunca danger/bronze/card
pesado (carta "SEMÂNTICA DA FAIXA"). Sem pendência (0 sem vínculo) o
painel permanece neutro — o âmbar é só para quando existe algo a revisar. */
body.page-paid-media .linking-summary-panel { box-shadow: none; }
body.page-paid-media .linking-summary-panel.linking-summary-panel-pending {
border-color: transparent;
border-left: 3px solid var(--warning);
background: var(--warning-soft);
}
/* Ação de vínculo dentro da tabela: neutra por padrão; só ganha o tom de
atenção quando a campanha não tem NENHUM Sub ID (carta: "cor warning/
atenção; não brand bronze — não fazer parecer CTA principal"). */
body.page-paid-media .table-action-chip:hover { border-color: var(--brand-bronze); color: var(--brand-bronze); }
body.page-paid-media .table-action-chip-warning { border-color: var(--warning); color: var(--warning); }
body.page-paid-media .table-action-chip-warning:hover { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); }
body.page-paid-media .pagination-pages button.active,
body.page-paid-media .pagination-size button.active {
background: var(--brand-bronze); border-color: var(--brand-bronze);
}
body.page-paid-media .pagination-pages button:hover:not(:disabled),
body.page-paid-media .pagination-size button:hover:not(:disabled) { border-color: var(--brand-bronze); color: var(--brand-bronze); }
/* Toolbar da tabela (busca + selects) — visualmente parte do painel da
tabela, não um segundo header de página (carta "TABLE TOOLBAR"). */
.table-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
.table-toolbar .filter-search { flex: 1; min-width: 200px; }
.table-toolbar .filter-search input { width: 100%; }
/* Coluna de expandir — largura mínima, alinhada à direita, chevron gira
quando a linha está aberta (mesmo ▾ já usado por "Mais"). */
.campaign-expand-col { width: 36px; text-align: center; }
.row-expand-toggle {
border: none;
background: none;
cursor: pointer;
color: var(--text-muted);
padding: 6px;
border-radius: var(--radius-sm);
line-height: 1;
}
.row-expand-toggle:hover { background: var(--surface-sunken); color: var(--text); }
.row-expand-caret { display: inline-block; font-size: 11px; transition: transform 0.15s ease; }
.campaign-row.is-expanded .row-expand-caret { transform: rotate(-180deg); }
/* Linha expandida — surface sutil, nunca card/sombra/segunda tabela dentro
da tabela (carta "EXPANDED ROW — DESKTOP"). Continua claramente presa à
linha da campanha acima (sem borda superior própria). */
.campaign-expanded-row td { background: var(--surface-sunken); padding: 16px 18px; border-bottom: 1px solid var(--border); }
.campaign-expand-grid { display: grid; grid-template-columns: 1.3fr 1.3fr 1fr; gap: 20px; }
.campaign-expand-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); margin-bottom: 8px; }
.campaign-expand-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px; }
.campaign-expand-stats > div { display: flex; flex-direction: column; gap: 2px; }
.campaign-expand-stats dt { font-size: 11px; color: var(--text-faint); }
.campaign-expand-stats dd { font-size: 13.5px; font-weight: 650; font-variant-numeric: tabular-nums; }
.campaign-expand-subids { display: flex; flex-wrap: wrap; gap: 5px; }
/* IMPLEMENTATION-03.1-FIX — carta "PASSO 5": .subid-chip (reaproveitado da
prévia truncada da célula "Sub IDs" da tabela) trunca com ellipsis a
150px — correto na prévia compacta, mas errado aqui: a lista expandida
existe justamente para mostrar o Sub ID completo. Escopado só a este
container (a prévia truncada em .linking-cell-chips continua igual). */
.campaign-expand-subids .subid-chip {
max-width: none;
overflow: visible;
text-overflow: clip;
white-space: normal;
overflow-wrap: anywhere;
}
.campaign-expand-action { display: flex; flex-direction: column; align-items: flex-start; }
.campaign-expand-action .integration-row-action { margin-top: 2px; }
@media (max-width: 860px) {
.page-paid-media .period-controls { width: 100%; }
.table-toolbar { flex-direction: column; align-items: stretch; }
.table-toolbar .filter-search { min-width: 0; }
.campaign-expand-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 640px) {
.page-paid-media .filter-bar { flex-direction: column; align-items: stretch; }
.page-paid-media .period-controls { width: 100%; }
.filter-more-presets { flex-wrap: wrap; overflow-x: visible; }
.filter-more-presets button { min-height: 40px; }
/* MOBILE — ESTRUTURA DA LISTAGEM (carta): sem scroll horizontal como
experiência primária. Cada campanha vira um cartão empilhado; a linha
expandida some do fluxo em tabela e reaparece como bloco dentro do
próprio cartão. */
.meta-table-panel .table-scroll { overflow-x: visible; border: none; }
.linking-table thead { display: none; }
.linking-table, .linking-table tbody, .linking-table tr, .linking-table td { display: block; width: 100%; }
/* IMPLEMENTATION-03.1-FIX — causa raiz medida do blocker mobile: .table-scroll
.data-table (regra compartilhada, base.css, especificidade 0,2,0) força
min-width:max-content para permitir scroll horizontal no desktop.
width:100% sozinho NUNCA vence min-width (min-width é um piso), e um
seletor de especificidade 0,1,0 (".linking-table" sozinho) também não
vence 0,2,0 — a ordem da media query não pesa nisso, só especificidade
(medido: min-width computado continuava "max-content" mesmo dentro
deste bloco até este seletor ganhar a mesma especificidade do original).
Sem isso, a tabela mantém sua largura intrínseca (~1050px+ quando uma
campanha com muitos Sub IDs está expandida, porque max-content soma
TODO o conteúdo, inclusive linhas não expandidas) e, com
overflow-x:visible logo acima, esse excesso simplesmente sangra para
fora da viewport em vez de rolar OU encolher — os valores "somem"
porque justify-content:space-between os empurra para a ponta direita
de uma linha ~1050px de largura, muito além dos 390px visíveis (mesmo
padrão já resolvido em .record-list-mobile .data-table, ver comentário
FRONTEND-CONSOLIDATION-01C acima). Medido via getBoundingClientRect/
scrollWidth antes e depois; nenhuma suposição. */
.table-scroll .linking-table { min-width: 0; }
.linking-table th:nth-child(1), .linking-table td:nth-child(1),
.linking-table th:nth-child(2), .linking-table td:nth-child(2) {
position: static; min-width: 0; max-width: none; box-shadow: none;
}
.campaign-row {
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 10px;
background: var(--surface);
overflow: hidden;
}
.campaign-row td { border-bottom: none; padding: 8px 14px; }
.campaign-row td[data-label] { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.campaign-row td[data-label]::before { content: attr(data-label); font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.03em; flex: none; }
.campaign-row td[data-label="Campanha"] { padding-top: 12px; }
.campaign-row td[data-label="Campanha"]::before { display: none; }
.campaign-row td[data-label="Campanha"] .entity-cell { width: 100%; }
.campaign-row td.num { font-variant-numeric: tabular-nums; }
.campaign-expand-col { width: auto; padding: 4px 6px 10px; text-align: center; }
.row-expand-toggle { width: 100%; display: flex; align-items: center; justify-content: center; border-top: 1px solid var(--border); border-radius: 0; padding: 8px; }
.campaign-expanded-row td { border-bottom: none; padding: 14px; }
}
/* NOMES LONGOS (carta): truncamento com ellipsis + conteúdo completo
acessível via title (tooltip nativo) — leitores de tela continuam lendo o
nome inteiro normalmente (a truncagem é só visual, o texto não sai do
DOM). Exclusivo de .entity-cell-name em Mídia Paga (não usado em nenhuma
outra página). */
body.page-paid-media .entity-cell-name {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
@media (max-width: 640px) {
body.page-paid-media .entity-cell-name { white-space: normal; overflow: visible; text-overflow: clip; }
}
/* ==========================================================================
IMPLEMENTATION-04-PERFORMANCE-V1.1 — Performance V1.1.
Escopado a body.page-performance (só existe em performance.html):
.filter-presets/.view-tabs/.filter-custom button/.pagination-*/.link-button/
.state-connect/.truncate-cell são compartilhados com outras páginas e não
podem mudar de aparência lá. --accent (laranja legado) NÃO é alterado
globalmente; aqui só deixa de aparecer nos controles desta página.
Nenhum cálculo, endpoint ou regra de dados muda nesta seção.
========================================================================== */
body.page-performance .period-controls { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
body.page-performance .filter-more { position: relative; }
body.page-performance .filter-presets button.active,
body.page-performance .filter-more-toggle.active,
body.page-performance .filter-more-presets button.active {
background: var(--brand-bronze-soft);
border-color: transparent;
border-bottom: 2px solid var(--brand-bronze);
color: var(--brand-bronze);
font-weight: 700;
}
body.page-performance #apply-custom {
border: 1px solid var(--brand-bronze);
background: var(--brand-bronze-soft);
color: var(--brand-bronze);
}
body.page-performance #apply-custom:hover { background: var(--brand-bronze); color: #fff; }
body.page-performance #apply-custom:focus-visible,
body.page-performance .filter-presets button:focus-visible,
body.page-performance .filter-more-toggle:focus-visible { outline: 2px solid var(--brand-bronze); outline-offset: 2px; }
/* Tabs = navegação principal da página: linha horizontal com sublinhado
bronze no ativo, nunca 3 botões sólidos/cards. */
body.page-performance .view-tabs {
gap: 2px;
margin: 0 0 var(--space-4);
border-bottom: 1px solid var(--border);
}
body.page-performance .view-tabs button {
border: none;
border-bottom: 2px solid transparent;
border-radius: 0;
background: none;
margin-bottom: -1px;
padding: 10px 16px;
min-height: 44px;
color: var(--text-muted);
font-weight: 600;
}
body.page-performance .view-tabs button:hover { color: var(--text); border-color: transparent; border-bottom-color: var(--border-strong); }
body.page-performance .view-tabs button.active {
background: none;
border-bottom-color: var(--brand-bronze);
color: var(--brand-bronze);
font-weight: 700;
}
body.page-performance .view-tabs button:focus-visible { outline: 2px solid var(--brand-bronze); outline-offset: -2px; border-radius: var(--radius-sm); }
/* KPIs: até 2 cards principais + linha compacta (ver renderKpiGroups). */
body.page-performance #kpi-section { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.page-performance #kpi-secondary-section[hidden] { display: none; }
body.page-performance .kpi-group .kpi-grid { margin-bottom: var(--space-3); }
/* Estado "conecte a Shopee" — informativo, não erro; bronze em vez do
laranja legado. */
body.page-performance .state-connect { background: var(--brand-bronze-soft); border-color: transparent; border-left: 3px solid var(--brand-bronze); }
body.page-performance .state-connect-cta { background: var(--brand-bronze); }
body.page-performance .state-connect-cta:hover { background: var(--brand-bronze); filter: brightness(0.92); }
body.page-performance .pagination-pages button.active,
body.page-performance .pagination-size button.active { background: var(--brand-bronze); border-color: var(--brand-bronze); }
body.page-performance .pagination-pages button:hover:not(:disabled),
body.page-performance .pagination-size button:hover:not(:disabled) { border-color: var(--brand-bronze); color: var(--brand-bronze); }
body.page-performance .link-button { color: var(--brand-bronze); font-weight: 600; }
body.page-performance .link-button:hover { color: var(--brand-bronze); filter: brightness(0.85); }
body.page-performance .link-button:focus-visible { outline: 2px solid var(--brand-bronze); outline-offset: 2px; border-radius: 2px; }
/* TABELAS — nome/Sub ID à esquerda, números à direita. .table-scroll
.data-table { min-width: max-content } (base) é o que fez a Mídia Paga
estourar o viewport com conteúdo longo (03.1); aqui as tabelas têm 4-6
colunas e sempre cabem, então o piso vale 0 em TODAS as larguras
(especificidade 0,3,1 vence o 0,2,0 da base, não depende de ordem). */
body.page-performance .table-scroll .data-table { min-width: 0; }
body.page-performance .data-table { table-layout: auto; }
/* Nome de produto/canal: ocupa a largura que sobra e trunca com ellipsis;
texto completo continua no DOM (leitor de tela) e no title. */
body.page-performance .perf-name-cell { width: 100%; max-width: 0; }
body.page-performance .perf-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sub ID: identificador operacional — texto normal (não badge/negrito),
quebra em vez de truncar, nunca alarga a tabela. */
body.page-performance .perf-subid-cell { max-width: 380px; }
body.page-performance .perf-subid { display: block; min-width: 0; overflow-wrap: anywhere; word-break: break-word; font-weight: 500; }
body.page-performance .data-table th { white-space: nowrap; }
body.page-performance .perf-action-col,
body.page-performance .perf-action-cell { width: 1%; white-space: nowrap; text-align: right; }
body.page-performance #subid-detail-raw { overflow-wrap: anywhere; word-break: break-word; }
/* Larguras intermediárias (tablet/desktop estreito): o nome ganha até 2 linhas
em vez de ellipsis de linha única. */
@media (min-width: 641px) and (max-width: 1100px) {
body.page-performance .perf-name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
white-space: normal;
overflow-wrap: anywhere;
}
}
@media (max-width: 860px) {
body.page-performance .period-controls { width: 100%; }
}
@media (max-width: 640px) {
body.page-performance .filter-bar { flex-direction: column; align-items: stretch; }
body.page-performance .period-controls { width: 100%; }
body.page-performance .view-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: visible; }
body.page-performance .view-tabs button { min-width: 0; padding-inline: 6px; }
body.page-performance #kpi-section { grid-template-columns: 1fr; }
/* Linha → cartão (mesmo padrão .record-list-mobile já usado aqui): produto
é a primeira leitura, até 2 linhas; métricas abaixo em grade. */
body.page-performance .record-list-mobile td { min-width: 0; }
body.page-performance .perf-name-cell { width: auto; max-width: none; }
body.page-performance .perf-name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
white-space: normal;
overflow-wrap: anywhere;
}
body.page-performance .record-list-mobile tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.page-performance #performance-table[data-mode="products"] tr,
body.page-performance #performance-table[data-mode="channels"] tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.page-performance .perf-subid-cell { max-width: none; }
body.page-performance .perf-subid { font-weight: 600; }
body.page-performance .record-list-mobile td.perf-action-cell { grid-column: 1 / -1; width: auto; text-align: left; }
body.page-performance .perf-action-cell .link-button { min-height: 40px; display: inline-flex; align-items: center; }
body.page-performance .table-toolbar { gap: 8px; }
body.page-performance .table-toolbar input[type="search"],
body.page-performance .table-toolbar select { min-height: 40px; }
}
/* .filter-select-group define display:flex, o que anulava o atributo hidden
do filtro "Origem" (exclusivo do modo Sub IDs). */
body.page-performance .filter-select-group[hidden] { display: none; }
/* ==========================================================================
IMPLEMENTATION-05-OPERATION-V1.1 — Operação V1.1.
Escopado a body.page-operations (só existe em operations.html):
.integration-row-*, .filter-presets, .table-toolbar, .status-dot-*,
.panel-link e .click-import-result são compartilhados com outras páginas e
não podem mudar de aparência lá. --accent (laranja legado) NÃO é alterado
globalmente. Estados operacionais usam tokens semânticos (success/
warning/danger/loading); bronze só em ação/seleção/foco, nunca como status.
Nenhuma API, sync, polling ou regra de dados muda nesta seção.
========================================================================== */
body.page-operations .ops-section { margin-bottom: var(--space-3); }
body.page-operations .ops-section .panel-header { margin-bottom: 10px; }
/* Fontes de dados — cartões baixos, 2 colunas quando cabem. */
body.page-operations .ops-source-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
body.page-operations .ops-source-card {
display: flex;
flex-direction: column;
gap: 8px;
min-width: 0;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 14px 18px;
}
body.page-operations .ops-source-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
body.page-operations .ops-source-head h3 { margin: 0; }
body.page-operations .ops-source-fresh { margin: 0; color: var(--text-muted); font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; min-height: 1.5em; }
body.page-operations .ops-source-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
/* Estado de conexão: texto SEMPRE presente (não depende só de cor) + ponto. */
body.page-operations .integration-row-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--loading); }
body.page-operations .integration-row-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
body.page-operations .integration-row-status[data-tone="ok"] { color: var(--success); }
body.page-operations .integration-row-status[data-tone="pending"] { color: var(--text-muted); }
body.page-operations .integration-row-status[data-tone="warn"] { color: var(--warning); }
body.page-operations .integration-row-status[data-tone="error"] { color: var(--danger); }
body.page-operations .integration-row-status[data-tone="neutral"] { color: var(--loading); }
/* Ações: neutras por padrão; primária em bronze (ação), foco visível. */
body.page-operations .integration-row-action { min-height: 36px; display: inline-flex; align-items: center; background: var(--surface); }
body.page-operations .integration-row-action:hover { border-color: var(--brand-bronze); color: var(--brand-bronze); }
body.page-operations .integration-row-action-primary { background: var(--brand-bronze); border-color: var(--brand-bronze); color: #fff; }
body.page-operations .integration-row-action-primary:hover { background: var(--brand-bronze); border-color: var(--brand-bronze); color: #fff; filter: brightness(0.92); }
body.page-operations .integration-row-action:focus-visible,
body.page-operations .filter-presets button:focus-visible,
body.page-operations .panel-link:focus-visible,
body.page-operations #shopee-connect-button:focus-visible { outline: 2px solid var(--brand-bronze); outline-offset: 2px; }
body.page-operations #shopee-connect-button { background: var(--brand-bronze); border: 1px solid var(--brand-bronze); color: #fff; border-radius: var(--radius-sm); padding: 8px 16px; font-weight: 650; cursor: pointer; }
body.page-operations .panel-link { color: var(--brand-bronze); }
body.page-operations .click-import-result.success { background: var(--success-bg); color: var(--success); }
/* Status geral + pedidos importados — faixa compacta, não 4 KPIs. */
body.page-operations .ops-health { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 12px 18px; margin-bottom: var(--space-3); box-shadow: none; }
body.page-operations .ops-health-main { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
body.page-operations .ops-health-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--loading); flex: none; }
body.page-operations .ops-health-main[data-tone="ok"] .ops-health-dot { background: var(--success); }
body.page-operations .ops-health-main[data-tone="info"] .ops-health-dot { background: var(--loading); }
body.page-operations .ops-health-main[data-tone="warn"] .ops-health-dot { background: var(--warning); }
body.page-operations .ops-health-main[data-tone="error"] .ops-health-dot { background: var(--danger); }
body.page-operations .ops-health-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.page-operations .ops-health-kicker { color: var(--text-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
body.page-operations .ops-health-copy strong { font-size: 14.5px; }
body.page-operations .ops-health-copy span:last-child { color: var(--text-muted); font-size: 12.5px; }
body.page-operations .ops-health-copy span:last-child:empty { display: none; }
body.page-operations .ops-health-metric { display: flex; align-items: baseline; gap: 8px; }
/* Pedidos recentes — toolbar dentro do painel, presets em bronze. */
body.page-operations .filter-presets button.active {
background: var(--brand-bronze-soft);
border-color: transparent;
border-bottom: 2px solid var(--brand-bronze);
color: var(--brand-bronze);
font-weight: 700;
}
body.page-operations .table-toolbar .filter-search { min-width: 200px; }
body.page-operations .table-scroll .data-table { min-width: 0; }
body.page-operations .ops-col-status { white-space: nowrap; }
body.page-operations .ops-col-date { white-space: nowrap; }
body.page-operations .ops-col-product { width: 100%; max-width: 0; }
body.page-operations .ops-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Status de pedido: só "Concluído" ganha cor semântica; pendente/cancelado/
não pago ficam neutros (não reinterpretar como erro). O texto do status
continua sempre visível. */
body.page-operations .ops-orders .status-dot-pending,
body.page-operations .ops-orders .status-dot-cancelled,
body.page-operations .ops-orders .status-dot-other { background: var(--text-faint); }
@media (min-width: 641px) and (max-width: 1100px) {
body.page-operations .ops-name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
white-space: normal;
overflow-wrap: anywhere;
}
}
@media (max-width: 860px) {
body.page-operations .table-toolbar { flex-direction: column; align-items: stretch; }
body.page-operations .table-toolbar .filter-search { min-width: 0; }
}
@media (max-width: 640px) {
body.page-operations .ops-source-grid { grid-template-columns: 1fr; }
body.page-operations .ops-health { align-items: flex-start; }
body.page-operations .ops-health-metric { width: 100%; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 10px; }
body.page-operations .integration-row-action,
body.page-operations .filter-presets button,
body.page-operations .table-toolbar input[type="search"],
body.page-operations .table-toolbar select { min-height: 40px; }
body.page-operations .filter-presets { flex-wrap: wrap; }
/* Linha de pedido vira cartão: produto (até 2 linhas) primeiro, depois
Data/Status/Comissão com rótulo. Sem scroll horizontal. */
body.page-operations .ops-orders.table-scroll { overflow-x: visible; }
body.page-operations .ops-orders .data-table { display: block; width: 100%; }
body.page-operations .ops-orders thead { display: none; }
body.page-operations .ops-orders tbody { display: flex; flex-direction: column; gap: 10px; }
body.page-operations .ops-orders tr {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px 14px;
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 12px 14px;
}
body.page-operations .ops-orders td { display: block; min-width: 0; padding: 0; border-bottom: 0; }
body.page-operations .ops-orders td.ops-col-product { grid-column: 1 / -1; order: -1; width: auto; max-width: none; font-weight: 700; font-size: 14px; }
body.page-operations .ops-orders td.num { grid-column: 1 / -1; text-align: left; }
body.page-operations .ops-orders td[data-label]::before {
content: attr(data-label);
display: block;
color: var(--text-faint);
font-size: 10.5px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 2px;
}
body.page-operations .ops-name {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
white-space: normal;
overflow-wrap: anywhere;
}
}
/* ==========================================================================
IMPLEMENTATION-06-ACCOUNT-SUBSCRIPTION-V1.1 — Conta + Assinatura V1.1.
Escopado a body.page-account e body.page-subscription (só existem em
account.html/subscription.html): .drawer-meta, .panel-link, .link-button e
.panel-note são compartilhados com outras páginas e não podem mudar de
aparência lá. --accent (laranja legado) NÃO é alterado globalmente. Bronze
só em ação/foco; estados comerciais usam tokens semânticos (success/
warning/loading) e SEMPRE têm texto. Nenhuma lógica de Auth/Billing muda.
========================================================================== */
body.page-account .account-stack,
body.page-subscription .subscription-stack {
display: flex;
flex-direction: column;
gap: var(--space-3);
max-width: 720px;
min-width: 0;
}
body.page-account .account-stack .panel,
body.page-subscription .subscription-stack .panel { margin-bottom: 0; min-width: 0; }
/* Estado comercial / conexão: ponto + texto (nunca só cor). */
body.page-account .account-status,
body.page-subscription .account-status {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 13px;
font-weight: 650;
color: var(--loading);
}
body.page-account .account-status::before,
body.page-subscription .account-status::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: currentColor;
flex: none;
}
body.page-account .account-status[data-tone="ok"],
body.page-subscription .account-status[data-tone="ok"] { color: var(--success); }
body.page-account .account-status[data-tone="warn"],
body.page-subscription .account-status[data-tone="warn"] { color: var(--warning); }
body.page-account .account-status[data-tone="info"],
body.page-subscription .account-status[data-tone="info"] { color: var(--loading); }
body.page-account .account-status[data-tone="pending"],
body.page-subscription .account-status[data-tone="pending"],
body.page-account .account-status[data-tone="neutral"],
body.page-subscription .account-status[data-tone="neutral"] { color: var(--text-muted); }
/* CONTA — identidade compacta (nome em destaque, sem card vazio). */
body.page-account .account-person { display: flex; align-items: center; gap: 16px; min-width: 0; }
body.page-account .account-avatar {
flex: none;
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: var(--brand-navy);
color: #fff;
font-size: 20px;
font-weight: 700;
}
body.page-account .account-meta { margin: 0; grid-template-columns: minmax(0, 1fr); gap: 2px; min-width: 0; flex: 1; }
body.page-account .account-meta dt { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
body.page-account .account-meta dd { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
/* CONTA — fonte de dados: só o estado resumido + caminho para gerenciar. */
body.page-account .account-source-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
body.page-account .account-source-name { font-size: 14.5px; }
body.page-account .account-source .panel-note,
body.page-account .account-subscription .panel-note { margin-top: 10px; }
body.page-account .panel-note a,
body.page-account .panel-link { color: var(--brand-bronze); font-weight: 600; }
body.page-account .panel-link { display: inline-block; margin-top: 12px; min-height: 24px; }
body.page-account .panel-note a:focus-visible,
body.page-account .panel-link:focus-visible { outline: 2px solid var(--brand-bronze); outline-offset: 2px; border-radius: 2px; }
body.page-account .account-subscription .drawer-meta { align-items: center; }
body.page-account .account-subscription .drawer-meta dd { overflow-wrap: anywhere; }
/* ASSINATURA — plano atual → estado/validade → ação → auxiliar. */
body.page-subscription .subscription-panel { padding: 22px 24px; }
body.page-subscription .subscription-eyebrow { margin: 0 0 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
body.page-subscription .subscription-plan { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 18px; }
body.page-subscription .subscription-plan-name { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; }
body.page-subscription .subscription-plan-price { font-size: 16px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }
body.page-subscription .subscription-status-block { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-top: 16px; border-top: 1px solid var(--border); }
body.page-subscription .subscription-headline { margin: 0; font-size: 17px; font-weight: 700; }
body.page-subscription .subscription-panel .panel-note { margin: 8px 0 0; overflow-wrap: anywhere; }
body.page-subscription .subscription-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 18px; }
body.page-subscription .subscription-actions:empty,
body.page-subscription .subscription-actions:not(:has(button:not([hidden]))) { display: none; }
/* Ação principal (reativar) em bronze; cancelar é ação destrutiva
SECUNDÁRIA — texto discreto, nunca um botão vermelho grande; a cor de
perigo só aparece no hover/foco da confirmação. */
body.page-subscription .subscription-action-primary {
min-height: 44px;
padding: 0 20px;
border-radius: var(--radius-sm);
background: var(--brand-bronze);
color: #fff;
font-weight: 650;
text-decoration: none;
}
body.page-subscription .subscription-action-primary:hover { background: var(--brand-bronze); color: #fff; filter: brightness(0.92); }
body.page-subscription .subscription-action-quiet {
min-height: 44px;
padding: 0 4px;
color: var(--text-muted);
font-weight: 600;
font-size: 13px;
text-decoration: underline;
text-underline-offset: 3px;
}
body.page-subscription .subscription-action-quiet:hover { color: var(--danger); }
body.page-subscription .subscription-aux { padding: 0 4px; }
body.page-subscription .subscription-action-secondary {
min-height: 44px;
padding: 0 18px;
border: 1px solid var(--border-strong);
border-radius: var(--radius-sm);
background: var(--surface);
color: var(--text);
font-weight: 650;
text-decoration: none;
}
body.page-subscription .subscription-action-secondary:hover { border-color: var(--brand-bronze); color: var(--brand-bronze); background: var(--surface); }
body.page-subscription .link-button:disabled { opacity: 0.55; cursor: not-allowed; }
body.page-subscription .link-button:focus-visible { outline: 2px solid var(--brand-bronze); outline-offset: 2px; }
@media (max-width: 640px) {
body.page-subscription .subscription-panel { padding: 18px 16px; }
body.page-subscription .subscription-plan-name { font-size: 24px; }
body.page-subscription .subscription-actions { flex-direction: column; align-items: stretch; }
body.page-subscription .subscription-action-primary { width: 100%; }
body.page-subscription .subscription-action-quiet { align-self: center; }
body.page-subscription .subscription-action-secondary { width: 100%; }
body.page-account .panel-link { min-height: 40px; display: inline-flex; align-items: center; }
}
/* ==========================================================================
IMPLEMENTATION-07-AUTH-ENTRY-V1.1 — Entrada / autenticação V1.1.
Escopado a body.login-body (login, signup, reset-password, auth-callback,
onboarding: as páginas pré-auth/primeira entrada) e às classes exclusivas
do overlay comercial (.commercial-lock-*). .login-card button, .link-button,
.integration-row-action-primary e .click-import-result são compartilhados
com o app autenticado e NÃO mudam lá. --accent (laranja legado) NÃO é
alterado globalmente. Bronze só em ação/foco; erro = danger, loading =
neutro. Nenhuma lógica de Auth/sessão/redirect/comercial muda aqui.
========================================================================== */
body.login-body {
box-sizing: border-box;
min-height: 100vh;
padding: 24px 16px;
background:
radial-gradient(900px 480px at 50% -12%, rgba(16, 18, 26, 0.07) 0%, transparent 65%),
var(--bg);
}
body.login-body .login-card {
max-width: 400px;
padding: 36px 32px 30px;
border-top: 3px solid var(--brand-navy);
box-shadow: var(--shadow-md);
}
body.login-body .login-card.onboarding-card { max-width: 440px; }
/* O asset da logo tem respiro transparente embutido (acima/abaixo/esquerda); compensa para o título e o cartão ficarem próximos da marca. */
body.login-body .login-logo { max-width: 200px; margin: -26px 0 -22px -12px; }
/* Título / contexto (só login.html usa estas classes). */
body.login-body .login-card .login-title { margin: 14px 0 6px; font-size: 17px; font-weight: 700; color: var(--text); }
body.login-body .login-card .login-context { margin: 0 0 22px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
/* Campos: alvo de toque de 44px, foco bronze. */
body.login-body .login-card input { min-height: 44px; box-sizing: border-box; }
body.login-body .login-card input:focus-visible { outline: 2px solid var(--brand-bronze); outline-offset: 1px; }
body.login-body .password-toggle:focus-visible { outline: 2px solid var(--brand-bronze); outline-offset: 1px; }
/* CTA Google: primeiro, largo e com peso — o caminho principal quando existe
(o atributo hidden precisa continuar valendo: display:flex o anularia). */
body.login-body .google-signin-button {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 48px;
border: 1.5px solid var(--brand-navy) !important;
color: var(--brand-navy) !important;
background: var(--surface) !important;
font-size: 15px;
font-weight: 700;
}
body.login-body .google-signin-button[hidden] { display: none; }
/* Idem para o divisor "ou": sem Google disponível ele não deve aparecer sozinho. */
body.login-body .login-divider[hidden] { display: none; }
body.login-body .google-signin-button::before {
content: "";
flex: none;
width: 18px;
height: 18px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.5 0 6.6 1.2 9.1 3.6l6.8-6.8C35.9 2.4 30.4 0 24 0 14.6 0 6.5 5.4 2.6 13.2l7.9 6.1C12.4 13.6 17.7 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.5-4.8 7.2l7.6 5.9c4.4-4.1 7-10.1 7-17.6z'/%3E%3Cpath fill='%23FBBC05' d='M10.5 28.7A14.5 14.5 0 0 1 9.5 24c0-1.6.3-3.2.8-4.7l-7.9-6.1A24 24 0 0 0 0 24c0 3.9.9 7.5 2.6 10.8l7.9-6.1z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.5 0 11.9-2.1 15.9-5.8l-7.6-5.9c-2.1 1.4-4.9 2.3-8.3 2.3-6.3 0-11.6-4.1-13.5-9.8l-7.9 6.1C6.5 42.6 14.6 48 24 48z'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.login-body .google-signin-button:hover { background: var(--surface-sunken) !important; }
body.login-body .google-signin-button:focus-visible { outline: 2px solid var(--brand-bronze); outline-offset: 2px; }
body.login-body .google-signin-button:disabled { opacity: 0.6; cursor: not-allowed; }
/* Ação de envio (Entrar/Criar conta/...) em bronze, nunca laranja legado. */
body.login-body .login-card button[type="submit"] {
min-height: 46px;
background: var(--brand-bronze);
color: #fff;
font-size: 14.5px;
}
body.login-body .login-card button[type="submit"]:hover:not(:disabled) { background: var(--brand-bronze); filter: brightness(0.92); }
body.login-body .login-card button[type="submit"]:focus-visible { outline: 2px solid var(--brand-bronze); outline-offset: 2px; }
body.login-body .login-card button[type="submit"]:disabled { opacity: 0.6; cursor: not-allowed; }
/* Erro real de autenticação: danger com marca lateral, sem detalhe técnico. */
body.login-body .login-error { border-left: 3px solid var(--danger); font-weight: 500; line-height: 1.45; }
/* Links de apoio: bronze + foco visível, alvo de toque generoso. */
body.login-body .login-hint { font-size: 12.5px; }
body.login-body .login-hint a,
body.login-body .login-back { color: var(--brand-bronze); font-weight: 650; }
body.login-body .login-back { display: inline-flex; align-items: center; min-height: 40px; margin-top: 8px; font-size: 12.5px; }
body.login-body .login-back:hover { color: var(--brand-bronze); }
body.login-body .login-hint a:focus-visible,
body.login-body .login-back:focus-visible { outline: 2px solid var(--brand-bronze); outline-offset: 2px; border-radius: 2px; }
body.login-body .login-card button.link-button:hover { color: var(--brand-bronze); }
/* Onboarding (primeira entrada real): ação primária bronze; sucesso com tokens
semânticos, não com o laranja legado. */
body.login-body .integration-row-action-primary { background: var(--brand-bronze); border-color: var(--brand-bronze); color: #fff; }
body.login-body .integration-row-action-primary:hover { background: var(--brand-bronze); border-color: var(--brand-bronze); filter: brightness(0.92); }
body.login-body .integration-row-action { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
body.login-body .integration-row-action:focus-visible { outline: 2px solid var(--brand-bronze); outline-offset: 2px; }
body.login-body .click-import-result.success { background: var(--success-bg); color: var(--success); }
/* Overlay comercial pós-trial (classes exclusivas): CTA e seleção em bronze;
o preço deixa de ser laranja (não é status nem ação). */
.commercial-lock-cta { background: var(--brand-bronze); min-height: 46px; }
.commercial-lock-cta:hover:not(:disabled) { background: var(--brand-bronze); filter: brightness(0.92); }
.commercial-lock-cta:focus-visible,
.commercial-lock-feedback-options button:focus-visible,
.commercial-lock-logout:focus-visible { outline: 2px solid var(--brand-bronze); outline-offset: 2px; }
.commercial-lock-plan-price { color: var(--text); }
.commercial-lock-card .commercial-lock-logout { color: var(--text-muted); font-size: 13px; min-height: 40px; text-decoration: underline; text-underline-offset: 3px; }
.commercial-lock-card .commercial-lock-logout:hover { color: var(--text); }
.commercial-lock-feedback-options button { min-height: 40px; }
.commercial-lock-feedback-options button:hover:not(:disabled) { border-color: var(--brand-bronze); color: var(--brand-bronze); }
.commercial-lock-feedback-options button.commercial-lock-feedback-selected { background: var(--brand-bronze-soft); border-color: var(--brand-bronze); color: var(--brand-bronze); }
@media (max-width: 480px) {
body.login-body { padding: 16px 12px; }
body.login-body .login-card { padding: 28px 20px 22px; }
body.login-body .login-card .login-context { margin-bottom: 18px; }
.commercial-lock-card { padding: 22px 18px; }
}
/* ==========================================================================
IMPLEMENTATION-07.1-RELEASE-CLEANUP — Mídia Paga: overflow horizontal da
PÁGINA em ~1024px. Causa raiz medida no candidate real: o span .sr-only
("Detalhes", th.campaign-expand-col) é position:absolute e TODOS os seus
ancestrais eram position:static (inclusive o .table-scroll, que só tem
overflow-x:auto — overflow sozinho NÃO cria containing block para
descendentes absolutos). O bloco de contenção virava a viewport e o
elemento ficava na posição estática dentro da tabela (x≈1029, além dos
1009px visíveis), ampliando o scrollWidth do documento em ~20px mesmo com
a tabela rolando por dentro (803/699). position:relative no próprio
.table-scroll faz o .sr-only ser contido e recortado por ele. O texto
continua no DOM e acessível (nenhum display:none / visibility). Escopado a
body.page-paid-media: as outras páginas não têm .sr-only em tabela.
========================================================================== */
body.page-paid-media .table-scroll { position: relative; }
/* ==========================================================================
AUTO-REFRESH-20M — bloco informativo "Dados Shopee" (Visão Geral). Sem botão: a atualização é
automática e global. Reaproveita os tokens existentes; sem identidade nova. Estados via
[data-state]/[data-tone]. Não declara display no elemento raiz, então o atributo [hidden] vale.
========================================================================== */
.auto-refresh {
max-width: 720px;
margin: -6px 0 20px;
padding: 10px 13px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow-sm);
font-size: 13px;
line-height: 1.45;
color: var(--text-muted);
}
.auto-refresh > span { display: block; overflow-wrap: anywhere; }
.auto-refresh-title { color: var(--text); font-size: 13.5px; font-weight: 700; }
.auto-refresh-message { margin-top: 2px; color: var(--text); font-weight: 600; }
.auto-refresh-message:empty { margin-top: 0; }
.auto-refresh[data-tone="ok"] .auto-refresh-message { color: var(--success); }
.auto-refresh-info { margin-top: 2px; font-size: 12.5px; }
@media (max-width: 560px) {
.auto-refresh { margin-top: 0; }
}
|