/* Telas de operação: portal, assistente e configuração.
   A TV tem estilo próprio, dentro do tv.html — ela é o aparelho, isto aqui é o painel de trás.

   Regra da casa: a interface é grafite e luz. Botão não tem cor, tem brilho (tecla clara sobre
   placa escura). As três cores saturadas do produto — verde, amarelo, vermelho — só aparecem
   onde significam alguma coisa: a prévia das faixas e o estado da coleta. */

/* As duas famílias da casa. Variáveis, subconjunto latino, servidas por /fontes (ver a rota
   em servidor.mjs): 65 KB para todos os pesos, sem nenhum pedido para fora.
   `swap` porque a tela tem que aparecer antes da fonte — melhor um quadro em system-ui do
   que meio segundo de nada na parede da cozinha. */
@font-face {
  font-family: "Archivo"; src: url("/fontes/archivo.woff2") format("woff2-variations");
  font-weight: 400 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans"; src: url("/fontes/instrument-sans.woff2") format("woff2-variations");
  font-weight: 400 700; font-style: normal; font-display: swap;
}

:root {
  --fundo:      #0e1113;
  --placa:      #171b1e;
  --placa-alta: #1f2428;
  --risco:      #2b3236;
  --risco-vivo: #3d474c;
  --texto:      #e9edee;
  --fraco:      #97a1a6;
  --tecla:      #eef2f3;
  --verde:      #22c55e;
  --amarelo:    #facc15;
  --vermelho:   #ef4444;
  --fonte:  "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --titulo: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
/* .tecla é display:inline-flex e ganharia do display:none do navegador — sem isto, esconder
   um botão com [hidden] não funciona. */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--fundo); color: var(--texto);
  font: 400 15.5px/1.55 var(--fonte);
  -webkit-font-smoothing: antialiased;
}
/* O Archivo já é mais fechado que a `system-ui`; manter o aperto anterior fecharia demais. */
h1, h2, h3 { margin: 0; font-family: var(--titulo); font-weight: 600; letter-spacing: -.008em; text-wrap: balance; }
h1 { font-size: 26px; line-height: 1.15; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p { margin: 0; }
.ajuda { color: var(--fraco); font-size: 13.5px; max-width: 64ch; }

/* Link dentro de texto corrido — não é botão. O produto nunca teve um até a tarja de primeira
   vez, então o azul padrão do navegador passava despercebido; num tema escuro ele berra. */
.estado a, .ajuda a, .detalhe a, a.detalhe { color: var(--texto); text-decoration: underline; text-underline-offset: 2px; }
.estado a:hover, .ajuda a:hover, .detalhe a:hover, a.detalhe:hover { color: var(--tecla); }

.folha { max-width: 660px; margin: 0 auto; padding: 40px 22px 90px; }
.folha.larga { max-width: 1160px; }

/* ---- cabeçalho comum: nome do produto e do restaurante ---- */
.marca { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 34px; }
.marca .nome { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.marca .casa { color: var(--fraco); font-size: 14px; }
.marca .sinal { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); align-self: center; }
.marca .sinal.parado { background: var(--vermelho); }

/* ---- seções separadas por fio, não por cartão ---- */
.secao { padding: 26px 0; border-top: 1px solid var(--risco); }
.secao:first-of-type { border-top: 0; }
.secao > h2 + .ajuda { margin-top: 6px; }
.grade { display: grid; gap: 16px 20px; margin-top: 18px; }
.grade.dupla { grid-template-columns: 1fr 1fr; }
@media (max-width: 620px) { .grade.dupla { grid-template-columns: 1fr; } }

label { display: block; font-size: 13px; color: var(--fraco); margin-bottom: 6px; }
input[type=text], input[type=password], input[type=number], input[type=time], select {
  width: 100%; padding: 10px 12px; font: inherit; font-family: var(--fonte); color: var(--texto);
  background: var(--placa-alta); border: 1px solid var(--risco); border-radius: 7px;
  font-variant-numeric: tabular-nums;
}
input:hover, select:hover { border-color: var(--risco-vivo); }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--tecla); outline-offset: 2px; border-color: transparent;
}
input[type=number] { max-width: 130px; }
input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--tecla); margin: 0 10px 0 0; }

