/* Plataforma AXIS, rodada 5, frente 23: polimento do Portal do cliente no celular.
   Vem depois de todos os CSS do portal (app41.css, r5-17 a r5-22, app-tema.css e app-responsivo.css) e só vale com
   body.p41 (o cliente logado no portal) dentro de @media screen até 980 px. Nada muda no desktop, na equipe nem na
   impressão. Cuida de: barra inferior, alvos de toque de 44 px, abas, cartões que encostavam, gráficos e rolagem lateral.
   Classes e variáveis próprias com prefixo r523. */

@media screen and (max-width:980px){
  body.p41{
    --r523-acento:var(--ax-acento,var(--roxo,#8436FE));
    --r523-acento-s:var(--ax-acento-suave,var(--roxo-s,rgba(132,54,254,.1)));
    --r523-sup:var(--ax-superficie-1,var(--card,#fff));
    --r523-borda:var(--ax-borda,var(--linha,rgba(22,22,46,.08)));
    --r523-mudo:var(--ax-texto-mudo,var(--mudo,#75728F));
    --r523-curva:var(--ax-curva,cubic-bezier(.2,.8,.2,1));
    --r523-barra-h:64px;
  }

  /* ---------- sem rolagem lateral: a página nunca passa da largura da tela ---------- */
  html:has(> body.p41){overflow-x:hidden}
  body.p41 .app>main,body.p41 #tela,body.p41 #tela>*{min-width:0;max-width:100%}
  body.p41 #tela :is(img,svg,canvas,video,iframe){max-width:100%}

  /* ---------- toque rápido e firme ---------- */
  body.p41 :is(a,button,summary,label,select,[role=button],[role=tab]){touch-action:manipulation;-webkit-tap-highlight-color:transparent}
  body.p41 :is(.p41-ind,.p41-passo,.p41-arq,.p41-medi,.pt-card,.p41-folha-g a,.p41-wa-btn,.p41-btn-ia):active{transform:scale(.985);transition-duration:.08s}

  /* ---------- topo: botões de 44 px e respiro do entalhe no app instalado ---------- */
  body.p41 .topo{padding-top:max(10px,env(safe-area-inset-top,0px));gap:6px}
  body.p41 .topo{flex-wrap:nowrap}
  body.p41 .topo>.ctx{flex:1 1 auto;min-width:0}
  body.p41 .topo>.esp{display:none}
  body.p41 .topo>:is(.btn,button):not(.menu-btn):not(#sair){flex:none;min-width:44px;min-height:44px;border-radius:13px;place-items:center;padding:0 10px}
  body.p41 .topo .sino .n{top:-4px;right:-4px}

  /* ---------- alvos de toque de 44 px dentro das telas do portal ---------- */
  body.p41 #tela :is(.btn,button.btn,a.btn){min-height:44px}
  body.p41 #tela :is([role=tab],.abas button,.fx-seg button,.axm-filtros button){min-height:44px}
  body.p41 #tela :is(.r20-mb){width:44px;height:44px}
  body.p41 #tela :is(#r20-m){min-height:44px}
  body.p41 #tela details>summary{padding-block:12px;cursor:pointer}
  body.p41 #tela :is(.p41-ver){min-height:44px;display:inline-flex;align-items:center;padding:0 12px;margin-right:-8px}
  body.p41 #tela :is(.r517-guia,.r517-entenda,.r517-ver-mais,.r518-btn,.r521-hero-wa,.chip-b,.r512-it){min-height:44px}
  body.p41 #tela .p41-sug a{min-height:44px;display:flex;align-items:center}
  body.p41 .axr a{--s:44px!important}
  body.p41 #tela :is(.r522-x,.r522-depois){min-width:44px;min-height:44px}
  body.p41 #tela .r512-sug button{min-height:44px}
  body.p41 #tela .p41-vazio a{display:inline-block;padding-block:14px;margin-block:-14px}
  body.p41 #tela .fx-seg{align-items:center;height:auto}
  body.p41 #tela .fx-seg button{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box}
  body.p41 #tela .fx-link{display:inline-flex;align-items:center;min-height:44px}
  body.p41 #tela .fx-seg button{min-width:44px}
  /* DRE para o dono: a barra "a cada R$ 100" fica mais alta e cada fatia ganha área de toque de 44 px */
  body.p41 #tela .r20-barra{height:28px}
  body.p41 #tela .r20-barra span{position:relative}
  body.p41 #tela .r20-barra span::after{content:"";position:absolute;inset:-11px 0}
  /* nome do fornecedor ou cliente no cartão da conta: área de toque maior sem mexer no desenho */
  body.p41 #tela .c45-pessoa{padding-block:12px;margin-block:-12px}
  body.p41 :is(#tour-pula,#tour-prox){min-height:44px}
  body.p41 #tela :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),select){min-height:44px}

  /* abas: todas à vista e do mesmo tamanho, sem quebra torta (3 lado a lado; 4 ou mais em duas colunas) */
  body.p41 #tela .abas{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%;box-sizing:border-box}
  body.p41 #tela .abas:has(> :nth-child(4)){grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  body.p41 #tela .abas button{white-space:normal;line-height:1.2;text-align:center;padding:6px 8px;display:inline-flex;align-items:center;justify-content:center;gap:6px}

  /* ---------- barra inferior ---------- */
  body.p41 .p41-barra{
    padding:6px max(6px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(6px,env(safe-area-inset-left,0px));
    background:linear-gradient(180deg,color-mix(in srgb,var(--r523-sup) 82%,transparent),color-mix(in srgb,var(--r523-sup) 94%,transparent));
    box-shadow:0 -1px 0 var(--r523-borda),inset 0 1px 0 rgba(255,255,255,.5),0 -10px 34px rgba(22,22,46,.10);
    transition:transform .24s var(--r523-curva),opacity .2s}
  body.p41 .p41-b{min-height:var(--r523-barra-h,64px);gap:4px;font-size:11px;letter-spacing:.005em}
  body.p41 .p41-b[aria-current="page"]::before{display:none}
  /* o ícone fica numa pílula: acesa no item atual, como nos apps do sistema */
  body.p41 .p41-b>.p41-ic{box-sizing:content-box;width:22px;height:22px;padding:5px 16px;border-radius:999px;transition:background .2s,color .2s,transform .18s}
  body.p41 .p41-b[aria-current="page"]{color:var(--r523-acento);font-weight:700}
  body.p41 .p41-b[aria-current="page"]>.p41-ic{background:var(--r523-acento-s);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--r523-acento) 16%,transparent);transform:none}
  body.p41 .p41-b:active>.p41-ic{transform:scale(.9)}
  body.p41 .p41-b .p41-n{top:3px;left:calc(50% + 8px)}
  /* Áxia no centro: bolha em relevo, com anel aceso quando é a tela atual */
  body.p41 .p41-b-ia .p41-ia-bola{width:50px;height:50px;margin-top:-18px;
    background:radial-gradient(120% 90% at 30% 15%,#B07BFF 0%,#8436FE 45%,#5E1BD0 100%);
    box-shadow:0 10px 24px rgba(132,54,254,.42),0 2px 6px rgba(60,20,140,.3),0 0 0 4px var(--r523-sup),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -2px 6px rgba(40,0,110,.35);
    transition:transform .18s var(--r523-curva),box-shadow .2s}
  body.p41 .p41-b-ia:active .p41-ia-bola{transform:scale(.94)}
  body.p41 .p41-b-ia[aria-current="page"] .p41-ia-bola{box-shadow:0 10px 26px rgba(132,54,254,.55),0 0 0 4px var(--r523-sup),0 0 0 6px color-mix(in srgb,var(--r523-acento) 35%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
  body.p41 .p41-b-ia[aria-current="page"]{color:var(--r523-acento)}
  /* com o teclado aberto, a barra sai da frente do campo */
  body.p41:has(:is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=month]):not([type=date]),textarea):focus) .p41-barra{transform:translateY(115%);opacity:0;pointer-events:none}
  body.p41 .app>main{padding-bottom:calc(var(--r523-barra-h,64px) + 28px + env(safe-area-inset-bottom,0px))}

  /* folha "Mais": cabeçalho preso, blocos com relevo e o item atual marcado */
  body.p41 .p41-folha-c{max-height:min(88vh,88dvh);overscroll-behavior:contain;gap:12px;
    box-shadow:0 -24px 60px rgba(8,8,30,.28),inset 0 1px 0 rgba(255,255,255,.6)}
  body.p41 .p41-alca{width:44px;height:5px;margin:2px 0 4px}
  body.p41 .p41-folha-g a{min-height:78px;background:var(--ax-superficie-2,var(--bg));box-shadow:inset 0 0 0 1px var(--r523-borda);transition:background .15s,box-shadow .15s,transform .12s}
  body.p41 .p41-folha-g a svg{padding:7px;border-radius:11px;background:var(--r523-acento-s);box-sizing:content-box}
  body.p41 .p41-folha-g a[aria-current="page"]{background:var(--r523-acento-s);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--r523-acento) 45%,transparent);color:var(--r523-acento);font-weight:650}
  body.p41 .p41-folha-g a[aria-current="page"] svg{background:var(--r523-acento);color:#fff}
  body.p41 .p41-sair{min-height:48px}

  /* ---------- Números do mês: o quinto cartão não fica sozinho pela metade ---------- */
  body.p41 .p38-kpis-e>.p38-kpi:last-child:nth-child(odd){grid-column:1/-1}

  /* ---------- gráficos: legíveis, na largura toda do cartão ---------- */
  body.p41 #tela .axg-caixa,body.p41 #tela [class*="graf"]{max-width:100%}
  body.p41 #tela canvas{touch-action:pan-y}
}

@media screen and (max-width:640px){
  /* contas a pagar e a receber: o cliente não marca contas em lote, então o cartão não guarda a coluna vazia da caixinha */
  body.p41 .c45-tab tbody tr:not(:has(> .c45-ck)){grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"desc sal" "pes val" "venc sit" "ac ac"}
  body.p41 .c45-tab tbody tr{padding:14px 14px}
  body.p41 .c45-tab .c45-c-ac .btn{min-width:44px}

  /* Início: cabeçalho mais enxuto, para os números aparecerem sem rolar tanto */
  body.p41 .p41-hero{padding:22px 18px 20px;gap:16px}
  body.p41 .p41-hero p{font-size:14.5px;line-height:1.5}
  body.p41 .p41-hero-ac{gap:10px}
  body.p41 .p41-mes input,body.p41 .p41-btn-ia{height:48px}

  /* rodapé e respiro final acima da barra */
  body.p41 #tela{padding-bottom:8px}
}

/* tela pequena (até 360 px): a pílula do ícone encolhe para caber os cinco itens */
@media screen and (max-width:360px){
  body.p41 .p41-b>.p41-ic{padding:5px 10px}
  body.p41 .p41-b{font-size:10.5px}
}

/* escuro: a barra e a folha ganham reflexo mais discreto */
@media screen and (max-width:980px) and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) body.p41 .p41-barra{box-shadow:0 -1px 0 var(--r523-borda),inset 0 1px 0 rgba(255,255,255,.05),0 -10px 34px rgba(0,0,0,.35)}
  :root:not([data-theme="light"]) body.p41 .p41-folha-c{box-shadow:0 -24px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
}
@media screen and (max-width:980px){
  :root[data-theme="dark"] body.p41 .p41-barra{box-shadow:0 -1px 0 var(--r523-borda),inset 0 1px 0 rgba(255,255,255,.05),0 -10px 34px rgba(0,0,0,.35)}
  :root[data-theme="dark"] body.p41 .p41-folha-c{box-shadow:0 -24px 60px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06)}
}
@media (prefers-reduced-motion:reduce){
  body.p41 .p41-barra,body.p41 .p41-b>.p41-ic,body.p41 .p41-b-ia .p41-ia-bola{transition:none}
}