/* Telas do WorkSpace dentro da janela: réplicas das telas reais (rótulos conferidos na asm/rel-4015),
   desenhadas em 1280 × 800 lógicos, com dados fictícios. A linha do tempo de cada tela é --t (0→1). */

.app svg.ic { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.app b { font-weight: 600; }
.pilha { display: grid; }
.pilha > * { grid-area: 1 / 1; justify-self: start; }
.link { color: hsl(241 70% 55%); font: 600 13.5px/1 var(--f-txt); white-space: nowrap; }
.vermelho { color: #d92020 !important; }
.verde-t { color: #15803d !important; }
.tg { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: #e8eeff; color: #2f4ac9; font: 600 11.5px/1 var(--f-txt); white-space: nowrap; }
.tg.cz { background: #eef0f5; color: #3d4560; } .tg.lil { background: #f1e8ff; color: #7e22ce; } .tg.vd { background: #dcf5e4; color: #15803d; } .tg.dio { background: #f1e8ff; color: #7e22ce; }
.abas-linha { display: flex; gap: 8px; margin-bottom: 12px; }
.abas-linha .aba { height: 34px; line-height: 34px; font-size: 13.5px; padding: 0 14px; }
.abas-mini { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: #e6e9f2; font: 500 13px/1 var(--f-txt); color: var(--app-mudo); }
.abas-mini span { padding: 8px 12px; border-radius: 8px; }
.abas-mini .on { background: #fff; color: var(--app-fg); box-shadow: 0 1px 2px rgba(14, 21, 51, .1); }
.fil { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 13px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-borda); font: 500 13px/1 var(--f-txt); color: #3d4560; white-space: nowrap; }
.fil.on { box-shadow: inset 0 0 0 1.5px var(--app-pri); color: hsl(241 70% 50%); background: hsl(241 90% 67% / .07); }
.fil i { font-style: normal; font-size: 11.5px; padding: 3px 6px; border-radius: 6px; background: #eef0f5; }
.busca { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-borda); color: hsl(228 15% 58%); font-size: 13px; }
.cx { display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--app-borda); background: #fff; font-size: 13.5px; }
.opcoes { display: flex; flex-wrap: wrap; gap: 8px; }
.opc { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--app-borda); background: #fff; font: 500 13px/1 var(--f-txt); color: #3d4560; transition: background-color .35s, box-shadow .35s, color .35s; }
.opc.ligado { box-shadow: inset 0 0 0 1.5px var(--app-pri); background: hsl(241 90% 67% / .12); color: hsl(241 70% 48%); }
.pbtn.largo { width: 100%; justify-content: center; height: 42px; }
.tog { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: #3d4560; }
.tog i { width: 34px; height: 20px; border-radius: 999px; background: #d5d9e6; position: relative; flex: none; }
.tog i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .3s; }
.tog.on i { background: var(--app-pri); }
.tog.on i::after { transform: translateX(14px); }
.barrinha { height: 6px; border-radius: 99px; background: #e6e9f2; overflow: hidden; margin: 10px 0 12px; }
.barrinha i { display: block; height: 100%; border-radius: inherit; background: var(--app-pri); }

/* presença e estado em função de --t (classes postas pela linha do tempo do site.js) */
.fora { opacity: 0 !important; transform: translateY(8px) scale(.985); pointer-events: none; }
[data-de], [data-ate] { transition: opacity .45s var(--sai), transform .55s var(--sai); }
.cursor { left: 0; top: 0; transition: none; will-change: transform; }
.cursor::after { content: ""; position: absolute; left: -9px; top: -9px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--app-pri); opacity: 0; transform: scale(.4); }
.cursor.clica::after { animation: clique .5s ease-out; }
@keyframes clique { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.5); } }
.tela:not(.ativa) .cursor { opacity: 0; }

/* 0 · Processos */
.voltar { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-borda); font: 600 14px/1 var(--f-txt); }
.voltar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.cab { margin-top: 10px; padding: 16px 22px; }
.cnj { font-size: 13px; color: var(--app-mudo); }
.cab-tit { margin-top: 6px; font: 700 20px/1.25 var(--f-txt); }
.cab-sub { margin-top: 4px; font-size: 13.5px; color: var(--app-mudo); }
.selos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.kpi { padding: 12px 16px; display: grid; gap: 6px; }
.kpi b { font-size: 15.5px; }
.abas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.abas .aba { height: 34px; line-height: 34px; font-size: 13.5px; padding: 0 14px; transition: background-color .35s, color .35s; }
.abas .aba.ligado { background: hsl(241 90% 67% / .14); color: hsl(241 70% 48%); }
.and-cab { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.and-cab b { display: block; font-size: 16px; }
.and-cab span:not(.pbtn) { font-size: 13px; color: var(--app-mudo); }
.and { display: grid; grid-template-columns: 104px 1fr auto; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--app-borda); align-items: start; }
.and-data { font: 600 13.5px/1.4 var(--f-txt); color: #3d4560; }
.and b { font-size: 14px; }
.and p { margin: 3px 0 6px; font-size: 13px; color: var(--app-mudo); }
.janela.solta .and, .janela.solta .and-cab, .janela.solta .abas, .janela.solta .voltar { background: rgb(255 255 255 / calc(var(--u) * 1)); border-radius: 14px; padding-left: calc(14px * var(--u)); padding-right: calc(14px * var(--u)); }

/* 1 · Intimações */
.filtros { display: flex; gap: 8px; align-items: center; }
.filtros .busca { margin-left: auto; width: 300px; }
.pub { margin-top: 12px; padding: 18px 22px; }
.pub-topo { display: flex; gap: 8px; align-items: center; }
.pub-data { margin-left: auto; font-size: 13px; color: var(--app-mudo); }
.pub .cnj { margin-top: 12px; }
.pub-partes { display: block; margin-top: 4px; font-size: 15.5px; }
.pub-txt { margin: 6px 0 0; font-size: 14px; color: #3d4560; max-width: 70ch; }
.sug { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: hsl(241 90% 67% / .06); box-shadow: inset 0 0 0 1px hsl(241 90% 67% / .35); font-size: 14px; }
.sug-acoes { display: flex; gap: 8px; margin-top: 10px; }
.pub .pilha > .fora { display: none; } /* a sugestão sai do fluxo quando vira "tratada", sem deixar buraco */
.tratada { margin-top: 14px; align-self: start; display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-radius: 12px; background: #ecfdf3; color: #05603a; font: 500 14px/1.3 var(--f-txt); }
.pub-pe { display: flex; gap: 20px; margin-top: 16px; }
.prazo-vai { position: absolute; right: 24px; bottom: 28px; width: 440px; padding: 16px 18px; border-left: 4px solid #f59e0b; box-shadow: 0 24px 50px -24px rgba(14, 21, 51, .45); display: grid; gap: 6px; }
.prazo-vai b { font-size: 15.5px; }
.prazo-meta { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--app-mudo); }
.prazo-vai .selos { margin-top: 4px; }

/* 2 · Minha Rotina */
.rot-grade { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; }
.agenda { padding: 14px; }
.ag-cab { display: flex; align-items: center; gap: 12px; }
.ag-cab .pbtn { height: 32px; }
.ag-cab b { font-size: 14.5px; }
.seg { margin-left: auto; display: inline-flex; padding: 3px; border-radius: 9px; background: #e6e9f2; font-size: 12.5px; color: var(--app-mudo); }
.seg span { padding: 6px 10px; border-radius: 7px; }
.seg .on { background: #fff; color: var(--app-fg); font-weight: 600; }
.ag-dias { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 12px; font: 600 12.5px/1 var(--f-txt); color: var(--app-mudo); text-align: center; }
.ag-dias span { padding: 8px 0; }
.ag-dias .hoje { color: hsl(241 70% 52%); }
.ag-corpo { position: relative; height: 520px; border-radius: 10px; background: repeating-linear-gradient(#fff 0 51px, #eef0f5 51px 52px), #fff; box-shadow: inset 0 0 0 1px var(--app-borda); }
.ev { position: absolute; left: calc((var(--c) - 1) * 20% + 4px); width: calc(20% - 8px); top: calc(var(--l) * 52px + 3px); height: calc(var(--h) * 52px - 6px);
  border-radius: 8px; padding: 6px 8px; font: 600 12px/1.25 var(--f-txt); font-style: normal; overflow: hidden; border-left: 3px solid; }
.ev small { font-weight: 500; opacity: .8; }
.ev-aud { background: #fde4e4; color: #9b1c1c; border-color: #ef4444; } .ev-reu { background: #e0ebff; color: #1e40af; border-color: #3b82f6; }
.ev-pra { background: #fdf3c4; color: #8a4b06; border-color: #f59e0b; } .ev-tar { background: #efe7ff; color: #6b21a8; border-color: #8b5cf6; }
.ev-pes { background: #dcf5e4; color: #166534; border-color: #22c55e; }
.tarefa { padding: 18px; display: flex; flex-direction: column; }
.tar-tit { display: block; margin-top: 8px; font-size: 16.5px; line-height: 1.3; }
.tar-proc { margin-top: 6px; font-size: 12.5px; color: var(--app-mudo); }
.tar-meta { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--app-mudo); }
.tar-meta span:last-child { display: inline-flex; align-items: center; gap: 6px; }
.chk-tit { margin-top: 18px; font-size: 14px; }
.chk { list-style: none; margin: 0; padding: 0; }
.chk li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--app-borda); font-size: 13.5px; transition: color .4s; }
.chk li i { width: 18px; height: 18px; flex: none; border-radius: 5px; box-shadow: inset 0 0 0 1.5px #b9c0d4; position: relative; transition: background-color .3s, box-shadow .3s; }
.chk li.feito, .chk li.ligado { color: var(--app-mudo); text-decoration: line-through; }
.chk li.feito i, .chk li.ligado i { background: var(--app-pri); box-shadow: none; }
.chk li.feito i::after, .chk li.ligado i::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.add { margin-top: 12px; font-size: 13px; color: hsl(228 15% 58%); }

/* 3 · Contratos e procurações (assinatura pela ZapSign) */
.con-cab { display: flex; align-items: center; gap: 20px; }
.con-cab > div { display: grid; gap: 6px; }
.con-cab b { font-size: 18px; }
.con-de { font: 500 13px/1 var(--f-txt); color: var(--app-mudo); }
.con-cab .est { margin-left: auto; }
.con-grade { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 14px; }
.folha { position: relative; height: 640px; padding: 34px 42px; background: #fff; border-radius: 6px; box-shadow: 0 0 0 1px var(--app-borda), 0 18px 40px -26px rgba(14, 21, 51, .35);
  font: 12.5px/1.65 Georgia, "Times New Roman", serif; color: #222a40; }
.folha-tit { display: block; text-align: center; font: 700 13px/1.4 Georgia, serif; letter-spacing: .02em; margin-bottom: 18px; }
.folha p { margin: 0 0 10px; }
.var { background: #eef2ff; border-bottom: 1px dashed hsl(241 70% 60%); padding: 0 2px; }
.linhas { margin-top: 16px !important; }
.linhas i { display: block; height: 7px; border-radius: 3px; background: #edf0f6; margin-bottom: 11px; }
.linha-ass { position: absolute; left: 42px; bottom: 60px; width: 260px; padding-top: 8px; border-top: 1px solid #b9c0d3; font: 12px/1.3 Georgia, serif; color: #5a6178; }
.sig { padding: 18px; display: flex; flex-direction: column; gap: 10px; align-self: start; }
.sig-pessoa { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--app-s2); }
.sig-pessoa div { display: grid; font-size: 13px; }
.sig-pessoa div span { color: var(--app-mudo); }
.sig-pessoa .pilha { margin-left: auto; }
.sig .rot { margin-top: 6px; }
.con-fim { margin-top: 10px; }
.con-fim > * { width: 100%; }
.con-acoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.con-acoes .pbtn { justify-content: center; height: 42px; }
.con-salvo { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; background: #ecfdf3; color: #05603a; font: 500 13.5px/1.3 var(--f-txt); }
.con-salvo .ic { margin-top: 1px; }
.con-salvo div { display: grid; gap: 8px; }
.con-salvo div > span { display: flex; gap: 16px; }

/* 4 · Financeiro */
.fin-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fin-kpis b { font-size: 19px; font-variant-numeric: tabular-nums; }
.tabela { margin-top: 14px; overflow: hidden; }
.tr { display: grid; grid-template-columns: 1.6fr 1.5fr 1fr 1fr .9fr .6fr; gap: 10px; align-items: center; padding: 13px 18px; border-bottom: 1px solid var(--app-borda); font-size: 13.5px; }
.tr:last-child { border-bottom: 0; }
.tr.th { background: var(--app-s2); font: 600 11.5px/1 var(--f-txt); letter-spacing: .06em; text-transform: uppercase; color: var(--app-mudo); }
.tr.destaque { background: hsl(241 90% 67% / .05); }
.split { position: absolute; right: 24px; bottom: 28px; width: 460px; padding: 18px 20px; display: grid; gap: 12px; box-shadow: 0 24px 50px -24px rgba(14, 21, 51, .45); }
.split > b { font-size: 15px; }
.split-l { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px 12px; font-size: 13.5px; align-items: center; }
.split-l span:nth-child(2) { color: var(--app-mudo); }
.split-l i { grid-column: 1 / -1; height: 6px; border-radius: 99px; background: #e6e9f2; position: relative; overflow: hidden; }
.split-l i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); background: var(--app-pri); border-radius: inherit; }

/* 5 · Equipe e permissões */
.eq-cab { display: flex; align-items: center; gap: 18px; }
.eq-cab > b { font-size: 18px; }
.eq-grade { display: grid; grid-template-columns: 250px 1fr; gap: 14px; margin-top: 14px; }
.perfis { display: grid; gap: 10px; align-content: start; }
.perfil { padding: 14px 16px; display: grid; gap: 8px; justify-items: start; }
.perfil b { font-size: 15px; }
.perfil small { color: var(--app-mudo); font-size: 12.5px; }
.perfil.on { box-shadow: 0 0 0 1.5px var(--app-pri); border-color: transparent; }
.matriz { padding: 14px 18px; }
.mx { display: grid; grid-template-columns: 1.5fr repeat(5, .8fr); align-items: center; padding: 9px 0; border-bottom: 1px solid var(--app-borda); font-size: 13.5px; }
.mx.th { font: 600 11.5px/1 var(--f-txt); letter-spacing: .05em; text-transform: uppercase; color: var(--app-mudo); }
.mx.th span:not(:first-child) { text-align: center; }
.q { justify-self: center; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px #b9c0d4; position: relative; transition: background-color .3s, box-shadow .3s; }
.q.ok, .q.ligado { background: var(--app-pri); box-shadow: none; }
.q.ok::after, .q.ligado::after { content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.escopo, .sens { display: grid; gap: 9px; margin-top: 14px; justify-items: start; }
.radio { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; }
.radio::before { content: ""; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #b9c0d4; transition: box-shadow .3s; }
.radio.ligado::before { box-shadow: inset 0 0 0 5px var(--app-pri); }
.sens { grid-auto-flow: column; justify-content: start; gap: 18px; align-items: center; }
.log { position: absolute; left: 272px; right: 24px; bottom: 28px; padding: 14px 18px; box-shadow: 0 24px 50px -24px rgba(14, 21, 51, .45); }
.log-l { display: grid; grid-template-columns: .8fr 1fr 1.7fr 1.2fr; gap: 12px; margin-top: 10px; font-size: 13.5px; align-items: center; }
.sens-t { display: inline-flex; align-items: center; gap: 6px; color: #b54708; font-weight: 600; }

/* 6 · Backup */
.bk-cab { display: grid; gap: 6px; }
.bk-cab b { font-size: 20px; }
.bk-fatos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bk-fatos span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-borda); font: 500 13px/1 var(--f-txt); color: #3d4560; }
.bk-grade { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; margin-top: 14px; }
.bk-drive, .bk-man { padding: 18px 20px; align-self: start; }
.bk-l { display: flex; justify-content: space-between; align-items: center; }
.bk-l + .bk-ind, .bk-ind + .bk-l { margin-top: 16px; }
.bk-l b, .bk-man > b { font-size: 15.5px; }
.bk-ind { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 14px; border-radius: 12px; background: var(--app-s2); }
.bk-ind > div { display: grid; gap: 6px; }
.bk-ind .rot { line-height: 1.25; }
.bk-ind b { font-size: 15px; }
.bk-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.bk-campos > div { display: grid; gap: 6px; }
.dias { display: flex; gap: 6px; margin-top: 14px; }
.dias span { height: 30px; padding: 0 10px; border-radius: 8px; background: hsl(241 90% 67% / .14); color: hsl(241 70% 46%); font: 600 12.5px/30px var(--f-txt); }
.bk-bt { margin-top: 14px; }
.bk-and, .bk-ok { display: inline-flex; align-items: center; gap: 8px; height: 38px; font: 600 14px/1 var(--f-txt); }
.bk-and { color: hsl(241 70% 50%); }
.bk-and::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira .9s linear infinite; }
@keyframes gira { to { transform: rotate(1turn); } }
.bk-ok { color: #15803d; }
.bk-col { display: grid; gap: 14px; align-content: start; }
.bk-rest { margin: 12px 0 14px; }
.bk-chave { margin-top: 8px; color: hsl(228 15% 60%); }
.bk-aviso { display: block; margin: 8px 0 10px; font-size: 14px !important; }

/* 7 · Radar */
.rad-cab { display: flex; align-items: flex-end; gap: 18px; }
.rad-cab > div { display: grid; gap: 6px; }
.rad-cab > div b { font-size: 20px; }
.rad-cont { margin-left: auto; display: flex; gap: 18px; font-size: 13px; color: var(--app-mudo); }
.rad-cont b { font-size: 16px; color: var(--app-fg); margin-right: 4px; font-variant-numeric: tabular-nums; }
.rad-fil { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.rad-fil .rot { margin-right: 4px; }
.fchip { display: inline-flex; align-items: center; height: 30px; padding: 0 11px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-borda); font: 500 12.5px/1 var(--f-txt); color: #3d4560; }
.fchip.m1, .fchip.m2, .fchip.m3 { background: #fff7c7; box-shadow: inset 0 0 0 1px #f2dc6b; color: #4a3d00; }
.rad-tab .tr { grid-template-columns: .5fr .72fr 2.35fr 1.7fr .95fr .55fr; padding: 13px 16px; align-items: center; }
.rad-tab .tr:not(.th) > span:nth-child(3) { display: grid; gap: 5px; }
.tags { display: flex; align-items: center; gap: 6px; }
.tags .mono { font-size: 11px; color: var(--app-mudo); white-space: nowrap; }
.partes { display: grid; gap: 5px; font-size: 13px; }
.partes em { font: 700 9.5px/1 var(--f-txt); font-style: normal; letter-spacing: .04em; padding: 3px 5px; border-radius: 4px; margin-right: 6px; }
.pp, .pa { background: #eef0f5; color: #475069; }
.val { font-weight: 600; text-align: right; }
.det { display: inline-flex; height: 30px; align-items: center; padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px hsl(241 70% 60%); color: hsl(241 70% 50%); font: 600 12.5px/1 var(--f-txt); }
.st-ok { font-size: 11.5px; height: 22px; }
.mk { justify-self: start; background: linear-gradient(transparent 0 12%, rgba(255, 222, 70, .9) 12% 90%, transparent 90%) no-repeat 0 0 / 0% 100%; transition: background-size .7s var(--sai); border-radius: 3px; }
.verso.marcar .tr.nova:not(.fora) .mk { background-size: 100% 100%; }
.tr.nova .mk.m1 { transition-delay: .25s; } .tr.nova .mk.m2 { transition-delay: .45s; } .tr.nova .mk.m3 { transition-delay: .65s; }
.tg.mk { background-color: #e8eeff; }
.verso.marcar .tr.nova:not(.fora) .tg.mk { background-image: linear-gradient(rgba(255, 222, 70, .95), rgba(255, 222, 70, .95)); color: #4a3d00; }
.gaveta { position: absolute; top: 0; right: 0; bottom: 0; width: 370px; padding: 22px; border-radius: 16px 0 0 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: -30px 0 60px -30px rgba(14, 21, 51, .45); }
.gaveta.fora { transform: none; }
.gaveta > b { font-size: 17px; }
.gaveta > .mono { font-size: 12.5px; color: var(--app-mudo); }
.gaveta dl { margin: 10px 0 0; display: grid; gap: 12px; }
.gaveta dt { font-size: 12px; color: var(--app-mudo); }
.gaveta dd { margin: 3px 0 0; font-size: 14px; font-weight: 600; }

/* 8 · Enriquecimento */
.enr-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.enr-cab > div { display: grid; gap: 6px; }
.enr-cab > div b { font-size: 20px; }
.enr-cab .mono { font-size: 12.5px; color: var(--app-mudo); }
.enr-sub { display: flex; align-items: center; gap: 16px; margin-top: 14px; font-size: 13px; color: var(--app-mudo); }
.enr-sub b { color: var(--app-fg); font-size: 14px; }
.enr-sub .pbtn { margin-left: auto; height: 34px; }
.enr-grade { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-top: 14px; }
.enr-col { display: grid; gap: 14px; align-content: start; }
.enr-bloco { padding: 16px 18px; }
.enr-t { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.enr-t b { font-size: 15px; }
.fonte { font: 600 11px/1 var(--f-mono); padding: 5px 8px; border-radius: 6px; background: #fff7c7; color: #5b4a00; box-shadow: inset 0 0 0 1px #f2dc6b; }
.enr-bloco dl { margin: 0; }
.enr-bloco dl div { display: grid; grid-template-columns: 140px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--app-borda); font-size: 13.5px; }
.enr-bloco dt { color: var(--app-mudo); }
.enr-bloco dd { margin: 0; font-weight: 500; }
.socio { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14px; }
.socio .selo { margin-left: auto; }
.end { display: flex; align-items: center; gap: 12px; padding: 4px 0; font-size: 13.5px; }
.end > div { display: grid; gap: 3px; }
.end span:not(.selo) { color: var(--app-mudo); font-size: 12.5px; }
.end .selo { margin-left: auto; }
.evo { display: grid; grid-template-columns: 10px 84px 1fr; gap: 8px; align-items: center; padding: 6px 0; font-size: 13px; }
.evo i { width: 8px; height: 8px; border-radius: 50%; background: var(--d); }
.evo > span:nth-child(2) { font: 500 12px/1 var(--f-mono); color: var(--app-mudo); }
.masc { display: block; font-size: 13.5px; color: #3d4560; }

/* 9 · CRM */
.crm-topo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.crm-k { background: #fff; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--app-borda); padding: 12px 16px; display: grid; gap: 6px; }
.crm-k b { font-size: 22px; font-variant-numeric: tabular-nums; }
.crm-fil { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.crm-dir { margin-left: auto; display: flex; gap: 8px; }
.crm-dir .pbtn { height: 34px; }
.quadro { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 14px; }
.col { background: #e9ecf4; border-radius: 14px; padding: 10px; min-height: 480px; }
.col-cab { display: flex; align-items: center; gap: 8px; font: 600 13.5px/1 var(--f-txt); padding: 4px 2px 2px; }
.col-cab i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.col-cab > span { margin-left: auto; font: 600 11.5px/1 var(--f-mono); padding: 4px 7px; border-radius: 99px; background: #fff; }
.card { position: relative; margin-top: 10px; background: #fff; border-radius: 12px; padding: 10px 12px; border-left: 4px solid var(--b); display: grid; gap: 5px; font-size: 12.5px; box-shadow: 0 1px 2px rgba(14, 21, 51, .06); }
.card > b { font-size: 13.5px; }
.card-l { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.card-l .mono { font-size: 11px; color: var(--app-mudo); }
.card-l b.mono { font-size: 12px; color: var(--app-fg); }
.card-c { color: var(--app-mudo); }
.quando { display: inline-flex; align-items: center; gap: 4px; font: 500 11px/1 var(--f-mono); color: var(--app-mudo); }
.voa { --e: 0; z-index: 3;
  transform: translateX(calc(201.6px * var(--e))) rotate(calc(2.5deg * min(var(--e) * 10, (1 - var(--e)) * 10, 1)));
  box-shadow: 0 calc(22px * min(var(--e) * 10, (1 - var(--e)) * 10, 1)) 40px -18px rgba(14, 21, 51, .5); }
.sobe { transform: translateY(calc(var(--sobe, -128px) * var(--e, 0))); }
.vaga { height: calc(var(--alt, 108px) * clamp(0, (var(--t) - .3) * 8, 1)); margin-top: calc(10px * clamp(0, (var(--t) - .3) * 8, 1)); border-radius: 12px; border: 1.5px dashed hsl(241 70% 70% / calc(1 - var(--t) * .2)); }

/* 10 · WhatsApp */
.wa { display: grid; grid-template-columns: 300px 1fr; height: 712px; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--app-borda); }
.wa-lista { border-right: 1px solid var(--app-borda); padding: 12px 0; }
.wa-lista .busca { margin: 0 12px 8px; width: calc(100% - 24px); }
.wa-c { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--app-borda); font-size: 13.5px; }
.wa-c > span { font-size: 12px; color: var(--app-mudo); }
.wa-c small { grid-column: 1 / -1; display: flex; gap: 6px; }
.wa-c.on { background: hsl(241 90% 67% / .07); box-shadow: inset 3px 0 0 var(--app-pri); }
.wa-conv { display: flex; flex-direction: column; min-width: 0; }
.wa-cab { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--app-borda); }
.wa-cab b { font-size: 16px; margin-right: 6px; }
.wa-msgs { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px; background: #f4f6fb; }
.bal { margin: 0; max-width: 72%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; }
.bal small { display: block; margin-top: 4px; text-align: right; font-size: 11px; color: var(--app-mudo); }
.bal.ent { align-self: flex-start; background: #fff; box-shadow: 0 1px 2px rgba(14, 21, 51, .06); }
.bal.sai { align-self: flex-end; background: #dcf8e3; }
.anexo { display: grid; gap: 8px; min-width: 300px; }
.arq { display: flex; align-items: center; gap: 10px; }
.arq > svg.ic { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: hsl(241 90% 67% / .12); color: hsl(241 70% 52%); }
.arq > span { display: grid; }
.arq small { text-align: left; margin: 0; }
.arq-acoes { display: flex; gap: 18px; padding-top: 8px; border-top: 1px solid var(--app-borda); font: 500 13px/1 var(--f-txt); }
.arq-acoes span { display: inline-flex; align-items: center; gap: 6px; }
.salvar { color: hsl(241 70% 52%); font-weight: 600; }
.wa-pe { display: flex; align-items: center; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--app-borda); font-size: 13px; color: var(--app-mudo); }
.wa-pe .on { color: hsl(241 70% 52%); font-weight: 600; }
.wa-pe em { margin-left: auto; font-style: normal; color: #15803d; font-weight: 600; }
.doc-proc { position: absolute; right: 44px; bottom: 90px; width: 330px; padding: 14px 16px; display: grid; gap: 8px; border-left: 4px solid var(--app-pri); box-shadow: 0 24px 50px -24px rgba(14, 21, 51, .45); }
.doc-proc .mono { font-size: 12px; color: var(--app-mudo); }

/* 11 · Atlas */
.atl-cab { display: flex; align-items: center; gap: 18px; }
.atl-cab > b { font-size: 20px; }
.atl-grade { display: grid; grid-template-columns: 1.3fr 1fr; gap: 14px; margin-top: 14px; }
.atl-chat { padding: 18px; display: flex; flex-direction: column; gap: 9px; height: 650px; background: #f4f6fb; }
.atl-chat .bal { max-width: 82%; }
.bal.atl { background: #eceeff; }
.bal.atl em { display: block; font: 700 11px/1 var(--f-txt); font-style: normal; letter-spacing: .04em; color: hsl(241 70% 52%); margin-bottom: 5px; }
.atl-cfg { padding: 18px; display: flex; flex-direction: column; gap: 10px; align-self: start; }
.atl-cfg .rot { margin-top: 6px; }
.grade-h { display: grid; grid-template-columns: 38px repeat(6, 1fr); gap: 5px; font-size: 11.5px; color: var(--app-mudo); align-items: center; text-align: center; }
.grade-h i { height: 20px; border-radius: 5px; background: #eceef4; }
.grade-h i.o { background: hsl(241 90% 67% / .55); }

/* 10 · Discador inteligente (prévia: ainda não está no sistema do escritório) */
.dis-cab, .nut-cab { display: flex; align-items: center; gap: 18px; }
.dis-cab > b, .nut-cab > b { font-size: 20px; }
.dis-auto, .nut-jan { margin-left: auto; }
.dis-auto { font-weight: 500; }
.dis-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.dis-kpis b { font-size: 22px; font-variant-numeric: tabular-nums; }
.dis-grade { display: grid; grid-template-columns: 1.08fr 1fr; gap: 14px; margin-top: 14px; }
.dis-fila { overflow: hidden; }
.dis-l { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 92px; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--app-borda); font-size: 13.5px; }
.dis-l:last-child { border-bottom: 0; }
.dis-l > div { display: grid; gap: 3px; min-width: 0; }
.dis-l small { font-size: 12.5px; color: var(--app-mudo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dis-l > .selo, .dis-l .pilha, .dis-l .pilha > * { justify-self: end; }
.dis-l.on { background: hsl(241 90% 67% / .06); box-shadow: inset 3px 0 0 var(--app-pri); }
.dis-l.sup { color: var(--app-mudo); }
.dis-l.sup .avatar { background: #eef0f5; color: var(--app-mudo); }
.dis-liga::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pisca 1s ease-in-out infinite; }
@keyframes pisca { 50% { opacity: .25; } }
.dis-cham { padding: 18px 20px; display: flex; flex-direction: column; gap: 16px; }
.dis-quem { display: flex; align-items: center; gap: 12px; }
.dis-quem .avatar { width: 40px; height: 40px; font-size: 14px; }
.dis-quem > div { display: grid; gap: 3px; }
.dis-quem b { font-size: 16px; }
.dis-quem small { font-size: 13px; color: var(--app-mudo); }
.dis-quem .tg { margin-left: auto; }
.dis-viva, .dis-res { display: flex; flex-direction: column; gap: 12px; }
.dis-meio > * { justify-self: stretch; }
.dis-tempo { font-size: 34px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.onda { display: flex; align-items: center; gap: 4px; height: 58px; }
.onda i { flex: 1; height: 95%; border-radius: 3px; background: hsl(241 90% 67% / .55); transform: scaleY(.3); animation: onda 1.1s ease-in-out infinite alternate; }
.onda i:nth-child(2n) { animation-duration: .8s; } .onda i:nth-child(3n) { animation-duration: 1.4s; animation-delay: -.4s; } .onda i:nth-child(5n) { animation-duration: .95s; animation-delay: -.7s; }
@keyframes onda { to { transform: scaleY(1); } }
.tela:not(.ativa) .onda i, .dis-viva.fora .onda i { animation-play-state: paused; } /* fora de vista a onda para */
.dis-bts { display: flex; gap: 8px; }
.dis-bts .pbtn { height: 36px; }
.dis-fim { margin-left: auto; background: #dc2626; }
.dis-reg { position: absolute; right: 24px; bottom: 28px; width: 400px; padding: 16px 18px; display: grid; gap: 8px; border-left: 4px solid #22c55e; box-shadow: 0 24px 50px -24px rgba(14, 21, 51, .45); }
.dis-reg b { font-size: 15.5px; }
.dis-reg-l { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #3d4560; }
.dis-reg-l svg.ic { color: #15803d; }

/* 11 · Nutrições por e-mail (prévia: ainda não está no sistema do escritório) */
.nut-grade { display: grid; grid-template-columns: 1.1fr 1fr; gap: 14px; margin-top: 14px; align-items: start; }
.nut-seq, .nut-mail { padding: 18px 20px; }
.nut-seq-cab { display: flex; justify-content: space-between; align-items: center; }
.nut-seq-cab > div { display: grid; gap: 6px; }
.nut-seq-cab b { font-size: 16px; }
.nut-passos { list-style: none; margin: 20px 0 0; padding: 0; }
.nut-passos li { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding-bottom: 12px; }
.nut-passos li:not(:last-child)::before { content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: var(--app-borda); }
.nut-passos li > i { width: 22px; height: 22px; margin-top: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--app-borda); }
.nut-passos li.on > i { box-shadow: inset 0 0 0 6px var(--app-pri); }
.nut-passos li > div { display: grid; gap: 5px; padding: 12px 14px; border-radius: 12px; background: var(--app-s2); box-shadow: inset 0 0 0 1px var(--app-borda); }
.nut-passos li.on > div { background: hsl(241 90% 67% / .06); box-shadow: inset 0 0 0 1.5px hsl(241 90% 67% / .45); }
.nut-quando { font: 500 12px/1 var(--f-mono); color: var(--app-mudo); }
.nut-passos li > div > b { font-size: 14px; }
.nut-num { display: flex; gap: 16px; font-size: 12.5px; color: var(--app-mudo); }
.nut-num b { color: var(--app-fg); font-size: 13px; font-variant-numeric: tabular-nums; }
.nut-regras { display: grid; gap: 9px; margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--app-borda); }
.nut-regras span { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #3d4560; }
.nut-regras svg.ic { color: #15803d; }
.nut-mail { display: flex; flex-direction: column; gap: 8px; }
.nut-mail-cab { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.nut-de { display: grid; grid-template-columns: 44px 1fr; padding: 7px 0; border-bottom: 1px solid var(--app-borda); font-size: 13px; }
.nut-de span { color: var(--app-mudo); }
.nut-ass { margin-top: 8px; font-size: 16px; line-height: 1.3; }
.nut-mail p { margin: 0; font-size: 13.5px; line-height: 1.55; color: #3d4560; }
.nut-mail .nut-ass-n { margin-top: 4px; color: var(--app-fg); }
.nut-ass-n small { color: var(--app-mudo); }
.nut-desc { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--app-borda); font-size: 12px; color: var(--app-mudo); }
.nut-resp { position: absolute; right: 24px; bottom: 28px; width: 470px; padding: 16px 18px; display: grid; gap: 10px; border-left: 4px solid var(--app-pri); box-shadow: 0 24px 50px -24px rgba(14, 21, 51, .45); }
.nut-resp-cab { display: flex; justify-content: space-between; align-items: center; }
.nut-resp-cab .pilha > * { justify-self: end; }
.nut-resp .bal { max-width: none; background: #f4f6fb; box-shadow: none; }
.nut-fim { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: #ecfdf3; color: #05603a; font: 500 13.5px/1.3 var(--f-txt); }

/* Onboarding: o celular do cliente, 360 × 760 lógicos, nos tokens da 4.2.0 ("mesa e folhas": mesa lavanda, folhas brancas com borda) */
.ob-aparelho {
  width: 384px; height: 784px; padding: 12px; border-radius: 56px; transform-origin: 0 0; transform: scale(var(--fs, 1));
  background: linear-gradient(150deg, #2c355c, #0e1533 52%, #1d2549);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16), inset 0 0 0 5px #0a1028, 0 60px 100px -46px rgba(14, 21, 51, .6), 0 26px 44px -30px rgba(14, 21, 51, .5);
}
.ob-tela-cel { position: relative; width: 360px; height: 760px; border-radius: 44px; overflow: hidden; background: var(--app-bg); display: flex; flex-direction: column; content-visibility: auto; } /* as cinco telas do celular só montam quando o onboarding chega perto */
.ob-status { flex: none; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 30px 0 36px; font: 600 14px/1 var(--f-txt); }
.ob-ilha { position: absolute; left: 50%; top: 11px; width: 98px; height: 28px; margin-left: -49px; border-radius: 99px; background: #0a1028; }
.ob-sinais { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.ob-sinais i { width: 4px; height: 6px; border-radius: 1px; background: var(--app-fg); }
.ob-sinais i:nth-child(2) { height: 9px; } .ob-sinais i:nth-child(3) { height: 12px; }
.ob-timbre { flex: none; display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px; background: #fff; border-block: 1px solid var(--app-borda); }
.ob-logo { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 8px; background: var(--app-fg); color: #fff; font: 600 12px/1 var(--f-txt); letter-spacing: .03em; }
.ob-timbre b { font-size: 14.5px; }
.ob-de { margin-left: auto; font: 500 12.5px/1 var(--f-mono); color: var(--app-mudo); white-space: nowrap; }
.ob-prog { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 12px 18px 0; }
.ob-prog i { position: relative; height: 4px; border-radius: 99px; background: #dde1ec; overflow: hidden; }
.ob-prog i::after { content: ""; position: absolute; inset: 0; background: var(--app-pri); transform: scaleX(var(--e, 0)); transform-origin: 0 50%; }
.ob-janela { flex: 1; position: relative; overflow: hidden; }
.ob-fita { display: flex; height: 100%; will-change: transform; }
.ob-t { flex: 0 0 360px; height: 100%; padding: 16px 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.ob-tit { font-size: 20px; line-height: 1.2; letter-spacing: -.01em; }
.ob-sub { font-size: 13.5px; line-height: 1.4; color: var(--app-mudo); }
.ob-t .pilha > * { justify-self: stretch; }
/* 1 · relato */
.ob-chat { flex: 1; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.ob-chat .bal { max-width: 86%; font-size: 13.5px; }
.ob-t .ob-chat .pilha > * { justify-self: start; } /* "digitando" e a resposta final ocupam o mesmo lugar */
.bal.ob-ia { align-self: flex-start; background: #fff; box-shadow: inset 0 0 0 1px var(--app-borda); }
.bal.ob-ia em { display: block; margin-bottom: 5px; font: 700 10.5px/1 var(--f-txt); font-style: normal; letter-spacing: .04em; color: hsl(241 70% 52%); }
.ob-audio { display: flex; align-items: center; gap: 10px; min-width: 214px; padding: 9px 12px; }
.ob-play { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: #15803d; color: #fff; }
.ob-play svg.ic { width: 13px; height: 13px; margin-left: 2px; fill: currentColor; stroke: none; }
.ob-onda { flex: 1; display: flex; align-items: center; gap: 2px; height: 26px; }
.ob-onda i { flex: 1; height: 40%; border-radius: 2px; background: #3f8f5e; }
.ob-onda i:nth-child(3n) { height: 85%; } .ob-onda i:nth-child(4n+1) { height: 60%; } .ob-onda i:nth-child(5n) { height: 100%; } .ob-onda i:nth-child(7n) { height: 25%; }
.ob-audio small { margin: 0; font-size: 11px; }
.ob-transc { align-self: flex-end; max-width: 86%; margin: -2px 0 0; font-size: 12px; line-height: 1.4; font-style: italic; text-align: right; color: var(--app-mudo); }
.ob-digita { display: flex; gap: 4px; padding: 12px 14px; }
.ob-digita i { width: 6px; height: 6px; border-radius: 50%; background: #b9c0d4; animation: pisca 1.2s ease-in-out infinite; }
.ob-digita i:nth-child(2) { animation-delay: .2s; } .ob-digita i:nth-child(3) { animation-delay: .4s; }
.ob-compor { flex: none; display: flex; align-items: center; gap: 10px; }
.ob-campo { flex: 1; height: 44px; display: flex; align-items: center; padding: 0 16px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-borda); font-size: 14px; color: hsl(228 13% 45%); }
.ob-mic { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--app-pri); color: #fff; box-shadow: 0 8px 18px -8px hsl(241 90% 50% / .7); }
.ob-mic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* 2 · assinatura */
.ob-folha { position: relative; height: 250px; margin-top: 4px; padding: 18px 20px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--app-borda), 0 12px 26px -20px rgba(14, 21, 51, .35); }
.ob-folha b { display: block; margin-bottom: 14px; text-align: center; font: 700 10px/1.4 Georgia, serif; letter-spacing: .02em; }
.ob-folha i { display: block; height: 6px; margin-bottom: 10px; border-radius: 3px; background: #edf0f6; }
.ob-linha-ass { position: absolute; left: 20px; right: 130px; bottom: 30px; border-top: 1px solid #b9c0d4; }
.ob-rubrica { position: absolute; left: 30px; bottom: 34px; font: 400 34px/1 "Mrs Saint Delafield", "Snell Roundhand", cursive; color: #1d3a8f; transform: rotate(-4deg); white-space: nowrap; }
.ob-doc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-borda); }
.ob-doc > svg.ic { width: 34px; height: 34px; padding: 8px; border-radius: 10px; background: hsl(241 90% 67% / .12); color: hsl(241 70% 52%); }
.ob-doc > div { display: grid; gap: 2px; font-size: 14px; }
.ob-doc small { font-size: 12px; color: var(--app-mudo); }
.ob-doc .pilha { margin-left: auto; }
.ob-t .ob-doc .pilha > * { justify-self: end; }
.ob-acao { margin-top: auto; }
.ob-ok { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 10px; background: #ecfdf3; color: #05603a; font: 600 14px/1 var(--f-txt); }
/* 3 · documentos */
.ob-t-docs .barrinha { margin: 0 0 4px; }
.ob-lista { list-style: none; margin: 0; padding: 0; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-borda); }
.ob-lista li { display: grid; grid-template-columns: 20px 1fr auto; gap: 10px; align-items: center; padding: 16px 14px; border-bottom: 1px solid var(--app-borda); font-size: 13.5px; }
.ob-lista li:last-child { border-bottom: 0; }
.ob-lista small { font-size: 12px; font-weight: 600; color: #15803d; }
.ob-t .ob-lista .pilha > * { justify-self: end; }
.ob-lista .ob-envia, .ob-lista .ob-falta { color: hsl(241 70% 52%); }
.ob-falta { text-decoration: underline; }
.ob-lista li > i, .ob-ficha li > i { position: relative; width: 20px; height: 20px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #b9c0d4; transition: background-color .3s, box-shadow .3s; }
.ob-lista li:is(.feito, .ligado) > i, .ob-ficha li.feito > i { background: #16a34a; box-shadow: none; }
.ob-lista li:is(.feito, .ligado) > i::after, .ob-ficha li.feito > i::after { content: ""; position: absolute; left: 7px; top: 3.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ob-bts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; }
.ob-bts .pbtn { justify-content: center; padding: 0 10px; font-size: 13.5px; }
/* 4 · honorários */
.ob-valor { display: grid; gap: 6px; padding: 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-borda); }
.ob-valor b { font-size: 28px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ob-valor small { font-size: 12.5px; color: var(--app-mudo); }
.seg.ob-seg { margin: 0; display: grid; grid-template-columns: 1fr 1fr; text-align: center; font-size: 13.5px; }
.ob-qr { display: grid; justify-items: center; align-content: center; gap: 14px; padding: 18px 16px 16px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-borda); }
.ob-qr svg { width: 164px; height: 164px; fill: var(--app-fg); }
.ob-pix { flex: 1; }
.ob-pago { display: grid; justify-items: center; align-content: center; gap: 8px; padding: 30px 16px; border-radius: 16px; background: #ecfdf3; color: #05603a; text-align: center; }
.ob-pago b { font-size: 17px; }
.ob-pago small { font-size: 12.5px; }
.ob-pago-ic, .ob-bv-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #16a34a; color: #fff; }
.ob-pago-ic svg.ic, .ob-bv-ic svg.ic { width: 28px; height: 28px; stroke-width: 2.4; }
/* 5 · boas-vindas */
.ob-bv-ic { margin: 14px 0 4px; }
.ob-t-bv .ob-tit { font-size: 24px; }
.ob-resp { display: flex; align-items: center; gap: 12px; margin-top: 6px; padding: 12px 14px; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1px var(--app-borda); }
.ob-resp .avatar { width: 40px; height: 40px; font-size: 13px; }
.ob-resp div { display: grid; gap: 2px; }
.ob-resp small { font-size: 12px; color: var(--app-mudo); }
.ob-resp b { font-size: 15px; }
.ob-prox { list-style: none; margin: 0; padding: 0; }
.ob-prox li { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--app-borda); font-size: 14px; }
.ob-prox svg.ic { color: hsl(241 70% 52%); }
.ob-t-bv .pbtn.largo { margin-top: auto; }
/* a ficha do escritório: cada etapa que o cliente termina cai aqui */
.ob-ficha { width: 320px; padding: 18px 18px 6px; box-shadow: 0 30px 60px -30px rgba(14, 21, 51, .45); }
.ob-ficha-nome { display: block; margin-top: 8px; font-size: 17px; }
.ob-ficha-caso { display: block; margin-top: 2px; font-size: 13px; color: var(--app-mudo); }
.ob-ficha ul { list-style: none; margin: 12px 0 0; padding: 0; }
.ob-ficha li { display: grid; grid-template-columns: 20px 1fr auto; gap: 4px 10px; align-items: center; padding: 11px 0; border-top: 1px solid var(--app-borda); }
/* o detalhe ocupa a linha de baixo inteira, do texto até o selo */
.ob-ficha li > div { display: contents; }
.ob-ficha li > i { grid-area: 1 / 1; }
.ob-ficha li > div > b { grid-area: 1 / 2; }
.ob-ficha li > .pilha { grid-area: 1 / 3; }
.ob-ficha li > div > small { grid-area: 2 / 2 / 3 / 4; }
.ob-ficha li b { font-size: 13.5px; }
.ob-ficha li small { font-size: 12px; line-height: 1.35; color: var(--app-mudo); }
.ob-ficha .pilha > * { justify-self: end; transition: opacity .35s; }
.ob-ficha li:not(.feito) .s-verde, .ob-ficha li.feito .s-cinza { opacity: 0; }