/* Aprovações · Tracktor
   Extensão do painel de tráfego (Docker de Tráfego): mono metálico, fundo claro,
   vermelhão só no que pede o sim do Max agora. Celular primeiro (390 de largura). */

@font-face{font-family:'Archivo';src:url('fonts/archivo-wdth.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-wght.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/jetbrains-mono-wght.woff2') format('woff2');font-weight:100 800;font-display:swap}

:root{
  --paper:#F4F5F7;
  --paper-2:#ECEEF1;
  --white:#FFFFFF;
  --ink:#0E1116;
  --ink-2:#2A2E35;
  --body:#3E434B;
  --label:#5D636C;
  --metal:#868D96;
  --line:#E3E5E9;
  --line-2:#D2D5DC;
  --sinal:#D63B17;
  --sinal-ink:#B02E0E;
  --sinal-fundo:#FBEAE5;

  --fd:'Archivo',system-ui,-apple-system,sans-serif;
  --ft:'Inter',system-ui,-apple-system,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gutter:clamp(16px,3.4vw,48px);
  --max:1180px;
  --r-painel:12px;
  --r-controle:6px;
  --ease:cubic-bezier(.16,1,.3,1);
  --topo:56px;
}

*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topo) + 16px)}
body{background:var(--paper);color:var(--body);font:400 16px/1.6 var(--ft);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;min-height:100dvh}
img,svg{display:block;max-width:100%}
button,input{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;-webkit-tap-highlight-color:transparent}
a{color:var(--ink);text-decoration-color:var(--line-2);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-color:var(--ink)}
h1,h2,h3{font-family:var(--fd);color:var(--ink);text-wrap:balance;letter-spacing:-.02em;font-weight:700}
p,li,dd{text-wrap:pretty}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* superfícies do navegador também são da casa */
::selection{background:var(--ink);color:var(--white)}
input{caret-color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
html{scrollbar-color:var(--line-2) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:10px;border:2px solid var(--paper)}
::-webkit-scrollbar-track{background:transparent}

.pular{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--white);padding:10px 14px;border-radius:var(--r-controle);text-decoration:none}
.pular:focus{top:12px}

/* ================= barra do topo ================= */
.topo{position:sticky;top:0;z-index:40;background:rgba(244,245,247,.94);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)}
.topo-in{max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter);height:var(--topo);display:flex;align-items:center;justify-content:space-between;gap:16px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.marca img{height:22px;width:auto;flex:none}
.marca-nome{font:600 14px/1 var(--fd);color:var(--ink);padding-left:12px;border-left:1px solid var(--line-2);white-space:nowrap}
.topo-reler{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 10px;margin-right:-10px;border-radius:var(--r-controle);color:var(--label);font-size:12px;white-space:nowrap;transition:background .2s,color .2s}
.topo-reler:hover{background:var(--paper-2);color:var(--ink)}
.topo-reler svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.topo-reler.lendo svg{animation:gira .9s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}

/* ================= página ================= */
.pagina{max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter) env(safe-area-inset-bottom)}
.rot{display:block;font:500 11.5px/1.3 var(--fm);letter-spacing:.06em;text-transform:uppercase;color:var(--label)}

