/* gm-sync.css — sincronismo ao vivo: réplicas do PDV 2.0 e da Lista de vendas web (par do js/gm-sync.js).
   Prefixos: gms- (palco), rp- (réplica do PDV), wl- (réplica da web). */
.gms-wrap { position: relative; background: #0b0f14; border-radius: 28px; padding: 22px; color: #c7d0da;
  box-shadow: 0 50px 120px rgba(11,15,20,.35), inset 0 0 0 1px rgba(255,255,255,.06); }
.gms { position: relative; height: 660px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(700px 320px at 50% 8%, rgba(255,128,0,.18), transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 40px 40px, #0f1419; }
.gms__canvas { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.gms [data-node] { position: absolute; z-index: 2; left: var(--x); top: var(--y); transform: translate(-50%, -50%); font-family: Poppins, system-ui, sans-serif; }
.gms-beat > .gms-glow { animation: gms-beat .6s ease; }
@keyframes gms-beat { 30% { box-shadow: 0 0 0 3px rgba(255,138,20,.55), 0 0 40px rgba(255,138,20,.35); } }

/* Chips cabem lado a lado também no desktop estreito (901–1150 px). */
@media (min-width: 901px) {
  .gms:not(.gf) .gms-mini:not(.gms-order) { width: clamp(140px, calc(16vw - 16px), 190px); }
}

/* servidor */
.gms-server { width: 220px; text-align: center; }
.gms-server__core { position: relative; width: 74px; height: 74px; margin: 0 auto 6px; display: grid; place-items: center; }
.gms-server__core img { width: 38px; height: 38px; position: relative; z-index: 1; }
.gms-server__core::before, .gms-server__core::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid transparent; border-top-color: #ff8a14; border-right-color: rgba(255,138,20,.35); animation: gms-spin 3.2s linear infinite; }
.gms-server__core::after { inset: 9px; border-top-color: rgba(56,189,248,.8); border-left-color: rgba(56,189,248,.3); animation-duration: 4.6s; animation-direction: reverse; }
@keyframes gms-spin { to { transform: rotate(360deg); } }
.gms-pill { background: rgba(23,31,41,.94); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 8px 12px; }
.gms-server b { display: block; color: #fff; font-size: 14px; }
.gms-server small { font-size: 11.5px; color: #8696a8; } .gms-server__n { color: #ffb15c; font-weight: 700; }

/* outros caixas e iFood (chips no topo, no estilo da barra do PDV) */
.gms-mini { width: 190px; border-radius: 10px; overflow: hidden; background: #f4f4f2; box-shadow: 0 14px 30px rgba(0,0,0,.4); }
.gms-mini__bar { display: flex; align-items: center; gap: 7px; background: #1d2939; color: #fff; font: 600 11px Inter, system-ui, sans-serif; padding: 7px 9px; }
.gms-mini__bar i.m { width: 15px; height: 15px; border-radius: 4px; background: #f26b1d; }
.gms-mini__bar em { margin-left: auto; width: 7px; height: 7px; border-radius: 50%; background: #34d27b; }
.gms-mini__body { padding: 7px 9px; font: 11px Inter, system-ui, sans-serif; color: #1d2939; }
.gms-mini__last { display: block; font-weight: 700; }
.gms-mini__row { display: flex; justify-content: space-between; color: #6b7785; margin-top: 2px; }
.gms-mini__price { color: #1f9d55; font-weight: 700; }
.gms-order { width: 170px; }
.gms-order .gms-mini__bar { background: #ea1d2c; } .gms-order .gms-mini__bar i.m { background: #fff; }

/* PDV: monitor com a réplica */
.gms-pdv { width: 47%; }
.gms-monitor { position: relative; background: #11161d; border-radius: 14px; padding: 8px; box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08); }
.gms-monitor::after { content: ""; display: block; width: 26%; height: 8px; margin: 8px auto -4px; border-radius: 0 0 8px 8px; background: #1b222b; }
.gms-screen { position: relative; overflow: hidden; border-radius: 6px; }
.gms-rep { position: absolute; top: 0; left: 0; width: 720px; transform-origin: 0 0; }
.gms-tag { position: absolute; top: -26px; left: 4px; font: 600 12px Poppins, sans-serif; color: #c7d0da; letter-spacing: .02em; }
.gms-tag b { color: #ff9a3c; }

/* ===== réplica PDV 2.0 (tela de venda) ===== */
.rp { height: 424px; 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: 0 0 7px; }
.rp-top { display: flex; align-items: center; gap: 9px; background: #1d2939; color: #fff; padding: 0 10px; font-size: 11.5px; font-weight: 600; }
.rp-top .m { width: 18px; height: 18px; border-radius: 5px; background: #f26b1d; display: grid; place-items: center; }
.rp-top .m::before { content: ""; width: 9px; height: 7px; border-top: 1.5px solid #fff; border-bottom: 1.5px solid #fff; box-shadow: inset 0 1.5px 0 -0px transparent; background: linear-gradient(#fff,#fff) center/100% 1.5px no-repeat; }
.rp-top .meta { margin-left: auto; font-weight: 500; color: #c9d2dc; font-size: 10.5px; }
.rp-net { display: inline-flex; align-items: center; gap: 5px; font: 600 10px Inter, sans-serif; color: #b9f5cf; background: rgba(52,210,123,.15); border: 1px solid rgba(52,210,123,.4); padding: 3px 8px; border-radius: 999px; cursor: pointer; }
.rp-net::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #34d27b; box-shadow: 0 0 6px #34d27b; }
.gms-off .rp-net { color: #ffd0cc; background: rgba(239,68,68,.2); border-color: rgba(239,68,68,.5); }
.gms-off .rp-net::before { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.rp-main { display: grid; grid-template-columns: 1fr 250px; gap: 7px; padding: 0 7px; min-height: 0; }
.rp-left, .rp-right { background: #fff; border: 1px solid #e3e3e0; border-radius: 4px; min-height: 0; }
.rp-left { padding: 8px; }
.rp-left__bar { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; font-size: 11px; font-weight: 700; }
.rp-btn { border: 1px solid #d5d5d2; background: #fff; border-radius: 3px; padding: 4px 9px; font-size: 10px; font-weight: 600; color: #1d2939; }
.rp-btn kbd { font: 600 8px Inter, sans-serif; background: #eee; color: #555; padding: 1px 3px; border-radius: 2px; margin-right: 4px; }
.rp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rp-card { border: 1px solid #ececea; border-radius: 5px; overflow: hidden; transition: transform .25s, box-shadow .25s; }
.rp-card__img { height: 46px; background: #fdf0e8; display: grid; place-items: center; font-size: 22px; font-weight: 800; color: #ee6b1f; }
.rp-card__nome { padding: 4px 6px 0; font-size: 8.5px; font-weight: 700; line-height: 1.25; min-height: 22px; }
.rp-card__preco { padding: 1px 6px 5px; font-size: 11px; font-weight: 800; color: #1f9d55; transition: background .3s; }
.rp-tap { animation: rp-tap .45s ease; }
@keyframes rp-tap { 40% { transform: scale(.94); box-shadow: 0 0 0 2px #f26b1d; } }
.rp-upd .rp-card__preco { animation: rp-upd 1.6s ease; }
@keyframes rp-upd { 0%, 40% { background: #dff3ff; color: #0369a1; } }
.rp-right { display: flex; flex-direction: column; padding: 8px; }
.rp-lbl { font-size: 8.5px; font-weight: 700; letter-spacing: .08em; color: #6b7785; }
.rp-search { height: 22px; border: 2px solid #f26b1d; border-radius: 3px; margin: 4px 0 7px; }
.rp-cart { flex: 1; min-height: 0; display: grid; align-content: start; gap: 4px; overflow: hidden; }
.rp-item { display: grid; grid-template-columns: 34px 1fr auto; gap: 6px; align-items: center; background: #fafaf8; border: 1px solid #ededeb; border-radius: 4px; padding: 4px 6px; animation: rp-in .35s ease; }
@keyframes rp-in { from { opacity: 0; transform: translateX(14px); } }
.rp-item__q { background: #f0f0ee; border-radius: 3px; text-align: center; line-height: 1.05; padding: 2px 0; }
.rp-item__q b { display: block; font-size: 10px; color: #ee6b1f; } .rp-item__q small { font-size: 7px; color: #777; font-weight: 700; }
.rp-item__t b { display: block; font-size: 10px; } .rp-item__t small { font-size: 8px; color: #8792a0; }
.rp-item__v { font-size: 10.5px; font-weight: 700; color: #e4571a; }
.rp-foot { border-top: 1px solid #ececea; padding-top: 6px; }
.rp-foot .row { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #555; }
.rp-foot b.c { font-size: 12px; color: #1d2939; }
.rp-total { display: block; text-align: right; font-size: 20px; font-weight: 800; color: #1f9d55; margin-top: 2px; font-variant-numeric: tabular-nums; }
.rp-bottom { display: flex; justify-content: center; gap: 6px; background: #fff; border: 1px solid #e3e3e0; margin: 0 7px; border-radius: 4px; align-items: center; }
.rp-bottom .rp-btn { padding: 6px 10px; }
.rp-f2 { background: #187340 !important; color: #fff !important; border-color: #187340 !important; transition: transform .15s, box-shadow .15s; }
.rp-f4 { background: #ba2f2d !important; color: #fff !important; border-color: #ba2f2d !important; }
.rp-f2 kbd, .rp-f4 kbd { background: #eef1f4; color: #263444; }
.rp-press { transform: scale(.9); box-shadow: 0 0 0 4px rgba(31,157,85,.35); }
/* venda finalizada */
.rp-done { position: absolute; left: 7px; right: 264px; top: 41px; bottom: 54px; 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; }
.rp-done.rp-show { opacity: 1; transform: none; }
.rp-done__ok { width: 64px; height: 64px; margin: 0 auto 8px; border-radius: 50%; border: 2px dashed #1f9d55; display: grid; place-items: center; }
.rp-done__ok::before { content: ""; width: 50px; height: 50px; border-radius: 50%; background: #dcf7e6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23157a3e' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/26px no-repeat; }
.rp-done b { font-size: 18px; } .rp-done__no { display: block; font-size: 10px; color: #6b7785; margin: 3px 0 6px; }
.rp-done__v { font-size: 15px; font-weight: 800; color: #1f9d55; }
.rp-toast { position: absolute; right: 8px; top: 40px; max-width: 300px; font: 600 10.5px Inter, sans-serif; color: #fff; padding: 7px 10px; border-radius: 5px; opacity: 0; transform: translateY(-6px); pointer-events: none; z-index: 2; }
.rp-toast--order { background: #ea1d2c; } .rp-toast--price { background: #0284c7; }
.rp-show.rp-toast { animation: rp-toast 3.4s ease forwards; }
@keyframes rp-toast { 8%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* vendas salvas no caixa (pilha sobre o monitor) */
.gms-stack { position: absolute; left: 50%; bottom: calc(100% + 30px); width: 190px; height: 0; transform: translateX(-50%); z-index: 4; }
.gms-stack i { position: absolute; left: 0; right: 0; bottom: calc(var(--k) * 24px); height: 21px; border-radius: 6px; font: 700 10.5px/21px Poppins, sans-serif; font-style: normal; text-align: center; color: #2a1600;
  background: linear-gradient(90deg, #ff8a14, #ffb15c); box-shadow: 0 6px 14px rgba(0,0,0,.45); animation: gms-drop .5s cubic-bezier(.34,1.56,.64,1); }
@keyframes gms-drop { from { transform: translateY(-40px); opacity: 0; } }

/* gestão web: janela de navegador com a réplica */
.gms-web { width: 47%; }
.gms-browser { border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 30px 60px rgba(0,0,0,.55); }
.gms-browser__bar { display: flex; align-items: center; gap: 6px; background: #e9ebee; padding: 7px 10px; }
.gms-browser__bar i { width: 9px; height: 9px; border-radius: 50%; background: #ff5f57; } .gms-browser__bar i:nth-child(2) { background: #febc2e; } .gms-browser__bar i:nth-child(3) { background: #28c840; }
.gms-browser__bar span { flex: 1; margin-left: 8px; background: #fff; border-radius: 6px; padding: 3px 10px; font: 11px Poppins, sans-serif; color: #59697d; }

/* ===== réplica web: Lista de vendas ===== */
.wl { height: 400px; background: #f1f1f1; font-family: Arial, Helvetica, sans-serif; color: #333; padding: 10px; position: relative; }
.wl-top { display: flex; align-items: center; gap: 10px; background: #2b2b2b; margin: -10px -10px 10px; padding: 7px 12px; color: #fff; font-size: 11px; }
.wl-top img { height: 16px; } .wl-top span { color: #bbb; } .wl-top b { margin-left: auto; font-weight: 400; color: #ddd; }
.wl-card { background: #fff; border: 1px solid #ddd; border-radius: 3px; padding: 9px 10px; }
.wl-head { display: flex; align-items: center; gap: 6px; border-bottom: 1px solid #ccc; padding-bottom: 8px; }
.wl-head h5 { margin: 0; font-size: 13px; font-weight: 700; flex: 1; }
.wl-b { font-size: 10px; border: 1px solid #ccc; background: #f5f5f5; border-radius: 3px; padding: 4px 7px; }
.wl-b--y { background: #fff6d8; border-color: #f3d36e; color: #e2861e; }
.wl-b--b { background: #dfeefe; border-color: #8fc1f4; color: #1d5fa8; }
.wl-sum { display: flex; justify-content: space-between; font-size: 11px; color: #777; padding: 8px 2px; border-radius: 3px; }
.wl-sum b { color: #333; } .wl-sum .g { color: #2e9a2e; font-weight: 700; }
.wl-flash { animation: wl-flash 1.2s ease; } @keyframes wl-flash { 0% { background: #eaf8e8; } }
.wl-thead, .wl-row { display: grid; grid-template-columns: 62px 66px 104px 1fr 62px; gap: 6px; padding: 6px 8px; font-size: 10.5px; align-items: center; }
.wl-thead { background: #7a7a7a; color: #fff; }
.wl-body { height: 232px; overflow: hidden; }
.wl-row { border-bottom: 1px solid #e6e6e6; background: #fff; }
.wl-row:nth-child(even) { background: #fafafa; }
.wl-c4 { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wl-c5 { text-align: right; color: #2e9a2e; }
.wl-new { animation: wl-new 2.4s ease; }
@keyframes wl-new { 0% { background: #fff1cc; transform: translateY(-10px); opacity: 0; } 15% { opacity: 1; transform: none; } 60% { background: #fff6dc; } }
.wl-modal { position: absolute; left: 50%; top: 50%; width: 330px; transform: translate(-50%, -46%) scale(.96); opacity: 0; transition: opacity .25s, transform .35s cubic-bezier(.34,1.56,.64,1);
  background: #fff; border-radius: 6px; box-shadow: 0 20px 50px rgba(0,0,0,.3); border: 1px solid #ccc; pointer-events: none; }
.wl-modal.wl-show { opacity: 1; transform: translate(-50%, -50%); }
.wl-modal h6 { margin: 0; padding: 9px 12px; font-size: 12px; background: #f5f5f5; border-bottom: 1px solid #ddd; }
.wl-modal .f { padding: 10px 12px; font-size: 11px; color: #555; }
.wl-modal label { display: block; margin: 6px 0 3px; } .wl-modal .v { border: 1px solid #bbb; border-radius: 3px; padding: 5px 8px; color: #222; }
.wl-input { display: inline-block; min-width: 40px; border-right: 1.5px solid #222; padding-right: 2px; }
.wl-modal .act { display: flex; justify-content: flex-end; gap: 6px; padding: 0 12px 11px; }
.wl-save { background: #2e9a2e; color: #fff; border: 0; border-radius: 3px; padding: 5px 12px; font-size: 11px; transition: transform .15s; }
.wl-press { transform: scale(.9); }

/* controles e legenda */
.gms-bar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: space-between; margin-top: 18px; }
.gms-controls { display: flex; flex-wrap: wrap; gap: 10px; }
.gms-controls button { font: 600 14px Poppins, sans-serif; border-radius: 999px; padding: 11px 18px; cursor: pointer; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; }
.gms-controls button:hover { background: rgba(255,255,255,.12); }
.gms-controls [data-cut] { border-color: rgba(255,90,90,.5); color: #ffb0b0; }
.gms-controls [data-price] { border-color: rgba(56,189,248,.5); color: #a5e3fd; }
.gms-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: #8696a8; }
.gms-legend span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; background: var(--c); box-shadow: 0 0 8px var(--c); }
.gms-note { margin: 12px 0 0; font-size: 12px; color: #93a3b5; }

@media (max-width: 900px) {
  .gms { height: 1180px; }
  .gms [data-node="mini2"] { --x: 18% !important; --y: 4.5% !important; } .gms [data-node="order"] { --x: 50% !important; --y: 4.5% !important; }
  .gms [data-node="mini3"] { --x: 82% !important; --y: 4.5% !important; } .gms [data-node="server"] { --x: 50% !important; --y: 18% !important; }
  .gms [data-node="pdv"] { --x: 50% !important; --y: 44% !important; } .gms [data-node="web"] { --x: 50% !important; --y: 80% !important; }
  .gms-pdv, .gms-web { width: 92%; } .gms-mini, .gms-order { width: 30%; } .gms-mini__body { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gms-server__core::before, .gms-server__core::after, .gms-stack i, .rp-item, .wl-new { animation: none; }
}