/*
 * JR OS 2026.81 — responsividade do Orçamento PRO e das propostas.
 * As regras deste arquivo afetam somente a tela. O PDF A4 continua sendo
 * controlado pelos blocos @media print de proposta.html.
 */

/* Cérebro JR: no desktop o painel pode ser ocultado sem reservar espaço. */
body.jr-cerebro-fechado #dock{
  width:0!important;
  min-width:0!important;
  border:0!important;
  overflow:hidden!important;
  pointer-events:none;
}
#cerebro-backdrop{
  display:none;
  position:fixed;
  inset:0;
  z-index:180;
  border:0;
  background:rgba(2,6,17,.68);
  backdrop-filter:blur(3px);
}
#bt-cerebro[aria-expanded="true"]{
  border-color:rgba(167,139,250,.65);
  background:linear-gradient(135deg,rgba(56,189,248,.16),rgba(124,58,237,.25));
  color:#EDE9FE;
}
.dockhead .jr-cerebro-fechar{
  margin-left:auto;
  width:36px;
  min-width:36px;
  height:36px;
  padding:0;
  display:grid;
  place-items:center;
}

/* ---------- Orçamento PRO em celular/tablet ---------- */
@media screen and (max-width:1000px){
  body:has(#view-editor){
    overflow-x:hidden!important;
  }
  body:has(#view-editor) #app,
  body:has(#view-editor) .main,
  body:has(#view-editor) .workzone,
  body:has(#view-editor) #view-editor,
  body:has(#view-editor) #view-pipeline{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  /* O Cérebro vira um drawer e começa fechado no celular. */
  body:has(#view-editor) .main{position:relative}
  body:has(#view-editor) #dock,
  body.jr-cerebro-fechado:has(#view-editor) #dock{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:190;
    order:initial;
    width:min(92vw,420px)!important;
    min-width:0!important;
    max-width:420px;
    max-height:none!important;
    border:0!important;
    border-left:1px solid var(--line)!important;
    box-shadow:-22px 0 70px rgba(0,0,0,.48);
    overflow:hidden!important;
    transform:translateX(105%);
    transition:transform .24s ease;
    pointer-events:none;
  }
  body.jr-cerebro-aberto:has(#view-editor) #dock{
    transform:none;
    pointer-events:auto;
  }
  body.jr-cerebro-aberto:has(#view-editor) #cerebro-backdrop{display:block}
  body:has(#view-editor) #dock .dockhead{
    min-height:64px;
    padding-top:calc(12px + env(safe-area-inset-top,0px));
  }
  body:has(#view-editor) #dock .dockbody{overscroll-behavior:contain}
  body:has(#view-editor) #dock .dockfoot{
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
  }

  /* Cabeçalho sempre utilizável: uma linha rolável, sem empurrar a página. */
  body:has(#view-editor) .topbar{
    min-height:58px!important;
    max-width:100%;
    padding:7px 8px!important;
    gap:6px;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  body:has(#view-editor) .topbar::-webkit-scrollbar{display:none}
  body:has(#view-editor) .topbar>*{flex:0 0 auto}
  body:has(#view-editor) .topbar img{
    width:36px!important;
    height:36px!important;
    padding:6px!important;
  }
  body:has(#view-editor) .topbar .tt{display:none}
  body:has(#view-editor) .topbar .sp{display:none}
  body:has(#view-editor) .topbar .savestate{
    max-width:110px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  body:has(#view-editor) #view-pipeline{padding:10px}
  body:has(#view-editor) .pipeline-head{
    align-items:flex-start!important;
    gap:10px!important;
  }
  body:has(#view-editor) .pipeline-head>div:first-child{width:100%}
  body:has(#view-editor) #pipe-busca{
    width:100%!important;
    min-width:0!important;
  }
  body:has(#view-editor) .pipeline-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }
  body:has(#view-editor) .pipeline-actions .btn{
    width:100%;
    justify-content:center;
    text-align:center;
    white-space:normal;
  }
  body:has(#view-editor) .kanban{
    grid-template-columns:minmax(0,1fr);
  }

  body:has(#view-editor) .edhead{
    display:block;
    padding:9px 10px;
  }
  body:has(#view-editor) .edhead-main{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:7px;
  }
  body:has(#view-editor) .edhead input.title{
    grid-column:1/-1;
    width:100%;
    max-width:none;
    min-height:42px;
  }
  body:has(#view-editor) .edhead-main #ed-total{
    justify-self:end;
    align-self:center;
  }
  body:has(#view-editor) .edhead-actions{
    width:100%;
    display:block;
    padding-top:8px;
    margin-top:8px;
    border-top:1px solid #1b293e;
  }
  body:has(#view-editor) .edhead-actions .primary-actions,
  body:has(#view-editor) .edhead-actions .secondary-actions{
    width:100%;
    display:flex;
    flex-wrap:nowrap;
    justify-content:flex-start;
    gap:6px;
    overflow-x:auto;
    padding:2px 0 6px;
    scrollbar-width:thin;
    -webkit-overflow-scrolling:touch;
  }
  body:has(#view-editor) .edhead-actions .btn{flex:0 0 auto}
  body:has(#view-editor) .workflow-status{padding:7px 10px}
  body:has(#view-editor) .jornada-classica{padding:9px 10px}
  body:has(#view-editor) .edtabs{
    max-width:100%;
    padding:7px 8px;
    gap:5px;
    scroll-snap-type:x proximity;
  }
  body:has(#view-editor) .edtab-group{scroll-snap-align:start}
  body:has(#view-editor) .edtab{min-height:42px;padding:8px 11px}
  body:has(#view-editor) .edbody{padding:10px}
  body:has(#view-editor) .card{padding:11px;border-radius:12px}
  body:has(#view-editor) .grid2,
  body:has(#view-editor) .grid3,
  body:has(#view-editor) .libwrap{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Grids gerados pelos módulos antigos não podem impor 330/350px no celular. */
  body:has(#view-editor) #view-editor [style*="grid-template-columns"],
  body:has(#view-editor) .mback .mbox [style*="grid-template-columns"],
  body:has(#view-editor) .modal .mbox [style*="grid-template-columns"]{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body:has(#view-editor) :where(input,select,textarea){
    max-width:100%!important;
  }
  body:has(#view-editor) .unid .uh,
  body:has(#view-editor) .bhead{
    flex-wrap:wrap;
  }
  body:has(#view-editor) .unid .uh input{
    flex:1 1 190px;
    max-width:none!important;
  }
  body:has(#view-editor) .servline{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:7px;
    padding:8px 0;
    border-bottom:1px solid #1d2a3e;
  }
  body:has(#view-editor) .servline .ln{flex:0 0 38px}
  body:has(#view-editor) .servline .srv-desc,
  body:has(#view-editor) .servline .item-desc{
    flex:1 1 calc(100% - 58px)!important;
    min-width:0;
  }
  body:has(#view-editor) .servline .srv-qtd,
  body:has(#view-editor) .servline .srv-un,
  body:has(#view-editor) .servline .srv-pu,
  body:has(#view-editor) .servline .item-qtd,
  body:has(#view-editor) .servline .item-un,
  body:has(#view-editor) .servline .item-pu{
    width:auto!important;
    flex:1 1 86px!important;
    min-width:76px;
  }
  body:has(#view-editor) .servline .price{
    width:auto!important;
    flex:1 1 100%;
    text-align:left!important;
    padding:5px 2px;
  }
  body:has(#view-editor) .servline .badge-aplicado,
  body:has(#view-editor) .servline .badge-editado{
    order:3;
  }
  body:has(#view-editor) .libcol{max-height:none}

  body:has(#view-editor) .mback,
  body:has(#view-editor) .modal.on{
    position:fixed;
    inset:0;
    z-index:200;
    align-items:flex-end!important;
    justify-content:center;
    padding:0!important;
    background:rgba(2,6,17,.78);
    backdrop-filter:blur(4px);
  }
  body:has(#view-editor) .modal.on{display:flex}
  body:has(#view-editor) .mback .mbox,
  body:has(#view-editor) .modal.on .mbox{
    width:100%!important;
    max-width:100%!important;
    max-height:94dvh!important;
    margin:0!important;
    padding:16px 13px calc(18px + env(safe-area-inset-bottom,0px))!important;
    border-radius:20px 20px 0 0!important;
    overflow:auto!important;
    overscroll-behavior:contain;
  }
  body:has(#view-editor) .toast{
    right:10px;
    left:10px;
    width:auto;
    max-width:none;
    transform:none;
    text-align:center;
  }
}

@media screen and (max-width:430px){
  body:has(#view-editor) #bt-cerebro .jr-cerebro-label{display:none}
  body:has(#view-editor) .savestate{display:none}
  body:has(#view-editor) .pipeline-actions{grid-template-columns:minmax(0,1fr)}
  body:has(#view-editor) .qa{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Seis modelos de proposta em celular ---------- */
@media screen and (max-width:880px){
  body:has(#docwrap){
    width:100%;
    max-width:100%;
    overflow-x:hidden!important;
  }
  body:has(#docwrap) #docwrap,
  body.layout-luxo #docwrap,
  body.layout-editorial #docwrap,
  body.layout-contemporaneo #docwrap,
  body.layout-executivo #docwrap,
  body.layout-tecnico #docwrap,
  body.layout-compacto #docwrap{
    display:block;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    margin:0!important;
    padding:10px 8px calc(84px + env(safe-area-inset-bottom,0px))!important;
    overflow:visible!important;
  }
  body:has(#docwrap) #docwrap .page,
  body.layout-luxo #docwrap .page,
  body.layout-editorial #docwrap .page,
  body.layout-contemporaneo #docwrap .page,
  body.layout-executivo #docwrap .page,
  body.layout-tecnico #docwrap .page,
  body.layout-compacto #docwrap .page{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    min-height:0!important;
    height:auto!important;
    margin:0 auto 10px!important;
    padding:32px 20px 24px!important;
    border-radius:12px!important;
    box-shadow:0 10px 32px rgba(0,0,0,.25)!important;
    overflow:visible!important;
    contain:none!important;
  }
  body:has(#docwrap) #docwrap .page.capa,
  body.layout-editorial #docwrap .page.capa,
  body.layout-contemporaneo #docwrap .page.capa,
  body.layout-executivo #docwrap .page.capa,
  body.layout-compacto #docwrap .page.capa{
    min-height:max(540px,calc(100dvh - 78px))!important;
    padding:0!important;
    overflow:hidden!important;
  }
  body.layout-editorial #docwrap .page{display:none!important}
  body.layout-editorial #docwrap .page.jr-active{
    display:flex!important;
    min-height:calc(100dvh - 140px)!important;
  }
  body.layout-executivo #docwrap .page{display:none!important}
  body.layout-executivo #docwrap .page.jr-tab-active{display:flex!important}
  body.layout-executivo #docwrap .page.capa.jr-tab-active{
    min-height:max(540px,calc(100dvh - 122px))!important;
  }
  body.layout-compacto #docwrap .page:not(.capa){
    min-height:0!important;
    padding:26px 18px 22px!important;
  }

  body:has(#docwrap) .ctl{
    width:100%;
    max-width:100%;
    min-height:58px;
    padding:7px 8px;
    gap:6px;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  body:has(#docwrap) .ctl::-webkit-scrollbar{display:none}
  body:has(#docwrap) .ctl>*{flex:0 0 auto}
  body:has(#docwrap) .ctl .brandmark{width:34px;height:34px}
  body:has(#docwrap) .ctl>span{display:none}
  body:has(#docwrap) .ctl .sp{display:none}
  body:has(#docwrap) .ctl .btn{
    min-height:42px;
    padding:8px 11px;
    white-space:nowrap;
  }

  body:has(#docwrap) .page.framed:before{inset:9px!important}
  body:has(#docwrap) .page.capa .frame{inset:12px}
  body:has(#docwrap) .page.capa .inner{
    min-height:inherit!important;
    padding:25px 20px!important;
  }
  body:has(#docwrap) .capa .topline .lg{width:44px;height:44px}
  body:has(#docwrap) .capa h1,
  body.layout-editorial .page.capa h1{
    font-size:clamp(46px,15vw,68px)!important;
    line-height:.94;
    letter-spacing:-1px;
    overflow-wrap:anywhere;
  }
  body:has(#docwrap) .capa .sub{
    font-size:9px;
    line-height:1.6;
    letter-spacing:3px;
  }
  body:has(#docwrap) .capa .cli{
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px;
    margin-top:24px;
    padding-top:18px;
  }
  body:has(#docwrap) .capa .cli .cel b{
    font-size:17px;
    overflow-wrap:anywhere;
  }
  body:has(#docwrap) .phead{
    align-items:flex-start;
    gap:12px;
    margin-bottom:24px;
    padding-bottom:14px;
  }
  body:has(#docwrap) .phead h2,
  body.layout-editorial .phead h2{
    font-size:clamp(27px,9vw,36px);
    line-height:1.05;
    overflow-wrap:anywhere;
  }
  body:has(#docwrap) .phead .kick{letter-spacing:2.2px}
  body:has(#docwrap) .lede,
  body.layout-editorial .lede{
    font-size:18px;
    line-height:1.5;
  }
  body:has(#docwrap) .page p{
    font-size:14px;
    line-height:1.65;
  }
  body:has(#docwrap) .subhead{
    margin:26px 0 14px;
    letter-spacing:2px;
  }
  body:has(#docwrap) .hubgrid,
  body:has(#docwrap) .difgrid,
  body:has(#docwrap) .pfrow,
  body:has(#docwrap) .founder,
  body:has(#docwrap) .signrow,
  body:has(#docwrap) .metricgrid,
  body:has(#docwrap) .jr-compact-blocks{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body:has(#docwrap) .statrow{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    margin:24px 0;
  }
  body:has(#docwrap) .statrow .st{padding:18px 5px}
  body:has(#docwrap) .statrow .st b{font-size:clamp(25px,9vw,36px)}
  body:has(#docwrap) .statrow .st span{
    font-size:7px;
    letter-spacing:1px;
    overflow-wrap:anywhere;
  }
  body:has(#docwrap) .journey{
    grid-template-columns:minmax(0,1fr)!important;
    gap:0;
    margin-top:24px;
  }
  body:has(#docwrap) .jstep{
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    align-items:center;
    text-align:left;
    padding:12px 4px;
  }
  body:has(#docwrap) .jstep b{margin:0}
  body:has(#docwrap) .transition{
    min-height:62dvh;
    padding:30px 2px;
  }
  body:has(#docwrap) .transition h2{font-size:34px}
  body:has(#docwrap) .transition p{font-size:15px}
  body:has(#docwrap) .founder .ph{min-height:260px}
  body:has(#docwrap) .pfhero{height:230px}
  body:has(#docwrap) .pfrow .ph{height:190px}
  body:has(#docwrap) .blockPhoto{height:210px}
  body:has(#docwrap) .jr-instagram-proposta{height:260px}

  body:has(#docwrap) .disc-title{
    align-items:flex-start;
    flex-wrap:wrap;
    gap:10px;
  }
  body:has(#docwrap) .disc-title h3{
    min-width:0;
    font-size:25px;
    overflow-wrap:anywhere;
  }
  body:has(#docwrap) .disc-title .mtag{
    white-space:normal;
    overflow-wrap:anywhere;
  }
  body:has(#docwrap) .svc{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
    gap:8px;
    padding:11px 0;
  }
  body:has(#docwrap) .svc .sd{
    min-width:0;
    font-size:13px;
    line-height:1.5;
    overflow-wrap:anywhere;
  }
  body:has(#docwrap) .svc .sp{
    max-width:42vw;
    white-space:normal;
    text-align:right;
    line-height:1.4;
  }
  body:has(#docwrap) .gantt .row{
    grid-template-columns:minmax(0,1fr)!important;
    gap:7px;
    margin-bottom:15px;
  }
  body:has(#docwrap) table.inv{
    display:table!important;
    width:100%!important;
    table-layout:fixed;
    overflow-wrap:anywhere;
  }
  body:has(#docwrap) table.inv th,
  body:has(#docwrap) table.inv td{padding:12px 9px}
  body:has(#docwrap) table.inv th:last-child,
  body:has(#docwrap) table.inv td:last-child{
    width:38%;
    white-space:normal;
  }
  body:has(#docwrap) table.inv td .mm{
    display:block;
    margin:4px 0 0;
  }
  body:has(#docwrap) table.inv tr.total td{font-size:18px}
  body:has(#docwrap) .nextstep{
    grid-template-columns:42px minmax(0,1fr);
    gap:10px;
    padding:14px 2px;
  }
  body:has(#docwrap) .rodape{
    gap:12px;
    letter-spacing:1px;
    overflow-wrap:anywhere;
  }

  body:has(#docwrap) .jr-section-nav{
    top:auto!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100%!important;
    max-width:100%!important;
    display:flex;
    gap:4px;
    padding:7px max(7px,env(safe-area-inset-left,0px)) calc(7px + env(safe-area-inset-bottom,0px));
    overflow-x:auto;
    overflow-y:hidden;
    border-radius:0;
  }
  body:has(#docwrap) .jr-section-nav button{
    min-width:138px;
    min-height:42px;
    padding:8px;
  }
  body.layout-editorial>.jr-section-nav{display:none!important}
  body:has(#docwrap) .jr-slide-controls{
    right:auto;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    max-width:calc(100vw - 20px);
    padding:6px;
  }
  body:has(#docwrap) .jr-slide-controls button{
    min-height:40px;
    width:40px;
    height:40px;
  }
  body:has(#docwrap) .jr-tab-nav{
    top:58px;
    width:100%;
    max-width:100%;
    margin:0;
    padding:6px 8px;
    border-radius:0;
    scroll-snap-type:x proximity;
  }
  body.preview-local .jr-tab-nav{top:0}
  body:has(#docwrap) .jr-tab-nav button{
    flex:0 0 auto;
    min-width:132px;
    min-height:42px;
    scroll-snap-align:start;
  }

  body:has(#docwrap) #acoes-cliente{
    width:calc(100% - 16px);
    max-width:none;
    margin:10px 8px 24px;
    padding:18px 14px;
    border-radius:12px;
  }
  body:has(#docwrap) #acoes-cliente .acx{
    display:grid;
    grid-template-columns:minmax(0,1fr);
  }
  body:has(#docwrap) #acoes-cliente .acx .btn{
    width:100%;
    justify-content:center;
    min-height:46px;
  }
  body:has(#docwrap) #aceite-form [style*="grid-template-columns"]{
    grid-template-columns:minmax(0,1fr)!important;
  }
  body:has(#docwrap) #aceite-form [style*="grid-column"]{
    grid-column:auto!important;
  }
  body:has(#docwrap) #aceite-form>div:last-of-type{
    flex-wrap:wrap;
  }
}

@media screen and (max-width:360px){
  body:has(#docwrap) #docwrap .page,
  body.layout-compacto #docwrap .page:not(.capa){
    padding-right:16px!important;
    padding-left:16px!important;
  }
  body:has(#docwrap) .statrow{grid-template-columns:minmax(0,1fr)!important}
  body:has(#docwrap) .statrow .st{
    border-right:0;
    border-bottom:1px solid var(--line2);
  }
}