, porque
".tabela tbody tr:hover td" tambem pinta td e apagaria a linha aberta; o
seletor com #id vence tanto o hover quanto a zebra .linha-par sem !important. */
#tabela-pedidos tbody tr.linha-aberta td { background: #EDF5F7; }
/* STICKY no eixo X, encostado a esquerda do SCROLLER (.tabela-wrap).
Ancorado a direita, em 390px o detalhe nascia em x=12..332 enquanto o wrap
estava em scrollLeft=814 para a coluna Estoque ficar clicavel: o conteudo caia
~480px a esquerda da area visivel e a linha "abria vazia" (o
scrollIntoView({block:"nearest"}) do JS so cuida do eixo Y).
Sticky resolve em QUALQUER scrollLeft e em qualquer largura — e no desktop
tambem tira o bloco de pairar no meio da tabela sem se alinhar a coluna
nenhuma: encostado a esquerda ele le como continuacao da linha.
O min() usa o container query do .tabela-wrap (cqi = largura REAL visivel,
nao a da tabela); 24px = padding do | . */
.est-det-in {
position: sticky; left: 12px;
display: grid; gap: 10px; padding-top: 2px;
max-width: min(620px, calc(100cqi - 24px));
opacity: 0; transform: translateY(-4px);
transition: opacity .16s ease-out, transform .16s ease-out;
}
.est-det.est-det-on .est-det-in { opacity: 1; transform: none; }
.est-det-item {
display: grid; grid-template-columns: 84px minmax(0, 1fr);
gap: 12px; align-items: start;
}
.est-det-rot {
padding-top: 2px; font-size: 11px; font-weight: 700; color: var(--dim);
text-transform: uppercase; letter-spacing: .4px;
}
.est-det-val { font-size: 12.5px; color: var(--texto); }
.est-sep { color: var(--dim); margin: 0 3px; }
.est-det-rodape { margin: 0; padding-left: 96px; font-size: 12px; color: var(--dim); }
/* barras do detalhe: mesma gramatica de .barra, classes proprias.
Fill teal (e nao ambar): la o bar significa FALTA, aqui significa CHEGOU. */
.est-barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.est-barra {
display: grid; grid-template-columns: minmax(78px, 126px) minmax(0, 1fr) auto;
align-items: center; gap: 10px;
}
.est-barra-loja {
/* sem elipse: nome de loja nao se corta em lugar nenhum. Aqui o rotulo tem coluna
estreita (78-126px), entao ele QUEBRA em duas linhas — a barra ao lado continua
alinhada pelo center e a linha so cresce alguns pixels. */
font-size: 12px; font-weight: 600; color: var(--texto);
}
/* MESMA especificidade (0,1,0) que .est-lugar-transito e DEPOIS dele no arquivo: a
regra de cor da barra ganhava por ordem e o "(em transito)" saia em tinta cheia
assim que a linha era ABERTA — na celula ele era --dim e no detalhe virava uma
loja de verdade, a colisao que os parenteses existem para desfazer. Compondo as
duas classes (0,2,0) a cor do deposito ganha em qualquer ordem, sem !important. */
.est-barra-loja.est-lugar-transito { color: var(--dim); }
.est-barra-trilho {
height: 8px; border-radius: 999px; background: var(--painel-claro); overflow: hidden;
}
.est-barra-fill {
display: block; height: 100%; border-radius: 999px; background: var(--teal);
transition: width .25s cubic-bezier(.22,1,.36,1);
}
.est-barra-num {
display: flex; align-items: baseline; gap: 5px; justify-content: flex-end;
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.est-barra-num b { font-size: 13px; font-weight: 700; color: var(--texto); }
.est-barra-num small { font-size: 11px; color: var(--dim); }
/* CONTAINER query, nunca @media: quem sabe o espaco REAL e o .tabela-wrap (o
proprio scroller). O viewport nao serve — a tabela nao encolhe (11 colunas,
~1170px), ela ROLA. */
@container tabela (max-width: 520px) {
/* trilho de ~100px com radius 999px numa barra de 14px vira BOLINHA e le como
bullet/radio, nao como barra. Estreito demais para comparar, o trilho sai e
sobra o que importa: "LOJA .... N un.". */
.est-barra { grid-template-columns: minmax(0, 1fr) auto; }
.est-barra-trilho { display: none; }
/* sem a coluna do rotulo a esquerda, 96px de recuo viravam um vao morto */
.est-det-rodape { padding-left: 0; }
}
/* ---- legenda da coluna (discreta, acima da tabela) ----
Cada par (termo + definicao) e um ITEM que nunca se parte: montada como texto
corrido com "·", em 980px o termo terminava a linha 1 e a definicao comecava a
linha 2 (termo divorciado da definicao) e em 390px sobrava um "·" orfao abrindo
linha. O separador virou ESPACAMENTO (gap), nao caractere. */
.est-legenda {
margin: 0 0 8px; font-size: 11px; line-height: 1.5; color: var(--dim);
display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 18px;
}
.est-legenda-item { display: inline-block; max-width: 100%; }
.est-legenda-tit { display: inline-block; color: var(--texto); font-weight: 700; }
.est-legenda b { color: var(--teal); font-weight: 700; }
.est-legenda i { color: var(--dim); font-style: normal; font-weight: 700; }
.est-legenda i.est-legenda-transito { color: var(--azul-info); }
.est-legenda i.est-legenda-alerta { color: var(--amarelo-forte); }
@media (prefers-reduced-motion: reduce) {
.atend-fill, .split-proc, .split-nproc, .barra-fill,
.split-est, .split-transito, .split-sem,
.est-barra-fill, .est-seta { transition: none; }
.tabela-scroll::before, .tabela-scroll::after { transition: none; }
/* a revelacao inline aparece pronta, sem deslocamento */
.est-det-in { transition: none; opacity: 1; transform: none; }
}
|