/* ============================================================
SKAG Painel — Identidade Visual
============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body, #root { height: 100%; }
body {
font-family: 'Inter', system-ui, -apple-system, sans-serif;
background: var(--bg-base);
color: var(--text);
-webkit-font-smoothing: antialiased;
font-size: var(--fs-corpo, 15px);
line-height: 1.5;
}
a { color: var(--skag-orange); text-decoration: none; }
/* ============================================================
Tokens de cor por status
============================================================ */
:root {
/* PAPEL DAS CORES (paleta oficial — card 200):
--skag-orange = O accent. Só pra AÇÃO/ATENÇÃO: CTA primário, estado ativo/
seleção, alerta em foco. Rótulo, valor, borda e chrome NÃO
usam accent: ficam nos cinzas (tokens de texto e borda).
--status-... = semáforo de status (ok/atenção/erro), não é decoração.
--navy-... = superfície secundária da planilha de Ads. */
--skag-orange: #E8611A;
--skag-orange-hover: #F07228;
/* Escada de elevação por TOM (Material 3): quanto mais alta a camada, mais claro
o fundo — em tema escuro sombra não separa nada. fundo < seção < card < flutuante. */
--bg-base: #121212;
--bg-surface: #1D1D1D;
--bg-elev: #282828;
--bg-pop: #323232;
--border: #363636;
/* Texto em 3 níveis + destaque: corpo em branco QUEBRADO (#FFF puro vibra/halation
no escuro); o branco cheio (--text-hi) é reservado pro topo (título da página,
número de KPI). Hierarquia = tamanho + peso, não cor. */
--text-hi: #FFFFFF;
--text: #E4E4E4;
--text-dim: #A0A0A0;
--text-faint: #6B6B6B;
/* Escala tipográfica oficial (3 tamanhos + o gigante de KPI). Componente novo deve
usar a escala em vez de inventar px. */
--fs-corpo: 15px;
--fs-sub: 17px;
--fs-titulo: 22px;
--fs-display: 32px;
/* Superfície "navy" secundária (grid de Ads, painéis) */
--navy-bg: #1A1A2E;
--navy-line: #2A2A3E;
--navy-head: #23233a;
--navy-grupo: #20203A;
--navy-elev: #3A3A4E;
--navy-accent: #55556f;
--navy-risk: #2A1818;
--busca-hl: #3A2A1B;
--busca-hl-hover: #4A3620;
--status-pendente: #6B6B6B;
--status-resolvido: #10B981;
--status-cliente: #F59E0B;
--status-skag: #EF4444;
--status-na: #6B6B6B;
/* Items de tarefa em fundo branco com texto preto pra contraste */
--item-bg: #FFFFFF;
--item-bg-hover: #F8F8F8;
--item-text: #0F0F0F;
--item-text-dim: #5A5A5A;
--item-text-faint: #888888;
--item-border: #E5E5E5;
}
/* ============================================================
MODO CLARO (opcional) — escuro é o padrão.
Redefine só os tokens de superfície/texto; o resto do CSS
usa var() e vira junto. Ligado via data-theme="light" no .
============================================================ */
:root[data-theme="light"] {
--bg-base: #F3F4F6;
--bg-surface: #FFFFFF;
--bg-elev: #E9EAEE;
--bg-pop: #FFFFFF; /* no claro a sombra volta a funcionar; flutuante fica branco */
--border: #DDDEE3;
--text-hi: #0E0F12;
--text: #17181C;
--text-dim: #5A5C63;
--text-faint: #8A8C93;
/* Navy secundário no claro: vira superfície clara (texto escuro fica legível) */
--navy-bg: #FFFFFF;
--navy-line: #DDDEE3;
--navy-head: #ECEDF1;
--navy-grupo: #F1F2F5;
--navy-elev: #D3D4DB;
--navy-accent: #C2C2CE;
--navy-risk: #FBE3E3;
--busca-hl: #FCE7D3;
--busca-hl-hover: #F8D9BC;
/* Items de tarefa: no claro o fundo branco some na superfície branca,
então usa um cinza clarinho pra ilha continuar destacando. */
--item-bg: #EEF0F3;
--item-bg-hover: #E4E7EB;
--item-text: #17181C;
--item-text-dim: #5A5C63;
--item-text-faint: #8A8C93;
--item-border: #DDDEE3;
}
/* ============================================================
Botões
============================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 10px 18px; border-radius: 10px; border: none; cursor: pointer;
font-family: inherit; font-size: 14px; font-weight: 600; gap: 8px;
transition: transform 0.05s, opacity 0.15s, background 0.15s;
white-space: nowrap;
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--skag-orange); color: #FFFFFF; }
.btn-primary:hover:not(:disabled) { background: var(--skag-orange-hover); }
.btn-ghost { background: transparent; color: var(--text-dim); border: 1px solid var(--border); }
.btn-ghost:hover { background: var(--bg-surface); color: var(--text); }
.btn-success { background: var(--status-resolvido); color: #FFFFFF; }
.btn-danger { background: transparent; color: var(--status-skag); border: 1px solid var(--status-skag); }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
/* ============================================================
Form
============================================================ */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; font-weight: 500; color: var(--text-dim); }
.field input, .field textarea, .field select {
background: var(--bg-base); color: var(--text);
border: 1px solid var(--border); border-radius: 10px;
padding: 12px 14px; font-family: inherit; font-size: 14px;
outline: none; transition: border-color 0.15s;
width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus {
border-color: var(--skag-orange);
}
.field textarea { resize: vertical; min-height: 80px; }
.field-hint { font-size: 12px; color: var(--text-faint); }
.checkbox-row {
display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer;
user-select: none;
}
.checkbox-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--skag-orange); }
.error-msg { color: var(--status-skag); font-size: 13px; margin-top: 6px; }
.success-msg { color: var(--status-resolvido); font-size: 13px; margin-top: 6px; }
/* ============================================================
Login
============================================================ */
.login-wrap {
display: flex; align-items: center; justify-content: center;
min-height: 100vh; padding: 20px;
position: relative;
overflow: hidden; /* burst não vaza pra scroll */
}
.login-card {
background: var(--bg-surface); border-radius: 16px; padding: 40px 32px;
width: 100%; max-width: 380px;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
position: relative;
z-index: 2;
transition: box-shadow 0.3s ease;
}
/* === Transição cinematic ao logar com sucesso === */
.login-wrap.logging-in .login-card {
animation: login-card-launch 1.1s cubic-bezier(0.55, 0, 0.1, 1) forwards;
box-shadow: 0 0 0 1px rgba(232,97,26,0.6),
0 10px 60px rgba(232,97,26,0.5),
0 0 120px rgba(232,97,26,0.25);
}
@keyframes login-card-launch {
0% { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
18% { transform: scale(1.03) translateY(-4px); opacity: 1; filter: blur(0); }
55% { transform: scale(1.10) translateY(-12px); opacity: 0.85; filter: blur(2px); }
100% { transform: scale(1.45) translateY(-40px); opacity: 0; filter: blur(14px); }
}
/* Flash laranja varre a tela */
.login-flash {
position: fixed; inset: 0;
background: radial-gradient(circle at center,
rgba(255, 170, 90, 0.9) 0%,
rgba(232, 97, 26, 0.6) 25%,
rgba(232, 97, 26, 0.15) 50%,
rgba(15, 15, 15, 0) 70%);
pointer-events: none;
z-index: 3;
opacity: 0;
animation: login-flash 1.1s ease-out forwards;
}
@keyframes login-flash {
0% { opacity: 0; transform: scale(0.3); }
20% { opacity: 0.9; transform: scale(1); }
60% { opacity: 0.6; transform: scale(1.4); }
100% { opacity: 0; transform: scale(1.8); }
}
/* Burst: 8 partículas voando do centro pra fora */
.login-burst {
position: fixed; top: 50%; left: 50%;
width: 0; height: 0;
pointer-events: none;
z-index: 4;
}
.login-burst span {
position: absolute;
top: 0; left: 0;
width: 8px; height: 8px;
border-radius: 50%;
background: radial-gradient(circle, #FFAA60 0%, #E8611A 60%, transparent 100%);
box-shadow: 0 0 12px #E8611A;
animation: login-burst 0.9s cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}
.login-burst span:nth-child(1) { --dx: 0px; --dy: -300px; animation-delay: 0.05s; }
.login-burst span:nth-child(2) { --dx: 220px; --dy: -220px; animation-delay: 0.10s; }
.login-burst span:nth-child(3) { --dx: 320px; --dy: 0px; animation-delay: 0.05s; }
.login-burst span:nth-child(4) { --dx: 220px; --dy: 220px; animation-delay: 0.15s; }
.login-burst span:nth-child(5) { --dx: 0px; --dy: 300px; animation-delay: 0.10s; }
.login-burst span:nth-child(6) { --dx:-220px; --dy: 220px; animation-delay: 0.05s; }
.login-burst span:nth-child(7) { --dx:-320px; --dy: 0px; animation-delay: 0.15s; }
.login-burst span:nth-child(8) { --dx:-220px; --dy: -220px; animation-delay: 0.10s; }
@keyframes login-burst {
0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
10% { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }
100% {
transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.3);
opacity: 0;
}
}
/* Respeita preferência de menos movimento */
@media (prefers-reduced-motion: reduce) {
.login-wrap.logging-in .login-card { animation: none; opacity: 0; }
.login-flash, .login-burst { display: none; }
}
/* ============================================================
Header user — botão "Olá, [nome]" clicável que abre Meu Perfil
============================================================ */
.header-user-btn {
background: transparent;
border: 1px solid transparent;
color: #B5B5C8;
font-size: 14px;
padding: 6px 12px;
border-radius: 8px;
cursor: pointer;
transition: all 0.15s ease;
font-family: inherit;
}
.header-user-btn:hover {
background: rgba(232, 97, 26, 0.08);
border-color: rgba(232, 97, 26, 0.25);
color: var(--text);
}
.header-user-btn strong { color: var(--text); font-weight: 600; }
.header-user-btn:hover strong { color: #FF7530; }
/* ============================================================
MeuPerfilModal — overlay + card com tabs "Dados" / "Senha"
============================================================ */
.perfil-overlay {
position: fixed; inset: 0;
background: rgba(15, 15, 15, 0.78);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 9000;
display: flex; align-items: center; justify-content: center;
padding: 24px;
animation: perfil-fade-in 0.2s ease-out;
}
@keyframes perfil-fade-in { from { opacity: 0; } to { opacity: 1; } }
.perfil-modal {
background: linear-gradient(180deg, var(--navy-bg) 0%, #16162A 100%);
border: 1px solid var(--navy-line);
border-radius: 16px;
width: 100%;
max-width: 460px;
max-height: calc(100vh - 48px);
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(232, 97, 26, 0.15);
animation: perfil-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes perfil-pop {
from { opacity: 0; transform: scale(0.92) translateY(10px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.perfil-header {
display: flex; align-items: flex-start; justify-content: space-between;
padding: 24px 28px 16px;
border-bottom: 1px solid var(--navy-line);
}
.perfil-header h2 {
margin: 0;
font-size: 20px;
color: var(--text);
font-weight: 700;
}
.perfil-sub {
font-size: 12px;
color: #888;
margin-top: 4px;
letter-spacing: 0.3px;
}
.perfil-close {
background: transparent;
border: none;
color: #888;
font-size: 28px;
line-height: 1;
cursor: pointer;
padding: 0 4px;
transition: color 0.15s ease;
}
.perfil-close:hover { color: var(--text); }
.perfil-tabs {
display: flex;
border-bottom: 1px solid var(--navy-line);
padding: 0 28px;
}
.perfil-tabs button {
background: transparent;
border: none;
color: #888;
font-size: 13px;
font-weight: 500;
padding: 14px 16px;
cursor: pointer;
position: relative;
transition: color 0.15s ease;
font-family: inherit;
}
.perfil-tabs button:hover { color: #B5B5C8; }
.perfil-tabs button.active { color: #E8611A; }
.perfil-tabs button.active::after {
content: '';
position: absolute;
bottom: -1px; left: 16px; right: 16px;
height: 2px;
background: #E8611A;
border-radius: 2px;
}
.perfil-form {
padding: 22px 28px 24px;
display: flex;
flex-direction: column;
gap: 16px;
}
.perfil-form .field { margin: 0; }
.perfil-form .field label {
display: block;
font-size: 12px;
color: #B5B5C8;
margin-bottom: 6px;
font-weight: 500;
}
.perfil-form .field input {
width: 100%;
background: #0F0F1E;
border: 1px solid var(--navy-line);
border-radius: 8px;
padding: 10px 12px;
color: var(--text);
font-size: 14px;
transition: border-color 0.15s ease;
font-family: inherit;
}
.perfil-form .field input:focus {
outline: none;
border-color: #E8611A;
}
.field-hint {
font-size: 11px;
color: #777;
margin-top: 5px;
line-height: 1.4;
}
.perfil-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 4px;
}
.success-msg {
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
color: #10B981;
padding: 10px 12px;
border-radius: 8px;
font-size: 13px;
}
/* ============================================================
PasswordField — input de senha com botão olhinho (toggle visualização)
============================================================ */
.pw-input-wrap {
position: relative;
display: block;
}
.pw-input-wrap input {
/* espaço pra não esbarrar no olhinho */
padding-right: 42px !important;
width: 100%;
}
.pw-toggle {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: #888;
padding: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
transition: color 0.15s ease, background 0.15s ease;
}
.pw-toggle:hover:not(:disabled) {
color: #E8611A;
background: rgba(232, 97, 26, 0.08);
}
.pw-toggle:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.pw-toggle svg {
display: block;
pointer-events: none;
}
/* === Indicador de força da senha === */
.pw-strength {
margin-top: 8px;
}
.pw-strength-bar {
display: flex;
gap: 3px;
height: 4px;
}
.pw-strength-seg {
flex: 1;
background: var(--navy-line);
border-radius: 2px;
transition: background 0.25s ease;
}
.pw-strength-label {
font-size: 11px;
margin-top: 6px;
font-weight: 600;
letter-spacing: 0.3px;
}
.pw-strength-warn {
font-weight: 400;
color: #888;
letter-spacing: 0;
}
.login-logo { margin-bottom: 16px; }
.login-subtitle { color: var(--text-dim); font-size: 13px; margin-bottom: 28px; }
/* Logo SKAG (reproduz a marca: sk[a]g + AGÊNCIA embaixo) */
.logo-skag {
display: inline-flex; flex-direction: column; align-items: flex-start;
line-height: 0.85; user-select: none;
}
.logo-skag-main {
font-family: 'Inter', sans-serif;
font-weight: 800;
letter-spacing: -1.5px;
color: var(--text);
text-transform: lowercase;
}
.logo-skag-accent { color: var(--skag-orange); }
.logo-skag-sub {
font-weight: 700;
letter-spacing: 5px;
color: var(--text-dim);
margin-top: 6px;
align-self: flex-end;
padding-right: 2px;
}
.logo-skag-sm .logo-skag-main { font-size: 24px; }
.logo-skag-sm .logo-skag-sub { font-size: 7px; letter-spacing: 4px; margin-top: 4px; }
.logo-skag-md .logo-skag-main { font-size: 36px; }
.logo-skag-md .logo-skag-sub { font-size: 9px; }
.logo-skag-lg .logo-skag-main { font-size: 52px; letter-spacing: -2px; }
.logo-skag-lg .logo-skag-sub { font-size: 11px; letter-spacing: 7px; margin-top: 8px; }
/* ============================================================
App layout
============================================================ */
.app { display: flex; min-height: 100vh; flex-direction: column; }
.app--solto { padding-bottom: 76px; } /* gramado do Skaguinho — ele passeia aqui sem cobrir conteúdo */
.header {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 20px; background: var(--bg-surface);
border-bottom: 1px solid var(--border);
/* z-index 20 (era 10): o header é sticky, então ele CRIA um contexto de empilhamento.
Tudo que nasce dentro dele (sino de notificações, modal MELHORIAS) fica preso nesse
nível, por mais alto que seja o z-index próprio. Com 10, o cabeçalho congelado das
tabelas da aba Plataformas (thead sticky, z-index 10 a 13, e depois no HTML) ganhava
e aparecia POR CIMA do pop-up. Com 20 o header inteiro passa na frente da tabela.
Fica abaixo dos dropdowns de página (50), toast (100) e overlays (9000+). */
position: sticky; top: 0; z-index: 20;
flex-wrap: wrap; gap: 12px;
}
.header-left { display: flex; align-items: center; gap: 24px; }
.header-brand { display: inline-flex; align-items: center; }
.header-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.header-nav button, .header-nav a {
background: transparent; color: var(--text-dim); border: none; cursor: pointer;
padding: 8px 14px; border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 500;
transition: color 0.15s, background 0.15s; text-decoration: none; display: inline-block; line-height: 1.4;
white-space: nowrap;
}
.header-nav button:hover, .header-nav a:hover { color: var(--text); background: rgba(255,255,255,0.05); }
.header-nav button.active, .header-nav a.active { color: var(--skag-orange); background: rgba(232, 97, 26, 0.1); }
.header-user { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-dim); }
.header-user strong { color: var(--text); font-weight: 500; }
/* Desktop: conteudo ocupa a largura cheia da janela (pedido Carol 14/07) — antes travava em 1400px centralizado, sobrando faixas vazias esq/dir no monitor largo. */
.main { flex: 1; padding: 20px; width: 100%; }
/* EXCECAO: Plataformas e Tarefas ja estao "no tamanho certo" — o app poe .main-capped nelas, reproduzindo EXATAMENTE o .main antigo (cap 1400 centralizado). */
.main.main-capped { max-width: 1400px; margin: 0 auto; }
.page-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 24px; flex-wrap: wrap; gap: 12px;
}
.page-title { font-size: var(--fs-titulo, 22px); font-weight: 600; letter-spacing: -0.3px; color: var(--text-hi); }
.page-subtitle { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.loading { display: flex; align-items: center; justify-content: center; height: 100vh; color: var(--text-dim); }
/* ============================================================
Lista de clientes
============================================================ */
.empty-state {
background: var(--bg-surface); border-radius: 14px; padding: 48px 24px;
text-align: center; color: var(--text-dim);
}
.empty-state h3 { color: var(--text); font-size: 18px; margin-bottom: 8px; }
.client-list { display: grid; gap: 12px; }
.client-card {
background: var(--bg-surface); border-radius: 12px; padding: 16px;
cursor: pointer; transition: transform 0.1s, border-color 0.15s, background 0.15s;
border: 1px solid var(--border);
display: flex; flex-direction: column; gap: 10px;
}
.client-card:hover { border-color: var(--text-faint); background: var(--bg-elev); }
/* O card inteiro é um ; sem este reset o laranja de link vaza pro nome e
pro texto do card (era a maior fonte de ruído da Lista de Clientes). */
.client-card { color: var(--text); }
.client-card-name { color: var(--text-hi); }
.client-card-top {
display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
}
.client-card-name {
font-weight: 700; font-size: 17px; letter-spacing: -0.3px; line-height: 1.2;
}
.client-card-company { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.client-card-stage-pill {
background: var(--bg-elev);
color: var(--text-dim);
font-size: 11px; font-weight: 700;
padding: 4px 10px; border-radius: 100px;
text-transform: uppercase; letter-spacing: 0.4px;
white-space: nowrap;
flex-shrink: 0;
}
.client-card-stage-pill.ativo {
background: rgba(16, 185, 129, 0.12);
color: var(--status-resolvido);
}
.client-card-progress {
display: flex; align-items: center; gap: 10px;
font-size: 12px; color: var(--text-faint);
}
.client-card-progress-bar {
flex: 1; height: 5px; background: var(--bg-base);
border-radius: 100px; overflow: hidden;
}
.client-card-progress-fill {
height: 100%; background: var(--skag-orange);
transition: width 0.3s;
}
.client-card-progress-text { white-space: nowrap; font-weight: 500; }
.client-card-bottom {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
font-size: 12px; color: var(--text-faint);
border-top: 1px solid var(--border);
padding-top: 10px;
}
.client-card-bottom .sep { color: var(--text-faint); opacity: 0.4; }
.client-card-pendencias { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; }
/* Tags minimalistas (texto, sem fundo) */
.tag {
font-size: 12px; color: var(--text-dim);
white-space: nowrap;
}
.tag-list {
display: inline-flex; gap: 4px; flex-wrap: wrap;
font-size: 12px; color: var(--text-dim);
align-items: center;
}
.tag-list .sep { color: var(--text-faint); }
.tag-late { color: var(--status-skag); font-weight: 600; }
.tag-active { color: var(--status-resolvido); font-weight: 600; }
.tag-archived {
color: var(--text-faint); font-weight: 600;
background: rgba(107,107,107,0.15);
padding: 2px 8px; border-radius: 100px;
font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase;
}
.client-card.archived { opacity: 0.7; }
.client-card.archived .client-card-name { color: var(--text-dim); }
/* Badge legado (mantido só pra contagem inline) */
.badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 8px; border-radius: 100px;
font-size: 11px; font-weight: 600;
background: var(--bg-elev); color: var(--text-dim);
white-space: nowrap;
}
/* ============================================================
Card de visualização (Kanban)
============================================================ */
.card-header-info {
background: var(--bg-surface); border-radius: 14px; padding: 18px 20px; margin-bottom: 18px;
}
.card-header-top {
display: flex; align-items: flex-start; justify-content: space-between;
flex-wrap: wrap; gap: 12px; margin-bottom: 14px;
}
.card-header-name { font-size: 22px; font-weight: 600; letter-spacing: -0.3px; }
.card-header-company { color: var(--text-dim); font-size: 14px; margin-top: 2px; }
.progress-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.progress-day {
font-size: 13px; color: var(--text-dim);
padding: 6px 12px; background: var(--bg-base); border-radius: 8px;
}
.progress-day strong { color: var(--text); font-weight: 600; }
.progress-day.late strong { color: var(--status-skag); }
.progress-bar {
flex: 1; min-width: 180px; height: 6px; background: var(--bg-base); border-radius: 100px; overflow: hidden;
}
.progress-bar-fill { height: 100%; background: var(--skag-orange); transition: width 0.3s; }
.progress-bar-fill.late { background: var(--status-skag); }
.columns-grid {
display: grid; gap: 16px;
grid-auto-flow: column;
grid-auto-columns: minmax(240px, 1fr);
align-items: start;
overflow-x: auto;
padding-bottom: 8px;
}
@media (max-width: 1100px) { .columns-grid { grid-auto-columns: minmax(260px, 72%); } }
@media (max-width: 700px) { .columns-grid { grid-auto-columns: minmax(240px, 88%); } }
.tcli-cards { display: flex; flex-direction: column; gap: 8px; }
.col-espelho .column-num { background: var(--primary, #E8611A); }
.column-box {
background: var(--bg-surface); border-radius: 12px; padding: 14px;
display: flex; flex-direction: column; gap: 12px;
border: 1px solid transparent;
}
.column-box.current {
border-color: rgba(232, 97, 26, 0.4);
box-shadow: 0 0 0 1px rgba(232, 97, 26, 0.15);
}
.column-current-tag {
display: inline-block;
font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
color: var(--text-dim);
margin-bottom: 0;
padding: 3px 8px;
background: var(--bg-elev);
border-radius: 100px;
align-self: flex-start;
}
/* Cabecalho da coluna em destaque (laranja SKAG, fonte maior) */
.column-title-row {
display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
}
.column-title {
font-size: 16px; font-weight: 700;
letter-spacing: -0.2px; color: var(--text-hi);
line-height: 1.2;
}
.column-num {
color: var(--text-dim); margin-right: 6px;
font-weight: 800;
opacity: 0.8;
}
.column-count { font-size: 11px; color: var(--text-faint); font-weight: 500; white-space: nowrap; }
/* Sumario minimalista: 18 itens · ✓5 !2 ⊘1 */
.column-summary {
display: flex; gap: 10px; flex-wrap: wrap;
font-size: 11px; color: var(--text-faint);
align-items: center;
}
.summary-mini { display: inline-flex; align-items: center; gap: 4px; }
.summary-mini-icon {
width: 12px; height: 12px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text); font-size: 8px; font-weight: 700; line-height: 1;
position: relative;
}
.summary-mini-icon.resolvido { background: var(--status-resolvido); }
.summary-mini-icon.cliente { background: var(--status-cliente); }
.summary-mini-icon.skag { background: var(--status-skag); }
.summary-mini-icon.na { background: var(--status-na); }
.summary-mini-icon.skag::before {
content: '';
position: absolute; top: 50%; left: 50%;
width: 8px; height: 1.5px; background: #FFF;
transform: translate(-50%, -50%) rotate(45deg);
border-radius: 1px;
}
.advance-btn-wrap { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.advance-blocked {
font-size: 11px; color: var(--status-skag);
padding: 6px 10px; background: rgba(239,68,68,0.1); border-radius: 6px;
}
.block-group { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.block-label {
font-size: 10px; font-weight: 600; color: var(--text-faint);
text-transform: uppercase; letter-spacing: 0.6px; padding-left: 2px;
}
/* Item do checklist (fundo branco sobre coluna escura pra contraste) */
.item-row {
background: var(--item-bg); border-radius: 8px; padding: 10px 12px;
font-size: 13px;
color: var(--item-text);
border-left: 3px solid var(--status-pendente);
display: flex; flex-direction: column; gap: 6px;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.item-row.resolvido { border-left-color: var(--status-resolvido); }
.item-row.pendencia_cliente { border-left-color: var(--status-cliente); }
.item-row.pendencia_skag { border-left-color: var(--status-skag); }
.item-row.nao_se_aplica { border-left-color: var(--status-na); background: var(--item-bg-hover); }
.item-row.nao_se_aplica .item-title { color: var(--item-text-faint); }
/* Tarefa customizada (criada manualmente, nao do template) */
.item-row.is-custom { background: #FFFCF5; }
.item-custom-tag {
font-size: 9px; font-weight: 700; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.5px;
background: var(--bg-elev);
padding: 2px 6px; border-radius: 100px;
margin-right: 6px;
}
.item-delete-btn {
background: transparent; border: none; cursor: pointer;
color: var(--status-skag); font-size: 14px; line-height: 1;
padding: 4px 6px; border-radius: 4px;
opacity: 0.5; transition: opacity 0.15s, background 0.15s;
}
.item-delete-btn:hover { opacity: 1; background: rgba(239, 68, 68, 0.08); }
.column-add-btn {
background: transparent; border: 1px dashed var(--border);
color: var(--text-dim); font-size: 12px; font-weight: 500;
padding: 6px 12px; border-radius: 8px; cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
width: 100%; text-align: center;
font-family: inherit;
}
.column-add-btn:hover {
border-color: var(--skag-orange); color: var(--skag-orange);
background: rgba(232, 97, 26, 0.04);
}
/* Drag and drop vertical dos items */
.item-row {
cursor: grab;
}
.item-row:active { cursor: grabbing; }
.item-row.dragging {
opacity: 0.4;
transform: scale(0.98);
}
.item-row.drop-above {
box-shadow: inset 0 3px 0 0 var(--skag-orange);
}
.item-row.drop-below {
box-shadow: inset 0 -3px 0 0 var(--skag-orange);
}
/* Quando interage com elementos clicaveis dentro do item, nao usa cursor de grab */
.item-row .status-picker,
.item-row .item-notes,
.item-row .item-delete-btn,
.item-row .status-picker-btn,
.item-row .status-picker-menu,
.item-row .item-notes-input { cursor: auto; }
.item-row .status-picker-btn { cursor: pointer; }
.item-row .item-delete-btn { cursor: pointer; }
.item-row .item-notes { cursor: text; }
/* Header do item: titulo + check (esquerda) | role badge (direita) */
.item-header {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 8px;
}
.item-title-wrap {
flex: 1; min-width: 0;
display: flex; align-items: flex-start; gap: 6px;
line-height: 1.4;
}
.item-check {
flex-shrink: 0; margin-top: 1px;
width: 16px; height: 16px; border-radius: 50%;
color: var(--text);
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700;
line-height: 1;
}
.item-check.is-resolvido { background: var(--status-resolvido); font-size: 12px; }
.item-check.is-cliente { background: var(--status-cliente); font-size: 11px; }
.item-check.is-skag {
background: var(--status-skag);
position: relative;
}
/* Bolinha cortada estilo "proibido" pra Pendencia SKAG */
.item-check.is-skag::before {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 11px; height: 2px;
background: #FFF;
transform: translate(-50%, -50%) rotate(45deg);
border-radius: 1px;
}
/* Cinza neutro pra Nao se aplica */
.item-check.is-na {
background: var(--status-na); color: #FFFFFF;
font-size: 12px; font-weight: 700;
}
.item-title { line-height: 1.4; word-wrap: break-word; }
.item-role {
flex-shrink: 0;
font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.6px;
color: var(--item-text-faint);
white-space: nowrap;
}
/* Sub headline (notes) editavel sobre fundo branco do item */
.item-notes {
font-size: 12px; color: var(--item-text-dim);
line-height: 1.4; cursor: text;
padding: 4px 6px; margin: 0 -6px;
border-radius: 6px;
transition: background 0.15s;
min-height: 22px;
}
.item-notes:hover { background: rgba(0, 0, 0, 0.04); }
.item-notes.empty { color: var(--item-text-faint); font-style: italic; }
.item-notes.empty::before { content: '+ '; }
.item-notes-input {
width: 100%;
background: #FFFFFF; color: var(--item-text);
border: 1px solid var(--skag-orange); border-radius: 6px;
padding: 4px 8px; font-family: inherit; font-size: 12px;
outline: none; resize: vertical; min-height: 28px;
}
.item-notes-counter {
font-size: 10px; color: var(--item-text-faint); text-align: right; margin-top: 2px;
}
.item-bottom { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* Dropdown custom de status (substitui select nativo) */
.status-picker { position: relative; display: inline-block; }
.status-picker-btn {
background: #FFFFFF; color: var(--item-text);
border: 1px solid var(--item-border); border-radius: 6px;
padding: 5px 10px; font-size: 11px; font-weight: 600;
cursor: pointer; outline: none;
display: inline-flex; align-items: center; gap: 6px;
font-family: inherit;
transition: border-color 0.15s, background 0.15s;
}
.status-picker-btn:hover:not(:disabled) { border-color: #999; background: #FAFAFA; }
.status-picker-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.status-picker-btn .chevron { font-size: 9px; opacity: 0.6; }
.status-picker-btn.resolvido { color: var(--status-resolvido); border-color: rgba(16,185,129,0.5); }
.status-picker-btn.pendencia_cliente { color: var(--status-cliente); border-color: rgba(245,158,11,0.5); }
.status-picker-btn.pendencia_skag { color: var(--status-skag); border-color: rgba(239,68,68,0.5); }
.status-picker-btn.nao_se_aplica { color: var(--status-na); border-color: var(--item-border); }
.status-picker-menu {
position: absolute; top: calc(100% + 4px); right: 0;
background: #FFFFFF; border: 1px solid var(--item-border);
border-radius: 8px;
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
z-index: 50; min-width: 200px;
padding: 4px;
animation: pickerIn 0.12s ease-out;
}
@keyframes pickerIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.status-picker-option {
display: flex; align-items: center; gap: 10px;
width: 100%;
padding: 8px 10px; border-radius: 6px;
background: transparent; border: none;
text-align: left;
font-family: inherit; font-size: 12px; font-weight: 500;
color: var(--item-text);
cursor: pointer;
transition: background 0.12s;
}
.status-picker-option:hover { background: #F0F0F0; }
.status-picker-option.selected { background: #F5F5F5; font-weight: 700; }
.status-picker-option-icon {
width: 16px; height: 16px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
color: var(--text); font-size: 10px; font-weight: 700;
flex-shrink: 0;
position: relative;
}
.status-picker-option-icon.empty { background: #DDD; }
.status-picker-option-icon.resolvido { background: var(--status-resolvido); font-size: 11px; }
.status-picker-option-icon.cliente { background: var(--status-cliente); }
.status-picker-option-icon.skag { background: var(--status-skag); }
.status-picker-option-icon.skag::before {
content: ''; position: absolute; top: 50%; left: 50%;
width: 11px; height: 2px; background: #FFF;
transform: translate(-50%, -50%) rotate(45deg); border-radius: 1px;
}
.status-picker-option-icon.na { background: var(--status-na); font-size: 11px; }
/* ============================================================
Dashboard de Operação
============================================================ */
.dash-grid {
display: grid; gap: 16px;
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-stats {
display: grid; gap: 12px;
grid-template-columns: repeat(3, 1fr);
margin-bottom: 18px;
}
@media (max-width: 600px) { .dash-stats { grid-template-columns: 1fr; } }
.stat-card {
background: var(--bg-surface); border-radius: 12px; padding: 16px;
}
.stat-label { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; font-weight: 600; }
.stat-value { font-size: 28px; font-weight: 700; }
.stat-card.cliente .stat-value { color: var(--status-cliente); }
.stat-card.skag .stat-value { color: var(--status-skag); }
.stat-card.late .stat-value { color: var(--status-skag); }
.dash-panel {
background: var(--bg-surface); border-radius: 14px; padding: 16px;
}
.dash-panel-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.dash-panel-title { font-size: 15px; font-weight: 600; }
.dash-panel-title .who { color: var(--text-dim); font-weight: 400; font-size: 13px; }
.dash-panel-list { display: flex; flex-direction: column; gap: 8px; max-height: 70vh; overflow-y: auto; }
.pendencia-item {
background: var(--bg-base); border-radius: 10px; padding: 10px 12px;
cursor: pointer; transition: border-color 0.15s;
border: 1px solid transparent;
display: flex; flex-direction: column; gap: 4px;
}
.pendencia-item:hover { border-color: var(--text-faint); }
.pendencia-cliente-name { font-weight: 600; font-size: 13px; }
.pendencia-tag-ativo { margin-left: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #B45309; background: rgba(245,158,11,.16); padding: 1px 6px; border-radius: 6px; vertical-align: middle; }
.pendencia-item-title { font-size: 12px; color: var(--text-dim); line-height: 1.3; }
.pendencia-meta { display: flex; gap: 8px; font-size: 11px; color: var(--text-faint); margin-top: 2px; flex-wrap: wrap; }
/* ============================================================
Form de cadastro
============================================================ */
.form-card {
background: var(--bg-surface); padding: 20px; border-radius: 14px; max-width: 680px;
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 540px) { .form-grid-2 { grid-template-columns: 1fr; } }
.form-section { margin-bottom: 8px; padding-top: 8px; }
.form-section-label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; margin-bottom: 6px; }
/* ============================================================
Kanban macro de clientes
============================================================ */
.kanban-board {
display: grid;
/* 7 colunas: no wide espalham e preenchem (1fr); quando aperta, respeitam a largura minima (200px)
e o board ROLA na horizontal em vez de espremer tudo — antes minmax(0,1fr) encolhia ate esmagar
entre 1100px e a tela cheia (meia tela de monitor grande). Carol 14/07. */
grid-template-columns: repeat(7, minmax(200px, 1fr));
gap: 8px;
padding-bottom: 8px;
overflow-x: auto;
}
.kanban-col {
background: var(--bg-surface);
border-radius: 12px;
padding: 12px;
min-height: 70vh;
max-height: calc(100vh - 150px); /* limita a coluna pra lista rolar dentro (igual Tarefas) */
border: 2px solid transparent;
transition: border-color 0.15s, background 0.15s;
display: flex; flex-direction: column;
}
.kanban-col.over {
border-color: var(--skag-orange);
background: rgba(232, 97, 26, 0.04);
}
.kanban-col-header {
display: flex; align-items: center; justify-content: space-between;
padding: 4px 4px 12px;
border-bottom: 1px solid var(--border);
margin-bottom: 10px;
}
.kanban-col-name {
font-size: 12px; font-weight: 600; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.6px;
}
.kanban-col-count {
font-size: 11px; color: var(--text-faint);
background: var(--bg-base); padding: 2px 8px; border-radius: 100px;
}
.kanban-col-list { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; min-height: 0; scrollbar-width: thin; }
.kanban-empty {
font-size: 11px; color: var(--text-faint); text-align: center;
padding: 20px 10px; font-style: italic;
}
.kanban-card {
background: var(--bg-base);
border-radius: 10px;
padding: 12px;
cursor: grab;
border: 1px solid var(--border);
transition: border-color 0.15s, transform 0.05s, background 0.15s;
display: flex; flex-direction: column; gap: 8px;
}
.kanban-card:hover { border-color: var(--text-faint); background: var(--bg-elev); }
.kanban-card:active { cursor: grabbing; transform: scale(0.98); }
.kanban-card.dragging { opacity: 0.4; }
.kanban-card-name { font-size: 13px; font-weight: 600; line-height: 1.3; }
.kanban-card-company { font-size: 11px; color: var(--text-dim); margin-top: -4px; }
.kanban-progress {
display: flex; align-items: center; gap: 8px;
font-size: 10px; color: var(--text-faint);
}
.kanban-progress-bar {
flex: 1; height: 4px; background: var(--bg-elev);
border-radius: 100px; overflow: hidden;
}
.kanban-progress-fill {
height: 100%; background: var(--skag-orange);
transition: width 0.3s;
}
.kanban-card-meta {
font-size: 11px; color: var(--text-faint);
display: flex; gap: 6px; flex-wrap: wrap;
}
.kanban-card-meta .sep { color: var(--text-faint); }
.kanban-card-bottom {
display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
font-size: 10px;
}
.kanban-mini-icons {
display: inline-flex; gap: 4px; align-items: center;
}
/* ============================================================
Modal centralizado (pendencias bloqueando avanco)
============================================================ */
.modal-backdrop {
position: fixed; inset: 0;
background: rgba(0, 0, 0, 0.7);
display: flex; align-items: center; justify-content: center;
z-index: 10050; padding: 16px;
animation: backdropIn 0.15s ease-out;
}
@keyframes backdropIn { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
background: var(--bg-pop); border-radius: 14px;
border: 1px solid var(--border);
border-top: 4px solid var(--status-skag);
width: 100%; max-width: 520px; max-height: 86vh;
display: flex; flex-direction: column;
box-shadow: 0 16px 40px rgba(0,0,0,0.6);
animation: modalIn 0.18s ease-out;
}
@keyframes modalIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.modal-header {
padding: 18px 20px 12px; display: flex; flex-direction: column; gap: 4px;
}
.modal-title { font-size: var(--fs-sub, 17px); font-weight: 600; color: var(--text-hi); }
.modal-subtitle { font-size: 13px; color: var(--text-dim); }
.modal-body {
padding: 4px 20px 16px; overflow-y: auto;
}
.modal-pendencia-item {
background: var(--bg-base); border-radius: 8px;
padding: 10px 12px; margin-bottom: 8px;
border-left: 3px solid var(--status-skag);
}
.modal-pendencia-item.pendente { border-left-color: var(--status-pendente); }
.modal-pendencia-item-title { font-size: 13px; color: var(--text); line-height: 1.4; }
.modal-pendencia-item-meta { font-size: 11px; color: var(--text-faint); margin-top: 4px; }
.modal-footer {
padding: 12px 20px 18px; display: flex; gap: 10px; justify-content: flex-end;
border-top: 1px solid var(--border);
}
@media (max-width: 540px) {
.modal-card { max-width: 100%; }
.modal-header { padding: 14px 16px 10px; }
.modal-body { padding: 4px 16px 12px; }
.modal-footer { padding: 10px 16px 14px; }
}
/* ============================================================
Toast de notificacao
============================================================ */
.toast {
position: fixed; bottom: 24px; left: 50%;
transform: translateX(-50%);
background: var(--bg-pop); color: var(--text);
border: 1px solid var(--border);
border-left: 3px solid var(--status-skag);
padding: 12px 18px; border-radius: 10px;
font-size: 13px; max-width: 90%;
box-shadow: 0 6px 24px rgba(0,0,0,0.4);
z-index: 100;
animation: toastIn 0.2s ease-out;
}
.toast.success { border-left-color: var(--status-resolvido); }
.toast.info { border-left-color: var(--skag-orange); }
@keyframes toastIn {
from { opacity: 0; transform: translate(-50%, 10px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
/* ============================================================
Administrador (sub abas + tabela de usuarios)
============================================================ */
.admin-tabs {
display: flex; gap: 4px;
margin-bottom: 20px;
border-bottom: 1px solid var(--border);
}
.admin-tabs button {
background: transparent; border: none; cursor: pointer;
color: var(--text-dim); font-family: inherit;
padding: 10px 16px;
font-size: 13px; font-weight: 500;
border-bottom: 2px solid transparent;
transition: color 0.15s, border-color 0.15s;
margin-bottom: -1px;
}
.admin-tabs button:hover { color: var(--text); }
.admin-tabs button.active {
color: var(--skag-orange);
border-bottom-color: var(--skag-orange);
font-weight: 600;
}
/* ============================================================
Admin → Configurações (hub com cards de seções)
============================================================ */
.config-secoes {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
max-width: 720px;
}
.config-secao-card {
display: flex; align-items: center; gap: 14px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px 18px;
cursor: pointer;
text-align: left;
font-family: inherit; color: inherit;
transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.config-secao-card:hover:not(.desativado) {
border-color: var(--skag-orange);
background: rgba(232,97,26,0.04);
}
.config-secao-card:active:not(.desativado) { transform: scale(0.998); }
.config-secao-card.desativado { opacity: 0.45; cursor: not-allowed; }
.config-secao-icone {
font-size: 26px; line-height: 1;
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: rgba(232,97,26,0.08);
border-radius: 10px;
flex-shrink: 0;
}
.config-secao-info { flex: 1; min-width: 0; }
.config-secao-titulo {
font-size: 14px; font-weight: 600;
color: var(--text); margin-bottom: 2px;
display: flex; align-items: center; gap: 8px;
}
.config-secao-descricao {
font-size: 12.5px; color: var(--text-dim); line-height: 1.4;
}
.config-secao-chevron {
font-size: 24px; color: var(--text-faint);
font-weight: 300;
}
.config-tag {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px;
background: var(--bg-base); color: var(--text-faint);
padding: 2px 6px; border-radius: 4px; font-weight: 500;
}
/* ============================================================
Admin → Logs (atividade do time)
============================================================ */
.logs-stats {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px 16px;
margin-bottom: 14px;
}
.logs-stats-titulo { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
.logs-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.logs-stats-grupo { min-width: 0; }
.logs-stats-subtitulo { font-size: 13px; color: var(--text); font-weight: 600; margin-bottom: 8px; }
.logs-stats-linha {
display: flex; justify-content: space-between; align-items: center;
padding: 4px 0; font-size: 13px;
border-bottom: 1px dashed rgba(255,255,255,0.04);
}
.logs-stats-linha:last-child { border-bottom: none; }
.logs-stats-nome { color: var(--text); }
.logs-stats-role { font-size: 11px; color: var(--text-faint); margin-left: 4px; }
.logs-stats-num { color: var(--text-hi); font-weight: 700; }
.logs-stats-vazio { color: var(--text-faint); font-size: 12px; font-style: italic; padding: 6px 0; }
@media (max-width: 640px) { .logs-stats-grid { grid-template-columns: 1fr; gap: 16px; } }
.logs-filtros {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 14px; align-items: center;
}
.logs-filtros select, .logs-filtros input {
background: var(--bg-surface);
color: var(--text); border: 1px solid var(--border);
border-radius: 6px; padding: 7px 10px; font-size: 13px;
font-family: inherit;
}
.logs-filtros input[type="text"] { flex: 1; min-width: 180px; }
.logs-filtros input[type="date"] { max-width: 160px; }
.logs-tabela {
background: var(--bg-surface);
border-radius: 10px; overflow: hidden;
border: 1px solid var(--border);
}
.logs-header, .logs-linha {
display: grid;
grid-template-columns: 150px 130px 110px 1fr 60px;
gap: 8px; padding: 10px 14px;
font-size: 12.5px;
}
.logs-header {
background: rgba(232,97,26,0.08);
color: var(--text-dim);
font-weight: 600; font-size: 11px;
text-transform: uppercase; letter-spacing: 0.5px;
border-bottom: 1px solid var(--border);
}
.logs-linha {
border-bottom: 1px solid rgba(255,255,255,0.03);
align-items: start;
}
.logs-linha:last-child { border-bottom: none; }
.logs-linha:hover { background: rgba(255,255,255,0.02); }
.logs-linha-falha {
background: rgba(239,68,68,0.06);
border-left: 3px solid #EF4444;
padding-left: 11px; /* compensa border-left pra alinhar */
}
.logs-linha-falha:hover { background: rgba(239,68,68,0.10); }
.logs-status-fail {
font-size: 10.5px; color: #EF4444; font-weight: 700;
margin-top: 2px; letter-spacing: 0.3px;
}
.logs-data { color: var(--text-dim); font-family: ui-monospace, "SF Mono", monospace; font-size: 11.5px; }
.logs-quem-nome { color: var(--text); font-weight: 600; }
.logs-quem-role { color: var(--text-faint); font-size: 11px; text-transform: uppercase; }
.logs-acao { font-weight: 600; }
.logs-recurso { color: var(--text); }
.logs-path { color: var(--text-faint); font-size: 11px; font-family: ui-monospace, "SF Mono", monospace; margin-top: 2px; word-break: break-all; }
.logs-vazio { padding: 30px; text-align: center; color: var(--text-faint); font-style: italic; }
.logs-paginacao {
display: flex; justify-content: space-between; align-items: center;
margin-top: 12px; padding: 8px 14px;
font-size: 12px; color: var(--text-dim);
}
.logs-paginacao > div { display: flex; gap: 6px; }
.logs-det-bloco {
font-size: 13px; color: var(--text); line-height: 1.7;
background: var(--bg-base); border-radius: 8px;
padding: 10px 14px; margin-bottom: 8px;
}
.logs-det-bloco strong { color: var(--text-dim); font-weight: 600; min-width: 90px; display: inline-block; }
.logs-det-bloco code { background: var(--bg-elev); color: var(--text); padding: 1px 6px; border-radius: 4px; font-size: 12px; }
.logs-det-pre {
background: var(--bg-base); color: var(--text);
padding: 12px; border-radius: 8px;
font-size: 11.5px; line-height: 1.5;
max-height: 300px; overflow: auto;
font-family: ui-monospace, "SF Mono", monospace;
border: 1px solid var(--border);
}
@media (max-width: 760px) {
.logs-header, .logs-linha {
grid-template-columns: 1fr 1fr;
gap: 4px;
}
.logs-header > div:not(:first-child),
.logs-linha > div:not(:first-child) { font-size: 11.5px; }
}
.users-table {
background: var(--bg-surface); border-radius: 12px;
overflow: hidden;
}
.user-row {
display: grid;
/* Última coluna em auto, não em pixel fixo: com a entrada do botão Tokens, 130px fazia
os três botões quebrarem em três andares e a linha triplicava de altura. */
grid-template-columns: 1fr 1fr 130px auto;
gap: 12px; align-items: center;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
}
.user-row:last-child { border-bottom: none; }
.user-row.inactive { opacity: 0.5; }
.user-row-name { font-weight: 600; font-size: 14px; }
.user-row-username { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.user-row-email { color: var(--text-dim); font-size: 12px; }
.role-pill {
display: inline-block;
padding: 4px 10px; border-radius: 100px;
font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.4px;
}
.role-pill.admin { background: var(--bg-elev); color: var(--text-dim); }
.role-pill.gestor { background: rgba(96, 165, 250, 0.15); color: #60A5FA; }
.role-pill.comercial { background: rgba(251, 191, 36, 0.15); color: #FBBF24; }
.user-row-actions {
display: flex; gap: 6px; justify-content: flex-end;
flex-wrap: wrap;
}
@media (max-width: 720px) {
.user-row {
grid-template-columns: 1fr;
gap: 8px;
}
.user-row-actions { justify-content: flex-start; }
}
.config-placeholder {
background: var(--bg-surface); border-radius: 12px;
padding: 40px 24px; text-align: center;
color: var(--text-dim);
}
.config-placeholder h3 { color: var(--text); font-size: 17px; margin-bottom: 8px; }
/* ============================================================
Mobile
============================================================ */
@media (max-width: 640px) {
.main { padding: 14px; }
.page-title { font-size: 18px; }
.login-card { padding: 28px 20px; }
.header { padding: 12px 14px; }
.header-left { gap: 14px; }
.card-header-name { font-size: 18px; }
}
/* ============================================================
Google Ads e Meta Ads (cards de performance)
============================================================ */
.ads-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
margin-top: 12px;
}
.ads-card {
/* Tarefa #195: card segue o tema (fundo < card < flutuante). No claro,
--bg-surface é branco, então a aparência antiga se mantém lá. */
background: var(--bg-surface);
color: var(--text);
border-radius: 12px;
padding: 20px 22px;
border: 1px solid var(--border);
box-shadow: 0 2px 10px rgba(0,0,0,0.25);
font-size: 14px;
line-height: 1.45;
/* nunca cortar conteúdo: deixa quebrar linha em vez de overflow */
overflow: visible;
overflow-wrap: anywhere;
word-wrap: break-word;
word-break: break-word;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.ads-card .ads-row,
.ads-card .ads-row-single,
.ads-card .ads-col,
.ads-card .ads-saldo {
min-width: 0;
overflow-wrap: break-word;
word-wrap: break-word;
}
.ads-card .ads-row-single { flex-wrap: wrap; }
.ads-pagamento-auto {
color: #10B981;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 4px;
}
.ads-card-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
border-bottom: 1px solid var(--border);
padding-bottom: 12px;
margin-bottom: 14px;
flex-wrap: nowrap;
}
.ads-card-semaforo {
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
flex-shrink: 0;
cursor: help;
box-shadow: 0 0 0 2px rgba(0,0,0,0.06), inset 0 -3px 4px rgba(0,0,0,0.18), inset 0 2px 3px rgba(255,255,255,0.35);
transition: transform .15s;
}
.ads-card-semaforo:hover { transform: scale(1.2); }
.ads-card-cliente {
font-size: 19px;
font-weight: 800;
color: var(--text-hi);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ads-card-plataforma {
font-size: 19px;
font-weight: 800;
color: var(--text-hi);
white-space: nowrap;
}
.ads-row {
display: flex;
flex-wrap: wrap;
gap: 12px 28px;
margin-bottom: 12px;
align-items: flex-start;
}
.ads-col {
flex: 1 1 260px;
min-width: 0;
max-width: 100%;
}
.ads-col, .ads-col > div {
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
white-space: normal;
}
.ads-col > div + div { margin-top: 4px; }
/* col-right: alinha o conteúdo na direita SE houver espaço,
mas deixa o texto quebrar normalmente quando não couber */
.ads-col-right { text-align: left; }
@media (min-width: 760px) {
.ads-col-right { text-align: right; }
}
.ads-card-cliente {
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.ads-label {
color: var(--text-dim);
font-weight: 700;
}
.ads-valor {
color: var(--text-hi);
font-weight: 700;
}
.ads-sep {
color: var(--text-faint);
margin: 0 4px;
}
.ads-divider {
border-top: 1px solid var(--border);
margin: 10px 0 14px;
}
/* Dropdown de campanhas (multi-select) */
.campanha-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
min-width: 360px;
max-width: 480px;
background: var(--bg-pop);
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
z-index: 100;
max-height: 420px;
display: flex;
flex-direction: column;
}
.utm-light .campanha-dropdown {
background: #FFF;
border-color: #E5E5E5;
}
.campanha-dropdown-topo {
padding: 10px 12px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.utm-light .campanha-dropdown-topo { border-bottom-color: #E5E5E5; }
.campanha-checkbox-linha {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
cursor: pointer;
color: var(--text);
}
.utm-light .campanha-checkbox-linha { color: #0F0F0F; }
.campanha-checkbox-linha input { accent-color: #E8611A; }
.campanha-btn-todas {
background: transparent;
border: 1px solid #E8611A;
color: #E8611A;
padding: 4px 10px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
}
.campanha-btn-todas:disabled { opacity: 0.4; cursor: not-allowed; }
.campanha-dropdown-lista {
overflow-y: auto;
padding: 6px;
max-height: 340px;
}
.campanha-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
color: #E5E5E5;
}
.campanha-item:hover { background: rgba(232,97,26,0.1); }
.utm-light .campanha-item { color: #0F0F0F; }
.utm-light .campanha-item:hover { background: #F5F5F5; }
.campanha-item input { accent-color: #E8611A; flex-shrink: 0; }
.campanha-item-nome { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.campanha-item-spend {
font-size: 11px;
color: #E8611A;
font-weight: 700;
white-space: nowrap;
flex-shrink: 0;
}
.campanha-item-status {
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 100px;
text-transform: uppercase;
letter-spacing: 0.3px;
white-space: nowrap;
}
.campanha-item-status.status-enabled { background: rgba(34,197,94,0.15); color: #22C55E; }
.campanha-item-status.status-paused { background: rgba(250,204,21,0.15); color: #FACC15; }
.campanha-item-status.status-removed { background: rgba(239,68,68,0.15); color: #EF4444; }
.campanha-vazio { padding: 20px; text-align: center; color: #888; font-size: 13px; }
.dashboard-metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 14px;
margin-top: 20px;
}
.dashboard-metric-card {
background: #FFF;
border-radius: 10px;
padding: 16px 18px;
border: 1px solid #E6E6E6;
box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.dashboard-metric-grupo {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .5px;
color: #E8611A;
font-weight: 700;
margin-bottom: 6px;
}
.dashboard-metric-label {
font-size: 13px;
color: #666;
margin-bottom: 4px;
}
.dashboard-metric-valor {
font-size: 22px;
font-weight: 700;
color: #0F0F0F;
}
/* Grid 2x2 das 4 métricas-bloco: alinhamento perfeito entre colunas */
.ads-grid-pares {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 18px 36px;
margin-bottom: 12px;
align-items: start;
}
/* Stack vertical: label + linhas (Mês passado / Este mês) — nunca corta */
.ads-stack { min-width: 0; }
.ads-stack-label {
/* Tarefa #196: rótulo é estrutura, não ação — sai do laranja (regra de 1 acento;
laranja fica pra ação/alerta/seleção, vermelho/âmbar pra SOS). */
color: var(--text-dim);
font-weight: 700;
font-size: 15px;
margin-bottom: 6px;
}
.ads-stack-linha {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
font-size: 13px;
flex-wrap: wrap;
padding: 2px 0;
}
.ads-stack-tag {
color: var(--text-dim);
font-size: 13px;
font-weight: 500;
flex-shrink: 0;
}
.ads-stack-valor {
color: var(--text);
font-weight: 600;
font-size: 13px;
text-align: right;
white-space: normal;
overflow-wrap: anywhere;
word-break: break-word;
}
/* Linha do mês vigente: destaque por brilho e peso, não por cor (tarefa #196) */
.ads-stack-linha--vigente .ads-stack-tag,
.ads-stack-linha--vigente .ads-stack-valor {
color: var(--text-hi);
font-weight: 700;
}
/* Sobrepõe estouro (vermelho) acima do laranja */
.ads-stack-linha--vigente .ads-estouro {
color: #EF4444 !important;
font-weight: 700;
}
/* Histórico mensal de verba dentro do card (card 25) */
.ads-hist-verba { margin-top: 4px; }
.ads-hist-verba-btn {
background: none; border: none; padding: 0; cursor: pointer;
/* Tarefa #197: era #A0A0A0 cravado (2,6:1 sobre o cartão branco do modo claro,
reprovado no WCAG AA 4,5:1). O token resolve nos DOIS temas. */
font-size: 11px; color: var(--text-dim); font-family: inherit;
}
.ads-hist-verba-btn:hover { color: #E8611A; }
/* No claro, o laranja da marca sobre branco dá 3,5:1; hover usa um laranja queimado que passa AA */
:root[data-theme="light"] .ads-hist-verba-btn:hover { color: #B84C10; }
.ads-hist-verba-lista {
margin-top: 4px; padding: 6px 8px; border-radius: 8px;
background: var(--bg-elev); border: 1px solid var(--border);
max-height: 150px; overflow-y: auto;
}
.ads-hist-verba-linha { opacity: 0.9; }
.ads-hist-verba-vazio { font-size: 11px; color: var(--text-dim); font-style: italic; }
/* Sub-tabs nas views Meta/Google (Cards | Agentes) */
.ads-subtabs {
display: flex;
gap: 4px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 4px;
}
.ads-subtabs button {
background: transparent;
border: none;
color: var(--text-dim);
padding: 8px 16px;
border-radius: 7px;
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: background .15s, color .15s;
}
.ads-subtabs button:hover { color: var(--text); }
.ads-subtabs button.active {
background: #E8611A;
color: #FFFFFF;
}
/* Painel de Agentes IA */
.utm-btn-agentes {
background: rgba(232, 97, 26, 0.15);
color: #E8611A;
border: 1px solid rgba(232, 97, 26, 0.4);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 6px;
}
.utm-btn-agentes:hover { background: rgba(232, 97, 26, 0.25); }
.utm-btn-agentes-ativo {
background: #E8611A;
color: var(--text);
border-color: #E8611A;
}
.utm-btn-agentes-ativo:hover { background: #D55416; }
.agents-panel { padding: 4px 0; }
/* Card 207: título de seção da Análise Semanal na aba Ads (vista Todos, uma seção por plataforma) */
.ads-analise-secao { font-size: 17px; font-weight: 700; color: var(--text-hi, var(--text)); margin: 2px 0 10px; }
.agents-aviso {
background: rgba(245, 158, 11, 0.1);
color: #F59E0B;
padding: 14px 18px;
border-radius: 10px;
border: 1px solid rgba(245, 158, 11, 0.3);
font-size: 13px;
}
.agents-aviso code {
background: rgba(0,0,0,0.3);
padding: 1px 6px;
border-radius: 4px;
font-family: monospace;
}
.agents-header { margin-bottom: 14px; }
.agents-titulo { font-size: 16px; font-weight: 700; color: var(--text-hi); }
.utm-light .agents-titulo { color: #0E0F12; }
.agents-subtitulo { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.utm-light .agents-subtitulo { color: #666; }
.agents-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 14px;
}
.agent-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 14px;
display: flex;
flex-direction: column;
gap: 12px;
}
:root[data-theme="light"] .agent-card, .utm-light .agent-card { background: #FFF; border-color: #E5E5E5; }
.agent-card-header {
display: flex;
align-items: center;
gap: 12px;
padding-bottom: 10px;
border-bottom: 2px solid;
}
.agent-icone {
width: 36px; height: 36px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
font-size: 18px; flex-shrink: 0;
}
.agent-info { min-width: 0; flex: 1; }
.agent-nome { font-weight: 700; font-size: 14px; color: var(--text); }
:root[data-theme="light"] .agent-nome, .utm-light .agent-nome { color: #0F0F0F; }
.agent-desc { font-size: 11px; color: var(--text-dim); margin-top: 2px; line-height: 1.3; }
:root[data-theme="light"] .agent-desc, .utm-light .agent-desc { color: #666; }
.agent-btn-rodar { align-self: flex-start; }
.agent-erro {
color: #EF4444; font-size: 12px;
padding: 8px;
background: rgba(239,68,68,0.08);
border-radius: 6px;
}
.agent-resposta {
font-size: 13px;
color: #E5E5E5;
line-height: 1.55;
background: var(--bg-base);
padding: 12px;
border-radius: 6px;
max-height: 480px;
overflow-y: auto;
white-space: pre-wrap;
word-wrap: break-word;
}
:root[data-theme="light"] .agent-resposta, .utm-light .agent-resposta { background: #F8F8F8; color: #0F0F0F; }
.agent-rodape {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: 11px;
}
.agent-meta { color: #888; }
/* === Painel de Análise (1ª e 2ª camada) === */
.agent-tier-header {
margin-bottom: 16px;
padding: 14px 18px;
background: var(--bg-elev);
border-left: 3px solid var(--border);
border-radius: 8px;
}
:root[data-theme="light"] .agent-tier-header, .utm-light .agent-tier-header { background: #F3F3F6; }
.agent-tier-titulo {
font-size: 18px; font-weight: 700; color: var(--text-hi);
letter-spacing: -0.01em;
}
.agent-tier-sub {
font-size: 12px; color: var(--text-dim); margin-top: 4px; line-height: 1.5;
}
:root[data-theme="light"] .agent-tier-sub, .utm-light .agent-tier-sub { color: #555; }
.agent-controles {
display: grid;
grid-template-columns: minmax(260px, auto) minmax(220px, auto) auto;
gap: 18px; align-items: end;
background: var(--bg-surface);
padding: 14px 16px;
border-radius: 10px;
border: 1px solid var(--border);
margin-bottom: 14px;
}
.agent-controles > .agent-btn-rodar { align-self: end; height: 42px; }
@media (max-width: 880px) {
.agent-controles { grid-template-columns: 1fr; }
}
:root[data-theme="light"] .agent-controles, .utm-light .agent-controles { background: #FFF; border-color: #E5E5E5; }
.agent-controle-item { display: flex; flex-direction: column; gap: 6px; }
.agent-controle-item label {
font-size: 11px; color: var(--text-dim); text-transform: uppercase;
letter-spacing: 0.05em; font-weight: 600;
}
:root[data-theme="light"] .agent-controle-item label, .utm-light .agent-controle-item label { color: #666; }
.agent-periodo {
display: flex; align-items: center; gap: 8px;
background: var(--bg-base); padding: 8px 10px; border-radius: 6px;
border: 1px solid var(--border);
}
:root[data-theme="light"] .agent-periodo, .utm-light .agent-periodo { background: #F8F8F8; border-color: #E5E5E5; }
.agent-periodo label { color: #888; font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.agent-periodo input[type='date'] {
background: transparent; border: none; outline: none;
color: var(--text); font-size: 13px; font-family: inherit;
color-scheme: dark;
}
:root[data-theme="light"] .agent-periodo input[type='date'], .utm-light .agent-periodo input[type='date'] { color: #0F0F0F; color-scheme: light; }
.agent-dias {
font-size: 12px; color: #E8611A; font-weight: 600;
margin-left: 4px;
}
.agent-perfil-select {
background: var(--bg-base);
border: 1px solid var(--border);
color: var(--text);
padding: 9px 12px;
border-radius: 6px;
font-size: 13px;
font-family: inherit;
min-width: 240px;
cursor: pointer;
}
:root[data-theme="light"] .agent-perfil-select, .utm-light .agent-perfil-select { background: #F8F8F8; color: #0F0F0F; border-color: #E5E5E5; }
.agent-btn-rodar { padding: 10px 18px; }
/* Relatorio de saida */
.agent-relatorio {
background: var(--bg-base);
border: 1px solid var(--border);
border-radius: 10px;
padding: 16px;
margin-top: 4px;
}
:root[data-theme="light"] .agent-relatorio, .utm-light .agent-relatorio { background: #FAFAFA; border-color: #E5E5E5; }
.agent-relatorio-meta {
display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
font-size: 11px; margin-bottom: 12px; padding-bottom: 12px;
border-bottom: 1px dashed var(--border);
}
:root[data-theme="light"] .agent-relatorio-meta, .utm-light .agent-relatorio-meta { border-bottom-color: #E5E5E5; }
.agent-tag-cache, .agent-tag-novo, .agent-tag-vazio, .agent-tag-custo {
padding: 4px 10px; border-radius: 12px; font-weight: 600;
}
.agent-tag-cache { background: rgba(99,102,241,0.15); color: #818CF8; border: 1px solid rgba(99,102,241,0.3); }
.agent-tag-novo { background: rgba(16,185,129,0.15); color: #34D399; border: 1px solid rgba(16,185,129,0.3); }
.agent-tag-vazio { background: rgba(245,158,11,0.15); color: #F59E0B; border: 1px solid rgba(245,158,11,0.3); }
.agent-tag-custo { background: var(--bg-elev); color: var(--text-dim); border: 1px solid var(--border); cursor: help; }
.agent-tag-tokens { font-weight: 400; opacity: 0.8; margin-left: 2px; }
.agent-baixar-wrap { position: relative; display: inline-block; }
.agent-baixar-menu {
position: absolute; bottom: calc(100% + 6px); right: 0;
background: var(--bg-pop); border: 1px solid var(--border); border-radius: 8px;
padding: 6px; min-width: 200px;
box-shadow: 0 8px 24px rgba(0,0,0,0.4);
z-index: 50;
display: flex; flex-direction: column; gap: 2px;
}
:root[data-theme="light"] .agent-baixar-menu, .utm-light .agent-baixar-menu { background: #FFF; border-color: #E5E5E5; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.agent-baixar-menu button {
background: transparent; border: none; color: var(--text);
padding: 9px 12px; border-radius: 6px; text-align: left;
font-size: 13px; cursor: pointer; font-family: inherit;
}
:root[data-theme="light"] .agent-baixar-menu button, .utm-light .agent-baixar-menu button { color: #0F0F0F; }
.agent-baixar-menu button:hover { background: rgba(232,97,26,0.15); color: #E8611A; }
/* Histórico de análises */
.agent-historico {
margin-top: 18px;
background: #131313;
border: 1px solid #2A2A2A;
border-radius: 10px;
padding: 14px;
}
:root[data-theme="light"] .agent-historico, .utm-light .agent-historico { background: #FAFAFA; border-color: #EAEAEA; }
.agent-historico-titulo {
font-size: 12px; font-weight: 700; color: var(--text-dim);
text-transform: uppercase; letter-spacing: 0.06em;
margin-bottom: 10px;
}
:root[data-theme="light"] .agent-historico-titulo, .utm-light .agent-historico-titulo { color: #555; }
.agent-historico-lista {
display: grid; gap: 6px;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.agent-historico-item {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
cursor: pointer;
text-align: left;
font-family: inherit;
display: flex; flex-direction: column; gap: 6px;
transition: all 0.15s;
}
:root[data-theme="light"] .agent-historico-item, .utm-light .agent-historico-item { background: #FFF; border-color: #E5E5E5; }
.agent-historico-item:hover {
border-color: #E8611A;
background: rgba(232,97,26,0.06);
}
.agent-historico-item-ativo {
border-color: #E8611A !important;
background: rgba(232,97,26,0.12) !important;
box-shadow: 0 0 0 1px #E8611A inset;
}
.agent-historico-linha-1 {
display: flex; justify-content: space-between; align-items: center;
font-size: 12px; gap: 8px; flex-wrap: wrap;
}
.agent-historico-linha-2 {
display: flex; justify-content: space-between; align-items: center;
font-size: 11px; color: #888;
}
.agent-historico-periodo { color: var(--text); font-weight: 600; }
:root[data-theme="light"] .agent-historico-periodo, .utm-light .agent-historico-periodo { color: #0F0F0F; }
.agent-historico-por { color: var(--text-dim); font-size: 11px; }
:root[data-theme="light"] .agent-historico-por, .utm-light .agent-historico-por { color: #777; }
.agent-historico-quando { color: #888; }
.agent-historico-custo { color: var(--text); font-weight: 600; }
/* Tag de modelo */
.agent-tag-modelo {
padding: 4px 10px; border-radius: 12px; font-weight: 600;
background: rgba(99,102,241,0.12); color: #A5B4FC;
border: 1px solid rgba(99,102,241,0.25);
}
/* === Renderizador de Markdown com semáforo === */
.md-render { font-size: 13px; line-height: 1.6; color: #E5E5E5; }
:root[data-theme="light"] .md-render, .utm-light .md-render { color: #1F1F1F; }
.md-render .md-h1 {
font-size: 22px; font-weight: 800; color: var(--text-hi);
margin: 18px 0 10px; padding-bottom: 8px;
border-bottom: 2px solid var(--border);
}
.md-render .md-h2 {
font-size: 17px; font-weight: 700; color: var(--text-hi);
margin: 22px 0 8px;
}
.md-render .md-h3 {
font-size: 15px; font-weight: 700; color: var(--text);
margin: 16px 0 6px;
padding: 6px 10px; border-radius: 6px;
background: rgba(255,255,255,0.04);
}
:root[data-theme="light"] .md-render .md-h3, .utm-light .md-render .md-h3 { color: #0F0F0F; background: rgba(0,0,0,0.04); }
.md-render .md-h4 {
font-size: 13.5px; font-weight: 700; color: #DDD;
margin: 12px 0 4px;
}
:root[data-theme="light"] .md-render .md-h4, .utm-light .md-render .md-h4 { color: #333; }
.md-render .md-p { margin: 6px 0; }
.md-render .md-ul, .md-render .md-ol { margin: 6px 0 10px; padding-left: 22px; }
.md-render .md-ul li, .md-render .md-ol li { margin-bottom: 3px; }
.md-render .md-hr { border: 0; border-top: 1px dashed #333; margin: 16px 0; }
:root[data-theme="light"] .md-render .md-hr, .utm-light .md-render .md-hr { border-top-color: #DDD; }
.md-render .md-vazia { height: 6px; }
.md-render code {
background: rgba(232,97,26,0.12); color: #E8611A;
padding: 1px 6px; border-radius: 4px; font-size: 12px;
}
.md-render strong { color: var(--text); font-weight: 700; }
:root[data-theme="light"] .md-render strong, .utm-light .md-render strong { color: #0F0F0F; }
/* Tabela */
.md-table-wrap { overflow-x: auto; margin: 10px 0; border-radius: 8px; }
.md-table {
width: 100%; border-collapse: collapse; font-size: 12.5px;
background: var(--bg-base);
}
:root[data-theme="light"] .md-table, .utm-light .md-table { background: #FFF; }
.md-table th {
background: rgba(232,97,26,0.15); color: #E8611A;
padding: 8px 10px; text-align: left; font-weight: 700;
border-bottom: 2px solid rgba(232,97,26,0.4);
white-space: nowrap;
}
.md-table td {
padding: 8px 10px;
border-bottom: 1px solid #1F1F1F;
vertical-align: top;
}
:root[data-theme="light"] .md-table td, .utm-light .md-table td { border-bottom-color: #EAEAEA; }
/* Cores de semáforo aplicadas em linhas, headers, parágrafos, items */
.sem-vermelho { background: rgba(239,68,68,0.10) !important; border-left: 3px solid #EF4444 !important; }
.sem-amarelo { background: rgba(245,158,11,0.10) !important; border-left: 3px solid #F59E0B !important; }
.sem-verde { background: rgba(16,185,129,0.10) !important; border-left: 3px solid #10B981 !important; }
.sem-branco { background: rgba(160,160,160,0.08) !important; border-left: 3px solid #888 !important; }
.md-render .md-h3.sem-vermelho, .md-render .md-h3.sem-amarelo,
.md-render .md-h3.sem-verde, .md-render .md-h3.sem-branco {
padding: 8px 12px;
}
.md-render .md-p.sem-vermelho, .md-render .md-p.sem-amarelo,
.md-render .md-p.sem-verde, .md-render .md-p.sem-branco {
padding: 6px 10px; border-radius: 4px;
}
.md-render li.sem-vermelho, .md-render li.sem-amarelo,
.md-render li.sem-verde, .md-render li.sem-branco {
padding: 4px 8px; border-radius: 4px;
list-style-position: inside;
}
.md-table tr.sem-vermelho td:first-child,
.md-table tr.sem-amarelo td:first-child,
.md-table tr.sem-verde td:first-child,
.md-table tr.sem-branco td:first-child {
font-weight: 700;
}
/* Plano de Ação — card destacado dentro do relatório */
.md-render .plano-acao-card {
margin: 18px 0;
border-radius: 8px;
overflow: hidden;
border-left: 4px solid #E8611A;
background: rgba(232,97,26,0.08);
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
:root[data-theme="light"] .md-render .plano-acao-card, .utm-light .md-render .plano-acao-card {
background: #FFF7F0;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.md-render .plano-acao-card .md-h4.plano-acao-header {
background: #E8611A;
color: var(--text);
margin: 0;
padding: 10px 14px;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.3px;
text-transform: uppercase;
display: flex;
align-items: center;
gap: 8px;
}
.md-render .plano-acao-card .plano-acao-icone {
font-size: 16px;
line-height: 1;
}
/* Conteúdo do card (lista numerada e parágrafos) */
.md-render .plano-acao-card .md-ol,
.md-render .plano-acao-card .md-ul,
.md-render .plano-acao-card .md-p {
padding-left: 14px;
padding-right: 14px;
}
.md-render .plano-acao-card .md-ol,
.md-render .plano-acao-card .md-ul {
padding-left: 36px;
padding-right: 14px;
}
.md-render .plano-acao-card .md-ol li,
.md-render .plano-acao-card .md-ul li {
margin-bottom: 6px;
line-height: 1.55;
}
.md-render .plano-acao-card .md-p:first-of-type { margin-top: 10px; }
.md-render .plano-acao-card .md-p:last-of-type,
.md-render .plano-acao-card .md-ol:last-child,
.md-render .plano-acao-card .md-ul:last-child { margin-bottom: 12px; }
.agent-relatorio .agent-resposta {
max-height: 720px;
background: transparent;
padding: 0;
}
.agent-relatorio .agent-rodape { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
:root[data-theme="light"] .agent-relatorio .agent-rodape, .utm-light .agent-relatorio .agent-rodape { border-top-color: #E5E5E5; }
@media (max-width: 720px) {
.agent-controle-item, .agent-perfil-select { width: 100%; }
.agent-btn-rodar { width: 100%; }
}
/* Estouro de verba mensal: pinta texto e label de vermelho */
.ads-estouro {
color: #EF4444 !important;
font-weight: 700;
}
.ads-label-estouro {
color: #EF4444 !important;
font-weight: 700;
}
.ads-saldo {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--text);
flex-wrap: wrap;
}
.ads-saldo-pct {
color: var(--text-dim);
font-size: 12px;
}
.ads-saldo-sem-dado {
color: var(--text-dim);
font-size: 13px;
font-style: italic;
}
.ads-sos {
display: inline-block;
background: #EF4444;
color: #FFFFFF;
font-weight: 800;
font-size: 11px;
letter-spacing: 1px;
padding: 3px 10px;
border-radius: 4px;
margin-left: auto;
animation: sos-pulse 1.4s infinite;
}
@keyframes sos-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
/* Zona de perigo: saldo entre 15% e 20% da verba. Amarelo, sem pulsar — é aviso, não crítico. */
.ads-alerta {
display: inline-block;
background: #F59E0B;
color: #1F2937;
font-weight: 800;
font-size: 11px;
letter-spacing: 0.5px;
padding: 3px 10px;
border-radius: 4px;
margin-left: auto;
}
.ads-melhorias-lista {
list-style: none;
padding: 0;
margin: 8px 0 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.ads-melhorias-lista li {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #0F0F0F;
}
.ads-bolinha {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
border: 1px solid rgba(0,0,0,0.1);
}
.ads-meta-bottom {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
align-items: start;
}
.ads-criativos-tabela {
width: 100%;
border-collapse: collapse;
margin-top: 8px;
font-size: 13px;
}
.ads-criativos-tabela th {
color: #0F0F0F;
font-weight: 700;
text-align: left;
padding: 4px 8px 6px 0;
border-bottom: 1px solid #D4D4D4;
}
.ads-criativos-tabela td {
padding: 4px 8px 4px 0;
color: #0F0F0F;
}
.ads-criativos-tabela td:nth-child(2),
.ads-criativos-tabela td:nth-child(3),
.ads-criativos-tabela th:nth-child(2),
.ads-criativos-tabela th:nth-child(3) {
text-align: center;
}
@media (max-width: 1100px) {
.ads-grid { grid-template-columns: 1fr; }
.ads-meta-bottom { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.ads-card { padding: 16px; font-size: 13px; }
.ads-card-cliente, .ads-card-plataforma { font-size: 17px; }
.ads-row { grid-template-columns: 1fr; }
.ads-row-3 { grid-template-columns: 1fr; }
.ads-col-right { text-align: left; }
}
.ads-page-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
}
.ads-filtro-data {
background: var(--navy-bg);
color: var(--text);
border: 1px solid var(--navy-line);
border-radius: 8px;
padding: 8px 12px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
min-width: 180px;
}
.ads-filtro-data:hover { border-color: #E8611A; }
.ads-filtro-data:focus { outline: none; border-color: #E8611A; }
.ads-row,
.ads-row-3 {
white-space: nowrap;
}
.ads-row > .ads-col > div,
.ads-row-3 > div {
white-space: nowrap;
}
@media (max-width: 640px) {
.ads-row,
.ads-row-3,
.ads-row > .ads-col > div,
.ads-row-3 > div { white-space: normal; }
}
.ads-projecao {
margin-left: 10px;
font-weight: 700;
font-size: 13px;
padding: 2px 8px;
border-radius: 6px;
white-space: nowrap;
}
.ads-projecao-up {
color: #2563EB;
background: rgba(37, 99, 235, 0.12);
border: 1px solid rgba(37, 99, 235, 0.25);
}
.ads-projecao-down {
color: #DC2626;
background: rgba(220, 38, 38, 0.12);
border: 1px solid rgba(220, 38, 38, 0.3);
}
.ads-projecao-seta {
margin-right: 4px;
font-weight: 700;
}
.ads-row-single {
display: flex;
align-items: center;
flex-wrap: nowrap;
gap: 6px;
white-space: nowrap;
margin-bottom: 12px;
font-size: 14px;
}
.ads-metrica-sep {
display: inline-block;
width: 1px;
height: 16px;
background: #D4D4D4;
margin: 0 10px;
}
@media (max-width: 640px) {
.ads-row-single { flex-wrap: wrap; white-space: normal; }
.ads-metrica-sep { display: none; }
}
/* ============================================================
Dashboard do Cliente (estilo UTMify dark)
============================================================ */
.ads-card-cliente-clicavel { cursor: pointer; transition: color .15s; }
.ads-card-cliente-clicavel:hover { color: #E8611A; text-decoration: underline; }
.ads-card-aviso-cadastro {
padding: 16px;
margin: 12px 0;
background: rgba(245, 158, 11, 0.08);
border: 1px solid rgba(245, 158, 11, 0.3);
border-radius: 8px;
color: #F59E0B;
font-size: 13px;
line-height: 1.5;
}
.ads-card-aviso-cadastro b { color: var(--text); }
/* ============================================================
Lista (visão tipo planilha) — Google Ads
============================================================ */
.ads-lista {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 12px;
}
.ads-lista-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
.ads-lista-info {
font-size: 13px;
color: var(--text-dim);
}
.ads-lista-acoes {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.ads-lista-toggle-gasto {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text);
cursor: pointer;
user-select: none;
}
.ads-lista-toggle-gasto input[type="checkbox"] {
cursor: pointer;
accent-color: #E8611A;
}
.ads-lista-atualizar {
background: #E8611A;
color: var(--text);
border: 0;
padding: 8px 16px;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
font-size: 13px;
transition: background .15s, opacity .15s;
}
.ads-lista-atualizar:hover { background: #FF7530; }
.ads-lista-atualizar:disabled { opacity: .6; cursor: wait; }
.ads-cards-toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: 12px;
}
.ads-lista-wrap {
background: var(--navy-bg);
border: 1px solid var(--navy-line);
border-radius: 10px;
/* V-441: separado em dois eixos porque a horizontal nativa é escondida à parte
(a laranja do TableScrollWrap substitui) e a vertical continua visível. */
overflow-x: scroll;
overflow-y: auto;
max-height: 70vh;
/* Mesmo fix do .ads-lista-mes-wrap: o pai .ads-lista é flex column.
Sem min-width: 0, filhos empurram em vez de gerar overflow horizontal,
e as últimas colunas (Hoje quando Detalhar 3 dias está ON) ficam
cortadas sem scroll pra ver. */
min-width: 0;
}
/* ============================================================
Tráfego — wizard de criação de campanha (3 etapas estilo Meta Business)
============================================================ */
.trafego-steps {
display: flex;
justify-content: center;
gap: 0;
margin: 24px 0 32px;
padding: 0 8px;
}
.trafego-step {
display: flex;
align-items: center;
gap: 10px;
padding: 0 24px;
position: relative;
flex: 1;
max-width: 280px;
}
.trafego-step:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 32px;
height: 2px;
background: var(--navy-line);
transform: translateX(50%) translateY(-50%);
}
.trafego-step.feito:not(:last-child)::after {
background: #E8611A;
}
.trafego-step-num {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--navy-line);
color: var(--text-dim);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 15px;
flex-shrink: 0;
transition: all .2s;
}
.trafego-step.ativo .trafego-step-num {
background: #E8611A;
color: white;
box-shadow: 0 0 0 4px rgba(232, 97, 26, .25);
}
.trafego-step.feito .trafego-step-num {
background: #10B981;
color: white;
}
.trafego-step-label {
font-size: 14px;
color: var(--text-dim);
white-space: nowrap;
}
.trafego-step.ativo .trafego-step-label {
color: var(--text);
font-weight: 600;
}
.trafego-step.feito .trafego-step-label {
color: var(--text);
}
.trafego-form {
background: var(--navy-bg);
border: 1px solid var(--navy-line);
border-radius: 12px;
padding: 32px;
max-width: 920px;
margin: 0 auto;
}
.trafego-section h3 {
font-size: 22px;
margin: 0 0 8px;
color: var(--text);
font-weight: 700;
}
.trafego-section-desc {
color: var(--text-dim);
margin-bottom: 28px;
font-size: 14px;
}
.trafego-subsection {
font-size: 16px;
margin: 32px 0 16px;
color: var(--text);
font-weight: 600;
padding-top: 16px;
border-top: 1px solid var(--navy-line);
}
.trafego-form .field { margin-bottom: 20px; }
.trafego-form .field label {
display: block;
font-size: 13px;
color: #C0C0D0;
margin-bottom: 6px;
font-weight: 500;
}
.trafego-form .field input[type="text"],
.trafego-form .field input[type="number"],
.trafego-form .field input[type="date"],
.trafego-form .field select,
.trafego-form .field textarea {
width: 100%;
background: var(--bg-base);
border: 1px solid var(--navy-line);
border-radius: 8px;
padding: 10px 12px;
color: var(--text);
font-size: 14px;
font-family: inherit;
transition: border-color .15s;
}
.trafego-form .field input:focus,
.trafego-form .field select:focus,
.trafego-form .field textarea:focus {
outline: none;
border-color: #E8611A;
}
.trafego-form .field-hint {
display: block;
font-size: 12px;
color: #707080;
margin-top: 4px;
}
.trafego-form .toggle-inline {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
padding: 8px 0;
user-select: none;
}
.trafego-form .toggle-inline input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #E8611A;
}
.form-grid-2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.form-grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
@media (max-width: 720px) {
.form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
}
.trafego-resumo {
margin-top: 28px;
padding: 20px;
background: var(--navy-grupo);
border: 1px solid var(--navy-line);
border-radius: 8px;
}
.trafego-resumo h4 {
margin: 0 0 12px;
font-size: 15px;
color: var(--text);
}
.trafego-resumo ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.trafego-resumo li {
font-size: 14px;
color: #C0C0D0;
}
.trafego-resumo strong { color: var(--text); }
.trafego-actions {
display: flex;
align-items: center;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--navy-line);
gap: 12px;
}
.trafego-resultado {
max-width: 720px;
margin: 40px auto;
padding: 48px;
background: var(--navy-bg);
border: 1px solid var(--navy-line);
border-radius: 16px;
text-align: center;
}
.trafego-resultado-icon { font-size: 64px; margin-bottom: 16px; }
.trafego-resultado h2 { color: var(--text); margin-bottom: 12px; }
.trafego-resultado-msg {
color: #C0C0D0;
margin-bottom: 24px;
background: var(--navy-grupo);
padding: 16px;
border-radius: 8px;
border-left: 4px solid #E8611A;
text-align: left;
}
.trafego-resultado-payload {
background: var(--bg-base);
border: 1px solid var(--navy-line);
border-radius: 8px;
padding: 16px;
margin: 24px 0;
text-align: left;
}
.trafego-resultado-payload pre {
margin: 8px 0 0;
font-size: 12px;
color: var(--text-dim);
max-height: 320px;
overflow: auto;
}
/* ============================================================
Tela de boas-vindas — overlay fullscreen com raposinha animada,
saudação por horário e frase aleatória. 1x por sessão.
============================================================ */
.welcome-overlay {
position: fixed;
inset: 0;
background: rgba(15, 15, 15, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
animation: welcome-fade-in 0.4s ease-out;
cursor: pointer;
}
@keyframes welcome-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.welcome-card {
background: linear-gradient(135deg, var(--navy-bg) 0%, var(--navy-grupo) 100%);
border: 1px solid var(--navy-line);
border-radius: 24px;
padding: 56px 64px 48px;
text-align: center;
max-width: 560px;
margin: 24px;
cursor: default;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(232, 97, 26, 0.2);
animation: welcome-card-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes welcome-card-pop {
0% { transform: scale(0.85); opacity: 0; }
100% { transform: scale(1); opacity: 1; }
}
/* ============================================================
Mascote Foxx — raposa SKAG (PNG transparente) com efeitos:
- Aura laranja pulsante atrás
- Partículas flutuantes
- Entrada cinematic (scale + blur + rotate Y)
- Respiração idle (loop infinito)
- Shimmer (brilho passando, a cada 6s)
============================================================ */
.welcome-fox {
position: relative;
width: 220px;
height: 220px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
perspective: 800px;
}
/* Aura laranja pulsante atrás */
.welcome-fox::before {
content: '';
position: absolute;
inset: -18%;
background: radial-gradient(circle,
rgba(232, 97, 26, 0.55) 0%,
rgba(232, 97, 26, 0.15) 35%,
rgba(232, 97, 26, 0) 70%);
filter: blur(18px);
z-index: 0;
animation: welcome-fox-glow 3.2s ease-in-out infinite;
pointer-events: none;
}
@keyframes welcome-fox-glow {
0%, 100% { opacity: 0.55; transform: scale(0.95); }
50% { opacity: 1.00; transform: scale(1.08); }
}
/* Partículas flutuantes laranja (CSS puro, sem JS) */
.welcome-fox::after {
content: '';
position: absolute;
inset: -10%;
background-image:
radial-gradient(2px 2px at 18% 28%, rgba(255, 140, 60, 0.95), transparent 60%),
radial-gradient(1.5px 1.5px at 82% 22%, rgba(232, 97, 26, 0.85), transparent 60%),
radial-gradient(1.5px 1.5px at 76% 78%, rgba(255, 165, 90, 0.9), transparent 60%),
radial-gradient(1px 1px at 22% 86%, rgba(232, 97, 26, 0.7), transparent 60%),
radial-gradient(1.5px 1.5px at 92% 50%, rgba(255, 140, 60, 0.8), transparent 60%),
radial-gradient(1px 1px at 8% 56%, rgba(255, 170, 100, 0.75), transparent 60%);
z-index: 0;
animation: welcome-fox-particles 4.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes welcome-fox-particles {
0%, 100% { transform: translateY(0); opacity: 0.95; }
50% { transform: translateY(-10px); opacity: 0.45; }
}
/* A imagem da raposa */
.welcome-fox-img {
position: relative;
z-index: 1;
width: 220px;
height: 220px;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
filter: drop-shadow(0 10px 28px rgba(232, 97, 26, 0.55));
transform-origin: center bottom;
animation:
welcome-fox-entry 1.0s cubic-bezier(0.34, 1.56, 0.64, 1) both,
welcome-fox-breath 4.5s ease-in-out 1.0s infinite,
welcome-fox-shimmer 6s ease-in-out 1.2s infinite;
}
/* Entrada cinematic: fade + scale + leve rotação Y + desfoque some */
@keyframes welcome-fox-entry {
0% {
opacity: 0;
transform: scale(0.65) translateY(30px) rotateY(-12deg);
filter: blur(10px) drop-shadow(0 0 0 rgba(232, 97, 26, 0));
}
60% {
opacity: 1;
filter: blur(0) drop-shadow(0 10px 28px rgba(232, 97, 26, 0.55));
}
100% {
opacity: 1;
transform: scale(1) translateY(0) rotateY(0);
filter: blur(0) drop-shadow(0 10px 28px rgba(232, 97, 26, 0.55));
}
}
/* Respiração: scale sutil + leve "boia" */
@keyframes welcome-fox-breath {
0%, 100% { transform: scale(1) translateY(0); }
50% { transform: scale(1.028) translateY(-3px); }
}
/* Shimmer: brilho aumenta de tempos em tempos, como se a raposa "pulsasse luz" */
@keyframes welcome-fox-shimmer {
0%, 88%, 100% {
filter: drop-shadow(0 10px 28px rgba(232, 97, 26, 0.55));
}
92% {
filter: drop-shadow(0 10px 28px rgba(232, 97, 26, 0.55))
drop-shadow(0 0 22px rgba(255, 170, 90, 0.95));
}
96% {
filter: drop-shadow(0 10px 28px rgba(232, 97, 26, 0.55))
drop-shadow(0 0 14px rgba(255, 200, 130, 0.7));
}
}
/* Respeita preferência de menos movimento */
@media (prefers-reduced-motion: reduce) {
.welcome-fox-img,
.welcome-fox::before,
.welcome-fox::after {
animation: none !important;
}
}
.welcome-title {
font-size: 38px;
font-weight: 700;
color: var(--text);
margin: 28px 0 16px;
letter-spacing: -0.5px;
}
.welcome-frase {
font-size: 17px;
color: #B5B5C8;
margin: 0 0 36px;
line-height: 1.55;
font-style: italic;
}
.welcome-btn {
background: linear-gradient(135deg, #E8611A 0%, #FF7530 100%);
color: white;
border: none;
padding: 14px 36px;
border-radius: 14px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
box-shadow: 0 4px 16px rgba(232, 97, 26, 0.3);
}
.welcome-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(232, 97, 26, 0.45);
}
.welcome-btn:active {
transform: translateY(0);
}
/* ============================================================
Tela de cobrança urgente (Carol 14/08/2026)
Mesma família da tela de boas-vindas: overlay fullscreen, card centralizado.
Muda a cor (vermelho no lugar do laranja SKAG) porque isto não é saudação, é freio de mão:
entrega parada há mais de um dia esperando quem pediu marcar como concluído.
============================================================ */
.cobranca-overlay {
position: fixed;
inset: 0;
background: rgba(20, 6, 6, 0.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000; /* acima da saudação: se as duas caírem juntas, a urgência fica por cima */
animation: welcome-fade-in 0.4s ease-out;
padding: 24px;
overflow-y: auto;
}
.cobranca-card {
background: linear-gradient(135deg, #1B1013 0%, #2A1216 100%);
border: 1px solid rgba(239, 68, 68, 0.55);
border-radius: 24px;
padding: 44px 48px 32px;
text-align: center;
max-width: 620px;
width: 100%;
margin: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(239, 68, 68, 0.25);
animation: welcome-card-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cobranca-sirene {
font-size: 62px;
line-height: 1;
animation: cobranca-pulso 1.4s ease-in-out infinite;
}
@keyframes cobranca-pulso {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.14); opacity: 0.7; }
}
.cobranca-titulo {
font-size: 54px;
font-weight: 800;
color: #FF4D4D;
margin: 14px 0 10px;
letter-spacing: -1px;
text-shadow: 0 0 24px rgba(239, 68, 68, 0.45);
}
.cobranca-msg {
font-size: 24px;
font-weight: 700;
color: #FFFFFF;
line-height: 1.35;
margin: 0 0 26px;
}
.cobranca-lista {
display: flex;
flex-direction: column;
gap: 12px;
text-align: left;
}
/* Cada card é um botão inteiro clicável: alvo grande, sem link escondido no meio do texto.
Ele não resolve nada aqui, leva para o card de origem, que é onde a Foxx guarda as regras
de concluir, comentar e remarcar prazo. */
.cobranca-item {
display: block;
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(239, 68, 68, 0.4);
border-radius: 14px;
padding: 14px 16px;
cursor: pointer;
text-align: left;
transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.cobranca-item:hover {
background: rgba(239, 68, 68, 0.14);
border-color: rgba(239, 68, 68, 0.9);
transform: translateY(-2px);
}
.cobranca-item-topo {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
}
.cobranca-item-num {
font-size: 12px;
font-weight: 700;
color: #FF8A8A;
letter-spacing: .02em;
}
.cobranca-item-cliente {
font-size: 12px;
font-weight: 600;
color: #E6C9C9;
background: rgba(255, 255, 255, 0.08);
border-radius: 999px;
padding: 2px 10px;
}
.cobranca-item-titulo {
font-size: 17px;
font-weight: 700;
color: #FFFFFF;
line-height: 1.3;
}
.cobranca-item-rodape {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: 8px;
flex-wrap: wrap;
}
.cobranca-item-atraso {
font-size: 13px;
color: #FFB4B4;
font-weight: 600;
}
.cobranca-item-cta {
font-size: 13px;
font-weight: 700;
color: #FFFFFF;
background: linear-gradient(135deg, #DC2626 0%, #EF4444 100%);
border-radius: 10px;
padding: 6px 14px;
white-space: nowrap;
}
.cobranca-rodape {
font-size: 14px;
color: #E3C4C4;
margin: 22px 0 6px;
line-height: 1.5;
}
/* A segunda linha explica a outra saída (comentar) sem competir com a instrução principal. */
.cobranca-rodape-sub {
display: inline-block;
margin-top: 8px;
font-size: 13px;
color: #B79B9B;
}
@media (max-width: 640px) {
.cobranca-card { padding: 32px 20px 24px; border-radius: 18px; }
.cobranca-titulo { font-size: 38px; }
.cobranca-msg { font-size: 19px; }
.cobranca-sirene { font-size: 48px; }
.cobranca-item-rodape { align-items: flex-start; flex-direction: column; }
}
/* ============================================================
Modo "Mostrar mês" — tabela tipo planilha com scroll horizontal
laranja SKAG bem visível + cliente sticky à esquerda
============================================================ */
.ads-lista-mes-info {
font-size: 13px;
color: var(--text-dim);
margin-bottom: 8px;
padding: 0 4px;
}
.ads-lista-mes-info strong { color: var(--text); }
.ads-lista-mes-wrap {
background: var(--navy-bg);
border: 1px solid var(--navy-line);
border-radius: 10px;
overflow-x: scroll;
overflow-y: auto;
max-height: 70vh;
width: 100%;
min-width: 0;
}
/* ============================================================
V-441 — a barra horizontal nativa que sobrepunha a última linha da lista.
Aqui embaixo a barra laranja do TableScrollWrap já faz o papel da horizontal,
então da nativa só queremos a VERTICAL. Duas armadilhas do Chrome, as duas
medidas no navegador antes de escrever isto (Chrome 151):
1. A regra BASE `::-webkit-scrollbar` precisa existir. Declarar apenas as
pseudo-classes `:horizontal` / `:vertical` não liga o modo de barra
customizada: o Chrome ignora tudo e desenha a barra padrão de 15px. Era
esse o estado antigo, e por isso o `height: 0` nunca teve efeito.
2. `scrollbar-width` / `scrollbar-color` NÃO podem ser declarados no elemento.
Basta um deles para o Chrome descartar todos os ::-webkit-scrollbar dele e
cair na barra fina de 11px, em ambos os eixos. Por isso eles moram no
@supports do fim, que só o Firefox lê.
Com a base declarada, `height: 0` some com a horizontal e `width: 12px` mantém
a vertical, que a Carol usa para descer a lista.
============================================================ */
.ads-lista-mes-wrap::-webkit-scrollbar,
.ads-lista-wrap::-webkit-scrollbar {
width: 12px;
height: 0;
}
.ads-lista-mes-wrap::-webkit-scrollbar-track,
.ads-lista-wrap::-webkit-scrollbar-track {
background: var(--navy-line);
}
.ads-lista-mes-wrap::-webkit-scrollbar-thumb,
.ads-lista-wrap::-webkit-scrollbar-thumb {
background: #4A4A6A;
border-radius: 6px;
}
.ads-lista-mes-wrap::-webkit-scrollbar-thumb:hover,
.ads-lista-wrap::-webkit-scrollbar-thumb:hover {
background: #6A6A8A;
}
/* Firefox só entra aqui: ele não conhece ::-webkit-scrollbar, então o @supports
dá falso e o bloco aplica. Chrome e Safari conhecem, dão verdadeiro e pulam,
preservando os pseudo-elementos acima. Lá a barra fica fina nos dois eixos,
que é o mais perto de esconder a horizontal que o Firefox permite hoje. */
@supports not selector(::-webkit-scrollbar) {
.ads-lista-mes-wrap,
.ads-lista-wrap {
scrollbar-width: thin;
scrollbar-color: #4A4A6A var(--navy-line);
}
}
/* ============================================================
Scrollbar horizontal CUSTOM (independente do sistema operacional)
Sempre visível, laranja SKAG, controlada por JS. Carol não precisa
passar mouse pra ela aparecer — fica fixa.
============================================================ */
.ads-lista-mes-fake-scrollbar {
position: relative;
height: 18px;
background: var(--navy-line);
border-radius: 9px;
margin-top: 6px;
cursor: pointer;
user-select: none;
}
.ads-lista-mes-fake-thumb {
position: absolute;
top: 2px;
bottom: 2px;
background: #E8611A;
border-radius: 7px;
cursor: grab;
min-width: 40px;
transition: background .15s;
}
.ads-lista-mes-fake-thumb:hover {
background: #FF7530;
}
.ads-lista-mes-fake-thumb:active {
cursor: grabbing;
background: #FF7530;
}
/* Tabela cresce com conteúdo (não trava em 100% do container) — pra scroll horizontal funcionar.
min-width FORÇA largura mínima maior que viewport pra Carol ver o scroll funcionando
mesmo nos primeiros dias do mês quando há poucas colunas. */
.ads-lista-mes-tabela {
width: max-content !important;
min-width: 1800px !important;
font-size: 13px;
white-space: nowrap;
border-collapse: separate;
border-spacing: 0;
table-layout: auto;
}
.ads-lista-mes-tabela th,
.ads-lista-mes-tabela td {
white-space: nowrap;
}
.ads-lista-mes-tabela thead th {
position: sticky;
background: var(--navy-bg);
z-index: 5;
padding: 8px 10px;
font-weight: 600;
text-align: center;
border-bottom: 1px solid var(--navy-line);
color: var(--text-dim);
}
/* Linha 1 do thead (Dia 1, Dia 2, ...) fica grudada no topo (top: 0).
Linha 2 do thead (Leads, Seguidores, Gasto) fica grudada logo abaixo
(top: ~38px = altura da linha 1). Sem isso, a 2ª linha sobrepõe a 1ª. */
.ads-lista-mes-tabela thead tr:first-child th {
top: 0;
}
.ads-lista-mes-tabela thead tr.ads-lista-subhead th {
top: 38px;
}
.ads-lista-mes-tabela tbody td {
padding: 8px 10px;
text-align: center;
border-bottom: 1px solid var(--navy-line);
background: var(--navy-bg);
}
.ads-lista-mes-tabela tbody tr.ads-lista-linha-risco td {
background: var(--navy-risk) !important;
}
.ads-lista-mes-tabela thead tr:first-child th.ads-lista-col-grupo {
background: var(--navy-grupo);
border-left: 1px solid var(--navy-line);
}
/* === Colunas-identidade CONGELADAS à esquerda (TODAS as listas Ads) =========
As 6 primeiras colunas (Pgto, Inv. Diário, Cliente, Gasto Hoje, Mês Vigente,
Projeção) ficam FIXAS ao rolar a tabela na horizontal. Vale IGUAL pros 4
modos: normal, "Mostrar gasto diário", "Detalhar 3 dias" e "Mostrar mês".
Larguras fixas e idênticas entre os modos pro `left:` em cascata bater.
O `top` de cada linha do cabeçalho fica por conta das regras de cada tabela
(mês = 38px, agrupada = 41px/31px) — aqui só cuidamos do horizontal. */
.ads-lista-mes-sticky-pgto,
.ads-lista-mes-sticky-inv,
.ads-lista-mes-sticky-med,
.ads-lista-mes-sticky-cliente,
.ads-lista-mes-sticky-fixa-1,
.ads-lista-mes-sticky-fixa-2,
.ads-lista-mes-sticky-fixa-3 {
position: sticky;
z-index: 5; /* corpo congelado acima das colunas que rolam (estáticas) */
background: var(--navy-bg);
}
/* As colunas de dia que rolam ficam em z-index 10. O cabeçalho congelado
precisa ficar ACIMA delas pra que "Dia 1/2/3" passe POR TRÁS dos títulos
fixos (e não na frente, que era o bug). !important garante isso nos 4 modos. */
.ads-lista-tabela thead .ads-lista-mes-sticky-pgto,
.ads-lista-tabela thead .ads-lista-mes-sticky-inv,
.ads-lista-tabela thead .ads-lista-mes-sticky-med,
.ads-lista-tabela thead .ads-lista-mes-sticky-cliente,
.ads-lista-tabela thead .ads-lista-mes-sticky-fixa-1,
.ads-lista-tabela thead .ads-lista-mes-sticky-fixa-2,
.ads-lista-tabela thead .ads-lista-mes-sticky-fixa-3 {
z-index: 12 !important;
}
/* Offsets em cascata. Escopo `.ads-lista .ads-lista-tabela` (0,3,0) pra vencer
as larguras antigas (.ads-lista-col-*) e o modo compacto SEM precisar de
!important — assim as 6 colunas mantêm a MESMA largura em todos os modos. */
.ads-lista .ads-lista-tabela .ads-lista-mes-sticky-pgto { left: 0; width: 64px; min-width: 64px; max-width: 64px; }
.ads-lista .ads-lista-tabela .ads-lista-mes-sticky-inv { left: 64px; width: 104px; min-width: 104px; max-width: 104px; }
.ads-lista .ads-lista-tabela .ads-lista-mes-sticky-cliente { left: 168px; width: 220px; min-width: 220px; max-width: 220px; text-align: left !important; }
.ads-lista .ads-lista-tabela .ads-lista-mes-sticky-fixa-1 { left: 388px; width: 104px; min-width: 104px; max-width: 104px; }
.ads-lista .ads-lista-tabela .ads-lista-mes-sticky-fixa-2 { left: 492px; width: 116px; min-width: 116px; max-width: 116px; }
.ads-lista .ads-lista-tabela .ads-lista-mes-sticky-fixa-3 { left: 608px; width: 96px; min-width: 96px; max-width: 96px; border-right: 2px solid #E8611A; }
/* Reforma da tela de Ads do Gedásio (#168/#170/#172/#175): a "visualização do mês"
(.ads-lista-mes-tabela) tirou a coluna "Gasto Hoje" (redundante com a coluna do dia),
então as colunas fixas seguintes recuam 104px. As tabelas AGRUPADAS (.--agrupada)
mantêm o Gasto Hoje e os offsets originais acima. */
/* PLANILHA EDITÁVEL (Carol 04/07): larguras das colunas fixas vêm de CSS var (--wc-*,
setada por arraste no state). Os offsets `left` saem de calc() cumulativo dessas vars,
então redimensionar recalcula o congelamento sozinho (sem pixel chutado). */
.ads-lista .ads-lista-mes-tabela .ads-lista-mes-sticky-pgto { left: 0; width: var(--wc-pgto); min-width: var(--wc-pgto); max-width: var(--wc-pgto); }
.ads-lista .ads-lista-mes-tabela .ads-lista-mes-sticky-inv { left: var(--wc-pgto); width: var(--wc-inv); min-width: var(--wc-inv); max-width: var(--wc-inv); }
.ads-lista .ads-lista-mes-tabela .ads-lista-mes-sticky-med { left: calc(var(--wc-pgto) + var(--wc-inv)); width: var(--wc-med); min-width: var(--wc-med); max-width: var(--wc-med); }
.ads-lista .ads-lista-mes-tabela .ads-lista-mes-sticky-cliente { left: calc(var(--wc-pgto) + var(--wc-inv) + var(--wc-med) + var(--wc-sd)); width: var(--wc-cli); min-width: var(--wc-cli); max-width: var(--wc-cli); }
.ads-lista .ads-lista-mes-tabela .ads-lista-mes-sticky-fixa-2 { left: calc(var(--wc-pgto) + var(--wc-inv) + var(--wc-med) + var(--wc-sd) + var(--wc-cli) + var(--wc-pr) + var(--wc-ca) + var(--wc-lm) + var(--wc-cn)); width: var(--wc-mv); min-width: var(--wc-mv); max-width: var(--wc-mv); }
.ads-lista .ads-lista-mes-tabela .ads-lista-mes-sticky-fixa-3 { left: calc(var(--wc-pgto) + var(--wc-inv) + var(--wc-med) + var(--wc-sd) + var(--wc-cli)); width: var(--wc-pr); min-width: var(--wc-pr); max-width: var(--wc-pr); }
/* Colunas-resumo do mês (Leads Mês, CPL Ant., CPL Atual): rolam após a faixa fixa. */
.ads-lista-mes-tabela .ads-lista-col-resumo { min-width: 96px; white-space: nowrap; }
.ads-lista-mes-tabela thead .ads-lista-col-resumo { background: var(--navy-head); }
/* #168 aperta o espaçamento HORIZONTAL entre colunas do mês (mantém o vertical
pra não bagunçar o offset sticky do subcabeçalho). */
.ads-lista-mes-tabela thead th,
.ads-lista-mes-tabela tbody td { padding-left: 8px; padding-right: 8px; }
/* Divisórias fortes (Gedásio #174): cada GRUPO-DIA (Leads/Cliques/Gasto) é cercado por
uma linha forte à esquerda (a linha da esquerda do dia seguinte fecha o dia anterior),
pra bater o olho e saber que os 3 sub-valores são do MESMO dia. As colunas soltas
(Inv. Diário, Cliente, Mês Vigente, Projeção, Leads Mês, CPL Ant./Atual) também ganham
uma divisória entre si. */
.ads-lista-mes-tabela .ads-dia-ini,
.ads-lista-mes-tabela thead th.ads-lista-col-grupo { border-left: 2px solid var(--navy-accent); }
.ads-lista-mes-tabela thead th.ads-lista-col-grupo { border-right: 0; }
/* Divisória das colunas CONGELADAS via box-shadow inset (não border): a border-left some
ao rolar pro lado nas células sticky; o inset-shadow não. */
.ads-lista-mes-tabela .ads-lista-col-inv-diario,
.ads-lista-mes-tabela .ads-lista-col-media-dia,
.ads-lista-mes-tabela .ads-lista-col-cliente,
.ads-lista-mes-tabela .ads-lista-mes-sticky-fixa-2,
.ads-lista-mes-tabela .ads-lista-mes-sticky-fixa-3,
.ads-lista-mes-tabela .ads-rsm1,
.ads-lista-mes-tabela .ads-rsm2,
.ads-lista-mes-tabela .ads-rsm3 { box-shadow: inset 2px 0 0 0 var(--navy-accent); }
/* Congela Leads Mês / CPL Ant / CPL Atual / Saldo junto das colunas fixas (antes
escorregavam pra trás ao rolar pro lado, bug que a Carol mostrou). Ordem do card
#194: Saldo vira a 4ª coluna (colado na Média/Dia) e o bloco segue Cliente,
Projeção, CPL Ant., Leads Mês, CPL Atual e Gasto Mês (ex-Mês Vigente), que
fecha o congelado com a linha laranja. */
.ads-lista .ads-lista-mes-tabela .ads-rsm { position: sticky; z-index: 8; background: var(--navy-bg); }
.ads-lista .ads-lista-mes-tabela thead .ads-rsm { z-index: 13 !important; background: var(--navy-head); }
.ads-lista .ads-lista-mes-tabela .ads-rsm1 { left: calc(var(--wc-pgto) + var(--wc-inv) + var(--wc-med) + var(--wc-sd) + var(--wc-cli) + var(--wc-pr) + var(--wc-ca)); width: var(--wc-lm); min-width: var(--wc-lm); max-width: var(--wc-lm); }
.ads-lista .ads-lista-mes-tabela .ads-rsm2 { left: calc(var(--wc-pgto) + var(--wc-inv) + var(--wc-med) + var(--wc-sd) + var(--wc-cli) + var(--wc-pr)); width: var(--wc-ca); min-width: var(--wc-ca); max-width: var(--wc-ca); }
/* #185: a linha laranja do fim do bloco congelado era border-right e sumia ao rolar
pro lado (mesmo bug das divisórias acima, border não acompanha célula sticky).
Vira inset-shadow pela direita, que acompanha, igual às demais divisórias. */
.ads-lista .ads-lista-mes-tabela .ads-rsm3 { left: calc(var(--wc-pgto) + var(--wc-inv) + var(--wc-med) + var(--wc-sd) + var(--wc-cli) + var(--wc-pr) + var(--wc-ca) + var(--wc-lm)); width: var(--wc-cn); min-width: var(--wc-cn); max-width: var(--wc-cn); }
.ads-lista .ads-lista-mes-tabela .ads-rsm4 { left: calc(var(--wc-pgto) + var(--wc-inv) + var(--wc-med)); width: var(--wc-sd); min-width: var(--wc-sd); max-width: var(--wc-sd); box-shadow: inset 2px 0 0 0 var(--navy-accent); }
/* #194: Gasto Mês fecha o bloco congelado; herda a linha laranja + sombra do fim. */
.ads-lista .ads-lista-mes-tabela .ads-lista-mes-sticky-fixa-2 { box-shadow: inset 2px 0 0 0 var(--navy-accent), inset -2px 0 0 0 #E8611A, 6px 0 8px -3px rgba(0,0,0,.85); }
.ads-lista .ads-lista-mes-tabela .ads-lista-mes-sticky-fixa-3 { border-right: 0; }
/* Saldo colorido conforme criticidade (mesma régua dos selos SOS / SALDO BAIXO) */
.ads-lista-mes-tabela td.ads-saldo-sos { color: #EF4444; font-weight: 700; }
.ads-lista-mes-tabela td.ads-saldo-alerta { color: #F59E0B; font-weight: 600; }
/* #241 (Carol 20/07): os selos SOS/SALDO BAIXO/ESTOURO/cartão ficam no INÍCIO da célula
do cliente, antes da tag da plataforma. O selo base tem margin-left:auto (herança de
quando vivia no fim do nome); aqui zeramos pra ele encostar na borda esquerda e o
gap:8px do container cuidar do espaçamento até a tag/nome. */
.ads-lista-col-cliente .ads-lista-cliente-conteudo .ads-sos,
.ads-lista-col-cliente .ads-lista-cliente-conteudo .ads-alerta { margin-left: 0; }
/* Alça de redimensionar coluna (planilha): fica na borda direita do cabeçalho. */
.ads-lista-mes-tabela thead th { position: sticky; }
.col-rsz { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 30; }
.col-rsz:hover { background: rgba(232,97,26,.6); }
/* Cabeçalhos ordenáveis (Cliente, Mês Vigente, Leads Mês): clique ordena, clique de novo
inverte. A setinha mostra a coluna ativa e o sentido. */
.ads-th-ordenavel { cursor: pointer; user-select: none; }
.ads-th-ordenavel:hover { color: #E8611A; }
.ads-th-seta { margin-left: 4px; font-size: 9px; color: #E8611A; }
.ads-lista-zoom-ctrl { display: inline-flex; align-items: center; gap: 5px; margin-left: 14px; }
.ads-lista-zoom-lbl { color: var(--faint, #888); }
.ads-lista-zoom-ctrl button { background: var(--tv-bg-elev, var(--navy-line)); border: 1px solid var(--border, var(--navy-elev)); color: var(--text); border-radius: 6px; padding: 1px 9px; cursor: pointer; font-family: inherit; font-size: 12px; }
.ads-lista-zoom-ctrl button:hover { background: #E8611A; border-color: #E8611A; }
.ads-lista-zoom-pct { min-width: 38px; text-align: center; }
/* Subcabeçalho: células vazias das colunas congeladas ficam opacas e acima das colunas
de dia que rolam, pra não vazar "Leads/Cliq/Gasto" atrás delas. */
.ads-lista .ads-lista-mes-tabela thead tr.ads-lista-subhead th { background: var(--navy-line); }
.ads-lista .ads-lista-mes-tabela thead tr.ads-lista-subhead .ads-lista-vazia { z-index: 13 !important; }
/* Edge-to-edge (Carol): a lista do mês ocupa a largura toda da tela, furando a margem
da .page, pra caber mais dias sem apertar.
#187: 100vw inclui a área da barra de rolagem da janela, então a barra vertical ficava
POR CIMA do valor de Gasto da última coluna ao rolar até o fim. O TableScrollWrap mede
a barra real e publica --sbw; aqui a largura desconta esse espaço. */
.ads-lista .ads-lista-mes-wrap {
width: calc(100vw - var(--sbw, 0px));
max-width: calc(100vw - var(--sbw, 0px));
margin-left: calc(50% - 50vw);
}
/* #187: respiro na última coluna, pra barra vertical do próprio quadro (12px) e as barras
overlay do macOS não taparem o dígito final do gasto do último dia. */
.ads-lista-mes-tabela thead tr > th:last-child,
.ads-lista-mes-tabela tbody tr > td:last-child { padding-right: 22px; }
/* Vazamento visual (Carol): o corpo congelado precisa ficar ACIMA das colunas de dia que
rolam, com fundo opaco, senão o conteúdo que rola aparece atrás. */
.ads-lista .ads-lista-mes-tabela tbody .ads-lista-mes-sticky-pgto,
.ads-lista .ads-lista-mes-tabela tbody .ads-lista-mes-sticky-inv,
.ads-lista .ads-lista-mes-tabela tbody .ads-lista-mes-sticky-med,
.ads-lista .ads-lista-mes-tabela tbody .ads-lista-mes-sticky-cliente,
.ads-lista .ads-lista-mes-tabela tbody .ads-lista-mes-sticky-fixa-2,
.ads-lista .ads-lista-mes-tabela tbody .ads-lista-mes-sticky-fixa-3 { z-index: 8; }
.ads-lista .ads-lista-mes-tabela tbody td:not(.ads-lista-mes-sticky-pgto):not(.ads-lista-mes-sticky-inv):not(.ads-lista-mes-sticky-med):not(.ads-lista-mes-sticky-cliente):not(.ads-lista-mes-sticky-fixa-2):not(.ads-lista-mes-sticky-fixa-3):not(.ads-rsm) { position: relative; z-index: 1; }
.ads-lista-tabela tbody tr.ads-lista-linha-risco .ads-rsm { background: var(--navy-risk); }
/* Linha de risco: mantém o fundo escuro próprio pra nada vazar atrás do sticky */
.ads-lista-tabela tbody tr.ads-lista-linha-risco .ads-lista-mes-sticky-pgto,
.ads-lista-tabela tbody tr.ads-lista-linha-risco .ads-lista-mes-sticky-inv,
.ads-lista-tabela tbody tr.ads-lista-linha-risco .ads-lista-mes-sticky-med,
.ads-lista-tabela tbody tr.ads-lista-linha-risco .ads-lista-mes-sticky-cliente,
.ads-lista-tabela tbody tr.ads-lista-linha-risco .ads-lista-mes-sticky-fixa-1,
.ads-lista-tabela tbody tr.ads-lista-linha-risco .ads-lista-mes-sticky-fixa-2,
.ads-lista-tabela tbody tr.ads-lista-linha-risco .ads-lista-mes-sticky-fixa-3 {
background: var(--navy-risk) !important;
}
.ads-lista-tabela {
width: 100%;
border-collapse: collapse;
font-size: 14px;
color: var(--text);
}
.ads-lista-tabela thead {
position: relative;
z-index: 10;
}
.ads-lista-tabela thead th {
position: sticky;
top: 0;
background: var(--navy-line);
color: var(--text);
text-align: left;
font-weight: 700;
padding: 12px 14px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .5px;
border-bottom: 2px solid var(--navy-elev);
z-index: 10;
}
/* Header agrupado: linha de cima vira agrupador (Ontem, Últimos 3 dias),
linha de baixo são as sub-colunas (Leads, Cliques, [Gasto]).
As 4 primeiras colunas (Cliente, Gasto Hoje, Mês Vigente, Projeção) usam
uma célula vazia na linha 2 — visualmente é como se fossem rowspan, mas
sem o bug de position:sticky+rowspan no Chrome. */
/* Tabela agrupada cresce com conteúdo (não comprime as 17 colunas em 100%
da tela). Combinado com .ads-lista-wrap { overflow: auto; min-width: 0 },
ativa scroll horizontal nativo quando excede a viewport. */
.ads-lista-tabela--agrupada {
width: max-content;
min-width: 100%;
}
.ads-lista-tabela--agrupada thead tr:first-child th {
border-bottom: 0;
}
.ads-lista-tabela--agrupada thead tr:first-child th.ads-lista-col-grupo {
text-align: center;
background: #1F1F35;
border-left: 1px solid var(--navy-elev);
border-right: 1px solid var(--navy-elev);
border-bottom: 1px solid var(--navy-elev);
}
.ads-lista-tabela--agrupada thead tr.ads-lista-subhead th {
top: 41px;
background: var(--navy-line);
font-size: 11px;
padding: 8px 14px;
text-align: right;
border-bottom: 2px solid var(--navy-elev);
text-transform: uppercase;
letter-spacing: .5px;
color: var(--text-dim);
z-index: 9;
}
.ads-lista-tabela--agrupada thead tr.ads-lista-subhead th.ads-lista-vazia {
background: var(--navy-line);
border-bottom: 2px solid var(--navy-elev);
z-index: 9;
/* sem texto, sem padding extra — só extensão visual da célula de cima */
}
.ads-lista-tabela--agrupada tbody td {
text-align: right;
}
.ads-lista-tabela--agrupada tbody td.ads-lista-col-cliente {
text-align: left;
}
/* Modo compacto: ativado quando os 2 toggles (gasto + detalhar 3d) estão ON.
Reduz padding e fonte pra caber 14 colunas sem squish. Nome do cliente
também encolhe (mas continua truncável). */
.ads-lista-tabela--compact {
font-size: 12px;
}
.ads-lista-tabela--compact thead th {
padding: 8px 8px;
font-size: 10px;
}
.ads-lista-tabela--compact tbody td {
padding: 8px 8px;
}
.ads-lista-tabela--compact .ads-lista-col-cliente {
min-width: 180px;
}
.ads-lista-tabela--compact .ads-lista-col-inv-diario {
width: 80px;
min-width: 80px;
}
.ads-lista-tabela--compact thead tr.ads-lista-subhead th {
padding: 6px 8px;
font-size: 10px;
top: 31px;
}
.ads-lista-tabela--compact .ads-lista-pgto-tag {
padding: 2px 6px;
font-size: 10px;
}
.ads-lista-tabela--compact .ads-sos,
.ads-lista-tabela--compact .ads-alerta {
padding: 1px 5px;
font-size: 9px;
}
.ads-lista-tabela tbody td {
padding: 12px 14px;
border-bottom: 1px solid var(--navy-line);
white-space: nowrap;
}
.ads-lista-tabela tbody tr:hover {
background: rgba(232, 97, 26, 0.06);
}
.ads-lista-linha-risco {
background: rgba(239, 68, 68, 0.08);
}
.ads-lista-linha-risco:hover {
background: rgba(239, 68, 68, 0.14) !important;
}
/* #215: linha de cliente destacada pra focar a análise (clica na linha pra ligar/desligar).
Verde de "selecionado" (não de status: a bolinha de saúde foi pausada no #198). */
.ads-lista-tabela tbody tr.ads-lista-linha-destacada td,
.ads-lista-mes-tabela tbody tr.ads-lista-linha-destacada td,
.ads-lista-tabela tbody tr.ads-lista-linha-destacada [class*="ads-lista-mes-sticky"],
.ads-lista-mes-tabela tbody tr.ads-lista-linha-destacada [class*="ads-lista-mes-sticky"] {
background: color-mix(in srgb, #22C55E 32%, var(--navy-bg)) !important;
}
.ads-lista-tabela tbody tr.ads-lista-linha-destacada td:first-child,
.ads-lista-mes-tabela tbody tr.ads-lista-linha-destacada td:first-child {
box-shadow: inset 4px 0 0 #22C55E !important;
}
.ads-lista-tabela tbody tr.ads-lista-linha-destacada,
.ads-lista-mes-tabela tbody tr.ads-lista-linha-destacada {
cursor: pointer;
}
.ads-lista-col-pgto {
width: 60px;
text-align: center !important;
}
.ads-lista-col-inv-diario {
width: 100px;
min-width: 100px;
text-align: right !important;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.ads-lista-pgto-tag {
display: inline-block;
padding: 3px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
letter-spacing: .3px;
}
.ads-lista-pgto-pix {
background: rgba(16, 185, 129, 0.15);
color: #10B981;
border: 1px solid rgba(16, 185, 129, 0.3);
}
.ads-lista-pgto-card {
background: rgba(232, 97, 26, 0.15);
color: #FF9F66;
border: 1px solid rgba(232, 97, 26, 0.4);
}
.ads-lista-traco {
color: #555;
font-style: italic;
}
.ads-lista-col-cliente {
min-width: 220px;
white-space: nowrap;
}
.ads-lista-col-cliente .ads-lista-cliente-conteudo {
display: inline-flex;
align-items: center;
gap: 8px;
}
.ads-lista-tabela .ads-lista-col-cliente {
font-weight: 600;
}
.ads-lista-semaforo {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.ads-lista-cliente-nome {
cursor: pointer;
transition: color .15s;
/* Reset do : sem cor azul de link nem underline padrão */
color: inherit;
text-decoration: none;
}
.ads-lista-cliente-nome:hover {
color: #E8611A;
text-decoration: underline;
}
.ads-lista-cliente-nome:visited,
.ads-lista-cliente-nome:active {
color: inherit;
}
.ads-lista-cliente-nome:visited:hover {
color: #E8611A;
}
@media (max-width: 768px) {
.ads-lista-tabela { font-size: 12px; }
.ads-lista-tabela thead th,
.ads-lista-tabela tbody td { padding: 8px 10px; }
}
.utm-dashboard {
--utm-bg: #0F0F0F;
--utm-card-bg: #1A1A1A;
--utm-card-border: #2E2E2E;
--utm-text: #FFFFFF;
--utm-text-dim: #9CA3AF;
--utm-text-mid: #E5E7EB;
--utm-input-bg: #0F0F0F;
--utm-accent: #3B82F6;
--utm-accent-hover: #2563EB;
--utm-green: #10B981;
--utm-donut-bg: #2E2E2E;
--utm-edit-hover: rgba(59, 130, 246, 0.08);
--utm-drag-border: #3B82F6;
background: var(--utm-bg);
color: var(--utm-text-mid);
min-height: calc(100vh - 60px);
padding: 0;
margin: -8px 0;
transition: background .2s;
}
.utm-dashboard.utm-light {
--utm-bg: #F3F4F6;
--utm-card-bg: #FFFFFF;
--utm-card-border: #E5E7EB;
--utm-text: #111827;
--utm-text-dim: #6B7280;
--utm-text-mid: #1F2937;
--utm-input-bg: #FFFFFF;
--utm-donut-bg: #E5E7EB;
}
.utm-header {
background: var(--utm-card-bg);
border: 1px solid var(--utm-card-border);
border-radius: 12px;
padding: 18px 24px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
}
.utm-header-left { display: flex; align-items: center; gap: 18px; }
.utm-titulo { font-size: 19px; font-weight: 700; color: var(--utm-text); }
.utm-subtitulo { font-size: 13px; color: var(--utm-text-dim); margin-top: 2px; }
.utm-projecao-chip {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 6px;
padding: 4px 10px;
font-size: 12px;
font-weight: 600;
color: #E8611A;
background: rgba(232,97,26,0.10);
border: 1px solid rgba(232,97,26,0.35);
border-radius: 999px;
white-space: nowrap;
}
.utm-projecao-chip strong { color: #E8611A; font-weight: 800; }
.utm-light .utm-projecao-chip {
background: rgba(232,97,26,0.08);
border-color: rgba(232,97,26,0.30);
}
.utm-header-right { display: flex; align-items: center; gap: 12px; }
.utm-user-bloco { text-align: right; line-height: 1.2; }
.utm-user-nome { color: var(--utm-text); font-weight: 600; font-size: 14px; }
.utm-user-role { color: var(--utm-text-dim); font-size: 12px; }
.utm-avatar {
width: 40px; height: 40px; border-radius: 50%;
background: var(--utm-accent); color: var(--text); font-weight: 700;
display: flex; align-items: center; justify-content: center;
font-size: 14px; text-transform: uppercase;
}
.utm-icon-btn {
width: 36px; height: 36px; border-radius: 8px;
background: transparent; color: var(--utm-text-dim);
border: 1px solid var(--utm-card-border);
cursor: pointer; font-size: 16px;
display: flex; align-items: center; justify-content: center;
transition: all .15s;
}
.utm-icon-btn:hover { background: var(--utm-edit-hover); color: var(--utm-accent); border-color: var(--utm-accent); }
.utm-icon-btn-ativo { background: var(--utm-accent); color: var(--text); border-color: var(--utm-accent); }
.utm-icon-btn-danger:hover { background: rgba(239, 68, 68, 0.15); color: #EF4444; border-color: #EF4444; }
.utm-visualizacoes {
display: flex;
align-items: center;
gap: 6px;
padding-right: 10px;
margin-right: 4px;
border-right: 1px solid var(--utm-card-border);
}
.utm-select-visualizacao {
background: var(--utm-input-bg);
color: var(--utm-text-mid);
border: 1px solid var(--utm-card-border);
border-radius: 8px;
padding: 8px 12px;
font-size: 13px;
font-family: inherit;
font-weight: 500;
cursor: pointer;
min-width: 180px;
max-width: 220px;
}
.utm-select-visualizacao:hover { border-color: var(--utm-accent); }
.utm-edit-barra {
background: var(--utm-accent);
color: var(--text);
padding: 12px 24px;
border-radius: 10px;
margin-bottom: 14px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
font-weight: 500;
}
.utm-edit-acoes { display: flex; gap: 8px; }
.utm-edit-barra .btn-ghost { color: var(--text); border-color: rgba(255,255,255,0.4); }
.utm-edit-barra .btn-ghost:hover { background: rgba(255,255,255,0.15); color: var(--text); }
.utm-edit-barra .btn-primary { background: #FFFFFF; color: var(--utm-accent); }
.utm-edit-barra .btn-primary:hover:not(:disabled) { background: #F3F4F6; }
.utm-layout {
display: flex;
gap: 14px;
align-items: flex-start;
}
.utm-conteudo { flex: 1; min-width: 0; }
.utm-lib {
width: 240px;
background: var(--utm-card-bg);
border: 1px solid var(--utm-card-border);
border-radius: 12px;
padding: 16px;
max-height: calc(100vh - 180px);
overflow-y: auto;
position: sticky;
top: 80px;
}
.utm-lib-titulo {
font-size: 15px; font-weight: 700;
color: var(--utm-text);
margin-bottom: 14px;
padding-bottom: 10px;
border-bottom: 1px solid var(--utm-card-border);
}
.utm-lib-grupo { margin-bottom: 14px; }
.utm-lib-grupo-titulo {
color: var(--utm-text-dim);
font-size: 11px; font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 6px;
}
.utm-lib-item {
display: block;
width: 100%;
text-align: left;
background: transparent;
color: var(--utm-text-mid);
border: 1px solid var(--utm-card-border);
border-radius: 6px;
padding: 8px 10px;
margin-bottom: 4px;
font-size: 12.5px;
cursor: pointer;
transition: all .1s;
font-family: inherit;
}
.utm-lib-item:hover {
background: var(--utm-accent);
color: var(--text);
border-color: var(--utm-accent);
}
.utm-filtros {
background: var(--utm-card-bg);
border: 1px solid var(--utm-card-border);
padding: 18px 24px;
border-radius: 12px;
margin-bottom: 12px;
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 14px;
}
.utm-filtro-periodo { min-width: 0; }
.filtro-data-wrap { display: flex; flex-direction: column; gap: 8px; }
.filtro-data-custom {
display: flex;
align-items: center;
gap: 8px;
background: var(--utm-input-bg);
border: 1px solid var(--utm-card-border);
border-radius: 8px;
padding: 6px 10px;
}
.filtro-data-custom input[type="date"] {
background: transparent;
color: var(--utm-text-mid);
border: none;
font-family: inherit;
font-size: 13px;
outline: none;
min-width: 0;
flex: 1;
color-scheme: dark;
}
.utm-dashboard.utm-light .filtro-data-custom input[type="date"] { color-scheme: light; }
.filtro-data-ate { color: var(--utm-text-dim); font-size: 12px; font-weight: 500; }
.utm-filtro-item label {
display: block;
color: var(--utm-text-dim);
font-size: 12px;
font-weight: 500;
margin-bottom: 6px;
}
.utm-filtros .ads-filtro-data {
background: var(--utm-input-bg);
color: var(--utm-text-mid);
border: 1px solid var(--utm-card-border);
width: 100%;
padding: 10px 12px;
font-size: 13px;
}
.utm-btn-atualizar-wrap {
display: flex;
justify-content: flex-end;
align-items: center;
gap: 14px;
margin-bottom: 16px;
}
.utm-atualizado { color: var(--utm-text-dim); font-size: 13px; }
.utm-btn-atualizar {
background: var(--utm-accent); color: var(--text);
border: none; border-radius: 8px;
padding: 8px 22px; font-weight: 600; font-size: 13px;
cursor: pointer; transition: background .15s;
font-family: inherit;
}
.utm-btn-atualizar:hover { background: var(--utm-accent-hover); }
.utm-btn-atualizar:disabled { opacity: .6; cursor: not-allowed; }
.utm-grid-principal {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 14px;
}
.utm-grid-final {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-bottom: 14px;
}
.utm-card-wrap { position: relative; }
.utm-card-wrap.utm-card-span { grid-column: span 2; grid-row: span 2; }
.utm-dashboard.utm-modo-edit .utm-card-wrap { cursor: grab; }
.utm-dashboard.utm-modo-edit .utm-card-wrap > .utm-card { border-style: dashed; }
.utm-dashboard.utm-modo-edit .utm-card-wrap:hover > .utm-card { border-color: var(--utm-accent); }
.utm-dragging > .utm-card { opacity: 0.5; border-color: var(--utm-drag-border) !important; }
.utm-card-remover {
position: absolute;
top: -8px; right: -8px;
width: 22px; height: 22px;
border-radius: 50%;
background: #EF4444;
color: var(--text);
border: none;
cursor: pointer;
font-size: 16px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.utm-card-drag-handle {
position: absolute;
top: 8px; right: 10px;
color: var(--utm-text-dim);
font-size: 14px;
letter-spacing: -2px;
z-index: 1;
}
.utm-card {
background: var(--utm-card-bg);
border: 1px solid var(--utm-card-border);
border-radius: 12px;
padding: 18px 20px;
min-height: 96px;
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
.utm-card-full { min-height: 260px; }
.utm-card-titulo {
color: var(--utm-text-dim);
font-size: 13px;
font-weight: 500;
margin-bottom: 8px;
}
.utm-card-titulo-verde { color: var(--utm-green); }
.utm-card-valor {
color: var(--utm-text);
font-size: 24px;
font-weight: 700;
}
.utm-card-valor-verde { color: var(--utm-green); }
.utm-card-donut {
min-height: 280px;
align-items: flex-start;
justify-content: flex-start;
}
.utm-funil-card { min-height: 320px; justify-content: flex-start; }
.utm-funil-vertical {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
margin-top: 12px;
width: 100%;
}
.utm-funil-etapa {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.utm-funil-etapa-bloco {
padding: 12px 14px;
border-radius: 10px;
color: var(--text);
text-align: center;
transition: transform .12s;
min-width: 130px;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.utm-funil-etapa-bloco:hover { transform: scale(1.03); }
.utm-funil-etapa-label { font-size: 11px; font-weight: 600; opacity: 0.9; text-transform: uppercase; letter-spacing: 0.4px; }
.utm-funil-etapa-valor { font-size: 20px; font-weight: 800; margin: 4px 0 2px; }
.utm-funil-etapa-pct { font-size: 10px; opacity: 0.85; }
.utm-funil-seta {
display: flex;
align-items: center;
justify-content: center;
padding: 4px 0;
}
.utm-funil-seta-taxa {
font-size: 10px;
font-weight: 700;
color: var(--utm-text-dim);
background: var(--utm-input-bg);
border: 1px solid var(--utm-card-border);
border-radius: 20px;
padding: 3px 10px;
}
.utm-donut-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin-top: 8px;
width: 100%;
}
.utm-donut-svg { width: 160px; height: 160px; }
.utm-donut-label { fill: var(--utm-text-dim); font-size: 11px; font-weight: 500; }
.utm-donut-valor { fill: var(--utm-text); font-size: 18px; font-weight: 700; }
.utm-donut-legenda {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px 16px;
width: 100%;
font-size: 13px;
}
.utm-donut-legenda-item { display: flex; align-items: center; gap: 6px; color: var(--utm-text-mid); }
.utm-donut-bolinha { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.utm-empty { color: var(--utm-text-dim); font-size: 13px; padding: 20px 0; text-align: center; }
.utm-aprovacao-lista {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 6px;
}
.utm-aprovacao-item {
display: flex;
align-items: center;
gap: 10px;
color: #E5E7EB;
font-size: 14px;
}
.utm-aprovacao-item > span:first-child { min-width: 54px; }
.utm-aprovacao-pct { margin-left: auto; color: var(--text); font-weight: 600; }
.utm-mini-donut svg { width: 28px; height: 28px; }
.utm-campanhas-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.utm-campanha-item {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 10px;
align-items: center;
font-size: 13px;
}
.utm-campanha-nome { color: var(--utm-text-mid); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.utm-campanha-valor { color: var(--utm-text); font-weight: 600; }
.utm-campanha-pct { color: var(--utm-accent); font-weight: 700; }
.utm-grafico-horario {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 4px;
height: 180px;
margin-top: 12px;
border-bottom: 1px solid var(--utm-card-border);
padding-bottom: 4px;
position: relative;
}
.utm-grafico-barra-wrap {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
position: relative;
}
.utm-grafico-barra {
width: 100%;
max-width: 22px;
background: var(--utm-accent);
border-radius: 3px 3px 0 0;
min-height: 1px;
}
.utm-grafico-barra-label {
position: absolute;
top: -18px;
font-size: 10px;
color: var(--utm-text-mid);
white-space: nowrap;
font-weight: 600;
}
.utm-grafico-hora {
font-size: 10px;
color: var(--utm-text-dim);
margin-top: 4px;
}
.utm-funil {
display: flex;
align-items: flex-end;
justify-content: space-around;
gap: 4px;
height: 260px;
margin-top: 12px;
}
.utm-funil-coluna {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
position: relative;
}
.utm-funil-label-topo {
color: #9CA3AF;
font-size: 11px;
font-weight: 600;
text-align: center;
}
.utm-funil-bloco {
width: 80%;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text);
font-weight: 700;
font-size: 13px;
}
.utm-funil-valor {
color: #E5E7EB;
font-size: 13px;
font-weight: 600;
}
.utm-dia-semana {
display: flex;
align-items: flex-end;
justify-content: space-around;
gap: 6px;
height: 200px;
margin-top: 12px;
border-bottom: 1px solid var(--utm-card-border);
padding-bottom: 4px;
}
.utm-dia-coluna {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
position: relative;
}
.utm-dia-barra {
width: 100%;
max-width: 32px;
background: var(--utm-accent);
border-radius: 3px 3px 0 0;
min-height: 1px;
}
.utm-dia-nome {
font-size: 11px;
color: var(--utm-text-dim);
margin-top: 4px;
}
.utm-dia-label {
position: absolute;
top: -18px;
font-size: 11px;
color: var(--utm-text-mid);
font-weight: 600;
}
@media (max-width: 1200px) {
.utm-grid-principal { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.utm-grid-principal { grid-template-columns: repeat(2, 1fr); }
.utm-grid-final { grid-template-columns: 1fr; }
.utm-filtros { grid-template-columns: 1fr; }
.utm-card-wrap.utm-card-span { grid-column: span 2; grid-row: span 2; }
.utm-layout { flex-direction: column; }
.utm-lib { width: 100%; max-height: 300px; position: static; }
}
@media (max-width: 640px) {
.utm-grid-principal, .utm-filtros { grid-template-columns: 1fr; }
.utm-card-wrap.utm-card-span { grid-column: auto; grid-row: auto; }
.utm-header { flex-direction: column; gap: 14px; align-items: flex-start; }
.utm-grafico-horario, .utm-dia-semana { height: 140px; }
}
/* ============================================================
Seletor de Objetivo (Meta/Google Ads)
============================================================ */
.ads-seletor-objetivo {
display: inline-flex;
background: #F3F4F6;
border-radius: 8px;
padding: 3px;
gap: 2px;
}
.ads-seletor-btn {
background: transparent;
color: #6B7280;
border: none;
padding: 4px 12px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
border-radius: 6px;
transition: all .1s;
font-family: inherit;
}
.ads-seletor-btn:hover { color: #1F2937; }
.ads-seletor-btn-ativo {
background: #FFFFFF;
color: #E8611A;
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
/* Seletor dentro do dashboard interno (herda tema claro/escuro) */
.utm-seletor-objetivo {
display: inline-flex;
background: var(--utm-input-bg);
border: 1px solid var(--utm-card-border);
border-radius: 8px;
padding: 3px;
gap: 2px;
margin-left: 8px;
}
.utm-seletor-btn {
background: transparent;
color: var(--utm-text-dim);
border: none;
padding: 6px 14px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
border-radius: 6px;
transition: all .1s;
font-family: inherit;
}
.utm-seletor-btn:hover { color: var(--utm-text-mid); }
.utm-seletor-btn-ativo {
background: var(--utm-accent);
color: var(--text);
}
.field-hint-inline {
color: var(--text-faint);
font-size: 12px;
font-weight: normal;
display: block;
margin-top: 2px;
}
/* Filtro de plataforma (Lista de Clientes + Kanban) */
.filtro-plataforma {
display: inline-flex;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 3px;
gap: 2px;
}
.filtro-plataforma-btn {
background: transparent;
color: var(--text-dim);
border: none;
padding: 7px 16px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border-radius: 7px;
transition: all .12s;
font-family: inherit;
}
.filtro-plataforma-btn:hover { color: var(--text); }
.filtro-plataforma-btn-ativo {
background: var(--skag-orange);
color: var(--text);
}
.ads-count {
display: inline-block;
background: var(--skag-orange);
color: var(--text);
font-size: 13px;
font-weight: 700;
padding: 2px 10px;
border-radius: 12px;
margin-left: 10px;
vertical-align: middle;
}
.btn-ordenar {
font-variant-numeric: tabular-nums;
letter-spacing: 0.5px;
min-width: 62px;
}
/* Toggle ON/OFF pra arquivar cliente no card da lista */
.client-card-right {
display: flex;
align-items: center;
gap: 10px;
}
.toggle-arquivar {
display: inline-flex;
align-items: center;
gap: 6px;
background: transparent;
border: none;
cursor: pointer;
padding: 4px 6px;
border-radius: 8px;
font-family: inherit;
}
.toggle-arquivar:hover { background: rgba(255,255,255,0.04); }
.toggle-arquivar-track {
width: 34px;
height: 18px;
border-radius: 999px;
background: #10B981;
position: relative;
transition: background .15s;
display: inline-block;
flex-shrink: 0;
}
.toggle-arquivar.off .toggle-arquivar-track { background: #4A4A4A; }
.toggle-arquivar-thumb {
position: absolute;
top: 2px; left: 2px;
width: 14px; height: 14px;
background: #FFFFFF;
border-radius: 50%;
transition: transform .15s;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.toggle-arquivar.off .toggle-arquivar-thumb {
transform: translateX(16px);
}
.toggle-arquivar-label {
font-size: 10px;
font-weight: 700;
color: var(--text-dim);
letter-spacing: 0.6px;
min-width: 22px;
text-align: left;
}
/* #348: botão Pausar/Despausar cliente na lista, ao lado do pill de estágio. */
.btn-pausar-cliente {
display: inline-flex;
align-items: center;
gap: 4px;
background: transparent;
border: 1px solid var(--border);
color: var(--text-dim);
font-family: inherit;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3px;
padding: 4px 10px;
border-radius: 100px;
cursor: pointer;
white-space: nowrap;
flex-shrink: 0;
transition: background .15s, color .15s, border-color .15s;
}
.btn-pausar-cliente:hover {
background: rgba(245, 158, 11, 0.12);
border-color: rgba(245, 158, 11, 0.5);
color: #F59E0B;
}
.btn-pausar-cliente.is-paused {
background: rgba(245, 158, 11, 0.14);
border-color: rgba(245, 158, 11, 0.45);
color: #F59E0B;
}
.btn-pausar-cliente.is-paused:hover {
background: rgba(16, 185, 129, 0.12);
border-color: rgba(16, 185, 129, 0.5);
color: var(--status-resolvido);
}
/* Estágio "Pausado" no pill do card */
.client-card-stage-pill.pausado {
background: rgba(245, 158, 11, 0.14);
color: #F59E0B;
}
/* Contadores: destaque do número de pausados quando houver */
.sub-pausados { color: #F59E0B; font-weight: 700; }
.lista-clientes-rodape {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--border);
font-size: 13px;
color: var(--text-dim);
text-align: left;
}
.toggle-arquivar.on .toggle-arquivar-label { color: #10B981; }
.toggle-arquivar.off .toggle-arquivar-label { color: #EF4444; }
/* ============================================================
GESTÃO DE TAREFAS (Trello-like)
Classes prefixadas com tv- pra evitar colisão com o resto do painel.
Convertido do mockup ~/foxx-skag/mockups/gestao-tarefas/ em 2026-05-21.
============================================================ */
.tarefas-view {
/* Tema ÚNICO: os tokens do board DERIVAM dos globais (:root / data-theme=light),
então o board acompanha o toggle ☀️/🌙 do app. Nada de paleta própria nem
seletor de tema paralelo aqui (aposentado 2026-07-10 — Kim/Alan 🔎). */
--tv-bg-base: var(--bg-base);
--tv-bg-surface: var(--bg-surface);
--tv-bg-elev: var(--bg-elev);
--tv-bg-elev2: var(--bg-pop);
--tv-border: var(--border);
--tv-text-hi: var(--text-hi);
--tv-text: var(--text);
--tv-text-dim: var(--text-dim);
--tv-text-faint: var(--text-faint);
--tv-primary: var(--skag-orange);
--tv-status-ok: #10B981;
--tv-status-warn: #F59E0B;
--tv-status-err: #EF4444;
--tv-status-info: #3B82F6;
--tv-list-w: 280px;
--tv-radius: 10px;
--tv-radius-sm: 6px;
--tv-header-h: 70px;
/* Fixed pra a scrollbar horizontal do board ficar SEMPRE visível,
independente de onde o usuário esteja na página (pedido Carol monitor pequeno). */
position: fixed;
top: var(--tv-header-h);
left: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
background: var(--tv-bg-base);
font-family: 'Inter', system-ui, sans-serif;
font-size: 14px;
color: var(--tv-text);
z-index: 1;
}
/* Barra de filtros do board (busca + Filtrar estilo Trello) */
.tv-toolbar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
border-bottom: 1px solid var(--tv-border);
background: var(--tv-bg-base);
flex-shrink: 0;
}
.tv-search {
display: flex;
align-items: center;
gap: 6px;
background: var(--tv-bg-surface);
border: 1px solid var(--tv-border);
border-radius: var(--tv-radius-sm);
padding: 0 8px;
height: 34px;
min-width: 220px;
}
.tv-search input {
background: transparent;
border: none;
outline: none;
color: var(--tv-text);
font-size: 13px;
width: 100%;
}
.tv-search-ic { opacity: 0.5; font-size: 12px; }
.tv-search-x {
background: none; border: none; color: var(--tv-text-faint);
cursor: pointer; font-size: 12px; padding: 2px;
}
.tv-search-x:hover { color: var(--tv-text); }
.tv-flt-wrap { position: relative; }
.tv-flt-btn {
display: inline-flex; align-items: center; gap: 6px;
height: 34px; padding: 0 12px;
background: var(--tv-bg-surface);
border: 1px solid var(--tv-border);
border-radius: var(--tv-radius-sm);
color: var(--tv-text); font-size: 13px; cursor: pointer;
}
.tv-flt-btn:hover { background: var(--tv-bg-elev); }
.tv-flt-btn.ativo { border-color: var(--tv-primary); color: var(--tv-primary); }
.tv-flt-ic { font-size: 13px; }
.tv-flt-badge {
background: var(--tv-primary); color: #FFFFFF;
border-radius: 999px; font-size: 11px; font-weight: 700;
min-width: 18px; height: 18px; padding: 0 5px;
display: inline-flex; align-items: center; justify-content: center;
}
.tv-flt-pop {
position: absolute; top: calc(100% + 6px); left: 0;
width: 280px; max-height: 70vh; overflow-y: auto;
background: var(--tv-bg-elev2);
border: 1px solid var(--tv-border);
border-radius: var(--tv-radius);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
z-index: 50; padding: 8px;
}
.tv-flt-pop-head {
display: flex; justify-content: space-between; align-items: center;
padding: 4px 6px 8px; font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px; color: var(--tv-text-dim);
}
.tv-flt-clear {
background: none; border: none; color: var(--tv-primary);
cursor: pointer; font-size: 11px; font-weight: 600;
text-transform: none; letter-spacing: 0;
}
.tv-flt-sec { border-top: 1px solid var(--tv-border); }
.tv-flt-sec-head {
width: 100%; display: flex; justify-content: space-between; align-items: center;
background: none; border: none; cursor: pointer;
color: var(--tv-text); font-size: 13px; font-weight: 600;
padding: 9px 6px;
}
.tv-flt-sec-head:hover { color: var(--tv-primary); }
.tv-flt-sec-count {
background: var(--tv-bg-elev2); color: var(--tv-text-dim);
border-radius: 999px; font-size: 10px; padding: 1px 6px; margin-left: 6px;
}
.tv-flt-caret { transition: transform 0.15s; opacity: 0.6; }
.tv-flt-caret.open { transform: rotate(180deg); }
.tv-flt-sec-body { padding: 2px 4px 8px; display: flex; flex-direction: column; gap: 2px; }
.tv-flt-opt {
display: flex; align-items: center; gap: 8px;
padding: 5px 6px; border-radius: var(--tv-radius-sm);
cursor: pointer; font-size: 13px; color: var(--tv-text);
}
.tv-flt-opt:hover { background: var(--tv-bg-elev); }
.tv-flt-opt input { accent-color: var(--tv-primary); cursor: pointer; flex-shrink: 0; }
.tv-flt-opt-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-flt-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.tv-flt-label {
font-size: 11px; font-weight: 600; color: var(--text);
padding: 2px 8px; border-radius: 4px;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px;
}
.tv-flt-vazio { font-size: 12px; color: var(--tv-text-faint); padding: 4px 6px; font-style: italic; }
.tv-flt-limpar-inline {
background: none; border: none; color: var(--tv-text-dim);
cursor: pointer; font-size: 12px;
}
.tv-flt-limpar-inline:hover { color: var(--tv-text); }
.tv-board {
flex: 1;
width: 100%;
overflow-x: scroll; /* scroll (não auto) = barra sempre visível */
overflow-y: hidden;
}
.tv-lists {
display: flex;
gap: 12px;
padding: 16px;
height: 100%;
align-items: flex-start;
}
/* Lista (coluna) */
.tv-list {
background: var(--tv-bg-surface);
border-radius: var(--tv-radius);
width: var(--tv-list-w);
flex-shrink: 0;
max-height: 100%;
display: flex;
flex-direction: column;
}
.tv-list-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 14px 8px;
}
.tv-list-header h2 {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--tv-text-dim);
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.tv-count {
background: var(--tv-bg-elev);
color: var(--tv-text-dim);
border-radius: 10px;
padding: 2px 8px;
font-size: 10px;
font-weight: 600;
}
.tv-list-menu {
background: transparent;
border: none;
color: var(--tv-text-dim);
cursor: pointer;
padding: 2px 8px;
border-radius: 4px;
font-size: 18px;
line-height: 1;
}
.tv-list-menu:hover { background: var(--tv-bg-elev); color: var(--tv-text); }
.tv-list-actions { position: relative; display: flex; align-items: center; gap: 2px; }
.tv-list-pop-overlay { position: fixed; inset: 0; z-index: 40; }
.tv-list-pop {
position: absolute; top: 100%; right: 0; margin-top: 4px; z-index: 41;
background: var(--tv-bg-elev2); border: 1px solid var(--tv-border);
border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,0.35);
padding: 6px; min-width: 230px;
}
.tv-list-pop-title {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
color: var(--tv-text-faint); padding: 4px 8px 6px;
}
.tv-list-pop-item {
display: block; width: 100%; text-align: left;
background: transparent; border: none; color: var(--tv-text);
padding: 8px 10px; border-radius: 6px; font-size: 13px; cursor: pointer;
}
.tv-list-pop-item:hover { background: var(--tv-bg-base); color: var(--tv-primary); }
.tv-list-pop-sep { height: 1px; background: var(--tv-border); margin: 4px 0; }
.tv-list-name { cursor: text; }
.tv-list-name:hover { color: var(--tv-text); }
.tv-list-rename {
flex: 1; min-width: 0; font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.6px;
background: var(--tv-bg-base); border: 1px solid var(--tv-primary);
color: var(--tv-text); border-radius: 6px; padding: 4px 8px;
}
.tv-cards {
list-style: none;
padding: 0 8px 4px;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
overflow-y: auto;
flex: 1;
}
/* Card no quadro */
.tv-card {
background: var(--tv-bg-elev);
border-radius: var(--tv-radius-sm);
padding: 10px 12px;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
border: 1px solid transparent;
list-style: none;
}
.tv-card:hover { background: var(--tv-bg-elev2); border-color: var(--tv-border); }
.tv-card.destacado {
border-color: var(--tv-primary);
box-shadow: 0 0 0 2px rgba(232, 97, 26, 0.2);
}
/* 10/08: o card concluído agora FICA na coluna, riscado, em vez de migrar para a coluna
Concluídas. Como ele passou a conviver com os abertos, 0.6 apagava demais: quem marcou
errado precisa conseguir LER o que marcou para desfazer. 0.78 mantém o "já era" sem
esconder o título. */
.tv-card.concluido { opacity: 0.78; }
.tv-card.concluido .tv-card-title {
text-decoration: line-through;
color: var(--tv-text-dim);
}
.tv-card-labels {
display: flex;
gap: 4px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.tv-label {
color: var(--text);
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.4px;
white-space: nowrap;
}
/* Selo Super Tarefa no card do board. Acompanha o .hd-tag-sup do Painel, que virou rosa em
06/08 para parar de se confundir com a rotina. Os dois têm que mudar juntos, senão a mesma
tarefa fica roxa no board e rosa no Painel. */
.tv-label-super { background: #5A1E45; color: #FFA6D6; }
:root[data-theme="light"] .tv-label-super { background: #FFE0F2; color: #9D174D; }
.tv-card-title {
font-size: 13px;
font-weight: 500;
line-height: 1.4;
margin: 0 0 8px;
}
.tv-card-meta {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.tv-meta-item {
font-size: 11px;
color: var(--tv-text-dim);
display: inline-flex;
align-items: center;
gap: 3px;
}
.tv-meta-data {
padding: 2px 6px;
border-radius: 4px;
font-weight: 600;
}
.tv-meta-data.atrasado { background: rgba(239, 68, 68, 0.18); color: var(--tv-status-err); }
.tv-meta-data.proximo { background: rgba(245, 158, 11, 0.18); color: var(--tv-status-warn); }
.tv-meta-data.futuro { background: rgba(16, 185, 129, 0.16); color: var(--tv-status-ok); }
.tv-meta-data.ok { background: rgba(16, 185, 129, 0.18); color: var(--tv-status-ok); }
.tv-card-members {
display: flex;
justify-content: flex-end;
margin-top: 4px;
}
.tv-avatar-sm {
width: 22px; height: 22px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
margin-left: -4px;
border: 2px solid var(--tv-bg-elev);
color: var(--text);
}
.tv-avatar-sm:first-child { margin-left: 0; }
.tv-avatar-gedasio { background: #6366F1; }
.tv-avatar-luiza { background: #10B981; }
.tv-avatar-carol { background: var(--tv-primary); }
.tv-avatar-wylle { background: #8B5CF6; }
.tv-add-card {
background: transparent;
border: none;
color: var(--tv-text-dim);
text-align: left;
padding: 10px 14px;
cursor: pointer;
font-size: 13px;
border-radius: 0 0 var(--tv-radius) var(--tv-radius);
font-family: inherit;
}
.tv-add-card:hover { background: var(--tv-bg-elev); color: var(--tv-text); }
.tv-ver-mais {
display: block;
width: 100%;
margin-top: 6px;
background: var(--tv-bg-elev);
border: 1px dashed var(--tv-border, rgba(255,255,255,.15));
color: var(--tv-text-dim);
text-align: center;
padding: 8px 12px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
border-radius: var(--tv-radius);
font-family: inherit;
}
.tv-ver-mais:hover { color: var(--tv-text); border-style: solid; }
.tv-add-list {
background: rgba(26, 26, 26, 0.5);
width: var(--tv-list-w);
flex-shrink: 0;
padding: 16px;
border-radius: var(--tv-radius);
color: var(--tv-text-dim);
cursor: pointer;
border: 1px dashed var(--tv-border);
font-weight: 500;
font-size: 13px;
text-align: center;
}
.tv-add-list:hover {
background: var(--tv-bg-surface);
color: var(--tv-text);
border-color: var(--tv-primary);
}
/* Modal — vars duplicadas aqui porque o modal é renderizado via React Portal
em document.body (fora do .tarefas-view), então não herda as custom props. */
.tv-modal-overlay {
/* Portal em document.body: herda os tokens globais do :root, então derivar aqui
também faz o modal seguir o tema (dark/claro) — antes era dark fixo. */
--tv-bg-base: var(--bg-base);
--tv-bg-surface: var(--bg-surface);
--tv-bg-elev: var(--bg-elev);
--tv-bg-elev2: var(--bg-pop);
--tv-border: var(--border);
--tv-text-hi: var(--text-hi);
--tv-text: var(--text);
--tv-text-dim: var(--text-dim);
--tv-text-faint: var(--text-faint);
--tv-primary: var(--skag-orange);
--tv-status-ok: #10B981;
--tv-status-warn: #F59E0B;
--tv-status-err: #EF4444;
--tv-status-info: #3B82F6;
--tv-radius: 10px;
--tv-radius-sm: 6px;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.75);
z-index: 10000;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 40px 20px;
overflow-y: auto;
font-family: 'Inter', system-ui, sans-serif;
font-size: 14px;
color: var(--text);
}
.tv-modal-card {
background: var(--tv-bg-surface);
border-radius: 12px;
width: 100%;
max-width: 1040px;
border: 1px solid var(--tv-border);
margin-bottom: 40px;
display: flex;
flex-direction: column;
overflow: hidden;
color: var(--tv-text);
font-family: 'Inter', system-ui, sans-serif;
font-size: 14px;
}
.tv-modal-topbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 14px;
background: var(--tv-bg-base);
border-bottom: 1px solid var(--tv-border);
}
.tv-list-dropdown {
background: var(--tv-bg-elev);
border: 1px solid var(--tv-border);
color: var(--tv-text);
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
display: inline-flex;
align-items: center;
gap: 8px;
font-family: inherit;
}
.tv-list-dropdown:hover { background: var(--tv-bg-elev2); border-color: var(--tv-primary); }
.tv-modal-topbar-right { display: flex; align-items: center; gap: 4px; }
.tv-icon-btn {
background: transparent;
border: none;
color: var(--tv-text-dim);
cursor: pointer;
width: 32px;
height: 32px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 14px;
}
.tv-icon-btn:hover { background: var(--tv-bg-elev); color: var(--tv-text); }
/* Menu de ações do card (⋯) na topbar do modal */
.tv-topbar-actions { display: flex; align-items: center; gap: 4px; }
.tv-card-menu-wrap { position: relative; }
.tv-card-menu-backdrop { position: fixed; inset: 0; z-index: 5; }
.tv-card-menu {
position: absolute; top: calc(100% + 4px); right: 0;
background: var(--tv-bg-elev2); border: 1px solid var(--tv-border);
border-radius: var(--tv-radius-sm); padding: 4px;
min-width: 190px; z-index: 6;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.tv-card-menu button {
display: flex; align-items: center; gap: 10px; width: 100%;
background: none; border: none; color: var(--tv-text);
padding: 8px 10px; border-radius: 4px; cursor: pointer;
font-size: 13px; text-align: left; font-family: inherit;
}
.tv-card-menu button:hover { background: var(--tv-bg-surface); }
.tv-card-menu button.danger { color: var(--tv-status-err); }
.tv-card-menu button.danger:hover { background: rgba(239, 68, 68, 0.12); }
.tv-card-menu-sep { height: 1px; background: var(--tv-border); margin: 4px 0; }
/* Arquivados, Lixeira, Diário e Tarefas Concluídas: bloco único, colado na Caixa de
Entrada (Carol 06/08). O margin-left:auto que cada botão tinha saiu daqui: com três
botões seguidos, o espaço livre da toolbar era dividido entre eles e os três ficavam
espalhados pela barra. */
.tv-toolbar-acoes {
display: inline-flex;
align-items: center;
gap: 6px;
}
.tv-arquivados-btn {
background: var(--tv-bg-surface);
border: 1px solid var(--tv-border);
border-radius: var(--tv-radius-sm);
color: var(--tv-text-dim);
height: 34px; padding: 0 12px;
cursor: pointer; font-size: 13px;
}
.tv-arquivados-btn:hover { background: var(--tv-bg-elev); color: var(--tv-text); }
/* Ligado = a coluna de concluídas está aparecendo no quadro */
.tv-arquivados-btn.ativo { border-color: var(--tv-primary); color: var(--tv-primary); }
/* Modal de cartões arquivados */
.tv-arq-modal {
background: var(--tv-bg-surface);
border: 1px solid var(--tv-border);
border-radius: 12px;
width: 100%; max-width: 560px;
margin-bottom: 40px;
overflow: hidden;
display: flex; flex-direction: column;
max-height: 80vh;
}
.tv-arq-head {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 16px; border-bottom: 1px solid var(--tv-border);
background: var(--tv-bg-base);
}
.tv-arq-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.tv-arq-body { padding: 8px; overflow-y: auto; }
.tv-arq-vazio { padding: 24px; text-align: center; color: var(--tv-text-faint); font-size: 13px; font-style: italic; }
.tv-arq-item {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 10px 12px; border-radius: var(--tv-radius-sm);
}
.tv-arq-item:hover { background: var(--tv-bg-elev); }
.tv-arq-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tv-arq-titulo { font-size: 14px; color: var(--tv-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-arq-meta { font-size: 11px; color: var(--tv-text-faint); }
.tv-arq-acoes { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* Título clicável dentro de uma linha de listagem (painel de Amostras): parece texto,
se comporta como link, e não herda o visual de botão do resto do sistema. */
.tv-link-btn {
background: none; border: 0; padding: 0; margin: 0;
font: inherit; color: inherit; cursor: pointer; text-align: left;
}
.tv-link-btn:hover { color: var(--tv-primary); text-decoration: underline; }
.tv-arq-resgatar {
background: var(--tv-primary); border: none; color: #FFFFFF;
padding: 6px 12px; border-radius: var(--tv-radius-sm);
cursor: pointer; font-size: 12px; font-weight: 600;
}
.tv-arq-resgatar:hover { filter: brightness(1.1); }
.tv-arq-excluir {
background: none; border: 1px solid var(--tv-border); color: var(--tv-text-dim);
padding: 6px 9px; border-radius: var(--tv-radius-sm); cursor: pointer; font-size: 12px;
}
.tv-arq-excluir:hover { color: var(--tv-status-err); border-color: var(--tv-status-err); }
.tv-modal-grid {
display: grid;
grid-template-columns: 1fr 360px;
min-height: 480px;
}
.tv-modal-main {
padding: 20px 24px 24px;
min-width: 0;
border-right: 1px solid var(--tv-border);
}
.tv-modal-header {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 16px;
}
.tv-status-check {
width: 28px;
height: 28px;
border-radius: 50%;
border: 2px solid var(--tv-text-faint);
background: transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 4px;
}
.tv-status-check:hover { border-color: var(--tv-status-ok); }
.tv-status-check-icon { color: transparent; font-size: 14px; font-weight: 700; line-height: 1; }
.tv-status-check.concluido { background: var(--tv-status-ok); border-color: var(--tv-status-ok); }
.tv-status-check.concluido .tv-status-check-icon { color: var(--text); }
.tv-modal-title { font-size: 22px; font-weight: 700; line-height: 1.3; flex: 1; margin: 0; }
.tv-btn-add-pill {
background: var(--tv-bg-elev);
color: var(--tv-text);
border: none;
padding: 7px 14px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
flex-shrink: 0;
font-family: inherit;
}
.tv-btn-add-pill:hover { background: var(--tv-bg-elev2); }
.tv-actions-row {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 24px;
padding-left: 40px;
}
.tv-action-pill {
background: var(--tv-bg-elev);
color: var(--tv-text);
border: none;
padding: 8px 14px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: inherit;
}
.tv-action-pill:hover { background: var(--tv-bg-elev2); }
.tv-meta-row {
display: flex;
gap: 32px;
margin-bottom: 28px;
padding-left: 40px;
flex-wrap: wrap;
}
.tv-meta-block label {
display: block;
font-size: 11px;
font-weight: 700;
color: var(--tv-text-dim);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.tv-meta-block-content { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.tv-avatar-md {
width: 28px; height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
margin-left: -4px;
border: 2px solid var(--tv-bg-surface);
color: var(--text);
}
.tv-avatar-md:first-child { margin-left: 0; }
.tv-avatar-md.tv-avatar-gedasio { background: #6366F1; }
.tv-avatar-md.tv-avatar-luiza { background: #10B981; }
.tv-avatar-md.tv-avatar-carol { background: var(--tv-primary); }
.tv-avatar-md.tv-avatar-wylle { background: #8B5CF6; }
.tv-btn-add {
background: var(--tv-bg-elev);
color: var(--tv-text-dim);
border: none;
width: 26px; height: 26px;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
margin-left: 4px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: inherit;
}
.tv-btn-add:hover { background: var(--tv-bg-elev2); color: var(--tv-text); }
.tv-data-block {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--tv-bg-elev);
padding: 6px 12px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
}
.tv-data-block:hover { background: var(--tv-bg-elev2); }
.tv-data-text { color: var(--tv-text); }
.tv-data-badge {
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 4px;
}
.tv-data-badge.atraso { background: rgba(239, 68, 68, 0.2); color: var(--tv-status-err); }
.tv-data-badge.proximo { background: rgba(245, 158, 11, 0.2); color: var(--tv-status-warn); }
.tv-data-badge.ok { background: rgba(16, 185, 129, 0.2); color: var(--tv-status-ok); }
.tv-caret { color: var(--tv-text-dim); font-size: 12px; }
.tv-section {
padding-left: 40px;
margin-bottom: 24px;
}
.tv-section-title {
font-size: 14px;
font-weight: 700;
margin: 0 0 12px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.tv-btn-editar {
background: var(--tv-bg-elev);
color: var(--tv-text);
border: none;
padding: 5px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
font-family: inherit;
}
.tv-btn-editar:hover { background: var(--tv-bg-elev2); }
.tv-descricao { font-size: 13px; line-height: 1.6; color: var(--tv-text); }
.tv-descricao p { margin: 0 0 8px; }
.tv-descricao p:last-child { margin-bottom: 0; }
/* Card #221 (pedido do Wylle): tudo que foi escrito na Descrição fica dentro de um
retângulo de borda laranja — assim dá pra saber de relance o que pertence à
descrição e o que é o resto do card. Vale pro modo leitura e pro modo edição. */
.tv-section-descricao .tv-descricao,
.tv-section-descricao .tv-desc-edit {
border: 1.5px solid var(--tv-primary);
border-radius: 8px;
padding: 10px 12px;
background: rgba(249, 115, 22, 0.05);
}
.tv-section-descricao .tv-desc-edit:focus { border-color: var(--tv-primary); box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.25); }
/* Card #221: separador entre as seções do card aberto (Repetir / Descrição /
Checklist / Anexos), pra uma não escorrer na outra no fundo escuro. */
.tv-modal-main .tv-section {
border-top: 1px solid var(--tv-border);
padding-top: 14px;
}
.tv-link-inline {
color: var(--tv-status-info);
text-decoration: underline;
font-weight: 500;
}
.tv-link-inline:hover { color: #60A5FA; }
.tv-template-badge {
background: rgba(232, 97, 26, 0.18);
color: var(--tv-primary);
padding: 3px 8px;
border-radius: 4px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Briefing form */
.tv-brief-form {
background: var(--tv-bg-base);
border-radius: 8px;
padding: 16px;
border: 1px solid var(--tv-border);
}
.tv-brief-head {
font-size: 11px;
color: var(--tv-text-faint);
margin: 0 0 12px;
font-style: italic;
}
/* Status do briefing (gatilho da automação de criativos) */
.tv-brief-status {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 12px;
padding-bottom: 12px;
border-bottom: 1px solid var(--tv-border);
}
.tv-brief-status-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex: 0 0 auto;
background: #9ca3af;
}
.tv-brief-status.st-rascunho .tv-brief-status-dot { background: #f59e0b; }
.tv-brief-status.st-pronto .tv-brief-status-dot { background: #10b981; }
.tv-brief-status.st-capturando .tv-brief-status-dot { background: #3b82f6; animation: tv-pulse 1.2s ease-in-out infinite; }
.tv-brief-status.st-capturado .tv-brief-status-dot { background: #6366f1; }
.tv-brief-status.st-processando .tv-brief-status-dot { background: #3b82f6; animation: tv-pulse 1.2s ease-in-out infinite; }
.tv-brief-status.st-concluido .tv-brief-status-dot { background: #14b8a6; }
@keyframes tv-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
.tv-brief-status-label {
font-size: 12px;
font-weight: 600;
color: var(--tv-text-dim);
}
.tv-brief-status-btn {
margin-left: auto;
background: var(--tv-bg-elev);
border: 1px solid var(--tv-border);
color: var(--tv-text-dim);
padding: 5px 12px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
}
.tv-brief-status-btn:hover { border-color: var(--tv-primary); color: var(--tv-primary); }
.tv-brief-status-btn.ativo {
background: rgba(16, 185, 129, 0.15);
border-color: #10b981;
color: #10b981;
}
.tv-brief-field { margin-bottom: 12px; }
.tv-brief-field:last-child { margin-bottom: 0; }
.tv-brief-field label {
display: block;
font-size: 11px;
font-weight: 600;
color: var(--tv-text-dim);
margin-bottom: 4px;
text-transform: uppercase;
letter-spacing: 0.3px;
}
.tv-brief-field input,
.tv-brief-field textarea {
width: 100%;
background: var(--tv-bg-elev);
border: 1px solid var(--tv-border);
color: var(--tv-text);
padding: 8px 10px;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
}
.tv-brief-field input:focus,
.tv-brief-field textarea:focus {
outline: none;
border-color: var(--tv-primary);
}
.tv-brief-field textarea { min-height: 60px; resize: vertical; }
.tv-brief-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-bottom: 12px;
}
/* Briefing com múltiplos criativos */
.tv-criativo-bloco {
border: 1px solid var(--tv-border);
border-radius: 8px;
padding: 12px;
margin-bottom: 12px;
background: var(--tv-bg-surface);
}
.tv-criativo-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.tv-criativo-num {
font-size: 12px;
font-weight: 700;
color: var(--tv-primary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tv-criativo-del {
background: none;
border: none;
cursor: pointer;
color: var(--tv-text-faint);
font-size: 13px;
padding: 2px 6px;
border-radius: 4px;
}
.tv-criativo-del:hover { color: var(--tv-status-err); background: var(--tv-bg-elev); }
.tv-add-criativo {
width: 100%;
background: none;
border: 1px dashed var(--tv-border);
color: var(--tv-text-dim);
padding: 10px;
border-radius: 8px;
cursor: pointer;
font-size: 13px;
font-weight: 600;
}
.tv-add-criativo:hover { border-color: var(--tv-primary); color: var(--tv-primary); }
.tv-link-drive {
display: flex;
align-items: center;
gap: 10px;
background: rgba(59, 130, 246, 0.12);
border: 1px solid rgba(59, 130, 246, 0.3);
padding: 8px 12px;
border-radius: 6px;
margin-top: 4px;
}
.tv-link-drive a {
color: var(--tv-status-info);
text-decoration: none;
font-size: 13px;
font-weight: 500;
}
.tv-link-drive a:hover { text-decoration: underline; }
/* Checklist */
.tv-checklist-progress {
background: var(--tv-bg-elev);
color: var(--tv-text-dim);
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
margin-left: auto;
font-weight: 600;
}
.tv-checklist { display: flex; flex-direction: column; gap: 4px; }
.tv-check-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 10px;
border-radius: 6px;
cursor: pointer;
font-size: 13px;
}
.tv-check-item:hover { background: var(--tv-bg-elev); }
.tv-check-item input[type=checkbox] {
width: 16px; height: 16px;
accent-color: var(--tv-primary);
cursor: pointer;
}
/* Anexo */
.tv-anexo {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 12px;
background: var(--tv-bg-base);
border: 1px solid var(--tv-border);
border-radius: 6px;
}
.tv-anexo-icon {
font-size: 18px;
background: var(--tv-bg-elev);
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
border-radius: 6px;
}
.tv-anexo-info p { font-size: 13px; font-weight: 500; margin: 0 0 2px; }
.tv-anexo-info small { font-size: 11px; color: var(--tv-text-faint); }
/* Activity panel */
.tv-activity-panel {
background: var(--tv-bg-base);
padding: 20px 18px;
overflow-y: auto;
max-height: 80vh;
}
.tv-activity-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}
.tv-activity-header h4 { font-size: 14px; font-weight: 700; color: var(--tv-text); margin: 0; }
.tv-btn-link-sm {
background: var(--tv-bg-elev);
color: var(--tv-text);
border: none;
padding: 5px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
font-weight: 500;
font-family: inherit;
}
.tv-btn-link-sm:hover { background: var(--tv-bg-elev2); }
.tv-comment-input { margin-bottom: 18px; }
.tv-comment-input input,
.tv-comment-input textarea {
width: 100%;
background: var(--tv-bg-elev);
border: 1px solid var(--tv-border);
color: var(--tv-text);
padding: 10px 14px;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
box-sizing: border-box;
resize: vertical;
display: block;
}
.tv-comment-input input:focus,
.tv-comment-input textarea:focus { outline: none; border-color: var(--tv-primary); }
/* Botão de enviar: sem ele, quem digitava e clicava fora perdia o texto (Carol 13/08). */
.tv-comment-acoes {
display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px;
}
.tv-comment-acoes small { font-size: 11px; color: var(--tv-text-faint); }
.tv-btn-comentar {
background: var(--skag-orange); color: #fff; border: none;
padding: 6px 14px; border-radius: 6px; cursor: pointer;
font-family: inherit; font-size: 12px; font-weight: 600;
}
.tv-btn-comentar:hover:not(:disabled) { background: var(--skag-orange-hover); }
.tv-btn-comentar:disabled { opacity: .45; cursor: default; }
.tv-comment-erro { margin-top: 6px; font-size: 12px; color: var(--tv-status-err, #EF4444); }
/* O texto do comentário respeita as quebras de linha e não estoura a coluna com link comprido. */
.tv-comment-txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.tv-activity-list { display: flex; flex-direction: column; gap: 14px; }
.tv-activity-item { display: flex; gap: 10px; align-items: flex-start; }
.tv-activity-item .tv-avatar-sm {
width: 28px; height: 28px;
font-size: 10px;
margin-left: 0;
border: none;
flex-shrink: 0;
}
.tv-activity-text { flex: 1; min-width: 0; }
.tv-activity-text p {
font-size: 12.5px;
line-height: 1.45;
color: var(--tv-text);
margin: 0 0 3px;
}
.tv-activity-text p a { color: var(--tv-status-info); text-decoration: underline; }
.tv-activity-text small {
display: block;
font-size: 11px;
color: var(--tv-status-info);
text-decoration: underline;
cursor: pointer;
}
/* Bottom bar */
.tv-modal-bottom-bar {
display: flex;
justify-content: center;
gap: 8px;
padding: 10px;
background: var(--tv-bg-base);
border-top: 1px solid var(--tv-border);
}
.tv-bottom-btn {
background: transparent;
border: none;
color: var(--tv-text-dim);
padding: 6px 14px;
border-radius: 6px;
cursor: pointer;
font-size: 12.5px;
font-weight: 500;
font-family: inherit;
}
.tv-bottom-btn:hover { background: var(--tv-bg-elev); color: var(--tv-text); }
.tv-bottom-btn.active { color: var(--tv-primary); }
/* Scrollbar geral (cards, activity, modal overlay) */
.tv-cards::-webkit-scrollbar,
.tv-modal-overlay::-webkit-scrollbar,
.tv-activity-panel::-webkit-scrollbar { height: 10px; width: 8px; }
.tv-cards::-webkit-scrollbar-thumb,
.tv-modal-overlay::-webkit-scrollbar-thumb,
.tv-activity-panel::-webkit-scrollbar-thumb { background: var(--tv-bg-elev); border-radius: 4px; }
/* Scrollbar do board (horizontal): destacada pra ficar bem visível mesmo
sem hover (pedido Carol — monitor pequeno) */
.tv-board::-webkit-scrollbar { height: 14px; }
.tv-board::-webkit-scrollbar-track {
background: rgba(232, 97, 26, 0.06);
border-radius: 0;
}
.tv-board::-webkit-scrollbar-thumb {
background: rgba(232, 97, 26, 0.45);
border-radius: 7px;
border: 2px solid var(--tv-bg-base);
}
.tv-board::-webkit-scrollbar-thumb:hover { background: var(--tv-primary); }
/* Firefox */
.tv-board { scrollbar-width: thin; scrollbar-color: rgba(232, 97, 26, 0.5) rgba(232, 97, 26, 0.08); }
/* Formulários inline (novo card, nova lista) */
.tv-novo-card-form {
background: var(--tv-bg-elev);
padding: 8px;
border-radius: var(--tv-radius-sm);
margin: 0 8px 8px;
}
.tv-novo-card-form textarea {
width: 100%;
background: var(--tv-bg-base);
border: 1px solid var(--tv-border);
color: var(--tv-text);
padding: 8px 10px;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
resize: vertical;
min-height: 60px;
}
.tv-novo-card-form textarea:focus { outline: none; border-color: var(--tv-primary); }
.tv-novo-card-actions {
display: flex;
gap: 8px;
align-items: center;
margin-top: 8px;
}
.tv-add-list-form { background: var(--tv-bg-surface); border-style: solid; padding: 12px; }
.tv-add-list-form input {
width: 100%;
background: var(--tv-bg-elev);
border: 1px solid var(--tv-border);
color: var(--tv-text);
padding: 8px 10px;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
margin-bottom: 8px;
}
.tv-add-list-form input:focus { outline: none; border-color: var(--tv-primary); }
/* Dropdown Cliente */
.tv-cliente-select {
background: var(--tv-bg-elev);
border: 1px solid var(--tv-border);
color: var(--tv-text);
padding: 7px 10px;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
min-width: 200px;
cursor: pointer;
}
.tv-cliente-select:hover { border-color: var(--tv-primary); }
.tv-cliente-select:focus { outline: none; border-color: var(--tv-primary); }
.tv-cliente-select option { background: var(--tv-bg-elev); color: var(--tv-text); }
/* Membros picker (popover) */
.tv-membros-picker {
position: absolute;
background: var(--tv-bg-elev2);
border: 1px solid var(--tv-border);
border-radius: 8px;
padding: 6px;
margin-top: 6px;
max-height: 260px;
overflow-y: auto;
z-index: 1100;
min-width: 220px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.tv-membro-opcao {
display: flex;
align-items: center;
gap: 10px;
padding: 6px 10px;
border-radius: 6px;
cursor: pointer;
}
.tv-membro-opcao:hover { background: var(--tv-bg-elev); }
.tv-membro-opcao.marcado { background: rgba(232, 97, 26, 0.12); }
.tv-membro-nome { flex: 1; font-size: 13px; }
.tv-check-marcado { color: var(--tv-primary); font-weight: 700; }
/* Edit inline: título e descrição */
.tv-titulo-edit {
flex: 1;
background: var(--tv-bg-elev);
border: 1px solid var(--tv-primary);
color: var(--tv-text);
font-size: 22px;
font-weight: 700;
padding: 4px 10px;
border-radius: 6px;
font-family: inherit;
}
.tv-titulo-edit:focus { outline: none; }
.tv-desc-edit {
width: 100%;
background: var(--tv-bg-elev);
border: 1px solid var(--tv-border);
color: var(--tv-text);
padding: 10px 12px;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
line-height: 1.6;
resize: vertical;
min-height: 100px;
}
.tv-desc-edit:focus { outline: none; border-color: var(--tv-primary); }
.tv-data-input {
background: transparent;
border: none;
color: var(--tv-text);
font-size: 13px;
font-family: inherit;
padding: 0;
width: 180px;
color-scheme: dark;
}
.tv-data-input:focus { outline: none; }
/* #267: color-scheme:dark cravado deixava o ícone do calendário BRANCO também no tema
claro (sumia no fundo claro do modal de Tarefas). No tema claro segue o tema, como os
outros date inputs (.agent-periodo, .filtro-data-custom). */
:root[data-theme="light"] .tv-data-input { color-scheme: light; }
.tv-modal-title { cursor: text; }
.tv-modal-title:hover { background: rgba(232, 97, 26, 0.08); border-radius: 6px; }
/* Labels bar (etiquetas inline no header do modal) */
.tv-labels-bar {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 0 0 14px 40px;
align-items: center;
}
.tv-label-add-btn {
background: var(--tv-bg-elev);
color: var(--tv-text-dim);
border: none;
padding: 4px 10px;
border-radius: 4px;
cursor: pointer;
font-size: 11px;
font-weight: 600;
font-family: inherit;
}
.tv-label-add-btn:hover { background: var(--tv-bg-elev2); color: var(--tv-text); }
/* Popover de etiquetas */
.tv-popover-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 11000;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.tv-popover {
background: var(--tv-bg-surface);
border: 1px solid var(--tv-border);
border-radius: var(--tv-radius);
padding: 16px;
width: 100%;
max-width: 360px;
max-height: 80vh;
overflow-y: auto;
}
.tv-popover-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}
.tv-popover-header h4 { font-size: 14px; font-weight: 700; margin: 0; }
.tv-popover-vazio { font-size: 12px; color: var(--tv-text-faint); font-style: italic; margin: 8px 0; }
.tv-popover-divisor { border: none; border-top: 1px solid var(--tv-border); margin: 12px 0; }
.tv-labels-existentes { display: flex; flex-direction: column; gap: 6px; }
.tv-label-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.tv-label-criar { display: flex; flex-direction: column; gap: 10px; }
.tv-label-criar input {
width: 100%;
background: var(--tv-bg-elev);
border: 1px solid var(--tv-border);
color: var(--tv-text);
padding: 8px 10px;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
}
.tv-label-criar input:focus { outline: none; border-color: var(--tv-primary); }
.tv-cor-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.tv-cor-opcao {
width: 28px;
height: 28px;
border-radius: 6px;
cursor: pointer;
border: 2px solid transparent;
transition: transform 0.1s, border-color 0.15s;
}
.tv-cor-opcao:hover { transform: scale(1.1); }
.tv-cor-opcao.selecionada { border-color: var(--tv-text); }
/* Checklist items com remover */
.tv-check-item-row {
display: flex;
align-items: center;
gap: 6px;
}
.tv-check-item-row .tv-check-item { flex: 1; }
.tv-check-remove {
background: transparent;
border: none;
color: var(--tv-text-faint);
cursor: pointer;
font-size: 14px;
padding: 4px 8px;
border-radius: 4px;
opacity: 0;
transition: opacity 0.15s;
}
.tv-check-item-row:hover .tv-check-remove { opacity: 1; }
.tv-check-remove:hover { background: var(--tv-bg-elev); color: var(--tv-status-err); }
.tv-check-done { text-decoration: line-through; color: var(--tv-text-faint); }
.tv-check-novo {
display: flex;
gap: 8px;
margin-top: 8px;
}
.tv-check-novo input {
flex: 1;
background: var(--tv-bg-elev);
border: 1px solid var(--tv-border);
color: var(--tv-text);
padding: 7px 10px;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
}
.tv-check-novo input:focus { outline: none; border-color: var(--tv-primary); }
/* Anexos list */
.tv-anexos-list { display: flex; flex-direction: column; gap: 6px; }
.tv-anexo a {
color: var(--tv-status-info);
text-decoration: none;
font-size: 13px;
font-weight: 500;
}
.tv-anexo a:hover { text-decoration: underline; }
.tv-anexo .tv-btn-link-sm { margin-left: auto; }
/* Mobile */
@media (max-width: 880px) {
.tv-modal-grid { grid-template-columns: 1fr; }
.tv-modal-main { border-right: none; border-bottom: 1px solid var(--tv-border); }
.tv-activity-panel { max-height: 50vh; }
.tv-actions-row, .tv-meta-row, .tv-section { padding-left: 0; }
.tv-brief-row { grid-template-columns: 1fr; }
.tv-modal-card { max-width: 100%; }
/* Header quebra linha em mobile, ocupa ~110px */
.tarefas-view { --tv-header-h: 110px; }
}
/* Excluir card / coluna + arrastar (drag&drop) */
.tv-card { position: relative; }
.tv-card-del {
position: absolute;
top: 6px;
right: 6px;
background: transparent;
border: none;
color: var(--tv-text-faint);
cursor: pointer;
font-size: 12px;
line-height: 1;
padding: 3px 5px;
border-radius: 4px;
opacity: 0;
transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.tv-card:hover .tv-card-del { opacity: 1; }
.tv-card-del:hover { background: rgba(239, 68, 68, 0.15); color: var(--tv-status-err); }
/* Bolinha de check no canto do card — concluir/reabrir sem precisar abrir (Carol 20/06) */
.tv-card { position: relative; }
.tv-card-check {
position: absolute;
top: 6px;
right: 6px;
width: 19px;
height: 19px;
padding: 0;
border-radius: 50%;
border: 1.5px solid var(--tv-border, #3a3a3a);
background: transparent;
color: transparent;
cursor: pointer;
font-size: 11px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.tv-card-check:hover { border-color: var(--tv-status-ok, #16a34a); color: var(--tv-status-ok, #16a34a); }
.tv-card-check.concluido { background: var(--tv-status-ok, #16a34a); border-color: var(--tv-status-ok, #16a34a); color: var(--text); }
/* lixeira sai do canto pra dar espaço ao check (continua aparecendo só no hover) */
.tv-card-del { right: 30px; }
.tv-card.dragging { opacity: 0.4; }
.tv-list.drag-over {
outline: 2px dashed var(--tv-primary);
outline-offset: -2px;
}
/* Indicador de onde a coluna arrastada vai cair (barra à esquerda) */
.tv-list.drop-before { box-shadow: inset 4px 0 0 var(--tv-primary); }
.tv-list-del:hover { background: rgba(239, 68, 68, 0.15); color: var(--tv-status-err); }
/* Header da coluna = alça pra arrastar/reordenar colunas */
.tv-list-header {
cursor: grab;
user-select: none;
}
.tv-list-header:active { cursor: grabbing; }
.tv-list-header .tv-list-del { cursor: pointer; }
/* Relatório de Histórico do Cliente (dossiê imprimível) */
.relatorio-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2000; overflow-y: auto; padding: 24px 16px 60px; }
.relatorio-toolbar { max-width: 820px; margin: 0 auto 12px; display: flex; gap: 8px; justify-content: flex-end; }
/* #243: a barra fica SEMPRE sobre o véu escuro (.relatorio-overlay = rgba(0,0,0,0.6)),
nos dois temas. O .btn-ghost padrão usa --text-dim, que no tema CLARO fica escuro e
some no véu. Aqui o Fechar ganha cor clara fixa (independente do tema), com contraste
nos dois modos. Sem pintar botão branco sólido (evita a colisão de tema que as babás
apontaram). Mesmo padrão da .utm-edit-barra .btn-ghost. */
.relatorio-toolbar .btn-ghost { color: #fff; border-color: rgba(255,255,255,0.5); }
.relatorio-toolbar .btn-ghost:hover { background: rgba(255,255,255,0.15); color: #fff; }
.relatorio-doc {
max-width: 820px; margin: 0 auto; background: #fff; color: #1a1a1a;
border-radius: 8px; padding: 40px 48px; font-family: Arial, Helvetica, sans-serif; line-height: 1.5;
}
.relatorio-doc h1 { font-size: 22px; margin: 0 0 4px; color: #111; }
.relatorio-doc h2 { font-size: 16px; margin: 24px 0 8px; border-bottom: 2px solid #FF6B00; padding-bottom: 4px; color: #111; }
.relatorio-doc h3 { font-size: 13px; margin: 12px 0 4px; color: #333; }
.rel-cliente { font-size: 16px; font-weight: 700; color: #FF6B00; margin-bottom: 8px; }
.rel-meta { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: #444; }
.rel-gerado { font-size: 11px; color: #999; margin-top: 6px; }
.rel-sec { margin-top: 10px; }
.rel-sec ul { margin: 4px 0; padding-left: 18px; }
.rel-sec li { font-size: 13px; margin-bottom: 3px; }
.rel-dim { color: #888; font-size: 12px; }
.rel-data { color: #888; font-size: 11px; }
.rel-vazio { font-size: 12px; color: #999; font-style: italic; }
/* Tabela "Resultados entregues" do dossiê (investimento + leads por mês) */
.rel-tabela { width: 100%; border-collapse: collapse; margin: 6px 0 4px; font-size: 13px; }
.rel-tabela th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; color: #666; border-bottom: 1px solid #ddd; padding: 4px 10px 4px 0; }
.rel-tabela td { padding: 5px 10px 5px 0; border-bottom: 1px solid #f0f0f0; color: #222; }
.rel-tabela td:first-letter { text-transform: uppercase; }
.rel-tabela tfoot td { border-bottom: none; border-top: 2px solid #FF6B00; font-weight: 700; color: #111; }
.rel-nota { font-size: 11px; color: #999; margin: 2px 0 0; }
.rel-rodape { margin-top: 32px; padding-top: 12px; border-top: 1px solid #eee; font-size: 10px; color: #aaa; text-align: center; }
@media print {
body * { visibility: hidden; }
.relatorio-overlay, .relatorio-overlay * { visibility: visible; }
.relatorio-overlay { position: absolute; inset: 0; background: #fff; padding: 0; overflow: visible; }
.relatorio-doc { box-shadow: none; border-radius: 0; max-width: none; padding: 0 8px; }
.no-print { display: none !important; }
}
/* Ficha do cliente: colunas A Fazer / Histórico (puxam do Tarefas) */
.hist-cliente { margin-top: 20px; }
.hist-cliente-titulo { font-size: 14px; font-weight: 700; color: var(--text); margin: 0 0 10px; }
.hist-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .hist-cols { grid-template-columns: 1fr; } }
.hist-col { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.hist-col-head { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: var(--text-dim); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.hist-count { background: var(--bg-elev); color: var(--text-dim); border-radius: 10px; padding: 1px 8px; font-size: 10px; }
.hist-vazio { color: var(--text-faint); font-size: 12px; font-style: italic; padding: 6px 0; }
.hc-card { background: var(--bg-elev); border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; }
.hc-card-titulo { font-size: 13px; color: var(--text); margin-bottom: 4px; }
.hc-card-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hc-lista { font-size: 10px; color: var(--text-dim); background: var(--bg-base); border-radius: 4px; padding: 2px 6px; }
.hc-data { font-size: 11px; color: var(--text-dim); }
.hc-data.ok { color: #10B981; }
.hc-data.atrasado { color: #EF4444; }
.hc-data.proximo { color: #F59E0B; }
.hc-membro { font-size: 9px; font-weight: 700; background: var(--bg-base); color: var(--text-dim); border-radius: 50%; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
/* Checklist agrupado + barra de progresso (estilo Trello) */
.tv-checklist-grupo { margin-bottom: 16px; }
.tv-checklist-grupo-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 4px; }
.tv-checklist-grupo-head strong { font-size: 13px; color: var(--tv-text); }
.tv-checklist-bar-wrap { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; }
.tv-checklist-bar { flex: 1; height: 8px; background: var(--tv-bg-elev); border-radius: 4px; overflow: hidden; }
.tv-checklist-bar-fill { height: 100%; background: var(--tv-status-ok); border-radius: 4px; transition: width 0.25s ease; }
.tv-checklist-pct { font-size: 11px; color: var(--tv-text-dim); min-width: 32px; }
.tv-checklist-frac { font-size: 11px; color: var(--tv-text-dim); min-width: 38px; text-align: right; }
/* Sino de notificações no header */
.sino-wrap { position: relative; display: inline-flex; align-items: center; margin-right: 6px; }
.sino-btn {
background: transparent;
border: none;
cursor: pointer;
font-size: 18px;
line-height: 1;
position: relative;
padding: 4px 6px;
}
.sino-badge {
position: absolute;
top: -3px;
right: -3px;
background: #EF4444;
color: var(--text);
font-size: 10px;
font-weight: 700;
min-width: 16px;
height: 16px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 4px;
box-sizing: border-box;
}
.sino-dropdown {
position: absolute;
top: 140%;
right: 0;
width: 320px;
max-height: 420px;
background: #fff;
border: 1px solid #e2e2e2;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
z-index: 1000;
display: flex;
flex-direction: column;
overflow: hidden;
}
.sino-header { padding: 10px 14px; font-weight: 700; font-size: 13px; border-bottom: 1px solid #eee; color: #1a1a1a; }
.sino-list { overflow-y: auto; }
.sino-item { padding: 10px 14px; border-bottom: 1px solid #f3f3f3; }
.sino-item:last-child { border-bottom: none; }
.sino-item p { margin: 0 0 2px; font-size: 13px; color: #222; line-height: 1.35; }
.sino-item small { color: #999; font-size: 11px; }
.sino-item.nao-lida { background: rgba(255, 107, 0, 0.08); }
.sino-vazio { padding: 18px; text-align: center; color: #999; font-size: 12px; font-style: italic; }
/* Linhas de log ("mexelância") no painel de atividade, mais discretas que comentário */
.tv-activity-log .tv-activity-text p { color: var(--tv-text-dim); font-size: 12px; }
.tv-activity-dot {
width: 26px;
flex-shrink: 0;
text-align: center;
color: var(--tv-primary);
font-size: 20px;
line-height: 1;
}
/* Seção "Repetir" do modal do card (Tarefas Recorrentes da Luiza) */
.tv-rec { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.tv-rec-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tv-rec-label {
min-width: 90px;
color: var(--tv-text-dim);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.tv-rec-select, .tv-rec-select-sm, .tv-rec-num {
background: var(--tv-bg-elev);
border: 1px solid var(--tv-border);
color: var(--tv-text);
padding: 7px 10px;
border-radius: 6px;
font-family: inherit;
font-size: 13px;
cursor: pointer;
}
.tv-rec-select { min-width: 220px; }
.tv-rec-select-sm { min-width: 110px; }
.tv-rec-num { width: 70px; text-align: center; cursor: text; }
.tv-rec-select:hover, .tv-rec-select-sm:hover, .tv-rec-num:hover { border-color: var(--tv-primary); }
.tv-rec-select:focus, .tv-rec-select-sm:focus, .tv-rec-num:focus { outline: none; border-color: var(--tv-primary); }
.tv-rec-select option, .tv-rec-select-sm option { background: var(--tv-bg-elev); color: var(--tv-text); }
.tv-rec-dias { display: flex; gap: 6px; }
.tv-rec-dia-btn {
width: 34px;
height: 34px;
border-radius: 50%;
border: 1px solid var(--tv-border);
background: var(--tv-bg-elev);
color: var(--tv-text-dim);
font-weight: 600;
font-size: 13px;
cursor: pointer;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tv-rec-dia-btn:hover { border-color: var(--tv-primary); color: var(--tv-text); }
.tv-rec-dia-btn.on {
background: var(--tv-primary);
border-color: var(--tv-primary);
color: var(--text);
}
.tv-rec-hint { color: var(--tv-text-faint); font-size: 12px; }
.tv-rec-info {
margin-top: 4px;
padding: 8px 10px;
background: rgba(255, 107, 0, 0.08);
border-left: 3px solid var(--tv-primary);
border-radius: 4px;
color: var(--tv-text-dim);
font-size: 12px;
line-height: 1.4;
}
/* A mesma seção Repetir dentro do modal da Caixa de Entrada (Super Tarefa). Lá não existe a
coluna de ícones do card do quadro, então o recuo de 40px sai, e o título passa a ter a
cara dos outros rótulos do formulário (cx-campo > label). */
.cx-form .tv-section { padding-left: 0; margin-bottom: 0; }
.cx-form .tv-section-title {
font-size: 12px;
font-weight: 700;
color: var(--tv-text-dim);
text-transform: uppercase;
letter-spacing: 0.4px;
margin: 0 0 6px;
justify-content: flex-start;
}
.cx-form .tv-rec { gap: 8px; padding: 0; }
.cx-form .tv-rec-select { min-width: 0; flex: 1; }
/* Aviso de prazo fora da regra ("repete toda terça", mas a primeira cai numa quinta). Herda o
corpo do tv-rec-info e troca a cor: os dois aparecem juntos, e o de alerta não pode ter a
mesma cara do que só explica como a repetição funciona. */
.cx-rep-aviso {
background: rgba(245, 158, 11, 0.10);
border-left-color: var(--tv-status-warn, #F59E0B);
}
/* Botão do aviso. Mora dentro dele, colado na frase que explica o problema. */
.cx-rep-ajustar {
display: block; margin-top: 8px;
background: none; border: 1px solid var(--tv-status-warn, #F59E0B);
color: var(--tv-status-warn, #F59E0B);
border-radius: 6px; padding: 5px 12px;
font-size: 12px; font-weight: 700; cursor: pointer;
}
.cx-rep-ajustar:hover { background: rgba(245, 158, 11, 0.16); }
/* ===== HOME — dashboard pessoal ===== */
.home-wrap { padding: 24px 28px; max-width: 1200px; margin: 0 auto; }
.home-head { margin-bottom: 20px; }
.home-title { font-size: 26px; font-weight: 800; margin: 0 0 4px; }
.home-sub { color: var(--tv-text-dim); font-size: 14px; margin: 0; }
.home-vazio {
padding: 32px; text-align: center; color: var(--tv-text-dim);
border: 1px dashed rgba(255,255,255,0.12); border-radius: 12px;
}
.home-grupos {
display: grid; gap: 18px;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
align-items: start;
}
.home-grupo {
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: 12px; padding: 12px;
}
.home-grupo-concluidas { grid-column: 1 / -1; margin-top: 6px; opacity: 0.85; }
.home-grupo-head {
display: flex; align-items: center; gap: 8px;
font-weight: 700; font-size: 14px; margin-bottom: 10px;
}
.home-grupo-emoji { font-size: 13px; }
.home-grupo-count {
margin-left: auto; background: rgba(255,255,255,0.08);
border-radius: 999px; padding: 1px 9px; font-size: 12px; font-weight: 600;
}
.home-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.home-card { cursor: pointer; }
.home-grupo-concluidas .home-cards {
display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.home-label-lista { font-size: 11px; color: var(--tv-text-dim); align-self: center; }
.home-label-interna { background: rgba(255,255,255,0.14) !important; color: #ddd; }
.home-grupo-head-toggle {
width: 100%; background: none; border: none; cursor: pointer;
color: inherit; font: inherit; text-align: left; padding: 0;
}
.home-grupo-head-toggle:hover { color: var(--tv-primary); }
.home-chevron { font-size: 11px; opacity: 0.7; margin-right: 2px; }
.home-grupo-concluidas { padding-bottom: 12px; }
/* quick-add: seletor de cliente em colunas que exigem cliente (Item 1) */
.tv-novo-card-cliente {
width: 100%; margin-top: 6px; padding: 6px 8px;
background: rgba(0,0,0,0.25); color: inherit;
border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; font-size: 13px;
}
/* Perfil em tela única (dados + senha juntos) */
.perfil-secao-titulo { font-weight: 700; font-size: 14px; margin: 4px 0 10px; }
.perfil-secao-divisor { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.08); }
/* Checklist: edição inline do texto do item */
.tv-check-edit {
flex: 1; min-width: 0; padding: 2px 6px; font: inherit;
background: rgba(0,0,0,0.25); color: inherit;
border: 1px solid rgba(255,255,255,0.25); border-radius: 4px;
}
.tv-check-item span { cursor: text; }
/* Tag de CLIENTE: metadado, não ação. Herdava a cor saturada por cliente (roxo/azul/
verde do corCliente inline), que fura o token e destoa do tema de 1 acento. Vira um
chip NEUTRO (deriva dos tokens globais, então segue dark/claro) — o nome do cliente
no texto já identifica. !important vence o style inline. */
.tv-label-cli {
background: var(--tv-bg-elev2) !important;
color: var(--tv-text-dim) !important;
border: 1px solid var(--tv-border);
}
/* ===== Início — dash do dia (5 colunas) ===== */
.hd-wrap{padding:24px 26px;color:var(--text)}
.hd-loading{color:var(--text-dim)}
.hd-head{margin-bottom:16px}
.hd-title{font-size:24px;font-weight:700;letter-spacing:-.3px;margin:0}
.hd-legend{display:flex;gap:14px;margin-top:10px;font-size:12px;color:var(--text-dim);align-items:center;flex-wrap:wrap}
.hd-legend span{display:inline-flex;align-items:center}
.hd-dot{display:inline-block;width:9px;height:9px;border-radius:999px;margin-right:5px}
.hd-dot.hd-r{background:#EF4444}.hd-dot.hd-a{background:#F59E0B}.hd-dot.hd-g{background:#10B981}.hd-dot.hd-b{background:#3B82F6}
/* grid hierárquico (masonry via JS em app.js): JS posiciona as colunas absolutas; aqui só relative + caixa */
.hd-board{position:relative}
.hd-col{box-sizing:border-box;background:var(--bg-surface);border:1px solid var(--border);border-radius:14px;padding:13px}
.hd-col-h{display:flex;align-items:center;gap:7px;font-weight:700;font-size:13.5px;letter-spacing:.3px;margin-bottom:13px;padding-bottom:10px;border-bottom:1px solid var(--border);color:var(--text)}
.hd-col-h .hd-n{margin-left:auto;background:var(--bg-elev);color:var(--text-dim);border-radius:999px;font-size:11px;font-weight:600;padding:1px 8px}
.hd-col-h .hd-prev{margin-left:auto;font-size:10px;color:var(--text-faint);font-weight:500;background:var(--bg-elev);border-radius:999px;padding:1px 8px}
.hd-card{position:relative;background:var(--bg-elev);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:9px;padding:9px 11px;margin-bottom:9px}
.hd-card.hd-r{border-left-color:#EF4444}.hd-card.hd-a{border-left-color:#F59E0B}.hd-card.hd-g{border-left-color:#10B981}.hd-card.hd-b{border-left-color:#3B82F6}
.hd-card-t{font-size:13px;line-height:1.35;color:var(--text);display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.hd-card-t.hd-exp{-webkit-line-clamp:unset;overflow:visible}
.hd-card-meta{display:flex;align-items:center;gap:7px;margin-top:7px;flex-wrap:wrap}
/* Carol 03/08 (#346): a data ainda passava batido num olhar rápido. A pílula ganhou corpo
(peso 700, preenchimento mais forte e moldura do próprio semáforo) em vez de ser texto
colorido solto. A COR de cada estado continua a mesma: quem mudou foi a presença. */
.hd-badge{font-size:11px;font-weight:700;padding:2px 9px;border-radius:999px;border:1px solid transparent}
.hd-badge.hd-r{background:rgba(239,68,68,.30);border-color:rgba(239,68,68,.55);color:#ffb0b0}.hd-badge.hd-a{background:rgba(245,158,11,.30);border-color:rgba(245,158,11,.6);color:#ffd489}.hd-badge.hd-g{background:rgba(16,185,129,.28);border-color:rgba(16,185,129,.55);color:#7fe9c6}.hd-badge.hd-b{background:rgba(59,130,246,.28);border-color:rgba(59,130,246,.55);color:#accbff}
/* #346 (Gedásio): os tons acima foram calibrados pro tema ESCURO; no claro a data/hora
amarela (📅 e 🕐 dos cards do Painel) praticamente sumia no fundo. Mesmos semáforos,
tons fechados que passam de 4,5:1 de contraste sobre o fundo claro dos badges. */
:root[data-theme="light"] .hd-badge.hd-r{background:rgba(239,68,68,.22);border-color:rgba(161,29,18,.45);color:#A11D12}
:root[data-theme="light"] .hd-badge.hd-a{background:rgba(245,158,11,.26);border-color:rgba(117,75,0,.45);color:#754B00}
:root[data-theme="light"] .hd-badge.hd-g{background:rgba(16,185,129,.22);border-color:rgba(4,89,63,.45);color:#04593F}
:root[data-theme="light"] .hd-badge.hd-b{background:rgba(59,130,246,.20);border-color:rgba(29,78,216,.45);color:#1D4ED8}
/* #345 (Gedásio): nome do cliente era cinza apagado sobre o cinza do card e sumia; agora é
um chip pra bater o olho e ver DE QUAL CLIENTE é a tarefa. Destaque só aqui, nada além (Carol).
Carol 03/08: a 1ª versão usava --bg-surface, que no tema escuro é MAIS ESCURO que o card
(#1D1D1D no #282828) — o chip afundava no fundo em vez de saltar. Agora é pilha sólida que
AVANÇA sobre o card nos dois temas (claro no escuro, escuro no claro), com token próprio pra
não ficar hex solto fora do tema (ressalva da Kim). */
:root{--hd-cli-bg:#5A5A5A;--hd-cli-fg:#FFFFFF}
:root[data-theme="light"]{--hd-cli-bg:#2B2D33;--hd-cli-fg:#FFFFFF}
.hd-cli{font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;line-height:1.4;color:var(--hd-cli-fg);background:var(--hd-cli-bg);border-radius:5px;padding:2px 7px;white-space:nowrap}
/* Linha do TOPO do card: tag (o QUE é) + cliente (de QUEM é), lado a lado. */
.hd-card-topo{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.hd-card-topo .hd-card-tag{margin-bottom:0}
.hd-vazio{color:var(--text-faint);font-size:12.5px;padding:10px 2px}
/* 📡 EQUIPE EM ALERTA (Painel ADM): moldura laranja-SKAG = área de gestão, distinta dos cards próprios */
.hd-col-equipe{border-color:var(--border);background:var(--bg-surface)}
.hd-col-equipe .hd-col-h{border-bottom-color:var(--border)}
.hd-col-equipe .hd-col-h .hd-n{background:var(--bg-elev);color:var(--text-dim)}
.hd-equipe-grupo{margin-bottom:4px}
.hd-equipe-sep{font-size:11px;font-weight:700;letter-spacing:.4px;color:var(--text-dim);text-transform:uppercase;margin:8px 0 8px;padding-top:8px;border-top:1px dashed var(--border)}
.hd-equipe-grupo:first-of-type .hd-equipe-sep{border-top:none;padding-top:0;margin-top:2px}
.hd-equipe-antigas{font-size:11px;color:var(--text-faint);padding:1px 2px 7px;font-style:italic}
.hd-equipe-busca{width:100%;box-sizing:border-box;background:var(--bg-base);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:7px 10px;font-size:12.5px;margin-bottom:9px;outline:none}
.hd-equipe-busca::placeholder{color:var(--text-faint)}
.hd-equipe-busca:focus{border-color:#E8611A}
/* na faixa, o ✕ (excluir) fica à esquerda do ✓ (feito) pra não colidirem */
.hd-col-equipe .hd-note-x{right:30px;font-size:13px}
/* empilha duas colunas no MESMO trilho do masonry (Kimberly em cima, Equipe embaixo) */
.hd-stack{display:flex;flex-direction:column;gap:14px}
/* rotina atrasada acumulada: clica e expande pra baixo listando os dias (Carol 25/06) */
.hd-atraso-toggle{margin-left:auto;font-size:10px;color:var(--text-faint);font-weight:600;white-space:nowrap}
.hd-atraso-dias{margin-top:8px;padding-top:7px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.hd-atraso-dia{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-dim)}
.hd-atraso-check{width:17px;height:17px;border:1.5px solid #EF4444;border-radius:999px;background:transparent;color:#EF4444;font-size:9px;line-height:1;cursor:pointer;flex-shrink:0;padding:0;display:flex;align-items:center;justify-content:center;transition:all .12s}
.hd-atraso-check:hover{background:#10B981;border-color:#10B981;color:#fff}
/* #383: bolinha de ETAPA (checklist no card do Painel) é neutra, não vermelha de atraso */
.hd-atraso-check.hd-etapa{border-color:var(--text-faint);color:var(--text-faint)}
.hd-atraso-check.hd-etapa.feita{background:#10B981;border-color:#10B981;color:#fff}
.hd-cal-wk,.hd-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center}
.hd-cal-wk span{font-size:10px;color:var(--text-faint);padding:3px 0}
.hd-cal-grid > div{font-size:11px;color:var(--text-dim);padding:6px 0;border-radius:6px;position:relative}
.hd-cal-day.today{background:#E8611A;color:#fff;font-weight:700}
.hd-cal-day.has::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:999px;background:#E8611A}
.hd-cal-day.today.has::after{background:#fff}
.hd-cal-leg{font-size:10.5px;color:var(--text-faint);margin-top:10px;text-align:center}
.hd-ag{display:flex;gap:9px;padding:8px 0;border-bottom:1px solid var(--border);text-decoration:none;cursor:pointer}
.hd-ag:last-child{border:none}
.hd-ag:hover .hd-ag-ev{color:#E8611A}
.hd-ag-hr{font-size:12px;font-weight:700;color:#E8611A;min-width:42px}
.hd-ag-ev{font-size:12.5px;color:var(--text)}.hd-ag-ev small{display:block;color:var(--text-faint);font-size:10.5px}
/* conectar / desconectar Google */
.hd-gconnect{display:inline-flex;align-items:center;gap:7px;background:#fff;color:#1a1a1a;text-decoration:none;font-size:12.5px;font-weight:600;border-radius:8px;padding:8px 12px;margin-top:2px}
.hd-gconnect:hover{background:#f0f0f0}
.hd-gicon{font-size:14px}
.hd-gdisc{display:block;margin-top:12px;background:none;border:none;color:var(--text-faint);font-size:10.5px;cursor:pointer;padding:0}
.hd-gdisc:hover{color:#ff9090}
.hd-note-box{background:var(--bg-elev);border:1px dashed var(--border);border-radius:9px;padding:10px;margin-bottom:12px}
.hd-note-ta{width:100%;background:transparent;border:none;color:var(--text);font:inherit;font-size:12.5px;resize:none;outline:none}
.hd-note-ta::placeholder{color:var(--text-faint)}
.hd-note-row{display:flex;align-items:center;gap:7px;margin-top:7px}
.hd-note-date{background:var(--bg-surface);border:1px solid var(--border);border-radius:6px;color:var(--text-dim);font-size:11px;padding:3px 8px;color-scheme:light dark}
.hd-note-save{margin-left:auto;background:#E8611A;color:#fff;border:none;border-radius:7px;font-size:11.5px;font-weight:600;padding:4px 12px;cursor:pointer}
.hd-note-sep{font-size:10.5px;color:var(--text-faint);margin:4px 0 8px;text-align:center}
.hd-note-x{position:absolute;top:6px;right:7px;background:transparent;border:none;color:var(--text-faint);font-size:11px;cursor:pointer;line-height:1}
.hd-note-x:hover{color:#ff9090}
/* botão concluir (✓) nos cards de tarefa/rotina */
.hd-done{position:absolute;top:6px;right:6px;width:18px;height:18px;border:1.5px solid var(--border);border-radius:999px;background:transparent;color:transparent;font-size:11px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s}
.hd-done:hover{border-color:#10B981;color:#10B981;background:rgba(16,185,129,.12)}
/* ROTINAS — checklist do dia */
.hd-rot-add{display:flex;gap:6px;margin-bottom:11px}
.hd-rot-input{flex:1;min-width:0;background:var(--bg-elev);border:1px solid var(--border);border-radius:7px;color:var(--text);font:inherit;font-size:12.5px;padding:6px 9px;outline:none}
.hd-rot-input::placeholder{color:var(--text-faint)}
.hd-rot-input:focus{border-color:#E8611A}
.hd-rot-addbtn{background:#E8611A;color:#fff;border:none;border-radius:7px;font-size:16px;font-weight:600;line-height:1;width:30px;cursor:pointer;flex:0 0 auto}
.hd-rot{display:flex;align-items:center;gap:9px;padding:7px 4px;border-bottom:1px solid var(--border)}
.hd-rot:last-child{border-bottom:none}
.hd-rot-chk{flex:0 0 auto;width:19px;height:19px;border:2px solid var(--border);border-radius:6px;background:transparent;color:transparent;font-size:12px;font-weight:800;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s}
.hd-rot-chk:hover{border-color:#10B981}
.hd-rot.done .hd-rot-chk{background:#10B981;border-color:#10B981;color:#fff}
.hd-rot-txt{flex:1;min-width:0;font-size:12.5px;line-height:1.35;color:var(--text);cursor:pointer}
.hd-rot.done .hd-rot-txt{text-decoration:line-through;color:var(--text-faint)}
.hd-rot-x{flex:0 0 auto;background:transparent;border:none;color:var(--text-faint);font-size:11px;cursor:pointer;line-height:1}
.hd-rot:hover .hd-rot-x{color:var(--text-faint)}
.hd-rot-x:hover{color:#ff9090 !important}
/* nº de colunas é decidido pelo JS (masonry): tela cheia 5, meia tela 3, estreito 2, celular 1 */
/* filtro do Início */
.hd-head-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hd-filtro-btn{background:var(--bg-elev);border:1px solid var(--border);color:var(--text-dim);border-radius:9px;font-size:12.5px;font-weight:600;padding:7px 14px;cursor:pointer}
.hd-filtro-btn:hover{color:var(--text)}
.hd-filtro-btn.on{background:#E8611A;color:#fff;border-color:#E8611A}
.hd-filtro-bar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;background:var(--bg-surface);border:1px solid var(--border);border-radius:10px}
.hd-filtro-lbl{font-size:11px;color:var(--text-faint);font-weight:600}
/* Barra de tags da AGENDA DO DIA (Rotinas/Tarefas/SOS) — Carol 20/06 */
.hd-agenda-tags{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
/* Data + dia da semana ao lado do título "Agenda do Dia" (navegação) */
/* #346 (Gedásio, obs. Carol): a data ao lado de "Agenda do Dia" ganha destaque de borda
laranja com baixa opacidade (só moldura, não vira alerta) e texto na cor firme do tema. */
.hd-agenda-data{font-size:11px;color:var(--text);font-weight:700;background:var(--bg-elev);border:1px solid rgba(232,97,26,.45);border-radius:6px;padding:1px 8px;margin-left:6px}
/* Tag no TOPO de cada card da Agenda (tipo do item) */
.hd-card-tag{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;padding:2px 7px;border-radius:5px;margin-bottom:6px;line-height:1.4}
.hd-tag-tar{background:#1e3a5f;color:#8fc0ff}
.hd-tag-rot{background:#3a2f5f;color:#c8b3ff}
.hd-tag-sos{background:#5f1e1e;color:#ffa0a0}
.hd-tag-mis{background:#4a2f14;color:#ffb877}
/* Super Tarefa (card com etapas/checklist). Nasceu roxa em #383 e ficou IGUAL à rotina, que
também é roxa: no Painel as duas tags eram indistinguíveis (Carol, 06/08). Passa a ser ROSA,
que é a única família livre nesta paleta. As outras todas já têm dono e trocar por elas
criaria um engano pior do que o atual: vermelho é o SOS, laranja é a missão, azul é a tarefa
comum, roxo é a rotina, e verde é #10B981, o --status-resolvido, ou seja, uma super tarefa
verde pareceria concluída. */
.hd-tag-sup{background:#5A1E45;color:#FFA6D6}
/* Ressalva da Kim (31/07): os 4 fundos acima são cores do tema ESCURO e ficavam valendo
também no claro, onde caixa quase preta com texto pastel destoa do resto da tela. Mesmas
4 famílias, versão clara: fundo lavado e texto fechado. */
:root[data-theme="light"] .hd-tag-tar{background:#DCE9FF;color:#1D4ED8}
:root[data-theme="light"] .hd-tag-rot{background:#E8E0FF;color:#5B21B6}
:root[data-theme="light"] .hd-tag-sos{background:#FFE0DE;color:#A11D12}
:root[data-theme="light"] .hd-tag-mis{background:#FFE8D2;color:#8A4B00}
:root[data-theme="light"] .hd-tag-sup{background:#FFE0F2;color:#9D174D}
/* Card concluído na Agenda: risca e MANTÉM (não some) — Carol 20/06 */
.hd-card.hd-feito{opacity:.5}
.hd-card.hd-feito .hd-card-t{text-decoration:line-through;color:#9a9a9a}
.hd-card.hd-feito .hd-done{background:#10B981;border-color:#10B981;color:#fff}
/* #3 Carol 23/06: aviso transitório (ex: edição enviada pra aprovação). */
.hd-flash{background:#1f2d22;border:1px solid #2f6b46;color:#9fe7bd;border-radius:9px;padding:10px 13px;margin-bottom:12px;font-size:13px;cursor:pointer}
/* Carol 23/06: badge com o % do zoom (página ou lista da Ads). */
.foxx-zoom-badge{position:fixed;top:62px;left:50%;transform:translateX(-50%);background:rgba(15,15,15,.92);color:#FFFFFF;border:1px solid #3a3a3a;border-radius:999px;padding:6px 16px;font-size:14px;font-weight:700;letter-spacing:.3px;z-index:99999;opacity:0;transition:opacity .18s;pointer-events:none;box-shadow:0 4px 16px rgba(0,0,0,.4)}
.foxx-zoom-badge.on{opacity:1}
/* #4 Carol 23/06: rotina de Nova Campanha vencida pisca vermelho latente pra incomodar. */
.hd-card.hd-piscar{animation:hd-piscar-pulse 1.05s ease-in-out infinite;border-color:#EF4444;border-left-color:#EF4444}
@keyframes hd-piscar-pulse{0%,100%{background:var(--bg-elev);box-shadow:none}50%{background:#3a1414;box-shadow:0 0 0 2px rgba(239,68,68,.55)}}
@media (prefers-reduced-motion:reduce){.hd-card.hd-piscar{animation:none;background:#3a1414;box-shadow:0 0 0 2px rgba(239,68,68,.55)}}
.hd-chip{background:var(--bg-elev);border:1px solid var(--border);color:var(--text-dim);border-radius:999px;font-size:11.5px;padding:3px 11px;cursor:pointer}
.hd-chip:hover{color:var(--text)}
.hd-chip.on{background:#E8611A;color:#fff;border-color:#E8611A}
.hd-chip-clear{color:#ff9090;border-color:#3a2222}
.hd-chip-clear:hover{background:rgba(239,68,68,.15)}
/* estado "sem prazo" (Vértice / anotação sem deadline) — neutro */
.hd-card.hd-sp{border-left-color:#5a5a5a}
.hd-badge.hd-sp{background:rgba(160,160,160,.26);border-color:rgba(160,160,160,.5);color:#d4d4d4}
:root[data-theme="light"] .hd-badge.hd-sp{background:rgba(120,120,120,.20);border-color:rgba(79,79,79,.45);color:#4F4F4F} /* #346: legível no claro */
.hd-dot.hd-sp{background:#5a5a5a}
/* === Aba Ads: lista combinada (tabela unica Google+Meta) ====================
Cabecalho (2 linhas) grudado no topo da area de rolagem propria da tabela,
pra nao colidir com a navbar ao rolar a pagina. */
.ads-combinada-scroll { border: 1px solid var(--border, var(--navy-line)); }
.ads-lista-combinada thead th {
position: sticky;
background: var(--navy-bg);
z-index: 6;
}
.ads-lista-combinada thead tr:first-child th { top: 0; }
.ads-lista-combinada thead tr:nth-child(2) th { top: 34px; }
/* Tom por segmento nos DADOS: Meta azul quase imperceptível, Google amarelo alaranjado. */
.ads-lista-combinada tbody td.col-meta { background: rgba(59,130,246,0.07); }
.ads-lista-combinada tbody td.col-google { background: rgba(245,158,11,0.10); }
/* Zoom estilo Excel na lista consolidada (feedback Carol 04/07): a tabela NÃO estica
pra 100% (isso criava vãos enormes entre as colunas); ela tem a largura do CONTEÚDO,
com colunas justas encostadas à esquerda. O controle de zoom (propriedade CSS `zoom`
no elemento) comprime TUDO junto (colunas + texto + padding), então diminuir espreme
tudo pra esquerda e abre espaço à direita pros dados novos. Overflow rola na horizontal. */
.ads-lista-tabela.ads-lista-combinada { width: max-content; min-width: 0; }
/* Lista consolidada do Ads = tabela rica por plataforma (Gedásio, sem toggle). No 'Todos'
as duas empilham com um cabeçalho de seção marcando a divisão. */
.ads-secao-plataforma { font-size: 15px; font-weight: 800; letter-spacing: .3px; padding: 10px 4px 8px; border-bottom: 2px solid; }
.ads-secao-meta { color: #a78bfa; border-color: rgba(124,58,237,.55); }
.ads-secao-google { color: #60a5fa; border-color: rgba(37,99,235,.55); margin-top: 24px; }
/* Selo de plataforma dentro do nome do cliente, na lista única do Ads. */
.ads-plat-tag { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; padding: 1px 5px; border-radius: 5px; margin-right: 5px; vertical-align: middle; }
.ads-plat-meta { color: #a78bfa; background: rgba(124,58,237,.18); }
.ads-plat-google { color: #60a5fa; background: rgba(37,99,235,.18); }
.ads-lista-combinada tbody td,
.ads-lista-combinada thead th { white-space: nowrap; }
/* ============================================================
Toggle de tema (claro/escuro) — botão no header
============================================================ */
.theme-toggle {
background: transparent; border: 1px solid var(--border); color: var(--text-dim);
border-radius: 8px; width: 34px; height: 34px; cursor: pointer; font-size: 15px;
display: inline-flex; align-items: center; justify-content: center;
transition: background .15s, color .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--text); background: var(--bg-elev); border-color: var(--text-faint); }
/* ============================================================
Aba Ads — busca destaca a linha inteira do cliente
A lista já é filtrada pela busca no AdsView, então quando a busca
está ativa toda linha visível é um match. As células (inclusive as
colunas congeladas/sticky e as de risco) usam var(--navy-bg)/(--navy-risk),
então sobrescrever essas variáveis na linha tinge a linha INTEIRA de uma vez
(mais robusto que !important, que perdia pras regras sticky mais específicas).
============================================================ */
.ads-busca-ativa .ads-lista-mes-tabela tbody tr {
--navy-bg: var(--busca-hl);
--navy-risk: var(--busca-hl);
}
.ads-busca-ativa .ads-lista-mes-tabela tbody tr:hover {
--navy-bg: var(--busca-hl-hover);
--navy-risk: var(--busca-hl-hover);
}
/* ============================================================
Aba Ads — botão de filtro "Só SOS"
============================================================ */
.ads-sos-toggle {
background: transparent; border: 1px solid var(--border); color: var(--text-dim);
border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 13px; font-weight: 600;
white-space: nowrap; transition: background .15s, color .15s, border-color .15s;
}
.ads-sos-toggle:hover { border-color: var(--status-skag); color: var(--text); }
.ads-sos-toggle.active {
background: rgba(239, 68, 68, 0.15); border-color: var(--status-skag); color: var(--status-skag);
}
/* ============================================================
Navegação responsiva — hambúrguer no mobile/tablet (<=1024px)
Desktop segue igual (nav horizontal). O .header é sticky, então
serve de âncora pro dropdown absoluto.
============================================================ */
.header-hamburger {
display: none;
background: transparent; border: 1px solid var(--border); color: var(--text);
width: 40px; height: 38px; border-radius: 8px; cursor: pointer;
font-size: 20px; line-height: 1; align-items: center; justify-content: center;
transition: background .15s, border-color .15s;
}
.header-hamburger:hover { background: var(--bg-elev); border-color: var(--text-faint); }
@media (max-width: 768px) {
.header-hamburger { display: inline-flex; }
.header-left { gap: 12px; }
.header-nav {
display: none;
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; gap: 2px;
background: var(--bg-pop);
border-bottom: 1px solid var(--border);
padding: 8px; z-index: 40;
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.28);
}
.header-nav.header-nav-aberta { display: flex; }
.header-nav a, .header-nav button {
width: 100%; padding: 12px 16px; font-size: 15px; border-radius: 8px;
}
}
/* ============================================================
Polimento mobile do Painel (celular ≤768px)
============================================================ */
/* 1) Saudação do header não quebra; "Olá," some no celular */
.header-user-btn { white-space: nowrap; }
@media (max-width: 768px) { .hu-saud { display: none; } }
/* 2) Card do Skaguinho: flutua no topo-direito no desktop; no celular
entra no fluxo normal (abaixo da saudação) pra não sobrepor o título. */
.hd-skag-float { position: absolute; top: -34px; right: 0; z-index: 5; }
@media (max-width: 768px) {
.hd-skag-float { position: static; margin: 8px 0 4px; }
}
/* ============================================================
Mobile (≤768px): header global + Tarefas (toolbar e kanban)
============================================================ */
@media (max-width: 768px) {
/* Header: o cluster de ações (tema/Melhorias/sino/nome/Sair) quebra linha
no celular em vez de cortar o "Sair" na borda. Vale pra todas as páginas. */
.header-user { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
/* Tarefas — toolbar: a busca ocupa a linha inteira e "Meus/Filtrar" descem
pra próxima, em vez do "Filtrar" ser cortado. */
.tv-toolbar { flex-wrap: wrap; }
.tv-search { flex: 1 1 100%; min-width: 0; }
/* Tarefas — board kanban: swipe encaixa coluna por coluna (scroll-snap). */
.tv-board { scroll-snap-type: x mandatory; }
.tv-list { scroll-snap-align: start; }
}
/* Retângulo de progressão das Missões, colado à esquerda do card do Skaguinho (Carol 06/07). */
.hd-missoes-float {
position: absolute; top: -34px; right: 372px; width: 360px; z-index: 5;
background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px;
}
@media (max-width: 768px) {
.hd-missoes-float { position: static; width: auto; right: auto; margin: 8px 0; }
}
/* Selo do salvamento automático do cadastro (card 20) */
.page-header-acoes { display: flex; align-items: center; gap: 10px; }
.autosave-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid #2A2A3E; color: #A0A0A0; }
.autosave-chip.autosave-salvo { color: #10B981; border-color: rgba(16, 185, 129, 0.4); }
.autosave-chip.autosave-salvando, .autosave-chip.autosave-pendente { color: #F59E0B; border-color: rgba(245, 158, 11, 0.4); }
.autosave-chip.autosave-erro { color: #EF4444; border-color: rgba(239, 68, 68, 0.4); }
/* Barra de progresso das análises (card 26), com Skaguinho impaciente */
.analise-prog { margin: 10px 0 16px; }
.analise-prog-texto { font-size: 13px; color: #A0A0A0; margin-bottom: 8px; }
.analise-prog-texto strong { color: #E8611A; }
.analise-prog-atual { font-size: 12px; opacity: 0.85; }
.analise-prog-trilha {
position: relative; height: 14px; border-radius: 7px;
background: rgba(255, 255, 255, 0.08); border: 1px solid #2A2A3E;
}
.analise-prog-fill {
height: 100%; border-radius: 7px;
background: linear-gradient(90deg, #E8611A, #FF8A3D);
transition: width 0.6s ease;
}
.analise-prog-skag {
position: absolute; bottom: 11px; width: 36px;
image-rendering: pixelated; transition: left 0.6s ease;
}
/* Filtros de visualização da planilha do mês (card 177) */
.ads-mes-filtros {
display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
margin: 6px 0 8px; font-size: 12px; color: #A0A0A0;
}
.ads-mes-filtros-rotulo { font-weight: 600; color: #A0A0A0; }
.ads-mes-filtros-grupo {
display: inline-flex; border: 1px solid #2A2A3E; border-radius: 8px; overflow: hidden;
}
.ads-mes-filtros-grupo button {
background: none; border: none; padding: 4px 10px; cursor: pointer;
font-size: 12px; color: #A0A0A0; font-family: inherit;
}
.ads-mes-filtros-grupo button.ativo { background: #E8611A; color: #fff; font-weight: 600; }
.ads-mes-filtros-check { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.ads-mes-filtros-check input { accent-color: #E8611A; }
.ads-mes-filtros-sep { width: 1px; height: 16px; background: #2A2A3E; }
/* ============================================================
Coluna do dia de HOJE na planilha do mês (card 184, D-0)
Destaque suave: separa o parcial de hoje dos dias já fechados.
============================================================ */
.ads-lista-mes-tabela th.ads-dia-hoje { color: var(--skag-orange, #E8611A); }
.ads-lista-mes-tabela td.ads-dia-hoje { background: rgba(232, 97, 26, 0.07); }
/* ============================================================
Sinalizador de falta de gasto (card 442)
Dia fechado com gasto R$ 0 ganha a célula vermelha, nos dois
temas (vermelho é cor de alerta, isenta da regra de 1 accent).
Vem DEPOIS do .ads-dia-hoje de propósito: se um dia fechado
coincidir com destaque, o alerta vence.
============================================================ */
.ads-lista-mes-tabela td.ads-gasto-zero {
background: #C62828;
color: #fff;
font-weight: 700;
}
/* ============================================================
Legenda do semáforo de cliente (card 198)
============================================================ */
.ads-semaforo-legenda {
display: inline-flex; align-items: center; gap: 12px; margin-left: 12px;
white-space: nowrap; cursor: help; vertical-align: middle;
}
.ads-semaforo-legenda-item { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.ads-semaforo-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
@media (max-width: 900px) { .ads-semaforo-legenda { display: none; } }
/* ============================================================
Caixa de Entrada (protótipo #314) — popup da aba Tarefas
============================================================ */
.cx-modal { max-width: 640px; width: min(640px, 94vw); }
/* #459: card da Caixa em leitura ganha a coluna de conversa à direita, igual aos outros
modais de card. Só no modo de leitura; no modo de edição o formulário volta a ocupar tudo. */
.cx-modal-conversa { max-width: 1040px; width: min(1040px, 96vw); }
.cx-body-conversa {
display: grid;
grid-template-columns: 1fr 360px;
gap: 0;
padding: 0;
align-items: start;
}
.cx-body-conversa > .cx-form { padding: 14px 16px 18px; min-width: 0; }
.cx-body-conversa > .tv-activity-panel {
border-left: 1px solid var(--tv-border);
align-self: stretch;
max-height: none;
}
@media (max-width: 880px) {
.cx-body-conversa { grid-template-columns: 1fr; }
.cx-body-conversa > .tv-activity-panel { border-left: none; border-top: 1px solid var(--tv-border); }
}
.cx-head-esq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.cx-voltar {
background: var(--tv-bg-elev2); border: 1px solid var(--tv-border);
color: var(--tv-text); border-radius: 6px; padding: 4px 10px; font-size: 13px; cursor: pointer;
}
.cx-voltar:hover { border-color: var(--skag-orange); color: var(--skag-orange); }
.cx-body { padding: 14px 16px 18px; }
.cx-intro { color: var(--tv-text-dim); font-size: 13px; line-height: 1.45; }
.cx-home { display: flex; flex-direction: column; gap: 10px; }
.cx-big-btn {
display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
background: var(--tv-bg-elev2); border: 1px solid var(--tv-border); border-radius: 10px;
padding: 14px 16px; cursor: pointer; color: var(--tv-text);
}
.cx-big-btn:hover { border-color: var(--skag-orange); }
.cx-big-ic { font-size: 26px; }
.cx-big-txt { display: flex; flex-direction: column; gap: 2px; }
.cx-big-txt b { font-size: 15px; }
.cx-big-txt small { color: var(--tv-text-dim); font-size: 12px; }
.cx-placeholder { text-align: center; padding: 26px 12px; }
.cx-placeholder-ic { font-size: 40px; margin-bottom: 8px; }
.cx-lista-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cx-item { align-items: center; }
.cx-membros { display: inline-flex; gap: 4px; margin-top: 4px; }
.cx-status-pill { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 10px; white-space: nowrap; }
.cx-form { display: flex; flex-direction: column; gap: 12px; }
.cx-campo { display: flex; flex-direction: column; gap: 5px; }
.cx-campo > label { font-size: 12px; font-weight: 700; color: var(--tv-text-dim); text-transform: uppercase; letter-spacing: 0.4px; }
.cx-campo input[type="text"], .cx-campo input[type="datetime-local"], .cx-campo select, .cx-campo textarea {
background: var(--tv-bg-elev2); border: 1px solid var(--tv-border); border-radius: 7px;
color: var(--tv-text); padding: 8px 10px; font-size: 14px; font-family: inherit;
}
.cx-campo textarea { resize: vertical; }
.cx-criador { font-size: 13px; color: var(--tv-text-dim); margin-bottom: 2px; }
.cx-criador b { color: var(--tv-text); }
.cx-marcados { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-marcado-opt {
display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer;
background: var(--tv-bg-elev2); border: 1px solid var(--tv-border); border-radius: 16px; padding: 4px 10px 4px 6px;
}
.cx-marcado-opt input { display: none; }
.cx-marcado-opt.ativo { border-color: var(--skag-orange); box-shadow: 0 0 0 1px var(--skag-orange) inset; }
.cx-dica { color: var(--tv-text-faint, var(--tv-text-dim)); font-size: 12px; }
.cx-status-row { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-status-btn { background: var(--tv-bg-elev2); border: 1px solid var(--tv-border); color: var(--tv-text-dim); cursor: pointer; }
.cx-erro { color: var(--tv-status-err, #EF4444); font-size: 13px; }
.cx-form-acoes { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
/* ===== Aba Criativos da Caixa (#315) ===== */
.cx-rota-chip { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--tv-text-dim); background: var(--tv-bg-elev1, var(--tv-bg-elev2)); border: 1px solid var(--tv-border); border-radius: 12px; padding: 3px 9px; white-space: nowrap; }
.cx-rota-aviso { font-size: 12px; color: var(--tv-text-dim); background: var(--tv-bg-elev2); border: 1px dashed var(--tv-border); border-radius: 8px; padding: 8px 10px; }
.cx-rota-aviso b { color: var(--skag-orange); }
/* Faixa do rascunho recuperado (Carol 13/08). */
.cx-rascunho-aviso {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
font-size: 12px; color: var(--tv-text-dim);
background: var(--busca-hl); border: 1px solid var(--skag-orange); border-radius: 8px;
padding: 8px 10px;
}
.cx-rascunho-aviso button {
background: none; border: 1px solid var(--tv-border); color: var(--tv-text-dim);
border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer;
font-family: inherit; white-space: nowrap;
}
.cx-rascunho-aviso button:hover { border-color: var(--skag-orange); color: var(--skag-orange); }
.cx-req { color: var(--tv-status-err, #EF4444); }
.cx-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cx-seg-btn, .cx-prop-btn, .cx-chip {
background: var(--tv-bg-elev2); border: 1px solid var(--tv-border); border-radius: 8px;
color: var(--tv-text-dim); padding: 7px 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit;
}
.cx-seg-btn:hover, .cx-prop-btn:hover, .cx-chip:hover { border-color: var(--skag-orange); }
.cx-seg-btn.on, .cx-prop-btn.on, .cx-chip.on {
border-color: var(--skag-orange); color: var(--tv-text);
box-shadow: 0 0 0 1px var(--skag-orange) inset;
background: color-mix(in srgb, var(--skag-orange) 12%, transparent);
}
.cx-prop { display: inline-flex; gap: 6px; }
.cx-prop-btn { min-width: 54px; text-align: center; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Instruções: campo grande e destacado, é onde a pessoa realmente escreve */
.cx-campo-destaque { background: color-mix(in srgb, var(--skag-orange) 7%, transparent); border: 1px solid color-mix(in srgb, var(--skag-orange) 35%, var(--tv-border)); border-radius: 10px; padding: 10px 12px; }
.cx-campo-destaque > label { color: var(--skag-orange); }
.cx-instr { min-height: 96px; }
.cx-campo textarea { resize: vertical; min-height: 44px; }
/* Quantidade: botões rápidos + digitar o número */
.cx-qtd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Campo de número: precisa gritar "eu sou editável" (senão parece mais um botão) */
.cx-num { width: 74px; background: var(--tv-bg); border: 1.5px solid var(--skag-orange); border-radius: 8px; color: var(--tv-text); padding: 7px 10px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: text; box-shadow: inset 0 1px 3px rgba(0,0,0,.28); text-align: left; }
.cx-num:focus { outline: none; box-shadow: inset 0 1px 3px rgba(0,0,0,.28), 0 0 0 2px color-mix(in srgb, var(--skag-orange) 45%, transparent); }
/* setinhas de +/- sempre visíveis (não só no hover) */
.cx-num::-webkit-inner-spin-button, .cx-num::-webkit-outer-spin-button { opacity: 1; height: 26px; }
.cx-num-wrap { display: inline-flex; align-items: center; gap: 6px; }
.cx-num-hint { font-size: 11px; color: var(--tv-text-dim); }
.cx-copy-campos { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
/* Referências: fotos (miniaturas) + links, cada um com maisinho */
.cx-dropzone-wrap { position: relative; }
.cx-dropzone-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cx-dropzone { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 14px; border: 1.5px dashed var(--tv-border); border-radius: 10px; background: var(--tv-bg-elev2); color: var(--tv-text-dim); font-size: 13px; cursor: pointer; text-align: center; user-select: none; }
.cx-dropzone:hover { border-color: var(--skag-orange); color: var(--tv-text); }
.cx-dropzone.drag { border-color: var(--skag-orange); background: color-mix(in srgb, var(--skag-orange) 14%, transparent); color: var(--tv-text); }
.cx-dropzone-ic { font-size: 22px; }
.cx-dropzone b { color: var(--skag-orange); }
.cx-ref-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cx-ref-foto { position: relative; width: 64px; height: 64px; border-radius: 8px; overflow: hidden; border: 1px solid var(--tv-border); }
.cx-ref-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cx-ref-x { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; cursor: pointer; line-height: 1; }
.cx-ref-add { position: relative; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 8px; border: 1px dashed var(--tv-border); color: var(--tv-text-dim); font-size: 15px; font-weight: 700; cursor: pointer; background: var(--tv-bg-elev2); }
.cx-ref-add:hover { border-color: var(--skag-orange); color: var(--skag-orange); }
.cx-ref-add.drag { border-color: var(--skag-orange); background: color-mix(in srgb, var(--skag-orange) 14%, transparent); color: var(--tv-text); }
.cx-ref-add-input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cx-refs { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cx-file { border: 1px dashed var(--tv-border); border-radius: 8px; padding: 16px; text-align: center; color: var(--tv-text-dim); font-size: 13px; background: var(--tv-bg-elev2); }
.cx-resumo { text-align: center; padding: 18px 12px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.cx-resumo-ic { width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, #10B981 18%, transparent); color: #10B981; font-size: 24px; display: flex; align-items: center; justify-content: center; }
/* ===== Sub-tarefas (multi-tarefas) da Caixa ===== */
.cx-subs { display: flex; flex-direction: column; gap: 6px; }
.cx-sub-row { display: flex; align-items: center; gap: 8px; }
.cx-sub-row input { flex: 1; background: var(--tv-bg-elev2); border: 1px solid var(--tv-border); border-radius: 7px; color: var(--tv-text); padding: 7px 10px; font-size: 14px; font-family: inherit; }
.cx-sub-bullet { color: var(--tv-text-dim); font-size: 14px; }
.cx-sub-x { background: none; border: none; color: var(--tv-text-dim); cursor: pointer; font-size: 12px; padding: 4px; border-radius: 5px; }
.cx-sub-x:hover { color: var(--tv-status-err, #EF4444); background: var(--tv-bg-elev2); }
.cx-sub-add { align-self: flex-start; background: none; border: 1px dashed var(--tv-border); color: var(--tv-text-dim); border-radius: 7px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: inherit; }
.cx-sub-add:hover { border-color: var(--skag-orange); color: var(--skag-orange); }
.cx-sub-count { font-size: 11px; font-weight: 700; color: var(--tv-text-dim); background: var(--tv-bg-elev2); border-radius: 10px; padding: 1px 8px; margin-left: 6px; }
.cx-sub-prog { height: 6px; border-radius: 4px; background: var(--tv-bg-elev2); overflow: hidden; margin-bottom: 4px; }
.cx-sub-prog-fill { height: 100%; background: #10B981; transition: width .2s ease; }
.cx-sub-item { display: flex; align-items: center; gap: 9px; padding: 5px 0; }
.cx-sub-check { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--tv-border); background: var(--tv-bg-elev2); color: #10B981; font-size: 13px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cx-sub-item.feito .cx-sub-check { border-color: #10B981; background: color-mix(in srgb, #10B981 18%, transparent); }
.cx-sub-txt { flex: 1; font-size: 14px; color: var(--tv-text); }
.cx-sub-item.feito .cx-sub-txt { text-decoration: line-through; color: var(--tv-text-dim); }
.cx-sub-novo { display: flex; gap: 6px; margin-top: 6px; }
.cx-sub-novo input { flex: 1; background: var(--tv-bg-elev2); border: 1px solid var(--tv-border); border-radius: 7px; color: var(--tv-text); padding: 7px 10px; font-size: 14px; font-family: inherit; }
/* #310: nome humano do item mexido, na coluna Onde do Log de Atividade */
.logs-label { font-size: 12px; color: var(--text, #ddd); font-style: italic; margin: 1px 0; }
/* #309: caixa de exportação do log */
.logs-export {
border: 1px solid var(--skag-orange); border-radius: 10px; padding: 12px 14px;
margin: 10px 0 14px; display: flex; flex-direction: column; gap: 8px;
background: var(--surface, rgba(255,255,255,0.03));
}
.logs-export-titulo { font-weight: 700; font-size: 14px; }
.logs-export-linha { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.logs-export-users { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.logs-export-user { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }
.logs-export-dica { font-size: 12px; color: var(--text-dim); }
/* #290: dropdown de micro-tarefas no card fechado + gerador por cliente no popup */
.tv-micro-toggle {
background: none; border: none; cursor: pointer; padding: 0; font: inherit;
color: inherit; display: inline-flex; align-items: center; gap: 3px;
}
.tv-micro-toggle:hover, .tv-micro-toggle.aberto { color: var(--skag-orange); }
.tv-card-microlist {
margin-top: 8px; border-top: 1px solid var(--tv-border); padding-top: 8px;
display: flex; flex-direction: column; gap: 5px; cursor: default;
}
.tv-card-microitem { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.tv-micro-check {
width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--tv-border);
background: transparent; color: transparent; font-size: 11px; line-height: 1;
cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
}
.tv-micro-check:hover { border-color: var(--skag-orange); color: var(--tv-text-dim); }
.tv-micro-check.feito { background: #10B981; border-color: #10B981; color: #fff; }
.tv-micro-texto.riscado { text-decoration: line-through; opacity: 0.55; }
.tv-micro-clientes { margin-top: 8px; border: 1px solid var(--tv-border); border-radius: 8px; padding: 10px; }
.tv-micro-clientes-head { font-size: 12px; color: var(--tv-text-dim); margin-bottom: 8px; }
.tv-micro-clientes-lista { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
/* ============================================================
Swipe Files (card #322) — biblioteca de anúncios validados
Tudo em token de tema (fonte única): funciona no escuro e no claro.
============================================================ */
.sw-wrap { padding: 4px 0 40px; }
/* Selo de Beta: a aba está em teste, quem abre precisa saber sem tropeçar nisso. */
.nav-beta { font-size: 11px; font-weight: 600; opacity: .7; }
.sw-beta { font-size: 14px; font-weight: 600; color: var(--text-dim); vertical-align: middle; }
.sw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sw-sub { color: var(--text-dim); font-size: var(--fs-corpo); max-width: 900px; margin: 4px 0 0; }
.sw-cmd { display: block; background: var(--bg-base); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin: 8px 0; font-family: monospace; font-size: 13px; color: var(--text); overflow-x: auto; white-space: nowrap; user-select: all; }
.sw-coletor-nota { color: var(--text-dim); font-size: 13px; }
.sw-coletor-aviso { color: var(--skag-orange); font-size: 13px; font-weight: 600; }
.sw-coleta-status { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 8px 0 0; background: var(--bg-surface); }
.sw-coleta-linha { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.sw-coleta-badge { font-size: 13px; font-weight: 600; }
.sw-coleta-badge.rodando { color: var(--skag-orange); }
.sw-coleta-badge.ok { color: #10B981; }
.sw-coleta-badge.erro { color: #EF4444; }
.sw-coleta-progresso { margin: 2px 0 8px; font-size: var(--fs-corpo); color: var(--text); }
/* O log cru fica atrás de um "ver detalhes": tela de usuário não é terminal. */
.sw-coleta-detalhes { margin: 4px 0 0; }
.sw-coleta-detalhes > summary { cursor: pointer; color: var(--text-dim); font-size: 12px; list-style: none; }
.sw-coleta-detalhes > summary::-webkit-details-marker { display: none; }
.sw-coleta-detalhes > summary::before { content: '▸ '; }
.sw-coleta-detalhes[open] > summary::before { content: '▾ '; }
.sw-coleta-detalhes > summary:hover { color: var(--text); }
.sw-coleta-log { max-height: 220px; overflow: auto; margin: 0; padding: 8px 10px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px; font-family: monospace; font-size: 12px; line-height: 1.5; color: var(--text-dim); white-space: pre-wrap; word-break: break-word; }
.sw-vazio { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; padding: 24px; color: var(--text-dim); margin-top: 14px; }
.sw-filtros { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 14px 0 6px; }
.sw-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-dim); }
.sw-f > span { font-weight: 600; }
.sw-f select, .sw-f input { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; font-size: 13px; min-height: 32px; }
.sw-f-busca input { min-width: 220px; }
.sw-f > button { min-height: 32px; white-space: nowrap; }
.sw-presets { display: flex; gap: 4px; }
.sw-preset { background: var(--bg-elev); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 6px 10px; font-size: 13px; cursor: pointer; }
.sw-preset.ativo { background: var(--skag-orange); border-color: var(--skag-orange); color: #fff; font-weight: 600; }
.sw-conta { color: var(--text-dim); font-size: 13px; margin: 6px 2px 12px; }
.sw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.sw-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: transform .12s ease; }
.sw-card:hover { transform: translateY(-2px); }
.sw-thumb { position: relative; aspect-ratio: 1 / 1; background: var(--bg-surface); }
.sw-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sw-thumb-vazia { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-faint); font-size: 13px; }
.sw-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,.55); color: #fff; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 18px; pointer-events: none; }
.sw-fogo { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.72); color: #fff; border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 700; }
.sw-fogo-inline { color: var(--text-dim); font-size: var(--fs-corpo); font-weight: 500; }
.sw-corpo { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.sw-anunciante { font-weight: 700; color: var(--text); font-size: var(--fs-corpo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sw-chip { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px; padding: 2px 8px; font-size: 11px; }
.sw-chip-dco { color: var(--status-cliente); border-color: var(--status-cliente); }
.sw-copy { color: var(--text); font-size: 13px; margin: 0; line-height: 1.35; }
.sw-copy-dco { color: var(--text-dim); font-style: italic; font-size: 13px; }
.sw-rodape { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; }
.sw-rodape a { color: var(--text-dim); text-decoration: underline; }
.sw-cta { color: var(--text-dim); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; font-size: 11px; }
.sw-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.sw-modal { background: var(--bg-pop); border: 1px solid var(--border); border-radius: 12px; max-width: 760px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 20px 22px; position: relative; color: var(--text); }
.sw-modal-x { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; }
.sw-modal-titulo { color: var(--text-hi); font-size: var(--fs-sub); margin: 0 24px 4px 0; }
.sw-modal-meta { color: var(--text-dim); font-size: 13px; margin-bottom: 12px; }
.sw-modal-midia { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.sw-modal-midia video, .sw-modal-midia img { max-width: 100%; width: 340px; border-radius: 8px; background: #000; }
.sw-modal-texto { white-space: pre-wrap; font-size: var(--fs-corpo); line-height: 1.4; }
.sw-modal-rodape { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 13px; }
.sw-modal-rodape a { color: var(--skag-orange); }
@media (max-width: 700px) {
.sw-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.sw-f-busca input { min-width: 140px; }
}
/* Conversa dentro do card da Caixa (#332, Carol 03/08). O card da Caixa não tinha onde
falar com o agente; agora a troca mora aqui e é a mesma tabela que o Renner escreve. */
.cx-conversa { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto;
padding: 10px; border: 1px solid var(--border, #2a2a2a); border-radius: 10px; background: var(--bg, #111); }
.cx-msg { padding: 8px 10px; border-radius: 8px; background: var(--surface, #1a1a1a);
border-left: 3px solid transparent; }
.cx-msg-agente { border-left-color: #F59E0B; background: rgba(245, 158, 11, .08); }
.cx-msg-topo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 3px; font-size: 11px; }
.cx-msg-topo b { font-size: 12px; }
.cx-msg-selo { font-size: 9px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
background: #F59E0B; color: #1a1200; padding: 1px 5px; border-radius: 7px; }
.cx-msg-hora { margin-left: auto; opacity: .55; }
.cx-msg-txt { font-size: 13px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
/* ── Pedido de LP: formulário e card ───────────────────────────────────────────────
O pedido é UM CAMPO, não um formulário de peças (Carol, 05/08/2026). A tela não fala
de H1, H2 nem dobra: fala com o Cyrus. Ciano é a cor da etiqueta 🧭 LP Google
(#0891B2), para a leitura casar entre a coluna e o card aberto. */
.tv-card.lp { border-left: 3px solid #0891B2; }
.tv-meta-lp { color: #22B8CF; font-weight: 600; }
:root[data-theme="light"] .tv-meta-lp { color: #0E7490; }
.tv-meta-lp.vazio { color: var(--tv-status-warn); }
/* As três linhas do Cyrus. É o contrato inteiro do pedido, e por isso tem peso visual
de bloco, não de legenda solta. Vale no formulário da Caixa e dentro do card. */
.cx-lp-chamada, .lp-chamada {
display: flex; flex-direction: column; gap: 2px;
padding: 10px 12px; margin-bottom: 8px;
border-left: 3px solid #0891B2; border-radius: 0 8px 8px 0;
background: rgba(8, 145, 178, .09);
font-size: 13px; line-height: 1.5;
}
.cx-lp-chamada b, .lp-chamada b { font-size: 13.5px; }
.cx-lp-chamada span, .lp-chamada span { color: var(--tv-text-dim, #9aa); }
.lp-painel { font-size: 13px; }
.cx-form .lp-painel { padding-left: 0; margin-bottom: 18px; }
.lp-cabecalho { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.lp-chip {
font-size: 11px; font-weight: 600;
padding: 4px 10px; border-radius: 999px;
background: var(--tv-bg-elev); color: var(--tv-text-dim);
border: 1px solid var(--tv-border);
}
.lp-campo { margin-bottom: 12px; }
.lp-campo-rotulo {
display: block;
font-size: 11px; font-weight: 700; color: var(--tv-text-dim); margin-bottom: 3px;
}
.lp-campo-valor {
font-size: 13px; line-height: 1.55; color: var(--tv-text);
white-space: pre-wrap; word-break: break-word;
padding: 8px 10px; border-radius: 7px; cursor: text;
border: 1px solid transparent; background: var(--tv-bg-elev);
}
.lp-campo-valor.grande { min-height: 96px; }
.lp-campo-valor:hover { border-color: var(--tv-border); }
/* Pedido vazio não se esconde: avisa, em cor de atenção, que o Cyrus vai ter que ir
atrás sozinho. */
.lp-campo-valor.vazio { color: var(--tv-status-warn); font-style: italic; background: rgba(245, 158, 11, .07); }
.lp-campo-edit {
width: 100%; box-sizing: border-box;
font-family: inherit; font-size: 13px; line-height: 1.55;
padding: 8px 10px; border-radius: 7px; resize: vertical;
background: var(--tv-bg-elev); color: var(--tv-text);
border: 1.5px solid #0891B2;
}
.lp-campo-edit:focus { outline: none; box-shadow: 0 0 0 2px rgba(8, 145, 178, .25); }
.lp-erro { font-size: 12px; color: var(--tv-status-err); margin-bottom: 8px; }
.lp-rodape { font-size: 11.5px; line-height: 1.5; color: var(--tv-text-faint); margin: 0; }
/* ============================================================
#382: bloco visual de ganho de seguidores (card Meta Ads)
============================================================ */
.seg-bloco{display:flex;flex-direction:column;gap:6px}
.seg-bloco-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.seg-total{font-size:11px;color:var(--text-dim);font-weight:600;white-space:nowrap}
.seg-spark{display:block;width:100%;height:44px}
.seg-spark-pos{fill:#10B981}
.seg-spark-neg{fill:#EF4444}
.seg-spark-semdado{fill:var(--border)}
.seg-spark-eixo{stroke:var(--border);stroke-width:1}
.seg-chips{display:flex;gap:6px;flex-wrap:wrap}
.seg-chip{font-size:11px;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--bg-elev);border:1px solid var(--border)}
.seg-chip-pos{color:#10B981}
.seg-chip-neg{color:#EF4444}
.seg-chip-zero{color:var(--text-dim)}
/* v2 (QA Kim): as 3 métricas fixas em destaque + estado vazio explícito */
.seg-stats{display:flex;gap:8px;flex-wrap:wrap}
.seg-stat{flex:1;display:flex;flex-direction:column;gap:2px;padding:6px 8px;border-radius:8px;background:var(--bg-elev);border:1px solid var(--border);min-width:0}
.seg-stat-rotulo{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.03em;color:var(--text-dim);white-space:nowrap}
.seg-stat-valor{font-size:15px;font-weight:700;color:var(--text-hi,var(--text));white-space:nowrap}
.seg-stat-var{font-size:10.5px;font-weight:700}
.seg-vazio{font-size:12px;line-height:1.5;color:var(--text-dim);padding:8px 10px;border-radius:8px;background:var(--bg-elev);border:1px dashed var(--border)}
/* ============================================================
Oráculo — o painel do fechamento do dia, dentro da Foxx.
Pedido da Carol em 10/08/2026: visualmente IGUAL ao painel que o Wylle usa
(skills/plaud/referencias/painel.html), então a paleta, os tamanhos e o
comportamento dos botões são copiados de lá, não dos tokens da Foxx.
Por isso as cores estão cravadas: aquele painel é escuro e não tem tema claro.
Classe com prefixo or- para não esbarrar em nada do resto do sistema.
============================================================ */
.or-wrap{
--or-laranja:#F26B1D; --or-verde:#22C55E; --or-azul:#3B82F6; --or-roxo:#8B5CF6;
--or-vermelho:#EF4444; --or-amarelo:#F5A524;
--or-fundo:#0a0a0a; --or-caixa:#151515; --or-caixa2:#1e1e1e; --or-borda:#2c2c2c;
--or-texto:#f5f5f5; --or-apagado:#9a9a9a;
background:var(--or-fundo);color:var(--or-texto);
font-size:17px;line-height:1.5;
margin:-16px 0 0;padding-bottom:96px;min-height:calc(100vh - 60px);
/* O painel dele ocupa a tela inteira. Aqui a aba vive dentro do container da Foxx,
então o fundo escuro é esticado para as laterais pela sombra, que pinta sem mexer
na largura. Com width:100vw apareceria barra horizontal por causa do scroll. */
box-shadow:0 0 0 100vmax var(--or-fundo);
clip-path:inset(0 -100vmax);
}
/* O também escurece na aba, senão sobra um filete claro na borda da tela
quando o time está no tema claro. */
.main-oraculo{background:#0a0a0a}
.or-limite{max-width:1000px;margin:0 auto;padding:0 20px}
.or-cabecalho{background:linear-gradient(180deg,#1a1005,var(--or-fundo));border-bottom:1px solid var(--or-borda);padding:28px 0 22px}
.or-wrap .or-h1{margin:0 0 6px;font-size:26px;letter-spacing:-.4px;color:var(--or-texto);font-weight:700}
.or-sub{color:var(--or-apagado);font-size:16px;margin:0}
.or-placar{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.or-placar-item{background:var(--or-caixa);border:1px solid var(--or-borda);border-radius:10px;padding:10px 14px;font-size:15px;color:var(--or-apagado)}
.or-placar-item b{display:block;font-size:22px;color:var(--or-laranja);line-height:1.2}
/* Navegação de dia: não existe no painel dele (lá é um arquivo por dia), então
segue a mesma linguagem do placar para não destoar. */
.or-navdia{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.or-navdia-caixa{display:flex;align-items:center;gap:6px;background:var(--or-caixa);border:1px solid var(--or-borda);border-radius:10px;padding:6px 8px}
.or-seta{background:var(--or-caixa2);color:var(--or-texto);border:1px solid var(--or-borda);border-radius:8px;width:32px;height:32px;font-size:18px;line-height:1;cursor:pointer;font-family:inherit}
.or-seta:hover:not(:disabled){border-color:var(--or-laranja);color:var(--or-laranja)}
.or-seta:disabled{opacity:.4;cursor:not-allowed}
.or-data-input{background:var(--or-caixa2);color:var(--or-texto);border:1px solid var(--or-borda);border-radius:8px;padding:7px 10px;font-size:15px;font-family:inherit;color-scheme:dark}
.or-mini{background:var(--or-caixa2);color:var(--or-apagado);border:1px solid var(--or-borda);border-radius:7px;padding:8px 13px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.or-mini:hover{border-color:#666;color:var(--or-texto)}
.or-mini.ativo{border-color:var(--or-laranja);color:var(--or-laranja)}
.or-mini-n{opacity:.7;margin-left:5px;font-weight:400}
.or-reunioes{margin-top:16px;font-size:15px;color:var(--or-apagado)}
.or-reunioes summary{cursor:pointer;color:var(--or-laranja);font-weight:600;padding:6px 0}
.or-reunioes ul{margin:8px 0 0;padding-left:20px}
.or-reunioes li{margin-bottom:5px}
.or-aviso{background:#2a1d05;border:1px solid #5c4108;color:#ffd98a;border-radius:10px;padding:12px 16px;margin-top:16px;font-size:15px}
.or-aviso ul{margin:6px 0 0;padding-left:20px}
.or-wrap .or-h2{margin:32px 0 12px;font-size:20px;border-left:4px solid var(--or-laranja);padding-left:12px;color:var(--or-texto);font-weight:700}
.or-contagrupo{color:var(--or-apagado);font-weight:400;font-size:15px}
.or-tarefa{background:var(--or-caixa);border:1px solid var(--or-borda);border-left:4px solid var(--or-borda);
border-radius:12px;padding:16px 18px;margin-bottom:12px;transition:border-color .15s,opacity .15s}
.or-tarefa[data-decisao="fazer"]{border-left-color:var(--or-verde)}
.or-tarefa[data-decisao="ja_fiz"]{border-left-color:var(--or-azul)}
.or-tarefa[data-decisao="depois"]{border-left-color:var(--or-amarelo)}
.or-tarefa[data-decisao="nao_fazer"]{border-left-color:var(--or-vermelho);opacity:.45}
.or-tarefa.salvando{opacity:.6}
.or-titulo{font-weight:600;font-size:17px;margin:0 0 6px;color:var(--or-texto)}
.or-detalhe{color:#c9c9c9;font-size:15px;margin:0 0 10px}
.or-origem{display:inline-block;background:var(--or-caixa2);color:var(--or-apagado);border-radius:20px;padding:3px 11px;font-size:13px;margin-bottom:12px}
.or-marca{background:#1d2f45;color:#8ec5ff;border-radius:20px;padding:2px 9px;font-size:12px;font-weight:600;margin-left:6px;vertical-align:middle}
/* Lápis e modo de edição, copiados do painel do Wylle */
.or-lapis{background:none;border:none;cursor:pointer;font-size:15px;padding:2px 6px;opacity:.35;transition:opacity .15s;vertical-align:middle;line-height:1}
.or-tarefa:hover .or-lapis{opacity:.8}
.or-lapis:hover{opacity:1}
.or-edicao{margin-bottom:12px}
.or-edicao label{display:block;font-size:13px;color:var(--or-apagado);text-transform:uppercase;letter-spacing:.5px;margin:0 0 5px}
.or-edicao input,.or-edicao textarea{width:100%;background:#0d0d0d;color:var(--or-texto);border:1px solid var(--or-laranja);
border-radius:8px;padding:10px 12px;font-size:16px;font-family:inherit;line-height:1.45;margin-bottom:10px;resize:vertical}
.or-linha-edicao{display:flex;gap:8px;flex-wrap:wrap}
.or-mini.salvar{background:var(--or-laranja);border-color:var(--or-laranja);color:#160800}
.or-mini.salvar:hover{color:#160800}
.or-marca.venceu{background:#2b0a0a;color:#ffb4b4}
.or-marca.cliente{background:#1e1e1e;color:#c9c9c9}
.or-botoes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.or-botoes button{background:var(--or-caixa2);color:var(--or-texto);border:1px solid var(--or-borda);
border-radius:8px;padding:9px 16px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit}
.or-botoes button:hover{border-color:#555}
.or-botoes button:disabled{opacity:.5;cursor:not-allowed}
.or-tarefa[data-decisao="fazer"] .or-b-fazer{background:var(--or-verde);border-color:var(--or-verde);color:#04210f}
.or-tarefa[data-decisao="ja_fiz"] .or-b-ja_fiz{background:var(--or-azul);border-color:var(--or-azul);color:#04142e}
.or-tarefa[data-decisao="depois"] .or-b-depois{background:var(--or-amarelo);border-color:var(--or-amarelo);color:#2b1d00}
.or-tarefa[data-decisao="nao_fazer"] .or-b-nao_fazer{background:var(--or-vermelho);border-color:var(--or-vermelho);color:#2b0505}
.or-campos{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.or-campo{display:flex;flex-direction:column;gap:5px}
.or-campo label{font-size:13px;color:var(--or-apagado);text-transform:uppercase;letter-spacing:.5px}
.or-campo select,.or-campo input{background:var(--or-caixa2);color:var(--or-texto);border:1px solid var(--or-borda);
border-radius:8px;padding:9px 11px;font-size:15px;font-family:inherit;min-width:150px;color-scheme:dark}
.or-campo input[type=date]{min-width:160px}
.or-rodape{position:fixed;left:0;right:0;bottom:0;background:rgba(10,10,10,.97);
border-top:1px solid var(--or-borda);padding:14px 0;backdrop-filter:blur(8px);z-index:10}
.or-rodape .or-limite{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.or-resumo{font-size:15px;color:var(--or-apagado)}
.or-resumo b{color:var(--or-texto)}
.or-secundario{background:var(--or-caixa2);color:var(--or-texto);border:1px solid var(--or-borda);
border-radius:9px;padding:13px 22px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit}
.or-secundario:hover{border-color:#666}
.or-secundario:disabled{opacity:.5;cursor:not-allowed}
.or-vazio{color:var(--or-apagado);text-align:center;padding:50px 20px;font-size:17px}
.or-vazio h2{font-size:20px;color:var(--or-texto);margin-bottom:10px;font-weight:700}
.or-vazio p{max-width:58ch;margin:0 auto 8px}
.or-erro{background:#2b0a0a;border:1px solid #6b1f1f;color:#ffb4b4;border-radius:9px;padding:12px 14px;margin-top:16px;font-size:15px}
@media (max-width:640px){
.or-wrap{font-size:16px}
.or-wrap .or-h1{font-size:21px}
.or-campo{width:100%}
.or-campo select,.or-campo input{min-width:0;width:100%}
.or-navdia{gap:8px}
}
/* #465: atalho para a pessoa se marcar na própria tarefa. */
.cx-marcar-eu {
margin-top: 6px; background: none; border: 1px dashed var(--tv-border);
color: var(--tv-text-dim); border-radius: 8px; padding: 5px 10px;
font-size: 12px; cursor: pointer; font-family: inherit;
}
.cx-marcar-eu:hover { border-color: var(--skag-orange); color: var(--skag-orange); }
/* #460: aviso de que falta dizer o que foi feito, no card que se tentou concluir. */
.tv-aviso-concluir {
margin: 0 0 12px; padding: 8px 12px; border-radius: 8px;
background: var(--busca-hl); border: 1px solid var(--skag-orange);
color: var(--tv-text); font-size: 13px;
}
/* #463: campo do link da entrega. */
.cx-link-editar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cx-link-editar input { flex: 1; min-width: 220px; }
.cx-link-pronto { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cx-link-pronto a {
color: var(--tv-status-info, #3B82F6); font-size: 13px; text-decoration: none;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.cx-link-pronto a:hover { text-decoration: underline; }
.cx-link-btn, .cx-link-add {
background: none; border: 1px solid var(--tv-border); color: var(--tv-text-dim);
border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.cx-link-add { border-style: dashed; }
.cx-link-btn:hover, .cx-link-add:hover { border-color: var(--skag-orange); color: var(--skag-orange); }
.tv-link-inline { color: var(--tv-status-info, #3B82F6); overflow-wrap: anywhere; }
/* #456: menu "ver como" e faixa de identidade emprestada. */
.hu-vercomo { position: relative; }
.hu-vercomo-seta { font-size: 9px; opacity: .7; margin-left: 4px; }
.hu-vercomo-menu {
position: absolute; right: 0; top: calc(100% + 6px); z-index: 10060;
background: var(--bg-pop); border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 10px 30px rgba(0,0,0,.35); padding: 8px; min-width: 240px;
}
.hu-vercomo-topo { font-size: 11px; color: var(--text-dim); padding: 4px 8px 8px; }
.hu-vercomo-item {
display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
background: none; border: none; color: var(--text); font-family: inherit; font-size: 13px;
padding: 7px 8px; border-radius: 8px; cursor: pointer;
}
.hu-vercomo-item:hover { background: var(--bg-elev); }
.hu-vercomo-vazio, .hu-vercomo-erro { font-size: 12px; color: var(--text-dim); padding: 6px 8px; }
.hu-vercomo-erro { color: var(--status-skag); }
.hu-vercomo-rodape { font-size: 11px; color: var(--text-faint); padding: 8px 8px 2px; border-top: 1px solid var(--border); margin-top: 6px; }
.hu-faixa-vercomo {
display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap;
background: var(--skag-orange); color: #fff; font-size: 13px; padding: 7px 14px;
}
.hu-faixa-vercomo button {
background: rgba(0,0,0,.25); color: #fff; border: 1px solid rgba(255,255,255,.5);
border-radius: 6px; padding: 4px 12px; font-size: 12px; cursor: pointer; font-family: inherit;
}
.hu-faixa-vercomo button:hover { background: rgba(0,0,0,.4); }
/* ============================================================
Foxx 2 — Etapas do Onboarding (Administrador)
============================================================ */
.etapas-explica {
background: var(--bg-surface); border: 1px solid var(--border);
border-radius: 10px; padding: 14px 16px; margin-bottom: 14px;
}
.etapas-explica strong { color: var(--text-hi); display: block; margin-bottom: 4px; }
.etapas-explica p { color: var(--text-dim); font-size: 14px; }
.etapa-nova { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.etapa-nova input {
flex: 1; min-width: 260px; padding: 10px 13px; border-radius: 9px;
background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
font-family: inherit; font-size: 14px;
}
.etapa-nova input:focus { outline: none; border-color: var(--skag-orange); }
.etapas-vazio { color: var(--text-faint); padding: 26px 0; text-align: center; font-size: 14px; }
.etapa-box {
background: var(--bg-surface); border: 1px solid var(--border);
border-radius: 12px; padding: 14px 16px; margin-bottom: 12px;
}
.etapa-box.fim { opacity: .92; }
.etapa-box-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.etapa-box-title { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; }
.etapa-box-title input {
padding: 7px 10px; border-radius: 8px; background: var(--bg-elev);
border: 1px solid var(--skag-orange); color: var(--text); font-family: inherit;
font-size: 15px; font-weight: 600; min-width: 240px;
}
.etapa-num {
width: 24px; height: 24px; border-radius: 7px; background: var(--skag-orange);
color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto;
}
.etapa-nome { font-size: 16px; font-weight: 700; color: var(--text-hi); cursor: pointer; }
.etapa-nome:hover { color: var(--skag-orange); }
.etapa-tag {
font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
background: var(--bg-elev); color: var(--text-dim);
}
.etapa-tag.alerta { background: rgba(245, 158, 11, .16); color: #F59E0B; }
.etapa-box-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.etapa-box-actions .danger, .etapa-item-acoes .danger { color: #EF4444; }
.etapa-bloco { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--border); }
.etapa-bloco-nome { font-size: 13px; font-weight: 700; color: var(--skag-orange); margin-bottom: 6px; }
.etapa-item {
display: flex; align-items: center; gap: 10px; padding: 9px 12px;
background: var(--bg-elev); border: 1px solid var(--border);
border-radius: 9px; margin-bottom: 6px;
}
.etapa-item.off { opacity: .5; }
.etapa-item-texto { flex: 1; min-width: 0; }
.etapa-item-titulo { font-size: 14px; color: var(--text); }
.etapa-item-quem { font-size: 12px; color: var(--text-faint); margin-top: 2px; }
.etapa-item-acoes { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.etapa-item-acoes select, .etapa-item-novo select {
padding: 6px 9px; border-radius: 8px; background: var(--bg-pop);
border: 1px solid var(--border); color: var(--text); font-family: inherit; font-size: 13px;
}
.etapa-item-novo { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.etapa-item-novo input {
flex: 2; min-width: 220px; padding: 9px 12px; border-radius: 9px;
background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
font-family: inherit; font-size: 14px;
}
.etapa-item-novo input.etapa-input-bloco { flex: 1; min-width: 150px; }
.etapa-item-novo input:focus { outline: none; border-color: var(--skag-orange); }
@media (max-width: 820px) {
.etapa-item { align-items: flex-start; flex-direction: column; }
.etapa-item-acoes { width: 100%; }
.etapa-item-novo input, .etapa-item-novo select, .etapa-nova input { min-width: 100%; }
}