/* J2A Banker — "modo app" (só com a classe html.j2a-app, ativada no app instalado) */
html.j2a-app{--app-navy:#0d2540;--app-navy2:#12385f;--app-ouro:#f2a900;--app-bg:#f3f6fa;--app-topo:56px;--app-abas:64px;
  --app-sb:env(safe-area-inset-bottom,0px);--app-st:env(safe-area-inset-top,0px);-webkit-tap-highlight-color:transparent}
html.j2a-app body{background:var(--app-bg)!important;background-image:none!important;padding-top:calc(var(--app-topo) + var(--app-st));
  padding-bottom:calc(var(--app-abas) + var(--app-sb) + 8px);overscroll-behavior-y:none;-webkit-text-size-adjust:100%}
html.j2a-app .main-content{overflow:visible!important;overflow-x:clip!important;margin:0!important;width:100%!important;border-radius:0!important;min-height:auto!important;
  background:transparent!important;box-shadow:none!important;padding:14px 14px 20px!important}
html.j2a-app .j2a-global-back{display:none!important}

/* ---------- Barra superior ---------- */
.j2a-appbar{position:fixed;top:0;left:0;right:0;z-index:2100;display:flex;align-items:center;gap:6px;
  height:calc(var(--app-topo) + var(--app-st));padding:var(--app-st) 64px 0 6px;background:var(--app-navy);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.06)}
