:root {
 /* Modo escuro — preto neutro moderno. Marca/prioridade/status seguem o MilaLab
    Design System e seus valores exatos são os mesmos nos dois temas (só os
    neutros abaixo mudam entre claro/escuro). */
 --bg: #0A0A0B; --surface: #141416; --surface2: #1C1C1F;
 --border: #2A2A2E; --text: #EDEDEF; --muted: #8B8B94;
 --green: #1F8A4C; --green-dim: rgba(31,138,76,0.20);
 /* Identidade MilaLab (azul). No tema ESCURO o destaque tem que vir do ciano
    #0183FF: o azul-marinho #050866 sobre o fundo quase preto (--bg #0A0A0B,
    --surface #141416) some — como texto/borda/ícone dá ~1.9:1. #050866
    continua sendo a marca em superfícies escuras próprias (sidebar, painel do
    login), via --brand-deep. --navy-hi é o passo de hover/pressionado. */
 --brand-deep: #050866;
 --navy: #0183FF; --navy-dim: rgba(1,131,255,0.13);
 /* --navy-solid = fundo cheio com texto BRANCO em cima. Medido no app: branco
    sobre #0183FF dá só 3.69:1 (abaixo de 4.5 p/ texto de 12-13px, que é o
    tamanho dos botões); #004AE8 dá 6.68:1. Por isso o ciano fica para
    texto/borda/ícone sobre fundo escuro e o azul de ação para o preenchimento. */
 --navy-solid: #004AE8; --navy-hi: #0183FF;
 --yellow: #B8790A; --yellow-dim: rgba(184,121,10,0.20);
 --red: #D6433C; --red-dim: rgba(214,67,60,0.20);
 --blue: #2E5FD9; --blue-dim: rgba(46,95,217,0.20);
 --purple: #8B6FE8; --purple-dim: rgba(139,111,232,0.20);
 --orange: #C2661C; --orange-dim: rgba(194,102,28,0.20); --sidebar-w: 224px;
 /* Rosa — cor de badge nova (nenhuma das 7 existentes cobria "rosa"), pedida
    especificamente pro Transporte "Mila" (ver .bk / badge-colors.js). */
 --pink: #E0479E; --pink-dim: rgba(224,71,158,0.20);
 }
 body.light {
 /* Modo claro — mesmos tons de marca/status do tema escuro (MilaLab Design System);
    apenas os neutros abaixo (fundo, texto, bordas) mudam. */
 --bg: #F6F7F8; --surface: #FFFFFF; --surface2: #EEF1F7;
 --border: #CDD3DF; --text: #0D1033; --muted: #5A6380;
 --green: #1F8A4C; --green-dim: #E6F5EB;
 /* Tema claro: aqui quem carrega a marca é o azul-marinho #050866 (17:1 sobre
    branco) — botões primários, abas/itens ativos, títulos de seção, foco.
    #004AE8 (--navy-hi, 6.7:1 sobre branco) é o passo de interação/hover: o
    hover antigo escurecia o botão (filter:brightness) e sobre #050866 isso
    virava quase preto; agora clareia para o azul de ação. */
 --brand-deep: #050866;
 --navy: #050866; --navy-dim: #E3EBFF; --navy-solid: #050866; --navy-hi: #004AE8;
 --yellow: #B8790A; --yellow-dim: #FDF0DA;
 --red: #D6433C; --red-dim: #FCEAE8;
 --blue: #2E5FD9; --blue-dim: #E9EEFC;
 --purple: #8B6FE8; --purple-dim: rgba(139,111,232,.12);
 --pink: #C22E85; --pink-dim: rgba(194,46,133,.12);
 }
 body.light tr:hover td{background:rgba(0,0,0,0.03)}
 *{box-sizing:border-box;margin:0;padding:0}

/* ── Vidro (frosted) — cards/painéis do "Meu Painel" e do Kanban de Obras,
   MilaLab Design System, passo 4. Ajuste v4 (acessibilidade): as versões
   anteriores prendiam o contraste do texto branco/claro à intensidade do
   gradiente bem atrás do vidro — como a topbar fica exatamente sob o blob
   mais forte (12%,0%), o texto ali podia ficar com contraste ruim, e em
   outras abas o mesmo podia acontecer dependendo de onde o card caía por
   cima do degradê. Correção: toda superfície de vidro agora tem uma
   "cortina" quase opaca (âmbar escuro no tema escuro, quase branco no
   claro) por baixo do reflexo translúcido — o vidro continua visível
   (ainda borra e ainda tem um brilho claro por cima), mas o CONTRASTE do
   texto deixa de depender de qual pedaço do degradê está atrás. O
   gradiente do body também ficou mais discreto (opacidade menor dos
   blobs) para um visual mais calmo e consistente em qualquer tela. ── */
.page-bg{
  background:
    radial-gradient(circle at 15% 0%, rgba(0,74,232,.12) 0%, transparent 45%),
    radial-gradient(circle at 90% 100%, rgba(63,191,180,.1) 0%, transparent 45%),
    var(--bg);
}
/* Vidro fosco (backdrop-filter:blur) removido de todo o sistema — pesava
   demais (recomposição contínua em elementos sempre visíveis/sticky/fixed
   como sidebar e topbar), deixando o app perceptivelmente lento. Volta pro
   fundo sólido que já existia como fallback pra navegadores sem suporte. */
.frosted-card{
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.10);
}
body.light .frosted-card{
  background: var(--surface);
  border-color: rgba(255,255,255,.65);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.8);
}
/* Painéis do "Meu Painel" (Minhas Atividades, Meus Projetos, gráficos, Saúde
   das Atividades, Central de Comunicação). */
