/* JSL Sistema V502 — Design System Único
 * Arquivo de produção consolidado. A ordem da cascata validada foi preservada.
 * Não adicionar novas folhas numeradas: evoluções entram neste sistema único.
 */

/* ============================================================
   01-TOKENS.CSS — BLOCO 2
   FONTE ÚNICA DA VERDADE VISUAL DO SISTEMA.

   PROBLEMA QUE ESTE ARQUIVO RESOLVE
   O style.css atual declara :root SETE vezes, com valores que se
   contradizem — --sb vale 248px numa linha e 0 em outra, --premium-bg
   muda de #080a0c para #06080a. Quem vence depende da ordem de
   carregamento. É por isso que uma correção de tela quebra outra.

   REGRA DAQUI PARA A FRENTE
   Nenhuma cor, medida, raio ou sombra escrita "na mão" em outro
   arquivo. Tudo sai daqui. Quer mudar o amarelo do sistema inteiro?
   Muda uma linha.

   CARREGAR SEMPRE PRIMEIRO, antes de qualquer outro CSS.
   ============================================================ */

:root {

  /* ---------- MARCA ---------- */
  --jsl-amarelo:        #FFD100;
  --jsl-amarelo-escuro: #DCA900;
  --jsl-amarelo-claro:  #FFDD40;
  --jsl-amarelo-fraco:  rgba(255, 209, 0, .12);
  --jsl-amarelo-borda:  rgba(255, 209, 0, .34);

  /* ---------- FUNDOS (escuro → claro) ---------- */
  --jsl-fundo-0: #06080A;   /* fundo da página */
  --jsl-fundo-1: #0C0F13;   /* barras, sidebar */
  --jsl-fundo-2: #111519;   /* cartões e painéis */
  --jsl-fundo-3: #171C22;   /* campos, estado hover */
  --jsl-fundo-4: #1F252C;   /* elemento ativo/pressionado */

  /* ---------- TEXTO ---------- */
  --jsl-texto:       #F5F6F8;
  --jsl-texto-medio: #A2A9B2;
  --jsl-texto-fraco: #6E757D;
  --jsl-texto-sobre-amarelo: #14171A;

  /* ---------- LINHAS ---------- */
  --jsl-linha:       rgba(255, 255, 255, .10);
  --jsl-linha-forte: rgba(255, 255, 255, .17);
  --jsl-linha-fraca: rgba(255, 255, 255, .055);

  /* ---------- SITUAÇÃO ---------- */
  --jsl-ok:      #3DD68C;
  --jsl-ok-bg:   rgba(61, 214, 140, .13);
  --jsl-erro:    #F05A57;
  --jsl-erro-bg: rgba(240, 90, 87, .13);
  --jsl-alerta:  #FFB020;
  --jsl-alerta-bg: rgba(255, 176, 32, .13);
  --jsl-info:    #4DA3FF;
  --jsl-info-bg: rgba(77, 163, 255, .13);
  --jsl-roxo:    #A46BF5;

  /* ---------- ESPAÇAMENTO (escala de 4px) ---------- */
  --e1:  4px;
  --e2:  8px;
  --e3:  12px;
  --e4:  16px;
  --e5:  20px;
  --e6:  24px;
  --e8:  32px;
  --e10: 40px;
  --e12: 48px;

  /* ---------- RAIO ---------- */
  --r-pequeno: 8px;
  --r-medio:   12px;
  --r-grande:  16px;
  --r-folha:   20px;   /* bottom sheet */
  --r-pilula:  999px;

  /* ---------- SOMBRA ---------- */
  --s-baixa:  0 1px 3px rgba(0, 0, 0, .28);
  --s-media:  0 4px 16px rgba(0, 0, 0, .34);
  --s-alta:   0 12px 40px rgba(0, 0, 0, .46);
  --s-folha:  0 -8px 32px rgba(0, 0, 0, .48);
  --s-amarela: 0 4px 18px rgba(255, 209, 0, .22);

  /* ---------- TIPOGRAFIA ---------- */
  --fonte:         'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fonte-titulo:  'Barlow Condensed', 'Barlow', sans-serif;
  --fonte-numero:  'Barlow', ui-monospace, monospace;

  --t-micro:  10px;
  --t-mini:   11px;
  --t-peq:    12px;
  --t-base:   14px;
  --t-med:    16px;
  --t-gr:     19px;
  --t-tit:    23px;
  --t-hero:   30px;
  --t-marca-sm: 36px;
  --t-marca-md: 48px;
  --t-marca-lg: 96px;
  --t-marca-xl: 148px;

  --p-normal: 400;
  --p-medio:  500;
  --p-forte:  600;
  --p-bold:   700;
  --p-black:  800;

  --lh-apertada: 1.2;
  --lh-normal:   1.45;
  --lh-solta:    1.65;

  /* ---------- ALVO DE TOQUE ----------
     48px é o mínimo recomendado. Botão de banco no celular
     nunca é menor que isso. */
  --toque:        48px;
  --toque-minimo: 44px;

  /* ---------- ESTRUTURA ---------- */
  --sidebar-largura:     248px;
  --sidebar-encolhida:   72px;
  --topbar-altura:       60px;
  --topbar-altura-mob:   56px;
  --barra-inferior:      64px;
  --conteudo-max:        1600px;

  /* ---------- ÁREA SEGURA (iPhone com notch) ---------- */
  --seg-topo:     env(safe-area-inset-top, 0px);
  --seg-baixo:    env(safe-area-inset-bottom, 0px);
  --seg-esquerda: env(safe-area-inset-left, 0px);
  --seg-direita:  env(safe-area-inset-right, 0px);

  /* Altura real da tela do celular. 100vh mente no iOS (conta a
     barra do navegador mesmo quando ela não está lá); 100dvh não.
     O fallback abaixo cobre iOS anterior ao 15.4 sem precisar de
     uma linha de JavaScript. */
  --altura-tela: 100vh;

  /* ---------- CAMADAS (z-index) ----------
     Toda camada do sistema sai daqui. Sem isso volta a guerra
     de z-index:var(--z-critico). */
  --z-atras: -1;
  --z-zero: 0;
  --z-base:        1;
  --z-local: 10;
  --z-dropdown: 500;
  --z-fixo:        100;
  --z-barra-inf:   200;
  --z-topbar:      300;
  /* O fundo escuro fica ABAIXO da sidebar. Se ficar acima, ele
     intercepta o toque e os itens do menu param de responder —
     era assim na primeira versão destes tokens. */
  --z-overlay:     350;
  --z-sidebar:     400;
  --z-modal:       600;
  --z-folha:       650;
  --z-toast:       800;
  --z-aviso:       900;
  --z-auth: 1000;
  --z-pagamento: 1100;
  --z-critico: 1200;

  /* ---------- MOVIMENTO ---------- */
  --v-rapida:  120ms;
  --v-media:   220ms;
  --v-lenta:   320ms;
  --curva:     cubic-bezier(.4, 0, .2, 1);
  --curva-saida: cubic-bezier(.16, 1, .3, 1);
}

/* Compatibilidade: os módulos antigos usam --y, --tx, --mt, etc.
   Em vez de sair editando 27 mil linhas, apontamos os nomes velhos
   para os tokens novos. Assim o sistema inteiro passa a obedecer a
   um único lugar, sem reescrever módulo por módulo. */
:root {
  --y:   var(--jsl-amarelo);
  --y2:  var(--jsl-amarelo-escuro);
  --bk:  var(--jsl-fundo-0);
  --bk2: var(--jsl-fundo-1);
  --g1:  var(--jsl-fundo-1);
  --g2:  var(--jsl-fundo-2);
  --g3:  var(--jsl-fundo-3);
  --bd:  var(--jsl-linha);
  --mt:  var(--jsl-texto-medio);
  --tx:  var(--jsl-texto);
  --red: var(--jsl-erro);
  --grn: var(--jsl-ok);
  --blu: var(--jsl-info);
  --pur: var(--jsl-roxo);
  --sw:  var(--sidebar-largura);
  --sb:  var(--sidebar-largura);

  --premium-bg:      var(--jsl-fundo-0);
  --premium-bg2:     var(--jsl-fundo-1);
  --premium-panel:   var(--jsl-fundo-2);
  --premium-panel2:  var(--jsl-fundo-3);
  --premium-border:  var(--jsl-linha);
  --premium-border2: var(--jsl-amarelo-borda);
  --premium-border-soft: var(--jsl-linha-fraca);
  --premium-line:    var(--jsl-linha-fraca);
  --premium-text:    var(--jsl-texto);
  --premium-muted:   var(--jsl-texto-medio);
  --premium-dim:     var(--jsl-texto-fraco);
  --premium-yellow:  var(--jsl-amarelo);
  --premium-yellow2: var(--jsl-amarelo-escuro);
  --premium-green:   var(--jsl-ok);
  --premium-red:     var(--jsl-erro);
  --premium-radius:  var(--r-medio);
  --premium-shadow:  var(--s-alta);
  --premium-glow:    var(--jsl-amarelo-fraco);
  --premium-shadow-soft:  0 6px 22px rgba(0, 0, 0, .28);
  --premium-glass:        rgba(15, 20, 25, .74);
  --premium-glass-strong: rgba(10, 14, 18, .90);

  --font-ui:      var(--fonte);
  --font-display: var(--fonte-titulo);

  --safe-top:    var(--seg-topo);
  --safe-bottom: var(--seg-baixo);
  --safe-left:   var(--seg-esquerda);
  --safe-right:  var(--seg-direita);
  --viewport-h:  var(--altura-tela);
}

/* Respeita quem desligou animação no sistema operacional.
   Acessibilidade e também menos enjoo em quem tem sensibilidade. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --v-rapida: 1ms;
    --v-media:  1ms;
    --v-lenta:  1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Navegador com suporte a dvh usa a medida honesta. */
@supports (height: 100dvh) {
  :root { --altura-tela: 100dvh; }
}

/* ============================================================
   02-LEGADO.CSS — BLOCO 2
   O antigo style.css, limpo.

   O QUE FOI FEITO NESTE ARQUIVO (automatizado e conferido):
     - removidos os 9 blocos :root que redeclaravam as mesmas
       variaveis com valores diferentes. Agora quem manda e o
       01-tokens.css, e so ele.
     - removidos todos os !important. Eles existiam para vencer
       os 13 arquivos de remendo, que nao existem mais.
     - os 11 pontos de quebra soltos (390, 400, 430, 480, 520,
       560, 640, 700, 820, 900, 1250px) foram remapeados para os
       3 oficiais: 360, 767 e 1023px.

   Aqui ficam APENAS os estilos das telas especificas que nao
   entraram nos componentes: calculadora, login, obras, orcamento,
   contratos, PWA, portfolio. Nada estrutural.

   CARREGAR SEMPRE POR ULTIMO.
   ============================================================ */

/* ============================================================
   CSS/STYLE.CSS — Todo o CSS interno do index.html monolítico.
   Bloco 1: <style> principal do <head>.
   Blocos 2 e 3: <style> que estavam dentro do <body> (ordem preservada
   para manter exatamente a mesma cascata/especificidade).
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
/* ── TEMAS PRÉ-DEFINIDOS ── */
/* ── CALCULADORA: TABELA DE MATERIAIS ── */
.calc-area-destaque{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--g2);border-radius:6px;padding:12px 14px;
  margin-bottom:10px;border-left:3px solid var(--y);
}
.calc-area-label{font-size:var(--t-mini);font-weight:700;color:var(--mt);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.calc-area-val{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-hero);font-weight:900;color:var(--y);line-height:1}
.calc-area-unit{font-size:var(--t-base);font-weight:700;color:var(--mt);margin-left:2px}
/* Painel resultado com scroll próprio */
#cp-resultado,#cf-resultado{
  max-height:calc(100dvh - 200px);
  overflow-y:auto;
}
/* Header da tabela sticky dentro do scroll */
.calc-mat-table thead th{
  position:sticky;top:0;
  background:var(--g3);z-index:var(--z-local);
}
.calc-mat-table{width:100%;border-collapse:collapse;font-size:var(--t-peq)}
.calc-mat-table thead tr{background:var(--g3)}
.calc-mat-table thead th{
  padding:7px 8px;text-align:left;font-size:var(--t-micro);font-weight:700;
  color:var(--mt);text-transform:uppercase;letter-spacing:.5px;
  border-bottom:1px solid var(--bd);
}
.calc-mat-table thead th:nth-child(2),
.calc-mat-table thead th:nth-child(3){text-align:right}
.calc-mat-table .calc-mat-row td{
  padding:7px 8px;border-bottom:1px solid rgba(58,58,58,.4);vertical-align:middle;
}
.calc-mat-table .calc-mat-row:nth-child(even) td{background:rgba(255,255,255,.02)}
.calc-mat-table .calc-mat-row td:first-child{
  font-weight:600;color:var(--tx);
}
.calc-mat-table .calc-mat-row td:first-child .calc-mat-dot{
  display:inline-block;margin-right:6px;vertical-align:middle;
}
.calc-mat-table .calc-mat-row td:nth-child(2){
  text-align:right;font-weight:900;color:var(--y);
  font-family:'Barlow Condensed',sans-serif;font-size:var(--t-base);
  white-space:nowrap;
}
.calc-mat-table .calc-mat-row td:nth-child(3){
  text-align:right;color:var(--mt);font-size:var(--t-mini);white-space:nowrap;
}
.calc-mat-table .calc-mat-row td:nth-child(4){
  color:var(--mt);font-size:var(--t-mini);
}
.calc-mat-dot{
  display:inline-block;width:7px;height:7px;
  border-radius:50%;flex-shrink:0;
}

/* ── TEMA CARDS ── */
.tema-card{
  background:var(--g2);border:2px solid var(--bd);
  border-radius:6px;cursor:pointer;overflow:hidden;
  transition:border-color .15s,transform .1s;
}
.tema-card:hover{border-color:rgba(255,255,255,.25);transform:translateY(-1px)}
.tema-card.ativo{border-color:var(--y);box-shadow:0 0 0 1px var(--y)}

/* ── LOCK DE RECURSO ── */
.plan-lock-wrap{position:relative}
.plan-lock-overlay{
  position:absolute;inset:0;
  background:rgba(10,10,10,.75);
  backdrop-filter:blur(3px);
  border-radius:inherit;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:8px;z-index:var(--z-local);
  border:1px solid rgba(255,209,0,.2);
}
.plan-lock-ico{font-size:var(--t-tit)}
.plan-lock-msg{font-size:var(--t-mini);font-weight:700;color:var(--tx);text-align:center;line-height:1.4;padding:0 12px}
.plan-lock-btn{
  background:var(--y);color:#1a1a1a;
  border:none;border-radius:5px;
  padding:7px 16px;font-weight:800;font-size:var(--t-mini);
  cursor:pointer;text-transform:uppercase;letter-spacing:.5px;
  margin-top:2px;
}
.plan-lock-btn:hover{opacity:.9}
.plan-badge-locked{
  display:inline-flex;align-items:center;gap:4px;
  font-size:var(--t-micro);font-weight:700;color:var(--mt);
  background:rgba(255,255,255,.05);
  border:1px solid var(--bd);
  border-radius:4px;padding:3px 8px;
  cursor:pointer;
}
.plan-badge-locked:hover{border-color:var(--y);color:var(--y)}
body{font-family:'Barlow',sans-serif;background:var(--bk);color:var(--tx);height:100dvh;display:flex;overflow:hidden}

/* SIDEBAR */
.sidebar{width:var(--sw);background:var(--bk2);border-right:1px solid var(--bd);display:flex;flex-direction:column;flex-shrink:0}
.logo-area{padding:14px;background:var(--y);display:flex;align-items:center;gap:9px;flex-shrink:0}
.logo-dl{background:#1a1a1a;border-radius:4px;padding:5px 8px;font-family:'Barlow Condensed',sans-serif;font-size:var(--t-gr);font-weight:800;color:var(--y);line-height:1}
.logo-txt{display:flex;flex-direction:column}
.logo-main{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-base);font-weight:800;color:#1a1a1a;text-transform:uppercase;line-height:1}
.logo-sub2{font-size:var(--t-micro);font-weight:700;color:rgba(0,0,0,.55);text-transform:uppercase;letter-spacing:2px}
.nav{padding:6px 0;flex:1;overflow-y:auto}
.ng{padding:10px 14px 3px;font-size:var(--t-micro);text-transform:uppercase;letter-spacing:1.5px;color:var(--mt);font-weight:700}
.ni{display:flex;align-items:center;gap:9px;padding:10px 14px;cursor:pointer;color:#999;font-size:var(--t-peq);font-weight:600;transition:all .12s;border-left:3px solid transparent}
.ni:hover{color:var(--tx);background:rgba(255,255,255,.04)}
.ni.active{color:#1a1a1a;background:var(--y);border-left-color:var(--y2)}
.ni-ic{font-size:var(--t-base);width:18px;text-align:center;flex-shrink:0}

/* MAIN */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:52px;background:var(--y);display:flex;align-items:center;justify-content:space-between;padding:0 20px;flex-shrink:0}
.tb-bem{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-tit);font-weight:700;color:#1a1a1a}
.tb-right{display:flex;align-items:center;gap:8px}
.tb-date{background:rgba(0,0,0,.15);border-radius:20px;padding:5px 12px;font-size:var(--t-peq);font-weight:700;color:#1a1a1a}
.tb-ic{width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:var(--t-base);color:#1a1a1a;font-weight:700}
.content{flex:1;overflow-y:auto;padding:14px 18px;background:var(--bk)}

/* PAGES */
.page{display:none}.page.active{display:block}

/* CARDS */
.grid{display:grid;gap:11px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:1fr 1fr 1fr}.g4{grid-template-columns:1fr 1fr 1fr 1fr}.g5{grid-template-columns:1fr 1fr 1fr 1fr 1fr}
.card{background:var(--g1);border:1px solid var(--bd);border-radius:5px;padding:14px}

/* METRIC CARDS */
.mc{background:var(--g1);border-radius:5px;padding:13px 15px;border:1px solid var(--bd);position:relative;overflow:hidden}
.mc.y{background:var(--y);border-color:var(--y2)}
.mc-l{font-size:var(--t-micro);font-weight:700;color:var(--mt);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.mc.y .mc-l{color:rgba(0,0,0,.55)}
.mc-v{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-tit);font-weight:800;color:var(--tx)}
.mc.y .mc-v{color:#1a1a1a}
.mc-s{font-size:var(--t-mini);color:var(--mt);font-weight:600;margin-top:2px}
.mc.y .mc-s{color:rgba(0,0,0,.5)}
.mc-ico{position:absolute;right:10px;bottom:8px;font-size:var(--t-tit);opacity:.18}
.mc.y .mc-ico{opacity:.15}

.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px}
.st{font-size:var(--t-peq);font-weight:700;color:var(--tx)}
.dv{height:1px;background:var(--bd);margin:11px 0}
.cl{font-size:var(--t-micro);font-weight:700;color:var(--mt);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}

table{width:100%;border-collapse:collapse;font-size:var(--t-peq)}
th{padding:7px 9px;text-align:left;color:var(--mt);font-weight:700;font-size:var(--t-micro);text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid var(--bd)}
td{padding:7px 9px;border-bottom:1px solid rgba(58,58,58,.4);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:rgba(255,255,255,.02)}

.tag{display:inline-flex;align-items:center;padding:2px 7px;border-radius:2px;font-size:var(--t-micro);font-weight:700;text-transform:uppercase}
.tg{background:rgba(67,160,71,.18);color:#6fcf73}
.ty{background:rgba(255,209,0,.15);color:var(--y)}
.tr{background:rgba(229,57,53,.18);color:#ff6b68}
.tb{background:rgba(30,136,229,.18);color:#64b5f6}
.tm{background:rgba(120,120,120,.18);color:#aaa}
.tp{background:rgba(123,31,162,.2);color:#ce93d8}

.btn{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:4px;border:1px solid var(--bd);background:transparent;color:var(--tx);font-family:'Barlow',sans-serif;font-size:var(--t-peq);font-weight:700;cursor:pointer;transition:all .12s;text-transform:uppercase;letter-spacing:.3px}
.btn:hover{background:var(--g2)}
.by{background:var(--y);border-color:var(--y);color:#1a1a1a}
.by:hover{background:var(--y2);border-color:var(--y2)}
.br{border-color:rgba(229,57,53,.4);color:var(--red)}
.br:hover{background:rgba(229,57,53,.1)}
.bg{border-color:rgba(67,160,71,.4);color:var(--grn)}
.bg:hover{background:rgba(67,160,71,.1)}
.bsm{padding:3px 8px;font-size:var(--t-mini)}

.fg{margin-bottom:10px}
.fl{display:block;font-size:var(--t-micro);font-weight:700;color:var(--mt);margin-bottom:3px;text-transform:uppercase;letter-spacing:.5px}
.fc{width:100%;background:var(--g2);border:1px solid var(--bd);border-radius:4px;padding:7px 9px;color:var(--tx);font-family:'Barlow',sans-serif;font-size:var(--t-peq);transition:border .12s;font-weight:500}
.fc:focus{outline:none;border-color:var(--y)}
.fc::placeholder{color:var(--mt)}
select.fc option{background:var(--g2)}
textarea.fc{resize:vertical;min-height:60px}
.fr2{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.fr3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px}

/* MODAL */
.mo{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:var(--z-barra-inf);display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.mo.open{display:flex}
.modal{background:var(--g1);border:1px solid var(--bd);border-top:3px solid var(--y);border-radius:5px;padding:20px;width:90%;max-width:767px;max-height:90vh;max-height:90dvh;overflow-y:auto;min-width:0;box-sizing:border-box}
.modal.wide{max-width:800px}
.mh{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.mt2{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-med);font-weight:700;text-transform:uppercase;color:var(--y)}
.mc2{background:none;border:none;color:var(--mt);font-size:var(--t-gr);cursor:pointer}
.mf{display:flex;gap:6px;justify-content:flex-end;margin-top:14px;padding-top:11px;border-top:1px solid var(--bd)}

/* PAINEL FUNCIONÁRIO */
.func-card{background:var(--g2);border:1px solid var(--bd);border-radius:5px;cursor:pointer;transition:all .15s;overflow:hidden}
.func-card:hover{border-color:var(--y);transform:translateY(-1px)}
.func-card.selected{border-color:var(--y);border-width:2px}
.func-header{background:var(--g3);padding:12px 14px;display:flex;align-items:center;justify-content:space-between}
.func-avatar{width:38px;height:38px;border-radius:50%;background:var(--y);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:var(--t-med);font-weight:800;color:#1a1a1a;flex-shrink:0}
.func-info{flex:1;margin-left:10px}
.func-nome{font-size:var(--t-peq);font-weight:700;color:var(--tx)}
.func-diaria{font-size:var(--t-mini);color:var(--mt);font-weight:600}
.func-body{padding:12px 14px}
.func-nums{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px}
.fn-box{background:var(--g1);border-radius:3px;padding:6px 8px;text-align:center}
.fn-label{font-size:var(--t-micro);color:var(--mt);text-transform:uppercase;font-weight:700;margin-bottom:2px}
.fn-val{font-size:var(--t-peq);font-weight:800}
.fn-val.y{color:var(--y)}.fn-val.r{color:var(--red)}.fn-val.g{color:var(--grn)}
.func-actions{display:flex;gap:5px;flex-wrap:wrap}

/* PAINEL LATERAL FUNCIONÁRIO */
.func-panel{background:var(--g1);border:1px solid var(--bd);border-radius:5px;padding:0;overflow:hidden}
.fp-head{background:var(--y);padding:12px 14px;display:flex;align-items:center;gap:10px}
.fp-avatar{width:42px;height:42px;border-radius:50%;background:#1a1a1a;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:var(--t-gr);font-weight:800;color:var(--y);flex-shrink:0}
.fp-nome{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-med);font-weight:800;color:#1a1a1a;text-transform:uppercase}
.fp-sub{font-size:var(--t-mini);color:rgba(0,0,0,.55);font-weight:600}
.fp-body{padding:14px}
.fp-tabs{display:flex;gap:0;border-bottom:1px solid var(--bd);margin:-14px -14px 14px}
.fp-tab{padding:9px 14px;font-size:var(--t-mini);font-weight:700;text-transform:uppercase;cursor:pointer;color:var(--mt);border-bottom:2px solid transparent;transition:all .12s}
.fp-tab.active{color:var(--y);border-bottom-color:var(--y)}
.fp-tab:hover{color:var(--tx)}
.fp-content{display:none}.fp-content.active{display:block}

/* CALENDARIO */
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cal-m{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-base);font-weight:700;text-transform:uppercase;color:var(--y)}
.cg7{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.ch{text-align:center;font-size:var(--t-micro);color:var(--mt);font-weight:700;padding:2px 0;text-transform:uppercase}
.cd{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:3px;cursor:pointer;font-size:var(--t-micro);font-weight:700;border:1px solid transparent;transition:all .1s;position:relative;user-select:none}
.cd:hover{background:var(--g3);border-color:var(--mt)}
.cd.today{border-color:var(--y);color:var(--y)}
.cd.td{background:rgba(67,160,71,.14);border-color:rgba(67,160,71,.3)}
.cd.tv::after{content:'';position:absolute;bottom:2px;width:4px;height:4px;border-radius:50%;background:var(--red)}
.cd.om{opacity:.2;cursor:default;pointer-events:none}
.cd.vz{cursor:default;pointer-events:none}

/* CHARTS */
.cw{position:relative;height:175px}
.cw-sm{position:relative;height:130px}

/* DESPESAS / GASTO */
.gasto-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--bd);font-size:var(--t-peq)}
.gasto-row:last-child{border-bottom:none}
.gasto-ico{width:26px;height:26px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:var(--t-peq);flex-shrink:0}

/* ===== DASHBOARD SOFISTICADO ===== */
/* Hero banner */
.hero-banner{position:relative;background:linear-gradient(135deg,#FFD100 0%,#e6bc00 100%);border-radius:8px;padding:16px 20px;margin-bottom:11px;overflow:hidden;box-shadow:0 2px 12px rgba(255,209,0,.12)}
.hero-banner::before{content:'';position:absolute;top:-50%;right:-20%;width:60%;height:200%;background:radial-gradient(ellipse,rgba(255,255,255,.2) 0%,transparent 60%);pointer-events:none}
.hero-glow{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:heroGlow 4s ease-in-out infinite}
@keyframes heroGlow{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}
.hero-content{position:relative;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;z-index:var(--z-local)}
.hero-label{font-size:var(--t-micro);font-weight:800;color:rgba(0,0,0,.5);text-transform:uppercase;letter-spacing:2px}
.hero-period{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-base);font-weight:800;color:#1a1a1a;text-transform:uppercase}
.hero-metrics{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.hero-m{text-align:center;min-width:80px}
.hero-m-l{font-size:var(--t-micro);font-weight:800;color:rgba(0,0,0,.5);text-transform:uppercase;letter-spacing:1px;margin-bottom:1px}
.hero-m-v{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-tit);font-weight:800;color:#1a1a1a;line-height:1}
.hero-m-v.hero-out{color:#5e1a7a}
.hero-sep{width:1px;height:32px;background:linear-gradient(to bottom,transparent,rgba(0,0,0,.2),transparent)}

/* KPI Strip — compacto em linha */
.kpi-strip{display:flex;gap:6px;margin-bottom:11px;flex-wrap:wrap}
.kpi-item{flex:1;min-width:120px;background:var(--g1);border:1px solid var(--bd);border-radius:6px;padding:10px 12px;display:flex;align-items:center;gap:9px;transition:all .2s;position:relative;overflow:hidden}
.kpi-item::after{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent)}
.kpi-item:hover{border-color:rgba(255,209,0,.25);transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.3)}
.kpi-item.kpi-accent{background:linear-gradient(135deg,var(--y),#e6bc00);border-color:var(--y2)}
.kpi-item.kpi-accent .kpi-val{color:#1a1a1a}
.kpi-item.kpi-accent .kpi-lbl{color:rgba(0,0,0,.55)}
.kpi-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;box-shadow:0 0 6px currentColor}
.kpi-data{min-width:0}
.kpi-val{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-med);font-weight:800;color:var(--tx);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-lbl{font-size:var(--t-micro);font-weight:700;color:var(--mt);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Cards refinados */
.card-fut{background:var(--g1);border:1px solid var(--bd);border-radius:6px;transition:all .2s;position:relative;overflow:hidden}
.card-fut:hover{box-shadow:0 3px 12px rgba(0,0,0,.3);border-color:rgba(255,255,255,.06)}

/* Card destaque */
.card-hero{background:var(--g2);border:1px solid rgba(255,209,0,.3);border-radius:7px;padding:16px 18px;position:relative;overflow:hidden}
.card-hero::before{content:'';position:absolute;top:0;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,209,0,.5),transparent)}

/* Banner saldo */
.saldo-bolso-banner{background:linear-gradient(135deg,#FFD100,#e6bc00);border-radius:6px;padding:12px 16px;margin-top:12px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;position:relative;overflow:hidden}
.saldo-bolso-banner::before{content:'';position:absolute;top:-50%;right:-30%;width:80%;height:200%;background:radial-gradient(ellipse,rgba(255,255,255,.18) 0%,transparent 55%);pointer-events:none}
.sb-l{font-size:var(--t-micro);font-weight:800;color:rgba(0,0,0,.5);text-transform:uppercase;letter-spacing:1px}
.sb-s{font-size:var(--t-micro);font-weight:600;color:rgba(0,0,0,.45);margin-top:1px}
.sb-v{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-marca-sm);font-weight:800;color:#1a1a1a;letter-spacing:-1px}

/* Scrollbar */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:var(--bk2)}
::-webkit-scrollbar-thumb{background:var(--g3);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--y)}

/* ===== TIMELINE ATIVIDADES ===== */
.ativ{display:flex;align-items:flex-start;gap:8px;padding:5px 0;border-bottom:1px solid rgba(58,58,58,.4);font-size:var(--t-mini)}
.ativ:last-child{border-bottom:none}

.toast{position:fixed;bottom:20px;right:20px;background:var(--g1);border:1px solid var(--bd);border-left:3px solid var(--y);border-radius:4px;padding:9px 14px;font-size:var(--t-peq);font-weight:700;z-index:var(--z-critico);display:none;gap:7px;align-items:center;text-transform:uppercase}
.toast.show{display:flex}
.toast.ok{border-left-color:var(--grn);color:#6fcf73}
.toast.err{border-left-color:var(--red);color:#ff6b68}

/* ===== CALCULADORA DRYWALL ===== */
.calc-tab{flex:1;text-align:center;padding:11px 14px;font-size:var(--t-peq);font-weight:700;color:var(--mt);cursor:pointer;border-radius:4px;transition:all .15s;text-transform:uppercase;letter-spacing:.3px;user-select:none}
.calc-tab:hover{color:var(--tx);background:var(--g2)}
.calc-tab.active{background:var(--y);color:#1a1a1a}
.calc-bloco{display:none}
.calc-bloco.active{display:block}
/* ===== TÍTULOS DE SEÇÃO DO DASHBOARD ===== */
.dash-section-title{display:flex;align-items:center;gap:8px;margin:14px 0 8px;padding:0 2px}
.dash-sec-ico{width:4px;height:16px;border-radius:2px;flex-shrink:0}
.dash-section-title>span:nth-child(2){font-size:var(--t-mini);font-weight:800;color:var(--tx);letter-spacing:1.2px;text-transform:uppercase}
.dash-sec-hint{font-size:var(--t-micro);color:var(--mt);font-weight:600;margin-left:auto;text-transform:none;letter-spacing:0}

/* ===== LOCK SCREEN (proteção por PIN - opcional, configurada nas Configuracoes) ===== */
.lock-overlay{position:fixed;inset:0;background:linear-gradient(135deg,#111 0%,#1a1a1a 100%);z-index:var(--z-critico);display:none;align-items:center;justify-content:center;padding:20px}
.lock-overlay.show{display:flex}
.lock-box{background:var(--g1);border:1px solid var(--bd);border-top:3px solid var(--y);border-radius:6px;padding:28px 24px;width:100%;max-width:380px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.lock-logo{width:64px;height:64px;border-radius:50%;background:var(--y);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-family:'Barlow Condensed',sans-serif;font-size:var(--t-hero);font-weight:800;color:#1a1a1a}
.lock-tit{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-gr);font-weight:800;color:var(--tx);text-transform:uppercase;letter-spacing:1px;margin-bottom:4px}
.lock-sub{font-size:var(--t-peq);color:var(--mt);font-weight:600;margin-bottom:20px}
.lock-input{width:100%;background:var(--g2);border:2px solid var(--bd);border-radius:5px;padding:14px 16px;color:var(--tx);font-family:'Barlow',sans-serif;font-size:var(--t-gr);font-weight:700;text-align:center;letter-spacing:6px;transition:border .15s;margin-bottom:12px}
.lock-input:focus{outline:none;border-color:var(--y)}
.lock-err{color:var(--red);font-size:var(--t-mini);font-weight:700;height:16px;margin-bottom:8px}
.lock-btn{width:100%;padding:12px;background:var(--y);color:#1a1a1a;border:none;border-radius:5px;font-family:'Barlow',sans-serif;font-weight:800;font-size:var(--t-base);cursor:pointer;text-transform:uppercase;letter-spacing:.5px;transition:background .12s;margin-bottom:10px}
.lock-btn:hover{background:var(--y2)}
.lock-link{color:var(--mt);font-size:var(--t-mini);cursor:pointer;text-decoration:underline;font-weight:600}
.lock-link:hover{color:var(--y)}
/* Modal de recuperação de PIN precisa ficar ACIMA da tela de bloqueio (z-index:var(--z-critico)) */
#m-pin-rec{z-index:var(--z-critico)}
#m-pin-rec .modal{box-shadow:0 10px 40px rgba(0,0,0,.7)}
.sec-setup{background:var(--g2);border-radius:5px;padding:11px;margin-bottom:11px;text-align:left}
.sec-setup .fl{text-align:left}
.mob-menu-btn{display:none;position:fixed;bottom:18px;right:18px;z-index:var(--z-sidebar);width:52px;height:52px;border-radius:50%;background:var(--y);border:none;font-size:var(--t-tit);cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.5);align-items:center;justify-content:center;color:#1a1a1a;font-weight:800}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:var(--z-overlay);backdrop-filter:blur(2px)}

/* Grid da página de orçamentos — desktop */
.orc-grid{display:grid;grid-template-columns:1fr 330px;gap:11px}
.orc-col-main{min-width:0}
.orc-col-side{min-width:0}

@media (max-width:767px){
  /* Layout base - permitir rolagem quando teclado abre */
  body{flex-direction:column;min-height:100dvh;height:auto;overflow:visible}
  html{scroll-behavior:smooth}

  /* Sidebar vira drawer deslizante */
  .sidebar{position:fixed;left:-100%;top:0;bottom:0;width:240px;z-index:var(--z-overlay);transition:left .25s ease;box-shadow:4px 0 24px rgba(0,0,0,.5);height:100dvh;overflow-y:auto}
  .sidebar.open{left:0}
  .sidebar-overlay{display:none}
  .sidebar-overlay.show{display:block}

  /* Botão hamburger flutuante */
  .mob-menu-btn{display:flex}

  /* Main ocupa tudo mas permite rolagem natural */
  .main{width:100%;min-height:100dvh;overflow:visible}

  /* Topbar compacta — sticky no topo. Mobile: nome em 1 linha so com elipses,
     user-bar minimalista (so status nuvem + Sair). Esconde sino, email e perfil
     pra evitar sobreposicao do conteudo abaixo. */
  .topbar{height:52px;padding:0 12px;position:sticky;top:0;z-index:var(--z-local);gap:8px}
  .tb-bem{font-size:var(--t-base);flex:0 1 auto;min-width:0;max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
  .tb-date{display:none}
  .tb-right{flex:1 1 auto;min-width:0;justify-content:flex-end;gap:5px}
  /* Esconde icones desnecessarios no mobile (sino, email, perfil) - quem
     quiser acessar usa o menu hamburguer */
  .tb-right > .tb-ic{display:none}
  /* User-bar mobile: so status + Sair, email completo escondido */
  .user-bar{flex-shrink:1;min-width:0;gap:5px}
  .user-bar .uemail{display:none}
  .user-bar .ulogout{padding:5px 9px;font-size:var(--t-micro)}
  .user-bar .cloud-status{flex-shrink:0}

  /* Content com padding maior embaixo pra o usuário ver o último campo acima do teclado */
  .content{padding:10px 12px 280px 12px;overflow:visible;min-height:calc(100dvh - 52px)}

  /* Grids todos viram 1 coluna */
  .g2,.g3,.g4,.g5{grid-template-columns:1fr}.grid[style*="grid-template-columns"],
.grid.jsl-grade-inline{grid-template-columns:1fr !important}
  .fr2,.fr3,.func-nums{grid-template-columns:1fr 1fr}

  /* Página de orçamentos: empilha tudo em 1 coluna */
  .orc-grid{grid-template-columns:1fr}
  .orc-col-side{order:-1} /* Dados cliente aparecem ANTES dos itens no mobile (mais natural) */
  .orc-preview-card{display:none} /* Preview escondido no mobile (veja direto no PDF) */

  /* Inputs MAIORES pra celular (>=16px evita zoom auto no iOS) */
  .fc{font-size:var(--t-med);padding:12px 13px;scroll-margin-top:80px;scroll-margin-bottom:20px}
  .fl{font-size:var(--t-mini);margin-bottom:5px}
  textarea.fc{font-size:var(--t-med);min-height:70px}
  select.fc{font-size:var(--t-med)}

  /* Destacar campo ativo — fica super claro qual campo está sendo preenchido */
  .fc:focus{
    border-color:var(--y);
    background:var(--g3);
    box-shadow:0 0 0 3px rgba(255,209,0,.2);
    outline:none;
  }

  /* Espaçamento entre campos no mobile */
  .fg{margin-bottom:14px}

  /* Botões maiores */
  .btn{font-size:var(--t-peq);padding:10px 14px;min-height:42px}
  .btn.bsm{font-size:var(--t-peq);padding:8px 11px;min-height:36px}

  /* Tabelas com fonte legível */
  table{font-size:var(--t-peq);min-width:0}
  th{font-size:var(--t-mini);padding:6px 8px}
  td{padding:8px;font-size:var(--t-peq)}

  /* Cards sem overflow forçado (deixa as tabelas internas rolarem) */
  .card{overflow:visible}.card > div[style*="overflow-x"],
.card > div.jsl-rolagem-lateral{overflow-x:auto !important}

  /* KPIs do dashboard: 2 colunas */
  .grid.g5{grid-template-columns:1fr 1fr}

  /* Hero banner mobile */
  .hero-banner{padding:12px 14px}
  .hero-content{flex-direction:column;align-items:flex-start;gap:8px}
  .hero-metrics{gap:8px;width:100%;justify-content:space-around}
  .hero-m{min-width:0;flex:1}
  .hero-m-v{font-size:var(--t-med)}
  .hero-sep{display:none}

  /* KPI strip */
  .kpi-strip{flex-wrap:wrap}
  .kpi-item{min-width:calc(50% - 4px);flex:0 0 calc(50% - 3px)}
  .kpi-val{font-size:var(--t-base)}

  /* Saldo bolso */
  .sb-v{font-size:var(--t-tit)}
  .saldo-bolso-banner{padding:10px 12px}

  /* Charts menores */
  .cw{height:160px}
  .cw-sm{height:130px}

  /* Painel funcionário: empilha abaixo da lista */
  #func-panel-wrap{margin-top:11px}

  /* Cards de funcionário */
  .func-actions{flex-wrap:wrap}
  .func-actions .btn{font-size:var(--t-micro);padding:5px 8px}

  /* Tabelas com scroll horizontal só quando necessário (wrapper tem overflow-x:auto) */

  /* Modais mobile — mais altos e com rolagem; ajustam quando teclado abre */
  .modal{width:100%;max-width:none;max-height:90vh;padding:16px;border-radius:8px 8px 0 0;position:fixed;bottom:0;left:0;right:0;margin:0;transform:none;overflow-y:auto;overscroll-behavior:contain}
  .modal .fg:last-of-type{margin-bottom:20px}
  .modal .mf{position:sticky;bottom:0;background:var(--g1);margin:0 -16px -16px;padding:12px 16px 20px;border-top:1px solid var(--bd);z-index:var(--z-dropdown)}
  .mob-menu-btn{bottom:80px}
  .mo.open{align-items:flex-end}

  /* Calendário menor */
  .cd{font-size:var(--t-micro)}

  /* Tabs do painel */
  .fp-tab{padding:7px 9px;font-size:var(--t-micro)}

  /* Toast embaixo à esquerda para não sobrepor botão */
  .toast{right:auto;left:12px;bottom:80px;font-size:var(--t-mini)}
}

@media (max-width:767px){
  .g5{grid-template-columns:1fr}
  .mc-v{font-size:var(--t-gr)}
  .tb-bem{font-size:var(--t-base)}
  .func-actions .btn{flex:1}
}

/* ===================================================================== */
/* ===== CALCULADORA v19.5 — LAYOUT PROFISSIONAL ====================== */
/* ===================================================================== */

/* Hero da calculadora */
/* ============================================================
   CALCULADORA JSL — INTERFACE PREMIUM v2
   ============================================================ */

/* Header da calculadora */
.calc-hero{
  background:linear-gradient(135deg,#161616 0%,#1e1e1e 100%);
  border:1px solid var(--bd);
  border-top:3px solid var(--y);
  border-radius:8px;
  padding:16px 18px;
  margin-bottom:14px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.calc-hero-left{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.calc-hero-ico{
  width:46px;height:46px;border-radius:10px;
  background:var(--y);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--t-tit);color:#1a1a1a;flex-shrink:0;
  box-shadow:0 4px 12px rgba(255,209,0,.25);
}
.calc-hero-tit{
  font-family:'Barlow Condensed',sans-serif;
  font-size:var(--t-tit);font-weight:900;color:var(--tx);
  text-transform:uppercase;letter-spacing:.5px;line-height:1;
}
.calc-hero-sub{font-size:var(--t-mini);color:var(--mt);font-weight:600;margin-top:4px}
.calc-hero-badge{
  font-size:var(--t-micro);font-weight:800;color:var(--y);
  background:rgba(255,209,0,.1);
  border:1px solid rgba(255,209,0,.2);
  border-radius:20px;padding:3px 10px;
  text-transform:uppercase;letter-spacing:.5px;
  white-space:nowrap;
}

/* Tabs Parede / Forro */
.calc-tabs-wrap{
  display:flex;gap:0;
  background:var(--g1);
  border:1px solid var(--bd);
  border-radius:8px;padding:4px;
  margin-bottom:14px;
}
.calc-tab2{
  flex:1;text-align:center;padding:12px 14px;
  font-size:var(--t-peq);font-weight:700;color:var(--mt);
  cursor:pointer;border-radius:6px;
  transition:all .18s;text-transform:uppercase;
  letter-spacing:.5px;user-select:none;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.calc-tab2:hover{color:var(--tx);background:rgba(255,255,255,.03)}
.calc-tab2.active{background:var(--y);color:#1a1a1a;box-shadow:0 2px 10px rgba(255,209,0,.22)}

/* Layout de dois painéis */
.calc-bloco{display:none}
.calc-bloco.active{display:block}
.calc-layout{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Etapas visuais */
.calc-step{
  background:var(--g1);
  border:1px solid var(--bd);
  border-radius:8px;
  margin-bottom:10px;
  overflow:hidden;
}
.calc-step-header{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;
  border-bottom:1px solid var(--bd);
  background:linear-gradient(90deg,rgba(255,209,0,.04),transparent);
}
.calc-step-num{
  width:26px;height:26px;border-radius:50%;
  background:var(--y);color:#1a1a1a;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:var(--t-peq);flex-shrink:0;
}
.calc-step-title{font-size:var(--t-mini);font-weight:800;color:var(--tx);text-transform:uppercase;letter-spacing:.5px}
.calc-step-subtitle{font-size:var(--t-micro);color:var(--mt);margin-top:1px}
.calc-step-body{padding:12px 14px}

/* Inputs de medida */
.calc-meas-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.calc-meas-input{position:relative}
.calc-meas-input>label{
  font-size:var(--t-micro);color:var(--mt);
  text-transform:uppercase;letter-spacing:.8px;font-weight:800;
  margin-bottom:5px;display:block;
}
.calc-meas-input>input{
  width:100%;background:var(--g2);
  border:2px solid var(--bd);border-radius:6px;
  padding:12px 40px 12px 13px;
  color:var(--tx);font-family:'Barlow',sans-serif;
  font-size:var(--t-med);font-weight:700;
  transition:border .15s,background .15s;
}
.calc-meas-input>input:focus{outline:none;border-color:var(--y);background:var(--g3)}
.calc-meas-unit{
  position:absolute;right:10px;bottom:11px;
  font-size:var(--t-micro);color:var(--y);font-weight:800;
  pointer-events:none;background:var(--g1);
  padding:2px 6px;border-radius:3px;border:1px solid var(--bd);
}

/* Portas */
.calc-portas-wrap{
  display:flex;align-items:center;gap:10px;
  background:rgba(30,136,229,.07);
  border:1px solid rgba(30,136,229,.2);
  border-left:3px solid var(--blu);
  border-radius:6px;padding:9px 12px;margin-bottom:10px;
}
.calc-portas-ico{font-size:var(--t-gr);flex-shrink:0}
.calc-portas-tit{
  flex:1;font-size:var(--t-mini);font-weight:700;color:var(--tx);
}
.calc-portas-tit small{display:block;font-size:var(--t-micro);color:var(--mt);font-weight:400;margin-top:1px}
.calc-portas-sel{
  background:var(--g2);border:1px solid var(--bd);
  border-radius:5px;color:var(--tx);
  padding:5px 8px;font-size:var(--t-peq);font-weight:800;width:60px;
}

/* Botão adicionar */
.calc-add-btn{
  width:100%;padding:12px;
  background:var(--y);color:#1a1a1a;
  border:none;border-radius:6px;
  font-weight:900;font-size:var(--t-peq);cursor:pointer;
  text-transform:uppercase;letter-spacing:.5px;
  transition:all .15s;
  display:flex;align-items:center;justify-content:center;gap:7px;
  box-shadow:0 2px 10px rgba(255,209,0,.2);
}
.calc-add-btn:hover{background:var(--y2);transform:translateY(-1px);box-shadow:0 4px 16px rgba(255,209,0,.3)}
.calc-add-btn:active{transform:translateY(0)}

/* Lista de ambientes */
.calc-list-card{
  background:var(--g1);border:1px solid var(--bd);
  border-radius:8px;margin-bottom:10px;overflow:hidden;
}
.calc-list-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 13px;border-bottom:1px solid var(--bd);
  background:rgba(255,255,255,.02);
}
.calc-list-tit{font-size:var(--t-mini);font-weight:800;color:var(--tx);text-transform:uppercase;letter-spacing:.3px}
.calc-list-cnt{
  font-size:var(--t-micro);font-weight:700;color:var(--y);
  background:rgba(255,209,0,.1);
  border:1px solid rgba(255,209,0,.2);
  padding:2px 8px;border-radius:20px;
}
.calc-list-body{padding:6px;max-height:160px;overflow-y:auto}
.calc-list-foot{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 13px;border-top:1px solid var(--bd);
  background:rgba(255,209,0,.04);
}
.calc-list-foot-lbl{font-size:var(--t-micro);color:var(--mt);font-weight:700;text-transform:uppercase}
.calc-list-foot-val{font-size:var(--t-base);font-weight:900;color:var(--y)}

/* Item na lista */
.calc-list-item{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--g2);border:1px solid var(--bd);
  border-radius:5px;padding:8px 10px;margin-bottom:4px;
  transition:border .12s;
}
.calc-list-item:hover{border-color:rgba(255,209,0,.3)}
.calc-list-item-info{flex:1;min-width:0}
.calc-list-item-dim{font-size:var(--t-peq);font-weight:700;color:var(--tx)}
.calc-list-item-area{font-size:var(--t-micro);color:var(--mt);margin-top:1px}
.calc-list-item-del{
  background:none;border:none;color:var(--mt);
  cursor:pointer;font-size:var(--t-med);padding:0 4px;
  transition:color .12s;
}
.calc-list-item-del:hover{color:var(--red)}

/* Opções de cálculo */
.calc-opts-card{
  background:var(--g1);border:1px solid var(--bd);
  border-radius:8px;overflow:hidden;margin-bottom:10px;
}
.calc-opts-head{
  display:flex;align-items:center;gap:9px;
  padding:10px 13px;border-bottom:1px solid var(--bd);
  background:rgba(255,255,255,.02);
}
.calc-opts-ico{
  width:24px;height:24px;border-radius:5px;
  background:rgba(255,255,255,.06);
  display:flex;align-items:center;justify-content:center;font-size:var(--t-peq);
}
.calc-opts-tit{font-size:var(--t-mini);font-weight:800;color:var(--tx);text-transform:uppercase;letter-spacing:.3px}
.calc-opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 13px}
.calc-opt{display:flex;flex-direction:column;gap:5px}
.calc-opt-full{grid-column:1/-1}
.calc-opt-lbl{font-size:var(--t-micro);color:var(--mt);text-transform:uppercase;letter-spacing:.7px;font-weight:800}
.calc-opt select{
  background:var(--g2);border:1.5px solid var(--bd);
  border-radius:5px;color:var(--tx);padding:8px 10px;
  font-size:var(--t-med);font-weight:700;
  transition:border .12s;
}
.calc-opt select:focus{outline:none;border-color:var(--y)}

/* Nota técnica */
.calc-nota-tecnica{
  background:rgba(255,209,0,.05);
  border:1px solid rgba(255,209,0,.15);
  border-left:3px solid var(--y);
  border-radius:5px;padding:8px 12px;
  font-size:var(--t-micro);color:var(--mt);line-height:1.5;
  margin-bottom:10px;
}
.calc-nota-tecnica strong{color:var(--y)}

/* Painel de resultados */
.calc-result-wrap{
  background:var(--g1);border:1px solid var(--bd);
  border-top:3px solid var(--grn);
  border-radius:8px;
  position:sticky;top:14px;
}
.calc-result-head{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--bd);
}
.calc-result-ico{
  width:32px;height:32px;border-radius:7px;
  background:rgba(67,160,71,.15);
  display:flex;align-items:center;justify-content:center;font-size:var(--t-med);
}
.calc-result-tit{font-size:var(--t-peq);font-weight:800;color:var(--tx);text-transform:uppercase;letter-spacing:.5px}
.calc-result-body{padding:12px 14px}

/* KPIs do resultado */
.calc-kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.calc-kpi{
  background:var(--g2);border:1px solid var(--bd);
  border-radius:6px;padding:9px 11px;
}
.calc-kpi-label{font-size:var(--t-micro);font-weight:800;color:var(--mt);text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px}
.calc-kpi-value{font-size:var(--t-gr);font-weight:900;color:var(--y);line-height:1}
.calc-kpi-unit{font-size:var(--t-micro);color:var(--mt);margin-top:2px}
.calc-kpi.destaque{border-color:rgba(255,209,0,.3);background:rgba(255,209,0,.06)}

/* Tabela de materiais */
.calc-mat-table{width:100%;border-collapse:collapse;margin-bottom:10px}
.calc-mat-table thead th{
  font-size:var(--t-micro);font-weight:800;color:var(--mt);
  text-transform:uppercase;letter-spacing:.7px;
  padding:6px 8px;border-bottom:1px solid var(--bd);
  text-align:left;
}
.calc-mat-table thead th:last-child{text-align:right}
.calc-mat-cat-row td{
  font-size:var(--t-micro);font-weight:800;color:var(--y);
  text-transform:uppercase;letter-spacing:.8px;
  padding:8px 8px 4px;
}
.calc-mat-row{border-bottom:1px solid rgba(58,58,58,.4)}
.calc-mat-row:last-child{border-bottom:none}
.calc-mat-row td{padding:6px 8px;font-size:var(--t-peq);color:var(--tx);vertical-align:middle}
.calc-mat-row:hover td{background:rgba(255,255,255,.02)}
.calc-mat-dot{
  display:inline-block;width:7px;height:7px;
  border-radius:50%;margin-right:7px;vertical-align:middle;flex-shrink:0;
}
.calc-mat-nome{display:flex;align-items:center}
.calc-mat-qtd{font-weight:900;color:var(--y);text-align:right;font-size:var(--t-peq)}
.calc-mat-un{color:var(--mt);font-size:var(--t-micro);text-align:right}
.calc-mat-obs{color:var(--mt);font-size:var(--t-micro)}

/* Alerta técnico */
.calc-alert{
  background:rgba(229,57,53,.08);
  border:1px solid rgba(229,57,53,.2);
  border-left:3px solid var(--red);
  border-radius:5px;padding:8px 11px;
  font-size:var(--t-mini);color:var(--mt);line-height:1.5;
  margin-bottom:8px;
  display:flex;align-items:flex-start;gap:7px;
}
.calc-alert-ic{color:var(--red);flex-shrink:0;font-size:var(--t-peq)}
.calc-alert.warn{
  background:rgba(255,209,0,.07);
  border-color:rgba(255,209,0,.2);
  border-left-color:var(--y);
}
.calc-alert.warn .calc-alert-ic{color:var(--y)}

/* Estado vazio */
.calc-empty{
  text-align:center;padding:32px 20px;
}
.calc-empty-ico{font-size:var(--t-marca-sm);margin-bottom:10px;opacity:.4}
.calc-empty-tit{font-size:var(--t-peq);font-weight:700;color:var(--mt);margin-bottom:5px}
.calc-empty-sub{font-size:var(--t-mini);color:var(--mt);opacity:.7;line-height:1.5}

/* Área total destaque */
.calc-area-destaque{
  background:linear-gradient(135deg,rgba(255,209,0,.1),rgba(255,209,0,.04));
  border:1px solid rgba(255,209,0,.2);
  border-radius:6px;padding:10px 13px;
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:10px;
}
.calc-area-label{font-size:var(--t-micro);font-weight:800;color:var(--mt);text-transform:uppercase;letter-spacing:.5px}
.calc-area-val{font-size:var(--t-tit);font-weight:900;color:var(--y);line-height:1}
.calc-area-unit{font-size:var(--t-mini);color:var(--mt)}

/* Formulário de busca */
.calc-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:12px 14px;border-top:1px solid var(--bd)}
.calc-action{
  padding:10px 8px;border-radius:6px;
  border:1.5px solid var(--bd);background:transparent;
  color:var(--tx);font-weight:700;font-size:var(--t-mini);
  cursor:pointer;display:flex;align-items:center;
  justify-content:center;gap:5px;
  text-transform:uppercase;letter-spacing:.3px;
  transition:all .12s;
}
.calc-action:hover{background:var(--g2);border-color:rgba(255,255,255,.15)}
.calc-action.primary{
  background:var(--y);border-color:var(--y);color:#1a1a1a;
  font-weight:800;
}
.calc-action.primary:hover{background:var(--y2)}

@media (max-width:1023px){
  .calc-layout{grid-template-columns:1fr}
  .calc-result-wrap{position:static}
}
@media (max-width:767px){
  .calc-meas-grid{grid-template-columns:1fr}
  .calc-opts-grid{grid-template-columns:1fr}
  .calc-kpi-grid{grid-template-columns:1fr 1fr}
  .calc-hero-tit{font-size:var(--t-med)}
  .calc-actions{grid-template-columns:1fr}
}

/* ===== Bloco 2 (original: <style> interno do body, calculadora) ===== */
#login-screen{position:fixed;inset:0;background:#0a0a0a;z-index:var(--z-critico);display:flex;align-items:center;justify-content:center;padding:20px}
#login-screen.hidden{display:none}
.login-box{background:var(--bk2);border:1px solid var(--bd);border-radius:8px;padding:32px 28px;width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.login-logo{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:6px}
.login-logo .logo-dl{background:var(--y);color:#1a1a1a;border-radius:4px;padding:6px 10px;font-family:'Barlow Condensed',sans-serif;font-size:var(--t-tit);font-weight:800;line-height:1}
.login-title{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-tit);font-weight:800;color:var(--y);text-transform:uppercase;letter-spacing:1px}
.login-sub{text-align:center;color:var(--mt);font-size:var(--t-mini);margin-bottom:22px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600}
.login-box label{display:block;font-size:var(--t-mini);font-weight:700;color:#aaa;text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;margin-top:14px}
.login-box input{width:100%;background:var(--g1);border:1px solid var(--bd);border-radius:5px;padding:12px 14px;color:var(--tx);font-family:'Barlow',sans-serif;font-size:var(--t-med);font-weight:500;outline:none;transition:border .15s}
.login-box input:focus{border-color:var(--y)}
.login-btn{width:100%;background:var(--y);color:#1a1a1a;border:0;border-radius:5px;padding:13px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:var(--t-med);text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;margin-top:22px;transition:background .15s}
.login-btn:hover{background:var(--y2)}
.login-btn:disabled{opacity:.6;cursor:not-allowed}
.login-err{color:var(--red);font-size:var(--t-peq);margin-top:12px;text-align:center;min-height:16px;font-weight:600}
.login-foot{text-align:center;color:var(--mt);font-size:var(--t-micro);margin-top:18px;letter-spacing:1px}
.user-bar{display:flex;align-items:center;gap:8px;font-size:var(--t-mini);color:#1a1a1a;font-weight:700}
.user-bar .uemail{background:rgba(0,0,0,.15);padding:5px 10px;border-radius:20px;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-bar .ulogout{background:rgba(0,0,0,.25);padding:5px 10px;border-radius:20px;cursor:pointer;font-weight:800;text-transform:uppercase;letter-spacing:.5px;font-size:var(--t-micro)}
.user-bar .ulogout:hover{background:rgba(0,0,0,.4)}
.cloud-status{display:inline-flex;align-items:center;gap:5px;font-size:var(--t-micro);font-weight:700;padding:3px 8px;border-radius:10px;background:rgba(0,0,0,.15);color:#1a1a1a}
.cloud-status.syncing{background:rgba(30,136,229,.25)}
.cloud-status.ok{background:rgba(67,160,71,.25)}
.cloud-status.err{background:rgba(229,57,53,.25)}

/* ===== Bloco 3 (original: <style> interno do body) ===== */
@media (max-width:767px){
  #login-screen > div{grid-template-columns:1fr;}
  #login-lado-chamada{display:none}
  #login-screen > div > div:last-child{margin:0 auto;width:100%;max-width:360px}
  #login-mobile-cadastro{display:block}
}

/* ============================================================
   LOGIN PREMIUM — card flutuante + carrossel "acende"
   (adicionado na auditoria; não afeta o restante do sistema)
   ============================================================ */

/* Perspectiva no container do card de login */
.login-3d-wrap{perspective:1400px;transform-style:preserve-3d}

/* Card flutuante: SEM inclinação (inclinação deslocava a área clicável dos
   inputs). Mantido: sombra profunda, brilho amarelo e flutuação suave. */
#login-box-dono{
  position:relative;
  box-shadow:
    0 28px 60px -18px rgba(0,0,0,.75),
    0 0 0 1px rgba(255,209,0,.10),
    0 0 46px -12px rgba(255,209,0,.28);
  transition:transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
  animation:loginFloat 6.5s ease-in-out infinite;
  will-change:transform;
}
/* brilho/borda viva no topo do card */
#login-box-dono::before{
  content:'';position:absolute;inset:-1px;border-radius:16px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,209,0,.35),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;opacity:.5;
}
@keyframes loginFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-12px)}
}
/* ao passar o mouse, sobe um pouco mais e brilha mais */
#login-box-dono:hover{
  transform:translateY(-6px) scale(1.015);
  box-shadow:
    0 44px 90px -22px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,209,0,.28),
    0 0 70px -10px rgba(255,209,0,.45);
}

/* Carrossel do título — frases empilhadas na mesma célula (grid), cross-fade */
.login-hl-carousel{display:grid}
.login-hl-carousel .lhc-frase{
  grid-area:1 / 1;opacity:0;transform:translateY(10px);
  transition:opacity .8s ease, transform .8s ease, text-shadow .8s ease;
}
.login-hl-carousel .lhc-frase.on{
  opacity:1;transform:translateY(0);
  text-shadow:0 0 26px rgba(255,209,0,.40), 0 0 10px rgba(255,209,0,.22);
}

/* Benefícios "acendem" em sequência ao abrir o login */
.login-acende-seq > *{opacity:0;transform:translateY(8px);animation:acende .7s ease forwards}
.login-acende-seq > *:nth-child(1){animation-delay:.15s}
.login-acende-seq > *:nth-child(2){animation-delay:.30s}
.login-acende-seq > *:nth-child(3){animation-delay:.45s}
.login-acende-seq > *:nth-child(4){animation-delay:.60s}
@keyframes acende{
  0%{opacity:0;transform:translateY(8px);filter:brightness(.6)}
  60%{filter:brightness(1.25)}
  100%{opacity:1;transform:translateY(0);filter:brightness(1)}
}

/* Respeita quem prefere menos movimento */
@media (prefers-reduced-motion:reduce){
  #login-box-dono{animation:none;transform:none}
  #login-box-dono:hover{transform:translateY(-4px)}
  .login-acende-seq > *{animation:none;opacity:1;transform:none}
  .login-hl-carousel .lhc-frase{transition:opacity .3s ease}
}

/* Em telas estreitas o efeito é reduzido */
@media (max-width:1023px){
  #login-box-dono{animation:none}
  #login-box-dono:hover{transform:translateY(-4px)}
}

/* ============================================================
   JSL SISTEMA SAAS — PREMIUM UI V4
   Referência: dashboard corporativo preto/amarelo premium
   ============================================================ */
html,body{background:var(--premium-bg);color:var(--premium-text);font-family:Inter,Barlow,Arial,sans-serif;}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:var(--z-atras);background:
  radial-gradient(circle at 35% 2%,rgba(255,209,0,.055),transparent 32%),
  radial-gradient(circle at 90% 0,rgba(255,255,255,.04),transparent 28%),
  linear-gradient(180deg,#0b0d10 0%,#080a0c 55%,#07090b 100%);}
.sidebar.premium-sidebar{width:var(--sb);background:linear-gradient(180deg,#0d1013 0%,#090b0d 100%);border-right:1px solid rgba(255,255,255,.10);box-shadow:18px 0 50px rgba(0,0,0,.28);padding:0;overflow:auto;}
.premium-logo-area{height:74px;display:flex;align-items:center;gap:13px;padding:0 24px;border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer;background:linear-gradient(90deg,rgba(255,209,0,.045),transparent 70%)}
.premium-logo-jsl{font-weight:1000;font-size:var(--t-marca-md);letter-spacing:-4px;line-height:1;color:var(--premium-yellow);text-shadow:0 0 24px rgba(255,209,0,.28),0 2px 0 rgba(0,0,0,.65);font-family:Arial Black,Barlow Condensed,sans-serif}
.premium-logo-text{display:flex;flex-direction:column;gap:1px;font-size:var(--t-base);line-height:1.05;color:#fff;text-transform:uppercase;font-weight:800;letter-spacing:.3px}.premium-logo-text span{font-size:var(--t-base);color:#fff}.premium-logo-text strong{font-size:var(--t-base)}
.premium-nav{padding:20px 14px 10px}.premium-nav .ng{margin:0 10px 12px;color:#a3a8af;font-size:var(--t-mini);font-weight:700;letter-spacing:.7px;text-transform:uppercase;opacity:.95}.premium-nav .ni{height:42px;border-radius:9px;margin:4px 0;padding:0 13px;display:flex;align-items:center;gap:13px;font-size:var(--t-base);font-weight:600;color:#f1f1f1;background:transparent;border:1px solid transparent;position:relative;transition:.18s ease}.premium-nav .ni:hover{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.08);color:#fff}.premium-nav .ni.active{background:linear-gradient(90deg,rgba(255,209,0,.20),rgba(255,209,0,.055));color:#ffd100;border-color:rgba(255,209,0,.38);box-shadow:inset 0 0 28px rgba(255,209,0,.06)}.premium-nav .ni.active:after{content:"";position:absolute;right:0;top:7px;width:5px;height:28px;background:var(--premium-yellow);border-radius:8px 0 0 8px;box-shadow:0 0 16px rgba(255,209,0,.65)}.premium-nav .ni-ic{width:22px;text-align:center;color:inherit;font-size:var(--t-gr);line-height:1;opacity:1}
.premium-plan-card{margin:12px 14px;border:1px solid rgba(255,209,0,.36);border-radius:12px;padding:14px;background:linear-gradient(135deg,rgba(255,209,0,.10),rgba(255,255,255,.025));}.premium-plan-card div{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:var(--t-base)}.premium-plan-card div span{font-size:var(--t-micro);color:#ffd100;border:1px solid rgba(255,209,0,.5);padding:2px 6px;border-radius:5px}.premium-plan-card p{font-size:var(--t-peq);color:#cdd1d4;margin:9px 0 0}.premium-plan-card button{width:100%;height:36px;margin-top:12px;border-radius:7px;border:1px solid var(--premium-yellow);background:transparent;color:var(--premium-yellow);font-weight:800;cursor:pointer}.premium-plan-card button:hover{background:rgba(255,209,0,.12)}.premium-footer-brand{padding:14px 26px 20px;color:#fff;font-weight:700;font-size:var(--t-base);border-top:1px solid rgba(255,255,255,.08);margin-top:8px}.premium-footer-brand span{font-size:var(--t-peq);color:#8b9198;font-weight:500}
.main{margin-left:0;background:transparent;min-height:100dvh}.premium-topbar{height:74px;background:rgba(9,11,13,.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.09);padding:0 28px;display:flex;align-items:center;gap:24px;position:sticky;top:0;z-index:var(--z-local)}.premium-menu{width:30px;height:30px;background:transparent;border:0;color:#fff;font-size:var(--t-tit);cursor:pointer}.premium-search{width:518px;max-width:42vw;height:44px;display:flex;align-items:center;gap:12px;background:#111418;border:1px solid var(--premium-border);border-radius:10px;padding:0 12px;color:#b7bdc3;box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}.premium-search input{flex:1;background:transparent;border:0;outline:0;color:#e7e7e7;font-size:var(--t-base)}.premium-search kbd{font-size:var(--t-peq);border:1px solid rgba(255,255,255,.14);border-radius:6px;padding:3px 10px;color:#d6d6d6;background:#0b0d10}.premium-top-spacer{flex:1}.premium-ico{width:44px;height:44px;border-radius:9px;border:1px solid var(--premium-border);background:#101318;color:#fff;font-size:var(--t-gr);position:relative;cursor:pointer}.premium-ico:first-of-type:after{content:"";position:absolute;right:9px;top:8px;width:8px;height:8px;border-radius:50%;background:var(--premium-yellow)}.premium-badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:9px;background:#ef3b36;color:#fff;font-size:var(--t-micro);line-height:17px;text-align:center}.premium-user{height:52px;display:flex;align-items:center;gap:12px;padding-left:8px;cursor:pointer;color:#fff}.premium-avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--premium-yellow),#d1a600);color:#0a0a0a;font-weight:900}.premium-user strong{display:block;font-size:var(--t-base);max-width:175px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.premium-user span{display:block;color:#a2a7ad;font-size:var(--t-peq)}.premium-user em{font-style:normal;color:#d4d7db;margin-left:8px}
.content{padding:24px 42px 38px;max-width:none}.premium-dashboard-page{max-width:1520px;margin:0 auto}.premium-welcome-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:22px}.premium-welcome-row h1{font-size:var(--t-hero);line-height:1.1;margin:0 0 8px;color:#fff;font-weight:800;letter-spacing:-.5px}.premium-welcome-row h1 b{font-size:var(--t-micro);color:var(--premium-yellow);border:1px solid rgba(255,209,0,.55);border-radius:5px;padding:4px 8px;vertical-align:middle;margin-left:8px}.premium-welcome-row p{margin:0;color:#fff;font-size:var(--t-med)}.premium-date-range{height:44px;border:1px solid var(--premium-border);background:#111418;color:#fff;border-radius:8px;padding:0 16px;display:flex;align-items:center;gap:10px;font-weight:700}.premium-date-range em{font-style:normal;color:#aeb4ba}
.premium-metric-grid{display:grid;grid-template-columns:repeat(5,minmax(170px,1fr));gap:14px;margin-bottom:16px}.premium-metric-card{height:118px;border:1px solid var(--premium-border);background:linear-gradient(145deg,#15191d,#0e1114);border-radius:11px;padding:18px 18px;display:flex;align-items:flex-start;gap:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 12px 28px rgba(0,0,0,.22);position:relative;overflow:hidden}.premium-metric-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0,rgba(255,255,255,.045),transparent 35%);pointer-events:none}.pm-icon{width:44px;height:44px;border-radius:13px;background:rgba(255,209,0,.09);border:1px solid rgba(255,209,0,.18);display:grid;place-items:center;color:var(--premium-yellow);font-size:var(--t-tit);box-shadow:0 0 22px rgba(255,209,0,.08)}.premium-metric-card small{text-transform:uppercase;color:#d4d7db;font-size:var(--t-mini);letter-spacing:.4px;display:block;margin-bottom:8px}.premium-metric-card strong{font-size:var(--t-tit);color:#fff;display:block;white-space:nowrap;font-weight:800;letter-spacing:-.4px}.premium-metric-card p{font-size:var(--t-peq);color:#c0c5ca;line-height:1.35;margin:8px 0 0}.premium-metric-card .ok{color:var(--premium-green)}.pm-spark{position:absolute;right:22px;bottom:20px;color:var(--premium-yellow);font-size:var(--t-hero);letter-spacing:-10px;opacity:.95}
.premium-main-grid{display:grid;grid-template-columns:1.33fr 1fr;gap:16px;margin-bottom:16px}.premium-bottom-grid{display:grid;grid-template-columns:1fr 1fr 1.13fr;gap:16px}.premium-panel{border:1px solid var(--premium-border);background:linear-gradient(145deg,#14181c 0%,#0e1114 100%);border-radius:12px;padding:22px;box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 16px 40px rgba(0,0,0,.22);min-height:200px}.premium-panel h2,.premium-panel-head h2{margin:0;color:#fff;text-transform:uppercase;font-size:var(--t-base);font-weight:800;letter-spacing:.2px}.premium-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.premium-panel-head button{height:34px;border-radius:8px;border:1px solid var(--premium-border);background:#111418;color:#fff;padding:0 13px}.premium-chart-panel{height:270px}.premium-donut-panel{height:270px}.premium-bar-chart{display:grid;grid-template-columns:58px 1fr;gap:12px;height:205px;margin-top:13px}.premium-bar-chart .axis{display:flex;flex-direction:column;justify-content:space-between;color:#c6cbd0;font-size:var(--t-peq);padding:8px 0 24px}.premium-bar-chart .bars{display:grid;grid-template-columns:repeat(6,1fr);align-items:end;gap:26px;border-bottom:1px solid rgba(255,255,255,.14);background:repeating-linear-gradient(to top,transparent 0,transparent 40px,rgba(255,255,255,.055) 41px);padding:0 10px 0}.premium-bar-chart .bars div{height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px}.premium-bar-chart .bars i{display:block;width:52px;height:var(--h);border-radius:4px 4px 0 0;background:linear-gradient(180deg,#ffd100,#b88900);box-shadow:0 0 18px rgba(255,209,0,.16)}.premium-bar-chart .bars span{color:#d5d8dc;font-size:var(--t-peq);margin-bottom:-26px}.premium-donut-wrap{display:grid;grid-template-columns:250px 1fr;align-items:center;height:215px}.premium-donut{width:180px;height:180px;border-radius:50%;background:conic-gradient(var(--premium-yellow) 0 35%,#6d747a 35% 57%,#9ea3a8 57% 78%,#e24a43 78% 86%,#2a2f34 86% 100%);display:grid;place-items:center;position:relative;margin-left:20px}.premium-donut:after{content:"";position:absolute;width:108px;height:108px;border-radius:50%;background:#111418;box-shadow:inset 0 0 20px rgba(0,0,0,.35)}.premium-donut span{position:relative;z-index:var(--z-local);text-align:center;color:#d8dce0;font-size:var(--t-peq)}.premium-donut b{font-size:var(--t-tit);color:#fff}.premium-legend p{display:flex;align-items:center;gap:10px;color:#fff;margin:0 0 18px;font-size:var(--t-base)}.premium-legend i{width:12px;height:12px;border-radius:50%;display:inline-block}.premium-legend .ap{background:#f7cf64}.premium-legend .pe{background:#ffd100}.premium-legend .an{background:#9ea3a8}.premium-legend .re{background:#ef5451}.premium-legend b{margin-left:auto;font-weight:500;color:#fff}.premium-activity,.premium-projects,.premium-due-list{margin-top:18px;min-height:240px}.premium-activity>div,.premium-due-list>div{display:grid;grid-template-columns:42px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}.premium-activity .pa-ico,.premium-due-list .pd-ico{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;background:rgba(255,209,0,.08);color:var(--premium-yellow);border:1px solid rgba(255,209,0,.11)}.premium-activity b,.premium-due-list b{color:#fff;font-size:var(--t-base)}.premium-activity p,.premium-due-list p{margin:2px 0 0;color:#a6abb1;font-size:var(--t-peq)}.premium-activity time{color:#aeb3b9;font-size:var(--t-peq)}.premium-projects .pp-row{padding:9px 0;border-bottom:1px solid rgba(255,255,255,.06)}.premium-projects .pp-top{display:flex;justify-content:space-between;color:#fff;font-size:var(--t-base);font-weight:700}.premium-projects small{color:#a6abb1}.premium-projects .pp-bar{height:3px;background:#2b3035;border-radius:10px;margin-top:8px;overflow:hidden}.premium-projects .pp-bar i{display:block;height:100%;background:var(--premium-yellow);width:var(--p)}.premium-link-btn{width:100%;height:42px;margin-top:16px;border:1px solid var(--premium-border);background:#111418;border-radius:8px;color:var(--premium-yellow);font-weight:800;text-align:left;padding:0 16px;cursor:pointer}.premium-link-btn span{float:right;color:#fff;font-size:var(--t-tit);line-height:18px}.premium-due-list .amount{color:#fff;font-size:var(--t-peq);white-space:nowrap}.premium-hidden-compat{display:none}.card,.kpi-item,.hero-banner{background:linear-gradient(145deg,#14181c,#0e1114);border-color:var(--premium-border);border-radius:12px}.btn{border-radius:8px}.modal,.panel,.box,.table-wrap{background:linear-gradient(145deg,#14181c,#0e1114);border-color:var(--premium-border)}.fl,input,select,textarea{border-radius:8px;border-color:var(--premium-border);background:#101318;color:#fff}
@media (max-width:1023px){.premium-metric-grid{grid-template-columns:repeat(2,1fr)}.premium-main-grid,.premium-bottom-grid{grid-template-columns:1fr}.premium-search{max-width:34vw}.premium-chart-panel,.premium-donut-panel{height:auto}.premium-donut-wrap{grid-template-columns:1fr}.premium-donut{margin:20px auto}.content{padding:20px}}
@media (max-width:767px){.sidebar.premium-sidebar{transform:translateX(-100%);position:fixed;z-index:var(--z-auth)}.sidebar.premium-sidebar.open{transform:translateX(0)}.main{margin-left:0}.premium-topbar{gap:10px;padding:0 12px}.premium-search{width:auto;flex:1;max-width:none}.premium-user div:not(.premium-avatar),.premium-search kbd{display:none}.premium-metric-grid{grid-template-columns:1fr}.premium-welcome-row{display:block}.premium-date-range{margin-top:12px}.content{padding:14px}}


/* ============================================================
   V4 — Correção de fidelidade funcional
   Mantém somente menus originais do JSL Sistema e remove gap lateral.
   ============================================================ */
body{display:flex;overflow:hidden;}
.sidebar.premium-sidebar{position:relative;left:auto;top:auto;height:100dvh;flex:0 0 var(--sb);}
.main{flex:1 1 auto;width:auto;min-width:0;}
.premium-nav .ni[onclick*="financeiro"],
.premium-nav .ni[onclick*="relatorios"],
.premium-nav .ni[onclick*="recibos"],
.premium-nav .ni[onclick*="clientes"]{margin-top:5px;}
.premium-nav .ni#ni-superadmin{border-top:1px solid rgba(255,209,0,.18);margin-top:8px;color:var(--premium-yellow);}
.premium-dashboard-page{max-width:none;margin:0;}
.content{padding:24px 36px 36px;}
.premium-topbar{padding:0 28px;}
@media (max-width:1023px){.content{padding:18px}}


/* ============================================================
   JSL SISTEMA SAAS — PREMIUM UI V5 REFINADO
   Mantém menus/funções originais e eleva acabamento visual.
   ============================================================ */
body:before{background:
  radial-gradient(circle at 18% 0%,rgba(255,209,0,.075),transparent 25%),
  radial-gradient(circle at 80% 4%,rgba(255,255,255,.045),transparent 22%),
  linear-gradient(180deg,#090c0f 0%,#06080a 54%,#050607 100%);}
.sidebar.premium-sidebar{width:232px;background:linear-gradient(180deg,#0b0e11,#07090b 72%,#050607);}
.premium-logo-area{height:72px;padding:0 20px;}
.premium-logo-jsl{font-size:var(--t-marca-md);letter-spacing:-3px;}
.premium-logo-text strong{font-size:var(--t-peq);}
.premium-nav{padding:20px 13px 8px;gap:7px;}
.premium-nav .nav-section{font-size:var(--t-micro);margin:16px 10px 7px;}
.premium-nav .ni{height:42px;border-radius:10px;padding:0 13px;font-size:var(--t-peq);font-weight:760;}
.premium-nav .ni.active{box-shadow:inset 4px 0 0 var(--premium-yellow),0 0 26px rgba(255,209,0,.08);background:linear-gradient(90deg,rgba(255,209,0,.19),rgba(255,209,0,.045));}
.premium-plan-card{margin:14px 13px 10px;padding:12px 13px;border-radius:11px;min-height:0;background:linear-gradient(145deg,rgba(255,209,0,.08),rgba(255,209,0,.025));}
.premium-plan-card div{font-size:var(--t-peq);}
.premium-plan-card p{font-size:var(--t-mini);margin:6px 0 0;line-height:1.35;}
.premium-plan-card button{height:32px;margin-top:9px;font-size:var(--t-mini);border-radius:8px;}
.premium-footer-brand{font-size:var(--t-peq);padding:10px 18px 14px;}
.premium-footer-brand span{font-size:var(--t-micro);}
.main{margin-left:232px;}
body.sidebar-collapsed .sidebar.premium-sidebar{width:78px;overflow:hidden;}
body.sidebar-collapsed .main{margin-left:78px;}
body.sidebar-collapsed .premium-logo-text,body.sidebar-collapsed .premium-nav .nav-section,body.sidebar-collapsed .premium-nav .ni:not(.active){font-size:0;}
body.sidebar-collapsed .premium-nav .ni{justify-content:center;padding:0;}
body.sidebar-collapsed .premium-nav .ni .ni-ic{margin:0;}
body.sidebar-collapsed .premium-plan-card,body.sidebar-collapsed .premium-footer-brand{display:none;}
.premium-topbar{height:70px;padding:0 28px;background:rgba(7,9,11,.92);box-shadow:0 10px 34px rgba(0,0,0,.22);}
.premium-search{position:relative;width:520px;height:42px;border-radius:12px;background:linear-gradient(180deg,#11151a,#0d1014);}
.premium-search:focus-within{border-color:rgba(255,209,0,.45);box-shadow:0 0 0 3px rgba(255,209,0,.08);}
.premium-search-results{display:none;position:absolute;top:50px;left:0;right:0;background:#0d1115;border:1px solid rgba(255,209,0,.22);border-radius:12px;padding:7px;box-shadow:0 22px 55px rgba(0,0,0,.55);z-index:var(--z-local);}
.premium-search-results.show{display:block;}
.premium-search-results button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 12px;background:transparent;border:0;border-radius:9px;color:#fff;cursor:pointer;text-align:left;font-family:inherit;}
.premium-search-results button:hover{background:rgba(255,209,0,.10);}
.premium-search-results b{font-size:var(--t-peq)}.premium-search-results span{font-size:var(--t-mini);color:var(--premium-yellow)}.psr-empty{padding:12px;color:#aab0b7;font-size:var(--t-peq);text-align:center}
.content{padding:24px 34px 34px;}
.premium-dashboard-page{max-width:1480px;}
.premium-metric-grid{gap:13px;}
.premium-metric-card{height:110px;border-radius:12px;background:linear-gradient(145deg,rgba(22,27,32,.98),rgba(12,15,18,.98));}
.premium-panel{border-radius:13px;background:linear-gradient(145deg,rgba(20,25,30,.98),rgba(11,14,17,.98));}
.premium-panel:hover,.premium-metric-card:hover{border-color:rgba(255,209,0,.18);box-shadow:0 18px 46px rgba(0,0,0,.32),0 0 34px rgba(255,209,0,.035);}
/* Login premium máximo */
#login-screen{background:
  radial-gradient(circle at 18% 14%,rgba(255,209,0,.18),transparent 25%),
  radial-gradient(circle at 82% 0,rgba(255,255,255,.08),transparent 22%),
  linear-gradient(135deg,#050607 0%,#080b0e 48%,#11161b 100%);}
#login-screen:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);pointer-events:none;}
#login-screen>div{max-width:1120px;grid-template-columns:1.08fr 410px;gap:56px;position:relative;z-index:var(--z-local);}
#login-lado-chamada{padding:34px 34px 34px 10px;}
#login-lado-chamada>div:first-child{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:14px 16px;width:max-content;box-shadow:0 18px 44px rgba(0,0,0,.22);}
#login-sigla{background:linear-gradient(135deg,#ffd100,#bd9000);border-radius:14px;box-shadow:0 0 34px rgba(255,209,0,.24);}
#login-titulo{font-size:var(--t-hero);letter-spacing:-.5px;color:#fff;}
#login-subtitulo{color:#c8cdd2;}
.login-hl-carousel{font-size:var(--t-marca-md);line-height:1.04;letter-spacing:-1.3px;max-width:620px;}
.login-hl-carousel .lhc-frase.on{background:linear-gradient(90deg,#fff 0%,#fff6bf 58%,#ffd100 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;}
#login-lado-chamada>div:nth-child(3){font-size:var(--t-med);max-width:767px;color:#b5bdc5;}
.login-acende-seq{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:610px;}
.login-acende-seq>div{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:13px 14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
#login-lado-chamada>button{height:52px;border-radius:12px;background:linear-gradient(135deg,#ffd100,#d7a600);box-shadow:0 18px 44px rgba(255,209,0,.18);}
.login-3d-wrap{transform:translateY(-8px);}
#login-box-dono,#login-box-colab{background:linear-gradient(155deg,rgba(24,29,35,.97),rgba(10,13,16,.98));border:1px solid rgba(255,209,0,.22);border-radius:22px;padding:34px;box-shadow:0 35px 100px rgba(0,0,0,.62),0 0 80px rgba(255,209,0,.10);}
#login-box-dono input,#login-box-colab input{height:46px;border-radius:11px;background:#0e1216;border-color:rgba(255,255,255,.12);}
#login-box-dono input:focus,#login-box-colab input:focus{border-color:rgba(255,209,0,.55);box-shadow:0 0 0 3px rgba(255,209,0,.09);}
.login-btn{height:48px;border-radius:11px;background:linear-gradient(135deg,#ffd100,#d3a100);box-shadow:0 16px 38px rgba(255,209,0,.16);}
#cadastro-screen{background:linear-gradient(135deg,#050607,#0d1115);}
#cadastro-screen>div{max-width:1023px;}
#cad-step-hero>div:nth-child(2),#cad-step-plano,#cad-step-dados{background:linear-gradient(145deg,#151a20,#0d1115);border:1px solid rgba(255,209,0,.18);border-radius:22px;box-shadow:0 25px 80px rgba(0,0,0,.48);}
@media (max-width:1023px){#login-screen>div{grid-template-columns:1fr;max-width:460px}.login-acende-seq{grid-template-columns:1fr}.login-hl-carousel{font-size:var(--t-hero)}.main{margin-left:0}}


/* ============================================================
   PREMIUM UI V6 — alinhamento final + assinatura discreta
   ============================================================ */
body{display:flex;}
.main{margin-left:0;flex:1 1 auto;min-width:0;width:auto;}
body.sidebar-collapsed .main{margin-left:0;}
.content{padding:24px 32px 36px;}
.premium-dashboard-page{max-width:none;width:100%;margin:0;}
.premium-topbar{padding-left:26px;padding-right:26px;}
.premium-metric-grid{grid-template-columns:repeat(5,minmax(0,1fr));}
.premium-main-grid{grid-template-columns:minmax(0,1.38fr) minmax(360px,.92fr);}
.premium-bottom-grid{grid-template-columns:1fr 1fr 1.15fr;}
.premium-plan-card{
  margin:10px 14px 8px;
  padding:10px 11px;
  border-radius:10px;
  min-height:0;
  background:linear-gradient(145deg,rgba(255,209,0,.055),rgba(255,255,255,.018));
  border-color:rgba(255,209,0,.22);
  box-shadow:none;
}
.premium-plan-card div{font-size:var(--t-mini);align-items:center;}
.premium-plan-card div strong{font-size:var(--t-peq);font-weight:800;}
.premium-plan-card div span{font-size:var(--t-micro);padding:2px 6px;border-radius:6px;}
.premium-plan-card p{font-size:var(--t-micro);margin:5px 0 0;color:#c5c9ce;}
.premium-plan-card button{height:28px;margin-top:8px;font-size:var(--t-micro);border-radius:7px;letter-spacing:.2px;}
body.superadmin-mode .premium-plan-card{display:none;}
body.superadmin-mode .premium-footer-brand{margin-top:auto;}
/* SEGURANCA: menu Superadmin NUNCA aparece para assinante comum. Oculto por padrao;
   so visivel em body.superadmin-mode (classe exclusiva do dono do SaaS). vence qualquer estilo inline que algum fluxo deixe escapar. */
#ni-superadmin{display:none;}
body.superadmin-mode #ni-superadmin{display:flex;}
@media (max-width:1023px){
  .premium-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .premium-main-grid,.premium-bottom-grid{grid-template-columns:1fr;}
}
@media (max-width:767px){.main{margin-left:0}.content{padding:14px}}

/* ============================================================
   PREMIUM UI V7 — acabamento global, hover inteligente e config da tela pública
   Mantém as funções originais e melhora todas as telas internas.
   ============================================================ */
.content{padding-left:26px;padding-right:26px;}
.premium-dashboard-page{width:100%;max-width:none;margin:0;}
.premium-metric-grid{gap:16px;}
.premium-main-grid{grid-template-columns:minmax(620px,1.35fr) minmax(420px,.95fr);gap:16px;}
.premium-bottom-grid{gap:16px;}

/* o conteúdo “acende” ao passar o mouse, sem mexer em função */
.premium-panel,.premium-metric-card,.card,.box,.panel,.table-wrap,.calc-card,.res-card,.obra-card,.orc-card,.modal,.premium-plan-card{
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease,filter .18s ease;
}
.premium-panel:hover,.premium-metric-card:hover,.card:hover,.box:hover,.panel:hover,.table-wrap:hover,.calc-card:hover,.res-card:hover,.obra-card:hover,.orc-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,209,0,.34);
  box-shadow:0 20px 54px rgba(0,0,0,.34),0 0 0 1px rgba(255,209,0,.06),0 0 34px rgba(255,209,0,.055);
  filter:saturate(1.04);
}
button,.btn,.ni,.premium-ico,.premium-search,.premium-date-range,input,select,textarea{
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease,transform .16s ease;
}
button:hover,.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,.22),0 0 18px rgba(255,209,0,.08);}
input:focus,select:focus,textarea:focus,.premium-search:focus-within{
  border-color:rgba(255,209,0,.48);
  box-shadow:0 0 0 3px rgba(255,209,0,.08),0 0 22px rgba(255,209,0,.08);
  outline:none;
}

/* Telas internas do sistema: orçamento, obras, contrato, colaboradores, calculadora */
.pg h1,.pg h2,.pg h3,.section-title,.st{letter-spacing:.2px;}
.tbl,table{border-collapse:separate;border-spacing:0;overflow:hidden;border-radius:12px;}
thead th{background:linear-gradient(180deg,#181d22,#111519);color:#f4f5f2;border-bottom:1px solid rgba(255,209,0,.18);}
tbody tr{transition:background .15s ease;}
tbody tr:hover{background:rgba(255,209,0,.045);}
.fc,.fl-input,.input,input,select,textarea{background:#101419;border:1px solid rgba(255,255,255,.115);color:#f6f6f3;}
.fg,.form-group{position:relative;}

/* Gráficos Chart.js com área mais elegante */
canvas{border-radius:12px;}
.card canvas,.premium-panel canvas{filter:drop-shadow(0 12px 28px rgba(0,0,0,.28));}

/* Configuração admin da tela pública */
.premium-admin-public-config{
  background:linear-gradient(145deg,rgba(255,209,0,.07),rgba(255,255,255,.025));
  border:1px solid rgba(255,209,0,.20);
  border-radius:14px;
  padding:14px;
  margin:12px 0 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.login-public-plans{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 22px;}
.login-public-plans span{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,209,0,.24);background:rgba(255,209,0,.08);color:#f8f8f2;border-radius:999px;padding:7px 10px;font-size:var(--t-peq);font-weight:700;}
.login-public-plans span:before{content:'✓';color:var(--y);font-weight:900;}

/* card de assinatura cada vez mais discreto */
.premium-plan-card{padding:12px;margin:10px 14px;border-color:rgba(255,209,0,.26);background:linear-gradient(135deg,rgba(255,209,0,.07),rgba(255,255,255,.018));}
.premium-plan-card p{font-size:var(--t-peq);margin:6px 0 0;}
.premium-plan-card button{height:32px;margin-top:9px;font-size:var(--t-peq);text-transform:none;}

@media (max-width:1439px){.premium-main-grid{grid-template-columns:1fr}.premium-donut-wrap{grid-template-columns:260px 1fr}}

/* V9 - gráfico premium de faturamento em linha/área */
.premium-revenue-chart-wrap{height:205px;margin-top:13px;position:relative}
.premium-revenue-chart-wrap canvas{width:100%;height:100%;display:block}
.premium-panel:hover,.premium-metric-card:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 0 0 1px rgba(255,209,0,.14),0 22px 60px rgba(0,0,0,.34);transform:translateY(-1px)}

/* ============================================================
   V11 - Refinamento calculadora premium e PDF orçamento 1 página
   ============================================================ */
#page-estoque{max-width:none;width:100%;margin:0;padding:28px 28px 44px;}
#page-estoque .calc-hero{background:radial-gradient(circle at 10% 0%,rgba(255,209,0,.14),transparent 34%),linear-gradient(135deg,rgba(21,25,30,.98),rgba(8,10,12,.98));border:1px solid rgba(255,209,0,.18);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 22px 70px rgba(0,0,0,.34);padding:20px 22px;margin-bottom:18px;}
#page-estoque .calc-hero-ico{width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,var(--premium-yellow,#ffd100),#b88900);color:#080a0c;display:flex;align-items:center;justify-content:center;box-shadow:0 0 28px rgba(255,209,0,.18);}
#page-estoque .calc-hero-tit{font-size:var(--t-tit);letter-spacing:.2px;color:#fff;}
#page-estoque .calc-hero-sub{color:#aeb5bd;font-size:var(--t-peq);}
#page-estoque .calc-hero-badge{border:1px solid rgba(255,209,0,.24);background:rgba(255,209,0,.08);color:var(--premium-yellow,#ffd100);border-radius:999px;padding:8px 12px;font-weight:800;}
#page-estoque .c2-resumo,#page-estoque .c2-panel{background:linear-gradient(145deg,rgba(20,25,30,.98),rgba(10,13,16,.98));border:1px solid rgba(255,255,255,.08);border-radius:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 18px 55px rgba(0,0,0,.26);}
#page-estoque .c2-panel:hover{border-color:rgba(255,209,0,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(255,209,0,.08),0 24px 70px rgba(0,0,0,.34);transform:translateY(-1px);transition:.18s ease;}
#page-estoque .c2-panel-head{border-bottom:1px solid rgba(255,255,255,.07);}
#page-estoque .c2-panel-tit{font-size:var(--t-med);color:#fff;}
#page-estoque .c2-panel-area{background:rgba(255,209,0,.07);border-color:rgba(255,209,0,.18);color:#ffd100;}
#page-estoque .c2-entry-field input,#page-estoque .c2-entry-field select,#page-estoque .c2-cfg-item select{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);border-radius:10px;}
#page-estoque .c2-entry-field input:focus,#page-estoque .c2-entry-field select:focus,#page-estoque .c2-cfg-item select:focus{border-color:rgba(255,209,0,.55);box-shadow:0 0 0 3px rgba(255,209,0,.08);}
#page-estoque .c2-add,#page-estoque .cm-btn{border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.18);}
#page-estoque .cm-table th,#page-estoque .c2-medidas th{background:rgba(255,255,255,.025);color:#aeb5bd;}
#page-estoque .cm-table tr:hover td,#page-estoque .c2-medidas tr:hover td{background:rgba(255,209,0,.045);}
#page-estoque .c2-grid{gap:18px;}
#page-estoque .c2-panel-mat,#page-estoque .c2-panel-hist{margin-top:18px;}


/* V17 — Select/dropdown premium escuro: corrige opções brancas no Chrome/Windows */
select,
select.fc,
.c2-entry-field select,
.c2-cfg-item select,
#page-estoque select{
  appearance:auto;
  -webkit-appearance:auto;
  background-color:#11161b;
  color:#f8f9fa;
  border-color:rgba(255,255,255,.16);
}
select option,
select optgroup,
.fc option,
#page-estoque select option,
.c2-entry-field select option,
.c2-cfg-item select option{
  background:#0e1318;
  color:#f8f9fa;
}
select option:checked,
select option:hover{
  background:#FFD100;
  color:#111;
}
#page-estoque .c2-panel,
#page-estoque .c2-cfg{
  backdrop-filter:blur(10px);
}
#page-estoque .c2-entry-field input:hover,
#page-estoque .c2-entry-field select:hover,
#page-estoque .c2-cfg-item select:hover{
  border-color:rgba(255,209,0,.34);
  box-shadow:0 0 0 1px rgba(255,209,0,.08),0 0 22px rgba(255,209,0,.04);
}

/* ============================================================
   V18 — Responsividade Premium iPhone/Android/Tablet
   Objetivo: publicar no Firebase com uso confortável no celular
   ============================================================ */
html,body{max-width:100%;overflow-x:hidden;}
*{box-sizing:border-box;}
img,canvas,svg,video{max-width:100%;}
.table-wrap,.tbl-wrap,.cm-table-wrap,.c2-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-wrap table,.tbl-wrap table,.cm-table-wrap table,.c2-table-wrap table{min-width:720px;}

@media (max-width:1023px){
  body{background:#07090b;}
  .main{margin-left:0;width:100%;min-width:0;}
  .content{padding:14px;width:100%;max-width:100%;}
  .sidebar,.sidebar.premium-sidebar{
    position:fixed;left:0;top:0;bottom:0;
    width:min(82vw,310px);height:100dvh;z-index:var(--z-pagamento);
    transform:translateX(-105%);transition:transform .24s ease;
    box-shadow:24px 0 70px rgba(0,0,0,.62);
  }
  .sidebar.open,.sidebar.premium-sidebar.open{transform:translateX(0);}
  .sidebar-overlay.show{display:block;position:fixed;inset:0;z-index:var(--z-pagamento);background:rgba(0,0,0,.62);backdrop-filter:blur(4px);}
  .mob-menu-btn,.premium-menu{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;}
  .premium-topbar{height:auto;min-height:62px;padding:10px 12px;gap:8px;position:sticky;top:0;z-index:var(--z-toast);}
  .premium-search{order:3;width:100%;flex-basis:100%;max-width:none;height:42px;}
  .premium-actions{gap:6px;margin-left:auto;}
  .premium-ico{width:38px;height:38px;}
  .premium-user{padding:0;background:transparent;border:0;}
  .premium-user div:not(.premium-avatar){display:none;}
  .premium-dashboard-page{width:100%;max-width:none;margin:0;padding:0;}
  .premium-welcome-row{display:block;margin-bottom:14px;}
  .premium-welcome-row h1{font-size:var(--t-tit);line-height:1.15;}
  .premium-welcome-row p{font-size:var(--t-peq);color:#b8bec5;}
  .premium-date-range{height:38px;width:100%;margin-top:12px;justify-content:center;font-size:var(--t-peq);}
  .premium-metric-grid{grid-template-columns:1fr;gap:12px;}
  .premium-metric-card{height:auto;min-height:96px;padding:14px;}
  .premium-main-grid,.premium-bottom-grid{grid-template-columns:1fr;gap:12px;}
  .premium-chart-panel,.premium-donut-panel,.premium-panel{height:auto;min-height:0;padding:14px;}
  .premium-revenue-chart-wrap{height:210px;}
  .premium-donut-wrap{grid-template-columns:1fr;}
  .premium-donut{margin:12px auto;transform:scale(.9);}
  .premium-panel-head{gap:8px;align-items:flex-start;}
  .premium-panel-head h3{font-size:var(--t-base);}
  .premium-pill{font-size:var(--t-micro);padding:5px 8px;}
}

@media (max-width:1023px){
  .pg,.page,.section,#page-estoque{padding:14px;width:100%;max-width:100%;}
  .grid,.cards,.form-grid,.dash-grid,.resumo-grid,.stats-grid{grid-template-columns:1fr;}
  .card,.box,.panel,.modal,.table-wrap,.calc-card,.res-card,.obra-card,.orc-card{border-radius:14px;padding:14px;}
  h1{font-size:var(--t-tit);} h2{font-size:var(--t-gr);} h3{font-size:var(--t-med);}
  input,select,textarea,button,.btn{min-height:44px;font-size:var(--t-med);}
  .btn-row,.actions,.form-actions{display:flex;flex-direction:column;gap:9px;align-items:stretch;}
  .btn-row button,.actions button,.form-actions button{width:100%;}
  .modal{width:calc(100vw - 24px);max-width:calc(100vw - 24px);max-height:86dvh;overflow:auto;}
  .modal-content{width:calc(100vw - 24px);max-width:calc(100vw - 24px);}
  .premium-admin-public-config{padding:12px;}
}

@media (max-width:1023px){
  #page-estoque{padding:12px;}
  #page-estoque .calc-hero{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px;border-radius:16px;}
  #page-estoque .calc-hero-tit{font-size:var(--t-gr);}
  #page-estoque .calc-hero-sub{font-size:var(--t-peq);}
  #page-estoque .calc-hero-badge{width:100%;justify-content:center;text-align:center;}
  #page-estoque .c2-grid,#page-estoque .c2-main,#page-estoque .c2-wrap{display:grid;grid-template-columns:1fr;gap:12px;}
  #page-estoque .c2-panel,#page-estoque .c2-resumo{padding:13px;border-radius:15px;}
  #page-estoque .c2-entry-row,#page-estoque .c2-cfg-grid{display:grid;grid-template-columns:1fr;gap:10px;}
  #page-estoque .c2-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  #page-estoque .c2-tabs button{width:100%;}
  #page-estoque .c2-panel-head{flex-direction:column;align-items:flex-start;gap:8px;}
  #page-estoque .c2-panel-area{width:100%;text-align:center;}
  #page-estoque .cm-table,#page-estoque .c2-medidas{min-width:720px;}
}

@media (max-width:767px){
  .content{padding:10px;}
  .premium-topbar{padding:8px 10px;}
  .premium-welcome-row h1{font-size:var(--t-gr);}
  .premium-metric-card b,.premium-metric-card strong{font-size:var(--t-tit);}
  .premium-revenue-chart-wrap{height:185px;}
  .premium-panel,.premium-metric-card{border-radius:12px;}
  .login-hl-carousel{font-size:var(--t-hero);line-height:1.08;}
  #login-screen{padding:14px;}
  #login-screen>div{width:100%;max-width:100%;}
}


/* ==================== V21 — refinamento premium interno ==================== */
.func-card{background:linear-gradient(145deg,rgba(16,20,25,.98),rgba(10,13,16,.98));border:1px solid rgba(255,209,0,.10);border-radius:16px;box-shadow:0 14px 38px rgba(0,0,0,.28)}
.func-card:hover{border-color:rgba(255,209,0,.55);box-shadow:0 0 0 1px rgba(255,209,0,.18),0 18px 48px rgba(0,0,0,.42);transform:translateY(-2px)}
.func-header{background:linear-gradient(90deg,rgba(255,209,0,.10),rgba(255,255,255,.02));border-bottom:1px solid rgba(255,255,255,.06)}
.func-avatar,.fp-avatar{box-shadow:0 0 24px rgba(255,209,0,.20)}
.func-panel{border-radius:18px;background:linear-gradient(145deg,rgba(16,20,25,.98),rgba(8,10,12,.98));box-shadow:0 18px 45px rgba(0,0,0,.35);border:1px solid rgba(255,209,0,.12)}
.fp-head{background:linear-gradient(135deg,var(--y),#b88900)}
.fn-box{border:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.035);border-radius:12px}
#page-obras .mc{border-radius:18px;background:linear-gradient(145deg,rgba(16,20,25,.98),rgba(9,12,16,.98));border:1px solid rgba(255,255,255,.08);box-shadow:0 16px 42px rgba(0,0,0,.30)}
.obras-premium-chart{border-radius:18px;background:linear-gradient(145deg,rgba(16,20,25,.98),rgba(8,10,12,.98));border:1px solid rgba(255,209,0,.14);overflow:hidden}
.obras-chart-bars{display:flex;flex-direction:column;gap:12px;padding:8px 4px 2px}
.obras-chart-row{display:grid;grid-template-columns:110px 1fr 130px;align-items:center;gap:12px;font-size:var(--t-peq)}
.obras-chart-label{color:var(--mt);font-weight:800;text-transform:uppercase;font-size:var(--t-micro);letter-spacing:.55px}
.obras-chart-track{height:12px;border-radius:999px;background:rgba(255,255,255,.055);overflow:hidden;border:1px solid rgba(255,255,255,.045)}
.obras-chart-fill{height:100%;border-radius:999px;box-shadow:0 0 18px rgba(255,209,0,.18)}
.obras-chart-fill.gold{background:linear-gradient(90deg,#765900,var(--y),#fff1a3)}
.obras-chart-fill.green{background:linear-gradient(90deg,#0d5f32,#40d36b)}
.obras-chart-fill.red{background:linear-gradient(90deg,#7d1414,#ff5656)}
.obras-chart-val{text-align:right;color:var(--tx);font-weight:900;font-family:'Barlow Condensed',sans-serif;font-size:var(--t-med)}
.obras-chart-foot{display:flex;justify-content:space-between;margin-top:6px;color:var(--mt);font-size:var(--t-mini);border-top:1px solid rgba(255,255,255,.06);padding-top:10px}
#hist-lista .btn.br{border-color:rgba(255,80,80,.55);color:#ff6b68}
@media (max-width:1023px){.obras-chart-row{grid-template-columns:1fr}.obras-chart-val{text-align:left}.obras-chart-foot{flex-direction:column;gap:4px}.func-nums{grid-template-columns:1fr 1fr}.func-header{align-items:flex-start;gap:8px}.func-actions .btn{min-height:38px}}

/* ============================================================
   V22 — Responsividade Inteligente estilo Netflix
   Um único sistema se adapta automaticamente a desktop, tablet e celular.
   Não altera funcionalidades, apenas layout/comportamento visual.
   ============================================================ */
body.device-mobile,
body.device-tablet,
body.device-desktop{min-height:100dvh;}
body.device-mobile{font-size:var(--t-base);}
body.device-mobile input,
body.device-mobile select,
body.device-mobile textarea{font-size:var(--t-med);} /* evita zoom automático no iPhone */

/* Desktop grande: conteúdo ocupa melhor a tela, sem ficar espremido */
@media (min-width:1440px){
  .content,.premium-dashboard-page{max-width:1680px;margin-left:auto;margin-right:auto;}
  .premium-metric-grid{grid-template-columns:repeat(5,minmax(180px,1fr));}
  .premium-main-grid{grid-template-columns:minmax(0,1.65fr) minmax(320px,.85fr);}
}

/* Notebook / tablet horizontal */
@media (max-width:1023px){
  .premium-search{max-width:36vw;}
  .premium-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .premium-main-grid,.premium-bottom-grid{grid-template-columns:1fr;}
  .content{padding:20px;}
}

/* Tablet e celular: comportamento de app, igual streaming/Netflix */
@media (max-width:1023px){
  body{display:block;overflow:auto;min-height:100dvh;padding-left:var(--safe-left);padding-right:var(--safe-right);}
  .main{width:100%;min-height:100dvh;overflow:visible;}
  .content{padding-bottom:calc(18px + var(--safe-bottom));}
  .premium-topbar{
    padding-top:calc(8px + var(--safe-top));
    box-shadow:0 12px 38px rgba(0,0,0,.42);
  }
  .premium-menu{border:1px solid rgba(255,209,0,.22);border-radius:12px;background:rgba(255,209,0,.08);color:var(--y);}
  .sidebar,.sidebar.premium-sidebar{border-right:1px solid rgba(255,209,0,.16);}
  .sidebar-overlay.show{animation:jslOverlayIn .18s ease both;}
  .sidebar.open,.sidebar.premium-sidebar.open{animation:jslDrawerIn .20s ease both;}
  body.mobile-menu-open{overflow:hidden;touch-action:none;}
}
@keyframes jslOverlayIn{from{opacity:0}to{opacity:1}}
@keyframes jslDrawerIn{from{transform:translateX(-105%)}to{transform:translateX(0)}}

/* Celular: telas viram cards empilhados, legíveis e tocáveis */
@media (max-width:1023px){
  .premium-topbar{border-radius:0 0 18px 18px;}
  .premium-search{border-radius:14px;background:rgba(255,255,255,.06);}
  .premium-search-results{left:10px;right:10px;top:116px;width:auto;max-height:55dvh;overflow:auto;}
  .premium-metric-card,.premium-panel,.premium-chart-panel,.premium-donut-panel,.card,.mc,.box,.panel{
    box-shadow:0 13px 34px rgba(0,0,0,.36);
    border:1px solid rgba(255,209,0,.10);
  }
  .premium-metric-card:active,.ni:active,.btn:active,button:active{transform:scale(.985);}
  .premium-chart-panel canvas,.premium-panel canvas,.mc canvas{max-height:230px;}
  table{font-size:var(--t-peq);}
  .table-wrap:after,.tbl-wrap:after,.cm-table-wrap:after,.c2-table-wrap:after{
    content:'deslize para ver mais →';display:block;color:var(--mt);font-size:var(--t-mini);font-weight:700;text-align:right;padding:6px 2px 0;
  }
  .page.active{animation:jslPageIn .22s ease both;}
}
@keyframes jslPageIn{from{opacity:.55;transform:translateY(6px)}to{opacity:1;transform:none}}

/* Celular pequeno */
@media (max-width:767px){
  .premium-topbar{gap:7px;}
  .premium-ico{display:none;}
  .premium-avatar{width:38px;height:38px;}
  .premium-welcome-row h1{font-size:var(--t-gr);}
  .premium-date-range{font-size:var(--t-mini);}
  .content{padding:9px;}
  .premium-metric-card{padding:12px;}
  .premium-panel-head{flex-direction:column;align-items:flex-start;}
  #page-estoque .c2-tabs{grid-template-columns:1fr;}
}

/* Tablet vertical */
@media (min-width:768px) and (max-width:1023px){
  .premium-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid,.cards,.form-grid,.dash-grid,.resumo-grid,.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .modal,.modal-content{max-width:720px;width:calc(100vw - 48px);}
}

/* Orientação paisagem em celular: compacta topo e evita corte */
@media (max-height:520px) and (orientation:landscape){
  .premium-topbar{position:relative;min-height:54px;padding:7px 10px;}
  .sidebar,.sidebar.premium-sidebar{width:min(68vw,300px);}
  .content{padding:10px;}
  .premium-search{order:initial;flex-basis:auto;}
  .modal,.modal-content{max-height:92dvh;}
}

/* Aparência nativa escura em dropdowns do mobile */
select,select option{background:#0b0f14;color:#f5f6f8;}

/* ============================================================
   V26 — PWA INSTALL PREMIUM
   ============================================================ */
.pwa-install-backdrop{
  position:fixed;inset:0;z-index:var(--z-critico);
  background:rgba(4,7,10,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  align-items:center;justify-content:center;
  padding:18px;
}
.pwa-install-modal{
  width:min(440px,100%);
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,rgba(20,25,31,.98),rgba(8,11,15,.98));
  border:1px solid rgba(245,196,0,.22);
  border-radius:24px;
  padding:28px 24px 22px;
  box-shadow:0 30px 90px rgba(0,0,0,.62), inset 0 1px 0 rgba(255,255,255,.06);
  color:var(--tx,#f7f7f7);
  text-align:center;
}
.pwa-install-glow{
  position:absolute;inset:-80px -80px auto auto;
  width:220px;height:220px;border-radius:999px;
  background:radial-gradient(circle,rgba(245,196,0,.24),transparent 70%);
  pointer-events:none;
}
.pwa-install-x{
  position:absolute;right:14px;top:12px;
  width:34px;height:34px;border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);color:var(--mt,#9ca3af);
  font-size:var(--t-tit);line-height:1;cursor:pointer;
}
.pwa-install-icon{
  width:72px;height:72px;border-radius:20px;margin:0 auto 16px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f5c400,#c99700);
  color:#121212;font-family:'Barlow Condensed',Arial,sans-serif;
  font-size:var(--t-hero);font-weight:900;letter-spacing:.5px;
  box-shadow:0 16px 44px rgba(245,196,0,.28);
}
.pwa-install-eyebrow{
  color:var(--y,#f5c400);font-size:var(--t-mini);font-weight:900;
  text-transform:uppercase;letter-spacing:.12em;margin-bottom:8px;
}
.pwa-install-modal h2{
  margin:0 0 10px;font-family:'Barlow Condensed',Arial,sans-serif;
  font-size:var(--t-marca-sm);line-height:1;font-weight:900;letter-spacing:.2px;
}
.pwa-install-modal p{
  margin:0 auto 18px;max-width:350px;color:var(--mt,#9ca3af);
  font-size:var(--t-base);line-height:1.55;
}
.pwa-ios-steps{
  text-align:left;background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:14px;margin:14px 0 18px;
  color:var(--tx,#f7f7f7);font-size:var(--t-peq);line-height:1.6;
}
.pwa-ios-steps div+div{margin-top:6px}
.pwa-install-actions{display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px}
.pwa-install-actions .btn{width:100%;justify-content:center;padding:13px 16px;border-radius:14px}
.pwa-install-note{margin-top:14px;color:var(--mt,#9ca3af);font-size:var(--t-mini)}
.pwa-install-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:var(--z-critico);
  background:linear-gradient(135deg,rgba(18,23,29,.96),rgba(8,12,16,.96));
  border:1px solid rgba(245,196,0,.24);border-radius:18px;
  padding:12px;align-items:center;gap:12px;
  box-shadow:0 18px 60px rgba(0,0,0,.50);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.pwa-banner-ico{width:40px;height:40px;border-radius:13px;background:rgba(245,196,0,.14);display:flex;align-items:center;justify-content:center;font-size:var(--t-gr);flex-shrink:0}
.pwa-banner-btn{background:var(--y,#f5c400);color:#111;border:0;border-radius:12px;padding:10px 14px;font-family:'Barlow',Arial,sans-serif;font-weight:900;font-size:var(--t-peq);cursor:pointer;white-space:nowrap}
.pwa-banner-close{background:transparent;border:0;color:var(--mt,#9ca3af);font-size:var(--t-tit);line-height:1;cursor:pointer;padding:4px 6px}
@media (max-width:767px){
  .pwa-install-modal{padding:26px 18px 20px;border-radius:22px}
  .pwa-install-modal h2{font-size:var(--t-hero)}
  .pwa-install-banner{left:10px;right:10px;bottom:10px;border-radius:16px}
  .pwa-banner-btn{padding:10px 12px}
}

/* ============================================================
   V27 — Ajuda estável + tela de planos premium/conversão
   ============================================================ */
#plano-empresarial-card, #plano-premium-card, #plano-basico-card,
#ass-card-empresarial, #ass-card-premium, #ass-card-basico{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(145deg,rgba(20,24,28,.98),rgba(9,12,15,.98));
  box-shadow:0 18px 48px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
  padding:18px 18px;
}
#plano-premium-card::before,#ass-card-premium::before{
  content:'MAIS VENDIDO';
  position:absolute;right:12px;top:10px;
  background:linear-gradient(135deg,#ffd100,#b88900);
  color:#151515;font-size:var(--t-micro);font-weight:900;letter-spacing:.8px;
  padding:5px 9px;border-radius:999px;z-index:var(--z-local);
}
#plano-empresarial-card::before,#ass-card-empresarial::before{
  content:'EQUIPE';
  position:absolute;right:12px;top:10px;
  background:linear-gradient(135deg,#f4d083,#7f6424);
  color:#151515;font-size:var(--t-micro);font-weight:900;letter-spacing:.8px;
  padding:5px 9px;border-radius:999px;z-index:var(--z-local);
}
#plano-empresarial-card:hover,#plano-premium-card:hover,#plano-basico-card:hover,
#ass-card-empresarial:hover,#ass-card-premium:hover,#ass-card-basico:hover{
  transform:translateY(-2px);
  border-color:rgba(255,209,0,.55);
  box-shadow:0 22px 64px rgba(0,0,0,.42),0 0 0 1px rgba(255,209,0,.10);
}
#cad-empresarial-disp,#ass-empresarial-disp{
  background:rgba(255,209,0,.14);
  color:#ffd100;
}
#cad-empresarial-nome,#ass-empresarial-nome{color:#f4d083;}
.jsl-help-modal{max-width:680px;border-top:3px solid var(--y);}
.jsl-help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px;margin:14px 0;}
.jsl-help-grid .btn{justify-content:flex-start;min-height:42px;background:rgba(255,255,255,.035);}
.jsl-help-box{background:rgba(255,255,255,.04);border:1px solid var(--bd);border-radius:14px;padding:14px;margin-top:10px;}
#m-ajuda-premium{z-index:var(--z-critico);}
#m-ajuda-premium .modal{animation:jslHelpIn .16s ease-out;}
@keyframes jslHelpIn{from{opacity:.5;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:1023px){
  #plano-empresarial-card,#plano-premium-card,#plano-basico-card,
  #ass-card-empresarial,#ass-card-premium,#ass-card-basico{padding:16px;align-items:flex-start;}
  .jsl-help-grid{grid-template-columns:1fr;}
}


/* ============================================================
   V29 — Premium App Web leve (sem imagens/vídeos pesados)
   Acabamento Apple/Stripe/Netflix: profundidade, glass, microinterações.
   ============================================================ */
html{background:#05070a;}
body{
  font-family:var(--font-ui);
  background:
    radial-gradient(circle at 16% 10%, rgba(255,209,0,.075), transparent 26%),
    radial-gradient(circle at 86% 12%, rgba(59,130,246,.055), transparent 26%),
    radial-gradient(circle at 70% 90%, rgba(255,209,0,.045), transparent 34%),
    linear-gradient(135deg,#05070a 0%,#080b0f 46%,#040506 100%);
  color:var(--tx);
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}
body::before{
  content:"";position:fixed;inset:0;z-index:var(--z-atras);pointer-events:none;opacity:.42;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.020) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 22%,#000 0%,transparent 72%);
}
body::after{
  content:"";position:fixed;inset:0;z-index:var(--z-atras);pointer-events:none;opacity:.35;
  background:linear-gradient(120deg,transparent 0 38%,rgba(255,255,255,.025) 45%,transparent 54% 100%);
  transform:translateX(-20%);
  animation:jslAmbientSweep 16s ease-in-out infinite alternate;
}
@keyframes jslAmbientSweep{to{transform:translateX(20%)}}

/* Splash ultra leve para sensação de app nativo */
#jsl-app-splash{
  position:fixed;inset:0;z-index:var(--z-critico);display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 45%,rgba(255,209,0,.10),transparent 28%),#05070a;
  transition:opacity .35s ease,visibility .35s ease;
}
#jsl-app-splash.hide{opacity:0;visibility:hidden;pointer-events:none}
.jsl-splash-card{
  width:min(360px,86vw);padding:34px 28px;border-radius:28px;text-align:center;
  background:linear-gradient(145deg,rgba(19,24,29,.92),rgba(7,10,13,.92));
  border:1px solid rgba(255,209,0,.18);box-shadow:0 30px 90px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
}
.jsl-splash-logo{font-family:var(--font-display);font-size:var(--t-marca-md);line-height:.9;font-weight:900;color:var(--y);letter-spacing:-2px;text-shadow:0 0 34px rgba(255,209,0,.35);}
.jsl-splash-title{margin-top:10px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;color:#fff}
.jsl-splash-sub{font-size:var(--t-peq);color:var(--mt);margin-top:6px}
.jsl-splash-line{height:3px;border-radius:999px;margin:22px auto 0;width:140px;background:linear-gradient(90deg,transparent,var(--y),transparent);overflow:hidden;position:relative}
.jsl-splash-line::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#fff,transparent);animation:jslLoading 1.2s ease-in-out infinite}
@keyframes jslLoading{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* Tipografia premium */
h1,h2,h3,.mt2,.premium-title,.tb-bem,.mc-v,.dash-kpi-value,.calc-area-val,.fn-val,.fp-nome{
  font-family:var(--font-display);
  letter-spacing:-.01em;
}
.content,.main{background:transparent;}
.content{padding:24px 28px;}
@media (max-width:1023px){.content{padding:14px}}

/* Topbar com glass premium */
.topbar,.premium-topbar{
  background:rgba(5,7,10,.72);
  border-bottom:1px solid rgba(255,255,255,.07);
  backdrop-filter:blur(20px) saturate(150%);
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  box-shadow:0 12px 34px rgba(0,0,0,.22);
}
.premium-search,.premium-user,.premium-icon-btn,.premium-date,.topbar input,.topbar button:not(.premium-menu){
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.premium-search:focus-within,.topbar input:focus{
  border-color:rgba(255,209,0,.42);
  box-shadow:0 0 0 4px rgba(255,209,0,.08),0 12px 34px rgba(0,0,0,.28);
}
.premium-icon-btn:hover,.premium-date:hover,.premium-user:hover{
  transform:translateY(-1px);border-color:rgba(255,209,0,.35);box-shadow:0 12px 32px rgba(0,0,0,.30),0 0 0 1px rgba(255,209,0,.08);
}

/* Sidebar refinada */
.sidebar,.premium-sidebar{
  background:linear-gradient(180deg,rgba(9,13,17,.96),rgba(4,7,9,.98));
  border-right:1px solid rgba(255,255,255,.075);
  box-shadow:18px 0 55px rgba(0,0,0,.26);
}
.premium-logo-area,.logo-area{
  background:linear-gradient(135deg,rgba(255,209,0,.16),rgba(255,209,0,.025));
  border-bottom:1px solid rgba(255,209,0,.12);
}
.premium-logo-jsl,#logo-sigla,.logo-dl{
  filter:drop-shadow(0 0 18px rgba(255,209,0,.30));
  text-shadow:0 0 24px rgba(255,209,0,.25);
}
.ni{
  border-radius:14px;margin:4px 12px;border:1px solid transparent;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.ni:hover{transform:translateX(3px);background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.07);}
.ni.active{
  background:linear-gradient(90deg,rgba(255,209,0,.22),rgba(255,209,0,.055));
  color:var(--y);border-color:rgba(255,209,0,.35);
  box-shadow:inset 3px 0 0 var(--y),0 12px 32px rgba(0,0,0,.22),0 0 18px rgba(255,209,0,.08);
}

/* Cards, painéis, tabelas e formulários com profundidade premium */
.card,.mc,.func-card,.func-panel,.premium-card,.premium-panel,.calc-panel,.calc-card,
.dash-card,.dashboard-card,.chart-card,.table-wrap,.pwa-install-modal,.modal,
[class*="panel"],[class*="card"]{
  border-color:rgba(255,255,255,.085);
  box-shadow:var(--premium-shadow-soft);
  background:linear-gradient(145deg,rgba(20,25,31,.82),rgba(9,12,16,.90));
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}
.card,.mc,.func-card,.premium-card,.calc-panel,.calc-card,.chart-card,.modal{
  border-radius:18px;
}
.card:hover,.mc:hover,.func-card:hover,.premium-card:hover,.calc-panel:hover,.calc-card:hover,.chart-card:hover{
  transform:translateY(-2px);
  border-color:rgba(255,209,0,.25);
  box-shadow:0 24px 70px rgba(0,0,0,.38),0 0 0 1px rgba(255,209,0,.08);
}
.card,.mc,.func-card,.premium-card,.calc-panel,.calc-card,.chart-card{transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;}
.mc::after,.card::after,.premium-card::after,.calc-panel::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.075),transparent 34%,rgba(255,209,0,.035));
  opacity:.45;
}
.mc,.card,.premium-card,.calc-panel{position:relative;overflow:hidden;}

/* Inputs/selects premium */
.fc,input,select,textarea{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  color:var(--tx);
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease;
}
.fc:focus,input:focus,select:focus,textarea:focus{
  border-color:rgba(255,209,0,.50);
  box-shadow:0 0 0 4px rgba(255,209,0,.08);
  background:rgba(255,255,255,.065);
}
select option{background:#11161a;color:#f7f8fa;}

/* Botões premium */
.btn,.by,button{
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,border-color .16s ease;
}
.btn:hover,button:hover{transform:translateY(-1px)}
.by,.btn.by{
  background:linear-gradient(135deg,var(--y),var(--y2));
  box-shadow:0 10px 28px rgba(255,209,0,.16);
}
.by:hover,.btn.by:hover{filter:brightness(1.05);box-shadow:0 16px 38px rgba(255,209,0,.22);}

/* Números e valores com aparência bancária */
.mc-v,.dash-kpi-value,.calc-area-val,.fn-val,.fp-nome{
  text-shadow:0 0 18px rgba(255,209,0,.11);
}
.premium-plan-card{
  background:linear-gradient(145deg,rgba(255,209,0,.08),rgba(255,255,255,.025));
  border-color:rgba(255,209,0,.22);
  border-radius:18px;
}

/* PWA install ainda mais refinado, sem peso de imagem */
.pwa-install-modal{
  background:radial-gradient(circle at 50% 0,rgba(255,209,0,.12),transparent 32%),linear-gradient(145deg,rgba(19,24,29,.96),rgba(7,10,13,.96));
}
.pwa-install-icon{box-shadow:0 18px 45px rgba(255,209,0,.20);}

/* Respeita usuários com redução de movimento */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms;animation-iteration-count:1;scroll-behavior:auto;transition-duration:.01ms;}
}

/* ============================================================
   V32 — Ajuste fino iPhone: painel de colaboradores
   - botão Metragem deixa de ficar azul/fora do padrão
   - ações do calendário viram grade limpa no celular
   - evita estouro horizontal no iPhone
   ============================================================ */
.btn-met,
button.btn-met{
  border-color:rgba(255,209,0,.48);
  color:var(--y);
  background:linear-gradient(145deg,rgba(255,209,0,.10),rgba(255,209,0,.035));
}
.btn-met:hover,
button.btn-met:hover{
  border-color:rgba(255,209,0,.78);
  box-shadow:0 10px 26px rgba(255,209,0,.14);
}
@media (max-width:767px){
  html,body{overflow-x:hidden;max-width:100%;}
  #page-funcionarios,#func-panel-wrap,.func-panel,.fp-body{max-width:100%;overflow-x:hidden;box-sizing:border-box;}
  .func-panel{border-radius:18px;}
  .fp-head{padding:14px 16px;}
  .fp-nome{font-size:var(--t-gr);line-height:1;}
  .fp-sub{font-size:var(--t-peq);line-height:1.25;}
  .fp-tabs{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .fp-tabs::-webkit-scrollbar{display:none;}
  .fp-tab{flex:0 0 auto;padding:10px 12px;font-size:var(--t-mini);letter-spacing:.35px;}
  #fpc-cal .cg7{gap:4px;}
  #fpc-cal .cd{min-height:42px;border-radius:10px;font-size:var(--t-peq);}
  #fpc-cal .cd div{font-size:var(--t-peq);}
  #fpc-cal .cal-nav button{min-width:46px;height:46px;border-radius:13px;}#fpc-cal > div[style*="display:flex"][style*="flex-wrap:wrap"],
#fpc-cal > div.jsl-linha-quebra{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    margin-top:14px !important;
  }#fpc-cal > div[style*="display:flex"][style*="flex-wrap:wrap"] .btn,
#fpc-cal > div.jsl-linha-quebra .btn{
    width:100% !important;
    min-width:0 !important;
    min-height:58px !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:normal !important;
    line-height:1.12 !important;
    font-size:var(--t-base) !important;
    padding:10px 8px !important;
    letter-spacing:.35px !important;
  }
  #fpc-cal .btn-met{font-size:var(--t-base);}.func-panel > div:last-child[style*="display:flex"],
.func-panel > div:last-child.jsl-linha-flex{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
    padding:12px 14px 16px !important;
  }.func-panel > div:last-child[style*="display:flex"] .btn,
.func-panel > div:last-child.jsl-linha-flex .btn{
    width:100% !important;
    min-width:0 !important;
    min-height:58px !important;
    justify-content:center !important;
    text-align:center !important;
    white-space:normal !important;
    line-height:1.15 !important;
    font-size:var(--t-base) !important;
    padding:10px 8px !important;
  }.func-panel > div:last-child[style*="display:flex"] .btn:nth-child(5),
.func-panel > div:last-child.jsl-linha-flex .btn:nth-child(5){grid-column:1 / -1 !important;}
  .fn-label{font-size:var(--t-micro);letter-spacing:.55px;}
  .fn-val{font-size:var(--t-base);}
}

/* ============================================================
   V33 — Correção iPhone: tela de Recibos
   - A tabela vira cards no celular para não esconder ações
   - Botões PDF/WPP/Excluir ficam sempre visíveis
   - Busca, filtro e botão Novo Recibo ficam alinhados no mobile
   ============================================================ */
@media (max-width:767px){
  #page-recibos{max-width:100%;overflow-x:hidden;box-sizing:border-box;}
  #page-recibos .kpi-strip{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:12px;
  }
  #page-recibos .kpi-item{
    min-width:0;
    height:auto;
    padding:12px;
    border-radius:14px;
  }
  #page-recibos .kpi-val{font-size:var(--t-gr);line-height:1.05;word-break:break-word;}
  #page-recibos .kpi-lbl{font-size:var(--t-micro);letter-spacing:.45px;}
  #page-recibos .card{
    overflow:visible;
    padding:14px;
    border-radius:18px;
  }
  #page-recibos .sh{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    align-items:stretch;
  }
  #page-recibos .sh .st{
    font-size:var(--t-gr);
    line-height:1.05;
  }
  #page-recibos .sh > div:last-child{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    width:100%;
  }
  #page-recibos #rcb-busca,
  #page-recibos #rcb-filtro-tipo,
  #page-recibos .sh .btn{
    width:100%;
    min-height:48px;
    font-size:var(--t-med);
    padding:11px 12px;
    box-sizing:border-box;
  }
  #page-recibos table,
  #page-recibos thead,
  #page-recibos tbody,
  #page-recibos tr,
  #page-recibos td{
    display:block;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  #page-recibos thead{display:none;}
  #page-recibos tbody tr{
    margin:0 0 12px;
    padding:13px;
    border:1px solid rgba(255,209,0,.18);
    border-radius:16px;
    background:linear-gradient(145deg,rgba(19,24,29,.92),rgba(7,10,13,.96));
    box-shadow:0 14px 36px rgba(0,0,0,.28);
  }
  #page-recibos tbody td{
    border:none;
    border-bottom:1px solid rgba(255,255,255,.055);
    padding:8px 0;
    white-space:normal;
    overflow:visible;
    text-align:left;
    color:var(--tx);
    font-size:var(--t-base);
  }
  #page-recibos tbody td:last-child{border-bottom:none;padding-top:12px;}
  #page-recibos tbody td::before{
    display:block;
    margin-bottom:3px;
    color:var(--mt);
    font-size:var(--t-micro);
    font-weight:900;
    letter-spacing:.55px;
    text-transform:uppercase;
  }
  #page-recibos tbody td:nth-child(1)::before{content:'Nº Recibo';}
  #page-recibos tbody td:nth-child(2)::before{content:'Data';}
  #page-recibos tbody td:nth-child(3)::before{content:'Pagador';}
  #page-recibos tbody td:nth-child(4)::before{content:'CPF/CNPJ';}
  #page-recibos tbody td:nth-child(5)::before{content:'Tipo';}
  #page-recibos tbody td:nth-child(6)::before{content:'Forma';}
  #page-recibos tbody td:nth-child(7)::before{content:'Valor';}
  #page-recibos tbody td:nth-child(8)::before{content:'Ações';}
  #page-recibos tbody td:nth-child(1){font-size:var(--t-base);color:var(--y);word-break:break-word;}
  #page-recibos tbody td:nth-child(7){font-size:var(--t-gr);text-align:left;color:var(--grn);}
  #page-recibos tbody td:nth-child(8){
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
    white-space:normal;
  }
  #page-recibos tbody td:nth-child(8) .btn{
    width:100%;
    min-width:0;
    min-height:46px;
    padding:9px 6px;
    font-size:var(--t-peq);
    line-height:1.05;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    white-space:normal;
  }
}


/* ============================================================
   V35 — Responsividade "Netflix" reforçada + desktop guard
   Objetivo:
   - o mesmo sistema detecta desktop/tablet/celular automaticamente;
   - evita tela "minúscula" no PC por sobra de classe/estilo mobile;
   - mantém as telas mobile em cards quando a largura real é pequena.
   ============================================================ */
html{
  width:100%;
  min-width:0;
}
body.device-desktop{
  overflow:hidden;
}
body.device-desktop .sidebar,
body.device-desktop .sidebar.premium-sidebar{
  position:relative;
  left:auto;
  top:auto;
  bottom:auto;
  transform:none;
  width:var(--sw,220px);
  min-width:var(--sw,220px);
  max-width:var(--sw,220px);
  height:100dvh;
  z-index:auto;
}
body.device-desktop .main{
  margin-left:0;
  width:calc(100vw - var(--sw,220px));
  min-width:0;
  max-width:none;
}
body.device-desktop .content{
  width:100%;
  max-width:none;
  min-width:0;
  padding:20px 24px;
}
body.device-desktop .page,
body.device-desktop .pg,
body.device-desktop section[id^="page-"]{
  width:100%;
  max-width:none;
  min-width:0;
}
body.device-desktop .premium-topbar{
  flex-wrap:nowrap;
  height:62px;
  min-height:62px;
  padding:0 24px;
}
body.device-desktop .premium-search{
  order:initial;
  flex:0 1 520px;
  flex-basis:auto;
  width:min(520px,38vw);
  max-width:767px;
}
body.device-desktop .premium-user div:not(.premium-avatar){
  display:block;
}
body.device-desktop .sidebar-overlay{
  display:none;
}
body.device-desktop.mobile-menu-open{
  overflow:hidden;
}
body.device-desktop .modal,
body.device-desktop .modal-content{
  max-width:min(1100px,92vw);
}
body.device-tablet .content{
  width:100%;
  max-width:none;
}
@media (min-width:1024px){
  .mob-menu-btn{display:none;}
  .premium-menu{display:inline-flex;}
  .mobile-only{display:none;}
}
@media (max-width:1023px){
  body.device-mobile,body.device-tablet{overflow-x:hidden;}
  body.device-mobile .main,body.device-tablet .main{
    width:100%;
    max-width:100%;
  }
  body.device-mobile .content,body.device-tablet .content{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
  }
}


/* ============================================================
   V43 — Correção tela de planos + badges sem cobrir valores
   - separa descrição e preço em colunas reais;
   - joga selos para fora do miolo do card;
   - remove o selo inline duplicado do plano Profissional;
   - evita quebra/ sobreposição em desktop, PWA e mobile.
   ============================================================ */
#cad-step-plano #plano-basico-card,
#cad-step-plano #plano-premium-card,
#cad-step-plano #plano-empresarial-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:18px;
  row-gap:6px;
  min-height:86px;
  padding:18px 22px;
  overflow:visible;
}#cad-step-plano #plano-premium-card > div[style*="position:absolute"],
#cad-step-plano #plano-premium-card > div.jsl-selo-flutuante{
  display:none !important;
}
#cad-step-plano #plano-premium-card::before,
#cad-step-plano #plano-empresarial-card::before,
#ass-card-premium::before,
#ass-card-empresarial::before{
  top:-12px;
  right:18px;
  z-index:var(--z-local);
  box-shadow:0 8px 22px rgba(0,0,0,.32);
  pointer-events:none;
}
#cad-step-plano #plano-basico-card > div,
#cad-step-plano #plano-premium-card > div,
#cad-step-plano #plano-empresarial-card > div{
  min-width:0;
}
#cad-step-plano #plano-basico-card > div:last-child,
#cad-step-plano #plano-premium-card > div:last-child,
#cad-step-plano #plano-empresarial-card > div:last-child{
  min-width:96px;
  justify-self:end;
  text-align:right;
  position:relative;
  z-index:var(--z-local);
}
#cad-basico-valor,#cad-premium-valor,#cad-empresarial-valor,
#ass-basico-valor,#ass-premium-valor,#ass-empresarial-valor{
  white-space:nowrap;
  letter-spacing:-.4px;
}
#cad-basico-nome,#cad-premium-nome,#cad-empresarial-nome,
#ass-basico-nome,#ass-premium-nome,#ass-empresarial-nome{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
#cad-basico-disp,#cad-premium-disp,#cad-empresarial-disp,
#ass-basico-disp,#ass-premium-disp,#ass-empresarial-disp{
  white-space:nowrap;
  flex-shrink:0;
}
@media (max-width:767px){
  #cad-step-plano #plano-basico-card,
  #cad-step-plano #plano-premium-card,
  #cad-step-plano #plano-empresarial-card{
    grid-template-columns:1fr;
    padding:18px 16px;
  }
  #cad-step-plano #plano-basico-card > div:last-child,
  #cad-step-plano #plano-premium-card > div:last-child,
  #cad-step-plano #plano-empresarial-card > div:last-child{
    justify-self:start;
    text-align:left;
    min-width:0;
  }
}

/* V48 — card de assinatura compacto e dinâmico */
.premium-plan-card#premium-plan-card{
  margin:10px 14px 8px;
  padding:10px 12px;
  border-radius:11px;
  min-height:0;
}
#premium-plan-title{font-size:var(--t-peq);line-height:1.15;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#premium-plan-status{font-size:var(--t-micro);padding:2px 5px;white-space:nowrap;}
#premium-plan-vencimento,#premium-plan-preco{font-size:var(--t-micro);margin:5px 0 0;line-height:1.25;}
#premium-plan-btn{height:28px;margin-top:8px;font-size:var(--t-micro);}
#premium-role-badge{font-size:var(--t-micro);padding:4px 8px;border-radius:6px;vertical-align:middle;}

/* ============================================================
   V50 — Mobile sem rolagem lateral + login completo no celular
   ============================================================ */
@media (max-width:1023px){
  /* Login mobile com a mesma vida do desktop: chamada + carrossel + ofertas */
  #login-screen{
    align-items:flex-start;
    justify-content:flex-start;
    overflow-y:auto;
    padding:calc(12px + var(--safe-top,0px)) 12px calc(18px + var(--safe-bottom,0px));
  }
  #login-screen>div{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
    max-width:100%;
    width:100%;
    min-height:auto;
  }
  #login-lado-chamada{
    display:block;
    padding:4px 0 0;
    text-align:left;
  }
  #login-lado-chamada>div:first-child{
    width:100%;
    padding:10px 12px;
    margin-bottom:12px;
    border-radius:14px;
  }
  #login-lado-chamada>div:first-child #login-sigla{
    width:44px;height:44px;font-size:var(--t-gr);
  }
  #login-titulo{font-size:var(--t-tit);}
  #login-subtitulo{font-size:var(--t-mini);line-height:1.2;}
  .login-hl-carousel{
    display:grid;
    font-size:var(--t-tit);
    line-height:1.08;
    letter-spacing:-.4px;
    max-width:100%;
    min-height:78px;
    margin-bottom:10px;
  }
  #login-public-desc{
    font-size:var(--t-peq);
    line-height:1.45;
    margin-bottom:10px;
  }
  .login-public-plans{
    display:flex;
    gap:7px;
    overflow-x:auto;
    padding-bottom:4px;
    margin-bottom:10px;
    -webkit-overflow-scrolling:touch;
  }
  .login-public-plans span{
    flex:0 0 auto;
    font-size:var(--t-micro);
    padding:7px 9px;
    border-radius:999px;
  }
  .login-acende-seq{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:12px;
  }
  .login-acende-seq>div{
    padding:9px;
    border-radius:12px;
    font-size:var(--t-mini);
    line-height:1.25;
  }
  .login-acende-seq>div span:first-child{
    width:24px;height:24px;font-size:var(--t-peq);
  }
  #login-lado-chamada>button{
    width:100%;
    height:46px;
    font-size:var(--t-base);
    margin-bottom:2px;
  }
  .login-3d-wrap{transform:none;width:100%;}
  #login-box-dono,#login-box-colab{
    padding:18px;
    border-radius:18px;
  }

  /* Topbar mobile: busca não sobrepõe menu/ícones/nome */
  .premium-topbar{
    display:grid;
    grid-template-columns:44px 1fr auto;
    align-items:center;
    gap:8px;
  }
  .premium-menu{grid-column:1;grid-row:1;}
  .premium-top-spacer{display:none;}
  .premium-actions,.premium-user{grid-column:auto;grid-row:1;}
  .premium-search{
    grid-column:1 / -1;
    grid-row:2;
    order:initial;
    width:100%;
    max-width:100%;
    flex-basis:auto;
    min-width:0;
    height:42px;
    margin-top:2px;
  }
  .premium-search input{min-width:0;width:100%;font-size:var(--t-med);}

  /* Tabelas mobile viram cards: sem rolar para o lado */.table-wrap,
.tbl-wrap,
.cm-table-wrap,
.c2-table-wrap,
.page .card > div[style*="overflow-x:auto"],
.page .card > div.jsl-rolagem-lateral{
    overflow-x:visible !important;
    width:100% !important;
  }
  .table-wrap:after,.tbl-wrap:after,.cm-table-wrap:after,.c2-table-wrap:after{
    content:'';display:none;
  }
  .page table:not(.pdf-table):not(.keep-table){
    width:100%;
    min-width:0;
    border-collapse:separate;
    border-spacing:0 10px;
    table-layout:auto;
  }
  .page table:not(.pdf-table):not(.keep-table) thead{
    display:none;
  }
  .page table:not(.pdf-table):not(.keep-table) tbody,
  .page table:not(.pdf-table):not(.keep-table) tr,
  .page table:not(.pdf-table):not(.keep-table) td{
    display:block;
    width:100%;
    max-width:100%;
  }
  .page table:not(.pdf-table):not(.keep-table) tr{
    background:linear-gradient(145deg,rgba(18,22,27,.98),rgba(10,13,16,.98));
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;
    padding:10px 11px;
    box-shadow:0 12px 30px rgba(0,0,0,.30);
    overflow:hidden;
  }
  .page table:not(.pdf-table):not(.keep-table) td{
    border:0;
    padding:7px 0;
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:break-word;
    color:var(--tx);
  }
  .page table:not(.pdf-table):not(.keep-table) td:not(:empty)::before{
    content:attr(data-label);
    display:block;
    color:var(--mt);
    font-size:var(--t-micro);
    line-height:1.1;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.55px;
    margin-bottom:3px;
  }
  .page table:not(.pdf-table):not(.keep-table) td[data-label=""],
  .page table:not(.pdf-table):not(.keep-table) td:last-child{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:flex-start;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.07);
  }
  .page table:not(.pdf-table):not(.keep-table) td:last-child::before{
    content:'Ações';
    flex-basis:100%;
  }
  .page table:not(.pdf-table):not(.keep-table) td:last-child button,
  .page table:not(.pdf-table):not(.keep-table) td:last-child .btn,
  .page table:not(.pdf-table):not(.keep-table) td:last-child a{
    flex:1 1 calc(50% - 6px);
    min-width:112px;
    min-height:38px;
    text-align:center;
    justify-content:center;
  }

  /* Obras: leitura mais limpa */
  #page-obras .card .sh{align-items:flex-start;gap:10px;}
  #page-obras .card .sh .btn{width:auto;min-width:154px;}
  #page-obras #obras-tb td:nth-child(1){font-size:var(--t-med);font-weight:900;color:#fff;}
  #page-obras #obras-tb td:nth-child(5),
  #page-obras #obras-tb td:nth-child(6),
  #page-obras #obras-tb td:nth-child(7){font-size:var(--t-base);}
}

@media (max-width:767px){
  .login-acende-seq{grid-template-columns:1fr;}
  .login-hl-carousel{font-size:var(--t-tit);min-height:72px;}
  #login-public-desc{display:none;}
  .premium-user{max-width:72px;overflow:hidden;}
}

/* ============================================================
   V51 — Login mobile premium dividido: ofertas em cima + login expansível
   ============================================================ */
@media (max-width:1023px){
  #login-screen{
    min-height:100dvh;
    align-items:stretch;
    justify-content:flex-start;
    overflow-y:auto;
    padding:calc(10px + var(--safe-top,0px)) 12px calc(12px + var(--safe-bottom,0px));
  }
  #login-screen>div{
    min-height:calc(100dvh - 22px);
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    gap:10px;
    align-items:stretch;
  }
  #login-lado-chamada{
    display:flex;
    flex-direction:column;
    min-height:0;
    padding:0;
    overflow:hidden;
  }
  #login-lado-chamada>div:first-child{
    flex:0 0 auto;
    width:auto;
    margin-bottom:8px;
    padding:9px 10px;
  }
  .login-hl-carousel{
    flex:0 0 auto;
    min-height:58px;
    font-size:var(--t-gr);
    line-height:1.08;
    margin-bottom:8px;
  }
  #login-public-desc{display:none;}
  .login-public-plans{
    order:4;
    flex:0 0 auto;
    margin:2px 0 8px;
    overflow-x:auto;
    padding:0 0 4px;
    scroll-snap-type:x mandatory;
  }
  .login-public-plans span{
    scroll-snap-align:start;
    min-width:max-content;
    font-size:var(--t-micro);
  }
  .login-acende-seq{
    order:3;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin:0 0 8px;
  }
  .login-acende-seq>div{
    min-height:42px;
    padding:7px 8px;
    font-size:var(--t-micro);
  }
  #login-lado-chamada>button{
    order:5;
    height:42px;
    min-height:42px;
    margin-top:auto;
    margin-bottom:0;
    font-size:var(--t-peq);
  }
  .login-3d-wrap{
    align-self:end;
    position:sticky;
    bottom:0;
    z-index:var(--z-local);
  }
  #login-box-dono,#login-box-colab{
    position:relative;
    max-height:74dvh;
    overflow:hidden;
    padding:14px;
    border-radius:18px;
    transition:max-height .28s ease, padding .28s ease, transform .28s ease;
  }
  #login-screen.mobile-login-collapsed #login-box-dono{
    max-height:96px;
    cursor:pointer;
  }
  #login-screen.mobile-login-collapsed #login-box-dono label,
  #login-screen.mobile-login-collapsed #login-box-dono #login-email,
  #login-screen.mobile-login-collapsed #login-box-dono #login-pwd,
  #login-screen.mobile-login-collapsed #login-box-dono #login-pwd-eye,
  #login-screen.mobile-login-collapsed #login-box-dono .login-btn,
  #login-screen.mobile-login-collapsed #login-box-dono #login-err,
  #login-screen.mobile-login-collapsed #login-box-dono>div:nth-of-type(3),
  #login-screen.mobile-login-collapsed #login-box-dono>div:nth-of-type(4),
  #login-screen.mobile-login-collapsed #login-mobile-cadastro{
    display:none;
  }
  #login-screen.mobile-login-collapsed #login-box-dono #login-foot{
    margin-bottom:0;
  }
  #login-mobile-expand-btn{
    display:none;
  }
  #login-screen.mobile-login-collapsed #login-mobile-expand-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    height:40px;
    margin-top:10px;
    border:0;
    border-radius:12px;
    background:linear-gradient(135deg,#ffd100,#d7a600);
    color:#111;
    font-family:'Barlow Condensed',sans-serif;
    font-size:var(--t-med);
    font-weight:900;
    letter-spacing:.8px;
    text-transform:uppercase;
    box-shadow:0 14px 34px rgba(255,209,0,.18);
  }
  #login-screen.mobile-login-expanded #login-box-dono{
    max-height:74dvh;
    overflow-y:auto;
    transform:translateY(0);
  }
  #login-screen.mobile-login-expanded #login-mobile-cadastro{display:block;}
}
@media (max-width:767px){
  .login-acende-seq{grid-template-columns:1fr 1fr;}
  .login-acende-seq>div{font-size:var(--t-micro);}
  .login-hl-carousel{font-size:var(--t-gr);min-height:54px;}
  #login-titulo{font-size:var(--t-tit);}
  #login-subtitulo{font-size:var(--t-micro);}
}
@media (max-height:700px) and (max-width:1023px){
  .login-acende-seq>div:nth-child(n+3){display:none;}
  .login-hl-carousel{min-height:46px;font-size:var(--t-gr);}
  #login-lado-chamada>div:first-child{margin-bottom:6px;}
}


/* ============================================================
   V52 — Login mobile premium direto: sem botão "já tenho conta"
   ============================================================ */
#login-mobile-expand-btn{display:none;}
@media (min-width:768px){
  #login-mobile-expand-btn{display:none;visibility:hidden;}
}
@media (max-width:1023px){
  #login-screen{
    background:
      radial-gradient(circle at 18% 10%, rgba(255,209,0,.16), transparent 30%),
      radial-gradient(circle at 92% 18%, rgba(255,209,0,.08), transparent 34%),
      linear-gradient(180deg,#08090b,#060607);
  }
  #login-screen::before,
  #login-screen::after{
    content:'';
    position:fixed;
    pointer-events:none;
    z-index:var(--z-zero);
    border-radius:999px;
    filter:blur(4px);
    opacity:.58;
    animation:jslFloatLogin 7s ease-in-out infinite;
  }
  #login-screen::before{
    width:118px;height:118px;
    left:-42px;top:92px;
    background:radial-gradient(circle,rgba(255,209,0,.24),transparent 66%);
  }
  #login-screen::after{
    width:150px;height:150px;
    right:-78px;bottom:138px;
    background:radial-gradient(circle,rgba(255,209,0,.16),transparent 68%);
    animation-delay:-2.4s;
  }
  @keyframes jslFloatLogin{
    0%,100%{transform:translate3d(0,0,0) scale(1);}
    50%{transform:translate3d(0,-14px,0) scale(1.05);}
  }
  #login-screen>div,
  #login-lado-chamada,
  .login-3d-wrap{position:relative;z-index:var(--z-local);}
  #login-screen>div{
    grid-template-rows:auto 1fr;
    gap:10px;
    min-height:auto;
    max-width:767px;
    margin:0 auto;
  }
  #login-lado-chamada{
    max-height:none;
    overflow:visible;
    padding-top:0;
  }
  #login-lado-chamada>div:first-child{
    padding:8px 9px;
    margin-bottom:8px;
    border-radius:16px;
    background:linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
    border:1px solid rgba(255,255,255,.09);
    box-shadow:0 14px 44px rgba(0,0,0,.25);
  }
  #login-sigla{width:46px;height:46px;border-radius:12px;font-size:var(--t-gr);}
  #login-titulo{font-size:var(--t-tit);}
  #login-subtitulo{font-size:var(--t-micro);}
  .login-hl-carousel{
    min-height:44px;
    font-size:var(--t-gr);
    line-height:1.08;
    margin:0 0 9px;
  }
  .login-acende-seq{
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin-bottom:8px;
  }
  .login-acende-seq>div{
    min-height:38px;
    padding:7px 8px;
    font-size:var(--t-micro);
    border-radius:13px;
  }
  .login-acende-seq>div span:first-child{
    width:25px;height:25px;font-size:var(--t-peq);
  }
  .login-public-plans{
    margin:0 0 7px;
    padding-bottom:2px;
    overflow-x:auto;
    display:flex;
    gap:6px;
  }
  .login-public-plans span{
    font-size:var(--t-micro);
    padding:7px 10px;
    border-radius:999px;
    min-width:max-content;
  }
  #login-lado-chamada>button{
    display:none;
  }
  .login-3d-wrap{
    position:relative;
    bottom:auto;
    align-self:stretch;
  }
  #login-box-dono,#login-box-colab{
    max-height:none;
    overflow:visible;
    padding:18px 16px;
    border-radius:20px;
    box-shadow:0 22px 70px rgba(0,0,0,.34),0 0 0 1px rgba(255,209,0,.08) inset;
  }
  #login-screen.mobile-login-collapsed #login-box-dono{
    max-height:none;
    cursor:default;
  }
  #login-screen.mobile-login-collapsed #login-box-dono label,
  #login-screen.mobile-login-collapsed #login-box-dono #login-email,
  #login-screen.mobile-login-collapsed #login-box-dono #login-pwd,
  #login-screen.mobile-login-collapsed #login-box-dono #login-pwd-eye,
  #login-screen.mobile-login-collapsed #login-box-dono .login-btn,
  #login-screen.mobile-login-collapsed #login-box-dono #login-err,
  #login-screen.mobile-login-collapsed #login-box-dono>div:nth-of-type(3),
  #login-screen.mobile-login-collapsed #login-box-dono>div:nth-of-type(4),
  #login-screen.mobile-login-collapsed #login-mobile-cadastro{
    display:revert;
  }
  #login-box-dono input{
    min-height:48px;
    border-radius:14px;
    font-size:var(--t-med);
  }
  #login-box-dono .login-btn{
    min-height:52px;
    border-radius:14px;
    font-size:var(--t-med);
  }
  #login-mobile-cadastro{display:block;}
}
@media (max-width:767px){
  .login-hl-carousel{font-size:var(--t-gr);min-height:40px;}
  .login-acende-seq>div:nth-child(n+3){display:flex;}
}
@media (max-height:720px) and (max-width:1023px){
  #login-screen{padding-top:8px;padding-bottom:8px;}
  #login-lado-chamada>div:first-child{margin-bottom:6px;}
  .login-hl-carousel{font-size:var(--t-gr);min-height:36px;margin-bottom:6px;}
  .login-acende-seq{gap:6px;margin-bottom:6px;}
  .login-acende-seq>div{min-height:34px;padding:6px 7px;}
  #login-box-dono,#login-box-colab{padding:15px 14px;}
}


/* ============================================================
   V54 — Mobile premium compacto: login, carrossel e listas internas
   ============================================================ */
@media (max-width:1023px){
  /* Login mobile: mantém a tela aberta, mas mais compacta e com mais área para o carrossel */
  #login-screen{padding:calc(8px + var(--safe-top,0px)) 10px calc(10px + var(--safe-bottom,0px));}
  #login-screen>div{gap:8px;max-width:500px;}
  #login-lado-chamada>div:first-child{padding:7px 9px;margin-bottom:6px;border-radius:15px;}
  #login-sigla{width:42px;height:42px;border-radius:11px;font-size:var(--t-med);}
  #login-titulo{font-size:var(--t-gr);line-height:.98;}
  #login-subtitulo{font-size:var(--t-micro);line-height:1.15;}

  /* Carrossel real no mobile: uma frase por vez, sem fantasma/sobreposição */
  .login-hl-carousel{
    position:relative;
    display:block;
    min-height:58px;
    height:58px;
    overflow:hidden;
    font-size:var(--t-gr);
    line-height:1.05;
    margin:0 0 8px;
  }
  .login-hl-carousel .lhc-frase{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    opacity:0;
    transform:translate3d(0,12px,0) scale(.99);
    pointer-events:none;
    transition:opacity .65s ease, transform .65s ease, filter .65s ease;
    will-change:opacity,transform;
  }
  .login-hl-carousel .lhc-frase.on{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:drop-shadow(0 0 14px rgba(255,209,0,.20));
  }

  /* Benefícios e planos mais premium e clicáveis */
  .login-acende-seq{gap:6px;margin-bottom:6px;}
  .login-acende-seq>div{min-height:32px;padding:6px 7px;font-size:var(--t-micro);border-radius:12px;}
  .login-acende-seq>div span:first-child{width:22px;height:22px;font-size:var(--t-mini);}
  .login-public-plans{gap:6px;margin:0 0 6px;padding:1px 0 3px;}
  .login-public-plans span{
    position:relative;
    overflow:hidden;
    cursor:pointer;
    user-select:none;
    font-size:var(--t-micro);
    padding:6px 9px;
    border-color:rgba(255,209,0,.34);
    background:linear-gradient(135deg,rgba(255,209,0,.13),rgba(255,209,0,.035));
    box-shadow:0 8px 22px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.06);
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  }
  .login-public-plans span:after{
    content:'';
    position:absolute;
    inset:-40% auto -40% -55%;
    width:44%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
    transform:skewX(-18deg);
    animation:jslPlanShine 3.6s ease-in-out infinite;
  }
  .login-public-plans span:nth-child(2):after{animation-delay:.55s;}
  .login-public-plans span:nth-child(3):after{animation-delay:1.1s;}
  .login-public-plans span:active{transform:scale(.97);border-color:rgba(255,209,0,.70);box-shadow:0 0 0 1px rgba(255,209,0,.16),0 8px 26px rgba(255,209,0,.12);}
  @keyframes jslPlanShine{0%,54%{left:-55%;opacity:0;}62%{opacity:1;}82%,100%{left:120%;opacity:0;}}

  /* Caixa de login menor, sem perder o padrão premium */
  #login-box-dono,#login-box-colab{padding:14px 14px;border-radius:18px;}
  #login-box-dono h2,#login-box-colab h2{font-size:var(--t-tit);margin-bottom:4px;}
  #login-foot{font-size:var(--t-mini);margin-bottom:12px;}
  #login-box-dono label,#login-box-colab label{font-size:var(--t-micro);margin-bottom:5px;letter-spacing:1.2px;}
  #login-box-dono input{min-height:43px;font-size:var(--t-med);border-radius:13px;margin-bottom:10px;padding-top:9px;padding-bottom:9px;}
  #login-box-dono .login-btn{min-height:46px;border-radius:13px;font-size:var(--t-med);margin-top:8px;}#login-box-dono>div[style*="justify-content:space-between"],
#login-box-dono>div.jsl-linha-extremos{margin-top:12px !important;margin-bottom:12px !important;}#login-box-dono>div[style*="justify-content:space-between"] button,
#login-box-dono>div.jsl-linha-extremos button{font-size:var(--t-micro) !important;}
  #login-mobile-cadastro{margin-top:10px;}
  #login-mobile-cadastro>div{font-size:var(--t-micro);margin-bottom:6px;}
  #login-mobile-cadastro button{padding:11px 12px;font-size:var(--t-base);border-radius:12px;}

  /* Listas internas: versão compacta no celular, sem esticar demais */
  .page table:not(.pdf-table):not(.keep-table){border-spacing:0 7px;}
  .page table:not(.pdf-table):not(.keep-table) tr{
    border-radius:12px;
    padding:7px 8px;
    box-shadow:0 8px 20px rgba(0,0,0,.22);
  }
  .page table:not(.pdf-table):not(.keep-table) td{
    display:grid;
    grid-template-columns:minmax(74px,32%) 1fr;
    align-items:center;
    gap:8px;
    padding:3.5px 0;
    font-size:var(--t-peq);
    line-height:1.18;
    min-height:0;
  }
  .page table:not(.pdf-table):not(.keep-table) td:not(:empty)::before{
    display:block;
    margin:0;
    font-size:var(--t-micro);
    line-height:1;
    letter-spacing:.42px;
    opacity:.76;
  }
  .page table:not(.pdf-table):not(.keep-table) td:first-child{
    display:block;
    font-size:var(--t-base);
    line-height:1.12;
    font-weight:900;
    padding-bottom:5px;
    color:#fff;
  }
  .page table:not(.pdf-table):not(.keep-table) td:first-child::before{display:none;}
  .page table:not(.pdf-table):not(.keep-table) td:nth-child(2){font-weight:650;color:#e7e9ec;}
  .page table:not(.pdf-table):not(.keep-table) td:last-child{
    display:flex;
    padding-top:6px;
    margin-top:4px;
    gap:5px;
  }
  .page table:not(.pdf-table):not(.keep-table) td:last-child::before{font-size:var(--t-micro);margin-bottom:4px;}
  .page table:not(.pdf-table):not(.keep-table) td:last-child button,
  .page table:not(.pdf-table):not(.keep-table) td:last-child .btn,
  .page table:not(.pdf-table):not(.keep-table) td:last-child a{
    flex:1 1 auto;
    min-width:74px;
    min-height:30px;
    padding:6px 8px;
    font-size:var(--t-micro);
    border-radius:8px;
  }

  /* Obras/contratos/orçamentos/recibos: valor e status mais enxutos */
  #page-obras #obras-tb td:nth-child(1),
  #page-contratos table td:nth-child(1),
  #page-orcamentos table td:nth-child(1),
  #page-recibos table td:nth-child(1){font-size:var(--t-base);}
  #page-obras #obras-tb td:nth-child(5),
  #page-obras #obras-tb td:nth-child(6),
  #page-obras #obras-tb td:nth-child(7),
  #page-contratos table td,
  #page-orcamentos table td,
  #page-recibos table td{font-size:var(--t-peq);}
  .badge,.tag,.status{font-size:var(--t-micro);padding:3px 6px;border-radius:6px;}
}

@media (max-width:767px){
  .login-hl-carousel{height:54px;min-height:54px;font-size:var(--t-gr);}
  #login-box-dono,#login-box-colab{padding:13px;}
  #login-box-dono input{min-height:42px;}
  #login-box-dono .login-btn{min-height:45px;}
  .page table:not(.pdf-table):not(.keep-table) td{grid-template-columns:minmax(66px,30%) 1fr;font-size:var(--t-mini);gap:6px;}
  .page table:not(.pdf-table):not(.keep-table) td:first-child{font-size:var(--t-peq);}
}


/* ============================================================
   V55 — Mobile refinado premium: login vivo + painéis compactos
   Somente visual/hosting. Não altera Functions, regras ou dados.
   ============================================================ */
@media (max-width:1023px){
  /* Fundo e chamada com movimento premium parecido com o desktop */
  #login-screen{
    background:
      radial-gradient(circle at 18% 18%,rgba(255,209,0,.16),transparent 30%),
      radial-gradient(circle at 88% 2%,rgba(255,209,0,.08),transparent 24%),
      linear-gradient(180deg,#08090a 0%,#030405 100%);
  }
  #login-screen:before{
    content:'';position:fixed;inset:-20%;pointer-events:none;z-index:var(--z-zero);
    background:
      linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
      linear-gradient(180deg,rgba(255,255,255,.028) 1px,transparent 1px);
    background-size:54px 54px;opacity:.42;animation:jslMobileGridFloat 18s linear infinite;
  }
  #login-screen:after{
    content:'';position:fixed;width:220px;height:220px;left:-92px;top:92px;pointer-events:none;z-index:var(--z-zero);
    background:radial-gradient(circle,rgba(255,209,0,.18),transparent 62%);filter:blur(6px);animation:jslMobileGlowFloat 7s ease-in-out infinite alternate;
  }
  #login-screen>div{position:relative;z-index:var(--z-local);gap:6px;max-width:767px;}
  @keyframes jslMobileGridFloat{from{transform:translate3d(0,0,0)}to{transform:translate3d(54px,54px,0)}}
  @keyframes jslMobileGlowFloat{from{transform:translate3d(0,0,0) scale(.92)}to{transform:translate3d(28px,22px,0) scale(1.08)}}

  /* Topo do login mais baixo, mas com mais vida */
  #login-lado-chamada>div:first-child{padding:6px 8px;margin-bottom:5px;border-radius:14px;backdrop-filter:blur(14px);}
  #login-sigla{width:38px;height:38px;font-size:var(--t-med);border-radius:11px;animation:jslMobileLogoPulse 3.8s ease-in-out infinite;}
  @keyframes jslMobileLogoPulse{0%,100%{box-shadow:0 0 0 rgba(255,209,0,0)}50%{box-shadow:0 0 30px rgba(255,209,0,.26)}}
  #login-titulo{font-size:var(--t-gr);}
  #login-subtitulo{font-size:var(--t-micro);}
  .login-hl-carousel{height:46px;min-height:46px;font-size:var(--t-gr);margin-bottom:5px;}
  .login-hl-carousel .lhc-frase{line-height:1.05;}
  .login-acende-seq{grid-template-columns:1fr 1fr;gap:5px;margin-bottom:5px;}
  .login-acende-seq>div{min-height:28px;padding:5px 6px;font-size:var(--t-micro);line-height:1.12;border-radius:11px;animation:jslBenefitFloat 5.6s ease-in-out infinite;}
  .login-acende-seq>div:nth-child(2){animation-delay:.55s}.login-acende-seq>div:nth-child(3){animation-delay:1.1s}.login-acende-seq>div:nth-child(4){animation-delay:1.65s}
  .login-acende-seq>div span:first-child{width:20px;height:20px;font-size:var(--t-micro);}
  @keyframes jslBenefitFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

  /* Planos/preços com movimento suave e ação de escolha */
  .login-public-plans{gap:5px;margin:0 0 5px;padding:1px 0 2px;overflow-x:auto;scrollbar-width:none;}
  .login-public-plans::-webkit-scrollbar{display:none;}
  .login-public-plans span{font-size:var(--t-micro);padding:5px 8px;animation:jslPlanFloat 4.8s ease-in-out infinite;}
  .login-public-plans span:nth-child(2){animation-delay:.6s}.login-public-plans span:nth-child(3){animation-delay:1.2s}
  @keyframes jslPlanFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

  /* Login menor e mais elegante */
  #login-box-dono,#login-box-colab{padding:11px 12px;border-radius:17px;}
  #login-box-dono h2,#login-box-colab h2{font-size:var(--t-gr);line-height:1.05;margin-bottom:2px;}
  #login-foot{font-size:var(--t-micro);margin-bottom:9px;}
  #login-box-dono label,#login-box-colab label{font-size:var(--t-micro);margin-bottom:4px;letter-spacing:1px;}
  #login-box-dono input{min-height:38px;font-size:var(--t-med);border-radius:12px;margin-bottom:8px;padding:7px 36px 7px 12px;}
  #login-pwd-eye{right:10px;font-size:var(--t-base);}
  #login-box-dono .login-btn{min-height:41px;font-size:var(--t-base);border-radius:12px;margin-top:6px;letter-spacing:1.8px;}#login-box-dono>div[style*="justify-content:space-between"],
#login-box-dono>div.jsl-linha-extremos{margin-top:9px !important;margin-bottom:8px !important;}#login-box-dono>div[style*="justify-content:space-between"] button,
#login-box-dono>div.jsl-linha-extremos button{font-size:var(--t-micro) !important;}
  #login-mobile-cadastro{margin-top:7px;}
  #login-mobile-cadastro>div{font-size:var(--t-micro);margin-bottom:5px;}
  #login-mobile-cadastro button{padding:9px 10px;font-size:var(--t-base);border-radius:11px;}

  /* Topbar/pesquisa interna mais limpa no celular */
  .premium-topbar{padding:8px 12px;gap:7px;}
  .premium-menu{width:42px;height:42px;border-radius:12px;}
  .premium-avatar{width:42px;height:42px;font-size:var(--t-base);}
  .premium-search{height:38px;border-radius:13px;}
  .premium-search input{font-size:var(--t-med);padding:0 10px;}

  /* Painéis internos compactos: colaboradores e cards parecidos */
  .card,.box,.panel,.table-wrap,.func-panel,.func-card,.calc-card,.res-card,.obra-card,.orc-card{border-radius:13px;padding:10px;}
  .sh{gap:8px;align-items:center;}
  .sh .st{font-size:var(--t-peq);line-height:1.18;}
  .sh .btn,.btn.by,.btn.bsm{min-height:35px;padding:8px 10px;font-size:var(--t-mini);border-radius:10px;}
  #func-lista{gap:7px;}
  .func-card{border-radius:14px;box-shadow:0 9px 24px rgba(0,0,0,.26);}
  .func-header{padding:8px 9px;gap:7px;}
  .func-avatar{width:31px;height:31px;font-size:var(--t-peq);}
  .func-info{margin-left:7px;min-width:0;}
  .func-nome{font-size:var(--t-peq);line-height:1.05;}
  .func-diaria{font-size:var(--t-micro);line-height:1.18;}
  .func-header .btn{min-height:32px;padding:6px 9px;font-size:var(--t-micro);border-radius:10px;}
  .func-body{padding:8px 9px;}
  .func-nums{grid-template-columns:1fr 1fr;gap:5px;margin-bottom:7px;}
  .func-num,.func-nums>div{min-height:42px;padding:7px 6px;border-radius:11px;}
  .func-num small,.func-nums>div small{font-size:var(--t-micro);letter-spacing:.8px;}
  .func-num b,.func-nums>div b{font-size:var(--t-peq);line-height:1.05;}
  .func-actions{gap:5px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
  .func-actions .btn{min-width:0;min-height:34px;padding:6px 5px;font-size:var(--t-micro);border-radius:10px;line-height:1.05;}

  /* Tabelas/cards gerais: mais compactos sem voltar rolagem lateral */
  .page table:not(.pdf-table):not(.keep-table){border-spacing:0 5px;}
  .page table:not(.pdf-table):not(.keep-table) tr{border-radius:11px;padding:6px 7px;box-shadow:0 7px 18px rgba(0,0,0,.22);}
  .page table:not(.pdf-table):not(.keep-table) td{grid-template-columns:minmax(60px,28%) 1fr;gap:5px;padding:2.5px 0;font-size:var(--t-mini);line-height:1.12;}
  .page table:not(.pdf-table):not(.keep-table) td:not(:empty)::before{font-size:var(--t-micro);letter-spacing:.35px;}
  .page table:not(.pdf-table):not(.keep-table) td:first-child{font-size:var(--t-peq);padding-bottom:4px;}
  .page table:not(.pdf-table):not(.keep-table) td:last-child{gap:4px;padding-top:5px;margin-top:3px;}
  .page table:not(.pdf-table):not(.keep-table) td:last-child button,
  .page table:not(.pdf-table):not(.keep-table) td:last-child .btn,
  .page table:not(.pdf-table):not(.keep-table) td:last-child a{min-height:28px;min-width:66px;padding:5px 7px;font-size:var(--t-micro);border-radius:8px;}

  /* Histórico da calculadora: mais delicado e menor no celular */
  #bloco-historico,.c2-panel-hist{padding:10px;border-radius:14px;}
  #bloco-historico .st,.c2-panel-hist .st{font-size:var(--t-peq);}
  .ch-chip{min-height:28px;padding:5px 8px;font-size:var(--t-micro);border-radius:999px;}
  #hist-lista{display:flex;flex-direction:column;gap:6px;}
  #hist-lista>*{border-radius:12px;padding:8px;font-size:var(--t-mini);line-height:1.18;}
  #hist-lista .btn{min-height:28px;padding:5px 7px;font-size:var(--t-micro);border-radius:8px;}
  #hist-lista b,#hist-lista strong{font-size:var(--t-peq);}
  #hist-lista small{font-size:var(--t-micro);}
}

@media (max-width:767px){
  .login-hl-carousel{height:42px;min-height:42px;font-size:var(--t-med);}
  .login-acende-seq>div{font-size:var(--t-micro);min-height:26px;}
  .login-public-plans span{font-size:var(--t-micro);padding:5px 7px;}
  #login-box-dono,#login-box-colab{padding:10px 11px;}
  #login-box-dono input{min-height:37px;font-size:var(--t-peq);}
  #login-box-dono .login-btn{min-height:40px;font-size:var(--t-base);}
  .func-actions{grid-template-columns:repeat(2,minmax(0,1fr));}
  .func-actions .btn{min-height:31px;}
}

/* ============================================================
   V56 — Login mobile hero prioritário + ajuste fino responsivo
   Somente visual/hosting. Mantém backend, regras, Functions e dados.
   ============================================================ */
@media (max-width:1023px){
  html,body{max-width:100%;overflow-x:hidden;}
  body{background:#050607;}

  /* Tela inteira ajustável: anúncio em cima com presença, login fino embaixo */
  #login-screen{
    padding:calc(10px + var(--safe-top,0px)) 12px calc(14px + var(--safe-bottom,0px));
    overflow-y:auto;
    overflow-x:hidden;
    background:
      radial-gradient(circle at 22% 16%,rgba(255,209,0,.22),transparent 32%),
      radial-gradient(circle at 88% 8%,rgba(255,209,0,.10),transparent 26%),
      linear-gradient(180deg,#08090a 0%,#030405 100%);
  }
  #login-screen>div{
    width:100%;
    max-width:767px;
    min-height:calc(100dvh - 24px);
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    gap:10px;
    margin:0 auto;
    box-sizing:border-box;
  }

  /* Hero mobile volta a ser o protagonista, parecido com o PC */
  #login-lado-chamada{
    flex:0 0 auto;
    min-height:42dvh;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow:visible;
    padding:0;
    animation:jslHeroMobileBreath 7s ease-in-out infinite;
  }
  @keyframes jslHeroMobileBreath{
    0%,100%{transform:translate3d(0,0,0)}
    50%{transform:translate3d(0,-5px,0)}
  }
  #login-lado-chamada>div:first-child{
    padding:9px 10px;
    margin:0 0 14px;
    border-radius:18px;
    background:linear-gradient(135deg,rgba(255,255,255,.070),rgba(255,255,255,.020));
    border:1px solid rgba(255,255,255,.11);
    box-shadow:0 18px 58px rgba(0,0,0,.30);
    backdrop-filter:blur(15px);
  }
  #login-sigla{width:48px;height:48px;border-radius:14px;font-size:var(--t-gr);}
  #login-titulo{font-size:var(--t-tit);line-height:1;}
  #login-subtitulo{font-size:var(--t-mini);line-height:1.16;}

  /* Carrossel maior e sem sobreposição */
  .login-hl-carousel{
    height:68px;
    min-height:68px;
    margin:0 0 10px;
    font-size:var(--t-tit);
    line-height:1.07;
    letter-spacing:-.55px;
    overflow:hidden;
  }
  .login-hl-carousel .lhc-frase{
    align-items:flex-start;
    line-height:1.07;
    text-wrap:balance;
  }

  /* Texto promocional abaixo do carrossel volta a aparecer, mas fino */
  #login-public-desc{
    display:block;
    font-size:var(--t-mini);
    line-height:1.38;
    color:rgba(236,238,241,.72);
    margin:0 0 10px;
    max-height:48px;
    overflow:hidden;
  }

  /* Benefícios e planos com movimento suave, sem ocupar demais */
  .login-acende-seq{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
    margin:0 0 10px;
  }
  .login-acende-seq>div{
    min-height:36px;
    padding:7px 8px;
    font-size:var(--t-micro);
    line-height:1.16;
    border-radius:13px;
    animation:jslMobileOfferFloat 5.2s ease-in-out infinite;
  }
  .login-acende-seq>div:nth-child(2){animation-delay:.6s;}
  .login-acende-seq>div:nth-child(3){animation-delay:1.2s;}
  .login-acende-seq>div:nth-child(4){animation-delay:1.8s;}
  .login-acende-seq>div span:first-child{width:23px;height:23px;font-size:var(--t-mini);}
  @keyframes jslMobileOfferFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(-3px)}
  }
  .login-public-plans{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:0;
    padding:0 0 4px;
    overflow:visible;
  }
  .login-public-plans span{
    font-size:var(--t-micro);
    padding:6px 9px;
    border-radius:999px;
    animation:jslMobilePlanSoft 4.8s ease-in-out infinite;
  }
  .login-public-plans span:nth-child(2){animation-delay:.7s;}
  .login-public-plans span:nth-child(3){animation-delay:1.4s;}
  @keyframes jslMobilePlanSoft{
    0%,100%{transform:translateY(0);filter:brightness(1)}
    50%{transform:translateY(-2px);filter:brightness(1.10)}
  }

  /* Login fica mais embaixo, mais fino e menos dominante */
  .login-3d-wrap{
    flex:0 0 auto;
    margin-top:auto;
    align-self:stretch;
    position:relative;
    bottom:auto;
  }
  #login-box-dono,#login-box-colab{
    padding:13px 14px;
    border-radius:18px;
    max-height:none;
    overflow:visible;
    background:linear-gradient(145deg,rgba(18,22,27,.94),rgba(8,10,13,.94));
    box-shadow:0 24px 76px rgba(0,0,0,.38),0 0 0 1px rgba(255,209,0,.07) inset;
  }
  #login-box-dono h2,#login-box-colab h2{font-size:var(--t-gr);line-height:1.03;margin:0 0 2px;}
  #login-foot{font-size:var(--t-micro);margin:0 0 8px;line-height:1.15;}
  #login-box-dono label,#login-box-colab label{
    font-size:var(--t-micro);
    margin:0 0 3px;
    letter-spacing:1px;
  }
  #login-box-dono input,#login-box-colab input,#colab-login-nome{
    min-height:36px;
    height:36px;
    padding:7px 36px 7px 11px;
    font-size:var(--t-med);
    border-radius:12px;
    margin-bottom:7px;
  }
  #login-pwd-eye{right:10px;font-size:var(--t-base);}
  #login-box-dono .login-btn,#login-box-colab .login-btn{
    min-height:39px;
    height:39px;
    border-radius:12px;
    font-size:var(--t-base);
    letter-spacing:1.8px;
    margin-top:5px;
  }#login-box-dono>div[style*="justify-content:space-between"],
#login-box-dono>div.jsl-linha-extremos{
    margin-top:8px !important;
    margin-bottom:7px !important;
  }#login-box-dono>div[style*="justify-content:space-between"] button,
#login-box-dono>div.jsl-linha-extremos button{font-size:var(--t-micro) !important;}
  #login-mobile-cadastro{margin-top:7px;}
  #login-mobile-cadastro>div{font-size:var(--t-micro);margin-bottom:5px;}
  #login-mobile-cadastro button{
    min-height:36px;
    padding:8px 10px;
    font-size:var(--t-base);
    border-radius:11px;
  }

  /* Painéis internos: garante ajuste fino no celular por completo */
  .page{max-width:100%;overflow-x:hidden;}
  .content,.main,.main-content{max-width:100%;overflow-x:hidden;}
  .card,.box,.panel,.table-wrap,.func-panel,.func-card,.calc-card,.res-card,.obra-card,.orc-card{
    max-width:100%;
    box-sizing:border-box;
  }
}

@media (max-width:767px){
  #login-screen{padding-left:10px;padding-right:10px;}
  #login-lado-chamada{min-height:43dvh;}
  .login-hl-carousel{height:64px;min-height:64px;font-size:var(--t-tit);}
  #login-public-desc{font-size:var(--t-mini);max-height:44px;}
  .login-acende-seq{gap:6px;}
  .login-acende-seq>div{min-height:34px;font-size:var(--t-micro);padding:6px 7px;}
  .login-public-plans{gap:6px;}
  .login-public-plans span{font-size:var(--t-micro);padding:5px 8px;}
  #login-box-dono,#login-box-colab{padding:12px;}
  #login-box-dono input,#login-box-colab input{height:35px;min-height:35px;font-size:var(--t-med);}
  #login-box-dono .login-btn,#login-box-colab .login-btn{height:38px;min-height:38px;font-size:var(--t-base);}
}

@media (max-height:740px) and (max-width:1023px){
  #login-lado-chamada{min-height:39dvh;}
  .login-hl-carousel{height:58px;min-height:58px;font-size:var(--t-gr);margin-bottom:7px;}
  #login-public-desc{max-height:36px;font-size:var(--t-micro);margin-bottom:7px;}
  .login-acende-seq{gap:5px;margin-bottom:7px;}
  .login-acende-seq>div{min-height:30px;font-size:var(--t-micro);}
  .login-public-plans span{font-size:var(--t-micro);padding:5px 7px;}
  #login-box-dono,#login-box-colab{padding:10px 11px;}
}

/* ============================================================
   V58 — Mobile sem zoom + login igual ao PC, porém responsivo
   Objetivo: corrigir o app abrindo/ficando com zoom no iPhone e
   deixar a tela de login mobile completa como no desktop, sem
   estouro lateral, sem pinch obrigatório e com leitura ajustada.
   Somente visual/hosting. Não altera backend, regras ou dados.
   ============================================================ */
@media (max-width:1023px){
  html{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  body{
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    touch-action:pan-y;
  }
  *,*::before,*::after{box-sizing:border-box;}

  /* PWA/iPhone: impede o layout de nascer maior que a tela */
  #login-screen{
    width:100dvw;
    max-width:100dvw;
    min-height:100dvh;
    padding:calc(14px + env(safe-area-inset-top,0px)) 12px calc(16px + env(safe-area-inset-bottom,0px));
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    align-items:flex-start;
    justify-content:flex-start;
  }
  #login-screen>div{
    width:100%;
    max-width:min(100%,520px);
    min-height:auto;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:14px;
    transform:none;
  }

  /* Hero completo no padrão do PC, mas em largura de celular */
  #login-lado-chamada{
    width:100%;
    max-width:100%;
    min-height:auto;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:0;
    transform:none;
    animation:jslV58HeroFloat 8s ease-in-out infinite;
  }
  @keyframes jslV58HeroFloat{
    0%,100%{transform:translate3d(0,0,0)}
    50%{transform:translate3d(0,-4px,0)}
  }
  #login-lado-chamada>div:first-child{
    width:100%;
    max-width:100%;
    padding:11px 12px;
    margin:0 0 14px;
    border-radius:18px;
  }
  #login-sigla{width:46px;height:46px;border-radius:14px;font-size:var(--t-gr);}
  #login-titulo{font-size:var(--t-tit);line-height:1;}
  #login-subtitulo{font-size:var(--t-mini);line-height:1.18;white-space:normal;}

  .login-hl-carousel{
    width:100%;
    max-width:100%;
    height:72px;
    min-height:72px;
    font-size:var(--t-tit);
    line-height:1.07;
    letter-spacing:-.75px;
    margin:0 0 14px;
    overflow:hidden;
  }
  .login-hl-carousel .lhc-frase{
    width:100%;
    max-width:100%;
    line-height:1.07;
    white-space:normal;
    word-break:normal;
    overflow-wrap:normal;
    text-wrap:balance;
  }

  /* Descrição igual PC, completa no celular, sem sumir */
  #login-public-desc{
    display:block;
    max-height:none;
    overflow:visible;
    font-size:var(--t-peq);
    line-height:1.55;
    margin:0 0 14px;
    color:rgba(236,238,241,.78);
  }

  /* Benefícios compactos 2x2, igual informação do PC */
  .login-acende-seq{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100%;
    max-width:100%;
    margin:0 0 12px;
    order:4;
  }
  .login-acende-seq>div{
    width:100%;
    min-height:42px;
    padding:8px 9px;
    border-radius:14px;
    font-size:var(--t-micro);
    line-height:1.18;
    overflow:hidden;
    animation:jslV58OfferFloat 5.5s ease-in-out infinite;
  }
  .login-acende-seq>div:nth-child(2){animation-delay:.55s;}
  .login-acende-seq>div:nth-child(3){animation-delay:1.1s;}
  .login-acende-seq>div:nth-child(4){animation-delay:1.65s;}
  @keyframes jslV58OfferFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
  .login-acende-seq>div span:first-child{width:25px;height:25px;font-size:var(--t-peq);}

  /* Planos visíveis e sem estourar para o lado */
  .login-public-plans{
    order:3;
    width:100%;
    max-width:100%;
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin:0 0 12px;
    padding:0;
    overflow:visible;
  }
  .login-public-plans span{
    max-width:100%;
    flex:0 1 auto;
    white-space:nowrap;
    font-size:var(--t-mini);
    line-height:1;
    padding:7px 10px;
    border-radius:999px;
    animation:jslV58PlanFloat 4.8s ease-in-out infinite;
  }
  .login-public-plans span:nth-child(2){animation-delay:.7s;}
  .login-public-plans span:nth-child(3){animation-delay:1.4s;}
  @keyframes jslV58PlanFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}

  #login-lado-chamada>button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    align-self:flex-start;
    min-height:44px;
    height:44px;
    padding:0 22px;
    border-radius:12px;
    font-size:var(--t-peq);
    margin:0 0 2px;
    order:5;
  }

  /* Login abaixo, fino, 100% dentro da tela */
  .login-3d-wrap{
    width:100%;
    max-width:100%;
    margin:0;
    transform:none;
    perspective:none;
    overflow:visible;
  }
  #login-box-dono,#login-box-colab{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:14px;
    border-radius:19px;
    transform:none;
    overflow:hidden;
  }
  #login-box-dono h2,#login-box-colab h2{font-size:var(--t-gr);margin:0 0 3px;line-height:1.04;}
  #login-foot{font-size:var(--t-mini);margin:0 0 9px;}
  #login-box-dono label,#login-box-colab label{font-size:var(--t-micro);margin:0 0 4px;letter-spacing:1.2px;}

  /* iOS não dá zoom automático em input com fonte >= 16px */
  #login-box-dono input,
  #login-box-colab input,
  #colab-login-nome,
  #colab-login-pin{
    width:100%;
    max-width:100%;
    height:42px;
    min-height:42px;
    font-size:var(--t-med);
    padding:8px 42px 8px 12px;
    border-radius:13px;
    margin-bottom:8px;
  }
  #login-pwd-eye{right:11px;font-size:var(--t-base);}
  #login-box-dono .login-btn,#login-box-colab .login-btn{
    width:100%;
    max-width:100%;
    height:44px;
    min-height:44px;
    border-radius:13px;
    font-size:var(--t-base);
    letter-spacing:1.8px;
    margin-top:6px;
  }#login-box-dono>div[style*="justify-content:space-between"],
#login-box-dono>div.jsl-linha-extremos{
    margin-top:10px !important;
    margin-bottom:9px !important;
  }#login-box-dono>div[style*="justify-content:space-between"] button,
#login-box-dono>div.jsl-linha-extremos button{font-size:var(--t-micro) !important;}
  #login-mobile-cadastro{margin-top:9px;}
  #login-mobile-cadastro>div{font-size:var(--t-micro);margin-bottom:6px;}
  #login-mobile-cadastro button{width:100%;min-height:40px;font-size:var(--t-base);border-radius:12px;}
}

@media (max-width:767px){
  #login-screen{padding-left:10px;padding-right:10px;}
  .login-hl-carousel{height:68px;min-height:68px;font-size:var(--t-tit);}
  #login-public-desc{font-size:var(--t-peq);line-height:1.45;}
  .login-acende-seq{gap:6px;}
  .login-acende-seq>div{font-size:var(--t-micro);min-height:39px;padding:7px;}
  .login-public-plans span{font-size:var(--t-micro);padding:6px 8px;}
}

/* ============================================================
   V59 — Login mobile igual ao PC, sem botão extra no hero
   Objetivo: manter o anúncio completo no celular, esconder o
   botão "Começar grátis" do hero mobile e deixar o card de login
   mais fino/baixo, sem causar zoom no iPhone.
   ============================================================ */
@media (max-width:1023px){
  #login-screen{
    padding:calc(10px + env(safe-area-inset-top,0px)) 10px calc(12px + env(safe-area-inset-bottom,0px));
  }
  #login-screen>div{
    gap:12px;
  }

  /* O anúncio/hero deve ficar completo como no PC, mas empilhado no celular */
  #login-lado-chamada{
    margin:0;
    padding:0;
  }
  #login-lado-chamada>div:first-child{
    margin-bottom:11px;
    padding:10px 11px;
    border-radius:16px;
  }
  #login-sigla{width:42px;height:42px;font-size:var(--t-med);border-radius:12px;}
  #login-titulo{font-size:var(--t-tit);}
  #login-subtitulo{font-size:var(--t-mini);}

  .login-hl-carousel{
    height:66px;
    min-height:66px;
    font-size:var(--t-tit);
    line-height:1.06;
    margin:0 0 10px;
  }
  #login-public-desc{
    display:block;
    font-size:var(--t-peq);
    line-height:1.43;
    margin:0 0 10px;
    max-height:none;
    overflow:visible;
  }
  .login-public-plans{
    margin:0 0 10px;
    gap:6px;
  }
  .login-public-plans span{
    font-size:var(--t-micro);
    padding:6px 8px;
    line-height:1;
  }
  .login-acende-seq{
    grid-template-columns:1fr 1fr;
    gap:6px;
    margin:0 0 4px;
  }
  .login-acende-seq>div{
    min-height:34px;
    padding:6px 7px;
    border-radius:12px;
    font-size:var(--t-micro);
    line-height:1.12;
  }
  .login-acende-seq>div span:first-child{width:21px;height:21px;font-size:var(--t-micro);}

  /* Remove o botão amarelo extra do hero no celular.
     O cadastro continua no botão próprio dentro do card de login. */
  #login-lado-chamada>button{
    display:none;
  }

  /* Login mais fino e menos dominante */
  #login-box-dono,#login-box-colab{
    padding:11px 12px;
    border-radius:16px;
  }
  #login-box-dono>div:first-child,
  #login-box-colab>div:first-child{
    font-size:var(--t-gr);
    line-height:1.05;
    margin-bottom:2px;
  }
  #login-foot{font-size:var(--t-micro);margin-bottom:7px;}
  #login-box-dono label,#login-box-colab label{
    font-size:var(--t-micro);
    margin-bottom:3px;
    letter-spacing:1.05px;
  }
  #login-box-dono input,
  #login-box-colab input,
  #colab-login-nome,
  #colab-login-pin{
    height:38px;
    min-height:38px;
    font-size:var(--t-med);
    padding:6px 40px 6px 11px;
    border-radius:11px;
    margin-bottom:6px;
  }#login-box-dono>div[style*="position:relative"],
#login-box-dono>div.jsl-caixa-relativa,
#login-box-colab>div[style*="position:relative"],
#login-box-colab>div.jsl-caixa-relativa{
    margin-bottom:10px !important;
  }
  #login-box-dono .login-btn,#login-box-colab .login-btn{
    height:40px;
    min-height:40px;
    border-radius:11px;
    font-size:var(--t-base);
    letter-spacing:1.5px;
    margin-top:3px;
  }#login-box-dono>div[style*="justify-content:space-between"],
#login-box-dono>div.jsl-linha-extremos{
    margin-top:8px !important;
    margin-bottom:6px !important;
  }#login-box-dono>div[style*="justify-content:space-between"] button,
#login-box-dono>div.jsl-linha-extremos button{font-size:var(--t-micro) !important;}
  #login-mobile-cadastro{margin-top:7px;}
  #login-mobile-cadastro>div{font-size:var(--t-micro);margin-bottom:5px;}
  #login-mobile-cadastro button{
    min-height:36px;
    padding:7px 9px;
    font-size:var(--t-peq);
    border-radius:10px;
  }
}

@media (max-width:767px){
  .login-hl-carousel{height:61px;min-height:61px;font-size:var(--t-gr);}
  #login-public-desc{font-size:var(--t-mini);line-height:1.38;}
  .login-acende-seq>div{min-height:31px;font-size:var(--t-micro);padding:5px 6px;}
  .login-public-plans span{font-size:var(--t-micro);padding:5px 7px;}
  #login-box-dono,#login-box-colab{padding:10px;}
}


/* ============================================================
   V62 — Mobile: menu controlado + sair visível + login completo
   Objetivo: corrigir drawer gigante no celular, tornar logout visível,
   e manter no login mobile todos os blocos do anúncio do PC.
   Somente visual/hosting. Não altera backend, regras ou dados.
   ============================================================ */
.premium-logout-visible{
  min-width:58px;height:42px;border-radius:12px;border:1px solid rgba(255,209,0,.32);
  background:rgba(255,209,0,.10);color:var(--tx);font-family:'Barlow',sans-serif;
  font-weight:800;font-size:var(--t-peq);cursor:pointer;padding:0 14px;letter-spacing:.4px;
  transition:.18s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.premium-logout-visible:hover{background:rgba(255,209,0,.18);border-color:rgba(255,209,0,.55);color:var(--y);}
.ni-sair-conta{margin-top:10px;color:#ffdf55;border-color:rgba(255,209,0,.18);}

@media (max-width:1023px){
  /* Drawer menor, com cara de app, sem ocupar a tela inteira */
  .sidebar,.sidebar.premium-sidebar{
    width:min(78vw,292px);
    max-width:292px;
    height:calc(100dvh - env(safe-area-inset-top,0px));
    top:0;left:0;
    padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
    border-radius:0 22px 22px 0;
    overflow-y:auto;overflow-x:hidden;
    box-shadow:28px 0 70px rgba(0,0,0,.62);
  }
  .sidebar.premium-sidebar.open{transform:translateX(0);}
  .premium-logo-area{padding:14px 14px;min-height:70px;gap:10px;}
  .premium-logo-jsl{width:46px;height:46px;border-radius:13px;font-size:var(--t-gr);}
  .premium-logo-text strong{font-size:var(--t-gr);line-height:1;}
  .premium-logo-text span{font-size:var(--t-micro);letter-spacing:.8px;}
  .premium-nav{padding:10px 10px;gap:4px;}
  .premium-nav .ng{font-size:var(--t-micro);margin:12px 8px 5px;letter-spacing:1.2px;}
  .premium-nav .ni{min-height:40px;padding:9px 10px;border-radius:12px;font-size:var(--t-peq);gap:9px;}
  .premium-nav .ni-ic{width:20px;min-width:20px;font-size:var(--t-base);text-align:center;}
  .premium-plan-card{margin:10px;padding:11px;border-radius:15px;}
  .premium-plan-card strong{font-size:var(--t-peq);}
  .premium-plan-card p{font-size:var(--t-micro);margin:6px 0;}
  .premium-plan-card button{min-height:34px;font-size:var(--t-mini);border-radius:10px;}
  .premium-footer-brand{font-size:var(--t-micro);padding:10px 12px 14px;}

  /* Topbar mobile: sair visível e menu sem bagunçar */
  .premium-topbar{grid-template-columns:auto 1fr auto auto;align-items:center;}
  .premium-user{max-width:54px;min-width:44px;overflow:visible;}
  .premium-user em{display:none;}
  .premium-avatar{width:42px;height:42px;font-size:var(--t-base);}
  .premium-logout-visible{
    display:inline-flex;align-items:center;justify-content:center;
    height:38px;min-width:52px;padding:0 10px;border-radius:12px;
    font-size:var(--t-mini);color:#161616;background:linear-gradient(135deg,#ffd100,#d7a600);border:0;
  }
}

@media (max-width:1023px){
  /* Login mobile como versão empilhada do PC: anúncio completo primeiro */
  #login-screen{padding:calc(12px + env(safe-area-inset-top,0px)) 12px calc(18px + env(safe-area-inset-bottom,0px));}
  #login-screen>div{gap:14px;max-width:767px;}
  #login-lado-chamada{display:flex;width:100%;max-width:100%;min-height:auto;padding:0;}
  #login-lado-chamada>div:first-child{display:flex;width:100%;margin:0 0 13px;padding:11px 12px;border-radius:18px;}
  .login-hl-carousel{display:block;height:72px;min-height:72px;font-size:var(--t-tit);line-height:1.08;margin:0 0 12px;overflow:hidden;}
  #login-public-desc{display:block;max-height:none;overflow:visible;font-size:var(--t-peq);line-height:1.48;margin:0 0 12px;color:rgba(236,238,241,.82);}
  .login-public-plans{display:flex;flex-wrap:wrap;overflow:visible;gap:7px;margin:0 0 11px;padding:0;}
  .login-public-plans span{font-size:var(--t-micro);padding:6px 9px;line-height:1;white-space:nowrap;}
  .login-acende-seq{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0 0 4px;max-height:none;overflow:visible;}
  .login-acende-seq>div{display:flex;min-height:38px;padding:7px 8px;font-size:var(--t-micro);line-height:1.15;border-radius:13px;}
  .login-acende-seq>div span:first-child{width:22px;height:22px;font-size:var(--t-mini);}
  #login-lado-chamada>button{display:none;}

  /* Login mais baixo, menor e sem cortar lateral */
  .login-3d-wrap{width:100%;max-width:100%;margin-top:8px;}
  #login-box-dono,#login-box-colab{padding:11px 12px;border-radius:17px;width:100%;max-width:100%;overflow:hidden;}
  #login-box-dono>div:first-child{font-size:var(--t-gr);line-height:1.05;margin-bottom:2px;}
  #login-foot{font-size:var(--t-micro);margin-bottom:7px;}
  #login-box-dono label,#login-box-colab label{font-size:var(--t-micro);margin-bottom:3px;}
  #login-box-dono input,#login-box-colab input,#colab-login-nome,#colab-login-pin{height:38px;min-height:38px;font-size:var(--t-med);border-radius:12px;padding:6px 40px 6px 11px;margin-bottom:6px;}
  #login-box-dono .login-btn,#login-box-colab .login-btn{height:40px;min-height:40px;border-radius:12px;font-size:var(--t-base);letter-spacing:1.55px;margin-top:3px;}#login-box-dono>div[style*="justify-content:space-between"],
#login-box-dono>div.jsl-linha-extremos{margin-top:8px !important;margin-bottom:6px !important;}#login-box-dono>div[style*="justify-content:space-between"] button,
#login-box-dono>div.jsl-linha-extremos button{font-size:var(--t-micro) !important;}
  #login-mobile-cadastro{display:block;margin-top:7px;}
  #login-mobile-cadastro>div{font-size:var(--t-micro);margin-bottom:5px;}
  #login-mobile-cadastro button{min-height:36px;padding:7px 9px;font-size:var(--t-peq);border-radius:10px;}
}

@media (max-width:767px){
  #login-screen{padding-left:10px;padding-right:10px;}
  .login-hl-carousel{height:66px;min-height:66px;font-size:var(--t-gr);}
  #login-public-desc{font-size:var(--t-mini);line-height:1.38;}
  .login-public-plans span{font-size:var(--t-micro);padding:5px 7px;}
  .login-acende-seq{gap:6px;}
  .login-acende-seq>div{min-height:34px;font-size:var(--t-micro);padding:6px;}
}


/* V65 — orçamento salvo mobile: ações em cards, sem sobrepor a borda da tela */
.orc-salvo-card{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;border-bottom:1px solid var(--bd);font-size:var(--t-peq);max-width:100%;box-sizing:border-box}
.orc-salvo-info{flex:1;min-width:0}
.orc-salvo-title{font-weight:800;line-height:1.25;word-break:break-word}
.orc-salvo-ref{font-size:var(--t-micro);color:var(--blu);font-weight:800;margin-right:5px}
.orc-salvo-meta{color:var(--mt);font-size:var(--t-micro);margin-top:2px;line-height:1.25}
.orc-salvo-total{font-weight:900;color:var(--y);white-space:nowrap}
.orc-salvo-actions{display:flex;gap:4px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.orc-salvo-actions .btn{min-width:auto;white-space:nowrap}
.btn-contrato{border-color:rgba(67,160,71,.4);color:var(--grn)}
.btn-ver-contrato{border-color:rgba(30,136,229,.4);color:var(--blu)}
@media (max-width:1023px){
  #orc-arqs{width:100%;max-width:100%;overflow:hidden}
  .orc-salvo-card{display:block;background:var(--g2);border:1px solid var(--bd);border-radius:10px;padding:10px;margin:8px 0}
  .orc-salvo-total{display:inline-block;margin-top:6px;font-size:var(--t-peq)}
  .orc-salvo-actions{margin-top:8px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .orc-salvo-actions .btn{width:100%;padding:8px 6px;font-size:var(--t-mini);text-align:center}
  .orc-salvo-title .tag{display:inline-block;margin-top:3px}
  .modal .fg select#i-desc-pronta{font-size:var(--t-med)}
}


/* ============================================================
   V66 — CORREÇÃO DEFINITIVA LOGIN MOBILE
   Corrige regressão da V65: botão extra "Começar grátis" no hero
   aparecendo no celular e benefícios abaixo dos pacotes sumindo.
   Não altera fórmulas, Firebase, regras, login backend ou assinaturas.
   ============================================================ */
@media (max-width:1023px){
  html,body{width:100%;max-width:100%;overflow-x:hidden;}
  #login-screen{
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    overflow-y:auto;
    overflow-x:hidden;
    padding:calc(10px + env(safe-area-inset-top,0px)) 10px calc(16px + env(safe-area-inset-bottom,0px));
    box-sizing:border-box;
  }
  #login-screen>div{
    display:flex;
    flex-direction:column;
    grid-template-columns:none;
    width:100%;
    max-width:767px;
    min-width:0;
    gap:10px;
    align-items:stretch;
    justify-content:flex-start;
    margin:0 auto;
    box-sizing:border-box;
  }
  #login-lado-chamada{
    display:block;
    order:1;
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:0;
    padding:0;
    margin:0;
    box-sizing:border-box;
  }
  #login-lado-chamada>div:first-child{
    display:flex;
    align-items:center;
    width:100%;
    max-width:100%;
    margin:0 0 9px;
    padding:9px 10px;
    border-radius:16px;
    box-sizing:border-box;
  }
  #login-sigla{width:40px;height:40px;min-width:40px;font-size:var(--t-med);border-radius:11px;}
  #login-titulo{font-size:var(--t-gr);line-height:1;}
  #login-subtitulo{font-size:var(--t-micro);line-height:1.18;}
  .login-hl-carousel{
    display:block;
    width:100%;
    height:58px;
    min-height:58px;
    max-height:58px;
    margin:0 0 8px;
    padding:0;
    overflow:hidden;
    font-size:var(--t-gr);
    line-height:1.12;
    box-sizing:border-box;
  }
  #login-public-desc{
    display:block;
    width:100%;
    max-height:none;
    overflow:visible;
    margin:0 0 8px;
    padding:0;
    font-size:var(--t-mini);
    line-height:1.36;
    color:rgba(236,238,241,.86);
  }
  .login-public-plans{
    display:flex;
    flex-wrap:wrap;
    gap:5px;
    width:100%;
    margin:0 0 7px;
    padding:0;
    overflow:visible;
    max-height:none;
  }
  .login-public-plans span{
    display:inline-flex;
    white-space:nowrap;
    font-size:var(--t-micro);
    line-height:1;
    padding:5px 7px;
    margin:0;
  }
  .login-acende-seq{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    width:100%;
    max-width:100%;
    max-height:none;
    overflow:visible;
    margin:0 0 2px;
    padding:0;
  }
  .login-acende-seq>div,
  .login-acende-seq>div:nth-child(n+1),
  .login-acende-seq>div:nth-child(n+3){
    display:flex;
    align-items:center;
    min-height:30px;
    padding:5px 6px;
    border-radius:11px;
    font-size:var(--t-micro);
    line-height:1.12;
    box-sizing:border-box;
    opacity:1;
    transform:none;
    visibility:visible;
  }
  .login-acende-seq>div span:first-child{width:19px;height:19px;min-width:19px;font-size:var(--t-micro);}
  .login-acende-seq>div span:last-child{min-width:0;}

  /* No celular este botão NÃO pode aparecer. Só fica o botão de criar conta dentro do card de login. */
  #login-hero-comecar-btn,
  .login-hero-comecar-btn,
  #login-lado-chamada > button[onclick="abrirCadastro()"]{
    display:none;
    visibility:hidden;
    opacity:0;
    height:0;
    min-height:0;
    max-height:0;
    padding:0;
    margin:0;
    overflow:hidden;
    pointer-events:none;
  }

  .login-3d-wrap{
    order:2;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:6px 0 0;
    box-sizing:border-box;
  }
  #login-box-dono,#login-box-colab{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:10px 11px;
    border-radius:15px;
    box-sizing:border-box;
    overflow:hidden;
  }
  #login-mobile-expand-btn{display:none;}
  #login-mobile-cadastro{display:block;margin-top:7px;}
  #login-mobile-cadastro button{min-height:35px;padding:7px 9px;font-size:var(--t-peq);border-radius:10px;}
}
@media (max-width:767px){
  .login-hl-carousel{height:54px;min-height:54px;max-height:54px;font-size:var(--t-gr);}
  #login-public-desc{font-size:var(--t-micro);line-height:1.30;margin-bottom:6px;}
  .login-public-plans{gap:4px;margin-bottom:6px;}
  .login-public-plans span{font-size:var(--t-micro);padding:4px 6px;}
  .login-acende-seq{gap:4px;}
  .login-acende-seq>div{min-height:28px;font-size:var(--t-micro);padding:4px 5px;}
}


/* ============================================================
   V69 — LOGIN MOBILE + PDF ORÇAMENTO PAGINAÇÃO PREMIUM
   - cadastro fica no bloco principal, abaixo dos benefícios
   - botão de cadastro sai de dentro do card de login no celular
   - evita dois botões de cadastro no mobile
   ============================================================ */
@media (max-width:1023px){
  /* Mostrar o botão de cadastro no hero, depois dos benefícios */
  #login-hero-comecar-btn,
  .login-hero-comecar-btn{
    display:flex;
    visibility:visible;
    opacity:1;
    height:42px;
    min-height:42px;
    max-height:42px;
    width:100%;
    align-items:center;
    justify-content:center;
    margin:8px 0 0;
    padding:0 14px;
    border-radius:13px;
    overflow:hidden;
    pointer-events:auto;
    font-size:var(--t-peq);
    line-height:1;
    letter-spacing:.55px;
  }
  /* Texto do botão é ajustado por JS; esta regra só garante posição correta */
  #login-lado-chamada{padding-bottom:0;}
  .login-acende-seq{
    margin-bottom:0;
  }
  .login-acende-seq>div{
    display:flex;
    opacity:1;
    visibility:visible;
  }
  /* No celular não pode ter botão duplicado dentro do card de login */
  #login-mobile-cadastro{
    display:none;
    visibility:hidden;
    height:0;
    min-height:0;
    max-height:0;
    margin:0;
    padding:0;
    overflow:hidden;
    pointer-events:none;
  }
}


/* ============================================================
   V71 — CALCULADORA HISTÓRICO AÇÕES
   Botão de cadastro visível ENTRE o anúncio e o card de login.
   Corrige conflito de especificidade da V66 que escondia o botão.
   Card de login mais compacto e mais baixo na tela.
   ============================================================ */
@media (max-width:1023px){
  #login-screen{
    padding-top:calc(12px + env(safe-area-inset-top,0px));
  }
  #login-screen>div{
    gap:14px;
  }
  #login-lado-chamada > #login-hero-comecar-btn,
  #login-lado-chamada > button#login-hero-comecar-btn,
  #login-lado-chamada > button.login-hero-comecar-btn,
  #login-lado-chamada > button[onclick="abrirCadastro()"].login-hero-comecar-btn{
    display:flex;
    visibility:visible;
    opacity:1;
    height:40px;
    min-height:40px;
    max-height:40px;
    width:100%;
    align-items:center;
    justify-content:center;
    margin:9px 0 0;
    padding:0 14px;
    border-radius:13px;
    background:var(--y);
    color:#151515;
    font-size:var(--t-peq);
    font-weight:900;
    line-height:1;
    letter-spacing:.55px;
    text-transform:uppercase;
    overflow:hidden;
    pointer-events:auto;
    box-sizing:border-box;
  }
  #login-mobile-cadastro{
    display:none;
    visibility:hidden;
    height:0;
    max-height:0;
    min-height:0;
    margin:0;
    padding:0;
    overflow:hidden;
    pointer-events:none;
  }
  .login-3d-wrap{
    margin:16px 0 0;
    transform:none;
  }
  #login-box-dono,#login-box-colab{
    padding:9px 10px;
    border-radius:15px;
  }
  #login-box-dono>div:first-child{font-size:var(--t-base);margin-bottom:2px;}
  #login-foot{font-size:var(--t-micro);margin-bottom:8px;}
  #login-box-dono label{font-size:var(--t-micro);margin-bottom:3px;}
  #login-box-dono input,#login-box-colab input{height:39px;min-height:39px;margin-bottom:7px;}
  #login-box-dono .login-btn,#login-box-colab .login-btn{height:40px;min-height:40px;margin-top:3px;}
}
@media (max-width:767px){
  .login-3d-wrap{margin-top:14px;}
  #login-lado-chamada > #login-hero-comecar-btn{height:38px;min-height:38px;max-height:38px;font-size:var(--t-peq);}
}

/* ====================================================================
   V85 — CORREÇÃO ESTRUTURAL MOBILE DEFINITIVA (camada final, autoritativa)
   Objetivo: sistema inteiro cabe na tela do celular, sem sobreposição,
   sem botão cortado e tudo alinhado. Escopo: <=767px (mesmo ponto onde o
   JS troca para o modo gaveta). Vence os blocos globais desktop herdados
   (body{display:flex}, sidebar position:relative, main margin-left) por
   estar por último no arquivo e usar.
   ==================================================================== */
@media (max-width:767px){

  /* --- 1. Raiz: rolagem vertical liberada, zero rolagem horizontal --- */
  html{overflow-x:hidden;}
  body{
    display:block;
    flex-direction:column;
    height:auto;
    min-height:100dvh;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* --- 2. Sidebar vira gaveta fora da tela (não ocupa coluna real) --- */
  .sidebar,
  .sidebar.premium-sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    height:100dvh;
    width:86vw;
    max-width:300px;
    flex:none;
    margin:0;
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:var(--z-auth);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .sidebar.open,
  .sidebar.premium-sidebar.open{transform:translateX(0);left:0;}

  /* --- 3. Overlay do menu acima do conteúdo, abaixo da gaveta --- */
  .sidebar-overlay{
    position:fixed;
    inset:0;
    z-index:var(--z-aviso);
    background:rgba(0,0,0,.6);
  }
  .sidebar-overlay.show{display:block;}

  /* --- 4. Área principal ocupa 100% da largura, sem margem de sidebar --- */
  .main{
    margin-left:0;
    width:100%;
    max-width:100%;
    min-width:0;
    flex:none;
    min-height:auto;
    overflow:visible;
  }
  body.sidebar-collapsed .main{margin-left:0;}

  /* --- 5. Topbar fixa no topo, sem empurrar conteúdo para fora --- */
  .premium-topbar{
    width:100%;
    max-width:100%;
    padding-left:12px;
    padding-right:12px;
    gap:10px;
  }

  /* --- 6. Conteúdo: fluxo normal + folga inferior p/ não cortar botões --- */
  .content{
    overflow:visible;
    width:100%;
    max-width:100%;
    min-width:0;
    padding:14px 12px calc(104px + env(safe-area-inset-bottom,0px)) 12px;
  }

  /* --- 7. Botão hambúrguer sempre visível e acima de tudo --- */
  .mob-menu-btn{
    display:flex;
    z-index:var(--z-auth);
    bottom:calc(18px + env(safe-area-inset-bottom,0px));
  }

  /* --- 8. Guardas globais anti-overflow e mídia fluida --- */
  *{box-sizing:border-box;}
  img,svg,canvas,video,iframe{max-width:100%;height:auto;}
  .content img,.content canvas{max-width:100%;}

  /* Qualquer tabela grande rola na horizontal em vez de estourar a tela */
  .content table{max-width:100%;}
  .table-wrap,.tabela-wrap,.table-responsive,.premium-table-wrap,.table-scroll{
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Modais nunca passam da viewport; rodapé de ações sempre visível */
  .modal{
    width:calc(100vw - 20px);
    max-width:calc(100vw - 20px);
    max-height:90dvh;
    overflow-y:auto;
    overscroll-behavior:contain;
  }
  .modal .mf{
    position:sticky;
    bottom:0;
    padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));
    z-index:var(--z-local);
  }

  /* Barras de ação fixas no rodapé respeitam a área segura do aparelho */
  .action-bar,.bottom-bar,.fixed-actions,.calc-actions-bar{
    padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));
  }
}

/* Telas bem estreitas: respiro lateral menor para alinhar tudo na borda */
@media (max-width:767px){
  .content{padding-left:10px;padding-right:10px;}
  .premium-topbar{padding-left:10px;padding-right:10px;}
}

/* ====================================================================
   V92 — CORREÇÃO: valor do KPI "destaque" invisível no tema escuro
   O tema premium pinta todos os .kpi-item de fundo escuro (),
   mas o .kpi-accent .kpi-val era preto (#1a1a1a, feito p/ fundo amarelo)
   -> ficava preto no escuro. Aqui o valor vira amarelo e o rótulo claro,
   garantindo leitura em qualquer tela (Funil, Recibos, Cobranças, etc.)
   sem mudar o visual escuro premium.
   ==================================================================== */
.kpi-item.kpi-accent .kpi-val{color:var(--y)}
.kpi-item.kpi-accent .kpi-lbl{color:var(--mt)}

/* ============================================================
   MOBILE = REPLICA DO PC EMPILHADA (v102)
   Mesmo conteudo e estilo do desktop, empilhado em coluna unica e
   proporcional ao celular: marca, chamada animada, planos, recursos,
   card de login (campos visiveis), CTA e rodape em linha.
   ============================================================ */
@media (max-width:767px){
  #login-screen{
    display:flex;flex-direction:column;
    align-items:center;justify-content:flex-start;
    width:100%;max-width:100%;overflow-x:hidden;
    padding:20px 16px 26px;box-sizing:border-box;
  }
  #login-screen>div{
    display:flex;flex-direction:column;grid-template-columns:none;
    width:100%;max-width:360px;margin:0 auto;gap:16px;
  }
  /* COLUNA DA CHAMADA (igual ao PC, so menor) */
  #login-lado-chamada{display:block;width:100%;order:1;}
  #login-sigla{width:50px;height:50px;font-size:var(--t-gr);}
  #login-titulo{font-size:var(--t-tit);}
  #login-subtitulo{font-size:var(--t-peq);}
  #login-headline-carousel{font-size:var(--t-hero);line-height:1.1;min-height:62px;margin:10px 0 8px;}
  #login-headline-carousel .lhc-frase{font-size:var(--t-hero);}
  #login-public-desc{font-size:var(--t-peq);line-height:1.5;margin-bottom:10px;}
  #login-lado-chamada [data-public-plan]{font-size:var(--t-peq);padding:7px 10px;}
  .login-acende-seq{grid-template-columns:1fr 1fr;gap:8px;}
  .login-acende-seq>*{padding:10px;font-size:var(--t-mini);}
  #login-hero-comecar-btn,.login-hero-comecar-btn{width:100%;padding:14px;font-size:var(--t-base);}

  /* CARD DE LOGIN (igual ao PC) com campos visiveis */
  #login-box-dono{order:2;width:100%;max-width:360px;margin:0 auto;
    padding:22px;border-radius:16px;
    box-shadow:0 16px 44px rgba(0,0,0,.5);
    animation:loginFloat 6.5s ease-in-out infinite;}
  #login-mobile-expand-btn{display:none;visibility:hidden;}
  #login-screen.mobile-login-collapsed #login-box-dono label,
  #login-screen.mobile-login-collapsed #login-box-dono #login-email,
  #login-screen.mobile-login-collapsed #login-box-dono #login-pwd,
  #login-screen.mobile-login-collapsed #login-box-dono #login-pwd-eye,
  #login-screen.mobile-login-collapsed #login-box-dono .login-btn,
  #login-screen.mobile-login-collapsed #login-box-dono #login-err,
  #login-screen.mobile-login-collapsed #login-box-dono>div:nth-of-type(3),
  #login-screen.mobile-login-collapsed #login-box-dono>div:nth-of-type(4){display:block;}
  #login-box-dono #login-email,#login-box-dono #login-pwd{height:46px;font-size:var(--t-base);}
  #login-box-dono .login-btn{height:50px;font-size:var(--t-med);}
  #login-mobile-cadastro{display:none;}

  #login-screen>div>*{max-width:100%;box-sizing:border-box;}
}

/* ============================================================
   RESPONSIVO POR FAIXA (v103) — estilo "reconhece a tela" (Netflix).
   Ajusta fontes/espacos conforme o tamanho do celular, encolhendo junto
   para nunca estourar nem cortar. Usa clamp() = se adapta sozinho.
   ============================================================ */
@media (max-width:767px){
  /* fontes fluidas: minimo / ideal-conforme-largura / maximo */
  #login-titulo{font-size:var(--t-tit);}
  #login-subtitulo{font-size:var(--t-peq);}
  #login-headline-carousel,#login-headline-carousel .lhc-frase{font-size:var(--t-hero);line-height:1.12;}
  #login-headline-carousel{min-height:clamp(48px,16vw,70px);}
  #login-public-desc{font-size:var(--t-peq);}
  #login-lado-chamada [data-public-plan]{font-size:var(--t-peq);}
  .login-acende-seq>*{font-size:var(--t-peq);}
  #login-sigla{width:clamp(44px,12vw,54px);height:clamp(44px,12vw,54px);font-size:var(--t-tit);}
  #login-box-dono #login-email,#login-box-dono #login-pwd{height:clamp(42px,12vw,48px);font-size:var(--t-med);}
  #login-box-dono .login-btn{height:clamp(46px,13vw,52px);font-size:var(--t-med);}
  #login-hero-comecar-btn,.login-hero-comecar-btn{font-size:var(--t-base);}
}
/* CELULAR PEQUENO (<=360px): aperta um pouco mais para nao cortar */
@media (max-width:767px){
  #login-screen{padding:14px 12px 20px;}
  #login-screen>div{gap:12px;}
  .login-acende-seq{grid-template-columns:1fr;}
  #login-box-dono{padding:18px;}
}
/* CELULAR GRANDE / phablet (480-767px): respira mais */
@media (min-width:768px) and (max-width:1023px){
  #login-screen>div{max-width:767px;gap:18px;}
}

/* ============================================================
   CORRECAO MENU LATERAL MOBILE (v104)
   Bug: a cortina (overlay) ficava ACIMA do menu e o menu sem fundo solido,
   deixando tudo escuro/borrado. Aqui: menu OPACO e ACIMA da cortina.
   Usa #id (especificidade alta) e @media que casa com o celular.
   ============================================================ */
@media (max-width:767px){
  #sidebar.sidebar,#sidebar.premium-sidebar{
    position:fixed;left:0;top:0;bottom:0;
    width:min(84vw,300px);height:100dvh;
    z-index:var(--z-critico);
    background:linear-gradient(180deg,#0e1114,#090b0d);
    transform:translateX(-105%);transition:transform .24s ease;
    overflow-y:auto;box-shadow:24px 0 70px rgba(0,0,0,.6);
  }
  #sidebar.open,#sidebar.premium-sidebar.open{transform:translateX(0);}
  #sidebar-overlay.show{
    display:block;position:fixed;inset:0;
    z-index:var(--z-critico);background:rgba(0,0,0,.55);backdrop-filter:blur(3px);
  }
}

/* ===== Edicao da lista de compra (v105): campo de qtd + botao X ===== */
.cm-qtd-in{width:64px;max-width:70px;text-align:right;font-weight:700;font-size:var(--t-peq);color:var(--y,#FFD100);background:rgba(255,255,255,.04);border:1px solid var(--bd);border-radius:7px;padding:3px 7px;outline:none;transition:border-color .15s,background .15s;}
.cm-qtd-in:focus{border-color:var(--y,#FFD100);background:rgba(255,209,0,.08);}
.cm-qtd-in.cm-qtd-ed{color:#19a974;border-color:rgba(25,169,116,.55);background:rgba(25,169,116,.10);}
.cm-x{background:transparent;border:1px solid var(--bd);color:var(--mt);width:20px;height:20px;line-height:1;border-radius:6px;font-size:var(--t-base);cursor:pointer;vertical-align:middle;margin-left:4px;padding:0;transition:all .15s;}
.cm-x:hover{background:rgba(229,57,53,.15);border-color:rgba(229,57,53,.5);color:#e53935;}

/* ===== Adicionar material manual (v106) ===== */
.cm-add-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 4px 4px;margin-top:6px;border-top:1px dashed var(--bd);}
.cm-add-in{background:rgba(255,255,255,.04);border:1px solid var(--bd);border-radius:8px;padding:8px 10px;color:var(--tx);font-size:var(--t-peq);outline:none;transition:border-color .15s;}
.cm-add-in:focus{border-color:var(--y,#FFD100);}
.cm-add-nome{flex:1;min-width:160px;}
.cm-add-qtd{width:70px;text-align:right;}
.cm-add-un{width:64px;}
.cm-add-btn{white-space:nowrap;}
@media (max-width:767px){.cm-add-nome{min-width:100%;}.cm-add-qtd{flex:1;}.cm-add-un{flex:1;}.cm-add-btn{flex:1;}}

/* ============================================================
   V144 — RELAÇÃO DE MATERIAIS no celular: card limpo e editável.
   Corrige: vazão gigante, coluna de QTD sumindo (não dava p/ editar)
   e o rótulo "Ações" errado sobre o detalhe. Escopado por #bloco-materiais
   (ID) para vencer as regras genéricas de tabela->card.
   ============================================================ */
@media (max-width:1023px){
  #bloco-materiais .cm-table tr{padding:12px 13px;}
  #bloco-materiais .cm-table td{display:block;padding:5px 0;border-top:0;}
  #bloco-materiais .cm-table td:not(:empty)::before,
  #bloco-materiais .cm-table td:last-child::before{
    content:attr(data-label);flex-basis:auto;display:block;
    color:var(--mt);font-size:var(--t-micro);font-weight:800;
    text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;
  }
  #bloco-materiais .cm-table td:last-child{border-top:0;padding-top:6px;}
  #bloco-materiais .cm-table .cm-nome{font-size:var(--t-base);font-weight:800;color:var(--tx);}
  #bloco-materiais .cm-table .cm-x{width:30px;height:30px;min-height:0;padding:0;line-height:28px;font-size:var(--t-gr);border-radius:8px;vertical-align:middle;}
  #bloco-materiais .cm-table .cm-qtd{display:inline-block;width:auto;margin-right:26px;text-align:left;vertical-align:top;}
  #bloco-materiais .cm-table .cm-un{display:inline-block;width:auto;vertical-align:top;color:var(--tx);}
  #bloco-materiais .cm-table .cm-qtd-in{width:120px;min-height:42px;font-size:var(--t-med);text-align:left;padding:6px 10px;}
  #bloco-materiais .cm-table .cm-det{color:var(--mt);font-size:var(--t-peq);line-height:1.5;}
  #bloco-materiais .cm-table .cm-sec td{padding:8px 2px 4px;}
  #bloco-materiais .cm-table .cm-sec td::before{display:none;content:"";}
}

/* ============================================================
   V145 — FAIXA PROTETORA DO NOTCH (iPhone/PWA em tela cheia).
   Ao rolar, o conteúdo passava POR BAIXO do relógio/bateria do iOS
   e ficava ilegível (ex.: cabeçalho da Relação de Materiais sob o
   relógio). Esta faixa fixa, da altura exata do safe-area do topo,
   dá um fundo escuro à área da status bar. Em aparelhos sem notch
   (e no PC) a altura é 0 — efeito nulo. Não intercepta toques.
   ============================================================ */
html::after{
  content:"";
  position:fixed;
  top:0;left:0;right:0;
  height:env(safe-area-inset-top,0px);
  background:rgba(9,11,13,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  z-index:var(--z-critico);
  pointer-events:none;
}

/* ============================================================
   CALCULADORA v21 — Painéis Parede + Forro com relação unificada
   Visual premium: linhas finas (hairline), estilo do histórico
   ============================================================ */

/* Resumo combinado no topo */
.c2-resumo{display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:linear-gradient(180deg,rgba(255,255,255,.015),transparent),var(--g1,#141414);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:12px 18px;margin-bottom:14px}
.c2-resumo-item{display:flex;align-items:center;gap:10px}
.c2-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.c2-resumo-val{font-size:var(--t-med);font-weight:800;color:var(--tx,#eee);line-height:1.1;letter-spacing:.2px}
.c2-resumo-lbl{font-size:var(--t-micro);color:var(--mt,#999);text-transform:uppercase;letter-spacing:.9px;margin-top:1px}
.c2-resumo-total .c2-resumo-val{color:var(--grn,#43a047)}

/* Grid dos dois painéis de lançamento */
.c2-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;margin-bottom:14px}
@media (max-width:1023px){.c2-grid{grid-template-columns:1fr}}

/* Painel — borda hairline, acento fino no topo */
.c2-panel{position:relative;background:var(--g1,#141414);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:16px 18px 16px;overflow:hidden}
.c2-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.08)}
.c2-panel-parede::before{background:linear-gradient(90deg,var(--y,#FFD100),rgba(255,209,0,.15))}
.c2-panel-forro::before{background:linear-gradient(90deg,#1e88e5,rgba(30,136,229,.15))}
.c2-panel-mat::before{background:linear-gradient(90deg,var(--y,#FFD100) 0%,rgba(255,209,0,.2) 50%,#1e88e5 100%)}
.c2-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;padding-bottom:11px;border-bottom:1px solid rgba(255,255,255,.06)}
.c2-panel-tit{font-size:var(--t-base);font-weight:800;color:var(--tx,#eee);display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:1px;font-family:'Barlow Condensed',sans-serif}
.c2-panel-ico{font-size:var(--t-med);opacity:.9}
.c2-panel-area{font-size:var(--t-micro);color:var(--mt,#999);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:3px 11px;font-weight:600;letter-spacing:.3px}

/* Lançamento rápido */
.c2-entry{display:flex;gap:8px;align-items:flex-end;margin-bottom:11px}
.c2-entry-field{flex:1;position:relative}
.c2-entry-field label{display:block;font-size:var(--t-micro);font-weight:700;color:var(--mt,#999);text-transform:uppercase;letter-spacing:.9px;margin-bottom:5px}
.c2-entry-field input,.c2-entry-field select{width:100%;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.09);border-radius:8px;color:var(--tx,#eee);font-size:var(--t-med);font-weight:700;padding:9px 26px 9px 11px;outline:none;transition:border-color .15s,background .15s;box-sizing:border-box}
.c2-entry-field select{padding-right:11px}
.c2-entry-field input:focus,.c2-entry-field select:focus{border-color:rgba(255,209,0,.55);background:rgba(255,209,0,.025)}
.c2-panel-forro .c2-entry-field input:focus,.c2-panel-forro .c2-entry-field select:focus{border-color:rgba(30,136,229,.6);background:rgba(30,136,229,.03)}
.c2-entry-field span{position:absolute;right:10px;bottom:10px;font-size:var(--t-mini);color:var(--mt,#999);pointer-events:none}
.c2-entry-sel{flex:0 0 64px}
.c2-add{flex:0 0 42px;height:38px;border-radius:8px;border:none;font-size:var(--t-gr);font-weight:800;cursor:pointer;transition:transform .1s,filter .15s}
.c2-add:hover{filter:brightness(1.12)}
.c2-add:active{transform:scale(.94)}
.c2-add-y{background:var(--y,#FFD100);color:#1a1a1a}
.c2-add-b{background:#1e88e5;color:#fff}

/* Configurações em <details> compacto */
.c2-cfg{margin-bottom:13px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:rgba(255,255,255,.015)}
.c2-cfg summary{cursor:pointer;font-size:var(--t-micro);font-weight:700;color:var(--mt,#999);padding:8px 12px;list-style:none;user-select:none;letter-spacing:.4px}
.c2-cfg summary::-webkit-details-marker{display:none}
.c2-cfg summary::after{content:'▾';float:right;transition:transform .15s;opacity:.6}
.c2-cfg[open] summary::after{transform:rotate(180deg)}
.c2-cfg summary:hover{color:var(--tx,#eee)}
.c2-cfg-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:5px 12px 12px}
.c2-cfg-item label{display:block;font-size:var(--t-micro);font-weight:700;color:var(--mt,#999);text-transform:uppercase;letter-spacing:.7px;margin-bottom:4px}
.c2-cfg-item select{width:100%;background:var(--g1,#141414);border:1px solid rgba(255,255,255,.09);border-radius:6px;color:var(--tx,#eee);font-size:var(--t-med);padding:6px 8px;outline:none;box-sizing:border-box}
.c2-cfg-item select:focus{border-color:rgba(255,209,0,.5)}

/* Título de seção — micro label estilo histórico */
.c2-sec-tit{font-size:var(--t-micro);font-weight:800;color:var(--mt,#999);text-transform:uppercase;letter-spacing:1.1px;margin:4px 0 2px;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.06)}

/* Tabela de medidas lançadas — linhas hairline */
.c2-medidas table{width:100%;border-collapse:collapse}
.c2-medidas th{font-size:var(--t-micro);font-weight:800;color:var(--mt,#999);text-transform:uppercase;letter-spacing:.9px;text-align:left;padding:8px 8px 7px;border-bottom:1px solid rgba(255,255,255,.07)}
.c2-medidas td{font-size:var(--t-peq);color:var(--tx,#eee);padding:9px 8px;border-bottom:1px solid rgba(255,255,255,.045)}
.c2-medidas tr:last-child td{border-bottom:none}
.c2-medidas td.c2-area{font-weight:800}
.c2-medidas tr:hover td{background:rgba(255,255,255,.02)}
.c2-med-rm{background:none;border:none;color:var(--mt,#999);font-size:var(--t-base);cursor:pointer;padding:2px 6px;border-radius:5px;line-height:1;opacity:.55;transition:opacity .15s}
tr:hover .c2-med-rm{opacity:1}
.c2-med-rm:hover{color:#ef5350;background:rgba(239,83,80,.1)}
.c2-med-empty{text-align:center;padding:20px 10px;color:var(--mt,#999);font-size:var(--t-mini);border:1px dashed rgba(255,255,255,.1);border-radius:8px;line-height:1.6;margin-top:6px}
.c2-med-empty b{display:block;color:var(--tx,#eee);font-size:var(--t-peq);margin-bottom:2px}

/* Linha de área total do painel de lançamento */
.c2-total-row{display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.05);border-radius:8px;padding:9px 13px;margin-top:9px;font-size:var(--t-peq);font-weight:700;color:var(--tx,#eee);letter-spacing:.2px}
.c2-total-val{color:var(--y,#FFD100);font-size:var(--t-base);font-weight:900}
.c2-panel-forro .c2-total-val{color:#64b5f6}

/* ══════ RELAÇÃO DE MATERIAIS UNIFICADA — estilo do modal de histórico ══════ */
.c2-panel-mat{padding-bottom:18px}
.cm-empty{text-align:center;padding:26px 10px;color:var(--mt,#999);font-size:var(--t-peq);border:1px dashed rgba(255,255,255,.1);border-radius:8px;line-height:1.7}
.cm-empty b{display:block;color:var(--tx,#eee);font-size:var(--t-peq);margin-bottom:2px}

.cm-table{width:100%;border-collapse:collapse}
.cm-table th{font-size:var(--t-micro);font-weight:800;color:var(--mt,#999);text-transform:uppercase;letter-spacing:1px;text-align:left;padding:8px 9px 7px;border-bottom:1px solid rgba(255,255,255,.08)}
.cm-table th.cm-th-r{text-align:right}
.cm-table td{padding:9px;border-bottom:1px solid rgba(255,255,255,.045);vertical-align:top}
.cm-table tr:last-child td{border-bottom:none}
.cm-row:hover td{background:rgba(255,255,255,.02)}

.cm-sec td{padding:14px 9px 6px;border-bottom:1px solid rgba(255,255,255,.07);font-size:var(--t-micro);font-weight:800;text-transform:uppercase;letter-spacing:1.1px}
.cm-sec-bar{display:inline-block;width:3px;height:9px;border-radius:2px;margin-right:7px;vertical-align:-1px}
.cm-sec-sub{font-weight:500;color:var(--mt,#999);letter-spacing:.4px;text-transform:none;font-size:var(--t-micro)}

.cm-nome{font-size:var(--t-peq);font-weight:700;color:var(--tx,#eee);letter-spacing:.1px}
.cm-dot{display:inline-block;width:5px;height:5px;border-radius:50%;margin-right:8px;vertical-align:2px;opacity:.85}
.cm-qtd{text-align:right;font-weight:900;color:var(--y,#FFD100);font-size:var(--t-base);white-space:nowrap}
.cm-un{text-align:right;color:var(--mt,#999);font-size:var(--t-mini);white-space:nowrap;padding-top:11px}
.cm-det{color:var(--mt,#999);font-size:var(--t-micro);line-height:1.45;padding-top:11px}

/* Barra de área total — igual ao rodapé do modal do histórico */
.cm-total-row{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.05);border-radius:8px;padding:11px 14px;margin-top:12px;font-size:var(--t-peq);font-weight:700;color:var(--tx,#eee)}
.cm-total-val{color:var(--y,#FFD100);font-size:var(--t-base);font-weight:900;letter-spacing:.2px}

/* Botões de ação do painel unificado */
.cm-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cm-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:var(--tx,#eee);font-size:var(--t-peq);font-weight:700;padding:9px 14px;cursor:pointer;transition:filter .15s,background .15s;letter-spacing:.2px}
.cm-btn:hover{filter:brightness(1.18)}
.cm-btn-pri{background:var(--y,#FFD100);border-color:var(--y,#FFD100);color:#1a1a1a}
.cm-btn-azul{background:rgba(30,136,229,.1);border-color:rgba(30,136,229,.35);color:#64b5f6}
.cm-btn-verde{background:rgba(67,160,71,.1);border-color:rgba(67,160,71,.4);color:var(--grn,#43a047)}
.cm-btn-amar{background:rgba(255,209,0,.07);border-color:rgba(255,209,0,.3);color:var(--y,#FFD100)}
.cm-btn-del{background:rgba(255,82,82,.1);border-color:rgba(255,82,82,.4);color:#ff5252}
@media (max-width:767px){.cm-btn{flex:1 1 calc(50% - 4px);justify-content:center}}

/* Nota técnica */
.c2-nota{font-size:var(--t-micro);color:var(--mt,#999);line-height:1.55;margin-top:11px;padding-top:9px;border-top:1px solid rgba(255,255,255,.05)}

/* ══════ HISTÓRICO DENTRO DA CALCULADORA ══════ */
.c2-panel-hist{margin-top:14px}
.c2-panel-hist::before{background:linear-gradient(90deg,#7b1fa2,rgba(123,31,162,.15))}
.ch-filtros{display:flex;gap:6px}
.ch-chip{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:20px;color:var(--mt,#999);font-size:var(--t-mini);font-weight:700;padding:4px 13px;cursor:pointer;transition:all .15s;letter-spacing:.3px}
.ch-chip:hover{color:var(--tx,#eee);border-color:rgba(255,255,255,.2)}
.ch-chip.on{background:rgba(30,136,229,.13);border-color:rgba(30,136,229,.5);color:#64b5f6}
#hist-lista table{width:100%;border-collapse:collapse}
#hist-lista th{font-size:var(--t-micro);font-weight:800;color:var(--mt,#999);text-transform:uppercase;letter-spacing:.9px;text-align:left;padding:8px 9px 7px;border-bottom:1px solid rgba(255,255,255,.08)}
#hist-lista td{font-size:var(--t-peq);color:var(--tx,#eee);padding:9px;border-bottom:1px solid rgba(255,255,255,.045);vertical-align:middle}
#hist-lista tr:last-child td{border-bottom:none}
#hist-lista tr:hover td{background:rgba(255,255,255,.02)}
@media (max-width:1023px){#hist-lista{overflow-x:auto}}

/* Input numérico nas configurações (espessura Basecoat) */
.c2-cfg-item input[type=number]{width:100%;background:var(--g1,#141414);border:1px solid rgba(255,255,255,.09);border-radius:6px;color:var(--tx,#eee);font-size:var(--t-med);padding:6px 8px;outline:none;box-sizing:border-box;font-weight:700}
.c2-cfg-item input[type=number]:focus{border-color:rgba(255,209,0,.5)}

/* Input numérico das configurações (espessura Basecoat) */
.c2-cfg-item input{width:100%;background:var(--g1,#141414);border:1px solid rgba(255,255,255,.09);border-radius:6px;color:var(--tx,#eee);font-size:var(--t-med);padding:6px 8px;outline:none;box-sizing:border-box}
.c2-cfg-item input:focus{border-color:rgba(255,209,0,.5)}

/* Badge do tipo de chapa nas medidas lançadas */
.c2-tag{display:inline-block;font-size:var(--t-micro);font-weight:800;letter-spacing:.6px;padding:2px 7px;border-radius:10px;border:1px solid rgba(255,255,255,.12);color:var(--mt,#999);background:rgba(255,255,255,.03)}
.c2-tag-st{color:#bdbdbd}
.c2-tag-ru{color:#4fc3f7;border-color:rgba(79,195,247,.35);background:rgba(79,195,247,.07)}
.c2-tag-rf{color:#ef9a9a;border-color:rgba(239,154,154,.35);background:rgba(239,154,154,.07)}
.c2-tag-glasroc{color:#aed581;border-color:rgba(174,213,129,.4);background:rgba(174,213,129,.08)}

/* ============================================================
   03-SHELL.CSS — BLOCO 2
   A ESTRUTURA DO APP: sidebar, barra superior, área de conteúdo.

   PROBLEMA QUE ESTE ARQUIVO RESOLVE
   A estrutura estava espalhada por 13 arquivos de remendo
   (v116, v117, v118, v119, v123, v124, v127, v215, v225, v229,
   v258, v261, v266) com 14 pontos de quebra diferentes:
   390, 400, 430, 480, 520, 560, 640, 700, 767, 768, 820, 900,
   1023, 1250 e 1281px. Cada arquivo tentava vencer o anterior
   com !important.

   AGORA SÃO 3 PONTOS DE QUEBRA. SÓ ESTES:
     até 767px   → celular
     768–1023px  → tablet
     1024px+     → computador

   Nenhum !important neste arquivo. Não precisa: nada disputa.
   ============================================================ */

/* ============================================================
   RESET E BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: var(--altura-tela);
  background: var(--jsl-fundo-0);
  color: var(--jsl-texto);
  font-family: var(--fonte);
  font-size: var(--t-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: none;   /* mata o "puxar para atualizar" acidental */
}

/* Realce de toque cinza do Android — some. É a marca de "isto é site". */
a, button, .btn, .ni, [onclick] {
  -webkit-tap-highlight-color: transparent;
}

/* Foco visível pelo teclado, invisível no clique de mouse.
   Acessibilidade sem poluir a interface. */
:focus-visible {
  outline: 2px solid var(--jsl-amarelo);
  outline-offset: 2px;
  border-radius: var(--r-pequeno);
}
:focus:not(:focus-visible) { outline: none; }

/* Barra de rolagem discreta, estilo app */
* { scrollbar-width: thin; scrollbar-color: var(--jsl-linha-forte) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--jsl-linha-forte);
  border-radius: var(--r-pilula);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar,
.sidebar.premium-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-largura);
  z-index: var(--z-sidebar);

  display: flex;
  flex-direction: column;

  background: var(--jsl-fundo-1);
  border-right: 1px solid var(--jsl-linha);

  padding-top: var(--seg-topo);
  padding-bottom: var(--seg-baixo);
  padding-left: var(--seg-esquerda);

  overflow-y: auto;
  overscroll-behavior: contain;
  transition: transform var(--v-media) var(--curva);
}

.premium-logo-area {
  display: flex;
  align-items: center;
  gap: var(--e3);
  padding: var(--e5) var(--e4);
  border-bottom: 1px solid var(--jsl-linha-fraca);
  cursor: pointer;
  min-height: var(--toque);
}

.premium-logo-jsl {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  background: var(--jsl-amarelo);
  color: var(--jsl-texto-sobre-amarelo);
  border-radius: var(--r-pequeno);
  font-family: var(--fonte-titulo);
  font-weight: var(--p-black);
  font-size: var(--t-med);
  /* V309: letter-spacing de -3/-4px sobrou de quando este selo
     tinha 43-47px de fonte (css/02-legado.css). Nesse tamanho de
     16px, aquele valor é enorme (quase -19% por letra) e empilhava
     J, S e L uma em cima da outra, virando um borrão ilegível. Este
     selo nunca precisou de aperto — a fonte condensada já é estreita. */
  letter-spacing: normal;
}

.premium-logo-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.premium-logo-text strong {
  font-family: var(--fonte-titulo);
  font-weight: var(--p-black);
  font-size: var(--t-med);
  letter-spacing: .4px;
  text-transform: uppercase;
}
.premium-logo-text span {
  font-size: var(--t-micro);
  color: var(--jsl-texto-medio);
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.nav, .premium-nav {
  flex: 1;
  padding: var(--e3) var(--e2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Rótulo de grupo do menu */
.ng {
  padding: var(--e4) var(--e3) var(--e2);
  font-size: var(--t-micro);
  font-weight: var(--p-bold);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--jsl-texto-fraco);
}

/* Item do menu */
.ni {
  display: flex;
  align-items: center;
  gap: var(--e3);
  min-height: var(--toque);
  padding: 0 var(--e3);

  border-radius: var(--r-pequeno);
  color: var(--jsl-texto-medio);
  font-size: var(--t-base);
  font-weight: var(--p-medio);

  cursor: pointer;
  user-select: none;
  transition: background var(--v-rapida) var(--curva),
              color var(--v-rapida) var(--curva);
}
.ni:hover { background: var(--jsl-fundo-3); color: var(--jsl-texto); }
.ni:active { background: var(--jsl-fundo-4); }

.ni.active {
  background: var(--jsl-amarelo-fraco);
  color: var(--jsl-amarelo);
  font-weight: var(--p-forte);
  box-shadow: inset 3px 0 0 var(--jsl-amarelo);
}

.ni-ic {
  width: 22px;
  flex: 0 0 22px;
  text-align: center;
  font-size: var(--t-med);
  opacity: .9;
}

/* Cartão do plano na sidebar */
.premium-plan-card {
  margin: var(--e3);
  padding: var(--e4);
  background: var(--jsl-fundo-2);
  border: 1px solid var(--jsl-amarelo-borda);
  border-radius: var(--r-medio);
}
.premium-plan-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  margin-bottom: var(--e2);
}
.premium-plan-card strong { font-size: var(--t-peq); font-weight: var(--p-bold); }
.premium-plan-card p {
  margin: 2px 0;
  font-size: var(--t-mini);
  color: var(--jsl-texto-medio);
}
.premium-plan-card button {
  width: 100%;
  min-height: var(--toque-minimo);
  margin-top: var(--e3);
  background: var(--jsl-amarelo);
  color: var(--jsl-texto-sobre-amarelo);
  border: 0;
  border-radius: var(--r-pequeno);
  font-family: var(--fonte);
  font-size: var(--t-peq);
  font-weight: var(--p-bold);
  cursor: pointer;
}

.premium-footer-brand {
  padding: var(--e4);
  font-size: var(--t-micro);
  color: var(--jsl-texto-fraco);
  text-align: center;
  line-height: var(--lh-normal);
}

/* Fundo escuro atrás da sidebar no celular */
.sidebar-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(0, 0, 0, .58);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--v-media) var(--curva),
              visibility var(--v-media) var(--curva);
}
.sidebar-overlay.show { opacity: 1; visibility: visible; }

/* ============================================================
   ÁREA PRINCIPAL
   ============================================================ */
.main {
  margin-left: var(--sidebar-largura);
  min-height: var(--altura-tela);
  display: flex;
  flex-direction: column;
  transition: margin-left var(--v-media) var(--curva);
}

.topbar, .premium-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);

  display: flex;
  align-items: center;
  gap: var(--e3);

  height: calc(var(--topbar-altura) + var(--seg-topo));
  padding: var(--seg-topo) var(--e5) 0;

  background: var(--premium-glass-strong);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--jsl-linha);
}

.premium-menu, .mob-menu-btn {
  display: none;   /* só aparece no celular/tablet */
  align-items: center;
  justify-content: center;
  width: var(--toque);
  height: var(--toque);
  background: transparent;
  border: 0;
  border-radius: var(--r-pequeno);
  color: var(--jsl-texto);
  font-size:var(--t-gr);
  cursor: pointer;
}
.premium-menu:active, .mob-menu-btn:active { background: var(--jsl-fundo-3); }

.premium-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex: 1;
  max-width: 460px;
  height: 40px;
  padding: 0 var(--e3);
  background: var(--jsl-fundo-2);
  border: 1px solid var(--jsl-linha);
  border-radius: var(--r-pilula);
}
.premium-search:focus-within { border-color: var(--jsl-amarelo-borda); }
.premium-search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: none;
  color: var(--jsl-texto);
  font-family: var(--fonte);
  font-size: var(--t-base);
}
.premium-search input::placeholder { color: var(--jsl-texto-fraco); }
.premium-search kbd {
  padding: 3px 7px;
  background: var(--jsl-fundo-3);
  border: 1px solid var(--jsl-linha);
  border-radius: var(--r-pequeno);
  font-family: var(--fonte);
  font-size: var(--t-micro);
  color: var(--jsl-texto-fraco);
}

.premium-search-results {
  position: absolute;
  top: calc(100% + var(--e2));
  left: 0;
  right: 0;
  z-index: var(--z-modal);
  display: none;
  flex-direction: column;
  padding: var(--e1);
  background: var(--jsl-fundo-2);
  border: 1px solid var(--jsl-linha);
  border-radius: var(--r-medio);
  box-shadow: var(--s-alta);
  max-height: 60vh;
  overflow-y: auto;
}
.premium-search-results.show { display: flex; }
.premium-search-results button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: var(--toque);
  padding: var(--e2) var(--e3);
  background: transparent;
  border: 0;
  border-radius: var(--r-pequeno);
  color: var(--jsl-texto);
  font-family: var(--fonte);
  text-align: left;
  cursor: pointer;
}
.premium-search-results button:hover { background: var(--jsl-fundo-3); }
.premium-search-results button span,
.psr-empty {
  font-size: var(--t-mini);
  color: var(--jsl-texto-medio);
}
.psr-empty { padding: var(--e3); }

.premium-top-spacer { flex: 1; }

.premium-ico {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--toque-minimo);
  height: var(--toque-minimo);
  background: transparent;
  border: 0;
  border-radius: var(--r-pilula);
  color: var(--jsl-texto-medio);
  font-size: var(--t-med);
  cursor: pointer;
}
.premium-ico:hover { background: var(--jsl-fundo-3); color: var(--jsl-texto); }

.premium-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: grid;
  place-items: center;
  background: var(--jsl-erro);
  color: #fff;
  border-radius: var(--r-pilula);
  font-size: var(--t-micro);
  font-weight: var(--p-bold);
}

.premium-user {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--toque-minimo);
  padding: 0 var(--e2);
  border-radius: var(--r-pilula);
  cursor: pointer;
}
.premium-user:hover { background: var(--jsl-fundo-3); }
.premium-user > div { display: flex; flex-direction: column; line-height: 1.2; }
.premium-user strong { font-size: var(--t-peq); font-weight: var(--p-forte); }
.premium-user span { font-size: var(--t-micro); color: var(--jsl-texto-medio); }

.premium-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  display: grid;
  place-items: center;
  background: var(--jsl-amarelo);
  color: var(--jsl-texto-sobre-amarelo);
  border-radius: var(--r-pilula);
  font-size: var(--t-peq);
  font-weight: var(--p-bold);
}

.premium-logout-top {
  min-height: var(--toque-minimo);
  padding: 0 var(--e4);
  background: transparent;
  border: 1px solid var(--jsl-linha);
  border-radius: var(--r-pequeno);
  color: var(--jsl-texto-medio);
  font-family: var(--fonte);
  font-size: var(--t-peq);
  font-weight: var(--p-forte);
  cursor: pointer;
}
.premium-logout-top:hover {
  border-color: var(--jsl-erro);
  color: var(--jsl-erro);
}

/* ============================================================
   CONTEÚDO E TROCA DE TELA
   ============================================================ */
.content {
  flex: 1;
  width: 100%;
  max-width: var(--conteudo-max);
  margin: 0 auto;
  padding: var(--e6);
  padding-left: max(var(--e6), var(--seg-esquerda));
  padding-right: max(var(--e6), var(--seg-direita));
}

.page { display: none; }
.page.active {
  display: block;
  animation: jslEntrar var(--v-media) var(--curva-saida);
}

@keyframes jslEntrar {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.premium-hidden-compat { display: none; }

/* ============================================================
   PONTO DE QUEBRA 1 — TABLET (768 a 1023px)
   ============================================================ */
@media (max-width:1023px) {

  .sidebar,
  .sidebar.premium-sidebar {
    transform: translateX(-100%);
    box-shadow: var(--s-alta);
  }
  .sidebar.open,
  .sidebar.premium-sidebar.open { transform: translateX(0); }

  .main { margin-left: 0; }

  .premium-menu, .mob-menu-btn { display: flex; }

  .premium-search kbd { display: none; }

  .content { padding: var(--e5); }

  /* Trava o fundo quando o menu está aberto — sem isso a página
     rola atrás do menu, defeito clássico de site no celular. */
  body.mobile-menu-open { overflow: hidden; }
}

/* ============================================================
   PONTO DE QUEBRA 2 — CELULAR (até 767px)
   ============================================================ */
@media (max-width:767px) {

  .topbar, .premium-topbar {
    height: calc(var(--topbar-altura-mob) + var(--seg-topo));
    padding-left: var(--e3);
    padding-right: var(--e3);
    gap: var(--e2);
  }

  /* No celular a busca vira só ícone até o usuário tocar.
     Espaço na barra é ouro. */
  .premium-search { max-width: none; height: 38px; }
  .premium-user > div { display: none; }
  .premium-logout-top { display: none; }  /* sai daqui, vive no menu */
  .premium-top-spacer { display: none; }

  .content {
    padding: var(--e4) var(--e3);
    /* Espaço para a barra inferior não cobrir o último item */
    padding-bottom: calc(var(--barra-inferior) + var(--seg-baixo) + var(--e6));
  }

  .sidebar, .sidebar.premium-sidebar { width: min(86vw, 320px); }
}

/* ============================================================
   PONTO DE QUEBRA 3 — COMPUTADOR (1024px+)
   Sidebar encolhível por clique no hambúrguer.
   ============================================================ */
@media (min-width:1024px) {

  body.sidebar-collapsed .sidebar,
  body.sidebar-collapsed .sidebar.premium-sidebar {
    width: var(--sidebar-encolhida);
  }
  body.sidebar-collapsed .main { margin-left: var(--sidebar-encolhida); }

  body.sidebar-collapsed .premium-logo-text,
  body.sidebar-collapsed .ng,
  body.sidebar-collapsed .premium-plan-card,
  body.sidebar-collapsed .premium-footer-brand { display: none; }

  body.sidebar-collapsed .ni { justify-content: center; padding: 0; }
  body.sidebar-collapsed .ni { font-size: 0; }
  body.sidebar-collapsed .ni-ic { font-size: var(--t-gr); }

  .premium-menu, .mob-menu-btn { display: flex; }
}

/* ============================================================
   04-COMPONENTES.CSS — BLOCO 2
   Os componentes que aparecem em TODAS as telas.

   Aqui moram: botões, cartões, formulários, modais, tabelas,
   etiquetas, KPIs, avisos, esqueleto de carregamento.

   Regra de ouro: todo alvo clicável tem no mínimo 48px de altura.
   É a diferença entre "consigo usar de pé no ônibus" e
   "preciso sentar e mirar".
   ============================================================ */

/* ============================================================
   BOTÕES
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e2);

  min-height: var(--toque);
  padding: 0 var(--e5);

  background: var(--jsl-fundo-3);
  color: var(--jsl-texto);
  border: 1px solid var(--jsl-linha);
  border-radius: var(--r-pequeno);

  font-family: var(--fonte);
  font-size: var(--t-base);
  font-weight: var(--p-forte);
  line-height: 1;
  white-space: nowrap;

  cursor: pointer;
  user-select: none;
  transition: transform var(--v-rapida) var(--curva),
              background var(--v-rapida) var(--curva),
              border-color var(--v-rapida) var(--curva),
              opacity var(--v-rapida) var(--curva);
}
.btn:hover { background: var(--jsl-fundo-4); border-color: var(--jsl-linha-forte); }

/* O "afunda ao tocar" é o detalhe que mais faz parecer app nativo. */
.btn:active { transform: scale(.97); }

.btn:disabled,
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* Amarelo — ação principal */
.btn.by {
  background: var(--jsl-amarelo);
  color: var(--jsl-texto-sobre-amarelo);
  border-color: var(--jsl-amarelo);
  box-shadow: var(--s-amarela);
}
.btn.by:hover { background: var(--jsl-amarelo-claro); border-color: var(--jsl-amarelo-claro); }

/* Vermelho — ação destrutiva */
.btn.br {
  background: transparent;
  color: var(--jsl-erro);
  border-color: rgba(240, 90, 87, .45);
}
.btn.br:hover { background: var(--jsl-erro-bg); border-color: var(--jsl-erro); }

/* Pequeno — dentro de tabelas e cartões */
.btn.bsm {
  min-height: 36px;
  padding: 0 var(--e3);
  font-size: var(--t-peq);
}

/* No celular, botão pequeno volta a ter tamanho de dedo. */
@media (max-width:767px) {
  .btn.bsm { min-height: var(--toque-minimo); padding: 0 var(--e4); }
}

.btn.wide, .btn.mb { width: 100%; }

.premium-link-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  min-height: var(--toque-minimo);
  padding: 0;
  background: none;
  border: 0;
  color: var(--jsl-amarelo);
  font-family: var(--fonte);
  font-size: var(--t-peq);
  font-weight: var(--p-forte);
  cursor: pointer;
}
.premium-link-btn:hover { text-decoration: underline; }

/* ============================================================
   CARTÕES E PAINÉIS
   ============================================================ */
.card,
.premium-panel {
  padding: var(--e5);
  background: var(--jsl-fundo-2);
  border: 1px solid var(--jsl-linha);
  border-radius: var(--r-medio);
}

/* Cabeçalho de seção dentro do cartão */
.sh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-bottom: var(--e4);
}

.st,
.premium-panel h2,
.premium-panel-head h2 {
  margin: 0;
  font-family: var(--fonte-titulo);
  font-size: var(--t-med);
  font-weight: var(--p-bold);
  letter-spacing: .3px;
  color: var(--jsl-texto);
}

.cl {
  font-size: var(--t-mini);
  font-weight: var(--p-forte);
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--jsl-texto-medio);
}

/* Divisor */
.dv {
  height: 1px;
  margin: var(--e4) 0;
  background: var(--jsl-linha-fraca);
  border: 0;
}

/* Grades */
.grid { display: grid; gap: var(--e3); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.premium-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e5);
}
.premium-main-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--e3);
  margin-bottom: var(--e5);
}
.premium-bottom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--e3);
}

/* ============================================================
   CARTÃO DE MÉTRICA (KPI)
   ============================================================ */
.mc,
.premium-metric-card {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  position: relative;
  padding: var(--e4);
  background: var(--jsl-fundo-2);
  border: 1px solid var(--jsl-linha);
  border-radius: var(--r-medio);
  overflow: hidden;
}
.mc.y, .premium-metric-card.y { border-color: var(--jsl-amarelo-borda); }

.mc-l, .premium-metric-card small {
  display: block;
  font-size: var(--t-mini);
  font-weight: var(--p-forte);
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--jsl-texto-medio);
}

.mc-v, .premium-metric-card strong {
  display: block;
  margin: var(--e1) 0 2px;
  font-family: var(--fonte-numero);
  font-size: var(--t-tit);
  font-weight: var(--p-bold);
  letter-spacing: -.4px;
  color: var(--jsl-texto);
  font-variant-numeric: tabular-nums;
}

.mc-s, .premium-metric-card p {
  margin: 0;
  font-size: var(--t-mini);
  color: var(--jsl-texto-medio);
}
.premium-metric-card p b.ok { color: var(--jsl-ok); }

.mc-ico, .pm-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  background: var(--jsl-amarelo-fraco);
  color: var(--jsl-amarelo);
  border-radius: var(--r-pequeno);
  font-size: var(--t-med);
}
.mc-ico { position: absolute; top: var(--e4); right: var(--e4); opacity: .35; background: none; }

/* Faixa de KPIs */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e3);
  padding: var(--e4);
  background: var(--jsl-fundo-2);
  border: 1px solid var(--jsl-linha);
  border-radius: var(--r-medio);
}
.kpi-item { display: flex; align-items: center; gap: var(--e2); min-width: 0; }
.kpi-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: var(--r-pilula); background: var(--jsl-amarelo); }
.kpi-data { min-width: 0; }
.kpi-lbl {
  font-size: var(--t-micro);
  font-weight: var(--p-forte);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--jsl-texto-medio);
}
.kpi-val {
  font-family: var(--fonte-numero);
  font-size: var(--t-med);
  font-weight: var(--p-bold);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   FORMULÁRIOS
   ============================================================ */
.fg { margin-bottom: var(--e4); }

.fl {
  display: block;
  margin-bottom: var(--e2);
  font-size: var(--t-mini);
  font-weight: var(--p-forte);
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--jsl-texto-medio);
}

.fc {
  width: 100%;
  min-height: var(--toque);
  padding: 0 var(--e3);

  background: var(--jsl-fundo-3);
  color: var(--jsl-texto);
  border: 1px solid var(--jsl-linha);
  border-radius: var(--r-pequeno);

  font-family: var(--fonte);
  /* 16px é obrigatório: abaixo disso o iPhone dá zoom sozinho ao
     tocar no campo, e o app inteiro "pula". Bug clássico de PWA. */
  font-size: var(--t-med);

  outline: none;
  transition: border-color var(--v-rapida) var(--curva),
              box-shadow var(--v-rapida) var(--curva);
}
.fc::placeholder { color: var(--jsl-texto-fraco); }
.fc:focus {
  border-color: var(--jsl-amarelo);
  box-shadow: 0 0 0 3px var(--jsl-amarelo-fraco);
}
.fc:disabled { opacity: .5; cursor: not-allowed; }

textarea.fc {
  min-height: 96px;
  padding: var(--e3);
  line-height: var(--lh-normal);
  resize: vertical;
}

select.fc {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--e8);
  background-image: linear-gradient(45deg, transparent 50%, var(--jsl-texto-medio) 50%),
                    linear-gradient(135deg, var(--jsl-texto-medio) 50%, transparent 50%);
  background-position: calc(100% - 18px) center, calc(100% - 13px) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Campo de data no iOS encolhe sozinho — forçamos altura consistente */
input[type="date"].fc,
input[type="time"].fc { min-height: var(--toque); }

.fr2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e3); }
.fr3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e3); }

/* ============================================================
   ETIQUETAS DE SITUAÇÃO
   ============================================================ */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 3px var(--e2);
  border-radius: var(--r-pilula);
  font-size: var(--t-micro);
  font-weight: var(--p-bold);
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--jsl-fundo-4);
  color: var(--jsl-texto-medio);
}
.tag.ty, .ty { background: var(--jsl-amarelo-fraco); color: var(--jsl-amarelo); }
.tag.tg, .tg { background: var(--jsl-ok-bg);      color: var(--jsl-ok); }
.tag.tr, .tr { background: var(--jsl-erro-bg);    color: var(--jsl-erro); }
.tag.tb, .tb { background: var(--jsl-info-bg);    color: var(--jsl-info); }
.tag.tm, .tm { background: var(--jsl-alerta-bg);  color: var(--jsl-alerta); }
.tag.tp, .tp { background: rgba(164, 107, 245, .14); color: var(--jsl-roxo); }

/* ============================================================
   TABELAS
   No computador continuam tabelas. No celular viram cartões
   (regra em 05-mobile-app.css).
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-peq);
}

thead th {
  padding: var(--e2) var(--e3);
  text-align: left;
  font-size: var(--t-micro);
  font-weight: var(--p-bold);
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--jsl-texto-medio);
  border-bottom: 1px solid var(--jsl-linha);
  white-space: nowrap;
}

tbody td {
  padding: var(--e3);
  border-bottom: 1px solid var(--jsl-linha-fraca);
  vertical-align: middle;
}

tbody tr { transition: background var(--v-rapida) var(--curva); }
tbody tr:hover { background: var(--jsl-fundo-3); }
tbody tr:last-child td { border-bottom: 0; }

/* Números alinham à direita e usam largura fixa por dígito —
   é o que faz coluna de dinheiro ficar reta como extrato de banco. */
td[data-tipo="valor"], th[data-tipo="valor"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   MODAIS
   No computador: caixa central. No celular: folha que sobe
   de baixo (regra em 05-mobile-app.css).
   ============================================================ */
.mo {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);

  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--e5);

  background: rgba(0, 0, 0, .66);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.mo.open { display: flex; animation: jslFade var(--v-media) var(--curva); }

@keyframes jslFade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: 100%;
  max-width: 520px;
  max-height: calc(var(--altura-tela) - var(--e12));

  padding: var(--e5);
  background: var(--jsl-fundo-2);
  border: 1px solid var(--jsl-linha);
  border-top: 3px solid var(--jsl-amarelo);
  border-radius: var(--r-grande);
  box-shadow: var(--s-alta);

  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  animation: jslSubir var(--v-media) var(--curva-saida);
}
.modal.wide { max-width: 860px; }

@keyframes jslSubir {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* Cabeçalho do modal */
.mh {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e4);
}

/* .mt2 é o TÍTULO do modal — não o corpo.
   (Eu tinha invertido isto com .mc2 na primeira versão do Bloco 2:
   o título virava área de rolagem e o botão de fechar virava uma
   caixa do tamanho do modal, esticada pela tela toda.) */
.mt2 {
  font-family: var(--fonte-titulo);
  font-size: var(--t-med);
  font-weight: var(--p-bold);
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--jsl-amarelo);
}

/* .mc2 é o BOTÃO DE FECHAR (o ✕), e só isso. */
.mc2 {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--toque-minimo);
  height: var(--toque-minimo);
  padding: 0;

  background: none;
  border: 0;
  border-radius: var(--r-pequeno);
  color: var(--jsl-texto-medio);
  font-family: var(--fonte);
  font-size: var(--t-gr);
  line-height: 1;
  cursor: pointer;
  transition: background var(--v-rapida) var(--curva),
              color var(--v-rapida) var(--curva);
}
.mc2:hover { background: var(--jsl-fundo-3); color: var(--jsl-texto); }

/* Corpo dos modais que eu criei no Bloco 4 (onboarding, exportação).
   Classe própria, para não colidir com as do sistema. */
.jsl-modal-corpo {
  margin-bottom: var(--e4);
}

/* Rodapé com os botões de ação */
.mf {
  display: flex;
  gap: var(--e2);
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--jsl-linha);
}

/* Trava o fundo enquanto o modal está aberto */
body.jsl-modal-open { overflow: hidden; }

/* ============================================================
   AVISO FLUTUANTE (TOAST)
   ============================================================ */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--barra-inferior) + var(--seg-baixo) + var(--e4));
  z-index: var(--z-toast);

  max-width: min(92vw, 440px);
  padding: var(--e3) var(--e5);

  background: var(--jsl-fundo-4);
  color: var(--jsl-texto);
  border: 1px solid var(--jsl-linha-forte);
  border-radius: var(--r-pilula);
  box-shadow: var(--s-alta);

  font-size: var(--t-base);
  font-weight: var(--p-medio);
  text-align: center;

  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  transition: opacity var(--v-media) var(--curva),
              transform var(--v-media) var(--curva-saida),
              visibility var(--v-media);
}
.toast.show { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.toast.ok  { border-color: var(--jsl-ok);   box-shadow: var(--s-alta), 0 0 0 1px var(--jsl-ok-bg); }
.toast.err { border-color: var(--jsl-erro); box-shadow: var(--s-alta), 0 0 0 1px var(--jsl-erro-bg); }

@media (min-width:1024px) {
  .toast { bottom: var(--e6); }
}

/* ============================================================
   ESQUELETO DE CARREGAMENTO
   Cinza pulsante no formato do conteúdo que vai chegar.
   É isto — e não o rodinha girando — que faz um app parecer
   rápido mesmo quando a internet está ruim.
   ============================================================ */
.jsl-skel {
  position: relative;
  overflow: hidden;
  background: var(--jsl-fundo-3);
  border-radius: var(--r-pequeno);
  pointer-events: none;
}
.jsl-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, .06),
    transparent);
  animation: jslBrilho 1.4s infinite;
}
@keyframes jslBrilho { to { transform: translateX(100%); } }

.jsl-skel-linha   { height: 13px; margin-bottom: var(--e2); }
.jsl-skel-linha:last-child { width: 62%; margin-bottom: 0; }
.jsl-skel-titulo  { height: 19px; width: 42%; margin-bottom: var(--e3); }
.jsl-skel-cartao  { height: 92px; margin-bottom: var(--e3); border-radius: var(--r-medio); }

/* ============================================================
   ESTADO VAZIO
   Tela vazia sem explicação é o que mais faz o cliente desistir
   no primeiro acesso.
   ============================================================ */
.jsl-vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  padding: var(--e10) var(--e5);
  text-align: center;
}
.jsl-vazio-ico { font-size:var(--t-marca-sm); opacity: .35; }
.jsl-vazio-tit { font-size: var(--t-med); font-weight: var(--p-forte); }
.jsl-vazio-sub {
  max-width: 320px;
  font-size: var(--t-peq);
  color: var(--jsl-texto-medio);
  line-height: var(--lh-normal);
}

/* ============================================================
   LISTAS DO PAINEL
   ============================================================ */
.premium-activity,
.premium-projects,
.premium-due-list {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  margin-bottom: var(--e3);
}
.premium-activity p,
.premium-projects p,
.premium-due-list p {
  margin: 0;
  padding: var(--e3) 0;
  font-size: var(--t-peq);
  color: var(--jsl-texto-medio);
}

/* ============================================================
   05-MOBILE-APP.CSS — BLOCO 2
   A CAMADA QUE FAZ PARECER APP DE BANCO.

   Quatro mudanças concretas, todas abaixo de 768px:

   1. BARRA INFERIOR FIXA (tab bar)
      Banco não usa menu hambúrguer. O polegar alcança a base da
      tela sem esticar; o canto superior esquerdo, não.

   2. TABELA VIRA CARTÃO
      Rolar tabela para o lado no celular é defeito de site. O
      extrato do banco é uma pilha de cartões. Aqui também.

   3. MODAL VIRA FOLHA QUE SOBE (bottom sheet)
      Com alça de arrastar. É o gesto que o usuário já conhece
      do Pix, do Uber, do WhatsApp.

   4. ALVO DE TOQUE DE 48px EM TUDO
   ============================================================ */

/* ============================================================
   1. BARRA INFERIOR DE NAVEGAÇÃO
   A marcação é criada pelo js/ui-mobile.js. Não é preciso
   editar o index.html.
   ============================================================ */
.jsl-barra-inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-barra-inf);

  display: none;             /* só existe no celular */
  align-items: stretch;

  height: calc(var(--barra-inferior) + var(--seg-baixo));
  padding-bottom: var(--seg-baixo);

  background: var(--premium-glass-strong);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-top: 1px solid var(--jsl-linha);
}

.jsl-bi-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;

  min-width: 0;
  padding: var(--e1) 2px;

  background: none;
  border: 0;
  color: var(--jsl-texto-fraco);
  font-family: var(--fonte);
  cursor: pointer;

  transition: color var(--v-rapida) var(--curva);
  -webkit-tap-highlight-color: transparent;
}

.jsl-bi-ico {
  font-size:var(--t-gr);
  line-height: 1;
  transition: transform var(--v-media) var(--curva-saida);
}

.jsl-bi-txt {
  font-size: var(--t-micro);
  font-weight: var(--p-forte);
  letter-spacing: .2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jsl-bi-item.ativo { color: var(--jsl-amarelo); }
.jsl-bi-item.ativo .jsl-bi-ico { transform: translateY(-2px) scale(1.12); }

/* Traço de seleção no topo do item ativo */
.jsl-bi-item.ativo::before {
  content: '';
  position: absolute;
  top: 0;
  width: 26px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--jsl-amarelo);
}
.jsl-bi-item { position: relative; }

.jsl-bi-item:active .jsl-bi-ico { transform: scale(.9); }

/* Bolinha de notificação */
.jsl-bi-ponto {
  position: absolute;
  top: 8px;
  right: 50%;
  margin-right: -16px;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pilula);
  background: var(--jsl-erro);
  border: 2px solid var(--jsl-fundo-1);
}

/* ============================================================
   REGRAS DO CELULAR — até 767px
   ============================================================ */
@media (max-width:767px) {

  .jsl-barra-inferior { display: flex; }

  /* O hambúrguer continua existindo, mas agora é o "Menu" da
     barra de baixo. O botão de cima some para não haver dois
     caminhos para a mesma coisa. */
  .mob-menu-btn { display: none; }

  /* ---------- GRADES VIRAM COLUNA ÚNICA ---------- */
  .g2, .g3, .g4,
  .fr2, .fr3,
  .premium-main-grid,
  .premium-metric-grid,
  .premium-bottom-grid,
  .orc-grid {
    grid-template-columns: 1fr;
  }

  /* Métricas em duas colunas: cabem e economizam rolagem. */
  .premium-metric-grid { grid-template-columns: 1fr 1fr; }
  .premium-metric-card { flex-direction: column; gap: var(--e2); }
  .premium-metric-card strong { font-size: var(--t-gr); }
  .premium-metric-card .pm-spark { display: none; }

  .kpi-strip { grid-template-columns: 1fr 1fr; }

  .card, .premium-panel { padding: var(--e4); border-radius: var(--r-medio); }

  .premium-welcome-row { display: block; }
  .premium-welcome-row h1 { font-size: var(--t-tit); margin: 0 0 var(--e1); }
  .premium-date-range { width: 100%; margin-top: var(--e3); min-height: var(--toque); }

  /* Barra de ações: botões lado a lado, sem quebrar feio */
  .sh { gap: var(--e2); }
  .sh > div:last-child { display: flex; gap: var(--e2); flex-wrap: wrap; }

  /* ============================================================
     2. TABELA VIRA CARTÃO
     O atributo data-label é colocado automaticamente pelo
     js/ui-mobile.js, lendo o cabeçalho da própria tabela.
     ============================================================ */
  table thead { display: none; }

  table,
  table tbody,
  table tr,
  table td {
    display: block;
    width: 100%;
  }

  table tr {
    margin-bottom: var(--e3);
    padding: var(--e3) var(--e4);
    background: var(--jsl-fundo-2);
    border: 1px solid var(--jsl-linha);
    border-radius: var(--r-medio);
  }
  table tr:hover { background: var(--jsl-fundo-2); }

  table td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--e3);

    padding: var(--e2) 0;
    border: 0;
    border-bottom: 1px solid var(--jsl-linha-fraca);

    font-size: var(--t-base);
    text-align: right;
  }
  table td:last-child { border-bottom: 0; padding-bottom: 0; }
  table td:first-child { padding-top: 0; }

  /* O nome da coluna aparece à esquerda, dentro do cartão */
  table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;

    font-size: var(--t-mini);
    font-weight: var(--p-forte);
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--jsl-texto-medio);
    text-align: left;
  }
  /* Célula sem rótulo (coluna de botões) ocupa a linha inteira */
  table td[data-label=""]::before,
  table td:not([data-label])::before { content: none; }

  table td[data-label=""],
  table td:not([data-label]) {
    justify-content: flex-end;
    gap: var(--e2);
    padding-top: var(--e3);
  }

  /* Some a rolagem lateral que existia para segurar a tabela */[style*="overflow-x:auto"],
.jsl-rolagem-lateral,
[style*="overflow-x: auto"],
.table-wrap{ overflow-x: visible !important; }

  /* ============================================================
     3. MODAL VIRA FOLHA QUE SOBE
     ============================================================ */
  .mo {
    align-items: flex-end;
    padding: 0;
  }

  .modal {
    max-width: none;
    max-height: 92dvh;
    padding: var(--e4);
    border-radius: var(--r-folha) var(--r-folha) 0 0;
    border-bottom: 0;
    box-shadow: var(--s-folha);
    animation: jslFolhaSobe var(--v-lenta) var(--curva-saida);
  }

  @keyframes jslFolhaSobe {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }

  /* Alça de arrastar — o sinal visual de "isto puxa" */
  .modal::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    margin: 0 auto var(--e3);
    border-radius: var(--r-pilula);
    background: var(--jsl-linha-forte);
  }

  /* Rodapé: botões grandes e empilhados, com a ação principal
     embaixo — mais perto do polegar. */
  .mf {
    flex-direction: column-reverse;
    gap: var(--e2);
    padding-bottom: max(0px, var(--seg-baixo));
  }
  .mf .btn { width: 100%; }

  /* ============================================================
     4. FORMULÁRIOS
     ============================================================ */
  .fg { margin-bottom: var(--e3); }
  .fc { min-height: var(--toque); font-size: var(--t-med); }

  /* Sidebar (agora acessada pelo "Menu" da barra inferior) */
  .sidebar, .sidebar.premium-sidebar {
    padding-bottom: calc(var(--barra-inferior) + var(--seg-baixo));
  }

  /* Rolagem com inércia, como app nativo */
  .content, .mt2 { -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   TELAS MUITO ESTREITAS — 360px e menos
   Ajuste de sobrevivência, não é um ponto de quebra novo.
   ============================================================ */
@media (max-width:767px) {
  .premium-metric-grid,
  .kpi-strip { grid-template-columns: 1fr; }
  .jsl-bi-txt { font-size:var(--t-micro); }
  .content { padding-left: var(--e2); padding-right: var(--e2); }
}

/* ============================================================
   TABLET — 768 a 1023px
   ============================================================ */
@media (min-width:768px) and (max-width:1023px) {
  .premium-main-grid { grid-template-columns: 1fr; }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .orc-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   MODO PWA INSTALADO
   Sem barra do navegador: a área segura passa a valer de verdade.
   ============================================================ */
@media (display-mode: standalone) {
  .topbar, .premium-topbar {
    padding-top: max(var(--seg-topo), var(--e2));
  }
}

/* ============================================================
   IMPRESSÃO / GERAÇÃO DE PDF
   Some tudo que é interface e sobra só o conteúdo.
   ============================================================ */
@media print {
  .sidebar, .topbar, .premium-topbar,
  .jsl-barra-inferior, .sidebar-overlay,
  .mob-menu-btn, .toast, .btn { display: none !important; }

  .main { margin-left: 0 !important; }
  .content { padding: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
  .card, .premium-panel { border: 1px solid #ccc !important; background: #fff !important; }
}

/* ============================================================
   06-TELAS.CSS — BLOCO 2
   Estilos específicos de tela, PORTADOS dos 13 arquivos de remendo
   que foram removidos.

   COMO ESTE ARQUIVO FOI FEITO
   Não escrevi de memória. Cruzei todos os seletores dos 13 arquivos
   removidos contra as classes realmente usadas no HTML e nos módulos
   JavaScript. Dos 270 seletores existentes, 119 não tinham
   substituto e, destes, 27 eram de fato usados pelo sistema.
   São esses 27 que estão aqui — reescritos sem !important.

   Os outros 92 eram código morto: estilos de telas que não existem
   mais (.onboarding-*, .trial-bar, .ls-*, .skeleton antigo). Foram
   descartados de propósito.
   ============================================================ */

/* ============================================================
   TELA DE PAGAMENTO / CHECKOUT
   Antes vivia em mobile-v266-payment-pdf-fix.css e premium-v229.css,
   com 129 !important brigando entre si.
   ============================================================ */
.ass-checkout-card {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: var(--e6) var(--e5);
  background: var(--jsl-fundo-2);
  border: 1px solid var(--jsl-linha);
  border-radius: var(--r-grande);
  overflow: visible;
}

.ass-checkout-logo {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--e4);
  background: var(--jsl-amarelo);
  color: var(--jsl-texto-sobre-amarelo);
  border-radius: var(--r-medio);
  font-family: var(--fonte-titulo);
  font-weight: var(--p-black);
  font-size: var(--t-gr);
}

.ass-checkout-title {
  margin: 0 0 var(--e2);
  font-family: var(--fonte-titulo);
  font-size: var(--t-tit);
  font-weight: var(--p-black);
  line-height: var(--lh-apertada);
  text-align: center;
}

.ass-checkout-subtitle {
  margin: 0 0 var(--e5);
  font-size: var(--t-peq);
  color: var(--jsl-texto-medio);
  text-align: center;
  line-height: var(--lh-normal);
}

/* Passo a passo do checkout — 3 colunas que nunca estouram */
.ass-checkout-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--e2);
  margin-bottom: var(--e5);
}
.ass-checkout-progress-item {
  min-width: 0;
  padding: var(--e2);
  border-radius: var(--r-pequeno);
  background: var(--jsl-fundo-3);
  font-size: var(--t-micro);
  font-weight: var(--p-forte);
  text-align: center;
  color: var(--jsl-texto-medio);
  overflow-wrap: anywhere;
}
.ass-checkout-progress-item.done,
.ass-checkout-progress-item.active {
  background: var(--jsl-amarelo-fraco);
  color: var(--jsl-amarelo);
}

.ass-checkout-summary {
  padding: var(--e4);
  margin-bottom: var(--e4);
  background: var(--jsl-fundo-3);
  border-radius: var(--r-medio);
  font-size: var(--t-peq);
}

.ass-checkout-note {
  margin-top: var(--e3);
  font-size: var(--t-mini);
  color: var(--jsl-texto-fraco);
  text-align: center;
  line-height: var(--lh-normal);
}

.ass-checkout-secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e1);
  margin-top: var(--e3);
  font-size: var(--t-mini);
  color: var(--jsl-ok);
}

.ass-checkout-actions {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  margin-top: var(--e4);
}

.ass-checkout-back,
.ass-checkout-exit {
  min-height: var(--toque);
  background: transparent;
  border: 1px solid var(--jsl-linha);
  border-radius: var(--r-pequeno);
  color: var(--jsl-texto-medio);
  font-family: var(--fonte);
  font-size: var(--t-peq);
  font-weight: var(--p-forte);
  cursor: pointer;
}
.ass-checkout-back:hover,
.ass-checkout-exit:hover { color: var(--jsl-texto); border-color: var(--jsl-linha-forte); }

.ass-checkout-spinner {
  width: 30px;
  height: 30px;
  margin: var(--e5) auto;
  border: 3px solid var(--jsl-linha);
  border-top-color: var(--jsl-amarelo);
  border-radius: var(--r-pilula);
  animation: jslGirar .8s linear infinite;
}
@keyframes jslGirar { to { transform: rotate(360deg); } }

.ass-checkout-error-icon {
  font-size:var(--t-marca-sm);
  text-align: center;
  color: var(--jsl-erro);
  margin-bottom: var(--e3);
}

/* ---------- Pix / Mercado Pago ---------- */
.ass-payment-methods {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e2);
  margin-bottom: var(--e4);
}
.ass-payment-method {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e1);
  min-height: 76px;
  padding: var(--e3);
  background: var(--jsl-fundo-3);
  border: 1px solid var(--jsl-linha);
  border-radius: var(--r-medio);
  font-size: var(--t-peq);
  font-weight: var(--p-forte);
  cursor: pointer;
  transition: border-color var(--v-rapida) var(--curva);
}
.ass-payment-method:hover,
.ass-payment-method.active { border-color: var(--jsl-amarelo); color: var(--jsl-amarelo); }

.ass-mp-card {
  padding: var(--e4);
  background: var(--jsl-fundo-3);
  border-radius: var(--r-medio);
  text-align: center;
}

/* QR do Pix: nunca estoura a tela, nem em celular pequeno */
.ass-mp-qr {
  display: block;
  width: min(220px, 72vw);
  max-width: 100%;
  height: auto;
  margin: 0 auto var(--e3);
  padding: var(--e2);
  background: #fff;
  border-radius: var(--r-pequeno);
}

/* Código copia-e-cola: quebra em qualquer ponto, nunca vaza */
.ass-mp-code {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: var(--e3);
  background: var(--jsl-fundo-0);
  border: 1px solid var(--jsl-linha);
  border-radius: var(--r-pequeno);

  font-family: ui-monospace, monospace;
  font-size: var(--t-mini);
  line-height: var(--lh-normal);
  color: var(--jsl-texto-medio);

  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-all;
  max-height: 116px;
  overflow-y: auto;
}

.ass-mp-pix { text-align: center; }
.ass-mp-expira {
  margin-top: var(--e2);
  font-size: var(--t-mini);
  font-weight: var(--p-bold);
  color: var(--jsl-alerta);
}

.ass-mp-actions {
  display: flex;
  flex-direction: column;
  gap: var(--e2);
  margin-top: var(--e3);
}
.ass-mp-btn,
.ass-mp-btn-copy,
.ass-mp-btn-check {
  min-height: var(--toque);
  border-radius: var(--r-pequeno);
  font-family: var(--fonte);
  font-size: var(--t-base);
  font-weight: var(--p-bold);
  cursor: pointer;
}
.ass-mp-btn,
.ass-mp-btn-copy {
  background: var(--jsl-amarelo);
  color: var(--jsl-texto-sobre-amarelo);
  border: 0;
}
.ass-mp-btn-check {
  background: transparent;
  color: var(--jsl-texto);
  border: 1px solid var(--jsl-linha);
}

.ass-card-intro,
.ass-card-result {
  margin: var(--e3) 0;
  font-size: var(--t-peq);
  color: var(--jsl-texto-medio);
  text-align: center;
}

@media (max-width:767px) {
  .ass-checkout-card { padding: var(--e5) var(--e4); border-radius: var(--r-medio); }
  .ass-checkout-title { font-size: var(--t-gr); }
  .ass-payment-methods { grid-template-columns: 1fr; }
}

/* ============================================================
   TELA DE COLABORADORES
   Antes: colaboradores-v119-cards.css, v123-preco-fix.css e
   v124-metragem-modal.css.

   O v123 tinha z-index:var(--z-local) e pointer-events: auto forçados porque
   alguma camada estava por cima do campo e impedia o toque. Com as
   camadas removidas e o z-index vindo dos tokens, o remendo deixou
   de ser necessário.
   ============================================================ */
.func-toolbar-v119 {
  position: relative;
  z-index: var(--z-base);
  margin-bottom: var(--e3);
}
.func-toolbar-v119 .sh {
  align-items: center;
  gap: var(--e3);
  margin-bottom: 0;
}

.func-lista-v119 {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin-bottom: var(--e3);
  background: transparent;
  border: 0;
  padding: 0;
}

/* Formulário de tipo de serviço (nome + preço + adicionar) */
.svc-form-v123 {
  display: grid;
  grid-template-columns: minmax(160px, 2fr) minmax(110px, 1fr) var(--toque);
  gap: var(--e2);
  align-items: center;
  margin-bottom: var(--e3);
}
.svc-form-v123 .fc { min-height: var(--toque); }
.svc-add-v123 {
  min-height: var(--toque);
  padding: 0;
  font-size: var(--t-gr);
  line-height: 1;
}

@media (max-width:767px) {
  /* No celular vira 2 linhas: campo largo em cima, preço e botão embaixo. */
  .svc-form-v123 {
    grid-template-columns: 1fr var(--toque);
    grid-template-areas:
      'nome  nome'
      'preco add';
  }
  .svc-nome-v123  { grid-area: nome; }
  .svc-preco-v123 { grid-area: preco; }
  .svc-add-v123   { grid-area: add; }
}

/* Modal de metragem */
.metragem-grid-v124 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--e3);
  margin-bottom: var(--e4);
}
@media (max-width:767px) {
  .metragem-grid-v124 { grid-template-columns: 1fr; }
}

.mm-total-v124 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--e3) var(--e4);
  background: var(--jsl-amarelo-fraco);
  border: 1px solid var(--jsl-amarelo-borda);
  border-radius: var(--r-pequeno);
  font-family: var(--fonte-numero);
  font-size: var(--t-med);
  font-weight: var(--p-bold);
  color: var(--jsl-amarelo);
  font-variant-numeric: tabular-nums;
}

.mm-edit-v124 {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-height: var(--toque-minimo);
}

/* ============================================================
   TABELA COMPACTA (.tbl-cards)
   Usada nos itens de orçamento.
   ============================================================ */
.tbl-cards th { font-size: var(--t-micro); padding: var(--e1) var(--e2); }
.tbl-cards td { font-size: var(--t-mini);  padding: var(--e2); }

@media (max-width:767px) {
  /* Herda a conversão para cartão de 05-mobile-app.css */
  .tbl-cards td { font-size: var(--t-base); padding: var(--e2) 0; }
}

/* ============================================================
   RODAPÉ LEGAL (LGPD, termos, privacidade)
   ============================================================ */
.jsl-legal-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e2) var(--e4);
  padding: var(--e5) var(--e4);
  padding-bottom: max(var(--e5), var(--seg-baixo));
  font-size: var(--t-mini);
  color: var(--jsl-texto-fraco);
  text-align: center;
}
.jsl-legal-footer a {
  color: var(--jsl-texto-medio);
  text-decoration: none;
  min-height: var(--toque-minimo);
  display: inline-flex;
  align-items: center;
}
.jsl-legal-footer a:hover { color: var(--jsl-amarelo); text-decoration: underline; }

@media (max-width:767px) {
  .jsl-legal-footer {
    padding-bottom: calc(var(--barra-inferior) + var(--seg-baixo) + var(--e4));
  }
}

/* ============================================================
   ESTADO CONCLUÍDO (.done) — usado em listas e progressos
   ============================================================ */
.done { color: var(--jsl-ok); }
.done .jsl-bi-ico,
.done::marker { color: var(--jsl-ok); }

/* ============================================================
   BLOCO 4 — VARIAÇÃO ENTRE PERÍODOS

   Antes o painel só sabia subir: "+ 12,5%" estava escrito à mão
   no HTML e nunca mudava. Agora o número é calculado, e por isso
   precisa saber mostrar queda também.

   Painel que nunca mostra queda é painel em que ninguém acredita.
   ============================================================ */
.pm-var {
  display: block;
  margin: 0;
  font-size: var(--t-mini);
  font-weight: var(--p-forte);
  line-height: var(--lh-normal);
}
.pm-var.sobe   { color: var(--jsl-ok); }
.pm-var.desce  { color: var(--jsl-erro); }
.pm-var.neutro { color: var(--jsl-texto-medio); font-weight: var(--p-normal); }

/* ============================================================
   BLOCO 4 — MARCA DE DADO DE EXEMPLO
   Deixa claro o que é demonstração, para o cliente nunca confundir
   exemplo com dado real dele.
   ============================================================ */
.jsl-marca-exemplo {
  display: inline-flex;
  align-items: center;
  gap: var(--e1);
  padding: 2px var(--e2);
  margin-left: var(--e2);
  background: var(--jsl-alerta-bg);
  color: var(--jsl-alerta);
  border-radius: var(--r-pilula);
  font-size: var(--t-micro);
  font-weight: var(--p-bold);
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* ============================================================
   07-RECUPERADAS.CSS — CORREÇÃO DO BLOCO 2

   ------------------------------------------------------------
   O QUE ACONTECEU

   Ao consolidar os 15 arquivos de CSS em 8, eu conferi quais
   seletores dos arquivos removidos ainda eram usados — e portei
   27 deles para o 06-telas.css.

   A conferência estava incompleta. Ela lia apenas os atributos
   class="..." escritos direto no HTML, e deixou de fora as
   classes montadas dentro do JavaScript e algumas escritas com
   aspas escapadas. Passaram 31 regras despercebidas.

   O sintoma foi a tela de login: os avatares empilharam na
   vertical, o texto do selo social colou tudo junto e os selos
   de segurança perderam o alinhamento. Todas eram regras de
   display:flex que sumiram junto com o premium-v229.css.

   Refiz a verificação comparando seletor por seletor entre o
   projeto antigo e o novo, agora incluindo o JavaScript e o
   bloco <style> do index.html. Estas são as 31.

   ------------------------------------------------------------
   TUDO AQUI VEIO DOS ARQUIVOS ORIGINAIS

   Nada foi redesenhado. As regras são as mesmas de antes,
   apenas reescritas com os tokens do 01-tokens.css e sem os
   !important, que não são mais necessários.

   Origem de cada grupo:
     premium-v229.css          → login, notificações, trial, upgrade
     dashboard-v116-fixes.css  → lista de atividades
     colaboradores-v119.css    → cartão do colaborador
     responsive-v215.css       → tabela do superadmin
     mobile-v225-panels.css    → selos do login no celular

   CARREGAR POR ÚLTIMO, depois do 06-telas.css.
   ============================================================ */

/* ============================================================
   TELA DE LOGIN — prova social e selos
   Era isto que estava quebrado na tela.
   ============================================================ */
.login-social-proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e2);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e3);
  background: var(--jsl-linha-fraca);
  border: 1px solid var(--jsl-linha);
  border-radius: var(--r-medio);
}

/* Os avatares sobrepostos. Sem o display:flex eles empilhavam
   um embaixo do outro — o "A R M +" na vertical. */
.login-social-proof .sp-avatars,
.sp-avatars {
  display: flex;
  margin-right: var(--e1);
}

.login-social-proof .sp-avatar,
.sp-avatar {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  margin-left: -6px;
  display: grid;
  place-items: center;

  background: linear-gradient(135deg, var(--jsl-amarelo), #B88900);
  border: 2px solid var(--jsl-fundo-1);
  border-radius: var(--r-pilula);

  font-size:var(--t-micro);
  font-weight: var(--p-black);
  color: var(--jsl-texto-sobre-amarelo);
}
.login-social-proof .sp-avatar:first-child,
.sp-avatars .sp-avatar:first-child { margin-left: 0; }

/* Sem isto o "+120 empresas usando" colava no texto seguinte. */
.login-social-proof .sp-text,
.sp-text {
  font-size: var(--t-mini);
  color: var(--jsl-texto-medio);
  line-height: 1.35;
}
.login-social-proof .sp-text strong,
.sp-text strong {
  display: block;
  font-size: var(--t-peq);
  color: var(--jsl-texto);
}

/* Selos de confiança: SSL, dados protegidos, cancele quando quiser */
.login-seals {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--e3);
  margin-top: var(--e3);
  padding-top: var(--e3);
  border-top: 1px solid var(--jsl-linha-fraca);
}
.login-seal {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-micro);
  font-weight: var(--p-forte);
  color: rgba(255, 255, 255, .42);
}
.login-seal svg { opacity: .5; }

.ls-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: var(--e3); }
.ls-badge  { font-size:var(--t-micro); padding: 4px var(--e2); }


/* ============================================================
   CONTAGEM DO TRIAL — no cartão de plano da sidebar
   ============================================================ */
#premium-plan-card .trial-countdown {
  display: flex;
  align-items: center;
  gap: var(--e2);
  margin: var(--e2) 0 var(--e1);
  padding: var(--e2) var(--e3);
  background: var(--jsl-amarelo-fraco);
  border: 1px solid var(--jsl-amarelo-borda);
  border-radius: var(--r-pequeno);
}
#premium-plan-card .trial-countdown .tc-days {
  font-family: var(--fonte-titulo);
  font-size:var(--t-tit);
  font-weight: 900;
  line-height: 1;
  color: var(--jsl-amarelo);
}
#premium-plan-card .trial-countdown .tc-label {
  font-size: var(--t-micro);
  line-height: 1.3;
  color: var(--jsl-texto-medio);
}
#premium-plan-card .trial-countdown.urgent {
  background: var(--jsl-erro-bg);
  border-color: rgba(240, 90, 87, .32);
}
#premium-plan-card .trial-countdown.urgent .tc-days { color: var(--jsl-erro); }

#premium-plan-card .trial-bar {
  height: 3px;
  margin-top: var(--e1);
  background: var(--jsl-linha);
  border-radius: 2px;
  overflow: hidden;
}
#premium-plan-card .trial-bar-fill {
  height: 100%;
  background: var(--jsl-amarelo);
  border-radius: 2px;
  transition: width .5s var(--curva);
}


/* ============================================================
   AVISO DE UPGRADE
   ============================================================ */
.upgrade-contextual {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e4);
  background: var(--jsl-amarelo-fraco);
  border: 1px solid var(--jsl-amarelo-borda);
  border-radius: var(--r-medio);
}
.upgrade-contextual .uc-icon { flex: 0 0 auto; font-size: var(--t-gr); }
.upgrade-contextual .uc-text {
  flex: 1;
  min-width: 0;
  font-size: var(--t-peq);
  line-height: var(--lh-normal);
  color: var(--jsl-texto-medio);
}
.upgrade-contextual .uc-text strong {
  display: block;
  margin-bottom: 2px;
  font-size: var(--t-base);
  color: var(--jsl-texto);
}
.upgrade-contextual .uc-btn {
  flex: 0 0 auto;
  min-height: var(--toque-minimo);
  padding: 0 var(--e4);
  background: var(--jsl-amarelo);
  color: var(--jsl-texto-sobre-amarelo);
  border: 0;
  border-radius: var(--r-pequeno);
  font-family: var(--fonte);
  font-size: var(--t-mini);
  font-weight: var(--p-black);
  white-space: nowrap;
  cursor: pointer;
}
@media (max-width:767px) {
  .upgrade-contextual .uc-btn { width: 100%; }
}


/* ============================================================
   NOTIFICAÇÕES
   ============================================================ */
.nt-item {
  display: flex;
  align-items: flex-start;
  gap: var(--e3);
  padding: var(--e3) 0;
  border-bottom: 1px solid var(--jsl-linha-fraca);
}
.nt-item:last-child { border-bottom: 0; }

.nt-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pequeno);
  font-size: var(--t-med);
  background: var(--jsl-fundo-3);
}
.nt-icon.nt-err  { background: var(--jsl-erro-bg);   border: 1px solid rgba(240, 90, 87, .22); }
.nt-icon.nt-warn { background: var(--jsl-alerta-bg); border: 1px solid rgba(255, 176, 32, .22); }
.nt-icon.nt-info { background: var(--jsl-info-bg);   border: 1px solid rgba(77, 163, 255, .22); }

.nt-title { margin-bottom: 2px; font-size: var(--t-base); font-weight: var(--p-bold); color: var(--jsl-texto); }
.nt-desc  { font-size: var(--t-mini); line-height: var(--lh-normal); color: var(--jsl-texto-medio); }
.nt-value { margin-top: 3px; font-size: var(--t-peq); font-weight: var(--p-bold); color: var(--jsl-amarelo); }


/* ============================================================
   PASSOS DE CONFIGURAÇÃO
   ============================================================ */
.onboarding-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--e3);
}
.onboarding-step {
  padding: var(--e4);
  background: var(--jsl-fundo-3);
  border: 1px solid var(--jsl-linha);
  border-radius: var(--r-medio);
  text-align: center;
  cursor: pointer;
  transition: transform var(--v-rapida) var(--curva),
              border-color var(--v-rapida) var(--curva);
}
.onboarding-step:hover {
  border-color: var(--jsl-amarelo-borda);
  transform: translateY(-2px);
}
.onboarding-step.done {
  opacity: .55;
  background: var(--jsl-ok-bg);
  border-color: rgba(61, 214, 140, .3);
}
.onboarding-step .step-icon { display: block; margin-bottom: var(--e2); font-size: var(--t-hero); }
.onboarding-step .step-label { font-size: var(--t-peq); font-weight: var(--p-bold); color: var(--jsl-texto); }
.onboarding-step.done .step-label::after { content: ' ✓'; color: var(--jsl-ok); }

.onboarding-close {
  position: absolute;
  top: var(--e3);
  right: var(--e3);
  width: var(--toque-minimo);
  height: var(--toque-minimo);
  background: none;
  border: 0;
  border-radius: var(--r-pequeno);
  color: var(--jsl-texto-medio);
  font-size: var(--t-gr);
  cursor: pointer;
}
.onboarding-close:hover { color: var(--jsl-texto); }


/* ============================================================
   LISTA DE ATIVIDADES DO PAINEL
   ============================================================ */
.ativ-v116-list {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  max-height: min(68vh, 620px);
  overflow: auto;
  padding-right: var(--e1);
}
.ativ-v116-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: var(--e3);
  min-width: 0;
  padding: var(--e3);
  background: var(--jsl-fundo-3);
  border: 1px solid var(--jsl-linha);
  border-radius: var(--r-medio);
}
.ativ-v116-ico {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--jsl-amarelo-fraco);
  border: 1px solid var(--jsl-amarelo-borda);
  border-radius: var(--r-pequeno);
  color: var(--jsl-amarelo);
  font-weight: 900;
}
.ativ-v116-item b {
  display: block;
  margin-bottom: 3px;
  font-size: var(--t-base);
  color: var(--jsl-texto);
  overflow: hidden;
  text-overflow: ellipsis;
}
.ativ-v116-item p {
  margin: 0;
  font-size: var(--t-peq);
  line-height: 1.35;
  color: var(--jsl-texto-medio);
  overflow: hidden;
  text-overflow: ellipsis;
}
.ativ-v116-item time {
  font-size: var(--t-peq);
  font-weight: var(--p-black);
  color: var(--jsl-amarelo);
  white-space: nowrap;
}
@media (max-width:767px) {
  .ativ-v116-item { grid-template-columns: 38px 1fr; }
  .ativ-v116-item time { grid-column: 2; }
}


/* ============================================================
   CARTÃO DO COLABORADOR
   ============================================================ */
#page-funcionarios .func-card-v119 {
  display: block;
  position: relative;
  margin: 0;
  padding: var(--e4);
  background: linear-gradient(135deg, var(--jsl-amarelo-fraco), var(--jsl-fundo-2));
  border: 1px solid var(--jsl-amarelo-borda);
  border-radius: var(--r-grande);
  box-shadow: var(--s-media);
  overflow: visible;
}
#page-funcionarios .func-card-v119 + .func-card-v119 { margin-top: var(--e3); }
#page-funcionarios .func-card-v119.selected {
  border-color: var(--jsl-amarelo);
  box-shadow: 0 0 0 1px var(--jsl-amarelo-borda), var(--s-alta);
}
#page-funcionarios .saldo-row-v119 {
  display: grid;
  grid-template-columns: 82px 1fr auto 34px;
  align-items: center;
  gap: var(--e2);
}
#page-funcionarios .saldo-row-v119 button { flex: 0 0 auto; }

@media (max-width:767px) {
  #page-funcionarios .func-card-v119 .func-header { gap: var(--e3); align-items: flex-start; }
  #page-funcionarios .func-card-v119 .func-body .func-nums { grid-template-columns: 1fr 1fr; }
  #page-funcionarios .func-card-v119 .func-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
  }
  #page-funcionarios .func-card-v119 .func-actions .btn { min-height: var(--toque-minimo); }
}


/* ============================================================
   TABELA DO SUPERADMIN — vira cartão no celular
   ============================================================ */
@media (max-width:767px) {
  #sa-lista .sa-table thead { display: none; }
  #sa-lista .sa-table,
  #sa-lista .sa-table tbody,
  #sa-lista .sa-table tr,
  #sa-lista .sa-table td { display: block; width: 100%; }

  #sa-lista .sa-table tr {
    margin: 0 0 var(--e3);
    padding: var(--e3);
    background: var(--jsl-fundo-2);
    border: 1px solid var(--jsl-linha);
    border-radius: var(--r-medio);
  }
  #sa-lista .sa-table td {
    border: 0;
    padding: 7px 0;
    white-space: normal;
  }
  #sa-lista .sa-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: var(--t-micro);
    font-weight: 900;
    letter-spacing: .55px;
    text-transform: uppercase;
    color: var(--jsl-texto-medio);
  }
  #sa-lista .sa-table td.sa-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    padding-top: var(--e3);
    border-top: 1px solid var(--jsl-linha-fraca);
  }
  #sa-lista .sa-table td.sa-actions .btn {
    width: 100%;
    min-height: var(--toque-minimo);
    justify-content: center;
    margin: 0;
  }
}


/* ============================================================
   CLASSES DE ESTADO — pequenas, mas nenhuma é cosmética
   Todas vinham dos arquivos removidos e têm função real.
   ============================================================ */

/* Esconde o item "Superadmin" do menu para quem é assinante.
   Não é decoração: sem isto, um cliente comum enxerga a entrada
   do painel de administração do SaaS.
   (Origem: responsive-v215-unified.css e production-v127.css) */
body.assinante-mode #ni-superadmin { display: none; }

/* Configurações > "Tela pública de entrada e ofertas": edita o texto
   de venda e os nomes/ofertas dos planos do SaaS inteiro, não da
   empresa do cliente. Sem isto, qualquer assinante via essa seção
   dentro da própria conta. Fica restrito ao painel do dono. */
body.assinante-mode .premium-superadmin-only { display: none; }

/* Trava a rolagem do fundo enquanto o painel de saldo do
   colaborador está aberto, e impede toque no menu atrás dele.
   Sem isto a página rola por baixo do painel no celular.
   (Origem: mobile-v266-payment-pdf-fix.css) */
body.saldo-colaborador-aberto { overflow: hidden; }
body.saldo-colaborador-aberto #sidebar,
body.saldo-colaborador-aberto #sidebar-overlay { pointer-events: none; }

/* Bloco extra da tela de login, que abre ao tocar em "saiba mais".
   Sem esta regra o conteúdo simplesmente não aparecia.
   (Origem: mobile-v225-panels.css) */
#login-marketing-extra.lm-open {
  display: block;
  max-height: none;
  animation: jslAbrirSuave var(--v-media) var(--curva);
}
@keyframes jslAbrirSuave {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Sino de notificações destacado quando há algo novo.
   (Origem: premium-v229.css) */
#btn-notifs.has-notif svg {
  stroke: var(--jsl-amarelo);
  animation: jslBrilhoSino 2s ease infinite;
}
@keyframes jslBrilhoSino {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}


/* ============================================================
   REGRAS QUE PRECISAM VENCER ESTILO INLINE
   ------------------------------------------------------------
   O index.html tem 586 atributos style="..." escritos direto na
   marcação. Estilo inline só perde para uma regra com !important
   — não existe outra forma.

   Na limpeza do Bloco 2 eu removi TODOS os !important do
   style.css de uma vez. Foi bom para 2.720 deles, que só existiam
   para vencer os arquivos de remendo. Mas levou junto 22 que eram
   indispensáveis, porque existiam para vencer o inline.

   O sintoma foi a tela de Colaboradores: o inline
   style="grid-template-columns:1fr 360px" voltou a valer no
   celular, e o painel lateral de 360px empurrou a tela para fora.

   Os 22 do style.css já foram devolvidos no 02-legado.css.
   As 26 abaixo vinham dos arquivos apagados. Todas estavam
   dentro de @media (max-width:767px) no original, e continuam
   restritas ao celular.
   ============================================================ */@media (max-width:767px){

  /* ---- Grades com colunas fixas no inline viram coluna única ----
     Esta é a que quebrou a tela de Colaboradores.
     (Origem: style.css, responsive-v215 e production-v127) */
  .grid[style*="grid-template-columns"],
  .mo [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* ---- Larguras mínimas fixas não podem estourar a tela ----
     (Origem: responsive-v215-unified.css) */[style*="min-width:120px"],
.jsl-larg-min-120,
[style*="min-width:130px"],
.jsl-larg-min-130,
[style*="min-width:140px"],
.jsl-larg-min-140,
[style*="min-width:150px"],
.jsl-larg-min-150,
[style*="min-width:220px"],
.jsl-larg-min-220,
[style*="min-width:240px"],
.jsl-larg-min-240{
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Rolagem com inércia onde havia overflow inline */[style*="overflow-x:auto"],
.jsl-rolagem-lateral,
[style*="overflow-x: auto"]{
    -webkit-overflow-scrolling: touch !important;
  }

  /* Painel do colaborador: caixa flex inline não pode travar */#colab-screen [style*="display:flex"],
#colab-screen .jsl-linha-flex{ min-width: 0 !important; }

  /* Classes antigas apontam apenas para degraus oficiais. */
  .jsl-num-46,.jsl-num-44{font-size:var(--t-marca-md)!important;}
  .jsl-num-42,.jsl-num-36,.jsl-num-34{font-size:var(--t-marca-sm)!important;}
  .jsl-num-30,.jsl-num-28{font-size:var(--t-hero)!important;}
  .jsl-num-26,.jsl-num-24,.jsl-num-22{font-size:var(--t-tit)!important;}
  .jsl-num-20,.jsl-num-18{font-size:var(--t-gr)!important;}

  /* ---- Modal de conteúdo e checkout ---- */
#mod-conteudo div.jsl-texto-corrido{font-size:var(--t-peq)!important;line-height:1.5!important;}
#mod-conteudo div.jsl-barra-destaque{padding:10px!important;}
#mod-conteudo .jsl-num-18{font-size:var(--t-gr)!important;}
#mod-conteudo div[style*="height:10px"],
#mod-conteudo div.jsl-barra-fina{ height: 7px !important; }#mod-conteudo div[style*="border-radius:8px"][style*="padding:10px"],
#mod-conteudo div.jsl-caixa-folga{ padding: 8px 10px !important; }#ass-step-plano > div[style*="flex-direction:column"],
#ass-step-plano > div.jsl-coluna{ gap: 6px !important; margin-bottom: 10px !important; }#ass-step-plano > div[style*="text-align:center;margin-top:12px"],
#ass-step-plano > div.jsl-rodape-centro{ margin-top: 8px !important; gap: 10px !important; }#login-box-dono > div[style*="justify-content:space-between"],
#login-box-dono > div.jsl-linha-extremos{ margin-top: 8px !important; }#login-box-dono > div[style*="justify-content:space-between"] button,
#login-box-dono > div.jsl-linha-extremos button{
    font-size:var(--t-mini) !important;
    padding: 5px 4px !important;
    min-height: 32px !important;
  }

  /* Destaque de valores no financeiro (origem: dashboard-v118-final.css) */#page-financeiro td[style*="color"],
#page-financeiro td.jsl-valor-colorido,
#page-financeiro .mc-v{ font-weight: 900 !important; }
}


/* ============================================================
   CORREÇÕES V274 — defeitos vistos em uso real
   ============================================================ */

/* ------------------------------------------------------------
   1. PAINEL DO COLABORADOR CORTADO NO CELULAR

   O index.html tem, escrito direto na tag:
       <div class="grid" style="grid-template-columns:1fr 360px">

   Estilo inline vence qualquer regra de arquivo CSS. Resultado:
   no celular a coluna de 360px continuava existindo, empurrada
   para fora da tela — o painel abria e ficava cortado na lateral,
   sem dar para lançar diária, vale nem metragem.

   Este é um dos poucos casos em que !important é a ferramenta
   certa: só ele vence estilo inline. A alternativa seria editar
   o HTML, o que mexeria na estrutura da tela.
   ------------------------------------------------------------ */
@media (max-width:1023px) {
  #page-funcionarios > .grid {
    grid-template-columns: 1fr !important;
    gap: var(--e3) !important;
  }
}

@media (max-width:767px) {
  /* O painel do colaborador selecionado passa a ocupar a largura
     toda, abaixo da lista, em vez de virar uma coluna lateral. */
  #func-panel-wrap {
    width: 100%;
    min-width: 0;
  }
  #func-panel-wrap .card,
  #func-panel-wrap .func-panel {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
  }
  /* O calendário de diárias precisa caber sem cortar os dias. */
  #func-panel-wrap table { min-width: 0; }
}

/* ------------------------------------------------------------
   2. BOTÃO DE PAGAMENTO APAGADO

   A faixa de "assinatura vencida" apaga os botões amarelos para
   o usuário perceber que está em modo somente leitura. Só que a
   tela de pagamento TAMBÉM ficava apagada — justamente a única
   tela onde ele precisa conseguir clicar.

   Era um defeito que custava dinheiro: o cliente chegava na tela
   de assinar e o botão parecia desativado.
   ------------------------------------------------------------ */
body.jsl-somente-leitura #page-assinatura .btn,
body.jsl-somente-leitura #page-planos .btn,
body.jsl-somente-leitura .ass-checkout-card .btn,
body.jsl-somente-leitura .ass-checkout-card button,
body.jsl-somente-leitura .ass-mp-btn,
body.jsl-somente-leitura .ass-mp-btn-copy,
body.jsl-somente-leitura .ass-mp-btn-check,
body.jsl-somente-leitura .ass-payment-method,
body.jsl-somente-leitura [id*="assinar"],
body.jsl-somente-leitura [class*="assinar"],
body.jsl-somente-leitura [class*="plano"] .btn {
  opacity: 1 !important;
  filter: none !important;
}

/* ------------------------------------------------------------
   3. SELOS DOS PLANOS CORTADOS ("MAIS VENDIDO", "EQUIPE")

   Esses selos ficam posicionados um pouco acima da borda do
   cartão. Quando o cartão tem overflow escondido, metade do selo
   some — foi o que apareceu na tela de planos.
   ------------------------------------------------------------ */
[class*="plano"],
[class*="plan-"],
[id*="plano"] > div,
.ass-checkout-card {
  overflow: visible;
}

/* Dá respiro no topo da lista de planos para o selo caber inteiro */
[id*="planos"] > div,
[class*="planos-"] {
  padding-top: var(--e2);
}


/* ------------------------------------------------------------
   4. MENU LATERAL ABERTO NO CELULAR

   Quando a sidebar está aberta, a barra inferior fica parcialmente
   visível na faixa que sobra à direita. Tocar num item dela trocava
   a tela por trás e deixava o menu aberto.

   A correção principal está no js/ui-mobile.js (a barra passou a
   fechar o menu antes de navegar). Aqui só garantimos que a barra
   inferior não fique por cima do menu nem receba toque enquanto
   ele estiver aberto — evitando o toque acidental.
   ------------------------------------------------------------ */
@media (max-width:767px) {
  body.mobile-menu-open .jsl-barra-inferior {
    pointer-events: none;
    opacity: .35;
    transition: opacity var(--v-media) var(--curva);
  }
  /* A sidebar cobre a barra inferior enquanto está aberta */
  body.mobile-menu-open .sidebar { z-index: var(--z-sidebar); }
}


/* ------------------------------------------------------------
   5. CARDS SE SOBREPONDO NO CELULAR

   O 02-legado.css tem alturas FIXAS nos painéis de gráfico:

       .premium-chart-panel { height: 270px }
       .premium-donut-panel { height: 270px }
       .premium-donut-wrap  { grid-template-columns: 250px 1fr;
                              height: 215px }
       .premium-activity    { min-height: 240px }

   No computador cabe. No celular, a rosca vira coluna única e a
   legenda cresce — mas o painel continua preso em 270px. O que
   sobra vaza para fora e o card seguinte é desenhado por cima.
   Foi isso que apareceu na tela: "Em aberto 4 (57%)" cortado
   pelo card de Atividades Recentes.

   A correção é deixar os painéis crescerem com o conteúdo.
   ------------------------------------------------------------ */
@media (max-width:1023px) {
  .premium-chart-panel,
  .premium-donut-panel,
  .premium-panel {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  /* Rosca e legenda empilhadas, cada uma com o espaço que precisa */
  .premium-donut-wrap {
    grid-template-columns: 1fr;
    height: auto;
    gap: var(--e4);
    justify-items: center;
  }
  .premium-donut { margin-left: 0; }

  .premium-legend { width: 100%; }
  .premium-legend p { margin: 0 0 var(--e3); }

  .premium-activity,
  .premium-projects,
  .premium-due-list {
    min-height: 0;
    margin-top: var(--e3);
  }

  /* A lista de atividades rola dentro do próprio card,
     em vez de esticar o card para fora da tela. */
  .ativ-v116-list { max-height: none; overflow: visible; }
}

@media (max-width:767px) {
  /* Gráfico de barras precisa de altura menor para caber */
  .premium-bar-chart {
    grid-template-columns: 42px 1fr;
    height: 180px;
    gap: var(--e2);
  }
  .premium-bar-chart .bars { gap: var(--e2); padding: 0 var(--e1); }
  .premium-bar-chart .bars i { width: 100%; max-width: 34px; }

  .premium-donut { width: 160px; height: 160px; }
  .premium-donut::after { width: 96px; height: 96px; }

  /* Nenhum painel pode passar da largura da tela */
  .premium-panel,
  .card,
  .kpi-strip { max-width: 100%; overflow-x: hidden; }
}


/* ------------------------------------------------------------
   6. "SAIR" NO MENU LATERAL (celular)
   Item acrescentado pelo js/ui-mobile.js. Em vermelho discreto,
   porque é ação de saída — o usuário não pode clicar por engano
   achando que é mais uma tela.
   ------------------------------------------------------------ */
.ni.jsl-ni-sair { color: var(--jsl-erro); font-weight: var(--p-forte); }
.ni.jsl-ni-sair:hover { background: var(--jsl-erro-bg); color: var(--jsl-erro); }
.ni.jsl-ni-sair .ni-ic { opacity: .85; }

/* No computador o botão "Sair" da barra de cima continua existindo,
   então o item do menu vira redundante e sai. */
@media (min-width:1024px) {
  #jsl-ni-sair, #jsl-ng-conta { display: none; }
}


/* ------------------------------------------------------------
   7. BARRA INFERIOR GRUDADA NO RODAPÉ

   Duas coisas aqui:

   a) O espaço preto abaixo dos ícones NÃO é erro: é a área da
      barra de gestos do celular (env(safe-area-inset-bottom)).
      Sem reservar esse espaço, a barra de gestos do sistema fica
      por cima do botão "Menu" e o toque não funciona.
      Reduzi um pouco a reserva para o vão ficar menos aparente,
      mantendo folga suficiente para o dedo.

   b) translateZ(0) fixa a barra na camada do compositor. Sem
      isso alguns navegadores Android fazem a barra "flutuar"
      durante a rolagem, em vez de ficar parada no rodapé.
   ------------------------------------------------------------ */
.jsl-barra-inferior {
  bottom: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
  padding-bottom: max(calc(var(--seg-baixo) - 6px), 0px);
  height: calc(var(--barra-inferior) + max(calc(var(--seg-baixo) - 6px), 0px));
}

/* O conteúdo respeita a altura real da barra, sem sumir atrás dela */
@media (max-width:767px) {
  .content {
    padding-bottom: calc(var(--barra-inferior) + var(--seg-baixo) + var(--e8));
  }
}


/* ------------------------------------------------------------
   8. PIX DIRETO — destaque dos métodos

   Com o Pix já carregado ao entrar, os dois botões mudam de papel:
   o Pix passa a ser o estado atual (não uma escolha a fazer) e o
   cartão vira a alternativa. O visual acompanha isso.
   ------------------------------------------------------------ */
.ass-payment-method.active {
  border-color: var(--jsl-amarelo);
  background: var(--jsl-amarelo-fraco);
  color: var(--jsl-amarelo);
}
.ass-payment-method:not(.active) {
  border-style: dashed;
  color: var(--jsl-texto-medio);
}
.ass-payment-method:not(.active):hover {
  border-style: solid;
  border-color: var(--jsl-amarelo-borda);
  color: var(--jsl-texto);
}


/* ------------------------------------------------------------
   9. ESPERA DO PIX — percepção de velocidade

   Mesmo com o backend otimizado, a chamada ao Mercado Pago leva
   algum tempo. O que muda a sensação não é só o tempo real: é o
   usuário ver o formato do que está chegando.

   Rodinha girando parece travado. Um retângulo no lugar exato do
   QR, pulsando, parece que está quase pronto — é o que app de
   banco faz enquanto carrega o extrato.
   ------------------------------------------------------------ */
.ass-mp-pix-carregando {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  padding: var(--e4) 0;
}

/* Placeholder no tamanho exato do QR, para nada "pular" quando
   a imagem real chegar. */
.ass-mp-pix-carregando .qr-fantasma {
  width: min(220px, 72vw);
  aspect-ratio: 1;
  border-radius: var(--r-pequeno);
  background: var(--jsl-fundo-3);
  position: relative;
  overflow: hidden;
}
.ass-mp-pix-carregando .qr-fantasma::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  animation: jslBrilho 1.3s infinite;
}

.ass-mp-pix-carregando .linha-fantasma {
  width: 82%;
  height: 11px;
  border-radius: var(--r-pequeno);
  background: var(--jsl-fundo-3);
}

.ass-mp-pix-carregando .aviso {
  font-size: var(--t-mini);
  color: var(--jsl-texto-medio);
  text-align: center;
}


/* ------------------------------------------------------------
   10. TELAS QUE CORTAVAM NO TOPO (login e pagamento)

   CAUSA — o bug clássico de centralização com flex:

       #login-screen { display:flex; align-items:center; }

   Quando o conteúdo é MAIS ALTO que a tela, align-items:center
   empurra o excedente para CIMA da borda superior. E aí não dá
   nem para rolar até lá: a área acima do início do scroll é
   inalcançável. Some o topo do cartão e ninguém entende por quê.

   Acontecia no celular (tela baixa) e no computador com a janela
   reduzida ou com zoom — que foi o seu caso.

   CORREÇÃO — o padrão que resolve isso sem perder a centralização:
   ancorar no topo com align-items:flex-start e centralizar o
   filho com margin:auto. Quando cabe, fica centralizado. Quando
   não cabe, ancora no topo e rola normalmente.
   ------------------------------------------------------------ */
#login-screen {
  display: flex;
  align-items: flex-start;
  justify-content: center;

  overflow-y: auto;
  overscroll-behavior: contain;

  padding-top: max(var(--e5), var(--seg-topo));
  padding-bottom: max(var(--e5), var(--seg-baixo));
  padding-left: max(var(--e4), var(--seg-esquerda));
  padding-right: max(var(--e4), var(--seg-direita));
}
#login-screen > * {
  margin: auto;          /* centraliza só quando há espaço sobrando */
  flex: 0 0 auto;
  max-width: 100%;
}

/* O wrap interno não pode forçar altura de tela cheia: somado ao
   padding do pai, criava rolagem a mais e reintroduzia o corte. */
.lgb-wrap {
  min-height: 0;
  justify-content: flex-start;
  padding-top: 0;
  padding-bottom: 0;
}

/* ---- Tela de pagamento / Pix: mesmo problema ---- */
#page-assinatura,
#page-pagamento,
.ass-checkout-tela {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: var(--altura-tela);
  overflow-y: auto;
  padding-top: max(var(--e5), var(--seg-topo));
  padding-bottom: max(var(--e6), var(--seg-baixo));
}
#page-assinatura > *,
#page-pagamento > *,
.ass-checkout-tela > * { margin: auto; flex: 0 0 auto; max-width: 100%; }

/* O QR e o código Pix nunca podem estourar a largura da tela */
.ass-checkout-card { max-width: min(460px, 100%); }

@media (max-width:767px) {
  /* Sem a barra inferior atrapalhando: nestas telas ela não existe */
  #login-screen, #page-assinatura, #page-pagamento {
    padding-bottom: max(var(--e6), var(--seg-baixo));
  }
}

/* ------------------------------------------------------------
   11. SELO DA MARCA NO LOGIN
   Agora o selo é o SVG. Removemos o fundo e o texto que existiam
   para a versão em letra, senão ficaria amarelo sobre amarelo.
   ------------------------------------------------------------ */
.lgb-badge {
  width: 56px;
  height: 56px;
  padding: 0;
  background: none;
  border-radius: 0;
  overflow: visible;
  font-size: 0;            /* mata qualquer texto remanescente */
  filter: drop-shadow(0 6px 18px rgba(255, 209, 0, .28));
}
.lgb-badge img {
  display: block;
  width: 100%;
  height: 100%;
}


/* ------------------------------------------------------------
   12. LOGIN COMPACTO

   O PROBLEMA
   No Bloco 2 apliquei alvo de toque de 48px e fonte de 16px em
   tudo — correto para o celular, onde o dedo precisa de área. No
   computador isso inchou a tela de login, que já empilha 13
   blocos (selo, título, slogan, prova social, título do painel,
   subtítulo, 2 campos com rótulo, botão, links, criar conta,
   selos, rodapé). Somado, não cabia mais na janela.

   A CORREÇÃO
   Escala compacta a partir de 768px, onde existe mouse e o alvo
   de 48px deixa de ser necessário. E uma compressão extra quando
   a janela é baixa (notebook, zoom aumentado, tela 768p).

   O celular fica intocado: lá o toque continua mandando.
   ------------------------------------------------------------ */

/* ---------- Computador e tablet: escala compacta ---------- */
@media (min-width:768px) {
  .lgb-wrap  { padding: 16px 20px; }
  .lgb-card  { max-width: 348px; gap: 12px; }

  .lgb-logo-row { gap: 7px; margin-bottom: 0; }
  .lgb-badge { width: 46px; height: 46px; }
  .lgb-nome  { font-size:var(--t-gr); }
  .lgb-slogan{ font-size:var(--t-mini); }

  .lgb-panel { padding: 18px 18px; border-radius: 12px; }
  .lgb-titulo{ font-size:var(--t-base); }
  .lgb-sub   { font-size:var(--t-mini); margin-bottom: 12px; }

  .lgb-label { font-size:var(--t-micro); margin-bottom: 4px; }
  .lgb-input { padding: 10px 13px; font-size:var(--t-base); border-radius: 7px; }
  .lgb-btn-entrar { padding: 11px; font-size:var(--t-base); }

  .lgb-links { margin-top: 10px; }
  .lgb-link  { font-size:var(--t-mini); min-height: 28px; padding: 4px 2px; }

  .lgb-criar-conta { margin-top: 2px; }
  .lgb-criar-conta-txt { font-size:var(--t-mini); margin-bottom: 6px; }
  .lgb-criar-conta-btn { padding: 9px; font-size:var(--t-peq); }

  .login-social-proof { padding: 9px 12px; margin-bottom: 0; gap: var(--e2); }
  .login-social-proof .sp-avatar { width: 21px; height: 21px; flex-basis: 21px; }
  .login-social-proof .sp-text strong { font-size:var(--t-mini); }
  .login-social-proof .sp-text { font-size:var(--t-micro); }

  .login-seals { gap: var(--e3); margin-top: var(--e2); padding-top: var(--e2); }
  .login-seal  { font-size:var(--t-micro); }

  .lgb-footer { margin-top: 12px; font-size:var(--t-micro); }
}

/* ---------- Janela baixa: comprime mais ----------
   Notebook de 768p, navegador com barra de favoritos, ou zoom
   aumentado. É o caso em que a tela mais estourava. */
@media (min-width:768px) and (max-height: 860px) {
  .lgb-wrap  { padding: 10px 20px; }
  .lgb-card  { gap: 9px; }
  .lgb-badge { width: 40px; height: 40px; }
  .lgb-nome  { font-size:var(--t-med); }
  .lgb-panel { padding: 15px 16px; }
  .lgb-sub   { margin-bottom: 10px; }
  .lgb-input { padding: 9px 12px; }
  .lgb-btn-entrar { padding: 10px; }
  .lgb-footer { margin-top: 9px; }

  /* Em janela baixa, o slogan repete o que o título já diz.
     É o primeiro a sair quando falta espaço. */
  .lgb-slogan { display: none; }
}

/* ---------- Janela muito baixa: só o essencial ---------- */
@media (min-width:768px) and (max-height: 700px) {
  .login-social-proof { display: none; }
  .login-seals { display: none; }
  .lgb-card { gap: 7px; }
  .lgb-panel { padding: 13px 15px; }
}

/* ---------- Celular: mantém o toque, mas sem desperdício ---------- */
@media (max-width:767px) {
  .lgb-wrap { padding: 14px 16px; }
  .lgb-card { gap: 13px; }
  .lgb-footer { margin-top: 14px; }
}


/* ============================================================
   13. BARRA INFERIOR "SUBINDO" — a causa era outra

   O SINTOMA que você viu: a barra de baixo acompanhava a rolagem
   em vez de ficar grudada no rodapé.

   O DIAGNÓSTICO
   Não era a barra. Repare que, na mesma tela, o relógio do celular
   ficava POR CIMA do título e o texto sumia à direita ("Nenhum
   ambi...", "Informe largura e comprim..."). Três sintomas, uma
   causa: a página estava mais LARGA que a tela.

   Quando isso acontece, o navegador expande a área de layout para
   caber o conteúdo. E position:fixed se ancora nessa área
   expandida, não na tela — por isso a barra aparecia no meio,
   com conteúdo embaixo dela.

   A ORIGEM DO TRANSBORDO
   As tabelas da calculadora têm 6 colunas, e algumas células usam
   white-space:nowrap. Célula que não quebra linha não encolhe:
   a tabela empurra a largura da página inteira.

   Aqui tratamos a causa (deixar tudo caber) e também blindamos a
   raiz do documento, para que nenhum elemento futuro consiga
   esticar a página de novo.
   ============================================================ */

/* ---------- Blindagem da raiz ----------
   overflow-x: clip, e não hidden, de propósito: 'hidden' cria um
   contêiner de rolagem e pode quebrar position:fixed e sticky —
   trocaria um problema por outro. 'clip' apenas corta, sem criar
   contêiner. */
html {
  overflow-x: clip;
  max-width: 100%;
}
body {
  overflow-x: clip;
  max-width: 100%;
}

/* ---------- A barra fica no rodapé, ponto ---------- */
.jsl-barra-inferior {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100vw;
}

@media (max-width:767px) {

  /* ---------- Nada pode ser mais largo que a tela ---------- */
  .content,
  .page,
  .card,
  .premium-panel {
    max-width: 100%;
    min-width: 0;
  }

  /* Filho de grid/flex não encolhe abaixo do próprio conteúdo a
     menos que min-width:0 seja dito explicitamente. É a causa
     silenciosa da maioria dos transbordos horizontais. */
  .grid > *,
  .g2 > *, .g3 > *, .g4 > *,
  .fr2 > *, .fr3 > *,
  .premium-metric-grid > *,
  .premium-main-grid > *,
  .premium-bottom-grid > *,
  .c2-grid > *,
  .c2-cfg-grid > * {
    min-width: 0;
    max-width: 100%;
  }

  /* Célula que não quebra linha não encolhe — e arrasta a página
     inteira junto. No celular tudo pode quebrar. */
  .cm-qtd, .cm-un,
  td, th {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  /* Texto longo sem espaço (código Pix, e-mail, URL) também
     estica a página se não puder quebrar. */
  .content p,
  .content div,
  .content span,
  .content td {
    overflow-wrap: break-word;
  }

  /* Imagens e QR nunca ultrapassam a largura disponível */
  .content img,
  .content canvas,
  .content svg { max-width: 100%; height: auto; }
}


/* ============================================================
   14. BARRA INFERIOR FLUTUANTE (estilo cápsula)

   Troca a barra colada no rodapé por uma cápsula que flutua sobre
   o conteúdo — o padrão que o Instagram adotou.

   COMO A PROFUNDIDADE É CONSTRUÍDA
   Não é um efeito só. São quatro camadas somadas, e é a soma que
   dá a sensação de objeto físico pousado sobre a tela:

     1. sombra projetada, larga e difusa   -> distância do fundo
     2. sombra de contato, curta e escura  -> peso, "encosta" na tela
     3. linha clara de 1px no topo         -> luz batendo na quina
     4. desfoque do que passa por trás     -> material translúcido

   Mantive os rótulos, ao contrário do Instagram. Lá o usuário abre
   o app dez vezes por dia e decorou os ícones. Aqui a pessoa entra
   entre uma obra e outra: "Orçar" e "Caixa" precisam estar escritos.
   ============================================================ */
.jsl-barra-inferior {
  /* Flutua: sai das bordas e ganha respiro embaixo */
  left: 50%;
  right: auto;
  bottom: calc(var(--seg-baixo) + 10px);
  transform: translateX(-50%) translateZ(0);

  width: min(calc(100% - 24px), 430px);
  height: 62px;
  padding: 5px 6px;

  border-radius: var(--r-pilula);
  border: 1px solid rgba(255, 255, 255, .10);

  /* Vidro escuro: deixa o conteúdo passar por trás, sem competir */
  background: rgba(16, 20, 25, .82);
  backdrop-filter: saturate(180%) blur(22px);
  -webkit-backdrop-filter: saturate(180%) blur(22px);

  /* As quatro camadas de profundidade */
  box-shadow:
    0 18px 40px -12px rgba(0, 0, 0, .72),   /* projetada */
    0 6px 14px -6px rgba(0, 0, 0, .60),     /* contato */
    inset 0 1px 0 rgba(255, 255, 255, .09), /* luz na quina de cima */
    inset 0 -1px 0 rgba(0, 0, 0, .35);      /* sombra na quina de baixo */

  overflow: visible;
}

/* Item: agora é uma pastilha, não uma fatia da barra */
.jsl-bi-item {
  border-radius: var(--r-pilula);
  gap: 2px;
  padding: 0 2px;
  transition: color var(--v-rapida) var(--curva),
              background var(--v-media) var(--curva);
}

/* O traço no topo era da barra colada. Numa cápsula flutuante
   ele não faz sentido — a marcação vira a própria pastilha. */
.jsl-bi-item.ativo::before { content: none; }

.jsl-bi-item.ativo {
  background: var(--jsl-amarelo-fraco);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 2px 8px -2px rgba(255, 209, 0, .30);
}
.jsl-bi-item.ativo .jsl-bi-ico { transform: translateY(-1px) scale(1.06); }

.jsl-bi-ico { font-size:var(--t-gr); }
.jsl-bi-txt { font-size:var(--t-micro); letter-spacing: .1px; }

/* Afunda ao tocar — reforça a sensação de objeto físico */
.jsl-bi-item:active {
  transform: scale(.94);
  background: rgba(255, 255, 255, .06);
}

/* Bolinha de notificação reposicionada para a pastilha */
.jsl-bi-ponto { top: 6px; margin-right: -13px; border-color: rgba(16, 20, 25, .9); }

/* O conteúdo precisa de mais folga: agora a barra flutua e o
   último item ficaria escondido embaixo dela. */
@media (max-width:767px) {
  .content {
    padding-bottom: calc(62px + var(--seg-baixo) + var(--e8));
  }
  .jsl-legal-footer {
    padding-bottom: calc(62px + var(--seg-baixo) + var(--e6));
  }
  .toast { bottom: calc(62px + var(--seg-baixo) + var(--e5)); }
}

/* Tela estreita: cápsula ocupa quase tudo e o texto encolhe */
@media (max-width:767px) {
  .jsl-barra-inferior { width: calc(100% - 16px); height: 58px; }
  .jsl-bi-ico { font-size:var(--t-gr); }
  .jsl-bi-txt { font-size:var(--t-micro); }
}

/* Menu aberto: a cápsula recua, mas sem sumir de repente */
@media (max-width:767px) {
  body.mobile-menu-open .jsl-barra-inferior {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
    pointer-events: none;
    transition: opacity var(--v-media) var(--curva),
                transform var(--v-media) var(--curva);
  }
}


/* ============================================================
   15. RELAÇÃO DE MATERIAIS NO CELULAR — layout próprio

   A conversão genérica de tabela em cartão (rótulo à esquerda,
   valor à direita) serve para listas de valores. Não serve aqui.

   Nesta tela o nome do material é a informação principal — é o
   que a pessoa lê no depósito, com o celular numa mão. Ele não
   pode dividir espaço com um rótulo "MATERIAL" que não informa
   nada. A quantidade vem logo abaixo, junto da unidade, porque
   as duas só fazem sentido lidas juntas: "38 un", não "38" numa
   linha e "un" em outra.

   Estrutura do cartão:

       ● Placa ST 1,80 x 1,20              [×]
         38  un
         chapa padrão

   O botão de excluir ganha área de toque de verdade e fica no
   canto, longe do campo de quantidade — para ninguém apagar um
   item querendo corrigir o número.
   ============================================================ */
@media (max-width:767px) {

  /* O rótulo "MATERIAL" não acrescenta nada: o nome se explica */
  .cm-row .cm-nome::before { content: none; }

  .cm-row .cm-nome {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--e2);

    padding: var(--e1) 0 var(--e2);
    font-size: var(--t-base);
    font-weight: var(--p-bold);
    line-height: 1.3;
    text-align: left;
    color: var(--jsl-texto);
    overflow-wrap: anywhere;
  }

  /* O ponto colorido identifica o sistema (parede, forro...) */
  .cm-row .cm-dot {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin: 6px 0 0;
    vertical-align: initial;
    opacity: 1;
  }

  /* Botão de excluir: alvo de dedo, empurrado para o canto */
  .cm-row .cm-x {
    margin-left: auto;
    flex: 0 0 auto;
    width: var(--toque-minimo);
    height: var(--toque-minimo);
    display: grid;
    place-items: center;
    font-size: var(--t-gr);
    line-height: 1;
    border-radius: var(--r-pequeno);
    color: var(--jsl-texto-fraco);
  }
  .cm-row .cm-x:active {
    background: var(--jsl-erro-bg);
    color: var(--jsl-erro);
  }

  /* Quantidade e unidade lado a lado, na mesma linha visual */
  .cm-row .cm-qtd {
    justify-content: flex-start;
    gap: var(--e2);
    padding: 0 0 var(--e1);
    border-bottom: 0;
  }
  .cm-row .cm-qtd::before {
    content: 'Quantidade';
    flex: 0 0 auto;
    max-width: none;
  }
  .cm-row .cm-qtd-in {
    width: 84px;
    min-height: var(--toque-minimo);
    text-align: center;
    font-size: var(--t-med);
    font-weight: var(--p-black);
  }

  .cm-row .cm-un {
    justify-content: flex-start;
    gap: var(--e2);
    padding: 0 0 var(--e2);
    border-bottom: 0;
    text-align: left;
  }
  .cm-row .cm-un::before { content: 'Unidade'; }

  /* Detalhe só ocupa espaço quando existe */
  .cm-row .cm-det {
    justify-content: flex-start;
    text-align: left;
    padding: 0;
    font-size: var(--t-mini);
    line-height: var(--lh-normal);
  }
  .cm-row .cm-det::before { content: none; }
  .cm-row .cm-det:empty { display: none; }

  /* O cartão inteiro respira melhor */
  .cm-row {
    padding: var(--e3) var(--e4);
    border-color: var(--jsl-linha);
  }
}


/* ============================================================
   16. ABAS DE OBRAS (Em andamento / Concluídas / Todas)
   ============================================================ */
.jsl-abas {
  display: flex;
  gap: var(--e2);
  margin-bottom: var(--e4);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.jsl-abas::-webkit-scrollbar { display: none; }

.jsl-aba {
  display: inline-flex;
  align-items: center;
  gap: var(--e2);
  flex: 0 0 auto;

  min-height: var(--toque-minimo);
  padding: 0 var(--e4);

  background: var(--jsl-fundo-2);
  border: 1px solid var(--jsl-linha);
  border-radius: var(--r-pilula);

  color: var(--jsl-texto-medio);
  font-family: var(--fonte);
  font-size: var(--t-peq);
  font-weight: var(--p-forte);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--v-rapida) var(--curva),
              border-color var(--v-rapida) var(--curva),
              color var(--v-rapida) var(--curva);
}
.jsl-aba:hover { border-color: var(--jsl-linha-forte); color: var(--jsl-texto); }
.jsl-aba:active { transform: scale(.97); }

.jsl-aba.ativa {
  background: var(--jsl-amarelo-fraco);
  border-color: var(--jsl-amarelo-borda);
  color: var(--jsl-amarelo);
}

/* Contador dentro da aba */
.jsl-aba-n {
  min-width: 20px;
  padding: 1px 6px;
  background: var(--jsl-fundo-4);
  border-radius: var(--r-pilula);
  font-size: var(--t-micro);
  font-weight: var(--p-bold);
  font-variant-numeric: tabular-nums;
  color: var(--jsl-texto-medio);
}
.jsl-aba.ativa .jsl-aba-n {
  background: var(--jsl-amarelo);
  color: var(--jsl-texto-sobre-amarelo);
}

@media (max-width:767px) {
  .jsl-aba { padding: 0 var(--e3); font-size: var(--t-mini); }
}

/* ============================================================
   17. CAMPO DE DINHEIRO COM MÁSCARA
   Números alinhados à direita e com largura fixa por dígito —
   é o que faz uma coluna de valores ficar reta, como extrato.
   ============================================================ */
.jsl-campo-valor {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--p-bold);
  letter-spacing: .3px;
}
.jsl-campo-valor::placeholder {
  font-weight: var(--p-normal);
  letter-spacing: 0;
}


/* ============================================================
   18. PLANO ÚNICO — esconde os cartões dos planos antigos

   Os cartões continuam no HTML de propósito. Vários trechos de
   JavaScript escrevem em ids como #ass-premium-valor; removê-los
   quebraria essas rotinas em silêncio.

   Escondidos aqui, o efeito para o usuário é o mesmo, e voltar
   atrás é apagar este bloco.
   ============================================================ */
/* !important é necessário aqui: os cartões têm display:flex escrito
   no atributo style= do próprio HTML, e estilo inline só é vencido
   por !important. É o caso legítimo de uso. */
[data-plano-antigo] { display: none !important; }

/* O cartão que sobrou passa a ocupar a largura toda, sem parecer
   que falta alguma coisa ao lado */
#ass-card-basico,
#cad-card-basico {
  max-width: 100%;
  border-color: var(--jsl-amarelo-borda);
}


/* ============================================================
   19. TELAS DE FLUXO CHEIO — escala compacta no computador

   Mesma origem do problema do login: os campos usam .fc, que tem
   48px de altura e fonte 16px. Isso é certo no celular, onde o
   dedo precisa de área e o iPhone dá zoom em fonte menor que 16.
   No computador, com mouse, sete campos desse tamanho fazem a
   tela de cadastro estourar a janela.

   Aplica-se ao cadastro, à escolha de plano e ao checkout — as
   telas que ocupam a tela inteira e empilham muito conteúdo.

   O celular fica intocado.
   ============================================================ */
@media (min-width:768px) {

  #cadastro-screen { padding: 16px 20px; }

  #cadastro-screen .fg { margin-bottom: var(--e3); }
  #cadastro-screen .fl { font-size:var(--t-micro); margin-bottom: 4px; }
  #cadastro-screen .fc {
    min-height: 40px;
    padding: 0 var(--e3);
    font-size:var(--t-base);
    border-radius: 7px;
  }
  #cadastro-screen textarea.fc { min-height: 70px; padding: var(--e2) var(--e3); }
  #cadastro-screen .btn { min-height: 42px; font-size:var(--t-base); }

  /* Cabeçalhos das etapas: menos respiro entre título e conteúdo */
  #cad-step-dados > div:first-child { font-size:var(--t-med); }
  #cad-step-dados > div:nth-child(2) { margin-bottom: 12px; }

  /* Cartão do plano — agora é um só, pode ser mais enxuto */
  #cad-step-plano > div:first-child { margin-bottom: 12px; }
  #cad-step-plano > div:first-child > div:first-child { font-size:var(--t-tit); }
}

/* Janela baixa: comprime mais ainda */
@media (min-width:768px) and (max-height: 860px) {
  #cadastro-screen { padding: 10px 20px; }
  #cadastro-screen .fg { margin-bottom: 9px; }
  #cadastro-screen .fc { min-height: 36px; font-size:var(--t-base); }
  #cadastro-screen .btn { min-height: 40px; }
  #cad-step-plano > div:first-child > div:first-child { font-size:var(--t-gr); }
}

/* ============================================================
   20. FLUXO DE CADASTRO NÃO PODE CORTAR NO TOPO
   Mesma correção de centragem aplicada ao login: ancora no topo e
   centraliza com margin auto, para o excedente nunca ficar acima
   da borda e inalcançável.
   ============================================================ */
#cadastro-screen {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
}
#cadastro-screen > * {
  margin: auto;
  flex: 0 0 auto;
  width: 100%;
  max-width: 620px;
}

/* ============================================================
   08-TEMAS.CSS — CORREÇÃO

   ------------------------------------------------------------
   O QUE ACONTECEU

   Ao limpar o style.css no Bloco 2, meu script removeu os blocos
   :root duplicados — e junto levou os três blocos
   [data-tema="..."], que eu não tinha percebido que estavam ali.

   Eram eles que definiam os temas do sistema:

       amarelo    #FFD100   o amarelo JSL
       titanium   #BFC7D5   cinza metálico
       blackgold  #D4A848   dourado escuro

   Com os blocos apagados, a tela passou a mostrar sempre o amarelo
   dos tokens, mas o PDF continuou lendo o tema salvo em
   db.cfg.temaSelecionado (modules/temas.js, função AC()). Se o tema
   salvo fosse "blackgold", o PDF saía com #D4A848 — o dourado
   apagado, a "cor morta".

   ------------------------------------------------------------
   O QUE MUDOU AGORA

   Além de restaurar os três temas, eles passaram a alimentar
   TAMBÉM os tokens novos (--jsl-amarelo e derivados). Antes um
   tema só trocava as variáveis antigas, então metade da interface
   obedecia e a outra metade não.

   Agora trocar o tema muda o sistema inteiro de uma vez — tela,
   componentes e PDF — que era a intenção original.

   CARREGAR DEPOIS do 01-tokens.css. Está no fim da lista para
   poder sobrepor qualquer camada anterior.
   ============================================================ */

/* ============================================================
   AMARELO — tema padrão JSL
   ============================================================ */
[data-tema="amarelo"],
[data-tema="jsl"] {
  --jsl-amarelo:        #FFD100;
  --jsl-amarelo-escuro: #D6A900;
  --jsl-amarelo-claro:  #FFDD40;
  --jsl-amarelo-fraco:  rgba(255, 209, 0, .12);
  --jsl-amarelo-borda:  rgba(255, 209, 0, .34);
  --jsl-texto-sobre-amarelo: #14171A;

  --jsl-fundo-0: #07090B;
  --jsl-fundo-1: #0C0F12;
  --jsl-fundo-2: #11161A;
  --jsl-fundo-3: #171C21;
  --jsl-fundo-4: #1F252C;

  --jsl-texto:       #F7F8FA;
  --jsl-texto-medio: #9AA2AD;
  --jsl-linha:       #262B31;
}

/* ============================================================
   TITANIUM — cinza metálico
   ============================================================ */
[data-tema="titanium"] {
  --jsl-amarelo:        #BFC7D5;
  --jsl-amarelo-escuro: #9099A8;
  --jsl-amarelo-claro:  #D6DCE6;
  --jsl-amarelo-fraco:  rgba(191, 199, 213, .13);
  --jsl-amarelo-borda:  rgba(191, 199, 213, .36);
  --jsl-texto-sobre-amarelo: #0F1216;

  --jsl-fundo-0: #07080A;
  --jsl-fundo-1: #0D1014;
  --jsl-fundo-2: #131820;
  --jsl-fundo-3: #1B222C;
  --jsl-fundo-4: #232B37;

  --jsl-texto:       #F3F5F8;
  --jsl-texto-medio: #9AA3AF;
  --jsl-linha:       #313946;
}

/* ============================================================
   BLACK GOLD — dourado escuro
   ============================================================ */
[data-tema="blackgold"] {
  --jsl-amarelo:        #D4A848;
  --jsl-amarelo-escuro: #A97919;
  --jsl-amarelo-claro:  #E4BF6C;
  --jsl-amarelo-fraco:  rgba(212, 168, 72, .13);
  --jsl-amarelo-borda:  rgba(212, 168, 72, .38);
  --jsl-texto-sobre-amarelo: #100D06;

  --jsl-fundo-0: #050505;
  --jsl-fundo-1: #0A0907;
  --jsl-fundo-2: #13100B;
  --jsl-fundo-3: #1D170E;
  --jsl-fundo-4: #271F14;

  --jsl-texto:       #FBF7EE;
  --jsl-texto-medio: #A99A7B;
  --jsl-linha:       #3A2B12;
}

/* ============================================================
   COMPATIBILIDADE COM OS MÓDULOS ANTIGOS

   Os módulos usam --y, --y2, --bk, --g1... Aqui eles passam a
   apontar para o tema ativo, em vez de terem valores próprios.
   Assim existe UM lugar que decide a cor, e não dois.
   ============================================================ */
[data-tema] {
  --y:   var(--jsl-amarelo);
  --y2:  var(--jsl-amarelo-escuro);
  --bk:  var(--jsl-fundo-0);
  --bk2: var(--jsl-fundo-1);
  --g1:  var(--jsl-fundo-1);
  --g2:  var(--jsl-fundo-2);
  --g3:  var(--jsl-fundo-3);
  --bd:  var(--jsl-linha);
  --mt:  var(--jsl-texto-medio);
  --tx:  var(--jsl-texto);

  --premium-yellow:  var(--jsl-amarelo);
  --premium-yellow2: var(--jsl-amarelo-escuro);
  --premium-bg:      var(--jsl-fundo-0);
  --premium-bg2:     var(--jsl-fundo-1);
  --premium-panel:   var(--jsl-fundo-2);
  --premium-panel2:  var(--jsl-fundo-3);
  --premium-border:  var(--jsl-linha);
  --premium-border2: var(--jsl-amarelo-borda);
  --premium-text:    var(--jsl-texto);
  --premium-muted:   var(--jsl-texto-medio);
  --premium-glow:    var(--jsl-amarelo-fraco);
}

/* Cor personalizada (recurso dos planos pagos).
   O modules/temas.js grava --y e --y2 direto no elemento html;
   aqui repassamos para os tokens novos, para a interface inteira
   acompanhar e não ficar só metade colorida. */
[data-tema="custom"] {
  --jsl-amarelo:        var(--y);
  --jsl-amarelo-escuro: var(--y2);
  --jsl-amarelo-claro:  var(--y);
  --jsl-amarelo-fraco:  color-mix(in srgb, var(--y) 12%, transparent);
  --jsl-amarelo-borda:  color-mix(in srgb, var(--y) 34%, transparent);
}
/* Navegador sem color-mix continua funcionando, só sem a
   transparência calculada. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  [data-tema="custom"] {
    --jsl-amarelo-fraco: rgba(255, 209, 0, .12);
    --jsl-amarelo-borda: rgba(255, 209, 0, .34);
  }
}

/* ============================================================
   CSS/ASSINATURA-ESTADO.CSS — BLOCO 1

   Estado visual de "assinatura vencida / somente leitura".
   O bloqueio real acontece no servidor (regras do Firestore).
   Este arquivo só deixa a situação ÓBVIA para o usuário, para ele
   não ficar clicando e recebendo erro sem entender o motivo.

   Incluir no index.html, por último na lista de CSS:
     <link rel="stylesheet" href="css/assinatura-estado.css?v=269">
   ============================================================ */

/* Faixa fixa no topo quando o acesso está vencido */
body.jsl-somente-leitura::before {
  content: 'Assinatura vencida — modo somente leitura. Seus dados estão salvos. Renove para voltar a lançar.';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index:var(--z-critico);

  display: block;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px;

  background: #B3261E;
  color: #fff;
  font-family: 'Barlow', system-ui, sans-serif;
  font-size:var(--t-peq);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;

  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

/* Empurra o conteúdo para a faixa não cobrir a barra de cima */
body.jsl-somente-leitura .topbar,
body.jsl-somente-leitura .premium-topbar {
  margin-top: 56px;
}

@media (max-width:767px) {
  body.jsl-somente-leitura::before {
    font-size:var(--t-peq);
    padding: calc(env(safe-area-inset-top, 0px) + 8px) 12px 8px;
  }
  body.jsl-somente-leitura .topbar,
  body.jsl-somente-leitura .premium-topbar {
    margin-top: 64px;
  }
}

/* Botões de ação ficam apagados — o usuário entende antes de clicar.
   Continuam clicáveis de propósito: o clique abre a tela de assinatura. */
body.jsl-somente-leitura .btn.by,
body.jsl-somente-leitura .btn.br {
  opacity: .5;
  filter: grayscale(.6);
}

/* A tela de assinatura e o botão de renovar seguem em destaque total */
body.jsl-somente-leitura #premium-plan-card,
body.jsl-somente-leitura #premium-plan-card *,
body.jsl-somente-leitura .mo.open .btn {
  opacity: 1 !important;
  filter: none !important;
}

/* Aviso discreto de fim de teste (últimos 3 dias) */
body[data-assinatura="trialing"] #premium-plan-status {
  background: #FFD100;
  color: #1a1a1a;
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 800;
  font-size:var(--t-micro);
}

/* ============================================================
   09-TELAS-EXTRAIDAS.CSS — Etapa 2

   Estilos que estavam escritos dentro do index.html, tela por tela.
   Cada bloco abaixo corresponde a uma tela migrada e conferida
   com a ferramenta conferir_estilos.py — zero diferenca visual.

   Nomes seguem o papel do elemento na tela, nao a aparencia:
   .obras-linha-extremos diz o que aquilo E; .jx-193 nao diria nada.

   POR QUE OS SELETORES SAO ESCOPADOS NA TELA
   Estilo inline vencia tudo. Ao virar classe, passava a perder para
   regras antigas como "#page-recibos .sh > div:last-child". Escopar
   na tela (#page-recibos .recibos-linha repetida) devolve a
   prioridade sem !important — e de quebra o seletor passa a dizer
   a que tela aquilo pertence.

   CARREGAR POR ULTIMO.
   ============================================================ */


/* ---------- #page-obras ---------- */

#page-obras .obras-espaco.obras-espaco.obras-espaco {
  margin-bottom:11px;
}

#page-obras #ob-kpi-receb {
  color:var(--grn);
}

#page-obras #ob-kpi-areceber {
  color:var(--red);
}

#page-obras #ob-kpi-ativas {
  color:var(--blu);
}

#page-obras #obras-premium-chart {
  margin-bottom:16px;
}

#page-obras .obras-rolagem.obras-rolagem.obras-rolagem {
  overflow-x:auto;
}


/* ---------- #page-contratos ---------- */

#page-contratos .contratos-espaco.contratos-espaco.contratos-espaco {
  margin-bottom:11px;
}

#page-contratos .contratos-linha.contratos-linha.contratos-linha {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

#page-contratos #ctf-todos {
  border-color:rgba(255,209,0,.5);
  color:var(--y);
}

#page-contratos #contratos-kpis {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:8px;
  margin-bottom:12px;
}

#page-contratos .contratos-nota.contratos-nota.contratos-nota {
  color:var(--mt);
  font-size:var(--t-peq);
}


/* ---------- #page-funcionarios ---------- */

#page-funcionarios .funcionarios-bloco.funcionarios-bloco.funcionarios-bloco {
  grid-template-columns:1fr 360px;
  gap:11px;
}

#page-funcionarios .funcionarios-espaco.funcionarios-espaco.funcionarios-espaco {
  margin-bottom:11px;
}

#page-funcionarios #func-lista {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-bottom:11px;
}

#page-funcionarios .funcionarios-centro.funcionarios-centro.funcionarios-centro {
  text-align:center;
  padding:40px 20px;
}

#page-funcionarios .funcionarios-bloco-2.funcionarios-bloco-2.funcionarios-bloco-2 {
  font-size:var(--t-marca-sm);
  margin-bottom:10px;
}

#page-funcionarios .funcionarios-titulo.funcionarios-titulo.funcionarios-titulo {
  color:var(--mt);
  font-size:var(--t-peq);
  font-weight:600;
}


/* ---------- #page-recibos ---------- */

#page-recibos .recibos-espaco.recibos-espaco.recibos-espaco {
  margin-bottom:14px;
}

#page-recibos .recibos-bloco.recibos-bloco.recibos-bloco {
  background:var(--y);
}

#page-recibos .recibos-bloco-2.recibos-bloco-2.recibos-bloco-2 {
  background:var(--grn);
}

#page-recibos #rcb-kpi-mes {
  color:var(--grn);
}

#page-recibos .recibos-bloco-3.recibos-bloco-3.recibos-bloco-3 {
  background:var(--blu);
}

#page-recibos #rcb-kpi-qtd {
  color:var(--blu);
}

#page-recibos .recibos-bloco-4.recibos-bloco-4.recibos-bloco-4 {
  background:var(--pur);
}

#page-recibos #rcb-kpi-pj {
  color:var(--pur);
}

#page-recibos .recibos-linha.recibos-linha.recibos-linha {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

#page-recibos #rcb-busca {
  width:180px;
  padding:6px 9px;
  font-size:var(--t-peq);
}

#page-recibos #rcb-filtro-tipo {
  width:140px;
  padding:6px 9px;
  font-size:var(--t-peq);
}

#page-recibos .recibos-direita.recibos-direita.recibos-direita {
  text-align:right;
}

#page-recibos #rcb-empty {
  text-align:center;
  padding:30px 12px;
  color:var(--mt);
  font-size:var(--t-peq);
  display:none;
}

#page-recibos .recibos-bloco-5.recibos-bloco-5.recibos-bloco-5 {
  font-size:var(--t-marca-sm);
  margin-bottom:6px;
}

#page-recibos .recibos-bloco-6.recibos-bloco-6.recibos-bloco-6 {
  font-weight:700;
  color:var(--tx);
  margin-bottom:4px;
}


/* ---------- #page-financeiro ---------- */

#page-financeiro .financeiro-espaco.financeiro-espaco.financeiro-espaco {
  margin-bottom:11px;
}

#page-financeiro #fin-tot-v {
  color:var(--red);
}

#page-financeiro #fin-tot-g {
  color:var(--pur);
}

#page-financeiro .financeiro-espaco-2.financeiro-espaco-2.financeiro-espaco-2 {
  margin-bottom:11px;
}

#page-financeiro .financeiro-linha.financeiro-linha.financeiro-linha {
  display:flex;
  gap:5px;
  flex-wrap:wrap;
}

#page-financeiro #f-colab {
  width:110px;
  font-size:var(--t-mini);
  padding:4px 7px;
}

#page-financeiro #f-obra {
  width:130px;
  font-size:var(--t-mini);
  padding:4px 7px;
}

#page-financeiro #f-ini {
  width:118px;
  font-size:var(--t-mini);
  padding:4px 6px;
}

#page-financeiro #f-fim {
  width:118px;
  font-size:var(--t-mini);
  padding:4px 6px;
}

#page-financeiro #fin-pag {
  display:flex;
  justify-content:center;
  gap:3px;
  margin-top:9px;
}

#page-financeiro .financeiro-espaco-3.financeiro-espaco-3.financeiro-espaco-3 {
  margin-bottom:11px;
}

#page-financeiro .financeiro-espaco-4.financeiro-espaco-4.financeiro-espaco-4 {
  margin-bottom:9px;
}

#page-financeiro .financeiro-espaco-5.financeiro-espaco-5.financeiro-espaco-5 {
  margin-bottom:9px;
}

#page-financeiro .financeiro-espaco-6.financeiro-espaco-6.financeiro-espaco-6 {
  margin-bottom:9px;
}

#page-financeiro .financeiro-bloco.financeiro-bloco.financeiro-bloco {
  width:100%;
}

#page-financeiro #gastos-lista {
  max-height:200px;
  overflow-y:auto;
}


/* ---------- #page-orcamentos ---------- */

#page-orcamentos .orcamentos-espaco.orcamentos-espaco.orcamentos-espaco {
  margin-bottom:11px;
}

#page-orcamentos .orcamentos-rolagem.orcamentos-rolagem.orcamentos-rolagem {
  overflow-x:auto;
}

#page-orcamentos #orc-desc-row {
  display:none;
  align-items:center;
  justify-content:space-between;
  margin-bottom:7px;
  font-size:var(--t-peq);
  font-weight:600;
}

#page-orcamentos .orcamentos-nota.orcamentos-nota.orcamentos-nota {
  color:var(--mt);
}

#page-orcamentos #orc-dv {
  color:var(--red);
}

#page-orcamentos .orcamentos-linha-extremos.orcamentos-linha-extremos.orcamentos-linha-extremos {
  display:flex;
  justify-content:space-between;
  font-size:var(--t-med);
  font-weight:700;
}

#page-orcamentos #orc-tot {
  color:var(--y);
}

#page-orcamentos .orcamentos-linha.orcamentos-linha.orcamentos-linha {
  display:flex;
  gap:6px;
  margin-top:9px;
  flex-wrap:wrap;
}

#page-orcamentos .orcamentos-linha-2.orcamentos-linha-2.orcamentos-linha-2 {
  margin-top:8px;
  background:var(--g2);
  border-radius:4px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:8px;
}

#page-orcamentos .orcamentos-titulo.orcamentos-titulo.orcamentos-titulo {
  font-size:var(--t-micro);
  font-weight:700;
  color:var(--mt);
  text-transform:uppercase;
  white-space:nowrap;
}

#page-orcamentos #orc-pix-modo {
  font-size:var(--t-mini);
  padding:4px 7px;
  flex:1;
}

#page-orcamentos .orcamentos-espaco-2.orcamentos-espaco-2.orcamentos-espaco-2 {
  margin-bottom:11px;
}

#page-orcamentos .orcamentos-espaco-3.orcamentos-espaco-3.orcamentos-espaco-3 {
  margin-bottom:8px;
}

#page-orcamentos .orcamentos-espaco-4.orcamentos-espaco-4.orcamentos-espaco-4 {
  margin-bottom:8px;
}

#page-orcamentos .orcamentos-nota-2.orcamentos-nota-2.orcamentos-nota-2 {
  font-size:var(--t-micro);
  color:var(--mt);
  margin-top:3px;
}

#page-orcamentos .orcamentos-bloco.orcamentos-bloco.orcamentos-bloco {
  width:100%;
}

#page-orcamentos .orcamentos-centro.orcamentos-centro.orcamentos-centro {
  font-size:var(--t-micro);
  color:var(--mt);
  margin-top:4px;
  text-align:center;
}

#page-orcamentos .orcamentos-espaco-5.orcamentos-espaco-5.orcamentos-espaco-5 {
  margin-bottom:7px;
}

#page-orcamentos #orc-prev {
  background:var(--g2);
  border-radius:4px;
  padding:11px;
  font-size:var(--t-peq);
}

#page-orcamentos .orcamentos-nota-3.orcamentos-nota-3.orcamentos-nota-3 {
  color:var(--mt);
}


/* ---------- #page-config ---------- */

#page-config #cfg-meus-dados {
  border-top:3px solid var(--jsl-info);
}

#page-config .config-espaco.config-espaco.config-espaco {
  margin-bottom:6px;
}

#page-config .config-nota.config-nota.config-nota {
  font-size:var(--t-peq);
  color:var(--mt);
  line-height:1.55;
  margin:0 0 14px;
}

#page-config .config-bloco.config-bloco.config-bloco {
  width:100%;
  margin-bottom:8px;
}

#page-config .config-bloco-2.config-bloco-2.config-bloco-2 {
  width:100%;
  margin-bottom:8px;
}

#page-config .config-bloco-3.config-bloco-3.config-bloco-3 {
  width:100%;
}

#page-config .config-nota-2.config-nota-2.config-nota-2 {
  font-size:var(--t-micro);
  color:var(--mt);
  margin:10px 0 0;
  line-height:1.5;
}

#page-config .config-bloco-4.config-bloco-4.config-bloco-4 {
  border-top:3px solid var(--y);
}

#page-config .config-espaco-2.config-espaco-2.config-espaco-2 {
  margin-bottom:13px;
}

#page-config .config-linha.config-linha.config-linha {
  display:flex;
  gap:8px;
  align-items:center;
}

#page-config #cfg-logo-prev {
  width:70px;
  height:70px;
  background:var(--g2);
  border:1px dashed var(--bd);
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--t-micro);
  color:var(--mt);
  text-transform:uppercase;
  font-weight:700;
  flex-shrink:0;
  overflow:hidden;
}

#page-config .config-linha-2.config-linha-2.config-linha-2 {
  flex:1;
  display:flex;
  flex-direction:column;
  gap:5px;
}

#page-config #cfg-logo-input {
  display:none;
}

#page-config .config-nota-3.config-nota-3.config-nota-3 {
  font-size:var(--t-micro);
  color:var(--mt);
  margin-top:4px;
  line-height:1.4;
}

#page-config #cfg-doc-tipo {
  font-size:var(--t-micro);
  color:var(--mt);
  margin-top:3px;
}

#page-config #cfg-bancoCpf-tipo {
  font-size:var(--t-micro);
  color:var(--mt);
  margin-top:3px;
}

#page-config .config-bloco-5.config-bloco-5.config-bloco-5 {
  border-top:3px solid var(--blu);
  grid-column:1/-1;
}

#page-config .config-espaco-3.config-espaco-3.config-espaco-3 {
  margin-bottom:4px;
}

#page-config .config-nota-4.config-nota-4.config-nota-4 {
  font-size:var(--t-mini);
  color:var(--mt);
  margin-bottom:14px;
}

#page-config .config-titulo.config-titulo.config-titulo {
  font-size:var(--t-micro);
  font-weight:800;
  color:var(--mt);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:10px;
}

#page-config .config-titulo-2.config-titulo-2.config-titulo-2 {
  font-size:var(--t-micro);
  font-weight:800;
  color:var(--mt);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:10px;
}

#page-config .config-linha-3.config-linha-3.config-linha-3 {
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-bottom:10px;
}

#page-config #cfg-ass-prev {
  width:200px;
  height:80px;
  background:var(--g2);
  border:1px dashed var(--bd);
  border-radius:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:var(--t-micro);
  color:var(--mt);
  overflow:hidden;
  flex-shrink:0;
}

#page-config .config-linha-4.config-linha-4.config-linha-4 {
  display:flex;
  flex-direction:column;
  gap:6px;
}

#page-config #cfg-ass-input {
  display:none;
}

#page-config .config-nota-5.config-nota-5.config-nota-5 {
  font-size:var(--t-micro);
  color:var(--mt);
  line-height:1.4;
}

#page-config .config-titulo-3.config-titulo-3.config-titulo-3 {
  font-size:var(--t-micro);
  font-weight:800;
  color:var(--mt);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:8px;
}

#page-config .config-linha-5.config-linha-5.config-linha-5 {
  display:flex;
  flex-direction:column;
  gap:7px;
}

#page-config .config-linha-6.config-linha-6.config-linha-6 {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--t-peq);
  cursor:pointer;
}

#page-config #cfg-ass-contratos {
  accent-color:var(--y);
  width:15px;
  height:15px;
}

#page-config .config-linha-7.config-linha-7.config-linha-7 {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--t-peq);
  cursor:pointer;
}

#page-config #cfg-ass-orcamentos {
  accent-color:var(--y);
  width:15px;
  height:15px;
}

#page-config .config-linha-8.config-linha-8.config-linha-8 {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:var(--t-peq);
  cursor:pointer;
}

#page-config #cfg-ass-os {
  accent-color:var(--y);
  width:15px;
  height:15px;
}

#page-config .config-espaco-4.config-espaco-4.config-espaco-4 {
  margin-top:14px;
}

#page-config #cfg-ass-atualizadoEm {
  font-size:var(--t-micro);
  color:var(--mt);
  margin-top:6px;
}

#page-config .config-bloco-6.config-bloco-6.config-bloco-6 {
  border-top:3px solid var(--grn);
  grid-column:1/-1;
}

#page-config .config-linha-extremos.config-linha-extremos.config-linha-extremos {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:4px;
}

#page-config .config-nota-6.config-nota-6.config-nota-6 {
  font-size:var(--t-mini);
  color:var(--mt);
  margin-bottom:14px;
}

#page-config .config-espaco-5.config-espaco-5.config-espaco-5 {
  margin-bottom:13px;
}

#page-config .config-linha-9.config-linha-9.config-linha-9 {
  display:flex;
  flex-direction:column;
  gap:8px;
}

#page-config .config-bloco-7.config-bloco-7.config-bloco-7 {
  cursor:pointer;
}

#page-config .config-oculto.config-oculto.config-oculto {
  display:none;
}

#page-config .config-espaco-6.config-espaco-6.config-espaco-6 {
  margin-bottom:10px;
}

#page-config .config-bloco-8.config-bloco-8.config-bloco-8 {
  background:var(--g2);
  border-radius:5px;
  padding:12px 14px;
  margin-bottom:10px;
}

#page-config .config-titulo-4.config-titulo-4.config-titulo-4 {
  font-size:var(--t-micro);
  color:var(--mt);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:4px;
}

#page-config .config-linha-10.config-linha-10.config-linha-10 {
  display:flex;
  align-items:center;
  gap:10px;
}

#page-config #cfg-cod-atual {
  font-family:'Barlow Condensed',sans-serif;
  font-size:var(--t-hero);
  font-weight:900;
  color:var(--y);
  letter-spacing:6px;
}

#page-config .config-nota-7.config-nota-7.config-nota-7 {
  font-size:var(--t-micro);
  color:var(--mt);
  margin-top:4px;
}

#page-config .config-nota-8.config-nota-8.config-nota-8 {
  color:var(--mt);
  font-weight:400;
  text-transform:none;
}

#page-config .config-linha-11.config-linha-11.config-linha-11 {
  display:flex;
  gap:7px;
}

#page-config #cfg-novo-codigo {
  text-transform:uppercase;
  letter-spacing:2px;
  font-weight:700;
  flex:1;
}

#page-config .config-bloco-9.config-bloco-9.config-bloco-9 {
  white-space:nowrap;
}

#page-config .config-nota-9.config-nota-9.config-nota-9 {
  font-size:var(--t-micro);
  color:var(--mt);
  line-height:1.5;
  margin-top:2px;
}

#page-config .config-linha-12.config-linha-12.config-linha-12 {
  display:flex;
  flex-direction:column;
  gap:8px;
}

#page-config #sec-status {
  font-size:var(--t-peq);
  font-weight:600;
  padding:8px 10px;
  background:var(--g2);
  border-radius:4px;
}

#page-config .config-espaco-7.config-espaco-7.config-espaco-7 {
  margin-bottom:10px;
}

#page-config .config-nota-10.config-nota-10.config-nota-10 {
  background:rgba(255,209,0,.06);
  border:1px solid rgba(255,209,0,.2);
  border-left:3px solid var(--y);
  border-radius:0 5px 5px 0;
  padding:10px 12px;
  margin-bottom:12px;
  font-size:var(--t-mini);
  color:var(--mt);
  line-height:1.5;
}

#page-config .config-nota-11.config-nota-11.config-nota-11 {
  color:var(--mt);
  font-weight:400;
  text-transform:none;
}

#page-config .config-nota-12.config-nota-12.config-nota-12 {
  color:var(--mt);
  font-weight:400;
  text-transform:none;
}

#page-config .config-espaco-8.config-espaco-8.config-espaco-8 {
  margin-bottom:8px;
}

#page-config .config-nota-13.config-nota-13.config-nota-13 {
  font-size:var(--t-mini);
  color:var(--mt);
  line-height:1.5;
  margin-bottom:12px;
}

#page-config .config-grade.config-grade.config-grade {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}

#page-config .config-nota-14.config-nota-14.config-nota-14 {
  font-size:var(--t-micro);
  color:var(--mt);
  line-height:1.5;
  margin-top:6px;
}

#page-config .config-espaco-9.config-espaco-9.config-espaco-9 {
  margin-bottom:10px;
}

#page-config .config-nota-15.config-nota-15.config-nota-15 {
  font-size:var(--t-mini);
  color:var(--mt);
  margin-bottom:12px;
  line-height:1.5;
}

#page-config #tema-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-bottom:14px;
}

#page-config .config-bloco-10.config-bloco-10.config-bloco-10 {
  width:100%;
  height:32px;
  background:linear-gradient(135deg,#FFD100,#a97f00);
  border-radius:7px 7px 0 0;
}

#page-config .config-centro.config-centro.config-centro {
  font-size:var(--t-micro);
  font-weight:800;
  padding:7px 0;
  text-align:center;
  color:var(--tx);
}

#page-config .config-bloco-11.config-bloco-11.config-bloco-11 {
  width:100%;
  height:32px;
  background:linear-gradient(135deg,#F1F4F8,#6F7885);
  border-radius:7px 7px 0 0;
}

#page-config .config-centro-2.config-centro-2.config-centro-2 {
  font-size:var(--t-micro);
  font-weight:800;
  padding:7px 0;
  text-align:center;
  color:var(--tx);
}

#page-config .config-bloco-12.config-bloco-12.config-bloco-12 {
  width:100%;
  height:32px;
  background:linear-gradient(135deg,#D4A848,#6F4708);
  border-radius:7px 7px 0 0;
}

#page-config .config-centro-3.config-centro-3.config-centro-3 {
  font-size:var(--t-micro);
  font-weight:800;
  padding:7px 0;
  text-align:center;
  color:var(--tx);
}

#page-config #cfg-cor-personalizada-wrap {
  margin-bottom:14px;
}

#page-config .config-espaco-10.config-espaco-10.config-espaco-10 {
  margin-bottom:8px;
  font-size:var(--t-peq);
}

#page-config .config-linha-13.config-linha-13.config-linha-13 {
  display:flex;
  align-items:center;
  gap:10px;
}

#page-config #cfg-cor-custom {
  width:48px;
  height:36px;
  border:2px solid var(--bd);
  border-radius:6px;
  cursor:pointer;
  background:none;
  padding:2px;
}

#page-config .config-cresce.config-cresce.config-cresce {
  flex:1;
}

#page-config .config-nota-16.config-nota-16.config-nota-16 {
  font-size:var(--t-mini);
  color:var(--mt);
}

#page-config #cfg-identidade-completa-wrap {
  margin-bottom:14px;
}

#page-config .config-espaco-11.config-espaco-11.config-espaco-11 {
  margin-bottom:8px;
  font-size:var(--t-peq);
}

#page-config .config-nota-17.config-nota-17.config-nota-17 {
  font-size:var(--t-mini);
  color:var(--mt);
  line-height:1.5;
}

#page-config #cfg-whitelabel-wrap {
  margin-bottom:14px;
}

#page-config .config-espaco-12.config-espaco-12.config-espaco-12 {
  margin-bottom:8px;
  font-size:var(--t-peq);
}

#page-config .config-nota-18.config-nota-18.config-nota-18 {
  font-size:var(--t-mini);
  color:var(--mt);
  line-height:1.5;
}

/* JSL Sistema V296 — camada final de estabilidade responsiva.
   Mantém o layout existente e corrige estouro, viewport móvel, formulários,
   tabelas e modais sem remover funcionalidades. */

*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; max-width: 100%; overflow-x: clip; -webkit-text-size-adjust: 100%; }
body { width: 100%; max-width: 100%; min-height: 100vh; min-height: 100dvh; overflow-x: clip; }
img, svg, canvas, video { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }
pre, code, .pix-code, [data-pix-code] { overflow-wrap: anywhere; word-break: break-word; }
.table-wrap, .table-responsive, [class*="table-container"], [class*="tabela-wrap"] {
  width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.modal, .modal-content, .modal-card, .sheet, [role="dialog"] { max-width: calc(100vw - 24px); }

@media (max-width:767px) {
  :root { --jsl-safe-bottom: max(12px, env(safe-area-inset-bottom)); }
  body { min-height: 100dvh; padding-bottom: env(safe-area-inset-bottom); }
  main, #main, .main, .main-content, .content, .page, .screen, [class*="screen"] {
    max-width: 100%; min-width: 0;
  }
  input, select, textarea { font-size:var(--t-med); }
  .modal, .modal-content, .modal-card, .sheet, [role="dialog"] {
    width: calc(100vw - 16px); max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain;
  }
  .modal-body, .sheet-body, [class*="modal-body"] { overflow-y: auto; min-height: 0; }
  form, .form-grid, [class*="form-grid"], .filters, [class*="filter"] { min-width: 0; }
  form > *, .form-grid > *, [class*="form-grid"] > * { min-width: 0; }
  .actions, .form-actions, .modal-actions, [class*="actions"] { flex-wrap: wrap; }
  .actions > button, .form-actions > button, .modal-actions > button { min-height: 44px; }
  table { max-width: none; }
  .bottom-nav, .mobile-bottom-nav, [class*="bottom-nav"] {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media (min-width:768px) and (max-width:1439px) {
  main, #main, .main-content, .content { min-width: 0; max-width: 100%; }
  .grid, [class*="grid"] { min-width: 0; }
}

/* ============================================================
   JSL SISTEMA V305 — RESPONSIVIDADE GLOBAL
   Camada final: corrige inclusive estilos inline herdados sem
   alterar cálculos, dados, PDFs ou regras comerciais.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{
  width:100%;
  max-width:100%;
  min-height:100%;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  overflow-x:hidden;
}
body{
  width:100%;
  max-width:100%;
  min-height:100dvh;
  margin:0;
  overflow-x:hidden;
  font-size:var(--t-base);
  line-height:1.45;
}
button,input,select,textarea{font:inherit}
img,svg,canvas,video,iframe{max-width:100%;height:auto}
.main,.content,.main-content,.page,.pg,.section,
.premium-dashboard-page,.card,.panel,.box,.mc{
  min-width:0;
  max-width:100%;
}
.page,.pg,.section{width:100%}
.content{
  width:100%;
  padding:clamp(14px,1.7vw,28px);
}

/* Tipografia fluida sem deixar títulos gigantes ou textos ilegíveis. */
h1,.page-title,.premium-welcome-row h1{font-size:var(--t-hero);line-height:1.12}
h2,.sh h2,.premium-panel h2{font-size:var(--t-tit);line-height:1.2}
h3{font-size:var(--t-gr);line-height:1.25}
.kpi-v,.premium-metric-value{font-size:var(--t-hero)}
.fl,label,.help,.hint,small{line-height:1.35}
p,span,div,td,th,label,a,button{overflow-wrap:break-word}

/* Formulários: largura real do recipiente e alvos confortáveis. */
input:not([type="checkbox"]):not([type="radio"]),
select,textarea,.fc{
  max-width:100%;
  min-width:0;
}
textarea{resize:vertical}
.form-row,.fg-row,.grid-form,.modal-grid,
.orc-form-grid,.config-grid,.recibo-grid{
  min-width:0;
}
.btn,button,[role="button"]{
  max-width:100%;
  white-space:normal;
  line-height:1.2;
}

/* Tabelas nunca podem aumentar a largura da página. */
.table-wrap,.tbl-wrap,.cm-table-wrap,.c2-table-wrap,
.table-responsive,[style*="overflow-x:auto"]{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
}
table{max-width:100%}
td,th{vertical-align:middle}

/* Modais e telas de acesso respeitam viewport e áreas seguras. */
.modal-overlay,.overlay,[class*="modal-overlay"]{
  padding:
    max(12px,env(safe-area-inset-top))
    max(12px,env(safe-area-inset-right))
    max(12px,env(safe-area-inset-bottom))
    max(12px,env(safe-area-inset-left));
}
.modal,.modal-content,[role="dialog"]{
  width:min(100%,760px);
  max-width:calc(100dvw - 24px);
  max-height:calc(100dvh - 24px);
  overflow:auto;
  overscroll-behavior:contain;
}
#login-screen,#cadastro-screen,#colab-screen,#assinatura-screen,#lock-screen{
  width:100dvw;
  max-width:100%;
  min-height:100dvh;
  overflow-x:hidden;
  overflow-y:auto;
  padding-top:max(12px,env(safe-area-inset-top));
  padding-right:max(12px,env(safe-area-inset-right));
  padding-bottom:max(12px,env(safe-area-inset-bottom));
  padding-left:max(12px,env(safe-area-inset-left));
}
#ass-screen-inner,#cadastro-screen>div,#colab-screen>div{
  width:min(100%,1120px);
  max-width:100%;
  min-width:0;
  margin-inline:auto;
}
/* #login-screen-inner fica de fora de propósito: o login usa o
   card compacto "bank-style" (.lgb-card, max-width:380px) definido
   no <style> do index.html. Um seletor por #id aqui teria mais
   especificidade que a classe .lgb-card e alargava o card de login
   para até 1120px, quebrando o desenho minimalista original. */

/* Computador amplo. */
@media (min-width:1440px){
  .content,.premium-dashboard-page{max-width:1680px;margin-inline:auto}
  .premium-metric-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .premium-main-grid{grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr)}
  .premium-bottom-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Notebook e tablet horizontal. */
@media (min-width:768px) and (max-width:1439px){
  .premium-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .premium-main-grid,.premium-bottom-grid{grid-template-columns:1fr}
  .modal,.modal-content,[role="dialog"]{width:min(720px,calc(100dvw - 40px))}
  #page-dashboard,#page-obras,#page-orcamentos,#page-funcionarios,
  #page-financeiro,#page-config{width:100%;max-width:100%}
}

/* Celular e tablet vertical. */
@media (max-width:767px){
  :root{--jsl-mobile-pad:clamp(10px,3.4vw,16px)}
  body{
    display:block;
    min-height:100dvh;
    font-size:var(--t-base);
    padding-inline:env(safe-area-inset-left) env(safe-area-inset-right);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .main{width:100%;margin:0;min-height:100dvh;overflow:visible}
  .content{width:100%;padding:var(--jsl-mobile-pad)}
  .page,.pg,.section,#page-estoque{
    width:100%;
    max-width:100%;
    padding:0;
    margin:0;
    overflow-x:hidden;
  }

  /* Evita zoom do iPhone ao tocar em campos. */
  input:not([type="checkbox"]):not([type="radio"]),select,textarea,.fc{
    width:100%;
    max-width:100%;
    min-width:0 !important;
    min-height:46px;
    font-size:var(--t-med) !important;
  }
  textarea{min-height:92px}
  input[type="checkbox"],input[type="radio"]{min-width:20px;min-height:20px}

  .btn,button:not(.cal-day):not(.icon-btn){
    min-height:44px;
    padding:10px 12px;
  }
  .btn.bsm,.bsm{min-height:40px}

  /* Grades, cabeçalhos e barras de ações empilham sem cortar. */
  .premium-metric-grid,.premium-main-grid,.premium-bottom-grid,
  .kpi-grid,.stats-grid,.dash-grid,.cards-grid,
  .form-grid,.grid-2,.grid-3,.grid-4,
  [style*="grid-template-columns:repeat(2"],
  [style*="grid-template-columns: repeat(2"]{
    grid-template-columns:1fr !important;
  }
  .sh,.page-head,.panel-head,.card-head,.premium-panel-head,
  .premium-welcome-row,.toolbar,.filters,.actions-row{
    min-width:0;
    max-width:100%;
    flex-wrap:wrap;
    gap:10px;
  }
  .sh>*,.page-head>*,.toolbar>*,.filters>*{min-width:0}
  .sh .btn,.page-head .btn{flex:1 1 140px}

  /* Corrige grupos inline com min-width fixo. */
  .jsl-larg-min-120,.jsl-larg-min-130,.jsl-larg-min-140,
  .jsl-larg-min-150,.jsl-larg-min-220,.jsl-larg-min-240,
  [style*="min-width:110px"],[style*="min-width:120px"],
  [style*="min-width:130px"],[style*="min-width:140px"],
  [style*="min-width:150px"],[style*="min-width:220px"],
  [style*="min-width:240px"]{
    min-width:0 !important;
    width:100% !important;
    flex:1 1 100% !important;
  }

  /* Navegação superior. */
  .premium-topbar{
    width:100%;
    min-height:auto;
    padding:8px var(--jsl-mobile-pad);
    padding-top:max(8px,env(safe-area-inset-top));
    flex-wrap:wrap;
    gap:8px;
  }
  .premium-search{order:3;flex:1 1 100%;width:100%;max-width:100%}
  .premium-search input{min-height:42px}
  .premium-user{min-width:0;max-width:34vw}

  /* Cards e painéis. */
  .card,.panel,.box,.mc,.premium-panel,.calc-panel{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:clamp(12px,3.6vw,18px);
    border-radius:12px;
  }
  .premium-chart-panel,.premium-donut-panel{height:auto;min-height:250px}
  .premium-donut-wrap{grid-template-columns:1fr}
  .premium-donut{margin:16px auto;max-width:68vw;max-height:68vw}

  /* Tabelas operacionais permanecem utilizáveis por rolagem. */
  .table-wrap table,.tbl-wrap table,.cm-table-wrap table,.c2-table-wrap table,
  #page-clientes table,#page-obras table,#page-orcamentos table,
  #page-contratos table,#page-recibos table,#page-financeiro table,
  #page-compras table,#page-estoque table{
    width:max-content;
    min-width:680px;
  }
  th,td{font-size:var(--t-peq);padding:9px 8px}

  /* Telas sensíveis que antes podiam ficar por baixo do topo. */
  #assinatura-screen,#cadastro-screen,#colab-screen,#login-screen{
    align-items:flex-start;
    justify-content:flex-start;
  }
  #ass-screen-inner,.ass-checkout-card,#cadastro-screen>div,#colab-screen>div{
    width:100%;
    max-width:100%;
    margin:0 auto;
  }
  .ass-checkout-card{padding:clamp(18px,5vw,28px) var(--jsl-mobile-pad)}
  .ass-checkout-summary{gap:12px;align-items:flex-start}
  .ass-checkout-progress{overflow-x:auto;justify-content:flex-start}
  .ass-checkout-progress-item{min-width:112px;flex:0 0 auto}
  .ass-mp-qr{width:min(250px,76vw);height:auto}
  .ass-mp-actions{grid-template-columns:1fr}

  /* Login legível sem sacrificar espaço útil. */
  #login-screen>div{display:block;width:100%;max-width:500px}
  #login-lado-chamada{display:none}
  #login-card{width:100%;max-width:100%;padding:clamp(18px,5vw,28px)}
  .login-hl-carousel{font-size:var(--t-hero)}

  /* Calendários e imagens não extrapolam. */
  .cal-grid,.calendar-grid{min-width:0;width:100%}
  .cal-day{min-width:0;aspect-ratio:1/1;padding:2px}
  canvas{width:100% !important;max-width:100% !important}
}

/* Celulares muito estreitos. */
@media (max-width:767px){
  :root{--jsl-mobile-pad:10px}
  body{font-size:var(--t-base)}
  .content{padding:10px}
  .card,.panel,.box,.mc,.premium-panel,.calc-panel{padding:11px}
  h1,.page-title,.premium-welcome-row h1{font-size:var(--t-tit)}
  h2,.sh h2,.premium-panel h2{font-size:var(--t-med)}
  .premium-topbar{padding-inline:8px}
  .premium-user{max-width:76px}
  .ass-checkout-summary{display:block}
  .ass-checkout-summary>div:last-child{text-align:left !important;margin-top:8px}
  .modal,.modal-content,[role="dialog"]{
    max-width:calc(100dvw - 12px);
    max-height:calc(100dvh - 12px);
  }
}

/* Baixa altura e celular deitado. */
@media (max-height:520px) and (orientation:landscape){
  #login-screen,#cadastro-screen,#colab-screen,#assinatura-screen,.modal-overlay{
    align-items:flex-start;
    overflow-y:auto;
  }
  #login-lado-chamada{display:none}
  .modal,.modal-content,[role="dialog"]{max-height:calc(100dvh - 12px)}
}

/* Impressão permanece A4 e não recebe o empilhamento móvel. */
@media print{
  html,body{overflow:visible !important;width:auto !important;max-width:none !important}
  .content,.page,.card{max-width:none !important}
}

/* V316 — camada final de responsividade. Carregada por último para impedir
   que regras antigas de largura mínima escondam ações no celular. */
*{box-sizing:border-box}
.page,.card,.panel,.box,.mc,.c2-panel{min-width:0;max-width:100%}

@media (max-width:767px){
  html,body,.main,.content{width:100%;max-width:100%;overflow-x:hidden}
  .page,.pg,.section{overflow-x:visible!important}
  .card,.panel,.box,.mc,.c2-panel{overflow:visible!important}

  /* Calculadora: cada lançamento vira cartão; nenhuma ação fica fora da tela. */
  #page-estoque .c2-medidas{width:100%;min-width:0!important;overflow:visible}
  #page-estoque .c2-medidas table,
  #page-estoque .c2-medidas tbody{display:block;width:100%;min-width:0!important}
  #page-estoque .c2-medidas thead{display:none}
  #page-estoque .c2-medidas tr{display:block;width:100%;margin:8px 0;padding:10px 12px;border:1px solid var(--bd);border-radius:10px;background:var(--g2)}
  #page-estoque .c2-medidas td{display:flex;width:100%;min-width:0;align-items:center;justify-content:space-between;gap:12px;padding:6px 0!important;border:0!important;text-align:right!important;white-space:normal}
  #page-estoque .c2-medidas td::before{content:attr(data-label);color:var(--mt);font-size:var(--t-mini);font-weight:800;text-transform:uppercase;text-align:left}
  #page-estoque .c2-medidas .c2-med-acoes{margin-top:5px;padding-top:9px!important;border-top:1px solid var(--bd)!important}
  #page-estoque .c2-medidas .c2-med-rm{display:inline-flex;align-items:center;justify-content:center;width:100%;height:44px;min-height:44px;padding:8px 12px;opacity:1;color:#ff6961;background:rgba(239,83,80,.10);border:1px solid rgba(239,83,80,.35);font-size:var(--t-base);font-weight:800}

  /* Relação de materiais: neutraliza o min-width de 680/720px aplicado depois. */
  #page-estoque #calc-materiais,
  #page-estoque #bloco-materiais .cm-table,
  #page-estoque #bloco-materiais .cm-table tbody{display:block;width:100%;min-width:0!important;max-width:100%}
  #page-estoque #bloco-materiais .cm-table thead{display:none}
  #page-estoque #bloco-materiais .cm-row{display:block;width:100%;min-width:0;margin:8px 0;padding:11px 12px;border:1px solid var(--bd);border-radius:10px;background:var(--g2)}
  #page-estoque #bloco-materiais .cm-x{display:inline-flex;align-items:center;justify-content:center;opacity:1}
  #page-estoque .cm-add-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  #page-estoque .cm-add-nome{grid-column:1/-1;min-width:0;width:100%}
  #page-estoque .cm-add-btn{grid-column:1/-1;width:100%}
  #page-estoque .cm-acoes{display:grid!important;grid-template-columns:1fr;gap:8px}
  #page-estoque .cm-acoes[style*="display:none"]{display:none!important}
  #page-estoque .cm-btn{width:100%;min-width:0;justify-content:center;white-space:normal;text-align:center}
  #page-estoque .c2-entry{display:grid;grid-template-columns:1fr 1fr;align-items:end}
  #page-estoque .c2-entry .c2-add{grid-column:1/-1;width:100%;height:44px}
  #page-estoque .c2-cfg-grid{grid-template-columns:1fr!important}

  /* Histórico da calculadora: cabeçalhos e ações quebram linha. */
  #hist-lista [style*="justify-content:space-between"]{flex-wrap:wrap!important;align-items:flex-start!important;gap:9px!important}
  #hist-lista [style*="display:flex"][style*="gap:8px"],
  #hist-lista [style*="display:flex"][style*="gap:6px"]{flex-wrap:wrap!important;width:100%}
  #hist-lista .btn{flex:1 1 120px;white-space:normal}

  /* Todas as outras tabelas ficam roláveis dentro do próprio card. */
  #page-clientes .card,#page-obras .card,#page-orcamentos .card,#page-contratos .card,
  #page-recibos .card,#page-financeiro .card,#page-compras .card{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  #page-clientes table,#page-obras table,#page-orcamentos table,#page-contratos table,
  #page-recibos table,#page-financeiro table,#page-compras table{min-width:680px;max-width:none}

  /* Orçamento: cada item é um cartão vertical; nunca uma tabela larga. */
  #page-orcamentos .card{overflow-x:hidden!important}
  #page-orcamentos .orcamentos-rolagem{overflow-x:hidden!important;width:100%!important;max-width:100%!important}
  #page-orcamentos .orcamentos-rolagem table,
  #page-orcamentos table.tbl-cards{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;table-layout:fixed!important}
  #page-orcamentos #orc-tb{display:grid!important;grid-template-columns:1fr!important;gap:12px!important;width:100%!important;min-width:0!important}
  #page-orcamentos #orc-tb tr{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;margin:0!important;padding:14px!important;box-sizing:border-box!important;overflow:hidden!important}
  #page-orcamentos #orc-tb td{display:grid!important;grid-template-columns:minmax(76px,32%) minmax(0,1fr)!important;align-items:start!important;width:100%!important;min-width:0!important;max-width:100%!important;box-sizing:border-box!important;text-align:right!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important}
  #page-orcamentos #orc-tb td:first-child{display:block!important;text-align:left!important;font-size:var(--t-med)!important;line-height:1.35!important;padding:0 0 12px!important;overflow:visible!important}
  #page-orcamentos #orc-tb td:first-child::before{display:block!important;max-width:none!important;margin-bottom:5px!important}
  #page-orcamentos #orc-tb .orc-item-acoes{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;padding-top:12px!important}
  #page-orcamentos #orc-tb .orc-item-acoes::before{grid-column:1/-1!important;max-width:none!important}
  #page-orcamentos #orc-tb .orc-item-acoes .btn{width:100%!important;min-width:0!important;min-height:44px!important;font-size:var(--t-base)!important;margin:0!important}
  #page-orcamentos{padding-bottom:calc(120px + env(safe-area-inset-bottom))!important}

  /* Modais: cabeçalho e rodapé sempre alcançáveis. */
  .mo{padding:0!important;align-items:flex-end!important;overflow:hidden}
  .modal,.modal.wide,.modal-content,[role="dialog"]{width:100%!important;max-width:100%!important;max-height:92dvh!important;margin:0!important;padding:14px!important;border-radius:14px 14px 0 0!important;overflow-y:auto!important;overflow-x:hidden!important;padding-bottom:max(14px,env(safe-area-inset-bottom))!important}
  .mh{position:sticky;top:-14px;z-index:var(--z-local);background:var(--g1);padding:12px 0 10px;flex-wrap:wrap}
  .mf{position:sticky;bottom:calc(-14px - env(safe-area-inset-bottom));z-index:var(--z-local);background:var(--g1);padding:10px 0 max(10px,env(safe-area-inset-bottom));display:grid!important;grid-template-columns:1fr;gap:8px}
  .mf .btn,.mf button{width:100%;margin:0}

  /* Barras e formulários inline não podem manter filhos fora da tela. */
  .sh,.toolbar,.actions,.btn-row,.form-actions,[style*="display:flex"]{max-width:100%}
  .fr2,.fr3{grid-template-columns:1fr!important}
  img,svg,canvas,video{max-width:100%;height:auto}
}

/* Avatar da topbar: marca JSL sempre centralizada, sem herdar o flex dos dados do usuário. */
.premium-user>.premium-avatar{
  display:grid!important;
  place-items:center!important;
  align-items:center!important;
  justify-items:center!important;
  flex:0 0 42px!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  line-height:1!important;
  text-align:center!important;
  border-radius:50%!important;
}
.premium-user>.premium-avatar>span{
  display:block!important;
  position:static!important;
  width:auto!important;
  margin:0!important;
  color:var(--jsl-texto-sobre-amarelo)!important;
  font-family:var(--fonte-titulo,var(--fonte))!important;
  font-size:var(--t-peq)!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:-.4px!important;
  text-align:center!important;
}

/* V321 — marca JSL, carrosseis institucionais e fundo animado sem alterar o layout */
.cad-jsl-badge{
  display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;
  background:var(--y);border-radius:14px;font-family:'Barlow Condensed',sans-serif;
  font-size:var(--t-tit);font-weight:900;color:#1a1a1a;margin-bottom:14px;letter-spacing:-.5px;
}
#login-screen{isolation:isolate}
#login-screen>.lgb-wrap{position:relative;z-index:var(--z-local)}
.jsl-login-watermark{
  position:fixed;left:50%;top:50%;z-index:var(--z-zero);pointer-events:none;user-select:none;
  transform:translate(-50%,-50%) rotate(-8deg);font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(210px,42vw,640px);font-weight:900;line-height:.75;letter-spacing:-.08em;
  color:rgba(255,209,0,.018);-webkit-text-stroke:1px rgba(255,209,0,.075);
  text-shadow:0 0 55px rgba(255,209,0,.08),0 0 130px rgba(255,209,0,.045);
  animation:jslWatermarkPulse 12s ease-in-out infinite alternate;
}
@keyframes jslWatermarkPulse{
  0%{transform:translate(-52%,-50%) rotate(-9deg) scale(.96);opacity:.55}
  100%{transform:translate(-48%,-52%) rotate(-6deg) scale(1.04);opacity:1}
}
.jsl-cred-carousel{
  position:relative;width:100%;height:72px;overflow:hidden;border:1px solid rgba(255,209,0,.16);
  border-radius:10px;background:linear-gradient(110deg,rgba(255,209,0,.08),rgba(255,255,255,.025));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);box-sizing:border-box;
}
.login-cred-carousel{margin-bottom:16px}
.cad-cred-carousel{margin:16px auto 0;max-width:420px;text-align:left}
.jsl-cred-track{position:relative;width:100%;height:100%}
.jsl-cred-slide{
  position:absolute;inset:0;display:flex;align-items:center;gap:11px;padding:10px 38px 17px 12px;
  opacity:0;visibility:hidden;transform:translateX(14px);transition:opacity .45s ease,transform .45s ease;
  box-sizing:border-box;color:var(--tx);pointer-events:none;
}
.jsl-cred-slide.is-active{opacity:1;visibility:visible;transform:translateX(0);pointer-events:auto}
.jsl-cred-slide>span:last-child{display:flex;flex-direction:column;min-width:0;line-height:1.18}
.jsl-cred-slide strong{font-size:var(--t-peq);color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jsl-cred-slide small{font-size:var(--t-micro);color:var(--mt);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jsl-cred-icon{
  flex:0 0 36px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--y);
  color:#151515;font-size:var(--t-micro);font-weight:900;letter-spacing:-.2px;
}
.jsl-cred-dots{position:absolute;z-index:var(--z-local);left:59px;bottom:7px;display:flex;gap:4px}
.jsl-cred-dot{width:13px;height:3px;padding:0;border:0;border-radius:4px;background:rgba(255,255,255,.18);cursor:pointer}
.jsl-cred-dot.is-active{background:var(--y)}
@media (max-width:767px){
  .jsl-cred-carousel{height:68px}
  .login-cred-carousel{margin-bottom:12px}
  .jsl-cred-slide{padding:8px 28px 15px 10px;gap:9px}
  .jsl-cred-slide strong{font-size:var(--t-mini)}
  .jsl-cred-slide small{font-size:var(--t-micro)}
  .jsl-cred-icon{flex-basis:32px;height:28px;font-size:var(--t-micro)}
  .jsl-cred-dots{left:51px;bottom:6px}
}
@media (prefers-reduced-motion:reduce){
  .jsl-login-watermark{animation:none}
  .jsl-cred-slide{transition:none}
}

@media (max-width:767px){
  #page-estoque .c2-entry{grid-template-columns:1fr}
  #page-estoque .c2-entry .c2-add{grid-column:1}
  #page-estoque .cm-add-row{grid-template-columns:1fr}
  #page-estoque .cm-add-row>*{grid-column:1!important;width:100%!important}
}

/* JSL V324 — base móvel consolidada.
   Regra: no documento móvel não existe arrasto lateral; dados operacionais
   viram cartões e os fluxos seguem uma única coluna. */

@media (max-width:767px){
  html,body,.main,.content,.page,.pg,.section{
    width:100%!important;max-width:100%!important;min-width:0!important;
    overflow-x:visible!important;
  }
  body{font-size:var(--t-base);line-height:1.45}
  .content{padding:clamp(10px,3.4vw,16px)!important;padding-bottom:calc(92px + env(safe-area-inset-bottom))!important}
  .page>*{min-width:0!important;max-width:100%!important}
  .page *,.modal *{min-width:0}
  img,svg,video,canvas{max-width:100%!important}

  /* Tipografia mínima legível. Inputs em 16 px impedem zoom no iPhone. */
  input:not([type="checkbox"]):not([type="radio"]),select,textarea,.fc{
    width:100%!important;max-width:100%!important;min-width:0!important;
    min-height:46px!important;font-size:var(--t-med)!important;line-height:1.3!important;
  }
  .btn,button:not(.cal-day):not(.icon-btn){min-height:44px;font-size:var(--t-base);line-height:1.2;white-space:normal}
  .btn.bsm,.bsm{min-height:42px!important;font-size:var(--t-peq)!important}
  .kpi-lbl,.premium-metric-card small,.orc-salvo-meta,.tag{font-size:var(--t-peq)!important}
  .st,.page-title,.premium-panel h2{font-size:var(--t-gr)!important;line-height:1.25}

  /* Cabeçalhos, filtros, ações e grades seguem a largura útil. */
  .sh,.toolbar,.filters,.actions,.actions-row,.btn-row,.form-actions,
  .premium-welcome-row,.premium-panel-head{
    display:flex;flex-wrap:wrap!important;align-items:stretch!important;gap:8px!important;width:100%;min-width:0;
  }
  .sh>*,.toolbar>*,.filters>*,.actions>*,.btn-row>*,.form-actions>*{min-width:0!important}
  .sh>.btn,.toolbar>.btn,.actions>.btn,.btn-row>.btn,.form-actions>.btn{flex:1 1 140px;width:auto!important}
  .g2,.g3,.g4,.g5,.fr2,.fr3,.form-grid,.grid-2,.grid-3,.grid-4,
  .premium-metric-grid,.premium-main-grid,.premium-bottom-grid,.kpi-strip,
  [style*="grid-template-columns:1fr 360px"],[style*="grid-template-columns: 1fr 360px"]{
    grid-template-columns:1fr!important;
  }
  [style*="min-width:"]{max-width:100%}

  /* Tabelas operacionais viram cartões; não há wrapper rolável. */
  #page-clientes .card,#page-obras .card,#page-orcamentos .card,#page-contratos .card,
  #page-recibos .card,#page-financeiro .card,#page-compras .card,
  .table-wrap,.tbl-wrap,.jsl-rolagem-lateral,.orcamentos-rolagem{
    width:100%!important;max-width:100%!important;overflow-x:visible!important;
  }
  #page-clientes table,#page-obras table,#page-orcamentos table,#page-contratos table,
  #page-recibos table,#page-financeiro table,#page-compras table,
  .modal table,.modal table.tbl-cards,.modal .table-responsive table{
    display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;
  }
  #page-clientes thead,#page-obras thead,#page-orcamentos thead,#page-contratos thead,
  #page-recibos thead,#page-financeiro thead,#page-compras thead,
  .modal table thead,.modal table.tbl-cards thead,.modal .table-responsive thead{display:none!important}
  #page-clientes tbody,#page-obras tbody,#page-orcamentos tbody,#page-contratos tbody,
  #page-recibos tbody,#page-financeiro tbody,#page-compras tbody,
  .modal table tbody,.modal table.tbl-cards tbody,.modal .table-responsive tbody{
    display:grid!important;grid-template-columns:1fr!important;gap:12px!important;width:100%!important;min-width:0!important;
  }
  #page-clientes tbody>tr,#page-obras tbody>tr,#page-orcamentos tbody>tr,#page-contratos tbody>tr,
  #page-recibos tbody>tr,#page-financeiro tbody>tr,#page-compras tbody>tr,
  .modal table tbody>tr,.modal table.tbl-cards tbody>tr,.modal .table-responsive tbody>tr{
    display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;
    margin:0!important;padding:13px!important;border:1px solid var(--bd)!important;border-radius:12px!important;
    background:var(--g2)!important;box-shadow:0 8px 20px rgba(0,0,0,.12);box-sizing:border-box!important;
  }
  #page-clientes tbody>tr>td,#page-obras tbody>tr>td,#page-orcamentos tbody>tr>td,#page-contratos tbody>tr>td,
  #page-recibos tbody>tr>td,#page-financeiro tbody>tr>td,#page-compras tbody>tr>td,
  .modal table td,.modal table.tbl-cards td,.modal .table-responsive td{
    display:grid!important;grid-template-columns:minmax(84px,34%) minmax(0,1fr)!important;
    align-items:start!important;gap:10px!important;width:100%!important;min-width:0!important;max-width:100%!important;
    padding:7px 0!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.055)!important;
    text-align:right!important;white-space:normal!important;overflow-wrap:anywhere!important;word-break:break-word!important;
    font-size:var(--t-peq)!important;box-sizing:border-box!important;
  }
  #page-clientes td::before,#page-obras td::before,#page-orcamentos td::before,#page-contratos td::before,
  #page-recibos td::before,#page-financeiro td::before,#page-compras td::before,
  .modal table td::before,.modal table.tbl-cards td::before,.modal .table-responsive td::before{
    content:attr(data-label);display:block;color:var(--mt);font-size:var(--t-mini);font-weight:800;text-transform:uppercase;
    letter-spacing:.03em;text-align:left;
  }
  td.jsl-mobile-actions,.orc-item-acoes{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;
    padding-top:11px!important;border-bottom:0!important;
  }
  td.jsl-mobile-actions::before,.orc-item-acoes::before{grid-column:1/-1}
  td.jsl-mobile-actions .btn,.orc-item-acoes .btn{width:100%!important;min-width:0!important;margin:0!important}
  .jsl-progress-cell>div{width:100%;min-width:0}
  td[colspan]{display:block!important;text-align:center!important}
  td[colspan]::before{display:none!important}

  /* Colaboradores: abas, filtros, lançamentos e ações sem fileiras apertadas. */
  #page-funcionarios .fp-tabs{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:6px!important;margin:0 0 12px!important;border:0!important;white-space:normal!important;overflow-x:visible!important;
  }
  #page-funcionarios .fp-tab{min-width:0!important;min-height:44px!important;padding:8px!important;text-align:center}
  #page-funcionarios .func-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  #page-funcionarios .func-actions .btn{width:100%!important;min-height:44px!important}
  #page-funcionarios .fp-dia-item,#page-funcionarios .fp-met-item,#page-funcionarios .saldo-row-v119{
    display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:7px 10px!important;
    align-items:center!important;padding:10px 0!important;font-size:var(--t-peq)!important;
  }
  #page-funcionarios .fp-dia-item>*,#page-funcionarios .fp-met-item>*,#page-funcionarios .saldo-row-v119>*{min-width:0;max-width:100%}
  #page-funcionarios [style*="display:flex"][style*="gap:6px"],
  #page-funcionarios [style*="display:flex"][style*="gap:8px"]{flex-wrap:wrap!important}
  #page-funcionarios [style*="flex:1"].fc,#page-funcionarios [style*="flex:2"].fc{flex:1 1 100%!important}

  /* Financeiro, Compras, Recibos e Funil: cards e ações em sequência clara. */
  #page-financeiro .gasto-row{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;gap:10px!important;align-items:center!important}
  #page-compras .orc-salvo-card,#page-recibos .orc-salvo-card,#page-funil .orc-salvo-card{
    display:grid!important;grid-template-columns:1fr!important;gap:10px!important;padding:13px!important;
  }
  #page-compras .orc-salvo-actions,#page-recibos .orc-salvo-actions,#page-funil .orc-salvo-actions{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;width:100%!important;
  }
  #page-compras .orc-salvo-actions .btn,#page-recibos .orc-salvo-actions .btn,#page-funil .orc-salvo-actions .btn{width:100%!important;min-width:0!important}
  #page-funil .orc-salvo-total{font-size:var(--t-gr);text-align:left;white-space:normal}

  /* Checkout: etapas verticais, sem faixa horizontal. */
  .ass-checkout-progress{
    display:grid!important;grid-template-columns:1fr!important;gap:8px!important;margin:18px 0!important;
    overflow-x:visible!important;
  }
  .ass-checkout-progress-item{
    min-width:0!important;min-height:42px!important;padding:10px 10px 10px 46px!important;
    border:1px solid var(--bd);border-radius:10px;background:rgba(255,255,255,.025);font-size:var(--t-peq)!important;text-align:left;
  }
  .ass-checkout-progress-item:before{left:20px!important;top:50%!important;transform:translate(-50%,-50%)!important}
  .ass-checkout-progress-item:after{display:none!important}
  .ass-checkout-summary{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .ass-checkout-summary>div{text-align:left!important}
  .ass-mp-actions,.ass-payment-methods{grid-template-columns:1fr!important}

  /* Modais e edições ocupam a viewport; nada fica cortado à direita. */
  .mo{padding:0!important;align-items:flex-end!important}
  .modal,.modal.wide,.modal-content,[role="dialog"]{
    width:100%!important;max-width:100%!important;min-width:0!important;max-height:92dvh!important;
    margin:0!important;padding:14px!important;border-radius:14px 14px 0 0!important;
    overflow-y:auto!important;overflow-x:visible!important;
  }
  .modal form,.modal .fr2,.modal .fr3,.modal [class*="grid"]{max-width:100%;min-width:0}
  .mh{position:sticky;top:-14px;z-index:var(--z-local);background:var(--g1);flex-wrap:wrap!important}
  .mf{position:sticky;bottom:-14px;z-index:var(--z-local);background:var(--g1);display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .mf .btn,.mf button{width:100%!important}

  /* Login/cadastro mantêm o desenho, mas nunca passam da viewport. */
  #login-screen,#cadastro-screen,#colab-screen,#assinatura-screen{max-width:100dvw!important}
  #login-screen>.lgb-wrap,#cadastro-screen>div,#colab-screen>div,#ass-screen-inner{width:100%!important;max-width:100%!important;min-width:0!important}
  .jsl-cred-slide strong,.jsl-cred-slide small{white-space:normal!important;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
}

@media (max-width:767px){
  .content{padding-inline:10px!important}
  .card,.panel,.box,.mc,.premium-panel,.calc-panel{padding:11px!important}
  td.jsl-mobile-actions,.orc-item-acoes,
  #page-funcionarios .func-actions,#page-compras .orc-salvo-actions,
  #page-recibos .orc-salvo-actions,#page-funil .orc-salvo-actions{grid-template-columns:1fr!important}
  #page-funcionarios .fp-tabs{grid-template-columns:1fr!important}
}

@media (min-width:768px) and (max-width:1023px){
  .premium-main-grid,.premium-bottom-grid{grid-template-columns:1fr!important}
  .modal,.modal-content,[role="dialog"]{width:min(720px,calc(100dvw - 40px));max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* JSL V325 — correções finais de especificidade e comportamento móvel.
   Esta camada não mascara transbordamento: corrige os elementos na origem. */

/* O seletor legado #login-screen>div não pode colocar a marca-d'água no fluxo. */
#login-screen>.jsl-login-watermark{
  position:fixed!important;left:50%!important;top:50%!important;z-index:var(--z-zero)!important;
  width:auto!important;max-width:none!important;margin:0!important;display:block!important;
  pointer-events:none!important;
}
#login-screen>.lgb-wrap{position:relative!important;z-index:var(--z-local)!important}
#login-screen .lgb-logo-row,
#login-screen #login-box-dono,
#login-screen #login-box-colab,
#login-screen .lgb-footer{order:initial!important}

/* Indicadores decorativos: não herdam tamanho e padding de botões comuns. */
#login-screen .jsl-cred-dot,
#cadastro-screen .jsl-cred-dot{
  display:block!important;width:13px!important;height:3px!important;
  min-width:13px!important;min-height:3px!important;max-width:13px!important;max-height:3px!important;
  padding:0!important;margin:0!important;border:0!important;line-height:0!important;
}

/* Mostrar senha: área de toque real de 44 x 44 em todas as telas. */
#login-screen #login-pwd-eye{
  width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;
  right:0!important;top:50%!important;transform:translateY(-50%)!important;
  display:grid!important;place-items:center!important;padding:0!important;border-radius:8px!important;
}

/* O texto institucional pode usar duas linhas também no desktop. */
#login-screen .jsl-cred-slide strong,
#login-screen .jsl-cred-slide small,
#cadastro-screen .jsl-cred-slide strong,
#cadastro-screen .jsl-cred-slide small{
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
  display:-webkit-box!important;-webkit-box-orient:vertical!important;-webkit-line-clamp:2;
  line-clamp:2;
}

/* JSL V326 — fundo luminoso do login e carrossel institucional real.
   Camada visual isolada: não altera campos, autenticação ou dimensões do painel. */

#login-screen{
  isolation:isolate;
}

#login-screen>.jsl-login-watermark{
  position:fixed!important;
  z-index:var(--z-zero)!important;
  inset:auto!important;
  left:43%!important;
  top:51%!important;
  width:92vw!important;
  max-width:1500px!important;
  margin:0!important;
  display:block!important;
  text-align:center!important;
  white-space:nowrap!important;
  pointer-events:none!important;
  user-select:none!important;
  font-family:'Barlow Condensed',sans-serif!important;
  font-size:clamp(260px,38vw,720px)!important;
  font-weight:900!important;
  line-height:.72!important;
  letter-spacing:-.095em!important;
  color:rgba(255,209,0,.045)!important;
  -webkit-text-stroke:1px rgba(255,209,0,.12);
  text-shadow:
    0 0 22px rgba(255,209,0,.10),
    0 0 70px rgba(255,209,0,.08),
    0 0 150px rgba(255,180,0,.06)!important;
  filter:blur(.25px);
  transform:translate3d(-50%,-50%,0) rotate(-10deg) scale(.96);
  transform-origin:center;
  animation:jslMarcaLuzFundo 9s ease-in-out infinite!important;
  will-change:transform,opacity,filter;
}

/* Halo amplo, sempre atrás do painel. */
#login-screen>.jsl-login-watermark::after{
  content:'';
  position:absolute;
  z-index:var(--z-atras);
  left:50%;
  top:50%;
  width:72%;
  height:58%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,209,0,.12) 0%,rgba(255,190,0,.045) 42%,transparent 72%);
  filter:blur(42px);
  transform:translate(-50%,-50%);
  animation:jslHaloLuzFundo 7s ease-in-out infinite;
}

@keyframes jslMarcaLuzFundo{
  0%,100%{
    opacity:.66;
    filter:blur(.25px) brightness(.92);
    transform:translate3d(-52%,-50%,0) rotate(-10deg) scale(.96);
  }
  50%{
    opacity:1;
    filter:blur(.1px) brightness(1.18);
    transform:translate3d(-48%,-51.5%,0) rotate(-7deg) scale(1.025);
  }
}

@keyframes jslHaloLuzFundo{
  0%,100%{opacity:.55;transform:translate(-52%,-50%) scale(.9)}
  50%{opacity:1;transform:translate(-48%,-50%) scale(1.08)}
}

/* Mantém apenas o anúncio ativo visível e impede rastros entre slides. */
#login-screen .jsl-cred-track{
  isolation:isolate;
}
#login-screen .jsl-cred-slide:not(.is-active){
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
#login-screen .jsl-cred-slide.is-active{
  opacity:1!important;
  visibility:visible!important;
  transform:translate3d(0,0,0)!important;
}

@media (max-width:767px){
  #login-screen>.jsl-login-watermark{
    left:38%!important;
    top:48%!important;
    width:100vw!important;
    font-size:clamp(190px,64vw,360px)!important;
    letter-spacing:-.105em!important;
    color:rgba(255,209,0,.038)!important;
    -webkit-text-stroke:1px rgba(255,209,0,.10);
    text-shadow:0 0 18px rgba(255,209,0,.09),0 0 58px rgba(255,209,0,.07)!important;
  }
}

@media (prefers-reduced-motion:reduce){
  #login-screen>.jsl-login-watermark,
  #login-screen>.jsl-login-watermark::after{
    animation:none!important;
  }
}

/* JSL V327 — Painel Superadmin sem textos ou ações cortadas.
   Correção visual isolada; funções e permissões permanecem intactas. */

#m-superadmin .modal.wide{
  width:min(960px,calc(100vw - 32px));
  max-width:960px!important;
}

#m-superadmin #sa-lista{
  width:100%;
  max-width:100%;
  min-width:0;
}

#m-superadmin .sa-table{
  width:100%;
  max-width:100%;
  table-layout:fixed;
  border-collapse:collapse;
}

#m-superadmin .sa-table th,
#m-superadmin .sa-table td{
  min-width:0;
  overflow-wrap:anywhere;
  word-break:normal;
}

#m-superadmin .sa-table th:nth-child(1){width:20%}
#m-superadmin .sa-table th:nth-child(2){width:13%}
#m-superadmin .sa-table th:nth-child(3){width:12%}
#m-superadmin .sa-table th:nth-child(4){width:9%}
#m-superadmin .sa-table th:nth-child(5){width:11%}
#m-superadmin .sa-table th:nth-child(6){width:12%}
#m-superadmin .sa-table th:nth-child(7){width:23%}

#m-superadmin .sa-table td.sa-actions{
  white-space:normal!important;
}

#m-superadmin .sa-actions-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  align-content:center;
}

#m-superadmin .sa-actions-grid .btn{
  width:100%;
  min-width:0;
  margin:0!important;
  padding:8px 5px;
  white-space:normal;
  justify-content:center;
}

#m-superadmin .sa-actions-grid .btn:last-child{
  grid-column:1/-1;
}

#m-superadmin #sa-lista>div:first-child .btn{
  max-width:100%;
  white-space:normal;
}

@media (max-width:1023px){
  #m-superadmin .modal.wide{
    width:calc(100vw - 24px);
    max-height:calc(100dvh - 24px);
    padding:16px;
  }

  #m-superadmin .jsl-grade-inline{
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
  }

  #m-superadmin #sa-lista{
    max-height:none!important;
    overflow-y:visible!important;
  }

  #m-superadmin .sa-table,
  #m-superadmin .sa-table tbody,
  #m-superadmin .sa-table tr,
  #m-superadmin .sa-table td{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
  }

  #m-superadmin .sa-table thead{display:none!important}

  #m-superadmin .sa-table tr{
    margin:0 0 12px!important;
    padding:13px!important;
    border:1px solid var(--bd)!important;
    border-radius:12px!important;
    background:var(--g2)!important;
  }

  #m-superadmin .sa-table td{
    padding:8px 0!important;
    border:0!important;
    white-space:normal!important;
    text-align:left!important;
  }

  #m-superadmin .sa-table td::before{
    content:attr(data-label)!important;
    display:block!important;
    margin:0 0 4px!important;
    color:var(--mt)!important;
    font-size:var(--t-micro)!important;
    font-weight:900!important;
    letter-spacing:.5px!important;
    text-transform:uppercase!important;
  }

  #m-superadmin .sa-table td.sa-actions{
    margin-top:5px!important;
    padding-top:12px!important;
    border-top:1px solid var(--bd)!important;
  }

  #m-superadmin .sa-actions-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }

  #m-superadmin .sa-actions-grid .btn:last-child{
    grid-column:auto;
  }
}

@media (max-width:767px){
  #m-superadmin .modal.wide{
    width:calc(100vw - 16px);
    padding:12px;
  }

  #m-superadmin .mh{
    align-items:flex-start;
    gap:10px;
  }

  #m-superadmin .mh>div{
    flex-shrink:0;
  }

  #m-superadmin .jsl-grade-inline{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }

  #m-superadmin #sa-lista>div:first-child,
  #m-superadmin #sa-lista>div:first-child .btn{
    width:100%;
  }

  #m-superadmin .sa-actions-grid{
    grid-template-columns:1fr!important;
  }

  #m-superadmin .sa-actions-grid .btn{
    min-height:44px;
  }
}

/* JSL V328 — carrossel comercial da tela pública de cadastro. */

#cadastro-screen #cad-cred-carousel{
  position:relative;
  height:104px;
  margin:20px auto 0;
  border:1px solid rgba(255,209,0,.42);
  border-radius:14px;
  background:
    radial-gradient(circle at 14% 50%,rgba(255,209,0,.14),transparent 34%),
    linear-gradient(120deg,rgba(255,209,0,.075),rgba(255,255,255,.025) 58%,rgba(255,209,0,.05));
  box-shadow:0 14px 34px rgba(0,0,0,.34),0 0 24px rgba(255,209,0,.06);
}

#cadastro-screen #cad-cred-carousel::after{
  content:'';
  position:absolute;
  z-index:var(--z-local);
  top:0;
  bottom:0;
  width:30%;
  left:-38%;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  transform:skewX(-18deg);
  animation:jslVendaVarredura 5.8s ease-in-out infinite;
}

#cadastro-screen #cad-cred-carousel .jsl-cred-slide{
  z-index:var(--z-local);
  padding:13px 24px 21px 14px;
  gap:13px;
  text-align:left;
}

#cadastro-screen #cad-cred-carousel .jsl-cred-icon{
  width:54px;
  height:54px;
  flex:0 0 54px;
  border-radius:13px;
  font-size:var(--t-peq);
  font-weight:900;
  background:var(--y);
  color:#171717;
  box-shadow:0 8px 20px rgba(255,209,0,.22);
}

#cadastro-screen #cad-cred-carousel .jsl-cred-slide>span:last-child{
  gap:2px;
  justify-content:center;
}

#cadastro-screen #cad-cred-carousel .jsl-cred-slide em{
  display:block;
  margin-bottom:2px;
  color:var(--y);
  font-size:var(--t-micro);
  line-height:1.1;
  font-style:normal;
  font-weight:900;
  letter-spacing:.9px;
}

#cadastro-screen #cad-cred-carousel .jsl-cred-slide strong{
  color:#fff;
  font-family:'Barlow Condensed',sans-serif;
  font-size:var(--t-med);
  line-height:1.08;
  font-weight:900;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

#cadastro-screen #cad-cred-carousel .jsl-cred-slide small{
  margin-top:3px;
  color:#b9bec5;
  font-size:var(--t-micro);
  line-height:1.25;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
}

#cadastro-screen #cad-cred-carousel .jsl-cred-dots{
  z-index:var(--z-local);
  left:82px;
  bottom:9px;
  gap:5px;
}

#cadastro-screen #cad-cred-carousel .jsl-cred-dot.is-active{
  width:24px!important;
  max-width:24px!important;
  background:var(--y)!important;
}

@keyframes jslVendaVarredura{
  0%,56%{left:-38%;opacity:0}
  62%{opacity:1}
  82%,100%{left:112%;opacity:0}
}

@media (max-width:767px){
  #cadastro-screen #cad-cred-carousel{
    height:118px;
    margin-top:16px;
  }
  #cadastro-screen #cad-cred-carousel .jsl-cred-slide{
    padding:12px 12px 23px 10px;
    gap:10px;
  }
  #cadastro-screen #cad-cred-carousel .jsl-cred-icon{
    width:46px;
    height:46px;
    flex-basis:46px;
    font-size:var(--t-mini);
  }
  #cadastro-screen #cad-cred-carousel .jsl-cred-slide strong{font-size:var(--t-base)}
  #cadastro-screen #cad-cred-carousel .jsl-cred-slide small{font-size:var(--t-micro)}
  #cadastro-screen #cad-cred-carousel .jsl-cred-dots{left:68px;bottom:8px}
}

@media (prefers-reduced-motion:reduce){
  #cadastro-screen #cad-cred-carousel::after{animation:none}
}

/* JSL V329 — Pix Copia e Cola como ação principal do checkout. */

.ass-pix-direto-titulo{
  color:#111;
  font-family:'Barlow Condensed',sans-serif;
  font-size:var(--t-tit);
  line-height:1;
  font-weight:900;
  text-transform:uppercase;
  margin:0 0 7px;
}

.ass-pix-direto-sub{
  max-width:380px;
  margin:0 auto 14px;
  color:#555;
  font-size:var(--t-peq);
  line-height:1.45;
}

#ass-mp-codigo.ass-mp-code{
  max-height:96px;
  min-height:72px;
  overflow:auto;
  word-break:break-all;
  user-select:all;
  border:2px solid #d7d7d7;
  background:#f5f6f7;
  color:#353b42;
  font-size:var(--t-mini);
  line-height:1.45;
}

#ass-mp-btn-copy{
  background:#009ee3;
  color:#fff;
  font-size:var(--t-base);
  min-height:54px;
}

.ass-mp-qr-toggle{
  width:100%;
  min-height:46px;
  margin:14px 0 0;
  border:1px solid #c9c9c9;
  border-radius:9px;
  background:#fff;
  color:#333;
  font-family:inherit;
  font-size:var(--t-peq);
  font-weight:800;
  cursor:pointer;
}

.ass-mp-qr-toggle:hover{
  border-color:#777;
  background:#f5f5f5;
}

.ass-mp-qr-area{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #ddd;
}

.ass-mp-qr-area[hidden]{display:none!important}

.ass-mp-qr-area .ass-mp-qr{
  width:min(230px,72vw);
  margin:0 auto 10px;
}

@media (max-width:767px){
  .ass-pix-direto-titulo{font-size:var(--t-gr)}
  .ass-mp-actions{grid-template-columns:1fr!important}
  #ass-mp-codigo.ass-mp-code{min-height:86px}
}

/* JSL V330 — assinatura lateral futurista da tela de login.
   Camada exclusivamente visual: não altera autenticação, campos ou fluxos. */

/* A marca passa a ocupar uma área lateral própria: nunca fica atrás do formulário. */
#login-screen>.jsl-login-watermark{
  position:fixed!important;
  z-index:var(--z-zero)!important;
  inset:50% auto auto calc(50% - 720px)!important;
  width:390px!important;
  max-width:none!important;
  height:360px!important;
  margin:0!important;
  padding:54px 42px 42px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  overflow:visible!important;
  text-align:left!important;
  white-space:normal!important;
  pointer-events:none!important;
  color:#ffd100!important;
  -webkit-text-stroke:0!important;
  text-shadow:none!important;
  filter:none!important;
  transform:translateY(-50%)!important;
  animation:jslSideFloat 8s ease-in-out infinite!important;
  border:1px solid rgba(255,209,0,.16);
  border-radius:34px;
  background:linear-gradient(145deg,rgba(255,209,0,.055),rgba(12,15,18,.18) 48%,rgba(255,209,0,.025));
  box-shadow:inset 0 0 45px rgba(255,209,0,.035),0 0 70px rgba(255,209,0,.045);
}

#login-screen>.jsl-login-watermark::before{
  content:'';
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:linear-gradient(100deg,transparent 14%,rgba(255,209,0,.18) 48%,transparent 72%);
  opacity:.45;
  transform:translateX(-70%);
  animation:jslSideScan 6.5s ease-in-out infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  padding:1px;
}

#login-screen>.jsl-login-watermark::after{
  content:'';
  position:absolute;
  z-index:var(--z-atras);
  inset:12% -16% 3% -12%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,209,0,.16),rgba(255,190,0,.045) 43%,transparent 72%);
  filter:blur(32px);
  transform:none;
  animation:jslSideHalo 4.8s ease-in-out infinite;
}

#login-screen .jsl-side-brand-main{
  position:relative;
  display:block;
  font-family:'Barlow Condensed',sans-serif;
  font-size:clamp(132px,10vw,188px);
  font-weight:900;
  line-height:.68;
  letter-spacing:-.045em;
  color:#ffd100;
  text-shadow:0 0 10px rgba(255,209,0,.75),0 0 34px rgba(255,209,0,.38),0 0 80px rgba(255,177,0,.22);
  animation:jslSidePulse 3.4s ease-in-out infinite;
}

#login-screen .jsl-side-brand-system{
  display:block;
  margin-top:28px;
  padding-left:6px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:var(--t-marca-sm);
  font-weight:800;
  line-height:1;
  letter-spacing:.22em;
  color:#fff;
  text-shadow:0 0 16px rgba(255,255,255,.22),0 0 30px rgba(255,209,0,.18);
}

#login-screen .jsl-side-brand-tag{
  margin:15px 0 0 8px;
  font-family:'Barlow',sans-serif;
  font-size:var(--t-mini);
  font-weight:800;
  letter-spacing:.34em;
  color:rgba(255,255,255,.58);
}

#login-screen .jsl-side-brand-line{
  display:block;
  width:210px;
  height:2px;
  margin:20px 0 0 8px;
  border-radius:99px;
  background:linear-gradient(90deg,#ffd100,rgba(255,209,0,.35),transparent);
  box-shadow:0 0 12px rgba(255,209,0,.65);
  transform-origin:left center;
  animation:jslSideLine 3.4s ease-in-out infinite;
}

#login-screen .jsl-side-brand-signal{display:flex;gap:8px;margin:14px 0 0 8px}
#login-screen .jsl-side-brand-signal i{
  width:6px;height:6px;border-radius:50%;background:#ffd100;
  box-shadow:0 0 10px rgba(255,209,0,.8);animation:jslSignal 1.5s ease-in-out infinite;
}
#login-screen .jsl-side-brand-signal i:nth-child(2){animation-delay:.22s}
#login-screen .jsl-side-brand-signal i:nth-child(3){animation-delay:.44s}

/* O SVG original mantém proporção e não recebe deformação das camadas antigas. */
#login-screen #login-sigla{
  width:60px!important;height:60px!important;min-width:60px!important;min-height:60px!important;
  padding:0!important;display:grid!important;place-items:center!important;overflow:hidden!important;
  border-radius:15px!important;transform:none!important;background:transparent!important;
}
#login-screen #login-sigla img{
  display:block!important;width:60px!important;height:60px!important;max-width:60px!important;
  object-fit:contain!important;transform:none!important;filter:none!important;
}

@keyframes jslSideFloat{0%,100%{transform:translateY(-50%) translate3d(0,0,0)}50%{transform:translateY(-50%) translate3d(0,-9px,0)}}
@keyframes jslSidePulse{0%,100%{opacity:.78;filter:brightness(.88)}45%{opacity:1;filter:brightness(1.22)}55%{opacity:.9;filter:brightness(1.04)}}
@keyframes jslSideHalo{0%,100%{opacity:.48;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
@keyframes jslSideLine{0%,100%{transform:scaleX(.5);opacity:.45}50%{transform:scaleX(1);opacity:1}}
@keyframes jslSideScan{0%,22%{transform:translateX(-75%);opacity:0}48%{opacity:.8}75%,100%{transform:translateX(75%);opacity:0}}
@keyframes jslSignal{0%,100%{opacity:.25;transform:scale(.72)}50%{opacity:1;transform:scale(1.15)}}

/* Em notebooks estreitos, mantém a marca na lateral com escala compacta. */
@media (min-width:1024px) and (max-width:1439px){
  #login-screen>.jsl-login-watermark{left:24px!important;width:245px!important;height:290px!important;padding:40px 28px!important}
  #login-screen .jsl-side-brand-main{font-size:var(--t-marca-lg)}
  #login-screen .jsl-side-brand-system{font-size:var(--t-hero);margin-top:22px}
  #login-screen .jsl-side-brand-tag{font-size:var(--t-micro);letter-spacing:.22em}
  #login-screen .jsl-side-brand-line{width:150px}
}

/* Telefones e tablets priorizam acesso: a assinatura extra sai, a logo oficial permanece. */
@media (max-width:1023px){
  #login-screen>.jsl-login-watermark{display:none!important}
}

@media (prefers-reduced-motion:reduce){
  #login-screen>.jsl-login-watermark,
  #login-screen>.jsl-login-watermark::before,
  #login-screen>.jsl-login-watermark::after,
  #login-screen .jsl-side-brand-main,
  #login-screen .jsl-side-brand-line,
  #login-screen .jsl-side-brand-signal i{animation:none!important}
}

/* JSL V331 — refinamento visual das dez melhorias do login.
   Apenas apresentação; nenhuma regra funcional é modificada. */

/* 1, 3 e 9 — marca e formulário passam a compor um único conjunto central. */
@media (min-width:1440px){
  #login-screen>.lgb-wrap{padding-left:340px!important}
  #login-screen>.jsl-login-watermark{
    left:calc(50% - 555px)!important;
    width:325px!important;
    height:310px!important;
    padding:42px 38px!important;
  }
}

/* 2 — a assinatura superior permanece oficial, porém mais discreta. */
#login-screen #login-sigla{
  width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important;
  border-radius:14px!important;box-shadow:0 0 26px rgba(255,209,0,.22)!important;
}
#login-screen #login-sigla img{width:52px!important;height:52px!important;max-width:52px!important}
#login-screen .lgb-logo-row{gap:7px!important;margin-bottom:0!important}
#login-screen .lgb-nome{font-size:var(--t-gr)!important;color:rgba(255,255,255,.9)!important;text-shadow:0 0 16px rgba(255,209,0,.12)}
#login-screen .lgb-slogan{font-size:var(--t-mini)!important;color:rgba(225,229,234,.62)!important}

/* 4 e 5 — marca lateral mais refinada, legível e sem brilho permanente excessivo. */
#login-screen .jsl-side-brand-main{
  font-size:var(--t-marca-xl)!important;
  letter-spacing:-.035em!important;
  text-shadow:0 0 8px rgba(255,209,0,.48),0 0 28px rgba(255,209,0,.23),0 0 60px rgba(255,177,0,.12)!important;
  animation:jslPremiumBreath 4.8s ease-in-out infinite!important;
}
#login-screen .jsl-side-brand-system{
  margin-top:26px!important;
  font-size:var(--t-marca-sm)!important;
  letter-spacing:.12em!important;
  color:rgba(255,255,255,.94)!important;
}
#login-screen .jsl-side-brand-tag{margin-top:12px!important;letter-spacing:.25em!important;color:rgba(235,238,242,.66)!important}
#login-screen>.jsl-login-watermark{
  border-color:rgba(255,209,0,.12)!important;
  background:linear-gradient(145deg,rgba(255,209,0,.035),rgba(12,15,18,.10) 52%,rgba(255,209,0,.018))!important;
  box-shadow:inset 0 0 36px rgba(255,209,0,.025),0 0 50px rgba(255,209,0,.03)!important;
}
#login-screen>.jsl-login-watermark::after{
  content:''!important;
  position:absolute!important;
  z-index:var(--z-atras)!important;
  left:72%!important;top:53%!important;
  width:285px!important;height:2px!important;
  border-radius:99px!important;
  background:linear-gradient(90deg,rgba(255,209,0,.7),rgba(255,209,0,.15),transparent)!important;
  box-shadow:0 0 12px rgba(255,209,0,.34)!important;
  filter:none!important;
  transform-origin:left center!important;
  animation:jslConnectionPulse 5s ease-in-out infinite!important;
}

/* 6 — anúncio mais vendedor, maior e com hierarquia clara. */
#login-screen #login-cred-carousel{
  height:88px!important;
  margin-bottom:18px!important;
  border-color:rgba(255,209,0,.32)!important;
  background:linear-gradient(115deg,rgba(255,209,0,.09),rgba(255,255,255,.025) 58%,rgba(255,209,0,.035))!important;
  box-shadow:inset 0 0 28px rgba(255,209,0,.025),0 10px 26px rgba(0,0,0,.18)!important;
}
#login-screen #login-cred-carousel .jsl-cred-slide{padding:12px 14px 20px!important;gap:12px!important}
#login-screen #login-cred-carousel .jsl-cred-icon{width:46px!important;height:46px!important;flex:0 0 46px!important;font-size:var(--t-mini)!important;border-radius:11px!important}
#login-screen #login-cred-carousel .jsl-cred-slide strong{font-size:var(--t-base)!important;line-height:1.14!important;color:#fff!important;white-space:normal!important}
#login-screen #login-cred-carousel .jsl-cred-slide small{font-size:var(--t-micro)!important;line-height:1.25!important;color:rgba(231,235,240,.68)!important;white-space:normal!important}

/* 7 e 8 — contraste melhor e painel verticalmente mais eficiente. */
#login-screen .lgb-panel{padding:19px 20px!important}
#login-screen .lgb-titulo{font-size:var(--t-med)!important;margin-bottom:2px!important}
#login-screen .lgb-sub{color:rgba(226,230,235,.67)!important;margin-bottom:14px!important}
#login-screen .lgb-label{color:rgba(226,230,235,.72)!important}
#login-screen .lgb-input{margin-bottom:10px!important}
#login-screen .lgb-links{margin-top:10px!important}
#login-screen .lgb-link{color:rgba(226,230,235,.7)!important}
#login-screen .lgb-criar-conta{margin-top:2px!important}
#login-screen .lgb-criar-conta-txt{color:rgba(226,230,235,.66)!important;margin-bottom:6px!important}
#login-screen .lgb-criar-conta-btn{padding:10px!important}
#login-screen .lgb-footer{margin-top:14px!important;color:rgba(255,255,255,.44)!important}

/* 10 — movimento sofisticado, sem piscada agressiva. */
@keyframes jslPremiumBreath{
  0%,100%{opacity:.82;filter:brightness(.92);transform:translateZ(0)}
  50%{opacity:1;filter:brightness(1.12);transform:translateZ(0)}
}
@keyframes jslConnectionPulse{
  0%,100%{opacity:.22;transform:scaleX(.35)}
  48%,58%{opacity:.8;transform:scaleX(1)}
}

@media (min-width:1024px) and (max-width:1439px){
  #login-screen>.lgb-wrap{padding-left:230px!important}
  #login-screen>.jsl-login-watermark{left:22px!important;width:235px!important;height:270px!important;padding:36px 26px!important}
  #login-screen .jsl-side-brand-main{font-size:var(--t-marca-lg)!important}
  #login-screen .jsl-side-brand-system{font-size:var(--t-hero)!important;margin-top:20px!important}
  #login-screen>.jsl-login-watermark::after{width:175px!important}
}

@media (max-width:1023px){
  #login-screen>.lgb-wrap{padding-left:20px!important;padding-right:20px!important}
  #login-screen .lgb-panel{padding:18px!important}
  #login-screen #login-cred-carousel{height:82px!important}
}

@media (max-width:767px){
  #login-screen .lgb-logo-row{gap:5px!important}
  #login-screen #login-sigla{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}
  #login-screen #login-sigla img{width:48px!important;height:48px!important;max-width:48px!important}
  #login-screen #login-cred-carousel .jsl-cred-slide strong{font-size:var(--t-base)!important}
  #login-screen #login-cred-carousel .jsl-cred-slide small{font-size:var(--t-micro)!important}
}

@media (prefers-reduced-motion:reduce){
  #login-screen .jsl-side-brand-main,
  #login-screen>.jsl-login-watermark::after{animation:none!important}
}

/* V332 — ponto final do login: compacto, central e com marca vetorial. */

/* 1, 3, 4 e 9: conjunto coeso, centralizado e com margens seguras. */
#login-screen>.lgb-wrap{
  min-height:100dvh!important;
  padding-top:32px!important;
  padding-bottom:32px!important;
  box-sizing:border-box!important;
  background:transparent!important;
  box-shadow:none!important;
}
#login-screen .lgb-card{
  max-width:370px!important;
  gap:10px!important;
  background:transparent!important;
  box-shadow:none!important;
}

@media (min-width:1440px){
  #login-screen>.lgb-wrap{padding-left:270px!important;padding-right:0!important}
  #login-screen>.jsl-login-watermark{
    left:calc(50% - 500px)!important;
    width:300px!important;height:282px!important;
    padding:38px 34px!important;
  }
  #login-screen .jsl-side-brand-main{font-size:var(--t-marca-xl)!important}
  #login-screen .jsl-side-brand-system{font-size:var(--t-hero)!important}
  #login-screen>.jsl-login-watermark::after{width:230px!important}
}

/* 5, 6, 8: formulário menor, próximo e sem altura desperdiçada. */
#login-screen .lgb-panel{padding:16px 18px!important;border-radius:18px!important}
#login-screen #login-cred-carousel{height:76px!important;margin-bottom:12px!important;border-radius:12px!important}
#login-screen #login-cred-carousel .jsl-cred-slide{padding:9px 12px 17px!important;gap:10px!important}
#login-screen #login-cred-carousel .jsl-cred-icon{width:40px!important;height:40px!important;flex-basis:40px!important;font-size:var(--t-micro)!important}
#login-screen #login-cred-carousel .jsl-cred-slide strong{font-size:var(--t-base)!important}
#login-screen #login-cred-carousel .jsl-cred-slide small{font-size:var(--t-micro)!important}
#login-screen .lgb-titulo{font-size:var(--t-med)!important}
#login-screen .lgb-sub{margin-bottom:10px!important;font-size:var(--t-mini)!important}
#login-screen .lgb-label{margin-bottom:4px!important;font-size:var(--t-micro)!important}
#login-screen .lgb-input{min-height:48px!important;padding:10px 13px!important;margin-bottom:8px!important}
#login-screen .lgb-btn-entrar{min-height:50px!important;margin-top:8px!important;padding:11px!important}
#login-screen .lgb-links{margin-top:7px!important}
#login-screen .lgb-link{min-height:28px!important;padding:3px 2px!important;font-size:var(--t-mini)!important}
#login-screen .lgb-criar-conta-txt{font-size:var(--t-mini)!important;margin-bottom:4px!important}
#login-screen .lgb-criar-conta-btn{min-height:42px!important;padding:8px!important;font-size:var(--t-peq)!important}
#login-screen .lgb-footer{margin-top:9px!important;font-size:var(--t-micro)!important}

/* 2, 7 e 10: assinatura superior vetorial, nítida e independente de fonte. */
#login-screen .lgb-logo-row{gap:4px!important;margin:0 0 2px!important}
#login-screen #login-sigla{
  width:210px!important;height:48px!important;min-width:210px!important;min-height:48px!important;
  border-radius:0!important;overflow:visible!important;box-shadow:none!important;background:transparent!important;
}
#login-screen #login-sigla img{
  width:210px!important;height:48px!important;max-width:210px!important;object-fit:contain!important;
  filter:drop-shadow(0 0 9px rgba(255,209,0,.16))!important;
}
#login-screen .lgb-nome{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#login-screen .lgb-slogan{font-size:var(--t-micro)!important;margin-top:0!important;color:rgba(231,235,240,.58)!important}

/* Rodapé não cria uma coluna visual atrás do painel. */
#login-screen .jsl-legal-footer{max-width:370px!important;margin:10px auto 0!important;padding-top:8px!important;font-size:var(--t-micro)!important;opacity:.62!important}

@media (min-width:1024px) and (max-width:1439px){
  #login-screen>.lgb-wrap{padding-left:190px!important;padding-right:0!important}
  #login-screen>.jsl-login-watermark{left:24px!important;width:220px!important;height:250px!important;padding:32px 24px!important}
  #login-screen .jsl-side-brand-main{font-size:var(--t-marca-lg)!important}
  #login-screen .jsl-side-brand-system{font-size:var(--t-tit)!important}
  #login-screen>.jsl-login-watermark::after{width:145px!important}
}

@media (max-width:1023px){
  #login-screen>.lgb-wrap{padding:18px 16px!important}
  #login-screen .lgb-card{max-width:380px!important}
}
@media (max-width:767px){
  #login-screen>.lgb-wrap{padding:12px!important}
  #login-screen .lgb-panel{padding:14px!important}
  #login-screen #login-sigla{width:190px!important;min-width:190px!important;height:44px!important;min-height:44px!important}
  #login-screen #login-sigla img{width:190px!important;max-width:190px!important;height:44px!important}
  #login-screen #login-cred-carousel{height:72px!important}
}

/* V333 — usa somente o selo oficial JSL acima do carrossel. */
#login-screen .lgb-logo-row{gap:5px!important;margin-bottom:3px!important}
#login-screen #login-sigla{
  width:58px!important;height:58px!important;min-width:58px!important;min-height:58px!important;
  display:grid!important;place-items:center!important;overflow:hidden!important;
  border-radius:14px!important;background:transparent!important;
  box-shadow:0 0 26px rgba(255,209,0,.2)!important;
}
#login-screen #login-sigla img{
  display:block!important;width:58px!important;height:58px!important;max-width:58px!important;
  object-fit:contain!important;transform:none!important;filter:none!important;
}
#login-screen .lgb-slogan{font-size:var(--t-micro)!important;color:rgba(231,235,240,.62)!important}

@media (max-width:767px){
  #login-screen #login-sigla{width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important}
  #login-screen #login-sigla img{width:52px!important;height:52px!important;max-width:52px!important}
}

/* V335 — login usa exatamente o padrão do avatar JSL da topbar interna. */
#login-screen #login-sigla.premium-avatar{
  display:grid!important;
  place-items:center!important;
  align-items:center!important;
  justify-items:center!important;
  flex:0 0 42px!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  border:0!important;
  border-radius:50%!important;
  background:linear-gradient(135deg,var(--premium-yellow,#ffd100),#d1a600)!important;
  color:#0a0a0a!important;
  box-shadow:0 0 22px rgba(255,209,0,.22)!important;
  transform:none!important;
}
#login-screen #login-sigla.premium-avatar>span{
  display:block!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  font-family:'Barlow Condensed',sans-serif!important;
  font-size:var(--t-peq)!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:-.15px!important;
  color:#0a0a0a!important;
  text-align:center!important;
  transform:none!important;
}
#login-screen .lgb-logo-row{gap:5px!important}

@media (max-width:767px){
  #login-screen #login-sigla.premium-avatar{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important}
}

/* JSL V336 — Superadmin comercial: leitura leve, filtros, paginação e escala. */
#m-superadmin .modal.wide{max-width:1200px!important}
#m-superadmin .sa-kpi-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin-bottom:14px}
#m-superadmin .sa-kpi-grid>div{padding:9px 8px!important}
#m-superadmin .sa-kpi-grid>div>div:first-child{font-weight:600!important;letter-spacing:.04em}
#m-superadmin .sa-kpi-grid>div>div:last-child{font-weight:700!important}

#m-superadmin .sa-control-panel{display:grid;grid-template-columns:minmax(260px,1fr) 150px 145px 135px;gap:8px;margin-bottom:8px}
#m-superadmin .sa-control-panel .fc{height:44px;min-width:0;margin:0;padding:0 11px;font-size:var(--t-peq);font-weight:500}
#m-superadmin .sa-search-wrap{position:relative;display:flex;align-items:center;min-width:0}
#m-superadmin .sa-search-wrap>span{position:absolute;left:12px;z-index:var(--z-local);opacity:.65;pointer-events:none}
#m-superadmin .sa-search-wrap input{width:100%;padding-left:36px!important;padding-right:44px!important}
#m-superadmin .sa-clear{position:absolute;right:4px;width:36px;min-width:36px;height:36px;min-height:36px;padding:0;border:0;background:transparent;color:var(--mt);border-radius:8px;cursor:pointer}
#m-superadmin .sa-clear:hover{background:rgba(255,255,255,.06);color:var(--tx)}
#m-superadmin .sa-results-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:38px;padding:4px 0 8px;color:var(--mt);font-size:var(--t-mini)}
#m-superadmin .sa-orphans{min-height:34px;padding:6px 10px;font-size:var(--t-micro);color:var(--y);background:rgba(255,209,0,.08);border-color:rgba(255,209,0,.25)}

#m-superadmin #sa-lista{border-top:1px solid var(--bd);border-bottom:1px solid var(--bd);scrollbar-gutter:stable}
#m-superadmin .sa-table{font-size:var(--t-mini);line-height:1.35}
#m-superadmin .sa-table thead{position:sticky;top:0;z-index:var(--z-local);background:var(--g2)}
#m-superadmin .sa-table th{padding:11px 9px;font-size:var(--t-micro);font-weight:700;letter-spacing:.05em;color:var(--mt)}
#m-superadmin .sa-table td{padding:12px 9px;font-weight:400;vertical-align:middle}
#m-superadmin .sa-table td:first-child b{font-size:var(--t-peq);font-weight:650;line-height:1.25}
#m-superadmin .sa-table .tag{font-weight:650;font-size:var(--t-micro)}
#m-superadmin .sa-actions-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
#m-superadmin .sa-actions-grid .btn{min-height:36px;padding:6px 5px;font-size:var(--t-micro);font-weight:650}
#m-superadmin .sa-actions-grid .btn:last-child{grid-column:auto}
#m-superadmin .sa-delete-action{background:transparent!important;border-color:rgba(255,82,82,.34)!important;color:#ff6b6b!important}
#m-superadmin .sa-empty{padding:36px 16px;text-align:center;color:var(--mt);font-size:var(--t-peq)}

#m-superadmin .sa-pagination{display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 0 2px}
#m-superadmin .sa-pagination span{min-width:110px;text-align:center;color:var(--mt);font-size:var(--t-mini)}
#m-superadmin .sa-pagination .btn{min-height:38px;padding:7px 13px;font-size:var(--t-micro)}
#m-superadmin .sa-pagination .btn:disabled{opacity:.35;cursor:not-allowed}

@media (max-width:1023px){
  #m-superadmin .sa-control-panel{grid-template-columns:1fr 1fr}
  #m-superadmin .sa-search-wrap{grid-column:1/-1}
  #m-superadmin .sa-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #m-superadmin .sa-table thead{position:static}
  #m-superadmin #sa-lista{max-height:50dvh!important;overflow-y:auto!important}
}
@media (max-width:767px){
  #m-superadmin .sa-control-panel{grid-template-columns:1fr}
  #m-superadmin .sa-search-wrap{grid-column:auto}
  #m-superadmin .sa-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #m-superadmin .sa-results-bar{align-items:flex-start;flex-direction:column}
  #m-superadmin .sa-orphans{width:100%}
  #m-superadmin .sa-pagination{gap:6px}
  #m-superadmin .sa-pagination span{min-width:88px;font-size:var(--t-micro)}
  #m-superadmin .sa-pagination .btn{flex:1;min-width:0;padding:7px 5px}
  #m-superadmin .sa-actions-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #m-superadmin .sa-actions-grid .sa-delete-action{grid-column:1/-1}
}

/* JSL V337 — Super Calculadora. Somente apresentação e navegação visual. */
#page-estoque{--calc-yellow:#ffd100;--calc-blue:#2b9cff;--calc-green:#29c782}
#page-estoque .calc-hero{position:relative;isolation:isolate;min-height:132px;padding:24px 28px;border:1px solid rgba(255,209,0,.28);border-radius:22px;background:radial-gradient(circle at 12% 25%,rgba(255,209,0,.17),transparent 31%),radial-gradient(circle at 78% 120%,rgba(43,156,255,.1),transparent 33%),linear-gradient(135deg,#17170f 0%,#101419 58%,#0c0f12 100%);box-shadow:0 22px 55px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.04);overflow:hidden}
#page-estoque .calc-hero::after{content:'';position:absolute;right:-45px;top:-75px;width:300px;height:250px;background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.018) 23px 24px);transform:rotate(30deg);z-index:var(--z-atras)}
#page-estoque .calc-hero-left{gap:17px}
#page-estoque .calc-hero-ico{width:64px;height:64px;flex:0 0 64px;display:grid;place-content:center;text-align:center;border-radius:18px;background:linear-gradient(145deg,#ffe65c,#e8b800);color:#111;box-shadow:0 12px 36px rgba(255,209,0,.24),inset 0 1px rgba(255,255,255,.55);font-family:'Barlow Condensed',sans-serif;font-weight:900;line-height:.85}
#page-estoque .calc-hero-ico span{font-size:var(--t-tit);letter-spacing:-.5px}
#page-estoque .calc-hero-ico small{font-size:var(--t-micro);letter-spacing:1.6px;margin-top:5px}
#page-estoque .calc-hero-kicker{margin-bottom:4px;color:var(--calc-yellow);font-size:var(--t-micro);font-weight:800;letter-spacing:1.7px;text-transform:uppercase}
#page-estoque .calc-hero-tit{font-size:var(--t-hero);line-height:1;font-weight:900;letter-spacing:.2px;text-transform:uppercase}
#page-estoque .calc-hero-sub{max-width:650px;margin-top:8px;font-size:var(--t-peq);line-height:1.5;color:#aeb5bc}
#page-estoque .calc-hero-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
#page-estoque .calc-live-badge,#page-estoque .calc-hero-badge{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border:1px solid rgba(255,255,255,.09);border-radius:999px;background:rgba(255,255,255,.035);color:#c5cbd1;font-size:var(--t-micro);font-weight:750;letter-spacing:.35px;text-transform:uppercase}
#page-estoque .calc-live-badge i{width:7px;height:7px;border-radius:50%;background:var(--calc-green);box-shadow:0 0 0 5px rgba(41,199,130,.09),0 0 14px rgba(41,199,130,.65);animation:calcLive 1.8s ease-in-out infinite}
@keyframes calcLive{50%{opacity:.45;transform:scale(.82)}}

#page-estoque .calc-flow{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr);align-items:center;margin:14px 0;padding:11px;border:1px solid rgba(255,255,255,.065);border-radius:16px;background:rgba(13,17,20,.78);box-shadow:0 10px 30px rgba(0,0,0,.14)}
#page-estoque .calc-flow-step{display:flex;align-items:center;gap:10px;min-width:0;min-height:54px;padding:7px 10px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--mt);text-align:left;cursor:pointer;transition:.2s}
#page-estoque .calc-flow-step:hover{background:rgba(255,255,255,.035);color:var(--tx)}
#page-estoque .calc-flow-step b{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border-radius:9px;background:#20262c;border:1px solid rgba(255,255,255,.08);font:800 12px 'Barlow Condensed',sans-serif}
#page-estoque .calc-flow-step span{display:grid;min-width:0}
#page-estoque .calc-flow-step strong{font-size:var(--t-mini);font-weight:750;color:#d7dce1}
#page-estoque .calc-flow-step small{margin-top:2px;font-size:var(--t-micro);color:#7e8790;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-estoque .calc-flow-step.is-active{background:linear-gradient(90deg,rgba(255,209,0,.09),transparent);border-color:rgba(255,209,0,.15)}
#page-estoque .calc-flow-step.is-active b{background:var(--calc-yellow);color:#111;border-color:var(--calc-yellow);box-shadow:0 0 18px rgba(255,209,0,.16)}
#page-estoque .calc-flow-step.is-ready b{border-color:rgba(41,199,130,.45);color:var(--calc-green)}
#page-estoque .calc-flow-line{height:1px;background:linear-gradient(90deg,rgba(255,209,0,.45),rgba(255,255,255,.08))}

#page-estoque .c2-grid{gap:16px}
#page-estoque .c2-panel{border-radius:18px;padding:20px;background:linear-gradient(160deg,rgba(255,255,255,.025),transparent 32%),#10151a;box-shadow:0 16px 38px rgba(0,0,0,.16);transition:border-color .2s,transform .2s,box-shadow .2s}
#page-estoque .c2-panel:hover{transform:translateY(-1px);box-shadow:0 19px 44px rgba(0,0,0,.21)}
#page-estoque .c2-panel-parede{border-color:rgba(255,209,0,.2)}
#page-estoque .c2-panel-forro{border-color:rgba(43,156,255,.22)}
#page-estoque .c2-panel-mat{border-color:rgba(41,199,130,.18);background:radial-gradient(circle at 82% 0,rgba(41,199,130,.07),transparent 24%),#10151a}
#page-estoque .c2-system-label{display:flex;align-items:center;gap:7px;margin:-3px 0 11px;color:#7d8790;font-size:var(--t-micro);font-weight:800;letter-spacing:1.25px;text-transform:uppercase}
#page-estoque .c2-system-label span{display:grid;place-items:center;width:23px;height:18px;border-radius:5px;background:rgba(255,209,0,.1);color:var(--calc-yellow);font:800 9px 'Barlow Condensed',sans-serif}
#page-estoque .c2-panel-forro .c2-system-label span{background:rgba(43,156,255,.11);color:#68b9ff}
#page-estoque .c2-system-label-result span{background:rgba(41,199,130,.12);color:var(--calc-green)}
#page-estoque .c2-panel-head{margin-bottom:16px;padding-bottom:13px}
#page-estoque .c2-panel-tit{font-size:var(--t-gr);letter-spacing:.7px}
#page-estoque .c2-panel-area{padding:5px 11px;background:#0c1014;font-weight:700}
#page-estoque .c2-entry{padding:12px;border:1px solid rgba(255,255,255,.065);border-radius:13px;background:rgba(0,0,0,.13)}
#page-estoque .c2-entry-field input,#page-estoque .c2-entry-field select{height:48px;border-radius:10px;background:#0d1216;font-size:var(--t-gr);font-weight:650}
#page-estoque .c2-add{height:48px;flex-basis:48px;border-radius:11px;box-shadow:0 8px 22px rgba(0,0,0,.25)}
#page-estoque .c2-add-y{box-shadow:0 9px 24px rgba(255,209,0,.12)}
#page-estoque .c2-add-b{box-shadow:0 9px 24px rgba(43,156,255,.15)}
#page-estoque .c2-cfg{border-radius:11px;background:#0d1216}
#page-estoque .c2-cfg summary{padding:11px 13px}
#page-estoque .c2-med-empty,#page-estoque .cm-empty{min-height:110px;display:grid;place-content:center;text-align:center;border-radius:12px;background:rgba(0,0,0,.11)}
#page-estoque .c2-panel-mat{scroll-margin-top:90px}
#page-estoque .c2-panel-parede{scroll-margin-top:90px}
#page-estoque .cm-acoes{position:sticky;bottom:10px;z-index:var(--z-local);padding:10px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(10,14,17,.93);backdrop-filter:blur(14px);box-shadow:0 13px 38px rgba(0,0,0,.3)}
#page-estoque .cm-btn{min-height:42px}
#page-estoque .calc-focus-pulse{animation:calcFocus .85s ease-out}
@keyframes calcFocus{0%{box-shadow:0 0 0 0 rgba(255,209,0,.45)}100%{box-shadow:0 0 0 14px rgba(255,209,0,0)}}

@media (max-width:1439px){
  #page-estoque .calc-hero{align-items:flex-start;gap:15px}
  #page-estoque .calc-hero-actions{max-width:310px}
}
@media (max-width:767px){
  #page-estoque .calc-hero{min-height:0;padding:18px;border-radius:17px;display:block}
  #page-estoque .calc-hero-left{align-items:flex-start}
  #page-estoque .calc-hero-ico{width:54px;height:54px;flex-basis:54px;border-radius:15px}
  #page-estoque .calc-hero-tit{font-size:var(--t-tit)}
  #page-estoque .calc-hero-sub{font-size:var(--t-mini)}
  #page-estoque .calc-hero-actions{justify-content:flex-start;max-width:none;margin-top:15px}
  #page-estoque .calc-flow{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px;gap:6px}
  #page-estoque .calc-flow-step{flex:0 0 78%;scroll-snap-align:start;background:rgba(255,255,255,.02);border-color:rgba(255,255,255,.05)}
  #page-estoque .calc-flow-line{display:none}
  #page-estoque .c2-panel{padding:15px;border-radius:15px}
  #page-estoque .c2-entry{padding:9px;gap:7px}
  #page-estoque .c2-entry-field input,#page-estoque .c2-entry-field select{height:46px;font-size:var(--t-med)}
  #page-estoque .c2-add{height:46px;flex-basis:46px}
  #page-estoque .cm-acoes{position:static;padding:8px}
}
@media (max-width:767px){
  #page-estoque .calc-live-badge{display:none}
  #page-estoque .calc-hero-badge,#page-estoque .calc-hero-actions .btn{flex:1;justify-content:center}
  #page-estoque .c2-entry{flex-wrap:wrap}
  #page-estoque .c2-entry-field{flex:1 1 calc(50% - 5px)}
  #page-estoque .c2-entry-sel{flex:1 1 72px}
  #page-estoque .c2-add{flex:1 1 48px}
}
@media (prefers-reduced-motion:reduce){#page-estoque .calc-live-badge i{animation:none}#page-estoque .calc-focus-pulse{animation:none}}

/* JSL V339 — camada final de conformidade responsiva e carrossel móvel. */

/* Carrosséis: toque, teclado, texto completo e área de controle utilizável. */
.jsl-cred-carousel{touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none}
.jsl-cred-carousel:focus-visible{box-shadow:0 0 0 3px rgba(255,209,0,.2),inset 0 0 0 1px var(--y)!important}
.jsl-cred-slide{padding-bottom:32px!important}
.jsl-cred-slide>span:last-child{width:100%;min-width:0}
.jsl-cred-slide strong,.jsl-cred-slide small{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;display:block!important}
.jsl-cred-dots{left:50%!important;bottom:2px!important;transform:translateX(-50%);display:flex!important;align-items:center;justify-content:center;gap:1px!important}
.jsl-cred-dot{
  position:relative;width:32px!important;max-width:32px!important;height:28px!important;min-width:32px!important;min-height:28px!important;
  padding:0!important;border:0!important;background:transparent!important;cursor:pointer!important;
}
.jsl-cred-dot::after{content:'';position:absolute;left:8px;right:8px;top:13px;height:3px;border-radius:5px;background:rgba(255,255,255,.22);transition:background .2s,width .2s}
.jsl-cred-dot.is-active::after{background:var(--y);box-shadow:0 0 9px rgba(255,209,0,.32)}
.jsl-cred-dot:focus-visible{outline:2px solid var(--y);outline-offset:-3px;border-radius:7px}
#login-screen #login-cred-carousel{height:96px!important}
#cadastro-screen #cad-cred-carousel{height:132px!important}

/* Nenhum fluxo interno da Super Calculadora exige arrasto lateral no telefone. */
@media (max-width:767px){
  #page-estoque .calc-flow{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;overflow-x:visible!important;scroll-snap-type:none!important}
  #page-estoque .calc-flow-step{width:100%!important;max-width:100%!important;min-height:52px!important;flex:none!important;scroll-snap-align:none!important}
  #page-estoque .calc-flow-line{display:none!important}

  #login-screen #login-cred-carousel{height:106px!important;min-height:106px!important}
  #cadastro-screen #cad-cred-carousel{height:146px!important;min-height:146px!important}
  .jsl-cred-slide{align-items:center!important;padding:10px 12px 32px!important;gap:10px!important}
  .jsl-cred-slide strong{font-size:var(--t-peq)!important;line-height:1.18!important}
  .jsl-cred-slide small{font-size:var(--t-micro)!important;line-height:1.22!important;margin-top:3px!important}
  #cadastro-screen .jsl-cred-slide em{font-size:var(--t-micro)!important}
  #cadastro-screen #cad-cred-carousel .jsl-cred-icon{width:44px!important;height:44px!important;flex:0 0 44px!important}

  /* Cabeçalhos e ações seguem a largura útil em telas estreitas. */
  .premium-topbar{min-width:0!important}
  .premium-topbar>*{min-width:0}
  .premium-user{max-width:calc(100vw - 150px)!important}
  .premium-user>div:last-child{min-width:0}
  .premium-user strong,.premium-user span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mh,.mf,.sh,.toolbar,.actions,.btn-row,.form-actions{width:100%;max-width:100%}
  .mh>*,.mf>*,.sh>*,.toolbar>*,.actions>*,.btn-row>*,.form-actions>*{min-width:0}

  /* Tipografia previsível e campos sem zoom automático no iPhone. */
  input:not([type="checkbox"]):not([type="radio"]),select,textarea{font-size:var(--t-med)!important}
  .page-title,.st,.c2-panel-tit,.premium-panel h2{overflow-wrap:anywhere}

  /* Modais em formato de folha, com comandos sempre alcançáveis. */
  .modal,.modal.wide,.modal-content,[role="dialog"]{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
  .mf .btn,.mf button{min-height:46px!important}
}

@media (max-width:767px){
  #login-screen #login-cred-carousel{height:112px!important;min-height:112px!important}
  #cadastro-screen #cad-cred-carousel{height:156px!important;min-height:156px!important}
  .jsl-cred-slide{padding-inline:9px!important;gap:8px!important}
  .jsl-cred-icon{width:38px!important;height:38px!important;flex:0 0 38px!important}
  .jsl-cred-slide strong{font-size:var(--t-peq)!important}
  .jsl-cred-slide small{font-size:var(--t-micro)!important}
  #page-estoque .calc-hero-actions{display:grid!important;grid-template-columns:1fr!important;width:100%}
  #page-estoque .calc-hero-badge,#page-estoque .calc-hero-actions .btn{width:100%!important}
}

@media (max-height:520px) and (orientation:landscape){
  #login-screen #login-cred-carousel{height:96px!important;min-height:96px!important}
  #cadastro-screen #cad-cred-carousel{height:132px!important;min-height:132px!important}
}

@media (prefers-reduced-motion:reduce){
  .jsl-cred-slide{transition:none!important}
  .jsl-cred-dot::after{transition:none!important}
}

/* V340 — Organização do editor e histórico de orçamentos. Carregada por último. */
#page-orcamentos .orc-editor-head,
#page-orcamentos .orc-historico-head{align-items:flex-start;gap:16px}
#page-orcamentos .orc-editor-head-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
#page-orcamentos .orc-editor-head .cl,
#page-orcamentos .orc-historico-head .cl{margin-top:4px;line-height:1.35}
#page-orcamentos .orc-historico-card{border-top:2px solid rgba(255,204,0,.7)}
#page-orcamentos .orc-historico-contador{flex:0 0 auto;min-height:28px;display:inline-flex;align-items:center;padding:0 10px;border:1px solid var(--bd);border-radius:999px;color:var(--mt);font-size:var(--t-mini);font-weight:800;white-space:nowrap}
#page-orcamentos .orc-historico-ferramentas{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:10px;align-items:center;margin:14px 0 8px;padding:12px;background:var(--g2);border:1px solid var(--bd);border-radius:10px}
#page-orcamentos .orc-busca-wrap{position:relative;display:flex;align-items:center;min-width:0}
#page-orcamentos .orc-busca-wrap>span{position:absolute;left:13px;z-index:var(--z-local);pointer-events:none;opacity:.8}
#page-orcamentos #orc-arqs-busca{width:100%;min-width:0;padding-left:39px}
#page-orcamentos .orc-filtros-status{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
#page-orcamentos .orc-filtro-btn{min-height:40px;padding:8px 13px;border:1px solid var(--bd);border-radius:8px;background:var(--g1);color:var(--mt);font:800 12px/1.1 'Barlow',sans-serif;cursor:pointer;white-space:nowrap}
#page-orcamentos .orc-filtro-btn:hover{border-color:rgba(255,204,0,.55);color:var(--tx)}
#page-orcamentos .orc-filtro-btn.is-active{background:rgba(255,204,0,.13);border-color:var(--y);color:var(--y);box-shadow:inset 0 0 0 1px rgba(255,204,0,.12)}
#page-orcamentos .orc-filtro-btn:focus-visible{outline:3px solid rgba(255,204,0,.35);outline-offset:2px}
#page-orcamentos #orc-arqs{display:grid;gap:8px}
#page-orcamentos #orc-arqs .orc-salvo-card{margin:0;padding:13px 12px;border:1px solid var(--bd);border-radius:10px;background:linear-gradient(135deg,rgba(255,255,255,.025),rgba(255,255,255,.008));transition:border-color .18s ease,transform .18s ease}
#page-orcamentos #orc-arqs .orc-salvo-card:hover{border-color:rgba(255,204,0,.38);transform:translateY(-1px)}
#page-orcamentos #orc-arqs .orc-salvo-card[data-status="fechado"]{border-left:3px solid var(--grn)}
#page-orcamentos #orc-arqs .orc-salvo-card[data-status="aberto"]{border-left:3px solid var(--y)}
#page-orcamentos #orc-arqs .orc-salvo-title{font-size:var(--t-base)}
#page-orcamentos #orc-arqs .orc-salvo-meta{font-size:var(--t-mini);margin-top:5px}
#page-orcamentos .orc-salvo-obra{margin-top:5px;color:var(--grn);font-size:var(--t-mini);font-weight:700}
#page-orcamentos .orc-historico-vazio{display:flex;min-height:120px;align-items:center;justify-content:center;flex-direction:column;gap:5px;text-align:center;border:1px dashed var(--bd);border-radius:10px;color:var(--mt);padding:20px}
#page-orcamentos .orc-historico-vazio strong{color:var(--tx);font-size:var(--t-base)}
#page-orcamentos .orc-historico-vazio span{font-size:var(--t-peq)}

@media (max-width:1439px){
  #page-orcamentos .orc-historico-ferramentas{grid-template-columns:1fr}
  #page-orcamentos .orc-filtros-status{justify-content:flex-start}
}
@media (max-width:767px){
  #page-orcamentos .orc-editor-head,
  #page-orcamentos .orc-historico-head{display:flex!important;flex-direction:column!important;align-items:stretch!important}
  #page-orcamentos .orc-editor-head-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  #page-orcamentos .orc-editor-head-actions .btn{width:100%;min-width:0;min-height:46px}
  #page-orcamentos .orc-historico-contador{align-self:flex-start}
  #page-orcamentos .orc-historico-ferramentas{padding:10px;margin-top:12px}
  #page-orcamentos .orc-filtros-status{display:grid;grid-template-columns:1fr 1fr 1fr;width:100%;gap:5px}
  #page-orcamentos .orc-filtro-btn{min-width:0;padding:8px 5px;white-space:normal;font-size:var(--t-mini)}
  #page-orcamentos #orc-arqs .orc-salvo-card{padding:14px!important}
  #page-orcamentos #orc-arqs .orc-salvo-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #page-orcamentos #orc-arqs .orc-salvo-actions .btn{min-height:44px!important}
}
@media (max-width:767px){
  #page-orcamentos .orc-editor-head-actions,
  #page-orcamentos .orc-filtros-status,
  #page-orcamentos #orc-arqs .orc-salvo-actions{grid-template-columns:1fr!important}
}

/* V341 — estado visual determinístico do drawer móvel. */
@media (max-width:1023px){
  body:not(.mobile-menu-open) #sidebar,
  #sidebar[data-jsl-menu-state="closed"],
  #sidebar:not(.open){
    transform:translate3d(-105%,0,0)!important;
    pointer-events:none!important;
    animation:none!important;
  }
  body.mobile-menu-open #sidebar.open,
  #sidebar[data-jsl-menu-state="open"].open{
    transform:translate3d(0,0,0)!important;
    pointer-events:auto!important;
  }
  #sidebar-overlay:not(.show),
  #sidebar-overlay[aria-hidden="true"]{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    animation:none!important;
  }
  #sidebar-overlay.show[aria-hidden="false"]{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
  }
}

/* V342 — carrosséis confiáveis no iOS e bloco comercial organizado. */
.jsl-cred-carousel{overflow:hidden!important;-webkit-tap-highlight-color:transparent}
.jsl-cred-carousel .jsl-cred-dots{
  left:50%!important;right:auto!important;bottom:5px!important;transform:translateX(-50%)!important;
  display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;
  width:auto!important;min-width:116px!important;height:30px!important;z-index:var(--z-local)!important;
}
.jsl-cred-carousel .jsl-cred-dot{
  display:block!important;position:relative!important;flex:0 0 34px!important;width:34px!important;max-width:34px!important;
  height:30px!important;min-height:30px!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;
}
.jsl-cred-carousel .jsl-cred-dot::after{
  content:''!important;display:block!important;position:absolute!important;left:7px!important;right:7px!important;top:13px!important;
  height:4px!important;border-radius:999px!important;background:#575b60!important;opacity:1!important;
}
.jsl-cred-carousel .jsl-cred-dot.is-active::after{
  background:var(--y)!important;box-shadow:0 0 12px rgba(255,209,0,.68)!important;
}
.jsl-cred-carousel .jsl-cred-slide{will-change:opacity,transform}
.jsl-cred-carousel.jsl-reduced-motion .jsl-cred-slide{transition:none!important}

#cadastro-screen .cad-vendas-card{
  background:linear-gradient(155deg,rgba(22,27,31,.98),rgba(12,16,19,.98));border:1px solid #30363b;border-radius:16px;
  padding:24px;margin-bottom:20px;text-align:left;box-shadow:0 18px 52px rgba(0,0,0,.38);
}
#cadastro-screen .cad-vendas-titulo{font-size:var(--t-tit);font-weight:900;color:#fff;line-height:1.18;margin:0 auto 18px;text-align:center;max-width:390px}
#cadastro-screen .cad-recursos{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:16px}
#cadastro-screen .cad-recurso{display:flex;align-items:flex-start;gap:10px;min-width:0;padding:12px;border:1px solid rgba(255,209,0,.15);border-radius:10px;background:rgba(255,209,0,.045)}
#cadastro-screen .cad-recurso-ico{display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;border-radius:9px;background:var(--y);color:#161616;font-size:var(--t-micro);font-weight:900;box-shadow:0 6px 14px rgba(255,209,0,.18)}
#cadastro-screen .cad-recurso>span:last-child{display:flex;flex-direction:column;min-width:0}
#cadastro-screen .cad-recurso strong{color:#fff;font-size:var(--t-peq);line-height:1.2}
#cadastro-screen .cad-recurso small{color:#aeb4bb;font-size:var(--t-micro);line-height:1.3;margin-top:3px}
#cadastro-screen .cad-confianca{display:grid;gap:8px;color:#bec3c9;font-size:var(--t-peq);margin-bottom:18px}
#cadastro-screen .cad-confianca>div{display:flex;align-items:center;gap:9px;padding:10px 12px;border-left:3px solid var(--y);border-radius:7px;background:rgba(255,209,0,.075)}
#cadastro-screen .cad-vendas-cta{width:100%;min-height:54px;padding:15px;font-size:var(--t-med);font-weight:900;box-shadow:0 12px 28px rgba(255,209,0,.18)}

@media (max-width:767px){
  #login-screen #login-cred-carousel{min-height:114px!important;height:114px!important}
  #cadastro-screen #cad-cred-carousel{min-height:154px!important;height:154px!important}
  .jsl-cred-carousel .jsl-cred-slide{padding-bottom:38px!important}
  .jsl-cred-carousel .jsl-cred-dots{bottom:4px!important}
  #cadastro-screen .cad-vendas-card{padding:18px 14px;border-radius:14px}
  #cadastro-screen .cad-vendas-titulo{font-size:var(--t-gr);margin-bottom:15px}
  #cadastro-screen .cad-recursos{grid-template-columns:1fr;gap:8px}
  #cadastro-screen .cad-recurso{padding:11px}
  #cadastro-screen .cad-recurso strong{font-size:var(--t-peq)}
  #cadastro-screen .cad-recurso small{font-size:var(--t-mini)}
  #cadastro-screen .cad-confianca{font-size:var(--t-mini)}
}

@media (max-width:767px){
  #login-screen #login-cred-carousel{min-height:122px!important;height:122px!important}
  #cadastro-screen #cad-cred-carousel{min-height:164px!important;height:164px!important}
  #cadastro-screen .cad-vendas-card{padding-inline:12px}
}

/* JSL V344 — Superadmin compacto e navegação mobile sem cabeçalho duplicado. */

@media (max-width:767px) {
  /* A barra inferior já concentra a navegação do aplicativo. */
  .main > .premium-topbar,
  .main > .topbar,
  #mob-menu-btn {
    display: none !important;
  }

  .main > .content {
    padding-top: 12px !important;
  }

  #jsl-onboarding {
    display: none !important;
  }

  #m-superadmin .modal.wide {
    width: calc(100vw - 12px) !important;
    max-height: calc(100dvh - 12px) !important;
    padding: 10px !important;
    border-radius: 16px !important;
  }

  #m-superadmin .mh {
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 8px !important;
  }

  #m-superadmin .mh .mt2 {
    min-width: 0;
    font-size:var(--t-base) !important;
    line-height: 1.1 !important;
    white-space: nowrap;
  }

  #m-superadmin .mh > div {
    gap: 3px !important;
  }

  #m-superadmin .mh .btn {
    min-height: 36px !important;
    padding: 6px 10px !important;
    font-size:var(--t-micro) !important;
  }

  #m-superadmin .mh .mc2 {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  #m-superadmin .sa-kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
  }

  #m-superadmin .sa-kpi-grid > div {
    min-height: 48px !important;
    padding: 5px 3px !important;
  }

  #m-superadmin .sa-kpi-grid > div > div:first-child {
    font-size:var(--t-micro) !important;
  }

  #m-superadmin .sa-kpi-grid > div > div:last-child {
    font-size:var(--t-base) !important;
  }

  #m-superadmin .sa-control-panel {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 5px !important;
    margin-bottom: 5px !important;
  }

  #m-superadmin .sa-search-wrap {
    grid-column: 1 / -1 !important;
  }

  #m-superadmin .sa-control-panel .fc {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 9px !important;
    font-size:var(--t-micro) !important;
  }

  #m-superadmin .sa-search-wrap input {
    padding-left: 32px !important;
    padding-right: 38px !important;
  }

  #m-superadmin #sa-page-size {
    grid-column: 1 / -1;
  }

  #m-superadmin .sa-results-bar {
    min-height: 34px !important;
    padding: 2px 0 5px !important;
    flex-direction: row !important;
    align-items: center !important;
  }

  #m-superadmin .sa-results-bar > span {
    font-size:var(--t-micro) !important;
    white-space: nowrap;
  }

  #m-superadmin .sa-orphans {
    width: auto !important;
    min-height: 30px !important;
    padding: 4px 7px !important;
    font-size:var(--t-micro) !important;
    white-space: nowrap !important;
  }

  #m-superadmin #sa-lista {
    max-height: 48dvh !important;
    overflow-y: auto !important;
  }

  #m-superadmin .sa-table tr {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 3px 6px !important;
    margin: 0 0 7px !important;
    padding: 9px !important;
    border-radius: 10px !important;
  }

  #m-superadmin .sa-table td {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 3px 0 !important;
    font-size:var(--t-micro) !important;
    line-height: 1.2 !important;
  }

  #m-superadmin .sa-table td::before {
    margin: 0 0 2px !important;
    font-size:var(--t-micro) !important;
    line-height: 1 !important;
    letter-spacing: .35px !important;
  }

  #m-superadmin .sa-table td:nth-child(1) {
    grid-column: 1 / -1;
    padding-bottom: 6px !important;
    border-bottom: 1px solid var(--bd) !important;
  }

  #m-superadmin .sa-table td:nth-child(1) b {
    overflow: hidden;
    font-size:var(--t-mini) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #m-superadmin .sa-table td:nth-child(1) span {
    overflow: hidden;
    font-size:var(--t-micro) !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #m-superadmin .sa-table td:nth-child(5),
  #m-superadmin .sa-table td:nth-child(6) {
    grid-column: span 2;
  }

  #m-superadmin .sa-table .tag {
    align-self: flex-start;
    padding: 3px 6px !important;
    font-size:var(--t-micro) !important;
    white-space: nowrap;
  }

  #m-superadmin .sa-table td.sa-actions {
    grid-column: 1 / -1;
    margin-top: 2px !important;
    padding-top: 7px !important;
  }

  #m-superadmin .sa-actions-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  #m-superadmin .sa-actions-grid .btn,
  #m-superadmin .sa-actions-grid .sa-delete-action {
    grid-column: auto !important;
    min-height: 34px !important;
    padding: 5px 3px !important;
    font-size:var(--t-micro) !important;
    white-space: nowrap !important;
  }

  #m-superadmin .sa-pagination {
    gap: 4px !important;
    padding: 7px 0 0 !important;
  }

  #m-superadmin .sa-pagination span {
    min-width: 70px !important;
    font-size:var(--t-micro) !important;
  }

  #m-superadmin .sa-pagination .btn {
    min-height: 34px !important;
    font-size:var(--t-micro) !important;
  }

  #m-superadmin .mf {
    padding-top: 7px !important;
  }

  #m-superadmin .mf .btn {
    min-height: 38px !important;
    font-size:var(--t-micro) !important;
  }
}

/* JSL V345 — Histórico e relação de materiais compactos no celular. */

@media (max-width:767px) {
  #page-estoque #bloco-historico,
  #page-estoque #bloco-materiais {
    padding: 10px !important;
    border-radius: 12px !important;
  }

  #page-estoque #bloco-historico .st,
  #page-estoque #bloco-materiais .st {
    font-size:var(--t-base) !important;
    line-height: 1.1 !important;
  }

  #page-estoque #bloco-historico .hist-filtros,
  #page-estoque #bloco-historico [id^="hist-filtro-"] {
    min-height: 34px !important;
  }

  #page-estoque #bloco-historico [id^="hist-filtro-"] {
    padding: 5px 11px !important;
    font-size:var(--t-micro) !important;
  }

  #hist-lista {
    gap: 5px !important;
    overflow: visible !important;
  }

  #hist-lista > * {
    padding: 0 !important;
  }

  #hist-lista .hist-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 6px !important;
    margin-bottom: 6px !important;
  }

  #hist-lista .hist-toolbar > div {
    font-size:var(--t-micro) !important;
    white-space: nowrap;
  }

  #hist-lista .hist-clear-all {
    width: auto !important;
    min-height: 32px !important;
    padding: 5px 8px !important;
    flex: none !important;
    font-size:var(--t-micro) !important;
    white-space: nowrap !important;
  }

  #hist-lista .hist-group {
    margin: 0 0 6px !important;
    padding: 0 !important;
    border-radius: 9px !important;
  }

  #hist-lista .hist-group-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
    width: 100% !important;
    padding: 9px !important;
  }

  #hist-lista .hist-group-head > div:first-child {
    width: 100% !important;
    min-width: 0;
  }

  #hist-lista .hist-group-head > div:first-child span:first-child {
    overflow: hidden;
    font-size:var(--t-mini) !important;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #hist-lista .hist-group-head > div:first-child span:last-child {
    font-size:var(--t-micro) !important;
    line-height: 1.2;
  }

  #hist-lista .hist-group-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto !important;
    gap: 4px !important;
    width: 100% !important;
  }

  #hist-lista .hist-group-actions .btn {
    width: 100% !important;
    min-height: 32px !important;
    padding: 4px 3px !important;
    flex: none !important;
    font-size:var(--t-micro) !important;
    white-space: nowrap !important;
  }

  #hist-lista .hist-group-actions > span {
    display: grid;
    width: 24px;
    place-items: center;
  }

  #hist-lista .hist-entry {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 8px 9px !important;
  }

  #hist-lista .hist-entry > div:first-child {
    display: flex !important;
    justify-content: space-between;
    gap: 5px !important;
    width: 100% !important;
  }

  #hist-lista .hist-entry > div:first-child span {
    font-size:var(--t-micro) !important;
  }

  #hist-lista .hist-entry-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 4px !important;
    width: 100% !important;
  }

  #hist-lista .hist-entry-actions .btn {
    width: 100% !important;
    min-height: 30px !important;
    padding: 4px !important;
    flex: none !important;
    font-size:var(--t-micro) !important;
    white-space: nowrap !important;
  }

  /* Relação atual de materiais: uma linha compacta por material. */
  #page-estoque #bloco-materiais .cm-table,
  #page-estoque #bloco-materiais .cm-table tbody {
    display: block !important;
    width: 100% !important;
  }

  #page-estoque #bloco-materiais .cm-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 84px 42px !important;
    gap: 3px 6px !important;
    margin: 5px 0 !important;
    padding: 8px !important;
    border-radius: 8px !important;
  }

  #page-estoque #bloco-materiais .cm-row td {
    display: block !important;
    width: auto !important;
    margin: 0 !important;
    padding: 2px 0 !important;
    font-size:var(--t-micro) !important;
  }

  #page-estoque #bloco-materiais .cm-row .cm-nome {
    grid-column: 1 / -1;
    font-size:var(--t-mini) !important;
  }

  #page-estoque #bloco-materiais .cm-row .cm-qtd {
    grid-column: 2;
  }

  #page-estoque #bloco-materiais .cm-row .cm-un {
    grid-column: 3;
  }

  #page-estoque #bloco-materiais .cm-row .cm-det {
    grid-column: 1 / -1;
    font-size:var(--t-micro) !important;
    line-height: 1.25 !important;
  }

  #page-estoque #bloco-materiais .cm-row .cm-qtd-in {
    width: 80px !important;
    min-height: 32px !important;
    padding: 4px 6px !important;
    font-size:var(--t-mini) !important;
  }

  #page-estoque #bloco-materiais .cm-row .cm-x {
    width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    font-size:var(--t-base) !important;
  }

  #page-estoque .cm-acoes {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
    padding: 7px !important;
  }

  #page-estoque .cm-acoes[style*="display:none"] {
    display: none !important;
  }

  #page-estoque .cm-acoes .cm-btn {
    width: 100% !important;
    min-height: 34px !important;
    padding: 5px 6px !important;
    font-size:var(--t-micro) !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  #page-estoque .cm-add-row {
    grid-template-columns: minmax(0, 1fr) 68px 54px !important;
    gap: 5px !important;
  }

  #page-estoque .cm-add-row > * {
    grid-column: auto !important;
    min-height: 34px !important;
    font-size:var(--t-micro) !important;
  }

  #page-estoque .cm-add-row .cm-add-nome,
  #page-estoque .cm-add-row .cm-add-btn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
}

/* V501 INLINE MIGRATIONS — gerado deterministicamente */
.t-micro{font-size:var(--t-micro)}
.t-mini{font-size:var(--t-mini)}
.t-peq{font-size:var(--t-peq)}
.t-base{font-size:var(--t-base)}
.t-med{font-size:var(--t-med)}
.t-gr{font-size:var(--t-gr)}
.t-tit{font-size:var(--t-tit)}
.t-hero{font-size:var(--t-hero)}

/* Contrato móvel: controles operacionais respeitam o alvo mínimo de toque. */
@media (max-width:767px){
  button:not(.jsl-cred-dot):not(.cal-day),
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea,
  [role="button"]{
    min-height:var(--toque-minimo);
  }
  button.icon-btn,
  button.premium-ico,
  button.mc2,
  button[class*="close"]{
    min-width:var(--toque-minimo);
  }
}
.u-s-0012add55f{font-weight:700;font-size:var(--t-peq);color:var(--tx);}
.u-s-008cf9f6f3{text-align:center;margin-bottom:28px;}
.u-s-01d67962ac{border-bottom:1px solid var(--tx);margin-bottom:6px;height:40px;}
.u-s-01f626f35a{color:var(--y);font-size:var(--t-micro);}
.u-s-021276c802{display:flex;align-items:center;gap:6px;font-size:var(--t-mini);padding:5px 0;border-bottom:1px solid var(--bd);}
.u-s-025fbe887d{display:flex;justify-content:space-between;font-size:var(--t-peq);}
.u-s-0275c8328a{flex-shrink:0;font-size:var(--t-mini);}
.u-s-02fdc403d2{font-size:var(--t-micro);font-weight:800;color:var(--mt);text-transform:uppercase;margin-bottom:5px;}
.u-s-0363a61af2{font-size:var(--t-base);font-weight:800;color:var(--grn);}
.u-s-03c5219581{width:100%;background:var(--y);border:none;border-radius:5px;padding:13px;color:#1a1a1a;font-family:Barlow Condensed,sans-serif;font-size:var(--t-med);font-weight:800;cursor:pointer;text-transform:uppercase;}
.u-s-041cf9a135{background:none;border:none;color:var(--mt);font-size:var(--t-mini);cursor:pointer;font-family:inherit;opacity:.6;}
.u-s-04905292a1{width:100%;padding:12px;font-weight:800;}
.u-s-05c3418483{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;padding-top:14px;border-top:1px solid var(--bd);}
.u-s-061a43e56f{margin-top:7px;padding-top:7px;border-top:1px solid var(--bd);display:flex;justify-content:space-between;font-size:var(--t-mini);font-weight:700;}
.u-s-061b3f2f72{font-size:var(--t-peq);color:var(--tx);}
.u-s-06949c25f3{display:flex;gap:6px;margin-bottom:8px;align-items:center;}
.u-s-06a99f71c6{margin-top:8px;padding:8px;background:rgba(255,209,0,.06);border:1px solid rgba(255,209,0,.15);border-radius:8px;display:none;}
.u-s-06e36d5de8{font-size:var(--t-micro);color:var(--mt);font-weight:700;text-transform:uppercase;margin-bottom:4px;}
.u-s-074fc497da{background:var(--g2);border:1px solid var(--bd);border-radius:10px;padding:12px;margin-bottom:8px;}
.u-s-075e080ed7{margin-top:14px;text-align:center;}
.u-s-086f625007{width:150px;height:150px;border:1px solid var(--bd,#eee);border-radius:8px;}
.u-s-0889360d63{display:flex;gap:8px;flex-wrap:wrap;}
.u-s-08a97db733{font-size:var(--t-micro);white-space:nowrap;padding:4px 8px;}
.u-s-08bcbf423a{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;}
.u-s-09071e8097{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;padding:12px 14px;border-bottom:1px solid var(--bd);}
.u-s-097b11b4f7{font-size:var(--t-micro);color:#66bb6a;margin-top:3px;font-weight:700;}
.u-s-09a77078d5{font-size:var(--t-gr);font-weight:800;color:var(--y);}

.u-s-0a1dded1d3{display:none;position:fixed;inset:0;background:#111;z-index:var(--z-critico);overflow-y:auto;isolation:isolate;-webkit-overflow-scrolling:touch;}
.u-s-0a2aca8ae4{max-height:100px;overflow-y:auto;margin-bottom:10px;}
.u-s-0a7b25eb30{background:rgba(37,211,102,.1);border-color:rgba(37,211,102,.3);color:#25d366;}
.u-s-0b2f52806a{color:var(--mt);font-size:var(--t-micro);text-transform:uppercase;font-weight:700;}
.u-s-0b6c1ef354{display:flex;align-items:center;gap:8px;cursor:pointer;margin:0;}
.u-s-0b87e9e0af{font-weight:600;}
.u-s-0c374e381e{color:var(--mt);font-size:var(--t-peq);padding:10px 0;}
.u-s-0c4ce09bfe{grid-column:1/-1;background:rgba(67,160,71,.08);border:1px solid rgba(67,160,71,.2);border-radius:4px;padding:7px 10px;margin-top:4px;}
.u-s-0cf14817f0{min-height:70px;}
.u-s-0d4282a15c{width:28px;height:28px;border-radius:50%;background:var(--y);display:flex;align-items:center;justify-content:center;font-size:var(--t-micro);font-weight:800;color:#1a1a1a;flex-shrink:0;}
.u-s-0d75823b20{color:#fff;}

.u-s-0e1ce91c38{flex:1;text-align:center;}
.u-s-0e7e3a0efc{letter-spacing:6px;font-size:var(--t-gr);text-align:center;}
.u-s-0f07d4af4e{background:var(--g2);border-radius:6px;padding:12px;}
.u-s-0f824c250e{max-height:200px;overflow-y:auto;}
.u-s-10c19cef27{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-gr);font-weight:900;color:#66bb6a;}

.u-s-11027cff18{background:var(--g2);border-radius:6px;padding:14px;margin-bottom:12px;}
.u-s-116274d462{font-size:var(--t-med);}
.u-s-11f1d9c978{width:100%;margin-bottom:9px;}
.u-s-13e39de67d{padding:3px 6px;font-size:var(--t-micro);text-align:left;}
.u-s-13e41fc20f{font-size:var(--t-peq);line-height:1.7;}
.u-s-13e5a19ae2{background:var(--y);border-radius:3px;padding:6px 8px;text-align:center;}
.u-s-143aa773e2{font-size:var(--t-micro);font-weight:800;color:var(--y);text-transform:uppercase;margin-bottom:3px;}
.u-s-1560787412{display:flex;justify-content:space-between;font-weight:800;padding-top:7px;margin-top:3px;border-top:1px solid var(--bd);font-size:var(--t-peq);}
.u-s-159325dbeb{font-family:Barlow Condensed,sans-serif;font-size:var(--t-gr);font-weight:900;color:var(--y);}
.u-s-15a4a8e4ed{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:9px;}
.u-s-15fd105cdf{background:var(--g1);border:1px solid var(--bd);border-radius:6px;padding:9px 12px;font-weight:800;color:var(--y);font-size:var(--t-base);}
.u-s-1688ecc9b8{display:none;background:rgba(255,209,0,.08);border:1px solid rgba(255,209,0,.35);border-radius:9px;padding:12px;margin-bottom:12px;}
.u-s-168f4124db{font-size:var(--t-peq);white-space:pre-wrap;}
.u-s-16eb0a16bf{margin-top:14px;display:flex;gap:8px;}
.u-s-18b5374820{font-size:var(--t-peq);}
.u-s-1958bed1fb{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.u-s-198aab764b{display:flex;justify-content:space-between;font-size:var(--t-micro);padding:2px 0;border-bottom:1px solid rgba(255,255,255,.04);color:var(--mt);}
.u-s-19d10da07c{background:var(--g2);border-radius:5px;padding:10px 12px;margin-bottom:12px;font-size:var(--t-peq);}
.u-s-1a35635087{padding:10px 14px;border-top:1px solid var(--bd);display:flex;gap:5px;flex-wrap:wrap;}
.u-s-1a60e72f8a{font-size:var(--t-micro);font-weight:700;background:rgba(119,119,119,.15);color:var(--mt);padding:2px 6px;border-radius:3px;}
.u-s-1a7aa0fee9{display:none;position:fixed;inset:0;background:#0a0a0a;z-index:var(--z-critico);overflow-y:auto;padding:20px;}
.u-s-1a8ebb6fa1{font-size:var(--t-med);font-weight:700;color:var(--tx);}
.u-s-1b2bc75aa1{font-size:var(--t-gr);font-weight:800;color:#66bb6a;}
.u-s-1b39238dbf{display:flex;align-items:center;gap:8px;padding:6px 8px;background:var(--g2);border-radius:4px;}
.u-s-1baa676d03{padding:2px 5px;}
.u-s-1baff3ceb9{width:100%;min-height:60px;padding:8px 9px;margin-bottom:6px;}
.u-s-1bc07e354f{font-size:var(--t-gr);font-weight:800;color:var(--tx);}
.u-s-1c1ba922b8{display:flex;justify-content:space-between;font-size:var(--t-peq);font-weight:700;padding-top:6px;border-top:1px solid var(--bd);}
.u-s-1cef234a77{font-weight:800;color:var(--y);}
.u-s-1d8943fa86{display:flex;gap:6px;}
.u-s-1daaf63400{color:#cbd5e1;font-size:var(--t-peq);line-height:1.6;margin:12px 0 18px;}
.u-s-1ea1efe3ce{max-width:620px;}
.u-s-1f404b7864{font-size:var(--t-micro);font-weight:700;background:rgba(229,57,53,.15);color:var(--red);padding:2px 6px;border-radius:3px;}
.u-s-2033d97a09{color:#ff5252;font-size:var(--t-peq);margin-bottom:10px;display:none;}
.u-s-20d597d525{flex:1;background:rgba(37,211,102,.1);border-color:rgba(37,211,102,.3);color:#25d366;}
.u-s-21373b980a{font-size:var(--t-base);font-weight:900;color:var(--grn);margin-top:2px;}
.u-s-219e633d04{background:rgba(123,31,162,.06);border:2px solid var(--bd);border-radius:10px;padding:14px 16px;cursor:pointer;transition:border-color .15s;display:flex;align-items:center;justify-content:space-between;}
.u-s-227347fdc7{margin-top:6px;text-align:right;}
.u-s-229dc1f45c{font-size:var(--t-mini);color:var(--jsl-texto-fraco);margin:0 0 20px;}

.u-s-23129edecd{font-size:var(--t-peq);font-weight:900;color:var(--tx);}
.u-s-2373217a57{padding:2px 6px;font-size:var(--t-micro);margin-left:4px;}
.u-s-238e1ce26d{font-weight:600;color:var(--tx);}
.u-s-23de0fd9ec{background:var(--g1);border:1px solid var(--bd);border-radius:8px;padding:10px;margin-bottom:7px;}
.u-s-245b36530e{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;}
.u-s-245e4516e7{background:var(--g2);border-radius:5px;padding:12px;margin-bottom:11px;font-size:var(--t-peq);}
.u-s-25658b6c49{display:flex;gap:5px;margin-top:3px;flex-wrap:wrap;}
.u-s-25c84c599d{font-size:var(--t-base);font-weight:900;color:var(--y);margin-top:2px;}
.u-s-2632ddc9ab{color:var(--mt);font-size:var(--t-peq);line-height:1.6;margin-bottom:20px;}
.u-s-2691dd67e4{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;cursor:pointer;user-select:none;}
.u-s-26a2dff5d5{color:var(--red);}
.u-s-26c782ced0{position:sticky;bottom:0;background:var(--g2);border-top:1px solid var(--bd);padding:10px 12px;margin-top:8px;}

.u-s-27d1bd0e9a{flex:1;min-width:80px;}
.u-s-2844992261{font-size:var(--t-base);color:var(--jsl-texto-medio);line-height:1.5;margin:0 0 20px;}
.u-s-284988f8a1{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;}
.u-s-2929a59e3f{font-size:var(--t-micro);color:var(--mt);font-weight:700;display:block;margin-bottom:4px;}
.u-s-29307a1edd{font-weight:800;color:var(--red);white-space:nowrap;margin-left:8px;}
.u-s-29a756b350{padding:10px 14px;background:rgba(255,209,0,.06);border:1px solid rgba(255,209,0,.2);border-radius:8px;display:flex;justify-content:space-between;align-items:center;}
.u-s-29d6395295{font-size:var(--t-micro);color:var(--mt);text-transform:uppercase;margin-bottom:3px;}
.u-s-29f9b812dc{font-size:var(--t-med);font-weight:900;color:var(--blu);}
.u-s-2a6a743438{text-align:right;flex-shrink:0;margin-left:12px;}
.u-s-2a83d48c5c{background:var(--g2);border-left:2px solid var(--bd);border-radius:3px;padding:8px 11px;margin-bottom:6px;}
.u-s-2a9d4a3776{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-tit);font-weight:800;color:var(--blu);}

.u-s-2bbef8fff1{max-width:100%;max-height:100%;object-fit:contain;}

.u-s-2c6a1878d7{color:#aaa;font-size:var(--t-peq);line-height:1.7;margin-bottom:16px;}
.u-s-2e2b0dc058{grid-template-columns:1fr 1fr 1fr 1fr;}
.u-s-2e414c651b{align-items:flex-start;}
.u-s-2ecde6d385{color:var(--red);font-weight:700;}
.u-s-2f07684ff0{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:3px 7px;line-height:1.4;width:100%;max-width:980px;margin:22px auto 6px;padding-top:14px;border-top:1px solid var(--bd);text-align:center;font-size:var(--t-mini);color:var(--mt);line-height:2.1;}
.u-s-2f1c7c1a4c{font-size:var(--t-peq);color:var(--mt,#bbb);line-height:1.5;white-space:pre-wrap;margin-bottom:18px;}
.u-s-2f43e7e91f{background:none;border:1px solid var(--bd);border-radius:4px;padding:6px 10px;color:var(--mt);font-size:var(--t-mini);cursor:pointer;font-family:inherit;}

.u-s-2fbcc8f3dd{font-size:var(--t-micro);white-space:nowrap;}
.u-s-2fd7789b39{margin-top:6px;}
.u-s-2fdbea2ea0{background:rgba(229,57,53,.08);border-left:3px solid var(--red);padding:8px 10px;border-radius:3px;font-size:var(--t-micro);line-height:1.5;}
.u-s-2fe6ddaefb{background:#111;border:1px solid #333;border-top:3px solid var(--y);border-radius:12px;padding:28px 24px;width:100%;max-width:410px;text-align:center;}
.u-s-31132abc30{max-width:480px;margin:40px auto;}
.u-s-31b72c7e65{padding:2px 9px;font-size:var(--t-micro);}
.u-s-31c7dd9427{font-size:var(--t-base);color:var(--jsl-texto-medio);line-height:1.5;margin:0 0 16px;}
.u-s-31df68db8b{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
.u-s-3251094307{font-size:var(--t-micro);color:var(--mt);text-transform:uppercase;}
.u-s-32898e62e0{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid var(--bd);font-size:var(--t-peq);}
.u-s-32d497ed17{background:var(--g2);border-radius:5px;padding:10px 12px;margin-bottom:11px;border-left:3px solid var(--y);}
.u-s-334f561203{font-size:var(--t-mini);color:var(--mt);margin-top:4px;}
.u-s-34297bc95d{font-size:var(--t-micro);font-weight:700;color:var(--mt);text-transform:uppercase;letter-spacing:.5px;display:block;margin-bottom:5px;}
.u-s-3522d716d0{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;}
.u-s-35c5bbadf7{background:var(--g3);border-radius:6px;height:5px;overflow:hidden;}
.u-s-363515fefb{background:var(--y);border-radius:4px;padding:8px;text-align:center;}
.u-s-36c79f700c{flex:1;background:rgba(41,182,246,.12);border-color:rgba(41,182,246,.3);color:#29b6f6;}
.u-s-36c8e79143{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--bd);font-size:var(--t-mini);font-weight:600;}
.u-s-37f6d55e75{display:flex;justify-content:space-between;align-items:center;font-size:var(--t-mini);padding:4px 0;border-bottom:1px solid var(--bd);}
.u-s-382471ef4c{background:rgba(229,57,53,.1);border:1px solid rgba(229,57,53,.3);border-left:3px solid var(--red);border-radius:5px;padding:12px;font-size:var(--t-peq);color:var(--mt);}
.u-s-3830561b0f{background:var(--g3);border-radius:6px;height:5px;overflow:hidden;margin-bottom:4px;}
.u-s-388f85df5b{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:16px;}
.u-s-3895bb8502{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.u-s-397a5a4310{text-align:right;padding:8px 4px 2px;}
.u-s-39e0c03596{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px;}
.u-s-3a3881c501{font-style:italic;margin-top:2px;}
.u-s-3a3c461c57{width:100%;margin-bottom:8px;padding:9px 12px;}
.u-s-3a70e9d2ac{background:var(--pur);}
.u-s-3af5241220{margin-top:4px;display:inline-block;}
.u-s-3bc2b767ed{color:var(--mt);min-width:68px;}
.u-s-3bc2ff2ffc{font-size:var(--t-peq);font-weight:800;color:var(--grn);}
.u-s-3bc611080e{font-family:Barlow Condensed,sans-serif;font-size:var(--t-tit);font-weight:900;color:#f5c400;text-transform:uppercase;}
.u-s-3ca1523fc8{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-gr);font-weight:900;color:var(--blu);}
.u-s-3db42e81f5{color:var(--mt);font-size:var(--t-peq);padding:12px;}
.u-s-3e89d1f9d4{display:flex;gap:4px;flex-shrink:0;}
.u-s-3e9de5b6a0{display:flex;justify-content:space-between;margin-top:3px;}
.u-s-3ef1fa1aa1{margin-bottom:12px;}
.u-s-3fdad35854{font-size:var(--t-base);font-weight:700;color:var(--tx);}
.u-s-4061f2edc1{font-size:var(--t-micro);font-weight:800;color:var(--grn);text-transform:uppercase;margin-bottom:3px;}
.u-s-4072bb9ed2{font-size:var(--t-mini);color:var(--mt);}
.u-s-408171a134{color:var(--mt);min-width:70px;}

.u-s-40fb7bee53{text-align:center;font-size:var(--t-mini);color:var(--mt);margin-bottom:12px;}
.u-s-40ffc28842{background:var(--g1);border-radius:4px;padding:8px;margin-bottom:10px;}
.u-s-4165441df3{text-align:right;font-weight:700;}
.u-s-41976ae063{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-gr);font-weight:900;color:var(--red);}
.u-s-424e9f3514{font-size:var(--t-peq);color:var(--mt);}
.u-s-426e1fd903{flex:1;font-size:var(--t-mini);padding:5px 7px;}
.u-s-42bf0748c2{font-size:var(--t-mini);font-weight:800;text-transform:uppercase;color:var(--mt);}
.u-s-42c4196fe0{background:rgba(255,209,0,.08);border:2px solid var(--y);border-radius:10px;padding:14px 16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:14px;position:relative;}
.u-s-43217873d0{font-size:var(--t-mini);font-weight:800;color:var(--y);text-transform:uppercase;letter-spacing:.5px;}
.u-s-4353ef6ef8{flex:1;font-weight:600;}
.u-s-4368dbbb05{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.u-s-43aa47c264{background:var(--grn);border-color:var(--grn);color:#fff;}
.u-s-43d5f5dad1{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:var(--t-mini);}
.u-s-443d70e6a6{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-hero);font-weight:900;color:var(--y);text-transform:uppercase;}
.u-s-45057db3d3{display:none;text-align:center;letter-spacing:8px;font-size:var(--t-gr);font-family:'Barlow Condensed',sans-serif;margin-bottom:10px;}
.u-s-4599ddc750{background:rgba(30,136,229,.1);border-left:3px solid var(--blu);padding:9px 11px;border-radius:3px;font-size:var(--t-mini);line-height:1.5;margin-bottom:13px;}
.u-s-45bca48372{display:flex;justify-content:space-between;padding:2px 0;}
.u-s-468afda9f8{display:none;background:var(--g2);border-left:3px solid var(--y);padding:8px 11px;margin:-2px 0 10px;border-radius:3px;font-size:var(--t-mini);color:var(--tx);}
.u-s-468d1c5bb3{font-size:var(--t-micro);color:rgba(0,0,0,.5);font-weight:700;text-transform:uppercase;}
.u-s-46b57b5fd7{width:100%;padding:9px 12px;}
.u-s-46eb343120{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px;}
.u-s-4715ea64d9{margin:12px 0;background:var(--g2);border-radius:6px;padding:12px;display:flex;justify-content:space-between;}
.u-s-473d53523b{padding:3px;font-size:var(--t-micro);text-align:right;}
.u-s-47fb985dcc{width:100%;padding:10px 12px;}
.u-s-480828f872{width:100%;padding:14px;font-size:var(--t-base);}
.u-s-486ad4485d{font-weight:800;font-size:var(--t-base);}
.u-s-48fefabb4d{text-align:center;margin-top:12px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap;}
.u-s-491fcef1e8{font-size:var(--t-mini);font-weight:700;}
.u-s-492183f1a1{font-size:var(--t-micro);color:var(--mt);}
.u-s-49a705d69c{flex:2;font-size:var(--t-mini);padding:5px 7px;}
.u-s-4a461c8abe{flex:1;margin-bottom:0;font-family:'Barlow Condensed',sans-serif;font-size:var(--t-med);letter-spacing:2px;text-transform:uppercase;}
.u-s-4a4cd90248{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:var(--t-mini);padding:4px 0;border-bottom:1px solid var(--bd);}
.u-s-4bf5c14d87{font-family:Barlow Condensed,sans-serif;font-size:var(--t-tit);font-weight:800;color:var(--red);text-transform:uppercase;margin-bottom:8px;}
.u-s-4bffd0bf17{background:linear-gradient(180deg,#111827,#070a10);border:1px solid rgba(245,196,0,.28);border-radius:18px;padding:26px;width:100%;max-width:430px;text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.55);}
.u-s-4cc7352051{font-size:var(--t-mini);font-weight:800;color:#ce93d8;text-transform:uppercase;letter-spacing:.5px;}
.u-s-4d04bc338f{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--bd);font-size:var(--t-mini);}
.u-s-4d59aadfe1{font-size:var(--t-micro);background:rgba(255,209,0,.1);color:var(--y);padding:2px 6px;border-radius:4px;font-weight:700;}
.u-s-4d65be99a4{width:100%;background:none;border:none;color:var(--mt);font-size:var(--t-peq);cursor:pointer;margin-top:12px;font-family:inherit;}
.u-s-4ee21e8a51{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px;}
.u-s-4facb3ce2d{background:var(--g2);border:1px solid var(--bd);border-radius:4px;padding:10px 12px;margin-bottom:10px;font-size:var(--t-peq);color:var(--mt);}
.u-s-4fb2a2a645{background:var(--g2);border-radius:6px;padding:8px;}
.u-s-4fdb8117e5{display:flex;justify-content:space-between;font-size:var(--t-mini);padding:3px 0;border-bottom:1px solid var(--bd);}
.u-s-509ffee114{background:#111;border:1px solid #333;border-top:3px solid var(--y);border-radius:12px;padding:26px 22px;width:100%;max-width:420px;text-align:center;box-shadow:0 22px 80px rgba(0,0,0,.55);}
.u-s-50d6e66a5c{z-index:var(--z-topbar);}
.u-s-5115bac434{height:1px;background:var(--bd);margin:12px 0;}
.u-s-513b18c309{font-size:var(--t-peq);color:var(--mt);text-align:center;margin-bottom:20px;}
.u-s-51a2b62b3f{color:var(--y);text-decoration:none;}
.u-s-52b7a4a1e5{font-weight:800;color:var(--y);margin-bottom:8px;}
.u-s-52ca125189{font-weight:700;color:var(--y);margin-bottom:4px;}
.u-s-52e381ff32{font-size:var(--t-micro);font-weight:700;background:var(--g1);color:var(--mt);padding:2px 6px;border-radius:3px;}
.u-s-52f71e1d6b{display:flex;flex-direction:column;align-items:center;flex-shrink:0;}
.u-s-535bd9663c{font-size:var(--t-micro);opacity:.7;}
.u-s-53809f1ed0{display:flex;gap:5px;}
.u-s-543ba1ba58{width:100%;margin-bottom:6px;}
.u-s-54ba92d15e{font-size:var(--t-micro);color:rgba(0,0,0,.5);font-weight:700;text-transform:uppercase;margin-bottom:4px;}
.u-s-552dda8630{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0;}
.u-s-555cef46fe{font-size:var(--t-base);color:var(--mt);margin-top:6px;}
.u-s-55bd499b66{font-size:var(--t-gr);font-weight:900;color:var(--y);}
.u-s-5600f4d841{background:var(--y);color:#1a1a1a;padding:9px 11px;margin:-11px -11px 9px;border-radius:4px 4px 0 0;font-family:\'Barlow Condensed\',sans-serif;font-weight:800;font-size:var(--t-base);text-transform:uppercase;}
.u-s-56d833c22a{flex:2;min-width:220px;padding:7px 9px;}
.u-s-5700f9ee4a{background:var(--g2);border-radius:6px;padding:10px;text-align:center;border-top:2px solid var(--y);}
.u-s-576549adab{margin-top:7px;padding:7px;background:rgba(255,209,0,.06);border:1px solid rgba(255,209,0,.15);border-radius:8px;display:none;}
.u-s-57ab87becb{max-width:500px;margin:24px auto;}
.u-s-57e478e8e2{max-width:500px;margin:0 auto;}
.u-s-585933f067{padding:2px 7px;}
.u-s-5877625dd6{color:var(--pur);}
.u-s-58ed229aee{font-size:var(--t-peq);font-weight:700;color:var(--tx);margin-top:2px;}
.u-s-59751aaac1{font-size:var(--t-mini);font-weight:800;color:var(--mt);text-transform:uppercase;letter-spacing:.5px;}
.u-s-597636a98a{display:flex;gap:4px;}
.u-s-5a07d3f8d1{font-size:var(--t-mini);color:var(--mt);margin-bottom:16px;}
.u-s-5a2788f0b7{width:' + pct + '%;}
.u-s-5a3587e5a0{font-size:var(--t-peq);color:var(--mt);margin-top:3px;}
.u-s-5a9738ff9e{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.u-s-5a98bc46e9{width:1px;flex:1;background:var(--bd);min-height:16px;}
.u-s-5b5f36d31d{font-weight:800;color:var(--grn);font-size:var(--t-med);}
.u-s-5bc79cce28{font-size:var(--t-peq);padding:11px;opacity:.4;}
.u-s-5cec065664{font-size:var(--t-micro);font-weight:700;color:var(--mt);text-transform:uppercase;margin:6px 0 3px;}
.u-s-5d1e6de9d3{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.u-s-5d42f7b802{font-size:var(--t-med);font-weight:800;color:var(--tx);}
.u-s-5d55de1ad6{position:relative;margin-bottom:4px;}
.u-s-5d7124ce93{font-size:var(--t-peq);color:var(--jsl-texto-medio);line-height:1.55;margin:0 0 18px;}
.u-s-5da7cbe4ea{max-width:960px;}
.u-s-5db39cfc8c{flex:1;color:var(--tx);font-weight:900;}
.u-s-5e1082699e{background:rgba(255,209,0,.06);border:1px solid rgba(255,209,0,.2);border-radius:8px;padding:12px;display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.u-s-5e852c4761{background:rgba(255,152,0,.15);color:#ffa726;}
.u-s-5e91632571{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-gr);font-weight:900;color:var(--y);}
.u-s-5f752e7d81{font-size:var(--t-mini);padding:8px;}
.u-s-5fbc5e30e4{background:rgba(46,150,80,.08);border-left:3px solid #2e9650;padding:9px 11px;margin-top:6px;border-radius:3px;}
.u-s-61024729bf{font-size:var(--t-base);font-weight:800;color:var(--y);}
.u-s-613f7518b6{background:var(--g2);border-radius:4px;padding:9px 11px;margin-bottom:12px;font-size:var(--t-peq);color:var(--mt);}
.u-s-6158ab4063{font-size:var(--t-micro);font-weight:800;color:var(--mt);text-transform:uppercase;letter-spacing:1px;padding:5px 0 5px;border-bottom:1px solid var(--bd);margin-bottom:6px;}
.u-s-624a7cca9b{font-size:var(--t-peq);font-weight:700;color:#ce93d8;text-transform:uppercase;letter-spacing:.5px;}
.u-s-62577b7db4{font-size:var(--t-micro);color:var(--mt);font-weight:700;text-transform:uppercase;margin-bottom:3px;}
.u-s-625dabe15c{font-size:var(--t-med);font-weight:900;color:var(--y);white-space:nowrap;}
.u-s-62aacb9673{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px;font-size:var(--t-micro);color:var(--premium-muted);}
.u-s-62fb368194{text-align:right;font-weight:700;color:var(--grn);}
.u-s-633beba610{max-height:180px;overflow-y:auto;}
.u-s-634d9a88a2{display:none;background:rgba(255,255,255,.04);border:1px solid var(--bd);border-radius:8px;padding:12px 16px;margin-bottom:14px;display:none;}
.u-s-63d058f849{cursor:pointer;}
.u-s-643b7cf60f{display:flex;justify-content:space-between;gap:8px;font-size:var(--t-mini);padding:4px 0;border-bottom:1px solid var(--bd);}
.u-s-64bbadf57e{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--bd);font-size:var(--t-mini);}
.u-s-64d7897514{font-size:var(--t-peq);color:var(--mt);line-height:1.8;}
.u-s-64ed8ec8ed{font-size:var(--t-mini);padding:8px 10px;border-radius:4px;margin-bottom:8px;display:none;}
.u-s-66a18b8881{font-size:var(--t-mini);color:var(--mt);margin-bottom:6px;}
.u-s-66c6a2aa5f{font-size:var(--t-peq);color:var(--mt);font-weight:700;text-transform:uppercase;}
.u-s-66db22b346{display:none;margin-top:12px;padding:12px;border:1px solid var(--bd,#eee);border-radius:8px;}
.u-s-66de535b3f{font-family:\'Barlow Condensed\',sans-serif;font-size:var(--t-gr);font-weight:800;color:var(--y);}
.u-s-66f9b82e79{display:none;border-top:1px solid rgba(255,255,255,.05);}
.u-s-680fd9198a{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:var(--t-mini);padding:3px 0;border-bottom:1px solid var(--bd);}
.u-s-682ec5b163{font-size:var(--t-micro);background:var(--grn);}
.u-s-68dbc4e672{flex:1;font-size:var(--t-mini);padding:4px 7px;}
.u-s-68dbf62128{background:var(--g2);border-radius:5px;padding:10px 12px;margin-bottom:11px;}
.u-s-697198e7d2{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;}
.u-s-6a46ed7e5f{background:rgba(67,160,71,.1);border-left:3px solid var(--grn);border-radius:3px;padding:8px 10px;font-size:var(--t-mini);color:var(--tx);line-height:1.5;}
.u-s-6a8b50f1bd{padding:14px;background:var(--jsl-fundo-3);border-radius:12px;font-size:var(--t-peq);line-height:1.7;margin-bottom:16px;}
.u-s-6aa93ded88{font-size:var(--t-mini);font-weight:700;color:var(--mt);text-transform:uppercase;letter-spacing:.5px;margin:10px 0 6px;}
.u-s-6add97efa7{max-width:480px;}
.u-s-6b206d9f1c{margin-bottom:11px;display:flex;gap:8px;}
.u-s-6c002e2180{margin-bottom:6px;}
.u-s-6c009c68e4{z-index:var(--z-critico);}
.u-s-6d09221a24{max-width:400px;}

.u-s-6e14e25173{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.u-s-6eab5e7808{display:flex;flex-direction:column;}
.u-s-6f370bd800{background:var(--g1);border:1px solid var(--bd);border-radius:5px;padding:11px 13px;margin-bottom:8px;}
.u-s-701b0d2d15{background:var(--g2);border-radius:4px;padding:8px;margin-bottom:11px;font-size:var(--t-peq);color:var(--mt);}
.u-s-709ab36352{font-size:var(--t-micro);font-weight:800;color:var(--mt);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px;margin-top:4px;}
.u-s-710d275778{background:var(--g2);border-radius:6px;padding:10px;text-align:center;border-top:2px solid #66bb6a;}
.u-s-71e60b8a61{font-size:var(--t-micro);color:var(--mt);background:var(--g3);padding:1px 4px;border-radius:3px;}
.u-s-72d210fb9d{flex:2;min-width:140px;padding:7px 9px;}
.u-s-73255be9e9{display:block;width:100%;background:var(--y);border:none;border-radius:5px;padding:12px;color:#1a1a1a;font-family:Barlow Condensed,sans-serif;font-size:var(--t-base);font-weight:800;cursor:pointer;text-transform:uppercase;text-decoration:none;box-sizing:border-box;margin-bottom:8px;}
.u-s-7330f2a294{opacity:.6;}

.u-s-739c2f4a52{font-size:var(--t-mini);color:var(--mt);line-height:1.5;max-height:36px;overflow:hidden;}
.u-s-73f9c49fc5{max-width:520px;}
.u-s-746f86bd13{background:var(--y);border-radius:5px;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;}
.u-s-74801413e8{flex:1;min-width:110px;padding:7px 9px;}
.u-s-758a887326{font-weight:700;}
.u-s-75fb511969{font-size:var(--t-mini);font-weight:700;color:var(--mt);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.u-s-76084ee4e5{margin-bottom:0;}
.u-s-7623f05545{flex:1;}
.u-s-765c4a2de9{color:var(--premium-muted);font-size:var(--t-peq);}
.u-s-771f2cf864{font-weight:700;font-size:var(--t-base);color:var(--y);margin-bottom:4px;}
.u-s-7729cf8c84{color:var(--red);font-size:var(--t-peq);}
.u-s-775746cf0d{margin-bottom:11px;border-left:3px solid var(--grn);}
.u-s-790cce2af7{font-size:var(--t-micro);font-weight:800;color:var(--mt);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;}
.u-s-7935d6db37{padding:3px 6px;}
.u-s-796b02145b{white-space:pre-line;font-size:var(--t-mini);}
.u-s-797dedf96d{color:var(--mt);font-weight:700;font-size:var(--t-micro);letter-spacing:.4px;text-transform:uppercase;}
.u-s-79bafd1b85{font-size:var(--t-micro);color:var(--mt);font-weight:400;}
.u-s-79be669d53{color:var(--grn);}
.u-s-7af60bc563{color:var(--mt);font-size:var(--t-peq);font-weight:600;}
.u-s-7b639f3f45{background:rgba(255,209,0,.06);border:1px solid rgba(255,209,0,.2);border-radius:10px;padding:12px;margin-bottom:14px;}
.u-s-7bb1d6f7e6{background:var(--g2);border-radius:5px;padding:14px;margin-bottom:11px;border-left:3px solid var(--y);}
.u-s-7be2b26c44{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;margin:12px 0;}
.u-s-7c37a357dd{font-size:var(--t-peq);color:var(--tx);font-weight:700;margin-bottom:9px;}

.u-s-7ca25162ff{color:var(--blu);}

.u-s-7d57a5c2df{max-width:420px;}
.u-s-7d7ac7aab6{flex:1;min-width:80px;border-color:rgba(255,209,0,.4);color:var(--y);}
.u-s-7daea5fa11{margin-bottom:5px;}
.u-s-7dd63a2acc{max-height:55px;max-width:180px;object-fit:contain;}
.u-s-7e20e7b070{background:var(--y);color:#1a1a1a;border:none;border-radius:4px;padding:3px 10px;font-family:inherit;font-weight:700;font-size:var(--t-mini);cursor:pointer;}
.u-s-7e30d285d2{display:flex;align-items:center;gap:10px;}
.u-s-7e7619bdca{max-width:440px;}
.u-s-7e84b38859{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;text-align:center;}
.u-s-7eec403df1{background:rgba(255,209,0,.15);color:var(--y);font-size:var(--t-micro);font-weight:700;padding:2px 8px;border-radius:20px;}
.u-s-7f2e2e0e54{font-size:var(--t-mini);color:var(--mt);word-break:break-all;margin-bottom:6px;}
.u-s-7f4af02923{background:rgba(46,150,80,.18);color:#2e9650;padding:2px 7px;border-radius:3px;font-size:var(--t-micro);font-weight:700;}
.u-s-7f77082581{display:flex;justify-content:space-between;margin-bottom:3px;}
.u-s-80032cc7e6{font-size:var(--t-gr);font-weight:700;color:var(--tx);margin-bottom:4px;text-align:center;}
.u-s-802e851ea6{background:var(--g2);border-radius:6px;padding:10px;text-align:center;border-top:2px solid var(--red);}
.u-s-80d0ca25df{background:var(--y);border-radius:8px;padding:14px;text-align:center;}

.u-s-8129723856{display:flex;justify-content:space-between;align-items:center;}
.u-s-814f9febcf{font-size:var(--t-mini);color:var(--mt);margin-top:1px;}
.u-s-8191b956f4{flex:1;min-width:130px;padding:7px 9px;}

.u-s-82828ff3e4{flex:1;min-width:90px;background:var(--grn);border-color:var(--grn);color:#fff;}
.u-s-830715b491{background:var(--g3);}
.u-s-830949e416{position:fixed;inset:0;background:#0a0a0a;z-index:var(--z-critico);overflow-y:auto;-webkit-overflow-scrolling:touch;}
.u-s-83106f7fe3{flex:1;color:var(--tx);font-weight:800;line-height:1.25;}

.u-s-8409e83335{width:100%;border-collapse:collapse;margin:8px 0;font-size:var(--t-mini);}
.u-s-849ee68f88{max-height:100px;overflow-y:auto;}
.u-s-84ba424a37{background:var(--blu);}
.u-s-84d0e87f86{font-size:var(--t-peq);font-weight:700;color:#fff;}
.u-s-85456bb731{background:none;border:none;color:var(--mt);font-size:var(--t-mini);cursor:pointer;font-family:inherit;text-decoration:underline;}
.u-s-857d5aa663{text-align:center;padding:20px;color:var(--mt);font-size:var(--t-peq);}
.u-s-85d9f5111a{padding:2px 6px;font-size:var(--t-micro);}
.u-s-86260335b8{text-align:right;font-size:var(--t-mini);color:var(--red);margin-bottom:3px;}
.u-s-87512c6544{max-width:580px;}
.u-s-879ab27a5b{font-size:var(--t-micro);}
.u-s-87a0fc434a{width:100%;padding:14px;font-size:var(--t-base);font-weight:800;text-transform:uppercase;}
.u-s-87db227580{position:relative;}
.u-s-8832f2f9b6{background:rgba(123,31,162,.2);color:#ce93d8;font-size:var(--t-micro);font-weight:700;padding:2px 7px;border-radius:20px;text-transform:uppercase;}
.u-s-88b9d5c614{margin-top:14px;}
.u-s-88eadf6ee2{font-size:var(--t-peq);font-weight:800;color:#1a1a1a;}
.u-s-8a406c76c6{font-size:var(--t-micro);font-weight:600;color:rgba(0,0,0,.55);}
.u-s-8b3d53f21e{margin-bottom:11px;border-left:3px solid var(--pur);}
.u-s-8b576bcd8f{max-width:480px;margin:0 auto;padding:16px;}
.u-s-8b7d8ac1f9{font-size:var(--t-mini);color:var(--mt);margin-bottom:4px;}
.u-s-8bd19c0f42{width:100%;margin-bottom:10px;}
.u-s-8c0676b949{min-width:220px;padding:7px 9px;}
.u-s-8c3684bdd5{background:var(--grn);}
.u-s-8cb12c19e2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.u-s-8cb15b667a{background:var(--g3);border-radius:10px;height:10px;overflow:hidden;margin-bottom:8px;}
.u-s-8cf554f7d8{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid rgba(58,58,58,.4);}
.u-s-8d0f91be3e{flex:1;padding:10px;font-weight:700;}
.u-s-8d2daa3996{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-tit);font-weight:800;color:var(--y);}
.u-s-8d333d1fe7{background:var(--g2);border:2px solid var(--bd);border-radius:10px;padding:14px 16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:14px;}
.u-s-8dcfeeb690{font-family:\'Barlow Condensed\',sans-serif;font-size:var(--t-hero);font-weight:900;color:var(--y);letter-spacing:5px;}
.u-s-8e464fc219{width:100%;margin-top:4px;opacity:.7;}
.u-s-8e4943ed57{color:var(--tx);}
.u-s-8e4fb35d8c{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px;}
.u-s-8e57edade5{accent-color:var(--red);width:15px;height:15px;}
.u-s-8e6b30bdee{display:flex;justify-content:space-between;padding:6px 0 0;margin-top:4px;border-top:1px solid var(--bd);font-weight:800;font-size:var(--t-base);}
.u-s-8e820a47a7{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px;}
.u-s-8f40fe2d88{width:100%;margin-top:4px;}
.u-s-8f84547343{color:var(--mt);font-size:var(--t-peq);margin:0 0 8px;}
.u-s-8fbd368104{margin-bottom:11px;}
.u-s-8fe2f6c2d5{font-size:var(--t-mini);color:var(--y);font-weight:800;}
.u-s-8ff2a1de7d{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-hero);font-weight:900;color:var(--y);line-height:1;}
.u-s-8ff4e6f758{font-size:var(--t-mini);color:var(--grn);font-weight:800;}
.u-s-900754d14c{font-size:var(--t-micro);color:var(--mt);font-weight:700;white-space:nowrap;}
.u-s-90477752c0{color:var(--mt);font-size:var(--t-peq);padding:10px;}
.u-s-9092d2c139{background:var(--bk2);border:1px solid var(--bd);border-radius:8px;padding:16px;margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
.u-s-90933879d1{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px;}
.u-s-911d953657{background:rgba(255,209,0,.15);}
.u-s-912087f846{width:100%;background:none;border:0;color:var(--mt);font-size:var(--t-mini);text-decoration:underline;margin-top:8px;cursor:pointer;}

.u-s-91a72157f3{font-size:var(--t-micro);color:var(--mt);margin-top:4px;}
.u-s-91dae563b0{flex:2;min-width:120px;padding:7px 9px;}
.u-s-928eb52131{max-width:160px;border-radius:8px;border:1px solid var(--bd,#eee);}
.u-s-92b60e1dbb{font-size:var(--t-micro);color:var(--mt);margin-top:3px;}
.u-s-9374e84210{margin-top:12px;}
.u-s-945ebe00f3{font-weight:700;margin-bottom:8px;}
.u-s-948cca810a{padding-bottom:12px;}
.u-s-948e433df6{background:#19a974;}
.u-s-9493c3b163{font-size:var(--t-base);font-weight:900;color:var(--y);}
.u-s-94dba73993{color:var(--mt);font-size:var(--t-peq);padding:25px 0;text-align:center;}

.u-s-9562d6bf09{font-weight:700;font-size:var(--t-base);margin-bottom:6px;color:var(--y);}
.u-s-95b8cea630{background:rgba(255,209,0,.15);color:var(--y);font-size:var(--t-micro);font-weight:700;padding:2px 7px;border-radius:20px;text-transform:uppercase;}
.u-s-9601c694ab{font-size:var(--t-mini);font-weight:700;color:var(--red);}
.u-s-96a1c005ba{background:var(--g2);border:1px solid var(--bd);border-radius:12px;padding:14px;margin-bottom:10px;cursor:pointer;}
.u-s-97513b7695{display:flex;justify-content:space-between;margin-bottom:8px;}
.u-s-978a935978{text-align:center;margin-bottom:24px;}
.u-s-97be4e2002{background:var(--g2);border-radius:4px;padding:9px 11px;margin-bottom:8px;font-size:var(--t-mini);color:var(--mt);line-height:1.6;}
.u-s-97ccfa4a0f{font-size:var(--t-peq);font-weight:600;color:var(--tx);}
.u-s-98748f3e0f{color:var(--red);font-size:var(--t-mini);margin-top:10px;}
.u-s-99056e93ed{color:var(--mt);font-size:var(--t-base);transition:transform .25s;}
.u-s-9940e5db4d{font-size:var(--t-micro);color:var(--y);font-weight:700;}
.u-s-99421025ef{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.u-s-9950244793{max-height:115px;overflow-y:auto;}


.u-s-99f0abe4a5{display:flex;gap:6px;margin-top:9px;padding-top:9px;border-top:1px solid var(--bd);}

.u-s-9a68080f30{font-size:var(--t-micro);color:var(--mt);margin-bottom:5px;font-weight:600;text-transform:uppercase;}
.u-s-9aaa2feefc{background:rgba(46,150,80,.1);border-left:3px solid var(--grn);border-radius:0 4px 4px 0;padding:8px 12px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;}
.u-s-9ad71f1597{font-style:normal;}
.u-s-9aff13cf76{flex:1;min-width:90px;padding:7px 9px;}
.u-s-9b10aedb0b{max-width:780px;}
.u-s-9b19edea16{font-size:var(--t-micro);color:var(--grn);}
.u-s-9bc2a40ac3{background:var(--g1);border-radius:4px;padding:8px;}
.u-s-9c4019f4fc{display:none;background:var(--grn,#19a974);border-color:rgba(25,169,116,.45);color:#fff;}
.u-s-9ceb3cf237{color:#66bb6a;font-weight:700;}
.u-s-9d3009ebf6{display:flex;flex-direction:column;gap:6px;}
.u-s-9d3f58d536{font-size:var(--t-peq);font-weight:800;color:var(--y);}

.u-s-9e8cea7087{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:var(--g2);border-radius:4px;margin-bottom:4px;gap:7px;}

.u-s-9f1eb5e239{display:flex;justify-content:space-between;font-size:var(--t-peq);color:var(--mt);margin-bottom:4px;}
.u-s-9f31b5752f{font-family:Barlow Condensed,sans-serif;font-size:var(--t-tit);font-weight:900;color:var(--y);text-transform:uppercase;margin-bottom:8px;}
.u-s-9f77f8555e{text-align:center;margin-bottom:20px;}
.u-s-9fab2b7077{display:grid;grid-template-columns:1fr 1fr 1fr;gap:4px;font-size:var(--t-micro);padding-top:6px;border-top:1px solid var(--bd);}
.u-s-a07604d334{flex:1;min-width:0;}
.u-s-a0b6b591ab{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:7px;}
.u-s-a0f8ee76d0{font-size:var(--t-mini);color:var(--mt);margin-top:3px;}
.u-s-a19aeaa2a0{font-size:var(--t-hero);margin-bottom:12px;}
.u-s-a1e780e172{font-size:var(--t-micro);color:var(--mt);font-weight:700;}
.u-s-a1fab75032{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;}
.u-s-a233714422{font-size:var(--t-peq);font-weight:800;color:var(--red);}
.u-s-a28d96c53a{font-size:var(--t-peq);font-weight:700;}
.u-s-a3a5568692{margin-top:4px;}
.u-s-a40b55fa87{color:var(--mt);font-weight:500;}

.u-s-a43932eb4f{font-size:var(--t-base);font-weight:700;color:#ff5252;}
.u-s-a48ac29f93{color:var(--y);font-weight:700;}
.u-s-a4c5fdc958{display:flex;justify-content:space-between;font-size:var(--t-peq);padding:4px 0;border-bottom:1px solid var(--bd);}
.u-s-a527bac1ee{text-align:right;}
.u-s-a5697460df{flex:1;min-width:80px;padding:7px 9px;}


.u-s-a6482913fd{display:flex;align-items:center;gap:8px;font-size:var(--t-peq);cursor:pointer;}
.u-s-a6d6b0b8bf{margin-bottom:7px;}
.u-s-a6e633fe41{font-size:var(--t-mini);color:var(--mt);line-height:1.6;}

.u-s-a7eddc4515{text-align:center;margin-top:10px;}
.u-s-a82d7062cc{margin-bottom:14px;}
.u-s-a84ef86005{color:var(--mt);font-size:var(--t-peq);padding:16px;text-align:center;border:1px dashed var(--bd);border-radius:8px;}
.u-s-a8513f2e4c{width:100%;padding:11px;font-size:var(--t-peq);}
.u-s-a8b86e7625{font-size:var(--t-peq);font-weight:800;color:var(--pur);}
.u-s-a9411f4292{font-size:var(--t-mini);color:var(--red);font-weight:800;}
.u-s-a984f1a46d{font-size:var(--t-micro);color:var(--mt);line-height:1.6;}

.u-s-aaa1808b47{position:absolute;top:-10px;right:14px;background:var(--y);color:#1a1a1a;font-size:var(--t-micro);font-weight:800;padding:2px 10px;border-radius:20px;text-transform:uppercase;}
.u-s-ab476bd9f1{background:#1e88e5;}
.u-s-ab7c9ed898{font-size:var(--t-peq);font-weight:700;color:var(--mt);text-transform:uppercase;letter-spacing:.5px;}
.u-s-ac2a2b5d7f{margin-top:9px;padding-top:9px;border-top:1px solid var(--bd);display:flex;justify-content:space-between;font-size:var(--t-mini);font-weight:700;}
.u-s-ac793415f0{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-hero);font-weight:900;color:var(--y);}
.u-s-ac86ac1128{display:flex;align-items:center;gap:6px;}
.u-s-acdac5a45b{font-size:var(--t-micro);color:var(--mt);margin-top:4px;line-height:1.5;}
.u-s-ad8b10d5e7{font-size:var(--t-peq);font-weight:700;color:var(--mt);margin-bottom:16px;}
.u-s-ad8e39de49{width:16px;height:16px;flex-shrink:0;cursor:pointer;}
.u-s-ad98a3ae6b{background:var(--g2);border-radius:6px;padding:10px;text-align:center;border-top:2px solid var(--blu);}

.u-s-ae34605f59{color:var(--mt);font-size:var(--t-peq);margin:4px 0 12px;}
.u-s-aee57c5178{font-weight:700;font-family:monospace;font-size:var(--t-mini);}
.u-s-af3fee87a1{margin-bottom:10px;}
.u-s-af7746c9eb{color:var(--blu);font-size:var(--t-micro);}
.u-s-b0749d34a2{font-weight:800;font-size:var(--t-base);color:var(--tx,#eee);margin-bottom:8px;}
.u-s-b1456c046e{background:rgba(41,182,246,.12);border-color:rgba(41,182,246,.3);color:#29b6f6;}
.u-s-b155053394{background:var(--g2);border:1px solid rgba(255,255,255,.06);border-radius:10px;overflow:hidden;}
.u-s-b15b05acdc{display:flex;gap:6px;margin-bottom:4px;}
.u-s-b16698984b{flex:1;min-width:180px;padding:7px 9px;}
.u-s-b17908459c{font-weight:800;font-size:var(--t-peq);color:var(--tx);}
.u-s-b1ac7b1664{background:var(--y);color:#1a1a1a;border:none;border-radius:8px;padding:0 16px;font-family:'Barlow',sans-serif;font-weight:700;font-size:var(--t-peq);cursor:pointer;}
.u-s-b1c6834332{position:absolute;top:3px;right:3px;padding:1px 6px;}
.u-s-b225d72157{background:var(--g2);border-radius:5px;padding:12px 14px;margin-bottom:11px;border-left:3px solid var(--grn);}
.u-s-b2cddad8ce{font-size:var(--t-micro);font-weight:800;color:var(--mt);text-transform:uppercase;}
.u-s-b323632d0f{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;font-size:var(--t-micro);padding-top:6px;border-top:1px solid var(--bd);}
.u-s-b35a043449{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px;margin-bottom:12px;}
.u-s-b424d36531{color:var(--tx,#1a1a1a);}
.u-s-b4e81e32c1{color:var(--mt);display:block;}
.u-s-b614f83e77{margin-top:8px;padding-top:8px;border-top:1px solid var(--bd);display:flex;justify-content:space-between;align-items:center;}
.u-s-b64c48d25e{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.u-s-b666836683{font-size:var(--t-mini);font-weight:700;color:var(--mt);text-transform:uppercase;letter-spacing:.5px;margin:14px 0 6px;}
.u-s-b68dc640a4{background:var(--g3);border-radius:10px;height:6px;overflow:hidden;margin-bottom:2px;}
.u-s-b6a4e09b0f{font-size:var(--t-mini);color:var(--mt);line-height:1.5;margin-bottom:8px;}
.u-s-b6cbbbf870{color:var(--mt);font-size:var(--t-peq);line-height:1.6;margin:5px 0 0;}

.u-s-b6daf8552e{color:#ff5252;font-weight:700;}

.u-s-b6f86a2c67{margin-bottom:11px;border-left:3px solid var(--y);}
.u-s-b6fb93a7fb{opacity:.7;}
.u-s-b79f6d320a{font-size:var(--t-base);font-weight:800;color:var(--red);}
.u-s-b7a2869c75{background:var(--red);}
.u-s-b8190056a9{background:var(--g2);border:2px solid var(--bd);border-radius:10px;padding:14px 16px;cursor:pointer;transition:border-color .15s;display:flex;align-items:center;justify-content:space-between;}
.u-s-b868bfb1fd{font-size:var(--t-peq);color:var(--jsl-texto-fraco);margin:0 0 16px;}
.u-s-b8ef4c10c0{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-tit);font-weight:800;color:var(--red);}

.u-s-b9b8c279d8{text-align:center;margin-top:20px;padding-top:16px;border-top:1px solid var(--bd);}

.u-s-badcbf278d{display:flex;align-items:center;gap:6px;margin-bottom:3px;}
.u-s-bb4420c732{font-size:var(--t-peq);color:var(--mt);line-height:1.6;margin-top:6px;max-width:360px;margin-left:auto;margin-right:auto;}
.u-s-bbd24fe3ae{font-weight:700;color:var(--grn);}

.u-s-bc3f71b13f{width:100%;margin-bottom:8px;}
.u-s-bcf9055bc1{flex:1;min-width:70px;padding:7px 9px;}
.u-s-bd079d8872{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-tit);font-weight:800;color:#1a1a1a;}
.u-s-bd36a8f599{display:none;position:fixed;inset:0;background:#0a0a0a;z-index:var(--z-critico);overflow-y:auto;padding:16px;}
.u-s-bd686427f9{width:64px;height:64px;border-radius:50%;background:var(--y);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:var(--t-tit);font-weight:900;color:#1a1a1a;margin:0 auto 10px;}
.u-s-bd839dc05f{font-size:var(--t-gr);font-weight:800;color:#ff5252;}
.u-s-bd88a4d36a{background:var(--y);color:#1a1a1a;border:none;border-radius:4px;padding:7px 12px;font-family:'Barlow',sans-serif;font-weight:800;font-size:var(--t-mini);cursor:pointer;text-transform:uppercase;letter-spacing:.3px;}

.u-s-be2baa24e6{background:var(--y);color:#1a1a1a;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:var(--t-med);}
.u-s-be92ad4a26{background:var(--g1);border:1px solid var(--bd);border-radius:6px;padding:11px 13px;margin-bottom:8px;}
.u-s-bf3839cf31{color:var(--mt);text-decoration:none;margin:0 5px;}
.u-s-bfe9f5e931{background:rgba(255,82,82,.15);color:#ff5252;}
.u-s-c06ac9822c{flex:1;min-width:180px;}
.u-s-c102707d56{background:var(--g3);font-size:var(--t-base);}
.u-s-c1593a5b4c{background:var(--y);}
.u-s-c1efd21f93{font-size:var(--t-hero);margin-bottom:10px;}
.u-s-c25f6c752e{display:flex;align-items:center;gap:7px;flex:1;min-width:0;}
.u-s-c26599eaff{flex:2;min-width:150px;padding:7px 9px;}
.u-s-c3491e8cf0{font-weight:700;cursor:pointer;}

.u-s-c3ca12c4da{background:var(--g2);border-radius:5px;padding:10px 12px;margin-bottom:11px;border-left:3px solid var(--grn);}
.u-s-c40b094f88{max-height:420px;overflow-y:auto;}
.u-s-c41a591f23{font-size:var(--t-mini);font-weight:600;}

.u-s-c4bee3c60a{color:#ff5252;font-size:var(--t-peq);padding:20px;}
.u-s-c57df5278e{width:100%;background:var(--g2);border:1px solid var(--bd);border-radius:5px;padding:10px;color:var(--mt);font-family:Barlow,sans-serif;font-size:var(--t-peq);cursor:pointer;}
.u-s-c5ffe5b7c4{display:none;padding:9px 11px;border-radius:4px;font-size:var(--t-mini);line-height:1.6;margin-bottom:8px;border-left:3px solid;}


.u-s-c7938e9047{font-size:var(--t-mini);font-weight:800;text-transform:uppercase;color:var(--mt);margin-bottom:10px;}
.u-s-c7f9ebd8cd{color:var(--mt);font-weight:700;}
.u-s-c855568d33{font-size:var(--t-peq);color:var(--mt);font-weight:700;}
.u-s-c8be1ccba6{display:none;}
.u-s-c8d67009fe{display:flex;gap:6px;flex-wrap:wrap;}
.u-s-c9181db6b1{position:absolute;top:-10px;right:14px;background:var(--y);color:#1a1a1a;font-size:var(--t-micro);font-weight:800;padding:2px 12px;border-radius:20px;text-transform:uppercase;}
.u-s-ca4a000de9{flex:1;color:var(--y);font-size:var(--t-micro);}
.u-s-cad980f4b7{width:100%;}
.u-s-caf2e3d0e7{width:36px;height:36px;background:var(--y);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-size:var(--t-base);font-weight:900;color:#1a1a1a;}
.u-s-cb3923b71e{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--bd);font-size:var(--t-peq);}
.u-s-cb51ebd263{background:rgba(123,31,162,.08);border:2px solid var(--bd);border-radius:10px;padding:14px 16px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:14px;}
.u-s-cb7bf819f4{text-align:center;color:var(--mt);padding:20px;line-height:1.5;}
.u-s-cbb0be9a89{white-space:pre-wrap;}
.u-s-cc88d7327d{font-size:var(--t-med);font-weight:700;color:var(--tx);margin-top:8px;}
.u-s-ccb46ecb16{color:#19a974;}
.u-s-ccfc99246d{font-size:var(--t-micro);color:var(--mt);margin-bottom:8px;}
.u-s-cd336b25f7{background:rgba(255,255,255,.06);border:1px solid var(--bd);border-radius:10px;color:var(--mt);font-size:var(--t-gr);cursor:pointer;padding:5px 10px;}
.u-s-cd69af5cd8{max-height:130px;overflow-y:auto;margin-bottom:10px;}
.u-s-ce2ae14b37{background:rgba(37,211,102,.12);border-color:rgba(37,211,102,.3);color:#25d366;font-size:var(--t-peq);padding:11px;}
.u-s-ce30d360bc{display:flex;gap:10px;align-items:flex-start;}
.u-s-cec73780b0{font-size:var(--t-micro);font-weight:700;color:var(--mt);text-transform:uppercase;margin:10px 0 6px;}
.u-s-cf05ca29d9{padding-right:42px;margin-bottom:0;}
.u-s-cf0ae85dca{background:rgba(255,209,0,.06);border:2px solid var(--y);border-radius:10px;padding:14px 16px;cursor:pointer;transition:border-color .15s;display:flex;align-items:center;justify-content:space-between;position:relative;}
.u-s-cf37034751{padding:16px;}


.u-s-d0ae63fbab{background:var(--g2);border-radius:6px;padding:10px;text-align:center;border-top:2px solid #ce93d8;}

.u-s-d0e9abe0db{font-size:var(--t-peq);padding:11px;}
.u-s-d0f52df2fc{max-height:90px;overflow-y:auto;}
.u-s-d0fe5916a0{color:var(--y);font-weight:700;width:40px;font-size:var(--t-mini);}
.u-s-d160576cf4{background:var(--g2);border:1px solid var(--bd);border-radius:12px;padding:14px;margin-bottom:16px;}
.u-s-d2b05bf7c4{color:var(--mt);font-size:var(--t-peq);padding:4px 0;}
.u-s-d2ca15ceca{text-align:right;flex-shrink:0;}
.u-s-d3612f07e0{text-transform:uppercase;}
.u-s-d3eed205b5{background:var(--g2);border-radius:4px;padding:8px;text-align:center;}
.u-s-d449d5a212{font-family:\'Barlow Condensed\',sans-serif;font-size:var(--t-gr);font-weight:800;color:var(--grn);}
.u-s-d4596dd763{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-tit);font-weight:900;color:var(--tx);line-height:1;}
.u-s-d5d7d68a23{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-gr);font-weight:900;color:var(--tx);}
.u-s-d5e3c67510{font-size:var(--t-mini);font-weight:700;color:var(--mt);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;}
.u-s-d6024de11c{font-size:var(--t-mini);color:var(--mt);margin-bottom:2px;}
.u-s-d7933f4138{background:none;border:none;color:var(--mt);font-size:var(--t-mini);cursor:pointer;font-family:inherit;}
.u-s-d86b4a51fc{justify-content:space-between;width:100%;}

.u-s-d96a0c182a{color:#66bb6a;}
.u-s-d982937dda{margin-bottom:4px;}
.u-s-d99b79b67c{width:110px;height:110px;object-fit:cover;border-radius:8px;border:1px solid var(--bd,#eee);}
.u-s-d9a3521729{font-size:var(--t-micro);color:var(--red);font-weight:700;}
.u-s-d9b0926a10{color:var(--mt);}
.u-s-d9b6b58fe4{background:rgba(255,255,255,.08);color:var(--mt);font-size:var(--t-micro);font-weight:700;padding:2px 8px;border-radius:20px;}
.u-s-d9bdf14255{background:var(--g2);border-radius:4px;padding:10px 12px;margin-bottom:11px;font-size:var(--t-peq);}
.u-s-da5a491935{display:flex;justify-content:space-between;}
.u-s-da6759b073{font-size:var(--t-mini);}
.u-s-dac4fe6c9b{text-align:center;}
.u-s-db1b053ecd{background:rgba(255,209,0,.07);border:1px solid rgba(255,209,0,.2);border-radius:5px;padding:9px 12px;margin-bottom:12px;font-size:var(--t-mini);color:var(--mt);}
.u-s-dba8d5d0fe{margin-top:10px;background:var(--g2);border-radius:4px;padding:8px 12px;font-size:var(--t-peq);font-weight:700;}
.u-s-dc0901b823{background:rgba(30,136,229,.18);color:#1e88e5;padding:2px 7px;border-radius:3px;font-size:var(--t-micro);font-weight:700;}

.u-s-dcabd80ac3{display:flex;gap:3px;flex-wrap:wrap;}
.u-s-ddcf0a4d00{background:var(--bk2);border:1px solid var(--bd);border-top:3px solid var(--red);border-radius:8px;padding:32px 28px;width:100%;max-width:400px;text-align:center;}
.u-s-de79c83a54{background:rgba(123,31,162,.2);color:#ce93d8;font-size:var(--t-micro);font-weight:700;padding:2px 8px;border-radius:20px;}

.u-s-e19aa20b84{min-width:240px;padding:7px 9px;}
.u-s-e1b1368e36{font-size:var(--t-micro);font-weight:700;}
.u-s-e1b2288ca0{position:absolute;right:12px;top:13px;background:none;border:none;cursor:pointer;color:var(--mt);font-size:var(--t-med);padding:0;line-height:1;}
.u-s-e1f5f218a8{background:rgba(255,255,255,.08);color:var(--mt);font-size:var(--t-micro);font-weight:700;padding:2px 7px;border-radius:20px;text-transform:uppercase;}
.u-s-e325e3ef76{background:var(--g2);border-left:3px solid var(--y);padding:8px 12px;border-radius:0 4px 4px 0;font-size:var(--t-peq);margin-bottom:10px;color:var(--tx);}
.u-s-e3f61041ef{display:flex;align-items:center;gap:8px;}
.u-s-e4ad4a163b{margin-bottom:8px;}
.u-s-e4d9ad3c48{background:var(--g2);border-radius:5px;padding:10px 12px;margin-bottom:11px;border-left:3px solid var(--blu);}
.u-s-e567d73f47{display:flex;align-items:center;gap:9px;}
.u-s-e60466541e{background:var(--g2);border-radius:4px;padding:9px;margin-bottom:12px;font-size:var(--t-peq);}
.u-s-e607cf2f2e{background:var(--g2);border:1px solid var(--bd);border-left:3px solid var(--grn);border-radius:6px;padding:12px;margin-bottom:10px;}
.u-s-e60d7b09ee{width:16px;height:16px;cursor:pointer;accent-color:#2e9650;}
.u-s-e66087448e{margin-top:5px;opacity:.8;}
.u-s-e6a1a37439{background:var(--g2);border-radius:4px;padding:8px 10px;margin-bottom:11px;font-size:var(--t-peq);color:var(--mt);}
.u-s-e75626752c{background:none;border:none;color:var(--mt);font-size:var(--t-peq);cursor:pointer;font-family:inherit;}
.u-s-e7643dfd69{color:#aaa;font-size:var(--t-peq);line-height:1.7;margin-bottom:18px;}

.u-s-e907d5812c{text-align:center;padding:16px 0 8px;}
.u-s-e9891ee527{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px;}
.u-s-ea30ec0936{font-size:var(--t-mini);margin-bottom:10px;min-height:16px;}
.u-s-ea7faa2978{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:14px;}

.u-s-ebda02a93e{width:100%;padding:11px;}
.u-s-ed261e08fd{font-size:var(--t-mini);color:var(--jsl-texto-fraco);margin:0;}
.u-s-ee7e1e11ac{font-size:var(--t-peq);font-weight:800;color:var(--blu);}
.u-s-eee27c7b4d{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}

.u-s-ef09862f17{background:var(--bk1);border-radius:6px;padding:10px 12px;margin-top:10px;}
.u-s-ef3494ed54{font-weight:700;margin-bottom:4px;}
.u-s-ef6a83e56d{background:var(--g1);border-radius:4px;padding:10px;}
.u-s-efa371c7b9{background:var(--y);color:#1a1a1a;border:none;border-radius:10px;padding:10px 14px;font-family:Barlow,sans-serif;font-weight:900;font-size:var(--t-peq);cursor:pointer;text-transform:uppercase;white-space:nowrap;}
.u-s-f0744b9aed{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:var(--z-critico);display:flex;align-items:center;justify-content:center;padding:20px;}
.u-s-f08473aedd{font-size:var(--t-base);}
.u-s-f12b1205fd{text-align:center;padding:2rem;color:var(--mt);font-size:var(--t-peq);}
.u-s-f144a7d7c2{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.u-s-f19838ca85{text-align:center;margin-top:8px;}
.u-s-f1bd859ad8{font-size:var(--t-micro);font-weight:800;color:rgba(0,0,0,.5);text-transform:uppercase;}
.u-s-f1d62f5b48{font-size:var(--t-peq);font-weight:700;color:var(--y);text-transform:uppercase;letter-spacing:.5px;}
.u-s-f20f7be1d8{color:var(--y);font-size:var(--t-peq);}
.u-s-f2f0769c64{font-size:var(--t-micro);color:var(--mt);font-weight:700;text-transform:uppercase;margin-bottom:2px;}
.u-s-f34e2e944a{max-height:70px;overflow-y:auto;}
.u-s-f36d9c28f2{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-gr);font-weight:900;color:#ce93d8;}
.u-s-f3d9cda462{font-family:'Barlow Condensed',sans-serif;font-size:var(--t-hero);font-weight:900;color:var(--tx);line-height:1;}
.u-s-f479273b25{font-size:var(--t-micro);color:var(--grn);font-weight:700;}
.u-s-f5a865cfe3{height:10px;background:#eee;border-radius:6px;overflow:hidden;}
.u-s-f67b86e0fb{display:flex;flex-direction:column;gap:8px;}
.u-s-f6ac825150{flex:1;background:rgba(255,209,0,.08);border-color:rgba(255,209,0,.3);color:var(--y);}
.u-s-f73d8b5c28{font-size:var(--t-micro);color:var(--mt);font-weight:600;}
.u-s-f786c8eb7f{margin-top:14px;padding-top:12px;border-top:1px solid var(--bd);}
.u-s-f793ede717{font-size:var(--t-gr);font-weight:700;color:var(--tx);margin-bottom:8px;}
.u-s-f7a6f44d10{font-size:var(--t-mini);color:var(--y);margin-top:4px;font-weight:600;}
.u-s-f7d5ae5a08{padding:3px;text-align:right;font-weight:700;}
.u-s-f7ea23827d{font-size:var(--t-mini);padding:8px;background:rgba(255,82,82,.12);border-color:rgba(255,82,82,.3);color:#ff8a80;}
.u-s-f7f568b9c7{color:var(--mt);font-size:var(--t-peq);padding:12px 0;}
.u-s-f83e53844b{color:var(--mt);font-weight:400;text-transform:none;}
.u-s-f90ecca028{font-size:var(--t-mini);font-weight:700;color:var(--mt);text-transform:uppercase;margin-bottom:5px;}
.u-s-f929daf060{background:var(--bk2);border:1px solid var(--bd);border-radius:8px;padding:14px;text-align:center;}
.u-s-faaef30407{background:var(--bk2);border:1px solid var(--bd);border-radius:8px;padding:14px;margin-top:12px;}
.u-s-fab2315eb6{font-size:var(--t-micro);color:var(--mt);background:var(--g3);padding:1px 5px;border-radius:3px;}
.u-s-fb2dc84429{display:flex;align-items:center;gap:10px;margin-bottom:16px;justify-content:center;}
.u-s-fbafcd58ad{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:5px;margin-bottom:11px;}
.u-s-fbd8fc41e0{font-weight:700;color:var(--blu);}
.u-s-fc104f2a95{font-size:var(--t-mini);color:var(--mt);margin-top:2px;}
.u-s-fc4317860f{background:var(--g2);border-radius:6px;padding:10px;text-align:center;}
.u-s-fc614c0f36{display:flex;gap:4px;margin-top:10px;flex-wrap:wrap;}
.u-s-fc7e8b14a2{color:var(--mt);font-size:var(--t-peq);line-height:1.6;margin-bottom:24px;}
.u-s-fca7caa8a6{font-size:var(--t-base);font-weight:900;color:var(--blu);margin-top:2px;}
.u-s-fcab13a310{accent-color:var(--y);width:15px;height:15px;}
.u-s-fd4445095e{text-align:center;padding:40px 20px;}
.u-s-fd4e735322{background:var(--bk2);border:1px solid var(--bd);border-radius:8px;padding:14px;}
.u-s-fe27e8eda3{margin-bottom:11px;border-left:3px solid var(--red);}
.u-s-fe484229a0{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
.u-s-fea148fcc7{color:var(--y);}
.u-s-fea609b5bc{max-width:460px;}
.u-s-ff2d20f3d7{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px;}
.u-s-ff60c58f3b{font-size:var(--t-mini);color:var(--jsl-texto-fraco);margin:20px 0 0;line-height:1.6;}
.u-s-ffae8faac3{display:flex;flex-direction:column;gap:0;}

/* ============================================================
   V501b — CORREÇÃO DE ESPECIFICIDADE DAS TELAS PÚBLICAS

   A tela de cadastro nasce escondida pela classe .u-s-1a7aa0fee9
   (display:none), mas existe acima a regra #cadastro-screen{display:flex}.
   Um ID vence uma classe, então a tela ficava VISÍVEL desde o boot,
   por cima do login, e nunca conseguia se esconder.

   Esta regra usa ID + classe, ganhando da regra de ID sozinho.
   O JavaScript continua mandando: abrirCadastro() aplica
   style="display:block" inline, que vence qualquer regra de folha.
   ============================================================ */
#cadastro-screen.u-s-1a7aa0fee9{display:none}

/* ============================================================
   V503 — AJUSTE MANUAL DA RELAÇÃO DE MATERIAIS (calculadora)
   Estilo inline é proibido no projeto, então a edição da lista
   do fornecedor recebe classes próprias aqui.
   ============================================================ */
.cm-hist-qtd{width:88px;min-width:72px;text-align:right;padding:4px 6px}
.cm-hist-acao{width:44px;text-align:right}
.cm-hist-badge{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;
  background:rgba(255,209,0,.14);border:1px solid rgba(255,209,0,.35);
  color:var(--y);font-size:var(--t-micro);vertical-align:middle;letter-spacing:.02em}
.cm-hist-dica{margin:6px 0 10px;color:var(--jsl-texto-fraco);font-size:var(--t-mini);line-height:1.5}
.cm-hist-add{display:grid;grid-template-columns:minmax(0,2fr) 90px 80px minmax(0,1.4fr) auto;
  gap:8px;align-items:center;margin:12px 0 4px;padding:12px;border-radius:10px;
  background:rgba(255,255,255,.03);border:1px solid var(--bd)}
.cm-hist-restaurar{margin:10px 0 2px;text-align:right}
@media (max-width:767px){
  .cm-hist-add{grid-template-columns:1fr 1fr;gap:8px}
  .cm-hist-add > :first-child{grid-column:1 / -1}
  .cm-hist-add > :last-child{grid-column:1 / -1;justify-content:center}
  .cm-hist-qtd{width:100%;min-width:0}
  .cm-hist-acao{width:auto}
}

/* ============================================================
   V504 — ÍCONES SVG
   Traçado único, herdando currentColor: o ícone acompanha
   automaticamente o estado ativo/hover do item de menu, sem
   precisar de regra de cor separada.
   ============================================================ */
.jsl-icon-sprite{display:none}
.ic{width:20px;height:20px;display:block;flex-shrink:0;
  fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ni-ic{display:inline-flex;align-items:center;justify-content:center}
.premium-menu,.premium-ico,.mob-menu-btn{display:inline-flex;align-items:center;justify-content:center}
.premium-search > span{display:inline-flex;align-items:center;justify-content:center}
.premium-search > span .ic{width:18px;height:18px}
.premium-user em{display:inline-flex;align-items:center}
.premium-user em .ic{width:16px;height:16px;stroke-width:2}
.premium-logout-top{display:inline-flex;align-items:center;gap:6px}
.premium-logout-top .ic{width:17px;height:17px}
.mob-menu-btn .ic{width:24px;height:24px;stroke-width:2}
.premium-date-range .ic{width:17px;height:17px}
.jsl-bi-ico{display:inline-flex;align-items:center;justify-content:center}
.jsl-bi-ico .ic{width:22px;height:22px}