/* ===== PAINEL DA DISCADORA MB VOZ — estilos =====
O UNICO arquivo no de voz.html. Tudo mais entra por @import aqui.
Importa as camadas de LAYOUT do CRM em vez de escrever um tema proprio: o pedido
e' "a mesma cara do CRM", e paleta paralela e' garantia de divergir na primeira
mudanca de token — foi o que deixou a primeira versao da tela do Mercado Pago
escura enquanto o CRM e' claro (ver css/mercadopago/index.css).
Contrato visual: docs/DESIGN.md. R1 acento unico #2563eb; R4 --text-muted nao
carrega texto; R5 semanticas fixas; R14/R15 os quatro estados e foco visivel.
ORDEM IMPORTA: tokens -> tema -> layout -> componentes -> tela. */
@import "../../src/styles/base/_tokens.css?v=b8833e81";
@import "../../src/styles/base/_theme.css?v=b8833e81";
@import "../../src/styles/layout/_sidebar.css?v=b8833e81";
@import "../../src/styles/layout/_grid.css?v=b8833e81";
@import "../../src/styles/layout/_tabs.css?v=b8833e81";
/* Modal de "Meu perfil": o comportamento vem do supabase-auth.js, que a pagina ja'
carrega. Sem este CSS ele abriria sem estilo nenhum. */
@import "../../src/styles/components/_profile-modal.css?v=b8833e81";
:root {
/* R1: um acento so'. O token global --blue e' #3b82f6, que reprova contraste com
texto branco (3,68); o acento do contrato e' este. */
--voz-acento: #2563eb;
--voz-acento-forte: #1d4ed8;
/* R4: --text-muted (#94a3b8) nao passa em WCAG AA como texto. Este e' o cinza
mais claro que passa nos dois fundos da tela. */
--voz-terciario: #667085;
/* R5: semanticas. Atencao e' o amarelo do contrato, nao o --yellow do token. */
--voz-atencao: #d97706;
--voz-erro: #ef4444;
}
/* `hidden` tem que vencer o `display` das regras abaixo. Sem isto, esconder a faixa
de avisos ou a coluna de custo simplesmente nao funciona em elemento com display
declarado — e a tela mostraria a coluna vazia como se fosse dado. */
[hidden] { display: none !important; }
/* O corpo e' uma coluna de altura cheia para `.app` (flex:1) preencher a tela. No
index.html isso vem do CSS da pagina; aqui e' declarado porque esta pagina nao
carrega `pages/index.css`. */
body.voz-app {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
background: var(--bg-base);
color: var(--text-primary);
/* SEM font-family: a do CRM e' `body { font-family: 'Inter', sans-serif }`, em
src/styles/components/_profile-modal.css, ja importado acima. A declaracao daqui
vencia por especificidade e trazia a pilha do sistema atras do Inter — com a fonte
nao carregada, virava Segoe UI e so' esta tela destoava. Herdar mantem igual. */
}
/* ── Coluna da tela ────────────────────────────────────────────────────────────
Rolagem propria: `.content-area` do CRM e' flex com overflow hidden, entao quem
rola tem que ser o filho. */
.voz-wrap {
flex: 1;
min-width: 0;
min-height: 0;
overflow-y: auto;
padding: 20px 24px 40px;
display: flex;
flex-direction: column;
gap: 16px;
}
.voz-titulo-linha { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.voz-titulo { font-size: 18px; font-weight: 700; color: var(--text-primary); }
.voz-sub { font-size: 12.5px; color: var(--text-secondary); }
/* ── Filtro de periodo ─────────────────────────────────────────────────────── */
.voz-filtro {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
padding: 10px 12px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
}
.voz-preset {
font: inherit;
font-size: 12.5px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid var(--border);
background: var(--bg-card2);
color: var(--text-secondary);
cursor: pointer;
}
.voz-preset:hover { color: var(--text-primary); border-color: var(--voz-acento); }
.voz-preset:active { transform: translateY(1px); }
.voz-preset-on {
background: var(--voz-acento);
border-color: var(--voz-acento);
color: #fff;
font-weight: 600;
}
.voz-preset-on:hover { color: #fff; }
.voz-filtro-sep { width: 1px; height: 20px; background: var(--border); margin: 0 4px; }
.voz-rot { font-size: 12px; color: var(--text-secondary); }
.voz-data {
font: inherit;
font-size: 12.5px;
padding: 5px 8px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--bg-input);
color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
.voz-aplicar {
font: inherit;
font-size: 12.5px;
font-weight: 600;
padding: 6px 14px;
border-radius: 8px;
border: 1px solid var(--voz-acento);
background: var(--voz-acento);
color: #fff;
cursor: pointer;
}
.voz-aplicar:hover { background: var(--voz-acento-forte); border-color: var(--voz-acento-forte); }
.voz-aplicar:active { transform: translateY(1px); }
.voz-aplicar[disabled] { opacity: .55; cursor: default; transform: none; }
/* R15: o foco de teclado nunca some. Mesmo padrao do login (box-shadow no lugar
do outline), para o anel aparecer tambem sobre fundo colorido. */
.voz-preset:focus-visible,
.voz-aplicar:focus-visible,
.voz-data:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .35);
}
/* ── Faixa de avisos ───────────────────────────────────────────────────────────
Aviso aqui NUNCA e' decorativo: ele aparece justamente quando os numeros nao
podem ser lidos como resultado (view ausente, evento que nao forma ligacao,
acesso negado). Por isso ocupa a largura toda, acima do dado. */
.voz-aviso {
padding: 11px 14px;
border-radius: 10px;
font-size: 13px;
line-height: 1.5;
border: 1px solid var(--voz-atencao);
background: var(--yellow-dim);
color: var(--text-primary);
}
.voz-aviso-erro { border-color: var(--voz-erro); background: var(--red-dim); }
.voz-aviso-titulo { font-weight: 700; display: block; margin-bottom: 2px; }
/* ── Cartoes do total ──────────────────────────────────────────────────────── */
.voz-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
.voz-card {
padding: 12px 14px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
display: flex;
flex-direction: column;
gap: 3px;
}
.voz-card-rot {
font-size: 11.5px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: .3px;
}
.voz-card-num {
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
/* Numero em coluna com largura de digito fixa: sem isto, comparar duas linhas
vira leitura caractere a caractere. */
font-variant-numeric: tabular-nums;
}
.voz-card-pe { font-size: 11.5px; color: var(--voz-terciario); }
/* Estimativa tem cor propria E rotulo escrito. So' a cor nao informa nada a quem
nunca leu a legenda — e caixa postal aqui e' palpite, nunca fato. */
.voz-card-est .voz-card-num { color: var(--voz-atencao); }
.voz-card-def .voz-card-num { color: var(--voz-erro); }
/* ── Tabela por consultor ──────────────────────────────────────────────────── */
.voz-tabela-caixa {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: 10px;
overflow-x: auto;
}
.voz-tabela {
width: 100%;
border-collapse: collapse;
font-size: 13px;
/* Toda a tabela e' numero em coluna, menos a primeira celula. */
font-variant-numeric: tabular-nums;
}
.voz-tabela th,
.voz-tabela td {
padding: 9px 12px;
text-align: right;
white-space: nowrap;
border-bottom: 1px solid var(--border2);
}
.voz-tabela th {
font-size: 11.5px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: .3px;
position: sticky;
top: 0;
background: var(--bg-card2);
}
.voz-tabela th:first-child,
.voz-tabela td:first-child {
text-align: left;
font-variant-numeric: normal;
}
.voz-tabela tbody tr:hover td { background: var(--bg-card2); }
.voz-tabela tfoot td {
font-weight: 700;
color: var(--text-primary);
border-top: 2px solid var(--border);
border-bottom: none;
}
.voz-nome-sem { color: var(--voz-terciario); font-style: italic; }
.voz-vazio {
padding: 22px 14px;
text-align: center;
color: var(--text-secondary);
font-size: 13px;
}
/* ── Usuario na sidebar ────────────────────────────────────────────────────── */
.voz-user { display: flex; align-items: center; gap: 10px; padding: 8px 4px; width: 100%; }
.voz-user-avatar {
width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
background: var(--voz-acento); color: #fff; font-size: 13px; font-weight: 700;
overflow: hidden;
}
.voz-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.voz-user-info { flex: 1; min-width: 0; }
.voz-user-nome {
font-size: 12px; font-weight: 600; color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.voz-user-role { font-size: 10px; color: var(--text-secondary); }
/* ── Caminho de volta para o CRM ──────────────────────────────────────────────
Adicionado em 20/08/2026. A pagina era porta de mao unica: o gestor chegava pelo
menu do index.html e so' saia pelo botao do navegador ou deslogando.
Sao de verdade (nao data-click) porque o dispatcher central nao e' carregado
aqui e link real ainda permite abrir em nova aba com o clique do meio. O unico
ajuste que eles pedem e' o sublinhado — o resto vem das classes `.sidebar-item` e
`.tab-item`, que ja' existem no layout do CRM.
No CSS e nao inline: `voz.html` proibe `style=`, e ha' teste cobrando
(ops/tests/voz-painel-front.js). */
.sidebar-item[href],
.tab-item[href] { text-decoration: none; color: inherit; }
/* `.tab-item` e' montado por JS no CRM e nasce como