/*
 * esteira3d — folha única, escrita à mão.
 *
 * Mobile-first de verdade: a tela de referência é o celular em pé, ao lado da
 * impressora, e as regras de tela larga vêm depois, num único @media no fim.
 * Não há build de CSS; o que está aqui é o que o navegador recebe.
 *
 * Os alvos de toque têm 2.75rem (44px) de altura mínima, que é o mínimo em que
 * o dedo acerta o botão de primeira.
 */

:root {
  color-scheme: light dark;

  --fundo: #f4f5f7;
  --superficie: #ffffff;
  --borda: #d8dce2;
  --texto: #1b1f24;
  --texto-fraco: #5c6672;

  --acento: #1565c0;
  --acento-texto: #ffffff;

  --ok: #1b7f4b;
  --erro: #b3261e;
  --alerta: #8a5a00;

  /* Prioridade: a cor é o peso, do mais quente para o mais frio. */
  --urgente: #b3261e;
  --alta: #b35c00;
  --media: #1565c0;
  --baixa: #5c6672;

  --raio: 0.6rem;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.08), 0 1px 8px rgb(0 0 0 / 0.04);
}

/* A oficina à noite. Só as variáveis mudam; nenhuma regra abaixo sabe o tema. */
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #14171a;
    --superficie: #1e2226;
    --borda: #343a41;
    --texto: #e8eaed;
    --texto-fraco: #9aa4af;

    --acento: #4a9eff;
    --acento-texto: #08121f;

    --ok: #4ac47f;
    --erro: #ff6b61;
    --alerta: #e0a63a;

    --urgente: #ff6b61;
    --alta: #e08a3a;
    --media: #4a9eff;
    --baixa: #9aa4af;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* O iOS aumenta a fonte sozinho quando o celular deita. */
  -webkit-text-size-adjust: 100%;
}

/* --- cabeçalho ---------------------------------------------------------- */

.cabecalho {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.cabecalho__menu {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  /* Rola na horizontal em vez de quebrar linha: no celular estreito o menu
     inteiro não cabe, e quebrar empurraria a fila para baixo da dobra. */
  overflow-x: auto;
  padding: 0 0.5rem;
}

.cabecalho__menu a,
.cabecalho__sair button {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.7rem;
  white-space: nowrap;
  color: var(--texto);
  text-decoration: none;
  font-size: 0.95rem;
}

.cabecalho__sair {
  margin: 0 0 0 auto;
  padding-left: 0.5rem;
}

.cabecalho__sair button {
  background: none;
  border: 0;
  color: var(--texto-fraco);
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
}

/* --- estrutura ---------------------------------------------------------- */

.conteudo {
  max-width: 60rem;
  margin: 0 auto;
  padding: 0.75rem 0.75rem 4rem;
}

.titulo {
  margin: 0.5rem 0 1rem;
  font-size: 1.4rem;
}

.vazio {
  margin: 2rem 0;
  text-align: center;
  color: var(--texto-fraco);
}

.contagem {
  margin: 0 0 0.75rem;
  color: var(--texto-fraco);
  font-size: 0.85rem;
}

/* --- avisos ------------------------------------------------------------- */

.avisos {
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.aviso {
  margin: 0 0 0.5rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--raio);
  border-left: 4px solid var(--texto-fraco);
  background: var(--superficie);
  box-shadow: var(--sombra);
  font-size: 0.95rem;
}

.aviso--success { border-left-color: var(--ok); }
.aviso--warning { border-left-color: var(--alerta); }
.aviso--error   { border-left-color: var(--erro); }

/* --- filtros ------------------------------------------------------------ */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.filtros__campo {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  /* Dois por linha no celular; no desktop o @media do fim solta. */
  flex: 1 1 8rem;
}

.filtros__campo label {
  color: var(--texto-fraco);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.filtros__busca { flex-basis: 100%; }

select,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="password"],
textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--texto);
  /* 1rem = 16px: abaixo disso o Safari do iPhone dá zoom ao focar o campo. */
  font: inherit;
}

textarea { min-height: 5rem; resize: vertical; }

/* --- cartões da fila ---------------------------------------------------- */

.cartao {
  margin-bottom: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--borda);
  border-left: 4px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

/* O que está na impressora agora. Além de vir no topo pela ordenação do
   queryset, fica marcado: é o cartão que se procura de longe. */
.cartao--imprimindo {
  border-left-color: var(--ok);
  background: color-mix(in srgb, var(--ok) 6%, var(--superficie));
}

