/* Central Zen
   O visual do painel (21/10/2026, "livro-razão"): dois temas sobre a mesma
   estrutura, escolhidos pelo botão de sol e lua no topo (static/js/tema.js
   põe data-tema="dia" ou "noite" no <html>).

   DIA (o padrão): o claro do Legency Media e do Trafft — fundo #efeeeb,
   cartões brancos com borda de 1px e sem sombra, o azul elétrico só no botão
   principal e na linha do gráfico, e um cartão preto com os números grandes
   (a "cara" da tela). Uma grotesca só (DM Sans), títulos em 18-28px, rótulos
   em caixa baixa num cinza legível, com as cores da marca.

   NOITE: o mesmo desenho sobre #202020, conforme a referência do usuário.
   Superfícies opacas um passo acima do fundo, sem vidro e sem brilho.

   Toda cor sai de um token: cor fixa no CSS quebra um dos temas. Este arquivo
   é a base: tokens, tipografia, controles e as peças que todas as telas usam.
   O que é de uma tela só mora em area-trabalho.css. */

:root{
  /* ---- DIA ----
     superfícies: cinza-claro, branco, e um passo entre eles — separadas por
     uma linha de 1px ou por um passo de tom, nunca por sombra */
  --ground:#efeeeb;          /* o cinza quente da referência do modo dia */
  --ceu-fundo:#101114;       /* o login mantém o céu escuro nos dois temas */
  --surface:#ffffff;         /* painéis, listas, cartões */
  --surface-2:#f7f7f7;       /* campos, trilhos, cabeçalhos de tabela */
  --surface-3:#e9e9e9;       /* item ativo do menu, colunas dos quadros */
  --surface-4:#dedede;       /* o hover do botão secundário */
  --white:#ffffff;           /* o cartão sólido: gráficos, campos (o "branco" de cada tema) */
  --card:#ffffff;            /* o cartão dos quadros (Trello) */
  --flutuante:#ffffff;       /* o que flutua: menu, janela de confirmação */
  --line:#e6e6e6;            /* a borda de painel: um sussurro sobre o fundo */
  --line-soft:#efefef;       /* divisória de lista */
  --line-strong:#cfcfcf;     /* contorno de campo e de controle */
  --line-hover:#b5b5b5;
  --line-accent:#9fa9ff;     /* a borda que acende em azul (cartão em hover, coluna recebendo) */
  /* tinta: azul-marinho quase preto (o do Trafft), nunca cinza em texto corrido */
  --ink:#0b1230;
  --ink-2:#334363;
  --muted:#5b647a;           /* 5.2:1 sobre o fundo */
  --faint:#6b7084;           /* placeholders: 4.5:1 */
  /* a ação: o azul elétrico do Legency, só no botão principal, no foco e na linha dos gráficos */
  --accent:#0004f6;
  --pilula-fundo:#eef0ff;    /* a pilula das instrucoes de tela */
  --pilula-ink:#1f2544;
  --pilula-anel:#c5c9ff;
  --accent-2:#0003c4;
  --on-accent:#ffffff;
  --accent-soft:#e9eaff;
  --accent-ink:#0003a8;
  --accent-sub:rgba(0,4,246,.35);          /* o sublinhado dos links */
  --estrela:var(--ink);                    /* os links "abrir ... →" da Visão geral: tinta, não azul */
  --estrela-forte:var(--accent);
  --estrela-fraca:var(--accent-soft);
  /* o cartão preto do Legency: a régua de números grandes (os KPIs) */
  --destaque-bg:#000000; --destaque-ink:#ffffff; --destaque-muted:#b4b4b4; --destaque-line:#2b2b2b; --destaque-crit:#ff8a80;
  /* a barra lateral: senta no fundo da página, sem cor */
  --app-bg:var(--ground);
  --nav-bg:var(--ground);
  --nav-ink:var(--ink);
  --nav-muted:var(--muted);
  --nav-line:var(--line);
  --nav-ativo:var(--surface-3);
  --marca-filtro:brightness(0) opacity(.92);   /* a marca é branca: no dia vira tinta */
  --marca-filtro-capa:none;                    /* a mesma marca sobre o cartão preto do login: fica branca */
  /* estado: tinta escura sobre tom pálido da mesma cor */
  --ok:#247b50; --ok-soft:#dcfae5; --ok-ink:#04250e;
  --warn:#92400e; --warn-soft:#fffbeb; --warn-ink:#92400e;
  --crit:#c4242a; --crit-soft:#ffedea; --crit-ink:#831c1e;
  --live:#c4242a; --live-soft:#ffedea;
  --hoje-bg:#e9eaff; --hoje-line:#9fa9ff;      /* o dia de hoje na agenda */
  --rolagem:rgba(20,27,45,.22); --rolagem-forte:rgba(20,27,45,.42);   /* a barra de rolagem */
  /* o chat (26/10/2026): o fundo azul da conversa e o balão de quem fala comigo */
  --chat-fundo:#dbe7f8; --chat-balao:#ffffff; --chat-balao-ink:var(--ink); --chat-dia:rgba(255,255,255,.75);
  /* a caixinha de valor, o aviso e o toast: invertidos */
  --dica-bg:#0b1230; --dica-ink:#ffffff; --dica-muted:#c5c9d6;
  --veu:rgba(11,18,48,.45);                    /* o fundo por trás de menu e janela */
  --seletor-luz:#ffffff;                       /* a pílula que desliza no seletor de frentes */
  --seta-select:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%235b647a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  /* forma: cantos justos (8 / 6 / 4); a pílula fica só para status */
  --r:8px; --r-sm:6px; --r-xs:4px; --r-pill:999px; --r-btn:6px;
  --sombra:none;                                   /* nada em repouso tem sombra */
  --sombra-2:0 12px 32px rgba(11,18,48,.16);       /* só o que flutua: menu, janela, aviso */
  --foco:0 0 0 3px rgba(0,4,246,.22);
  --montanha-op-topo:.10; --montanha-op-base:.10;  /* a área sob a linha: um tom chapado */
  --sans:"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --display:var(--sans);
  --mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;   /* só para código e nomes de variável */
  --nav-largura:228px;
  --barra-topo:48px;         /* a altura da barra do topo e da marca */
  --controle:36px;           /* a altura de todo controle */
  --gap:16px;                /* a única calha, nos dois sentidos */
  /* Feedback dos cartoes; quadro.js tambem usa estes tempos no arraste/SSE. */
  --cartao-resposta:100ms;
  --cartao-deslocamento:160ms;
  --cartao-entrada:120ms;
  --cartao-pouso:140ms;
  --cartao-curva:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}

