/* JR OS 2026.141 — ergonomia: o que o dedo alcança e o olho encontra.
 *
 * As fotos das telas mostraram três problemas concretos, todos no celular:
 *  1. DUAS barras inferiores, uma por cima da outra, mais um botão flutuante
 *     por cima das duas. O JR pediu explicitamente que isso nunca acontecesse.
 *  2. 22% da altura do celular gasta em barra antes do primeiro conteúdo útil.
 *  3. Texto vazando do cartão "Status rápido" (0 CONVERSA(S PENDENTE( ).
 *
 * Nada aqui muda cor: a paleta atual continua igual, como foi pedido.
 */

/* ------------------------------------------------------ 1. o rodapé do celular
   Uma barra inferior só. Quando a tela já tem a dela, a compartilhada some. */
body.jr-tem-rodape-proprio .jr-ux-mobile-nav{display:none!important}

/* Tudo que flutua sobe acima do rodapé, em vez de pousar em cima dele. */
:root{--jr-rodape:0px}
@media(max-width:900px){
  body.jr-tem-rodape .jr-flutua,
  body.jr-tem-rodape #jr-version-sentinel,
  body.jr-tem-rodape #jr-ux-launcher{bottom:calc(var(--jr-rodape) + 12px)!important}
  /* No celular a navegação já está no rodapé: o atalho de teclado não serve. */
  #jr-ux-launcher{display:none!important}
}

/* ------------------------------------------------- 2. altura do topo no celular
   A trilha e as telas irmãs cabem numa faixa só, que rola de lado. */
@media(max-width:760px){
  .jr-nav{position:relative}
  .jr-nav::after{content:'';position:absolute;right:0;top:0;bottom:0;width:32px;background:linear-gradient(to left,rgba(7,11,18,.95),transparent);pointer-events:none;z-index:10}
  .jr-nav-in{padding:6px 10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px}
  .jr-nav-in::-webkit-scrollbar{display:none}
  .jr-nav-trilha{flex-wrap:nowrap;white-space:nowrap;font-size:11.5px}
  /* No celular a trilha vira só o botão de voltar à Central. */
  .jr-nav-trilha>span:not(.sep){display:none}
  .jr-nav-trilha .sep{display:none}
  .jr-nav-irmas{margin-left:0;width:auto;flex-wrap:nowrap}
  .jr-nav-irmas a{font-size:12px;padding:0 11px;min-height:36px}
  .jr-nav-irmas-wrap{flex:none;margin-left:0}
}

/* ------------------------------------------------ 3. texto que vazava do cartão
   Regra geral: rótulo de cartão e de indicador quebra linha em vez de
   escapar pela borda. */
/* min-width:0 deixa o cartão encolher em vez de estourar a linha.
   O que NÃO se faz aqui: overflow-wrap:anywhere global — isso parte palavra no
   meio e transforma "0 obra(s) ativa(s)" numa coluna de uma letra por linha.
   Quando falta espaço, o certo é a coluna quebrar, não a palavra. */
.jr-ergo .metric,.jr-ergo .kpi,.jr-ergo .card,.jr-ergo .row,.jr-ergo .switch,.jr-ergo .chip,.jr-ergo .tag,
.jr-ergo [class*="status"],.jr-ergo [class*="badge"],.jr-ergo [class*="pill"]{min-width:0}
.jr-ergo .row small,.jr-ergo .card small{overflow-wrap:break-word}

/* Coluna espremida: quando duas colunas não cabem lado a lado no celular,
   elas passam a ficar uma embaixo da outra. Medido no navegador, não chutado. */
.jr-ergo .jr-empilha{flex-wrap:wrap!important;display:flex!important}
.jr-ergo .jr-empilha>.jr-coluna-cheia{flex:1 1 100%!important;width:100%!important;min-width:0!important;max-width:none!important}
@media(max-width:760px){.jr-ergo .jr-uma-coluna{grid-template-columns:1fr!important}}
.jr-ergo .tag,.jr-ergo .chip,.jr-ergo [class*="badge"]{line-height:1.35}
/* Pílula com frase inteira dentro vira faixa retangular: redondo com texto
   quebrado em quatro linhas fica pior do que o corte que existia antes. */
.jr-ergo .jr-pilula-larga{
  border-radius:11px!important;
  white-space:normal!important;
  display:flex!important;align-items:center;gap:8px;
  width:100%;text-align:left;justify-content:flex-start;
  padding:10px 13px!important;line-height:1.4;
}
/* Espaço para o que flutua, para nenhum botão pousar em cima de conteúdo. */
:root{--jr-flutuante:0px}
.jr-ergo #main,.jr-ergo main,.jr-ergo .shell{padding-bottom:calc(var(--jr-rodape) + var(--jr-flutuante) + 20px)}