.dash-panel{
  background: var(--surface);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.10);
}
body.light .dash-panel{
  background: var(--surface);
  border-color: rgba(255,255,255,.65);
  box-shadow: var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.8);
}
 /* Fundo sólido (era um gradiente radial de 3 "blobs" cobrindo a tela
    inteira) — pedido explícito: qualquer área com scroll horizontal por
    cima do gradiente (ex.: Kanban de Obras) ficava com um "corte" visível
    conforme a barra deslocava, porque o gradiente é fixo ao body enquanto o
    conteúdo por cima se movia — sem fluidez nenhuma. Decisão: funcional
    antes de bonito, tira o degradê do sistema inteiro em vez de tentar
    consertar caso a caso. --bg continua o preto neutro (decisão da
    usuária); só o efeito decorativo em cima saiu. */
 body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh;font-size:14px}
 body.light{background:var(--bg)}
 h1,h2,h3,h4,.modal-title,.kpi-val,.gestor-hd-title{font-family:'Inter',sans-serif;font-weight:700;letter-spacing:-.2px}
 /* SIDEBAR — MilaLab Design System: painel permanentemente escuro (indigo-900),
    igual nos dois temas do app (claro/escuro só trocam o conteúdo principal,
    a marca na lateral não muda). */
 /* Fundo sólido indigo-900 (era vidro fosco com blur — removido do sistema
    inteiro por custo de performance: uma superfície fixed em tela cheia com
    backdrop-filter recomposita a cada scroll/hover em qualquer lugar da
    página, e era perceptivelmente lento). contain:paint continua útil
    mesmo sem blur (trava o repaint no que está dentro da sidebar). */
 .sidebar{width:var(--sidebar-w);background:var(--brand-deep);border-right:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;position:fixed;top:0;left:0;height:100vh;z-index:10;overflow-y:auto;transition:width .22s cubic-bezier(.4,0,.2,1);box-shadow:inset -1px 0 0 rgba(255,255,255,.04);contain:paint}
 .sidebar.collapsed{width:0!important;border-right:none;overflow:hidden}
 /* Handle fora do sidebar para não ser bloqueado pelo scrollbar */
 .sidebar-resize{position:fixed;top:0;left:var(--sidebar-w);width:8px;height:100vh;cursor:col-resize;z-index:20;transform:translateX(-4px);background:transparent;transition:background .12s}
 .sidebar-resize:hover,.sidebar-resize.dragging{background:var(--navy);opacity:.25}
 .sidebar-toggle{width:30px;height:30px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;color:var(--muted)}
 .sidebar-toggle:hover{border-color:var(--navy);color:var(--navy);background:var(--blue-dim)}
 .sb-logo{padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
 .sb-nav{flex:1;padding:6px 8px}
 .nav-sec{padding:16px 8px 6px;font-size:10px;color:rgba(198,201,224,.5);text-transform:uppercase;letter-spacing:.8px;font-weight:700}
 .nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;color:rgba(246,247,248,.62);cursor:pointer;transition:all .15s;font-size:13px;border-radius:var(--r-md);user-select:none;position:relative}
 .nav-item:hover{color:#fff;background:rgba(255,255,255,.06)}
 .nav-item.active{color:#fff;background:rgba(255,255,255,.07);font-weight:500}
 .nav-item.active::before{content:'';position:absolute;left:-8px;top:2px;bottom:2px;width:2px;background:var(--silver-line)}
 .nav-badge{margin-left:auto;background:rgba(255,255,255,.08);color:rgba(246,247,248,.7);font-size:10px;padding:1px 6px;border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.08)}
 .nav-item.active .nav-badge{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}
 .sb-user{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:8px;color:#fff}
 .sb-user #sb-name{color:#F6F7F8!important}
 .sb-user #sb-cargo{color:rgba(198,201,224,.6)!important}
 .sb-user-chevron{color:rgba(198,201,224,.6)}
 .avatar{width:30px;height:30px;background:var(--silver-grad);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--silver-ink);overflow:hidden;position:relative;flex-shrink:0}
 .avatar img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;border-radius:50%}
 /* MAIN */
 /* min-width:0 — pedido explícito: o Kanban de Obras (.kanban-obras, já
    tem overflow-x:auto próprio) tinha colunas de sobra largas o bastante
    pra estourar a viewport; sem isso aqui, um item flex (.main, dentro do
    body flex) não encolhe abaixo do tamanho intrínseco do conteúdo
    (min-width:auto é o padrão de flex item) — o overflow escapava pra
    fora de .main e virava scroll HORIZONTAL DA PÁGINA inteira, arrastando
    topbar/toolbar/seletor Kanban-Tabela junto.
    NÃO usar overflow-x:hidden aqui (tentativa anterior, revertida) — bug
    real encontrado: por spec, se overflow-x deixa de ser "visible",
    overflow-y COMPUTA PRA "auto" sozinho, mesmo sem ser declarado. Isso
    transformava .main num contêiner de scroll VERTICAL próprio, quebrando
    o position:sticky da .topbar em qualquer página com rolagem vertical
    (ex.: Obras em Tabela) — a topbar parava de acompanhar o scroll.
    min-width:0 sozinho resolve as duas coisas: deixa o item flex encolher
    (Kanban passa a rolar só dentro de si mesmo) sem tocar em overflow-y,
    então o scroll vertical da página continua exatamente como era antes. */
 .main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;min-width:0;transition:margin-left .22s cubic-bezier(.4,0,.2,1);background:transparent}
 /* Páginas .page-flex (ex: Gestor de Tarefas) precisam de um teto de altura real
    pra que só a grade role e a toolbar fique fixa (item 8 do pedido). Sem isso,
    .main só tem min-height:100vh — cresce com o conteúdo, o documento inteiro
    passa a rolar e a toolbar sai da tela junto. :has() trava .main em 100vh só
    quando existe uma .page-flex ativa, sem afetar as páginas de rolagem normal. */
 .main:has(.page-flex.active){height:100vh;overflow:hidden}
 .main.sidebar-collapsed{margin-left:0}
 /* #page-dashboard ("Meu Painel") tem max-width:1600px inline pra não deixar as
    linhas de KPI/gráficos absurdamente esticadas em monitores ultrawide — mas
    sem centralizar isso sobrava uma faixa vazia enorme só do lado direito.
    Centraliza para o vão ficar simétrico dos dois lados. */
 #page-dashboard.page.active{width:100%;margin-left:auto;margin-right:auto}
 /* Topbar fica exatamente sob o blob mais forte do gradiente (12%,0%) — sem
    cortina própria, o contraste do texto/ícones ali variava com a força do
    degradê atrás. Cortina quase opaca resolve isso de vez. */
 .topbar{height:52px;background:var(--surface);border-bottom:1px solid rgba(255,255,255,.16);display:flex;align-items:center;padding:0 16px 0 20px;gap:10px;position:sticky;top:0;z-index:5;contain:paint}
 body.light .topbar{background:var(--surface);border-bottom-color:rgba(255,255,255,.65)}
 .breadcrumb{font-size:12px;color:var(--muted)} .bc-link{color:var(--muted);cursor:pointer;text-decoration:none;border-bottom:1px dashed var(--border)} .bc-link:hover{color:var(--text);border-bottom-color:var(--text)}
 .breadcrumb span{color:var(--text);font-weight:500}
 .topbar-right{margin-left:auto;display:flex;gap:8px}
 .page{display:none!important;padding:24px;flex:1}.page.active{display:block!important}.page.active.page-flex{display:flex!important}
 /* Idem: sem pintura própria aqui — deixa o gradiente único do body aparecer. */
 .page.active{background:transparent}
 /* BUTTONS */
 .btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:500;cursor:pointer;border:none;transition:all var(--dur-fast,.15s) var(--ease-standard,ease);font-family:inherit;white-space:nowrap}
 /* Microinteração de clique — "o sistema respondeu ao meu comando": leve
    redução de escala no pressionar, volta ao normal ao soltar (a própria
    .btn já anima "all", então o retorno já é suave). :focus-visible só
    aparece pra quem navega por teclado (não decora clique de mouse), e
    :disabled trava a escala pra um botão "carregando" não parecer clicável. */
 .btn:active{transform:scale(.97)}
 .btn:focus-visible{outline:2px solid var(--navy-hi);outline-offset:2px}
 .btn:disabled{opacity:.6;cursor:not-allowed;transform:none}
 .btn-primary{background:var(--navy-solid);color:#fff}.btn-primary:hover{background:var(--navy-hi)}
 .btn-secondary{background:var(--surface2);color:var(--text);border:1px solid var(--border)}.btn-secondary:hover{border-color:var(--navy);color:var(--navy)}
 .pp-pwd-btn{display:flex;align-items:center;justify-content:center;background:var(--surface2);color:var(--text);border:1px solid var(--border);transition:all .15s}
 .pp-pwd-btn svg{flex-shrink:0}
 .pp-pwd-btn:hover{border-color:var(--navy);color:var(--navy);background:var(--navy-dim)}
 .btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}.btn-ghost:hover{color:var(--text);border-color:var(--text)}
 .btn-sm{padding:5px 10px;font-size:12px}
 /* BADGES */
 .badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-xs);font-size:11px;font-weight:500;white-space:nowrap}
 .bg{background:var(--green-dim);color:var(--green)}
 .bn{background:var(--navy-dim);color:var(--navy)}
 .by{background:var(--yellow-dim);color:var(--yellow)}
 .br{background:var(--red-dim);color:var(--red)}
 .bb{background:var(--blue-dim);color:var(--blue)}
 .bp{background:rgba(137,87,229,.12);color:var(--purple)}
 .bm{background:rgba(139,148,158,.12);color:var(--muted)}
 .bo{background:var(--orange-dim);color:var(--orange)}
 .bk{background:var(--pink-dim);color:var(--pink)}
 /* KPI */
 .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
 .kpi-card{background:var(--surface);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);padding:16px 20px;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
 body.light .kpi-card{background:var(--surface);border-color:rgba(255,255,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
 .kpi-label{font-size:11px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;display:flex;align-items:center;gap:6px}
 .dot{width:6px;height:6px;border-radius:50%;display:inline-block}
 .kpi-val{font-size:28px;font-weight:700}.kpi-sub{font-size:11px;color:var(--muted);margin-top:4px}
 /* TABLES */
 .tbl-box{background:var(--surface);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);overflow-x:auto;overflow-y:visible;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
 body.light .tbl-box{background:var(--surface);border-color:rgba(255,255,255,.65);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
 /* Obras: barra de controles fixa (Filtro/Agrupar/Ordenar/Período/
    Visualizações/Pesquisa) — padrão de referência pra replicar nas próximas
    abas. position:sticky sozinho só resolve o eixo vertical: se QUALQUER
    conteúdo da página ganhar largura maior que a viewport, o documento
    inteiro passa a rolar no eixo X e a barra sticky (sem left/right)
    acompanha esse scroll horizontal — é exatamente o bug relatado ("só
    aparece se arrastar a barra de rolagem horizontal"). #page-obras trava
    overflow-x:hidden como rede de segurança: a tabela e o kanban já contêm
    sua própria rolagem horizontal internamente (.tbl-box/.kanban-obras),
    então nada de conteúdo largo deveria ultrapassar a borda da página. */
 #page-obras{overflow-x:hidden}
 /* Projetos reaproveita o mesmo padrão de barra fixa de Obras (ver
    .obras-toolbar-fixed) — mesma rede de segurança de overflow-x e o mesmo
    empurrão do título pra baixo da barra. */
 #page-projetos{overflow-x:hidden}
 #page-projetos .ph{margin-top:44px}
 /* Entregas reaproveita o mesmo padrão de barra fixa de Obras/Projetos —
    ver comentário completo em .obras-toolbar-fixed acima. 90px (não 44px
    como Obras/Projetos) porque a barra de Entregas tem DUAS linhas
    (.tb-2row/.tb-row1/.tb-row2 — filtros + atalhos de filtro rápido, ver
    index.html) — medido: 46px a linha 1 + 43px a linha 2 + 1px da borda
    entre elas. */
 #page-entregas{overflow-x:hidden}
 #page-entregas .ph{margin-top:90px}
 /* Instalações reaproveita o mesmo padrão de barra fixa de Obras — antes
    usava um .gestor-hd-controls com position:sticky improvisado, que
    colidia em z-index com o <thead> sticky da tabela (bug relatado: popover
    de Filtro com o cabeçalho da tabela aparecendo por cima). Barra de 1
    linha só, mesmo margin-top de Obras/Projetos. */
 #page-instalacoes{overflow-x:hidden}
 #page-instalacoes .ph{margin-top:44px}
 /* Automações — mesmo padrão de barra fixa, mesmo motivo (ver Instalações
    acima). Barra de 1 linha só (chips + busca, sem cluster de ações). */
 #page-automacoes{overflow-x:hidden}
 #page-automacoes .ph{margin-top:44px}
 /* Melhorias — mesmo padrão de barra fixa, mesmo motivo. */
 #page-melhorias{overflow-x:hidden}
 #page-melhorias .ph{margin-top:44px}
 /* Fornecedores reaproveita o mesmo padrão de barra fixa — antes era a
    única aba junto de Empresas/Contatos ainda usando o
    .gestor-hd-controls com position:sticky, mesmo motivo de Instalações
    (ver comentário acima). #forn-header (título) empurrado pra baixo da
    barra — não usa .ph (título é .nt-title/.nt-desc, não <h1>/<p>), por
    isso a regra própria em vez de reaproveitar #page-X .ph. */
 #page-fornecedores{overflow-x:hidden}
 #forn-header{margin-top:44px}
 /* Empresas/Contatos (mesma página, 2 abas) — mesmo motivo. O respiro
    precisa começar no PRÓPRIO título "Empresas & Contatos" (#emp-header),
    não só na barra de sub-abas abaixo dele — sem isso o título ficava
    parcialmente embaixo da barra fixa (Filtro/Agrupar/Ordenar), cortado
    ao meio (bug real reportado com print). Empurrar #emp-header também
    empurra tudo que vem depois no fluxo normal (sub-abas incluídas),
    então não precisa mais de uma regra separada pra elas. */
 #page-empresas{overflow-x:hidden}
 #emp-header{margin-top:44px}
 /* Barra fixa única de Obras (Filtro/Agrupar/Ordenar/Período/Visualizações/
    Pesquisa + Kanban/Tabela/Nova Obra, na mesma linha) — position:fixed em
    vez de sticky de propósito: sticky só resolve o eixo vertical, então se
    algum ancestral ganhasse scroll horizontal a barra acompanhava e
    "desaparecia" da vista (bug relatado). position:fixed ancora direto na
    viewport, imune a QUALQUER scroll (vertical da página OU horizontal da
    tabela/kanban) por definição. top:63px fica logo abaixo do .topbar
    (52px); left/right replicam o padding de .page (24px), que um elemento
    fixed deixa de herdar do ancestral. Sem background: cada botão já tem o
    próprio fundo — um fundo no container inteiro virava uma faixa sólida
    cobrindo até os espaços vazios entre grupos de botões (também já
    reportado). Some/aparece de graça, sem JS: é descendente de #page-obras,
    que já vira display:none inteiro (com tudo dentro) ao navegar pra outra
    tela. IMPORTANTE: a barra ocupa o MESMO x que o título "Obras" (mesmo
    left:24px de .page) — sem empurrar o título pra baixo dela primeiro,
    a barra desenha por CIMA do título (bug relatado: "sobrepôs outro
    item"). #page-obras .ph abaixo resolve isso.
    Fundo: sem NENHUM background, o conteúdo da tabela/kanban rola por
    BAIXO da barra fixa e se mistura visualmente com os botões (texto de
    linha da tabela atravessando o Filtro/Agrupar/Ordenar — reportado).
    Um fundo sólido (var(--surface)) virava a "faixa preta" já rejeitada
    antes. Solução: mesmo vidro fosco (blur) que a .topbar já usa — cobre o
    conteúdo que passa por baixo sem ser uma chapa opaca.
    top:52px (não 63px): colada direto na .topbar (que termina em 52px),
    sem gap nenhum entre as duas — um intervalo ali mostrava o fundo da
    página (cor diferente) entre a topbar e esta barra, parecendo duas
    faixas separadas em vez de uma peça só (reportado). */
 .obras-toolbar-fixed{position:fixed;top:52px;left:var(--sidebar-w);right:0;z-index:14;display:flex;align-items:center;gap:12px;padding:8px 24px;border-bottom:1px solid rgba(255,255,255,.16);background:var(--surface)}
 body.light .obras-toolbar-fixed{background:var(--surface);border-bottom-color:rgba(255,255,255,.65)}
 .obras-toolbar-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:1;min-width:0}
 .obras-fixed-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
 /* Variante de 2 linhas dentro da MESMA barra fixa — pedido explícito pra
    Entregas: os atalhos de filtro rápido (A realizar/A programar/...)
    subiram do meio do conteúdo (rolava com a página) pro cabeçalho fixo,
    como uma segunda linha da mesma barra de Filtro/Agrupar/Ordenar em vez
    de um <div> solto embaixo do título. flex-direction:column por cima do
    .obras-toolbar-fixed original (que é row) — cada linha vira sua própria
    div interna com o padding horizontal que a barra tinha antes. */
 .obras-toolbar-fixed.tb-2row{flex-direction:column;align-items:stretch;gap:0;padding:0}
 .tb-row1{display:flex;align-items:center;gap:12px;padding:8px 24px}
 .tb-row2{display:flex;align-items:center;gap:6px;padding:8px 24px;flex-wrap:wrap;border-top:1px solid var(--border)}
 /* Título "Obras" + subtítulo descem pra abaixo da barra fixa (44px =
    altura da barra + respiro, recalculado pro novo top:52px acima) — sem
    isso eles renderizam ATRÁS/sob a barra, já que ambos começam no mesmo
    canto superior esquerdo do conteúdo. */
 #page-obras .ph{margin-top:44px}
 .tbl-head{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
 .tbl-title{font-size:14px;font-weight:600;font-family:'DM Sans',sans-serif;letter-spacing:-.1px}.tbl-acts{margin-left:auto;display:flex;gap:8px}
 table{width:100%;border-collapse:collapse}
 th{padding:10px 16px;text-align:left;font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;background:var(--surface2);border-bottom:2px solid transparent;border-image:var(--silver-line) 1}
 td{padding:11px 16px;font-size:13px;border-bottom:1px solid var(--border);vertical-align:middle}
 tr:last-child td{border-bottom:none}
 tr:hover td{background:rgba(22,26,51,.65)}
 /* FILTERS */
 .filter-bar{display:flex;gap:8px;margin-bottom:16px;align-items:center;flex-wrap:wrap}
 .chip{padding:5px 12px;border-radius:var(--r-full);font-size:12px;cursor:pointer;border:1px solid var(--border);color:var(--muted);background:transparent;transition:all var(--dur-fast,.15s) var(--ease-standard,ease);user-select:none}
 .chip.active{background:var(--green-dim);color:var(--green);border-color:var(--green)}
 .chip:hover:not(.active){border-color:var(--text);color:var(--text)}
 .chip:active{transform:scale(.96)}
 .search{position:relative}.search input{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:7px 12px 7px 30px;font-size:13px;color:var(--text);font-family:inherit;outline:none;width:240px}
 .search input:focus{border-color:var(--green)}.search::before{content:'⌕';position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:11px;pointer-events:none}
 /* FORMS */
 .form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:16px}
 .fg{display:flex;flex-direction:column;gap:5px}
 .fg.s2{grid-column:span 2}.fg.s3{grid-column:span 3}
 .fn-erro-msg{font-size:11px;color:var(--red);margin-top:2px;min-height:0}
 .fn-erro-msg:empty{display:none}
 label{font-size:11px;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.4px}
 input,select,textarea{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 12px;font-size:13px;color:var(--text);font-family:inherit;outline:none;transition:border-color .15s}
 input:focus,select:focus{border-color:var(--green)}select{cursor:pointer}
 /* TABS */
 .tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:20px}
 .tab{padding:10px 16px;font-size:13px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all var(--dur-base,.15s) var(--ease-standard,ease);user-select:none}
 .tab.active{color:var(--green);border-bottom-color:var(--green);font-weight:500}
 .tab:hover:not(.active){color:var(--text)}
 /* PIPELINE */
 .pipeline{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}
 /* ALERTS */
 .alert{padding:10px 14px;border-radius:var(--r-md);font-size:12px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
 .alert-g{background:var(--green-dim);border:1px solid rgba(40,181,72,.2);color:var(--green)}
 /* PAGE HEADER */
 .ph{margin-bottom:22px}.ph h1{font-size:22px;font-weight:700;margin-bottom:3px}.ph p{font-size:13px;color:var(--muted)}
 .peso{color:var(--green);font-weight:500}
 /* print */
 @media print{
 .sidebar,.topbar,.sfooter,.modal-backdrop,.profile-overlay,.profile-panel,.btn{display:none!important}
 .main{margin-left:0!important}
 .page{display:block!important;padding:0!important}
 body{background:#fff!important;color:#000!important}
 }
 .tot label{font-size:10px;color:var(--muted);display:block;text-transform:uppercase;letter-spacing:.4px}
 .tot span{font-size:14px;font-weight:600}
 ::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
 /* VIEW TOGGLE */
 .view-toggle{display:inline-flex;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);overflow:hidden}
 .vt-btn{padding:5px 10px;font-size:12px;font-weight:500;color:var(--muted);background:transparent;border:none;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s;font-family:inherit}
 .vt-btn.active{background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 1px var(--border)}
 .vt-btn:hover:not(.active){color:var(--text)}
 /* KANBAN OBRAS — mesma linguagem visual da aba Empresas: fundo limpo,
    bordas discretas (var(--border), 1px), sombras suaves (--shadow-1/2),
    sem gradientes/blur/glass e sem linhas fortes entre elementos. */
 .kanban-obras{display:flex;gap:16px;overflow-x:auto;padding-bottom:14px;align-items:flex-start}
 .kanban-col{min-width:232px;max-width:232px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 10px;flex-shrink:0;display:flex;flex-direction:column}
 .kc-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:0 2px 10px;border-bottom:1px solid var(--border)}
 .kc-body{overflow-y:auto;max-height:calc(100vh - 320px);margin:0 -2px;padding:0 2px;border-radius:var(--r-sm);transition:background .12s,outline .12s}
 .kc-body.kc-dragover{background:var(--surface);outline:2px dashed var(--green);outline-offset:-2px}
 .oc-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
 .kc-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
 .kc-count{font-size:10px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1px 7px}
 .kc-dot{width:7px;height:7px;border-radius:50%;margin-right:5px;display:inline-block;flex-shrink:0}
 .obra-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow-1);cursor:pointer;transition:box-shadow var(--dur-base,.15s) var(--ease-standard,ease),border-color var(--dur-base,.15s) var(--ease-standard,ease),transform var(--dur-fast,.12s) var(--ease-standard,ease);position:relative}
 .obra-card:active{transform:scale(.99)}
 .obra-card:hover{border-color:var(--green);box-shadow:var(--shadow-2)}
 .obra-card:last-child{margin-bottom:0}
 .obra-card.dragging{opacity:.4}
 .oc-title{font-size:13px;font-weight:600;line-height:1.4;color:var(--text)}
 .oc-date{font-size:11px;color:var(--muted);margin-top:8px}
 /* PERFIL PANEL */
 .profile-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50}
 .profile-overlay.open{display:block}
 .profile-panel{position:fixed;bottom:0;left:0;width:var(--sidebar-w);background:var(--surface);border:1px solid var(--border);border-radius:12px 12px 0 0;z-index:51;padding:0;transform:translateY(100%);transition:transform .25s cubic-bezier(.4,0,.2,1);box-shadow:0 -8px 32px rgba(0,0,0,.3)}
 .profile-panel.open{transform:translateY(0)}
 .pp-header{padding:16px 18px 12px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
 .pp-title{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
 .pp-close{background:none;border:none;color:var(--muted);font-size:18px;cursor:pointer;padding:0;line-height:1;transition:color .15s}
 .pp-close:hover{color:var(--text)}
 .pp-body{padding:20px 18px 18px}
 /* avatar upload */
 .avatar-upload{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:22px}
 .avatar-lg-wrap{position:relative;width:88px;height:88px}
 .avatar-lg{width:88px;height:88px;border-radius:50%;background:var(--navy-dim);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--border);display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;color:var(--navy);overflow:hidden;cursor:pointer;position:relative;transition:box-shadow .15s}
 .avatar-lg:hover{box-shadow:0 0 0 1px var(--navy)}
 .avatar-lg img{width:100%;height:100%;object-fit:cover;display:none}
 .avatar-edit-badge{position:absolute;right:-2px;bottom:-2px;width:28px;height:28px;border-radius:50%;background:var(--navy-solid);border:3px solid var(--surface);display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;transition:background .15s;pointer-events:none}
 .avatar-lg-wrap:hover .avatar-edit-badge{background:#28B548}
 .avatar-file{display:none}
 .avatar-name{font-size:14px;font-weight:700;color:var(--text);margin-top:6px;text-align:center}
 .avatar-cargo{font-size:11px;color:var(--muted);text-align:center}
 .avatar-adjust-link{background:none;border:none;padding:0;margin-top:4px;font-size:11px;color:var(--muted);cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:4px;transition:color .15s}
 .avatar-adjust-link:hover{color:var(--navy)}
 /* modal de enquadramento da foto de perfil */
 .acrop-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:200;align-items:center;justify-content:center}
 .acrop-backdrop.open{display:flex}
 .acrop-box{background:var(--surface);border-radius:var(--r-xl);padding:20px;width:320px;box-shadow:0 12px 40px rgba(0,0,0,.35)}
 .acrop-box h3{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}
 .acrop-box p{font-size:11px;color:var(--muted);margin-bottom:14px}
 .acrop-stage{width:260px;height:260px;margin:0 auto;border-radius:50%;overflow:hidden;position:relative;background:#000;cursor:grab;box-shadow:0 0 0 3px var(--surface),0 0 0 4px var(--border)}
 .acrop-stage.dragging{cursor:grabbing}
 .acrop-stage img{position:absolute;top:50%;left:50%;transform-origin:center center;user-select:none;-webkit-user-drag:none;pointer-events:none}
 .acrop-zoom-row{display:flex;align-items:center;gap:8px;margin-top:16px}
 .acrop-zoom-row svg{flex-shrink:0;color:var(--muted)}
 .acrop-zoom-row input[type=range]{flex:1;accent-color:var(--navy)}
 .acrop-actions{display:flex;gap:8px;margin-top:16px}
 .acrop-actions .btn{flex:1;justify-content:center}
 /* campos de perfil */
 .pp-field{margin-bottom:14px}
 .pp-field label{display:block;font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
 .pp-field input,.pp-field select{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 11px;font-size:13px;color:var(--text);font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
 .pp-field input:focus,.pp-field select:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-dim)}
 .pp-divider{border-top:1px solid var(--border);margin:16px 0}
 /* toggle tema */
 .theme-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:4px 0 16px}
 .theme-toggle-label{font-size:12px;color:var(--text);font-weight:500}
 .theme-toggle-label small{display:block;font-size:10px;color:var(--muted);font-weight:400;margin-top:1px}
 .toggle-switch{position:relative;width:36px;height:20px;flex-shrink:0}
 .toggle-switch input{opacity:0;width:0;height:0}
 .toggle-track{position:absolute;inset:0;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-lg);cursor:pointer;transition:background var(--dur-base,.2s) var(--ease-standard,ease),border-color var(--dur-base,.2s) var(--ease-standard,ease)}
 .toggle-track::before{content:'';position:absolute;left:3px;top:50%;transform:translateY(-50%);width:12px;height:12px;background:var(--muted);border-radius:50%;transition:left var(--dur-base,.2s) var(--ease-standard,ease),background var(--dur-base,.2s) var(--ease-standard,ease),transform var(--dur-fast,.12s) var(--ease-standard,ease)}
 .toggle-switch input:checked + .toggle-track{background:var(--navy-dim);border-color:var(--navy)}
 .toggle-switch input:checked + .toggle-track::before{left:19px;background:var(--navy)}
 /* Bolinha "aperta" enquanto o botão do mouse/dedo está pressionado — mesma
    ideia do :active dos botões, aplicada ao switch. */
 .toggle-switch input:active + .toggle-track::before{transform:translateY(-50%) scale(.85)}
 .pp-save{width:100%;margin-top:14px}
 .pp-actions-row{display:flex;gap:8px;margin-top:8px}
 .pp-actions-row .btn{flex:1}
 .pp-logout-link{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;background:none;border:none;color:var(--muted);font-size:12px;font-weight:500;cursor:pointer;padding:10px 0 0;font-family:inherit;transition:color .15s}
 .pp-logout-link:hover{color:var(--red)}
 /* sb-user clicável */
 .sb-user{cursor:pointer;transition:background .15s;border-radius:0 0 0 0}
 .sb-user:hover{background:var(--surface2)}
 /* A regra de cor da sidebar (linha ~132) vinha antes desta e era anulada:
    var(--muted) no tema claro e #5A6380 sobre o azul-marinho da sidebar dava
    2.86:1. Mantido o mesmo tom claro usado no resto do rodape da sidebar. */
 .sb-user-chevron{margin-left:auto;font-size:10px;color:rgba(198,201,224,.6)}
 /* MODAL */
 .modal-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:60;align-items:flex-start;justify-content:center;padding-top:48px;overflow-y:auto}
 .modal-backdrop.open{display:flex}
 .modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);width:100%;max-width:640px;box-shadow:var(--shadow-4);animation:modalIn var(--dur-base,.2s) var(--ease-out,ease);margin-bottom:48px}
 @keyframes modalIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}
 @keyframes spin{to{transform:rotate(360deg)}}
 /* Sino de alertas — pedido explícito: "algo que realmente alertasse"
    quando chega notificação nova (menção/colaboração/alerta comportamental).
    2 efeitos combinados: o sino "toca" (balanço, alguns ciclos, some
    sozinho) só no MOMENTO em que o total de alertas sobe — não fica
    balançando pra sempre, senão vira ruído; e o badge vermelho pulsa
    (glow crescendo/sumindo) enquanto houver QUALQUER alerta não visto, pra
    continuar chamando atenção mesmo se a pessoa não notar o balanço na
    hora. Nenhum dos dois toca quando o total só DIMINUI (marcar como
    visto/dispensar). */
 @keyframes sinoBalanco{
  0%,100%{transform:rotate(0)}
  15%{transform:rotate(-16deg)}
  30%{transform:rotate(13deg)}
  45%{transform:rotate(-9deg)}
  60%{transform:rotate(6deg)}
  75%{transform:rotate(-3deg)}
  90%{transform:rotate(1deg)}
 }
 #alert-bell-btn.sino-tocando{animation:sinoBalanco .7s ease-in-out 2;transform-origin:50% 20%}
 @keyframes badgePulso{
  0%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}
  70%{box-shadow:0 0 0 6px rgba(239,68,68,0)}
  100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
 }
 #alert-bell-badge.badge-ativo{animation:badgePulso 1.8s ease-out infinite}
 .modal-header{padding:22px 24px 0;display:flex;align-items:flex-start;justify-content:space-between}
 .modal-title{font-size:18px;font-weight:700;letter-spacing:-.3px}
 .modal-subtitle{font-size:12px;color:var(--muted);margin-top:3px}
 .modal-close{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;padding:2px;line-height:1;transition:color .15s;flex-shrink:0}
 .modal-close:hover{color:var(--text)}
 .modal-body{padding:0 24px}
 .modal-grid{display:grid;gap:14px}
 .modal-grid.col2{grid-template-columns:1fr 1fr}
 .modal-grid.col3{grid-template-columns:1fr 1fr 1fr}
 .mf{display:flex;flex-direction:column;gap:5px}
 .mf.span2{grid-column:span 2}
 .mf label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;display:flex;align-items:center;gap:3px}
 .mf label .req{color:var(--red);font-size:13px;line-height:1}
 /* Achado no levantamento de campos obrigatórios: a regra acima só valia
    dentro de ".mf label" — o mesmo `<span class="req">*</span>` usado dentro
    de ".sp-label" (formulários de Nova Instalação/Nova Projeto nos painéis
    de detalhamento) herdava a cor cinza-muted do rótulo em vez de vermelho,
    então o asterisco de "obrigatório" ficava visualmente indistinguível.
    Regra base sem escopo garante vermelho em qualquer contexto. */
 .req{color:var(--red)}
 /* :not([type=checkbox]):not([type=radio]) — sem essa exclusão, width:100%
    vazava pra dentro de QUALQUER checkbox/radio aninhado num .mf (ex.: os
    checkboxes do multiselect de Produto/Responsável/Tipologia no wizard de
    Nova Obra, que ficam dentro de um .mf ancestral), esticando a caixinha
    do checkbox pra ocupar a linha inteira e empurrando o texto do item pra
    a borda direita — reportado como "mal formatado". */
 .mf input:not([type="checkbox"]):not([type="radio"]),.mf select,.mf textarea{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:9px 12px;font-size:13px;color:var(--text);font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s;width:100%}
 .mf input:focus,.mf select:focus,.mf textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-dim)}
 .mf select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%238B949E' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px}
 .mf textarea{resize:vertical;min-height:72px;line-height:1.5}
 .mf input[type="file"]{display:none}
 .tipo-grid{display:flex;gap:8px;flex-wrap:wrap}
 .modal-footer{padding:18px 24px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;margin-top:20px}
 .modal-actions{display:flex;gap:8px}
 /* MEU PAINEL — PRODUTIVIDADE PESSOAL */
 .dash-greeting{font-size:22px;font-weight:700;letter-spacing:-.4px;margin-bottom:3px}
 .pb-label{font-size:12px;font-weight:600;white-space:nowrap;color:var(--text)}
 .pb-fill{height:100%;border-radius:var(--r-xs);background:linear-gradient(90deg,var(--green),#5BE07A);transition:width .6s ease}
 .pb-pct{font-size:13px;font-weight:700;color:var(--green);white-space:nowrap;min-width:36px;text-align:right}
 .pb-count{font-size:11px;color:var(--muted);white-space:nowrap}
 .prazo-hoje{background:var(--navy-dim);color:var(--navy)}
 .prazo-atrasado{background:var(--red-dim);color:var(--red)}
 .prazo-semana{background:var(--surface2);color:var(--muted);border:1px solid var(--border)}
 .ring-fill{fill:none;stroke:var(--green);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset .8s ease}
 .ring-pct{font-size:26px;font-weight:700;letter-spacing:-.5px}
 .ring-sub{font-size:11px;color:var(--muted);margin-top:2px}
 .agenda-item{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border)}
 .agenda-item:last-child{border-bottom:none}
 .agenda-day{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;width:28px;flex-shrink:0;padding-top:2px}
 .agenda-day.hoje{color:var(--navy);font-size:9px}
 .agenda-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;margin-top:5px}
 .agenda-title{font-size:12px;font-weight:500;line-height:1.3}
 .agenda-sub{font-size:11px;color:var(--muted);margin-top:1px}
 .my-obra{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
 .my-obra:last-child{border-bottom:none}
 .my-obra:hover{background:var(--surface2)}
 .my-obra-icon{width:32px;height:32px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px;font-weight:700}
 .my-obra-title{font-size:12px;font-weight:600;transition:color .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
 .my-obra:hover .my-obra-title{color:var(--navy)}
 .my-obra-sub{font-size:11px;color:var(--muted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .my-obra-badge{font-size:9.5px;font-weight:600;max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ── KPI CARDS — estilo Linear/Stripe: zero decoração, número é o único herói */
.dash-kpi-card{background:var(--surface);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.10);cursor:pointer;transition:background var(--dur-base,.14s) var(--ease-standard,ease),border-color var(--dur-base,.14s) var(--ease-standard,ease),transform var(--dur-fast,.12s) var(--ease-standard,ease);position:relative;user-select:none}
.dash-kpi-card:active{transform:scale(.99)}
body.light .dash-kpi-card{background:var(--surface);border-color:rgba(255,255,255,.65);box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.8)}
.dash-kpi-card:hover{background:var(--surface);border-color:rgba(139,148,158,.4)}
.dash-kpi-card:active{opacity:.85}
.dash-kpi-card .kpi-header{margin-bottom:8px}
.dash-kpi-card .kpi-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);display:block}
.dash-kpi-card .kpi-num{font-size:22px;font-weight:700;letter-spacing:-.5px;line-height:1;color:var(--text)}
.dash-kpi-card .kpi-hint{font-size:10px;color:var(--muted);margin-top:3px}
/* ── KPI GRID RESPONSIVO ────────────────────────────────────────────────── */
.dash-kpi-row{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:14px}
@media(max-width:1200px){.dash-kpi-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.dash-kpi-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.dash-kpi-row{grid-template-columns:repeat(2,1fr)}}
/* ── LAYOUT PRINCIPAL RESPONSIVO ────────────────────────────────────────── */
.dash-main-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px;margin-bottom:12px;align-items:stretch}
.dash-main-grid>div{display:flex;flex-direction:column;gap:12px;min-height:0}
@media(max-width:1100px){.dash-main-grid{grid-template-columns:1fr}}
@media(max-width:1100px){}
@media(max-width:680px){}
/* Scroll horizontal seguro para telas estreitas */
.dash-scroll-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dash-scroll-wrap::-webkit-scrollbar{height:5px}
.dash-scroll-wrap::-webkit-scrollbar-track{background:var(--surface2);border-radius:var(--r-xs)}
.dash-scroll-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r-xs)}
.dash-scroll-wrap::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.dash-inner{min-width:900px}
@media(max-width:960px){
  #page-dashboard{overflow-x:visible}
  .dash-kpi-row{min-width:600px}.dash-main-grid{min-width:760px}
}
/* ── KPI DRAWER ─────────────────────────────────────────────────────────── */
.kpi-drw-ov{position:fixed;inset:0;background:rgba(0,0,0,0);pointer-events:none;z-index:50;transition:background var(--dur-slow,.22s) var(--ease-standard,ease)}
.kpi-drw-ov.open{background:rgba(0,0,0,.38);pointer-events:all}
.kpi-drw{position:fixed;top:0;right:0;bottom:0;width:420px;max-width:94vw;background:var(--surface);border-left:1px solid var(--border);box-shadow:-8px 0 32px rgba(0,0,0,.18);transform:translateX(110%);transition:transform var(--dur-slow,.28s) var(--ease-standard,cubic-bezier(.4,0,.2,1));z-index:51;display:flex;flex-direction:column;overflow:hidden}
.kpi-drw.open{transform:translateX(0)}
.kpi-drw-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0}
.kpi-drw-title{font-size:15px;font-weight:700;color:var(--text)}
.kpi-drw-sub{font-size:11px;color:var(--muted);margin-top:2px}
.kpi-drw-close{background:none;border:none;cursor:pointer;color:var(--muted);font-size:20px;padding:2px 6px;border-radius:var(--r-sm);transition:all .12s;line-height:1}
.kpi-drw-close:hover{background:var(--surface2);color:var(--text)}
.kpi-drw-body{flex:1;overflow-y:auto;padding:0}
.kpi-drw-item{display:flex;align-items:flex-start;gap:12px;padding:12px 20px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s}
.kpi-drw-item:hover{background:var(--surface2)}
.kpi-drw-item:last-child{border-bottom:none}
.kpi-drw-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:5px}
.kpi-drw-name{font-size:13px;font-weight:500;color:var(--text);line-height:1.3;margin-bottom:3px}
.kpi-drw-meta{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kpi-drw-empty{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px}
.kpi-drw-footer{padding:12px 20px;border-top:1px solid var(--border);background:var(--surface);flex-shrink:0;font-size:12px;color:var(--muted);text-align:center}
/* ── PROJETOS EMPTY STATE ───────────────────────────────────────────────── */
.proj-empty{padding:20px 16px;text-align:center}
.proj-empty-icon{width:36px;height:36px;border-radius:var(--r-lg);background:var(--surface2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin:0 auto 10px}
.proj-empty-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:4px}
.proj-empty-sub{font-size:11px;color:var(--muted);line-height:1.5}
 .dash-reminder-text{flex:1;color:var(--text);line-height:1.5;word-break:break-word}
 .tf-lbl{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.55px;margin-bottom:5px;display:block}
 .tf-req{color:var(--red)}
 .tf-inp,.tf-sel,.tf-ta{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:8px 11px;font-size:12.5px;color:var(--text);outline:none;box-sizing:border-box;font-family:inherit;transition:border-color .15s;-webkit-appearance:none}
 .tf-inp:focus,.tf-sel:focus,.tf-ta:focus{border-color:var(--navy);background:var(--surface)}
 /* .tf-sel zerava a aparência nativa (-webkit-appearance:none) sem pôr
    nenhuma seta no lugar — ficava indistinguível de um input de texto
    (reportado como "não formatado igual os outros single selects").
    Mesmo chevron discreto já usado em .mf select/.ie-select no resto do
    sistema. */
 select.tf-sel{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%238B949E' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:30px}
 .tf-ta{resize:vertical;min-height:68px;line-height:1.55}
 .tf-r2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
 .rem-tab.active{background:var(--surface2);color:var(--text)}
 .rem-tab:hover:not(.active){color:var(--text)}
 .rem-send-wrap{border-top:1px solid var(--border);padding:12px 16px 14px}
 .rem-send-wrap.hidden{display:none}

 /* ── DRAWER LATERAL DE NOVA ATIVIDADE ── */
 .task-drw-bd{position:fixed;inset:0;background:rgba(0,0,0,.52);z-index:820;opacity:0;pointer-events:none;transition:opacity var(--dur-slow,.22s) var(--ease-standard,ease)}
 .task-drw-bd.open{opacity:1;pointer-events:all}
 .task-drw{position:fixed;top:0;right:0;height:100vh;width:580px;max-width:calc(100vw - 40px);background:var(--surface);border-left:1px solid var(--border);z-index:821;transform:translateX(100%);transition:transform var(--dur-slow,.26s) var(--ease-standard,cubic-bezier(.4,0,.2,1));display:flex;flex-direction:column;overflow:hidden;box-shadow:-12px 0 40px rgba(0,0,0,.22)}
 .task-drw.open{transform:translateX(0)}
 .task-drw-hd{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;flex-shrink:0}
 .task-drw-ttl{font-size:14px;font-weight:700;flex:1;letter-spacing:-.2px}
 /* Indicador de auto-save — "Salvando.../Alterações salvas/Erro ao salvar".
    Fica vazio (sem alterar layout) fora do modo edição/quando não há nada
    pra reportar; ver _taskAutoSave* em dashboard.js. */
 .task-drw-savestatus{font-size:11px;margin-top:2px;min-height:14px;transition:opacity .2s}
 .task-drw-savestatus.saving{color:var(--muted)}
 .task-drw-savestatus.saved{color:var(--green)}
 .task-drw-savestatus.error{color:var(--red);font-weight:600}
 .task-drw-close{background:none;border:none;cursor:pointer;color:var(--muted);font-size:20px;line-height:1;padding:4px 8px;border-radius:var(--r-sm);transition:background .12s}
 .task-drw-close:hover{background:var(--surface2);color:var(--text)}
 .task-drw-body{flex:1;min-height:0;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px}
 .task-drw-ft{padding:12px 20px;border-top:1px solid var(--border);display:flex;gap:8px;justify-content:flex-end;flex-shrink:0;background:var(--surface2)}
 /* Tabs do drawer */
 .drw-tabs{display:flex;gap:2px;padding:8px 20px 0;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0;overflow-x:auto}
 .drw-tab{font-size:11px;font-weight:600;padding:6px 12px;border:none;background:none;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;transition:color var(--dur-fast,.12s) var(--ease-standard,ease),border-color var(--dur-fast,.12s) var(--ease-standard,ease);text-transform:uppercase;letter-spacing:.4px}
 .drw-tab.active{color:var(--text);border-bottom-color:var(--navy)}
 .drw-tab:hover:not(.active){color:var(--text)}
 .drw-tab-pane{display:flex;flex-direction:column;gap:12px}
 .drw-page-hd{font-size:12px;font-weight:700;color:var(--text);letter-spacing:-.1px;padding-bottom:6px;border-bottom:1px solid var(--border);scroll-margin-top:8px}
 .drw-tab-pane+.drw-tab-pane{border-top:1px solid var(--border);margin-top:4px;padding-top:16px}
 /* Subtarefas no drawer */
 .drw-sub-list{display:flex;flex-direction:column;gap:4px}
 .drw-sub-item{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:7px 10px;display:flex;align-items:center;gap:8px}
 .drw-sub-cb{width:15px;height:15px;border-radius:var(--r-xs);border:1.5px solid var(--border);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--dur-fast,.15s) var(--ease-standard,ease);background:var(--surface)}
 .drw-sub-cb:active{transform:scale(.85)}
 .drw-sub-cb:hover{border-color:var(--green)}
 .drw-sub-cb.done{background:var(--green);border-color:var(--green)}
 .drw-sub-titulo{flex:1;font-size:12px;font-weight:500;color:var(--text);cursor:text}
 .drw-sub-titulo.done{color:var(--muted);text-decoration:line-through}
 .drw-sub-del{background:none;border:none;cursor:pointer;color:var(--muted);font-size:14px;opacity:.4;padding:0 2px;transition:opacity .12s;flex-shrink:0}
 .drw-sub-del:hover{opacity:1;color:var(--red)}
 .drw-sub-colab-btn{background:none;border:none;cursor:pointer;color:var(--muted);opacity:.5;padding:2px;display:flex;align-items:center;transition:opacity .12s,color .12s;flex-shrink:0}
 .drw-sub-colab-btn:hover{opacity:1;color:var(--navy)}
 .drw-sub-colab-ind{flex-shrink:0;display:flex;align-items:center}
 .drw-sub-inp{font-size:12px;padding:3px 6px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font-family:inherit;outline:none;flex:1}
 .drw-sub-inp:focus{border-color:var(--navy)}
 .drw-sub-add{margin-top:4px;font-size:11px;padding:6px 14px;background:none;border:1px dashed var(--border);border-radius:var(--r-sm);color:var(--muted);cursor:pointer;width:100%;text-align:left;transition:all .12s;font-family:inherit}
 .drw-sub-add:hover{border-color:var(--navy);color:var(--navy);background:var(--surface2)}
 /* Auditoria read-only — de propósito discreto (rodapé do painel de
    detalhe): texto pequeno e muted dos dois lados, não deve competir com
    os campos de dados reais da entidade, que vêm sempre antes no layout. */
 .drw-audit-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);font-size:11px}
 .drw-audit-row:last-child{border-bottom:none}
 .drw-audit-lbl{color:var(--muted);font-size:10.5px}
 .drw-audit-val{color:var(--muted);font-weight:500}
 /* Chip de registro vinculado (padrão Airtable) — usado dentro do painel de
    detalhe para listar registros de OUTRA entidade (ex.: Obras/Contatos
    vinculados no painel de Empresa, ver _spRelChipHTML em side-panel.js).
    Mais leve que .nt-tag (pílula colorida cheia) e mais denso que a lista
    de <div>s sem interação que existia antes — rounded-md, borda sutil,
    fundo discreto, sem padding pesado. */
 .sp-rel-chips-wrap{display:flex;flex-direction:column;gap:6px}
 .sp-rel-chip{display:flex;align-items:center;gap:7px;padding:6px 10px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface2);cursor:pointer;transition:background .12s,border-color .12s;max-width:100%;box-sizing:border-box}
 .sp-rel-chip:hover{background:var(--surface);border-color:var(--navy)}
 .sp-rel-chip-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
 .sp-rel-chip-label{font-size:12px;font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
 .sp-rel-chip-sub{font-size:10.5px;color:var(--muted);flex-shrink:0;white-space:nowrap}
 .sp-rel-chip-chevron{font-size:13px;color:var(--muted);flex-shrink:0;transition:transform .12s,color .12s}
 .sp-rel-chip:hover .sp-rel-chip-chevron{transform:translateX(2px);color:var(--navy)}
 .sp-rel-chip-rm{flex-shrink:0;background:none;border:none;cursor:pointer;font-size:15px;line-height:1;color:var(--muted);padding:0 2px;border-radius:4px;transition:background .12s,color .12s}
 .sp-rel-chip-rm:hover{background:rgba(207,34,46,.1);color:var(--red)}
 /* Comunicação */
 .drw-comm-section{display:flex;flex-direction:column;gap:4px}
 .drw-comm-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:2px}
 /* ── SEÇÃO INTERNA DO DRAWER (Vínculo / Recorrência no Geral) ── */
 .drw-section{border-top:1px solid var(--border);margin-top:4px;padding-top:12px}
 .drw-section-hd{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;margin-bottom:10px}
 .drw-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}
 .drw-section-toggle{font-size:10px;color:var(--muted);background:none;border:none;cursor:pointer;padding:0;transition:color .12s;line-height:1}
 .drw-section-hd:hover .drw-section-title,.drw-section-hd:hover .drw-section-toggle{color:var(--text)}
 .drw-section-body{display:flex;flex-direction:column;gap:10px}
 .drw-section-body.collapsed{display:none}
 /* ── SEARCHABLE SELECT (Obra) ── */
 .srch-sel{position:relative}
 .srch-sel-box{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface2);cursor:pointer;transition:border-color .15s,background .12s;min-height:34px}
 .srch-sel-box:hover{border-color:rgba(139,148,158,.5);background:var(--surface)}
 .srch-sel-box.open{border-color:var(--navy);background:var(--surface)}
 .srch-sel-val{flex:1;font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .srch-sel-val.placeholder{color:var(--muted)}
 .srch-sel-clr{background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px;padding:0 2px;opacity:.7;transition:opacity .12s;flex-shrink:0;line-height:1}
 .srch-sel-clr:hover{opacity:1;color:var(--red)}
 .srch-sel-chevron{color:var(--muted);font-size:10px;flex-shrink:0;transition:transform .15s}
 .srch-sel-box.open .srch-sel-chevron{transform:rotate(180deg)}
 /* position:fixed (não absolute) — dropdown escapa de qualquer ancestral
    com overflow:hidden/auto (ex.: a área rolável do modal de Nova Obra),
    que cortava a lista de opções mesmo com os dados carregados certinho.
    top/left/width calculados via JS em _srchSelPosition (searchable-
    select.js) — não dependem mais da posição do .srch-sel pai. */
 .srch-sel-drop{display:none;position:fixed;z-index:1200;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-3);overflow:hidden}
 .srch-sel-drop.open{display:block}
 .srch-sel-inp{width:100%;box-sizing:border-box;padding:8px 12px;border:none;border-bottom:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:12px;font-family:inherit;outline:none}
 .srch-sel-inp:focus{background:var(--surface)}
 .srch-sel-list{max-height:200px;overflow-y:auto;padding:4px 0}
 .srch-sel-opt{padding:7px 12px;font-size:12px;color:var(--text);cursor:pointer;transition:background .1s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .srch-sel-opt:hover,.srch-sel-opt.focused{background:var(--surface2);box-shadow:inset 2px 0 0 #C9CDD8}
 .srch-sel-opt.selected{color:var(--navy);font-weight:600}
 .srch-sel-empty{padding:12px;text-align:center;font-size:11px;color:var(--muted)}
 .colab-req-badge{font-size:9px;font-weight:700;padding:2px 8px;border-radius:var(--r-lg);white-space:nowrap;text-transform:uppercase;letter-spacing:.3px}
 .colab-req-btn{font-size:10px;padding:4px 10px;border-radius:var(--r-sm);cursor:pointer;font-family:inherit;border:1px solid var(--border);background:var(--surface);color:var(--text);transition:all .12s}
 .colab-req-btn:hover{border-color:var(--navy);color:var(--navy)}
 .colab-req-btn.accept{border-color:var(--green);color:var(--green)}
 .colab-req-btn.accept:hover{background:var(--green);color:#fff}
 .colab-req-btn.decline{border-color:var(--red);color:var(--red)}
 .colab-req-btn.decline:hover{background:var(--red);color:#fff}

/* Colaboração — redesign */
.colab-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.colab-primary-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;background:var(--navy-solid);color:#fff;border:none;border-radius:var(--r-sm);font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .12s}
.colab-primary-btn:hover{opacity:.85}
.colab-form-panel{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);padding:14px;display:none;flex-direction:column;gap:10px;margin-bottom:10px}
.colab-form-panel.open{display:flex}
.colab-form-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.colab-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;margin-bottom:6px}
.colab-card-hd{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border)}
.colab-card-av{width:28px;height:28px;border-radius:var(--r-md);background:var(--navy-solid);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.colab-card-meta{flex:1;min-width:0}
.colab-card-who{font-size:11px;font-weight:700;color:var(--text)}
.colab-card-task{font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.colab-card-body{padding:8px 12px;display:flex;flex-direction:column;gap:6px}
.colab-card-motivo{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:2px 8px;background:rgba(5,8,102,.08);color:var(--navy);border-radius:var(--r-lg)}
.colab-card-obs{font-size:11px;color:var(--muted);line-height:1.45}
.colab-card-info{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.colab-card-prazo{font-size:10px;color:var(--muted);display:flex;align-items:center;gap:3px}
.colab-card-prazo.vencido{color:var(--red)}
.colab-card-prazo.proximo{color:#b45309}
.colab-card-ft{padding:8px 12px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;border-top:1px solid var(--border);background:var(--surface2)}
.colab-timeline{padding:8px 12px;border-top:1px solid var(--border)}
.colab-tl-entry{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--muted);padding:2px 0}
.colab-tl-dot{width:6px;height:6px;border-radius:50%;background:var(--border);flex-shrink:0}
.colab-tl-dot.done{background:var(--green)}
.colab-tl-dot.active{background:var(--navy)}
.colab-tl-dot.red{background:var(--red)}

/* Status Geral — donut */
.status-donut-wrap{display:flex;flex-direction:column;flex:1;min-height:0}
.status-donut-chart{display:flex;justify-content:center;align-items:center;flex:0 0 auto;margin:4px 0}
.status-donut-legend{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.status-donut-row{display:flex;align-items:center;gap:7px}
.status-donut-dot{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.status-donut-lbl{flex:1;font-size:11px;color:var(--muted)}
.status-donut-cnt{font-size:12px;font-weight:700;color:var(--text)}
.status-insights{display:flex;flex-direction:column;gap:4px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.status-insight-chip{display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:var(--r-sm);font-size:10px}
.status-insight-chip.ok{background:rgba(40,181,72,.08);color:var(--green)}
.status-insight-chip.warn{background:rgba(234,179,8,.12);color:#b45309}
.status-insight-chip.danger{background:rgba(207,34,46,.08);color:var(--red)}
.status-insight-chip.neutral{background:var(--surface2);color:var(--muted)}

/* Painel de saúde operacional */
.hp-section-lbl{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:6px}
.hp-row{display:flex;align-items:center;gap:7px;padding:4px 6px;border-radius:var(--r-sm);cursor:default;transition:background .1s}
.hp-row.clickable{cursor:pointer}
.hp-row.clickable:hover{background:var(--surface2)}
.hp-dot{width:7px;height:7px;border-radius:2px;flex-shrink:0}
.hp-label{flex:1;font-size:11px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hp-count{font-size:12px;font-weight:700;min-width:18px;text-align:right;flex-shrink:0}
.hp-arrow{flex-shrink:0;opacity:.4;transition:opacity .1s}
.hp-row.clickable:hover .hp-arrow{opacity:1}
.hp-divider{border:none;border-top:1px solid var(--border);margin:8px 0}
.hp-bar-wrap{background:var(--border);border-radius:3px;height:5px;overflow:hidden;margin-top:4px}
.hp-bar-fill{height:100%;border-radius:3px;transition:width .5s ease}

/* Trend chart header */
.chart-trend-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:4px 0 8px;border-top:1px solid var(--border);margin-top:6px}

/* Controles do gráfico de semanas */
.chart-ctrl-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.chart-period-btn{font-size:9px;padding:3px 8px;border-radius:var(--r-sm);border:1px solid var(--border);background:none;color:var(--muted);cursor:pointer;font-family:inherit;transition:all .12s;white-space:nowrap}
.chart-period-btn.active{background:var(--navy-solid);color:#fff;border-color:var(--navy-solid)}
.chart-period-btn:hover:not(.active){border-color:var(--navy);color:var(--navy)}
/* Segmented control do gráfico */
.chart-seg-ctrl{display:flex;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:2px;gap:2px;margin-left:auto;flex-shrink:0}
.chart-seg-btn{flex:1;font-size:10px;font-weight:600;padding:3px 12px;border:none;border-radius:var(--r-sm);cursor:pointer;background:transparent;color:var(--muted);font-family:inherit;transition:all .15s;white-space:nowrap}
.chart-seg-btn.active{background:var(--navy-solid);color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.chart-seg-btn:hover:not(.active){color:var(--text)}
.colab-cc-card{padding:8px 12px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:3px;cursor:pointer;transition:background .1s}
.colab-cc-card:hover{background:var(--surface2)}
.colab-cc-card:last-child{border-bottom:none}
.colab-cc-status{display:inline-flex;align-items:center;padding:1px 7px;border-radius:var(--r-xs);font-size:9px;font-weight:700;letter-spacing:.3px}
.ccs-pendente{background:rgba(180,83,9,.12);color:#b45309}
.ccs-aceita{background:rgba(99,102,241,.12);color:#6366f1}
.ccs-andamento{background:rgba(5,8,102,.1);color:var(--navy)}
.ccs-aguardando{background:rgba(139,148,158,.12);color:#8b949e}
.ccs-concluida{background:rgba(40,181,72,.1);color:var(--green)}
.ccs-recusada{background:rgba(207,34,46,.08);color:var(--red)}
.chart-custom-range{display:none;gap:6px;align-items:center;margin-top:6px;flex-wrap:wrap}
.chart-custom-range.visible{display:flex}
.chart-custom-range input{font-size:10px;padding:3px 7px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface2);color:var(--text);font-family:inherit;cursor:pointer}
 /* ── INICIATIVAS DE INOVAÇÃO ── */
 .inic-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);padding:11px 14px;display:flex;flex-direction:column;gap:5px;transition:border-color var(--dur-fast,.12s) var(--ease-standard,ease);cursor:default}
 .inic-card:hover{border-color:var(--navy)}
 .inic-card-nome{font-size:13px;font-weight:600;color:var(--text);line-height:1.3}
 .inic-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
 .inic-badge{font-size:10px;font-weight:600;padding:2px 7px;border-radius:var(--r-sm);border:1px solid var(--border);color:var(--muted);background:var(--surface)}
 /* ── PÁGINA MELHORIAS ── */
 .melh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
 /* cursor:pointer — o card abre o painel de detalhe da iniciativa (antes esta tela era só leitura) */
 .melh-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;display:flex;flex-direction:column;gap:8px;transition:border-color var(--dur-base,.15s) var(--ease-standard,ease),transform var(--dur-fast,.12s) var(--ease-standard,ease);cursor:pointer}
 .melh-card:active{transform:scale(.99)}
 .melh-card:hover{border-color:var(--yellow)}
 .melh-card-title{font-size:13px;font-weight:600;line-height:1.4;color:var(--text)}
 .melh-card-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
 .melh-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:4px;padding-top:10px;border-top:1px solid var(--border)}
 .melh-card-resp{font-size:11px;color:var(--muted)}
 .melh-card-date{font-size:10px;color:var(--muted)}
 .melh-empty{padding:40px 0;color:var(--muted);font-size:13px;text-align:center;grid-column:1/-1}
 .audit-body { flex:1;font-size:12px;line-height:1.5 }
 .audit-body strong { font-weight:600;color:var(--text) }
 /* ── HISTÓRICO PESSOAL — FAB + Drawer ── */
/* ══ GESTOR DE TAREFAS ══════════════════════════════════════════════════════ */
/* Header — título+status à esquerda, todos os controles à direita, uma
   linha só (antes eram 4 barras empilhadas: cabeçalho / período sempre
   visível / abas+métricas / busca+filtro+ordenar+agrupar). */
.gestor-hd{padding:10px 18px;border-bottom:1px solid var(--border);flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.gestor-hd-title{font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.2px}
.gestor-hd-sub{font-size:10px;color:var(--muted);margin-top:2px}
.gestor-hd-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* Dropdown de período — substitui os 5 botões + campos de data sempre
   visíveis por um botão só, que abre um popover compacto. */
.gp-wrap{position:relative;display:inline-block}
.gp-pop{position:absolute;top:calc(100% + 4px);right:0;z-index:200;min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-3);padding:10px;display:flex;flex-direction:column;gap:4px}
.gp-preset{padding:6px 10px;font-size:12px;font-weight:600;border:1px solid transparent;border-radius:var(--r-sm);background:transparent;cursor:pointer;color:var(--text);font-family:inherit;transition:all .12s;white-space:nowrap;text-align:left}
.gp-preset:hover{background:var(--surface2)}
.gp-preset.active{background:var(--navy-dim);color:var(--navy)}
.gp-custom-link{background:none;border:none;color:var(--muted);font-size:11px;cursor:pointer;font-family:inherit;padding:6px 10px;text-align:left}
.gp-custom-link:hover{color:var(--navy)}
#gestor-custom-dates{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:4px 10px}
#gestor-custom-dates label{font-size:10px;color:var(--muted)}
.gp-date-inp{border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 8px;font-size:11px;background:var(--surface2);color:var(--text);outline:none;font-family:inherit;cursor:pointer}

/* View tabs + métricas discretas — separadas visualmente (fonte menor, tom
   apagado) da navegação, não competem com as abas por atenção. */
.gestor-view-tabs{display:flex;align-items:center;border-bottom:1px solid var(--border);background:var(--surface);flex-shrink:0}
.gestor-tab{padding:9px 18px;font-size:12px;font-weight:600;border:none;background:none;cursor:pointer;color:var(--muted);border-bottom:2px solid transparent;transition:all var(--dur-base,.15s) var(--ease-standard,ease);font-family:inherit;display:flex;align-items:center;gap:6px;white-space:nowrap}
.gestor-tab.active{color:var(--navy);border-bottom-color:var(--navy)}
.gestor-tab:hover:not(.active){color:var(--text);background:rgba(0,0,0,.03)}
.gestor-stats-bar{display:flex;align-items:center;gap:16px;margin-left:auto;padding:0 16px;font-size:10.5px;color:var(--muted)}
.gestor-stats-bar b{font-weight:700;color:var(--text);margin-right:2px}
.gestor-stats-bar b.gst-prog{color:#3b82f6}
.gestor-stats-bar b.gst-late{color:#D6433C}
.gestor-stats-bar b.gst-pend{color:#B8790A}
.gestor-stats-bar b.gst-afazer{color:#7D8199}


/* Pesquisa expansível estilo Airtable (scripts/lib/toolbar-ui.js:
   _tsSearchExpand/_tsSearchCollapse) — só o ícone por padrão, expande ao
   clicar/focar, recolhe ao perder foco se estiver vazia. Reaproveitada por
   todos os módulos (Gestor de Tarefas, Obras, Empresas, Instalações,
   Entregas, Projetos, Melhorias): o wrapper .ts-search contém ícone+input,
   identificado só por ts-search-<instanceId>, sem markup extra por módulo. */
.ts-search{display:flex;align-items:center;height:30px;border:1px solid transparent;border-radius:var(--r-sm);background:var(--surface2);cursor:pointer;padding:0;transition:border-color .15s,padding .25s cubic-bezier(.4,0,.2,1),background .15s;flex-shrink:0}
.ts-search-icon{flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;color:var(--muted);pointer-events:none}
.ts-search-input{width:0;min-width:0;padding:0;margin:0;border:none;outline:none;background:transparent;color:var(--text);font-size:12.5px;font-family:inherit;opacity:0;height:100%;box-sizing:border-box;transition:width .25s cubic-bezier(.4,0,.2,1),opacity .18s linear .05s}
.ts-search-input::placeholder{color:var(--muted)}
.ts-search:hover{border-color:color-mix(in srgb, var(--border) 60%, transparent)}
.ts-search.expanded{border-color:color-mix(in srgb, var(--border) 70%, transparent);padding-right:10px}
.ts-search.expanded:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-dim)}
.ts-search.expanded .ts-search-input{width:220px;opacity:1}
@media (max-width:1100px){ .ts-search.expanded .ts-search-input{width:150px} }
.gestor-sel{border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 8px;background:var(--surface2);color:var(--text);font-size:11px;outline:none;cursor:pointer;font-family:inherit;height:30px;display:inline-flex;align-items:center;gap:5px}
.gestor-sel.active{border-color:var(--navy);color:var(--navy)}
.gestor-sel-caret{white-space:nowrap}
/* Botão de um clique "Atrasadas" — vermelho quando ligado (urgência), não
   navy como os demais toggles, pra reforçar visualmente que é um alerta,
   não só uma seleção qualquer. */
.gestor-quick-toggle.active{border-color:var(--red);color:var(--red);background:var(--red-dim)}
/* Organizar: ordenar+agrupar como um bloco visual único, não dois selects
   soltos com rótulo próprio competindo por atenção. */
/* SEM overflow:hidden aqui: os popovers de Agrupar/Ordenar (.fb-pop,
   position:absolute) são descendentes deste elemento — overflow:hidden
   os recortava para fora da tela inteiros, deixando só o badge "1"
   visível e nada mais acontecendo ao clicar (bug real, achado testando
   com dados de produção). O acabamento arredondado nas pontas vem de
   border-radius nos próprios botões, não mais do recorte do container. */
.gestor-organizar{display:flex;align-items:center;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface2);height:30px}
.gestor-organizar .gestor-sel-plain:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.gestor-organizar .gestor-sel-plain:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.gestor-organizar-div{width:1px;align-self:stretch;background:var(--border)}
.gestor-sel-plain{border:none;background:transparent;height:28px;border-radius:0}

/* Visualizações salvas (Airtable-style) */
.gv-wrap{position:relative;display:inline-block}
.gv-pop{position:absolute;top:calc(100% + 4px);right:0;z-index:200;width:300px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-3);padding:8px}
.gv-item{display:flex;align-items:center;gap:2px;padding:6px 8px;border-radius:var(--r-sm);cursor:pointer;font-size:12px;color:var(--text)}
.gv-item:hover{background:var(--surface2)}
.gv-item-del{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px 4px;line-height:1;flex-shrink:0}
.gv-item-del:hover{color:var(--red)}
.gv-item-fav{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px 3px;line-height:1;flex-shrink:0;font-size:13px}
.gv-item-fav.on{color:var(--yellow)}
.gv-item-fav:hover{color:var(--yellow)}
.gv-item-act{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px 4px;line-height:1;flex-shrink:0;font-size:12px}
.gv-item-act:hover:not(:disabled){color:var(--navy)}
.gv-item-act:disabled{opacity:.35;cursor:default}
.gv-empty{font-size:11px;color:var(--muted);padding:8px;text-align:center}
.gv-hint{font-size:10.5px;color:var(--muted);line-height:1.5;padding:2px 4px 8px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.gv-save-btn{width:100%;margin-top:6px;padding:7px;font-size:11px;font-weight:600;border:1px dashed var(--border);border-radius:var(--r-sm);background:transparent;color:var(--muted);cursor:pointer;font-family:inherit}
.gv-save-btn:hover{border-color:var(--navy);color:var(--navy)}

/* Group Builder — popover compacto estilo Airtable ("Agrupar por [Campo ▼]"
   + "depois por..." + link discreto pra adicionar mais um nível), ancorado
   no botão via .fb-pop/_tsSmartPosition. Antes reaproveitava .fb-pop na
   largura cheia (560px, pensada pro Filtro com condição/operador/valor) —
   .gb-pop estreita isso pro Agrupar, que só precisa de campo + ordem. */
/* Largura subiu de 236px pra 300px — 236 deixava o <select> de campo com
   pouco mais de 70px de sobra depois do rótulo/ordenação/remover, cortando
   nomes de campo comuns ("Faturamento" virava "Fatu", achado real). */
.fb-pop.gb-pop{width:300px;padding:10px}
.gb-hd{margin-bottom:8px}
.gb-row{margin-bottom:6px;gap:6px}
.gb-row .fb-lead-wrap{width:58px}
.gb-row .fb-lead{font-size:10px}
.gb-row .fb-field-sel{flex:1;min-width:0;padding:5px 6px;font-size:11.5px}
.gb-dir-sel{flex:0 0 50px;min-width:0;padding:5px 4px;font-size:11px}
.gb-add-link{display:block;width:100%;text-align:left;padding:5px 2px;margin-top:2px;font-size:11.5px;font-weight:600;color:var(--navy);background:none;border:none;cursor:pointer;font-family:inherit}
.gb-add-link:hover{text-decoration:underline}

/* Inline Edit — célula editável estilo Airtable/Excel (scripts/lib/inline-edit.js).
   Primeira aplicação: tabela de Entregas. */
/* Edição inline (Entregas e reaproveitável em outras tabelas) — a célula em
   edição precisa parecer parte natural da grade, não um <input> de formulário
   solto em cima da tabela: SEM borda grossa, SEM outline padrão do browser,
   SEM mudar o padding/altura da célula (antes o padding trocava pra 2px 4px
   ao entrar em edição, o que "pulava" o layout — removido). O contorno vira
   uma sombra sutil por DENTRO da célula (inset), então nunca vaza pra célula
   vizinha nem depende de border-radius brigando com as bordas da tabela. */
/* O hover de "background" sozinho não dava pra confiar: existe uma regra
   global (tbody[data-sp] tr:hover td{background:...!important}, mais acima
   neste arquivo) que tinge a linha inteira de azul e vence qualquer
   background que a célula tentasse aplicar por conta própria — resultado,
   a pessoa não via NENHUM sinal de que aquela célula específica era
   editável (só o hover genérico de linha, igual em qualquer tabela do
   sistema). box-shadow é uma propriedade diferente da que aquela regra
   mexe, então nunca é sobrescrito — o anel fica visível mesmo com a linha
   toda tingida de azul por baixo. Um ícone foi cogitado, mas descartado:
   colunas numéricas (Quantidade/Peso/Valor) são alinhadas à direita e o
   ícone ficaria em cima do próprio valor. */
td.ie-cell{cursor:pointer;position:relative;transition:box-shadow .15s ease}
td.ie-cell:hover{box-shadow:inset 0 0 0 1px var(--navy),inset 0 0 0 3px var(--navy-dim)}
td.ie-cell.ie-editing{background:var(--surface)!important;box-shadow:inset 0 0 0 1px var(--navy-dim),inset 0 1px 4px rgba(0,0,0,.06);border-radius:var(--r-sm)}
td.ie-cell .ie-input{width:100%;height:100%;box-sizing:border-box;border:none;background:transparent;color:var(--text);font-size:12px;font-family:inherit;padding:0;margin:0;outline:none;display:block}
/* Select — mesmo chevron discreto já usado em .mf select no resto do sistema,
   em vez do dropdown padrão do browser (setinha quadrada, borda pesada). */
td.ie-cell .ie-select{cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 16 16' fill='none' stroke='%238B949E' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0 center;padding-right:16px}
/* Data — o seletor do calendário é controlado pelo SO/browser (não dá pra
   trocar por um datepicker próprio sem reescrever o campo do zero); o ícone
   nativo pelo menos fica discreto em repouso e realça no hover/foco. */
td.ie-cell input[type="date"].ie-input::-webkit-calendar-picker-indicator{opacity:.4;cursor:pointer;transition:opacity .15s}
td.ie-cell input[type="date"].ie-input:hover::-webkit-calendar-picker-indicator,
td.ie-cell input[type="date"].ie-input:focus::-webkit-calendar-picker-indicator{opacity:.9}
td.ie-cell.ie-saving{opacity:.5;pointer-events:none}
/* Confirmação sutil de salvamento — pisca um verde bem discreto antes do
   refresh (ver _ieCommit em inline-edit.js), some sozinha quando a linha é
   redesenhada com o valor novo. */
td.ie-cell.ie-success{background:var(--green-dim)!important;box-shadow:inset 0 0 0 1px rgba(31,138,76,.4)}
td.ie-cell.ie-error{box-shadow:inset 0 0 0 1px var(--red),inset 0 1px 4px rgba(214,67,60,.08)}
/* Realce leve na linha inteira enquanto uma célula dela está em edição —
   ajuda a "achar" a linha sem competir visualmente com a célula ativa. */
tr.ie-row-active td{background:var(--surface2)}
tr.ie-row-active td.ie-editing{background:var(--surface)!important}
.ie-empty{color:var(--muted)}
/* Grid */
.gestor-grid-wrap{overflow-x:auto;overflow-y:auto;flex:1;min-height:0;-webkit-overflow-scrolling:touch;scrollbar-width:auto;scrollbar-color:var(--muted) var(--surface2)}
.gestor-grid-wrap::-webkit-scrollbar{height:14px;width:14px}
.gestor-grid-wrap::-webkit-scrollbar-track{background:var(--surface2);border-top:1px solid var(--border)}
.gestor-grid-wrap::-webkit-scrollbar-thumb{background:var(--muted);border-radius:var(--r-sm);border:3px solid var(--surface2)}
.gestor-grid-wrap::-webkit-scrollbar-thumb:hover{background:var(--text)}
.gestor-tbl{width:100%;min-width:960px;border-collapse:collapse;font-size:12px;table-layout:fixed}
.gestor-tbl thead tr{position:sticky;top:0;z-index:8}
.gestor-tbl th{padding:8px 12px;text-align:left;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid transparent;border-image:var(--silver-line) 1;background:var(--surface2);white-space:nowrap;user-select:none}
/* Oculta a coluna redundante quando a Grade está agrupada por esse mesmo
   campo — o valor já aparece no cabeçalho do grupo (item #2 do pedido de
   UX). Classe alternada por _gestorSyncGroupedColumn conforme o agrupamento
   ativo; nth-child conta #/Atividade/Status/Prazo/Início/Prioridade/Área/Tipo. */
.gestor-tbl.gb-hide-status th:nth-child(3),.gestor-tbl.gb-hide-status td:nth-child(3){display:none}
.gestor-tbl.gb-hide-prazo th:nth-child(4),.gestor-tbl.gb-hide-prazo td:nth-child(4){display:none}
.gestor-tbl.gb-hide-inicio th:nth-child(5),.gestor-tbl.gb-hide-inicio td:nth-child(5){display:none}
.gestor-tbl.gb-hide-area th:nth-child(7),.gestor-tbl.gb-hide-area td:nth-child(7){display:none}
.gestor-tbl td{padding:8px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.gestor-tbl tbody tr{cursor:pointer;transition:background var(--dur-fast,.08s) var(--ease-standard,ease)}
.gestor-tbl tbody tr:active{background:var(--surface2)}
.gestor-tbl tbody tr:hover td{background:rgba(5,8,102,.035)}
.gestor-rel-obra{background:#dbeafe;color:#1d4ed8}
/* Popover de responsáveis: em tarefa coletiva a linha mostra só o avatar do
   principal + selo de contagem (estado normal fica limpo); passar o mouse
   revela a foto de TODOS os responsáveis, não só o primeiro — sem precisar
   abrir a tarefa e sem poluir a grade com uma pilha de avatares o tempo
   todo. CSS puro (:hover), sem JS. */
.resp-hover{position:relative}
.resp-hover-panel{display:none;position:absolute;top:100%;left:0;margin-top:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:6px;box-shadow:var(--shadow-3);z-index:30;min-width:170px}
.resp-hover:hover .resp-hover-panel{display:block}
.resp-hover-item{display:flex;align-items:center;gap:7px;padding:4px 6px;font-size:11px;color:var(--text);white-space:nowrap;border-radius:var(--r-sm)}
.resp-hover-item:hover{background:var(--surface2)}
/* Cartão de info do usuário — abre com clique direito num avatar de
   responsável. Posicionado via JS (top/left) no ponto do clique. */
.user-info-card{position:fixed;z-index:900;width:220px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-4);padding:14px;animation:modalIn var(--dur-fast,.15s) var(--ease-out,ease)}
.uic-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--border)}
.uic-head-txt{min-width:0}
.uic-nome{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uic-cargo{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uic-row{display:flex;align-items:center;justify-content:space-between;font-size:11px;padding:3px 0;gap:8px}
.uic-lbl{color:var(--muted)}
.uic-val{color:var(--text);font-weight:500;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gestor-rel-proj{background:#f3e8ff;color:#7e22ce}
.gestor-rel-melh{background:#dcfce7;color:#15803d}
.gestor-rel-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:15px;padding:0 4px;border-radius:3px;font-size:8px;font-weight:800;letter-spacing:.3px;cursor:default}
.vinc-card{border:1px solid var(--border);border-radius:var(--r-md);padding:8px 10px;margin-top:6px;background:var(--surface2)}
.vinc-card-title{font-size:10px;font-weight:700;color:var(--text);margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px}
.vinc-card-row{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--muted);padding:1px 0}
.vinc-card-row b{color:var(--text);font-weight:600;text-align:right}
/* Cabeçalho de grupo (Gestor de Tarefas/Empresas/Contatos) — fundo sólido,
   sem blur (vidro fosco removido do sistema inteiro por custo de
   performance — recompositava a cada scroll). */
/* Cor levemente destacada (--surface2, não a mesma da linha de dados) +
   faixa lateral (--navy) — antes ficava neutro demais (mesma cor de fundo
   das linhas normais), difícil de "bater o olho e ver que é um grupo". */
.gestor-group-hd{position:sticky;top:38px;z-index:7;background:var(--surface2);border-bottom:1px solid rgba(255,255,255,.16)}
body.light .gestor-group-hd{background:var(--surface2);border-bottom-color:rgba(255,255,255,.65)}
.gestor-group-hd td{background:transparent!important;padding:6px 12px;cursor:pointer;border-left:3px solid var(--navy)}
/* Hover tingido na cor do próprio acento (--navy), não um brightness()
   genérico — o brightness deixava a linha inteira "acender" igual botão,
   confundindo cabeçalho de seção com ação clicável. Mesma cor da borda
   lateral reforça que é o MESMO elemento reagindo, não um controle novo. */
.gestor-group-hd:hover td{background:rgba(0,74,232,.07)!important}
.gestor-group-hd strong{text-transform:uppercase;font-size:11px;letter-spacing:.3px}
/* Pedido explícito: hierarquia entre níveis de agrupamento (principal →
   sub → registros) era ilegível com 2+ níveis — a indentação (padding-left
   crescente, já existia por módulo) sozinha não bastava, porque o CABEÇALHO
   em si tinha sempre a MESMA borda/peso/tamanho em qualquer nível, então não
   dava pra "bater o olho" e saber que um grupo é filho de outro, só pela
   posição. Classe adicional gb-lvl-N (N=0,1,2 — mesmo teto de _gbInit's
   maxLevels em todo módulo) some peso visual conforme aprofunda: borda mais
   fina, fundo mais claro, texto menor e sem uppercase a partir do nível 1.
   Módulos continuam calculando o padding-left numérico (12 + nível*20,
   já existente em cada um) — só a CLASSE muda por módulo, reaproveitando a
   mesma cascata CSS em todos (Obras/Instalações/Entregas/Empresas/
   Contatos/Gestor de Tarefas). */
/* Mais respiro vertical só no nível 0 — é o que precisa parecer "separador
   de seção" (pedido explícito); níveis 1/2 continuam compactos, são
   subdivisões dentro da seção, não outra seção. */
.gestor-group-hd.gb-lvl-0 td{border-left-width:4px;padding-top:10px;padding-bottom:10px}
.gestor-group-hd.gb-lvl-0 strong{font-size:11.5px;font-weight:700}
.gestor-group-hd.gb-lvl-1{background:var(--surface)}
.gestor-group-hd.gb-lvl-1 td{border-left-width:3px;border-left-color:var(--muted)}
.gestor-group-hd.gb-lvl-1 strong{text-transform:none;font-size:11px;font-weight:600;letter-spacing:0}
.gestor-group-hd.gb-lvl-2{background:var(--surface)}
.gestor-group-hd.gb-lvl-2 td{border-left-width:2px;border-left-color:var(--border)}
.gestor-group-hd.gb-lvl-2 strong{text-transform:none;font-size:10.5px;font-weight:600;letter-spacing:0;color:var(--muted)}
/* Divisor sutil ANTES de cada grupo de nível 0 — marca onde um agrupamento
   principal termina e o próximo começa, sem precisar de :first-child (a
   1ª linha da tabela já tem a borda do <thead> logo acima, então o traço
   extra não soma visualmente ali). */
.gestor-group-hd.gb-lvl-0 td{box-shadow:inset 0 1px 0 var(--border)}
/* Selo de contagem — pedido explícito: cada módulo tinha um <span> de texto
   solto com estilo inline levemente diferente; agora é 1 componente visual
   único (pílula), reaproveitado em qualquer nível/módulo. */
.gb-count-badge{display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;font-size:9.5px;font-weight:600;color:var(--muted);background:rgba(127,127,142,.14);vertical-align:middle}
.gestor-group-hd.gb-lvl-0 .gb-count-badge{color:var(--navy);background:rgba(0,74,232,.12)}
body:not(.light) .gestor-group-hd.gb-lvl-0 .gb-count-badge{color:#AFC6FB}
/* Gantt */
.gestor-timeline-wrap{overflow:auto;flex:1;min-height:0;background:var(--surface)}
/* Métricas */
.gestor-metrics-wrap{overflow-y:auto;flex:1;min-height:0;padding:16px 18px}
/* Status badges */
.gs-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--r-sm);font-size:10px;font-weight:700;white-space:nowrap}
.gs-afazer  {background:var(--gray-100);color:var(--gray-600)}
.gs-progresso{background:#E9EEFC;color:#2E5FD9}
.gs-feito   {background:#E6F5EB;color:#1F8A4C}
.gs-atrasado{background:#FCEAE8;color:#D6433C}
.gs-bloqueado{background:#FDF0DA;color:#B8790A}
body:not(.light) .gs-afazer{background:rgba(125,129,153,.16);color:var(--gray-400)}
body:not(.light) .gs-progresso{background:rgba(46,95,217,.20);color:#AFC6FB}
body:not(.light) .gs-feito{background:rgba(31,138,76,.20);color:#8FE3B4}
body:not(.light) .gs-atrasado{background:rgba(214,67,60,.20);color:#F5A39D}
body:not(.light) .gs-bloqueado{background:rgba(184,121,10,.20);color:#F3C978}

/* ── Tags de prioridade e status — MilaLab Design System, passo 5.
   Aplicadas nas mesmas tags que já existem (Alta/Média/Baixa, Em progresso);
   a lógica que decide qual prioridade/status usar não muda, só a cor. ── */
.tag-priority-high{background:#FCEAE8;color:#D6433C;padding:2px 8px;border-radius:var(--r-full);font-weight:700;font-size:10px;white-space:nowrap}
.tag-priority-med{background:#FDF0DA;color:#B8790A;padding:2px 8px;border-radius:var(--r-full);font-weight:700;font-size:10px;white-space:nowrap}
.tag-priority-low{background:#E6F5EB;color:#1F8A4C;padding:2px 8px;border-radius:var(--r-full);font-weight:700;font-size:10px;white-space:nowrap}
.tag-status-info{background:#E9EEFC;color:#2E5FD9;padding:2px 8px;border-radius:var(--r-full);font-weight:700;font-size:10px;white-space:nowrap}
body:not(.light) .tag-priority-high{background:rgba(214,67,60,.20);color:#F5A39D}
body:not(.light) .tag-priority-med{background:rgba(184,121,10,.20);color:#F3C978}
body:not(.light) .tag-priority-low{background:rgba(31,138,76,.20);color:#8FE3B4}
body:not(.light) .tag-status-info{background:rgba(46,95,217,.20);color:#AFC6FB}
/* hist-fab (original, não mover) */
 .hist-fab{position:fixed;bottom:24px;right:24px;z-index:110;display:flex;align-items:center;gap:7px;padding:9px 16px 9px 12px;background:var(--navy-solid);border:none;border-radius:var(--r-full);font-size:12px;font-weight:600;color:#fff;cursor:pointer;box-shadow:0 4px 16px rgba(5,8,102,.35);transition:box-shadow .14s,transform .14s;user-select:none}
 .hist-fab:hover{box-shadow:0 6px 24px rgba(5,8,102,.48);transform:translateY(-1px)}
 .hist-fab-badge{background:#ef4444;color:#fff;border-radius:var(--r-lg);font-size:9px;font-weight:700;padding:1px 6px;margin-left:2px;display:none}
 .hist-bd{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:840;opacity:0;pointer-events:none;transition:opacity var(--dur-slow,.22s) var(--ease-standard,ease)}
 .hist-bd.open{opacity:1;pointer-events:all}
 .hist-drw{position:fixed;top:0;right:0;height:100vh;width:400px;max-width:calc(100vw - 32px);background:var(--surface);border-left:1px solid var(--border);z-index:841;transform:translateX(100%);transition:transform var(--dur-slow,.26s) var(--ease-standard,cubic-bezier(.4,0,.2,1));display:flex;flex-direction:column;overflow:hidden;box-shadow:-10px 0 36px rgba(0,0,0,.2)}
 .hist-drw.open{transform:translateX(0)}
 .hist-drw-hd{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;flex-shrink:0;background:var(--surface)}
 .hist-drw-title{font-size:14px;font-weight:700;color:var(--text);letter-spacing:-.2px}
 .hist-drw-sub{font-size:11px;color:var(--muted);margin-top:3px}
 .hist-drw-close{background:none;border:none;cursor:pointer;color:var(--muted);font-size:20px;line-height:1;padding:2px 6px;border-radius:var(--r-sm);transition:background .12s;flex-shrink:0}
 .hist-drw-close:hover{background:var(--surface2);color:var(--text)}
 .hist-drw-filters{display:flex;gap:5px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--border);flex-shrink:0}
 .hist-filter-chip{padding:3px 10px;border-radius:var(--r-xl);font-size:10px;font-weight:600;border:1px solid var(--border);background:none;color:var(--muted);cursor:pointer;transition:all .12s;font-family:inherit;text-transform:uppercase;letter-spacing:.3px}
 .hist-filter-chip.active{background:var(--navy-solid);color:#fff;border-color:var(--navy-solid)}
 .hist-drw-body{flex:1;overflow-y:auto;padding:0}
 .hist-group-lbl{padding:8px 16px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-top:1px solid var(--border);margin-top:4px;background:var(--surface2)}
 .hist-group-lbl:first-child{border-top:none;margin-top:0}
 .hist-entry{display:flex;gap:10px;align-items:flex-start;padding:10px 16px;border-bottom:1px solid var(--border);transition:background .1s}
 .hist-entry:hover{background:var(--surface2)}
 .hist-entry:last-child{border-bottom:none}
 .hist-icon{width:28px;height:28px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
 .hist-icon-criou{background:rgba(40,181,72,.12);color:var(--green)}
 .hist-icon-editou{background:rgba(5,8,102,.1);color:var(--navy)}
 .hist-icon-concluiu{background:rgba(40,181,72,.18);color:var(--green)}
 .hist-icon-status{background:rgba(234,179,8,.12);color:#b45309}
 .hist-icon-excluiu{background:rgba(207,34,46,.1);color:var(--red)}
 .hist-entry-body{flex:1;min-width:0}
 .hist-entry-title{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
 .hist-entry-detail{font-size:11px;color:var(--muted);line-height:1.4}
 .hist-entry-time{font-size:10px;color:var(--muted);margin-top:3px}
 .hist-empty{padding:48px 20px;text-align:center;color:var(--muted);font-size:12px;display:flex;flex-direction:column;align-items:center;gap:10px}
 .hist-drw-footer{padding:12px 16px;border-top:1px solid var(--border);flex-shrink:0;display:flex;justify-content:flex-end}
 .hist-clear-btn{font-size:10px;padding:4px 12px;background:none;border:1px solid var(--border);border-radius:var(--r-sm);color:var(--muted);cursor:pointer;font-family:inherit;transition:all .12s}
 .hist-clear-btn:hover{border-color:var(--red);color:var(--red)}
 .resp-tag {
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 7px;border-radius:var(--r-lg);font-size:11px;font-weight:500;
  white-space:nowrap
 }
 .resp-placeholder { font-size:12px;color:var(--muted);font-style:italic }

/* NOTION-LIKE REFINEMENTS */
.kpi-card{box-shadow:var(--shadow-1)}
.tbl-box{box-shadow:var(--shadow-1)}
.obra-card{box-shadow:var(--shadow-1)}
body.light .kpi-card,body.light .tbl-box,body.light .obra-card{box-shadow:var(--shadow-1)}
/* better logo area */
.sb-logo{height:52px;padding:0 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;box-sizing:border-box}
/* page header refinement */
.ph h1{font-size:20px;font-weight:700;letter-spacing:-.3px}
.ph p{font-size:12px;color:var(--muted);margin-top:2px}
.kpi-val{font-size:26px;font-weight:700;letter-spacing:-.5px}
.kpi-delta.up{color:var(--green)}
.kpi-delta.warn{color:var(--yellow)}
/* table refinements */
th{font-size:10px;letter-spacing:.6px}
td{font-size:13px}
 
/* Proposta Comercial — Viewer A4 */
.prop-a4-viewer{background:#636363;padding:28px 16px;display:flex;flex-direction:column;align-items:center;box-sizing:border-box}
.prop-a4-sheet{width:210mm;min-height:297mm;background:#fff;box-shadow:0 4px 28px rgba(0,0,0,.38);margin-bottom:20px;box-sizing:border-box;padding:16mm 14mm;font-family:'Segoe UI',Arial,sans-serif;color:#2b2b2e;font-size:11.5px;line-height:1.55;position:relative;overflow:hidden}
.prop-a4-sheet:last-child{margin-bottom:0}
.prop-section{padding:0}

/* Estatísticas empresa */
.prop-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0 18px}
.prop-stat-box{background:#fafafe;border:1px solid #ececf2;border-top:3px solid #050866;border-radius:var(--r-sm);padding:10px 8px;text-align:center}
.prop-stat-num{font-size:17px;font-weight:700;color:#050866;line-height:1.1}
.prop-stat-lbl{font-size:8.5px;color:#a0a0a8;text-transform:uppercase;letter-spacing:.7px;margin-top:3px;line-height:1.3}
.prop-intro-text{font-size:11.5px;color:#444;margin:0 0 14px;line-height:1.65}

/* Casos de referência */
.prop-cases-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.prop-case-card{border:1px solid #ececf2;border-radius:var(--r-sm);overflow:hidden;page-break-inside:avoid;break-inside:avoid}
.prop-case-header{background:#050866;color:#fff;font-size:9.5px;font-weight:700;padding:7px 12px;letter-spacing:.6px;text-transform:uppercase}
.prop-case-body{padding:10px 12px}
.prop-case-type{font-size:9px;font-weight:700;color:#28B548;text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px}

/* Rodapé da proposta */
.prop-footer-bar{margin-top:20px;padding-top:10px;border-top:1px solid #ececf2;display:flex;align-items:center;justify-content:space-between}

/* Capa moderna */
.prop-cover{display:flex;flex-direction:column;height:calc(297mm - 32mm);gap:0}
.prop-cover-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:2px solid #050866;margin-bottom:0}
.prop-cover-logo img{height:34px;display:block}
.prop-address{font-size:8.5px;color:#a0a0a8;text-align:right;line-height:1.75}
.prop-cover-hero{position:relative;overflow:hidden;border-radius:var(--r-md);margin:18px 0 0;flex-shrink:0}
.prop-cover-hero-img{width:100%;height:234px;object-fit:cover;display:block}
.prop-cover-hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(12,12,68,.08) 0%,rgba(12,12,68,.76) 100%);display:flex;flex-direction:column;justify-content:flex-end;padding:20px 24px}
.prop-cover-hero-title{color:#fff;font-size:23px;font-weight:700;letter-spacing:5px;margin-bottom:5px;text-shadow:0 2px 8px rgba(0,0,0,.35)}
.prop-cover-hero-sub{color:rgba(255,255,255,.88);font-size:10px;letter-spacing:3.5px;text-transform:uppercase;font-weight:600;text-shadow:0 1px 4px rgba(0,0,0,.3)}
.prop-num-box{display:flex;gap:10px;width:100%;margin:16px 0 0}
.pn-num{flex:1;background:#fafafe;border:1px solid #ececf2;border-top:3px solid #050866;border-radius:var(--r-sm);padding:9px 14px}
.pn-num:nth-child(2){border-top-color:#28B548}
.pn-num .pn-lbl{font-size:8px;color:#a0a0a8;text-transform:uppercase;letter-spacing:1.5px;font-weight:700}
.pn-num .pn-val{font-size:14px;font-weight:700;color:#050866;margin-top:3px}
.pn-num:nth-child(2) .pn-val{color:#2b2b2e}
.prop-cover-bottom{border-top:1px solid #ececf2;padding-top:14px;margin-top:auto}
.prop-parties{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.prop-party-label{font-size:7.5px;color:#28B548;text-transform:uppercase;letter-spacing:2px;font-weight:700;margin-bottom:4px}
.prop-party-val{font-size:12px;font-weight:600;color:#2b2b2e;line-height:1.7}
.prop-cover-strip{margin-top:12px;padding-top:10px;border-top:1px solid #ececf2;text-align:center;font-size:8px;color:#c8c8d4;letter-spacing:1px;text-transform:uppercase}

/* Seções */
.prop-section-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:#050866;margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid #ececf2;position:relative}
.prop-section-title::before{content:"";position:absolute;left:0;bottom:-1px;width:28px;height:2px;background:#28B548}
.prop-item-box{background:#fff;border:1px solid #ececf2;border-left:3px solid #050866;border-radius:var(--r-xs);padding:12px 16px;margin-bottom:14px;page-break-inside:avoid}
.prop-item-title{font-size:11px;font-weight:700;color:#050866;margin-bottom:0;text-transform:uppercase;line-height:1.5}
.prop-blist{list-style:none;padding:0;margin:0}
.prop-blist li{font-size:11px;color:#55555c;padding:3px 0 3px 14px;position:relative;line-height:1.6}
.prop-blist li::before{content:"-";position:absolute;left:0;color:#28B548;font-weight:700}

/* Responsabilidades */
.prop-resp-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-bottom:6px}
.prop-resp-col{padding:0;page-break-inside:avoid;border-left:1px solid #ececf2;padding-left:20px}
.prop-resp-col:first-child{border-left:none;padding-left:0}
.prop-resp-col h4{font-size:10px;font-weight:700;color:#050866;text-transform:uppercase;letter-spacing:1px;margin:0 0 8px}

/* Modelo a ser contratado / produto */
.prop-product-figure{margin:10px 0;text-align:center;page-break-inside:avoid}
.prop-product-figure img{max-width:100%;max-height:160px;border-radius:var(--r-sm);border:1px solid #ececf2;object-fit:cover;display:block;margin:0 auto}
.prop-product-figure figcaption{font-size:9px;color:#a0a0a8;margin-top:5px;font-style:italic}

/* Condições comerciais */
.prop-table{width:100%;border-collapse:collapse;font-size:11.5px;margin-bottom:14px;page-break-inside:avoid}
.prop-table th{background:none;color:#050866;padding:6px 12px 8px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:700;border-bottom:2px solid #050866}
.prop-table th:not(:first-child),.prop-table td:not(:first-child){text-align:right}
.prop-table td{padding:9px 12px;border-bottom:1px solid #ececf2}
.prop-table tr:last-child td{font-weight:700;color:#050866;border-top:1px solid #050866;border-bottom:none}
.prop-cond-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin-bottom:14px;page-break-inside:avoid}
.prop-cond-item{padding:7px 0;font-size:11.5px;border-bottom:1px solid #ececf2;display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.prop-cond-lbl{font-size:10px;color:#a0a0a8;text-transform:uppercase;letter-spacing:1px;white-space:nowrap}
.prop-difal-note{background:none;border-left:3px solid #050866;border-radius:0;padding:8px 14px;font-size:10.5px;color:#55555c;margin-bottom:16px;page-break-inside:avoid}
.prop-validity{background:none;border-left:3px solid #28B548;border-radius:0;padding:8px 14px;font-size:11px;color:#55555c;margin-bottom:24px;page-break-inside:avoid}

/* Assinaturas */
.prop-sign-area{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:28px;page-break-inside:avoid}
.prop-sign-block{text-align:center}
.prop-sign-line{border-top:1px solid #cfcfd8;margin-bottom:8px}
.prop-sign-name{font-size:11px;font-weight:700;color:#050866;text-transform:uppercase;letter-spacing:.5px}
.prop-sign-role{font-size:10px;color:#a0a0a8;margin-top:2px}
.prop-date-line{text-align:right;font-size:10px;color:#a0a0a8;margin-top:14px}

@media print{
 @page{size:A4;margin:16mm 14mm}
 body>*:not(#modal-proposta-comercial):not(#forn-rel-bd){display:none!important}
 /* Modal wrapper */
 #modal-proposta-comercial{display:block!important;position:static!important;flex-direction:column!important;background:none!important;overflow:visible!important;height:auto!important;inset:auto!important}
 #prop-modal-toolbar{display:none!important}
 #prop-viewer-area{overflow:visible!important;background:transparent!important;padding:0!important;display:block!important}
 /* A4 Sheets — viram páginas físicas */
 .prop-a4-sheet{width:100%!important;min-height:auto!important;box-shadow:none!important;margin:0!important;padding:0!important;overflow:visible!important;break-after:page;page-break-after:always}
 .prop-a4-sheet:last-child{break-after:auto!important;page-break-after:avoid!important}
 /* Ajustes de conteúdo */
 .prop-cover{height:auto!important;min-height:auto!important}
 .prop-cover-hero-img{height:210px!important}
 .prop-section-title{break-inside:avoid;margin:14px 0 8px!important}
 .prop-product-figure img{max-height:180px!important}
 .prop-validity{margin-bottom:10px!important}
 .prop-difal-note{margin-bottom:8px!important}
 .prop-cond-grid{margin-bottom:8px!important}
 .prop-table{margin-bottom:10px!important}
 .prop-sign-area{margin-top:14px!important}
 .prop-item-box{padding:8px 14px!important;margin-bottom:10px!important}
 .prop-blist li{padding:2px 0 2px 14px!important}
}

/* Relatório de Orçamentos (Fornecedores) — mesma estratégia do print acima:
   #forn-rel-bd é filho direto do body (ver index.html), então escondendo
   todo o resto de body>* sobra só o modal na folha impressa. Dentro dele,
   escondemos a barra de filtros/botão de imprimir e viramos a tabela num
   documento simples — cabeçalho com o período/status filtrado (só existe
   pra impressão, ver #forn-rel-print-header) some na tela normal (display:
   none inline no HTML) e aparece aqui.
   IMPORTANTE: o "esconder todo o resto" de CADA modal de impressão precisa
   isentar (:not()) o id de TODOS os outros modais de impressão existentes,
   não só o próprio — senão a regra "esconde tudo, exceto #outro-modal" bate
   neste elemento (com especificidade maior que "#forn-rel-bd{display:block}"
   por causa do seletor "body" extra dentro do :not()) e o relatório sai em
   branco na impressão. Bug real já visto: a regra do Proposta Comercial
   escondia #forn-rel-bd sem querer. Ao adicionar um novo modal imprimível,
   isentar seu id nas duas regras (e nesta, se vier depois). */
@media print{
 body>*:not(#forn-rel-bd):not(#modal-proposta-comercial){display:none!important}
 #forn-rel-bd{display:block!important;position:static!important;background:none!important;padding:0!important;overflow:visible!important;inset:auto!important}
 #forn-rel-bd .modal{max-width:100%!important;box-shadow:none!important;border:none!important;margin:0!important}
 #forn-rel-bd .modal-header,#forn-rel-bd .modal-footer,#forn-rel-toolbar{display:none!important}
 #forn-rel-bd .modal-body{padding:0!important;overflow:visible!important;max-height:none!important}
 #forn-rel-print-header{display:block!important}
 #forn-relatorio-print table{width:100%!important;min-width:0!important}
 #forn-relatorio-print th,#forn-relatorio-print td{color:#000!important}
}

/* ── Side Panel ─────────────────────────────────────────────── */
#sp-overlay{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.32);opacity:0;pointer-events:none;transition:opacity var(--dur-slow,.22s) var(--ease-standard,ease)}
#sp-overlay.sp-open{opacity:1;pointer-events:all}
#sp-drawer{position:fixed;right:0;top:0;height:100vh;width:620px;min-width:360px;max-width:96vw;z-index:801;background:var(--surface);border-left:1px solid var(--border);box-shadow:-8px 0 40px rgba(0,0,0,.18);transform:translateX(100%);transition:transform var(--dur-slow,.22s) var(--ease-standard,cubic-bezier(.4,0,.2,1));display:flex;flex-direction:column}
#sp-drawer.sp-open{transform:translateX(0)}
#sp-resize{position:absolute;left:0;top:0;width:6px;height:100%;cursor:ew-resize;z-index:2;background:transparent;transition:background .2s;border-radius:3px 0 0 3px}
#sp-resize:hover,#sp-resize.dragging{background:rgba(91,91,214,.35)}
.sp-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border);flex-shrink:0;gap:10px}
.sp-htag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;padding:3px 8px;border-radius:var(--r-full);background:var(--navy-solid);color:#fff}
.sp-title{font-size:14px;font-weight:700;color:var(--text);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-xbtn{background:none;border:none;cursor:pointer;color:var(--muted);font-size:22px;line-height:1;padding:0 4px;border-radius:var(--r-xs);flex-shrink:0}
.sp-xbtn:hover{background:var(--surface2);color:var(--text)}
.sp-body{flex:1;overflow-y:auto;padding:18px}
.sp-field{margin-bottom:12px}
.sp-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:3px}
.sp-inp{font-size:13px;color:var(--text);padding:6px 10px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface2);width:100%;box-sizing:border-box;outline:none;font-family:inherit;transition:border-color .12s,background .12s}
.sp-inp:hover{border-color:rgba(139,148,158,.5)}
.sp-inp:focus{border-color:var(--navy);background:var(--surface2)}
/* Pedido explícito: campo readonly (ex.: Quantidade/Valor da obra,
   calculados automaticamente a partir dos Projetos) tinha exatamente a
   mesma aparência de um campo editável — até reagia a hover/focus como se
   fosse. Fundo diferente (var(--surface2) sempre, não só no hover),
   cursor "não permitido" e SEM reação a hover/focus deixam claro, sem
   precisar de texto extra, que ali não dá pra digitar. */
.sp-inp[readonly]{background:var(--surface2);color:var(--muted);cursor:not-allowed}
.sp-inp[readonly]:hover,.sp-inp[readonly]:focus{border-color:var(--border);background:var(--surface2)}
/* Caixa de busca do "+ Vincular" (Obras/Contatos vinculados, empresas.js) —
   visualmente igual ao antigo .srch-sel-drop embutido, mas com classe
   própria: .srch-sel-drop é reservada aos dropdowns flutuantes de verdade
   (Estado/Fase/Cargo), fechados por uma varredura genérica em document.click
   que este bloco embutido não deve disputar (ver comentário em
   _empLinkToggle, empresas.js). */
.emp-link-panel{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface)}
.sp-g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sp-g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.sp-stitle{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--navy);margin:18px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--border)}
.sp-actions{padding:12px 18px;border-top:1px solid var(--border);flex-shrink:0;display:flex;gap:8px;flex-wrap:wrap;background:var(--surface)}
/* ── Navegação por âncora do painel de obra ────────────────── */
/* Pedido explícito: o painel de Obra virou 1 página só com rolagem
   contínua — as "abas" (.spt-btn) não escondem/mostram mais nada, só
   rolam até a seção (.spt-panel, sempre visível) e destacam qual está
   ativa. A barra fica sticky no topo do .sp-body pra continuar
   funcionando como navegação enquanto o usuário rola (mesmo truque de
   margin negativa de antes, só que agora "grudada" em vez de estática). */
/* isolation+will-change: pedido explícito — durante o scroll real (mouse
   wheel/trackpad, não replicável só lendo getBoundingClientRect), o
   conteúdo logo abaixo (rótulo "Nome da obra") vazava por cima da barra
   por uma fração de segundo antes dela se "recolocar". Causa: #sp-drawer
   (ancestral) tem `transform` pro slide-in/out — o mesmo tipo de problema
   já corrigido antes pros dropdowns position:fixed (_srchSelFixedContainingBlock),
   só que aqui afeta o repaint de um position:sticky em vez do
   posicionamento. isolation:isolate + will-change:transform força a
   barra pra sua própria camada de composição, eliminando o lag de
   repaint sem mudar layout/espaçamento nenhum. */
.spt-bar{display:flex;gap:0;border-bottom:2px solid var(--border);margin:-18px -18px 18px;padding:0 18px;background:var(--surface);flex-shrink:0;overflow-x:auto;position:sticky;top:0;z-index:5;isolation:isolate;will-change:transform}
/* padding/fonte reduzidos (eram 14px/12px) — com a 7ª aba (Registros)
   somada às 6 originais + badges de contagem, o total media ~709px de
   largura natural contra ~615px disponíveis no painel em sua largura
   padrão (620px) — 94px de estouro, forçando uma barra de rolagem
   horizontal desnecessária mesmo sem o usuário ter encolhido o painel.
   Medido via getBoundingClientRect (não só olhando na tela) pra achar um
   valor com folga real, não só "cabe por 1px": com 10px 6px + 11px de
   fonte + badge mais compacto, a largura natural cai pra ~560px, ~55px
   de sobra. overflow-x:auto do .spt-bar continua como salvaguarda só pra
   quando o painel É encolhido manualmente abaixo do necessário. */
.spt-btn{font-size:11px;font-weight:600;padding:10px 6px;border:none;background:none;cursor:pointer;color:var(--muted);white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-2px;transition:color var(--dur-base,.15s) var(--ease-standard,ease),border-color var(--dur-base,.15s) var(--ease-standard,ease);font-family:inherit}
.spt-btn:hover{color:var(--text)}
.spt-btn.active{color:var(--navy);border-bottom-color:var(--navy)}
/* scroll-margin-top compensa a altura da .spt-bar sticky ao rolar até a
   âncora (scrollIntoView já respeita essa propriedade nativamente) — sem
   isso, a barra fixa cobriria a primeira linha de cada seção. Borda +
   respiro no topo de cada seção (exceto a 1ª) separam visualmente o fim
   de uma e o começo da próxima, já que agora ficam uma embaixo da outra
   na mesma rolagem, não mais em telas separadas. */
.spt-panel{display:block;scroll-margin-top:54px}
.spt-panel + .spt-panel{margin-top:28px;padding-top:24px;border-top:1px solid var(--border)}
.spt-badge{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;border-radius:var(--r-md);background:var(--border);color:var(--muted);font-size:9px;font-weight:700;padding:0 3px;margin-left:3px;vertical-align:middle}
.spt-badge.has-data{background:var(--navy-solid);color:#fff}
/* ── Cards de itens nas abas ───────────────────────────────── */
.sp-item-card{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;margin-bottom:8px;cursor:pointer;transition:border-color .15s}
.sp-item-card:hover{border-color:var(--navy)}
.sp-item-title{font-size:13px;font-weight:600;margin-bottom:6px}
.sp-item-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:11px;color:var(--muted)}
.sp-item-meta b{color:var(--text)}
.sp-empty{text-align:center;padding:32px 16px;color:var(--muted);font-size:12px;border:1px dashed var(--border);border-radius:var(--r-md)}

/* ── Cards de anexo em grade (scripts/lib/doc-cards.js) ──────────────────────
   Componente compartilhado por qualquer aba de detalhe que anexe
   documentos (Entregas/Projetos/Instalações...) — pedido explícito da
   usuária pra usar EXATAMENTE o mesmo padrão em todo lugar em vez de cada
   módulo reinventar seu próprio dropzone. Sempre 2 colunas fixas (pedido
   explícito, nada de auto-fit/auto-fill variando com a largura do
   painel). Miniatura real só pra imagem (signed URL em lote,
   _dcSignedUrlMap) com o nome do arquivo sempre visível por baixo;
   PDF/outros ganham um ícone de arquivo genérico (SVG monocromático,
   nenhum emoji em lugar nenhum do sistema — regra explícita). O card
   inteiro aceita arrastar-e-soltar (sem precisar clicar em "+ Anexar"). */
.doc-card-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:12px}
.doc-card{border:1px solid var(--border);border-radius:8px;padding:10px;background:var(--surface);display:flex;flex-direction:column;gap:8px;transition:border-color .15s,background .15s}
.doc-card.drag{border-color:var(--navy);background:rgba(59,130,246,.05)}
.doc-card-label{font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.doc-card-empty{font-size:10px;color:var(--muted);text-align:center;background:var(--surface2);border-radius:6px;min-height:56px;display:flex;align-items:center;justify-content:center}
.doc-card-thumbs{display:flex;flex-wrap:wrap;gap:8px}
.doc-card-thumb{width:64px;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;flex:0 0 auto}
.doc-card-thumb-box{position:relative;width:64px;height:56px;border:1px solid var(--border);border-radius:6px;overflow:visible;background:var(--surface2);display:flex;align-items:center;justify-content:center;transition:border-color .15s}
.doc-card-thumb:hover .doc-card-thumb-box{border-color:var(--navy)}
.doc-card-thumb-box img{width:100%;height:100%;object-fit:cover;display:block;border-radius:5px}
.doc-card-thumb-name{font-size:9px;color:var(--muted);text-align:center;max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Botão de excluir — só quando o card recebe removeJs (anexo editável do
   próprio registro; espelhos somente-leitura nunca passam removeJs, então
   nunca ganham este botão). Some por padrão, aparece ao passar o mouse. */
.doc-card-thumb-rm{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;background:var(--surface);border:1px solid var(--border);color:var(--muted);font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .12s,color .12s,border-color .12s;padding:0}
.doc-card-thumb:hover .doc-card-thumb-rm{opacity:1}
.doc-card-thumb-rm:hover{color:var(--red);border-color:var(--red)}
/* Link simples, sem caixa/borda própria — junto de .doc-card-empty ficaria
   "duas caixas empilhadas" quando a categoria está vazia. */
.doc-card-add{font-size:10px;font-weight:600;color:var(--navy);cursor:pointer;align-self:flex-start}
.doc-card-add:hover{text-decoration:underline}

/* ── Histórico de alterações (scripts/lib/historico.js) ──────────────────────
   Uma linha por alteração, no formato "Fulano alterou X de A para B" + a data
   embaixo em cinza. Usado igual nas 3 entidades (Obra/Projeto/Entrega). */
.hist-item{border:1px solid var(--border);border-radius:var(--r-md);padding:9px 11px;margin-bottom:7px;background:var(--surface)}
.hist-linha{font-size:12px;line-height:1.5;color:var(--text)}
.hist-linha + .hist-linha{margin-top:3px}
.hist-quando{font-size:10px;color:var(--muted);margin-top:5px}
.hist-de{color:var(--muted);text-decoration:line-through}
.hist-para{color:var(--green,#15803d);font-weight:600}

/* Aviso "outro usuário alterou este registro" — faixa própria entre o
   cabeçalho e o corpo rolável do painel de detalhe (#sp-aviso-slot,
   index.html), NÃO dentro de #sp-body: ali colidia com a margem negativa
   do .spt-bar sticky (pensada pra cancelar o padding do #sp-body só
   quando o .spt-bar é o primeiro filho), grudando as abas no aviso sem
   respiro nenhum. Como faixa própria, sempre visível e de ponta a ponta
   (sem raio de borda, mesmo tratamento de .sp-header/.sp-actions) — NÃO
   fecha o painel nem sobrescreve o que o usuário está digitando; ele
   decide quando recarregar (ver _rtAvisoAlteracaoExterna, realtime-sync.js). */
.sp-aviso-externo{display:flex;align-items:center;gap:10px;background:#fff8e1;border-bottom:1px solid #f0c36d;color:#7a5600;padding:10px 18px;font-size:12px;flex-shrink:0}
.sp-aviso-externo button{background:#7a5600;color:#fff;border:0;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;flex-shrink:0}
/* highlight clicked row */
tr.sp-active td{background:var(--yellow-dim)!important}
/* hover on clickable rows */
tbody[data-sp] tr{cursor:pointer}
tbody[data-sp] tr:hover td{background:var(--navy-dim)!important}
.mc-db-table{width:100%;border-collapse:collapse;font-size:12px;margin-top:10px}
.mc-db-table th{padding:6px 8px;text-align:left;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface)}
.mc-db-table td{padding:5px 8px;border-bottom:1px solid rgba(0,0,0,.04);vertical-align:middle}
.mc-db-table tr:hover td{background:rgba(0,0,0,.025)}
.mc-db-editable{width:100%;border:none;background:transparent;font-size:12px;color:var(--text);font-family:inherit;padding:2px 4px;border-radius:var(--r-xs)}
.mc-db-editable:focus{outline:none;background:var(--bg);box-shadow:0 0 0 2px var(--navy)}
.mc-db-vl{width:80px;text-align:right}
/* ── Supabase indicator ─────────── */
#db-dot{width:8px;height:8px;border-radius:50%;background:#888;display:inline-block;margin-right:4px;transition:background .4s}
#db-dot.ok{background:#22c55e}
#db-dot.err{background:#ef4444}
.db-badge{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);margin-right:8px;padding:4px 8px;border-radius:var(--r-full);border:1px solid var(--border)}
/* ── Kanban de Projetos ─────────────────────────────────────────────────────── */
.proj-view-toggle{display:flex;gap:2px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:3px}
.proj-view-btn{display:flex;align-items:center;gap:5px;padding:5px 12px;border:none;border-radius:var(--r-sm);font-size:12px;font-weight:500;cursor:pointer;color:var(--muted);background:transparent;font-family:inherit;transition:all .15s;white-space:nowrap}
.proj-view-btn:hover{color:var(--text)}
.proj-view-btn.active{background:var(--surface);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.15);font-weight:600}
/* Mesmo padrão visual do Kanban de Obras (.kanban-col, .kc-header, .obra-card
   acima) — min-width+max-width (não só flex-basis) pra travar a largura de
   verdade mesmo com texto longo dentro (Obra vinculada sem quebra de linha
   forçava a coluna a alargar além do previsto quando só havia flex-basis,
   sem min/max-width, pra segurar o tamanho). */
#proj-kanban{display:none;gap:16px;overflow-x:auto;padding-bottom:14px;align-items:flex-start}
.proj-kn-col{min-width:232px;max-width:232px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 10px;flex-shrink:0;display:flex;flex-direction:column}
.proj-kn-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:0 2px 10px;border-bottom:1px solid var(--border)}
.proj-kn-count{font-size:10px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:1px 7px}
.proj-kn-body{overflow-y:auto;max-height:calc(100vh - 320px);margin:0 -2px;padding:0 2px;border-radius:var(--r-sm);transition:background .12s,outline .12s}
.proj-kn-body.kc-dragover{background:var(--surface);outline:2px dashed var(--green);outline-offset:-2px}
.proj-kn-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow-1);cursor:pointer;transition:box-shadow .15s,border-color .15s;position:relative}
.proj-kn-card:hover{border-color:var(--green);box-shadow:var(--shadow-2)}
.proj-kn-card:last-child{margin-bottom:0}
.proj-kn-card.dragging{opacity:.4}
.proj-kn-title{font-size:13px;font-weight:600;line-height:1.4;color:var(--text);padding-right:16px}
.proj-kn-obra{font-size:11px;color:var(--muted);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-kn-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
/* Alça de arraste isolada do resto do card (ver comentário em
   _setupProjetosKanbanDnD, projetos.js) — só ela é draggable, o resto do
   card é clique puro sem nenhuma ambiguidade com o loop nativo de drag. */
.proj-kn-handle{position:absolute;top:12px;right:10px;width:14px;height:16px;display:flex;align-items:center;justify-content:center;color:var(--border);cursor:grab;flex-shrink:0}
.proj-kn-handle:hover{color:var(--muted)}
.proj-kn-handle:active{cursor:grabbing}
 /* ── Date inputs / selects: color-scheme para respeitar o tema ────────────
    Motivo: input[type="date"] e o popup nativo de <select> usam chrome do
    navegador que ignora as CSS variables do site — sem color-scheme, o
    ícone de calendário sai com cores do sistema (branco/cinza no dark mode
    do Windows) e, pior, o popup de opções do <select> renderiza com fundo
    CLARO do navegador por padrão mesmo com o tema escuro do app, herdando
    só o color:var(--text) (claro) do <select> — texto claro em cima de
    fundo claro, opções praticamente ilegíveis (relatado como "opções não
    formatadas corretamente" em vários campos do Gestor de Tarefas — todos
    são <select>, mesma causa raiz, não é por campo).
 ────────────────────────────────────────────────────────────────────────── */
 input[type="date"],input[type="datetime-local"],input[type="number"],select{color-scheme:dark}
 body.light input[type="date"],body.light input[type="datetime-local"],body.light input[type="number"],body.light select{color-scheme:light}
 /* Pedido explícito: campos DATE/NUMBER de .sp-inp (Instalações — Data
    início/fim, Nº dias executados, Despesa Total — e qualquer outro campo
    igual em outras abas) só ficavam com aparência correta durante hover ou
    edição. Causa: o ghost-input padrão (.sp-inp, fundo transparente em
    repouso, var(--surface2) só no hover/focus, ver comentário acima de
    .sp-inp) funciona bem pra texto puro, mas o chrome NATIVO do navegador
    (ícone de calendário + segmentos dia/mês/ano do <input type=date>, setas
    de incremento do <input type=number>) precisa de um fundo opaco por
    baixo pra desenhar essas peças corretamente — sobre fundo transparente
    elas saem visualmente quebradas/desalinhadas em repouso, e some assim
    que o hover aplica var(--surface2). Fundo permanente (não só hover) só
    pra estes 2 tipos — texto/textarea comuns continuam com o ghost-input
    de sempre, sem regressão. */
 input[type="date"].sp-inp,input[type="number"].sp-inp{background:var(--surface2);border-color:var(--border)}
 input[type="date"].tf-inp,input[type="date"].sp-inp{min-height:36px;line-height:1.4}.tf-r2 input[type="date"]{width:100%;box-sizing:border-box}
 /* Mesmo ícone discreto (opacidade reduzida até hover/focus) que a edição
    inline de Obras (.ie-input) já usa — sem isso o calendário nativo fica
    com opacidade cheia sempre, "pesado" ao lado do resto do formulário. */
 input[type="date"].tf-inp::-webkit-calendar-picker-indicator{opacity:.5;cursor:pointer;transition:opacity .15s}
 input[type="date"].tf-inp:hover::-webkit-calendar-picker-indicator,
 input[type="date"].tf-inp:focus::-webkit-calendar-picker-indicator{opacity:1}

/* Vidro (blur) removido de tudo, inclusive das camadas flutuantes (Central
   de Alertas, dropdowns de busca, topbar-ao-rolar) — mesmo motivo: custo de
   performance perceptível, sem contrapartida funcional. Fundo sólido. */
#alert-drw{
  background:rgb(28,30,44);
  border-left:1px solid rgba(255,255,255,.14);
}
body.light #alert-drw{
  background:#fff;
  border-left-color:rgba(20,20,40,.10);
}
.srch-sel-drop{
  background:rgb(28,30,44);
}
body.light .srch-sel-drop{
  background:#fff;
}
.topbar.tb-glass{
  background:rgb(28,30,44);
}
body.light .topbar.tb-glass{
  background:#fff;
}
.topbar{transition:background .2s ease}

/* ── Filtro Builder — sistema de filtros reutilizável (scripts/lib/filtro-builder.js) ── */
.fb-badge{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 4px;margin-left:5px;background:var(--navy-solid);color:#fff;font-size:9px;font-weight:700;border-radius:var(--r-full)}
/* Popover mais largo (460→560px): "Onde/Obra/é/valor" respiravam mal — nomes
   de obra/projeto compridos ficavam espremidos no dropdown de valor (item #1
   do pedido de UX). */
.fb-pop{position:absolute;top:calc(100% + 4px);left:0;z-index:200;width:560px;max-width:90vw;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-3);padding:14px}
.fb-hd{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:700;color:var(--text);margin-bottom:10px}
.fb-clear-all{background:none;border:none;color:var(--muted);font-size:11px;cursor:pointer;font-family:inherit}
.fb-clear-all:hover{color:var(--red)}
.fb-empty{font-size:12px;color:var(--muted);padding:8px 0 12px}
.fb-row{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.fb-lead-wrap{width:46px;flex-shrink:0}
.fb-lead{font-size:11px;color:var(--muted);font-weight:600}
.fb-logic-sel{width:100%;font-size:11px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:5px 3px;color:var(--text);font-family:inherit}
.fb-field-sel,.fb-op-sel,.fb-val-date,.fb-val-text,.fb-msel-btn{font-size:12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-sm);padding:6px 8px;color:var(--text);font-family:inherit;outline:none}
/* Campo e operador são rótulos curtos e previsíveis ("Obra", "é") — o valor
   é onde nomes compridos de verdade aparecem, então ganha proporcionalmente
   mais espaço da linha (1 : 0.85 : 1.5 em vez de 1.3 : 1.1 : 1.3 de antes). */
.fb-field-sel{flex:1;min-width:0}
.fb-op-sel{flex:.85;min-width:0}
.fb-val-date,.fb-val-text{flex:1.5;min-width:0;width:100%}
.fb-val-empty{flex:1.5}
.fb-val-range{flex:1.5;min-width:0;display:flex;align-items:center;gap:5px}
.fb-val-range .fb-val-date{flex:1;min-width:0;width:auto}
.fb-val-range-sep{font-size:11px;color:var(--muted);flex-shrink:0}
.fb-move{display:flex;flex-direction:column;flex-shrink:0}
.fb-move button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:7px;line-height:1;padding:1px 3px}
.fb-move button:hover:not(:disabled){color:var(--navy)}
.fb-move button:disabled{opacity:.25;cursor:default}
.fb-row-del{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;line-height:1;padding:2px 4px;flex-shrink:0}
.fb-row-del:hover{color:var(--red)}
.fb-add{background:none;border:none;color:var(--navy);font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;padding:4px 0}
.fb-msel-wrap{position:relative;flex:1.5;min-width:0}
.fb-msel-btn{width:100%;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Painel vira flex-column: busca fixa no topo (não rola), só a lista embaixo
   rola — listas grandes (Obra/Projeto/Melhoria/Responsável/Empresa...) sem
   isso exigiam rolar a lista inteira pra achar um valor (item #5 do pedido).
   min-width:100% + width:max-content: o painel nunca fica mais estreito que
   o botão que o abre, mas cresce pra acomodar nomes compridos em vez de
   truncar tudo (item #1) — max-width trava num teto seguro pra não vazar
   da tela em popovers muito largos. */
.fb-msel-panel{display:none;position:absolute;top:calc(100% + 3px);left:0;right:auto;z-index:10;min-width:100%;width:max-content;max-width:340px;max-height:320px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);box-shadow:var(--shadow-2);padding:6px}
.fb-msel-panel.open{display:flex;flex-direction:column}
.fb-msel-search{width:100%;box-sizing:border-box;font-size:12px;padding:6px 9px;margin-bottom:5px;border:1px solid var(--border);border-radius:var(--r-xs);background:var(--surface2);color:var(--text);font-family:inherit;outline:none;flex-shrink:0}
.fb-msel-search:focus{border-color:var(--navy)}
.fb-msel-list{overflow-y:auto;min-height:0;flex:1}
.fb-msel-item{display:flex;align-items:center;gap:6px;padding:6px 8px;font-size:12px;color:var(--text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:var(--r-xs)}
.fb-msel-item:hover{background:var(--surface2)}
.fb-msel-item-active{background:var(--navy-dim);color:var(--navy);font-weight:600}
/* .fb-msel-* nasceu pro popover ESTREITO de condição de filtro (.fb-pop,
   560px de largura, dividido com outros seletores da mesma linha) — daí o
   max-width:340px/ellipsis acima. No wizard de Nova Obra (Produto/
   Responsável/Tipologia do Telhado/Tipo de Telha) o campo ocupa uma coluna
   BEM mais larga (.modal-grid.col2 dentro do modal de 900px), e o teto
   estreito deixava o painel/itens "mal formatados" nesse contexto (texto
   cortado sem necessidade, sobrando espaço). .no-msel-wide escopa a
   correção só pro wizard — Filtro/Fornecedor continuam com o padrão
   estreito original, sem mudança nenhuma. */
.no-msel-wide .fb-msel-wrap{width:100%}
.no-msel-wide .fb-msel-panel{width:100%;max-width:none;box-sizing:border-box}
.no-msel-wide .fb-msel-item{white-space:normal;overflow:visible;text-overflow:clip}