/* ============================================================
   sistema.css — estilo compartilhado das telas do sistema.

   Passo 1 (12/09/2026, pedido do Diego): so regras que ja eram IDENTICAS
   entre as telas, movidas pra ca sem mudar nada na tela. Cada tela carrega
   este arquivo ANTES do proprio <style> — o que a tela escreve continua
   ganhando, como antes.

   Provado antes de gravar: nenhuma regra que ficou numa tela disputa com
   uma daqui na ordem; a ordem entre as daqui e a mesma em todas as telas;
   e tela que nao tinha uma regra nao usa o nome dela.

   Ao mexer aqui, muda em TODAS as telas. As telas do cliente (aprovacao e
   apresentacao) NAO carregam este arquivo, de proposito.
   Mudou algo? Troque o ?v= no <link> das telas, pro navegador buscar de novo.
   ============================================================ */

/* Passo 3 (13/09/2026): o contorno de foco do teclado vem PRIMEIRO — nas telas
   ele era a primeira regra, e o arredondamento dele perde pro de botao, aviso e
   etiqueta, que vem depois. */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}

.who{font-size:12px;color:var(--ink-3);border-left:1px solid var(--line);padding-left:11px}
.crow{display:flex;flex-wrap:wrap;align-items:center;gap:5px 9px;font-size:12.5px;padding:8px 0;border-bottom:1px solid var(--line-2)}
.crow:last-child{border-bottom:none}
.aniv{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--line-2);font-size:12.5px}
.aniv:last-child{border-bottom:none}
.btn:hover{background:var(--paper)}
.l-role{width:140px;flex:none;font-size:12px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-carga{width:90px;flex:none;font-size:12.5px;font-weight:700;text-align:right}
.l-serv{width:90px;flex:none;display:flex;gap:3px}
.l-nm{flex:1;min-width:0;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-st{width:100px;flex:none}
.sidetoggle svg{transition:transform .2s}
.app.collapsed{grid-template-columns:64px 1fr!important}
.app.collapsed .navside{width:64px}
.app.collapsed .brand>div:last-child{display:none}
.app.collapsed .navitem .lbl,.app.collapsed .sidetoggle .lbl{display:none}
.fcard{display:flex;gap:14px;align-items:center;padding:2px 0 16px;border-bottom:1px solid var(--line-2);margin-bottom:16px}
.fcard h2{font-size:20px;font-weight:700;letter-spacing:-.01em}
.r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.fbody{display:grid;grid-template-columns:1fr 1fr;gap:13px 20px;margin-bottom:16px}
.ffull{grid-column:1/-1}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:9px;margin-bottom:16px}
@media(max-width:640px){.fbody{grid-template-columns:1fr}}

/* ---- Passo 2 (13/09/2026): componentes quase iguais, escolhas do Diego ----
   aviso, dica, fundo atras da janela (com desbotado), etiquetas (alinham icone e
   texto). A lista de copias que ainda existem nas telas esta no fim do arquivo. */
.btn.primary{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.btn.primary:hover{background:var(--brand-2)}
.hint{font-size:12px;color:var(--ink-3);line-height:1.55}
.veil{position:fixed;inset:0;background:rgba(12,14,19,.55);backdrop-filter:blur(7px) saturate(.8);-webkit-backdrop-filter:blur(7px) saturate(.8);display:flex;align-items:center;justify-content:center;padding:18px;z-index:50}
.picks{display:flex;flex-wrap:wrap;gap:6px}
.pick{border:1px solid var(--line);border-radius:20px;padding:5px 11px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);background:var(--surface)}
.pick.on{border-color:var(--brand);background:var(--brand);color:var(--on-brand)}

/* ---- Passo 3 (13/09/2026): rodada do CRM ----
   O CRM entrou no padrao (botao, seletor, filtros, lista, janelas, foco do teclado).
   Botao e aviso vieram pra ca. O CRM mantem o proprio .btn (com icone: inline-flex),
   que declara tudo o que este declara.
   ATENCAO: COPIA IGUAL que ainda fica nas telas (a prova de ordem nao deixou tirar)
   — mudou aqui, mude la tambem:
     .btn.primary: workflow
     .hint: chat-ia, workflow
     .veil: demandas
     .picks: demandas, workflow
     .pick: demandas, okr, workflow
     .pick.on: demandas, okr, workflow
     .btn: chat-ia
     .toast: chat-ia, demandas, workflow
   Versao PROPRIA (diferente, de proposito) em: .picks: configuracoes; .btn: crm */
.btn{padding:7px 12px;border-radius:7px;font-weight:600;font-size:12.5px;border:1px solid var(--line);background:var(--surface)}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--surface);color:var(--ink);
  padding:10px 17px;border-radius:7px;font-size:12.5px;font-weight:600;z-index:99;border:1px solid var(--line);border-left:3px solid var(--brand);box-shadow:0 8px 24px rgba(0,0,0,.25)}