:root[data-tema="noite"]{
  /* ---- NOITE ----
     cinza neutro e superfícies um passo acima do fundo */
  --ground:#202020;
  --surface:#272727;
  --surface-2:#2b2b2b;
  --surface-3:#323232;
  --surface-4:#3b3b3b;
  --white:#272727;
  --card:#292929;
  --flutuante:#272727;
  --line:#3a3a3a;
  --line-soft:#333333;
  --line-strong:#505050;
  --line-hover:#686868;
  --line-accent:rgba(59,123,255,.6);
  --ink:#ffffff;
  --ink-2:#d4d4d4;
  --muted:#b4b4b4;
  --faint:#949494;
  --accent:#3b7bff;          /* o azul, aberto para ler sobre o preto */
  --pilula-fundo:#232b3f;
  --pilula-ink:#dfe6ff;
  --pilula-anel:#35508a;
  --accent-2:#5c92ff;
  --accent-soft:rgba(59,123,255,.16);
  --accent-ink:#a9c4ff;
  --accent-sub:rgba(59,123,255,.45);
  --estrela:var(--ink);
  --estrela-forte:var(--accent);
  --estrela-fraca:var(--accent-soft);
  --destaque-bg:#ffffff; --destaque-ink:#000000; --destaque-muted:#5f6368; --destaque-line:#e6e6e6; --destaque-crit:#c4242a;
  --app-bg:var(--ground);
  --nav-bg:var(--ground);
  --marca-filtro:none;
  --marca-filtro-capa:brightness(0) opacity(.92);
  --ok:#3fc07a; --ok-soft:#172a1d; --ok-ink:#3fc07a;
  --warn:#e3b05a; --warn-soft:#2a2413; --warn-ink:#e3b05a;
  --crit:#e5566f; --crit-soft:#2c1a20; --crit-ink:#e5566f;
  --live:#e5566f; --live-soft:#2c1a20;
  --hoje-bg:rgba(59,123,255,.12); --hoje-line:rgba(59,123,255,.4);
  --chat-fundo:#15213a; --chat-balao:#2a3350; --chat-balao-ink:var(--ink); --chat-dia:rgba(255,255,255,.08);
  --rolagem:rgba(255,255,255,.22); --rolagem-forte:rgba(255,255,255,.42);
  --dica-bg:#ffffff; --dica-ink:#000000; --dica-muted:#5f6368;
  --veu:rgba(0,0,0,.65);
  --seletor-luz:#2a2a2a;
  --seta-select:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%23b4b4b4' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  --sombra-2:0 24px 60px rgba(0,0,0,.6);
  --foco:0 0 0 3px rgba(59,123,255,.35);
  --montanha-op-topo:.14; --montanha-op-base:.14;
  color-scheme:dark;
}

*{box-sizing:border-box}

/* ---------- barras de rolagem (22/10/2026) ----------
   Finas (8px), arredondadas, sem setinhas e com o trilho transparente, nos dois
   temas; um pouco mais fortes no hover. Nunca somem de vez: quem usa touchpad ou
   mouse sem roda precisa ver que da para rolar.
   Brave/Chrome/Edge: ::-webkit-scrollbar. Firefox: scrollbar-width/scrollbar-color —
   mas SO onde ::-webkit-scrollbar nao existe: no Chrome 121+ as propriedades padrao
   tem prioridade e anulariam o desenho do WebKit. */
::-webkit-scrollbar{width:8px; height:8px}
::-webkit-scrollbar-button{display:none; width:0; height:0}
::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rolagem); border-radius:8px; border:2px solid transparent; background-clip:padding-box}
::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{background:var(--rolagem-forte); background-clip:padding-box}
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin; scrollbar-color:var(--rolagem) transparent}
  *:hover{scrollbar-color:var(--rolagem-forte) transparent}
}
html{height:100%}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--sans); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4{font-family:var(--display); margin:0; font-weight:500; letter-spacing:0; text-wrap:balance}
button{font:inherit; color:inherit; letter-spacing:inherit}
a{color:var(--accent); text-decoration:underline; text-decoration-color:var(--accent-sub); text-underline-offset:3px}
a:hover{text-decoration-color:var(--accent)}
/* Sublinhado é para link dentro de texto corrido. Botão, item de menu e
   imagem são superfícies clicáveis — sublinhar só suja. */
.btn,.aba,.slot,.add,.card .t,.detalhe-imagem,.login-logo,.rowmain,.navtopo-marca{text-decoration:none}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
[hidden]{display:none !important}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important}}

/* =====================================================================
   O ARCABOUÇO — "moldura e folha" (esqueleto "tinted frame, white sheet"):
   a barra lateral e a barra do topo formam um L na cor do
   fundo, sem linha entre elas; a tela vive numa folha branca com borda de
   1px e cantos de 16px, 8px afastada da direita e de baixo. Nada tem sombra.
   ===================================================================== */
