/* css/pedido-andamento.css — "Teus pedidos" e a resposta "já tem" no catálogo do app
   (js/pedido-andamento.js). Usa as variáveis e as peças (.card, .card-titulo, .btn, .btn-texto) do css/style.css. */

.meus-pedidos-app { display: flex; flex-direction: column; gap: 8px; }
.meus-pedidos-app .card-titulo { margin-bottom: 0; }

.ped-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ped-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--borda);
  background: rgba(0, 0, 0, 0.18);
}
.ped-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ped-texto b { overflow-wrap: anywhere; }
.ped-texto small { color: var(--texto-3); font-size: 0.84rem; }
/* a etapa na esteira e quanto falta: "Separando a voz · fica pronta em ~2 min" (js/pedido-etapa.js) */
.ped-texto .ped-forno { margin-top: 2px; color: var(--texto-2); font-weight: 600; overflow-wrap: anywhere; }
.ped-texto .ped-forno[hidden] { display: none; }
.ped-texto .ped-forno .forno-previsao { white-space: nowrap; } /* "~4 min" nunca quebra no meio */

.ped-andamento {
  flex: none;
  font-size: 0.74rem;
  font-weight: 800;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid var(--borda-2);
  color: var(--texto-2);
}
.ped-and-anotado { color: var(--ouro); border-color: rgba(255, 200, 61, 0.4); background: rgba(255, 200, 61, 0.07); }
.ped-and-fila { color: var(--ciano); border-color: rgba(61, 224, 255, 0.4); background: rgba(61, 224, 255, 0.07); }
.ped-and-convertendo { color: var(--magenta); border-color: rgba(255, 61, 154, 0.45); background: rgba(255, 61, 154, 0.08); }
.ped-and-pronta { color: var(--verde); border-color: rgba(61, 255, 168, 0.4); background: rgba(61, 255, 168, 0.08); }
/* "não deu" do robô = o dono vai procurar à mão (21/10/2026): amarelo, não vermelho. Vermelho é só o "Não vai dar" */
.ped-and-naoDeu { color: var(--ouro); border-color: rgba(255, 200, 61, 0.4); background: rgba(255, 200, 61, 0.07); }
.ped-and-dispensado { color: var(--vermelho); border-color: rgba(255, 92, 108, 0.35); }
/* celular de 360 px: a etiqueta não espreme o nome ("Dispe / nsado", uma palavra por linha). Vai pra linha de baixo */
@media (max-width: 420px) {
  .ped-item { flex-wrap: wrap; row-gap: 6px; }
  .ped-texto { flex: 1 1 100%; }
  .ped-andamento { white-space: nowrap; }
  .ped-item .ped-cantar, .ped-item .ped-ok { margin-left: auto; }
}

.ped-cantar { flex: none; min-height: 40px; padding: 0 14px; }
.ped-ok { flex: none; min-height: 40px; }

/* "já tem": no lugar do "Anotado!" */
.ped-jatem-texto { display: block; color: var(--texto); font-weight: 700; margin-bottom: 8px; }
.ped-jatem-lista { display: flex; flex-direction: column; gap: 8px; }
.ped-jatem-item {
  width: 100%;
  justify-content: flex-start;
  flex-wrap: wrap;
  text-align: left;
  gap: 2px 10px;
  min-height: 52px;
}
.ped-jatem-item small { color: var(--texto-3); font-weight: 600; }
.ped-jatem-acao { margin-left: auto; color: var(--ciano); font-weight: 800; }
.ped-forcar { margin-top: 4px; min-height: 40px; }

@media (max-width: 380px) {
  .ped-item { flex-wrap: wrap; }
  .ped-cantar { width: 100%; }
}

/* "não deu" no PC do dono: o atalho pra escolher o vídeo na mão */
.ped-escolher { flex: none; margin-left: auto; min-height: 40px; text-decoration: none; }
.ped-item .ped-escolher + .ped-ok { margin-left: 8px; }

/* (22/10/2026, pedido do dono: "pedi errado e começou a baixar outra; dá pra cancelar ali?") o CANCELAR de cada pedido
   que ainda não ficou pronto (js/pedido-cancelar.js): discreto (texto com contorno fino, sem cor de destaque) e
   tocável (44 px). 1º toque arma em vermelho ("Cancelar? Toca de novo", 4 s); o 2º cancela */
.ped-cancelar {
  flex: none;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--borda-2);
  border-radius: 999px;
  color: var(--texto-2);
  font-size: 0.86rem;
  max-width: 8.4em;
  line-height: 1.15;
  white-space: normal;
  text-align: center;
}
/* armado: "Cancelar?" em cima e "Toca de novo" embaixo (o js/pedido-cancelar.js usa espaço que não quebra no "Toca de
   novo"): quase a mesma largura do "Cancelar", encostado na direita, e a linha não quebra. O 2º toque cai no mesmo lugar */
.ped-cancelar:hover { color: var(--texto); border-color: rgba(255, 255, 255, 0.32); }
.ped-cancelar[data-estado="armado"] { color: #fff; background: #c93a49; border-color: var(--vermelho); }
.ped-cancelar[data-estado="enviando"] { opacity: 0.7; cursor: progress; }
.ped-item .ped-escolher + .ped-cancelar,
.ped-item .ped-cancelar + .ped-ok { margin-left: 8px; }
@media (max-width: 420px) {
  .ped-item .ped-cancelar { margin-left: auto; }
  .ped-item .ped-cancelar + .ped-ok { margin-left: 8px; }
}