/* MXC Comercial - estilo da tela (saiu do index.php em 28/10/2026 para o navegador guardar em cache). */

/* ==========================================================
   MXC COMERCIAL - ESBOCO v4 (prototipo, sem banco de dados)
   ========================================================== */
:root{
  --ms:#3F1848; --h8m:#B07620; --ge:#5799C9; --vit:#C4D400;
  --ok:#16A34A; --warn:#D97706; --bad:#DC2626;
  --font:'Inter',-apple-system,system-ui,sans-serif;
  --t:170ms; --e:cubic-bezier(.32,.72,.35,1);
}
body[data-t="light"]{
  --bg:#F7F8FA;--surface:#FFF;--surface-2:#F1F3F6;--surface-3:#E7EBF0;
  --line:#E2E6EC;--line-2:#D2D9E2;--tx:#111827;--tx-2:#4B5563;--tx-3:#5C6673;
  /* mesmas cores, versao escura o bastante para TEXTO pequeno (WCAG AA 4.5:1).
     As de preenchimento continuam as originais, para a identidade nao mudar. */
  --ok-tx:#0E6E32;--ok-bg:#107E38;--warn-tx:#8A4D04;--bad-tx:#A81717;--ge-tx:#2D6690;--pu-tx:#6B3D95;
  --accent:#111827;--accent-tx:#FFF;--shadow:0 1px 2px rgba(16,24,40,.05);
  --blk-lunch:#FDF6E9;--blk-lunch-l:#F0DFBC;--blk-off:#EEF1F5;--blk-off-l:#DFE4EB;--blk-wk:#F5F7F9;
}
body[data-t="dark"]{
  --bg:#0E1116;--surface:#161A21;--surface-2:#1C212A;--surface-3:#252B36;
  --line:#252B35;--line-2:#333B48;--tx:#E8EBF0;--tx-2:#A0A8B6;--tx-3:#8C95A4;
  --ok-tx:#3ED77A;--ok-bg:#107E38;--warn-tx:#F0A33C;--bad-tx:#EC7373;--ge-tx:#7FBCE8;--pu-tx:#B98BE0;
  --accent:#E8EBF0;--accent-tx:#0E1116;--shadow:none;
  --blk-lunch:#231B0E;--blk-lunch-l:#3D2F16;--blk-off:#191D24;--blk-off-l:#242A33;--blk-wk:#14181E;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Foco de teclado visivel: sem isso, quem navega por Tab nao sabe onde esta.
   :focus-visible so aparece no teclado, entao o mouse continua limpo. */
:focus-visible{outline:2px solid var(--ge);outline-offset:2px;border-radius:6px}
body[data-t="dark"] :focus-visible{outline-color:#7FBCE8}
body{font-family:var(--font);background:var(--bg);color:var(--tx);font-size:13px;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;transition:background var(--t),border-color var(--t),transform 90ms,opacity var(--t)}
button:active:not(:disabled){transform:scale(.975)}
input,select,textarea{font-family:inherit;color:var(--tx);transition:border-color var(--t)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ LOGIN + FUNDO ANIMADO ============ */
#lock{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;
  background:#060a10;overflow:hidden;transition:opacity 340ms var(--e)}
#lock.off{opacity:0;pointer-events:none;visibility:hidden}
.bgl{position:absolute;inset:0;pointer-events:none}
/* arte oficial do grupo - o gradiente abaixo e a reserva caso o arquivo nao esteja na pasta */
.bg-base{inset:-3%;position:absolute;
  background-color:#080c12;
  background-image:url('../mxc-login-bg.webp'),
   radial-gradient(120% 90% at 12% 8%, #101a26 0%, transparent 55%),
   radial-gradient(100% 80% at 88% 12%, #0d1a1e 0%, transparent 55%),
   linear-gradient(150deg,#070b11 0%,#0a1017 45%,#060a10 100%);
  background-size:cover,auto,auto,auto;
  background-position:center;background-repeat:no-repeat;
  animation:breathe 22s ease-in-out infinite alternate;will-change:transform}
@keyframes breathe{from{transform:scale(1.01)}to{transform:scale(1.05)}}
/* brilho suave nas 4 cores, fraco o bastante para nao apagar as logos */
.bg-glow{position:absolute;inset:-18%;filter:blur(64px);mix-blend-mode:screen;
  animation:glowPulse 15s ease-in-out infinite alternate;
  background:
   radial-gradient(26% 24% at 16% 20%, rgba(196,212,0,.16) 0%, transparent 70%),
   radial-gradient(24% 22% at 84% 18%, rgba(87,153,201,.18) 0%, transparent 70%),
   radial-gradient(28% 26% at 20% 82%, rgba(176,118,32,.15) 0%, transparent 70%),
   radial-gradient(30% 28% at 82% 80%, rgba(45,190,90,.15) 0%, transparent 70%)}
@keyframes glowPulse{from{opacity:.35;transform:translate3d(0,0,0)}to{opacity:.75;transform:translate3d(0,-12px,0)}}
.bg-sweep{position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.04) 50%,transparent 60%);
  transform:translateX(-60%);animation:sweep 11s linear infinite}
@keyframes sweep{to{transform:translateX(60%)}}
.bg-dots{display:none}
/* escurece so o centro, para o cartao de senha ler bem sem cobrir as logos dos cantos */
.bg-vig{position:absolute;inset:0;background:
  radial-gradient(46% 52% at 50% 48%, rgba(4,7,11,.82) 0%, rgba(4,7,11,.46) 58%, transparent 78%)}
.lk{position:relative;z-index:2;width:100%;max-width:330px;text-align:center;color:#E8EBF0;
  animation:rise 520ms var(--e) both;
  background:rgba(8,11,16,.5);backdrop-filter:blur(14px) saturate(1.1);
  border:1px solid rgba(255,255,255,.09);border-radius:20px;padding:30px 26px 24px;
  box-shadow:0 26px 70px rgba(0,0,0,.62)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lk .cube{width:48px;height:48px;border-radius:13px;background:#fff;color:#0E1116;display:grid;place-items:center;
  font-weight:800;font-size:14px;margin:0 auto 18px;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.lk h1{font-size:15.5px;font-weight:700}
.lk .sb{font-size:11px;color:#7C8798;letter-spacing:.17em;text-transform:uppercase;margin-top:5px}
.lk form{margin-top:26px}
.lk .lab{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#93A0B2;margin-bottom:9px;text-align:left}
.pinrow{display:flex;gap:8px}
.lk input{flex:1;background:rgba(14,18,24,.72);border:1px solid #2C3340;border-radius:11px;padding:15px 16px;
  font-size:20px;font-weight:700;letter-spacing:.42em;color:#fff;text-align:center;outline:none;backdrop-filter:blur(8px)}
.lk input:focus{border-color:#5799C9;box-shadow:0 0 0 4px rgba(87,153,201,.16)}
.lk input.err{border-color:var(--bad);animation:shake .32s}
@keyframes shake{20%{transform:translateX(-6px)}60%{transform:translateX(6px)}}
.lk .go{width:54px;border-radius:11px;background:#fff;color:#0E1116;font-size:19px;font-weight:700}
.lk .msg{font-size:11.5px;color:#FF8A80;margin-top:10px;min-height:16px;text-align:left}
.lk .demo{margin-top:20px;border-top:1px solid rgba(255,255,255,.09);padding-top:14px;font-size:10.5px;
  color:#7E8899;line-height:1.7;text-align:center}

/* ============ TOPO ============ */
header{position:sticky;top:0;z-index:50;background:var(--surface);border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:14px;padding:0 18px;height:54px}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;white-space:nowrap;line-height:1.15}
.brand .cube{width:22px;height:22px;border-radius:6px;background:var(--accent);color:var(--accent-tx);display:grid;place-items:center;font-size:9.5px;font-weight:800}
.brand small{font-weight:500;color:var(--tx-3);font-size:10px;letter-spacing:.13em;text-transform:uppercase}
nav{display:flex;gap:2px;margin-left:8px}
nav button{padding:7px 13px;min-height:32px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--tx-2);position:relative}
nav button:hover{background:var(--surface-2)}
nav button.on{background:var(--surface-3);color:var(--tx);font-weight:600}
.spacer{flex:1}
.who{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:9px;padding:5px 6px 5px 9px}
.who .lbl{color:var(--tx-3);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase}
.who .nm{font-weight:700;font-size:12.5px}
.who .av{width:26px;height:26px;border-radius:7px;color:#fff;display:grid;place-items:center;font-size:10px;font-weight:800}
.iconbtn{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;border:1px solid var(--line-2);background:var(--surface-2);font-size:14px}
.iconbtn:hover{background:var(--surface-3)}

/* ==========================================================
   HEADER - reorganizacao (03/09/2026)
   Hierarquia: identidade -> navegacao -> operacional -> usuario.
   Menos caixas, mais espaco e alinhamento. Nada aqui sai do header.
   ========================================================== */
header{gap:0}
.hsep{width:1px;height:26px;background:var(--line);margin:0 16px;flex:none}
.brand{gap:11px}
.anobadge{margin-left:10px}

/* navegacao: a ORDEM VISUAL e do CSS. No DOM a Agenda continua sendo o primeiro
   botao, porque o mobile.js faz querySelector('header nav button') e destaca o
   primeiro que encontrar. Mudar a ordem no DOM desalinharia o destaque no celular. */
header nav{display:flex;align-items:center;gap:2px}
header nav #navcrm{order:1} header nav #navage{order:2} header nav #navrel{order:3}
header nav #navcad{order:4} header nav #navsim{order:5}
header nav button{background:transparent;border:0;padding:8px 14px;border-radius:8px;
  font-size:12.5px;font-weight:500;color:var(--tx-3);position:relative;transition:color var(--t),background var(--t)}
header nav button:hover{background:transparent;color:var(--tx-2)}
header nav button.on{background:var(--surface-2);color:var(--tx);font-weight:600}
/* a linha dourada do item ativo, discreta */
header nav button.on::after{content:'';position:absolute;left:14px;right:14px;bottom:-1px;
  height:2px;border-radius:2px;background:var(--gold,#F5C94B)}

/* area operacional: Pos-venda + Dashboards */
#painelbtns{display:inline-flex;align-items:center;gap:6px;position:relative}
#painelbtns .mbtn{border-color:transparent;background:transparent;color:var(--tx-2)}
#painelbtns .mbtn:hover{background:var(--surface-2);color:var(--tx);transform:none}
.hddp{position:absolute;top:calc(100% + 7px);right:0;z-index:60;min-width:210px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:10px;
  padding:5px;box-shadow:0 14px 34px rgba(0,0,0,.34)}
.hddp a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:7px;
  font-size:12.5px;color:var(--tx-2);text-decoration:none;white-space:nowrap}
.hddp a:hover{background:var(--surface-2);color:var(--tx)}
.ca{font-size:9px;opacity:.7;margin-left:2px}

/* usuario */
.hu{position:relative;display:flex;align-items:center}
.hub{display:flex;align-items:center;gap:9px;background:transparent;border:0;
  padding:5px 9px 5px 5px;border-radius:9px;font-family:inherit;cursor:pointer;color:var(--tx)}
.hub:hover{background:var(--surface-2)}
.hub .nm{font-weight:700;font-size:12.5px;letter-spacing:.01em}
.hub .av{width:28px;height:28px;border-radius:8px;color:#fff;display:grid;place-items:center;
  font-size:10.5px;font-weight:800}
.hup{position:absolute;top:calc(100% + 7px);right:0;z-index:60;min-width:180px;
  background:var(--surface);border:1px solid var(--line-2);border-radius:10px;
  padding:5px;box-shadow:0 14px 34px rgba(0,0,0,.34)}
.hup button{display:block;width:100%;text-align:left;padding:9px 11px;border-radius:7px;
  background:transparent;border:0;font-family:inherit;font-size:12.5px;color:var(--tx-2);cursor:pointer}
.hup button:hover{background:var(--surface-2);color:var(--tx)}
.hup .sai{color:var(--bad-tx)}
header .iconbtn{border-color:transparent;background:transparent;margin-left:4px}
header .iconbtn:hover{background:var(--surface-2)}

@media(max-width:1200px){
  .hsep{margin:0 9px}
  header nav button{padding:8px 10px;font-size:12px}
  header nav button.on::after{left:10px;right:10px}
  #painelbtns .mbtn{padding:7px 9px}
  .hub .nm{display:none}
}
.mbtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface-2);
  border-radius:9px;padding:7px 11px;font-size:11.5px;font-weight:600;text-decoration:none;color:var(--tx)}
.mbtn:hover{background:var(--surface-3);transform:translateY(-1px)}
.wrap{padding:16px 18px 46px}
/* 28/10 - o CRM fica fora do .wrap: no computador ficava sem margem lateral, e o .wrap vazio
   deixava uma faixa de ~60px acima da barra. Mesma margem das outras telas; celular nao muda. */
@media (min-width:861px){
  body[data-tela="crm"] .wrap{padding:0}
  #v-crm{padding:16px 18px 46px}
}
.view{display:none}
.view.on{display:block;animation:fadein 260ms var(--e) both}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ============ BARRA ============ */
.bar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.wknav{display:flex;align-items:center;gap:3px;background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:4px;box-shadow:var(--shadow)}
.wknav button{width:30px;height:30px;border-radius:6px;color:var(--tx-2);font-size:14px}
.wknav button:hover{background:var(--surface-2)}
.wknav .lab{padding:0 10px;font-weight:600;font-size:12.5px;white-space:nowrap}
.btn{border:1px solid var(--line-2);background:var(--surface);border-radius:9px;padding:8px 13px;font-size:12px;font-weight:500;box-shadow:var(--shadow);min-height:34px;color:var(--tx);text-decoration:none}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);color:var(--accent-tx);border-color:var(--accent);font-weight:600}
.btn.on{background:var(--surface-3);font-weight:600}
.btn:disabled{opacity:.4;cursor:not-allowed}
.chips{display:flex;gap:5px;align-items:center;flex-wrap:wrap}
.chips .t{font-size:10px;color:var(--tx-3);letter-spacing:.07em;text-transform:uppercase}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);border-radius:20px;padding:5px 11px;font-size:11.5px;font-weight:500;min-height:32px}
.chip .d{width:8px;height:8px;border-radius:50%}
.chip.off{opacity:.35}
/* quadro por empresa (05/10): abas no topo do CRM; a cor e a da empresa */
.crmabas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
/* L1 (09/10): barra do CRM, gaveta de filtros, Modo eu, menu Mais, etiquetas */
.crmbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.crmbar .crmabas{margin:0}
/* ESTEIRAS, passo 1 (27/10): uma aba por esteira acima do quadro */
.crmest{margin:0 0 8px}
.crmest button{font-size:13.5px;min-height:40px;padding:7px 15px}
.crmestmais{font-size:12.5px;color:var(--tx-2);margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crmestmais button{background:none;border:none;padding:0;color:var(--accent);font:inherit;font-weight:600;cursor:pointer;text-decoration:underline}
.crmest[hidden],.crmestmais[hidden]{display:none}
/* VISAO GERAL (27/10, passo 2a): KPIs e metas */
.kpig[hidden]{display:none}
.kpig{display:flex;flex-direction:column;gap:16px;padding-bottom:30px}
.kpig .kbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.kpig .kres{display:flex;flex-wrap:wrap;gap:10px}
.kpig .kres div{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:8px 13px;font-size:12.5px;color:var(--tx-2)}
.kpig .kres b{font-size:17px;color:var(--tx)}
/* 29/10 (bloco C): os contadores filtram os cartoes (clique de novo ou "Mostrar todos" tira o filtro) */
.kpig .kfil{align-items:center}
.kpig .kfil button[aria-pressed]{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;
  padding:8px 13px;font:inherit;font-size:12.5px;color:var(--tx-2);cursor:pointer;transition:background var(--t) var(--e),border-color var(--t) var(--e)}
.kpig .kfil button[aria-pressed]:hover{background:var(--surface-2)}
.kpig .kfil button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-tx)}
.kpig .kfil button[aria-pressed="true"] b{color:var(--accent-tx)}
.kpig .kfil button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.kpig h3{margin:6px 0 0;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-3)}
/* 29/10: cada area numa caixa (como as colunas do quadro); a caixa cresce na proporcao dos cartoes que tem,
   e as que cabem dividem a linha, entao nao sobra coluna vazia com cara de cartao faltando */
.kpig .kgrps{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}
.kpig .kgrp{flex:var(--n,1) 1 calc(var(--n,1) * 290px);min-width:0;max-width:100%;display:flex;flex-direction:column;gap:10px;
  background:color-mix(in srgb,var(--surface-2) 75%,transparent);border:1px solid var(--line);border-radius:14px;padding:12px 14px 14px}
.kpig .kgrp.um{max-width:560px}
.kpig .kgrp>h3{margin:0;color:var(--tx-2)}
.kpig .kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:12px}
/* cartao que sobra sozinho na ultima linha ocupa a linha inteira (o vazio ao lado parecia cartao faltando).
   Colunas da grade acima: k colunas a partir de 282k-12 px de largura da caixa */
.kpig .kgrp{container-type:inline-size}
/* 29/10 - Configuracoes (bloco E): indice em caixas por grupo e uma tela por assunto.
   Caixas e cartoes em flex que cresce: a ultima linha sempre se completa, sem vazio ao lado */
/* 29/10 - H responsivo (Agenda e CRM, computador). A semana inteira cabe do notebook ao monitor largo: as colunas
   dividem a largura (sabado e domingo mais estreitos), o cartao de reuniao quebra linha em vez de empurrar a coluna e
   o painel de pendencias acompanha a tela; ate 1180px ele desce para baixo da grade. As colunas do quadro do CRM
   acompanham a largura (mais colunas a vista em tela grande) */
@media (min-width:861px){
  #grade{table-layout:fixed;min-width:calc(148px + 5 * 104px + 2 * 64px)}
  #grade th.hcol{width:44px}
  #grade th.ccol{width:104px}
  #grade th.day.fds{width:7%}
  #grade td.slot{min-width:0;overflow:hidden}
  #grade td.ccell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #grade td.slot .blk{overflow-wrap:normal;word-break:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-left:4px;padding-right:4px}
  #grade .ap{min-width:0;overflow:hidden}
  #grade .ap .nm{overflow-wrap:anywhere}
  #grade .ap .ft>*{min-width:0;max-width:100%}
  #grade .ap .ft>*:not(.quem){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #v-crm .crmcol:not(.recolhida){flex:0 0 clamp(232px,16.5vw,300px);min-width:0}
}
  /* tabela larga dentro de cartao rola dentro do proprio cartao, nunca a pagina */
@media (min-width:861px){ #v-config .card, #v-rel .card, #v-inicio .ini-card{overflow-x:auto} }
@media (min-width:861px) and (max-width:1180px){
  #v-agenda .split{flex-direction:column}
  #v-agenda .side{width:100%;max-height:none}
}
#v-config [hidden],#reltabs[hidden]{display:none!important}
/* 29/10 - Pos-venda dentro do sistema (bloco F1b): o quadro cresce com a pagina (pvCarregou acerta a altura) */
#pv-frame{display:block;width:100%;min-height:420px;border:0;background:transparent}
#pv-frame[hidden],#pv-aviso[hidden]{display:none!important}
/* 29/10 - Painel ao vivo e Ferramentas (blocos F2 e F3): quadro da altura da tela, a pagina rola por dentro */
.quadro{display:block;width:100%;height:calc(100vh - 56px - 44px);min-height:480px;border:0;border-radius:12px;background:transparent}
.quadro[hidden],#fr-ind[hidden],#fr-volta[hidden]{display:none!important}
#v-ferramentas .cfgvolta{display:inline-flex;margin:0 0 12px;font-size:12.5px}
#fr-ind{display:flex;flex-wrap:wrap;gap:14px}
/* 29/10 - Ver como (bloco I): faixa fixa enquanto a administracao olha o sistema como outra pessoa */
#vc-faixa{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:150;display:flex;align-items:center;gap:14px;
  max-width:calc(100vw - 32px);padding:10px 12px 10px 16px;border-radius:999px;background:#8A4D04;color:#fff;font-size:13px;
  box-shadow:0 10px 30px rgba(0,0,0,.28)}
#vc-faixa b{font-weight:700}
#vc-faixa button{border:0;border-radius:999px;background:#fff;color:#8A4D04;font-weight:700;font-size:12.5px;padding:7px 13px;cursor:pointer;white-space:nowrap}
#vc-faixa button:focus-visible{outline:2px solid #fff;outline-offset:2px}
body.vercomo .fab{bottom:calc(76px + env(safe-area-inset-bottom))}
@media (max-width:860px){ #vc-faixa{bottom:calc(76px + env(safe-area-inset-bottom));font-size:12px} }   /* no celular, acima da barra de baixo */
/* 29/10 - Auditoria (bloco E2): o que mudou em cada gravacao, dentro da linha do Historico */
.hmud{margin-top:6px;font-size:12px}
.hmud summary{cursor:pointer;color:var(--ge-tx);font-weight:600;width:max-content}
.hmudb{margin:6px 0 0;padding:7px 10px;border-left:2px solid var(--line-2);background:var(--surface-2);border-radius:0 8px 8px 0}
.hmudl{margin-top:3px;overflow-wrap:anywhere}
.hmudl .ant{color:var(--bad-tx);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--bad) 50%,transparent)}
.hmudl .dep{color:var(--ok-tx);font-weight:600}
/* 29/10 - Relatorios (bloco D): indice em caixas e uma tela por relatorio; exportar; folha de impressao (PDF) */
#v-rel [hidden],#rel-exp-menu[hidden]{display:none!important}
#rel-ind{display:flex;flex-wrap:wrap;gap:14px}
.relcab{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.relcab .btxt{font-size:12.5px}
.relexp{position:relative}
.relexp .crmmenu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:190px}
.relp{display:flex;flex-direction:column;gap:14px}
.relp>.card{margin:0!important}
.relper{margin:0 0 14px}
.relprint{display:none}
@media print{
  @page{margin:12mm}
  body{background:#fff!important}
  #n2-topo,#n2-faixa,#n2-tour,body>header,#tabbar,.tabbar,.fab,#rel-cab,#rel-ind,.relper,.relp .bar,#toast,#mask,#carregando,.n2-pop{display:none!important}
  body.n2 .wrap{margin:0!important;padding:0!important}
  .relprint{display:flex!important;align-items:center;gap:14px;border-bottom:1px solid #ccc;padding:0 0 10px;margin:0 0 14px;color:#111}
  .relprint img{height:34px;width:auto}
  .relprint b{display:block;font-size:16px}
  .relprint .mini{margin-left:auto;text-align:right;color:#555}
  .relprint:empty{display:none!important}
  /* papel e branco: o tema escuro imprime com as cores do claro; barras e graficos saem com cor */
  body[data-t="dark"]{--bg:#fff;--surface:#fff;--surface-2:#F1F3F6;--surface-3:#E7EBF0;--line:#D9DEE5;--line-2:#CFD6DF;--tx:#111827;--tx-2:#4B5563;--tx-3:#5C6673}
  #v-rel{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .prevg{overflow:visible!important;flex-wrap:wrap}
  .tbox{overflow:visible!important}
  #v-rel .relp button,#v-rel .relp .btn,#v-rel .relp .acbtn,#prevb{display:none!important}
  .card{break-inside:auto;box-shadow:none!important;border-color:#ccc!important}
  .card h3,tr{break-inside:avoid}
  details.prdet>*{display:block}
}
#v-config{max-width:none}   /* 29/10: largura toda */
#v-config .cfgp{display:flex;flex-direction:column;gap:14px}
#v-config .cfgvolta{display:inline-flex;margin:0 0 12px;font-size:12.5px}
#cfg-ind{display:flex;flex-wrap:wrap;gap:14px;align-items:stretch}
.cfggrp{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:10px;
  background:color-mix(in srgb,var(--surface-2) 75%,transparent);border:1px solid var(--line);border-radius:14px;padding:12px 14px 14px}
.cfggrp>h3{margin:0;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--tx-2)}
.cfggrade{display:flex;flex-wrap:wrap;gap:10px}
.cfgcard{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;gap:4px;padding:13px 15px;border-radius:12px;
  background:var(--surface);border:1px solid var(--line-2);color:var(--tx);text-decoration:none}
.cfgcard:hover{border-color:var(--tx-3)}
.cfgcard:focus-visible{outline:2px solid var(--tx);outline-offset:2px}
.cfgcard b{font-size:13.5px;font-weight:700}
.cfgcard span{font-size:12px;color:var(--tx-2);line-height:1.45}
@container (min-width:552px) and (max-width:833.98px){ .kpig .kgrid>.kc:nth-child(2n+1):last-child{grid-column:1/-1} }
@container (min-width:834px) and (max-width:1115.98px){ .kpig .kgrid>.kc:nth-child(3n+1):last-child{grid-column:1/-1} }
@container (min-width:1116px) and (max-width:1397.98px){ .kpig .kgrid>.kc:nth-child(4n+1):last-child{grid-column:1/-1} }
.kpig .kc{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:9px;min-width:0}
.kpig .kt{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.kpig .kn{font-weight:700;font-size:13.5px}
.kpig .kd{font-size:11.5px;color:var(--tx-3);margin-top:2px}
.kpig .ks,.kpside .ks{flex:none;font-size:11.5px;font-weight:700;border-radius:99px;padding:3px 9px;white-space:nowrap}
.kpig .ks.ok,.kpside .ks.ok{color:var(--ok-tx);background:color-mix(in srgb,var(--ok) 14%,transparent)}
.kpig .ks.perto,.kpside .ks.perto{color:var(--warn-tx);background:color-mix(in srgb,var(--warn) 14%,transparent)}
.kpig .ks.abaixo,.kpside .ks.abaixo{color:var(--bad-tx);background:color-mix(in srgb,var(--bad) 14%,transparent)}
.kpig .ks.sem,.kpside .ks.sem{color:var(--tx-3);background:var(--surface-2)}
.kpig .kv{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.kpig .kv b{font-size:25px;line-height:1.1}
.kpig .km{font-size:12px;color:var(--tx-2)}
.kpig .kbarra{height:6px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.kpig .kbarra i{display:block;height:100%}
.kpig .kp{font-size:11.5px;color:var(--tx-3)}
/* 29/10 (bloco C): o i do indicador, o rodape (Faltam X, aproximado, Pessoas) e o painel por pessoa */
.kpig .kt{align-items:center}
.kpig .kt .kn{flex:1;min-width:0}
.kinfo{flex:none;width:26px;height:26px;display:inline-grid;place-items:center;border-radius:7px;color:var(--tx-3);background:none;border:0;cursor:pointer}
.kinfo svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kinfo:hover,.kinfo[aria-expanded="true"]{background:var(--surface-2);color:var(--tx)}
.kinfo:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.kpop{position:fixed;z-index:160;width:min(320px,calc(100vw - 16px));background:var(--surface);border:1px solid var(--line-2);border-radius:12px;
  box-shadow:0 12px 32px rgba(16,24,40,.18);padding:12px 14px;font-size:12.5px;line-height:1.5;color:var(--tx-2)}
.kpop>b{color:var(--tx);font-size:13px}
.kpop p{margin:6px 0 0}
.kpop p b{color:var(--tx)}
.kpig .kft{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px}
.kpig .kfalta{font-weight:600;color:var(--tx-2)}
.kpig .kpill{font-size:11px;font-weight:600;border-radius:99px;padding:2px 8px;background:var(--surface-2);color:var(--tx-2);white-space:nowrap}
.kpig .kpes{margin-left:auto;font-size:12px}
.kpsub{font-size:12px;color:var(--tx-3);margin-top:2px}
.kplista{display:flex;flex-direction:column;padding-top:6px;padding-bottom:6px}
.kprow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.kprow:first-child{border-top:0}
.kprow .kpn{min-width:0;font-weight:600;color:var(--tx);overflow-wrap:anywhere}
.kprow .kpn small{display:block;font-weight:500;font-size:11.5px;color:var(--tx-3)}
.kprow b{font-variant-numeric:tabular-nums}
@media (min-width:861px){
  #mask:has(.sheet.lado){padding:0;justify-content:flex-end;align-items:stretch}
  .sheet.lado{max-width:min(440px,100vw);border-radius:0;border-width:0 0 0 1px;display:flex;flex-direction:column;animation:ladoin 220ms var(--e) both}
  .sheet.lado>.sb2{flex:1 1 auto;overflow-y:auto}
}
@keyframes ladoin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.kpig .kl{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:7px}
.kpig .kl button,.kpig .kl div.kr{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;background:none;border:none;padding:4px 2px;font:inherit;font-size:12.5px;color:var(--tx);text-align:left}
.kpig .kl button{cursor:pointer;border-radius:6px}
.kpig .kl button:hover{background:var(--surface-2)}
.kpig .kl .tm{font-size:11.5px;color:var(--tx-3)}
.kpig .kseq{border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 8%,transparent);border-radius:9px;padding:9px 11px;font-size:12px;display:flex;flex-direction:column;gap:8px}
/* 28/10 - botao de texto. Os links-botao usavam a classe .lk, que e a CAIXA DE LOGIN:
   herdavam largura de 330px, fundo, sombra e animacao ("Ver por pessoa", "Voltar ao Grupo"...). */
.btxt{all:unset;cursor:pointer;color:var(--accent);font:inherit;font-size:12.5px;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.btxt:hover{text-decoration-color:currentColor}
/* a janela recebe o foco so para o teclado comecar dentro dela; nao precisa de contorno */
#sheet:focus{outline:none}
button.btxt:focus-visible{outline:2px solid var(--tx);outline-offset:2px;border-radius:4px}   /* button. vence o all:unset das regras de contexto */
.kpig .btxt{background:none;border:none;padding:0;color:var(--accent);font:inherit;font-size:12px;font-weight:600;cursor:pointer;text-align:left}
.crmcol.recolhida{flex:0 0 150px}
.crmcol .antigos{font-size:11.5px;color:var(--tx-3);padding:8px 4px;border-top:1px dashed var(--line-2);margin-top:6px}
.crmbusca{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-2);border-radius:10px;padding:0 12px;height:38px;flex:1 1 220px;max-width:360px;color:var(--tx-3)}
.crmbusca input{border:none;outline:none;background:transparent;font:inherit;font-size:13.5px;width:100%;color:var(--tx)}
#bcrm-filtros{display:inline-flex;align-items:center;gap:7px}
.crmic{width:38px;height:38px;padding:0 !important;display:inline-flex;align-items:center;justify-content:center}
.crmfn{min-width:18px;height:18px;border-radius:9px;background:var(--accent);color:var(--accent-tx);font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;padding:0 5px}
.crmfn[hidden]{display:none}
#bcrm-eu.on{background:var(--accent);color:var(--accent-tx);border-color:var(--accent)}
.crmmais{position:relative}
.crmmenu{position:absolute;right:0;top:44px;z-index:60;min-width:220px;background:var(--surface);border:1px solid var(--line-2);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.14);padding:6px;display:flex;flex-direction:column}
.crmmenu[hidden]{display:none}
.crmmenu-it{all:unset;box-sizing:border-box;cursor:pointer;padding:9px 12px;border-radius:8px;font-size:13.5px;color:var(--tx)}
.crmmenu-it:hover,.crmmenu-it:focus-visible{background:var(--surface-2)}
.crmmenu-sep{height:1px;background:var(--line);margin:6px 4px}
.crmmenu-t{font-size:11px;font-weight:600;color:var(--tx-3);padding:6px 12px 2px}
.crmtags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 10px}
.crmtags:empty{display:none}
.crmtag{display:inline-flex;align-items:center;gap:4px;padding:4px 4px 4px 10px;border-radius:8px;background:var(--surface);border:1px solid var(--line-2);font-size:12.5px;color:var(--tx)}
.crmtag button{all:unset;cursor:pointer;width:20px;height:20px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:var(--tx-3)}
.crmtag button:hover{background:var(--surface-3);color:var(--tx)}
.crmtags .btxt{all:unset;cursor:pointer;font-size:12.5px;color:var(--tx-2);text-decoration:underline;margin-left:4px}
.crmtags .tot{margin-left:auto;font-size:12.5px;color:var(--tx-3)}
/* L3 (09/10): CRM em lista no celular */
.crmlista[hidden],.crmboard[hidden]{display:none}
.crmltopo{display:flex;justify-content:space-between;align-items:center;margin:2px 0 12px;font-size:13px;color:var(--tx-3)}
.crmltopo .btxt{all:unset;cursor:pointer;color:var(--tx-2);text-decoration:underline;font-size:13px;padding:8px 0}
.crmlb{margin-bottom:16px}
.crmlbh{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:baseline;gap:8px;padding:8px 0 10px;cursor:pointer}
.crmlbh b{font-size:15px;font-weight:600;color:var(--tx)}
.crmlbh span{font-size:12.5px;color:var(--tx-3)}
.crmlbh i{margin-left:auto;font-style:normal;color:var(--tx-3);transition:transform .15s}
.crmlbh[aria-expanded="false"] i{transform:rotate(-90deg)}
.crmli{all:unset;box-sizing:border-box;width:100%;display:flex;flex-direction:column;gap:5px;padding:13px 14px;margin-bottom:10px;border-radius:12px;background:var(--surface);border:1px solid var(--line);cursor:pointer}
.crmli:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.crmli .l1{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0}
.crmli .l1 b{font-size:15px;font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crmli .sg{flex:none;font-size:11px;font-weight:600;padding:2px 7px;border-radius:99px;background:color-mix(in srgb,var(--cc) 14%,transparent);color:var(--tx)}
.crmli .l2{font-size:13px;line-height:1.4;color:var(--tx-2)}
.crmli .sit{align-self:flex-start;font-size:12px;font-weight:600;padding:3px 8px;border-radius:6px}
.crmli .sit.hoje{background:var(--tx);color:var(--surface)}
.crmli .sit.falta{background:rgba(220,38,38,.10);color:var(--bad-tx)}
.crmli.perdido{opacity:.55}
.crmli.semdono{border-style:dashed}
.crmlmais{all:unset;box-sizing:border-box;width:100%;text-align:center;padding:12px;border-radius:10px;border:1px dashed var(--line-2);color:var(--tx-2);font-size:13.5px;cursor:pointer}
.crmlvazio{font-size:13px;color:var(--tx-3);padding:2px 0 8px}
@media (max-width:860px){
  #v-crm .crmbar,#v-crm .crmtags,#crmlista{padding-left:14px;padding-right:14px;box-sizing:border-box}
  #v-crm .crmabas{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  #v-crm .crmabas::-webkit-scrollbar{display:none}
  #v-crm .crmbusca{flex:1 1 100%;max-width:none;height:44px}
  #crm-veu{z-index:140}           /* acima da barra de baixo (130) */
  #crm-gaveta{z-index:141}
  body[data-tela="crm"] .fab{display:none}
}
.crmveu{position:fixed;inset:0;background:rgba(22,24,29,.22);z-index:80}
.crmveu[hidden],.crmgaveta[hidden]{display:none}
.crmgaveta{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--surface);box-shadow:-16px 0 40px rgba(0,0,0,.16);z-index:81;display:flex;flex-direction:column;animation:crmgv .18s var(--e)}
@keyframes crmgv{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
.crmgaveta .gh{padding:18px 22px 12px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}
.crmgaveta .gh h4{margin:0;font-size:17px}
.crmgaveta .gb{flex:1;overflow:auto;padding:16px 22px;display:flex;flex-direction:column;gap:20px}
.crmgaveta .gs>b{display:block;font-size:13px;margin-bottom:8px;color:var(--tx)}
.crmgaveta .gop{display:flex;flex-wrap:wrap;gap:7px}
.crmgaveta .gop button{border:1px solid var(--line-2);background:var(--surface);color:var(--tx);border-radius:8px;padding:0 11px;height:34px;font:inherit;font-size:13px;cursor:pointer}
.crmgaveta .gop button.on{background:var(--accent);color:var(--accent-tx);border-color:var(--accent)}
.crmgaveta .gdt{display:flex;gap:10px;margin-top:10px}
.crmgaveta .gdt label{flex:1;display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--tx-3)}
.crmgaveta .gf{padding:14px 22px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}
.crmcard .sit{display:inline-block;margin-top:6px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px}
.crmcard .sit.hoje{background:var(--tx);color:var(--surface)}
.crmcard .sit.falta{background:rgba(220,38,38,.10);color:var(--bad-tx)}
.crmcard.perdido{opacity:.55}
.crmcard.semdono{border-style:dashed}
.crmabas button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-2);background:var(--surface);border-radius:10px;padding:7px 13px;font-size:12.5px;font-weight:600;min-height:38px;color:var(--tx-2)}
.crmabas button .d{width:9px;height:9px;border-radius:50%;flex:none}
.crmabas button .n{font-size:11px;font-weight:700;color:var(--tx-3);background:var(--surface-3);border-radius:99px;padding:1px 7px}
.crmabas button.on{border-color:var(--accent);background:var(--accent);color:var(--accent-tx)}
.crmabas button.on .n{background:color-mix(in srgb,var(--accent-tx) 18%,transparent);color:var(--accent-tx)}
/* filtro em lista: um botao que abre as opcoes, em vez de uma fileira de chips */
.filtro{position:relative}
.fbtn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-2);
  background:var(--surface);border-radius:8px;padding:6px 11px;font-size:11.5px;
  font-weight:500;min-height:32px;color:var(--tx)}
.fbtn .ca{font-size:9px;color:var(--tx-3)}
.fbtn.fusa{border-color:var(--accent);color:var(--accent)}
.fpop{position:absolute;top:calc(100% + 5px);right:0;z-index:60;min-width:212px;
  max-height:330px;overflow:auto;background:var(--surface);border:1px solid var(--line-2);
  border-radius:10px;padding:6px;box-shadow:0 12px 32px rgba(0,0,0,.3)}
.fpt{display:flex;gap:6px;padding:2px 2px 6px;border-bottom:1px solid var(--line-2);margin-bottom:4px}
.fitem{display:flex;align-items:center;gap:8px;width:100%;padding:7px 8px;border:0;
  background:none;border-radius:7px;font-size:12px;color:var(--tx);text-align:left}
.fitem:hover{background:var(--line)}
.fitem .bx{width:15px;height:15px;flex:none;border:1px solid var(--line-2);border-radius:4px;
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:var(--accent)}
.fitem.on .bx{border-color:var(--accent)}
.fitem .d{width:8px;height:8px;border-radius:50%;flex:none}
.fvazio{padding:8px;font-size:11px;color:var(--tx-3)}
/* chip de horario - fonte legivel, numeros tabulares (item 1) */
.hchip{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em;padding:7px 13px}
.hchip:hover{border-color:var(--tx-3);transform:translateY(-1px)}

/* ============ GRADE ============ */
.split{display:flex;gap:14px;align-items:flex-start}
.gridbox{flex:1;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:11px;overflow:auto;max-height:calc(100vh - 188px);box-shadow:var(--shadow)}
table{border-collapse:separate;border-spacing:0;width:100%;min-width:0}   /* 29/10: a largura minima fica so na grade da agenda (#grade) */
thead th{position:sticky;top:0;z-index:20;background:var(--surface-2);border-bottom:1px solid var(--line-2);padding:8px;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-2);font-weight:600;text-align:left}
thead th.day{text-align:center;transition:background 320ms}
thead th.day span{display:block;font-size:14.5px;color:var(--tx);font-weight:700;letter-spacing:0;text-transform:none;margin-top:1px;font-variant-numeric:tabular-nums}
thead th.today{background:color-mix(in srgb,var(--ge) 13%,var(--surface-2))}
thead th.today span{color:var(--ge-tx)}
thead th.flash{background:color-mix(in srgb,var(--ge) 34%,var(--surface-2))}
thead th.past span{color:var(--tx-3)}
th.hcol{width:50px;text-align:center}th.ccol{width:84px}
tbody td{border-bottom:1px solid var(--line);padding:0;vertical-align:top}
td.hcell{width:50px;text-align:center;font-weight:700;font-size:12px;color:var(--tx-2);background:var(--surface-2);border-right:1px solid var(--line-2);vertical-align:middle;font-variant-numeric:tabular-nums}
td.ccell{width:84px;padding:6px 9px;font-size:11.5px;font-weight:600;color:var(--tx-2);border-right:1px solid var(--line);white-space:nowrap}
td.ccell .cd{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--tx-3);margin-right:6px;vertical-align:1px}
td.slot{min-width:132px;padding:4px;transition:background var(--t)}
td.slot.abre:hover{background:var(--surface-2);cursor:pointer}   /* Onda 2 (09/10): so a celula que abre o agendamento */
td.todaycol{background:color-mix(in srgb,var(--ge) 4%,transparent)}
td.pastcol{opacity:.62}
tr.band-first td{border-top:1px solid var(--line-2)}

/* bloqueios - tonalidades distintas, sem hachura (item 3) */
.blk{border-radius:8px;padding:7px 8px;min-height:34px;display:flex;align-items:center;justify-content:center;
  text-align:center;font-size:10.5px;font-weight:600;line-height:1.3;
  overflow-wrap:anywhere;word-break:normal;hyphens:none}   /* item 4 */
.blk.almoco{background:var(--blk-lunch);border:1px dashed var(--blk-lunch-l);color:#8A5F0E}
body[data-t="dark"] .blk.almoco{color:#D9AE62}
/* 28/10 - closer ocupado com reuniao de outra empresa (so o horario, sem o lead) */
.blk.outra{background:repeating-linear-gradient(135deg,var(--blk-off) 0 6px,transparent 6px 12px);border:1px dashed var(--blk-off-l);color:var(--tx-3)}
.blk.fechada{background:var(--blk-off);border:1px solid var(--blk-off-l);color:var(--tx-3)}
.blk.feriado{background:color-mix(in srgb,var(--warn) 9%,var(--blk-off));border:1px dashed color-mix(in srgb,var(--warn) 40%,var(--blk-off-l));color:var(--tx-2)}   /* 29/10 (B2a) */
/* 29/10 (B2a): Configuracoes > Calendario e o perfil */
.calres{display:inline-flex;gap:6px;align-items:center;margin-bottom:12px;font-size:12.5px;color:var(--warn-tx);background:color-mix(in srgb,var(--warn) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 30%,transparent);border-radius:9px;padding:7px 11px}
.calres.atras{color:var(--bad-tx);background:color-mix(in srgb,var(--bad) 9%,transparent);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.caltab td{vertical-align:middle}
.caltab td small{display:block;font-size:11.5px;color:var(--tx-3);font-weight:500;margin-top:2px}
.caltab small.calatr{color:var(--bad-tx);font-weight:700}
.caltab tr.calpend td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
.calseg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:2px;gap:2px}
.calseg button{height:28px;padding:0 10px;border-radius:7px;font:inherit;font-size:12px;color:var(--tx-2);background:none;border:0;cursor:pointer;white-space:nowrap}
.calseg button:hover{color:var(--tx)}
.calseg button[aria-pressed="true"]{background:var(--surface);color:var(--tx);font-weight:700;box-shadow:0 1px 2px rgba(16,24,40,.08)}
.calseg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.callista{display:flex;flex-direction:column}
.calev{display:grid;grid-template-columns:minmax(150px,auto) minmax(0,1fr) auto;gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--line);font-size:12.5px}
.calev:first-child{border-top:0}
.calevd{font-weight:700;color:var(--tx-2);font-variant-numeric:tabular-nums}
.calevt b{display:block;color:var(--tx)}
.calevt small{display:block;color:var(--tx-3);font-size:11.5px;margin-top:2px}
.pfchk{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--tx-2);margin:2px 0 8px;cursor:pointer}
.pfchk input{margin-top:2px}
@media (max-width:860px){ .calev{grid-template-columns:1fr;gap:4px} }
.blk.weekend{background:var(--blk-wk);border:1px solid var(--line);color:var(--tx-3);opacity:.8;font-weight:500}

.ap{border-radius:8px;padding:6px 8px;border:1px solid;cursor:pointer;
  transition:transform 120ms var(--e),box-shadow var(--t);animation:pop 220ms var(--e) both}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.ap:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(16,24,40,.10)}