/* A barra lateral fica à esquerda e pode ser RECOLHIDA (22/10/2026): só os ícones,
   com a seta branca redonda na borda para abrir e fechar (static/js/paginas.js põe
   .nav-recolhida no <html>; tema.js restaura a escolha antes de pintar). */
.app{display:flex; min-height:100vh; background:var(--app-bg)}
.navtopo{
  position:sticky; top:0; z-index:30; flex:0 0 var(--nav-largura); height:100vh;
  display:flex; flex-direction:column; gap:0;
  background:var(--nav-bg); color:var(--nav-ink);
  transition:flex-basis .22s cubic-bezier(.2,.8,.2,1);
}
/* A seta: um círculo branco com borda fina, metade para fora da barra. */
.nav-alternar{
  position:absolute; top:calc(var(--barra-topo) + 6px); right:-14px; z-index:31;
  width:28px; height:28px; border-radius:50%; border:1px solid var(--line-strong); background:var(--white); color:var(--ink);
  display:none; align-items:center; justify-content:center; cursor:pointer; padding:0; box-shadow:0 1px 3px rgba(11,18,48,.12);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), background-color .12s;
}
.nav-alternar svg{width:14px; height:14px}
.nav-alternar:hover{background:var(--surface-2)}
.com-nav-alternar .nav-alternar{display:flex}
.nav-recolhida .nav-alternar{transform:rotate(180deg)}
.nav-recolhida .navtopo{flex-basis:64px}
.nav-recolhida .navtopo-marca{padding:0; justify-content:center}
.nav-recolhida .navtopo-marca img{height:18px; width:18px; object-fit:cover; object-position:left center}
.nav-recolhida .aba-grupo-nome,.nav-recolhida .aba > span,.nav-recolhida .aba-dev,.nav-recolhida .conta-quem > span{display:none}
.nav-recolhida .navtopo-abas{padding:8px 8px 12px; gap:14px}
.nav-recolhida .aba{justify-content:center; padding:0; min-height:36px}
.nav-recolhida .aba svg{width:18px; height:18px}
.nav-recolhida .navtopo-conta{padding:8px 8px 14px}
.nav-recolhida .conta-quem{justify-content:center; padding:4px 0 10px}
/* A marca tem a altura da barra do topo: a folha começa na mesma linha dos dois lados. */
.navtopo-marca{display:flex; align-items:center; min-height:var(--barra-topo); padding:0 20px}
/* A marca é branca sobre transparente: na noite fica assim; no dia vira tinta (--marca-filtro). */
.navtopo-marca img{display:block; height:22px; width:auto; filter:var(--marca-filtro)}
.navtopo-menu{display:contents}
.navtopo-abas{flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:22px; padding:8px 12px 12px}
.aba-grupo{display:flex; flex-direction:column; gap:2px}
.aba-grupo-nome{padding:0 10px 6px; font-size:12.5px; font-weight:400; color:var(--nav-muted)}
.aba-grupo-itens{display:flex; flex-direction:column; gap:2px}
.aba{
  position:relative; display:flex; align-items:center; gap:10px; min-height:32px; padding:0 10px;
  border-radius:var(--r-xs); border:0; background:none; cursor:pointer; white-space:nowrap; width:100%; text-align:left;
  color:var(--ink-2); font-size:14px; font-weight:400; transition:background-color .12s ease, color .12s ease;
}
.aba svg{flex:0 0 16px; width:16px; height:16px; color:var(--nav-muted); transition:color .12s ease}
.aba:hover{background:var(--surface-2); color:var(--ink)}
.aba:hover svg{color:var(--ink)}
.aba[aria-current="page"]{background:var(--nav-ativo); color:var(--ink); font-weight:500}
.aba[aria-current="page"] svg{color:var(--ink)}
.aba:focus-visible{outline-offset:-2px}
.navtopo-conta{display:flex; flex-direction:column; gap:2px; padding:12px 12px 16px}
.navtopo-conta form{display:flex}
.navtopo-conta .aba{min-height:30px; font-size:13px}
.conta-quem{display:flex; align-items:center; gap:10px; padding:4px 10px 10px; min-width:0}
.conta-quem .avatar-conta{
  flex:0 0 30px; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent-ink); font-size:12px; font-weight:500; letter-spacing:.02em;
}
.conta-quem b{display:block; font-size:13.5px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.conta-quem small{display:block; font-size:12px; color:var(--nav-muted)}
.conta-quem > span{min-width:0}

/* O lado direito da moldura: a barra do topo e, abaixo dela, a folha. */
.palco{flex:1 1 auto; min-width:0; display:flex; flex-direction:column}
/* A barra do topo (48px, na cor do fundo, sem linha): a trilha de onde a pessoa
   está à esquerda; a ação principal e o tema à direita. */
.barra-topo{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
  min-height:var(--barra-topo); padding:0 16px 0 0; background:var(--app-bg);
}
.trilha{display:flex; align-items:center; gap:8px; min-width:0; padding-left:8px; font-size:13.5px; color:var(--muted); white-space:nowrap; overflow:hidden}
.trilha-sep{color:var(--line-strong)}
.trilha-atual{color:var(--ink); font-weight:500; overflow:hidden; text-overflow:ellipsis}
.barra-topo .pill{flex:none}
.barra-topo .tema-seletor{margin:0 0 0 2px}
/* A folha acompanha o fundo do tema; os cartões destacam suas superfícies. */
main.folha{
  flex:1 1 auto; min-width:0; display:flex; flex-direction:column;
  margin:0 8px 8px 0; background:var(--ground); border:1px solid var(--line); border-radius:16px;
  min-height:calc(100vh - var(--barra-topo) - 8px);
}
/* O cabeçalho da página, já dentro da folha: o título a 24px e a frase do dia embaixo. */
.topbar{
  display:flex; align-items:flex-end; gap:16px 24px; flex-wrap:wrap;
  padding:28px 32px 0; width:100%; max-width:1560px;
}
.topbar > div:first-child{flex:1 1 320px; min-width:0; max-width:100%; overflow-wrap:anywhere}
.topbar h1{font-size:24px; font-weight:600; line-height:1.2; letter-spacing:-.02em; color:var(--ink)}
.topbar .sub{font-size:14px; line-height:1.5; color:var(--muted); margin-top:4px; max-width:64ch}
/* A palavra que importa na frase do dia (o número de prazos vencidos) vai em tinta, mais pesada. */
.topbar .sub b{font-weight:600; color:var(--ink)}
.spacer{flex:1}
.content{padding:24px 32px 64px; display:flex; flex-direction:column; gap:24px; width:100%; max-width:1560px}
.view{display:none; flex-direction:column; gap:22px}
/* As páginas sem barra lateral (erro para quem não entrou): uma coluna estreita no meio. */
.pagina-solta{max-width:640px; margin:12vh auto 0}
.view.active{display:flex}

/* =====================================================================
   CONTROLES — retangulares, uma altura só, sem sombra. O secundário é
   branco com contorno; o primário tem fundo azul e conteúdo centralizado.
   ===================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  border-radius:var(--r-btn); min-height:var(--controle); padding:0 16px; cursor:pointer;
  font-size:14px; font-weight:500; white-space:nowrap; line-height:1.2;
  transition:background-color .12s ease, color .12s ease, border-color .12s ease;
}
.btn:hover{background:var(--surface-2); border-color:var(--line-hover)}
.btn:active{transform:translateY(.5px)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-2); border-color:var(--accent-2)}
.barra-topo .btn.primary.acao-adicionar{gap:8px; font-weight:600}
.btn.ghost{background:transparent; border-color:transparent; color:var(--ink-2)}
.btn.ghost:hover{background:var(--surface-2); border-color:transparent; color:var(--ink)}
.btn.tiny{min-height:30px; padding:0 12px; font-size:13px}
.btn:disabled{opacity:.55; cursor:not-allowed}

input,select,textarea{
  font:inherit; letter-spacing:inherit; color:var(--ink); background:var(--white);
  border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:9px 14px; width:100%; min-width:0; max-width:100%;
  min-height:40px; transition:border-color .12s ease, box-shadow .12s ease;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:hover,select:hover,textarea:hover{border-color:var(--line-hover)}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--accent); box-shadow:var(--foco)}
select{appearance:none; background-image:var(--seta-select); background-position:calc(100% - 14px) 50%; background-size:12px 8px; background-repeat:no-repeat; padding-right:36px}
option{background:var(--white); color:var(--ink)}
textarea{min-height:90px; resize:vertical; line-height:1.55}
input[type="checkbox"]{width:17px; height:17px; min-height:0; accent-color:var(--accent); margin:0}
.field{display:flex; flex-direction:column; gap:6px; min-width:0; overflow-wrap:anywhere; font-size:13px; color:var(--muted)}
.field > label,.field > span{font-weight:500; color:var(--ink-2); font-size:13.5px}

/* =====================================================================
   SUPERFÍCIES — o painel é branco com uma borda de 1px sobre o fundo; o
   título e o conteúdo sentam direto nele. Sem sombra.
   ===================================================================== */
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); min-width:0; display:flex; flex-direction:column}
/* Dentro da folha, o cartão é branco sobre branco: a borda de 1px é o que o separa. */
.panel > header{display:flex; align-items:baseline; gap:4px 12px; padding:20px 24px 6px; flex-wrap:wrap}
.panel > header h2{font-size:16px; font-weight:600; color:var(--ink)}
.panel > header .hint{font-size:13px; color:var(--muted)}
.panel .body{padding:8px 24px 20px; flex:1 1 auto}
.grid{display:grid; gap:var(--gap)}
/* O cabeçalho de uma seção: a frase de apoio à esquerda, as ações à direita. */
.sectionhead{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.sectionhead p{margin:0; max-width:72ch}
.sectionhead p b{font-weight:600}
.sectionhead h2{font-size:18px; font-weight:600; letter-spacing:-.01em}

/* ---------- números de destaque: o cartão preto do Legency, dividido por linhas finas ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr)); gap:0; background:var(--destaque-bg); color:var(--destaque-ink); border-radius:var(--r); padding:6px 0; overflow:hidden}
.kpi{background:transparent; border:0; padding:18px 24px 20px; display:flex; flex-direction:column; gap:6px; min-width:0; border-left:1px solid var(--destaque-line)}
.kpi:first-child{border-left:0}
.kpi .k{font-size:13.5px; font-weight:500; color:var(--destaque-muted)}
.kpi .v{font-size:30px; font-weight:500; line-height:1.1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--destaque-ink)}
.kpi .n{font-size:13px; color:var(--destaque-muted); line-height:1.45}
.kpi.alert .v{color:var(--destaque-crit)}
/* Dentro de um painel (o funil do CRM) a régua volta a ser um tom acima do painel, em tinta. */
.panel .kpis,.funil-kpis{background:var(--surface-2); color:var(--ink)}
.panel .kpi,.funil-kpis .kpi{border-left-color:var(--line)}
.panel .kpi .k,.panel .kpi .n,.funil-kpis .kpi .k,.funil-kpis .kpi .n{color:var(--muted)}
.panel .kpi .v,.funil-kpis .kpi .v{color:var(--ink)}
.panel .kpi.alert .v,.funil-kpis .kpi.alert .v{color:var(--crit)}

/* ---------- pílulas: tom pálido, tinta escura da mesma cor ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px; border-radius:var(--r-pill); padding:3px 10px;
  font-size:12px; font-weight:500; white-space:nowrap; line-height:1.4; flex:none;
  background:var(--surface-3); color:var(--ink-2);
}
.pill.ok{background:var(--ok-soft); color:var(--ok-ink)}
.pill.warn{background:var(--warn-soft); color:var(--warn-ink)}
.pill.crit{background:var(--crit-soft); color:var(--crit-ink)}
.pill.accent{background:var(--accent-soft); color:var(--accent-ink)}
.pill.live{background:var(--live-soft); color:var(--live)}
.pill .dot{width:6px; height:6px; border-radius:50%; background:currentColor}

/* ---------- tabelas: linhas e alinhamento, sem faixa no cabeçalho ---------- */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse; width:100%; min-width:580px}
th,td{text-align:left; padding:12px 16px; border-bottom:1px solid var(--line-soft); vertical-align:middle}
th{font-size:12.5px; font-weight:400; color:var(--muted); white-space:nowrap; background:transparent}
tbody tr{transition:background .1s ease}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child > *{border-bottom:0}
td.num,th.num{text-align:right; font-variant-numeric:tabular-nums}
td.acoes-tabela .acts{justify-content:flex-end}
.rowmain{font-weight:500; color:var(--ink)}
.rowsub{font-size:13px; color:var(--muted); margin-top:2px}
.empty{padding:14px 16px; font-size:13.5px; color:var(--muted); border:1px dashed var(--line-strong); border-radius:var(--r-sm); background:transparent; line-height:1.5}

