/* ============================================================
   PAINEL POR PESSOA — a aparência dos blocos de resumo
   ------------------------------------------------------------
   Entrou em 30/07/2026, com "A oficina agora" e "Meu mês".

   POR QUE ARQUIVO SEPARADO, E NÃO DENTRO DO portal.css
   O portal.css tem 113 mil caracteres e é o arquivo mais
   disputado do projeto — o Alisson trabalha de mais de um
   computador e mais de uma sessão pode ter o mesmo arquivo
   aberto. Em 30/07/2026 ele estava sendo editado por outra
   sessão enquanto este bloco era escrito. Duas mãos no mesmo
   arquivo grande é como se perde trabalho.

   Isto NÃO é exceção à regra da casa. Continua valendo:
     · nenhuma cor chumbada — tudo sai dos tokens do :root
     · os tokens moram no portal.css, que é o dono deles
     · isto aqui é a MESMA página, não iframe, então herda tudo

   ⚠️ Se um dia estes blocos virarem tela em PORTAL/apps/, aí sim
   vão precisar declarar a paleta dentro deles: iframe não herda
   variável de CSS do pai. Aqui, herda.
   ============================================================ */

/* ------------------------------------------------------------
   OS QUATRO QUADROS DA OFICINA
   ------------------------------------------------------------
   Cartão-botão, não número solto: cada um leva para a fila dele.
   O alvo de toque é o bloco inteiro — dedo não é ponteiro.
   ------------------------------------------------------------ */
.pnl-quadros{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
}

.pnl-quadro{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-rows:auto auto auto;
  gap:2px 10px;
  align-items:center;
  text-align:left;
  padding:12px 14px;
  /* Alvo de toque: bem acima dos 40px da regra da casa. */
  min-height:76px;
  /* Filho de grid tem min-width:auto e se recusa a encolher abaixo
     do próprio conteúdo. Sem isto, "entregas e instalações no
     cliente" empurra a coluna e o CORPO DA PÁGINA rola de lado no
     celular — o defeito que já custou caro neste projeto. */
  min-width:0;
  background:var(--papel);
  border:1.5px solid var(--linha);
  border-radius:var(--r-p);
  color:var(--tinta-2);
  cursor:pointer;
  transition:border-color var(--transicao),background var(--transicao),
             transform .1s;
}
.pnl-quadro:hover{ border-color:var(--roxo-medio); background:var(--papel-2); }
.pnl-quadro:active{ transform:scale(.985); }
.pnl-quadro:focus-visible{ outline:2px solid var(--roxo); outline-offset:2px; }

