:root {
  --azul: #123b8f;
  --azul-2: #1d4fb8;
  --azul-claro: #e8effc;
  --acento: #2f80ed;
  --verde: #1e8e3e;
  --verde-claro: #e6f4ea;
  --laranja: #c26401;
  --laranja-claro: #fff4e5;
  --vermelho: #c62828;
  --vermelho-claro: #fdecea;
  --fundo: #f1f4f9;
  --cartao: #ffffff;
  --linha: #e3e8f0;
  --texto: #0e1a33;
  --kraft: #b98a4e;
  --kraft-claro: #f3e7d6;
  --texto-2: #4b5563;
  --texto-3: #8a94a6;
  --raio: 14px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .06);
  --topo: env(safe-area-inset-top, 0px);
  --base: env(safe-area-inset-bottom, 0px);
  --num: 'Barlow Semi Condensed', 'Archivo', system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #dfe5ee;
  color: var(--texto);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
input, textarea, select { font-size: 16px; } /* evita zoom automático no iPhone */

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100%;
  background: var(--fundo);
  position: relative;
  box-shadow: 0 0 40px rgba(16, 24, 40, .12);
}
@media (max-width: 480px) { #app { box-shadow: none; } body { background: var(--fundo); } }

/* ---------------------------------------------------------------- cabeçalho */
.cab {
  position: sticky; top: 0; z-index: 20;
  background: var(--azul); color: #fff;
  padding: calc(var(--topo) + 12px) 16px 14px;
  display: flex; align-items: center; gap: 12px;
}
.cab h1 { font-size: 18px; margin: 0; font-weight: 700; letter-spacing: -.01em; }
.cab .sub { font-size: 12.5px; opacity: .75; margin-top: 2px; }
.cab .flex1 { flex: 1; min-width: 0; }
.cab .voltar {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.14);
  display: grid; place-items: center; color: #fff; flex: none;
}
.cab .acao { color: #fff; font-weight: 600; font-size: 14px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.14); }
.progresso { display: flex; gap: 5px; margin-top: 12px; }
.progresso i { flex: 1; height: 4px; border-radius: 4px; background: rgba(255,255,255,.25); }
.progresso i.on { background: #fff; }
.cab.claro { background: var(--fundo); color: var(--texto); }
.marca { display: flex; align-items: center; gap: 10px; }
.marca svg { height: 26px; width: auto; }
.marca b { font-size: 16px; letter-spacing: .32em; font-weight: 600; }
.ao-vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; background: rgba(255,255,255,.14); padding: 6px 10px; border-radius: 99px; }
.ao-vivo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 3px rgba(74,222,128,.25); }

/* ---------------------------------------------------------------- conteúdo */
.tela { padding: 14px 14px calc(96px + var(--base)); }
.tela.sem-abas { padding-bottom: calc(110px + var(--base)); }
.cartao { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 14px; margin-bottom: 12px; }
.cartao.sem-pad { padding: 0; overflow: hidden; }
.titulo-sec { font-size: 15px; font-weight: 700; color: var(--texto); margin: 22px 4px 10px; }
.cartao h2 { font-size: 15px; margin: 0 0 2px; font-weight: 700; }
.cartao .leg { font-size: 12.5px; color: var(--texto-3); }
.grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.grade2 .cartao { margin: 0; }
.kpi .rot { font-size: 12px; color: var(--texto-3); font-weight: 500; }
.kpi .val { font-family: var(--num); font-size: 26px; font-weight: 700; margin-top: 2px; letter-spacing: -.01em; }
.kpi .det { font-size: 11.5px; color: var(--texto-3); margin-top: 2px; }
.kpi .det.bom { color: var(--verde); }
.verde { color: var(--verde) !important; }
.laranja { color: var(--laranja) !important; }
.vermelho { color: var(--vermelho) !important; }
.num { font-family: var(--num); font-weight: 700; }

.linha { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--linha); font-size: 13.5px; }
.linha:first-child { border-top: 0; }
.linha .r { color: var(--texto-2); }
.linha b { font-weight: 700; }