/* ---------- canais ---------- */
.channels{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); gap:var(--gap)}
.chcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px 24px; display:flex; flex-direction:column; gap:12px; min-width:0}
.chcard .top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.chcard .top h3{font-size:15px; font-weight:500}
.chcard dl{margin:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 10px; font-size:13.5px}
.chcard dt{color:var(--muted)}
.chcard dd{margin:0; font-variant-numeric:tabular-nums; text-align:right; color:var(--ink); font-weight:500}

/* ---------- projetos ---------- */
.projects{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr)); gap:var(--gap)}
.proj{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 24px; display:flex; flex-direction:column; gap:14px; min-width:0}
.proj h3{font-size:15.5px; font-weight:500}
.proj p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.55}
.bar{height:4px; border-radius:4px; background:var(--surface-3); overflow:hidden}
.bar > i{display:block; height:100%; background:var(--accent); border-radius:4px}

/* ---------- integrações ---------- */
.integ{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px 24px; display:flex; flex-direction:column; gap:10px}
.integ h3{font-size:15px; font-weight:500}
.integ p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.55}
.tip{margin:0}

/* ----------------------------------------------------------------- A DICA
   Toda instrucao de tela (o subtitulo de secao, a dica do organograma, o .tip,
   o .hint dos paineis) e uma pilula so: curta, uma bolinha na cor de destaque
   e fundo levemente tingido — chama o olho sem virar um paragrafo (06/11/2026).
   O texto e responsabilidade do template: uma frase, duas no maximo. */
