/* Extraído do index.html monolítico em 21/08/2026 (build.js). Editar AQUI, nunca no index.html. */ *{box-sizing:border-box;margin:0;padding:0} /* Controle de formulário não herda fonte do body por padrão — sem isto o campo fica na fonte do sistema enquanto a página inteira está na da casa. */ input,select,textarea,button{font-family:inherit} /* ═══════════════════════════════════════════════════════════════════════ TEMA — claro · escuro · misto (21/08/2026) Mecanismo IDÊNTICO ao do Tarefas e do MeuERP, pra regra copiada de lá cair aqui sem tradução: `data-theme` é SEMPRE escrito no , e o boot mora no index.html ANTES do CSS — senão a tela pisca branca a cada reload no escuro. ⚠️ O padrão aqui é CLARO, ao contrário dos apps internos. Este painel é do CLIENTE: virar todo mundo pro escuro de um dia pro outro é mudança visível de produto, não ajuste de tema. Quem quiser escuro escolhe e fica escolhido. Os nomes CANÔNICOS da casa (--panel, --panel-2, --border, --muted, --surface-X/--on-X, --sidebar-*) carregam o VALOR. Os nomes antigos deste painel (--white, --gray-light, --gray-border, --text2…) viraram APELIDOS apontando pra eles: os ~700 usos espalhados por app.js seguem valendo e o bloco escuro só redefine o canônico — dois jogos de token não têm como divergir no primeiro ajuste de cor. ═══════════════════════════════════════════════════════════════════════════ */ :root{ /* Mono é fonte de DADO, não de interface — é a régua do MeuERP, onde ela aparece em exatamente 3 lugares: número do DID, documento e código. Aqui vale o mesmo corte: telefone, ID de contato, domínio, token, snippet e tecla de menu ficam em mono porque alinham em coluna e não deixam confundir 0/O e 1/l. Título, botão, rótulo, badge, cabeçalho de tabela, métrica e nota do atendimento NÃO — isso é interface, e interface é --font. 🪤 Até 25/08/2026 o painel inteiro era mono (decisão de 20/08 copiando a landing) e o corte tinha sido feito só no texto corrido: sobraram título, botão e métrica: "ainda vejo bastante texto com a fonte antiga". */ --mono:ui-monospace,SFMono-Regular,Menlo,monospace; /* régua do MeuERP */ /* 🔤 Fonte do TEXTO CORRIDO — a mesma pilha do Tarefas e do MeuERP, que é a régua da casa. Este painel era o único dos três com o corpo inteiro em mono (desde 20/08), e o próprio comentário aqui já dizia por quê isso incomoda: mono é ótima em título, número, código e badge, e em texto corrido cansa e alarga a linha. A marca não se perde — os poucos lugares que ainda pedem var(--mono) são DADO (telefone, ID, domínio, snippet, tecla), nunca chrome. Pilha de sistema, sem webfont: uma requisição a menos e zero FOUT. */ --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; /* régua do MeuERP */ /* ── Marca ────────────────────────────────────────────────────────────── 🪤 --lia é sobrescrito INLINE no pelo white-label (app.js:~7863, branding.brand_color). Estilo inline vence seletor, então o bloco escuro NÃO pode redefini-lo: valeria só pro tenant sem marca própria. É o certo de qualquer jeito — cor de white-label não é defeito de tema. */ --lia:#3E8EF0; --on-lia:#fff; /* texto EM CIMA do acento */ --spark:#7FC4FA; /* ponto de destaque da capa */ --lia-dark:color-mix(in srgb, var(--lia) 80%, black); /* 🪤 Estas duas misturavam com WHITE. São 40 usos de fundo e borda: no tema escuro cada um virava um bloco quase branco no meio da tela. Misturar com TRANSPARENT resolve os 3 modos numa definição só — sobre fundo branco o resultado composto é idêntico ao de antes (0,1·cor + 0,9·branco nos dois), então o tema claro não mudou um pixel, e sobre o navy vira um azul sutil. */ --lia-light:color-mix(in srgb, var(--lia) 10%, transparent); --lia-border:color-mix(in srgb, var(--lia) 30%, transparent); /* 🪤 Texto do acento EM CIMA da tinta do acento dava 2,85:1 — medido, e já era assim antes do tema (a tinta compõe igual sobre branco). O acento cheio não serve como texto sobre a própria tinta: precisa escurecer no claro e clarear no escuro. Sai do --lia, então o white-label continua mandando. */ --on-lia-tint:var(--lia-dark); /* ── Superfícies e texto (canônico) ─────────────────────────────────── */ --bg:#F7F9FC; --panel:#FFFFFF; --panel-2:#F5F6F8; --border:#E2E6EC; --border-strong:#CBD5E1; --input-bg:#FFFFFF; --row-hover:#F8FAFC; --text:#0F1624; --muted:#4A5568; --text3:#6B7280; /* 🪤 Texto PEQUENO (10–11px, maiúscula com letter-spacing) não usa --muted: é o caso mais difícil de ler e some antes de qualquer outro. --label-text é a variante legível, como já é no Tarefas. */ --label-text:#475569; /* Scrim de modal — precisa escurecer junto com o tema, senão no escuro o véu de 45% não separa mais o modal do fundo (que já é escuro). */ --overlay:rgba(15,23,42,.45); /* ── Sidebar ──────────────────────────────────────────────────────────── Token próprio porque no modo MISTO ela é escura enquanto o resto da página segue clara — não dá pra sair de --panel. */ --sidebar-bg:#FFFFFF; --sidebar-line:#E2E6EC; --sidebar-text:#4A5568; --sidebar-hover:#F5F6F8; --sidebar-text-forte:#0F1624; --sidebar-label:#6B7280; /* ── Famílias semânticas ──────────────────────────────────────────────── Medido neste app: --green 24 usos de TEXTO contra 1 de preenchimento, --amber 10×0, --red 39×11, --purple 4×2. Ou seja: estes tokens são cor de TEXTO na prática, e por isso clareiam no escuro. Os poucos lugares que são preenchimento sólido com texto branco em cima usam --X-fill, que NÃO muda: var(--border-danger) com branco por cima seria ilegível. */ /* 🔤 Estas duas são cor de TEXTO na prática (verde 24 usos de texto contra 1 de preenchimento; âmbar 10 contra 0) e como texto reprovavam sobre o painel branco: #16A34A dava 3,3:1 e #D97706 dava 3,19:1 — medido. Escurecidas para 5,02 e 5,05. O âmbar é o MESMO #B45309 que o Tarefas usa em --warn-text, pra os arquivos seguirem espelho. ⚠️ Só a SEMÂNTICA escureceu. A marca (--lia) fica como está: vem do white-label e é identidade, não defeito de tema — repintar isso seria decidir a cor do cliente por conta própria. O vermelho já passava (4,83) e também não mudou. E o --X-fill segue no tom cheio: é o que vai em bolinha de status e em botão sólido, onde escurecer só sujaria. */ --green:#15803D; --green-fill:#16A34A; --amber:#B45309; --amber-fill:#D97706; --red:#DC2626; --red-fill:#DC2626; --purple:#7C3AED; --purple-fill:#7C3AED; --gray:#808080; /* Par superfície + texto que vai EM CIMA dela. Andam sempre juntos: trocar só um dos dois é exatamente como o texto some sem gerar erro. */ --surface-ok:#F0FDF4; --on-ok:#166534; --border-ok:#BBF7D0; --surface-warn:#FFFBEB; --on-warn:#92400E; --border-warn:#FDE68A; --surface-danger:#FEF2F2; --on-danger:#B91C1C; --border-danger:#FECACA; --surface-info:#EFF6FF; --on-info:#1D4ED8; --border-info:#BFDBFE; --surface-accent:#F5F3FF; --on-accent:#6B21A8; --border-accent:#DDD6FE; /* ── Apelidos do vocabulário antigo deste painel ──────────────────────── */ --white:var(--panel); --gray-light:var(--panel-2); --gray-bg:var(--panel-2); --bg2:var(--panel-2); --gray-border:var(--border); --text2:var(--muted); --danger:var(--red); --green-bg:var(--surface-ok); --green-border:var(--border-ok); --amber-bg:var(--surface-warn); --amber-border:var(--border-warn); --red-bg:var(--surface-danger); --purple-bg:var(--surface-accent); --purple-border:var(--border-accent); --radius:12px;--radius-lg:18px; --shadow:0 2px 12px rgba(62,142,240,.08),0 1px 4px rgba(0,0,0,.05); --shadow-lg:0 8px 40px rgba(62,142,240,.14),0 2px 8px rgba(0,0,0,.07); } /* Escuro NAVY — os MESMOS valores do Tarefas e do MeuERP (design-ref do Painel Técnico). Os três arquivos são espelho: divergir aqui quebra a regra de que uma correção de lá cai aqui sem tradução. */ :root[data-theme="dark"]{ --bg:#070e1c; --panel:#0e1a30; --panel-2:#12203a; --border:rgba(148,163,184,.12); --border-strong:rgba(148,163,184,.26); --input-bg:#0c1524; --row-hover:#12203a; --on-lia-tint:color-mix(in srgb, var(--lia) 55%, white); --text:#eaf0f9; --muted:#93a4bd; --text3:#7d8ca6; --label-text:#93a4bd; --gray:#93a4bd; --overlay:rgba(0,0,0,.65); --green:#86efac; --amber:#fcd34d; --red:#fca5a5; --purple:#d8b4fe; /* Pastel fixo não vira um segundo pastel no escuro: vira a cor da família TRANSLÚCIDA, que acompanha o fundo real embaixo dela. */ --surface-ok:rgba(34,197,94,.15); --on-ok:#86efac; --border-ok:rgba(34,197,94,.30); --surface-warn:rgba(245,158,11,.15); --on-warn:#fcd34d; --border-warn:rgba(245,158,11,.30); --surface-danger:rgba(239,68,68,.16); --on-danger:#fca5a5; --border-danger:rgba(239,68,68,.32); --surface-info:rgba(59,130,246,.16); --on-info:#93c5fd; --border-info:rgba(59,130,246,.32); --surface-accent:rgba(168,85,247,.16);--on-accent:#d8b4fe; --border-accent:rgba(168,85,247,.32); --shadow:0 2px 12px rgba(0,0,0,.35),0 1px 4px rgba(0,0,0,.25); --shadow-lg:0 8px 40px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3); } /* MISTO = conteúdo claro + sidebar escura. É só isto: os tokens de sidebar do escuro valendo enquanto o resto da página segue no :root claro. O seletor é COMPARTILHADO com o dark de propósito — dois blocos com os mesmos valores divergem no primeiro ajuste. (Mesma solução do MeuERP e do Tarefas.) */ :root[data-theme="dark"], :root[data-theme="misto"]{ --sidebar-bg:#0a1224; --sidebar-line:rgba(148,163,184,.10); --sidebar-text:#dfe8f5; --sidebar-hover:#16233d; --sidebar-text-forte:#ffffff; --sidebar-label:#93a4bd; } body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.6;min-height:100vh;letter-spacing:0} /* button/input/select/textarea NÃO herdam a fonte do documento — caem no default do browser (Arial). Era por isso que "Modo claro" e "Recolher" saíam com outra fonte no meio da sidebar. Regra global pra não precisar lembrar disso em cada controle novo. */ button,input,select,textarea{font-family:inherit} /* LOGIN */ .login-wrap{min-height:100vh;display:grid;grid-template-columns:1fr 1fr} .login-left{background:var(--lia);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;text-align:center;position:relative;overflow:hidden} .login-left::before{content:'';position:absolute;width:400px;height:400px;border-radius:50%;border:1.5px solid rgba(255,255,255,.1);top:-100px;right:-100px} .login-left::after{content:'';position:absolute;width:300px;height:300px;border-radius:50%;border:1.5px solid rgba(255,255,255,.08);bottom:-80px;left:-80px} .login-left h1{font-family:var(--font);font-size:1.7rem;font-weight:800;color:#fff;letter-spacing:-.02em;margin:1.5rem 0 .75rem;position:relative;z-index:1} .login-left p{color:rgba(255,255,255,.75);font-size:.9rem;line-height:1.75;max-width:320px;position:relative;z-index:1} .login-features{margin-top:2.5rem;text-align:left;position:relative;z-index:1} .lf-item{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;color:rgba(255,255,255,.85);font-size:.85rem;font-weight:500} .lf-dot{width:8px;height:8px;border-radius:50%;background:var(--spark);flex-shrink:0} .login-right{display:flex;align-items:center;justify-content:center;padding:3rem;background:var(--bg)} .login-card{background:var(--white);border:1.5px solid var(--gray-border);border-radius:var(--radius-lg);padding:2.5rem;width:100%;max-width:400px;box-shadow:var(--shadow-lg)} .login-title{font-size:1.3rem;font-weight:700;margin-bottom:.3rem;letter-spacing:-.02em} .login-sub{font-size:.82rem;color:var(--text2);margin-bottom:2rem} .login-error{background:var(--red-bg);border:1px solid var(--border-danger);color:var(--red);padding:.65rem .9rem;border-radius:8px;font-size:.8rem;margin-bottom:1rem;font-weight:500} .login-error.warn{background:var(--amber-bg);border-color:var(--amber-border);color:var(--amber)} .login-success{background:var(--green-bg);border:1px solid var(--green-border);color:var(--green);padding:.65rem .9rem;border-radius:8px;font-size:.8rem;margin-bottom:1rem;font-weight:500} .forgot{font-size:.75rem;color:var(--lia);cursor:pointer;float:right;margin-top:.3rem;font-weight:500;background:none;border:none;font-family:inherit;padding:0} .forgot:hover{text-decoration:underline} .login-footer{text-align:center;margin-top:1.5rem;font-size:.75rem;color:var(--text3)} .login-footer a{color:var(--lia);font-weight:600;text-decoration:none;cursor:pointer} .back-to-login{text-align:center;margin-top:1rem;font-size:.78rem} .back-to-login button{background:none;border:none;color:var(--lia);font-weight:600;cursor:pointer;font-family:inherit;font-size:inherit} .back-to-login button:hover{text-decoration:underline} /* FORMS */ .form-group{margin-bottom:1.1rem} .form-group label{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text2);margin-bottom:.4rem} .form-group input,.form-group select,.form-group textarea, /* Campo FORA de .form-group também é campo: sem entrar aqui ele sai com a cara crua do browser (régua 1). Estender o seletor existente e não copiar os valores — duas cópias divergem no primeiro ajuste. */ .input,.fx-op input,.fx-sim-in input,.fx-tecla-in{width:100%;background:var(--gray-light);border:1.5px solid var(--gray-border);color:var(--text);padding:.62rem .9rem;border-radius:9px;font-size:.875rem;font-family:var(--font);font-weight:500;transition:border-color .15s;outline:none} .form-group input:focus,.form-group select:focus,.form-group textarea:focus, .input:focus,.fx-op input:focus,.fx-sim-in input:focus,.fx-tecla-in:focus{border-color:var(--lia);background:#fff} .form-group textarea{resize:vertical} .form-row{display:grid;grid-template-columns:1fr 1fr;gap:.85rem} .form-hint{font-size:.7rem;color:var(--text3);margin-top:.3rem} /* BTNS */ .btn{display:inline-flex;align-items:center;gap:.4rem;padding:.52rem 1.2rem;border-radius:100px;font-size:.83rem;font-weight:600;cursor:pointer;transition:all .15s;border:none;font-family:var(--font)} .btn-lia{background:var(--lia);color:var(--on-lia)} .btn-lia:hover{background:var(--lia-dark)} .btn-lia:disabled{opacity:.6;cursor:not-allowed} .btn-ghost{background:transparent;color:var(--text2);border:none;padding:.4rem .6rem;font-size:.8rem;cursor:pointer} .btn-ghost:hover{color:var(--lia)} .btn-outline{background:transparent;color:var(--text);border:1.5px solid var(--gray-border);cursor:pointer} .btn-outline:hover{border-color:var(--lia);color:var(--lia)} .btn-danger{background:var(--red-bg);color:var(--red);border:1px solid var(--border-danger);cursor:pointer} .btn-danger:hover{background:var(--surface-danger)} .btn-sm{padding:.38rem .85rem;font-size:.77rem} .btn-xs{padding:.28rem .65rem;font-size:.72rem} /* DASH LAYOUT */ .dash-wrap{display:grid;grid-template-columns:220px 1fr;min-height:100vh} /* 🔴 A sidebar crescia com o conteúdo (787px) e a PÁGINA NÃO ROLAVA (medido: 0px de rolagem num viewport de 700). O rodapé — tema, Recolher, Sair — ficava inalcançável, e foi por isso que o Dirceu disse "não temos botão de modo escuro": ele estava em y=707 numa tela de 700. Presa em 100vh e grudada no topo: o rodapé fica SEMPRE visível, e quem rola é o menu por dentro (`.sidebar-nav` tem min-height:0 + overflow-y:auto). */ .sidebar{background:var(--sidebar-bg);border-right:1px solid var(--sidebar-line);display:flex;flex-direction:column; height:100vh;height:100dvh;position:sticky;top:0} .sidebar-top{padding:1.25rem 1rem 1rem;border-bottom:1px solid var(--sidebar-line)} .sidebar-brand{display:flex;align-items:center;justify-content:center;gap:.6rem} .sidebar-brand-name{font-family:var(--mono);font-weight:800;font-size:.88rem;color:var(--lia);letter-spacing:.02em;line-height:1} .sidebar-brand-sub{font-family:var(--mono);font-size:.58rem;color:var(--sidebar-label);font-weight:500;line-height:1.3} .sidebar-client{margin-top:.85rem;background:var(--lia-light);border:1px solid var(--lia-border);border-radius:9px;padding:.6rem .75rem;display:flex;align-items:center;gap:.6rem} .sidebar-client.master{background:var(--purple-bg);border-color:var(--purple-border)} .sidebar-client.master .client-av{background:var(--purple-fill)} .sidebar-client.master .client-plan{color:var(--on-accent)} .client-av{width:30px;height:30px;background:var(--lia);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--on-lia);font-weight:700;font-size:.72rem;flex-shrink:0} .client-name{font-size:.78rem;font-weight:700;line-height:1;color:var(--sidebar-text-forte)} .client-plan{font-size:.62rem;color:var(--on-lia-tint);font-weight:600} /* 🔴 A sidebar transbordava SEM ROLAR em tela baixa: 787px de conteúdo em 700px de viewport, `overflow-y: visible`. O rodapé — botão de tema, Recolher, Sair — ficava inalcançável, e foi por isso que o Dirceu disse "não temos botão de modo escuro" (medido: y=707 num viewport de 700). 🪤 `overflow-y:auto` sozinho NÃO resolve: filho de flex não encolhe abaixo do conteúdo sem `min-height:0`. Sem ele o nav continua com a altura toda e o estouro só muda de lugar. É a mesma armadilha do `min-width:0` na horizontal. */ .sidebar-nav{flex:1;min-height:0;overflow-y:auto;padding:.75rem} .sidebar-section-label{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--sidebar-label);padding:.5rem .5rem .25rem;margin-top:.5rem} .s-item{display:flex;align-items:center;gap:.55rem;padding:.48rem .65rem;border-radius:9px;cursor:pointer;font-size:.82rem;font-weight:500;color:var(--sidebar-text);margin-bottom:.1rem;transition:all .12s} .s-item:hover{background:var(--sidebar-hover);color:var(--sidebar-text-forte)} .s-item.active{background:var(--lia);color:var(--on-lia);font-weight:600} .s-item.purple.active{background:var(--purple-fill)} .sidebar-bot{border-top:1px solid var(--sidebar-line);padding:.75rem} /* ═══════ SIDEBAR COLAPSÁVEL ═══════ */ /* Estado expandido (default) — 220px */ .dash-wrap.sidebar-collapsed{grid-template-columns:68px 1fr} /* Esconder textos em sidebar colapsada */ .sidebar-collapsed .sidebar-brand-name, .sidebar-collapsed .sidebar-brand-sub, .sidebar-collapsed .client-name, .sidebar-collapsed .client-plan, .sidebar-collapsed .sidebar-section-label, .sidebar-collapsed .status-badge span:not(.s-dot):not(.collapse-icon), .sidebar-collapsed .sidebar-client > div:not(.client-av){display:none} .sidebar-collapsed .sidebar-brand{justify-content:center} .sidebar-collapsed .sidebar-client{padding:.4rem;justify-content:center} .sidebar-collapsed .sidebar-nav{padding:.5rem .35rem} /* Sidebar colapsada: esconder texto, manter ícone — itens do menu são .s-item (div) */ .sidebar-collapsed .sidebar-nav .s-item{ justify-content:center !important; padding:.65rem !important; position:relative; overflow:hidden !important; gap:0 !important; font-size:0 !important; white-space:nowrap !important; width:auto } /* Ícone (primeiro span filho) mantém tamanho visível */ .sidebar-collapsed .sidebar-nav .s-item > span{ font-size:1rem !important; width:auto !important; flex-shrink:0 } /* Tooltip ao passar mouse em sidebar colapsada */ .sidebar-collapsed .sidebar-nav .s-item:hover::after{ content:attr(data-label); position:absolute; left:calc(100% + 8px); top:50%; transform:translateY(-50%); background:var(--text); color:#fff; padding:.35rem .6rem; border-radius:6px; font-size:.75rem; white-space:nowrap; z-index:100; box-shadow:0 4px 12px rgba(0,0,0,0.15); pointer-events:none } /* Botão toggle (rodapé) */ .sidebar-toggle{ width:100%; background:transparent; border:1px solid var(--sidebar-line); border-radius:6px; padding:.4rem .5rem; cursor:pointer; color:var(--sidebar-text); font-size:.8rem; display:flex; align-items:center; justify-content:center; gap:.4rem; transition:all .15s; margin-top:.5rem } .sidebar-toggle:hover{background:var(--sidebar-hover);color:var(--sidebar-text-forte)} .sidebar-collapsed .sidebar-toggle .toggle-label{display:none} /* ═══════ COLUMN HIDING ═══════ */ /* Esconde em telas < 1400px */ @media (max-width: 1400px) { .col-hide-xl{display:none !important} } /* Esconde em telas < 1200px */ @media (max-width: 1200px) { .col-hide-lg{display:none !important} } /* Esconde em telas < 1024px (meia tela em monitor Full HD) */ @media (max-width: 1024px) { .col-hide-md{display:none !important} /* Coluna "Ações" das tabelas: empilha botões verticalmente quando aperta */ .actions-cell{white-space:normal !important;text-align:right;display:flex;flex-direction:column;gap:.3rem;align-items:stretch} .actions-cell .btn{margin:0 !important;justify-content:center} } /* Esconde em mobile (<768px) — colunas secundárias caem fora */ @media (max-width: 768px) { .col-hide-sm{display:none !important} } /* Atendimento (inbox) — responsivo: empilha lista→thread no mobile */ .atd-back{display:none} /* EMPILHAMENTO (um painel por vez). Subiu de 720 -> 960. O criterio NAO e "onde a sidebar vira drawer" (768) e sim onde a thread para de ser apertada. Acima de 768 a sidebar deixa de ser drawer e come 180-200px, mas a lista segue em 320px — entao a thread MINGUA em vez de crescer: 235px em 769, 299px em 833, 363px em 897. So em ~960 ela alcanca 427px, que e a largura que o iPad portrait tinha antes. Abaixo disso, um painel por vez ganha de duas colunas. ⚠️ Esse degrau e ANTERIOR a esta mudanca — antes morava em 721 e ninguem via. */ /* Linha de opção da Supervisão IA: checkbox à esquerda, título + explicação empilhados, controle opcional colado à direita. A explicação em é o que diferencia "ligar a IA" de "ligar a IA e ela começa a mandar WhatsApp" — quem lê a tela precisa saber o que muda ANTES de clicar. */ .ia-linha{display:flex;align-items:flex-start;gap:.6rem;padding:.6rem 0; border-bottom:1px solid var(--gray-border);font-size:.8rem;cursor:pointer} .ia-linha:last-child{border-bottom:none} .ia-linha input[type=checkbox]{width:16px;height:16px;margin-top:.15rem;flex:none;cursor:pointer} .ia-linha > span{display:flex;flex-direction:column;gap:.1rem;min-width:0} .ia-linha strong{font-weight:600;color:var(--text)} .ia-linha em{font-style:normal;font-size:.72rem;color:var(--text2);line-height:1.4} /* `select` dentro da linha não pode encolher a ponto de virar um traço: o min-width evita o achatamento que o flex faz num viewport de 375. */ .ia-linha select{flex:none;min-width:92px} @media (max-width:520px){ .ia-linha{flex-wrap:wrap} .ia-linha select{margin-left:2.2rem !important;margin-top:.35rem} } /* Painel de contato: 3ª coluna só em tela larga. Abaixo de 1180px ele TOMA o card — dividir 300px de cadastro com a conversa num viewport de 1000px deixa as duas ilegíveis. Mesmo padrão que a lista já usa embaixo de 960. */ @media (max-width: 1180px){ .atd-grid.with-contact{grid-template-columns:1fr !important} .atd-grid.with-contact .atd-list,.atd-grid.with-contact .atd-thread{display:none !important} } @media (max-width: 960px){ .atd-grid{grid-template-columns:1fr !important} /* !important pra vencer o display:flex inline de .atd-list/.atd-thread, senão o swap lista↔thread não acontece e a thread renderiza embaixo da lista */ .atd-grid.has-sel .atd-list{display:none !important} .atd-grid:not(.has-sel) .atd-thread{display:none !important} .atd-back{display:inline-flex} } /* ALTURA no celular (<=720) é separada DE PROPOSITO do empilhamento acima. Aqui o painel cresce com o conteudo em vez de travar na viewport: `vh` no iOS conta a barra do Safari, entao 100vh corta o rodape e o compositor some (mesma armadilha do bug do 100vh no iPhone). Entre 721 e 768 nao entra nesta regra — la a cadeia do .atd-mode preenche a tela, que e o certo pro iPad. */ @media (max-width: 720px){ .atd-grid{height:auto !important} .atd-grid .atd-list,.atd-grid .atd-thread{min-height:62vh} } /* Desktop (>768px): o inbox ocupa a altura util da janela em vez do 70vh chumbado no inline style — senao sobra ~1/4 de tela morta embaixo num 1080p e mais ainda em monitor maior. Precisa da CADEIA INTEIRA com altura definida (dash-wrap 100vh -> dash-body -> dash-content -> d-card), porque height:100% nao resolve dentro de pai com altura automatica. Vale so na view Atendimento (.atd-mode no dash-wrap); as outras views seguem rolando a pagina normal. O piso e 721px, casando EXATAMENTE com o breakpoint que decide se a tela e de duas colunas: abaixo de 721 o bloco empilha lista<->thread com height:auto e nao ha altura pra preencher. Na faixa 721-768 a sidebar ja e drawer `fixed`, e o `overflow:hidden` aqui NAO o quebra — medido: fechado x=-260, aberto x=0. (Vale medir e nao supor: `.page-anim` usa `animation ... both` com transform, entao o .dash-wrap e bloco-conteiner PERMANENTE dos position:fixed.) */ @media (min-width: 721px){ .dash-wrap.atd-mode{height:100vh;overflow:hidden} /* a sidebar deixa de crescer com a pagina, entao o menu precisa rolar sozinho */ .dash-wrap.atd-mode .sidebar-nav{overflow-y:auto;min-height:0} .dash-wrap.atd-mode .dash-body{min-height:0} .dash-wrap.atd-mode .dash-content{min-height:0;display:flex;flex-direction:column;overflow:hidden} .dash-wrap.atd-mode .dash-content > .d-card{flex:1;min-height:0} /* !important pra vencer o height:70vh/minHeight:560 inline do .atd-grid */ .dash-wrap.atd-mode .atd-grid{height:100% !important;min-height:0 !important} } .status-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .65rem;border-radius:100px;font-size:.7rem;font-weight:600} .status-badge.online{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)} .s-dot{width:6px;height:6px;border-radius:50%;background:currentColor} /* TOPBAR */ .topbar{background:var(--white);border-bottom:1px solid var(--gray-border);padding:.85rem 2rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100} .topbar-title h1{font-family:var(--font);font-size:1.05rem;font-weight:700;letter-spacing:-.01em} .topbar-title p{font-size:.75rem;color:var(--text2);margin-top:.1rem} .topbar-actions{display:flex;align-items:center;gap:.75rem} /* IMPERSONATION BANNER */ /* `color` era #92400e cravado — valor do tema CLARO. No escuro virava texto escuro sobre superfície escura. Nenhuma guarda pegava porque este banner só aparece em impersonação, estado que elas não entram. Par correto: --surface-warn + --on-warn. */ .imp-banner{background:var(--surface-warn);border-bottom:1px solid var(--border-warn);padding:.6rem 2rem;display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:var(--on-warn);font-weight:500} /* O aviso de escopo divide a pele do banner de impersonação de propósito: é a mesma família de mensagem ("você não está onde acha que está"). */ .escopo-banner{gap:1rem} /* Barra FIXA. Antes rolava junto com a página: numa tela longa (Meu bot, Canais) o aviso saía de vista logo no primeiro scroll, e quem estava editando não tinha mais como saber de quem era a conta — que é exatamente o momento em que precisa saber. `z-index` acima do conteúdo e abaixo de modal. */ .imp-banner{position:sticky;top:0;z-index:40} .imp-banner strong{color:var(--on-warn)} .imp-close{background:var(--panel);color:var(--on-warn);border:1px solid var(--border-warn);padding:.3rem .75rem;border-radius:100px;font-size:.72rem;font-weight:600;cursor:pointer;font-family:inherit} .imp-close:hover{background:var(--surface-warn)} /* DASH CONTENT */ /* 🔴 `min-width:0` é o que impede a coluna de conteúdo de EMPURRAR a página. Item de grid não encolhe abaixo do min-content por padrão: com a tabela de empresas aberta, esta coluna ficava 90px mais larga que o `1fr` e a página inteira ganhava rolagem horizontal — medido em 1194px (70px) e 1280px (81px), e NÃO em 1024 nem 1366. Não-monotônico assim é a assinatura do problema: não adianta testar só nos 4 pontos, tem que varrer a faixa. */ .dash-body{display:flex;flex-direction:column;min-width:0} .dash-content{padding:1.75rem 2rem;flex:1;min-width:0} /* Com a coluna finalmente encolhendo, quem não cabe é a TABELA — e ela tem que rolar dentro do próprio cartão, não empurrar a página (régua: tabela montada no JS sem wrapper de overflow estoura a tela em vez de rolar). */ .dash-content .d-card > table, .dash-content table{display:block;overflow-x:auto;max-width:100%} /* A tabela rola, mas a AÇÃO não pode rolar pra fora: era o "Entrar como" cortado pela metade no print do Dirceu. Presa à direita, ela fica alcançável em qualquer largura, e o resto da linha passa por baixo. */ .dash-content td.actions-cell, .dash-content th.actions-cell{position:sticky;right:0;background:var(--panel); box-shadow:-8px 0 8px -8px rgba(0,0,0,.25)} .dash-content tr:hover td.actions-cell{background:var(--row-hover)} /* Régua da casa: `thead` precisa de fundo próprio — sem ele o cabeçalho lê como a 1ª linha de dados. `.data-table th` já tinha; as tabelas montadas no JS sem essa classe (Contatos) não tinham, e ninguém via porque a guarda rodava com a tela VAZIA e imprimia "não avaliado" — buraco, não aprovação. Token, não pastel fixo: `--gray-light` acompanha os três modos. */ .dash-content thead th{background:var(--gray-light)} /* A célula de ação presa à direita acompanha o cabeçalho, senão fica um retângulo de outra cor flutuando no fim da linha do thead. */ .dash-content thead th.actions-cell{background:var(--gray-light)} .metrics-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.5rem} /* Tabelas responsivas */ .d-card table, .d-card .clients-table, table{width:100%;border-collapse:collapse} .table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch} /* Agenda de contatos: abaixo de 768px a coluna Telefone sai e o número desce pra debaixo do nome. Sem isso a tabela ficava mais larga que a tela e o botão de editar caía fora do card — dá pra rolar de lado, mas ninguém descobre. */ .ag-fone-mobile{display:none} @media (max-width: 768px){ .ag-fone-mobile{display:block;font-size:.7rem;color:var(--text3);font-family:var(--mono);font-weight:500;margin-top:.1rem} } .m-card{background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);padding:1.1rem} .m-label{font-family:var(--font);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--text3);margin-bottom:.4rem} .m-value{font-family:var(--font);font-size:1.5rem;font-weight:800;letter-spacing:-.01em;line-height:1} .m-change{font-size:.7rem;margin-top:.35rem;font-weight:500} .m-change.up{color:var(--green)} .m-change.neutral{color:var(--text3)} .dash-grid{display:grid;grid-template-columns:1fr 300px;gap:1.25rem} .d-card{background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);padding:1.25rem;margin-bottom:1.25rem} .d-card:last-child{margin-bottom:0} .d-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem} .d-card-header h3{font-family:var(--font);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text2)} .d-card-header span{font-size:.72rem;color:var(--text3)} /* CONVERSATIONS */ .conv-item{display:flex;gap:.65rem;padding:.65rem 0;border-bottom:1px solid var(--gray-border);align-items:center;cursor:pointer;border-radius:6px;padding-left:.25rem} .conv-item:hover{background:var(--gray-light)} .conv-item:last-child{border:none} .conv-av{width:34px;height:34px;border-radius:9px;background:var(--lia-light);border:1px solid var(--lia-border);display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;color:var(--on-lia-tint);flex-shrink:0} .conv-name{font-size:.82rem;font-weight:700;margin-bottom:.15rem} .conv-prev{font-size:.73rem;color:var(--text2);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px} .conv-time{font-family:var(--font);font-size:.66rem;color:var(--text3);margin-left:auto;flex-shrink:0;font-weight:500} .ch-pill{display:inline-flex;align-items:center;gap:.2rem;background:var(--green-bg);color:var(--green);border:1px solid var(--green-border);padding:.1rem .45rem;border-radius:100px;font-family:var(--font);font-size:.6rem;font-weight:700} /* BOT CONFIG */ .bot-row{display:flex;justify-content:space-between;align-items:center;padding:.6rem 0;border-bottom:1px solid var(--gray-border);font-size:.8rem} .bot-row:last-child{border:none} .bot-row .k{color:var(--text2);font-weight:500} .bot-row .v{font-weight:600;font-size:.78rem} /* WhatsApp connection card */ .wa-card{text-align:center;padding:2rem 1.5rem} .wa-status{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border-radius:100px;font-size:.8rem;font-weight:700;margin-bottom:1.25rem} .wa-status.connected{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)} .wa-status.disconnected{background:var(--panel-2);color:var(--text3);border:1px solid var(--gray-border)} .wa-status.waiting{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border)} .wa-status .pulse{width:8px;height:8px;border-radius:100px;background:currentColor;animation:pulse 1.5s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}} /* 🔒 #fff literal de propósito: o leitor de QR depende do contraste do próprio código. Não trocar por --panel. */ .wa-qr-box{display:inline-block;padding:1rem;background:#fff;border:2px solid var(--gray-border);border-radius:12px;margin:.5rem 0 1rem} .wa-qr-box img{display:block;width:280px;height:280px} .wa-steps{text-align:left;max-width:380px;margin:1rem auto;font-size:.82rem;color:var(--text2);line-height:1.7} .wa-steps ol{margin:0;padding-left:1.3rem} .wa-steps li{margin:.2rem 0} .wa-steps strong{color:var(--text)} .wa-profile{display:flex;align-items:center;gap:1rem;padding:1rem;background:var(--green-bg);border:1px solid var(--green-border);border-radius:10px;margin:1rem 0;text-align:left} .wa-profile-pic{width:52px;height:52px;border-radius:50%;background:var(--panel-2);border:2px solid var(--green-border);display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;overflow:hidden} .wa-profile-pic img{width:100%;height:100%;object-fit:cover} .wa-profile-info{flex:1} .wa-profile-name{font-weight:700;font-size:.95rem;color:var(--text)} .wa-profile-number{font-size:.78rem;color:var(--text2);font-family:var(--mono);margin-top:.15rem} .wa-loading{display:inline-flex;align-items:center;gap:.5rem;color:var(--text2);font-size:.9rem} .wa-spinner{width:18px;height:18px;border:2px solid var(--gray-border);border-top-color:var(--lia);border-radius:50%;animation:spin .8s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} .tog{width:36px;height:20px;background:var(--gray-border);border-radius:100px;position:relative;cursor:pointer;transition:background .2s;flex-shrink:0} .tog.on{background:var(--lia)} .tog::after{content:'';position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:3px;left:3px;transition:left .18s;box-shadow:0 1px 3px rgba(0,0,0,.2)} .tog.on::after{left:19px} /* ACTIVITY */ .act-item{display:flex;gap:.65rem;padding:.55rem 0;border-bottom:1px solid var(--gray-border);align-items:flex-start} .act-item:last-child{border:none} .act-ic{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0} .act-ic.msg{background:var(--lia-light);color:var(--on-lia-tint)} .act-ic.ok{background:var(--green-bg);color:var(--green)} .act-body p{font-size:.78rem;font-weight:600;margin-bottom:.1rem} .act-body span{font-size:.68rem;color:var(--text3)} /* CHART */ .mini-chart{display:flex;align-items:flex-end;gap:4px;height:48px;margin-top:.75rem} .bar{background:var(--lia-light);border-radius:3px 3px 0 0;flex:1;transition:background .15s;cursor:pointer} .bar:hover{background:var(--lia)} .bar.today{background:var(--lia)} /* AGENT CONFIG */ .config-page{max-width:780px} .config-section{background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1.25rem} .config-section-header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid var(--gray-border)} .config-section-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0} /* O emoji trazia a própria cor; o SVG herda do container — então cada variante precisa dizer a sua, senão o ícone sai na cor do texto do corpo. */ .config-section-icon.blue{background:var(--lia-light);color:var(--on-lia-tint)} .config-section-icon.green{background:var(--surface-ok);color:var(--on-ok)} .config-section-icon.amber{background:var(--surface-warn);color:var(--on-warn)} .config-section-icon.red{background:var(--surface-danger);color:var(--on-danger)} .config-section-title{font-size:.9rem;font-weight:700;margin-bottom:.2rem;text-transform:uppercase;letter-spacing:.04em} .config-section-sub{font-size:.75rem;color:var(--text2)} .tom-options{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem;margin-top:.5rem} .tom-option{border:1.5px solid var(--gray-border);border-radius:10px;padding:.75rem;cursor:pointer;transition:all .15s;text-align:center} .tom-option:hover{border-color:var(--on-lia-tint);background:var(--lia-light)} .tom-option.selected{border-color:var(--on-lia-tint);background:var(--lia-light)} /* 🪤 O emoji era TEXTO e o `text-align:center` do cartão o centralizava sozinho. O SVG do é `display:block`: não obedece text-align e encosta na esquerda. Centralizar virou responsabilidade explícita do container. */ .tom-option .icon{display:flex;justify-content:center;margin-bottom:.4rem;color:var(--text3)} .tom-option:hover .icon{color:var(--muted)} .tom-option.selected .icon{color:var(--on-lia-tint)} .tom-option .label{font-size:.75rem;font-weight:600;color:var(--text)} .tom-option .desc{font-size:.68rem;color:var(--text3);margin-top:.1rem} .prompt-editor{font-family:var(--mono);font-size:.82rem;min-height:160px;line-height:1.7} .char-count{font-size:.68rem;color:var(--text3);text-align:right;margin-top:.3rem} .faq-item{display:flex;gap:.75rem;align-items:flex-start;padding:.75rem;background:var(--gray-light);border:1px solid var(--gray-border);border-radius:9px;margin-bottom:.6rem} .faq-item:last-child{margin-bottom:0} .faq-content{flex:1;min-width:0} .faq-q{font-size:.8rem;font-weight:700;margin-bottom:.2rem} .faq-a{font-size:.75rem;color:var(--text2)} .faq-add{border:1.5px dashed var(--gray-border);border-radius:9px;padding:.85rem;text-align:center;cursor:pointer;transition:all .15s;font-size:.8rem;color:var(--text3)} .faq-add:hover{border-color:var(--on-lia-tint);color:var(--on-lia-tint);background:var(--lia-light)} .horario-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem} .dias-row{display:flex;gap:.4rem;margin-top:.5rem;flex-wrap:wrap} .dia-btn{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;cursor:pointer;border:1.5px solid var(--gray-border);background:var(--white);transition:all .15s;font-family:var(--font)} .dia-btn:hover{border-color:var(--lia);color:var(--lia)} .dia-btn.on{background:var(--lia);color:#fff;border-color:var(--lia)} .palavra-tag{display:inline-flex;align-items:center;gap:.4rem;background:var(--lia-light);border:1px solid var(--lia-border);color:var(--on-lia-tint);padding:.25rem .65rem;border-radius:100px;font-size:.75rem;font-weight:600;margin:.2rem} /* 🪤 O × usava `--lia` (cor de PREENCHIMENTO) sobre `--lia-light`: 2,95:1 no claro da marca G|A — reprova, e é justamente o botão de remover, onde errar custa caro. O texto da própria pílula já usa a variante certa; o × só tinha ficado pra trás. Medido em 24/08/2026 varrendo as 8 telas. */ .palavra-tag button{background:none;border:none;cursor:pointer;color:var(--on-lia-tint);font-size:.8rem;padding:0;line-height:1;font-family:var(--font)} .palavra-tag button:hover{color:var(--text)} .palavras-wrap{display:flex;flex-wrap:wrap;gap:.2rem;margin-bottom:.75rem;min-height:36px;padding:.4rem;background:var(--gray-light);border:1.5px solid var(--gray-border);border-radius:9px} .add-palavra-row{display:flex;gap:.5rem} .save-bar{background:var(--white);border-top:1px solid var(--gray-border);padding:1rem 2rem;display:flex;align-items:center;justify-content:space-between;position:sticky;bottom:0} .save-bar-left{font-size:.8rem;color:var(--text2)} .save-success{display:inline-flex;align-items:center;gap:.4rem;color:var(--green);font-size:.8rem;font-weight:600} /* MASTER / COMPANY TABLES */ .data-table{width:100%;border-collapse:collapse} .data-table th{font-family:var(--font);text-align:left;font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text3);padding:.75rem 1rem;border-bottom:1px solid var(--gray-border);background:var(--gray-light)} .data-table td{padding:.85rem 1rem;border-bottom:1px solid var(--gray-border);font-size:.85rem;vertical-align:middle} .data-table tr:last-child td{border-bottom:none} .data-table tr:hover{background:var(--gray-light)} .badge{display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:100px;font-family:var(--font);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em} .badge-master{background:var(--purple-bg);color:var(--purple);border:1px solid var(--purple-border)} .badge-client{background:var(--lia-light);color:var(--on-lia-tint);border:1px solid var(--lia-border)} .badge-supervisor{background:var(--amber-bg);color:var(--amber);border:1px solid var(--amber-border)} .badge-agent{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)} .badge-inactive{background:var(--panel-2);color:var(--text3);border:1px solid var(--gray-border)} .stats-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-bottom:1.5rem} @media(max-width:1100px){.stats-row{grid-template-columns:repeat(3,1fr)}} /* MODAL */ /* `.fx-overlay` compartilha a régua do overlay mas NÃO o nome da classe — ver o comentário do EditorPasso: `useEscClose` trata `.modal-overlay` como "tem diálogo na frente" e um modal React com essa classe veta o próprio ESC. */ .modal-overlay,.fx-overlay{position:fixed;inset:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:500;padding:1rem} .modal{background:var(--white);border-radius:var(--radius-lg);padding:2rem;width:100%;max-width:480px;box-shadow:var(--shadow-lg)} .modal h3{font-family:var(--font);font-size:.95rem;font-weight:700;margin-bottom:1.25rem} /* MISC */ .loading{display:flex;align-items:center;justify-content:center;padding:3rem;color:var(--text3);font-size:.85rem;gap:.5rem} .empty{padding:1.5rem 0;text-align:center;color:var(--text3);font-size:.82rem} .page-anim{animation:fadeUp .22s ease both} @keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} /* PASSWORD STRENGTH */ .pwd-strength{height:4px;background:var(--gray-border);border-radius:2px;margin-top:.5rem;overflow:hidden} .pwd-strength-bar{height:100%;transition:all .2s;border-radius:2px} .pwd-hint{font-size:.7rem;margin-top:.3rem} .pwd-hint.weak{color:var(--red)} .pwd-hint.medium{color:var(--amber)} .pwd-hint.strong{color:var(--green)} /* ═══ Relatórios ═══ */ .rep-filters{display:flex;gap:.5rem;margin-bottom:1.25rem;flex-wrap:wrap;align-items:center} .rep-filter-btn{padding:.4rem .85rem;border:1px solid var(--gray-border);background:var(--white);border-radius:6px;font-size:.78rem;font-weight:600;color:var(--text2);cursor:pointer;transition:all .15s} .rep-filter-btn:hover{border-color:var(--lia);color:var(--lia)} .rep-filter-btn.active{background:var(--lia);color:#fff;border-color:var(--lia)} .rep-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.75rem;margin-bottom:1.25rem} .rep-sum-card{background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);padding:1rem} .rep-sum-label{font-family:var(--font);font-size:.66rem;color:var(--text3);text-transform:uppercase;letter-spacing:.03em;font-weight:600;margin-bottom:.35rem} .rep-sum-value{font-family:var(--font);font-size:1.6rem;font-weight:800;color:var(--text);line-height:1} .rep-sum-hint{font-size:.72rem;color:var(--text2);margin-top:.35rem} .rep-sum-value.green{color:var(--green)} .rep-sum-value.lia{color:var(--lia)} .rep-sum-value.amber{color:var(--amber)} .rep-chart-box{background:var(--white);border:1px solid var(--gray-border);border-radius:var(--radius);padding:1.25rem;margin-bottom:1.25rem} .rep-chart-title{font-family:var(--font);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--text2);margin-bottom:1rem;display:flex;justify-content:space-between;align-items:center} .rep-chart-legend{display:flex;gap:1rem;font-size:.72rem;font-weight:500} .rep-chart-legend span{display:inline-flex;align-items:center;gap:.3rem;color:var(--text2)} .rep-chart-legend i{width:10px;height:10px;border-radius:2px;display:inline-block} .rep-senders-list{display:flex;flex-direction:column;gap:.55rem} .rep-sender-row{display:flex;align-items:center;gap:.75rem;font-size:.85rem} .rep-sender-name{flex:0 0 140px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rep-sender-bar{flex:1;height:20px;background:var(--gray-bg);border-radius:4px;overflow:hidden;position:relative} .rep-sender-bar-fill{height:100%;background:var(--lia);border-radius:4px;transition:width .3s} .rep-sender-pct{flex:0 0 75px;text-align:right;font-size:.78rem;color:var(--text2);font-variant-numeric:tabular-nums} .rep-sender-pct strong{color:var(--text);font-weight:700} .rep-empty{text-align:center;padding:3rem 1rem;color:var(--text2)} .rep-empty .icon{font-size:2.5rem;margin-bottom:.75rem;opacity:.6} .rep-empty h3{font-weight:700;color:var(--text);margin-bottom:.5rem} .rep-empty p{font-size:.85rem;max-width:400px;margin:0 auto;line-height:1.5} /* ═══════════════ RESPONSIVIDADE ═══════════════ */ /* Telas muito grandes: aproveita o espaço mas centralizado. ⚠️ O `width:100%` NAO e decorativo: .dash-body e flex-column, e `margin:auto` no eixo transversal CANCELA o stretch do flex — sem width, o .dash-content encolhe pro tamanho do conteudo (shrink-to-fit) e vira uma coluna estreita centralizada. Media 435px na aba Atendimento em 1920 (a thread e `1fr`, entao contribui so o min-content). So aparece >=1920px, por isso passou batido. */ @media (min-width: 1920px) { .dash-content{max-width:1800px;margin:0 auto;width:100%} /* O inbox e a unica view que ganha em usar a tela toda: sem o teto de 1800px sobrariam ~540px de margem morta num 2560. Escopado so na view Atendimento. */ .dash-wrap.atd-mode .dash-content{max-width:none} } /* Desktop normal/compacto: 1200-1400px */ @media (max-width: 1400px) { .dash-content{padding:1.5rem 1.5rem} .metrics-row{gap:.85rem} } /* Tela dividida ao meio em monitor grande: ~960-1200px */ @media (max-width: 1200px) { .dash-wrap{grid-template-columns:200px 1fr} .dash-content{padding:1.25rem} .metrics-row{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.75rem} .m-card{padding:.9rem} .rep-summary{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))} .rep-chart-box{padding:1rem} /* Cabeçalho de seções com "Novo cliente" — sempre quebra se precisar */ .d-card-head{flex-wrap:wrap !important;gap:.75rem} /* Tabelas não estouram */ .d-card{overflow-x:auto} } /* Tablet / tela bem dividida: 768-1024 */ @media (max-width: 1024px) { .dash-wrap{grid-template-columns:180px 1fr} .sidebar{font-size:.85rem} .dash-content{padding:1rem} .metrics-row{grid-template-columns:repeat(2,1fr)} .rep-summary{grid-template-columns:repeat(2,1fr)} /* Header principal com logo+user aparece empilhado se não couber */ .dash-header{flex-wrap:wrap;gap:.5rem} .dash-header .header-actions{flex-wrap:wrap} /* Texto longo em células da tabela — não quebra em 2 linhas */ .d-card td, .d-card th{white-space:nowrap} .d-card{overflow-x:auto} } /* Mobile: <768px → sidebar vira drawer (off-canvas), abre via botão ☰ no topbar */ @media (max-width: 768px) { /* !important pra vencer .dash-wrap.sidebar-collapsed{68px 1fr} do desktop (mais específico) */ /* minmax(0,1fr) em vez de 1fr: previne que conteúdo largo (tabelas) estique a coluna */ .dash-wrap, .dash-wrap.sidebar-collapsed{grid-template-columns:minmax(0,1fr) !important;overflow-x:hidden} /* Sidebar escondida por padrão; quando .mobile-open, overlay sobre o conteúdo */ .sidebar{ position:fixed;top:0;left:0;bottom:0; width:260px;max-width:80vw; z-index:200; transform:translateX(-100%); transition:transform .22s ease; border-right:1px solid var(--gray-border); box-shadow:0 0 0 rgba(0,0,0,0); background:var(--white) } .dash-wrap.mobile-sidebar-open .sidebar{ transform:translateX(0); box-shadow:0 12px 40px rgba(0,0,0,.25) } /* Em mobile, ignora estado collapsed do desktop — drawer mostra sempre o layout completo */ .dash-wrap.sidebar-collapsed .sidebar{ /* reseta tudo que o desktop-collapsed faz */ width:260px } .dash-wrap.sidebar-collapsed .sidebar-brand-name, .dash-wrap.sidebar-collapsed .sidebar-brand-sub, .dash-wrap.sidebar-collapsed .client-name, .dash-wrap.sidebar-collapsed .client-plan, .dash-wrap.sidebar-collapsed .sidebar-section-label, .dash-wrap.sidebar-collapsed .sidebar-client > div:not(.client-av){display:block} .dash-wrap.sidebar-collapsed .sidebar-nav .s-item{ justify-content:flex-start !important; padding:.6rem .75rem !important; font-size:.85rem !important; gap:.5rem !important } .dash-wrap.sidebar-collapsed .sidebar-toggle{display:none} /* Scrim só aparece em mobile quando drawer está aberto */ .dash-wrap.mobile-sidebar-open .mobile-scrim{display:block} /* Botão hamburger só aparece em mobile */ .mobile-menu-btn{ display:inline-flex !important;align-items:center;justify-content:center; background:transparent;border:1px solid var(--gray-border); width:36px;height:36px;border-radius:8px; font-size:1.1rem;cursor:pointer;color:var(--text); flex-shrink:0 } .topbar{padding:.7rem .9rem;gap:.6rem;overflow:hidden} .topbar-title{min-width:0;flex:1;overflow:hidden} .topbar-title h1{font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .topbar-title p{display:none} .topbar-actions{flex-shrink:0} .topbar-actions .btn-sm{font-size:.7rem;padding:.3rem .55rem} /* Em mobile, só o último item do topbar (link Site) aparece — libera espaço pro título */ .topbar-actions > *:not(:last-child){display:none !important} /* Subtítulos / textos secundários dentro de cards podem quebrar normalmente */ .d-card .page-subtitle, .d-card p{white-space:normal !important} /* Containment global mobile: nada estoura o viewport */ .dash-body, .dash-content, .d-card, .m-card{min-width:0;max-width:100%} .dash-content{padding:.75rem;overflow-x:hidden} /* Grids compactos em 2 colunas (ou 1 quando muito apertado) */ .metrics-row{grid-template-columns:repeat(2,1fr) !important;gap:.6rem} .stats-row{grid-template-columns:repeat(2,1fr) !important;gap:.6rem} .rep-summary{grid-template-columns:1fr} .dash-grid{grid-template-columns:1fr !important} .tom-options{grid-template-columns:repeat(2,1fr) !important} .config-page{max-width:100%} .d-card{padding:1rem} /* Tabelas: scroll horizontal interno (já wrappadas em .table-wrap) */ .d-card table{min-width:520px} .d-card td button{white-space:nowrap} /* Exceção: a agenda esconde tudo menos Nome+Ações no mobile, então os 520px só criavam rolagem lateral e jogavam o botão de editar pra fora do card. Precisa vir DEPOIS da regra genérica — mesma especificidade perde por cascata, e a genérica mora aqui em cima. */ .d-card table.ag-tabela{min-width:0} /* Sobravam 9px de rolagem interna: o padding de 1rem por lado das células não cabe em 317px úteis. */ .ag-tabela th,.ag-tabela td{padding-left:.6rem;padding-right:.6rem} } /* Em desktop, hamburger e scrim sempre escondidos */ .mobile-menu-btn{display:none} .mobile-scrim{display:none;position:fixed;inset:0;background:var(--overlay);z-index:150;animation:fadeIn .15s} /* Login responsivo */ @media (max-width: 900px) { .login-wrap{grid-template-columns:1fr} .login-left{display:none} } /* ═══════ WIZARD MODAL ═══════ */ .wiz-overlay{position:fixed;inset:0;background:var(--overlay);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:1rem;animation:fadeIn .2s} .wiz-modal{background:var(--white);border-radius:16px;box-shadow:0 25px 60px rgba(0,0,0,.3);max-width:560px;width:100%;max-height:90vh;overflow-y:auto;padding:2rem;animation:slideUp .25s} .wiz-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1.25rem} .wiz-head-icon{font-size:1.75rem} .wiz-head h3{font-size:1.15rem;font-weight:700;color:var(--text);margin:0} .wiz-head p{font-size:.85rem;color:var(--text2);margin:.2rem 0 0} .wiz-close{margin-left:auto;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--text3);padding:.25rem .5rem;border-radius:6px} .wiz-close:hover{background:var(--gray-bg);color:var(--text)} .wiz-progress{height:6px;background:var(--gray-border);border-radius:3px;margin:1rem 0 1.5rem;overflow:hidden} .wiz-progress-bar{height:100%;background:var(--lia);border-radius:3px;transition:width .3s} .wiz-step{min-height:200px} .wiz-step h4{font-size:1rem;font-weight:700;color:var(--text);margin:0 0 .5rem} .wiz-step .hint{font-size:.8rem;color:var(--text2);margin-bottom:1rem} .wiz-options{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem} .wiz-option{padding:.85rem 1rem;border:1.5px solid var(--gray-border);border-radius:10px;background:var(--white);cursor:pointer;text-align:left;font-size:.9rem;color:var(--text);transition:all .15s} .wiz-option:hover{border-color:var(--on-lia-tint);background:var(--lia-light)} .wiz-option.selected{border-color:var(--on-lia-tint);background:var(--lia-light);font-weight:600} .wiz-option-title{font-weight:600;margin-bottom:.15rem} .wiz-option-desc{font-size:.75rem;color:var(--text2);font-weight:400} .wiz-input{width:100%;padding:.75rem 1rem;border:1.5px solid var(--gray-border);border-radius:10px;font-size:.9rem;font-family:inherit;transition:border .15s} .wiz-input:focus{outline:none;border-color:var(--lia)} .wiz-textarea{min-height:90px;resize:vertical} .wiz-nav{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1.5rem} .wiz-nav .btn{min-width:100px} .wiz-back{background:transparent;border:1px solid var(--gray-border);color:var(--text2)} .wiz-generating{text-align:center;padding:2rem 1rem} .wiz-generating .spinner{width:48px;height:48px;border:4px solid var(--gray-border);border-top-color:var(--lia);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem} .wiz-preview{background:var(--lia-light);border:1px solid var(--lia-border);border-radius:10px;padding:1rem;margin:1rem 0} .wiz-preview-label{font-size:.7rem;font-weight:700;color:var(--lia);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.35rem} .wiz-preview-content{font-size:.85rem;color:var(--text);white-space:pre-wrap;line-height:1.55} .wiz-mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1rem} .wiz-mode-card{border:1.5px solid var(--gray-border);border-radius:12px;padding:1.25rem;cursor:pointer;transition:all .15s;text-align:center} .wiz-mode-card:hover{border-color:var(--on-lia-tint);background:var(--lia-light)} .wiz-mode-card .emoji{font-size:2rem;margin-bottom:.5rem} .wiz-mode-card .title{font-size:.95rem;font-weight:700;margin-bottom:.2rem} .wiz-mode-card .desc{font-size:.75rem;color:var(--text2);line-height:1.4} @keyframes fadeIn{from{opacity:0}to{opacity:1}} @keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}} @keyframes spin{to{transform:rotate(360deg)}} @media (max-width: 600px) { .wiz-mode-picker{grid-template-columns:1fr} .wiz-modal{padding:1.5rem} } /* Fontes de referência (aba Anexos) */ .refs-add{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center} .refs-in-label{flex:1 1 210px;min-width:0} .refs-in-url{flex:2 1 300px;min-width:0} .refs-add input{padding:.55rem .7rem;border:1px solid var(--gray-border);border-radius:8px;background:var(--white);color:var(--text);font-size:.85rem} .refs-list{display:flex;flex-direction:column;gap:.6rem;margin-top:1rem} .refs-item{border:1px solid var(--gray-border);border-radius:10px;padding:.75rem .9rem;background:var(--white)} .refs-item-head{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-bottom:.25rem} .refs-badge{font-size:.7rem;color:var(--text3);background:var(--gray-light);padding:.15rem .5rem;border-radius:999px} .refs-badge-err{color:var(--on-danger);background:var(--surface-danger)} .refs-url{font-size:.75rem;color:var(--lia);word-break:break-all;text-decoration:none} .refs-preview{font-size:.75rem;color:var(--text3);margin-top:.4rem;line-height:1.4;max-height:3.2em;overflow:hidden} .refs-actions{display:flex;gap:.4rem;margin-top:.6rem;flex-wrap:wrap} @media(max-width:640px){ .refs-add{flex-direction:column;align-items:stretch} .refs-in-label,.refs-in-url{flex:1 1 auto;width:100%} .refs-actions .btn{flex:1 1 auto} } /* ── Toast ────────────────────────────────────────────────────────────────── Substitui o `alert()` nativo, que bloqueia a aba inteira. Ancorado no canto superior direito e NÃO sobre a última linha da tabela — a régua avisa que toast em cima de conteúdo é o erro clássico deste componente. */ #toast-root{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column; gap:8px;max-width:min(380px,calc(100vw - 32px));pointer-events:none} .toast{pointer-events:auto;background:var(--white);color:var(--text);border:1px solid var(--gray-border); border-left:4px solid var(--gray);border-radius:10px;padding:12px 14px;font-size:.82rem;line-height:1.45; box-shadow:var(--shadow-lg);opacity:0;transform:translateX(12px);transition:opacity .2s,transform .2s; white-space:pre-wrap;word-break:break-word;cursor:pointer} .toast.show{opacity:1;transform:none} .toast.info{border-left-color:var(--lia)} .toast.success{border-left-color:var(--green-fill)} .toast.error{border-left-color:var(--red)} @media (max-width:520px){ /* No celular a coluna estreita faz o toast tapar o cabeçalho: encosta embaixo. */ #toast-root{top:auto;bottom:16px;left:16px;right:16px;max-width:none} .toast{transform:translateY(12px)} } /* Quando a sidebar é escura (dark E misto), o que mora DENTRO dela com cor clara cravada tem que virar junto. No MISTO isso não é detalhe: o resto da página segue no :root claro, então --purple continua sendo o tom de texto-sobre-branco (#7C3AED) e o bloco pastel do master continua sendo #F5F3FF — um retângulo quase branco colado na sidebar navy, com rótulo roxo escuro em cima. */ :root[data-theme="dark"] .sidebar-client.master, :root[data-theme="misto"] .sidebar-client.master{ background:color-mix(in srgb, var(--purple-fill) 24%, transparent); border-color:color-mix(in srgb, var(--purple-fill) 42%, transparent); } :root[data-theme="dark"] .sidebar-client.master .client-plan, :root[data-theme="misto"] .sidebar-client.master .client-plan{color:#d8b4fe} /* ═══════════════════════════════════════════════════════════════════════════ MARCA G|A — o segundo eixo, independente do tema. Isto vinha de um