/* ============ WMS · SM PRO — painel ============
   Em cima, o mapa do armazém com «Pede sua atenção» e os pedidos por etapa ao lado. No meio, a
   faixa de números. Embaixo, os últimos movimentos, os sete dias e a equipe.
   A placa e a faixa do título numerado estão em componentes.css; o mapa, em mapa.css. */

/* As duas colunas fecham juntas embaixo: na coluna do lado, um dos painéis estica (a pendência em cima, a equipe embaixo). */
.painel-cima, .painel-baixo { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(300px, 1fr); gap: 12px; align-items: stretch; }
.painel-cima > .esqueleto { height: 100%; min-height: 240px; }
.painel-lado { display: grid; gap: 12px; min-width: 0; }
.painel-cima > .painel-lado { grid-template-rows: 1fr auto; }
.painel-baixo > .painel-lado { grid-template-rows: auto 1fr; }

/* ---------- Pede sua atenção: um ladrilho por pendência, na cor do estado ----------
   Quantas são (o número grande), o que são e o verbo que resolve. Os ladrilhos dividem a altura da placa,
   até um limite, para ela não ficar com um vazio embaixo quando estica ao lado do mapa. */
.atencao-area { display: flex; flex-direction: column; }
.atencao-lista { flex: 1; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.atencao-linha {
  flex: 1 1 auto; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  min-height: 68px; max-height: 132px; padding: 12px 14px 12px 12px; border-radius: 12px; color: var(--tinta); text-decoration: none;
  background: color-mix(in oklab, var(--c) 9%, var(--placa));
  transition: background-color var(--rapido) var(--curva), transform var(--rapido) var(--curva);
}
.atencao-linha:hover { background: color-mix(in oklab, var(--c) 15%, var(--placa)); }
.atencao-linha:active { transform: scale(.99); }
.atencao-conta { font: 700 27px/1 var(--fonte); letter-spacing: -.02em; text-align: center; color: color-mix(in oklab, var(--c) 78%, var(--forte)); }
.atencao-texto { display: grid; gap: 2px; min-width: 0; }
.atencao-texto strong { font-size: 14.5px; line-height: 1.35; }
.atencao-texto small { font-size: 12.5px; line-height: 1.4; color: var(--tinta); }
.atencao-texto small b { font: 650 12.5px var(--fonte); color: color-mix(in oklab, var(--c) 72%, var(--forte)); }
.atencao-ir {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 14px; border-radius: var(--raio-pilula);
  font: 580 13px/1 var(--fonte); color: var(--forte); background: var(--placa); box-shadow: var(--sombra-1);
  transition: background-color var(--rapido) var(--curva), color var(--rapido) var(--curva);
}
.atencao-ir .icone { width: 14px; height: 14px; transition: transform var(--medio) var(--curva); }
.atencao-linha:hover .atencao-ir { color: var(--sobre-acao); background: var(--acao); }
.atencao-linha:hover .atencao-ir .icone { transform: translateX(2px); }
.atencao-vazia { display: flex; align-items: center; gap: 10px; color: var(--tinta); }

/* ---------- Números: os ladrilhos do SM PRO, numa faixa só (número em cima, rótulo em mono embaixo) ---------- */
.numeros { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--placa); border: 1px solid var(--fio); border-radius: var(--raio-placa); box-shadow: var(--sombra-1), var(--brilho); }
.numero-cel { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; gap: 1px 12px; min-width: 0; padding: 12px var(--bx) 12px 14px; border-left: 1px solid var(--fio); }
.numero-cel .figura { --lado: 44px; grid-row: 1 / span 3; align-self: start; }
.numero-cel:first-child { border-left: 0; }
.numero-cel > span { font: var(--rotulo); color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.numero-cel strong { font: 680 24px/1.2 var(--fonte); letter-spacing: -.02em; }
.numero-cel small { font-size: 12px; line-height: 1.35; color: var(--apagado); }
.numero-faixa { display: inline-flex; align-items: center; gap: 7px; }
.numero-faixa[class*="tom-"] { color: var(--tinta); }

/* ---------- Pedidos por etapa: cinza = aberto, âmbar = em separação, azul = separado e conferido, verde = expedido ---------- */
.etapas-barra { display: flex; gap: 2px; height: 8px; background: var(--fio); border-radius: var(--raio-pilula); overflow: hidden; }
.etapa-seg { --c: var(--apagado); min-width: 6px; background: var(--c); transition: flex-grow 600ms var(--curva); }
.etapas { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; }
.etapas li { --c: var(--apagado); display: grid; gap: 2px; min-width: 0; }
.etapas b { display: flex; align-items: center; gap: 7px; font: 680 15px/1.3 var(--fonte); letter-spacing: -.015em; }
.etapas b::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--c); }
.etapas span { font-size: 11.5px; line-height: 1.3; color: var(--apagado); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.etapa-seg, .etapas li).separando { --c: var(--ambar); }
:is(.etapa-seg, .etapas li).separado { --c: var(--azul); }
:is(.etapa-seg, .etapas li).conferido { --c: color-mix(in oklab, var(--azul) 50%, var(--forte)); }
:is(.etapa-seg, .etapas li).expedido { --c: var(--verde); }