.sectionhead p,.tip,.org-dica,.panel>header .hint,.ajuda{
  display:inline-flex; align-items:center; gap:9px; box-sizing:border-box; width:fit-content; max-width:100%;
  margin:0; padding:6px 13px 6px 11px; border-radius:999px;
  background:var(--pilula-fundo); color:var(--pilula-ink);
  font-size:13px; font-weight:500; line-height:1.35; letter-spacing:0}
.sectionhead p::before,.tip::before,.org-dica::before,.panel>header .hint::before,.ajuda::before{
  content:""; flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 3px var(--pilula-anel)}
.sectionhead p a,.tip a,.org-dica a,.ajuda a{color:var(--accent); font-weight:600; text-decoration:none}
.sectionhead p a:hover,.tip a:hover,.org-dica a:hover,.ajuda a:hover{text-decoration:underline}
.sectionhead p code{font-family:inherit; font-weight:600}
.org-dica{display:flex; width:fit-content; margin:0 auto 12px}
.ajuda{margin:0 0 8px}
.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:80; background:var(--dica-bg); color:var(--dica-ink); padding:10px 18px; border-radius:var(--r-pill); font-size:13.5px; box-shadow:var(--sombra-2)}

/* =====================================================================
   FORMULÁRIOS — um layout só, usado por todos.
   ===================================================================== */
