/* Tema CLARO (omissão) */
  :root{--navy:#ffffff;--navy2:#f2f3f6;--panel:#f7f8fa;--line:#e3e6ec;--blue:#3D8BD4;--blue2:#5aa0e0;--txt:#12151c;--mut:#5b6472;--mut2:#838b98;--li:#0a66c2;--ig:#d6336c;--fb:#1877f2;--yt:#ff0000;--em:#0f766e;--rasc:#6b7280;--aprov:#d99a2b;--reparo:#e0556b;--ok:#22a06b;--agend:#3D8BD4;--pub:#7c5cfc;
    --hover:#e9edf3;--input-bg:#ffffff;--track-bg:#e9edf3;--chat-bubble:#e9edf3;--overlay:#000000cc;--s-agend-bg:#dceefb;--s-agend-txt:#1c5f8f;
    --s-rasc-bg:#e5e7eb;--s-rasc-txt:#4b5563;--s-aprov-bg:#faf0d7;--s-aprov-txt:#8a6412;--s-reparo-bg:#fbdfe5;--s-reparo-txt:#b02a45;
    --s-ok-bg:#d9f2e5;--s-ok-txt:#177a4e;--s-pub-bg:#e9e2fb;--s-pub-txt:#5b3fd4;--s-txtok-bg:#ddedf9;--s-txtok-txt:#1c6ea4;
    --chip-bg:#f0f2f5;--chip-hover:#e5e9ef;--accent-tint:#eaf3fc;
    --pchip-bg:#8da0c422;--pchip-warn-bg:#d99a2b20;--pchip-blue-bg:#3d8bd41c;--pchip-ok-bg:#22a06b1e;--pchip-bad-bg:#e0556b1c;
    --tint-ok:#22a06b2a;--tint-blue:#5a78dc22;--tint-bad:#e0556b24;--tint-aprov:#d99a2b59;--tint-warn:#d99a2b2a;
    --interruptor-off:#c9cfd9;--interruptor-botao:#ffffff;--interruptor-sombra:#0000004d;
    --semana-par:#eceff5;--dia-fora:#f3f4f7;--bitrix:#1393c7;}
  /* Tema ESCURO (data-theme="dark" no <html>, ver app.js erpie.themeInit) */
  :root[data-theme="dark"]{--navy:#070b18;--navy2:#0e1424;--panel:#121a2e;--line:#1f2a44;--txt:#e8eefb;--mut:#8da0c4;--mut2:#5d6f93;
    --hover:#16203a;--input-bg:#0c1322;--track-bg:#0c1322;--chat-bubble:#16203a;--overlay:#000000aa;--s-agend-bg:#10263f;--s-agend-txt:#7fb6ee;
    --s-rasc-bg:#374151;--s-rasc-txt:#cbd5e1;--s-aprov-bg:#3a2e12;--s-aprov-txt:#f0c060;--s-reparo-bg:#3a1620;--s-reparo-txt:#ff8095;
    --s-ok-bg:#0f3326;--s-ok-txt:#5fe0a8;--s-pub-bg:#241a40;--s-pub-txt:#b9a6ff;--s-txtok-bg:#10283d;--s-txtok-txt:#7cc0f0;
    --chip-bg:#0c1322;--chip-hover:#10192e;--accent-tint:#10263f;
    --pchip-bg:#8da0c414;--pchip-warn-bg:#d99a2b18;--pchip-blue-bg:#3d8bd418;--pchip-ok-bg:#22a06b18;--pchip-bad-bg:#e0556b1f;
    --tint-ok:#22a06b3d;--tint-blue:#5a78dc33;--tint-bad:#e0556b33;--tint-aprov:#d99a2b59;--tint-warn:#d99a2b45;
    --interruptor-off:#2a3654;--interruptor-botao:#e8eefb;--interruptor-sombra:#00000080;
    --semana-par:#0c1426;--dia-fora:#0a1020;--bitrix:#1aa7dc;}
  /* Escala de tipo (identidade 09/2026, revista 23/09): 6 tamanhos — 11 legenda/rótulo · 12 botão mini,
     chip, texto de apoio · 13 corpo/botão/campo · 15 subtítulo · 20 título de página · 28 número de destaque.
     Larguras de página: --w-lista para listas e painéis, --w-detalhe para uma coisa só (ficha, estratégia).
     Independente do tema (só cá uma vez). */
  :root{--fs-11:11px;--fs-12:12px;--fs-13:13px;--fs-15:15px;--fs-20:20px;--fs-28:28px;--w-lista:1000px;--w-detalhe:900px}
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:"Instrument Sans","Segoe UI",system-ui,Arial,sans-serif;background:var(--navy);color:var(--txt);height:100vh;overflow:hidden;transition:background .15s,color .15s}
  .app{display:grid;grid-template-columns:230px 1fr;height:100vh}
  .side{background:var(--navy2);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px;height:100vh;min-height:0}
  .logo{display:flex;align-items:center;gap:10px;padding:6px 8px 14px}
  .logo .orb{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#7fb6ee,#3D8BD4 55%,#15396b);box-shadow:0 0 12px #3d8bd480}
  .logo b{font-size:16px}.logo span{color:var(--mut);font-size:11px;display:block;font-weight:400}
  .nav{flex:1 1 auto;overflow-y:auto;min-height:0;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .nav::-webkit-scrollbar{width:6px}
  .nav::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
  .nav::-webkit-scrollbar-thumb:hover{background:var(--mut2)}
  /* Densidade da nav (11/09): com 16 itens + 4 grupos, o padding antigo estourava a altura do ecrã
     e aparecia scroll — o mockup usa itens mais baixos; o overflow-y fica só como rede de segurança */
  .navgroup{font-size:var(--fs-11);text-transform:uppercase;letter-spacing:.05em;color:var(--mut2);padding:9px 11px 3px;font-weight:700}
  .navgroup:first-child{padding-top:2px}
  .nav a{display:flex;align-items:center;gap:9px;padding:6px 11px;border-radius:8px;color:var(--mut);text-decoration:none;font-size:13px;cursor:pointer;margin-bottom:1px}
  .nav a:hover{background:var(--hover);color:var(--txt)}.nav a.on{background:var(--blue);color:#fff;font-weight:600}
  .nav .ic{width:18px;text-align:center;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
  .foot{flex-shrink:0;border-top:1px solid var(--line);padding-top:12px;position:relative}
  .brand-pick{display:flex;align-items:center;gap:8px;padding:8px;border:1px solid var(--line);border-radius:10px;font-size:13px;color:var(--txt);cursor:pointer}
  .brand-pick:hover{border-color:var(--blue)}
  .av{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
  .brandmenu{position:absolute;bottom:62px;left:0;right:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 -8px 30px #000a;z-index:30;max-height:calc(100vh - 90px);overflow-y:auto}
  .brandmenu .bm{display:flex;align-items:center;gap:9px;padding:9px 8px;border-radius:9px;cursor:pointer;font-size:13px;color:var(--mut)}
  .brandmenu .bm:hover,.brandmenu .bm.on{background:var(--hover);color:var(--txt)}
  /* white-space normal + anywhere: subtítulos longos (LinkedIn·Instagram·Facebook·YouTube não tem
     espaços) quebram em 2 linhas em vez de ficarem cortados na borda do menu (reportado 11/09) */
  .brandmenu .bm small{display:block;color:var(--mut2);font-size:10px;white-space:normal;overflow-wrap:anywhere}
  .brandmenu .bm .bm-check{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;font-size:11px;margin-right:2px}
  .main{display:flex;flex-direction:column;overflow:hidden}
  .top{display:flex;align-items:center;gap:14px;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--navy2)}
  .top h1{font-size:var(--fs-20)}.top .sub{color:var(--mut);font-size:12px}
  .spacer{flex:1}
  .filters{display:flex;gap:6px}
  .chipf{padding:6px 12px;border:1px solid var(--line);border-radius:20px;font-size:12px;color:var(--mut);cursor:pointer;display:flex;align-items:center;gap:6px}
  .chipf.on{background:var(--hover);color:var(--txt);border-color:var(--blue)}
  .dot{width:8px;height:8px;border-radius:50%}
  /* Sistema de botões (identidade 09/2026, do mockup .pbtn): sem height fixo — os muitos overrides
     inline (font-size:11px;padding:4px 8px) das filas densas continuam a mandar no tamanho. */
  /* white-space:nowrap (23/09): um botão que parte em duas linhas fica com o dobro da altura dos vizinhos */
  .btn{background:var(--blue);color:#fff;border:none;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer;display:inline-flex;align-items:center;gap:7px;text-decoration:none;white-space:nowrap}
  .btn:hover{background:var(--blue2)}.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
  .btn.ghost:hover{background:transparent;border-color:var(--blue)}
  .btn.ter{background:transparent;border:none;color:var(--mut)}.btn.ter:hover{background:var(--hover);color:var(--txt)}
  .btn.ico{padding:0;width:28px;height:28px;justify-content:center}
  .btn.ai{background:linear-gradient(135deg,var(--pub),var(--blue))}
  .btn.ok{background:var(--ok)}.btn.rep{background:var(--reparo)}
  /* 02/10 (pedido do Gabriel): os botões que levam ao Bitrix24 com a cor dele — vê-se de relance para onde se vai */
  .btn.bitrix{background:var(--bitrix);color:#fff;border-color:transparent}.btn.bitrix:hover{filter:brightness(1.08)}
  /* 21/09: .ok/.rep/.ai vêm DEPOIS de .btn:hover com a mesma especificidade e tapavam-no — os botões
     verde/vermelho/IA não reagiam ao rato. Hover por brilho, igual nos dois temas. */
  .btn.ok:hover,.btn.rep:hover,.btn.ai:hover{filter:brightness(1.08)}
  .btn svg{flex-shrink:0}
  .btn:disabled{opacity:.55;cursor:default}
  /* Foco por teclado (21/09): antes só a .linha o tinha; o resto ficava no default do browser */
  .btn:focus-visible,.chipt:focus-visible,.chipf:focus-visible,.ptabs button:focus-visible,.ptabs a:focus-visible,.dd-menu button:focus-visible,.dd-menu a:focus-visible,.iconbtn:focus-visible,.nav a:focus-visible,.brand-pick:focus-visible{outline:2px solid var(--blue2);outline-offset:2px}
  /* Rótulo de secção (receita do ESTILO-UI) como classe — por cima de qualquer campo/bloco de um card */
  .rotulo{font-size:var(--fs-11);text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--mut2);margin-bottom:4px}
  /* Estado vazio (receita do ESTILO-UI, componente EstadoVazio): a frase diz QUANDO aparece algo */
  .vazio{border:1px dashed var(--line);border-radius:10px;padding:22px;text-align:center;font-size:12px;color:var(--mut2);display:flex;flex-direction:column;gap:10px;align-items:center;line-height:1.5}
  /* KPI calmo (componente Kpi): rótulo uppercase + número herói tabular; secundário em azul ao lado */
  .kpi{display:flex;flex-direction:column;gap:3px;min-width:0}
  .kpi .rot{font-size:10px;text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--mut2)}
  .kpi .val{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
  .kpi .num{font-size:var(--fs-28);font-weight:700;line-height:1.1;color:var(--txt);font-variant-numeric:tabular-nums}
  .kpi.compacto .num{font-size:var(--fs-20)}
  .kpi .sec{font-size:12px;color:var(--blue);font-variant-numeric:tabular-nums}
  .kpi .nota{font-size:11px;color:var(--mut2)}
  /* Cartão de escolha (21/09): opção com título + descrição, uma selecionada (formatos de newsletter) */
  .escolha{flex:1 1 168px;min-width:150px;text-align:left;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:var(--chip-bg);cursor:pointer;color:var(--txt);font-family:inherit}
  .escolha:hover{border-color:var(--blue)}
  .escolha.on{border-color:var(--blue);background:var(--tint-blue)}
  .escolha .tit{font-size:13px;font-weight:700;margin-bottom:2px;display:flex;align-items:center;gap:5px}
  .escolha .desc{font-size:11px;color:var(--mut2);line-height:1.45}
  .escolha:disabled{opacity:.55;cursor:default}
  /* Chip de estado "ponto + tinta" (mockup .pchip) — substitui gradualmente as pills coloridas .stt */
  /* Interruptor (25/09): ligar/desligar UMA coisa (uma rede, um módulo, uma automação). O próprio checkbox, desenhado —
     <input type="checkbox" class="interruptor" role="switch">; escolher itens de uma lista (dias, fontes) continua caixa */
  input.interruptor{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:32px;height:18px;margin:0;border-radius:99px;background:var(--interruptor-off);cursor:pointer;transition:background .15s;vertical-align:middle}
  input.interruptor::before{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--interruptor-botao);box-shadow:0 1px 2px var(--interruptor-sombra);transition:transform .15s}
  input.interruptor:checked{background:var(--blue)}
  input.interruptor:checked::before{transform:translateX(14px)}
  input.interruptor:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
  input.interruptor:disabled{opacity:.5;cursor:default}
  @media (prefers-reduced-motion:reduce){input.interruptor,input.interruptor::before{transition:none}}
  .pchip{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-12);font-weight:500;line-height:1;padding:4px 10px;border-radius:99px;background:var(--pchip-bg);color:var(--txt);white-space:nowrap}
  .pchip .dot{width:6px;height:6px;border-radius:50%;background:var(--mut2);flex-shrink:0}
  .pchip.warn{background:var(--pchip-warn-bg)}.pchip.warn .dot{background:var(--aprov)}
  .pchip.blue{background:var(--pchip-blue-bg)}.pchip.blue .dot{background:var(--blue)}
  .pchip.ok{background:var(--pchip-ok-bg)}.pchip.ok .dot{background:var(--ok)}
  .pchip.bad{background:var(--pchip-bad-bg)}.pchip.bad .dot{background:var(--reparo)}
  .pchip.mut{color:var(--mut)}
  .pchip .tcode{color:var(--mut2);font-size:10px}
  /* Dropdown do cabeçalho (mockup .dd) — render condicional no componente, um aberto de cada vez
     (mesmo comportamento do menu de marcas: fecha ao escolher ou ao voltar a clicar no botão) */
  .dd{position:relative;display:inline-flex}
  .dd-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:30;min-width:250px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:5px;box-shadow:0 10px 30px #00000038}
  .dd-menu.dir{left:auto;right:0}
  .dd-menu button,.dd-menu a{display:flex;gap:9px;align-items:center;width:100%;background:none;border:none;color:var(--txt);font-size:var(--fs-13);font-family:inherit;padding:8px 10px;border-radius:7px;cursor:pointer;text-align:left;text-decoration:none}
  .dd-menu button:hover,.dd-menu a:hover{background:var(--hover)}
  .dd-menu button:disabled{opacity:.5;cursor:default}
  .dd-menu button small{color:var(--mut2);margin-left:auto;font-size:11px;white-space:nowrap;padding-left:10px}
  .dd-menu .grupo{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut2);font-weight:700;padding:7px 10px 3px}
  .dd-menu .sep{height:1px;background:var(--line);margin:4px 6px}
  .dd-menu button.perigo{color:var(--reparo)}
  .dd-menu svg{color:var(--mut);flex-shrink:0}
  /* Faixa "Hoje" (mockup): o que há para despachar agora, em chips clicáveis que filtram a lista */
  .hoje{display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--navy2);border:1px solid var(--line);border-radius:10px;padding:9px 12px}
  .chipt{background:var(--panel);border:1px solid var(--line);border-radius:99px;color:var(--txt);font-size:12px;font-weight:500;font-family:inherit;padding:5px 12px;cursor:pointer;display:inline-flex;gap:7px;align-items:center}
  .chipt:hover{border-color:var(--blue)}
  .chipt b{color:var(--blue2)}
  .chipt.on{border-color:var(--blue);color:var(--blue)}
  /* Tabs de sub-vista (mockup .ptabs): sublinhado azul, contagem ao lado */
  .ptabs{display:flex;gap:2px;border-bottom:1px solid var(--line);flex-wrap:wrap}
  .ptabs button,.ptabs a{background:none;border:none;border-bottom:2px solid transparent;color:var(--mut);font-size:var(--fs-13);font-weight:500;font-family:inherit;padding:7px 11px;cursor:pointer;display:inline-flex;gap:6px;align-items:center;margin-bottom:-1px;text-decoration:none}
  .ptabs button b,.ptabs a b{font-weight:600;color:var(--mut2)}
  .ptabs button.on,.ptabs a.on{color:var(--txt);border-bottom-color:var(--blue)}
  .ptabs button.on b,.ptabs a.on b{color:var(--blue2)}
  .ptabs svg{color:var(--mut2)}.ptabs .on svg{color:var(--blue)}
  /* Lista de linhas do Growth (mockup F3) — a linha diz o próximo passo; o detalhe vive na gaveta.
     Sem overflow:hidden: os menus ⋯ (position:absolute) têm de poder sair do retângulo. */
  .linhas{border:1px solid var(--line);border-radius:10px;background:var(--panel)}
  /* revisão UI 23/09: só a linha que abre alguma coisa (role="button") tem mão e realce; as outras não fingem */
  .linha{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);cursor:default;flex-wrap:wrap}
  .linha[role="button"]{cursor:pointer}
  .linha:last-child{border-bottom:none}
  .linha[role="button"]:hover{background:var(--hover)}
  .linha:focus-visible{outline:2px solid var(--blue2);outline-offset:-2px}
  .linha .quem{min-width:200px;flex:0 1 260px}
  .linha .quem b{font-size:13px}
  .linha .quem span{display:block;font-size:11px;color:var(--mut2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .linha .estado{flex:1 1 240px;min-width:180px}
  .linha .acao{display:flex;gap:6px;align-items:center;margin-left:auto}
  .linha .sug{flex-basis:100%;display:flex;gap:8px;align-items:center;font-size:12px;background:var(--accent-tint);border:1px solid var(--line);border-radius:8px;padding:6px 10px;cursor:default;flex-wrap:wrap}
  .linha .sug .ev{color:var(--mut2);font-style:italic}
  .btn.mini{font-size:12px;padding:5px 10px}
  /* Dashboard touchpoints (roupa dataviz, 11/09): cabeçalhos de tabela discretos, hover só nas
     linhas clicáveis, números tabulares; barras finas de pontas redondas sobre pista recessiva */
  .dashtbl{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums}
  .dashtbl thead tr{color:var(--mut2);font-size:10px;text-transform:uppercase;letter-spacing:.04em}
  .dashtbl tr.click{cursor:pointer}
  .dashtbl tr.click:hover td{background:var(--hover)}
  /* Tabelas longas vivem num contentor com scroll próprio — o cabeçalho cola ao topo do contentor */
  .dashtbl thead th{position:sticky;top:0;background:var(--panel);z-index:1}
  .dashtbl a{color:var(--txt);text-decoration:none}
  .dashtbl a:hover{color:var(--blue)}
  .dbar{background:var(--track-bg);border-radius:99px;height:8px;overflow:hidden}
  .dbar>div{background:var(--blue);border-radius:99px;height:8px}
  /* barra vertical (histogramas por hora): a pista cresce de baixo para cima */
  .dbar.vert{height:40px;display:flex;flex-direction:column;justify-content:flex-end;border-radius:4px}
  .dbar.vert>div{height:auto;width:100%;border-radius:4px 4px 0 0}
  /* <details> da casa: o resumo é clicável e diz-o; usado para "Para quem gere o servidor" e afins */
  details>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:6px}
  details>summary::-webkit-details-marker{display:none}
  details>summary::before{content:"›";display:inline-block;color:var(--mut2);transition:transform .12s}
  details[open]>summary::before{transform:rotate(90deg)}
  .dashsec{font-size:13px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:7px}
  .dashsec svg{color:var(--mut2)}
  /* Itens da fila do executor (mockup): cartãozinho por job, em-curso realçado a azul, posição em
     badge — partilhado pelo painel lateral e pelo modal (ExecutorFilaLista) */
  .fila-item{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:6px 9px;margin-top:6px;background:var(--panel);font-size:12px}
  .fila-item.curso{border-color:var(--blue);background:var(--accent-tint)}
  .fila-item .pos{width:18px;height:18px;border-radius:50%;background:var(--chip-bg);color:var(--mut2);font-size:10px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;font-variant-numeric:tabular-nums}
  /* Faixa de contexto para quem chega de novo (mockup F3) — fecha e fica fechada (localStorage) */
  .banner{display:flex;gap:9px;align-items:center;background:var(--accent-tint);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:12px;flex-wrap:wrap}
  .banner svg{color:var(--blue2);flex-shrink:0}
  /* 25/09: o botão Perguntar flutua no canto de baixo — o conteúdo tem sempre uma folga no fundo do tamanho dele, para o
     último botão de cada página (ex.: "Apagar marca") poder subir acima dele. */
  :root{--folga-fundo:76px}
  .content{flex:1;overflow:auto;padding:20px 20px var(--folga-fundo)}
  .calhead{display:flex;align-items:center;gap:14px;margin-bottom:14px}
  .calhead .mname{font-size:16px;font-weight:600;min-width:150px}
  /* minmax(0,1fr): sem isto, conteúdo que não quebra (badges/hora) empurrava a coluna e esmagava as vizinhas */
  .grid7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
  .dow{color:var(--mut2);font-size:11px;text-transform:uppercase;letter-spacing:.5px;padding:4px 6px}
  /* altura FIXA: as células não se moldam ao conteúdo (pedido 08/09) — dias cheios fazem scroll cá dentro */
  .cell{background:var(--panel);border:1px solid var(--line);border-radius:10px;height:128px;min-width:0;padding:6px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}
  .cell.out{opacity:.35}
  /* 28/09: mês com semanas completas — rótulo da semana à esquerda, semanas alternadas em dois tons, dias do mês ao lado
     com outro fundo (os posts veem-se na mesma) */
  .grid7.com-semanas{grid-template-columns:72px repeat(7,minmax(0,1fr))}
  .cell.sem-par{background:var(--semana-par)}
  .cell.fora{background:var(--dia-fora);border-style:dashed}.cell.fora .dnum{color:var(--mut2);font-weight:500}
  .semana-rot{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:6px 8px;border-radius:10px;font-size:11px;color:var(--mut2);border:1px solid transparent}
  .semana-rot b{font-size:12px;color:var(--txt);font-weight:600}
  .semana-rot.sem-par{background:var(--semana-par)}
  .semana-rot.atual{border-color:var(--blue)}.semana-rot.atual b{color:var(--blue)}.cell .dnum{font-size:12px;color:var(--mut);font-weight:600;margin-bottom:2px;align-self:flex-start}
  /* 21/09: criar um post é o "+" que aparece ao passar o rato na célula (clicar na célula abre o dia) */
  .cell{position:relative}.cell .add{position:absolute;top:3px;right:3px;width:22px;height:22px;opacity:0;transition:opacity .12s}
  .cell:hover .add,.cell .add:focus-visible{opacity:1}
  .cell.today .dnum{background:var(--blue);color:#fff;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px}
  /* O número do dia ABRE o dia em detalhe (a célula à volta cria um post) — tem de se ver que é um
     alvo clicável, senão quem quer ver acaba a criar (17/09). */
  .dnum.abre{cursor:pointer;transition:background .12s,box-shadow .12s}
  .dnum.abre:hover{background:var(--hover);box-shadow:inset 0 0 0 1px var(--line)}
  .cell.today .dnum.abre:hover{background:var(--blue2);box-shadow:inset 0 0 0 1px var(--blue)}
  /* A contagem é um TOKEN à parte: colada ao número, "1" + "2" lia-se "12". */
  /* Pré-visualização da newsletter: aproxima o artigo do LinkedIn (medida de leitura, títulos com
     ar, listas recuadas) para o que se vê aqui ser o que se vê lá depois de colar (17/09). */
  /* 18/09: uma cara só para a edição, na lista e no editor — largura de artigo do LinkedIn (~740px),
     texto de leitura (15px/1.75), título com ar de título. Antes o editor tinha 640px/14px e a lista
     os defaults do browser, e a mesma edição parecia duas. */
  .nl-preview{max-width:740px;font-size:15px;line-height:1.75;color:var(--txt)}
  .nl-preview h1{font-size:27px;line-height:1.25;margin:0 0 12px;font-weight:700;letter-spacing:-.01em}
  .nl-preview h2{font-size:20px;line-height:1.3;margin:24px 0 8px;font-weight:700}
  .nl-preview h3{font-size:16px;line-height:1.4;margin:18px 0 6px;font-weight:700}
  .nl-preview p{margin:0 0 14px}
  .nl-preview ul,.nl-preview ol{margin:0 0 12px;padding-left:22px}
  .nl-preview li{margin-bottom:5px}
  .nl-preview blockquote{margin:0 0 12px;padding:6px 14px;border-left:3px solid var(--blue);color:var(--mut);font-style:italic}
  .nl-preview hr{border:0;border-top:1px solid var(--line);margin:18px 0}
  .nl-preview a{color:var(--li);text-decoration:underline}
  .nl-preview strong{font-weight:700}
  /* imagens/GIFs no corpo (17/09): so variaveis, para nao repetir o erro dos chips ilegiveis no tema claro */
  .nl-preview figure{margin:0 0 14px}
  .nl-preview figure img,.nl-preview p img{max-width:100%;height:auto;border-radius:8px;border:1px solid var(--line);display:block}
  .nl-preview figcaption{font-size:11.5px;color:var(--mut2);margin-top:5px;text-align:center}
  .dnum .qtd{background:var(--chip-bg);color:var(--mut2);border:1px solid var(--line);border-radius:99px;padding:0 6px;font-size:10px;font-weight:700;line-height:15px;display:inline-block}
  .cell.today .dnum .qtd{background:#ffffff2e;color:#fff;border-color:#ffffff40}
  /* .post e o CHIP DO CALENDARIO: o border-left sem cor herda o texto e a cor certa vem do inline
     (UiMaps.SttBorder). Fora do calendario nao se usa - desenhava uma barra branca sem significado. */
  .post{border-radius:7px;padding:5px 7px;font-size:11px;cursor:pointer;border-left:3px solid;background:var(--chip-bg);display:flex;flex-direction:column;gap:3px;overflow:hidden;min-width:0;flex-shrink:0}
  /* Bloco de TEXTO CITADO (22/09): o post a que um comentario responde, a nota de uma ficha, o
     excerto de uma newsletter. Recessivo por omissao, porque e contexto; .forte para o texto que e
     o assunto (o comentario a responder); .nossa para o que foi escrito por nos. */
  .citacao{border-radius:10px;padding:9px 12px;font-size:12px;line-height:1.5;white-space:pre-wrap;
    background:var(--track-bg);border:none;color:var(--mut);overflow-wrap:anywhere}
  /* a diferenca e' de FORMA e nao so' de tom: o contexto nao tem contorno, o que e' para responder tem.
     Dois blocos com a mesma moldura liam-se como dois cartoes iguais (revisao a' vista, 22/09). */
  .citacao.forte{background:var(--chip-bg);border:1px solid var(--line);color:var(--txt);font-size:13px;padding:10px 12px}
  .citacao.nossa{background:var(--accent-tint);color:var(--txt);font-size:13px}
  .post:hover{background:var(--chip-hover)}.post .ttl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt);font-weight:500}
  .post .meta{display:flex;align-items:center;gap:5px;color:var(--mut2);font-size:10px;min-width:0;flex-wrap:wrap}
  /* display + vertical-align: sem eles o span inline ignorava width/height fora de contextos flex
     e o ponto da marca aparecia deslocado (a "bola azul" solta nas linhas do Growth, 11/09) */
  .bdot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block;vertical-align:middle}
  .net{width:14px;height:14px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff}
  .net.li{background:var(--li)}.net.ig{background:var(--ig)}.net.fb{background:var(--fb)}.net.yt{background:var(--yt);font-size:7px}.net.em{background:var(--em);font-size:9px}
  .iconbtn{position:relative;background:var(--panel);border:1px solid var(--line);color:var(--txt);width:38px;height:38px;border-radius:10px;font-size:16px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
  .iconbtn:hover{border-color:var(--blue)}
  .notifdot{position:absolute;top:-6px;right:-6px;background:var(--reparo);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px}
  .notifdot.zero{display:none}
  .repcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
  .repcard .bar-row{display:flex;align-items:center;gap:8px}
  .stt{font-size:10.5px;padding:2px 8px;border-radius:10px;font-weight:700;align-self:flex-start;white-space:nowrap}
  /* Chips de estado por variável de tema — os valores fixos escuros eram ilegíveis no tema claro */
  .s-rasc{background:var(--s-rasc-bg);color:var(--s-rasc-txt)}.s-aprov{background:var(--s-aprov-bg);color:var(--s-aprov-txt)}.s-reparo{background:var(--s-reparo-bg);color:var(--s-reparo-txt)}
  .s-ok{background:var(--s-ok-bg);color:var(--s-ok-txt)}.s-agend{background:var(--s-agend-bg);color:var(--s-agend-txt)}.s-pub{background:var(--s-pub-bg);color:var(--s-pub-txt)}.s-txtok{background:var(--s-txtok-bg);color:var(--s-txtok-txt)}
  .kan{display:grid;grid-template-columns:repeat(6,minmax(180px,1fr));gap:12px;height:100%}
  .kcol{background:var(--navy2);border:1px solid var(--line);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px;overflow:auto}
  .kcol h3{font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--mut);display:flex;justify-content:space-between;padding:2px 4px}
  .kcount{background:var(--hover);border-radius:10px;padding:1px 8px;font-size:11px;color:var(--mut)}
  .kcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px;cursor:pointer;display:flex;flex-direction:column;gap:7px}
  .kcard .kt{font-size:13px;font-weight:600;line-height:1.3}.kcard .kb{font-size:11px;color:var(--mut2);display:flex;align-items:center;gap:6px}
  .ov{position:fixed;inset:0;background:#000a;backdrop-filter:blur(2px);display:none;z-index:40}.ov.show{display:block}
  .drawer{position:fixed;top:0;right:0;width:1040px;max-width:98vw;height:100vh;background:var(--navy2);border-left:1px solid var(--line);z-index:50;transform:translateX(100%);transition:transform .25s;display:flex;flex-direction:column}
  .drawer.show{transform:translateX(0)}
  .dragger{position:absolute;left:0;top:0;width:8px;height:100%;cursor:col-resize;z-index:60}
  .dragger:hover{background:var(--blue)}
  .dcols{flex:1;display:flex;overflow:hidden}
  .dform{flex:1;overflow:auto;padding:18px 20px;display:flex;flex-direction:column;gap:16px}
  .dchat{width:340px;flex-shrink:0;border-left:1px solid var(--line);display:flex;flex-direction:column;padding:14px;background:var(--navy)}
  .dchat #f-chat{flex:1;overflow:auto;display:flex;flex-direction:column;gap:6px}
  @media(max-width:760px){.dcols{flex-direction:column}.dchat{width:auto;border-left:none;border-top:1px solid var(--line)}}
  .dh{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}.dh .x{margin-left:auto;background:none;border:none;color:var(--mut);font-size:22px;cursor:pointer}
  .db{padding:0;overflow:hidden;flex:1;display:flex;flex-direction:column}
  .dsection{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--blue);display:flex;align-items:center;gap:6px;padding-bottom:6px;margin-top:6px;border-bottom:1px solid var(--line)}
  .dsection:first-child{margin-top:0}
  .fld label:not(.btn){font-size:var(--fs-11);text-transform:uppercase;letter-spacing:.05em;font-weight:700;color:var(--mut2);display:block;margin-bottom:4px}
  .fld input,.fld textarea,.fld select{width:100%;background:var(--input-bg);border:1px solid var(--line);border-radius:8px;color:var(--txt);padding:6px 9px;font-size:var(--fs-13);font-family:inherit}
  .fld.grande input,.fld.grande select{background:var(--panel);border-radius:10px;padding:10px 12px;font-size:14px}
  .fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--blue)}
  .fld textarea{min-height:120px;resize:vertical;line-height:1.5}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .netpick{display:flex;gap:8px}.netpick .np{flex:1;border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center;font-size:12px;color:var(--mut);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
  .netpick .np.on{border-color:var(--blue);background:var(--accent-tint);color:var(--txt)}
  .approval{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
  .approval h4{font-size:13px;margin-bottom:10px}
  .comment{background:var(--chip-bg);border:1px solid var(--line);border-radius:10px;padding:10px;font-size:13px;margin-bottom:8px}
  .comment .who{font-size:11px;color:var(--blue);font-weight:600;margin-bottom:3px}.comment.rep{border-color:var(--reparo)}.comment.rep .who{color:var(--reparo)}
  .repbox{display:flex;gap:8px;margin-top:8px}.repbox input{flex:1;background:var(--chip-bg);border:1px solid var(--line);border-radius:10px;color:var(--txt);padding:9px 11px;font-size:13px}
  .dfoot{padding:14px 20px;border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap}
  .media-box{border:1px dashed var(--line);border-radius:10px;padding:12px;text-align:center;color:var(--mut2);font-size:13px}
  .media-box img{max-width:100%;border-radius:8px;margin-top:8px}
  .brandtag{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);background:var(--chip-bg);border:1px solid var(--line);border-radius:20px;padding:4px 10px}
  .legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px;font-size:11px;color:var(--mut)}.legend span{display:flex;align-items:center;gap:5px}
  /* Painel lateral da fila do executor (Growth → Touchpoints): sticky à direita; em ecrãs estreitos só
     ENCOLHE — o colapso para rail é estado do componente, nunca display:none (a feature não pode "sumir") */
  .fila-aside{flex:0 0 340px;width:340px;position:sticky;top:12px;max-height:calc(100vh - 24px);display:flex;flex-direction:column;min-width:0}
  .fila-aside.fechada{flex:0 0 auto;width:auto}
  .fila-aside .fila-scroll{overflow-y:auto;min-height:0}
  @media (max-width:1280px){.fila-aside{flex-basis:300px;width:300px}}
  /* Abaixo de 1200px a fila ao lado do conteudo deixava ~700px para tabelas e grelhas de 2 colunas
     (revisao 17/09): sai do caminho — tem casa propria nos Touchpoints. */
  @media (max-width:1200px){.fila-aside{display:none}}
  /* Toasts em fila (21/09): empilham no centro em baixo; .ok/.bad distinguem sucesso de erro */
  .toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:99;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
  .toast{pointer-events:auto;background:var(--panel);border:1px solid var(--blue);color:var(--txt);padding:10px 10px 10px 16px;border-radius:10px;box-shadow:0 8px 30px #000a;display:flex;gap:10px;align-items:center;max-width:min(560px,92vw);font-size:13px;line-height:1.4}
  .toast.ok{border-color:var(--ok)}.toast.bad{border-color:var(--reparo)}
  .toast .x{background:none;border:0;color:var(--mut);cursor:pointer;font-size:18px;line-height:1;padding:0 4px;flex-shrink:0}
  .toast .x:hover{color:var(--txt)}
  .modal{position:fixed;inset:0;background:#000a;display:none;align-items:center;justify-content:center;z-index:60}.modal.show{display:flex}
  .modalbox{background:var(--navy2);border:1px solid var(--line);border-radius:14px;padding:22px;width:460px;max-width:92vw;display:flex;flex-direction:column;gap:14px}
  .modalbox h3{font-size:16px}
  .spin{display:inline-block;width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--blue);border-radius:50%;animation:sp .7s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
  .btn .spin{border-color:#fff5;border-top-color:#fff}   /* branca só dentro dos botões (fundo de cor); fora deles usa os tokens do tema */
  /* ---- Revisão UI 23/09 (fase 2): o sistema que o ESTILO-UI descreve, agora imposto ----
     Botões: 3 tamanhos (.btn · .btn.mini · .btn.ter.ico) e cor por papel — azul principal, .ok aprovar/sai para
     fora, .ai só quando a IA escreve, .ghost secundário, .perigo destrutivo. */
  .btn.perigo{background:var(--reparo)}.btn.perigo:hover{filter:brightness(1.08)}
  .btn.ghost.perigo{background:transparent;border:1px solid var(--line);color:var(--reparo)}
  .btn.ghost.perigo:hover{border-color:var(--reparo);filter:none}
  .btn.ter.perigo{background:transparent;border:none;color:var(--reparo)}.btn.ter.perigo:hover{background:var(--tint-bad)}
  .btn.mini.ico{width:24px;height:24px;padding:0}
  /* Botão dividido: ação + seta de variantes, colados */
  .split{display:inline-flex;position:relative}
  .split>.btn:first-child{border-radius:8px 0 0 8px}
  .split>.btn:last-child{border-radius:0 8px 8px 0;padding-left:7px;padding-right:7px;box-shadow:inset 1px 0 0 #ffffff4d}
  .split>.btn.ghost:last-child{border-left:none;box-shadow:none}
  /* Chip pequeno (dentro de linhas densas) */
  .pchip.sm{font-size:var(--fs-11);padding:3px 8px;gap:5px}
  .pchip.sm .dot{width:5px;height:5px}
  /* Caixa de aviso na página: .warn (atenção), .bad (falhou/bloqueia), .info (para saber) */
  .aviso{display:flex;gap:9px;align-items:flex-start;padding:10px 12px;border-radius:8px;font-size:var(--fs-12);line-height:1.5;background:var(--tint-blue);color:var(--txt)}
  .aviso svg{flex-shrink:0;margin-top:1px}
  .aviso.warn{background:var(--tint-warn)}.aviso.warn svg{color:var(--aprov)}
  .aviso.bad{background:var(--tint-bad)}.aviso.bad svg{color:var(--reparo)}
  .aviso.info svg{color:var(--blue)}
  /* A carregar (componente <ACarregar>): uma linha só, igual em todo o lado */
  .carregar{display:flex;gap:9px;align-items:center;color:var(--mut2);font-size:var(--fs-12);padding:14px 2px}
  .carregar .spin{border-color:var(--line);border-top-color:var(--blue)}
  /* "Saber mais" (revisão UI 23/09): a intro fica numa frase; o resto abre a pedido */
  details.saber{font-size:var(--fs-12);color:var(--mut2);line-height:1.6}
  details.saber summary{cursor:pointer;color:var(--blue);font-weight:600;list-style:none;display:inline-flex;align-items:center;gap:4px}
  details.saber summary::-webkit-details-marker{display:none}
  details.saber summary::after{content:"▾";font-size:10px}
  details.saber[open] summary::after{content:"▴"}
  details.saber>div{margin-top:4px}
  /* Barra do Guardar colada ao fundo (23/09): o .content tem 20px de padding e o sticky conta a partir dele —
     com bottom:0 a barra ficava 20px acima do fundo e o formulário via-se a passar por baixo. Estende-se
     até à borda (bottom negativo = padding) e tapa essa faixa com o próprio fundo. */
  .barra-guardar{position:sticky;bottom:calc(-1 * var(--folga-fundo));z-index:5;display:flex;gap:8px;align-items:center;flex-wrap:wrap;background:var(--navy);padding:10px 0 calc(var(--folga-fundo) + 10px);margin-bottom:calc(-1 * var(--folga-fundo));border-top:1px solid var(--line)}
  /* Ecrãs estreitos (auditoria 23/09, lote 5). O botão do menu só existe abaixo de 900px.
     ~1100px (1366 a 125%): a barra de topo quebra em duas linhas em vez de esmagar o título.
     <900px (tablet/telemóvel): a barra lateral sai do ecrã e abre-se por cima (.menu-aberto), o conteúdo usa a largura toda,
     as tabelas deslizam dentro da sua caixa (a página nunca desliza para o lado).
     <560px: as grelhas escritas nos componentes (inline) passam a colunas que cabem — é a única forma de as alcançar sem
     mexer em cada página. */
  .menu-btn,.menu-veu{display:none}
  @media (max-width:1200px){.top{flex-wrap:wrap;row-gap:8px}.top .filters{flex-wrap:wrap}}
  @media (max-width:900px){
    .app{grid-template-columns:1fr}
    .side{position:fixed;left:0;top:0;bottom:0;width:260px;max-width:85vw;z-index:120;transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 30px #0006}
    .app.menu-aberto .side{transform:none}
    .menu-veu{display:block;position:fixed;inset:0;background:var(--overlay);z-index:110}
    .menu-btn{display:inline-flex;flex-shrink:0}
    .top{padding:10px 12px;gap:8px}
    .top h1{font-size:var(--fs-15)}
    .top .sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .top .filters{order:10;width:100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
    .content{padding:12px 12px var(--folga-fundo)}
    .content table{display:block;max-width:100%;overflow-x:auto}
    .barra-guardar{bottom:-12px;margin-bottom:-12px}
    .row2{grid-template-columns:1fr}
    .kan{overflow-x:auto}
  }
  @media (max-width:560px){
    .content [style*="grid-template-columns"]:not(.grid7){grid-template-columns:repeat(auto-fill,minmax(150px,1fr)) !important}
    .linha .acao{width:100%;justify-content:flex-start}
  }