/* ---------- Últimos movimentos: tipo, o quê e de quem, onde, quanto, quando e quem ---------- */
.movimentos { list-style: none; margin: calc(var(--by) * -1) calc(var(--bx) * -1); padding: 0; }
.movimentos li {
  display: grid; grid-template-columns: 7.6rem minmax(0, 1.1fr) minmax(0, 1.3fr) 4rem 6.2rem; gap: 12px; align-items: center;
  padding: 8px var(--bx); border-top: 1px solid var(--fio);
}
.movimentos li:first-child { border-top: 0; }
.movimentos .status { justify-self: start; }
.mov-item, .mov-quando { display: grid; min-width: 0; line-height: 1.35; }
.mov-item b, .mov-onde, .mov-qtd { font: 400 12.5px var(--mono); color: var(--forte); }
.mov-item b, .mov-item small, .mov-onde { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mov-item small, .mov-quando small { font-size: 12px; color: var(--apagado); }
.mov-qtd { text-align: right; font-weight: 700; }
.mov-quando { text-align: right; font: 400 12px/1.5 var(--fonte); white-space: nowrap; }
.mov-quando small { font-family: var(--fonte); }

/* ---------- Sete dias: duas séries lado a lado, cada uma com o total e uma coluna por dia ---------- */
.series { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.serie p { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 12px; color: var(--apagado); }
.serie strong { font: 680 15px/1 var(--fonte); letter-spacing: -.015em; }
.colunas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; height: 76px; align-items: end; }
.coluna { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 6px; height: 100%; min-width: 0; text-align: center; }
.coluna small { font: 500 11px var(--fonte); color: var(--apagado); }
.coluna-trilho { display: flex; align-items: flex-end; height: 100%; border-bottom: 1px solid var(--fio); }
.coluna-barra { width: 100%; background: var(--tinta); transform-origin: bottom; transition: height 520ms var(--curva), background-color var(--rapido) var(--curva); }
.coluna:hover .coluna-barra { background: var(--forte); }
.coluna:hover small { color: var(--forte); }

/* ---------- Equipe em barras (.trilho e .barra estão em componentes.css) ---------- */
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ranking li { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) 3rem; gap: 12px; align-items: center; }
.ranking .rot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking b { text-align: right; font: 400 12.5px var(--mono); }

@media (max-width: 960px) {
  .painel-cima, .painel-baixo { grid-template-columns: 1fr; }
  .painel-cima > .painel-lado, .painel-baixo > .painel-lado { grid-template-rows: none; }
  .numeros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .numero-cel:nth-child(n + 4) { border-top: 1px solid var(--fio); }
  .numero-cel:nth-child(4) { border-left: 0; }
}
@media (max-width: 719px) {
  /* No celular a pendência vem antes do desenho: é o que o operador veio fazer. */
  .painel-cima > .painel-lado { order: -1; }
  .numeros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numero-cel:nth-child(n + 3) { border-top: 1px solid var(--fio); }
  .numero-cel:nth-child(4) { border-left: 1px solid var(--fio); }
  .numero-cel:nth-child(odd) { border-left: 0; }
  .numero-cel:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .atencao-linha { min-height: 56px; }
  .atencao-ir { height: 36px; }
  .movimentos li { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .movimentos .status { grid-row: 1; grid-column: 1; }
  .mov-item { grid-row: 2; grid-column: 1; }
  .mov-onde { grid-row: 3; grid-column: 1; }
  .mov-qtd { grid-row: 1; grid-column: 2; }
  .mov-quando { grid-row: 2 / span 2; grid-column: 2; align-self: start; }
  .ranking li { grid-template-columns: minmax(0, 7rem) minmax(0, 1fr) 2.5rem; }
}