/* Peças comuns do Balcão e do Caixa (Proposta Cecora Tecnologia). Complementa sistema.css. */
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.icp{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.barras{display:block;width:100%;height:46px}
/* barra superior escura com a marca */
.barra{position:relative;display:flex;align-items:center;gap:14px;padding:10px 18px;background:linear-gradient(180deg,var(--lateral),var(--lateral2));color:#fff;box-shadow:0 10px 30px -18px rgba(0,0,0,.7);z-index:5}
.barra::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--marca),color-mix(in srgb,var(--marca) 30%,transparent))}
.barra .logo{height:42px;width:auto;max-width:140px;object-fit:contain;flex:none}
.barra .id-loja{all:unset;cursor:pointer;display:flex;flex-direction:column;line-height:1.15;padding:4px 10px;border-radius:10px;min-width:0;transition:background .2s}
.barra .id-loja:hover{background:rgba(255,255,255,.07)}
.barra .id-loja b{font-family:var(--f-tit);font-weight:800;font-size:17px;letter-spacing:-.01em;white-space:nowrap}
.barra .id-loja small{font-size:12px;opacity:.68;font-weight:600;white-space:nowrap}
.barra .esp{flex:1}
.barra .rel{font-family:var(--f-num);font-weight:700;font-size:22px;letter-spacing:.02em;opacity:.92}
.barra .lnk{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:12px;font-weight:700;font-size:14px;color:rgba(255,255,255,.85);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);min-height:24px;transition:background .2s}
.barra .lnk:hover{background:rgba(255,255,255,.12);color:#fff}
.barra .lnk.on{background:color-mix(in srgb,var(--marca) 20%,transparent);border-color:color-mix(in srgb,var(--marca) 45%,transparent);color:#fff}
.vivo{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#bff0cf;background:rgba(31,157,87,.18);border:1px solid rgba(31,157,87,.35);padding:5px 10px;border-radius:999px;white-space:nowrap}
.vivo i{width:8px;height:8px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:vivo 1.8s infinite}
@keyframes vivo{70%{box-shadow:0 0 0 8px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.zerar{all:unset;cursor:pointer;position:fixed;left:12px;bottom:46px;z-index:90;font-size:11.5px;font-weight:700;color:var(--mudo);background:rgba(255,255,255,.75);border:1px solid var(--linha);border-radius:999px;padding:6px 11px;backdrop-filter:blur(6px)}
.zerar:hover{color:var(--tinta)}
/* modal */
.mod{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:16px}
.mod-fundo{position:absolute;inset:0;background:rgba(18,16,12,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .25s}
.mod-caixa{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--papel);border-radius:22px;padding:24px;box-shadow:var(--sombra-f);transform:translateY(24px) scale(.98);transition:transform .35s cubic-bezier(.2,1.2,.4,1)}
.mod.on .mod-fundo{opacity:1}.mod.on .mod-caixa{transform:none}
.mod.peq .mod-caixa{width:min(460px,100%)}
.mod.largo .mod-caixa{width:min(980px,100%)}
.mod h3.tit{font-size:24px;margin-bottom:6px}
.mod-txt{color:var(--mudo);font-size:15px;line-height:1.45;margin-bottom:16px}
.mod-acoes{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.mod-acoes .btn{min-height:52px;padding:12px 20px;font-size:16px}
.mod .fx{position:absolute;right:14px;top:14px;width:44px;height:44px;border-radius:12px;border:1px solid var(--linha);background:#fff;display:grid;place-items:center;color:var(--tinta)}
.lista-lojas{display:grid;gap:8px}
.lista-lojas a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;border:1px solid var(--linha);text-decoration:none;color:var(--tinta);transition:.2s}
.lista-lojas a:hover,.lista-lojas a.on{border-color:var(--tinta);box-shadow:0 8px 20px -14px rgba(0,0,0,.5)}
.lista-lojas i{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--linha);flex:none}
.lista-lojas span{flex:1;display:flex;flex-direction:column}.lista-lojas small{color:var(--mudo);font-size:12.5px}
/* teclado numérico */
.tecl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tecl button{min-height:60px;border-radius:14px;border:1px solid var(--linha);background:linear-gradient(180deg,#fff,#f6f3ec);font-family:var(--f-num);font-weight:700;font-size:26px;color:var(--tinta);box-shadow:0 2px 0 rgba(0,0,0,.05);transition:transform .1s}
.tecl button:active{transform:scale(.96);background:#efe9dc}
.tecl button.ac{font-family:var(--f-txt);font-size:15px;font-weight:700}
.tecl button svg{width:24px;height:24px}
/* campo grande */
.visor{display:flex;align-items:baseline;justify-content:flex-end;gap:8px;padding:14px 18px;border-radius:16px;background:#14130f;color:#f6f1e3;font-family:var(--f-num);box-shadow:inset 0 2px 10px rgba(0,0,0,.5)}
.visor input{all:unset;width:100%;text-align:right;font-size:44px;font-weight:800;letter-spacing:.02em}
.visor input::placeholder{color:rgba(255,255,255,.3)}
.visor span{font-size:20px;font-weight:700;opacity:.7}
.abas{display:flex;gap:6px;padding:5px;background:#efebe2;border-radius:14px;margin-bottom:14px}
.abas button{flex:1;min-height:48px;border:0;border-radius:11px;background:transparent;font-weight:700;color:var(--mudo);display:inline-flex;align-items:center;justify-content:center;gap:8px}
.abas button.on{background:#fff;color:var(--tinta);box-shadow:0 6px 14px -10px rgba(0,0,0,.45)}
.msg-erro{color:#a8291d;font-size:13.5px;font-weight:700;min-height:18px;margin-top:8px}
.msg-ok{color:#137a42;font-size:13.5px;font-weight:700}
.btn[disabled]{filter:grayscale(.6);opacity:.55;cursor:not-allowed;transform:none!important}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid var(--linha);background:#fff;font-weight:600;font-size:14px;color:var(--tinta);transition:.15s}
.chips button.on{background:var(--tinta);color:#fff;border-color:var(--tinta)}
@media print{.barra,.demo-aviso,.zerar,.toast{display:none!important}}
.toast{top:78px}