.ap+.ap{margin-top:4px}

/* ==========================================================
   AGENDA - reorganizacao visual (03/09/2026)
   TUDO escopado em #v-agenda. As classes .ap .st .nm .ft .dot .co .hr tambem
   servem CRM, Relatorios e a lateral neste mesmo arquivo; sem o escopo, mexer
   aqui estraga aquelas telas. Dashboard e TV nao carregam este CSS.
   ========================================================== */

/* ---- HOJE: o gancho ja existia (.today no cabecalho, .todaycol na celula);
        aqui ele so ganha peso, sem atrapalhar a leitura dos cards ---- */
#v-agenda th.day.today{background:color-mix(in srgb,var(--ge) 22%,transparent);
  color:var(--tx);box-shadow:inset 0 -3px 0 var(--ge)}
#v-agenda th.day.today em{color:var(--ge-tx);font-weight:800}
#v-agenda td.slot.todaycol{background:color-mix(in srgb,var(--ge) 7%,transparent)}
#v-agenda tr.band-first td.slot.todaycol{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ge) 34%,transparent)}

/* ---- CARD: a cor manda pelo STATUS. A empresa fica na bolinha e na sigla ----
   O fundo/borda por empresa sairam do estilo inline do cardAg; aqui entram por
   data-st, que o card passa a carregar. */