/* placar: o número que pede o sim */
.placar{padding:clamp(28px,3.4vw,52px) 0 clamp(22px,2.4vw,34px)}
.placar-t{display:flex;align-items:flex-end;flex-wrap:wrap;gap:6px 18px}
.placar-n{font:800 clamp(92px,6.4vw + 60px,152px)/.8 var(--fd);font-stretch:125%;letter-spacing:-.035em;color:var(--sinal);font-variant-numeric:tabular-nums}
.placar-selo{display:grid;place-items:center;width:clamp(60px,2.6vw + 50px,88px);aspect-ratio:1;border-radius:50%;background:var(--ink);flex:none;align-self:center}
.placar-selo svg{width:52%;height:52%;stroke:var(--white);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.placar-txt{font:700 clamp(30px,1.25vw + 20px,40px)/1.04 var(--fd);letter-spacing:-.025em;color:var(--ink);padding-bottom:.06em}
.placar-t.com-n .placar-txt{max-width:8.5ch}
.placar-t.com-selo{align-items:center}
.placar-lead{margin-top:16px;font-size:clamp(16px,.2vw + 14.5px,18px);line-height:1.55;color:var(--body);max-width:56ch}

/* aviso de senha ou de rede */
.aviso{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:20px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:15px;line-height:1.45;color:var(--body)}
.aviso svg{width:18px;height:18px;stroke:var(--label);fill:none;stroke-width:2;flex:none}
.aviso span{flex:1 1 240px;min-width:0}

/* ================= botões ================= */
.botao{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line-2);border-radius:var(--r-controle);background:var(--white);font:500 15px/1.15 var(--ft);color:var(--ink);text-align:center;transition:border-color .2s,background .2s,transform .12s}
.botao:hover{border-color:var(--ink)}
.botao:active{transform:translateY(1px)}
.botao:disabled{opacity:.45;cursor:not-allowed;border-color:var(--line-2);transform:none}
.botao svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.botao-escuro{background:var(--ink);color:var(--white);border-color:var(--ink)}
.botao-escuro:hover{background:var(--ink-2);border-color:var(--ink-2)}
.botao-g{min-height:56px;font-size:16px;font-weight:600;padding:0 18px}
.botao-texto{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font:500 15px var(--ft);color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2)}
.botao-texto:hover{text-decoration-color:var(--ink)}

/* ================= selos e etiquetas (do painel de tráfego) ================= */
.selo{display:inline-flex;align-items:center;gap:6px;font:600 11.5px/1 var(--fm);letter-spacing:.06em;text-transform:uppercase;padding:6px 8px;border-radius:4px;white-space:nowrap}
.selo-parada{padding-left:0;color:var(--sinal-ink)}
.ponto-sinal{width:10px;height:10px;border-radius:50%;background:var(--sinal);display:inline-block;box-shadow:0 0 0 3px rgba(214,59,23,.16)}
.selo-emdia{border:1px solid var(--ink-2);color:var(--ink)}
.selo-fora{background:var(--paper-2);color:var(--label)}
.selo-lei{background:var(--ink);color:var(--white)}
.etiq{font-size:12px;color:var(--label)}

/* ================= fila ================= */
.fila{outline:none}
.fila-lista{border-top:2px solid var(--ink)}
.fila-lista:empty{display:none}
.fila-lista > :last-child{border-bottom:0}

.peca{padding:22px 0 30px;border-bottom:1px solid var(--line)}
.peca-cab{min-width:0}
.peca-selos{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.peca-quando{font-size:12px;color:var(--label)}
.peca-cliente{margin-top:12px;font-size:clamp(26px,.7vw + 21px,32px);line-height:1.1;letter-spacing:-.022em}
.peca-formato{margin-top:6px;font-size:15px;line-height:1.45;color:var(--body)}
.peca-formato b{font:800 15px/1 var(--fd);font-stretch:118%;color:var(--ink);margin-right:2px}

/* vídeo da peça: grande, tocável, com troca de proporção */
.peca-video{margin-top:18px;min-width:0}
.troca{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--line-2);border-radius:var(--r-controle);background:var(--white);margin-bottom:12px}
.troca button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 12px;border-radius:4px;font:600 15px/1 var(--fd);color:var(--ink);transition:background .2s,color .2s}
.troca button span{font:500 12px/1 var(--fm);color:var(--label)}
.troca button:hover{background:var(--paper-2)}
.troca button[aria-pressed="true"]{background:var(--ink);color:var(--white)}
.troca button[aria-pressed="true"] span{color:#BFC4CB}
.tela{position:relative;margin:0 auto;background:var(--ink);border-radius:10px;overflow:hidden}
.tela.v916{aspect-ratio:9/16;width:min(100%,calc(74svh * 9 / 16))}
.tela.v45{aspect-ratio:4/5;width:min(100%,calc(74svh * 4 / 5))}
.tela video{display:block;width:100%;height:100%;object-fit:contain;background:var(--ink)}
.tela-play{position:absolute;inset:0;display:grid;place-items:center;width:100%;background:linear-gradient(180deg,rgba(14,17,22,0) 55%,rgba(14,17,22,.42));color:var(--white)}
.tela-play-bola{display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--white);box-shadow:0 10px 30px -10px rgba(14,17,22,.6);transition:transform .25s var(--ease)}
.tela-play:hover .tela-play-bola{transform:scale(1.06)}
.tela-play svg{width:30px;height:30px;fill:var(--ink);margin-left:4px}
.tela-play-txt{position:absolute;left:0;right:0;bottom:16px;text-align:center;font:600 14px/1 var(--ft);color:var(--white);letter-spacing:.01em}
.tela.ativo .tela-play{display:none}
.tela-falha{display:none}
.tela.sem-previa video,.tela.sem-previa .tela-play{visibility:hidden}
.tela.sem-previa .tela-falha{display:grid;place-items:center;position:absolute;inset:0;border:1px dashed var(--line-2);border-radius:10px;background:var(--paper);font:500 13px/1.4 var(--fm);color:var(--label);text-align:center;padding:16px}
.tela-legenda{margin-top:8px;font-size:12px;color:var(--label);text-align:center}