.cartao__nome {
  margin: 0.4rem 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.cartao__selos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.cartao__meta {
  margin: 0.35rem 0 0;
  color: var(--texto-fraco);
  font-size: 0.85rem;
}

.cartao__obs {
  margin: 0.5rem 0 0;
  padding-left: 0.6rem;
  border-left: 2px solid var(--borda);
  color: var(--texto-fraco);
  font-size: 0.9rem;
  white-space: pre-line;
}

.cartao__acoes {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* --- selos -------------------------------------------------------------- */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* O número é o valor de Prioridade no banco: 1 urgente, 2 alta, 3 média,
   4 baixa. É peso, não texto — ver o IntegerChoices do model. */
.selo--p1 { color: var(--urgente); border-color: currentColor; }
.selo--p2 { color: var(--alta);    border-color: currentColor; }
.selo--p3 { color: var(--media);   border-color: currentColor; }
.selo--p4 { color: var(--baixa);   border-color: currentColor; }

.selo--imprimindo { color: var(--ok); border-color: currentColor; }
.selo--sim { color: var(--ok); border-color: currentColor; }
.selo--nao { color: var(--texto-fraco); }

/* --- botões ------------------------------------------------------------- */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.botao--principal {
  border-color: var(--acento);
  background: var(--acento);
  color: var(--acento-texto);
}

.botao--acao {
  /* Play e finalizar dividem a largura do cartão: no celular o polegar acerta
     um alvo grande sem mirar. */
  flex: 1;
}

.botao--ok {
  border-color: var(--ok);
  background: var(--ok);
  color: #fff;
}

/* --- cores -------------------------------------------------------------- */

.cor {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-right: 0.5rem;
  font-size: 0.9rem;
}

.cor__bolinha {
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid var(--borda);
  border-radius: 50%;
  /* Sem isto o inline-flex some com o quadrado vazio. */
  flex: none;
}

/* --- referência do produto (formulário) --------------------------------- */

.referencia {
  margin: 0.25rem 0 0;
  padding: 0.75rem;
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  color: var(--texto-fraco);
  font-size: 0.9rem;
}

.referencia dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0;
}

.referencia dt { font-weight: 600; }
.referencia dd { margin: 0; color: var(--texto); }

/* --- formulário --------------------------------------------------------- */

.formulario { margin: 0; }
.formulario--login { max-width: 22rem; }

.campo { margin: 0 0 0.9rem; }

.campo label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  font-size: 0.9rem;
}

/* São <span> e não <p> porque ficam dentro do <p class="campo">: parágrafo
   dentro de parágrafo o navegador desmonta sozinho. */
.campo__ajuda {
  display: block;
  margin-top: 0.25rem;
  color: var(--texto-fraco);
  font-size: 0.8rem;
}

.campo__erro {
  display: block;
  margin-top: 0.25rem;
  color: var(--erro);
  font-size: 0.85rem;
}

/* --- lista de filamentos ------------------------------------------------ */

.filamento {
  margin-bottom: 0.75rem;
  padding: 0.85rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--superficie);
  box-shadow: var(--sombra);
}

.filamento__nome {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.filamento__rolos {
  margin: 0.4rem 0 0;
  color: var(--texto-fraco);
  font-size: 0.85rem;
}

/* Os três preços lado a lado, que é como a decisão de precificação é tomada:
   a média é a que vale, as outras duas são contexto. */
.precos {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--borda);
}

.preco { flex: 1; }

.preco dt {
  color: var(--texto-fraco);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.preco dd {
  margin: 0.1rem 0 0;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.preco--medio dd { color: var(--acento); }

.preco__onde {
  display: block;
  color: var(--texto-fraco);
  font-size: 0.75rem;
  font-weight: 400;
}

/* --- htmx --------------------------------------------------------------- */

/* Enquanto a requisição está no ar. Rede de oficina é lenta o suficiente para
   alguém clicar duas vezes achando que não pegou. */
.htmx-request.lista,
.lista.htmx-request {
  opacity: 0.5;
  transition: opacity 0.1s linear;
}

.htmx-request.botao { opacity: 0.6; }

/* --- tela larga --------------------------------------------------------- */

@media (min-width: 40rem) {
  .conteudo { padding: 1.25rem 1.25rem 4rem; }
  .filtros__campo { flex: 0 1 12rem; }
  .filtros__busca { flex-basis: 18rem; }
  .cartao__acoes { justify-content: flex-start; }
  .botao--acao { flex: 0 0 auto; }
}