.lista .item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--linha); width: 100%; text-align: left; }
.lista .item:first-child { border-top: 0; }
.lista .item:active { background: #f6f8fc; }
.miniatura {
  width: 46px; height: 46px; border-radius: 10px; flex: none; display: grid; place-items: center;
  font-size: 24px; background: var(--azul-claro); overflow: hidden;
}
.miniatura img { width: 100%; height: 100%; object-fit: cover; }
.item .meio { flex: 1; min-width: 0; }
.item .nome { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .info { font-size: 12px; color: var(--texto-3); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .dir { text-align: right; flex: none; }
.item .preco { font-family: var(--num); font-weight: 700; font-size: 16px; }

.etq { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 99px; background: var(--azul-claro); color: var(--azul); white-space: nowrap; }
.etq.verde { background: var(--verde-claro); color: var(--verde); }
.etq.laranja { background: var(--laranja-claro); color: var(--laranja); }
.etq.cinza { background: #eef1f5; color: var(--texto-2); }
.etq.vermelho { background: var(--vermelho-claro); color: var(--vermelho); }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  height: 52px; border-radius: 14px; background: var(--azul); color: #fff; font-weight: 700; font-size: 16px;
}
.btn:active { transform: scale(.985); }
.btn[disabled] { opacity: .45; }
.btn.sec { background: #fff; color: var(--azul); border: 1.5px solid #c9d6ee; }
.btn.verde { background: var(--verde); color: #fff !important; }
.btn.peq { height: 40px; font-size: 14px; border-radius: 11px; }
.rodape-fixo {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; max-width: 480px; margin: 0 auto;
  padding: 12px 14px calc(12px + var(--base)); background: linear-gradient(to top, var(--fundo) 70%, rgba(242,245,250,0));
}
.rodape-fixo .btn + .btn { margin-top: 10px; }

.segmentado { display: flex; background: #eef1f6; border-radius: 12px; padding: 4px; gap: 4px; }
.segmentado button { flex: 1; height: 38px; border-radius: 9px; font-size: 14px; font-weight: 600; color: var(--texto-2); }
.segmentado button.on { background: #fff; color: var(--azul); box-shadow: var(--sombra); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 34px; padding: 0 14px; border-radius: 99px; background: #fff; border: 1px solid var(--linha); font-size: 13.5px; font-weight: 600; color: var(--texto-2); }
.chip.on { background: var(--azul); border-color: var(--azul); color: #fff; }

.campo { display: block; margin-bottom: 12px; }
.campo span { display: block; font-size: 12.5px; color: var(--texto-3); font-weight: 600; margin-bottom: 6px; }
.campo input, .campo textarea, .campo select {
  width: 100%; border: 1.5px solid var(--linha); border-radius: 12px; padding: 12px 13px; background: #fff; outline: none;
}
.campo input:focus, .campo textarea:focus, .campo select:focus { border-color: var(--acento); }
.campo textarea { resize: none; line-height: 1.45; }
.busca { position: relative; margin-bottom: 12px; }
.busca input { width: 100%; height: 46px; border-radius: 12px; border: 1.5px solid var(--linha); padding: 0 14px 0 40px; background: #fff; outline: none; }
.busca svg { position: absolute; left: 13px; top: 14px; color: var(--texto-3); }

/* ---------------------------------------------------------------- abas */
.abas {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; max-width: 480px; margin: 0 auto;
  display: flex; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--linha); padding: 6px 4px calc(6px + var(--base));
}
.abas a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; font-size: 10.5px; font-weight: 600; color: var(--texto-3); text-decoration: none; }
.abas a.on { color: var(--azul); }
.abas a.central span.bola { width: 50px; height: 50px; margin-top: -22px; border-radius: 50%; background: var(--azul); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 16px rgba(18,59,143,.35); border: 4px solid var(--fundo); }

/* ---------------------------------------------------------------- login */
.login { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: calc(var(--topo) + 40px) 24px calc(var(--base) + 24px); background: radial-gradient(120% 70% at 50% 0%, #1d4fb8 0%, #123b8f 55%, #0d2c6c 100%); color: #fff; }
.login .marca { justify-content: center; margin-bottom: 36px; }
.login .marca svg { height: 40px; }
.login .marca b { font-size: 22px; }
.login h1 { font-size: 26px; margin: 0 0 6px; text-align: center; letter-spacing: -.02em; }
.login p.sub { text-align: center; opacity: .8; margin: 0 0 30px; font-size: 14.5px; }
.login form { background: #fff; color: var(--texto); border-radius: 20px; padding: 20px; box-shadow: 0 20px 40px rgba(0,0,0,.18); }
.login .erro { color: var(--vermelho); font-size: 13.5px; margin: -4px 0 12px; min-height: 18px; }
.login .dica { margin-top: auto; padding-top: 24px; text-align: center; font-size: 12.5px; opacity: .75; line-height: 1.5; }

/* ---------------------------------------------------------------- câmera */
.camera { position: fixed; inset: 0; z-index: 50; background: #0b1220; color: #fff; display: flex; flex-direction: column; max-width: 480px; margin: 0 auto; }
.camera .visor { position: relative; flex: 1; overflow: hidden; background: #111827; }
.camera video, .camera .visor > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.camera .topo { position: absolute; top: 0; left: 0; right: 0; z-index: 3; padding: calc(var(--topo) + 10px) 14px 30px; display: flex; align-items: center; gap: 10px; background: linear-gradient(rgba(0,0,0,.55), transparent); }
.camera .topo .voltar { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18); display: grid; place-items: center; color: #fff; }
.camera .topo .contador { margin-left: auto; text-align: right; background: rgba(0,0,0,.35); border-radius: 10px; padding: 6px 10px; }
.camera .topo .contador b { font-family: var(--num); font-size: 20px; display: block; line-height: 1; }
.camera .topo .contador small { font-size: 10.5px; opacity: .8; }
.moldura { position: absolute; inset: 17% 12% 20%; z-index: 2; pointer-events: none; }
.moldura i { position: absolute; width: 34px; height: 34px; border: 4px solid #fff; }
.moldura i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.moldura i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.moldura i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.moldura i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.moldura.codigo { inset: 36% 10% 36%; }
.moldura.codigo::after { content: ''; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; background: #ef4444; box-shadow: 0 0 10px #ef4444; animation: varre 1.6s ease-in-out infinite; }
@keyframes varre { 0%,100% { transform: translateY(-30px); } 50% { transform: translateY(30px); } }
.camera .dica-visor { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 3; background: rgba(0,0,0,.6); padding: 8px 14px; border-radius: 99px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.camera .sem-camera { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 30px; color: #cbd5e1; font-size: 14px; line-height: 1.5; }
.camera .controles { padding: 14px 14px calc(16px + var(--base)); background: #0b1220; }
.camera .segmentado { background: #1f2937; max-width: 300px; margin: 0 auto 14px; }
.camera .segmentado button { color: #cbd5e1; }
.camera .segmentado button.on { background: #fff; color: #111827; }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.slot { position: relative; height: 74px; border-radius: 12px; border: 1.5px dashed #475569; color: #94a3b8; font-size: 11.5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; overflow: hidden; }
.slot.on { border-color: #fff; color: #fff; }
.slot.feito { border: 2px solid #22c55e; }
.slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot .rot { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.6); color: #fff; font-weight: 600; padding: 3px 0; text-align: center; }
.slot .ok { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: #22c55e; display: grid; place-items: center; font-size: 11px; color: #fff; }
.slot .mais { font-size: 18px; line-height: 1; }
.disparo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.disparo .lateral { font-size: 12.5px; font-weight: 600; color: #e2e8f0; text-align: center; line-height: 1.25; padding: 8px; }
.disparo .lateral[disabled] { opacity: .35; }
.disparo .lateral.forte { color: #fff; background: var(--acento); border-radius: 12px; }
.obturador { width: 72px; height: 72px; border-radius: 50%; border: 4px solid #fff; padding: 4px; }
.obturador span { display: block; width: 100%; height: 100%; border-radius: 50%; background: #fff; }
.obturador:active span { transform: scale(.92); }
.flash { position: absolute; inset: 0; background: #fff; z-index: 5; animation: flash .25s ease-out forwards; pointer-events: none; }
@keyframes flash { from { opacity: .85; } to { opacity: 0; } }
.digitar { display: flex; gap: 8px; }
.digitar input { flex: 1; height: 46px; border-radius: 12px; border: 0; padding: 0 14px; background: #1f2937; color: #fff; }
.digitar button { height: 46px; padding: 0 16px; border-radius: 12px; background: #fff; color: #111827; font-weight: 700; }

/* ---------------------------------------------------------------- análise */
.analise { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 20px; }
.analise .foto-grande { width: 150px; height: 150px; border-radius: 22px; overflow: hidden; box-shadow: 0 10px 30px rgba(18,59,143,.2); margin-bottom: 26px; position: relative; }
.analise .foto-grande img { width: 100%; height: 100%; object-fit: cover; }
.analise .foto-grande::after { content: ''; position: absolute; left: 0; right: 0; height: 40%; background: linear-gradient(transparent, rgba(47,128,237,.45), transparent); animation: scan 1.4s linear infinite; }
@keyframes scan { from { top: -40%; } to { top: 100%; } }
.passos { text-align: left; width: 100%; max-width: 300px; }
.passo { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 14.5px; color: var(--texto-3); }
.passo .ic { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #cbd5e1; flex: none; display: grid; place-items: center; font-size: 12px; }
.passo.ativo { color: var(--texto); font-weight: 600; }
.passo.ativo .ic { border-color: var(--acento); border-top-color: transparent; animation: gira .8s linear infinite; }
.passo.feito { color: var(--texto); }
.passo.feito .ic { border-color: var(--verde); background: var(--verde); color: #fff; }
@keyframes gira { to { transform: rotate(360deg); } }

.produto-topo { display: flex; gap: 12px; align-items: center; }
.produto-topo .miniatura { width: 74px; height: 74px; border-radius: 14px; font-size: 36px; }
.produto-topo textarea { border: 0; padding: 0; width: 100%; font-weight: 700; font-size: 16px; line-height: 1.3; resize: none; outline: none; background: transparent; }
.ia-selo { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--azul); background: var(--azul-claro); border-radius: 99px; padding: 3px 9px; margin-bottom: 5px; }
.oferta { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-top: 1px solid var(--linha); text-decoration: none; color: inherit; }
.oferta .loja { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.oferta .meio { flex: 1; min-width: 0; }
.oferta .t1 { font-size: 13.5px; font-weight: 600; }
.oferta .t2 { font-size: 11.5px; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.oferta .p { font-family: var(--num); font-weight: 700; font-size: 17px; }
.oferta.similar { opacity: .6; }
.custo-ia { font-size: 11.5px; color: var(--texto-3); text-align: center; margin: 4px 0 8px; }

.preco-grande { text-align: center; padding: 18px 10px 14px; }
.preco-grande .rot { font-size: 12.5px; color: var(--texto-3); }
.preco-grande .valor { font-family: var(--num); font-weight: 700; font-size: 64px; color: var(--azul); line-height: 1.05; letter-spacing: -.02em; }
.preco-grande .valor sup { font-size: 22px; vertical-align: 26px; margin-right: 2px; }
.preco-grande .abaixo { font-size: 13px; font-weight: 600; color: var(--verde); margin-top: 4px; }
.ajuste { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 14px; }
.ajuste .mm { width: 46px; height: 42px; border-radius: 11px; border: 1.5px solid #c9d6ee; color: var(--azul); font-size: 22px; font-weight: 500; }
.ajuste .op { height: 42px; padding: 0 12px; border-radius: 11px; background: #eef2f8; font-family: var(--num); font-weight: 700; font-size: 16px; color: var(--texto-2); }
.ajuste .op.on { background: var(--azul); color: #fff; }
.local-box { display: flex; align-items: center; justify-content: space-between; }
.local-box .cod { font-family: var(--num); font-size: 24px; font-weight: 700; background: #eef2f8; border-radius: 10px; padding: 6px 14px; }

/* ---------------------------------------------------------------- etiqueta */
.etiqueta { background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(16,24,40,.12); padding: 10px 12px 6px; width: 100%; max-width: 300px; margin: 0 auto; color: #000; }
.etiqueta .n { font-size: 11.5px; font-weight: 700; line-height: 1.2; max-height: 2.4em; overflow: hidden; }
.etiqueta .meio { display: flex; justify-content: space-between; align-items: flex-end; margin: 4px 0 2px; }
.etiqueta .v { font-family: var(--num); font-weight: 700; font-size: 34px; line-height: 1; }
.etiqueta .v sup { font-size: 12px; vertical-align: 15px; }
.etiqueta .d { text-align: right; font-size: 9.5px; font-weight: 600; line-height: 1.3; }
.etiqueta svg { width: 100%; height: 56px; display: block; }
.sucesso { text-align: center; padding: 26px 10px 8px; }
.sucesso .ok { width: 70px; height: 70px; border-radius: 50%; background: var(--verde-claro); color: var(--verde); display: grid; place-items: center; margin: 0 auto 14px; }
.sucesso h2 { font-size: 21px; margin: 0 0 4px; }
.sucesso p { color: var(--texto-2); font-size: 13.5px; margin: 0; }
.fundo-etq { background: #eef2f6; border-radius: 16px; padding: 18px 14px; margin: 18px 0 8px; }

/* ---------------------------------------------------------------- gráficos */
.barras { display: flex; align-items: flex-end; gap: 4px; height: 120px; margin-top: 12px; }
.barras div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.barras i { width: 100%; background: #bfd0f0; border-radius: 4px 4px 1px 1px; min-height: 2px; }
.barras div.hoje i { background: var(--azul); }
.barras small { font-size: 9.5px; color: var(--texto-3); }
.hbar { margin-top: 10px; }
.hbar .l { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.hbar .t { height: 7px; border-radius: 7px; background: #eef2f8; overflow: hidden; }
.hbar .t i { display: block; height: 100%; background: var(--acento); border-radius: 7px; }
.aviso-parado { background: var(--laranja-claro); border: 1px solid #f9d9a8; }

/* ---------------------------------------------------------------- PDV */
.leitor { display: flex; gap: 8px; }
.leitor input { flex: 1; height: 50px; border-radius: 12px; border: 1.5px solid var(--acento); padding: 0 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; outline: none; }
.leitor button { width: 50px; height: 50px; border-radius: 12px; background: var(--azul); color: #fff; display: grid; place-items: center; }
.total-venda { display: flex; justify-content: space-between; align-items: baseline; }
.total-venda .num { font-size: 34px; color: var(--azul); }
.pagamentos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.pagamentos button { height: 46px; border-radius: 12px; border: 1.5px solid var(--linha); background: #fff; font-weight: 600; font-size: 14px; }
.pagamentos button.on { border-color: var(--azul); background: var(--azul-claro); color: var(--azul); }
.remover { width: 30px; height: 30px; border-radius: 50%; color: var(--texto-3); font-size: 18px; }

/* ---------------------------------------------------------------- folha */
.veu { position: fixed; inset: 0; z-index: 60; background: rgba(15,23,42,.45); display: flex; align-items: flex-end; justify-content: center; animation: aparece .18s ease-out; }
.folha { width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; background: var(--fundo); border-radius: 20px 20px 0 0; padding: 8px 14px calc(18px + var(--base)); animation: sobe .22s ease-out; }
.folha .puxador { width: 40px; height: 5px; border-radius: 5px; background: #cbd5e1; margin: 4px auto 12px; }
.folha h3 { font-size: 18px; margin: 0 0 12px; }
@keyframes aparece { from { opacity: 0; } }
@keyframes sobe { from { transform: translateY(40px); opacity: .5; } }

#aviso { position: fixed; left: 50%; top: calc(var(--topo) + 14px); transform: translate(-50%, -140%); z-index: 90; background: #111827; color: #fff; padding: 11px 16px; border-radius: 12px; font-size: 14px; font-weight: 600; transition: transform .25s; max-width: 92vw; box-shadow: 0 10px 30px rgba(0,0,0,.25); }
#aviso.on { transform: translate(-50%, 0); }
#aviso.erro { background: var(--vermelho); }
.vazio { text-align: center; color: var(--texto-3); padding: 30px 10px; font-size: 14px; }
.carregando { display: grid; place-items: center; padding: 50px; }
.carregando::after { content: ''; width: 28px; height: 28px; border-radius: 50%; border: 3px solid #cbd5e1; border-top-color: var(--azul); animation: gira .8s linear infinite; }
.menu .item { font-weight: 600; }
.menu .item .ic { width: 38px; height: 38px; border-radius: 10px; background: var(--azul-claro); color: var(--azul); display: grid; place-items: center; flex: none; }
.slider { width: 100%; accent-color: var(--azul); }
.instalar { background: linear-gradient(135deg, #123b8f, #1d4fb8); color: #fff; }
.instalar .leg { color: rgba(255,255,255,.8); }
.pulso { animation: pulso 1.2s ease-out; }
@keyframes pulso { 0% { background: #fff7d1; } 100% { background: transparent; } }

/* ---------------------------------------------------------------- impressão da etiqueta */
#imprimir { display: none; }
@media print {
  @page { size: 50mm 30mm; margin: 0; }
  body { background: #fff; }
  #app, #aviso { display: none !important; }
  #imprimir { display: block; }
  #imprimir .etiqueta { box-shadow: none; border-radius: 0; width: 50mm; height: 30mm; max-width: none; padding: 1.5mm 2mm 0; }
  #imprimir .etiqueta .n { font-size: 7pt; }
  #imprimir .etiqueta .v { font-size: 17pt; }
  #imprimir .etiqueta .v sup { font-size: 7pt; vertical-align: 8pt; }
  #imprimir .etiqueta .d { font-size: 5.5pt; }
  #imprimir .etiqueta svg { height: 11mm; }
}

/* ---------------------------------------------------------------- identidade: pallet, faixa de vendas, etiqueta */
.pallet-tag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--num); font-weight: 700; font-size: 13.5px; letter-spacing: .02em;
  color: #6b4a1f; background: var(--kraft-claro); border: 1px solid #e6d2b3; border-radius: 6px; padding: 1px 7px; }
.pallet-tag::before { content: ''; width: 9px; height: 7px; border: 1.5px solid var(--kraft); border-top-width: 3px; border-radius: 1px; }
.faixa { background: var(--azul); color: #fff; margin: -14px -14px 14px; padding: 4px 18px 22px; border-radius: 0 0 22px 22px; }
.faixa .rot { font-size: 13px; opacity: .78; }
.faixa .grande { font-family: var(--num); font-weight: 700; font-size: 52px; line-height: 1; letter-spacing: -.015em; margin: 4px 0 6px; }
.faixa .var { font-size: 13px; font-weight: 600; color: #a7f3c0; }
.faixa .var.baixo { color: #fecaca; }
.faixa .miudos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16); }
.faixa .miudos b { display: block; font-family: var(--num); font-size: 22px; font-weight: 700; }
.faixa .miudos span { font-size: 11.5px; opacity: .75; }
.faixa .miudos .aberto b { color: #a7f3c0; }

/* etiqueta térmica: papel branco recortado sobre o liner do rolo */
.fundo-etq { background: repeating-linear-gradient(90deg, #efe6d6 0 2px, #f5eee2 2px 6px); border-radius: 16px; padding: 22px 18px; position: relative; }
.fundo-etq::before, .fundo-etq::after { content: ''; position: absolute; left: 50%; width: 46%; height: 2px; transform: translateX(-50%); background: rgba(120, 90, 50, .18); }
.fundo-etq::before { top: 10px; } .fundo-etq::after { bottom: 10px; }
.etiqueta { border-radius: 10px; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 18px rgba(80, 55, 20, .16); }
.etiqueta .n { font-family: 'Archivo', sans-serif; }

:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }

.miniatura.avatar { border-radius: 50%; font-size: 14px; font-weight: 700; color: var(--azul); }
.faixa.solta { margin: 0 0 12px !important; border-radius: 22px; padding-top: 18px; }
.marcar { width: 22px; height: 22px; flex: none; accent-color: var(--azul); }