.j2a-appbar-btn{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:#fff;cursor:pointer}
.j2a-appbar-btn:active{background:rgba(255,255,255,.12)}
html.j2a-app .j2a-appbar .j2a-appbar-titulo{flex:1;min-width:0;margin:0!important;padding:0!important;font-family:inherit;font-size:17px!important;font-weight:700!important;letter-spacing:-.01em;color:#fff!important;background:none!important;-webkit-text-fill-color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Sino de notificações dentro da barra */
html.j2a-app .j2a-notif{top:calc(var(--app-st) + 6px)!important;right:8px!important;z-index:2150}
html.j2a-app .j2a-notif__bell{width:44px;height:44px;border:0;border-radius:12px;background:transparent;color:#fff;box-shadow:none;font-size:19px}
html.j2a-app .j2a-notif__panel{position:fixed;left:8px;right:8px;top:calc(var(--app-topo) + var(--app-st) + 6px);width:auto;max-height:70vh}

/* ---------- Abas inferiores ---------- */
.j2a-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:2100;display:grid;grid-template-columns:repeat(5,1fr);align-items:center;
  height:calc(var(--app-abas) + var(--app-sb));padding:0 6px var(--app-sb);background:rgba(255,255,255,.96);
  border-top:1px solid #e3e9f1;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.j2a-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:100%;color:#7b8aa0;
  text-decoration:none;font-size:11px;font-weight:600}
.j2a-tab svg{width:24px;height:24px}
.j2a-tab.ativa{color:var(--app-navy2)}
.j2a-tab.ativa svg{stroke-width:2.3}
.j2a-tab:active{opacity:.6}
.j2a-tab-mais{justify-self:center;display:grid;place-items:center;width:52px;height:52px;margin-top:-18px;border:4px solid var(--app-bg);
  border-radius:50%;background:var(--app-ouro);color:var(--app-navy2);box-shadow:0 8px 18px rgba(242,169,0,.35);cursor:pointer}
.j2a-tab-mais svg{width:26px;height:26px;stroke-width:2.6}
.j2a-tab-mais:active{transform:scale(.94)}

/* ---------- Menu lateral vira gaveta ---------- */
html.j2a-app .sidebar{inset:0 auto 0 0!important;transform:translateX(-102%);width:min(84vw,300px)!important;border-radius:0 20px 20px 0!important;
  z-index:2300!important;padding-top:calc(20px + var(--app-st))!important;padding-bottom:calc(16px + var(--app-sb))!important;background:var(--app-navy2)!important;transition:transform .25s ease}
html.j2a-app body.sidebar-mobile-open .sidebar{transform:none}
html.j2a-app .sidebar-toggle{display:none!important}
.j2a-gaveta-fundo{position:fixed;inset:0;z-index:2250;background:rgba(8,20,36,.5);opacity:0;pointer-events:none;transition:opacity .2s}
html.j2a-app body.sidebar-mobile-open .j2a-gaveta-fundo{opacity:1;pointer-events:auto}

/* ---------- Folha de ações rápidas ---------- */
.j2a-folha-fundo{position:fixed;inset:0;z-index:2400;display:flex;align-items:flex-end;background:rgba(8,20,36,.5);animation:j2aFade .15s}
.j2a-folha{width:100%;padding:10px 16px calc(18px + var(--app-sb));border-radius:22px 22px 0 0;background:#fff;animation:j2aSobe .22s ease-out}
.j2a-folha-alca{display:block;width:38px;height:5px;margin:0 auto 12px;border-radius:9px;background:#d5dde8}
.j2a-folha-tit{display:block;margin:0 4px 10px;font-size:13px;color:#7b8aa0;text-transform:uppercase;letter-spacing:.08em}
.j2a-acoes{display:grid;gap:6px}
.j2a-acao{display:flex;align-items:center;gap:14px;padding:12px;border-radius:14px;color:#10213b;text-decoration:none}
.j2a-acao:active{background:#f1f5f9}
.j2a-acao-ic{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:13px;background:#eef4fb;color:var(--app-navy2)}
.j2a-acao b{display:block;font-size:15.5px}
.j2a-acao small{display:block;margin-top:2px;font-size:12.5px;color:#7b8aa0}
@keyframes j2aSobe{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes j2aFade{from{opacity:0}to{opacity:1}}

/* ---------- Carregando / puxar para atualizar ---------- */
.j2a-carregando{position:fixed;top:calc(var(--app-topo) + var(--app-st));left:0;height:3px;width:0;z-index:2200;background:var(--app-ouro);opacity:0}
html.j2a-navegando .j2a-carregando{opacity:1;animation:j2aBarra 2.5s ease-out forwards}
@keyframes j2aBarra{from{width:0}to{width:85%}}
.j2a-puxar{position:fixed;top:calc(var(--app-topo) + var(--app-st));left:50%;z-index:2050;display:grid;place-items:center;width:38px;height:38px;
  border-radius:50%;background:#fff;color:var(--app-navy2);font-weight:900;box-shadow:0 4px 14px rgba(13,37,64,.18);transform:translate(-50%,-50px)}
.j2a-puxar.pronto{background:var(--app-ouro)}
.j2a-puxar.girando{animation:j2aGira .7s linear infinite}
@keyframes j2aGira{to{transform:translate(-50%,60px) rotate(360deg)}}

/* ---------- Conteúdo com cara de app ---------- */
html.j2a-app input,html.j2a-app select,html.j2a-app textarea{font-size:16px!important} /* iPhone não dá zoom ao tocar */
html.j2a-app a,html.j2a-app button{touch-action:manipulation}

/* Painel: cabeçalho compacto (as ações vão para o botão +) */
html.j2a-app .co-hero{padding:16px 18px!important;margin-bottom:12px!important;border-radius:18px!important}
html.j2a-app .co-hero .co-eyebrow,html.j2a-app .co-hero p,html.j2a-app .co-hero .co-actions{display:none!important}
html.j2a-app .co-hero h1{font-size:24px!important;margin:0!important}
html.j2a-app .co-tabs{position:sticky;top:calc(var(--app-topo) + var(--app-st));z-index:50;display:grid!important;grid-template-columns:1fr 1fr;
  margin:0 -14px 12px!important;padding:8px 14px!important;border-radius:0!important;background:var(--app-bg)!important;border:0!important;box-shadow:none!important}
html.j2a-app .co-tab-btn{justify-content:center}
html.j2a-app .co-summary,html.j2a-app .co-summary-3{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;margin-bottom:12px}
html.j2a-app .co-card{padding:13px 14px!important;border-radius:16px!important}
html.j2a-app .co-card>span:first-child{font-size:10.5px!important;line-height:1.25}
html.j2a-app .co-card strong{font-size:18px!important;white-space:normal!important}
html.j2a-app .co-card small{font-size:11px}
html.j2a-app .co-panel,html.j2a-app .co-filter{border-radius:18px!important}
html.j2a-app .co-head{padding:16px!important}
html.j2a-app .co-head h2{font-size:17px!important}
html.j2a-app .co-layout{display:block!important}
html.j2a-app .co-side{margin-top:12px}

/* Listas e cabeçalhos de outras telas */
html.j2a-app .credito-hero,html.j2a-app .com-hero,html.j2a-app .operacao-hero{padding:16px!important;border-radius:18px!important}
html.j2a-app .credito-hero h1,html.j2a-app .com-hero h1,html.j2a-app .operacao-hero h1{font-size:22px!important}
html.j2a-app .credito-page,html.j2a-app .com-page,html.j2a-app .esteira-page{padding:14px 14px 20px!important;background:transparent!important}

/* =====================================================================
   Telas desenhadas para o app — Clientes e Esteira
   (fora do modo app esses blocos ficam escondidos)
   ===================================================================== */
.cli-app,.est-app{display:none}
html.j2a-app .cli-app,html.j2a-app .est-app{display:block}
html.j2a-app .clientes-hero,html.j2a-app .clientes-kpis,html.j2a-app .clientes-kpi-filtro-ativo,
html.j2a-app .clientes-tabela-card,html.j2a-app .clientes-filtros:not([open]),
html.j2a-app .esteira-hero,html.j2a-app .esteira-filter,html.j2a-app .esteira-page .kanban,
html.j2a-app .esteira-tabela-wrap,html.j2a-app .esteira-page>.empty-state{display:none!important}
html.j2a-app .clientes-unificado{padding:0!important;background:transparent!important}
html.j2a-app .clientes-filtros[open]{margin:0 0 12px;border-radius:16px}

/* Busca */
.cli-app-cab{position:sticky;top:calc(var(--app-topo) + var(--app-st));z-index:40;margin:-14px -14px 4px;padding:10px 14px 0;background:var(--app-bg);box-shadow:0 6px 10px -8px rgba(13,37,64,.15)}
.cli-app-busca{position:relative;display:flex;align-items:center;gap:8px;margin:0 0 8px}
.cli-app-busca>svg{position:absolute;left:14px;color:#7b8aa0;pointer-events:none}
.cli-app-busca input{flex:1;min-width:0;height:44px;padding:0 14px 0 40px;border:1px solid #dfe6ef;border-radius:13px;background:#fff;color:#10213b;font-size:16px;-webkit-appearance:none;appearance:none}
.cli-app-busca input:focus{outline:2px solid #bcd3ec;border-color:#9ab8da}
.cli-app-filtrar{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border:1px solid #dfe6ef;border-radius:13px;background:#fff;color:#12385f}
.est-app .cli-app-cab{margin-top:0}
.est-app-resumo{margin-top:0}

/* Chips de filtro rápido */
.cli-app-chips{display:flex;gap:8px;margin:0 -14px;padding:4px 14px 10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cli-app-chips::-webkit-scrollbar{display:none}
.cli-app-chips a,.cli-app-chips button{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border:1px solid #dfe6ef;border-radius:99px;
  background:#fff;color:#33435c;font:inherit;font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;cursor:pointer}
.cli-app-chips b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:#eef2f7;color:#33435c;font-size:11.5px}
.cli-app-chips .ativo{background:#12385f;border-color:#12385f;color:#fff}
.cli-app-chips .ativo b{background:rgba(255,255,255,.18);color:#fff}
.cli-app-chips .alerta:not(.ativo) b{background:#fdecea;color:#b4302a}
.cli-app-total{margin:2px 2px 8px;font-size:12.5px;color:#7b8aa0}

/* Cartão de cliente */
.cli-app-lista,.est-app-lista{display:grid;gap:10px}
.cli-card{border:1px solid #e3e9f1;border-radius:18px;background:#fff;overflow:hidden}
.cli-card-topo{display:flex;align-items:center;gap:12px;padding:14px 14px 10px;color:inherit;text-decoration:none}
.cli-card-topo:active{background:#f6f9fc}
.cli-avatar{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;border-radius:14px;background:#eaf1f9;color:#12385f;font-weight:800;font-size:15px}
.cli-card-txt{flex:1;min-width:0}
.cli-card-txt b{display:block;font-size:15.5px;color:#10213b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cli-card-txt small{display:block;margin-top:2px;font-size:12.5px;color:#7b8aa0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cli-status{flex-shrink:0;padding:5px 9px;border-radius:99px;font-size:11px;font-weight:800;background:#eef2f7;color:#56657c}
.cli-status.atrasado{background:#fdecea;color:#b4302a}
.cli-status.hoje{background:#fff4dc;color:#9a6700}
.cli-status.em-dia{background:#e7f6ee;color:#14794f}
.cli-card-info{display:flex;flex-wrap:wrap;gap:4px 16px;padding:0 14px 12px 70px;font-size:12.5px;color:#7b8aa0}
.cli-card-info b{color:#33435c;font-weight:700}
.cli-card-acoes{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-top:1px solid #eef2f6}
.cli-card-acoes a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;color:#12385f;font-size:11.5px;font-weight:700;text-decoration:none}
.cli-card-acoes a+a{border-left:1px solid #eef2f6}
.cli-card-acoes a:active{background:#f1f5f9}
.cli-card-acoes a.wa{color:#14794f}
.cli-app-vazio{display:grid;gap:6px;justify-items:center;padding:34px 16px;border:1px dashed #cfd9e5;border-radius:18px;text-align:center;color:#7b8aa0;font-size:13.5px}
.cli-app-vazio b{color:#10213b;font-size:15px}
.cli-app-vazio a{margin-top:6px;padding:10px 16px;border-radius:12px;background:#12385f;color:#fff;font-weight:700;text-decoration:none}

/* Esteira */
.est-app-resumo{display:grid;grid-template-columns:1fr 1.4fr 1fr;gap:8px;margin-bottom:10px}
.est-app-resumo div{padding:11px 12px;border:1px solid #e3e9f1;border-radius:15px;background:#fff}
.est-app-resumo small{display:block;font-size:10.5px;font-weight:700;color:#7b8aa0;text-transform:uppercase;letter-spacing:.03em}
.est-app-resumo b{display:block;margin-top:4px;font-size:16px;color:#10213b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.est-app-resumo .alerta{border-color:#f5c2c0;background:#fff6f5}
.est-app-resumo .alerta b{color:#b4302a}

.est-card{display:block;padding:14px;border:1px solid #e3e9f1;border-left:4px solid #c9d7e6;border-radius:16px;background:#fff;color:inherit;text-decoration:none}
.est-card[hidden]{display:none}
.est-card:active{background:#f6f9fc}
.est-card.urgente{border-left-color:#b4302a}
.est-card.atencao{border-left-color:#d08c00}
.est-card.ok{border-left-color:#14794f}
.est-card-topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.est-card-topo b{min-width:0;font-size:15.5px;color:#10213b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.est-card-topo em{flex-shrink:0;font-style:normal;font-weight:800;font-size:14px;color:#12385f}
.est-card-sub{display:block;margin-top:3px;font-size:12.5px;color:#7b8aa0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.est-card-etapa{display:block;margin-top:10px}
.est-barra{display:block;height:6px;border-radius:99px;background:#eef2f6;overflow:hidden}
.est-barra i{display:block;height:100%;border-radius:99px;background:#1f5a91}
.est-card-etapa small{display:block;margin-top:6px;font-size:12px;color:#56657c}
.est-card-alerta{display:inline-block;margin-top:8px;padding:4px 9px;border-radius:99px;font-size:12px;font-weight:700;background:#eef2f7;color:#56657c}
.est-card.urgente .est-card-alerta{background:#fdecea;color:#b4302a}
.est-card.atencao .est-card-alerta{background:#fff4dc;color:#9a6700}
.est-card.ok .est-card-alerta{background:#e7f6ee;color:#14794f}

/* =====================================================================
   Agenda, Ficha do cliente e Detalhe da operação — modo app
   ===================================================================== */
.ag-app,.ficha-app,.op-app{display:none}
html.j2a-app .ag-app,html.j2a-app .ficha-app,html.j2a-app .op-app{display:block}
html.j2a-app .ag-app ~ *{display:none!important}
html.j2a-app .ws-hero,html.j2a-app .ws-kpis,html.j2a-app .ws-nav,
html.j2a-app .esteira-page .operacao-hero,html.j2a-app .esteira-page .journey,html.j2a-app .esteira-page .bola-com{display:none!important}

/* ---------- Agenda ---------- */
.ag-app-cab{position:sticky;top:calc(var(--app-topo) + var(--app-st));z-index:40;margin:-14px -14px 10px;padding:12px 14px 6px;background:var(--app-bg);box-shadow:0 6px 10px -8px rgba(13,37,64,.15)}
.ag-app-titulo{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ag-app-titulo b{flex:1;font-size:19px;color:#10213b;letter-spacing:-.01em}
.ag-app-titulo a{font-size:13px;font-weight:700;color:#1f5a91;text-decoration:none}
.ag-app-calend{position:relative;display:grid;place-items:center;width:40px;height:40px;border:1px solid #dfe6ef;border-radius:12px;background:#fff;color:#12385f}
.ag-app-calend input{position:absolute;inset:0;opacity:0;width:100%;height:100%}
.ag-dias{display:flex;gap:6px;margin:0 -14px;padding:0 14px 6px;overflow-x:auto;scrollbar-width:none}
.ag-dias::-webkit-scrollbar{display:none}
.ag-dias a{flex-shrink:0;display:flex;flex-direction:column;align-items:center;width:46px;padding:7px 0 4px;border-radius:14px;color:#56657c;text-decoration:none}
.ag-dias small{font-size:11px;text-transform:uppercase;font-weight:700}
.ag-dias b{font-size:18px;color:#10213b;margin-top:1px}
.ag-dias i{height:10px;font-style:normal;font-size:12px;line-height:10px;color:#d08c00;letter-spacing:-1px}
.ag-dias a.hoje b{color:#1f5a91}
.ag-dias a.ativo{background:#12385f;color:#c9d7e6}
.ag-dias a.ativo b{color:#fff}
.ag-dias a.ativo i{color:#f2a900}
.ag-secao{display:flex;align-items:center;gap:8px;margin:16px 2px 8px;font-size:13px;font-weight:800;color:#56657c;text-transform:uppercase;letter-spacing:.06em}
.ag-secao span{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:#e3e9f1;color:#33435c;font-size:12px}
.ag-secao.alerta{color:#b4302a}
.ag-secao.alerta span{background:#fdecea;color:#b4302a}
.ag-lista{display:grid;gap:10px}
.ag-card{border:1px solid #e3e9f1;border-left:4px solid #1f5a91;border-radius:16px;background:#fff;overflow:hidden;transition:opacity .3s,transform .3s}
.ag-card.atrasado{border-left-color:#b4302a}
.ag-card.prioridade:not(.atrasado){border-left-color:#d08c00}
.ag-card.concluido{border-left-color:#14794f;opacity:.62}
.ag-card.concluido .ag-txt b{text-decoration:line-through}
.ag-card.saindo{opacity:0;transform:translateX(40px)}
.ag-card-corpo{display:flex;gap:12px;padding:13px 14px 11px;color:inherit;text-decoration:none}
.ag-card-corpo:active{background:#f6f9fc}
.ag-hora{flex-shrink:0;min-width:50px;font-weight:800;font-size:14px;color:#12385f}
.ag-card.atrasado .ag-hora{color:#b4302a;font-size:12.5px}
.ag-txt{min-width:0}
.ag-txt b{display:block;font-size:15px;color:#10213b}
.ag-txt small{display:block;margin-top:3px;font-size:12.5px;color:#7b8aa0}
.ag-txt em{font-style:normal;font-weight:800;color:#b4302a}
.ag-card-acoes{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #eef2f6}
.ag-card-acoes button,.ag-feito{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border:0;background:#fff;font:inherit;font-size:14px;font-weight:700;color:#12385f;cursor:pointer}
.ag-card-acoes button+button,.ag-feito+button{border-left:1px solid #eef2f6}
.ag-card-acoes .ag-concluir{color:#14794f}
.ag-card-acoes button:active{background:#f1f5f9}
.ag-card-acoes button:disabled{opacity:.5}
.ag-feito{color:#14794f;cursor:default}
.ag-op{width:100%;border:0;background:none;text-align:left;font:inherit;cursor:pointer}
.ag-outra{display:grid;gap:6px;margin:8px 12px 12px;font-size:13px;font-weight:700;color:#56657c}
.ag-outra input{height:46px;padding:0 12px;border:1px solid #dfe6ef;border-radius:12px;font-size:16px;color:#10213b;background:#fff}
.ag-toast{position:fixed;left:50%;bottom:calc(var(--app-abas) + var(--app-sb) + 16px);z-index:2500;transform:translateX(-50%);max-width:90vw;
  padding:11px 16px;border-radius:12px;background:#10213b;color:#fff;font-size:14px;font-weight:600;box-shadow:0 10px 24px rgba(0,0,0,.2);animation:j2aSobe .2s ease-out}
.ag-toast.erro{background:#b4302a}

/* ---------- Ficha do cliente ---------- */
.ficha-app{margin-bottom:12px}
.ficha-cab{display:flex;align-items:center;gap:14px;padding:16px;border-radius:20px;background:linear-gradient(135deg,#12385f,#0d2540);color:#fff}
.ficha-avatar{display:grid;place-items:center;width:56px;height:56px;flex-shrink:0;border-radius:18px;background:#f2a900;color:#12385f;font-weight:900;font-size:20px}
.ficha-nome{min-width:0}
.ficha-nome b{display:block;font-size:19px;line-height:1.2}
.ficha-nome small{display:block;margin:3px 0 6px;color:rgba(255,255,255,.72);font-size:13px}
.ficha-nome .ws-lgpd-badge{display:inline-block;font-size:11.5px;padding:3px 8px;border-radius:99px}
.ficha-contato{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}
.ficha-contato a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:11px 4px;border:1px solid #e3e9f1;border-radius:15px;background:#fff;color:#12385f;font-size:12px;font-weight:700;text-decoration:none}
.ficha-contato a.wa{color:#14794f}
.ficha-contato a.off{opacity:.35;pointer-events:none}
.ficha-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.ficha-kpis a{padding:10px 6px;border:1px solid #e3e9f1;border-radius:14px;background:#fff;text-align:center;text-decoration:none}
.ficha-kpis b{display:block;font-size:19px;color:#10213b}
.ficha-kpis small{display:block;margin-top:2px;font-size:10.5px;line-height:1.2;color:#7b8aa0}
.ficha-acoes{margin-bottom:4px}
html.j2a-app .ws-page .ws-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
html.j2a-app .ws-page .ws-panel{margin:0!important;border-radius:16px!important;grid-column:auto!important}

/* ---------- Blocos que abrem e fecham ---------- */
html.j2a-app .app-bloco{overflow:hidden}
html.j2a-app .app-bloco-cab{position:relative;display:flex!important;align-items:center;gap:10px;padding:14px 46px 14px 16px!important;cursor:pointer;border-bottom:0!important;
  -webkit-user-select:none;user-select:none}
html.j2a-app .app-bloco-cab::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;margin-top:-6px;border-right:2px solid #7b8aa0;border-bottom:2px solid #7b8aa0;transform:rotate(45deg);transition:transform .2s}
html.j2a-app .app-bloco.aberto>.app-bloco-cab::after{transform:rotate(-135deg);margin-top:-2px}
html.j2a-app .app-bloco-cab h2,html.j2a-app .app-bloco-cab h3{margin:0!important;font-size:16px!important}
html.j2a-app .app-bloco-cab .eyebrow,html.j2a-app .app-bloco-cab span:not(.app-bloco-qtd){font-size:10px!important}
html.j2a-app .app-bloco-cab>a{margin-left:auto;font-size:12.5px}
.app-bloco-qtd{margin-left:auto;display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:#eef2f7;color:#33435c;font-size:12px;font-weight:800}
html.j2a-app .app-bloco:not(.aberto)>.app-bloco-corpo{display:none}
html.j2a-app .app-bloco.aberto>.app-bloco-cab{border-bottom:1px solid #edf1f5!important}

/* ---------- Detalhe da operação ---------- */
.op-app{margin-bottom:12px}
.op-app-cab{padding:16px;border-radius:20px;background:linear-gradient(135deg,#12385f,#0d2540);color:#fff}
.op-app-num{display:block;font-size:11.5px;font-weight:800;letter-spacing:.06em;color:#f2a900;text-transform:uppercase}
.op-app-cli{display:block;margin-top:6px;font-size:20px;line-height:1.2}
.op-app-prod{display:block;margin-top:3px;font-size:13px;color:rgba(255,255,255,.72)}
.op-app-valores{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.op-app-valores div{padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.08)}
.op-app-valores small{display:block;font-size:10.5px;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.04em}
.op-app-valores b{display:block;margin-top:3px;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-app-etapas{display:grid;grid-auto-flow:column;gap:5px;margin:14px 2px 6px}
.op-app-etapas i{height:7px;border-radius:99px;background:#dfe6ef}
.op-app-etapas i.feito{background:#14794f}
.op-app-etapas i.atual{background:#f2a900}
.op-app-estagio{margin:0 2px;font-size:13px;color:#56657c}
.op-app-estagio b{color:#10213b}
.op-app-bola{margin:10px 0 0;padding:11px 13px;border-radius:13px;background:#fff;border:1px solid #e3e9f1;font-size:13.5px;color:#33435c}
.op-app-bola.urgente{background:#fff6f5;border-color:#f5c2c0}
.op-app-avancar{position:fixed;left:0;right:0;bottom:calc(var(--app-abas) + var(--app-sb));z-index:2050;padding:10px 14px;
  background:linear-gradient(to top,var(--app-bg) 70%,rgba(243,246,250,0))}
.op-app-avancar button{width:100%;min-height:52px;border:0;border-radius:15px;background:#12385f;color:#fff;font:inherit;font-size:16px;font-weight:800;
  box-shadow:0 10px 22px rgba(13,37,64,.25);cursor:pointer}
.op-app-avancar button:active{transform:scale(.98)}
html.j2a-app .esteira-page:has(.op-app){padding-bottom:84px!important}
html.j2a-app .operation-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
html.j2a-app .operation-grid .main-column,html.j2a-app .operation-grid .side-column{display:grid;gap:10px}
html.j2a-app .operation-grid .panel{margin:0!important;border-radius:16px!important}
html.j2a-app .etapa-atual .stage-actions .btn-primary{display:none!important} /* o botão grande fica fixo embaixo */

html.j2a-app .app-bloco{padding:0!important}
html.j2a-app .app-bloco>.app-bloco-corpo{padding:4px 16px 16px}
html.j2a-app .ws-panel.app-bloco>.app-bloco-corpo{padding:0}
html.j2a-app .app-bloco-cab .eyebrow{display:block;margin-bottom:2px}
html.j2a-app .op-app-valores b{font-size:12.5px}
html.j2a-app .j2a-notif__bell{background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important}
html.j2a-app .j2a-notif__bell i{color:#fff!important}

/* Convite para ativar notificações */
.j2a-convite-push{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:12px 12px 12px 14px;border:1px solid #f5d999;border-radius:16px;background:#fffaf0}
.j2a-convite-ic{font-size:22px}
.j2a-convite-push div{flex:1;min-width:0}
.j2a-convite-push b{display:block;font-size:14.5px;color:#10213b}
.j2a-convite-push small{display:block;margin-top:2px;font-size:12.5px;color:#7a5200}
.j2a-convite-push a{padding:9px 14px;border-radius:10px;background:#12385f;color:#fff;font-weight:800;font-size:13.5px;text-decoration:none}
.j2a-convite-push button{width:30px;height:30px;border:0;background:none;color:#a07a2a;font-size:20px;cursor:pointer}
