/* Visual de cada réplica. Cada app tem a identidade do sistema real (cores e fontes),
   com nome de marca e dados fictícios. As telas são desenhadas em 2x:
   notebook 904x568 e celular 296x628 (aparelhos.css reduz pela metade). */

.apertado { filter: brightness(.92); transform: scale(.97); transition: transform .12s, filter .12s; }
.ic { width: 1em; height: 1em; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* barra de status do celular */
.status-cel { position: absolute; top: 0; left: 0; right: 0; height: 50px; display: flex; justify-content: space-between; align-items: center; padding: 4px 30px 0; font: 600 15px Inter, sans-serif; z-index: 8; color: #fff; }
.status-cel.escuro { color: #1a1a1a; }
.status-cel i { width: 30px; height: 12px; border-radius: 4px; border: 2px solid currentColor; opacity: .75; }

/* ========================================================================
   1) COMPRAS B2B  (painel Poppins #7159E1 / app Inter #6B4FD6)
   ======================================================================== */
.compras { font-family: Poppins, sans-serif; color: #172233; }
.compras.nb-conteudo { display: grid; grid-template-columns: 188px 1fr; background: #F7F7FA; }
.cp-lado { background: #fff; border-right: 1px solid #E8E8EF; padding: 18px 12px 14px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.cp-logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 21px; letter-spacing: -.03em; margin: 0 6px 16px; }
.cp-logo i { width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #7159E1, #A08CF5); color: #fff; font-style: normal; font-size: 16px; display: grid; place-items: center; }
.cp-logo b { color: #7159E1; }
.cp-sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: #A1A5B7; margin: 10px 8px 4px; font-weight: 600; }
.cp-nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: #5E6278; white-space: nowrap; transition: background .3s, color .3s; }
.cp-nav .ic { font-size: 17px; }
.cp-nav.ativo { background: #F1EEFF; color: #7159E1; font-weight: 600; }
.cp-eu { margin-top: auto; display: flex; gap: 9px; align-items: center; padding: 10px 6px 0; border-top: 1px solid #EFEFF4; font-size: 12px; line-height: 1.3; }
.cp-eu b { display: block; font-weight: 600; }
.cp-eu small { color: #A1A5B7; font-size: 11px; }
.cp-av { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-style: normal; font-size: 10.5px; font-weight: 600; flex: 0 0 auto; border: 2px solid #fff; }
.cp-main { position: relative; overflow: hidden; }
.cp-topo { height: 58px; display: flex; align-items: center; gap: 16px; padding: 0 22px; background: #fff; border-bottom: 1px solid #E8E8EF; }
.cp-migalha { font-size: 13px; color: #5E6278; font-weight: 500; min-width: 150px; }
.cp-migalha span { color: #C4C6D0; margin: 0 3px; }
.cp-busca { flex: 1; height: 36px; border-radius: 9px; background: #F5F5F9; display: flex; align-items: center; gap: 9px; padding: 0 12px; font-size: 12.5px; color: #A1A5B7; }
.cp-busca .ic { font-size: 15px; }
.cp-busca kbd { margin-left: auto; font: 500 11px Inter, sans-serif; border: 1px solid #E1E3EA; border-radius: 5px; padding: 2px 6px; background: #fff; }
.cp-sino { position: relative; width: 36px; height: 36px; border-radius: 9px; border: 1px solid #E8E8EF; display: grid; place-items: center; color: #5E6278; font-size: 17px; }
.cp-sino b { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; border-radius: 9px; background: #F1416C; color: #fff; font-size: 10.5px; display: grid; place-items: center; border: 2px solid #fff; transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.cp-sino.tem b { transform: scale(1); }
.compras .tela { top: 58px; }
.cp-pag { padding: 20px 22px; }
.cp-ola { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; gap: 14px; }
.cp-ola h4 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.cp-ola p { font-size: 12.5px; color: #8A8FA3; margin-top: 2px; }
.cp-botao-sec { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; border: 1px solid #E1E3EA; background: #fff; border-radius: 8px; padding: 8px 13px; color: #3F4254; }
.cp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.cp-kpi { position: relative; background: #fff; border: 1px solid #ECECF2; border-radius: 12px; padding: 13px 14px 12px; display: grid; gap: 1px; }
.cp-kpi small { font-size: 11.5px; color: #8A8FA3; padding-right: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-kpi b { font-size: 22px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cp-kpi em { font-style: normal; font-size: 11px; color: #A1A5B7; }
.cp-kpi em.sobe { color: #17A673; font-weight: 600; }
.cp-kpi-ic { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 16px; }
.cp-kpi-ic.verde { background: #E8FFF3; color: #17A673; }
.cp-kpi-ic.roxo { background: #F1EEFF; color: #7159E1; }
.cp-kpi-ic.azul { background: #EAF4FF; color: #2F80ED; }
.cp-kpi-ic.laranja { background: #FFF4E5; color: #E8892D; }
.cp-duas { display: grid; grid-template-columns: 1fr 1.25fr; gap: 12px; }
.cp-card { background: #fff; border: 1px solid #ECECF2; border-radius: 12px; padding: 14px 16px; }
.cp-card h5 { font-size: 14px; font-weight: 600; display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cp-card h5 small, .cp-card h5 em { font-size: 11.5px; font-weight: 400; color: #A1A5B7; font-style: normal; }
.cp-card h5 em { color: #7159E1; font-weight: 500; }
.cp-grafico { display: flex; align-items: flex-end; gap: 12px; height: 150px; padding-top: 6px; }
.cp-barra { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.cp-barra span { width: 100%; max-width: 30px; background: #E4DEFC; border-radius: 6px 6px 3px 3px; display: flex; align-items: flex-end; overflow: hidden; }
.cp-barra em { display: block; width: 100%; background: #17A673; opacity: .85; }
.cp-barra.atual span { background: #7159E1; }
.cp-barra small { font-size: 10.5px; color: #A1A5B7; }
.cp-legenda { display: flex; gap: 14px; font-size: 11px; color: #8A8FA3; margin-top: 8px; }
.cp-legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; background: #7159E1; margin-right: 5px; }
.cp-legenda i.e { background: #17A673; }
.cp-rec { display: grid; grid-template-columns: 52px 1fr auto auto; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid #F1F1F5; font-size: 12.5px; }
.cp-rec:first-child { border-top: 0; }
.cp-rec-n { font: 600 11.5px "JetBrains Mono", monospace; color: #8A8FA3; }
.cp-rec-t b { display: block; font-weight: 500; }
.cp-rec-t small { color: #A1A5B7; font-size: 11px; }
.cp-pilha { display: flex; }
.cp-pilha .cp-av { width: 24px; height: 24px; font-size: 9px; margin-left: -7px; }
.cp-rec.nova { animation: cp-entra .6s cubic-bezier(.2,.9,.3,1.1); background: #FBFAFF; margin: 0 -10px; padding: 10px; border-radius: 8px; box-shadow: inset 3px 0 #7159E1; }
@keyframes cp-entra { from { transform: translateY(-14px); opacity: 0; } }
.cp-chip { display: inline-block; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 600; white-space: nowrap; letter-spacing: 0; }
.cp-chip.roxo { background: #F1EEFF; color: #7159E1; }
.cp-chip.verde { background: #E8FFF3; color: #17A673; }
.cp-chip.amarelo { background: #FFF6DD; color: #B7860B; }

.cp-prog { width: 150px; text-align: right; font-size: 11.5px; color: #8A8FA3; }
.cp-prog span { display: block; height: 6px; border-radius: 3px; background: #EEEEF4; margin-top: 5px; overflow: hidden; }
.cp-prog i { display: block; height: 100%; width: 0; background: #7159E1; transition: width .5s; }
.cp-tab { padding: 0; overflow: hidden; }
.cp-tr { display: grid; grid-template-columns: 1.35fr 1fr 1fr 1fr; align-items: center; min-height: 50px; border-top: 1px solid #F1F1F5; font-size: 12.5px; }
.cp-tr > div { padding: 0 14px; }
.cp-tr.cab { min-height: 46px; background: #FAFAFC; border-top: 0; font-size: 11.5px; color: #8A8FA3; font-weight: 500; }
.cp-forn { display: flex; align-items: center; gap: 7px; color: #3F4254; font-weight: 600; }
.cp-forn .cp-av { width: 24px; height: 24px; font-size: 9px; }
.cp-td-item b { display: block; font-weight: 500; }
.cp-td-item small { color: #A1A5B7; font-size: 11px; }
.cp-preco { position: relative; height: 50px; display: flex; align-items: center; font-variant-numeric: tabular-nums; transition: background .4s; }
.cp-preco b { font-weight: 500; opacity: 0; transform: translateY(5px); transition: .35s; }
.cp-esp { position: absolute; left: 14px; width: 70px; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #F0F0F5, #E4E4EC, #F0F0F5); background-size: 200% 100%; animation: cp-brilho 1.2s linear infinite; transition: opacity .3s; }
@keyframes cp-brilho { to { background-position: -200% 0; } }
.cp-preco.on b { opacity: 1; transform: none; }
.cp-preco.on .cp-esp { opacity: 0; }
.cp-preco.melhor { background: #EDFBF4; }
.cp-preco.melhor b { color: #0F8A5F; font-weight: 700; }
.cp-preco.melhor b::after { content: " ✓"; }
.cp-tr.tot { background: #FAFAFC; font-weight: 600; }
.cp-preco.tot b { font-weight: 600; }
.cp-fecha { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #1E1638; color: #fff; border-radius: 12px; padding: 12px 14px 12px 16px; }
.cp-fecha > div { display: flex; gap: 12px; align-items: center; }
.cp-fecha .ic { font-size: 24px; color: #FFC94D; }
.cp-fecha p { font-size: 11.5px; color: #C9C2E8; line-height: 1.4; }
.cp-fecha p b { display: block; color: #fff; font-size: 14.5px; font-weight: 600; }
.cp-botao { background: #7159E1; color: #fff; font-size: 13px; font-weight: 600; border-radius: 9px; padding: 10px 18px; white-space: nowrap; }
.cp-modal { position: absolute; inset: 0; background: rgba(23, 18, 40, .38); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 6; }
.cp-modal.on { opacity: 1; }
.cp-modal-caixa { width: 330px; background: #fff; border-radius: 16px; padding: 24px 24px 20px; text-align: center; transform: scale(.92); transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.cp-modal.on .cp-modal-caixa { transform: none; }
.cp-modal-caixa h4 { font-size: 19px; font-weight: 600; margin-top: 10px; }
.cp-modal-caixa p { font-size: 12.5px; color: #8A8FA3; margin: 2px 0 14px; }
.cp-ok-ic { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #E8FFF3; color: #17A673; font-size: 24px; }
.cp-ok-ic .ic { stroke-width: 2.6; }
.cp-erp { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; background: #F5F5F9; border-radius: 8px; padding: 9px 12px; color: #8A8FA3; transition: background .3s; }
.cp-erp code { font: 500 11.5px "JetBrains Mono", monospace; color: #3F4254; }
.cp-erp span { display: flex; align-items: center; gap: 4px; }
.cp-erp.ok { background: #E8FFF3; }
.cp-erp.ok span { color: #0F8A5F; font-weight: 600; }

/* app do engenheiro (celular) */
.compras.cel-conteudo { font-family: Inter, sans-serif; background: #F6F4FB; color: #221C33; }
.cp-chead { background: #1E1638; color: #fff; padding: 64px 22px 22px; border-radius: 0 0 26px 26px; }
.cp-chead small { font-size: 13px; opacity: .6; display: block; }
.cp-chead b { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.cp-chead.baixo { padding-bottom: 24px; }
.cp-cbusca { margin-top: 16px; height: 46px; border-radius: 14px; background: #fff; color: #221C33; display: flex; align-items: center; gap: 10px; padding: 0 14px; font-size: 15px; }
.cp-cbusca .ic { font-size: 18px; color: #6B4FD6; }
.cp-cbusca span:empty::before { content: attr(data-ph); color: #A9A3B8; }
.cp-cpag { padding: 18px 18px 0; }
.cp-cats { display: flex; gap: 8px; margin-bottom: 20px; }
.cp-cats span { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #E9E5F4; border-radius: 99px; padding: 7px 12px; font-size: 12.5px; font-weight: 500; color: #4A4060; }
.cp-cats .ic { color: #6B4FD6; font-size: 14px; }
.cp-h6 { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.cp-entrega { display: flex; gap: 12px; background: #fff; border-radius: 16px; padding: 14px; margin-bottom: 10px; font-size: 13px; box-shadow: 0 2px 6px rgba(34,28,51,.05); }
.cp-entrega > .ic { font-size: 20px; color: #6B4FD6; background: #EFEAFB; width: 38px; height: 38px; padding: 9px; border-radius: 11px; }
.cp-entrega div { flex: 1; }
.cp-entrega b { display: block; font-weight: 600; }
.cp-entrega small { color: #8A849B; font-size: 12px; }
.cp-trilho { display: block; height: 6px; border-radius: 3px; background: #EFEAFB; margin-top: 8px; overflow: hidden; }
.cp-trilho i { display: block; height: 100%; background: #6B4FD6; border-radius: 3px; }
.cp-res { display: none; }
.cp-res.on { display: block; animation: entra .4s ease-out; }
.cp-prod { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 16px; padding: 12px; margin-bottom: 10px; font-size: 13px; border: 2px solid transparent; transition: border-color .3s; box-shadow: 0 2px 6px rgba(34,28,51,.05); }
.cp-prod.marcado { border-color: #6B4FD6; }
.cp-img { width: 52px; height: 52px; border-radius: 12px; background: #F3F0FA; display: grid; place-items: center; flex: 0 0 auto; }
.cp-img svg { width: 40px; height: 40px; }
.cp-img.p { width: 44px; height: 44px; }
.cp-img.p svg { width: 32px; height: 32px; }
.cp-prod > div:nth-child(2) { flex: 1; line-height: 1.3; }
.cp-prod b { display: block; font-weight: 600; font-size: 13.5px; }
.cp-prod small { color: #8A849B; font-size: 11.5px; display: block; }
.cp-prod em { font-style: normal; font-size: 12px; font-weight: 600; color: #6B4FD6; }
.cp-qtd { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.cp-qtd span { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; }
.cp-qtd .p { background: #6B4FD6; color: #fff; }
.cp-qtd .m { display: none; }
.cp-qtd b { font-size: 13px; font-variant-numeric: tabular-nums; order: -1; min-height: 16px; }
.cp-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; background: #fff; border-top: 1px solid #EEEAF6; display: flex; justify-content: space-around; padding-top: 10px; font-size: 11px; color: #A9A3B8; }
.cp-tabbar span { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cp-tabbar .ic { font-size: 21px; }
.cp-tabbar span.on { color: #6B4FD6; font-weight: 600; }
.cp-badge { position: absolute; top: -5px; right: 2px; min-width: 18px; height: 18px; border-radius: 9px; background: #F1416C; color: #fff; font: 700 10.5px Inter, sans-serif; display: grid; place-items: center; transform: scale(0); transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.cp-badge.pula { transform: scale(1); }
.cp-item { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 14px; padding: 9px 12px; margin-bottom: 8px; font-size: 13px; }
.cp-item b { display: block; font-weight: 600; }
.cp-item small { color: #8A849B; font-size: 12px; }
.cp-campo { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-top: 1px solid #E9E5F4; font-size: 13px; }
.cp-campo:first-of-type { margin-top: 6px; }
.cp-campo .ic { font-size: 19px; color: #6B4FD6; }
.cp-campo small { display: block; color: #8A849B; font-size: 11.5px; }
.cp-campo b { font-weight: 600; }
.cp-cbotao { position: absolute; left: 18px; right: 18px; bottom: 26px; height: 52px; border-radius: 16px; background: #6B4FD6; color: #fff; font-size: 15px; font-weight: 600; display: grid; place-items: center; box-shadow: 0 10px 22px rgba(107,79,214,.35); }
.cp-sucesso { padding: 120px 24px 0; text-align: center; }
.cp-ok-ic.grande { width: 82px; height: 82px; font-size: 40px; animation: cp-pop .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes cp-pop { from { transform: scale(.4); } }
.cp-sucesso h4 { font-size: 22px; font-weight: 700; margin-top: 18px; letter-spacing: -.02em; }
.cp-sucesso > p { font-size: 13.5px; color: #8A849B; margin-top: 4px; }
.cp-passos { display: grid; grid-template-columns: repeat(4, 1fr); margin: 34px 0 24px; position: relative; }
.cp-passos::before { content: ""; position: absolute; left: 12%; right: 12%; top: 19px; height: 3px; background: #E4DFF0; }
.cp-passos div { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 11px; color: #A9A3B8; }
.cp-passos .ic { width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: #fff; border: 2px solid #E4DFF0; transition: .4s; }
.cp-passos .ok { color: #221C33; font-weight: 600; }
.cp-passos .ok .ic { background: #6B4FD6; border-color: #6B4FD6; color: #fff; }
.cp-prev { font-size: 13px; color: #A9A3B8; background: #fff; border-radius: 14px; padding: 14px; border: 1px dashed #E4DFF0; transition: .4s; }
.cp-prev.on { border: 1px solid #DCD3F7; color: #6E6880; }
.cp-prev b { display: block; color: #221C33; font-size: 16px; }