/* Controle de Pista do portal (visual aprovado em 12/10). Tudo fica dentro de #pp para não mexer no resto do portal. */
#pp{
  color-scheme:dark;
  --chao:#131925; --placa:#192130; --placa2:#202A3C; --fundo:#151C2A; --linha:#2A3549; --texto:#E1E6F0; --suave:#8794AB;
  --ciano:#5CC2D9; --verde:#38D48B; --verde2:#28B071; --verm:#F05065; --verm2:#C63D50; --ambar:#EFAC45; --violeta:#9187E2;
  --sobre:#0E161E;
  --disp:"Barlow Condensed","Arial Narrow",sans-serif; --corpo:"Manrope",system-ui,sans-serif;
}
#pp{margin:0;background:var(--chao);color:var(--texto);font:600 14px/1.35 var(--corpo);min-height:100%}
#pp button{font:inherit;color:inherit;border:0;cursor:pointer;position:relative;overflow:hidden;transition:transform .16s cubic-bezier(.2,.9,.2,1),box-shadow .2s,filter .16s,background .2s,border-color .2s}
#pp button:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.08)}
#pp button:active:not(:disabled){transform:translateY(1px) scale(.97);transition-duration:.05s}
#pp button:disabled{opacity:.35;cursor:not-allowed}
#pp button:focus-visible,#pp input:focus-visible{outline:2px solid var(--ciano);outline-offset:2px}
#pp input{font:700 16px var(--corpo);color:var(--texto);background:var(--fundo);border:1px solid var(--linha);border-radius:10px;padding:0 14px;height:50px;width:100%;min-width:0;transition:border-color .2s,box-shadow .2s}
#pp input:focus{border-color:var(--ciano);box-shadow:0 0 0 3px #5CC2D922;outline:0}
#pp .num{font-variant-numeric:tabular-nums}
#pp .rot{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--suave);font-weight:800}
#pp .onda{position:absolute;border-radius:50%;background:#FFFFFF38;transform:scale(0);animation:onda .55s ease-out forwards;pointer-events:none}
@keyframes onda{to{transform:scale(4);opacity:0}}
#pp .ptopo{display:flex;align-items:center;gap:10px;padding:10px 16px;background:#161D2Bf2;border-bottom:1px solid var(--linha);flex-wrap:wrap;position:sticky;top:0;z-index:20;backdrop-filter:blur(8px)}
#pp .pmarca{display:flex;align-items:center;gap:10px;margin-right:4px}
#pp .pmarca i{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font:800 20px var(--disp);font-style:normal;color:var(--sobre);background:var(--ciano)}
#pp .pmarca b{font:800 20px var(--disp);letter-spacing:.04em;display:block;line-height:1}
#pp .pmarca small{color:var(--suave);font-size:12px}
#pp .vivo{display:inline-flex;align-items:center;gap:7px;background:#F050651F;color:#FD96A3;border:1px solid #F0506555;font:800 11px var(--corpo);letter-spacing:.08em;padding:5px 10px;border-radius:999px}
#pp .vivo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--verm);animation:pisca 2.4s ease-in-out infinite}
@keyframes pisca{50%{opacity:.35}}
#pp .kpis{display:flex;gap:8px;flex:1;justify-content:flex-end;flex-wrap:wrap}
#pp .k{background:var(--fundo);border:1px solid var(--linha);border-radius:10px;padding:6px 12px;min-width:86px;transition:border-color .2s}
#pp .k:hover{border-color:#415070}
#pp .k b{display:block;font:800 22px/1.05 var(--disp)}
#pp .k .rot{font-size:9.5px}
#pp .k.din b{color:var(--verde)}
#pp .k.din em{display:block;font-style:normal;font-size:11px;color:var(--ambar);font-weight:800}
#pp .prog{display:flex;align-items:center;gap:10px}
#pp .anel{width:42px;height:42px}
#pp .anel circle{fill:none;stroke-width:5}
#pp .op{display:flex;align-items:center;gap:8px;background:var(--fundo);border:1px solid var(--linha);border-radius:999px;padding:4px 4px 4px 12px;font-weight:800}
#pp .op button{background:var(--placa2);border-radius:999px;padding:5px 10px;font-size:12px;color:var(--suave)}
#pp .grade{display:grid;grid-template-columns:minmax(0,1fr) 470px;gap:14px;padding:14px 16px 18px}
#pp .esq,#pp .dir{display:grid;gap:14px;align-content:start;min-width:0}
#pp .cx{background:var(--placa);border:1px solid var(--linha);border-radius:14px;padding:16px;box-shadow:0 6px 18px #0003;min-width:0}
#pp .pista{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center}
#pp .box{width:118px;height:118px;border-radius:18px;display:grid;place-items:center;align-content:center;background:var(--fundo);border:1px solid var(--linha);border-top:3px solid var(--ciano)}
#pp .box span{font-size:10px;letter-spacing:.2em;color:var(--ciano);font-weight:800}
#pp .box b{font:800 58px/1 var(--disp);color:var(--texto)}
#pp .cat{font:800 clamp(28px,3.2vw,46px)/1.02 var(--disp);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
#pp .vend{color:var(--suave);font-weight:700;margin-top:4px}
#pp .dados{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
#pp .dados span{background:var(--fundo);border:1px solid var(--linha);border-radius:8px;padding:5px 10px;font-weight:800}
#pp .dados span i{font-style:normal;color:var(--suave);font-weight:700;margin-right:4px}
#pp .aviso{background:#EFAC451F;color:#FEC76C;border:1px solid #EFAC4566;border-radius:8px;padding:5px 10px;font-weight:800}
#pp .relo{position:relative;width:132px;height:132px;display:grid;place-items:center;text-align:center}
#pp .relo svg{position:absolute;inset:0;transform:rotate(-90deg)}
#pp .relo circle{fill:none;stroke-width:7;stroke-linecap:round}
#pp .relo b{font:800 34px/1 var(--disp)}
#pp .relo small{display:block;font-size:10px;color:var(--suave);font-weight:800;letter-spacing:.06em}
#pp .pvazio{display:none;align-items:center;justify-content:space-between;gap:12px;font:800 26px var(--disp);color:var(--suave)}
#pp .pvazio button{background:var(--ciano);color:var(--sobre);border-radius:10px;padding:12px 18px;font:800 18px var(--corpo)}
#pp .meio{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px}
#pp .tela .cab,#pp .fila .cab{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:8px}
#pp .seg{display:inline-flex;background:var(--fundo);border:1px solid var(--linha);border-radius:9px;padding:3px;gap:3px}
#pp .seg button{background:transparent;color:var(--suave);font-weight:800;font-size:12px;padding:6px 12px;border-radius:7px}
#pp .seg button[aria-pressed="true"]{background:var(--placa2);color:var(--texto);box-shadow:inset 0 -2px 0 var(--ciano)}
#pp .seg .yt[aria-pressed="true"]{box-shadow:inset 0 -2px 0 var(--verm)}
#pp .quadro{position:relative;aspect-ratio:16/9;height:clamp(200px,32vh,360px);width:auto;max-width:100%;margin-inline:auto;background:#0D121C;border:1px solid var(--linha);border-radius:10px;overflow:hidden;display:grid;place-items:center;color:#FFFFFF4d;text-align:center;font-weight:700}
#pp .quadro i{position:absolute;width:20px;height:20px;border:2px solid #FFFFFF26}
#pp .quadro .a{top:8px;left:8px;border-right:0;border-bottom:0}
#pp .quadro .b{top:8px;right:8px;border-left:0;border-bottom:0}
#pp .quadro .c{bottom:8px;left:8px;border-right:0;border-top:0}
#pp .quadro .d{bottom:8px;right:8px;border-left:0;border-top:0}
#pp .sinc{color:var(--verde);font-size:12px;font-weight:800}
#pp .lista{display:grid;gap:6px;max-height:clamp(200px,32vh,360px);overflow:auto;padding-right:4px}
#pp .it{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:8px;align-items:center;background:var(--fundo);border:1px solid transparent;border-radius:10px;padding:8px;animation:entra .3s ease both;transition:transform .2s,border-color .2s,background .2s}
#pp .it:hover{transform:translateX(3px);border-color:var(--linha);background:#1C2434}
@keyframes entra{from{opacity:0;transform:translateY(5px)}}
#pp .it>b{font:800 24px var(--disp);color:var(--ciano);text-align:center}
#pp .it div{min-width:0}
#pp .it .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:800}
#pp .it small{display:block;color:var(--suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
#pp .it button{background:var(--placa2);border:1px solid var(--linha);border-radius:8px;padding:7px 10px;font-weight:800;font-size:12px}
#pp .it.prox{border-color:#5CC2D955;background:#1A2838}
#pp .it.prox button{background:var(--ciano);color:var(--sobre);border-color:var(--ciano)}
#pp .it .ok{color:var(--verde)}
#pp .it .no{color:var(--verm)}
#pp .conf{background:var(--ambar)!important;color:#301D00!important;border-color:var(--ambar)!important}
#pp .info{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#pp .info div{display:flex;align-items:center;gap:8px;background:var(--placa);border:1px solid var(--linha);border-radius:10px;padding:10px 12px;min-width:0;white-space:nowrap;overflow:hidden}
#pp .info b{color:var(--ciano)}
#pp .info .ok{color:var(--verde)}
#pp .info .no{color:var(--verm)}
#pp .info button{margin-left:auto;background:#EFAC451A;color:var(--ambar);border:1px solid #EFAC4555;border-radius:8px;padding:6px 10px;font-weight:800;font-size:12px}
#pp .lance{border-top:3px solid var(--verde2)}
#pp .lcab{display:flex;justify-content:space-between;align-items:center}
#pp .valor{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:12px 0 6px;font-family:var(--disp);font-weight:800;color:var(--verde);white-space:nowrap}
#pp .valor small{font-size:28px;color:#74CA9F}
#pp .valor span{font-size:96px;line-height:.95;display:inline-block}
#pp .valor .kg{font-size:26px;color:#74CA9F}
#pp .valor span.sobe{animation:sobe .3s ease-out}
#pp .valor span.desce{animation:desce .3s ease-out}
@keyframes sobe{40%{transform:translateY(-4px) scale(1.04)}}
@keyframes desce{40%{transform:translateY(4px) scale(.97)}}
#pp .refs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
#pp .refs div{background:var(--fundo);border:1px solid var(--linha);border-radius:10px;padding:8px 12px;text-align:center}
#pp .refs b{display:block;font:800 24px var(--disp);color:var(--ambar)}
#pp .passos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:6px}
#pp .passos button{height:60px;border-radius:12px;font:800 26px var(--disp)}
#pp .passos.sobe button{background:#38D48B24;color:#81EBB6;border:1px solid #38D48B59}
#pp .passos.sobe button:hover{background:#38D48B38}
#pp .passos.desce button{background:#F0506524;color:#FD96A3;border:1px solid #F0506559}
#pp .passos.desce button:hover{background:#F0506538}
#pp .digita{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:12px}
#pp .digita button{background:var(--placa2);border:1px solid var(--linha);color:var(--texto);border-radius:10px;padding:0 18px;font-weight:800}
#pp .comp{position:relative}
#pp .comp input{height:58px;font-size:18px;padding-right:58px;text-transform:uppercase}
#pp .comp input::placeholder{text-transform:none}
#pp .comp button{position:absolute;right:6px;top:6px;width:46px;height:46px;border-radius:9px;background:var(--placa2);border:1px solid var(--linha);font-size:22px}
#pp .prazos{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 12px;align-items:center}
#pp .prazos button{background:var(--fundo);border:1px solid var(--linha);border-radius:999px;padding:7px 13px;font-weight:800;color:var(--suave)}
#pp .prazos button[aria-pressed="true"]{background:#5CC2D926;color:var(--texto);border-color:var(--ciano)}
#pp .fechar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:14px;align-items:center}
#pp .fechar .prazos{margin:10px 0 0}
#pp .bater{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#pp .bater button{height:92px;border-radius:14px;font:800 24px var(--disp);white-space:nowrap;letter-spacing:.04em;color:#fff;display:flex;align-items:center;justify-content:center;gap:10px}
#pp .bv{background:var(--verde2);box-shadow:inset 0 -4px 0 #0003}
#pp .bv:hover{box-shadow:inset 0 -4px 0 #0003,0 8px 20px #28B07140}
#pp .bn{background:var(--verm2);box-shadow:inset 0 -4px 0 #0003}
#pp .bn:hover{box-shadow:inset 0 -4px 0 #0003,0 8px 20px #C63D5040}
#pp kbd{font:800 11px var(--corpo);background:#0003;border-radius:5px;padding:2px 6px}
#pp .raro{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
#pp .raro button{background:var(--fundo);border:1px solid var(--linha);border-radius:10px;padding:10px 4px;font-size:12px;font-weight:700;display:grid;justify-items:center;gap:5px;color:#C6CEDE}
#pp .raro button:hover{border-color:#52598E;background:#1C2237}
#pp .raro svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:var(--violeta);transition:transform .3s}
#pp .raro button:hover svg{transform:rotate(-8deg) scale(1.12)}
#pp .raro .l svg{color:var(--ambar)}
#pp #pModal{position:fixed;inset:0;background:#090D16c0;display:none;place-items:center;z-index:50;padding:16px;backdrop-filter:blur(3px)}
#pp #pModal.on{display:grid}
#pp .mbox{background:var(--placa);border:1px solid var(--linha);border-radius:14px;padding:20px;width:440px;max-width:100%;animation:abre .22s cubic-bezier(.2,.9,.2,1)}
@keyframes abre{from{transform:translateY(12px) scale(.97);opacity:0}}
#pp .mbox h3{margin:0 0 8px;font:800 24px var(--disp)}
#pp .mbox p{color:var(--suave);margin:0 0 14px}
#pp .mbt{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
#pp .mbt button{height:48px;border-radius:10px;font-weight:800}
#pp .mbt .c{background:var(--placa2)}
#pp .mbt .o{background:var(--ciano);color:var(--sobre)}
#pp #pToast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);opacity:0;background:#E1E6F0;color:#131925;font-weight:800;padding:12px 20px;border-radius:12px;box-shadow:0 10px 26px #0008;transition:.25s;z-index:60;pointer-events:none;max-width:calc(100% - 32px)}
#pp #pToast.on{opacity:1;transform:translate(-50%,0)}
#pp #pToast.erro{background:var(--verm2);color:#fff}
#pp #pBatida{position:fixed;inset:0;display:none;place-items:center;align-content:center;gap:4px;z-index:70;pointer-events:none;background:#0C121Ad0;backdrop-filter:blur(3px)}
#pp #pBatida.on{display:grid;animation:fade 1.6s ease forwards}
@keyframes fade{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}
#pp #pBatida svg{width:96px;height:96px;transform-origin:80% 80%;animation:martelo .45s cubic-bezier(.5,0,.3,1.3) both}
@keyframes martelo{from{transform:rotate(-45deg)}to{transform:rotate(0)}}
#pp #pBatida b{font:800 min(13vw,120px)/1 var(--disp);letter-spacing:.04em;animation:bate .45s .2s cubic-bezier(.3,1.4,.5,1) both}
@keyframes bate{from{transform:scale(1.3);opacity:0}}
#pp #pBatida span{font-size:22px;font-weight:800;text-align:center}
#pp .passin{text-align:right;padding:0 16px 12px;color:var(--suave);font-size:11px;opacity:.7}
@media (max-width:1180px){#pp .grade{grid-template-columns:1fr}
#pp .meio{grid-template-columns:1fr}
#pp .fechar{grid-template-columns:1fr}
}
@media (max-width:760px){#pp .kpis .k:not(.din),#pp .prog{display:none}
#pp .pista{grid-template-columns:auto minmax(0,1fr)}
#pp .relo{display:none}
#pp .box{width:84px;height:84px;border-radius:14px}
#pp .box b{font-size:40px}
#pp .tela{display:none}
#pp .valor span{font-size:68px}
#pp .info{grid-template-columns:1fr}
#pp .raro{grid-template-columns:repeat(2,1fr)}
#pp .bater{position:sticky;bottom:8px;z-index:10}
#pp .bater button{height:68px;font-size:19px;gap:6px}
#pp .bater kbd{display:none}
#pp .grade{display:flex;flex-direction:column}
#pp .esq,#pp .dir{display:contents}
#pp .esq>.cx:first-child{order:1}
#pp .lance{order:2}
#pp .fechar{order:3}
#pp .info{order:4}
#pp .meio{order:5}
#pp .dir>.cx:last-child{order:6}
#pp .bater button{box-shadow:0 8px 22px #0009}

}
@media (prefers-reduced-motion:reduce){#pp *,#pp *::before,#pp *::after{animation:none!important;transition:none!important}
}

#pagina.modo-pista .barra{display:none}
#pagina.modo-pista .corpo{padding:0}
#pp .ptopo .op button.vol{color:var(--texto)}
#pp.off .lance button,#pp.off .fechar button,#pp.off .lista button,#pp.off .info button,#pp.off .pvazio button{pointer-events:none;opacity:.4}
#pp .semnet{background:var(--verm2);color:#fff;font-weight:800;text-align:center;padding:10px;margin:14px 16px 0;border-radius:10px}
#pp .quadro iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
#pp .quadro small a{color:var(--ciano)}
