/* base.css — moldura (shell, cabeçalho, login), home, tarefas, kanban, conferência, financeiro, e a base que TODO relatório reusa (#preview, .rep, .info)
   Cortado de index.html por scripts/cortar-css.js. A ORDEM dos <link> no
   index.html é a ordem original do arquivo e não pode mudar: em CSS quem
   vem depois ganha. O grupo `css` da fumaça guarda isso. */
  :root{
    --bg:#0b0d10; --card:#14171c; --card2:#0e1013; --line:#232830;
    --tx:#e8eaed; --mut:#8b93a1; --acc:#6366f1; --acc2:#6366f1; --accd:#4f46e5;
    --cyan:#22d3ee; --green:#22c55e; --red:#ef4444; --sabbg:#3a1d1d; --amber:#f59e0b;
    /* Azul de estado, irmao dos de cima (todos sao o tom 500 da mesma familia
       de onde saiu o indigo `--acc`). Entrou em 2026-09-05 para a medida
       ACORDADA com o cliente, na Medicao: nao e sucesso (`--green`), nao e
       aviso (`--amber`) e nao e a marca (`--acc`). `--cyan` seria o atalho,
       mas o DESIGN.md o reserva para grafico/dado. */
    --blue:#3b82f6;
    --doc-dark:#1f2622; --doc-acc:#1e9e74; --doc-seg:#19b3a0;
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
    --radius-xl:20px;
    /* escurecimento atrás de janela modal. Existe porque DUAS telas já usavam
       o mesmo valor cru para o mesmo efeito -- .modalbg do menu de impressão
       da programação e o ::backdrop da janela de Catálogos --, e o detector de
       design acusou as duas. Token responde ao detector; exceção só o silencia. */
    --scrim:rgba(0,0,0,.55);
    /* fundo em degradê da tela de login — padrão de fábrica; sobrescrito por
       #api/login-config (Configurações > Cores da tela de login) */
    --lg1:#6b7280; --lg2:#8ab4f8; --lg3:#3f4550;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{background:var(--bg);color:var(--tx);font:14px/1.5 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif}
  .app{width:100%}
  .app-h,.hub-h,.card,.tcard,.login-card,.oitemcard,.repcard,.ti,.opanel .card{
    background:var(--card);border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.28)}

  /* ---- shell: barra lateral + conteúdo ---- */
  .shell{display:none;min-height:100vh}
  body.authed .shell{display:flex}
  .sb-spacer{width:72px;flex:none}
  .sidebar{width:72px;position:fixed;top:0;left:0;height:100vh;z-index:40;overflow-y:auto;overflow-x:hidden;
    background:var(--bg);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:20px 14px;
    transition:width .18s ease,box-shadow .18s ease}
  .sidebar:hover,.sidebar:focus-within{width:250px;overflow-x:visible;box-shadow:14px 0 32px rgba(0,0,0,.35)}
  .sb-logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;padding:6px 8px 20px}
  .sb-logo-text{white-space:nowrap;display:none}
  .sidebar:hover .sb-logo-text,.sidebar:focus-within .sb-logo-text{display:inline}
  .sb-mark{width:26px;height:26px;border-radius:8px;background:var(--acc);color:#fff;font-size:11px;
    font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
  .sb-nav{display:flex;flex-direction:column;gap:2px}
  .sb-item{display:flex;align-items:center;justify-content:center;gap:0;padding:10px 0;border-radius:var(--radius-sm);
    color:var(--mut);text-decoration:none;font-size:13.5px;font-weight:500;position:relative;transition:background .15s,color .15s}
  .sb-item svg{width:23px;height:23px;flex:none;transition:width .15s,height .15s}
  .sb-label{display:none;white-space:nowrap}
  .sidebar:hover .sb-label,.sidebar:focus-within .sb-label{display:inline}
  .sidebar:hover .sb-item,.sidebar:focus-within .sb-item{justify-content:flex-start;gap:11px;padding:10px 12px}
  .sidebar:hover .sb-item svg,.sidebar:focus-within .sb-item svg{width:18px;height:18px}
  .sb-item:hover{background:var(--card2);color:var(--tx)}
  .sb-item.act{background:rgba(99,102,241,.14);color:#fff}
  .sb-item.act::before{content:'';position:absolute;left:-8px;top:8px;bottom:8px;width:3px;
    border-radius:0 3px 3px 0;background:var(--acc)}
  .sidebar:hover .sb-item.act::before,.sidebar:focus-within .sb-item.act::before{left:-14px}
  .sb-item.denied{display:none}
  .sb-section{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);opacity:.65;padding:16px 12px 6px;display:none}
  .sidebar:hover .sb-section,.sidebar:focus-within .sb-section{display:block}
  .sb-nav .sb-section:first-child{padding-top:0}
  .sb-item.soon{cursor:default;opacity:.55}
  .sb-item.soon:hover{background:none;color:var(--mut)}
  .sb-tag{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
    background:var(--card2);border:1px solid var(--line);border-radius:5px;padding:2px 6px;color:var(--mut);flex:none;display:none}
  .sidebar:hover .sb-tag,.sidebar:focus-within .sb-tag{display:inline-block}
  .sb-bottom{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:2px}
  .sb-user{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 0}
  .sidebar:hover .sb-user,.sidebar:focus-within .sb-user{justify-content:space-between;padding:10px 12px}
  #hubUser{display:none}
  .sidebar:hover #hubUser,.sidebar:focus-within #hubUser{display:inline}
  .main{flex:1;min-width:0;padding:26px 30px 80px}

  .app-h,.hub-h,.card,.tcard,.login-card,.oitemcard,.repcard,.ti,.opanel .card{border-radius:var(--radius-md)}

  /* ---- cabeçalho ---- */
  .app-h{margin-bottom:22px;padding:16px 20px}
  .eyebrow{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-bottom:6px;font-weight:700}
  /* Marca "José Projetos". O arquivo é um wordmark bem largo (5539x969, ~5,7:1)
     desenhado para fundo escuro — por isso só a altura é fixada e a largura
     acompanha, senão ele distorce. `height` em vez de `width` também mantém a
     marca do mesmo tamanho ótico ao lado de textos de tamanhos diferentes.
     Servido como arquivo em server/public/ (o Express já serve essa pasta):
     embutir 43 KB em base64 no HTML engordaria a página inteira, que é baixada
     a cada visita, para ganhar uma requisição que o navegador cacheia. */
  .marca{height:26px;width:auto;display:block;margin-bottom:10px}
  .login-card .marca{height:30px;margin:0 auto 14px}
  /* Na barra lateral fechada (72px) não cabe wordmark nenhum: ali fica o
     quadrado, e o logo só aparece quando ela abre — mesmo gatilho que já
     revelava o texto antes. */
  .sb-logo .marca{height:20px;margin:0;display:inline-block;vertical-align:middle}
  .app-h h1{margin:0;font-size:24px;font-weight:700;letter-spacing:-.02em}
  .app-h p{margin:5px 0 0;color:var(--mut);font-size:13px;max-width:64ch}

  /* ---- tela de login (sem barra lateral) — fundo em degradê + cartão vidrado ---- */
  body:has(#login:not([hidden])){background:#05060d}
  .login-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#05060d;pointer-events:none}
  .login-bg i{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.55}
  .login-bg i:nth-child(1){width:640px;height:640px;top:-180px;left:-140px;background:var(--lg1)}
  .login-bg i:nth-child(2){width:560px;height:560px;bottom:-200px;left:18%;background:var(--lg2)}
  .login-bg i:nth-child(3){width:600px;height:600px;top:8%;right:-180px;background:var(--lg3)}
  @media (prefers-reduced-motion:no-preference){
    .login-bg i{animation:lgDrift 22s ease-in-out infinite alternate}
    .login-bg i:nth-child(2){animation-duration:26s;animation-delay:-6s}
    .login-bg i:nth-child(3){animation-duration:19s;animation-delay:-11s}
  }
  @keyframes lgDrift{to{transform:translate(3%,4%) scale(1.06)}}
  /* faixa translúcida de ponta a ponta (altura cheia da viewport), não uma
     caixa flutuante — o desfoque colorido só aparece nas laterais, como na
     referência que o usuário mandou */
  #login{position:relative;z-index:1;min-height:100vh;display:flex;justify-content:center}
  #login[hidden]{display:none}
  .login-card{
    width:440px;max-width:100%;flex:none;min-height:100vh;
    display:flex;flex-direction:column;justify-content:center;
    padding:40px 34px;
    background:color-mix(in srgb,var(--card) 78%,transparent);
    border-left:1px solid rgba(255,255,255,.09);border-right:1px solid rgba(255,255,255,.09);
    backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);
    box-shadow:0 0 90px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06)}
  #login .eyebrow{text-align:center}
  #login h1{margin:2px 0 6px;font-size:19px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;text-align:center}
  #login p{margin:0 0 22px;color:var(--mut);font-size:13px;text-align:center}
  #login .fld{margin-bottom:14px}
  #login .in-ic{position:relative;display:flex;align-items:center}
  #login .in-ic svg{position:absolute;left:12px;width:15px;height:15px;color:var(--mut);pointer-events:none;transition:color .15s}
  #login .in-ic:focus-within svg{color:var(--acc)}
  #login .in-ic .in{padding-left:37px}
  #login .btnrow{margin-top:8px}
  #login .btn.pri{
    background:#f4f1ea;border-color:transparent;color:#171422;box-shadow:0 12px 28px rgba(0,0,0,.4);
    letter-spacing:.05em;text-transform:uppercase;font-size:12.5px}
  #login .btn.pri:hover{background:#fff;filter:none}
  #login .lgHint{font-size:12px;margin:16px 0 0;text-align:center;color:var(--mut)}

  /* ---- página inicial (central de ferramentas) ---- */
  .hub-h{margin:10px 0 26px;padding:18px 22px}
  .hub-h h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em}
  .hub-h p{margin:6px 0 0;color:var(--mut);font-size:13.5px}
  .hub-section{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--mut);margin:28px 0 12px}
  .hub-section:first-of-type{margin-top:0}
  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
  #hubDia{margin-bottom:4px}
  .hd-lista{display:flex;flex-direction:column;gap:8px}
  .hd-item{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto auto;gap:12px;align-items:center;
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:11px 14px;text-decoration:none;color:var(--tx)}
  .hd-item:hover{border-color:var(--acc)}
  .hd-obra,.hd-cli{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hd-cli{color:var(--mut);font-size:13px}
  .hd-prazo{color:var(--mut);font-size:12.5px;text-align:right;white-space:nowrap}
  .hd-mais{margin:2px 0 0;color:var(--mut);font-size:12.5px}
  .hd-vazio{margin:0;color:var(--mut);font-size:13.5px}
  /* Página da obra: faixa de contexto no topo e as três listas de material
     lado a lado. Só disposição — cor, raio, sombra e tipografia vêm das
     classes que já existem. */
  .obfaixa{display:flex;flex-direction:column;gap:8px}
  .obf-linha{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
  .obf-topo{justify-content:space-between}
  .obf-proj{font-size:15px;font-weight:600}
  .obf-mut{color:var(--mut);font-size:13px}
  .obmats{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-bottom:18px}
  .obmats>.obmat{margin-bottom:0}
  .obdet>summary{cursor:pointer;font-size:15px;font-weight:600;list-style-position:outside}
  .obdet>summary:hover{color:var(--acc)}
  .obdet[open]>summary{margin-bottom:14px}
  .tcard{display:block;padding:18px;text-decoration:none;color:var(--tx);transition:border-color .18s,transform .18s,box-shadow .18s}
  .tcard.denied,.card.denied{display:none !important}
  a.tcard:hover{border-color:var(--acc);transform:translateY(-2px);box-shadow:0 14px 34px rgba(0,0,0,.32),0 0 0 1px rgba(99,102,241,.3)}
  a.tcard:hover .go{color:var(--acc)}
  .tic{width:40px;height:40px;border-radius:var(--radius-sm);display:flex;
    align-items:center;justify-content:center;color:#fff;margin-bottom:12px;background:var(--acc)}
  .tic svg{width:20px;height:20px}
  .tcard h3{margin:0 0 6px;font-size:15px;font-weight:600}
  .tcard p{margin:0;color:var(--mut);font-size:13px;line-height:1.5}
  .go{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--mut);font-weight:600}
  .tcard.soon{border-style:dashed;opacity:.6}
  .tcard.soon .tic{color:var(--mut);background:var(--card2);border:1px solid var(--line)}
  .back{display:inline-block;margin-bottom:14px;text-decoration:none}

  nav.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:20px 0 24px;flex-wrap:wrap}
  .tab{background:none;border:none;color:var(--mut);padding:10px 14px;font:inherit;font-size:13.5px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
  .tab:hover{color:var(--tx)}
  .tab.act{color:var(--tx);border-bottom-color:var(--acc)}

  .panel[hidden]{display:none}
  #oSubObraWrap[hidden]{display:none}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);padding:18px;margin-bottom:18px}
  .card h2{margin:0 0 14px;font-size:15px;font-weight:600}
  .hint{color:var(--mut);font-size:12.5px;margin:8px 0 0}
  .hint.bad{color:#ff9d96}
  .empty,.mut{color:var(--mut)}

  .grid{display:grid;gap:12px}
  .g6{grid-template-columns:repeat(6,1fr)}
  .fld{display:flex;flex-direction:column;gap:5px}
  /* [hidden] TEM de vencer: o `display:flex` do autor logo acima anula o
     `display:none` que o navegador dá ao atributo, e um campo escondido por JS
     continuaria na tela. Mesmo caso já documentado em #confCanvas e
     .fintopo-ctr, mais abaixo. */
  .fld[hidden]{display:none}
  /* Botão de cadastro rápido, dentro de um .fld: o .fld é uma coluna flex, então
     sem isto o botão estica na largura inteira do campo e fica com o mesmo peso
     visual do seletor — pesado demais para uma ação secundária. Classe própria
     e não `.fld .btn`: há 158 `.fld` no arquivo, alguns com botão dentro. */
  .btn-cad-rapido{align-self:flex-start}
  /* Tarefas da agenda (peça 2). `.tar-feito` risca o texto do passo já
     marcado, e `.tar-concluida` risca a tarefa inteira — concluída só
     aparece quando "Mostrar concluídas" está ligado, e precisa se distinguir
     das abertas à primeira vista. */
  .row-between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
  .chk-inline{display:inline-flex;align-items:center;gap:6px;color:var(--mut);font-size:13px;white-space:nowrap}
  .tar{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px;background:var(--card2)}
  .tar-item{display:flex;align-items:center;gap:8px;font-size:14px}
  .tar-item.tar-feito span{text-decoration:line-through;color:var(--mut)}
  .tar-vazia{color:var(--mut);font-size:14px;padding:6px 0}

  /* --- FAXINA DO CARTÃO DE TAREFA, 2026-08-12 -------------------------------
     Tudo daqui para baixo é ESCOPADO em `#agTarLista`, e não é preciosismo: a
     Conferência de Obra reaproveita `.tar` e `.tar-item` (conferencia.js:205,
     219, 255, 266). Sem o escopo, cada ajuste aqui reestiliza silenciosamente
     a outra ferramenta — que ninguém pediu para mexer.

     O que a faxina resolve, medido antes: 22% a 39% da altura de cada cartão
     era caixa de texto vazia, e a lista inteira tinha 18 elementos vermelhos
     contra 6 botões índigo de "Concluir" (seis primários = nenhum). */

  /* O cabeçalho não quebra mais. Com `flex-wrap:wrap` um título comprido
     ("Esquadrias do Residencial Vila Nova - bloco B" já é) empurrava a
     etiqueta de situação para a linha de baixo e desalinhava o cartão. */
  #agTarLista .tar-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
  /* `flex:1 1 auto` para o nome da obra tomar TODO o cabeçalho menos o "+".
     Sem isto ele dividia o espaço com a etiqueta de situação, que se
     dimensionava pelo nome da situação — e a coluna de nome comprido ficava
     com o cartão mais alto. */
  #agTarLista .tar-hd>div:first-child{min-width:0;flex:1 1 auto}
  /* `break-word` e NÃO `anywhere`: são quase sinônimos até entrarem num flex.
     `anywhere` deixa a largura mínima do item cair para UM caractere, então no
     celular a etiqueta de situação espremia o título e ele quebrava letra por
     letra — "Fach / ada / ACM / - Av. / Brasi / l," (fotografado). `break-word`
     só parte palavra que sozinha não caberia, e mantém a largura mínima na
     maior palavra. */
  #agTarLista .tar-tit{font-weight:600;font-size:15px;line-height:1.3;overflow-wrap:break-word}
  /* Responsável, andamento e data de conclusão numa linha muted só. O nome do
     responsável se repetia em todo cartão ocupando uma linha inteira sozinho. */
  #agTarLista .tar-resp{color:var(--mut);font-size:12px;margin-top:2px;font-variant-numeric:tabular-nums}
  #agTarLista .tar-concluida .tar-tit{text-decoration:line-through;color:var(--mut)}

  #agTarLista .tar-itens{margin:10px 0 0;display:flex;flex-direction:column;gap:1px}
  /* A linha do passo abriga caixa · texto · ×. O `×` saiu de dentro do
     <label>: botão dentro de rótulo é alvo ambíguo, e ali ele ficava a poucos
     pixels da caixa de marcar. */
  #agTarLista .tar-item-row{display:flex;align-items:center;gap:6px;border-radius:6px;padding:3px 4px;margin:0 -4px}
  /* Alinhado pelo TOPO e não pelo centro: passo de duas linhas ("Medir a
     fachada no local", que no celular quebra) deixava a caixinha flutuando no
     meio do texto, longe da primeira linha que ela qualifica. */
  #agTarLista .tar-item{flex:1;min-width:0;cursor:pointer;align-items:flex-start}
  #agTarLista .tar-item input{margin-top:2px}
  #agTarLista .tar-item span{overflow-wrap:break-word}

  /* Apagar é a ação mais RARA do cartão e tinha a cor mais forte da tela.
     Agora nasce invisível onde existe ponteiro e só aparece na linha sob o
     cursor; onde não existe "em cima" (toque), fica visível porém neutro, e
     vermelho apenas no instante de agir. O foco de teclado sempre o revela.
     `.tar-edit` (o lápis, 2026-08-13) segue a MESMA regra de opacidade —
     é só a cor do hover que muda, porque corrigir texto não é destrutivo.
     A opacidade some/aparece; a ALTURA da linha não muda em nenhum estado —
     abrir o campo de edição continua sendo coisa de CLIQUE, nunca de hover
     (ver o comentário em agTarCartoes, agenda.js). */
  #agTarLista .tar-x,#agTarLista .tar-edit{background:none;border:0;cursor:pointer;flex:none;
    border-radius:5px;color:var(--mut);opacity:.5;transition:opacity .12s,color .12s,background .12s;
    padding:3px;display:inline-flex;line-height:0}
  #agTarLista .tar-x svg,#agTarLista .tar-edit svg{width:14px;height:14px}
  @media (hover:hover){
    #agTarLista .tar-item-row:hover{background:rgba(255,255,255,.04)}
    #agTarLista .tar-x,#agTarLista .tar-edit{opacity:0}
    #agTarLista .tar-item-row:hover .tar-x,#agTarLista .tar-item-row:hover .tar-edit{opacity:.6}
  }
  /* Depois da media query de propósito: estas têm de vencer o `opacity:0`. */
  #agTarLista .tar-x:hover,#agTarLista .tar-x:focus-visible{opacity:1;color:var(--red);
    background:color-mix(in srgb,var(--red) 15%,transparent)}
  #agTarLista .tar-edit:hover,#agTarLista .tar-edit:focus-visible{opacity:1;color:var(--acc);
    background:color-mix(in srgb,var(--acc) 15%,transparent)}

  /* "Acrescentar passo" era um campo de texto vazio permanente em TODO cartão
     — inclusive nos sem passo nenhum, onde ele era quase o cartão inteiro.
     Agora é um botão de texto que vira campo ao ser clicado. */
  #agTarLista .tar-novoitem{margin-top:8px}
  #agTarLista .tar-novoitem input{width:100%}
  #agTarLista .tar-addpasso{background:none;border:0;padding:3px 0;color:var(--mut);
    font-size:12.5px;cursor:pointer}
  #agTarLista .tar-addpasso:hover{color:var(--acc)}

  /* Rodapé separado por um filete, e "Concluir" deixa de ser `.btn.pri`: seis
     botões índigo preenchidos numa tela são seis primários, ou seja, nenhum.
     O primário da tela é "Nova tarefa". Contorno de acento e não preenchimento
     — DESIGN.md reserva `--acc` para a marca, e `--green` para "sucesso". */
  #agTarLista .tar .btnrow{margin-top:12px;padding-top:10px;border-top:1px solid var(--line);gap:8px}
  #agTarLista .tar-ok{border-color:color-mix(in srgb,var(--acc) 55%,transparent);
    color:var(--acc);font-weight:600}
  #agTarLista .tar-ok:hover{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 12%,transparent)}
  /* "Excluir" some do vermelho até a hora de agir — mesma regra do `×` do
     passo. Com o resto do cartão calmo, seis "Excluir" vermelhos passaram a
     ser a coisa mais forte da tela, e excluir é o que menos se faz aqui. A
     confirmação continua existindo (agenda.js), que é onde o peso deve estar. */
  #agTarLista .tar .btn.danger{border-color:var(--line);color:var(--mut)}
  #agTarLista .tar .btn.danger:hover,#agTarLista .tar .btn.danger:focus-visible{
    border-color:var(--red);color:var(--red);background:color-mix(in srgb,var(--red) 12%,transparent)}
  /* Havia aqui uma regra de celular dando a linha inteira ao nome da obra,
     para a etiqueta de situação descer para a linha de baixo em vez de
     disputar a primeira. Ela SAIU junto com a etiqueta, que passou a morar
     dentro do cartão aberto: com o cabeçalho reduzido a nome + "+", forçar o
     nome a 100% empurrava o "+" sozinho para uma segunda linha e engordava
     todo cartão no telefone. */
  /* QUADRO: cada situação é uma COLUNA, lado a lado (pedido do dono,
     2026-08-12 — o agrupamento empilhado publicado de manhã era o que ele
     tinha em mente como kanban). O DOM é o MESMO nas duas formas: só muda a
     direção deste contêiner, e a media query de 640px lá embaixo o devolve ao
     empilhado no celular.

     As colunas CSS que ficavam DENTRO de cada grupo saíram: uma coluna de
     kanban é uma pilha vertical única.

     `overflow-x:auto` e colunas de largura FIXA: com muitas situações o quadro
     rola de lado, e coluna espremida até ficar ilegível é pior que rolagem.
     Continua valendo para a Conferência de Obra: o layout mora no contêiner,
     nunca em `.tar`. */
  #agTarLista{display:flex;flex-direction:row;align-items:flex-start;gap:16px;
    overflow-x:auto;padding-bottom:6px}
  #agTarLista .tar-grupo{flex:0 0 320px;max-width:320px}
  #agTarLista .tar-grupo-cards{display:flex;flex-direction:column;gap:10px}
  #agTarLista .tar{margin:0}

  /* O corpo do cartão só aparece por CLIQUE, nunca com o ponteiro.
     `display:none` e não altura zero: o critério de geometria mede elementos
     com largura, e um corpo de altura zero mas largura cheia continuaria sendo
     medido — passaria por não haver o que medir, que é a definição de
     decorativo.

     ABRIR NO PONTEIRO FOI RETIRADO em 2026-08-12, no mesmo dia em que entrou,
     por defeito relatado pelo dono. Medido: a altura da PÁGINA passava a
     depender de onde o mouse estava (2221px com um cartão aberto contra 1938px
     sem nenhum). Duas consequências, as duas que ele viu:

     1. rolar até o fim e tirar o ponteiro encolhia a página 283px, e o
        navegador grampeava a rolagem de volta os mesmos 283px sozinho — a
        página "não descia";
     2. abrir o primeiro cartão empurrava os de baixo 283px, jogando-os para
        fora da tela.

     Não é caso raro: acontece em qualquer coluna com mais de dois cartões.
     Quem abre agora é o "+" do cabeçalho, e o mouse não mexe em layout
     nenhum. */
  #agTarLista .tar-corpo{display:none}
  #agTarLista .tar.tar-fixado>.tar-corpo{display:block}
  #agTarLista .tar-hd{cursor:pointer}

  /* O "+" que abre. Existe por dois motivos: sem o ponteiro abrindo, nada mais
     avisaria que há o que abrir; e o cabeçalho é uma <div>, então sem um
     <button> de verdade o cartão não abriria pelo teclado.

     O sinal vem do CSS e não do JavaScript: a classe do cartão já carrega o
     estado, e desenhá-lo de novo em JS seria uma segunda fonte para a mesma
     verdade. `flex:none` para ele nunca ser espremido. */
  #agTarLista .tar-abrir{flex:none;width:24px;height:24px;padding:0;
    background:none;border:1px solid var(--line);border-radius:6px;
    color:var(--mut);cursor:pointer;font-size:15px;line-height:1;
    display:inline-flex;align-items:center;justify-content:center;
    transition:color .12s,border-color .12s,background .12s}
  #agTarLista .tar-abrir::before{content:"+"}
  #agTarLista .tar.tar-fixado .tar-abrir::before{content:"\2212"}
  #agTarLista .tar-abrir:hover,#agTarLista .tar-abrir:focus-visible{
    color:var(--tx);border-color:var(--mut);background:rgba(255,255,255,.06)}

  /* A observação é da OBRA desde a migração 017, e não mais de cada passo.
     Rótulo em caixa alta pequeno, no tom dos cabeçalhos de grupo; o texto
     dentro volta ao normal (o <label> é o pai e o textarea herdaria tudo). */
  #agTarLista .tar-obsbloco{display:flex;flex-direction:column;gap:4px;margin-top:10px;
    font-size:11.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
  #agTarLista .tar-obstexto{font-size:13px;line-height:1.45;resize:vertical;min-height:56px;
    width:100%;letter-spacing:0;text-transform:none;font-weight:400;color:var(--tx)}

  /* CELULAR: o quadro deita e vira a lista empilhada de sempre — não há
     largura para duas colunas, e rolar de lado para achar uma obra é pior que
     rolar para baixo. */
  @media (max-width:640px){
    #agTarLista{flex-direction:column;overflow-x:visible;gap:22px}
    #agTarLista .tar-grupo{flex:1 1 auto;max-width:none}
  }

  /* O cabeçalho do grupo. Rótulo de seção, não título de conteúdo: menor que o
     nome da obra de propósito — quem procura uma obra lê os cartões, não os
     cabeçalhos. A cor da situação vira um ponto, e não um fundo colorido: a
     etiqueta de cada cartão já carrega a cor cheia, e repetir isso numa faixa
     larga transformaria o grupo inteiro num bloco de cor. */
  #agTarLista .tar-grupo-hd{display:flex;align-items:baseline;gap:8px;margin:0 0 9px;
    font-size:12.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
  /* `align-items:baseline` no cabeçalho e um deslocamento no ponto: alinhado
     pelo centro, o ponto subia junto quando o nome passava a ocupar duas
     linhas e ficava boiando no meio do bloco. */
  #agTarLista .tar-grupo-cor{width:8px;height:8px;border-radius:50%;flex:none;
    align-self:center;position:relative;top:1px}
  /* QUEBRA em vez de aparar. Com `text-overflow:ellipsis`, no celular o
     cabeçalho virava "AGUARDANDO INFORM…" — e um grupo cujo nome não dá para
     ler não organiza nada. Cabeçalho de seção pode ocupar duas linhas; nome
     cortado, não. */
  #agTarLista .tar-grupo-nome{min-width:0;overflow-wrap:break-word;line-height:1.35}
  /* A contagem tem largura de dígito fixa: sem `tabular-nums` os números
     dançam de largura entre um render e outro, e a lista pisca de lado. */
  #agTarLista .tar-grupo-n{font-size:11.5px;font-weight:650;letter-spacing:0;color:var(--mut);
    background:var(--card);border:1px solid var(--line);border-radius:999px;padding:0 7px;
    font-variant-numeric:tabular-nums;flex:none}

  /* Setas de reordenar, na tela de Situações. Esta ordem é a mesma que agrupa a
     lista de tarefas, então o cadastro é o único lugar onde ela se decide. */
  .ag-setas{display:inline-flex;gap:2px;margin-right:8px;vertical-align:middle}
  .ag-seta{background:var(--card2);border:1px solid var(--line);border-radius:6px;color:var(--mut);
    padding:4px;cursor:pointer;display:inline-flex;line-height:0}
  .ag-seta svg{width:13px;height:13px}
  .ag-seta.baixo svg{transform:rotate(180deg)}
  .ag-seta:hover:not(:disabled){color:var(--tx);border-color:var(--mut)}
  /* Desabilitada nas pontas, e VISIVELMENTE: uma seta que não faz nada e parece
     clicável é pior que seta nenhuma — a pessoa clica, nada acontece, e ela
     conclui que a tela está quebrada. */
  .ag-seta:disabled{opacity:.3;cursor:default}
  /* A situação é ao mesmo tempo o rótulo colorido e o seletor: um <select> com
     a cor dela no fundo. Dois elementos (chip + seletor) mostrariam a mesma
     informação duas vezes e ainda poderiam discordar entre um render e outro. */
  /* `width:auto` vence o `width:100%` que todo <select> herda da regra de campo
     lá embaixo: sem ele a situação vira uma barra da largura do cartão, que
     lida como barra de progresso e não como etiqueta. */
  /* `field-sizing:content` faz a etiqueta ter a largura do que está ESCRITO
     nela. Sem isso um <select> se dimensiona pela MAIOR opção da lista, então
     "Projeto" ocupava os mesmos 149px de "Aguardando Informações" e virava uma
     placa cinza com a palavra encolhida no canto (medido nos seis cartões).
     Onde o navegador não conhecer a propriedade, ela é ignorada e a etiqueta
     volta a ser o que já era — degrada para o comportamento de hoje, não para
     um quebrado. */
  .tar-status{border:0;border-radius:999px;padding:3px 9px;font-size:11.5px;font-weight:600;
    color:#fff;width:auto;field-sizing:content;max-width:100%;cursor:pointer;
    -webkit-appearance:none;appearance:none;text-overflow:ellipsis}
  /* NO QUADRO A ETIQUETA SAIU DO CABEÇALHO e passou a morar dentro do cartão
     ABERTO. Duas tentativas anteriores, e por que as duas eram piores:

     1. No cabeçalho, escondida com `opacity`: continuava OCUPANDO O LUGAR, e o
        lugar dela é a largura do NOME da situação. Medido com o mesmo texto
        nos três cartões — "Aguardando Informações" tomava 147px dos 294px do
        cabeçalho (o teto de 50%), sobravam 103px para o nome da obra, a linha
        de estado quebrava em DUAS e o cartão daquela coluna ficava 18px mais
        alto que os outros, sem nada visível explicando. Defeito relatado pelo
        dono: "a palavra passo da primeira coluna está ficando na segunda
        linha".
     2. Sobreposta (`position:absolute`): resolvia a largura e tapava o MEIO do
        nome da obra — "Esquadrias do R⟨etiqueta⟩ bloco B" (fotografado).

     Dentro do corpo não há dilema: no quadro a etiqueta é redundante, porque a
     coluna acima já diz a situação em letra maior e sem cortar. O que o cartão
     precisa é do CONTROLE para mudá-la, e controle mora junto de Editar,
     Concluir e Excluir — que também só aparecem com o cartão aberto.

     Some daqui, portanto, a revelação por ponteiro: quem revela agora é o "+". */
  #agTarLista .tar-sit{margin:0 0 10px}
  #agTarLista .tar-status{max-width:100%}
  /* As opções abrem no menu do sistema, que pinta com as cores DELE — sem isto,
     texto branco herdado sobre fundo branco deixa a lista ilegível no Windows. */
  .tar-status option{background:var(--card);color:var(--tx)}
  /* Conferência de Obra reaproveita o cartão `.tar` da Agenda (mesma caixa de
     lista); só o destaque de "já conferida" é próprio daqui. */
  #confLista .tar.feita{border-left:3px solid var(--acc)}
  /* AS DUAS COLUNAS (2026-08-13). `auto-fit` + minmax empilha sozinho em tela
     estreita, sem media query nova -- e sem `grid-column:span` inline, que foi
     exatamente o que anulou a media query no defeito do celular de 2026-08-10.
     3fr/2fr de propósito: a coluna com cálculo é lista de carimbo (quase toda
     "✓ confere"), a das especiais é onde o dono lê perfil por perfil. */
  .conf-colunas{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;align-items:start}
  @media(min-width:760px){ .conf-colunas{grid-template-columns:3fr 2fr} }
  .conf-coluna{min-width:0}
  .conf-coluna h3{margin:0;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
  .conf-col-sub{margin:2px 0 10px;color:var(--mut);font-size:12.5px}
  .conf-col-cards{display:flex;flex-direction:column;gap:10px}
  .conf-col-cards .tar{margin:0}
  /* A faixa das que só esperam a tipologia: pendência do dono, não trabalho de
     conferência. Fechada, ocupa uma linha. */
  .conf-esperando{border:1px dashed var(--line);border-radius:8px;padding:10px 12px;margin-top:10px}
  .conf-esperando>summary{cursor:pointer;font-size:13.5px}
  /* Célula das quatro caixas por linha (perfil/corte/tamanho/qtd) — só
     centraliza o checkbox nativo, sem trocar nada do estilo dele. */
  #confLista .confchk{text-align:center}
  /* Duas colunas (lista | desenho) — mesmo molde de #tool-estr .es-live: 1fr/1fr
     e vira uma coluna abaixo de 860px, o breakpoint padrão do app. */
  .conf-esq-modal{width:min(980px,94vw);max-height:92vh;overflow:auto}
  #confEsqCorpo .conf-bloco{margin-top:14px}
  #confEsqCorpo .conf-bloco h4{margin:0 0 8px;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--mut)}
  #confEsqCorpo .conf-escolhas{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2px 24px}
  #confEsqCorpo .conf-escolha{display:flex;gap:8px;padding:4px 0;border-bottom:1px solid var(--line);font-size:13.5px;align-items:baseline}
  #confEsqCorpo .conf-escolha span{color:var(--mut);white-space:nowrap}
  #confEsqCorpo .conf-escolha b{font-weight:600}
  /* No celular a tabela de perfis nao cabe: 11 colunas em 390px. Rola DENTRO
     da propria caixa, para a pagina nunca rolar de lado -- sem isto o dono
     simplesmente nao via Tamanho, Qtd, Peso e Posicao, sem nenhum sinal de
     que havia mais coisa. */
  #confEsqCorpo .conf-tabela{overflow-x:auto;-webkit-overflow-scrolling:touch}
  #confEsqCorpo .conf-tabela table{min-width:640px}
  /* O desenho do perfil, na 1a coluna, altura fixa (dezenas por esquadria). Fundo
     branco fixo (DESIGN.md, Excecoes): o traco preto some no tema escuro. */
  #confEsqCorpo .conf-croqui{width:56px;height:40px;object-fit:contain;background:#fff;border-radius:4px;display:block}
  #confEsqCorpo .conf-croqui[hidden]{display:none}
  /* A mensagem do croqui vazia estava sendo cortada na largura do telefone. */
  /* A mensagem OCUPA A LARGURA e centraliza o texto, em vez de encolher ate
     caber. Como item flex encolhivel ela chegou a 40px -- com 20px de padding
     de cada lado, ZERO para o texto, e cada palavra transbordava e saia
     cortada no celular. Medido: msg 325..365 numa caixa de 31..359. */
  #confDesenhoMsg{max-width:100%;box-sizing:border-box;margin:0}
  #confLista .tar[data-esq]{cursor:pointer}
  #confDesenhoWrap{min-height:200px;display:flex;align-items:center;justify-content:center;background:var(--card2);border-radius:var(--radius-sm);overflow:auto}
  /* [hidden] TEM de vencer: `display:block` cru anula o hidden do navegador, e
     o canvas continuava ocupando 300px mesmo escondido -- empurrando a
     mensagem "desenho indisponivel" para fora da caixa e cortando o texto.
     Defeito antigo, invisivel enquanto o desenho tinha um painel largo so
     dele; apareceu quando a janela apertou o espaco. */
  #confCanvas{max-width:100%;display:block}
  #confCanvas[hidden]{display:none}
  #confDesenhoMsg{color:var(--mut);font-size:13.5px;padding:20px;text-align:center}
  .fld label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
  .fld.chk{justify-content:flex-end}
  .fld.chk label{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:13px;color:var(--tx);cursor:pointer}
  .in,select,input[type=date],input[type=month],input[type=time],input[type=text]{
    background:var(--card2);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--tx);
    padding:8px 10px;font:inherit;font-size:13.5px;color-scheme:dark;width:100%}
  .in:focus,select:focus,input:focus{outline:none;border-color:var(--acc)}
  /* Checkbox e seletor de arquivo não têm borda visível, então a regra acima os
     deixava sem indicador nenhum de foco — inclusive o checkbox que concede
     privilégio de administrador. A pseudo-classe abaixo só dispara em navegação por
     teclado, então o clique de mouse continua sem anel, como hoje. */
  input[type="checkbox"]:focus-visible,
  input[type="file"]:focus-visible,
  [role="button"]:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
  tr[role="button"]:focus-visible{outline-offset:-2px}
  .in[readonly]{color:var(--mut);cursor:default}
  input[type=checkbox]{width:15px;height:15px;accent-color:var(--acc)}
  /* Alvo de toque 44×44 nas células editáveis dos cadastros do CEM (spec
     §5): a tela é usada em obra, no tablet, de luva -- mesmo padrão de
     ficha.css:187-192. Perfis fica de fora da regra do checkbox: não tem
     coluna Ativo, só a barra (texto).

     Correção 1 (rodada de conserto 1): a `<td>` que só continha o checkbox
     nunca foi o alvo clicável -- ela já media 44 de qualquer jeito, puxada
     pela altura da LINHA (o input de texto do preço ao lado já é 44px), e
     o checkbox em si seguia com 22×22. Medir a célula não provava nada
     sobre o que de fato recebe o toque. Por isso o checkbox agora nasce
     dentro de um <label> (vidros-superficies.js, componentes.js) que ocupa
     a célula inteira -- mesmo padrão do checkbox de Impedir Cálculo em
     ficha.css:192: clicar em qualquer canto do label alcança o checkbox
     nativamente, sem handler novo (o `change` continua saindo do input). */
  #vdLista input[type=text],#sfLista input[type=text],#abLista input[type=text],#compLista input[type=text],#pfRows input[type=text]{min-height:44px}
  #vdLista td label,#sfLista td label,#abLista td label,#compLista td label{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;cursor:pointer}
  #vdLista input[data-vs-campo=ativo],#sfLista input[data-vs-campo=ativo],#abLista input[data-vs-campo=ativo],#compLista input[data-comp-campo=ativo]{width:22px;height:22px}
  /* Cadastros de material: "+ Novo", "Mostrar inativos" e a janela
     #matItemDlg (js/material-item.js, spec 2026-09-24 §7). Alvo de toque
     44×44 em tudo que se toca -- tablet, de luva. O .btn comum mede ~41px de
     altura e a label do .fld.chk ~20px: sem o mínimo, os dois ficam curtos.
     Selo com texto --tx: o --mut do .stpill padrão fica abaixo de 4,5:1 em
     texto de 10-11px. */
  #pfNovo,#compNovo,#vdNovo,#sfNovo,#abNovo,.mat-liberar{min-height:44px;min-width:44px}
  #tool-perfis .fld.chk label,#tool-componentes .fld.chk label,#tool-vidros .fld.chk label,#tool-superficies .fld.chk label,#tool-acabamentos .fld.chk label,#matItemDlg .fld.chk label{min-height:44px}
  #matItemFieldset{border:0;margin:0;padding:0;min-width:0}
  #matItemCampos{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
  #matItemCampos .in{min-height:44px}
  .mat-ident{margin:0 0 12px;font-family:var(--mono);font-size:15px;color:var(--tx)}
  .mat-selo{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:10.5px;letter-spacing:.04em;text-transform:none;background:color-mix(in srgb,var(--blue) 22%,transparent);color:var(--tx)}
  .mat-liberar{align-self:flex-start;margin-top:6px;font-size:12.5px}
  #matItemErro:empty{display:none}
  #matItemDlg .btnrow .btn{min-height:44px}

  /* Linhas dos cadastros de material: o código vira botão que abre a
     janela, com alvo 44×44 e fonte --mono (código de produto, DESIGN.md);
     pílulas "manual" e "inativo" ao lado dele, com texto --tx (o --mut do
     .stpill padrão fica abaixo de 4,5:1); a linha inativa em --mut, que
     sobre --card dá ~5,7:1; e o filete à esquerda na célula editada, com o
     `title` que diz por quê. --blue é a cor de estado que não é sucesso,
     aviso nem marca (base.css, :root). */
  button.matcod{background:none;border:0;border-radius:var(--radius-sm);padding:0 6px;margin:0;min-height:44px;min-width:44px;font:inherit;font-family:var(--mono);color:var(--tx);text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
  button.matcod:hover{color:var(--acc);text-decoration-color:currentColor}
  button.matcod:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
  .matcod~.stpill{margin-left:6px}
  .stpill.st-manual{background-color:color-mix(in srgb,var(--blue) 22%,transparent);color:var(--tx)}
  .stpill.st-inativo{color:var(--tx)}
  table.list tr.inativo td,table.list tr.inativo button.matcod{color:var(--mut)}
  table.list td.editado{box-shadow:inset 3px 0 0 var(--blue)}
  /* Coluna Desenho de Perfis e Componentes (js/desenho-peca.js, spec dos
     croquis §8): 64×64 (era 40; o dono achou pequeno e escolheu 64 em
     2026-09-29 -- o ícone importado tem 64×64; com a borda, o desenho ocupa 62), fundo branco FIXO,
     porque o desenho importado é preto sobre branco e some no tema escuro
     (exceção no DESIGN.md). Quem segura a largura da coluna é o <th>
     "DESENHO", mesmo quando a imagem sai por 404. */
  .desenho-mini{display:block;width:64px;height:64px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:4px}
  /* Seção Desenho da janela da peça (js/desenho-peca.js, maquete da Task 4
     da E2 dos croquis). Os três botões ganham os 44 px de altura de
     #matItemDlg .btnrow .btn; a figura grande vai em papel branco fixo, como
     a miniatura (exceção no DESIGN.md). */
  #desenhoSecao{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
  #desenhoSecao h4{margin:0 0 10px;font-size:13.5px;font-weight:600;color:var(--tx)}
  #desenhoSecao .btnrow{align-items:center;margin-top:0}
  #desenhoSecao .desenho-mini{flex:none}
  #desenhoFigura{display:block;width:100%;max-height:220px;object-fit:contain;margin-top:12px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm)}

  .btn{background:var(--card2);border:1px solid var(--line);color:var(--tx);border-radius:var(--radius-sm);
    padding:9px 16px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,transform .1s}
  .btn:hover{border-color:var(--acc);color:var(--acc)}
  .btn:active{transform:scale(.97)}
  .btn.pri{background:var(--acc);border-color:transparent;color:#fff;font-weight:600;box-shadow:0 4px 16px rgba(99,102,241,.4)}
  .btn.pri:hover{filter:brightness(1.08);color:#fff}
  /* Estado de repouso: o botão destrutivo precisa se distinguir ANTES do mouse
     chegar. Sem preenchimento — a diferença é a cor da borda e do texto. */
  .btn.danger{border-color:color-mix(in srgb,var(--red) 45%,transparent);color:var(--red)}
  .btn.danger:hover{border-color:var(--red);color:var(--red)}
  .btn.sm{padding:5px 10px;font-size:12.5px}
  /* Estado ocupado: vale pros 46 pontos de escrita sem código em nenhum deles.
     O :hover precisa ser neutralizado porque .btn:hover pinta borda e texto com
     a cor de acento, o que faria um botão desabilitado parecer clicável. */
  button[disabled],.btn[disabled]{opacity:.55;cursor:progress}
  button[disabled]:hover,.btn[disabled]:hover{border-color:var(--line);color:var(--tx)}
  .btn.pri[disabled]:hover{filter:none;color:#fff}
  .btnrow{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}

  /* Task 11 (revisão da Task 8): sem isto o <dialog> nasce com o branco padrão
     do navegador contra o tema escuro do app. Não é só estético -- um texto
     como `<p id="catAdminEstado" class="sub">` (index.html, dentro de
     #catAdminDlg) é `color:var(--mut)` (#8b93a1) a 12px, que contra branco
     cai perto de 3:1 -- abaixo do limite de 4.5:1 pra texto pequeno. Tokens
     que já existem, sem cor nova. */
  dialog{background:var(--card);color:var(--tx);border:1px solid var(--line);border-radius:var(--radius-md)}

  table.list{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
  table.list th{ text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--mut);font-weight:600;padding:8px 10px;border-bottom:1px solid var(--line)}
  table.list td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
  table.list tr:last-child td{border-bottom:none}
  tr[role="button"],div[role="button"]{cursor:pointer}
  #esTable .es-cgrouphead td{padding:8px 10px;background:var(--card2)}
  #esTable .es-cgrouptoggle{background:none;border:none;color:var(--tx);font-weight:600;
    font-size:13px;cursor:pointer;padding:0;display:flex;align-items:center;gap:6px}
  #esTable .es-cgroupcount{color:var(--mut);font-weight:400}
  .sub{font-size:12px;color:var(--mut)}
  .acts{display:flex;gap:6px;justify-content:flex-end}
  .ok{color:var(--green);font-weight:600}

  .stpill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;background:rgba(148,163,155,.15);color:var(--mut)}
  .stsel{appearance:none;-webkit-appearance:none;border-radius:999px;padding:4px 26px 4px 11px;font:inherit;font-size:11.5px;font-weight:600;
    border:1px solid transparent;background:rgba(148,163,155,.15) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2394a39b" stroke-width="2" stroke-linecap="round"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 8px center/12px;
    color:var(--mut);cursor:pointer}
  .stpill.st-andamento,.stsel.st-andamento{background-color:rgba(224,166,63,.15);color:var(--amber)}
  .stpill.st-perdido,.stsel.st-perdido{background-color:rgba(224,101,95,.15);color:var(--red)}
  .stpill.st-fechado,.stsel.st-fechado{background-color:rgba(52,201,143,.15);color:var(--green)}

  /* Tipologias: reaproveita .stpill (estados st-fechado/st-andamento/locked
     já existem, ver acima) em vez de inventar cor nova para
     aprendida/esperando/sua. Layout em flex, nunca grid-column:span inline
     -- ver js/README.md e a nota de restrição da peça. */
  .tip-modelo{padding:14px 0;border-bottom:1px solid var(--line)}
  .tip-modelo:last-child{border-bottom:none}
  .tip-modelo-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .tip-variante{margin:10px 0 0 18px}
  .tip-variante-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .tip-toggle{background:none;border:none;color:var(--tx);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;padding:0}
  .tip-regras{margin:8px 0 0 18px}
  .tip-regra-table td{font-size:13px}
  .tip-edit{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:6px 0}
  .tip-edit .fld{width:140px}

  .repfilter{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px}
  .repfilter-tabs{display:flex;gap:4px;background:var(--card2);border:1px solid var(--line);border-radius:9px;padding:3px}
  .rftab{background:none;border:none;color:var(--mut);padding:7px 13px;font:inherit;font-size:13px;border-radius:7px;cursor:pointer}
  .rftab.act{background:var(--acc);color:#fff;font-weight:600}
  .repfilter-sel{display:flex;gap:8px}
  .repfilter-sel .in{width:auto;min-width:140px}
  .repstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:16px}
  .repcard{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:16px}
  .repcard .rn{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:8px}
  .repcard .rv{font-size:26px;font-weight:700}
  .repcard .rt{font-size:13px;color:var(--mut);margin-top:4px}
  .repcard.st-andamento .rv{color:var(--amber)}
  .repcard.st-perdido .rv{color:var(--red)}
  .repcard.st-fechado .rv{color:var(--green)}

  .perbar{display:grid;grid-template-columns:repeat(5,auto);gap:12px;align-items:end;flex-wrap:wrap}

  /* lançamento */
  #lanRows input[type=time]{padding:6px 6px;font-size:13px}
  #lanRows .ain{min-width:160px}
  #lanRows .dcol{white-space:nowrap}
  #lanRows .dcol span{display:block;font-size:11.5px;color:var(--mut)}
  #lanRows tr.satr td{background:var(--sabbg)}
  #lanRows tr.satr .dcol,#lanRows tr.satr .dcol span{color:#f2a49e}
  .hcol{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums}

  .totcard{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:16px}
  .ti{background:var(--card2);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
  .ti .lbl{display:block;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:4px}
  .ti b{font-size:15px;font-weight:650}
  .ti.liq{border-color:var(--acc)}
  .ti.liq b{color:var(--acc);font-size:17px}
  .ti input{padding:5px 8px;font-size:14px}

  /* ---------- Financeiro: Visão geral ----------
     A tela responde três perguntas na ordem em que elas doem: quanto tenho,
     quanto entra, quanto sai. Por isso uma FAIXA de três números grandes, e
     não cinco cartões do mesmo tamanho -- num painel de dinheiro, tudo com o
     mesmo peso é o mesmo que nada em destaque.

     Todo número de dinheiro aqui usa tabular-nums: as casas alinham coluna a
     coluna e dá para comparar duas linhas de relance. É a única liberdade
     tipográfica da tela, e ela serve o assunto. */
  .finband{display:grid;grid-template-columns:repeat(3,1fr);
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
  .finband>div{padding:18px 20px;border-right:1px solid var(--line)}
  .finband>div:last-child{border-right:none}
  .finband .lbl{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--mut);margin-bottom:6px}
  .finband b{display:block;font-size:27px;font-weight:640;letter-spacing:-.015em;
    font-variant-numeric:tabular-nums}
  .finband .sub{display:block;font-size:12px;color:var(--mut);margin-top:6px;
    font-variant-numeric:tabular-nums}
  /* Verde entra, vermelho sai -- a semântica de status do DESIGN.md. Nunca
     --acc aqui: acento é cor de marca, não de dinheiro. */
  .finband .ent{color:var(--green)}
  .finband .sai{color:var(--red)}

  /* O resultado do mês e as duas barras. As barras são A assinatura desta
     tela: as duas dividem a MESMA escala (o maior previsto do mês), então o
     comprimento de uma contra a outra já responde "sai mais do que entra?", e
     a parte preenchida responde "quanto disso já está resolvido?". Duas barras
     com escalas próprias seriam bonitas e mentirosas. */
  .finres{display:grid;grid-template-columns:minmax(200px,1fr) 2fr;gap:24px;align-items:center;
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius-md);
    padding:18px 20px;margin-top:12px}
  .finres .lbl{display:block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
    color:var(--mut);margin-bottom:6px}
  .finres .valor{display:block;font-size:34px;font-weight:660;letter-spacing:-.02em;
    font-variant-numeric:tabular-nums}
  .finlinha{display:grid;grid-template-columns:74px 1fr auto;gap:12px;align-items:center;
    font-size:12.5px}
  .finlinha+.finlinha{margin-top:12px}
  .finlinha .rot{color:var(--mut);text-transform:uppercase;font-size:10.5px;letter-spacing:.08em}
  .finlinha .num{color:var(--mut);font-variant-numeric:tabular-nums;white-space:nowrap}
  .finlinha .num b{color:var(--tx);font-weight:640}
  .finbar{position:relative;height:9px;background:#191d24;border-radius:999px;overflow:hidden}
  .finbar i{position:absolute;left:0;top:0;bottom:0;display:block;border-radius:999px;
    transition:width .35s ease}
  .finbar i.prev{background:#2c333e}
  .finbar i.ent{background:var(--green)}
  .finbar i.sai{background:var(--red)}
  @media (prefers-reduced-motion:reduce){.finbar i{transition:none}}

  /* Controles do mês, à direita da linha de abas. Só aparecem na Visão geral
     -- a aba Lançamentos tem o filtro de mês dela, e dois seletores de mês
     visíveis ao mesmo tempo é o tipo de coisa que faz alguém mudar o errado. */
  .fintopo{display:flex;justify-content:space-between;align-items:center;gap:12px;
    flex-wrap:wrap;margin-bottom:16px}
  .fintopo .repfilter-tabs{margin-bottom:0}
  .fintopo-ctr{display:flex;gap:8px;align-items:center}
  /* [hidden] TEM de vencer: o display:flex acima e do autor e anula o
     display:none que o navegador da ao atributo hidden, pela mesma razao
     documentada em #confCanvas (:511) -- sem esta regra os dois seletores de
     mes (Visao geral e Resultado) ficam visiveis ao mesmo tempo. */
  .fintopo-ctr[hidden]{display:none}
  .fintopo-ctr .in{width:auto}

  .finmoney{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  /* Só o cartão de Contas para de esticar: com duas ou três linhas ele viraria
     um retângulo vazio do tamanho da tabela de lançamentos ao lado. Os dois de
     cima continuam esticando um para o outro -- lado a lado, alturas
     diferentes leem como desalinho, não como economia. */
  #finVisaoContas{align-self:start}
  .fintot{font-variant-numeric:tabular-nums;font-weight:640}

  #finPaneResultado .card{margin-top:14px}
  #finPaneResultado tfoot td{border-top:1px solid var(--line);font-weight:600}
  /* [data-fin-res-cat] só, não 'tr' cru: a linha de estado vazio
     (<tr><td class="empty">) não tem esse atributo, e não pode prometer um
     clique que o ouvinte descarta. */
  #finPaneResultado tbody tr[data-fin-res-cat]{cursor:pointer}
  #finPaneResultado tbody tr[data-fin-res-cat]:hover{background:var(--card2)}

  /* Doze colunas, resultado acima ou abaixo da linha de zero. Desenhada em CSS
     de propósito: a bateria de fumaça bloqueia toda origem externa e a lista de
     exceções está vazia -- uma biblioteca de gráfico por CDN reprovaria a
     bateria inteira. */
  .finserie{display:grid;grid-template-columns:repeat(12,1fr);gap:6px;align-items:stretch}
  .finserie .empty{grid-column:1/-1}
  .finserie-col{display:flex;flex-direction:column;align-items:center;gap:4px}
  .finserie-graf{position:relative;width:100%;height:110px}
  .finserie-zero{position:absolute;left:0;right:0;top:50%;border-top:1px dashed var(--line)}
  .finserie-barra{position:absolute;left:22%;right:22%;border-radius:3px;min-height:2px}
  .finserie-barra.pos{bottom:50%;background:var(--green)}
  .finserie-barra.neg{top:50%;background:var(--red)}
  /* marcador de mês com resultado exatamente zero -- não é "sem dado" (Q1) */
  .finserie-barra.zero{top:50%;height:4px;min-height:4px;transform:translateY(-50%);background:var(--mut)}
  .finserie-mes{font-size:11px;color:var(--mut);white-space:nowrap}
  .finserie-col.act .finserie-mes{color:var(--tx);font-weight:600}
  .finserie-col.act .finserie-graf{background:var(--card2);border-radius:6px}

  @media (max-width:900px){
    .finserie{grid-template-columns:repeat(6,1fr);row-gap:14px}
    .finband{grid-template-columns:1fr}
    .finband>div{border-right:none;border-bottom:1px solid var(--line)}
    .finband>div:last-child{border-bottom:none}
    .finres{grid-template-columns:1fr;gap:16px}
  }

  .logoPrev{display:flex;align-items:center;gap:14px;margin-top:12px}
  .logoPrev img{max-height:60px;max-width:180px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:6px}

  /* A prévia da assinatura NÃO reusa .logoPrev: aquela pinta fundo branco na
     imagem, e sobre branco uma assinatura de fundo opaco pareceria perfeita —
     escondendo justamente o defeito que esta prévia existe para revelar. Aqui
     a geometria é copiada de .osigline/.osigimg, então o que se vê é o que sai
     impresso. O padding do topo dá espaço para a imagem subir acima da linha,
     como ela faz no documento. */
  .assinPrev{display:flex;align-items:center;gap:14px;margin-top:12px}
  .assinPrev[hidden]{display:none}
  .assinPapel{background:#fff;border:1px solid var(--line);border-radius:6px;padding:26px 16px 10px;width:210px}
  .assinLinha{border-bottom:1px solid #333;height:34px;position:relative}
  .assinPrev img{position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);max-height:52px;max-width:88%}

  /* preview (folha de papel sobre a mesa) */
  #previewWrap{margin-top:26px}
  .pv-bar{display:flex;gap:10px;align-items:center;margin-bottom:14px}
  .pv-bar .t{font-size:13px;color:var(--mut);margin-right:auto}
  #preview{background:#fff;color:#000;max-width:840px;margin:0 auto;padding:28px 30px;
    border-radius:3px;box-shadow:0 18px 50px rgba(0,0,0,.55)}
  .rep+.rep,.opage+.opage,.cpage+.cpage,.al2-folha+.al2-folha,.rh2-folha+.rh2-folha{margin-top:36px;border-top:2px dashed #bbb;padding-top:36px}

  .rep{font-family:Arial,Helvetica,sans-serif;color:#000;font-size:12px}
  .rhead{display:flex;align-items:center;margin:0 0 10px;min-height:40px}
  .rhead .side{width:160px}
  .rlogo{display:block;max-height:60px;max-width:155px}
  .rtitle{flex:1;text-align:center;font-weight:bold;font-size:15px}
  .rep table{border-collapse:collapse;width:100%}
  .info{border:1.5px solid #000;margin-bottom:10px}
  .info td{border:1px solid #000;padding:3px 10px;font-size:11.5px;width:50%}
  .info .ih{text-align:center;font-weight:bold}
  .grade th{border:1px solid #000;padding:4px;font-size:12px}
  .grade td{border:1px solid #000;padding:0;vertical-align:top}
  .dcell{text-align:center;padding:5px 2px !important}
  .dnum{font-weight:bold;font-size:11px}
  .dwk{font-size:10px}
  tr.sab .dnum,tr.sab .dwk,tr.sab .slot{color:#c00000}
  .slot{padding:4px 7px;font-size:10.5px;line-height:14px;height:22px}
  .slot+.slot{border-top:1px dotted #777}
  .tv{font-weight:bold;margin-left:4px}
  .atvGrid{display:flex;min-height:45px}
  .atvGrid div{flex:1}
  .atvGrid div+div{border-left:1px dotted #777}
  .atvTxt{padding:4px 7px;font-size:11px;min-height:45px}
  .tot{margin-top:8px}
  .tot td{border:1px solid #000;padding:4px 8px;font-size:11px}
  .sigs{display:flex;gap:60px;margin-top:48px;text-align:center;font-size:11px}
  .sig{flex:1}
  .sigline{border-top:1px solid #000;margin-bottom:4px}
  .cityline{text-align:center;margin-top:28px;font-size:11px}
  .contsub{font-size:11px;margin:0 0 8px}
  .pgnum{text-align:right;font-size:9.5px;color:#555;margin-top:10px}

  /* ---- menu principal: card em pod, com cor e desenho por ferramenta ----
     Desenhado em 29/08/2026. Fica no FIM do arquivo de proposito: as regras de
     cor da barra tem a mesma especificidade de `.sb-item.act`, e so ganham dela
     por virem depois. Mover este bloco para cima apaga a cor do item ativo.

     O `data-tool` e o `data-sbtool` ja existiam no HTML -- nenhuma classe nova
     foi criada para pintar. E o SVG nao sabe de que cor e: as duas camadas de
     cada desenho (a massa em `fill` a 20% e o traco) usam `currentColor`, entao
     UMA linha de `color` pinta o icone inteiro. */
  #home .tcard{position:relative;padding:20px;border-radius:var(--radius-xl);box-shadow:none;
    transition:background .22s,border-color .22s}
  #home .tic{width:46px;height:46px;border-radius:14px;margin:0 0 16px;color:var(--card2);
    border:1px solid transparent;transition:background .22s,border-color .22s}
  #home .tic svg{width:21px;height:21px}
  /* o fio: separa o cabecalho do corpo de ponta a ponta, por isso a margem negativa */
  #home .tcard h3{border-top:1px solid var(--line);margin:0 -20px 8px;padding:16px 20px 0;
    font-size:16px;font-weight:600}
  #home .tcard p{font-size:12.5px;line-height:1.5}
  /* o "Abrir ->" de texto vira o botao circular do canto: repetido dez vezes na
     mesma tela, aquele texto era ruido -- o card inteiro sempre foi o link.
     `font-size:0` esconde o texto sem tira-lo da arvore de acessibilidade. */
  #home .go{position:absolute;top:20px;right:20px;width:34px;height:34px;border-radius:50%;
    border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
    margin:0;font-size:0;color:var(--mut);transition:background .2s,border-color .2s,color .2s}
  #home .go::after{content:'\2197';font-size:15px;line-height:1}
  /* o card nao levanta mais no hover: o halo e a borda ja dao o retorno, e
     `transform` em dez cards obriga o navegador a recompor a pagina inteira */
  #home a.tcard:hover{transform:none;box-shadow:none}
  #home a.tcard:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

  /* uma cor por ferramenta. Saturacao baixa de proposito: a paleta viva foi
     recusada por brilhante demais, e com dez cards na tela cor forte vira
     mancha. O vermelho e o verde puros ficaram de fora -- sao status. */
  #home .tcard[data-tool="orcamento"] .tic{background:#8b90ad;border-color:#8b90ad}
  #home .tcard[data-tool="orcamento"]{background:radial-gradient(135% 105% at -8% -18%,#8b90ad24,transparent 58%),var(--card)}
  #home a.tcard[data-tool="orcamento"]:hover{border-color:#8b90ad;background:radial-gradient(135% 105% at -8% -18%,#8b90ad3d,transparent 62%),var(--card)}
  #home a.tcard[data-tool="orcamento"]:hover .go{background:#8b90ad;border-color:#8b90ad;color:var(--card2)}
  #home .tcard[data-tool="obras"] .tic{background:#7f98ad;border-color:#7f98ad}
  #home .tcard[data-tool="obras"]{background:radial-gradient(135% 105% at -8% -18%,#7f98ad24,transparent 58%),var(--card)}
  #home a.tcard[data-tool="obras"]:hover{border-color:#7f98ad;background:radial-gradient(135% 105% at -8% -18%,#7f98ad3d,transparent 62%),var(--card)}
  #home a.tcard[data-tool="obras"]:hover .go{background:#7f98ad;border-color:#7f98ad;color:var(--card2)}
  #home .tcard[data-tool="agenda"] .tic{background:#7ba39c;border-color:#7ba39c}
  #home .tcard[data-tool="agenda"]{background:radial-gradient(135% 105% at -8% -18%,#7ba39c24,transparent 58%),var(--card)}
  #home a.tcard[data-tool="agenda"]:hover{border-color:#7ba39c;background:radial-gradient(135% 105% at -8% -18%,#7ba39c3d,transparent 62%),var(--card)}
  #home a.tcard[data-tool="agenda"]:hover .go{background:#7ba39c;border-color:#7ba39c;color:var(--card2)}
  #home .tcard[data-tool="programacao"] .tic{background:#948dab;border-color:#948dab}
  #home .tcard[data-tool="programacao"]{background:radial-gradient(135% 105% at -8% -18%,#948dab24,transparent 58%),var(--card)}
  #home a.tcard[data-tool="programacao"]:hover{border-color:#948dab;background:radial-gradient(135% 105% at -8% -18%,#948dab3d,transparent 62%),var(--card)}
  #home a.tcard[data-tool="programacao"]:hover .go{background:#948dab;border-color:#948dab;color:var(--card2)}
  #home .tcard[data-tool="horas"] .tic{background:#ab9a78;border-color:#ab9a78}
  #home .tcard[data-tool="horas"]{background:radial-gradient(135% 105% at -8% -18%,#ab9a7824,transparent 58%),var(--card)}
  #home a.tcard[data-tool="horas"]:hover{border-color:#ab9a78;background:radial-gradient(135% 105% at -8% -18%,#ab9a783d,transparent 62%),var(--card)}
  #home a.tcard[data-tool="horas"]:hover .go{background:#ab9a78;border-color:#ab9a78;color:var(--card2)}
  #home .tcard[data-tool="financeiro"] .tic{background:#84a189;border-color:#84a189}
  #home .tcard[data-tool="financeiro"]{background:radial-gradient(135% 105% at -8% -18%,#84a18924,transparent 58%),var(--card)}
  #home a.tcard[data-tool="financeiro"]:hover{border-color:#84a189;background:radial-gradient(135% 105% at -8% -18%,#84a1893d,transparent 62%),var(--card)}
  #home a.tcard[data-tool="financeiro"]:hover .go{background:#84a189;border-color:#84a189;color:var(--card2)}
  #home .tcard[data-tool="cadastros"] .tic{background:#a98d95;border-color:#a98d95}
  #home .tcard[data-tool="cadastros"]{background:radial-gradient(135% 105% at -8% -18%,#a98d9524,transparent 58%),var(--card)}
  #home a.tcard[data-tool="cadastros"]:hover{border-color:#a98d95;background:radial-gradient(135% 105% at -8% -18%,#a98d953d,transparent 62%),var(--card)}
  #home a.tcard[data-tool="cadastros"]:hover .go{background:#a98d95;border-color:#a98d95;color:var(--card2)}
  #home .tcard[data-tool="converter"] .tic{background:#7d9ba3;border-color:#7d9ba3}
  #home .tcard[data-tool="converter"]{background:radial-gradient(135% 105% at -8% -18%,#7d9ba324,transparent 58%),var(--card)}
  #home a.tcard[data-tool="converter"]:hover{border-color:#7d9ba3;background:radial-gradient(135% 105% at -8% -18%,#7d9ba33d,transparent 62%),var(--card)}
  #home a.tcard[data-tool="converter"]:hover .go{background:#7d9ba3;border-color:#7d9ba3;color:var(--card2)}
  #home .tcard[data-tool="medicao"] .tic{background:#a8907c;border-color:#a8907c}
  #home .tcard[data-tool="medicao"]{background:radial-gradient(135% 105% at -8% -18%,#a8907c24,transparent 58%),var(--card)}
  #home a.tcard[data-tool="medicao"]:hover{border-color:#a8907c;background:radial-gradient(135% 105% at -8% -18%,#a8907c3d,transparent 62%),var(--card)}
  #home a.tcard[data-tool="medicao"]:hover .go{background:#a8907c;border-color:#a8907c;color:var(--card2)}
  #home .tcard[data-tool="catalogos"] .tic{background:#98a181;border-color:#98a181}
  #home .tcard[data-tool="catalogos"]{background:radial-gradient(135% 105% at -8% -18%,#98a18124,transparent 58%),var(--card)}
  #home a.tcard[data-tool="catalogos"]:hover{border-color:#98a181;background:radial-gradient(135% 105% at -8% -18%,#98a1813d,transparent 62%),var(--card)}
  #home a.tcard[data-tool="catalogos"]:hover .go{background:#98a181;border-color:#98a181;color:var(--card2)}

  /* a mesma cor na barra lateral. O item ativo continua marcado pela barra
     `.sb-item.act::before`; o fundo dele deixou de ser tingido de indigo porque
     com doze itens coloridos duas cores na mesma regiao competiam. */
  .sb-item[data-sbtool="orcamento"],.sb-item[data-sbtool="orcamento"]:hover{color:#8b90ad}
  .sb-item[data-sbtool="obras"],.sb-item[data-sbtool="obras"]:hover{color:#7f98ad}
  .sb-item[data-sbtool="agenda"],.sb-item[data-sbtool="agenda"]:hover{color:#7ba39c}
  .sb-item[data-sbtool="programacao"],.sb-item[data-sbtool="programacao"]:hover{color:#948dab}
  .sb-item[data-sbtool="horas"],.sb-item[data-sbtool="horas"]:hover{color:#ab9a78}
  .sb-item[data-sbtool="financeiro"],.sb-item[data-sbtool="financeiro"]:hover{color:#84a189}
  .sb-item[data-sbtool="cadastros"],.sb-item[data-sbtool="cadastros"]:hover{color:#a98d95}
  .sb-item[data-sbtool="converter"],.sb-item[data-sbtool="converter"]:hover{color:#7d9ba3}
  .sb-item[data-sbtool="medicao"],.sb-item[data-sbtool="medicao"]:hover{color:#a8907c}
  .sb-item[data-sbtool="catalogos"],.sb-item[data-sbtool="catalogos"]:hover{color:#98a181}
  .sb-item[data-sbtool="home"],.sb-item[data-sbtool="home"]:hover{color:#95a0ad}
  #hubGear,#hubGear:hover{color:#8f949c}
  .sb-item.act{background:rgba(255,255,255,.06)}