/* ============================================================
   RepCom · Painel Gerencial — TEMA ESCURO (v10 · RepCom 4.0, mocks 11/07/2026)
   Base do c29 (dark neutro + indigo, Inter vendorada) com as premissas novas
   dos mocks do usuário: cantos ARREDONDADOS (raio 10/8), cards com barra de
   acento colorida por contexto, stat-cards com delta, pills semânticos,
   sidebar com item ativo em pílula + "Recolher menu", topbar com ajuda (?).
   --teal LEGADO remapeado p/ indigo-400: as classes não mudam de nome.
   JS mínimo (kanban, autosubmit, anti duplo-submit, recolher) — CSP com nonce.
   ============================================================ */
/* Inter vendorada (variable font, licença OFL em vendor/fonts/LICENSE-Inter.txt) —
   a fonte do preset; fallback do stack cobre ambientes sem o arquivo */
@font-face{font-family:"Inter";src:url("vendor/fonts/InterVariable.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
:root{
  /* superfícies — dark neutro do preset shadcn b3m6YR0pc */
  --bg:#0A0A0A;                 /* canvas */
  --navy:#111111;               /* sidebar / chrome (mais escuro) */
  --card:#171717;               /* superfície de cartão */
  --card2:#262626;              /* cartão elevado / hover / zebra */
  --line:rgba(255,255,255,.10);   /* preset: border */
  --line2:rgba(255,255,255,.15);  /* preset: input */
  --zebra:rgba(255,255,255,.025);
  --field:#101010;                /* fundo de campos (inputs/selects) */
  /* tipografia */
  --font-sans:Inter,-apple-system,"Segoe UI Variable Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* texto */
  --ink:#FAFAFA;                /* primário (quase branco) */
  --ink2:#D4D4D4;              /* secundário */
  --gray:#A3A3A3;              /* labels / muted */
  --faint:#737373;             /* muito apagado */
  /* ação primária indigo (preset) + acentos de apoio */
  --primary:#3730A3;           /* preset: primary (fundo de botões) */
  --primary-fg:#E0E7FF;        /* preset: primary-foreground */
  --teal:#818CF8;              /* legado: hoje acento indigo-400 (links/valores) */
  --teal-deep:#4338CA;
  --cyan:#22D3EE;
  --indigo:#6366F1;
  --violet:#A78BFA;
  --orange:#FB923C;--laranja:var(--orange);
  --pink:#F472B6;
  --ok:#34D399;--warn:#FBBF24;--bad:#F87171;
  --ok-deep:#10B981;--warn-deep:#D9930B;--bad-deep:#DC2626;
  /* gradientes quase chapados (estética flat do preset) */
  --g-brand:linear-gradient(135deg,#4338CA,#3730A3);
  --g-teal:linear-gradient(135deg,#6366F1,#4338CA);
  --g-cyan:linear-gradient(135deg,#38BDF8,#0284C7);
  --g-violet:linear-gradient(135deg,#A78BFA,#7C3AED);
  --g-orange:linear-gradient(135deg,#FB923C,#EA580C);
  --g-pink:linear-gradient(135deg,#F472B6,#DB2777);
  --g-ok:linear-gradient(135deg,#34D399,#059669);
  --g-bad:linear-gradient(135deg,#F87171,#DC2626);
  /* raio ARREDONDADO (RepCom 4.0 — os mocks de 11/07 substituem o radius 0) */
  --r:0;--r-sm:0;--raio:0;   /* c38: arestas RETAS de volta (pedido do usuario; o 10/8 do c33 saiu) */
  --shadow:0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.35);
  --shadow-lift:0 0 0 1px rgba(255,255,255,.10),0 8px 24px rgba(0,0,0,.45);
  --glow-teal:0 0 0 1px rgba(99,102,241,.35),0 8px 28px rgba(99,102,241,.15);
  /* rampa LARANJA oficial do preset — séries de gráfico leem estes tokens */
  --chart-1:#FDBA74;
  --chart-2:#F97316;
  --chart-3:#EA580C;
  --chart-4:#C2410C;
  --chart-5:#9A3412;
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-sans);color:var(--ink);
  background:var(--bg);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
a{color:var(--teal);text-decoration:none}
a:hover{color:#A5B4FC}
main{max-width:1340px;margin:0 auto;width:100%;padding:26px 30px 54px}
::selection{background:rgba(99,102,241,.28)}
/* scrollbar discreta no tema escuro */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:var(--r-sm);border:3px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2);background-clip:padding-box}

/* ===== app shell: sidebar 240px + área principal ===== */
.app{display:flex;min-height:100vh}
.sidebar{width:240px;flex-shrink:0;background:var(--navy);color:#fff;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;padding:14px 10px;
  border-right:1px solid rgba(255,255,255,.06);box-shadow:1px 0 0 rgba(255,255,255,.02)}
/* marca 2 andares (paridade ERP): logo RAIU grande + linha do programa (tile R + wordmark) */
.side-logo{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:8px 8px 16px;text-decoration:none}
.side-app{display:flex;align-items:center;gap:11px}
.side-mark{width:34px;height:34px;flex-shrink:0;border-radius:10px;background:var(--g-brand);color:var(--primary-fg);font-weight:900;font-size:17px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 4px 14px rgba(67,56,202,.35)}
.side-name{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.side-name b{font-weight:800;font-size:19px;letter-spacing:.2px;
  background:linear-gradient(115deg,#E0E7FF 0%,#A5B4FC 55%,#67E8F9 115%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.side-name small{font-weight:600;font-size:9px;color:var(--gray);letter-spacing:1.6px;text-transform:uppercase;margin-top:3px}
/* PC-20: seletor de módulo — idêntico ao ERP (cantos retos; ativo no gradiente). PC-21: vive no centro da topbar */
/* ajuste medido no DOM (sidebar 240px → coluna 95px): "pedidos · cadastros" quebrava em
   2 linhas com 9.5px/padding 10; minmax(0,1fr) mantém as colunas IGUAIS, small 9px/-.2px
   em 1 linha (ellipsis = rede de segurança). O ERP espelha (nota PC-20 na ponte). */
.mod-switch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px;padding:4px;margin:0 8px 4px;
  background:rgba(255,255,255,.05);border:1px solid var(--line)}
.mod-switch a{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 6px 8px 8px;min-width:0;
  text-decoration:none;color:var(--gray);transition:background .15s,color .15s}
.mod-switch a b{font-size:12.5px;font-weight:800;letter-spacing:.2px;color:inherit}
.mod-switch a small{font-size:9px;font-weight:500;letter-spacing:-.2px;color:inherit;opacity:.75;
  white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.mod-switch a:hover{background:rgba(255,255,255,.05);color:var(--ink2)}
.mod-switch a.on{background:var(--g-brand);color:var(--primary-fg);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 4px 14px rgba(67,56,202,.35)}
.mod-switch a.off{opacity:.45;cursor:not-allowed}
.mod-switch a:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.mod-switch a{transition:none}}
.side-nav{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.side-group{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.9px;color:var(--faint);padding:16px 12px 6px}
.side-link{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-sm);color:var(--gray);font-weight:600;font-size:13px;
  text-decoration:none;transition:background .14s,color .14s,box-shadow .14s;position:relative}
.side-link:hover{background:rgba(255,255,255,.05);color:#fff}
/* ativo RepCom 4.0: pílula indigo-tinta arredondada (mocks 11/07) */
.side-link.on{background:rgba(99,102,241,.16);color:#fff;font-weight:700;border-radius:var(--r-sm)}
.side-link.on .ico{stroke:var(--teal)}
.side-link .ico{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Recolher menu (RepCom 4.0): sidebar 68px só-ícones; estado persiste em localStorage */
.side-recolher{display:flex;align-items:center;gap:10px;width:100%;margin-top:6px;padding:8px 12px;
  background:none;border:0;border-top:1px solid rgba(255,255,255,.08);border-radius:0;
  color:var(--faint);font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.side-recolher:hover{color:#fff}
.side-recolher .ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;transition:transform .18s}
html.side-min .sidebar{width:68px;padding:14px 8px}
html.side-min .side-name,html.side-min .side-group,html.side-min .side-link span,
html.side-min .side-recolher span,html.side-min .side-logo-img{display:none}
html.side-min .side-logo{align-items:center;padding:6px 0 14px}
html.side-min .side-app{justify-content:center}
html.side-min .side-link{justify-content:center;padding:9px 0}
html.side-min .side-recolher{justify-content:center}
html.side-min .side-recolher .ico{transform:rotate(180deg)}
/* .side-user/.su-* aposentados (PC-21): a identidade da sessão vive no perfil da topbar */
/* acessibilidade: foco visivel por teclado (nao afeta clique de mouse) + reducao de movimento */
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}
/* Onda Visual 2: ícones Tabler inline via macro _icones.html + logo RAIU na sidebar */
.ico-t{width:14px;height:14px;flex-shrink:0;vertical-align:-2px}
/* logo escura enviada no gerenciador vira BRANCA sobre o fundo escuro: invert acende o traço
   e o screen "come" o fundo (funciona com PNG transparente E com fundo branco chapado) */
.side-logo-img{height:46px;max-width:180px;align-self:flex-start;object-fit:contain;object-position:left;
  background:transparent;border-radius:0;padding:0;
  filter:invert(1) hue-rotate(180deg);mix-blend-mode:screen}
.wpp{display:inline-flex;align-items:center;gap:5px}
.wpp .ico-t{width:13px;height:13px}
button.mini .ico-t,a.mini .ico-t,label.mini .ico-t,.btn-voltar .ico-t{width:12px;height:12px;vertical-align:-2px}
.t-check button.checkbox .ico-t{width:14px;height:14px;vertical-align:middle}
.traj-arrow .ico-t{width:18px;height:18px}
/* input de arquivo do "Trocar" logo (ciclo 30): oculto mas focavel (a11y) dentro do label */
.vh-file{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.troca-form{display:inline}
.nome-form{display:flex;gap:4px;align-items:center}
.app-main{flex:1;min-width:0;display:flex;flex-direction:column}
/* PC-21: topbar unificada (CSS LITERAL do contrato — idêntica ao ERP). 3 zonas: status |
   seletor de módulo | ações da sessão (Atualizar · ? · ⚑ · | · Perfil ▾ com menu) */
.topbar{display:flex;align-items:center;gap:10px;padding:0 18px;height:56px;border-bottom:1px solid var(--line);
  background:rgba(10,10,10,.7);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
.tb-status{font-size:11.5px;color:var(--gray);display:flex;align-items:center;gap:8px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .mod-switch{margin:0 auto;min-width:260px;padding:3px;gap:3px}
.topbar .mod-switch a{flex-direction:row;align-items:baseline;gap:7px;padding:6px 12px}
.tb-acoes{display:flex;align-items:center;gap:6px;margin-left:auto}
.tb-ico{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--gray);border:1px solid transparent;
  cursor:pointer;font-weight:800;font-size:14px;text-decoration:none;background:none;font-family:inherit}
.tb-ico:hover,.tb-ico[aria-expanded="true"]{color:var(--ink);background:rgba(255,255,255,.06);border-color:var(--line)}
.tb-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tb-sep{width:1px;height:22px;background:var(--line);margin:0 4px}
.tb-perfil{display:flex;align-items:center;gap:9px;padding:4px 8px 4px 4px;border:1px solid transparent;cursor:pointer;background:none;color:inherit;font-family:inherit}
.tb-perfil:hover,.tb-perfil[aria-expanded="true"]{background:rgba(255,255,255,.06);border-color:var(--line)}
.tb-av{width:28px;height:28px;background:var(--card2);color:var(--ink);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line2)}
.tb-perfil .who{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.tb-perfil .who b{font-size:12.5px;font-weight:700}
.tb-perfil .who small{font-size:9.5px;color:var(--faint);letter-spacing:.6px;text-transform:uppercase;margin-top:2px}
.tb-perfil .chev{color:var(--faint);font-size:10px;margin-left:2px}
.menu{position:absolute;right:18px;top:52px;width:250px;background:var(--card);border:1px solid var(--line2);
  box-shadow:0 0 0 1px rgba(255,255,255,.06),0 12px 32px rgba(0,0,0,.5);z-index:9}
.menu .cab{padding:12px 14px 10px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center}
.menu .cab .tb-av{width:34px;height:34px;font-size:14px}
.menu .cab b{display:block;font-size:13px}.menu .cab small{display:block;font-size:11px;color:var(--faint)}
.menu .grp{font-size:9.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--faint);padding:10px 14px 4px}
.menu a,.menu button{display:flex;align-items:center;gap:10px;width:100%;padding:8px 14px;color:var(--ink2);font-size:13px;font-weight:600;
  text-decoration:none;background:none;border:0;font-family:inherit;cursor:pointer;text-align:left}
.menu a:hover,.menu button:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.menu .ico{width:14px;height:14px;opacity:.7}
.menu .sair{border-top:1px solid var(--line);margin-top:6px}.menu .sair button{color:var(--bad)}
/* balão de relato ancorado no ícone do topo: abre para BAIXO, à direita */
.topbar .relato-pop{top:calc(100% + 8px);bottom:auto;right:0;left:auto}
.topbar .relato-pop::before{top:-6px;bottom:auto;left:auto;right:12px;border:0;border-left:1px solid rgba(255,255,255,.16);border-top:1px solid rgba(255,255,255,.16)}
/* complementos locais (fora do literal): o menu nasce oculto (atributo hidden); o balão no topo
   precisa de largura própria (na lateral ele era left/right:12px); ⚑ aceso com o balão aberto;
   o form do Atualizar é só invólucro do POST com CSRF; ícones do menu no traço do sprite */
.menu[hidden]{display:none}
.topbar .relato-pop{width:min(380px,72vw)}
.topbar .relato-balao[open] .tb-ico{color:var(--ink);background:rgba(255,255,255,.06);border-color:var(--line)}
.tb-form{display:flex;margin:0}
.menu .ico{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
@media(max-width:880px){
  .app{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static;flex-direction:row;align-items:center;gap:8px;padding:10px 12px;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(255,255,255,.06)}
  .side-logo{flex-direction:row;align-items:center;gap:10px;padding:4px 6px}
  .side-logo-img{height:26px;align-self:center}.side-name small{display:none}
  .side-nav{flex-direction:row;gap:2px}.side-group{display:none}
  .side-link span{white-space:nowrap}
  .topbar{position:static}
  /* PC-21 (contrato): status some; seletor desce em linha própria; perfil só avatar */
  .topbar{height:auto;flex-wrap:wrap;padding:8px 10px;gap:8px}
  .tb-status{display:none}.topbar .mod-switch{order:3;width:100%;min-width:0}.tb-perfil .who{display:none}
}
.fonte .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#34D399;margin-right:5px;box-shadow:0 0 8px rgba(52,211,153,.8)}
.rodape{max-width:1340px;margin:0 auto;width:100%;padding:18px 30px 30px;color:var(--gray);font-size:11.5px}
.rodape code{background:rgba(255,255,255,.06);padding:1px 5px;border-radius:var(--r-sm);color:var(--ink2)}

/* status dot do topbar */
.tb-status .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#34D399;margin-right:6px;box-shadow:0 0 9px rgba(52,211,153,.85)}

/* filtros */
.filtros{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;background:var(--card);
  border-radius:var(--r);padding:12px 14px;margin-bottom:16px;box-shadow:var(--shadow)}
.campo{display:flex;flex-direction:column;gap:4px}
.campo label{font-size:11px;color:var(--gray);font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.campo input,.campo select{padding:8px 10px;border:1px solid var(--line2);border-radius:var(--r-sm);font-size:13px;min-width:150px;background:var(--field);color:var(--ink)}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.campo select{min-width:200px;max-width:260px}
.botoes{flex-direction:row;align-items:center;gap:10px}
/* botao SOLIDO da marca — fonte unica (B17); identidade do preset: uppercase + tracking */
.filtros button,.monit-salvar{background:var(--g-brand);color:var(--primary-fg);border:0;padding:9px 18px;border-radius:var(--r-sm);font-weight:600;cursor:pointer;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.07em}
.filtros button:hover,.monit-salvar:hover{filter:brightness(1.12)}
.limpar{font-size:12px;color:var(--gray)}
.resumo-linha{color:var(--ink);font-weight:600;margin:6px 2px 16px}

/* kpis (flat: barra de acento à esquerda, sem halo radial) */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:10px 0 24px}
.kpi{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 19px 16px;box-shadow:var(--shadow);
  transition:box-shadow .16s,transform .16s;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;height:100%;width:3px;background:var(--g-brand);opacity:.9}
.kpi:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.kpi .v{font-size:28px;font-weight:800;color:#fff;line-height:1.04;letter-spacing:-.6px}
.kpi .r{font-size:11px;color:var(--gray);text-transform:uppercase;letter-spacing:.5px;margin-top:9px;font-weight:600}
/* drill-down (ciclo 31): balão KPI clicável (Diário/CRM -> Pedidos) e link discreto de célula */
a.kpi-link{display:block;text-decoration:none;color:inherit;cursor:pointer}
a.kpi-link:hover .r{color:var(--teal)}
.cel-link{color:inherit;text-decoration:none;border-bottom:1px dotted var(--line2)}
.cel-link:hover{color:var(--teal);border-bottom-color:var(--teal)}
/* variações de acento por posição (colorido por card, flat) */
.kpis .kpi:nth-child(6n+2)::before{background:var(--g-cyan)}
.kpis .kpi:nth-child(6n+3)::before{background:var(--g-violet)}
.kpis .kpi:nth-child(6n+4)::before{background:var(--g-orange)}
.kpis .kpi:nth-child(6n+5)::before{background:var(--g-pink)}
.kpis .kpi:nth-child(6n+0)::before{background:var(--g-ok)}

/* graficos */
.graficos{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px;margin-bottom:10px}
.graficos figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)}
.graficos img{width:100%;height:auto;display:block}

/* secoes */
h1{color:#fff;font-size:21px;font-weight:700;letter-spacing:-.3px;margin:6px 0 3px}
h2.sec{color:var(--ink);font-size:15px;font-weight:700;border-left:3px solid var(--indigo);
  padding-left:11px;margin:32px 0 13px;letter-spacing:.1px}
.sec-hint{font-weight:400;font-size:11.5px;color:var(--gray);letter-spacing:0;text-transform:none;margin-left:8px}
h3{color:var(--ink);font-size:13px;margin:4px 0 8px}
.ind[title]{cursor:help}
p{color:var(--ink2)}

/* tabelas (densidade Tabler) */
.tabela-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow)}
table.tab{width:100%;border-collapse:collapse;font-size:13px;color:var(--ink2)}
table.tab th{background:rgba(255,255,255,.03);color:var(--gray);text-align:left;padding:8px 12px;font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.6px;white-space:nowrap;border-bottom:1px solid var(--line2)}
table.tab td{padding:9px 12px;border-bottom:1px solid var(--line)}
table.tab tbody tr:last-child td{border-bottom:0}
table.tab tbody tr:nth-child(even){background:var(--zebra)}
table.tab tbody tr:hover{background:rgba(255,255,255,.045)}
table.tab td.num,table.tab th.num{text-align:right;white-space:nowrap}
table.tab b,table.tab strong{color:var(--ink)}
table.tab tfoot td{background:rgba(99,102,241,.08);font-weight:800;color:var(--ink);border-top:2px solid var(--teal)}
table.tab small{color:var(--gray)}

/* caixas */
.caixa{border-radius:var(--r-sm);padding:13px 16px;margin:14px 0;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink2)}
.caixa b{color:var(--ink)}
.caixa p{margin:6px 0 0;color:var(--ink2)}
.caixa.comoler{background:rgba(99,102,241,.05);border-top:3px solid var(--teal)}
.caixa.analise{background:rgba(251,146,60,.05);border-top:3px solid var(--orange)}
.caixa.notas{background:rgba(255,255,255,.03);border-top:2px solid var(--gray);font-size:12px}
.caixa.notas ul{margin:6px 0 0;padding-left:18px}
.caixa.notas li{margin:3px 0;color:var(--ink2)}

/* cards (índice de relatórios etc.) */
.cabecalho-sec{margin-bottom:8px}
.cabecalho-sec p{color:var(--ink2);margin:4px 0 12px}
.botao-sec{display:inline-block;background:var(--g-brand);color:var(--primary-fg);padding:9px 16px;border-radius:var(--r-sm);font-weight:600;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.07em}
/* redeclara color no hover: sem isso a:hover vencia e o texto sumia no fundo */
.botao-sec:hover{filter:brightness(1.12);color:var(--primary-fg)}
.botao-sec.ghost{background:rgba(255,255,255,.04);color:var(--teal);border:1px solid var(--line2)}
.botao-sec.ghost:hover{background:rgba(99,102,241,.10);border-color:var(--teal);color:var(--teal);filter:none}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
.card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:block;
  transition:box-shadow .16s,transform .16s,border-color .16s;box-shadow:var(--shadow);overflow:hidden}
.card::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--g-brand);opacity:0;transition:opacity .16s}
.card:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px);border-color:var(--line2)}
.card:hover::before{opacity:1}
.card-id{font-size:11px;font-weight:800;color:var(--teal);letter-spacing:.4px}
.card-tit{font-size:15px;font-weight:700;color:var(--ink);margin:3px 0 5px}
.card-sub{font-size:11.5px;color:var(--gray)}
.card-res{font-size:12px;color:var(--ink2);margin-top:8px;border-top:1px dashed var(--line2);padding-top:7px}
.rel-topo .voltar{font-size:12px}
.rel-sub{color:var(--ink2);margin:2px 0 10px}
.downloads{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.duas-colunas{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:720px){.duas-colunas{grid-template-columns:1fr}}

/* ---- operacional / metas ---- */
.kpi-inline{font-size:18px;font-weight:800;color:var(--ink)}
/* mes corrente 4.0: 4 pcards (as .proj-* antigas morreram no c37) */
.barra{height:12px;background:rgba(255,255,255,.07);border-radius:var(--r-sm);overflow:hidden;margin:6px 0}
.barra-fill{height:100%;border-radius:var(--r-sm);background:var(--g-brand)}
.barra-fill.ok{background:var(--g-ok)}.barra-fill.warn{background:var(--g-orange)}.barra-fill.bad{background:var(--g-bad)}
.barra-slim{height:7px;margin:8px 0 6px}
.mes4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0 16px}
@media (max-width:1000px){.mes4{grid-template-columns:1fr 1fr}}
.pcard .pv.ok{color:var(--ok)}.pcard .pv.warn{color:var(--warn)}.pcard .pv.bad{color:var(--bad)}
.pcard .pd.ok{color:var(--ok)}.pcard .pd.warn{color:var(--warn)}.pcard .pd.bad{color:var(--bad)}
.pcard .pd b{color:inherit}
.sugestoes{margin:8px 0 14px}
.sug{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--gray);
  border-radius:var(--r-sm);padding:10px 13px;margin:7px 0;font-size:13px;color:var(--ink2);box-shadow:var(--shadow)}
.sug.alerta{border-left-color:var(--bad);background:rgba(248,113,113,.05)}
.sug.acao{border-left-color:var(--teal);background:rgba(99,102,241,.05)}
.sug.ok{border-left-color:var(--ok);background:rgba(52,211,153,.05)}
.sug b{color:var(--ink)}
.sug .tag{font-size:10px;font-weight:800;letter-spacing:.4px;padding:3px 8px;border-radius:var(--r-sm);background:rgba(255,255,255,.1);color:#fff;white-space:nowrap}
.sug.alerta .tag{background:var(--g-bad);color:#2A0810}.sug.acao .tag{background:var(--g-brand);color:var(--primary-fg)}.sug.ok .tag{background:var(--g-ok);color:#04231A}

/* pílulas (tinturadas no escuro) */
.pill{display:inline-block;padding:3px 10px;border-radius:var(--r-sm);font-weight:700;font-size:11.5px}
.pill-sm{font-size:10px}
.pill-xs{font-size:9px}
.ind-exp-flat{border-top:none;padding-top:6px}
/* Lançamentos (monitorados) — controles seguem o tema (.filtros/.campo do Explorar) */
.monit-check{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink2);padding-bottom:9px}
.monit-inline{display:inline-flex;gap:6px;align-items:center}
.monit-busca{display:flex;gap:8px;align-items:center;margin:8px 0 12px;max-width:640px}
.monit-busca input[type=text]{flex:1;padding:9px 12px;border:1px solid var(--line2);border-radius:var(--r-sm);
  font-size:13px;background:var(--field);color:var(--ink)}
.monit-busca input[type=text]:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.obs-min{opacity:.85;margin-top:4px}
.monit-flash{background:rgba(99,102,241,.08);border:1px solid var(--line2);border-left:3px solid var(--teal);
  border-radius:var(--r-sm);padding:9px 12px;font-size:12.5px;margin:8px 0;max-width:900px}
/* indicadores da guia usam o componente .ind padrao (Saude/Radar); so o valor e' mais compacto */
.monit-grid{margin:4px 0 6px}
.monit-grid .ind-val{font-size:22px}
/* secoes recolhiveis com o MESMO titulo h2.sec das demais guias (details nativo) */
.monit-sec{margin:0}
.monit-sec>summary{list-style:none;cursor:pointer}
.monit-sec>summary::-webkit-details-marker{display:none}
.monit-sec>summary h2.sec::after{content:" ▸";color:var(--teal);font-size:12px}
.monit-sec[open]>summary h2.sec::after{content:" ▾"}
.monit-sec>summary:hover h2.sec{color:#fff}
.monit-acoes{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:10px 0 4px}
.monit-sub{margin-top:18px}
a.btn-sec{text-decoration:none;display:inline-block}
.monit-lote{margin:6px 0 12px;max-width:640px}
.monit-lote summary{cursor:pointer;color:var(--teal);font-size:12.5px}
.monit-lote-form{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.monit-lote-form textarea{background:var(--field);color:var(--ink);border:1px solid var(--line2);
  border-radius:var(--r-sm);padding:8px;font:inherit;font-size:12.5px}
.monit-lote-form button{align-self:flex-start}
.btn-sec{background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--teal);
  font-weight:600;padding:7px 12px;border-radius:var(--r-sm);cursor:pointer;font-size:11px;
  text-transform:uppercase;letter-spacing:.06em}
.btn-sec:hover{background:rgba(99,102,241,.10);border-color:var(--teal)}   /* hover "acende" unificado (V5/ciclo 17) */
/* .btn-sec.perigo: receita vermelha agrupada com button.mini.perigo (fonte unica — B15/ciclo 20) */
.btn-xs2{padding:2px 8px;font-size:10.5px;font-weight:600}
.monit-gestao{margin-bottom:14px}
.monit-fora{margin:8px 0;font-size:12px;color:var(--ink2)}
.monit-cli{margin:2px 0;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.monit-peds{color:var(--ink2);font-size:10.5px}
.monit-salvar{margin:8px 0}   /* estilo-nucleo unificado com .filtros button (B17) — aqui so a margin propria */
.monit-export{margin:8px 0 16px;font-size:13px}
.tab textarea{width:100%;min-width:260px;background:var(--field);color:var(--ink);
  border:1px solid var(--line2);border-radius:var(--r-sm);padding:6px;font:inherit;font-size:12px}
.pill.ok{background:rgba(52,211,153,.16);color:#5FE3AE}
.pill.warn{background:rgba(251,191,36,.16);color:#FBD24E}
.pill.bad{background:rgba(248,113,113,.16);color:#FF9AAA}
td.up{color:var(--ok);font-weight:600}td.down{color:var(--bad);font-weight:600}

.erro-box{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--bad);border-radius:var(--r);padding:30px;text-align:center;max-width:620px;margin:30px auto;box-shadow:var(--shadow)}
.erro-cod{font-size:48px;font-weight:800;color:var(--bad);line-height:1}
.erro-dica{color:var(--gray);font-size:12px;margin-top:14px}

/* ---- saude / cockpit (flat: sem halo radial) ---- */
.saude-hero{display:flex;gap:24px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 28px;margin:10px 0 8px;
  /* overflow VISIBLE (fix 18/08): o balão de ajuda do h1 abre PARA FORA do card —
     com hidden ele nascia cortado dentro da caixa (reporte do usuário) */
  border-left:5px solid var(--line2);box-shadow:var(--shadow);position:relative;overflow:visible}
.saude-hero.ok{border-left-color:var(--ok)}.saude-hero.warn{border-left-color:var(--warn)}.saude-hero.bad{border-left-color:var(--bad)}
.score-box{display:flex;align-items:center;gap:12px}
.score{font-size:56px;font-weight:800;line-height:1;color:var(--gray)}
.score.ok{color:var(--ok)}.score.warn{color:var(--warn)}.score.bad{color:var(--bad)}
.score-lab{font-size:11px;color:var(--gray);text-transform:uppercase;letter-spacing:.5px}
.score-lab b.ok{color:var(--ok)}.score-lab b.warn{color:var(--warn)}.score-lab b.bad{color:var(--bad)}
.score-resumo h1{margin:0 0 4px}.score-resumo p{margin:0;color:var(--ink2);font-size:13px}
.score-resumo b{color:var(--ink)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--gray);vertical-align:middle}
.dot.ok{background:var(--ok)}
.dot.warn{background:var(--warn)}
.dot.bad{background:var(--bad)}
.score-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.ind{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:17px 18px;border-left:4px solid var(--line2);box-shadow:var(--shadow);
  transition:box-shadow .16s,transform .16s}
.ind:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)}
.ind.ok{border-left-color:var(--ok)}.ind.warn{border-left-color:var(--warn)}.ind.bad{border-left-color:var(--bad)}
.ind-top{display:flex;justify-content:space-between;align-items:center}
.ind-nome{font-weight:700;color:var(--ink);font-size:12.5px}
.cad{font-size:9px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink2);background:rgba(255,255,255,.08);padding:2px 7px;border-radius:var(--r-sm)}
.ind-val{font-size:24px;font-weight:800;color:#fff;margin:9px 0 3px;letter-spacing:-.4px}
.tend{font-size:11px;font-weight:700}.tend.up{color:var(--ok)}.tend.down{color:var(--bad)}.tend.flat{color:var(--gray)}
.ind-meta{font-size:11px;color:var(--gray)}
.ind-acao{font-size:12px;margin:6px 0 4px;color:var(--ink2)}
.ind-acao b{color:var(--ink)}
.ind-exp{font-size:10.5px;color:var(--gray);border-top:1px dashed var(--line2);padding-top:5px;margin-top:5px}
.decisoes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px}
.dec{display:flex;gap:14px;background:var(--card);border:1px solid var(--line);border-top:3px solid var(--teal);border-radius:var(--r);padding:17px 19px;box-shadow:var(--shadow)}
.dec-num{font-size:28px;font-weight:800;color:var(--teal);line-height:1}
.dec-t{font-weight:700;color:var(--ink);font-size:13.5px}
.dec-v{color:var(--ok);font-weight:800;margin-left:4px}
.dec-d{font-size:12px;color:var(--ink2);margin-top:4px}
.dec-d b{color:var(--ink)}
.traj{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;margin:6px 0}
.traj-col{flex:1;min-width:170px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 16px;text-align:center;box-shadow:var(--shadow)}
.traj-col.inercia{border-top:3px solid var(--gray)}
.traj-col.saudavel{border-top:3px solid var(--ok);background:rgba(52,211,153,.05)}
.traj-lab{font-size:11px;color:var(--gray)}.traj-lab small{font-size:10px}
.traj-val{font-size:24px;font-weight:800;color:#fff;margin-top:6px}
.traj-ganho{font-size:12px;font-weight:700;color:var(--ok);margin-top:3px}
.traj-arrow{display:flex;align-items:center;font-size:18px;color:var(--gray);font-weight:800}
.traj-nota{font-size:12.5px;color:var(--ink2);background:rgba(251,146,60,.05);
  border-left:3px solid var(--orange);border-radius:var(--r-sm);padding:11px 14px;margin:10px 0}
.traj-nota b{color:var(--ink)}

/* diario call-list */
.call-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.call{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:17px 19px;border-top:3px solid var(--teal);box-shadow:var(--shadow)}
.call h3{margin:0 0 2px;color:var(--ink)}.call-sub{font-size:11px;color:var(--gray);margin:0 0 8px}
.call table.tab td{font-size:12px}

/* ponte anual 4.0: cards horizontais com setas (as .ponte-row antigas morreram no c37) */
.ponte4{display:flex;gap:6px;align-items:stretch;flex-wrap:wrap}
.pcard{flex:1;min-width:150px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 15px;box-shadow:var(--shadow)}
.pcard .pl{font-weight:700;color:var(--gray);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px}
.pcard .pv{font-size:19px;font-weight:800;color:#fff;margin-top:4px}
.pcard .pd{font-size:11px;color:var(--gray);margin-top:4px}
.pseta{display:flex;align-items:center;color:var(--faint)}
.pseta .ico-t{width:16px;height:16px}
@media (max-width:900px){.pseta{display:none}.pcard{min-width:45%}}

/* ---- autenticacao / admin ---- */
.auth-body{background:radial-gradient(900px 600px at 70% -10%,#1C1C1C,#0A0A0A 60%);min-height:100vh;display:flex;align-items:center;justify-content:center;margin:0;color:var(--ink);font-family:var(--font-sans)}
.auth-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:28px;width:360px;max-width:92vw;box-shadow:var(--shadow-lift)}
.auth-logo{font-size:22px;font-weight:800;color:#fff;letter-spacing:.5px}
.auth-logo b,.auth-logo span{background:linear-gradient(135deg,#A5B4FC,#6366F1);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-sub{font-size:11.5px;color:var(--gray);margin-bottom:18px}
.auth-h1{font-size:18px;color:var(--ink);margin:0 0 14px}
.auth-form label{display:block;font-size:11px;font-weight:700;color:var(--gray);text-transform:uppercase;letter-spacing:.3px;margin:10px 0 4px}
.auth-form input{width:100%;padding:11px;border:1px solid var(--line2);border-radius:var(--r-sm);font-size:14px;background:var(--field);color:var(--ink)}
.auth-form input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.auth-form button{width:100%;margin-top:16px;background:var(--g-brand);color:var(--primary-fg);border:0;padding:12px;border-radius:var(--r-sm);font-weight:600;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.07em;cursor:pointer}
.auth-form button:hover{filter:brightness(1.12)}
.auth-link{display:inline-block;margin-top:14px;font-size:12.5px}
.auth-info{font-size:12.5px;color:var(--ink2)}
.msg{border-radius:var(--r-sm);padding:10px 13px;font-size:13px;margin:10px 0}
.msg.erro{background:rgba(251,111,132,.12);color:#FF9AAA;border:1px solid rgba(251,111,132,.3)}
.msg.ok{background:rgba(52,211,153,.12);color:#5FE3AE;border:1px solid rgba(52,211,153,.3)}
.msg.aviso{background:rgba(251,191,36,.1);color:#FBD24E;border:1px solid rgba(251,191,36,.28)}
.msg.aviso code{background:rgba(255,255,255,.08);padding:2px 6px;border-radius:var(--r-sm);word-break:break-all;color:var(--ink)}
.form-vert{max-width:380px;display:flex;flex-direction:column;gap:4px}
.form-vert label{font-size:11px;font-weight:700;color:var(--gray);text-transform:uppercase;margin-top:8px}
.form-vert input{padding:10px 11px;border:1px solid var(--line2);border-radius:var(--r-sm);font-size:14px;background:var(--field);color:var(--ink)}
.form-vert input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.form-vert button{margin-top:14px;align-self:flex-start;background:var(--g-brand);color:var(--primary-fg);border:0;padding:10px 20px;border-radius:var(--r-sm);font-weight:600;cursor:pointer;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.07em}
.form-vert button:hover{filter:brightness(1.12)}   /* solidos "acendem" por brilho */
td.acoes{white-space:nowrap}
td.acoes form{display:inline}
button.mini,a.mini,label.mini{font-size:10.5px;padding:5px 10px;border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--ink2);border-radius:var(--r-sm);cursor:pointer;margin:1px;
  text-transform:uppercase;letter-spacing:.05em;font-weight:600;text-decoration:none;display:inline-block;position:relative}
button.mini:hover,a.mini:hover,label.mini:hover{background:rgba(99,102,241,.10);border-color:var(--teal);color:var(--ink)}   /* acende (V5/ciclo 17) */
button.mini.perigo,.btn-sec.perigo{color:var(--bad);border-color:rgba(248,113,113,.4)}   /* receita "perigo" unica (B15) */
button.mini.perigo:hover,.btn-sec.perigo:hover{background:rgba(248,113,113,.12);border-color:var(--bad);color:var(--bad)}   /* perigo acende em vermelho */

/* ---- CRM / tarefas ---- */
.crm-grid{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start}
.form-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:3px;box-shadow:var(--shadow)}
.form-card label{font-size:11px;font-weight:700;color:var(--gray);text-transform:uppercase;margin-top:8px}
.form-card input[type=text],.form-card input:not([type]),.form-card input[type=date],.form-card select{padding:9px 10px;border:1px solid var(--line2);border-radius:var(--r-sm);font-size:13px;background:var(--field);color:var(--ink)}
.form-card input:focus,.form-card select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.form-card label.check{flex-direction:row;text-transform:none;font-weight:400;font-size:12.5px;color:var(--ink2);display:flex;gap:7px;align-items:center;margin-top:10px}
.form-card button{margin-top:12px;background:var(--g-brand);color:var(--primary-fg);border:0;padding:10px;border-radius:var(--r-sm);font-weight:600;cursor:pointer;
  font-size:11.5px;text-transform:uppercase;letter-spacing:.07em}
.form-card button:hover{filter:brightness(1.12)}
.pref-box{background:rgba(99,102,241,.07);border:1px solid rgba(99,102,241,.16);border-radius:var(--r-sm);padding:11px 13px;margin-top:12px;font-size:12.5px;color:var(--ink2)}
.pref-box .check{display:flex;gap:7px;align-items:center}
.hint-sm{font-size:11px;color:var(--gray);margin-top:6px}
.escopos{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.escopos a{font-size:11px;padding:6px 12px;border-radius:var(--r-sm);background:rgba(255,255,255,.04);border:1px solid var(--line2);color:var(--ink2);
  text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.escopos a:not(.on):hover{border-color:var(--teal);color:var(--ink)}   /* feedback de hover nas abas (B17) */
.escopos a.on{background:var(--primary);color:var(--primary-fg);border-color:transparent;font-weight:700}
.tarefa{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;margin-bottom:8px;box-shadow:var(--shadow)}
.tarefa.feita{opacity:.55}
.tarefa.feita .t-tit{text-decoration:line-through}
.t-check button.checkbox{width:24px;height:24px;border-radius:var(--r-sm);border:2px solid var(--teal);background:transparent;color:var(--teal);font-weight:800;cursor:pointer;line-height:1}
.t-check button.checkbox:hover{background:rgba(99,102,241,.12)}   /* acende (V5/ciclo 17) */
.tarefa.feita .checkbox{background:var(--teal);color:#101010}
.tarefa.feita .checkbox:hover{background:var(--teal)}   /* feita continua solida no hover (nao "desliga") */
.t-corpo{flex:1}
.t-tit{font-weight:700;color:var(--ink);font-size:13.5px}
.t-meta{font-size:11.5px;color:var(--gray);margin-top:3px}
.tag-ok{font-size:9.5px;background:var(--ok);color:#04231A;padding:2px 7px;border-radius:var(--r-sm);margin-left:5px;vertical-align:middle;font-weight:700}
.tag-lem{font-size:9.5px;background:var(--orange);color:#2A1B07;padding:2px 7px;border-radius:var(--r-sm);margin-left:5px;vertical-align:middle;font-weight:700}
.t-acoes{display:flex;flex-direction:column;gap:5px;align-items:flex-end}
.reag{display:flex;gap:4px;align-items:center}
.reag input[type=date]{font-size:11px;padding:4px 6px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--field);color:var(--ink)}

/* ---- aniversarios ---- */
.aniv-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.aniv{display:flex;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 13px;margin-bottom:7px;box-shadow:var(--shadow)}
.aniv.hoje{border:1px solid rgba(251,146,60,.5);background:rgba(251,146,60,.06)}
.aniv-corpo{flex:1}
.aniv-nome{font-weight:700;color:var(--ink);font-size:13px}
.aniv-sub{font-size:11.5px;color:var(--gray)}
/* WhatsApp — botao GENERAL (usado em Aniversarios, Diario, Tarefas via macro _wa.html) */
.wpp{display:inline-block;background:#25D366;color:#04230F;font-weight:700;font-size:11px;padding:7px 13px;border-radius:var(--r-sm);text-decoration:none;
  text-transform:uppercase;letter-spacing:.05em}
.wpp:hover{filter:brightness(1.08);color:#04230F}
.sem-wpp{font-size:11px;color:#FBD24E;background:rgba(251,191,36,.1);border:1px dashed rgba(251,191,36,.4);padding:6px 10px;border-radius:var(--r-sm);cursor:help}
@media(max-width:820px){.crm-grid,.aniv-grid{grid-template-columns:1fr}}
.cab-flex{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
.badge{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;padding:3px 7px;border-radius:var(--r-sm);margin-right:5px;vertical-align:middle}
.badge.sug{background:rgba(34,211,238,.14);color:#67E8F9;border:1px solid rgba(34,211,238,.26)}
.badge.prop{background:rgba(251,146,60,.14);color:#FDBA74;border:1px solid rgba(251,146,60,.26)}
.badge.ia{background:rgba(167,139,250,.16);color:#C4B5FD;border:1px solid rgba(167,139,250,.28)}
.badge.parcial{background:rgba(251,191,36,.16);color:#FBD24E;border:1px solid rgba(251,191,36,.28)}
.prog{height:6px;background:rgba(255,255,255,.07);border-radius:var(--r-sm);margin:6px 0 2px;overflow:hidden}
.prog span{display:block;height:100%;background:var(--g-brand)}
.btn-atualizar button,.btn-recarregar,.btn-voltar{display:inline-block;background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--teal);font-weight:600;padding:8px 14px;border-radius:var(--r-sm);cursor:pointer;font-size:11px;text-decoration:none;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.06em}
.btn-atualizar button:hover,.btn-recarregar:hover,.btn-voltar:hover{background:rgba(99,102,241,.10);border-color:var(--teal)}
.btn-voltar{color:var(--ink2)}
.cab-acoes{display:flex;align-items:center}

/* ---- cotações ---- */
.cot-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.cot-card{display:block;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--teal);border-radius:var(--r-sm);padding:14px 16px;text-decoration:none;color:inherit;transition:.14s;box-shadow:var(--shadow)}
.cot-card:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px);border-color:var(--line2);border-left-color:var(--teal)}
.cot-top{display:flex;justify-content:space-between;align-items:baseline}
.cot-ped{font-family:ui-monospace,Consolas,monospace;font-weight:700;color:var(--ink2)}
.cot-val{font-weight:800;font-size:15px;color:var(--teal)}
.cot-cli{font-weight:700;margin:4px 0 2px;color:var(--ink)}
.insights{display:flex;flex-direction:column;gap:7px;margin-bottom:6px}
.insight{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 13px;color:var(--ink2);box-shadow:var(--shadow)}
.insight .ic{font-weight:800;color:var(--teal);min-width:16px;text-align:center}
.insight b{color:var(--ink)}
.cot-desc{display:flex;flex-wrap:wrap;gap:18px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 17px;border-left:4px solid var(--line2);box-shadow:var(--shadow)}
.cot-desc.v-concede_mais{border-left-color:var(--bad);background:rgba(248,113,113,.05)}
.cot-desc.v-alinhado{border-left-color:var(--teal);background:rgba(99,102,241,.05)}
.cot-desc.v-favoravel{border-left-color:var(--ok);background:rgba(52,211,153,.05)}
.cot-desc-l{display:flex;flex-direction:column;line-height:1.25}
.cot-desc-l span{font-size:11px;text-transform:uppercase;letter-spacing:.3px;color:var(--gray)}
.cot-desc-l b{font-size:16px;font-family:ui-monospace,Consolas,monospace;color:var(--ink)}
.cot-desc-l small{font-size:12px;color:var(--gray)}
.cot-desc-txt{flex-basis:100%;margin:4px 0 0;color:var(--ink2)}
.mono{font-family:ui-monospace,Consolas,monospace;font-weight:700;white-space:nowrap;color:var(--ink)}
.nowrap{white-space:nowrap}
.tag-giro,.tag-promo,.tag-parado{font-size:9px;font-weight:800;text-transform:uppercase;padding:2px 6px;border-radius:var(--r-sm);margin-left:5px;vertical-align:middle}
.tag-giro{background:rgba(34,211,238,.14);color:#67E8F9}
.tag-promo{background:rgba(251,191,36,.16);color:#FBD24E}
.tag-parado{background:rgba(248,113,113,.16);color:#FF9AAA}
.cot-card-wrap{display:flex;flex-direction:column}
.cot-card-wrap .cot-card{flex:1;border-bottom-left-radius:0;border-bottom-right-radius:0}
.cot-arq{background:var(--card);border:1px solid var(--line);border-top:0;border-left:4px solid var(--teal);border-radius:0;padding:7px 11px;text-align:right}

/* ============================================================
   FASE 2 — Gestao viva de tarefas + WhatsApp reutilizavel
   ============================================================ */
/* dropdown WhatsApp (multiplos contatos) — <details> nativo, sem JS */
.wa-pick{position:relative;display:inline-block}
.wa-pick>summary{list-style:none;cursor:pointer}
.wa-pick>summary::-webkit-details-marker{display:none}
.wa-lista{position:absolute;z-index:30;top:calc(100% + 5px);right:0;min-width:215px;background:var(--card2);
  border:1px solid var(--line2);border-radius:var(--r-sm);box-shadow:var(--shadow-lift);padding:6px;display:flex;flex-direction:column;gap:2px}
.wa-lista a{display:block;padding:7px 10px;border-radius:var(--r-sm);font-size:12px;color:var(--ink);font-weight:600;text-decoration:none}
.wa-lista a:hover{background:rgba(37,211,102,.16);color:#7DF0A6}

/* acao inline nas call-lists do Diario (WhatsApp + "+tarefa") */
.call-acao{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:6px}
.call-acao .wpp{font-size:10px;padding:5px 10px}
.mini-add{display:inline}

/* chips: prioridade e R$ (meta_valor) */
.prio{display:inline-block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.3px;padding:3px 7px;border-radius:var(--r-sm);margin-right:5px;vertical-align:middle}
.prio-alta{background:rgba(248,113,113,.18);color:#FF9AAA;border:1px solid rgba(248,113,113,.34)}
.prio-media{background:rgba(251,191,36,.16);color:#FBD24E;border:1px solid rgba(251,191,36,.28)}
.prio-baixa{background:rgba(163,163,163,.16);color:#D4D4D4;border:1px solid rgba(163,163,163,.28)}
.chip-rs{display:inline-block;font-size:10px;font-weight:800;padding:2px 8px;border-radius:var(--r-sm);background:rgba(99,102,241,.14);color:#A5B4FC;border:1px solid rgba(99,102,241,.24);vertical-align:middle;margin-right:5px}
.badge.radar{background:rgba(99,102,241,.14);color:#A5B4FC;border:1px solid rgba(99,102,241,.26)}
.tag-and{font-size:9.5px;background:rgba(34,211,238,.14);color:#67E8F9;padding:2px 7px;border-radius:var(--r-sm);margin-right:5px;vertical-align:middle;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
.tag-adi{font-size:9.5px;background:rgba(167,139,250,.16);color:#C4B5FD;padding:2px 7px;border-radius:var(--r-sm);margin-right:5px;vertical-align:middle;font-weight:700;text-transform:uppercase;letter-spacing:.3px}

/* cor de SLA na tarefa (borda esquerda) */
.tarefa.sla-atrasada{border-left:4px solid var(--bad)}
.tarefa.sla-hoje{border-left:4px solid var(--warn)}
.tarefa.sla-ok{border-left:4px solid var(--line2)}
.t-acoes .wpp{font-size:10px;padding:5px 10px}

/* quick-add de 1 linha no topo da lista */
.quick-add{display:flex;gap:8px;margin-bottom:12px}
.quick-add input[name=titulo]{flex:1;padding:9px 12px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--field);color:var(--ink);font-size:13px}
.quick-add input[name=titulo]:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(99,102,241,.14)}

/* ============================================================
   KANBAN arrastavel (guia Tarefas) — reaproveita o cartao .tarefa
   ============================================================ */
.vista-toggle{display:inline-flex;gap:4px;margin:0 0 12px;padding:3px;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:var(--r-sm)}
.vista-toggle a{font-size:11px;font-weight:700;padding:5px 12px;border-radius:var(--r-sm);color:var(--ink2);text-decoration:none;line-height:1.1;
  text-transform:uppercase;letter-spacing:.05em}
.vista-toggle a:not(.on):hover{background:rgba(99,102,241,.10);color:var(--ink)}   /* feedback de hover nas abas (B17) */
.vista-toggle a.on{background:var(--primary);color:var(--primary-fg)}
.kanban{display:flex;gap:14px;align-items:flex-start}
.kb-col{flex:1 1 0;min-width:0;background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column}
.kb-head{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--ink2);padding:4px 6px 10px}
.kb-count{min-width:22px;text-align:center;font-size:11px;font-weight:800;color:var(--ink);background:rgba(255,255,255,.07);border:1px solid var(--line2);border-radius:var(--r-sm);padding:1px 8px}
.kb-body{flex:1;min-height:120px;display:flex;flex-direction:column;gap:8px;border-radius:var(--r-sm);transition:background .12s,box-shadow .12s}
.kb-col.drop-alvo{border-color:var(--teal)}
.kb-col.drop-alvo .kb-body{background:rgba(99,102,241,.08);box-shadow:0 0 0 2px rgba(99,102,241,.25) inset}
/* cartao no kanban: empilha corpo + acoes (coluna estreita) e ganha a alca de arraste */
.kb-card{margin-bottom:0;flex-wrap:wrap;cursor:default}
.kb-card .t-corpo{flex:1 1 60%;min-width:0}
.kb-card .t-acoes{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:6px;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
.kb-card.dragging{opacity:.45}
.kb-handle{cursor:grab;color:var(--gray);font-size:15px;line-height:1;user-select:none;align-self:flex-start;padding:1px 2px 0;letter-spacing:-2px}
.kb-handle:active{cursor:grabbing}
@media(max-width:900px){.kanban{flex-direction:column}.kb-col{width:100%}}

/* ==== Onda Visual 3: utilitárias (fim dos estilos inline repetidos) + faxina ==== */
.svg-sprite{position:absolute}
.m0{margin:0}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt18{margin-top:18px}
.mr6{margin-right:6px}
.txt-11{font-size:11px}
.txt-bad{color:var(--bad)}
.txt-faint{color:var(--faint)}
.caixa-compacta{font-size:12px}
.caixa-mini{font-size:11.5px;margin-top:8px}
.campo-fim{margin-left:auto}
.ind-flex{flex:1;min-width:280px}
.h1-sub{font-size:18px}
.h3-destaque{margin:14px 0 6px;color:var(--ink);font-size:14px}
.logo-mini{max-height:34px;max-width:120px;background:#fff;border-radius:var(--r-sm);padding:2px}
.traj-val.up{color:var(--ok)}.traj-val.down{color:var(--bad)}
.traj-ganho.neutro{color:var(--gray)}

/* painel de produtividade */
/* pós-4.0: os cards de produtividade migraram p/ a faixa .stats — o painel guarda só a próxima ação */
.prod-panel{display:block;margin:2px 0 22px}
/* card destaque "sua proxima acao" (flat: fundo indigo sutil, sem glow) */
.prox-acao{display:flex;gap:12px;align-items:center;justify-content:space-between;
  background:rgba(99,102,241,.08);
  border:1px solid rgba(99,102,241,.28);border-radius:var(--r);padding:14px 17px;box-shadow:var(--shadow)}
.prox-acao .pa-body{flex:1;min-width:0}
.pa-flag{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--teal)}
.pa-tit{font-weight:800;color:var(--ink);font-size:14.5px;margin-top:3px}
.pa-meta{font-size:12px;color:var(--ink2);margin-top:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pa-acoes{display:flex;flex-direction:column;gap:7px;align-items:flex-end}
@media(max-width:820px){.prod-panel{grid-template-columns:1fr}}

/* ===== RepCom 4.0 — componentes base (mocks 11/07/2026) ===== */
/* cabeçalho de página: ícone em chip + título + subtítulo + ação à direita */
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.ph-esq{display:flex;gap:14px;align-items:flex-start}
.ph-ico{width:46px;height:46px;flex-shrink:0;border-radius:var(--r);background:rgba(99,102,241,.13);
  border:1px solid rgba(99,102,241,.25);display:flex;align-items:center;justify-content:center}
.ph-ico .ico-t{width:22px;height:22px;color:var(--teal)}
.ph h1{margin:0 0 3px;font-size:24px}
.ph-sub{color:var(--gray);font-size:13px;max-width:860px}
.ph-acao{flex-shrink:0;display:flex;gap:8px;align-items:center}
/* stat-cards com ícone circular colorido e delta */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin:14px 0}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;
  display:flex;gap:11px;align-items:center;box-shadow:var(--shadow)}
.stat-ico{width:34px;height:34px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(99,102,241,.14);color:var(--teal)}
.stat-ico .ico-t{width:16px;height:16px}
.stat-ico.ok{background:rgba(52,211,153,.12);color:var(--ok)}
.stat-ico.bad{background:rgba(248,113,113,.12);color:var(--bad)}
.stat-ico.warn{background:rgba(251,191,36,.12);color:var(--warn)}
.stat-ico.cyan{background:rgba(34,211,238,.12);color:var(--cyan)}
.stat-v{font-size:17px;font-weight:800;color:var(--ink);line-height:1.15}
.stat-r{font-size:10px;color:var(--gray);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.delta{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;font-weight:700;border-radius:var(--r-sm);padding:1px 7px}
.delta.up{color:var(--ok);background:rgba(52,211,153,.10)}
.delta.down{color:var(--bad);background:rgba(248,113,113,.10)}
/* barra de acento à esquerda de cards/seções (cor por contexto, como nos mocks) */
.acc{border-left:3px solid var(--indigo)}
.acc-ok{border-left:3px solid var(--ok)}.acc-bad{border-left:3px solid var(--bad)}
.acc-warn{border-left:3px solid var(--warn)}.acc-cyan{border-left:3px solid var(--cyan)}
.acc-pink{border-left:3px solid var(--pink)}.acc-orange{border-left:3px solid var(--orange)}
/* paginação de tabela ("Linhas por página · 1-10 de N · páginas") */
.pagin{display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap;
  padding:10px 4px 0;color:var(--gray);font-size:12px}
.pagin-pg{display:flex;gap:4px}
.pagin-pg a,.pagin-pg span{min-width:26px;text-align:center;padding:4px 7px;border:1px solid var(--line2);
  border-radius:var(--r-sm);color:var(--ink2);font-weight:600;font-size:11.5px}
.pagin-pg .on{background:var(--indigo);border-color:var(--indigo);color:#fff}
.pagin-pg a:hover{border-color:var(--teal);color:var(--ink)}
/* .tb-ajuda/.tb-refresh aposentados pela topbar unificada (PC-21): ações viram .tb-ico */
/* monograma alternativo: aparece no lugar da logo quando o menu está recolhido */
/* .side-mark-alt removido: a marca 2 andares mantém o tile "R" sempre visível */
.topbar .dot{background:var(--ok)}
/* faixa-resumo do recorte (Pedidos) + variantes de pill/ícone da 4.0 */
.strip{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap;margin:16px 0}
.strip .stat{flex:1;min-width:175px}
.strip-acao{display:flex;align-items:center}
.ph-ico svg,.stat-ico svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ph-ico svg{width:22px;height:22px;color:var(--teal)}
.stat-ico svg{width:16px;height:16px}
.pill.cyan{background:rgba(34,211,238,.12);color:var(--cyan)}
.pill.indigo{background:rgba(129,140,248,.14);color:var(--teal)}
/* tela Logos 4.0: grade de envio, dropzone, dicas e infobox */
.envio-logo{margin-bottom:10px}
.envio-grid{display:grid;grid-template-columns:1fr 1.1fr .8fr;gap:18px;align-items:start;margin-top:10px}
@media (max-width:1000px){.envio-grid{grid-template-columns:1fr}}
.campo-solto{margin-bottom:10px}
.campo-solto input,.campo-solto select{width:100%}
.infobox{border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(99,102,241,.05);
  padding:10px 12px;font-size:11.5px;color:var(--ink2);line-height:1.5}
.infobox b{color:var(--ink)}
.dropzone{border:1.6px dashed rgba(99,102,241,.5);border-radius:var(--r);padding:26px 14px;
  text-align:center;cursor:pointer;display:flex;flex-direction:column;gap:4px;align-items:center;
  color:var(--gray);background:rgba(99,102,241,.03);min-height:170px;justify-content:center}
.dropzone.dz-on{border-color:var(--teal);background:rgba(99,102,241,.09)}
.dropzone b{color:var(--ink);font-size:13.5px}
.dz-sub{font-size:11.5px}
.dz-arquivo{color:var(--ok);font-weight:700;font-size:12px;min-height:15px}
.dz-fmt{font-size:10.5px;color:var(--faint)}
.dz-nuvem{width:36px;height:36px;stroke:var(--teal);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dicas{font-size:12px;color:var(--ink2);display:flex;flex-direction:column;gap:9px}
.dicas ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.dicas li{display:flex;gap:7px;align-items:flex-start;color:var(--gray)}
.dicas li .ico-t{color:var(--ok);flex-shrink:0;margin-top:2px}
.btn-pri{background:var(--g-brand);color:var(--primary-fg);border:0;padding:10px 18px;border-radius:var(--r-sm);
  font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;cursor:pointer;align-self:flex-start}
.btn-pri:hover{filter:brightness(1.12)}
/* CRM 4.0: faixa de 6 stats com drill-down + contagem nas abas + próxima ação com acento */
.stats-6{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
a.stat-link{color:inherit;text-decoration:none}
a.stat-link:hover{box-shadow:var(--shadow-lift)}
.aba-n{display:inline-block;min-width:17px;text-align:center;padding:0 5px;margin-left:3px;
  border-radius:var(--r-sm);background:rgba(99,102,241,.18);color:var(--teal);font-size:10.5px;font-weight:800}
.prox-acao{border-left:3px solid var(--indigo)}
.delta .ico-t{width:10px;height:10px}
/* Relatórios/Plano 4.0: badge do card, pill de categoria, número de ordem, downloads */
.card-id{display:inline-block;background:rgba(99,102,241,.16);color:var(--teal);border-radius:var(--r-sm);
  padding:2px 9px;font-weight:800;font-size:11px;letter-spacing:.4px}
.card-cat{margin-top:9px}
.card-destaque{border-color:rgba(99,102,241,.35)}
.num-ord{color:var(--faint);font-weight:700;width:26px}
.downloads{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.downloads .btn-pri{display:inline-flex;align-items:center;gap:7px;text-decoration:none}

/* Onda 5 (c37) — Anual/Cotacoes: resumo do periodo, heatmap da coorte, card de cotacao com idade */
.ano2{display:grid;grid-template-columns:1.6fr 1fr;gap:12px;align-items:start}
@media (max-width:900px){.ano2{grid-template-columns:1fr}}
.resumo-per .res-item{display:flex;justify-content:space-between;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:12.5px}
.resumo-per .res-item:last-of-type{border-bottom:0}
.resumo-per .res-item span{color:var(--gray)}
.resumo-per .res-item b{color:var(--ink);text-align:right}
.resumo-per .res-item b.up{color:var(--ok)}.resumo-per .res-item b.down{color:var(--bad)}
.tab td.heat{text-align:center;font-weight:700;font-size:11.5px}
.tab td.heat.full{background:rgba(52,211,153,.30);color:#B7F5DC}
.tab td.heat.ok{background:rgba(52,211,153,.16);color:#7DF0C0}
.tab td.heat.warn{background:rgba(251,191,36,.15);color:#FBD24E}
.tab td.heat.bad{background:rgba(248,113,113,.15);color:#FF9AAA}
.tab td.heat.vazio{color:var(--faint)}
.cot-forn{font-size:12px;color:var(--gray);margin:2px 0 9px}
.cot-forn b{color:var(--teal)}
.cot-strip{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.cot-cell{padding:7px 10px;font-size:12px;color:var(--ink2);text-align:center;line-height:1.35}
.cot-cell+.cot-cell{border-left:1px solid var(--line)}
.cot-idade{font-weight:700;color:var(--gray)}
.cot-idade.warn{color:var(--warn)}.cot-idade.bad{color:var(--bad)}
.cot-arq button{width:100%}
.minibar{height:4px;width:52px;background:rgba(255,255,255,.08);border-radius:var(--r-sm);overflow:hidden;margin:3px 0 0 auto}
.minibar i{display:block;height:100%;background:var(--g-brand)}

/* Lote de fidelidade c38 — componentes que os mocks pedem e faltavam */
/* nota-info: caixa de leitura com icone (substitui .traj-nota solto nas telas 4.0) */
.nota-info{display:flex;gap:10px;align-items:flex-start;background:rgba(99,102,241,.06);
  border:1px solid rgba(99,102,241,.22);border-radius:var(--r);padding:11px 14px;margin:10px 0;
  font-size:12.5px;color:var(--ink2)}
.nota-info b{color:var(--ink)}
.nota-info .ni-ico{flex-shrink:0;width:17px;height:17px;color:var(--teal)}
.nota-info .ni-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nota-info.neutra{background:rgba(255,255,255,.03);border-color:var(--line)}
.nota-info.neutra .ni-ico{color:var(--gray)}
/* pcard com cabecalho rotulo+icone circular (mock Semana/Mes e Anual) */
.pc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pc-ico{width:30px;height:30px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(99,102,241,.14);color:var(--teal)}
.pc-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pc-ico.ok{background:rgba(52,211,153,.12);color:var(--ok)}
.pc-ico.bad{background:rgba(248,113,113,.12);color:var(--bad)}
.pc-ico.warn{background:rgba(251,191,36,.12);color:var(--warn)}
.pc-ico.cyan{background:rgba(34,211,238,.12);color:var(--cyan)}
.pc-ico.orange{background:rgba(251,146,60,.12);color:var(--orange)}
.pcard.destaque{border:1px solid rgba(52,211,153,.45);border-left:3px solid var(--ok);background:rgba(52,211,153,.05)}
.bar-row{display:flex;align-items:center;gap:8px}
.bar-row .barra{flex:1}
.bar-row .bar-pct{font-size:11px;font-weight:700;color:var(--ink2);white-space:nowrap}
/* sugestoes 4.0: lista contida num card com chevron por linha (mock Semana/Mes) */
.sug-box{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--indigo);
  border-radius:var(--r);box-shadow:var(--shadow);margin:8px 0 16px;overflow:hidden}
.sug-box .sug{border:0;border-radius:0;box-shadow:none;background:transparent;margin:0;
  border-bottom:1px solid var(--line);padding:10px 14px}
.sug-box .sug:last-child{border-bottom:0}
.sug-box .sug.alerta{background:rgba(248,113,113,.04)}
.sug-box .sug.acao{background:rgba(99,102,241,.04)}
.sug-box .sug.ok{background:rgba(52,211,153,.04)}
.sug .sug-chev{margin-left:auto;flex-shrink:0;width:15px;height:15px;color:var(--faint)}
.sug .sug-chev svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* cotacoes 4.0: tile de icone no card, celulas com icone, arquivar cheio */
.cot-tile{width:30px;height:30px;flex-shrink:0;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  background:rgba(99,102,241,.14);color:var(--teal)}
.cot-tile svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cot-top-l{display:flex;align-items:center;gap:9px}
.cot-cell .cc-ico{width:13px;height:13px;vertical-align:-2px;margin-right:4px;color:var(--gray)}
.cot-cell .cc-ico svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cot-arq button .ico-t{width:12px;height:12px;vertical-align:-2px;margin-right:5px}
.bloco{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;margin:0 0 16px}
.bloco-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.bloco-top h2{margin:0;font-size:15px;color:var(--ink)}
/* radar: botao TAREFA e chip de base */
.mini.tarefa{color:var(--teal);border-color:rgba(99,102,241,.4);background:rgba(99,102,241,.08);
  text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.mini.tarefa:hover{background:rgba(99,102,241,.16)}
/* resumo do periodo com icones (mock Anual) */
.res-item .ri-ico{width:15px;height:15px;flex-shrink:0;color:var(--teal);margin-right:7px;vertical-align:-2px}
.res-item .ri-ico svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.res-item .ri-ico.ok{color:var(--ok)}.res-item .ri-ico.bad{color:var(--bad)}.res-item .ri-ico.gold{color:var(--warn)}
.res-item span{display:flex;align-items:center}
/* setas da ponte viram chevron (mock) */
.pseta .ico-c{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nota-info.bad{background:rgba(248,113,113,.06);border-color:rgba(248,113,113,.28)}
.nota-info.bad .ni-ico{color:var(--bad)}
.nota-info.ok{background:rgba(52,211,153,.06);border-color:rgba(52,211,153,.28)}
.nota-info.ok .ni-ico{color:var(--ok)}
.nota-info.warn{background:rgba(251,191,36,.06);border-color:rgba(251,191,36,.28)}
.nota-info.warn .ni-ico{color:var(--warn)}
.sug-tit{padding:11px 14px 9px;font-weight:700;color:var(--ink);font-size:13.5px;border-bottom:1px solid var(--line)}
.cot-arq button svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mb-alvo{width:64px;margin:4px 0 0}
.minibar i.ok{background:var(--g-ok)}
.minibar i.warn{background:var(--g-orange)}

/* ===== Ajuda e manual (paridade F1 — padrao do ERP c136) ===== */
.chip-ajuda{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;border:1px solid var(--line2);background:var(--card2);
  color:var(--gray);font-size:13px;font-weight:800;text-decoration:none;vertical-align:middle;
  margin-left:8px;line-height:1;transform:translateY(-2px)}
.chip-ajuda:hover{border-color:var(--teal);color:var(--teal);background:rgba(129,140,248,.10)}
.chip-ajuda.demo{transform:none;margin-left:2px;cursor:default}
.linha-acoes{margin:2px 0 10px}
.ajuda-voltar{font-size:12.5px;font-weight:700;color:var(--ink2);text-decoration:none}
.ajuda-voltar:hover{color:var(--teal)}
.manual{display:grid;grid-template-columns:230px 1fr;gap:18px;max-width:1080px;align-items:start}
.manual-indice{position:sticky;top:14px;background:var(--card);border:1px solid var(--line);
  padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.manual-indice a{font-size:12.5px;color:var(--ink2);text-decoration:none;line-height:1.35}
.manual-indice a:hover{color:var(--teal)}
.manual-corpo section{background:var(--card);border:1px solid var(--line);
  padding:16px 20px;margin-bottom:16px;
  /* a topbar e sticky (~56px): sem esta folga a ancora parava ATRAS dela */
  scroll-margin-top:76px}
.manual-corpo section:target{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal-deep)}
.manual-corpo h2{margin:0 0 10px;font-size:16px}
.manual-corpo h2 small{color:var(--gray);font-weight:600;font-size:.72em}
.manual-corpo p{line-height:1.55;color:var(--ink2)}
.passos{margin:8px 0;padding-left:22px;line-height:1.6;color:var(--ink2)}
.passos li{margin:4px 0}
.tab-campos{width:100%;border-collapse:collapse;margin:10px 0;font-size:13px}
.tab-campos th{width:220px;text-align:left;vertical-align:top;padding:7px 10px 7px 0;
  color:var(--ink);font-weight:700;border-bottom:1px solid var(--line)}
.tab-campos td{padding:7px 0;color:var(--ink2);line-height:1.5;border-bottom:1px solid var(--line)}
.dica{border-left:3px solid var(--teal);background:rgba(129,140,248,.07);
  padding:9px 13px;margin:10px 0;line-height:1.5;color:var(--ink2)}
.manual-regras{max-width:1080px}
.manual-regras ul{margin:6px 0 0;padding-left:20px}
.manual-regras li{margin:3px 0}
/* Balao popover: <details> CSS-only; clicar fora/Esc fecha via JS delegado do base.html */
.ajuda-balao{display:inline-block;position:relative;vertical-align:middle}
.ajuda-balao summary{list-style:none;cursor:pointer}
.ajuda-balao summary::-webkit-details-marker{display:none}
.ajuda-balao[open] .chip-ajuda{border-color:var(--teal);color:var(--teal);
  background:rgba(129,140,248,.12)}
.ajuda-pop{position:absolute;left:-8px;top:30px;z-index:40;width:min(380px,72vw);
  background:var(--card2);border:1px solid var(--line2);
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 8px 24px rgba(0,0,0,.45);padding:12px 14px;
  font-size:13px;font-weight:400;line-height:1.5;color:var(--ink2);text-align:left;
  letter-spacing:normal;white-space:normal;text-transform:none}
.ajuda-pop::before{content:"";position:absolute;top:-6px;left:14px;width:10px;height:10px;
  background:var(--card2);border-left:1px solid var(--line2);
  border-top:1px solid var(--line2);transform:rotate(45deg)}
.ajuda-pop b{display:block;color:var(--ink);font-size:13.5px;margin-bottom:6px}
.ajuda-pop ul{margin:0 0 8px;padding-left:17px}
.ajuda-pop li{margin:3px 0}
.ajuda-pop li::marker{color:var(--teal)}
.ajuda-mais{font-size:12px;font-weight:600}
.manual-voltar-fixo{position:fixed;right:26px;bottom:26px;z-index:35;
  background:var(--card2);border:1px solid var(--line2);border-radius:999px;
  padding:8px 16px;font-size:12.5px;font-weight:700;color:var(--ink2);
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 8px 24px rgba(0,0,0,.45);text-decoration:none}
.manual-voltar-fixo:hover{border-color:var(--teal);color:var(--teal)}
@media(max-width:940px){.manual{grid-template-columns:1fr}.manual-indice{position:static}}
@media(max-width:880px){.manual-voltar-fixo{display:none}}

/* ===== Ajuda por INDICADOR (18/08): chip mini nos cards + balao com direcao ===== */
.chip-ajuda.mini{width:16px;height:16px;font-size:10.5px;margin-left:5px;transform:translateY(-1px)}
.ajuda-pop.pop-esq{left:auto;right:-8px}
.ajuda-pop.pop-esq::before{left:auto;right:14px}
/* ancoras de sub-capitulo (h3 id=ind-*) do guia de indicadores no manual */
.manual-corpo h3[id]{scroll-margin-top:76px}
.manual-corpo h3[id]:target{color:var(--teal)}

/* fix 18/08 (reporte do usuario): o hover dos cards (.ind/.pcard) usa transform, que
   cria stacking context — card vizinho em hover pintava POR CIMA do balao aberto.
   O card com balao aberto sobe de camada e vence qualquer vizinho em hover. */
.ind:has(.ajuda-balao[open]),
.pcard:has(.ajuda-balao[open]){position:relative;z-index:60}

/* ===== Reportar erro (ciclo 1 do pacote de seguranca, padrao ERP c137) ===== */
/* .chip-acao aposentado (PC-21): o relato abre pelo ⚑ da topbar (.tb-ico) */
.relato-balao{display:block;position:relative}
.relato-pop textarea{width:100%;box-sizing:border-box;background:var(--field);
  color:var(--ink);border:1px solid var(--line2);padding:8px;font-family:inherit;
  font-size:12.5px;resize:vertical;margin-bottom:6px}
.relato-pop .botao-sec{width:100%}
.relato-aviso{color:var(--bad);font-size:12px;margin:6px 0 0}
.relato-form-500{max-width:460px;margin:12px auto}
.relato-form-500 textarea{width:100%;box-sizing:border-box;background:var(--field);
  color:var(--ink);border:1px solid var(--line2);padding:8px;font-family:inherit;
  font-size:13px;margin-bottom:8px}
.relato-filtros{display:flex;gap:8px;align-items:center;margin:6px 0 12px}
.relato-filtros .botao-sec.on{border-color:var(--teal);color:var(--teal)}
.relato-logs pre{max-height:180px;overflow:auto;font-size:11px;white-space:pre-wrap;
  background:var(--field);border:1px solid var(--line);padding:8px;margin:4px 0 0}
.relato-logs summary{cursor:pointer;font-size:11.5px;color:var(--gray)}
.relato-ua{font-size:11px;color:var(--faint);margin-top:3px}
.rel-badge{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;
  border:1px solid var(--line2);color:var(--warn)}
.rel-badge.resolvido{color:var(--ok)}
.relato-pag{display:flex;gap:10px;align-items:center;margin:12px 0}

/* ===== Tarefas v2 — ferramenta de gestão, compreensível por qualquer pessoa =====
   toolbar única · cartão compacto (título + contexto) · ações secundárias no "⋯" ·
   escopos Minha/Equipe/Sistema · urgência (atrasada/hoje) só na borda e no prazo */
.esc{display:inline-block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;padding:3px 7px;border-radius:var(--r-sm);margin-right:6px;vertical-align:middle;border:1px solid transparent}
.esc-pes{background:rgba(251,146,60,.14);color:#FDBA74;border-color:rgba(251,146,60,.28)}
.esc-eq{background:rgba(99,102,241,.14);color:#A5B4FC;border-color:rgba(99,102,241,.28)}
.t-auto{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#67E8F9;
  border:1px dashed rgba(34,211,238,.4);padding:2px 6px;border-radius:var(--r-sm);margin-right:6px;vertical-align:middle}
.t-mais-lbl{font-size:10.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;margin-left:2px}
/* Semana = sprint: cabeçalho com datas, progresso, R$ em jogo, daily e backlog */
.sprint{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--teal);padding:10px 14px;margin:0 0 14px;box-shadow:var(--shadow)}
.sp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sp-tit{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);flex-wrap:wrap}
.sp-tit b{font-size:13.5px}
.sp-datas{font-weight:700;color:var(--ink2)}
.sp-tit small{font-size:11px;color:var(--gray)}
.sp-links{display:flex;gap:6px;align-items:center}
.sp-links .mini{text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.sp-links .mini.on{border-color:var(--teal);color:var(--teal)}
.sp-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:8px 22px;margin-top:8px;align-items:center}
.sp-bar{height:7px;background:rgba(255,255,255,.07);border:1px solid var(--line);overflow:hidden}
.sp-bar span{display:block;height:100%;background:var(--g-brand)}
.sp-num{font-size:12px;color:var(--gray);margin-top:5px}.sp-num b{color:var(--ink)}
.sp-daily{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:12px;color:var(--gray)}
.sp-daily b{color:var(--ink)}
.sp-lbl{font-size:9.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--teal);margin-right:4px}
.sp-bad{color:var(--bad)}.sp-bad b{color:var(--bad)}
.sp-warn{color:var(--warn)}.sp-warn b{color:var(--warn)}
.kb-col.kb-wip{border-color:rgba(251,191,36,.55)}
.kb-col.kb-wip .kb-count{color:#FBD24E;border-color:rgba(251,191,36,.55)}
.tv2-stats .stat.on{border-color:var(--teal);box-shadow:0 0 0 1px rgba(99,102,241,.35) inset}
.tv2-stats .stat-ico.warn{background:rgba(251,191,36,.14);color:#FBD24E}
.tv2-pa{margin:2px 0 16px}
.tv2-pa .pa-flag{color:var(--teal)}
.nova-tarefa{margin:0 0 14px}
.nova-tarefa summary.nt-abrir{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;padding:8px 14px;
  font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--ink);
  background:rgba(99,102,241,.12);border:1px solid rgba(99,102,241,.35);border-radius:var(--r-sm)}
.nova-tarefa summary.nt-abrir::-webkit-details-marker{display:none}
.nova-tarefa summary.nt-abrir small{font-weight:500;text-transform:none;letter-spacing:0;color:var(--gray);font-size:11px}
.nova-tarefa summary.nt-abrir:hover,.nova-tarefa[open] summary.nt-abrir{background:rgba(99,102,241,.22);border-color:var(--teal)}
.nova-tarefa .nt-form{margin-top:10px}
.nt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 14px}
.nt-grid > div{display:flex;flex-direction:column;gap:3px;min-width:0}
.nt-col-2{grid-column:span 2}
.nt-escopo{flex-direction:row !important;flex-wrap:wrap;align-items:center;gap:6px 18px !important;margin-top:10px}
.nt-escopo .nt-lbl{font-size:11px;font-weight:700;color:var(--gray);text-transform:uppercase}
.nt-escopo label.radio,.nt-escopo label.check{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2);text-transform:none;font-weight:400;margin:0}
.nt-escopo label b{color:var(--ink)}
.nt-rodape{display:flex;justify-content:flex-end}
.nova-tarefa .form-card button{margin-top:10px;padding:9px 18px}
.nova-tarefa .pref-box{margin-top:8px}
.tv2-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px}
.tv2-bar-2{margin-bottom:12px}
.tv2-bar .escopos,.tv2-bar .vista-toggle{margin:0}
.seg-quem{display:inline-flex;gap:3px;padding:3px;background:rgba(255,255,255,.04);border:1px solid var(--line2);border-radius:var(--r-sm)}
.seg-quem a{font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:var(--r-sm);color:var(--ink2);text-decoration:none;display:inline-flex;align-items:center;gap:6px;line-height:1.1}
.seg-quem a:not(.on):hover{background:rgba(99,102,241,.10);color:var(--ink)}
.seg-quem a.on{background:var(--primary);color:var(--primary-fg)}
.seg-quem a.on .aba-n{background:rgba(0,0,0,.22);color:inherit}
.tv2-busca{display:flex;align-items:center;gap:6px;flex:1 1 360px;max-width:560px}
.tv2-busca input[type=search]{flex:1;min-width:0;padding:8px 11px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--field);color:var(--ink);font-size:12.5px}
.tv2-busca input[type=search]:focus,.tv2-busca select:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(99,102,241,.14)}
.tv2-busca select{padding:8px 9px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--field);color:var(--ink);font-size:12px}
.tv2-busca .limpar{text-decoration:none;color:var(--gray)}
.tv2-resumo{font-size:12px;color:var(--gray);margin:-4px 0 10px}
.quick-add select{padding:8px 9px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--field);color:var(--ink);font-size:12px}
/* cartão compacto */
.tarefa{padding:9px 12px;margin-bottom:6px;align-items:center}
.t-tit{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:13px;line-height:1.3}
.t-tit .t-nome{margin-right:6px}
.t-tit .prio,.t-tit .chip-rs,.t-tit .tag-and,.t-tit .tag-adi,.t-tit .tag-ok,.t-tit .badge{margin-left:0;margin-right:6px}
.t-rec{color:var(--gray);font-size:13px;margin-left:2px}
.t-meta{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;font-size:11.5px;color:var(--gray);margin-top:3px;min-width:0}
.t-meta b{color:var(--ink2);font-weight:600}
.t-meta .sep{opacity:.5}
.t-obs{max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.t-lem{color:var(--orange)}
.prazo{font-weight:600;color:var(--ink2)}.prazo i{font-style:normal;font-weight:400;color:var(--gray)}
.prazo-atrasada{color:var(--bad)}.prazo-atrasada i{color:var(--bad);opacity:.85}
.prazo-hoje{color:var(--warn)}.prazo-hoje i{color:var(--warn);opacity:.85}
.t-acoes{flex-direction:row;align-items:center;gap:6px;flex-shrink:0}
.t-mais{display:inline-block}
.t-mais summary.mini{display:inline-flex;align-items:center;justify-content:center;min-width:30px;font-size:15px;letter-spacing:1px;list-style:none;line-height:1;padding:5px 8px}
.t-mais summary.mini::-webkit-details-marker{display:none}
.t-mais[open] summary.mini{border-color:var(--teal);color:var(--teal)}
.t-menu{left:auto;right:0;top:calc(100% + 6px);width:290px;padding:10px 12px;z-index:45;display:flex;flex-direction:column;gap:8px}
.t-menu::before{left:auto;right:12px}
.t-linha{display:flex;align-items:center;justify-content:space-between;gap:8px}
.t-linha label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink2);white-space:nowrap}
.t-linha input[type=date]{padding:5px 7px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--field);color:var(--ink);font-size:12px;font-family:inherit}
.t-linha .perigo{width:100%}
.kb-card{align-items:flex-start}
.kb-card .t-acoes{margin-top:7px;padding-top:7px}
.kb-card .t-menu{right:auto;left:0}.kb-card .t-menu::before{right:auto;left:12px}
.kb-card .t-obs{max-width:100%}
/* o cartão de um "⋯" aberto sobe acima dos vizinhos (transform do hover cria stacking context) */
.tarefa:has(.t-mais[open]),.kb-col:has(.t-mais[open]){position:relative;z-index:60}
@media(max-width:880px){
  .nt-grid{grid-template-columns:1fr 1fr}.nt-col-2{grid-column:span 2}
  .tv2-busca{flex-basis:100%;max-width:none}
  .sp-grid{grid-template-columns:1fr}
  .t-obs{max-width:200px}
}