.form-pagina{display:flex; flex-direction:column; gap:16px; max-width:820px}
.form-campos{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px 16px}
.form-campos .wide{grid-column:1/-1}
.form-campos .obrigatorio{font-style:normal; color:var(--crit); font-weight:500; margin-left:2px}
.form-campos input[type="checkbox"]{width:17px; margin-top:4px}
.form-campos input[type="file"]{padding:10px 12px; font-size:13px; color:var(--muted); background:var(--surface-2); cursor:pointer; min-height:0}
.form-campos input[type="file"]::file-selector-button{
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--r-btn); padding:5px 12px; margin-right:11px; font:inherit; font-size:13px; font-weight:500; cursor:pointer;
}
.form-campos select[multiple]{min-height:120px}
.form-ajuda{font-size:12.5px; color:var(--muted); line-height:1.5}
.form-erro{font-size:13px; color:var(--crit); line-height:1.45; font-weight:500}
.form-campos .com-erro input,.form-campos .com-erro select,.form-campos .com-erro textarea{border-color:var(--crit)}
.form-erro-geral{border:0; background:var(--crit-soft); color:var(--crit-ink); border-radius:var(--r-sm); padding:13px 16px; font-size:13.5px; line-height:1.55}
.form-erro-geral p{margin:0}
.form-erro-geral p + p{margin-top:6px}
.form-acoes{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.form-excluir{color:var(--crit)}
.form-excluir:hover{background:var(--crit-soft); color:var(--crit)}
.confirma-exclusao{max-width:560px; display:flex; flex-direction:column; gap:16px}
.confirma-exclusao .alvo{border:1px solid var(--line); border-radius:var(--r); background:var(--surface); padding:18px 22px}
.confirma-exclusao .alvo b{display:block; font-size:15px; font-weight:500}
.confirma-exclusao .alvo span{font-size:13px; color:var(--muted)}
@media (max-width:700px){.form-campos{grid-template-columns:1fr}}

/* =====================================================================
   DETALHE (cartão dos quadros e item da agenda) — duas colunas.
   ===================================================================== */
.detalhe-acoes{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.detalhe{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:20px; align-items:start}
.detalhe-principal{display:flex; flex-direction:column; gap:20px; min-width:0}
.detalhe-imagem{display:block; border-radius:var(--r); overflow:hidden; border:0; background:var(--surface); line-height:0; cursor:zoom-in}
.detalhe-imagem img{display:block; width:100%; height:auto; max-height:62vh; object-fit:contain; background:#0b0e14}
.detalhe-texto{font-size:15px; line-height:1.7; color:var(--ink-2); max-width:72ch}
.detalhe-texto p{margin:0 0 .8em}
.detalhe-texto p:last-child{margin-bottom:0}
.detalhe-ficha{display:flex; flex-direction:column; gap:14px; min-width:0}
dl.ficha{margin:0; display:grid; grid-template-columns:auto 1fr; gap:12px 16px; align-items:baseline}
dl.ficha dt{font-size:13px; color:var(--muted); white-space:nowrap}
dl.ficha dd{margin:0; font-size:14px; text-align:left; min-width:0; overflow-wrap:anywhere; color:var(--ink); font-weight:500; line-height:1.55}
/* Na ficha lateral do cartão, o valor alinha à direita, como num recibo. */
.detalhe-ficha dl.ficha dd{text-align:right}
.ficha-alerta{display:block; font-size:12px; color:var(--crit); margin-top:3px; font-weight:500}
.detalhe-rodape{margin:0; font-size:12.5px; color:var(--muted); line-height:1.5; padding-inline:4px}
@media (max-width:920px){.detalhe{grid-template-columns:1fr}.detalhe-imagem img{max-height:48vh}}

/* ---------- conexões ---------- */
.conexoes{display:grid; grid-template-columns:repeat(auto-fill, minmax(min(340px,100%),1fr)); gap:var(--gap)}
.conexao{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:20px 24px; display:flex; flex-direction:column; gap:12px; min-width:0; position:relative; overflow:hidden}
.conexao::before{content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--line-strong)}
.conexao.configurada::before{background:var(--ok)}
.conexao.parcial::before{background:var(--warn)}
.conexao header{display:flex; align-items:flex-start; gap:10px}
.conexao h3{font-size:15px; font-weight:500}
.conexao-traz{margin:0; font-size:14px; line-height:1.55; color:var(--ink-2)}
.conexao-como{font-size:13px; line-height:1.55; color:var(--muted)}
.conexao .ficha{margin:0; gap:10px 14px}
.conexao .ficha dt{padding-top:2px}
.conexao .ficha dd{font-weight:400; font-size:13.5px}
.conexao .ficha dd .pill{margin-bottom:2px}
.envvar{display:inline-block; font-family:var(--mono); font-size:12px; background:var(--surface-2); border:0; border-radius:5px; padding:1px 6px; margin:0 4px 4px 0; color:var(--ink-2)}
code{font-family:var(--mono); font-size:.92em; background:var(--surface-2); padding:1px 5px; border-radius:4px}

/* ---------- trabalho ao mesmo tempo ---------- */
.aviso-presenca{display:flex; align-items:center; gap:8px; background:var(--warn-soft); border:0; border-radius:var(--r-sm); padding:10px 14px; font-size:13.5px; color:var(--warn-ink); margin-bottom:16px}
.aviso-presenca b{color:var(--warn-ink); font-weight:500}
.aviso-presenca::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--warn); flex:none; animation:respira 2s ease-in-out infinite}
@keyframes respira{0%,100%{opacity:1}50%{opacity:.3}}
.aviso-conflito{margin-bottom:16px}
.aviso-conflito p:first-child{font-size:14.5px}
.aviso-conflito p + p{font-size:13.5px; line-height:1.55}