/* ------------------------------------------------------ 4. respiro e hierarquia
   O número é o que importa num painel; o título decorativo, não. */
@media(max-width:760px){
  .jr-ergo h1{font-size:clamp(19px,5.4vw,25px);line-height:1.18}
  .jr-ergo .hero h1,.jr-ergo .hero h2{font-size:clamp(19px,5.4vw,24px)}
  /* Fileira de botões vira uma coluna de alvos largos, não três linhas soltas. */
  .jr-ergo .actions,.jr-ergo .acoes{width:100%}
  .jr-ergo .actions>.btn,.jr-ergo .acoes>.btn{flex:1 1 calc(50% - 5px);min-width:140px}
}

/* ------------------------------------------------------------ 5. zona do polegar
   Espaço no fim da página para o conteúdo não morrer atrás do rodapé. */
@media(max-width:900px){
  /* JR 2026.147 — esta regra ganha da .jr-ergo #main (importante + mais
     específica) e, até aqui, esquecia de contar --jr-flutuante: qualquer
     botão flutuante (o avatar do Cérebro JR, jr83-doca) ficava por cima dos
     últimos ~70px de conteúdo em toda tela com rodapé, no celular. */
  body.jr-tem-rodape #main,body.jr-tem-rodape main,body.jr-tem-rodape .shell{
    padding-bottom:calc(var(--jr-rodape) + var(--jr-flutuante) + 22px)!important;
  }
}

/* ------------------------------------------------------------- 6. estados vivos
   Botão que está trabalhando precisa parecer que está trabalhando. */
.jr-ergo button[aria-busy="true"]{opacity:.62;pointer-events:none}
.jr-ergo button:active:not(:disabled){transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){.jr-ergo button:active:not(:disabled){transform:none}}

/* Bloco recolhido não pode continuar ocupando a altura de quando estava aberto:
   sobrava um retângulo vazio do tamanho do que ele escondia. */
.jr-ergo details.jr-card,.jr-ergo details.card{align-self:start}
.jr-ergo details>summary::-webkit-details-marker{display:none}
.jr-ergo details>summary{min-height:44px}

/* ------------------------------------------------------------------ *
 * Abas do portal do cliente e do arquiteto — 2026.136
 *
 * Mediram 38 px de altura. O dedo erra: a recomendacao de acessibilidade e
 * 44 px, e quem usa este portal costuma estar na obra, em pe, com o celular
 * numa mao so. Aumentar a altura tambem afasta uma aba da outra, o que
 * diminui o toque errado no vizinho.
 * ------------------------------------------------------------------ */
#tabs-container{
  display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;scrollbar-width:thin;padding-bottom:2px;
}
#tabs-container>button{
  min-height:44px;flex:0 0 auto;scroll-snap-align:start;
}
@media (max-width:640px){
  /* Na tela do celular as quatro abas somam 663 px: elas PRECISAM rolar de
     lado, e a ultima precisa dar sinal de que existe mais coisa. */
  #tabs-container{padding-right:22px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),transparent)}
}

/* ------------------------------------------------------------------ *
 * 2026.136 — a barra inferior cobria o botao principal do cartao
 *
 * Medido no portal do arquiteto em 390 px: a barra fixa de baixo cobria 61%
 * do "Abrir painel completo", que e a acao principal da tela. O conteudo
 * terminava embaixo dela e ninguem percebia, porque no desktop sobra espaco.
 *
 * Reservar a altura da barra no fim do conteudo custa nada e resolve a classe
 * inteira: qualquer coisa que fique por ultimo passa a ter para onde rolar.
 * ------------------------------------------------------------------ */
@media (max-width:640px){
  /* Medido: o botao "Abrir painel completo" fica em y=805..849 numa tela de
     844 px, dentro de #conteudo — nao de #jr-portal-content, que foi onde eu
     tinha posto a folga da primeira vez. Seletor errado nao reclama: so nao
     faz nada. */
  body[data-jr-page="cliente"] #conteudo,
  body[data-jr-page="cliente"] #jr-portal-content,
  body[data-jr-page="cliente"] main{
    padding-bottom:calc(var(--jr-rodape, 72px) + env(safe-area-inset-bottom, 0px) + 26px)!important;
  }
}