/* dados da peça */
.peca-dados{display:flex;flex-direction:column;min-width:0}
.bloco{padding:16px 0;border-top:1px solid var(--line)}
.peca-video + .peca-dados{margin-top:20px}
.peca-cab + .peca-dados{margin-top:16px}
.bloco-txt{margin-top:8px;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:52ch}
.ref{display:flex;align-items:center;gap:12px;margin-top:12px}
.ref img{width:44px;height:44px;flex:none;border-radius:var(--r-controle);border:1px solid var(--line);background:var(--paper-2);object-fit:cover}
.ref p{min-width:0;font-size:13px;line-height:1.35;color:var(--label)}
.ref-nome{display:block;margin-top:2px;font:500 13px/1.35 var(--fm);color:var(--ink-2);overflow-wrap:anywhere}
.numero{display:flex;align-items:baseline;gap:12px;margin-top:8px}
.numero-n{font:800 clamp(36px,1vw + 28px,48px)/1 var(--fd);font-stretch:118%;letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums;flex:none}
.numero-ler{font-size:14.5px;line-height:1.45;color:var(--body);max-width:34ch}
.numero-ler b{color:var(--ink);font-weight:600}
.dupla{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px}
.dupla > .bloco + .bloco{padding-left:20px;border-left:1px solid var(--line)}
.dupla .numero{flex-direction:column;gap:8px}

/* ações */
.acoes{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:18px;border-top:1px solid var(--line)}
.acoes .botao-aprovar,.peca-sugerida .acoes .botao{grid-column:1/-1}
.acoes-nota{grid-column:1/-1;font-size:13.5px;line-height:1.45;color:var(--label)}
.msg{font-size:14.5px;line-height:1.45;color:var(--sinal-ink)}
.msg:empty{display:none}
.acoes .msg{grid-column:1/-1}

/* refazer: o motivo numa linha, na própria tela */
.refazer{display:flex;flex-direction:column;gap:10px;padding-top:18px;border-top:1px solid var(--line)}
.refazer input{width:100%;height:52px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-controle);background:var(--white);font-size:16px;color:var(--ink)}
.refazer input::placeholder{color:var(--label)}
.refazer input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(14,17,22,.08)}
.refazer input[aria-invalid="true"]{border-color:var(--sinal)}
.refazer-botoes{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px}
.refazer-botoes .botao{flex:1 1 200px}