#v-agenda .ap{background:var(--surface-2);border-color:var(--line);
  border-left:3px solid var(--tx-3)}
#v-agenda .ap[data-st="agendado"]{border-left-color:var(--tx-3)}
#v-agenda .ap[data-st="venda"]{border-left-color:var(--ok);
  background:color-mix(in srgb,var(--ok) 11%,var(--surface-2))}
#v-agenda .ap[data-st="semvenda"]{border-left-color:var(--tx-3);
  background:color-mix(in srgb,var(--tx-3) 9%,var(--surface-2))}
#v-agenda .ap[data-st="noshow"]{border-left-color:var(--bad);
  background:color-mix(in srgb,var(--bad) 10%,var(--surface-2))}
#v-agenda .ap[data-st="remarcado"]{border-left-color:var(--warn);
  background:color-mix(in srgb,var(--warn) 10%,var(--surface-2))}
#v-agenda .ap[data-st="aguardando"]{border-left-color:#8B5CF6;
  background:color-mix(in srgb,#8B5CF6 10%,var(--surface-2))}
/* estados calculados: passam por cima do status, porque pedem acao agora */
#v-agenda .ap.agora{border-left-color:var(--ok);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--ok) 45%,transparent)}
#v-agenda .ap.pendente{border-left-color:var(--bad);border-left-style:dashed}
/* a sigla da empresa perde o peso de cor: vira texto discreto com a bolinha */
#v-agenda .ap .co{background:transparent!important;color:var(--tx-3)!important;
  padding:0!important;border:0!important}

/* ---- MINI RESUMO DO DIA ----
   Faixa horizontal discreta, nao cards grandes. Fala sempre de HOJE, mesmo com a
   grade em outra semana - por isso o rotulo diz a data. */
#v-agenda .agres{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--surface-2);border:1px solid var(--line);border-radius:10px;
  padding:9px 14px;margin-bottom:10px}
#v-agenda .agres .hj{font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ge-tx);white-space:nowrap}
#v-agenda .agres .it{display:flex;align-items:baseline;gap:6px;white-space:nowrap}
#v-agenda .agres .it b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
#v-agenda .agres .it span{font-size:11px;color:var(--tx-3)}
#v-agenda .agres .it.g b{color:var(--ok-tx)}
#v-agenda .agres .it.r b{color:var(--bad-tx)}
#v-agenda .agres .sep{width:1px;height:20px;background:var(--line)}
#v-agenda .agres .fora{margin-left:auto;font-size:10.5px;color:var(--tx-3)}

/* ---- LATERAL: central de acao ---- */
#v-agenda .agsec{margin-bottom:14px}
#v-agenda .agsec:last-child{margin-bottom:0}
#v-agenda .agst{display:flex;align-items:center;gap:7px;font-size:10.5px;
  font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);
  margin-bottom:8px}
#v-agenda .agst .n{margin-left:auto;font-weight:800;color:var(--tx-2)}
#v-agenda .agacao{background:color-mix(in srgb,var(--bad) 8%,var(--surface-2));
  border:1px solid color-mix(in srgb,var(--bad) 26%,transparent);
  border-radius:10px;padding:11px 12px;cursor:pointer;width:100%;text-align:left;
  font-family:inherit;display:block}
#v-agenda .agacao:hover{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
#v-agenda .agacao .q{font-size:19px;font-weight:800;color:var(--bad-tx);
  font-variant-numeric:tabular-nums;line-height:1.1}
#v-agenda .agacao .q small{font-size:11px;font-weight:700;color:var(--tx-2);margin-left:5px}
#v-agenda .agacao .quebra{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
#v-agenda .agacao .quebra i{font-style:normal;font-size:10.5px;color:var(--tx-3)}
#v-agenda .agacao .quebra i b{color:var(--tx-2);font-weight:800}
#v-agenda .agacao .quem{margin-top:7px;padding-top:7px;
  border-top:1px solid color-mix(in srgb,var(--bad) 18%,transparent);
  font-size:11px;color:var(--tx-2);line-height:1.7}
#v-agenda .agacao .quem b{color:var(--tx)}
#v-agenda .agacao .ver{margin-top:7px;font-size:10.5px;color:var(--bad-tx);font-weight:700}
#v-agenda .agok{font-size:11.5px;color:var(--tx-3);padding:12px 0;text-align:center}