/* ---------- administração ---------- */
.linha-apagada{opacity:.55}
.acts{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.acao-inline{display:inline}
.contas-soltas{list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
.contas-soltas li{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

/* ---------- frescor do número ---------- */
.frescor{font-size:13px; color:var(--muted)}
.frescor.velho{color:var(--warn)}
.aviso-coleta{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 16px; font-size:13.5px; color:var(--ink-2)}
.aviso-coleta.ruim{background:var(--warn-soft); color:var(--warn-ink)}
.aviso-coleta p{margin:0}
.aviso-coleta p + p{margin-top:6px}
.vivo-solto{display:contents}

/* =====================================================================
   IMAGENS (anexos) e a pré-visualização em tela cheia.
   ===================================================================== */
.anexos-corpo{display:flex; flex-direction:column; gap:14px}
.anexos{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px}
.anexo{margin:0; display:flex; flex-direction:column; gap:7px; min-width:0}
.anexo-miniatura{position:relative; display:block; aspect-ratio:4/3; border-radius:var(--r-sm); overflow:hidden; border:0; background:var(--surface-3); line-height:0; cursor:zoom-in}
.anexo-miniatura img{width:100%; height:100%; object-fit:cover}
.anexo-miniatura:hover{outline:2px solid var(--accent); outline-offset:-2px}
.anexo.e-capa .anexo-miniatura{outline:2px solid var(--accent); outline-offset:-2px}
.anexo-selo{position:absolute; left:8px; top:8px; line-height:1.5; font-size:11.5px; font-weight:500; background:var(--accent); color:#fff; border-radius:var(--r-pill); padding:1px 8px}
.anexo figcaption{display:flex; flex-direction:column; gap:2px; min-width:0}
.anexo-nome{font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:500}
.anexo figcaption small{font-size:12px; color:var(--muted)}
.anexo-acoes{display:flex; flex-wrap:wrap; gap:2px; margin-left:-8px}
.anexo-acoes .btn{padding-inline:8px}
.soltar-imagens{position:relative; display:flex; align-items:center; gap:12px; flex-wrap:wrap; border:1px dashed var(--line-strong); border-radius:var(--r-sm); padding:16px 18px; background:transparent; transition:border-color .12s ease, background .12s ease}
.soltar-imagens label{flex:1; min-width:220px; font-size:13.5px; color:var(--ink-2); cursor:pointer; line-height:1.5}
.soltar-imagens label u{color:var(--accent); text-underline-offset:2px}
.soltar-imagens label small{display:block; font-size:12px; color:var(--muted)}
.soltar-imagens input[type=file]{position:absolute; width:1px; height:1px; opacity:0}
.soltar-imagens:focus-within{border-color:var(--accent)}
.soltar-imagens.arrastando{border-color:var(--accent); background:var(--accent-soft)}
.soltar-imagens.enviando{opacity:.6; pointer-events:none}

dialog.previa{position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; margin:0; padding:0; border:0; background:rgba(8,10,18,.95); color:#fff; display:none; flex-direction:column}
dialog.previa[open]{display:flex}
dialog.previa::backdrop{background:transparent}
.previa-topo{display:flex; align-items:center; gap:10px; padding:12px 16px; min-width:0}
.previa-nome{font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.previa-conta{font-size:12.5px; color:rgba(255,255,255,.6); white-space:nowrap; font-variant-numeric:tabular-nums}
.previa-fechar{font-size:18px; line-height:1}
dialog.previa .btn{background:rgba(255,255,255,.12); color:#fff}
dialog.previa .btn:hover{background:rgba(255,255,255,.22)}
.previa-palco{flex:1; min-height:0; display:flex; align-items:center; justify-content:center; gap:10px; padding:0 12px 16px}
.previa-imagem{max-width:calc(100% - 120px); max-height:100%; object-fit:contain; border-radius:6px; background:#000}
.previa-seta{flex:none; width:46px; height:46px; border-radius:50%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; font-size:28px; line-height:1; cursor:pointer}
.previa-seta:hover{background:rgba(255,255,255,.18)}
dialog.previa.uma-so .previa-seta{visibility:hidden}
@media (max-width:600px){
  .previa-topo .previa-original{display:none}
  .previa-palco{padding:0 0 12px; gap:0; position:relative}
  .previa-imagem{max-width:100%}
  .previa-seta{position:absolute; bottom:22px; background:rgba(0,0,0,.55)}
  .previa-anterior{left:14px} .previa-proxima{right:14px}
}

/* =====================================================================
   RESPONSIVO — no celular a barra lateral vira a gaveta (area-trabalho.css).
   ===================================================================== */
@media (max-width: 900px){
  /* No celular a moldura some: a folha é a tela. */
  main.folha{margin:0; border:0; border-radius:0; min-height:0}
  .barra-topo{position:static; min-height:44px; padding:0 16px; gap:8px}
  .trilha{display:none}
  .topbar{padding:20px 16px 0; gap:14px 16px}
  .topbar h1{font-size:22px}
  .topbar .sub{font-size:14px; margin-top:6px}
  .content{padding:20px 16px 72px; gap:20px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr)); padding:0}
  .kpi{padding:16px 18px; border-left:0}
  .kpi:nth-child(even){border-left:1px solid var(--destaque-line)}
  .kpi:nth-child(n+3){border-top:1px solid var(--destaque-line)}
  .kpi:last-child:nth-child(odd){grid-column:1/-1}
}

/* =====================================================================
   CÉU — o canvas das estrelas (static/js/estrelas.js). Nas telas de acesso
   fica visível nos dois temas. Não recebe clique; a aplicação fica por cima.
   ===================================================================== */
#ceu{position:fixed; top:0; left:0; z-index:0; display:none; width:100%; height:100%; pointer-events:none; background:transparent}
:root[data-tema="noite"] #ceu{display:block}
.pagina-acesso{background:var(--ceu-fundo)}
.pagina-acesso #ceu{display:block}
body.sem-ceu #ceu{display:none !important}
.app, .login-tela{position:relative; z-index:1}

/* =====================================================================
   NOITE — o mesmo desenho sobre o preto. Superfícies opacas um passo acima
   do fundo; o que flutua ganha contorno mais claro; os campos escurecem.
   ===================================================================== */
:root[data-tema="noite"] :is(.lista-menu-itens,.acao-dialogo){border:1px solid var(--line-strong)}
:root[data-tema="noite"] :is(.panel,.metricas-cartao,.metricas-numero,.chcard,.proj,.registro-card):hover{border-color:var(--line-strong)}
:root[data-tema="noite"] input,:root[data-tema="noite"] select,:root[data-tema="noite"] textarea{background:var(--surface-2)}
:root[data-tema="noite"] :is(input,select,textarea):focus{background:var(--white)}

/* =====================================================================
   O SELETOR DE TEMA — Auto / Dia / Noite, na barra do topo
   (static/js/tema.js). O escolhido acende.
   ===================================================================== */
.tema-seletor{display:flex; gap:2px; margin:4px 10px 8px; padding:3px; border-radius:var(--r-btn); background:var(--surface-3)}
.tema-seletor button{flex:1 1 0; min-width:0; border:0; background:transparent; color:var(--nav-muted); font-size:12px; font-weight:500; min-height:26px; padding:0 6px; border-radius:calc(var(--r-btn) - 2px); cursor:pointer; transition:background-color .12s ease, color .12s ease}
.tema-seletor button:hover{color:var(--ink)}
.tema-seletor button[aria-pressed="true"]{background:var(--seletor-luz); color:var(--ink)}
.tema-seletor button:focus-visible{outline-offset:-2px}
/* Um unico controle, com o icone do tema que sera ativado. */
.tema-alternar{flex:none; display:grid; place-items:center; width:38px; height:38px; padding:8px; border:1px solid var(--line-strong); border-radius:var(--r-btn); background:var(--surface); color:var(--ink-2); cursor:pointer; transition:background-color .1s ease,color .1s ease}
.tema-alternar:hover{background:var(--surface-3); color:var(--ink)}
.tema-alternar svg{width:20px; height:20px; grid-area:1/1}
.tema-alternar .tema-sol{display:none}
:root[data-tema="noite"] .tema-alternar .tema-lua{display:none}
:root[data-tema="noite"] .tema-alternar .tema-sol{display:block}

/* =====================================================================
   LOGIN — a mesma casa do painel: a folha branca sobre o fundo, dividida
   em dois. À esquerda o cartão preto com a frase (o login continua sendo a
   frase, não o formulário); à direita a caixa de entrar, com os campos e o
   botão do painel. O céu fica no fundo nos dois temas.
   ===================================================================== */
.login-tela{min-height:100vh; display:grid; place-items:center; padding:24px}
.login-folha{
  display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,1fr); width:min(1040px,100%); min-height:580px;
  background:var(--surface); border:1px solid var(--line); border-radius:16px; overflow:hidden;
}
.login-capa{display:flex; flex-direction:column; justify-content:space-between; gap:40px; padding:40px 44px 36px; background:var(--destaque-bg); color:var(--destaque-ink)}
.login-capa-marca img{display:block; height:24px; width:auto; filter:var(--marca-filtro-capa)}
.login-frase{margin:0; font-size:clamp(28px, 3.1vw, 40px); font-weight:600; line-height:1.08; letter-spacing:-.025em; max-width:24ch; text-wrap:balance}
.login-frase-apoio{margin:18px 0 0; font-size:16px; line-height:1.5; color:var(--destaque-muted); max-width:38ch}
.login-capa-pe{margin:0; font-size:13px; color:var(--destaque-muted)}
/* O lado direito: a caixa de entrar (ou o formulário de pedir acesso) e, embaixo, o atalho para o outro. */
.login-lado{display:flex; flex-direction:column; justify-content:center; padding:44px 44px 40px; min-width:0}
.login-caixa{display:flex; flex-direction:column; gap:20px; min-width:0}
.login-rodape{margin:22px 0 0; font-size:13.5px; color:var(--muted); line-height:1.5}
.login-rodape a{color:var(--accent-ink); font-weight:500}
.login-campos .form-erro{font-size:12.5px}
.login-campos .form-ajuda{font-size:12.5px}
.login-feito{display:flex; flex-direction:column; gap:12px}
.login-feito h2{font-size:20px; font-weight:600; letter-spacing:-.015em}
.login-feito p{margin:0; font-size:14.5px; line-height:1.55; color:var(--ink-2)}
.login-marca{display:flex; flex-direction:column; gap:2px}
.login-marca b{font-size:20px; font-weight:600; letter-spacing:-.015em; color:var(--ink)}
.login-marca span{font-size:13.5px; color:var(--muted)}
.login-campos{display:flex; flex-direction:column; gap:14px}
.login-campos label.field > span{font-size:13.5px; color:var(--ink-2); font-weight:500}
.login-campos input{min-height:40px}
/* A acao de entrar ocupa a largura do formulario, com rotulo centralizado. */
.login-caixa .btn.primary{width:100%; min-height:44px; padding:11px 20px; font-size:14.5px; font-weight:600; margin-top:4px}
.login-caixa .btn.primary:disabled{opacity:.7; cursor:progress}
.login-senha{position:relative; display:block}
.login-senha input{width:100%; padding-right:88px}
.login-olho{position:absolute; top:50%; right:6px; transform:translateY(-50%); border:0; background:transparent; color:var(--accent-ink); cursor:pointer; font:inherit; font-size:13px; font-weight:500; padding:6px 9px; border-radius:var(--r-xs)}
.login-olho:hover{background:var(--accent-soft)}
.login-caps{margin:-4px 0 0; font-size:13px; color:var(--warn)}
.login-erro{background:var(--crit-soft); color:var(--crit-ink); border-radius:var(--r-sm); padding:10px 13px; font-size:13.5px; line-height:1.45}
.login-ajuda{font-size:13px; color:var(--muted); line-height:1.5; margin:0}
@media (max-width:860px){
  .login-tela{padding:12px; align-items:start}
  .login-folha{grid-template-columns:1fr; min-height:0}
  .login-capa{padding:28px 24px; gap:24px}
  .login-frase{font-size:28px}
  .login-frase-apoio{font-size:15px; margin-top:12px}
  .login-capa-pe{display:none}
  .login-lado{padding:28px 24px}
}