/* ---- Passo 4 (13/09/2026): estrutura das telas ----
   Escolhas do Diego (todas as recomendacoes): faixa de conteudo com 1160px, menu
   lateral tambem no Painel, barra do topo presa ao rolar, fundo das janelas do CRM
   igual ao das outras. Aqui vem o que ja era IDENTICO no menu, na barra e no molde
   das janelas.
   ATENCAO: COPIA IGUAL que ainda fica nas telas — mudou aqui, mude la tambem:
     .sidetoggle: chat-ia, demandas, workflow
     .app.collapsed .sidetoggle: demandas
     .sidetoggle:hover: chat-ia, demandas, workflow
     .app.collapsed .brand: demandas
     .app.collapsed .navitem: demandas
     .app.collapsed .sidetoggle svg: workflow
     .navside .brand: chat-ia, workflow
     .navmark: chat-ia, demandas, workflow
     .form: demandas
     .navside .brand h1: demandas
     .navside .brand p: chat-ia, clientes, demandas, time, workflow
     .navlist: chat-ia, demandas, workflow
     .navitem: chat-ia, demandas, workflow
     .navitem:hover: chat-ia, workflow
     .r2: demandas, workflow
     .navitem.on: chat-ia, demandas, workflow
   Versao PROPRIA (diferente, de proposito) em:
     .navside .brand h1: workflow
     .navside .brand a.home: agenda, configuracoes, workflow
   */
.sidetoggle{margin-top:auto;width:100%;padding:11px 18px;background:none;border:none;border-top:1px solid rgba(255,255,255,.08);color:#8189A0;display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;cursor:pointer}
.app.collapsed .sidetoggle{justify-content:center;padding:11px 0}
.sidetoggle:hover{background:rgba(255,255,255,.06);color:var(--on-brand)}
.app.collapsed .brand{padding:14px 6px;justify-content:center}
.app.collapsed .navitem{justify-content:center;padding:9px 0}
.app.collapsed .sidetoggle svg{transform:rotate(180deg)}
.navside .brand{padding:18px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;gap:11px;align-items:center}
.navmark{width:34px;height:34px;border-radius:10px;background:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;flex:none;color:var(--on-brand);overflow:hidden}
.form{padding:4px 20px 18px;display:flex;flex-direction:column;gap:12px}
.navside .brand h1{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.navside .brand p{font-size:10px;color:var(--brand);margin-top:2px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.navlist{display:flex;flex-direction:column;padding:10px;gap:2px}
.navitem{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:7px;color:#D8DCE7;font-size:13px;font-weight:600;text-decoration:none}
/* ---- ícones do sistema (24/09/2026) ----
   Uma família só, a traço, na grade 24. A regra completa está no topo do
   menu.js. `.ico` é para qualquer ícone novo de tela: basta
   <svg class="ico" viewBox="0 0 24 24"><path d="…"/></svg>. */
.ico,.navitem svg{fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.navitem svg{width:15px;height:15px;flex:none}
.ico{width:16px;height:16px;flex:none;display:inline-block;vertical-align:-3px}
.navitem:hover{background:rgba(255,80,0,.14)}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.navitem.on{background:var(--brand);color:var(--on-brand)}
.navside .brand a.home{width:34px;height:34px;border-radius:10px;background:var(--brand);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px;color:var(--on-brand);flex:none;text-decoration:none}

/* ---- Passo 5 (13/09/2026): estilos soltos que se repetiam ----
   Eram style="" escritos direto em cada tela: botoes de icone da barra do topo
   (Sair, Configuracoes, Lixeira) e o desenho dentro deles, e o logo no quadrado do
   menu. :is(.bar,.topbar) porque no Workflow a barra e .topbar, e (0,2,0) vence o
   ".bar button" das telas, que vem depois. No CRM, Lixeira e Sair (8px) seguem soltos. */
:is(.bar,.topbar) .icobtn{width:34px;padding:7px 0;text-align:center}
:is(.bar,.topbar) .icobtn svg{display:inline-block;vertical-align:middle}
.navmark img,.preview .mark img{width:100%;height:100%;object-fit:cover}

/* ============================================================
   MENU EM ÁREAS (23/09/2026, forma B — sanfona)
   Com onze módulos a lista reta parou de servir. As áreas abrem e fecham; a
   da tela aberta vem aberta. Quem desenha é o menu.js; aqui está só a roupa.
   Regra que segura tudo: com a barra RECOLHIDA não há espaço para cabeçalho
   nenhum, então os cabeçalhos somem e todos os módulos aparecem em fila — é
   o menu de antes, que já funcionava naquele espaço.
   ============================================================ */
.navarea{display:flex;flex-direction:column;gap:2px}
.navcab{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;background:none;border-radius:7px;
  font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8189A0;
  cursor:pointer;text-align:left;min-height:38px}
.navcab:hover{background:rgba(255,255,255,.06);color:#E9ECF4}
.navcab[aria-expanded="true"]{color:#E9ECF4}
.navcab .lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a marca fica na FRENTE do nome, no lugar do antigo quadradinho (opção F) */
.navcab .navseta{width:15px;height:15px;flex:none;display:flex;align-items:center;justify-content:center;transition:transform .15s ease}
.navcab .navseta svg{width:12px;height:12px;display:block}
.navcab[aria-expanded="true"] .navseta{transform:rotate(90deg)}
@media(prefers-reduced-motion:reduce){.navcab .navseta{transition:none}}
.navfilhos{display:flex;flex-direction:column;gap:2px;padding-left:14px;margin-left:10px;border-left:1px solid rgba(255,255,255,.08)}
.navarea.fechada>.navfilhos{display:none}
.navrodape{display:flex;flex-direction:column;gap:2px}   /* 24/09: sem risco separando — o Chat IA é um item como os outros */
/* barra recolhida: sem cabeçalho, todos os módulos em fila */
.app.collapsed .navcab{display:none}
.app.collapsed .navarea.fechada>.navfilhos{display:flex}
.app.collapsed .navfilhos{padding-left:0;margin-left:0;border-left:0}