/* 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. */
: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;
}

* { 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 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.021em; text-wrap: balance; }
h1 { font-size: 27px; line-height: 1.15; }
h2 { font-size: 19px; }
h3 { font-size: 15.5px; }
p { margin: 0; }
.ajuda { color: var(--fraco); font-size: 14px; max-width: 62ch; }

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

/* ---- 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: 13.5px; color: var(--fraco); margin-bottom: 7px; }
input[type=text], input[type=password], input[type=number], input[type=time], select {
  width: 100%; padding: 11px 13px; font: inherit; color: var(--texto);
  background: var(--placa-alta); border: 1px solid var(--risco); border-radius: 8px;
  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 11px 0 0; }

/* ---- teclas: a ação é o brilho, não a cor ---- */
button, .tecla {
  font: 600 15px/1 inherit; font-family: inherit; cursor: pointer; text-decoration: none;
  padding: 12px 18px; border-radius: 8px; border: 1px solid transparent;
  background: var(--tecla); color: #0e1113; display: inline-flex; align-items: center; justify-content: center;
}
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: 10px; align-items: center; margin-top: 26px; }
.acoes .direita { margin-left: auto; display: flex; gap: 10px; }

/* ---- escolhas em linha ---- */
.escolha {
  display: flex; align-items: center; padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
  background: var(--placa); border: 1px solid var(--risco); border-radius: 8px;
}
.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: 13.5px; }

/* ---- turnos: cada linha é uma virada do relógio ---- */
.turno { display: grid; grid-template-columns: minmax(0,1fr) 122px 96px 96px 42px; gap: 10px; align-items: end; margin-bottom: 10px; }
@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: 8px; margin-top: 16px; }
.semaforo div { padding: 13px 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: 13px; font-weight: 700; letter-spacing: .02em; }
.semaforo span { font-size: 12.5px; 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; }
.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: 13px; padding: 0 12px 8px 0; }
td { padding: 9px 12px 9px 0; border-top: 1px solid var(--risco); }
.rolagem { overflow-x: auto; }