/* gm-flow.css — réplicas das telas reais para as cenas do gm-flow.js (usa também gm-sync.css).
   Prefixos: gf- (palco/cartões), wb- (gestão web), rpm- (PDV compacto), pm- (mapa de mesas),
   ga- (GM Atendimento), go- (GranMoney Go). */
.gf [data-node] { position: absolute; z-index: 2; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
/* O hub compacto cabe entre o PDV e as janelas, sem cobrir nenhum monitor. */
.gf .gms-server { width: clamp(146px, 15vw, 188px); }
.gf .gms-server b { font-size: clamp(11px, 1.05vw, 14px); white-space: nowrap; }
.gf-flash { animation: gf-flash 1.3s ease; } @keyframes gf-flash { 0% { background: #fff1cc; } }

/* cartões simples (fornecedor, SEFAZ, impressora) */
.gf-card { background: rgba(23,31,41,.94); border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 12px 14px; color: #c7d0da; font-family: Poppins, system-ui, sans-serif; min-width: 180px; }
.gf-card .gf-ico { font-size: 22px; color: #facc15; } .gf-card h4 { margin: 4px 0 0; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8696a8; font-weight: 600; }
.gf-big { display: block; color: #fff; font-weight: 700; font-size: 14px; margin-top: 2px; } .gf-sub { font-size: 12px; color: #ffd66b; }
.sefaz-ok { display: inline-block; margin-top: 6px; font-size: 11px; color: #6ee7a0; border-radius: 6px; padding: 1px 6px; }

/* ===== gestão web: cabeçalho real (barra escura + menu laranja) ===== */
.wb { width: 720px; background: #f3f3f3; font-family: Arial, Helvetica, sans-serif; color: #333; }
.wb-top { display: flex; align-items: center; gap: 9px; background: #2f3237; color: #e8e8e8; padding: 7px 10px; font-size: 13px; font-weight: 700; }
.wb-c { width: 22px; height: 22px; border-radius: 5px; background: #f07a1a; color: #fff; display: grid; place-items: center; font-size: 13px; }
.wb-user { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; background: #3b3f45; padding: 3px 8px 3px 3px; border-radius: 6px; }
.wb-user i { width: 18px; height: 18px; border-radius: 50%; background: #f07a1a; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 8px; }
.wb-menu { display: flex; gap: 14px; background: linear-gradient(#f39234, #ec7a1e); color: #fff; padding: 6px 12px; font-size: 11px; }
.wb-menu .r { margin-left: auto; } .wb-menu .on { text-decoration: underline; text-underline-offset: 3px; }
.wb-body { padding: 8px; }
.wb-panel { background: #fff; border: 1px solid #ddd; border-radius: 3px; padding: 8px 9px; position: relative; }
.wb-head { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #ccc; padding-bottom: 6px; }
.wb-head h5 { margin: 0; font-size: 12.5px; font-weight: 700; flex: 1; }
.wb-btn { font-size: 9.5px; border: 1px solid #ccc; background: #f5f5f5; border-radius: 3px; padding: 3px 6px; white-space: nowrap; transition: transform .15s; }
.wb-btn--b { background: #dfeefe; border-color: #8fc1f4; color: #1d5fa8; } .wb-btn--g { background: #e5f6e5; border-color: #9fd59f; color: #2b7a2b; }
.wb-btn--r { background: #fde3e3; border-color: #f2a5a5; color: #c62828; } .wb-btn--y { background: #fff6d8; border-color: #f3d36e; color: #e2861e; }
.wb-press { transform: scale(.94); box-shadow: 0 0 0 3px rgba(29,95,168,.25); }
.wb-sum { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; color: #777; padding: 6px 2px; border-radius: 3px; }
.wb-sum b { color: #333; }
.wb-g { color: #2e9a2e; font-weight: 700; } .wb-r { color: #c62828; font-weight: 700; } .wb-b { font-weight: 700; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-th, .wb-row { display: grid; gap: 6px; padding: 5px 7px; font-size: 10.5px; align-items: center; }
.wb-th { background: #7a7a7a; color: #fff; }
.wb-row { border-bottom: 1px solid #e6e6e6; background: #fff; transition: background .4s; }
.wb-row:nth-child(even) { background: #fafafa; }
.wb-n { text-align: right; font-weight: 700; } .wb-low .wb-n { color: #c62828; } .wb-low { background: #fff4f2 !important; }
.wb-new { animation: wb-new 2.2s ease; }
@keyframes wb-new { 0% { background: #fff1cc; transform: translateY(-8px); opacity: 0; } 15% { opacity: 1; transform: none; } 60% { background: #fff6dc; } }
.wb-up { animation: wb-up 1.6s ease; } @keyframes wb-up { 0%, 40% { background: #e3f8e6; } }
.wb-down { animation: wb-down 1.6s ease; } @keyframes wb-down { 0%, 40% { background: #f1ecff; } }
/* colunas por tabela */
.est .wb-th, .est .wb-row { grid-template-columns: 34px 1fr 64px 60px; }
.fin .wb-th, .fin .wb-row, .cmp .wb-th, .cmp .wb-row { grid-template-columns: 44px 70px 1fr 74px; }
.fin-sum, .cmp-sum { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; font-size: 10.5px; padding: 6px 6px; background: #fafafa; border: 1px solid #eee; margin: 6px 0; }
.dre .wb-row, .dre .wb-th { grid-template-columns: 1fr 90px; } .dre .wb-row span:last-child { text-align: right; }
.dre h6 { margin: 6px 0 4px; font-size: 12px; color: #1f8d1f; }
.dre .dre-totrow { background: #e9e9e9 !important; font-style: italic; font-weight: 700; }
/* dropdown de Notas Fiscais Recebidas */
.cmp-wrap { position: relative; }
.cmp-menu { position: absolute; right: 120px; top: 30px; z-index: 3; width: 220px; background: #fff; border-radius: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.2); border: 1px solid #e3e3e3; font-size: 11px;
  opacity: 0; transform: translateY(-4px); transition: opacity .2s, transform .25s; pointer-events: none; }
.cmp-menu.wb-open { opacity: 1; transform: none; }
.cmp-menu div { padding: 9px 12px; } .cmp-menu div + div { border-top: 1px solid #eee; }
.cmp-opt.wb-hover { background: #eef5ff; color: #1d5fa8; font-weight: 700; }

/* ===== PDV compacto (réplica do PDV 2.0) ===== */
.rpm { width: 520px; height: 300px; background: #f3f3f1; font-family: Inter, -apple-system, "Segoe UI", system-ui, sans-serif; color: #1d2939; display: grid; grid-template-rows: 30px 1fr 36px; gap: 6px; padding-bottom: 6px; position: relative; }
.rpm .rp-top { font-size: 11px; }
.rpm-main { margin: 0 6px; background: #fff; border: 1px solid #e3e3e0; border-radius: 4px; padding: 8px; display: flex; flex-direction: column; min-height: 0; }
.rpm-cart { flex: 1; min-height: 0; overflow: hidden; display: grid; align-content: start; gap: 4px; }
.rpm-item { display: grid; grid-template-columns: 38px 1fr auto; gap: 8px; align-items: center; background: #fafaf8; border: 1px solid #ededeb; border-radius: 4px; padding: 5px 7px; font-size: 11.5px; animation: rp-in .35s ease; }
.rpm-q { background: #f0f0ee; border-radius: 3px; text-align: center; color: #ee6b1f; font-size: 11px; padding: 2px 0; }
.rpm-item em { font-style: normal; font-weight: 700; color: #e4571a; }
.rpm-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #ececea; padding-top: 6px; font-size: 11px; color: #555; }
.rpm-total { font-size: 21px; font-weight: 800; color: #1f9d55; font-variant-numeric: tabular-nums; }
.rpm .rp-bottom { margin: 0 6px; }
.rpm-done { position: absolute; left: 6px; right: 6px; top: 36px; bottom: 48px; background: #fff; border: 1px solid #e3e3e0; border-radius: 4px; display: grid; place-content: center; text-align: center;
  opacity: 0; transform: scale(.97); transition: opacity .3s, transform .4s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
.rpm-done.rp-show { opacity: 1; transform: none; }
.rpm-done b { font-size: 17px; } .rpm-done__no { display: block; font-size: 10.5px; color: #6b7785; margin: 2px 0 4px; } .rpm-done__v { font-size: 16px; font-weight: 800; color: #1f9d55; }

/* ===== PDV: mapa de mesas ===== */
.pm { width: 720px; height: 380px; background: #f3f3f1; font-family: Inter, -apple-system, "Segoe UI", system-ui, sans-serif; color: #1d2939; display: grid; grid-template-rows: 34px 1fr 40px; gap: 7px; padding-bottom: 7px; }
.pm-main { margin: 0 7px; display: grid; grid-template-columns: 1fr 190px; gap: 7px; min-height: 0; }
.pm-left, .pm-right { background: #fff; border: 1px solid #e3e3e0; border-radius: 4px; padding: 10px; }
.pm-left h6 { margin: 0 0 8px; font-size: 13px; font-weight: 800; }
.pm-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.pm-card { position: relative; height: 72px; border: 1px solid #e6e6e3; border-left: 3px solid #f26b1d; border-radius: 4px; padding: 6px 8px; background: #fff; }
.pm-card b { font-size: 20px; font-weight: 800; } .pm-card i { position: absolute; right: 6px; top: 7px; font: 700 8px Inter, sans-serif; color: #b45309; background: #fde7d4; padding: 2px 6px; border-radius: 999px; font-style: normal; }
.pm-card small { position: absolute; left: 8px; bottom: 7px; font-size: 8.5px; color: #8792a0; } .pm-card em { position: absolute; right: 8px; bottom: 6px; font-style: normal; font-weight: 800; font-size: 12px; }
.pm-livre { border: 1.5px dashed #d6d6d2; border-left-width: 1.5px; background: #f8f8f6; } .pm-livre b { color: #9aa3ad; } .pm-livre i { color: #8792a0; background: #fff; border: 1px solid #ddd; }
.pm-new { animation: pm-new 1.6s ease; } @keyframes pm-new { 0%, 30% { box-shadow: 0 0 0 3px #f26b1d; transform: scale(1.04); } }
.pm-pay { animation: pm-pay 1s ease; } @keyframes pm-pay { 0%, 60% { box-shadow: 0 0 0 3px #1f9d55; } }
.pm-right { display: grid; align-content: center; justify-items: center; gap: 6px; text-align: center; font-size: 11px; color: #6b7785; }
.pm-right b { color: #1d2939; font-size: 13px; }

/* ===== celulares ===== */
.gf-phone { width: 236px; border-radius: 30px; background: #1b1d22; padding: 10px; box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.1); font-family: Roboto, Arial, sans-serif; }
.gf-phone__scr { position: relative; height: 440px; border-radius: 20px; overflow: hidden; background: #fff; }
.gf-phone__st { display: flex; justify-content: space-between; padding: 5px 12px; background: #e8701c; color: #fff; font-size: 10px; }
.gf-phone__nav { display: flex; justify-content: space-around; padding: 6px 0 2px; color: #888; font-size: 11px; }
.ga-s, .go-s { position: absolute; inset: 22px 0 0; display: flex; flex-direction: column; opacity: 0; transform: translateX(20px); transition: opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1); background: #fff; }
.ga-on, .go-on { opacity: 1; transform: none; }
.ga-bar { background: #ef7a1c; color: #fff; padding: 12px 14px; font-size: 15px; font-weight: 600; display: flex; gap: 10px; align-items: center; }
.ga-search { padding: 8px 12px; color: #aaa; font-size: 12px; border-bottom: 1px solid #eee; }
.ga-mesas { padding: 8px; display: grid; gap: 7px; overflow: hidden; }
.ga-mesa { color: #fff; text-align: center; font-size: 12.5px; padding: 11px 0; border-radius: 2px; }
.ga-livre { background: #3e7d1c; } .ga-oc { background: #dd3a0f; }
.ga-tap { animation: ga-tap .45s ease; } @keyframes ga-tap { 40% { transform: scale(.95); filter: brightness(1.3); } }
.ga-itens { flex: 1; padding: 6px 12px; overflow: hidden; }
.ga-it { border-bottom: 1px solid #e5e5e5; padding: 7px 0; font-size: 11.5px; animation: rp-in .35s ease; }
.ga-l { display: flex; justify-content: space-between; } .ga-m { color: #888; font-size: 10.5px; } .ga-sub { font-weight: 700; }
.ga-foot { padding: 8px 12px; } .ga-foot .t { display: flex; justify-content: space-between; font-weight: 700; font-size: 13px; margin-bottom: 8px; }
.ga-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .ga-btns span { background: #ef7a1c; color: #fff; text-align: center; font-size: 11px; padding: 9px 0; border-radius: 2px; }
.go-bar { background: #f7941d; color: #fff; padding: 12px 14px; font-size: 16px; font-weight: 600; display: flex; justify-content: space-between; }
.go-scroll { flex: 1; overflow: hidden; }
.go-pull { animation: go-pull .8s ease; } @keyframes go-pull { 40% { transform: translateY(26px); } }
.go-spin { height: 0; display: grid; place-items: center; overflow: hidden; transition: height .25s; }
.go-spin::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #f7941d; border-top-color: transparent; animation: gms-spin .7s linear infinite; }
.go-spin--on { height: 26px; }
.go-sel { padding: 8px 12px; font-size: 11px; color: #555; border-bottom: 1px solid #eee; }
.go-chart { padding: 8px 10px 4px; background: #f6f6f6; }
.go-chart p { margin: 0 0 6px; font-size: 11px; color: #666; }
.go-bars { height: 92px; display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid #ccc; }
.go-bars i { flex: 1; background: #f7941d; transition: height .9s cubic-bezier(.34,1.3,.64,1); } .go-bars i.go-cur { background: #ff6a00; box-shadow: 0 0 10px rgba(255,106,0,.6); }
.go-labels { display: flex; gap: 4px; } .go-labels span { flex: 1; font-size: 7.5px; color: #666; text-align: center; }
.go-pend { display: block; text-align: center; font-size: 10px; color: #d35400; padding: 4px; font-weight: 600; }
.go-row { display: flex; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid #eee; font-size: 12px; color: #555; }
.go-row b { font-weight: 500; color: #333; } .go-row--cur b { color: #e65c00; font-weight: 700; }
.go-det { padding: 10px 12px; font-size: 11.5px; color: #444; }
.go-det h6 { margin: 0 0 8px; font-size: 13px; color: #555; } .go-det .l { display: flex; justify-content: space-between; padding: 3px 0; }
.go-det hr { border: 0; border-top: 1px solid #ddd; margin: 7px 0; } .go-det .pg { color: #2e9a2e; font-size: 10px; text-align: right; }

/* impressora da cozinha */
.gf-printer { width: 190px; }
.gf-printer__head { height: 26px; border-radius: 12px 12px 5px 5px; background: #1d2733; border: 1px solid rgba(255,255,255,.1); position: relative; z-index: 2; }
.gf-ticket { width: 160px; margin: -4px auto 0; overflow: hidden; }
.gf-ticket__paper { background: #fff; color: #222; font: 11px/1.55 ui-monospace, Menlo, monospace; padding: 10px 10px 16px; display: grid; transform: translateY(-100%);
  -webkit-mask: radial-gradient(5px at 50% 100%, transparent 98%, #000) 0 0 / 12px 100%; mask: radial-gradient(5px at 50% 100%, transparent 98%, #000) 0 0 / 12px 100%; }
.gf-ticket__paper small { color: #777; border-bottom: 1px dashed #bbb; padding-bottom: 4px; margin-bottom: 4px; }
.gf-print .gf-ticket__paper { animation: gmm-print 1.8s steps(12, end) forwards; }
@keyframes gmm-print { to { transform: none; } }

/* ===== Curva ABC ===== */
.abc .wb-th, .abc .wb-row { grid-template-columns: 30px 1fr 58px 70px 110px 26px; }
.abc-row { position: relative; z-index: 1; }
.abc-pos { color: #888; font-weight: 700; } .abc-q, .abc-v { text-align: right; }
.abc-barc { height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden; } .abc-bar { display: block; height: 100%; background: linear-gradient(90deg, #f39234, #ec7a1e); border-radius: 4px; transition: width .8s cubic-bezier(.34,1.3,.64,1); }
.abc-cls { text-align: center; font-weight: 800; border-radius: 4px; color: #fff; font-size: 10px; padding: 1px 0; }
.abc-A { background: #2e9a2e; } .abc-B { background: #e2a21e; } .abc-C { background: #9aa3ad; }

/* Antes do layout vertical, os dispositivos não invadem os vizinhos nem a borda do palco. */
@media (min-width: 901px) and (max-width: 1100px) {
  .gf .gf-phone { width: 210px; }
  .gf .gf-printer { width: 170px; }
  .gf .gf-card { width: 180px; min-width: 0; }
}
@media (max-width: 900px) {
  .gms.gf { height: auto !important; display: flex; flex-direction: column; align-items: center; gap: 46px; padding: 30px 12px; }
  .gms.gf [data-node] { position: relative; left: auto; top: auto; transform: none; width: 100% !important; max-width: 420px; }
  .gms.gf .gms-server { max-width: 188px; }
  .gms.gf .gf-phone, .gms.gf .gf-printer { margin: 0 auto; }
  .gf .gf-col { --x: 50% !important; }
}
@media (prefers-reduced-motion: reduce) {
  .gf-ticket__paper { transform: none; } .go-bars i, .abc-bar { transition: none; }
}
/* O catálogo tem seis linhas; o motor acompanha sua altura real, sem esconder parte da quinta linha. */
.est-body { overflow: visible; }
/* addRow já limita o histórico a três entradas completas. */
.fin-body, .cmp-body { min-height: 82px; overflow: visible; }