/* 10 s com Desfazer */
.desfazer{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 16px;padding:16px 14px 19px 16px;margin-top:18px;border:1px solid var(--ink);border-radius:var(--r-controle);background:var(--white);overflow:hidden;animation:entra .32s var(--ease)}
.desfazer-t{font:700 17px/1.3 var(--fd);color:var(--ink);letter-spacing:-.01em}
.desfazer-d{margin-top:4px;font-size:14.5px;line-height:1.45;color:var(--ink-2);overflow-wrap:anywhere}
.desfazer-s{margin-top:6px;font-size:13.5px;line-height:1.4;color:var(--label)}
.desfazer-s b{font-weight:600;color:var(--ink)}
.desfazer .botao{min-width:132px}
.desfazer-barra{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--ink);transform-origin:left center;animation:encolhe linear forwards}
.desfazer.enviando{grid-template-columns:minmax(0,1fr)}
@keyframes encolhe{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* recibo: o que acabou de sair daqui */
.recibo{display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start;padding:20px 0;border-bottom:1px solid var(--line);animation:entra .4s var(--ease)}
.recibo-marca{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink)}
.recibo-marca svg{width:18px;height:18px;stroke:var(--white);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.recibo-t{font:600 16px/1.35 var(--fd);color:var(--ink)}
.recibo-s{margin-top:2px;font-size:15px;line-height:1.45;color:var(--body)}
.recibo-h{display:block;margin-top:4px;font-size:12px;color:var(--label)}

/* sugestão: formatos e trilhas (do painel de tráfego) */
.grupo{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.op{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 12px;border:1px solid var(--line-2);border-radius:var(--r-controle);background:var(--white);text-align:left;color:var(--ink);transition:border-color .2s,background .2s,color .2s}
.op:hover{border-color:var(--ink)}
.op[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.op:disabled{cursor:not-allowed}
.op:disabled:not([aria-checked="true"]):not(.vetado){opacity:.55}
.op-n{font:800 20px/1 var(--fd);font-stretch:118%;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.op-txt{min-width:0}
.op-nome{display:block;font:500 15px/1.3 var(--ft)}
.op-sub{display:block;margin-top:3px;font:500 12px/1.35 var(--fm);color:var(--label)}
.op[aria-checked="true"] .op-sub{color:#BFC4CB}
.tag{font:600 10.5px/1 var(--fm);letter-spacing:.06em;text-transform:uppercase;padding:5px 6px;border-radius:4px;border:1px solid var(--ink-2);color:var(--ink);white-space:nowrap}
.op[aria-checked="true"] .tag{border-color:#5D636C;color:var(--white)}
.op.vetado{background:var(--paper);border-color:var(--line);color:var(--label)}
.op.vetado .op-n{color:var(--metal)}
.op.vetado .op-nome{text-decoration:line-through;text-decoration-color:var(--line-2)}
.op.vetado .op-sub{font-family:var(--ft);font-size:13px;color:var(--body)}
.tr{display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px}
.op-tr{grid-template-columns:minmax(0,1fr) auto}
.play{display:grid;place-items:center;width:52px;min-height:56px;border:1px solid var(--line-2);border-radius:var(--r-controle);background:var(--white);transition:border-color .2s,background .2s}
.play svg{width:18px;height:18px;fill:var(--ink);stroke:none}
.play:hover{border-color:var(--ink)}
.play[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.play[aria-pressed="true"] svg{fill:var(--white)}
.play:disabled{opacity:.45;cursor:not-allowed}
.rot-ler{letter-spacing:0;text-transform:none;margin-left:6px;color:var(--label)}

/* ================= gavetas recolhidas ================= */
.gavetas{margin-top:clamp(40px,4vw,64px);border-bottom:1px solid var(--line-2)}
.gaveta{border-top:1px solid var(--line-2)}
.gaveta summary{display:grid;grid-template-columns:auto minmax(0,1fr) 40px;align-items:center;gap:16px;padding:18px 0;cursor:pointer;list-style:none;border-radius:4px}
.gaveta summary::-webkit-details-marker{display:none}
.gaveta-n{min-width:1.3em;font:800 clamp(30px,.8vw + 24px,40px)/1 var(--fd);font-stretch:118%;letter-spacing:-.025em;color:var(--metal);font-variant-numeric:tabular-nums}
.gaveta-t{display:block;font:700 clamp(19px,.4vw + 16px,22px)/1.2 var(--fd);color:var(--ink);letter-spacing:-.015em}
.gaveta-ler{display:block;margin-top:4px;font-size:14px;line-height:1.45;color:var(--label);max-width:52ch}
.gaveta-seta{justify-self:end;width:40px;height:40px;padding:10px;border-radius:var(--r-controle);stroke:var(--ink);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease),background .2s}
.gaveta summary:hover .gaveta-seta{background:var(--paper-2)}
.gaveta[open] .gaveta-seta{transform:rotate(180deg)}
.gaveta-lista{list-style:none;padding-bottom:12px}
.gaveta-item{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:18px 0;border-top:1px solid var(--line)}
.gaveta-item h3{font-size:18px;line-height:1.25;letter-spacing:-.015em;margin-top:4px}
.gaveta-cab{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.trava-t{font:600 16px/1.35 var(--fd);color:var(--ink)}
.trava-txt{font-size:15px;line-height:1.55;color:var(--body);max-width:60ch}
.trava-fazer{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:10px 12px;background:var(--white);border:1px solid var(--line);border-radius:var(--r-controle)}
.trava-fazer p{font:500 15px/1.5 var(--ft);color:var(--ink)}
.calmo .trava-t{color:var(--ink-2)}
.decidido-txt{font-size:15px;line-height:1.5;color:var(--ink-2);max-width:60ch}
.decidido-txt b{font-weight:600;color:var(--sinal-ink)}
.hist{font-size:13px;line-height:1.45;color:var(--label);max-width:64ch}
.hist .mono{font-size:12px;color:var(--ink-2);margin-right:6px}
.gaveta-vazia{padding:18px 0;border-top:1px solid var(--line);font-size:15px;color:var(--label)}

.rodape{margin-top:40px;padding:20px 0 32px;font-size:13px;line-height:1.5;color:var(--label)}
.rodape p{max-width:60ch}

/* ================= modal de senha ================= */
.modal{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:100%;height:100%;margin:0;color:var(--body)}
.modal::backdrop{background:rgba(14,17,22,.55);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.modal[open]{display:flex;align-items:center;justify-content:center}
.modal-caixa{position:relative;width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 48px);background:var(--white);border-radius:14px;box-shadow:0 30px 80px -20px rgba(14,17,22,.45);display:flex;flex-direction:column;overflow:hidden;animation:abre .38s var(--ease)}
@keyframes abre{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.modal-corpo{overflow-y:auto;padding:24px 24px 22px;overscroll-behavior:contain}
.modal-corpo h2{font-size:clamp(22px,.6vw + 18px,26px);line-height:1.18}
.senha-lead{margin-top:10px;font-size:15px;line-height:1.55;color:var(--body);max-width:44ch}
.senha-campo{display:block;margin-top:20px}
.senha-campo input{display:block;width:100%;height:52px;margin-top:8px;padding:0 14px;border:1px solid var(--line-2);border-radius:var(--r-controle);background:var(--white);font-size:16px;color:var(--ink)}
.senha-campo input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(14,17,22,.08)}
.senha-erro{min-height:22px;margin-top:10px;font-size:14px;color:var(--sinal-ink)}
.modal-pe{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper)}
body.travado{overflow:hidden}

/* ================= telas maiores ================= */
@media (min-width:600px){
  :root{--topo:64px}
  .marca img{height:24px}
  .marca-nome{padding-left:14px}
  .acoes{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}
  .acoes .botao-aprovar,.peca-sugerida .acoes .botao{grid-column:auto}
  .peca-sugerida .acoes{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  .gaveta-item{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);gap:8px 32px;align-items:start}
  .gaveta-item > :first-child{grid-row:span 3}
}
@media (min-width:900px){
  .peca{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);grid-template-areas:"video cab" "video dados";grid-template-rows:auto 1fr;column-gap:clamp(32px,3.6vw,56px);padding:32px 0 36px}
  .peca-cab{grid-area:cab}
  .peca-video{grid-area:video;margin-top:0}
  .peca-dados{grid-area:dados}
  .peca-video + .peca-dados,.peca-cab + .peca-dados{margin-top:18px}
  .tela.v916,.tela.v45{width:100%}
  .peca-sugerida{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"cab cab" "esq dir";grid-template-rows:auto auto}
  .peca-sugerida .lado-esq{grid-area:esq}
  .peca-sugerida .lado-dir{grid-area:dir}
  .peca-sugerida .lado-esq,.peca-sugerida .lado-dir{margin-top:18px}
  .placar-t.com-n .placar-txt{max-width:none}
  .placar-t{gap:6px 24px}
}
@media (max-width:599px){
  .modal-caixa{width:100%;max-height:calc(100dvh - 56px);border-radius:14px 14px 0 0;align-self:flex-end;animation-name:sobe}
  .modal[open]{align-items:flex-end}
  .modal-corpo{padding:22px 16px 20px}
  .modal-pe .botao{flex:1}
  .desfazer{grid-template-columns:minmax(0,1fr)}
  .desfazer .botao{width:100%}
  .dupla{grid-template-columns:minmax(0,1fr)}
  .dupla > .bloco + .bloco{padding-left:0;border-left:0}
  .dupla .numero{flex-direction:row}
}
@keyframes sobe{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (max-width:360px){
  .marca-nome{font-size:13px}
  .topo-reler span{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .desfazer-barra{display:none}
}