.ap+.ap{margin-top:4px}
.ap .r1{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.ap .dot{width:7px;height:7px;border-radius:50%;flex:none}
body[data-t="dark"] .ap .co{color:var(--qcd,var(--tx))}
body[data-t="light"] .ap .co{color:var(--qcl,var(--tx))}
.ap .co{font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap .hr{margin-left:auto;font-size:10.5px;font-weight:700;color:var(--tx-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.ap .nm{font-size:12px;font-weight:600;line-height:1.25}
.ap .ft{display:flex;align-items:center;gap:5px;margin-top:3px;flex-wrap:wrap}
.ap .sdr{font-size:9.5px;color:var(--tx-3)}
.ap.agora{box-shadow:0 0 0 2px var(--ok);animation:liveGlow 1.8s ease-in-out infinite alternate}
@keyframes liveGlow{from{box-shadow:0 0 0 2px color-mix(in srgb,var(--ok) 55%,transparent)}to{box-shadow:0 0 0 3px var(--ok)}}
.st{font-size:9px;font-weight:700;padding:1.5px 5px;border-radius:4px;letter-spacing:.02em;text-transform:uppercase}
.st.venda{background:var(--ok-bg);color:#fff}
.st.semvenda{background:color-mix(in srgb,var(--tx-3) 22%,transparent);color:var(--tx-2)}
.st.noshow{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad-tx)}
.st.remarcado{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn-tx)}
.st.cancelado{background:var(--surface-3);color:var(--tx-3);text-decoration:line-through}
.st.pend{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad-tx);border:1px dashed color-mix(in srgb,var(--bad) 45%,transparent)}
.st.live{background:var(--ok-bg);color:#fff}

/* ============ PAINEL LATERAL ============ */
.side{width:clamp(270px,21vw,420px);flex:none;background:var(--surface);border:1px solid var(--line);border-radius:11px;display:flex;flex-direction:column;max-height:calc(100vh - 188px);box-shadow:var(--shadow)}
.stabs{display:flex;padding:8px 8px 0;gap:4px;border-bottom:1px solid var(--line)}
.stabs button{flex:1;padding:8px;border-radius:8px 8px 0 0;font-size:12px;font-weight:600;color:var(--tx-3);display:flex;align-items:center;justify-content:center;gap:6px}
.stabs button.on{color:var(--tx);background:var(--surface-2)}
.badge{background:var(--bad);color:#fff;border-radius:10px;font-size:9.5px;font-weight:800;padding:1px 5px;min-width:16px;animation:bpop 260ms var(--e) both}
@keyframes bpop{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
/* Etiqueta da origem do lead - o [TP] ao lado da empresa. Discreta de proposito:
   a empresa e que manda no card; a origem e a informacao de apoio. */
.ori{font-size:9px;font-weight:800;letter-spacing:.04em;color:var(--tx-3);
  border:1px solid var(--line-2);border-radius:5px;padding:1px 4px;line-height:1.5;
  white-space:nowrap;flex:none}
.tagco .ori{margin-left:5px}

/* Conversa do lead na agenda: reaproveita as classes do mobile.css, mas o botao
   Enviar e a caixa de escrever sao estilizados la por ID (#mxc-enviar,
   #mxc-escrever). Os ids daqui sao outros, entao repito so o que e por id. */
#rconv-txt{min-height:44px}
.mxc-escrever-cx button{background:#2E7D46;color:#fff;border:0;border-radius:9px;
  padding:9px 16px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  min-height:40px;white-space:nowrap}
.mxc-escrever-cx button:hover{background:#35914F}
.mxc-escrever-cx button:disabled{opacity:.5;cursor:default}
.mxc-escrever-cx[hidden]{display:none!important}
body.sopessoas #s-c .card:not(#cardequipe){display:none!important}
/* L4b (09/10): glossario */
.glos h5{font-size:13.5px;font-weight:600;margin:18px 0 8px;color:var(--tx)}
.glos h5:first-child{margin-top:0}
.glos-it{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--line)}
.glos-it b{font-size:13.5px;font-weight:600;color:var(--tx);display:flex;align-items:center;gap:7px}
.glos-it span{font-size:12.5px;line-height:1.5;color:var(--tx-2)}
.glos-b{font-size:12px;color:var(--tx-3);margin:12px 0 2px}
.glos .d{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.glos-emps{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:8px}
.glos-emp{display:inline-flex;align-items:center;gap:7px;font-size:13px}

/* filtro do painel lateral (so master) */
.pfil{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:9px 12px;
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.pfil label{display:block;font-size:8.6px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx-3);font-weight:800;margin-bottom:4px}
.pfil select{width:100%;background:var(--surface);color:var(--tx);border:1px solid var(--line-2);
  border-radius:7px;padding:6px 7px;font-family:inherit;font-size:11.5px;font-weight:600;
  min-height:30px}
.pfil select:focus{outline:none;border-color:var(--accent)}
.pfil .lim{grid-column:1/-1;display:flex}
.pfil .lim button{margin-left:auto;font-size:10.5px;color:var(--tx-2);font-weight:700;
  background:none;border:0;padding:2px 0}
.pfil .lim button:hover{color:var(--tx)}
.spane{display:none;flex-direction:column;flex:1;min-height:0}
.spane.on{display:flex;animation:fadein 220ms var(--e) both}
.pend{overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:14px;flex:1}
.pgrp .pt{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);font-weight:700;margin-bottom:7px;display:flex;align-items:center;gap:6px}
.pi{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:9px 10px;margin-bottom:6px;cursor:pointer;transition:border-color var(--t),transform 120ms var(--e)}
.pi:hover{border-color:var(--tx-3);transform:translateX(2px)}
.pi.late{border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 7%,transparent)}
.pi.soon{border-color:color-mix(in srgb,var(--warn) 55%,transparent);background:color-mix(in srgb,var(--warn) 9%,transparent)}
.pi.now{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 9%,transparent)}
.pi .l1{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.pi .l1 .dot{width:7px;height:7px;border-radius:50%;flex:none}
.pi .l1 b{font-size:12px;flex:1}
.pi .l1 .tm{font-size:11px;font-weight:700;color:var(--tx-2);font-variant-numeric:tabular-nums}
.pi .l2{font-size:10.5px;color:var(--tx-3)}
.pi .tag{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:1.5px 5px;border-radius:4px;margin-top:5px;display:inline-block}
.pi .tag.late{background:var(--bad);color:#fff}
.pi .tag.soon{background:var(--warn);color:#fff}
.pi .tag.now{background:var(--ok-bg);color:#fff}
.empty{text-align:center;color:var(--tx-3);font-size:11.5px;padding:20px 10px;line-height:1.6}

/* ============ RELATORIOS ============ */
.tabs{display:flex;gap:2px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:3px;width:fit-content;margin-bottom:15px}
.tabs button{padding:7px 15px;border-radius:7px;font-size:12.5px;font-weight:500;color:var(--tx-2)}
.tabs button.on{background:var(--surface);color:var(--tx);font-weight:600;box-shadow:var(--shadow)}
.cols{display:grid;grid-template-columns:400px minmax(0,1fr);gap:14px;align-items:start}
.cols>*{min-width:0}
.cols>*{min-width:0}
@media(max-width:1100px){.cols{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:15px;box-shadow:var(--shadow);
  transition:box-shadow var(--t),transform var(--t)}
.card:hover{box-shadow:0 3px 14px rgba(16,24,40,.07)}
.card h3{font-size:12.5px;font-weight:700;margin-bottom:3px}
.card .cs{font-size:11px;color:var(--tx-3);margin-bottom:13px}
.resumo{background:var(--surface-2);border:1px solid var(--line-2);border-radius:9px;padding:13px;font-size:12.5px;line-height:1.85;white-space:pre-line}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:9px}
.kpi{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:10px;transition:transform var(--t)}
.kpi:hover{transform:translateY(-2px)}
.kpi .k{font-size:9.5px;color:var(--tx-3);letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.kpi .v{font-size:21px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.kpi .v.g{color:var(--ok-tx)}.kpi .v.r{color:var(--bad-tx)}.kpi .v.y{color:var(--warn-tx)}
table.rk{width:100%;min-width:0;border-collapse:collapse}
table.rk th{background:none;position:static;border-bottom:1px solid var(--line-2);padding:7px 6px;font-size:10px;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-3);text-align:left}
table.rk th.n,table.rk td.n{text-align:right}
table.rk td{border-bottom:1px solid var(--line);padding:9px 6px;font-size:12.5px}
table.rk tbody tr{transition:background var(--t)}
table.rk tbody tr:hover{background:var(--surface-2)}
table.rk tr:last-child td{border-bottom:0}
.pos{width:20px;height:20px;border-radius:6px;background:var(--surface-3);display:inline-grid;place-items:center;font-size:10.5px;font-weight:800;color:var(--tx-2);margin-right:8px}
.pos.p1{background:#F5C94B;color:#3b2c00}
.bararea{height:5px;background:var(--surface-3);border-radius:3px;overflow:hidden;margin-top:5px}

/* ==========================================================
   RELATORIOS POR PERIODO
   Classes novas, todas com prefixo pr-. Nenhuma classe existente e alterada,
   entao Agenda, CRM, Historico, Cadastros e o painel seguem intactos.
   ========================================================== */
.prdet{margin-bottom:14px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface-2);overflow:hidden}
.prdet>summary{cursor:pointer;padding:10px 13px;font-size:12px;font-weight:700;
  color:var(--tx-2);list-style:none}
.prdet>summary::-webkit-details-marker{display:none}
.prdet>summary::before{content:'\25B8  ';color:var(--tx-3)}
.prdet[open]>summary::before{content:'\25BE  '}
.prdet>summary:hover{color:var(--tx)}
.prdet .resumo{margin:0 13px 13px;border:0}

.prbar{flex-wrap:wrap;gap:8px}
.prq{display:flex;gap:6px;flex-wrap:wrap}
.prq button{font-family:inherit;font-size:11.5px;font-weight:700;cursor:pointer;
  background:var(--surface-2);color:var(--tx-2);border:1px solid var(--line);
  border-radius:7px;padding:6px 11px;transition:all var(--t)}
.prq button:hover{color:var(--tx);border-color:var(--tx-3)}
.prq button.on{background:var(--ge);color:#fff;border-color:var(--ge)}
.prdt{display:flex;gap:6px;align-items:center}
.prdt input{font-family:inherit;font-size:11.5px;background:var(--surface-2);
  color:var(--tx);border:1px solid var(--line);border-radius:7px;padding:5px 8px}
.prf{display:flex;gap:6px;flex-wrap:wrap}
.prf select{font-family:inherit;font-size:11.5px;font-weight:600;background:var(--surface-2);
  color:var(--tx);border:1px solid var(--line);border-radius:7px;padding:5px 8px;max-width:170px}
.prf select.on{border-color:var(--ge);color:var(--ge-tx)}

/* KPIs em duas hierarquias: os principais grandes, os de apoio menores */
.prkpi{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;margin-bottom:9px}
.prkpi2{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:14px}
.prk{background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:11px}
.prk .l{font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--tx-3);
  font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prk .v{font-size:23px;font-weight:800;line-height:1.1;margin-top:4px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.prk .s{font-size:10px;color:var(--tx-3);margin-top:3px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.prk.g .v{color:var(--ge-tx)} .prk.r .v{color:var(--bad-tx)}
.prk.y .v{color:var(--warn-tx)} .prk.m .v{color:var(--ok-tx)}
.prkpi2 .prk{padding:9px} .prkpi2 .prk .v{font-size:16px}

/* funil */
.prfun{display:flex;flex-direction:column;gap:2px}
.prfr{display:flex;align-items:center;gap:10px;padding:7px 0}
.prfr .q{font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;
  min-width:58px;text-align:right}
.prfr .b{flex:1;height:9px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.prfr .b i{display:block;height:100%;border-radius:99px;transition:width 620ms var(--e)}
.prfr .l{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-2);
  font-weight:800;white-space:nowrap;min-width:88px}
.prfx{display:flex;align-items:center;gap:7px;font-size:10.5px;color:var(--tx-3);
  margin-left:68px;font-weight:700}
.prfx b{color:var(--tx-2)}
.prfrod{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);
  font-size:11px;color:var(--tx-3)}
.prfrod b{color:var(--tx-2)}

/* evolucao */
.prevb{display:flex;gap:6px;margin-bottom:10px}
.prevb button{font-family:inherit;font-size:11px;font-weight:700;cursor:pointer;
  background:var(--surface-2);color:var(--tx-3);border:1px solid var(--line);
  border-radius:6px;padding:4px 9px}
.prevb button.on{background:var(--ge);color:#fff;border-color:var(--ge)}
.prevg{display:flex;align-items:flex-end;gap:3px;height:150px;overflow-x:auto;padding-bottom:2px}
.prevc{flex:1;min-width:14px;display:flex;flex-direction:column;
  justify-content:flex-end;align-items:center;height:100%}
.prevc i{display:block;width:100%;background:var(--ge);border-radius:3px 3px 0 0;
  min-height:2px;transition:height 620ms var(--e)}
.prevc span{font-size:8.5px;color:var(--tx-3);margin-top:4px;white-space:nowrap;
  transform:rotate(-58deg);transform-origin:center;height:22px}
.prevc:hover i{background:var(--ge-tx)}

/* tabelas ordenaveis */
table.rk th.pro{cursor:pointer;user-select:none;white-space:nowrap}
table.rk th.pro:hover{color:var(--tx)}
table.rk th.pro.on::after{content:' \25BE ';color:var(--ge-tx)}
.prvazio{text-align:center;color:var(--tx-3);font-size:12px;padding:22px 0;line-height:1.7}

@media(max-width:1500px){
  .prkpi{grid-template-columns:repeat(4,minmax(0,1fr))}
  .prkpi2{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
  .prkpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prkpi2{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* H (29/10): em duas colunas, o ultimo cartao de numero impar ocupa a linha (sem buraco no fim) */
  .prkpi>:last-child:nth-child(odd),.prkpi2>:last-child:nth-child(odd){grid-column:1/-1}
  .prf select{max-width:none;flex:1}
}
.bararea i{display:block;height:100%;border-radius:3px;transition:width 620ms var(--e)}
.mini{font-size:10.5px;color:var(--tx-3)}
.swatch{width:26px;height:26px;border-radius:7px;border:1px solid var(--line-2)}
.tagco{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 6px;margin:2px 3px 2px 0}
.tagco .d{width:6px;height:6px;border-radius:50%}
/* ---- avatar / foto ---- */
.avt{display:inline-grid;place-items:center;border-radius:50%;flex:none;object-fit:cover;vertical-align:middle;
  border:1.5px solid var(--line-2)}
.avt.ini{color:#fff;font-weight:800;letter-spacing:-.01em;border-color:transparent}
.avtrow{display:flex;align-items:center;gap:9px}
.fotobtn{font-size:10px;font-weight:700;border:1px dashed var(--line-2);border-radius:6px;padding:3px 7px;color:var(--tx-3)}
.fotobtn:hover{border-color:var(--tx-3);color:var(--tx-2)}
/* ---- historico ---- */
.selmini{background:var(--surface);border:1px solid var(--line-2);border-radius:9px;padding:8px 11px;
  font-size:12px;font-weight:500;outline:none;box-shadow:var(--shadow)}
.hlist{max-height:calc(100vh - 250px);overflow-y:auto;padding:13px 15px 15px}
.hday{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);font-weight:800;
  padding:11px 0 8px;position:sticky;top:0;background:var(--surface);z-index:2}
.hi{display:flex;gap:11px;padding:10px 0;border-bottom:1px solid var(--line);animation:fadein 240ms var(--e) both}
.hi:last-child{border-bottom:0}
.hi .hh{width:44px;flex:none;font-size:12px;font-weight:800;color:var(--tx-2);font-variant-numeric:tabular-nums;padding-top:5px}
.hi .hic{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;font-size:13px;
  background:var(--surface-2);border:1px solid var(--line)}
.hi .hm{flex:1;min-width:0}
.hi .h1{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:3px}
.hi .h1 .who2{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700}
.hi .h1 .act{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:2px 7px;border-radius:5px}
.hi .h2x{font-size:11.5px;color:var(--tx-2);line-height:1.5}
.hi .lead{font-size:11px;color:var(--tx-3);margin-top:2px}
.hi .lead b{color:var(--tx-2);font-weight:600}
.hrow{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line)}
.hrow:last-child{border-bottom:0}
.hrow .nm2{flex:1;font-size:12.5px;font-weight:600}
.hrow .q2{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.lock{display:flex;align-items:center;gap:9px;background:color-mix(in srgb,var(--warn) 10%,transparent);border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);border-radius:9px;padding:10px 12px;font-size:11.5px;color:var(--tx-2)}
.note{margin-top:14px;font-size:11px;color:var(--tx-3);line-height:1.65}
.perm{font-size:9.5px;font-weight:700;background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok-tx);border-radius:5px;padding:2px 6px}

/* ============ MODAL ============ */
#mask{position:fixed;inset:0;z-index:150;background:rgba(8,10,14,.6);display:none;align-items:flex-start;justify-content:center;
  padding:34px 20px;overflow-y:auto;backdrop-filter:blur(2px);animation:fadein 180ms both}
#mask.on{display:flex}
.sheet{width:100%;max-width:520px;background:var(--surface);border:1px solid var(--line-2);border-radius:15px;overflow:hidden;
  box-shadow:0 22px 60px rgba(0,0,0,.34);animation:sheetin 260ms var(--e) both}
@keyframes sheetin{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.sh{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:11px}
.sh h4{font-size:14px;font-weight:700;flex:1}
.sh .x{width:28px;height:28px;border-radius:8px;font-size:15px;color:var(--tx-3)}
.sh .x:hover{background:var(--surface-2)}
.steps{display:flex;gap:5px;padding:11px 18px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.steps i{flex:1;height:3px;border-radius:2px;background:var(--surface-3);transition:background 300ms}
.steps i.done{background:var(--ok)}.steps i.now{background:var(--tx)}
.sb2{padding:17px 18px}
.qlab{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-3);font-weight:700;margin-bottom:11px}
.opts{display:grid;gap:7px}
.opts.g2{grid-template-columns:1fr 1fr}
.opts.g4{grid-template-columns:repeat(4,1fr)}
.opt{text-align:left;background:var(--surface-2);border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:9px}
.opt:hover:not(:disabled){border-color:var(--tx-3);transform:translateY(-1px)}
.opt .d{width:11px;height:11px;border-radius:50%;flex:none}
.opt small{display:block;font-weight:500;font-size:10.5px;color:var(--tx-3);margin-top:2px}
.opt.tm{justify-content:center;text-align:center;font-weight:700;padding:10px 4px;font-variant-numeric:tabular-nums}
.opt.lunch{border-style:dashed;border-color:var(--blk-lunch-l);background:var(--blk-lunch)}
.opt.sel{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,transparent)}
.opt:disabled{opacity:.4;cursor:not-allowed}
.fld{margin-bottom:13px}
.fld label{display:block;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--tx-3);font-weight:700;margin-bottom:6px}
.fld label .req{color:var(--bad)}
.fld input,.fld select,.fld textarea{width:100%;background:var(--surface-2);border:1.5px solid var(--line-2);border-radius:9px;padding:10px 12px;font-size:13px;outline:none}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--tx-3)}
.fld textarea{min-height:64px;resize:vertical;line-height:1.5}
.fld .hlp{font-size:10.5px;color:var(--tx-3);margin-top:5px;line-height:1.45}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.rev{background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;overflow:hidden}
.rev .rr{display:flex;padding:9px 12px;border-bottom:1px solid var(--line);font-size:12.5px;gap:10px}
.rev .rr:last-child{border-bottom:0}
.rev .rk2{color:var(--tx-3);width:118px;flex:none;font-size:11.5px}
.rev .rv{font-weight:600;flex:1}
.rev .rv.miss{color:var(--bad);font-weight:700}
.sf{display:flex;gap:8px;padding:15px 18px;border-top:1px solid var(--line);background:var(--surface-2)}
/* numero do card no rodape da ficha (09/10): e o que se informa ao abrir um chamado */
.sf .cfid{align-self:center;white-space:nowrap;font-size:11.5px;color:var(--tx-3);user-select:all;margin-right:4px}
.sf button{padding:11px 16px;border-radius:9px;font-size:12.5px;font-weight:600;border:1px solid var(--line-2)}
.sf .back{background:var(--surface)}
.sf .go2{flex:1;background:var(--ok);color:#fff;border-color:var(--ok)}
.sf .go2:disabled{background:var(--surface-3);color:var(--tx-3);border-color:var(--line-2)}
.warnbox,.missbox{display:flex;gap:9px;border-radius:9px;padding:10px 12px;font-size:11.5px;line-height:1.5;animation:fadein 200ms both}
.warnbox{background:color-mix(in srgb,var(--warn) 11%,transparent);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);margin-bottom:13px}
.missbox{background:color-mix(in srgb,var(--bad) 9%,transparent);border:1px solid color-mix(in srgb,var(--bad) 38%,transparent);margin-top:13px}
.missbox b{color:var(--bad)}
#toast{position:fixed;bottom:58px;left:50%;transform:translateX(-50%) translateY(16px);z-index:180;background:var(--accent);color:var(--accent-tx);border-radius:10px;padding:11px 17px;font-size:12px;font-weight:600;opacity:0;transition:all 260ms var(--e);pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.22);max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.esboco{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:99;background:var(--surface);border:1px solid var(--line-2);color:var(--tx-3);border-radius:20px;padding:6px 14px;font-size:10.5px;font-weight:700;letter-spacing:.05em;box-shadow:var(--shadow)}

/* ============ NOVO NA VERSAO COM BANCO ============ */
/* tela de troca de senha obrigatoria */
#trocar{position:fixed;inset:0;z-index:190;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(6,10,16,.92);backdrop-filter:blur(8px)}
#trocar.on{display:flex}
#trocar .cx{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:18px;padding:26px;box-shadow:0 26px 70px rgba(0,0,0,.5);animation:sheetin 300ms var(--e) both}
#trocar h2{font-size:16px;font-weight:800;margin-bottom:6px}
#trocar p{font-size:12px;color:var(--tx-2);line-height:1.6;margin-bottom:18px}
#trocar .msg{font-size:11.5px;color:var(--bad);min-height:16px;margin-top:8px;font-weight:600}

/* carregando / estados */
#carregando{position:fixed;inset:0;z-index:210;display:grid;place-items:center;background:var(--bg);
  transition:opacity 300ms}
/* 28/10 - carregamento com o simbolo do Grupo (marca/grupo-mxc-loader.svg: anima sozinho e para quando a pessoa desliga animacoes) */
.mxcload{width:72px;height:72px}
#carregando.off{opacity:0;pointer-events:none;visibility:hidden;transition:opacity .3s,visibility 0s .3s}   /* some de vez: a animacao do simbolo para */
.spin{width:34px;height:34px;border:3px solid var(--line-2);border-top-color:var(--tx-3);border-radius:50%;
  animation:gira .8s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.salvando{position:fixed;top:0;left:0;right:0;height:2px;z-index:220;background:var(--ok);
  transform:scaleX(0);transform-origin:left;transition:transform 240ms}
.salvando.on{transform:scaleX(.7)}
.salvando.fim{transform:scaleX(1);opacity:0;transition:transform 160ms,opacity 320ms 160ms}
.vazio-agenda{text-align:center;padding:52px 20px;color:var(--tx-3);line-height:1.8}
.vazio-agenda b{display:block;font-size:14px;color:var(--tx-2);margin-bottom:6px}

/* botoes de acao dentro das tabelas de cadastro */
.acbtn{font-size:11px;font-weight:700;min-height:32px;border:1px solid var(--line-2);background:var(--surface);
  border-radius:7px;padding:5px 9px;color:var(--tx-2);box-shadow:var(--shadow);text-decoration:none}
.acbtn:hover{background:var(--surface-2);color:var(--tx);border-color:var(--tx-3)}
.acbtn.dan:hover{border-color:var(--bad);color:var(--bad)}
.acbtn+.acbtn{margin-left:5px}
.acol{display:flex;gap:5px;justify-content:flex-end;flex-wrap:wrap}
td.off,tr.off b{opacity:.45}
.tagoff{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  background:var(--surface-3);color:var(--tx-3);border-radius:4px;padding:2px 6px;margin-left:6px}

/* editor de produtos (fichas dentro do modal) */
.prods{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.prod{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:9px;padding:7px 9px}
.prod input{flex:1;background:transparent;border:0;font-size:12.5px;font-weight:600;outline:none;padding:2px}
.prod input:focus{background:var(--surface);border-radius:5px}
.prod.inativo{opacity:.6;border-style:dashed}
.prod .x{width:24px;height:24px;border-radius:6px;color:var(--tx-3);font-size:14px;flex:none}
.prod .x:hover{background:color-mix(in srgb,var(--bad) 14%,transparent);color:var(--bad)}

/* seletor de cor */
.cores{display:flex;gap:7px;flex-wrap:wrap}
.cores button{width:32px;height:32px;border-radius:9px;border:2px solid transparent}
.cores button.sel{border-color:var(--tx);box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--tx-3)}
input[type=color]{width:44px;height:32px;padding:2px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface-2)}

/* caixas de marcacao (empresas do closer, permissoes) */
.marks{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.mark{display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1.5px solid var(--line);
  border-radius:9px;padding:10px 11px;font-size:12.5px;font-weight:600;text-align:left}
.mark:hover{border-color:var(--tx-3)}
.mark.on{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 8%,transparent)}
.mark .bx{width:17px;height:17px;border-radius:5px;border:1.5px solid var(--line-2);flex:none;
  display:grid;place-items:center;font-size:11px;color:#fff;background:var(--surface)}
.mark.on .bx{background:var(--ok);border-color:var(--ok)}
.mark small{display:block;font-weight:500;font-size:10.5px;color:var(--tx-3);margin-top:2px}
.mark.travado{opacity:.6;cursor:not-allowed}

/* foto no modal */
.fotobox{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.fotobox .prev{width:74px;height:74px;flex:none;position:relative}
.fotobox .prev .avt{width:74px;height:74px;font-size:26px}
.fotobox .lado{flex:1}
.fotobox .hlp{font-size:10.5px;color:var(--tx-3);line-height:1.5;margin-top:6px}

/* senha revelada uma unica vez */
.senhabox{background:color-mix(in srgb,var(--ok) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 38%,transparent);border-radius:11px;padding:15px;text-align:center;margin-top:14px}
.senhabox .n{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-3);font-weight:700}
.senhabox .s{font-family:ui-monospace,SFMono-Regular,monospace;font-size:30px;font-weight:800;
  letter-spacing:.2em;color:var(--ok);margin:8px 0 4px}
.senhabox .a{font-size:11px;color:var(--tx-2);line-height:1.55}

.fechadotag{font-size:11px;font-weight:700;color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);border-radius:20px;padding:6px 11px;margin-right:8px}

/* ---- ano e datas em destaque ---- */
.anobadge{font-size:11px;font-weight:800;letter-spacing:.09em;background:var(--surface-3);color:var(--tx-2);
  border:1px solid var(--line-2);border-radius:7px;padding:4px 8px;font-variant-numeric:tabular-nums}
.anosel{font-weight:800;color:var(--tx-3);margin-left:5px;font-variant-numeric:tabular-nums}
thead th.day em{display:block;font-style:normal;font-size:9.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tx-3);margin-top:1px}
thead th.today em{color:var(--ge-tx)}
/* faixa de data dos Horarios livres */
.dbanner{display:flex;align-items:center;gap:12px;margin:18px 0 12px;padding:11px 13px;
  background:var(--surface-2);border:1px solid var(--line-2);border-left:3px solid var(--tx-3);border-radius:10px}
.dbanner.hoje{border-left-color:var(--ge);background:color-mix(in srgb,var(--ge) 8%,var(--surface-2))}
.dbanner:first-of-type{margin-top:6px}
.dbanner .dnum{font-size:30px;font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.dbanner.hoje .dnum{color:var(--ge)}
.dbanner .dtxt{flex:1;min-width:0}
.dbanner .dtxt b{display:block;font-size:12px;font-weight:800;letter-spacing:.08em}
.dbanner .dtxt small{display:block;font-size:11px;color:var(--tx-3);margin-top:2px}
.dbanner .dqtd{font-size:11px;font-weight:700;color:var(--tx-2);background:var(--surface);
  border:1px solid var(--line-2);border-radius:20px;padding:4px 10px;white-space:nowrap}

/* ---- marca dourada no topo do sistema ----
   Duas versoes: a clara brilha no tema escuro, a mais fechada garante contraste
   no tema claro. A troca e por CSS, entao ja sai certa na primeira pintura. */
.brand .marca{display:flex;align-items:center;flex:none}
.brand .marca img{display:none;height:21px;width:auto}
body[data-t="dark"]  .brand .mc-esc{display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
body[data-t="light"] .brand .mc-cla{display:block}

/* ---- login: logo do Grupo MXC no lugar do quadrado branco ---- */
.lk .marca{display:block;width:136px;height:auto;margin:0 auto 16px;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.6));
  animation:marcaEntra 620ms var(--e) both}
@keyframes marcaEntra{from{opacity:0;transform:translateY(-8px) scale(.94)}to{opacity:1;transform:none}}
.lk h1{margin-top:2px}
.lk .sb{letter-spacing:.13em;font-size:10px;color:#8A93A3}

/* uma frase por linha: sem ponto seguido de maiuscula no meio do texto */
.lk .demo span{display:block;line-height:1.55}
.lk .demo span+span{margin-top:3px;opacity:.72}

/* ---- login: botao Entrar de verdade e olho para ver a senha ---- */
.pinrow{position:relative;display:block}
.lk .pinrow input{width:100%;padding-right:46px}
.lk .olho{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:34px;height:34px;
  border-radius:9px;background:transparent;border:0;font-size:15px;line-height:1;opacity:.5;color:#E8EBF0}
.lk .olho:hover{opacity:.95;background:rgba(255,255,255,.07)}
.lk .olho.on{opacity:1;background:rgba(87,153,201,.18)}
.lk .go{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:4px;
  padding:14px 18px;border:0;border-radius:12px;font-family:inherit;font-size:13.5px;font-weight:800;
  letter-spacing:.02em;color:#06210F;
  background:linear-gradient(180deg,#22C55E 0%,#16A34A 100%);
  box-shadow:0 8px 20px rgba(22,163,74,.32),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform 120ms var(--e),box-shadow 180ms var(--e),filter 180ms}
.lk .go i{font-style:normal;font-size:15px;transition:transform 180ms var(--e)}
.lk .go:hover{filter:brightness(1.06);box-shadow:0 10px 26px rgba(22,163,74,.42),inset 0 1px 0 rgba(255,255,255,.32)}
.lk .go:hover i{transform:translateX(4px)}
.lk .go:active{transform:translateY(1px)}
.lk .go:disabled{filter:saturate(.35) brightness(.8);box-shadow:none;cursor:default}
.lk .go:disabled i{transform:none}
.lk .go.carregando i{animation:girapt .7s linear infinite}
@keyframes girapt{to{transform:rotate(360deg)}}
.lk .msg{margin:9px 0 12px}
/* entrada por e-mail e pedido de cadastro (06/10) */
.lk .lkin{display:block;width:100%;margin-bottom:12px;font-size:15px;font-weight:500;letter-spacing:normal;text-align:left;padding:13px 14px}
.lk .lkdica{font-size:10.5px;color:#7C8798;text-align:left;margin:-6px 0 2px;line-height:1.45}
.lk .lkcad{margin-top:14px;font-size:12px;color:#93A0B2}
.lk .lkcad button{background:none;border:0;color:#9CC8E8;font-weight:600;text-decoration:underline;cursor:pointer;font-size:12px;padding:4px}
.lk .isca{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.lk .lkok{margin-top:22px;font-size:12.5px;line-height:1.55;color:#C9D1DC;text-align:left;background:rgba(22,163,74,.12);border:1px solid rgba(22,163,74,.35);border-radius:11px;padding:14px}
/* cargos (06/10) */
.opts.g3{grid-template-columns:repeat(3,1fr)}
.pedbox{border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);background:color-mix(in srgb,var(--warn) 8%,transparent);border-radius:10px;padding:10px 12px;margin:4px 0 14px}
.pedbox>b{display:block;font-size:12.5px;margin-bottom:8px}
.cgfun{display:grid;gap:6px}
.cgl{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:8px 10px}
.cgl b{font-size:12.5px}
.cgl small{display:block;font-size:10.5px;color:var(--tx-3);margin-top:1px}
.seg3{display:inline-flex;border:1px solid var(--line-2);border-radius:8px;overflow:hidden;flex:none}
.seg3 button{min-width:44px;padding:6px 9px;font-size:11.5px;font-weight:700;background:var(--surface);color:var(--tx-3);border:0;border-left:1px solid var(--line)}
.seg3 button:first-child{border-left:0}
.seg3 button.on.nao{background:var(--surface-3);color:var(--tx-2)}
.seg3 button.on.le{background:color-mix(in srgb,var(--warn) 22%,transparent);color:var(--warn-tx)}
.seg3 button.on.sim{background:color-mix(in srgb,var(--ok) 22%,transparent);color:var(--ok-tx)}
.seg3 button:disabled{cursor:default}
@media (max-width:520px){ .cgl{flex-direction:column;align-items:stretch} .seg3{align-self:flex-end} .opts.g3{grid-template-columns:1fr} }

/* quem agendou > quem atende, dentro do card da agenda.
   O closer sai na cor dele (closers.cor), entao bate com o avatar e o ranking. */
.ap .ft .quem{display:flex;align-items:center;gap:4px;min-width:0;flex:1;font-size:10px;font-weight:600}
.ap .ft .quem .qs{color:var(--tx-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;min-width:0}
.ap .ft .quem .qsep{color:var(--tx-3);opacity:.6;flex:none}
.ap .ft .quem .qc{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto;min-width:0}
body[data-t="dark"] .ap .ft .quem .qc{color:var(--qcd,var(--tx))}
body[data-t="light"] .ap .ft .quem .qc{color:var(--qcl,var(--tx))}
/* dinheiro no canto do card: venda em verde, oportunidade em cinza pontilhado */
.ap .ft .dinh{margin-left:auto;flex:none;font-size:10px;font-weight:800;font-variant-numeric:tabular-nums}
.ap .ft .dinh.venda{color:var(--ok-tx)}
.ap .ft .dinh.oport{color:var(--tx-3);border-bottom:1px dotted var(--line-2)}

/* barra de acoes dentro da reuniao */
.acoesreu{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:13px;margin-bottom:14px;
  border-bottom:1px solid var(--line)}
.acoesreu .acbtn{padding:7px 11px;font-size:11.5px}
/* a 5a opcao de resultado ocupa a linha inteira */
.opts.g2>button:nth-child(5):last-child{grid-column:1/-1}
.opt small{display:block;font-weight:500;font-size:10px;color:var(--tx-3);margin-top:2px}
/* aviso no topo dos follow-ups + cartao de quem esta sem data */
.avisofu{display:flex;gap:9px;align-items:flex-start;margin-bottom:9px;padding:9px 11px;border-radius:9px;
  font-size:11.5px;line-height:1.5;color:var(--tx-2);text-align:left;width:100%;font-family:inherit;
  background:color-mix(in srgb,#7C4DA8 10%,transparent);
  border:1px solid color-mix(in srgb,#7C4DA8 34%,transparent)}
/* virou botao: abre a lista completa de quem esta esperando data */
button.avisofu{cursor:pointer;transition:background var(--t),border-color var(--t)}
button.avisofu:hover{background:color-mix(in srgb,#7C4DA8 17%,transparent);
  border-color:color-mix(in srgb,#7C4DA8 55%,transparent)}
button.avisofu i{margin-left:auto;align-self:center;flex:none;font-style:normal;font-weight:800;
  font-size:10.5px;letter-spacing:.03em;color:var(--pu-tx);white-space:nowrap}
.pi.espera{border-color:color-mix(in srgb,#7C4DA8 52%,transparent);
  background:color-mix(in srgb,#7C4DA8 8%,transparent)}

/* aguardando nova data: o lead pediu para remarcar e ainda nao deu o dia */
.st.aguardando{background:color-mix(in srgb,#7C4DA8 20%,transparent);color:#9B6FD0;
  border:1px dashed color-mix(in srgb,#7C4DA8 45%,transparent)}
body[data-t="light"] .st.aguardando{color:#6B3E96}
.tag.espera{background:color-mix(in srgb,#7C4DA8 16%,transparent);color:#8A5FC0}
body[data-t="light"] .tag.espera{color:#6B3E96}

/* abas de periodo dentro dos Horarios livres */
.segs{display:flex;gap:5px;background:var(--surface-2);border:1px solid var(--line);border-radius:11px;
  padding:4px;margin-bottom:14px}
.seg{flex:1;padding:9px 10px;border:1px solid transparent;border-radius:8px;background:transparent;
  font-family:inherit;font-size:12px;font-weight:700;color:var(--tx-2);white-space:nowrap;
  transition:background var(--t),color var(--t)}
.seg:hover{color:var(--tx);background:var(--surface)}
.seg.on{background:var(--surface);border-color:var(--line-2);color:var(--tx);box-shadow:var(--shadow)}
@media(max-width:520px){.segs{flex-wrap:wrap}.seg{flex:1 1 46%}}

/* painel mais largo, para os closers caberem lado a lado */
.sheet.largo{max-width:880px}
/* L2 (09/10): ficha nova - trilha, acoes no topo, dados em leitura, conversa com abas */
.sheet.fxsheet .sh{align-items:flex-start}
.sheet.fxsheet{max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);display:flex;flex-direction:column}
.sheet.fxsheet>.sh,.sheet.fxsheet>.fxtopo,.sheet.fxsheet>.sf{flex:none}
.sheet.fxsheet .sb2.fx2{flex:1 1 auto;min-height:0;max-height:none}
.fxtit{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.fxtit h4{font-size:17px;font-weight:600}
.fxpills{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fxemp{font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:99px;background:color-mix(in srgb,var(--fe) 16%,transparent);color:var(--tx)}
.fxpills .sit{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px}
.fxpills .sit.hoje{background:var(--tx);color:var(--surface)}
.fxpills .sit.falta{background:rgba(220,38,38,.10);color:var(--bad-tx)}
.fxtopo{padding:12px 18px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.fxtrilha{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px}
.fxt{padding:3px 9px;border-radius:99px;color:var(--tx-3);background:var(--surface-2)}
.fxt.feito{color:var(--tx-2)}
.fxt.atual{background:var(--tx);color:var(--surface);font-weight:600}
.fxts{color:var(--tx-3)}
.fxacoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fxetapa{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tx-2)}
.fxetapa select{min-width:170px}
.btn.fxperigo{color:var(--bad-tx);border-color:rgba(220,38,38,.35)}
.sf .fxperigo-t{color:var(--bad-tx)}
.fxsec{display:flex;justify-content:space-between;align-items:center;margin:18px 0 8px}
.fxesq>.fxsec:first-child,.fxesq>#mxc-rec-ficha+.fxsec,.fxesq>#cf-soconsulta+.fxsec{margin-top:0}
.fxsec h5{font-size:13px;font-weight:600;color:var(--tx)}
.fxgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.fxd{display:flex;flex-direction:column;gap:2px;min-width:0}
.fxd>span{font-size:11.5px;color:var(--tx-3)}
.fxd>b{font-size:13.5px;font-weight:500;overflow-wrap:anywhere}
.fxd select{width:100%}
.fxlk{margin-left:6px;font-size:12px;color:var(--ge-tx);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.fxquente{color:var(--warn-tx);font-weight:600}
.fxbts{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.btn.fxvenda{display:block;width:100%;margin-top:18px;padding:11px;color:var(--ok-tx);border-color:rgba(22,163,74,.45);font-weight:600}
.fxprox{margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
.fxprox>span{font-size:11.5px;color:var(--tx-3)}
.fxprox>b{font-size:13.5px;font-weight:500}
.fxdet{margin-top:18px}
.fxdet summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--tx-2);padding:6px 0}
.fxct{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.fxabas{display:flex;gap:4px}
.fxabas button{font-size:12px;padding:5px 9px;border-radius:7px;border:1px solid transparent;background:none;color:var(--tx-2);cursor:pointer}
.fxabas button.on{background:var(--surface);border-color:var(--line-2);color:var(--tx);font-weight:600}
.fxmud summary{cursor:pointer;font-size:12px}
.fxmud div{font-size:12px;margin-top:4px}
@media (max-width:820px){
  .fxacoes .spacer{display:none}
  .fxacoes>.btn{flex:1 1 auto;min-height:44px}
  .fxetapa{flex:1 1 100%}
  .fxetapa select{flex:1;min-width:0}
}

/* closer em destaque dentro dos Horarios livres */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:9px;margin-bottom:6px;align-items:start}
.cgrid .cbloco{margin:0;padding:11px 12px 10px;border:1px solid var(--line-2);border-left:3px solid var(--line-2);
  border-radius:11px;background:var(--surface-2)}
.cgrid .cbloco .hchip{background:var(--surface)}
/* grade de 3 colunas iguais: todo chip com a mesma largura, sempre alinhado */
.chips3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.chips3 .hchip{position:relative;width:100%;padding-left:2px;padding-right:2px;
  display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
/* almoco: so a cor muda - sem emoji, para nao empurrar nada de lugar */
.chips3 .hchip.almoco{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 42%,transparent);
  background:color-mix(in srgb,var(--warn) 10%,var(--surface))}
.chips3 .hchip.almoco:hover{border-color:var(--warn);
  background:color-mix(in srgb,var(--warn) 18%,var(--surface))}
@media(max-width:620px){.cgrid{grid-template-columns:1fr}}
.cbloco{margin:0 0 13px;padding:0 0 0 13px;border-left:2px solid var(--line-2)}
.cbloco:last-of-type{margin-bottom:4px}
.cnome{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.cnome .avt{flex:none}
.cnome .ct{flex:1;min-width:0}
.cnome .ct b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.01em;line-height:1.2}
.cemp{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:9px}
.cemp .tagco{margin:0;font-size:9.5px}
.cnome .cqtd{flex:none;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--tx-2);background:var(--surface-2);border:1px solid var(--line-2);border-radius:20px;padding:4px 9px}

/* link secreto da TV */
.linkbox{display:flex;gap:7px;align-items:center;margin-top:9px}
.linkbox input{flex:1;background:var(--surface-2);border:1px solid var(--line-2);border-radius:8px;
  padding:8px 10px;font-size:11px;font-family:ui-monospace,monospace;outline:none}

/* ---- backup ---- */
.bksit{display:flex;align-items:center;gap:12px;margin-top:13px;padding:13px 14px;border-radius:11px;
  border:1px solid var(--line-2);background:var(--surface-2)}
.bksit .ic{font-size:22px;line-height:1;flex:none}
.bksit span:nth-child(2){flex:1;min-width:0}
.bksit b{display:block;font-size:13px;font-weight:800}
.bksit small{display:block;font-size:11px;color:var(--tx-2);margin-top:3px;line-height:1.5}
.bksit.ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 8%,var(--surface-2))}
.bksit.ok b{color:var(--ok-tx)}
.bksit.warn{border-color:color-mix(in srgb,var(--warn) 42%,transparent);background:color-mix(in srgb,var(--warn) 9%,var(--surface-2))}
.bksit.warn b{color:var(--warn-tx)}
.bksit.bad{border-color:color-mix(in srgb,var(--bad) 42%,transparent);background:color-mix(in srgb,var(--bad) 8%,var(--surface-2))}
.bksit.bad b{color:var(--bad-tx)}
.bksit button{flex:none}
.bkfora{display:flex;gap:11px;align-items:flex-start;margin-top:9px;padding:11px 13px;border-radius:10px;
  border:1px dashed var(--line-2);background:var(--surface-2);font-size:11.5px}
.bkfora b{display:block;font-size:12px;margin-bottom:2px}
.bkfora small{display:block;color:var(--tx-2);line-height:1.55}
.bkfora.alerta{border-color:color-mix(in srgb,var(--warn) 46%,transparent);
  background:color-mix(in srgb,var(--warn) 7%,var(--surface-2))}
.bkdet{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.bkdet summary{font-size:11.5px;font-weight:700;color:var(--tx-2);cursor:pointer;list-style:none}
.bkdet summary::-webkit-details-marker{display:none}
.bkdet summary::before{content:'\25B8  ';color:var(--tx-3)}
.bkdet[open] summary::before{content:'\25BE  '}
.bkdet summary:hover{color:var(--tx)}
.bkdetin{padding-top:11px}
.bkdetin b{font-size:12px}
.bkdetin ol{margin:7px 0 7px 20px;font-size:11.5px;color:var(--tx-2);line-height:1.75}
.bkdetin code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:10.5px;background:var(--surface-3);
  border-radius:4px;padding:1px 5px}
.bkdetin .mini{line-height:1.6}

/* ---- editor de foto ---- */
.edwrap{position:relative;width:100%;max-width:360px;margin:0 auto 14px;aspect-ratio:1;
  border-radius:14px;overflow:hidden;background:#0E1116;box-shadow:inset 0 0 0 1px var(--line-2)}
.edwrap canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.edwrap canvas:active{cursor:grabbing}
/* escurece fora do circulo, para mostrar exatamente o que vai aparecer */
.edmask{position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 0 9999px rgba(8,11,16,.62);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 49.5%, #000 50%);
          mask:radial-gradient(circle at 50% 50%, transparent 49.5%, #000 50%)}
.edmask::after{content:'';position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.edctl{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:10px}
.edctl input[type=range]{flex:1;max-width:200px;accent-color:var(--ok)}

/* ============ PRECISAO DA ESTIMATIVA / POTENCIAL ============ */
.prec{font-variant-numeric:tabular-nums}
.prec.ok{color:var(--ok-tx)}
.prec.fora{color:var(--warn-tx)}
.fechadotag.futuro{background:color-mix(in srgb,var(--ge) 13%,var(--surface-2));
  border-color:color-mix(in srgb,var(--ge) 38%,transparent);color:var(--ge-tx)}

/* ============ PAGINACAO DO HISTORICO ============ */
.hpag{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 15px;border-top:1px solid var(--line);background:var(--surface-2)}
.hpag .btn{min-height:32px;padding:6px 11px}
.hpag .btn:disabled{opacity:.4;cursor:default}
.hpag .mini{text-align:center;flex:1}

/* ============ COPIA DO BACKUP FORA DO SERVIDOR ============ */
.bkext{margin-top:13px;padding:13px 14px;border:1px solid var(--line);border-radius:11px;
  background:var(--surface-2)}
.bkext .lin{display:flex;align-items:flex-end;gap:9px;flex-wrap:wrap;margin-top:10px}
.bkext .fld{flex:1;min-width:180px;margin:0}
.bkext .fld label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tx-3);margin-bottom:5px}
.bkext input,.bkext select{width:100%;min-height:34px;padding:7px 10px;font-size:12.5px;
  font-family:inherit;color:var(--tx);background:var(--surface);
  border:1px solid var(--line-2);border-radius:8px}
.bkext .est{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700}
.bkext .est.on{color:var(--ok-tx)}
.bkext .est.off{color:var(--tx-3)}

/* ============ AGENDA NO CELULAR ============ */
.movbtn{display:none}
.fab{display:none}   /* so existe no celular */
@media (min-width:821px){ #movlista{display:none} }
#movlista{margin-top:2px}
#movlista .mvdia{position:sticky;top:0;z-index:2;background:var(--bg);
  padding:9px 2px 7px;font-size:12px;font-weight:800;letter-spacing:.03em;
  text-transform:uppercase;color:var(--tx-3);border-bottom:1px solid var(--line)}
#movlista .mvdia.hoje{color:var(--ge-tx)}
#movlista .mvdia .qt{float:right;font-weight:700;text-transform:none;letter-spacing:0}
/* dia sem reuniao: uma linha discreta, nao um bloco vazio */
#movlista .mvvazio{display:flex;align-items:center;justify-content:space-between;gap:9px;
  padding:9px 3px;font-size:11.5px;font-weight:600;color:var(--tx-3);
  border-bottom:1px dashed var(--line);text-transform:uppercase;letter-spacing:.03em}
#movlista .mvvazio.passou{opacity:.55}
#movlista .mvvazio .qt{font-weight:500;text-transform:none;letter-spacing:0}
#movlista .mvh{display:flex;gap:9px;padding:9px 0 4px;align-items:baseline}
#movlista .mvh b{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;min-width:42px}
#movlista .mvcards{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
#movlista .ap{padding:8px 10px}
#movlista .ap .nm{font-size:13px}


/* ============ TELA: LEADS ESPERANDO DEFINIR A DATA ============ */
.agwrap{margin-top:13px}
.aglista{display:flex;flex-direction:column;gap:8px;max-height:min(58vh,520px);overflow:auto;
  padding-right:3px}
.agi{display:flex;gap:12px;align-items:stretch;padding:11px 12px;border-radius:10px;
  border:1px solid var(--line-2);background:var(--surface-2)}
.agi.warn{border-color:color-mix(in srgb,var(--warn) 46%,transparent);
  background:color-mix(in srgb,var(--warn) 7%,var(--surface-2))}
.agi.bad{border-color:color-mix(in srgb,var(--bad) 50%,transparent);
  background:color-mix(in srgb,var(--bad) 7%,var(--surface-2))}
.agi .agc{flex:1;min-width:0}
/* Esta lista e usada com o WhatsApp aberto do lado: o que a pessoa procura e o
   NOME e o FINAL DO NUMERO. Os dois ganham peso; o resto continua discreto. */
.agi .l1{display:flex;align-items:center;flex-wrap:wrap;gap:5px 9px;font-size:16px;
  font-weight:800;line-height:1.25;color:var(--tx);letter-spacing:-.2px}
.agi .l1 .dot{width:9px;height:9px;flex:none}
.agi .l1 .tel{display:inline-flex;align-items:baseline;gap:5px;font-size:15px;font-weight:800;
  color:var(--tx);background:var(--surface-3);border:1px solid var(--line-2);border-radius:8px;
  padding:2px 9px;font-variant-numeric:tabular-nums;letter-spacing:.6px;white-space:nowrap}
.agi .l1 .tel::before{content:'final';font-size:9px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--tx-3)}
.agi .l1 .tel:empty{display:none}
.agi.warn .l1 .tel{border-color:color-mix(in srgb,var(--warn) 40%,var(--line-2))}
.agi.bad  .l1 .tel{border-color:color-mix(in srgb,var(--bad) 42%,var(--line-2))}
@media (max-width:520px){
  .agi .l1{font-size:17px}
  .agi .l1 .tel{font-size:16px}
}
.agi .l2{font-size:11px;color:var(--tx-2);margin-top:3px;line-height:1.5}
.agi .l3{font-size:11px;color:var(--tx-2);margin-top:5px;padding-left:9px;line-height:1.5;
  border-left:2px solid var(--line-2)}
.agi .agd{flex:none;width:104px;display:flex;flex-direction:column;align-items:flex-end;
  justify-content:center;gap:2px;text-align:right}
.agi .dias{font-size:15px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1.15}
.agi .dias.ok{color:var(--tx-2)}
.agi .dias.warn{color:var(--warn-tx)}
.agi .dias.bad{color:var(--bad-tx)}
.agi .agd .acbtn{margin-top:6px}
@media (max-width:820px){
  .agi{flex-direction:column;gap:8px}
  .agi .agd{width:100%;flex-direction:row;align-items:center;justify-content:flex-start;gap:7px;text-align:left}
  .agi .agd .acbtn{margin-top:0;margin-left:auto}
}


/* ============================================================
   CELULAR - o sistema inteiro

   Regras que valem para todo o app abaixo de 820px. Tres ideias:
   1) nada rola na horizontal, exceto o que foi feito para rolar
      (chips e tabelas largas, com a rolagem contida na propria caixa);
   2) todo alvo de toque tem no minimo 40px de altura;
   3) todo campo tem fonte de 16px - abaixo disso o iOS da zoom sozinho
      ao focar e a tela sai de lugar.
   ============================================================ */
@media (max-width:820px){

  /* ---------- cabecalho ---------- */
  header{height:auto;min-height:52px;flex-wrap:wrap;align-items:center;
    gap:8px;row-gap:9px;padding:9px 12px}
  .brand{gap:7px;font-size:12px;flex:1;min-width:0}
  .brand .marca{width:64px}
  .brand .marca img{width:64px;height:auto}
  .brand>div{font-size:11.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .brand small{font-size:8px;letter-spacing:.09em}
  header .anobadge{display:none}
  header #painelbtns{display:none}      /* dashboard e tela de sala, nao de bolso */
  header .spacer{display:none}
  /* navegacao vira segmento de largura cheia, na propria linha */
  nav{order:9;width:100%;margin:0;gap:5px}
  nav button{flex:1;min-height:44px;font-size:13px;border-radius:10px;
    background:var(--surface-2);border:1px solid var(--line)}
  nav button.on{background:var(--accent);color:var(--accent-tx);border-color:var(--accent)}
  .who{padding:5px;gap:0;flex:none}
  .who>div{display:none}                /* so o avatar; o nome ocupa demais */
  .iconbtn{width:40px;height:40px;font-size:16px;flex:none}

  /* ---------- corpo ---------- */
  .wrap{padding:11px 11px 68px}
  .bar{gap:7px;margin-bottom:11px}
  .bar .spacer{display:none}
  .wknav{flex:1 1 100%;justify-content:space-between;padding:4px 5px}
  .wknav button{width:40px;height:40px;font-size:17px;flex:none}
  .wknav .lab{flex:1;text-align:center;padding:0 4px;font-size:12.5px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* tres por linha, sem empilhar: a barra nao pode comer a tela toda */
  .bar .btn{min-height:44px;font-size:11.5px;padding:8px 7px;flex:1 1 calc(33.333% - 5px);
    justify-content:center;white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
  /* a acao principal sai da barra e vira botao flutuante, como em app de celular.
     Tem de morar FORA da .view: ela anima e um ancestral animado prende o fixed. */
  #bnovo{display:none}
  body[data-tela="rel"] .fab,body[data-tela="config"] .fab,body[data-tela="posvenda"] .fab,body[data-tela="painel"] .fab,body[data-tela="ferramentas"] .fab{display:none}
  .fab{display:inline-flex;align-items:center;justify-content:center;
    position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:120;
    min-height:54px;padding:0 22px;border-radius:28px;font-size:15px;font-weight:700;
    border:1px solid var(--accent);background:var(--accent);color:var(--accent-tx);
    box-shadow:0 10px 26px rgba(0,0,0,.34);font-family:inherit;cursor:pointer}
  .fab:active{transform:scale(.97)}
  .chips{width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}
  .chips .t,.chip{flex:none}
  .chip{min-height:40px;padding:6px 13px;font-size:12px}

  /* agenda: a matriz horario x closer nao cabe, vira lista por dia */
  .split{flex-direction:column;gap:12px}
  .side{width:100%;max-height:none}
  .stabs button{min-height:44px;font-size:12.5px}
  .gridbox{display:none}
  #movlista{display:block}

  /* relatorios e cadastros em uma coluna */
  /* minmax(0,...) e o que deixa a coluna encolher abaixo do conteudo - sem isso
     uma tabela com min-width esticava a pagina inteira. */
  .cols{grid-template-columns:minmax(0,1fr)!important}
  .cols>*,.card,.tbox{min-width:0;max-width:100%}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .card{padding:13px}
  .tabs{width:100%;margin-bottom:12px}
  .tabs button{flex:1;min-height:42px;font-size:12.5px}

  /* tabelas largas rolam dentro da propria caixa, sem empurrar a pagina */
  .tbox{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbox>.rk{min-width:430px}
  #fatbox,#vendasbox,#cancbox{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #fatbox>table,#vendasbox>table,#cancbox>table{min-width:430px}
  .rk td,.rk th{padding-left:7px;padding-right:7px}

  /* cadastros: tabelas geradas em JS nao tem .tbox, entao o card inteiro rola */
  #s-c .card{overflow-x:auto}
  #s-c .card>*{min-width:0}
  #s-c .cols{grid-template-columns:minmax(0,1fr)!important}
  #s-c input,#s-c select{max-width:100%}
  #tvlink,#cardtv input{font-size:12px;min-height:44px}   /* URL longa: nao precisa de 16px, e so leitura */
  #hquem,#htipo{overflow-x:auto}
  /* colunas laterais do historico */
  #s-h .cols{grid-template-columns:minmax(0,1fr)!important}

  /* barra do historico: campos de largura cheia */
  #s-h .bar .selmini{flex:1 1 46%;min-width:0}
  #s-h .bar #hbusca{flex:1 1 100%;width:auto!important}
  #s-h .bar .btn{flex:1 1 100%}
  .hpag{flex-wrap:wrap;gap:8px}
  .hpag .mini{order:3;flex:1 1 100%;text-align:center}
  .hpag .btn{flex:1;min-height:44px}   /* vence o min-height:32px do desktop */

  /* ---------- janelas: folha que sobe de baixo ---------- */
  #mask{padding:0;align-items:flex-end}
  .sheet,.sheet.largo{max-width:none;width:100%;border-radius:16px 16px 0 0;
    max-height:94dvh;display:flex;flex-direction:column;
    animation:folhasobe 200ms var(--e) both;transform:none!important}
  .sheet>*{flex:none}
  .sheet>.sb2{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:15px 15px calc(15px + env(safe-area-inset-bottom))}
  .sh{padding:14px 15px;position:relative}
  .sh h4{font-size:14.5px}
  .sh .x{width:42px;height:42px;font-size:20px;flex:none}
  /* alca de arrastar: da o recado visual de que e uma folha */
  .sheet::before{content:'';position:absolute;left:50%;top:6px;transform:translateX(-50%);
    width:38px;height:4px;border-radius:3px;background:var(--line-2);pointer-events:none;z-index:3}
  .sf{padding:13px 15px calc(13px + env(safe-area-inset-bottom));flex-wrap:wrap;gap:8px}
  .sf>button,.sf>.btn{min-height:48px;flex:1 1 auto;font-size:13.5px}
  .aglista{max-height:none}

  /* ---------- formularios ---------- */
  /* 16px e o limite: abaixo disso o Safari do iPhone da zoom ao focar o campo */
  .fld input,.fld select,.fld textarea,.selmini,
  .bkext input,.bkext select,#pin,#s-atual,#s-nova,#s-rep,.lk .lkin{font-size:16px;min-height:48px}
  .fld textarea{min-height:88px}
  .fld{margin-bottom:13px}
  .btn{min-height:44px}
  .acbtn{min-height:42px;font-size:12px}
  .acoesreu{display:flex;flex-wrap:wrap;gap:7px}
  .acoesreu .acbtn{flex:1 1 46%;margin:0}
  .acbtn+.acbtn{margin-left:0}
  .segs{flex-wrap:wrap}
  .seg{flex:1 1 46%;min-height:52px}
  .cgrid{grid-template-columns:1fr}
  .chips3{grid-template-columns:repeat(3,1fr);gap:5px}
  .chips3 .hchip{min-height:46px;font-size:12px}
  input[type=color]{width:52px;height:44px}

  /* ---------- login ---------- */
  #lock{padding:0}
  .lk{width:100%;max-width:none;padding:26px 22px calc(26px + env(safe-area-inset-bottom));
    border-radius:0;min-height:100dvh;display:flex;flex-direction:column;justify-content:center}
  .lk .marca{width:180px}
  .lk h1{font-size:21px}
  .lk .go{min-height:54px}
  .lk .olho{width:48px;height:48px}
  #trocar .cx{width:100%;max-width:none;border-radius:16px 16px 0 0;padding:20px 16px}

  /* ---------- avisos e listas ---------- */
  .agi .agd .acbtn{min-height:42px}
  .bkext .lin{gap:8px}
  .bkext .fld{flex:1 1 100%;min-width:0}
  .bkext .fld[style]{max-width:none!important}
  .bkext .btn{flex:1 1 46%}
  .note,.empty{font-size:12px}
}

/* so opacidade: animar transform aqui deixava a folha 26px abaixo da tela
   quando a animacao nao completava (elemento reaproveitado a cada abertura) */
@keyframes folhasobe{from{opacity:0}to{opacity:1}}

/* telefone estreito de verdade (iPhone SE, 360px) */
@media (max-width:430px){
  .kpis{grid-template-columns:minmax(0,1fr)}
  .seg{flex:1 1 100%}
  .acoesreu .acbtn{flex:1 1 100%}
  .chips3{grid-template-columns:repeat(2,1fr)}
  .agi{flex-direction:column;gap:9px}
  .agi .agd{width:100%;flex-direction:row;align-items:center;gap:8px;text-align:left}
  .agi .agd .acbtn{margin-top:0;margin-left:auto}
  .brand>div{display:none}          /* so a marca; o texto nao cabe */
  .brand .marca{width:72px}
  .brand .marca img{width:72px}
}

/* toque: nada de hover preso depois do tap, e destaque de toque limpo */
@media (hover:none){
  .ap:hover,.btn:hover,.chip:hover,.mbtn:hover,.pi:hover{transform:none}
  *{-webkit-tap-highlight-color:rgba(87,153,201,.18)}
}

#movlista .mvdia.flash{animation:mvflash 1s var(--e) both}
@keyframes mvflash{0%{background:color-mix(in srgb,var(--ge) 26%,var(--bg))}100%{background:var(--bg)}}

@media (max-width:820px){
  #toast{left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom));
    max-width:none;text-align:center}
  .sheet .rev .rr{flex-wrap:wrap}
  .sheet .steps{padding:10px 15px}
  .lock .demo{font-size:11px}
  .pend{max-height:none}
  .spane{max-height:none}
  /* a folha de baixo precisa caber quando o teclado do celular abre */
  #mask.on{align-items:flex-end}
}
/* a marca e clicavel: precisa parecer clicavel */
.brand[role="button"]{cursor:pointer;border-radius:10px;padding:2px 6px;margin-left:-6px;
  transition:background var(--t) var(--e),opacity var(--t) var(--e)}
.brand[role="button"]:hover{background:var(--surface-2)}
.brand[role="button"]:active{opacity:.72}
/* as respostas do formulario, uma linha por pergunta */
.respostas{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.respostas .rlin{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:10px;
  padding:8px 11px;border-bottom:1px solid var(--line);font-size:12.5px}
.respostas .rlin:last-child{border-bottom:0}
.respostas .rp{color:var(--tx-3);font-weight:700}
.respostas .rr{color:var(--tx);font-weight:600}
@media (max-width:520px){ .respostas .rlin{grid-template-columns:1fr;gap:2px} }
/* no claro, surface-2 fica a 5 pontos do fundo da pagina e as colunas somem;
   aqui elas ganham corpo sem mudar a identidade */
body[data-t="light"] .crmcol{background:#EAEEF3;border-color:#D6DDE6}
body[data-t="light"] .crmcol>.ch{background:#EAEEF3}
body[data-t="light"] .crmcard{border-color:#DFE5EC;box-shadow:0 1px 2px rgba(16,24,40,.04)}
/* ---- CRM: quadro de colunas ---- */
.crmboard{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding:2px 2px 14px;
  min-height:60vh;scrollbar-width:thin}
.cfdono{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;padding:9px 12px;
  border:1px solid var(--line-2);border-radius:11px;background:var(--surface-2);
  font-size:12.5px;font-weight:600}
.cfdono small{font-weight:400;font-size:11px;color:var(--tx-3)}
.cfdono.orfao{border-color:var(--warn);background:transparent;color:var(--warn-tx);font-weight:500}
.selmini.orfao{border-color:var(--warn);color:var(--warn-tx)}
.crmcol .bast{font-size:9.5px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;
  color:var(--tx-3);border-bottom:1px dashed var(--line-2);padding:0 0 5px;margin:0 0 6px}
.crmcol .dono{font-size:10px;font-weight:600;color:var(--tx-3);margin-top:3px}
.crmcol .dono b{color:var(--warn-tx);font-weight:700}
.crmcol{flex:0 0 268px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;
  display:flex;flex-direction:column;max-height:calc(100vh - 210px)}
.crmcol.alvo{border-color:var(--ge);background:color-mix(in srgb,var(--ge) 8%,var(--surface-2))}
.crmcol>.ch{padding:11px 12px 9px;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:var(--surface-2);border-radius:12px 12px 0 0;z-index:1}
.crmcol .cn{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:800;color:var(--tx)}
/* 09/10: o "i" de cada etapa - objetivo, o que fazer, proxima acao */
.etinfo{width:20px;height:20px;padding:0;border:none;border-radius:50%;background:transparent;color:var(--tx-3);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.etinfo:hover,.etinfo:focus-visible{color:var(--tx);background:var(--surface-3)}
.etinfo-sec{margin:0 0 14px}.etinfo-sec b{display:block;font-size:12px;color:var(--tx-3);margin-bottom:4px}
.etinfo-sec p{margin:0;font-size:14px;line-height:1.5;color:var(--tx);white-space:pre-line}
.crmcol .cn .d{width:9px;height:9px;border-radius:50%;flex:none}
.crmcol .cn .qt{margin-left:auto;font-size:11px;font-weight:800;color:var(--tx-3)}
.crmcol .ct{margin-top:3px;font-size:11px;color:var(--tx-2);font-variant-numeric:tabular-nums}
.crmcol .ct .est{font-weight:500;font-size:10px;color:var(--tx-3);margin-left:5px;font-variant-numeric:normal}
.crmcol .lista{padding:9px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}
/* 09/10: a borda inteira e da cor da empresa (inline, em crmBorda), de 5% a 25% conforme
   o card fica sem atualizacao. A faixa da esquerda saiu; a borda cinza fica so para card sem empresa. */
.crmcard{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:9px;padding:9px 10px;cursor:grab;transition:transform var(--t) var(--e),box-shadow var(--t) var(--e)}
/* quem e o dono do card, no canto: foto ou iniciais de PESSOAS. Sem dono, um
   circulo tracejado ambar - o mesmo aviso da ficha, so que visivel no quadro */
.crmcard .dono{position:absolute;top:7px;right:7px;pointer-events:none}
.crmcard .dono.orfao{width:22px;height:22px;border-radius:50%;border:1.5px dashed var(--warn)}
.crmcard .n{padding-right:26px}
.crmcard:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.16)}
.crmcard:active{cursor:grabbing}
.crmcard.voando{opacity:.4}
.crmcard .n{font-size:13px;font-weight:800;color:var(--tx);line-height:1.3;
  display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;overflow-wrap:anywhere}
.crmcard .fin{font-size:11.5px;font-weight:800;color:var(--tx-2);background:var(--surface-3);
  border-radius:5px;padding:1px 6px;font-variant-numeric:tabular-nums}
.crmcard .v{margin-top:5px;font-size:13px;font-weight:800;color:var(--ok-tx);font-variant-numeric:tabular-nums}
.crmcard .v.est{color:var(--tx-3);font-weight:700}   /* 29/10 (bloco C): valor padrao do formulario = estimativa */
.crmcard .m{margin-top:4px;font-size:10.5px;color:var(--tx-3);line-height:1.45}
.crmvazio{padding:16px 10px;text-align:center;font-size:11.5px;color:var(--tx-3)}
@media (max-width:860px){
  .crmboard{min-height:auto;padding-bottom:90px}
  .crmcol{flex:0 0 82vw;max-height:none}
}
/* ---- lista de colaboradores ---- */
.rk.equipe td{vertical-align:middle;padding-top:9px;padding-bottom:9px}
/* os tres botoes cabem numa linha so: quebrar deixava a linha com o dobro da altura */
.rk.equipe th:nth-child(2){width:24%}
.rk.equipe th:nth-child(5),.rk.equipe td:nth-child(5){width:258px}
.rk.equipe .acol{flex-wrap:nowrap;justify-content:flex-end}
@media (max-width:1100px){
  .rk.equipe th:nth-child(5),.rk.equipe td:nth-child(5){width:auto}
  .rk.equipe .acol{flex-wrap:wrap}
}
.fchip{display:inline-block;padding:3px 10px;border-radius:99px;font-size:11px;font-weight:800;
  letter-spacing:.2px;white-space:nowrap;color:var(--fc);
  border:1px solid color-mix(in srgb,var(--fc) 45%,transparent);
  background:color-mix(in srgb,var(--fc) 12%,transparent)}
/* ---- area do closer / pre-vendas ---- */
.selocloser{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:99px;
  background:var(--ge,#5799C9);color:#fff;font-size:10px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;vertical-align:middle}
.avisopapel{margin:4px 0 2px;padding:16px 18px;border-radius:12px;line-height:1.65;font-size:13px;
  color:var(--tx-2);background:var(--bg-2);border:1px dashed var(--bd)}
.avisopapel b{display:block;margin-bottom:6px;color:var(--tx);font-size:14px}
.tagacesso{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:3px 9px;border-radius:99px;
  background:rgba(87,153,201,.14);color:var(--ge,#5799C9);font-size:11px;font-weight:700;white-space:nowrap}
/* o SDR mantem a coluna do dia, mas nao tem aba de follow-up - nem no celular */
body[data-area="sdr"] nav.tabbar button[data-t="fup"]{display:none}

body[data-area="sdr"] .stabs button:nth-child(2){display:none}
body[data-area="sdr"] .stabs{grid-template-columns:1fr}
/* o closer so tem uma linha na grade: repetir o nome dele em toda linha e ruido */
body[data-area="closer"]:not([data-alcance="time"]) .ccell,body[data-area="closer"]:not([data-alcance="time"]) .ccol{display:none}
/* L4 (09/10): caixa normal em rotulos, etiquetas e cabecalhos (a caixa alta espacada
   cortava status e so fazia ruido); o botao principal das janelas no tamanho certo, na direita */
.fld label,.pgrp .pt,.pi .tag,.st,.ap .co,.tagoff,.hi .h1 .act,.qlab,.kpi .k,.pfil label,.crmcol .bast,.cnome .cqtd,
.hday,.prk .l,.prfr .l,.senhabox .n,.chips .t,.who .lbl,#v-agenda .agres .hj,#v-agenda .agst,thead th.day em,
.bkext .fld label,#movlista .mvdia,#movlista .mvvazio,.agi .l1 .tel::before,.selocloser,thead th,table.rk th{text-transform:none;letter-spacing:normal}
.fld label{font-size:12.5px;font-weight:600;color:var(--tx-2)}
.pgrp .pt,#v-agenda .agst,.qlab{font-size:12.5px;font-weight:600;color:var(--tx-2)}
.pi .tag,.st,.tagoff,.hi .h1 .act{font-size:11px;font-weight:600}
.ap .co{font-size:10px;font-weight:700}
.kpi .k,.prk .l,.prfr .l,.hday,thead th,table.rk th,.pfil label{font-size:11.5px}
.sf .go2{flex:0 0 auto;margin-left:auto;min-width:140px;background:var(--accent);color:var(--accent-tx);border-color:var(--accent)}
.sf .go2:disabled{background:var(--surface-3);color:var(--tx-3);border-color:var(--line-2)}
.hrow .hic{flex:none;display:grid;place-items:center;border-radius:7px;background:var(--surface-2);border:1px solid var(--line)}
.hic:empty::after{content:'';width:9px;height:9px;border-radius:50%;background:currentColor}
.bksit .ic:empty{display:none}

/* ============ K (31/10): Agenda com calendario, tarefas e pedido de bloqueio ============
   js/calendario.js desenha. Cores por tipo: tarefa azul, reuniao roxa, follow-up ambar, grupo verde,
   bloqueio cinza; texto pequeno usa a versao -tx (contraste AA nos dois temas). Feriado de folga hachurado. */
body[data-t="light"]{--k-tar:#3F7FB3;--k-tar-bg:#E9F2FA;--k-tar-tx:#245E8C;--k-reu:#7B4A93;--k-reu-bg:#F3ECF6;--k-reu-tx:#5E3473;
  --k-fu:#C26A05;--k-fu-bg:#FCF2E1;--k-fu-tx:#8A4D04;--k-gru:#2F8A4E;--k-gru-bg:#E8F5EC;--k-gru-tx:#1F6B3A;
  --k-hatch:#EEF1F5;--k-hatch-l:#DCE2EA;--k-warn-bg:#FEF4E4;--k-bad-bg:#FDECEC}
body[data-t="dark"]{--k-tar:#6AA8D6;--k-tar-bg:#16263A;--k-tar-tx:#8EC1E6;--k-reu:#B48BD0;--k-reu-bg:#271D31;--k-reu-tx:#C9A6DE;
  --k-fu:#E8952A;--k-fu-bg:#2C2213;--k-fu-tx:#F0A33C;--k-gru:#4CC27A;--k-gru-bg:#14281B;--k-gru-tx:#6FD69A;
  --k-hatch:#191D24;--k-hatch-l:#262C36;--k-warn-bg:#2B2112;--k-bad-bg:#2E1717}
.k-tarefa{--c:var(--k-tar);--c-bg:var(--k-tar-bg);--c-tx:var(--k-tar-tx)}
.k-reuniao{--c:var(--k-reu);--c-bg:var(--k-reu-bg);--c-tx:var(--k-reu-tx)}
.k-followup{--c:var(--k-fu);--c-bg:var(--k-fu-bg);--c-tx:var(--k-fu-tx)}
.k-grupo{--c:var(--k-gru);--c-bg:var(--k-gru-bg);--c-tx:var(--k-gru-tx)}
.k-bloq{--c:var(--tx-3);--c-bg:var(--surface-3);--c-tx:var(--tx-2)}
.k-pedido{--c:var(--warn);--c-bg:transparent;--c-tx:var(--warn-tx)}

/* topo da Agenda: as duas visoes e as acoes */
.agtopo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 12px}
.agtopo .kesp{flex:1}
.kseg{display:inline-flex;background:var(--surface-3);border-radius:9px;padding:3px;gap:2px}
.kseg button{padding:6px 13px;border-radius:7px;color:var(--tx-2);font-weight:500;font-size:12.5px}
.kseg button.on{background:var(--surface);color:var(--tx);font-weight:600;box-shadow:var(--shadow)}
.kcnt{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--bad);color:#fff;font-size:10.5px;font-weight:700;margin-left:6px}
.agcal{display:none}
#v-agenda.modo-cal>.bar,#v-agenda.modo-cal>.agres,#v-agenda.modo-cal>.split,#v-agenda.modo-cal>style+.split{display:none!important}
#v-agenda.modo-cal>.agcal{display:block}
@media (max-width:860px){.agtopo{display:none!important}#v-agenda.modo-cal>.agcal{display:none}#v-agenda.modo-cal>.bar,#v-agenda.modo-cal>.split{display:flex!important}}

/* cabecalho e barras do calendario */
.kcalhead{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-bottom:12px}
.knv{display:flex;align-items:center;gap:6px;flex:1;min-width:0}
.knv h3{font-size:18px;font-weight:700;margin:0 0 0 6px;letter-spacing:-.01em}
.knv h3 small{display:block;font-size:12px;font-weight:500;color:var(--tx-3);letter-spacing:0}
.kar{width:34px;height:34px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);font-size:16px;display:grid;place-items:center}
.kcalbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-bottom:12px}
.kpbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.kplbl{font-size:12px;color:var(--tx-3)}
.kpav{display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-size:12px;font-weight:500}
.kpav.on{border-color:var(--tx);box-shadow:0 0 0 1px var(--tx)}
.kav{width:24px;height:24px;border-radius:999px;background:var(--c,#5B6B8C);color:#fff;font-size:10px;font-weight:700;display:inline-grid;place-items:center;flex:none}
.kav.kavt{background:var(--surface-3);color:var(--tx-2)}
.kmini{width:16px;height:16px;border-radius:999px;background:var(--c);color:#fff;font-size:8.5px;font-weight:700;display:inline-grid;place-items:center;flex:none}
.kfbar{display:flex;flex-wrap:wrap;gap:6px}
.kfch{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:12px;color:var(--tx-3)}
.kfch i{width:10px;height:10px;border-radius:3px;border:2px solid var(--c)}
.kfch.on{color:var(--tx);font-weight:500}
.kfch.on i{background:var(--c)}

/* itens */
.kchip{display:flex;align-items:center;gap:4px;width:100%;min-width:0;padding:2px 6px 2px 5px;border-radius:5px;font-size:11.5px;line-height:16px;text-align:left;background:var(--c-bg);border:0;border-left:3px solid var(--c);color:var(--tx)}
.kchip.k-pedido{box-shadow:inset 0 0 0 1px var(--warn);border-left-style:dashed}
.kchip:hover{filter:brightness(.97)}
.kchip .ktt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.kchip .khr{font-variant-numeric:tabular-nums;color:var(--c-tx);font-weight:600;flex:none}
.kpr{color:var(--bad-tx);font-weight:800;flex:none}
.kchip.feita{opacity:.7}
.kchip.feita .ktt{text-decoration:line-through;color:var(--tx-3)}
.kok{color:var(--ok-tx);font-weight:700;flex:none}
.kchip.atras{box-shadow:inset 0 0 0 1px var(--bad)}
.kchip.passada{opacity:.62}
.kchip[draggable="true"]{cursor:grab}
.ked{width:7px;height:7px;border-radius:2px;flex:none;display:inline-block}
.kftag{font-size:10.5px;line-height:15px;padding:1px 7px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:100%;font-weight:500;border:0}
.kftag.ffolga{background:var(--surface-3);color:var(--tx-2)}
.kftag.fatende{background:var(--k-gru-bg);color:var(--k-gru-tx)}
.kftag.fparc{background:var(--surface-3);color:var(--tx-2);box-shadow:inset 3px 0 0 var(--k-gru)}
.kftag.fred{background:var(--k-warn-bg);color:var(--warn-tx)}
.kftag.fnorm{background:transparent;color:var(--tx-3);border:1px solid var(--line)}
.kftag.fpend{background:transparent;color:var(--warn-tx);border:1px dashed var(--warn)}
.kdia.folga,.kwad.folga,.kwc.folga{background:repeating-linear-gradient(135deg,var(--k-hatch) 0 6px,var(--k-hatch-l) 6px 7px)!important}

/* mes */
.kmes{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.kmhd,.kmgr{display:grid;grid-template-columns:repeat(5,minmax(0,1fr)) repeat(2,minmax(0,.72fr))}
.kmhd div{padding:8px 10px;font-size:11px;font-weight:600;color:var(--tx-3);border-bottom:1px solid var(--line)}
.kdia{min-height:122px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:6px;display:flex;flex-direction:column;gap:4px;cursor:pointer;min-width:0}
.kdia:nth-child(7n){border-right:0}
.kdia.fds,.kdia.fora{background:var(--surface-2)}
.kdia.fora .kdn{color:var(--tx-3);font-weight:500}
.kdh{display:flex;align-items:center;gap:6px;min-width:0}
.kdn{font-size:12px;font-weight:600;min-width:22px;height:22px;display:inline-grid;place-items:center;border-radius:999px;flex:none;font-variant-numeric:tabular-nums}
.kdia.hoje .kdn{background:var(--accent);color:var(--accent-tx)}
.kits{display:flex;flex-direction:column;gap:3px;min-width:0}
.kmais{font-size:11px;color:var(--tx-2);text-align:left;padding:1px 6px;border-radius:4px;font-weight:500;background:none;border:0}
.kmais:hover{background:var(--surface-3)}
.kalvo{outline:2px dashed var(--k-tar);outline-offset:-3px;background:var(--k-tar-bg)!important}

/* semana */
.ksem{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.kwg{display:grid;grid-template-columns:52px repeat(5,minmax(0,1fr)) repeat(2,minmax(0,.72fr))}
.kwhd{padding:8px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:3px;min-width:0;border-bottom:1px solid var(--line)}
.kwhd span{font-size:11px;color:var(--tx-3);font-weight:600}
.kwhd b{font-size:15px;font-variant-numeric:tabular-nums}
.kwhd.hoje b{color:var(--k-tar-tx)}
.kwh>div:first-child{border-bottom:1px solid var(--line)}
.kwl{font-size:10.5px;color:var(--tx-3);padding:6px 6px 0 0;text-align:right}
.kwa .kwl{border-bottom:1px solid var(--line)}
.kwb .kwl{padding:0}
.kwad{border-left:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px;display:flex;flex-direction:column;gap:3px;min-height:34px;min-width:0}
.kwc{position:relative;border-left:1px solid var(--line);min-width:0}
.kwc.fds{background:var(--surface-2)}
.ksl{border-bottom:1px solid var(--line)}
.khl{padding:3px 6px 0 0;text-align:right;font-variant-numeric:tabular-nums}
.kwi{position:absolute;display:flex}
.kwi .kchip{height:100%;align-items:flex-start;padding-top:3px;flex-wrap:wrap;align-content:flex-start}
.kagora{position:absolute;left:0;right:0;height:2px;background:var(--bad);z-index:2;pointer-events:none}

/* lista, painel do dia, ficha */
.klista{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:6px 6px 12px}
.klista.kdl,.klista.kficha{border:0;padding:0;background:none}
.klsec{font-size:12px;font-weight:700;margin:14px 10px 4px;color:var(--tx-2)}
.klsec.bad{color:var(--bad-tx)}
.kfp{margin:0 10px}
.kldh{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--tx-2);padding:10px 10px 4px}
.klrow{display:flex;align-items:center;gap:10px;padding:7px 10px;border-bottom:1px solid var(--line);min-width:0}
.klrow:last-child{border-bottom:0}
.klmain{display:flex;align-items:center;gap:8px;flex:1;min-width:0;text-align:left;padding:2px 0;background:none;border:0;color:var(--tx)}
.klh{font-variant-numeric:tabular-nums;color:var(--tx-2);font-weight:600;font-size:12px;flex:none;min-width:38px}
.kltag{font-size:10.5px;padding:1px 6px;border-radius:4px;background:var(--c-bg);color:var(--c-tx);font-weight:600;flex:none}
.klrow.k-pedido .kltag{box-shadow:inset 0 0 0 1px var(--warn)}
.kltt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:0 1 auto}
.klcard{font-size:11.5px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.klcard::before{content:'\00B7  '}
.klmeta{font-size:11.5px;color:var(--tx-3);white-space:nowrap;flex:none}
.klrow.feita .kltt{text-decoration:line-through;color:var(--tx-3)}
.klrow.atras .klh{color:var(--bad-tx)}
.kck{width:20px;height:20px;border:1.5px solid var(--line-2);border-radius:6px;display:grid;place-items:center;font-size:12px;flex:none;color:#fff;font-weight:700;background:var(--surface)}
.kck:hover:not(:disabled){border-color:var(--ok)}
.kck.on{background:var(--ok-bg,var(--ok));border-color:var(--ok-bg,var(--ok))}
.kckx{width:20px;height:20px;flex:none;display:grid;place-items:center}
.kckx::before{content:'';width:8px;height:8px;border-radius:2px;background:var(--c)}
.kvazio{color:var(--tx-3);font-size:12.5px;padding:10px;margin:0}
.ksec{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--tx-3);margin:12px 0 4px;font-weight:700}

/* janelas */
.ksub{margin:0 0 12px;color:var(--tx-3);font-size:12.5px;line-height:1.5}
.krow3{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.8fr) minmax(0,1.3fr);gap:11px}
.kopc{text-transform:none;letter-spacing:0;font-weight:500}
.kprio{display:flex;border:1.5px solid var(--line-2);border-radius:9px;overflow:hidden;height:40px}
.kprio button{flex:1;font-size:12px;color:var(--tx-2);border:0;border-left:1px solid var(--line-2);background:var(--surface-2)}
.kprio button:first-child{border-left:0}
.kprio button.on{background:var(--accent);color:var(--accent-tx);font-weight:600}
.kprio button.on.alta{background:var(--bad);color:#fff}
.kaviso{background:var(--surface-2);color:var(--tx-2);border-radius:8px;padding:8px 10px;font-size:12px;line-height:1.45;margin:0 0 12px}
.kaviso.aviso{background:var(--k-warn-bg);color:var(--warn-tx)}
.kcsel{display:flex;align-items:center;gap:8px;border:1.5px solid var(--line-2);border-radius:9px;padding:6px 6px 6px 12px;background:var(--surface-2)}
.kcsel span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kcp{position:relative}
.kcpl{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:4px;z-index:5;max-height:220px;overflow:auto}
.kcpl button{width:100%;text-align:left;padding:7px 8px;border-radius:7px;display:flex;align-items:center;gap:8px;background:none;border:0;color:var(--tx)}
.kcpl button:hover{background:var(--surface-2)}
.kcpl small{color:var(--tx-3);margin-left:auto}
.kmenu{display:flex;flex-direction:column;gap:2px;border:1px solid var(--line);border-radius:10px;padding:4px;margin-bottom:12px}
.kmenu button{text-align:left;padding:8px 10px;border-radius:7px;background:none;border:0;color:var(--tx)}
.kmenu button small{display:block;color:var(--tx-3);font-size:11px}
.kmenu button:hover{background:var(--surface-2)}
.sf .kesp{flex:1;border:0;padding:0}
.sf .kesp~.go2{flex:none}
.sf .kperigo{color:var(--bad-tx);border-color:var(--bad)}
.ktag{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--surface-3);color:var(--tx-2);white-space:nowrap}
.ktag.ok{background:var(--ok);color:#fff}
.ktag.bad{color:var(--bad-tx)}
.kplist{display:flex;flex-direction:column;gap:8px}
.kped{border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:12.5px}
.kped .kaviso{margin:0}
.kph{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kph b{flex:1;min-width:180px}
.kpa{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.kpa button{padding:8px 14px;border-radius:9px;font-size:12.5px;font-weight:600;border:1px solid var(--line-2);background:var(--surface)}
.kpa .go2{background:var(--ok);color:#fff;border-color:var(--ok)}
.kpa input{border:1.5px solid var(--line-2);border-radius:9px;padding:7px 10px;background:var(--surface-2);flex:1;min-width:160px;font-size:12.5px}

/* grade de Agendar: pedido esperando e o clique do closer */
.kpmark{font-size:10px;border:1px dashed var(--warn);color:var(--warn-tx);border-radius:4px;padding:1px 4px;margin:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#v-agenda td.slot.kpede{cursor:pointer}
#v-agenda td.slot.kpede:hover{background:var(--k-warn-bg)}

/* CRM: selo da tarefa no card */
.ktselo{display:inline-block;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:999px;margin-top:4px}
.ktselo.hoje{background:var(--k-tar-bg);color:var(--k-tar-tx)}
.ktselo.bad{background:var(--k-bad-bg);color:var(--bad-tx)}

/* Inicio: tarefas no Meu dia */
.ini-sub{display:flex;align-items:center;gap:8px;margin:10px 0 4px;font-size:12px}
.ini-sub b{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--tx-3)}
.ini-sub span{color:var(--tx-3);flex:1}
.ini-tar{display:flex;align-items:center;gap:10px}
.ini-tarb{text-align:left;background:none;border:0;color:var(--tx);flex:1;min-width:0}
.ini-tar.feita b{text-decoration:line-through;color:var(--tx-3)}
.ini-tar.atras .ini-tarb span{color:var(--bad-tx)}
.ktipo{height:auto;min-height:40px}
.ktipo button{padding:8px 6px;line-height:1.25}
.sheet.ktar .sf button{white-space:nowrap}
.kcsel .btxt{white-space:nowrap;font-size:12px}
.kficha .klcard{display:none}
/* K: a regra geral de botao do mobile.css (button{min-height;border-radius} com !important) nao vale para as
   pecas pequenas do calendario; a classe, mais especifica, ganha com !important tambem */
.kchip,.kmais,.kftag,.kpav,.kfch,.klmain,.kck,.kcpl button,.kmenu button,.kcsel .btxt,.kcsel .x,.kseg button,.kprio button,.kar{min-height:0!important}
.kchip{border-radius:5px!important}
.kck{border-radius:6px!important;height:20px;min-width:20px}
.kpav,.kfch,.kftag{border-radius:999px!important}
.kmais{border-radius:4px!important}
.klmain{border-radius:0!important}
.kseg button{border-radius:7px!important}
.kprio button{border-radius:0!important}
.kar{border-radius:9px!important}
/* R1 (02/11): venda lancada depois do dia em que fechou ("lancada com atraso", "venda de dd/mm") */
.vatraso{display:inline-block;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:999px;margin-top:3px;background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn-tx)}
/* O1 (02/11): organograma (Configuracoes > Organograma; js/organograma.js) */
.orgbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0 14px}
.orgbusca{height:32px;border:1px solid var(--line-2);border-radius:8px;background:var(--surface);padding:0 10px;font-size:12.5px;width:190px}
.orgcont{display:flex;flex-wrap:wrap;gap:6px}
.orgcont span{font-size:11.5px;color:var(--tx-2);background:var(--surface-2);border-radius:999px;padding:3px 10px}
.orgcont span b{color:var(--tx)}
.orgcont span.atn{background:color-mix(in srgb,var(--warn) 13%,transparent);color:var(--warn-tx)}
.orgarv{display:flex;flex-direction:column;gap:2px}
.orgfil{margin-left:22px;padding-left:12px;border-left:1px solid var(--line-2);display:flex;flex-direction:column;gap:2px}
.orgno{display:flex;align-items:center;gap:10px;width:100%;max-width:640px;text-align:left;padding:6px 9px;border-radius:9px!important;border:1px solid transparent;background:none}
.orgno:hover{background:var(--surface-2);border-color:var(--line)}
.orgno.ro{opacity:.75}
.orgtx{display:flex;flex-direction:column;min-width:0;flex:1}
.orgtx b{font-size:13px;font-weight:600}
.orgtx small{font-size:11.5px;color:var(--tx-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orgqt{font-size:11px;color:var(--tx-2);background:var(--surface-3);border-radius:999px;padding:2px 8px;white-space:nowrap}
.orgtag{font-size:10.5px;font-weight:600;border-radius:999px;padding:1px 7px;white-space:nowrap}
.orgtag.sem{background:var(--surface-3);color:var(--tx-2)}
.orgtag.desl{background:color-mix(in srgb,var(--bad) 12%,transparent);color:var(--bad-tx)}
.orgtag.fora{background:color-mix(in srgb,var(--warn) 13%,transparent);color:var(--warn-tx)}
.orgtag.novo{background:color-mix(in srgb,var(--ge) 15%,transparent);color:var(--ge-tx)}
.orgsec{margin-top:18px}
.orgsec h4{font-size:12.5px;font-weight:600;margin-bottom:4px}
.orgsec h4 span{font-weight:500;color:var(--tx-3);margin-left:4px}
.orgsoltos{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:4px;margin-top:8px}
.orglin{display:flex;align-items:center;gap:12px}
.orglin .orgno{flex:1}
.orgrsp{font-size:11.5px;color:var(--tx-3);white-space:nowrap}
.orgtab td{vertical-align:middle}
.orgtab td small{display:block;font-size:11px;color:var(--tx-3)}
.orgtab select{max-width:260px;width:100%;height:30px;border:1px solid var(--line-2);border-radius:7px;background:var(--surface);color:var(--tx);padding:0 8px;font-size:12.5px}
.orgpes{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.orgmud td{background:color-mix(in srgb,var(--ge) 7%,transparent)}
.orgori{color:var(--ge-tx)!important}
.orgrod{position:sticky;bottom:0;display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:10px 0 2px;background:var(--surface);font-size:12px;color:var(--tx-2)}
.orgrod span{flex:1}
.okbox{display:flex;gap:9px;border-radius:9px;padding:10px 12px;font-size:11.5px;line-height:1.5;background:color-mix(in srgb,var(--ok) 10%,transparent);border:1px solid color-mix(in srgb,var(--ok) 35%,transparent)}