/* ---- teclas: a ação é o brilho, não a cor ---- */
button, .tecla {
  font: 600 14.5px/1 var(--fonte); cursor: pointer; text-decoration: none;
  padding: 10px 16px; border-radius: 7px; border: 1px solid transparent;
  background: var(--tecla); color: #0e1113; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px;
}
/* O ícone é decoração e herda a cor do botão (`currentColor`), inclusive o vermelho do
   `.perigo`. `flex: none` porque num botão apertado quem tem que ceder é o texto. */
button svg, .tecla svg { flex: none; }
button:hover, .tecla:hover { background: #fff; }
button.discreta, .tecla.discreta { background: transparent; color: var(--texto); border-color: var(--risco-vivo); }
button.discreta:hover, .tecla.discreta:hover { background: var(--placa-alta); }
button:disabled { opacity: .45; cursor: not-allowed; }
.acoes { display: flex; gap: 8px; align-items: center; margin-top: 20px; }
.acoes .direita { margin-left: auto; display: flex; gap: 10px; }

/* Botão de linha de tabela: a ação existe, mas não disputa com o conteúdo. */
.mini { padding: 5px 10px; font-size: 13px; border-radius: 6px; }
/* As ações de uma linha de tabela. Estava só no `<style>` do admin.html; o super.html não tem
   `<style>` nenhum, então a mesma célula lá era `text-align:right;white-space:nowrap` na mão —
   e no telefone o nowrap empurrava botão para fora da tela. Aqui as duas telas usam a mesma
   regra, e o `flex-wrap` faz a linha quebrar em vez de vazar. */
.acoesLinha { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
/* O único vermelho fora do semáforo: destruir. Como classe, não como valor solto. */
button.perigo, .tecla.perigo { color: #e0554d; }
button.perigo:hover, .tecla.perigo:hover { color: #ff6b62; }

/* ---- o cartão do endereço da TV: é para copiar, não para ler ----
   O token é longo de propósito e não cabe em largura nenhuma. Antes eram até cinco linhas
   de `word-break: break-all` com um botão apagado embaixo; aqui o endereço é uma linha
   cortada e quem resolve — a tecla clara — fica do lado dele. */
.cartaoLink {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 8px 8px 16px; background: var(--placa);
  border: 1px solid var(--risco); border-radius: 12px;
}
.cartaoLink > svg { flex: none; }
/* O que segura as reticências é o `overflow: hidden`: num item de flex ele já zera o
   *automatic minimum size*, então o `min-width: 0` de praxe seria inerte aqui. Medido a
   556 px com endereço de produção: com `overflow: hidden`, 556/556; com `visible`,
   645/554 — o cartão estoura a coluna e o endereço sai inteiro. */
.cartaoLink .endereco {
  flex: 1; font-size: 14.5px; font-variant-numeric: tabular-nums;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cartaoLink > button { flex: none; }
@media (max-width: 620px) {
  /* No telefone o botão desce para a linha de baixo e ocupa a largura. Lado a lado sobraria
     um pedaço de endereço tão curto que não daria nem para reconhecer qual é. */
  .cartaoLink { flex-wrap: wrap; padding: 12px; }
  .cartaoLink .endereco { flex: 1 1 100%; }
  .cartaoLink > button { flex: 1 1 auto; }
}

/* ---- escolhas em linha ---- */
.escolha {
  display: flex; align-items: center; padding: 10px 12px; margin: 0 0 8px; cursor: pointer;
  background: var(--placa); border: 1px solid var(--risco); border-radius: 7px;
}
.escolha:hover { border-color: var(--risco-vivo); }
.escolha:has(input:checked) { background: var(--placa-alta); border-color: var(--risco-vivo); }
.escolha .detalhe { color: var(--fraco); margin-left: 8px; font-size: 13px; }

/* ---- turnos: cada linha é uma virada do relógio ---- */
/* 🔴 Cada turno é um BLOCO, com traço à esquerda e respiro embaixo. Sem isto o agrupamento
   dependia só de proximidade — e a proximidade estava mentindo: medido, a tira de dias ficava
   a 50px do nome do turno dela e a 12px do turno de BAIXO. Quem olha lê os dias do Almoço como
   se fossem do Jantar, marca a sexta no turno errado, salva, e só descobre na sexta-feira que
   a régua não mudou. Proximidade sozinha é frágil; o traço torna o grupo explícito. */
.turno { display: grid; grid-template-columns: minmax(0,1fr) 138px 96px 96px 42px; gap: 10px;
         align-items: end; margin-bottom: 26px; padding-left: 12px;
         border-left: 2px solid var(--risco); }
/* A segunda linha leva os dias e a paciência do alarme: sete botões não cabem numa coluna sem
   espremer o nome do turno — medido, o nome caía de 162px para 56px, e é nele que se digita
   "Jantar de sexta". O que é do DIA fica embaixo; o que é do relógio fica em cima. */
/* O `align-items: start` puxa a tira para junto da linha de cima: com `end`, o rótulo do campo
   de folga empurrava a caixa inteira para baixo e abria 50px de vão onde deviam ser ~14. */
.turno .linha2 { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: start;
                 gap: 16px; margin-top: -2px; }
.turno .dias { display: flex; flex-wrap: wrap; gap: 6px; }
.turno .dias button { padding: 6px 11px; border-radius: 6px; border: 1px solid var(--risco);
                      background: transparent; color: var(--fraco); font: inherit; font-size: 12px;
                      text-transform: uppercase; letter-spacing: .04em; cursor: pointer; }
/* 🔴 O estado do dia é o único desta tela em que errar só aparece na sexta-feira. Antes ele era
   `--placa-alta` (#1f2428) sobre uma página quase da mesma cor: a diferença ficava por conta do
   brilho do texto. Agora o ligado INVERTE — fundo claro, texto escuro —, que é a diferença que
   se enxerga de relance e que sobrevive a monitor ruim e a quem enxerga cor diferente. */
.turno .dias button.ligado { background: var(--texto); color: var(--placa);
                             border-color: var(--texto); font-weight: 700; }
@media (max-width: 720px) {
  .turno { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 42px; }
  .turno > div:nth-child(3), .turno > div:nth-child(4) { grid-column: span 1; }
  .turno .tirar { grid-row: 1; grid-column: 3; }
}
.turno .tirar { width: 42px; padding: 11px 0; font-size: 19px; line-height: 1; background: transparent;
                color: var(--fraco); border: 1px solid var(--risco); }
.turno .tirar:hover:not(:disabled) { color: var(--texto); border-color: var(--risco-vivo); background: var(--placa-alta); }
@media (max-width: 520px) { .turno { grid-template-columns: 1fr 110px 42px; } }

/* ---- o semáforo: a única cor forte da interface ---- */
.semaforo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 16px; }
.semaforo div { padding: 11px 10px; border-radius: 8px; text-align: center; color: #0d1210; }
.semaforo .v { background: var(--verde); } .semaforo .a { background: var(--amarelo); }
.semaforo .r { background: var(--vermelho); color: #1a0606; }
.semaforo strong { display: block; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.semaforo span { font-size: 12px; opacity: .8; font-variant-numeric: tabular-nums; }

/* ---- estado da coleta ---- */
.estado { border: 1px solid var(--risco); border-left-width: 3px; border-radius: 8px; padding: 14px 16px; background: var(--placa); }
.estado.bom { border-left-color: var(--verde); }
.estado.ruim { border-left-color: var(--vermelho); }
.estado b { font-weight: 600; }
.estado .detalhe { color: var(--fraco); font-size: 13.5px; margin-top: 4px; }
/* 🔴 A linha "tudo em dia" do `#caixaVersao` NÃO vive dentro de uma `.estado`, então o cinza
   pequeno da regra de cima — que é seletor DESCENDENTE — não a alcança: medido, ela saía em
   `rgb(233,237,238)` / 15,5px, o mesmo peso do texto do corpo. É a linha que a tela mostra
   quase sempre, e ela tem que ser discreta: quem grita é a caixa vermelha do reinício, não ela. */
#caixaVersao > .detalhe { color: var(--fraco); font-size: 13.5px; margin-top: 8px; }
.recado { margin: 18px 0; }

/* ---- trilha do assistente: 5 passos é sequência de verdade ---- */
.trilha { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; color: var(--fraco); font-size: 13.5px; }
.trilha .barra { flex: 1; height: 3px; background: var(--risco); border-radius: 2px; overflow: hidden; }
.trilha .barra i { display: block; height: 100%; background: var(--tecla); transition: width .25s ease; }
@media (prefers-reduced-motion: reduce) { .trilha .barra i { transition: none; } }

table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th { text-align: left; font-weight: 600; color: var(--fraco); font-size: 12px;
     text-transform: uppercase; letter-spacing: .05em; padding: 0 12px 10px 0; }
td { padding: 11px 12px 11px 0; border-top: 1px solid var(--risco); }
.rolagem { overflow-x: auto; }

/* A configuração tem DOIS escopos e a tela precisa dizer qual é qual: o que vale para o
   restaurante inteiro e o que vale só para a TV escolhida. Sem isto, o gerente marcava marca
   achando que valia para tudo — foi o que escondeu a Putz da tela da pizza.

   Era uma pílula em CAIXA ALTA, repetida uma dúzia de vezes na mesma página, e com um nome de
   tela dentro ela virava um grito (`SÓ DA TELA COZINHA | FINALIZAÇÃO`). O escopo é uma
   legenda: precisa ser lido, não precisa ser visto de longe. */
.escopo {
  display: inline-block; vertical-align: baseline; margin-left: 8px;
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--risco);
  color: var(--fraco); background: transparent;
}
.escopo.tela { color: var(--texto); border-color: var(--risco-vivo); background: var(--placa-alta); }

/* ---- no telefone: a mesma configuração, ao alcance do dedo ----
   A folha já empilha sozinha; o que faltava era operar. Tabela com botões fora da tela,
   alvo de 36 px e token de TV quebrado caractere a caractere não são problema de caber. */

/* Alvo de toque vale por PONTEIRO, não por largura: tablet de 900 px também é dedo. */
@media (pointer: coarse) {
  /* Inclusive o `.mini` da linha de tabela: é o botão de Apagar, e a mesma ação não pode ter
     dois tamanhos em duas telas. Se com 44 px os botões do cartão passarem a ocupar duas
     linhas, está certo assim — duas linhas confortáveis valem mais que uma em que o dedo erra. */
  button, .tecla { min-height: 44px; }
  input[type=checkbox] { width: 21px; height: 21px; }
  .escolha { padding: 13px 14px; }
}

@media (max-width: 620px) {
  .folha { padding: 24px 16px 96px; }

  /* A tabela vira pilha de cartões. A linha de cabeçalho é `tr:first-child` porque as
     tabelas daqui não têm `<thead>` — o cabeçalho é a primeira linha do `innerHTML`. */
  .rolagem { overflow-x: visible; }
  table, table tbody, table tr, table td { display: block; width: 100%; }
  table tr:first-child { display: none; }
  table tr { border: 1px solid var(--risco); border-radius: 9px; padding: 12px 14px; margin-bottom: 10px; }
  table td { border-top: 0; padding: 3px 0; }
  table td[data-rotulo]::before {
    content: attr(data-rotulo) ": "; color: var(--fraco); font-size: 12.5px;
  }
  .acoesLinha { margin-top: 10px; }
  .acoesLinha button { flex: 1 1 auto; }

  /* Ação de largura inteira: no telefone, botão meia-boca é botão que erra. */
  .acoes { flex-wrap: wrap; }
  .acoes > button, .acoes > .tecla { flex: 1 1 auto; }
  .acoes .direita { width: 100%; margin-left: 0; }
  .acoes .direita > button { flex: 1 1 auto; }

  .escopo { display: inline-block; margin-left: 0; margin-top: 6px; white-space: normal; }
  h2 .escopo, h3 .escopo { margin-left: 8px; margin-top: 0; }
}

/* Número que muda sozinho na tela não pode dançar: 1 e 4 têm que ocupar a mesma largura. */
.nums, table td, .estado b, .semaforo span { font-variant-numeric: tabular-nums; }

/* O espaço do Instrument Sans é 20% mais estreito que o da system-ui que saiu daqui (avanço do
   espaço ÷ M: 0,228 contra 0,284). No corpo a 15,5px passa; a 12,5px o arredondamento para
   pixel inteiro vira 2px contra 3px — 33% — e as palavras colam ("todoorestaurante").
   Isto devolve o que a família não dá, só nos tamanhos onde falta. */
.escopo, .ajuda, .detalhe, th, small { word-spacing: .055em; }