.pnl-quadro-ic{
  grid-row:1 / span 3;
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; flex:0 0 auto;
  border-radius:var(--r-p);
  background:var(--lavanda);
  color:var(--roxo);
}
.pnl-quadro-num{
  font-size:23px; font-weight:700; line-height:1.1;
  color:var(--tinta);
}
.pnl-quadro-rot{
  font-size:12.5px; font-weight:600; color:var(--tinta);
}
.pnl-quadro-apoio{
  font-size:10.5px; line-height:1.35; color:var(--tinta-3);
  /* Duas linhas no máximo: a terceira empurra o quadro e desalinha
     a fileira inteira. O título completo fica no `title`. */
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Quadro zerado continua clicável — a fila vazia é informação, e
   sumir com ela faria a fileira dançar a cada carregamento. */
.pnl-quadro.pnl-vazio .pnl-quadro-num{ color:var(--tinta-3); }
.pnl-quadro.pnl-vazio .pnl-quadro-ic{
  background:var(--papel-2); color:var(--tinta-3);
}

/* ------------------------------------------------------------
   BLOCO COM TÍTULO — travadas, esperando, clientes, produtos
   ------------------------------------------------------------ */
.pnl-bloco{ margin-top:16px; min-width:0; }

.pnl-bloco-topo{
  display:flex; align-items:center; gap:8px;
  flex-wrap:wrap;
  margin-bottom:9px;
  color:var(--roxo);
}
.pnl-bloco-topo strong{
  font-size:12px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase;
  color:var(--tinta);
}
.pnl-bloco-apoio{
  font-size:11px; color:var(--tinta-3);
  /* Empurrado para a direita quando cabe; quebra para baixo quando
     não cabe, em vez de esticar a linha e rolar de lado. */
  margin-left:auto;
}

/* ------------------------------------------------------------
   AS LINHAS DE DESTAQUE DA OFICINA
   ------------------------------------------------------------ */
.pnl-linhas{ display:flex; flex-direction:column; gap:6px; }

.pnl-linha{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  text-align:left;
  padding:9px 12px;
  min-height:44px;
  min-width:0;
  background:var(--papel);
  border:1px solid var(--linha);
  border-radius:var(--r-p);
  color:var(--tinta-2);
  cursor:pointer;
  transition:border-color var(--transicao),background var(--transicao);
}
.pnl-linha:hover{ border-color:var(--roxo-medio); background:var(--papel-2); }
.pnl-linha:focus-visible{ outline:2px solid var(--roxo); outline-offset:2px; }

.pnl-linha-fila{
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10px; letter-spacing:.03em;
  padding:3px 7px; border-radius:6px;
  background:var(--roxo-veu); color:var(--roxo-medio);
  white-space:nowrap;
}
/* BLOCO, E NÃO FLEX — e a diferença é um defeito que ficou escondido
   até 03/08/2026.

   Era `display:flex; flex-direction:column`. O nome do cliente entra
   aqui como texto SOLTO, sem tag em volta, e num contêiner flex texto
   solto vira item anônimo — que `text-overflow:ellipsis` não alcança.
   O `<em>` da máquina, esse sim, tinha tag e reticências próprias, e
   por isso o defeito nunca apareceu nele.

   Resultado com `overflow:hidden`: "Serralheria Norte do Litoral
   Paulista" media 209px dentro de 206px a 360px e o excesso sumia —
   sem rolagem, sem erro, sem aviso. É a mesma armadilha da coluna do
   comparativo, e foi o teste de tela que a pegou, medindo.

   Em bloco, as reticências valem para o texto solto também. O `gap`
   do flex vira `margin-top` no `<em>`: mesmo espaço, sem flex. */
.pnl-linha-nome{
  min-width:0;
  display:block;
  font-size:12.5px; color:var(--tinta);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pnl-linha-nome em{
  display:block; margin-top:1px;
  font-style:normal; font-size:10.5px; color:var(--tinta-3);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pnl-linha-quem{
  font-size:11px; color:var(--tinta-3);
  white-space:nowrap;
}

/* A linha que NÃO leva a lugar nenhum: a ordem é da pessoa, mas o
   módulo não está liberado para ela. Mesmo dado, sem a promessa de
   clique — mão de ponteiro em cima do que não abre ensina a não
   clicar no que abre. */
.pnl-linha-parada{ cursor:default; }
.pnl-linha-parada:hover{
  border-color:var(--linha); background:var(--papel);
}

/* ------------------------------------------------------------
   DUAS LISTAS LADO A LADO — clientes e produtos
   ------------------------------------------------------------
   Viram uma coluna no celular. `minmax(0,1fr)` e não `1fr`: com
   `1fr` o filho não encolhe abaixo do conteúdo e nome comprido de
   cliente ("M&I ELECTRIC BRAZIL SISTEMAS E SERVIÇOS...") estoura a
   coluna e rola a página de lado.
   ------------------------------------------------------------ */
.pnl-duas{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:4px 22px;
}
.pnl-duas > .pnl-bloco{ min-width:0; }

/* O código do produto. Amarelo é tempero: aqui ele marca o que
   vale olhar — o código que o estoque usa para achar a peça. */
.pnl-sku{
  font-size:10px; letter-spacing:.02em;
  padding:2px 6px; border-radius:5px;
  background:var(--amarelo-veu); color:var(--amarelo-tinta);
  white-space:nowrap; flex:0 0 auto;
}

/* ------------------------------------------------------------
   MODELOS QUE PASSARAM POR MIM
   ------------------------------------------------------------
   Um por linha viraria rolo: o técnico monta oito ou dez modelos
   e a lista comeria o painel inteiro. Em ficha, os dez cabem em
   três linhas no celular.

   O NÚMERO É AMARELO, o nome não. Amarelo é tempero: marca o que
   vale olhar — aqui, quantas vezes. Ficha inteira amarela vira
   semáforo e perde a força.
   ------------------------------------------------------------ */
.pnl-chips{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.pnl-chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 10px; border-radius:20px;
  background:var(--papel-2); border:1px solid var(--linha);
  font-size:12px; color:var(--tinta-2); max-width:100%;
}
.pnl-chip b{
  color:var(--tinta); font-weight:600; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pnl-chip .mono{
  font-size:11px; padding:1px 6px; border-radius:5px;
  background:var(--amarelo-veu); color:var(--amarelo-tinta);
  flex:0 0 auto;
}

/* O rodapé que confessa o que ficou de fora. Discreto de
   propósito — é ressalva, não manchete —, mas nunca ausente. */
.pnl-sobra{
  margin:10px 0 0; font-size:11.5px; line-height:1.5; color:var(--tinta-3);
}

/* ------------------------------------------------------------
   ESTADO VAZIO / RECADO
   ------------------------------------------------------------ */
.pnl-nada{
  display:flex; align-items:flex-start; gap:10px;
  flex-wrap:wrap;
  padding:14px 16px;
  background:var(--papel-2);
  border:1px dashed var(--linha-forte);
  border-radius:var(--r-p);
  font-size:12.5px; line-height:1.55; color:var(--tinta-2);
}
.pnl-nada > span{ flex:1 1 220px; min-width:0; }
.pnl-nada svg{ flex:0 0 auto; color:var(--tinta-3); margin-top:1px; }
.pnl-nada .botao{ flex:0 0 auto; }

@media (max-width:520px){
  /* Dois quadros por linha no celular pequeno, nunca um só: quatro
     quadros empilhados empurram o resto do painel para fora da
     primeira tela, e o que interessa é ver as contagens de cara. */
  .pnl-quadros{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pnl-quadro{ padding:10px 11px; min-height:70px; }
  .pnl-quadro-num{ font-size:20px; }
  .pnl-quadro-apoio{ display:none; }

  /* O responsável sai; o cliente e a fila ficam. Texto auxiliar
     pode sumir, informação de decisão não. */
  .pnl-linha{ grid-template-columns:auto 1fr; }
  .pnl-linha-quem{ display:none; }
}