:root {
  color-scheme: light dark;
  --tinta: #17181c;
  --papel: #fbfaf8;
  --linha: #d8d5cf;
  --fraco: #6b6a67;
  --acento: #1f5f4f;
  --erro: #9a2b1e;
}
@media (prefers-color-scheme: dark) {
  :root { --tinta: #ececea; --papel: #17181c; --linha: #34363c; --fraco: #9b9a97; --acento: #6fd3b4; --erro: #f08a7a; }
}

* { box-sizing: border-box; }
body {
  margin: 0; padding: 2rem 1rem 4rem;
  background: var(--papel); color: var(--tinta);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
main { max-width: 40rem; margin: 0 auto; }
h1 { font-size: 1.5rem; margin: 0 0 .2rem; letter-spacing: -.01em; }
h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
.sub { margin: 0 0 2rem; color: var(--fraco); }

label { display: block; margin: 1.2rem 0 .35rem; font-weight: 600; font-size: .9rem; }
.opc { font-weight: 400; color: var(--fraco); }

input[type=text], textarea {
  width: 100%; padding: .6rem .7rem; font: inherit;
  color: var(--tinta); background: transparent;
  border: 1px solid var(--linha); border-radius: 6px;
}
textarea { resize: vertical; min-height: 7rem; }
input[type=text]:focus, textarea:focus { outline: 2px solid var(--acento); outline-offset: 1px; }

fieldset { margin: 1.6rem 0 0; padding: 1rem; border: 1px solid var(--linha); border-radius: 8px; }
legend { padding: 0 .4rem; font-weight: 600; font-size: .9rem; }

.linha { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .7rem; }

button {
  font: inherit; padding: .45rem .9rem; border-radius: 6px;
  border: 1px solid var(--linha); background: transparent; color: var(--tinta); cursor: pointer;
}
button:hover:not(:disabled) { border-color: var(--acento); }
button:disabled { opacity: .45; cursor: default; }
button.principal {
  margin-top: 1.6rem; padding: .6rem 1.4rem; font-weight: 600;
  color: var(--papel); background: var(--acento); border-color: var(--acento);
}
button.link {
  border: 0; padding: 0; color: var(--acento); text-decoration: underline; background: none;
}

.cron { font-variant-numeric: tabular-nums; font-size: 1.1rem; color: var(--fraco); }
.pisca { color: var(--erro); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; animation: p 1.4s infinite; }
@keyframes p { 50% { opacity: .25; } }

.arquivo { display: inline; margin: 0; font-weight: 400; color: var(--fraco); font-size: .9rem; }
input[type=file] { font: inherit; font-size: .85rem; max-width: 100%; }

.resumo, .estado { font-size: .88rem; color: var(--fraco); }
.quem { font-size: .85rem; color: var(--fraco); margin: 0 0 1rem; }
.erro { color: var(--erro); font-size: .9rem; }
audio { width: 100%; margin-top: .6rem; }

/* --- a segunda porta (par 102) ---------------------------------------------------------
   Deliberadamente discreta: ela e a saida de emergencia do modo local, nao a entrada
   principal. O botao do Google continua sendo o primeiro elemento da tela. */
#entrada-local { margin-top: 1.4rem; }
.ou {
  margin: 0 0 .8rem; font-size: .8rem; color: var(--fraco);
  text-transform: uppercase; letter-spacing: .08em;
}
#entrar-local { padding: .5rem 1rem; }
.nota { margin: .6rem 0 0; font-size: .82rem; color: var(--fraco); max-width: 34rem; }

.recibo {
  margin-top: 1rem; padding: .8rem; font-size: .78rem; line-height: 1.45;
  background: rgba(127,127,127,.09); border: 1px solid var(--linha); border-radius: 6px;
  overflow-x: auto; white-space: pre;
}
[hidden] { display: none !important; }

/* --- controle remoto do terminal na VPS (96_terminal_pela_plataforma) -------------------
   Sem cor propria e sem fonte propria: reaproveita as variaveis que a pagina de envio ja
   define. Uma segunda paleta faria a mesma coisa parecer dois produtos. */
.term-pagina { max-width: 62rem; margin: 0 auto; padding: 1.4rem 1rem 3rem; }
.term-cabecalho h1 { margin: 0 0 .2rem; }
.term-sub, .term-ajuda { color: var(--fraco); font-size: .88rem; margin: .2rem 0 .8rem; }
.term-sessao { font-size: .85rem; color: var(--fraco); }
.term-bloco { margin: 1.6rem 0; }
.term-bloco h2 { font-size: 1rem; margin: 0 0 .3rem; }

.term-lista { list-style: none; margin: 0; padding: 0; }
.term-agente {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  padding: .5rem .6rem; border: 1px solid var(--linha); border-radius: 6px; margin-bottom: .4rem;
}
.term-agente-ativo { border-color: var(--acento); }
.term-escolher {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 600;
  color: var(--acento); text-decoration: underline; cursor: pointer; text-align: left;
}
.term-marca { font-size: .76rem; padding: .1rem .4rem; border-radius: 10px; background: rgba(127,127,127,.14); }
.term-sim { color: var(--acento); }
.term-nao { color: var(--erro); }
.term-status { color: var(--fraco); }
.term-vazio { color: var(--fraco); font-size: .9rem; }

/* O estado "esperando voce" fica em destaque de proposito: pela transcricao ele e
   indistinguivel de "pensando" -- silencio nos dois casos -- e e justamente o caso em que o
   operador teria de abrir um terminal, que e o que este par existe para eliminar. */
.term-espera {
  border: 1px solid var(--erro); border-radius: 6px; padding: .7rem .8rem; margin-bottom: .8rem;
}
.term-espera-titulo { margin: 0 0 .3rem; font-weight: 700; color: var(--erro); }
.term-tela {
  font-size: .74rem; line-height: 1.35; overflow-x: auto; white-space: pre;
  background: rgba(127,127,127,.09); padding: .5rem; border-radius: 4px; margin: .5rem 0 0;
}

.term-falas {
  max-height: 26rem; overflow-y: auto; border: 1px solid var(--linha);
  border-radius: 6px; padding: .6rem;
}
.term-fala + .term-fala { border-top: 1px solid var(--linha); margin-top: .7rem; padding-top: .7rem; }
.term-quando { margin: 0 0 .2rem; font-size: .72rem; color: var(--fraco); }
.term-texto { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: .85rem; line-height: 1.5; }

.term-form { margin-top: .9rem; }
.term-rotulo { display: block; font-size: .85rem; margin-bottom: .3rem; }
.term-form textarea { width: 100%; font: inherit; font-size: .9rem; padding: .5rem; box-sizing: border-box; }
.term-acoes { display: flex; gap: .7rem; align-items: center; margin-top: .5rem; }
.term-aviso { font-size: .82rem; color: var(--fraco); }
.term-desligado { border: 1px solid var(--linha); border-radius: 6px; padding: .8rem; }
.term-voltar { font-size: .85rem; margin-top: 2rem; }

/* --- a pagina da frota (A20) ---------------------------------------------------------
   A idade do instantaneo e o elemento MAIOR da tela, e isso e desenho e nao enfeite: um
   painel que nao diz quando foi tirado apresenta o velho como atual, e o modo de falhar e
   mudo. O numero cresce sozinho quando a derivacao congela, entao ele precisa ser a
   primeira coisa que o olho encontra. */
.fr-pagina { max-width: 52rem; }
.fr-cabecalho { margin-bottom: 1rem; }
.fr-instantaneo {
  border: 1px solid var(--linha); border-radius: 6px; padding: .8rem; margin-bottom: 1rem;
}
.fr-idade-linha { margin: 0; display: flex; align-items: baseline; gap: .4rem; }
.fr-idade { font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
.fr-idade-rotulo { color: var(--fraco); font-size: .9rem; }
.fr-derivado { margin: .2rem 0 .4rem; font-size: .8rem; color: var(--fraco); }
.fr-aviso { margin: .4rem 0; font-size: .84rem; color: var(--erro); }
.fr-contador { margin: 0 0 .3rem; display: flex; align-items: baseline; gap: .4rem; }

/* A bolinha da luz vem com FORMA alem da cor. Semaforo so por cor e ilegivel para quem nao
   distingue verde de vermelho, e a tela ficaria sem informacao nenhuma para essa pessoa. */
.fr-bola {
  display: inline-block; width: .8rem; height: .8rem; border-radius: 50%;
  border: 2px solid var(--fraco); vertical-align: -1px;
}
.fr-verde    { background: var(--acento); border-color: var(--acento); }
.fr-amarelo  { background: repeating-linear-gradient(45deg, #c8901e, #c8901e 3px, transparent 3px, transparent 6px);
               border-color: #c8901e; }
.fr-vermelho { background: transparent; border-color: var(--erro); }
.fr-sem      { background: transparent; border-style: dashed; }

.fr-luz-projeto { margin: 0 0 .5rem; font-size: .95rem; }
.fr-contagem { list-style: none; margin: 0 0 .5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .8rem; }
.fr-contagem-item { font-size: .85rem; }
.fr-contagem-extra { color: var(--fraco); flex-basis: 100%; }

.fr-lista { margin-top: .4rem; }
.fr-item { font-size: .85rem; }
.fr-nome { font-weight: 600; }
.fr-onde { color: var(--fraco); }
.fr-bloco { display: inline-flex; align-items: center; gap: .25rem; }
.fr-incidente { border-color: var(--erro); }
.fr-sub { font-size: .85rem; margin: .8rem 0 .2rem; color: var(--fraco); text-transform: uppercase; letter-spacing: .04em; }
/* --- a pagina dos pedidos (A14/A15) --------------------------------------------------
   A fita de cinco bolinhas e o resumo, e ela reusa as classes do semaforo da frota de
   proposito: a mesma forma quer dizer a mesma coisa nas duas telas. Verde e artefato
   presente; amarelo e artefato presente E VAZIO, que nao conta; contorno tracejado e
   artefato ainda inexistente. */
.fx-fita { display: inline-flex; gap: .2rem; margin: 0 .5rem; vertical-align: -1px; }
.fx-pedido-item { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.fx-abrir {
  font: inherit; font-weight: 600; color: var(--acento); background: none;
  border: none; border-bottom: 1px dashed var(--acento); padding: 0; cursor: pointer;
}
.fx-pedido {
  margin: .4rem 0 .8rem; padding: .5rem .8rem; border-left: 3px solid var(--linha);
  color: var(--fraco); font-size: .9rem; white-space: pre-wrap;
}
/* A divergencia entre o ESTADO e o artefato e pintada como ERRO e nunca como progresso:
   ela e o sintoma de um terminal que caiu depois de escrever o ESTADO. */
.fx-diverge { color: var(--erro); border-color: var(--erro); }
.fx-veredito { margin-top: 1rem; }
.fx-veredito-texto {
  white-space: pre-wrap; font: .85rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid var(--linha); border-radius: 6px; padding: .8rem; overflow-x: auto;
}