/* Orçamento PRO: área de trabalho larga + ferramentas à esquerda. */
body:has(#view-editor){--jr-orc-side-w:min(340px,calc(100vw - 40px));--jr-orc-top:59px}
body:has(#view-editor) #view-editor{position:relative;overflow:hidden}
body:has(#view-editor) .edbody{width:100%;padding:clamp(14px,2vw,30px);scrollbar-gutter:stable}
body:has(#view-editor) .pane{width:min(100%,1560px);max-width:none;margin-inline:auto}

/* O painel é sobreposto: fechado não rouba nenhum pixel da mesa. */
#jr-orc-sidebar{position:absolute;z-index:88;inset:0 auto 0 0;width:var(--jr-orc-side-w);display:flex;flex-direction:column;background:linear-gradient(180deg,rgba(10,18,32,.99),rgba(6,12,23,.99));border-right:1px solid #334761;box-shadow:22px 0 70px rgba(0,0,0,.48);transform:translateX(calc(-100% - 14px));transition:transform .22s ease;overflow:hidden;overscroll-behavior:contain}
body.jr-orc-side-open #jr-orc-sidebar,body.jr-orc-side-pinned #jr-orc-sidebar{transform:none}
.jr-orc-side-head{display:flex;align-items:center;gap:8px;min-height:54px;padding:9px 10px;border-bottom:1px solid #25344a;background:#0d1728}
.jr-orc-side-head>div{min-width:0;flex:1}.jr-orc-side-head b{display:block;font-size:12px}.jr-orc-side-head small{display:block;margin-top:2px;color:#8190a7;font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jr-orc-side-head button{min-width:38px;min-height:38px;padding:6px!important;justify-content:center}
#jr-orc-sidebar-scroll{flex:1;overflow:auto;padding-bottom:16px;scrollbar-gutter:stable}
#jr-orc-sidebar .edhead{display:block;padding:12px;border:0;background:transparent}
/* Era display:grid com 2 colunas — um grid item sem largura própria
   (a pílula de versão "v3", por exemplo) ESTICA pra preencher a coluna
   inteira por padrão (justify-items:stretch do grid), virando uma barra
   vazia enorme; e emparelhar "Última visualização"+botão na mesma célula
   espremia os dois num espaço menor que o necessário. flex-wrap é o
   mesmo comportamento já testado do .edhead-main de fora da gaveta
   (linha ~93 deste arquivo, nunca teve esse problema) — cada pílula
   ocupa só o que precisa e quebra linha sozinha quando não cabe, sem
   nenhuma esticada (2026-09-15, bug relatado com print pelo Júnior:
   "a barra lateral esta bugada... desformatada"). */
#jr-orc-sidebar .edhead-main{width:100%;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding-bottom:12px;border-bottom:1px solid #223149}
#jr-orc-sidebar .edhead input.title{width:100%;max-width:none;min-height:42px;font-size:15px;border:1px solid #293b55;border-radius:9px;padding:8px 10px;background:#09111f}
#jr-orc-sidebar .edhead-main #ed-total{width:100%;padding-top:3px;font-size:18px!important}
#jr-orc-sidebar .edhead-main .tag{flex:0 0 auto;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* jr-refino-2026-148.css tem uma regra de celular (@media max-width:860px,
   escrita ANTES desta gaveta existir, pensada pro cabeçalho compacto de UMA
   fileira só que o Orçamento PRO tinha antes) mirando os MESMOS seletores
   (.edhead-actions/.primary-actions/.jr147-budget-tools) — sem nenhum
   !important. Como ela soma um "body" (elemento) ao seletor, em alguns
   casos ela ainda EMPATA ou GANHA da tentativa de override abaixo mesmo
   com #jr-orc-sidebar (id) no início (especificidade compara ids, depois
   classes, depois elementos — um elemento a mais decide o empate quando o
   resto é igual). Resultado real, achado com print do Júnior (2026-09-15,
   "clica nos botoes e abre uma caixinha impossível de usar"): .edhead-actions
   ficava em display:flex (fileira) em vez de block (empilhado); o "⚙️ Mais
   ferramentas" (.jr147-budget-tools) ficava travado em 44px de largura (a
   largura pensada pra quando ele era só um ícone "⋯" solto no cabeçalho
   antigo); o painel de baixo (.jr147-budget-tools>div, 12 botões) herdava
   esses 44px como container, cada botão quebrava o texto em várias linhas
   ("Recuperação segura" virava 3-4 linhas dentro de 44px); e como
   .edhead-actions continuava flex com align-items:stretch, essa coluna
   gigante (pela quebra de linha) esticava TUDO ao lado (inclusive o
   resumo Salvar/Editar) pra mais de 1700px de altura — a tela toda parecia
   "bugada". Nenhuma regra antiga usa !important nestes seletores, então
   basta somar !important nas propriedades que ela vence — mais simples e
   mais seguro que reescrever a especificidade do zero (mesmo princípio já
   usado nas 2 linhas seguintes, primary-actions/jr-btn-lb, que já
   resolviam esse mesmo tipo de empate antes desta correção). */
#jr-orc-sidebar .edhead-actions{display:block!important;width:100%;padding-top:12px}
#jr-orc-sidebar .primary-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;width:100%}
#jr-orc-sidebar .primary-actions .btn{width:100%;min-height:44px;justify-content:flex-start!important;padding:8px 10px;font-size:10.5px}
#jr-orc-sidebar .edhead-actions>.jr147-budget-tools{width:100%!important;flex:0 0 auto!important;margin-top:8px}
#jr-orc-sidebar .edhead-actions>.jr147-budget-tools>summary{width:100%;height:auto!important;justify-content:space-between!important;min-height:42px;padding:9px 10px!important;font-size:11px!important}
#jr-orc-sidebar .edhead-actions>.jr147-budget-tools>summary:before{content:none!important}
#jr-orc-sidebar .edhead-actions>.jr147-budget-tools>div{position:static;width:100%!important;grid-template-columns:1fr!important;max-height:none;margin-top:7px;box-shadow:none}
#jr-orc-sidebar .edhead-actions>.jr147-budget-tools>div>*{width:100%!important;justify-content:flex-start!important;min-height:42px!important;font-size:10.5px!important}
#jr-orc-sidebar .workflow-status{padding:10px 12px;border-block:1px solid #223149;background:#0a1424;overflow:hidden}
#jr-orc-sidebar .workflow-status i{width:10px;flex-basis:10px}
#jr-orc-sidebar .workflow-status span{font-size:8.5px}
#jr-orc-sidebar .jornada-classica{padding:10px 12px}
#jr-orc-sidebar .jornada-passos{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#jr-orc-sidebar .jornada-passo{min-width:0;min-height:60px}
#jr-orc-sidebar .edtabs{display:block;padding:10px 12px;border:0;background:transparent;overflow:visible}
#jr-orc-sidebar .edtab-group{display:grid;grid-template-columns:1fr;gap:4px;margin-bottom:8px;padding:7px;border-radius:12px}
#jr-orc-sidebar .edtab-group>span{padding:3px 4px 7px;margin:0}
#jr-orc-sidebar .edtab{width:100%;min-height:42px;padding:9px 10px;border-radius:8px;text-align:left}
#jr-orc-sidebar .edtab.on{background:linear-gradient(135deg,rgba(233,30,140,.22),rgba(56,189,248,.11));border-color:rgba(233,30,140,.5);box-shadow:inset 3px 0 #e91e8c}

#jr-orc-sidebar-tab{position:absolute;z-index:87;left:0;top:50%;transform:translateY(-50%);width:34px;min-width:34px;height:116px;padding:6px 4px;border:1px solid #3c506d;border-left:0;border-radius:0 12px 12px 0;background:linear-gradient(180deg,#182942,#101b2e);color:#dce7f6;box-shadow:10px 0 26px rgba(0,0,0,.34);cursor:pointer;font:800 10px/1.2 system-ui;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:.5px}
#jr-orc-sidebar-tab:before{content:'☰';font-size:16px;margin-bottom:7px}
body.jr-orc-side-open #jr-orc-sidebar-tab,body.jr-orc-side-pinned #jr-orc-sidebar-tab{opacity:0;pointer-events:none}
#jr-orc-sidebar-tab:focus-visible,#jr-orc-sidebar button:focus-visible{outline:3px solid #f472b6;outline-offset:2px}
#jr-orc-side-backdrop{display:none;position:absolute;z-index:86;inset:0;border:0;background:rgba(2,6,17,.68)}

/* Pipeline escalável. */
.jr-pipe-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 13px;padding:10px;border:1px solid #223149;border-radius:13px;background:rgba(10,18,32,.78)}
.jr-pipe-controls label{display:flex;align-items:center;gap:6px;color:#91a0b6;font-size:10px;font-weight:800}.jr-pipe-controls select{width:auto;min-width:150px;min-height:40px}
.jr-pipe-view{display:inline-flex;gap:4px;margin-left:auto;padding:3px;border:1px solid #263750;border-radius:10px;background:#08111f}.jr-pipe-view .btn{min-height:36px}.jr-pipe-view .btn.on{border-color:#e9258c;background:rgba(233,37,140,.17);color:#fff}
.jr-pipe-summary{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px}.jr-pipe-chip{flex:0 0 auto;min-height:42px;padding:7px 11px;border:1px solid #263750;border-radius:10px;background:#0c1728;color:#b9c5d6;text-align:left;cursor:pointer;transition:.15s}.jr-pipe-chip b{display:block;font-size:13px;color:#fff}.jr-pipe-chip small{font-size:9px}.jr-pipe-chip:hover{border-color:#3d5679;background:#101f36}.jr-pipe-chip.on{border-color:#e9258c;background:rgba(233,37,140,.12)}
/* Quadro (kanban): só entram colunas com pelo menos 1 proposta (ver
   renderPipeline em orcamentos.html) — por isso vira grade responsiva que
   se ajusta ao número real de colunas, em vez de rolagem horizontal fixa
   pensada pras 10 etapas inteiras sempre visíveis. */
.kanban.jr-pipe-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px;align-items:start}.kanban.jr-pipe-board .kcol{max-height:calc(100vh - 245px);overflow:auto;scrollbar-gutter:stable}
.kanban.jr-pipe-list{display:block}
/* As colunas (título, status, valor+anel, ações) precisam alinhar entre
   propostas diferentes — antes cada .jr-pipeline-row era seu PRÓPRIO grid
   isolado (grid-template-columns declarado na linha, não na lista), então
   o navegador recalculava a largura de cada coluna por linha, a partir só
   do conteúdo DAQUELA linha (ex.: a coluna de ações, que é "auto" e varia
   de largura conforme a linha tem ou não o botão de follow-up/tag
   "aguardando obra") — sobrava/faltava espaço diferente em cada linha, e
   as colunas 1-3 (compartilhando o espaço restante por fr) saíam com
   largura ligeiramente diferente linha a linha, desalinhando ícone/status/
   valor entre propostas (2026-09-15, relato do Júnior: "os alinhamentos
   entre as linhas... esta bagunçado"). Corrigido movendo a definição de
   colunas pra cá (a LISTA) e cada linha vira um subgrid dessas mesmas
   colunas (ver .jr-pipeline-row abaixo) — agora existe um único conjunto
   de larguras de coluna, compartilhado por todas as linhas. */
.jr-pipeline-list{display:grid;grid-template-columns:minmax(230px,2fr) minmax(165px,1fr) minmax(150px,.85fr) auto;gap:9px 14px}
/* Remake visual do pipeline (2026-09-14, pedido do Júnior: "melhore o
   design pra valer"). Cada linha ganhou uma barra de destaque à esquerda
   (âmbar = follow-up atrasado, verde = aguardando virar obra — mesma
   linguagem de "borda colorida indica estado" já usada em telas como
   monitoramento.html), etapa colorida por estágio (STATUS_COR), selo de
   visualização como contorno discreto (não compete com a etapa) e um anel
   de qualidade (conic-gradient) no lugar do texto solto — mais informação
   reconhecível de relance, no mesmo espaço de antes. */
.jr-pipeline-row{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:center;column-gap:14px;padding:13px 16px 13px 18px;border:1px solid #23344c;border-left:4px solid transparent;border-radius:12px;background:linear-gradient(135deg,#101c30,#0c1627);cursor:pointer;transition:.18s;position:relative;isolation:isolate;overflow:hidden}
/* Foto da proposta (capa/portfólio, mesma que a Apresentação já usa) como
   fundo bem discreto só na vista em LISTA (2026-09-18, pedido do Júnior:
   "uma imagem no canto do box, bem suave dando um fade e sumindo até a
   metade do box") — nunca no quadro/kanban (.kcard), que é mais apertado
   e já usa outro layout. `--jr-pipe-img` é uma custom property só-por-
   linha, escrita inline por cardPipelineLista() (`style="--jr-pipe-img:
   url(...)"`); sem imagem, a var fica ausente e o fallback `none` faz o
   ::before inteiro ficar invisível, sem nenhum resquício visual. `mask-
   image` (não `background`) é o que faz a foto em si desaparecer — nunca
   um degradê de cor por CIMA da foto, que só a escureceria/clarearia sem
   nunca revelar o fundo do card por baixo dela. `z-index:-1` + `isolation:
   isolate` no pai garantem que a foto fique ATRÁS do texto/pílulas/botões
   (que são conteúdo normal, sem position — um `::before` absoluto com
   z-index 0/auto pintaria por CIMA deles, não atrás; -1 mais isolamento
   evita isso sem vazar pra outras linhas da lista). */
.jr-pipeline-row::before{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--jr-pipe-img,none);background-position:right center;background-size:cover;background-repeat:no-repeat;opacity:.5;-webkit-mask-image:linear-gradient(to left,#000 0%,transparent 50%);mask-image:linear-gradient(to left,#000 0%,transparent 50%)}
/* Só os lados topo/direita/baixo reagem ao hover — border-left carrega o
   acento de estado (alerta/aguardando obra) e não pode ser mascarado pelo
   rosa de hover, senão o sinal "some" bem na hora em que a pessoa mais
   olha pra linha (2026-09-14, polimento pedido pelo Júnior). */
.jr-pipeline-row:hover{border-top-color:rgba(233,30,140,.5);border-right-color:rgba(233,30,140,.5);border-bottom-color:rgba(233,30,140,.5);transform:translateY(-1px);box-shadow:0 10px 26px rgba(3,7,18,.35)}
.jr-pipeline-row:not(.jr-row-alerta):not(.jr-row-obra):hover{border-left-color:rgba(233,30,140,.5)}
.jr-pipeline-row:focus-visible{outline:3px solid #f472b6;outline-offset:2px}
.jr-pipeline-row.jr-row-alerta,.kcard.jr-row-alerta{border-left-color:#f59e0b}
.jr-pipeline-row.jr-row-obra,.kcard.jr-row-obra{border-left-color:#34d399}
.jr-pipe-id h3{margin:0;font-size:14px;font-weight:800}
.jr-pipe-id p{margin:4px 0 0;color:#8190a7;font-size:10.5px}
.jr-pipe-code{color:#7dd3fc;font-weight:800}
.jr-pipe-track{min-width:0}
.jr-pipe-pills{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.jr-pipe-track>p{margin:6px 0 0;color:#7c8ba0;font-size:9.5px}
.jr-viz-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:9.5px;font-weight:800;white-space:nowrap;border:1px solid transparent}
.jr-viz-chip.on{border-color:rgba(52,211,153,.4);color:#6ee7b7;background:rgba(52,211,153,.07)}
.jr-viz-chip.off{border-color:rgba(148,163,184,.3);color:#8393a8;background:transparent}
/* Corrigido 2026-09-17, relato do Júnior: "os círculos ali das
   porcentagens de confiabilidade do orçamento, eles estão desalinhados...
   deixa essa porcentagem um pouco mais afastada dos ícones". Causa: o
   anel (.jr-qring) e o texto do valor viviam juntos num flex com
   justify-content:flex-end — o GRUPO INTEIRO (anel+valor) ficava colado
   na borda direita da coluna, então a posição horizontal do anel variava
   de linha pra linha conforme a LARGURA do texto do valor ao lado dele
   (um "R$ 1.200" e um "R$ 185.400,00" empurram o anel pra pontos
   diferentes) — e o grupo inteiro ficava colado nos ícones de ação da
   coluna seguinte, já que "flex-end" o encostava na borda. Corrigido com
   grid de 2 colunas fixas (36px pro anel + o resto pro texto): o anel
   agora sempre cai na MESMA posição horizontal em toda linha, e como o
   texto do valor não precisa mais encostar na borda direita da coluna
   pra "ancorar" o anel, sobra respiro de verdade antes dos ícones. */
.jr-pipeline-row .jr-pipe-value{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:10px}
/* Escopado a ">div>b" (não só ".jr-pipe-value b"), de propósito: o anel
   de qualidade (.jr-qring, ver abaixo) também mora dentro de .jr-pipe-value
   e também tem um <b> dentro — um seletor genérico ".jr-pipe-value b" bate
   nos DOIS, e como (0,2,1) é mais específico que ".jr-qring b" (0,1,1), o
   texto do valor (display:block, 13px, cor verde fixa) vencia e quebrava o
   centro do anel: o número da qualidade saía gigante, fora do centro, sem
   a cor por variável (--c). Achado com print do Júnior, 2026-09-15. Ao
   adicionar qualquer <b> novo dentro de .jr-pipe-value, manter esse
   escopo — nunca voltar a ".jr-pipe-value b" solto. */
.jr-pipeline-row .jr-pipe-value>div>b{display:block;font-weight:900;color:#6ee7b7;font-size:13px;white-space:nowrap}
.jr-pipeline-row .jr-pipe-value small{display:block;color:#5c6b80;font-size:8.5px;text-transform:uppercase;letter-spacing:.6px;margin-top:2px}
.jr-qring{--p:0;--c:#34D399;position:relative;flex:0 0 auto;display:inline-block;width:36px;height:36px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.09) 0)}
.jr-qring:before{content:'';position:absolute;inset:3px;border-radius:50%;background:#0c1627}
.jr-qring b{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:9.5px;font-weight:900;color:var(--c)}
.jr-pipeline-row .jr-pipe-actions{display:flex;gap:4px;justify-content:flex-end}.jr-pipeline-row .jr-pipe-actions .btn{min-width:36px;min-height:36px;justify-content:center;padding:5px 7px}
/* Ícones de ação do pipeline ganham um fundo sutil na cor do próprio
   ícone (--ic, setado inline por botão) em vez do cinza-fantasma padrão
   de .btn.gh — sem inventar uma classe de cor nova por ação (2026-09-14,
   polimento pedido pelo Júnior: "os botões de ação ficaram soltos"). */
.jr-pipe-icon{--ic:#94A3B8;color:var(--ic)!important;background:color-mix(in srgb,var(--ic) 10%,transparent)!important;border-color:color-mix(in srgb,var(--ic) 30%,transparent)!important;transition:.15s}
.jr-pipe-icon:hover{background:color-mix(in srgb,var(--ic) 22%,transparent)!important;border-color:var(--ic)!important;transform:translateY(-1px)}
.jr-pipeline-more{display:flex;justify-content:center;margin:13px 0}.jr-pipeline-empty{padding:34px;text-align:center;border:1px dashed #31445f;border-radius:14px;color:#91a0b6}

@media(max-width:1000px){
  body:has(#view-editor){--jr-orc-side-w:min(92vw,390px)}
  #jr-orc-sidebar{position:fixed;top:0;bottom:var(--jr-doca,0px);max-height:100dvh}
  #jr-orc-side-backdrop{position:fixed}
  body.jr-orc-side-open #jr-orc-side-backdrop,body.jr-orc-side-pinned #jr-orc-side-backdrop{display:block}
  #jr-orc-sidebar-tab{position:fixed;top:52%;height:104px}
  /* assets/jr-mobile-propostas-2026-81.css tem uma regra pra ".edhead-main"
     escrita ANTES desta gaveta existir — um cabeçalho fixo no topo da
     página que recolhe ao rolar (max-height:60px;overflow:hidden;
     flex-wrap:nowrap), nunca atualizada depois que jr-orcamento-
     workspace-2026-242.js passou a REALOCAR esse mesmo elemento pra
     dentro da gaveta. Como ela usa "body:has(#view-editor) .edhead-main"
     (sem exigir um ancestral específico), ela ainda bate no elemento
     realocado — e por causa do peso de especificidade do :has(#id) (um
     ID inteiro), ela ganha até da tentativa de override abaixo que já
     existia aqui. Resultado: no celular, dentro da gaveta, o cabeçalho
     ficava cortado em 60px com tudo numa linha só sem quebrar — exatamente
     o "trava e fica em cima de outros botões" relatado pelo Júnior
     (2026-09-15, com print). Corrigido subindo a especificidade de propósito
     (prefixo "body:has(#view-editor) #jr-orc-sidebar", nunca menos específico
     que a regra que está sendo batida) pra cada propriedade que a regra
     antiga mexe — título, pílulas e total incluídos, não só o container. */
  body:has(#view-editor) #jr-orc-sidebar .edhead{display:block;padding:12px}
  body:has(#view-editor) #jr-orc-sidebar .edhead-main{display:flex;flex-wrap:wrap;max-height:none;opacity:1;overflow:visible;margin:0;pointer-events:auto}
  body:has(#view-editor) #jr-orc-sidebar .edhead-main.jr-recolhido{max-height:none;opacity:1;pointer-events:auto}
  body:has(#view-editor) #jr-orc-sidebar .edhead input.title{grid-column:unset;flex:unset;width:100%;max-width:none;min-height:42px;font-size:15px}
  body:has(#view-editor) #jr-orc-sidebar .edhead-main select#ed-status{max-width:none}
  body:has(#view-editor) #jr-orc-sidebar .edhead-main .tag{display:inline-flex;flex:0 0 auto}
  body:has(#view-editor) #jr-orc-sidebar .edhead-main #ed-total{width:100%;font-size:18px}
  #jr-orc-sidebar .primary-actions .btn{font-size:10.5px!important}
  #jr-orc-sidebar .primary-actions .jr-btn-lb{display:inline!important}
  .jr-pipe-controls{display:grid;grid-template-columns:1fr 1fr}.jr-pipe-controls label{display:block}.jr-pipe-controls select{width:100%;margin-top:4px}.jr-pipe-view{margin:0;align-self:end}.jr-pipe-view .btn{flex:1}
  .jr-pipeline-list{grid-template-columns:minmax(0,1fr) auto}.jr-pipeline-row>div:nth-child(2){grid-column:1/-1}.jr-pipeline-row .jr-pipe-actions{grid-column:1/-1;justify-content:flex-start}
}
@media(max-width:600px){
  body:has(#view-editor) .edbody{padding:10px 9px 18px}
  .jr-pipe-controls{grid-template-columns:1fr}.jr-pipe-view{width:100%}.jr-pipe-view .btn{width:50%;justify-content:center}.jr-pipeline-row{padding:11px}.kanban.jr-pipe-board{grid-template-columns:1fr}.kanban.jr-pipe-board .kcol{max-height:none}
}
@media(prefers-reduced-motion:reduce){#jr-orc-sidebar,.jr-pipeline-row{transition:none!important}}