/* Folha única da central. Sem framework, sem build, sem CDN — quatro telas
   internas não pagam nenhuma das três coisas, e um CDN é uma dependência
   externa numa ferramenta cujo trabalho é dizer quando as dependências caem.

   Os TOKENS de cor vêm do `rsone-core` (D12: reaproveitamos os tokens e a regra
   dos quatro estados, não o shell). Os quatro estados de tela têm classe própria
   — `.carregando`, `.vazio`, `.erro`, `.sucesso` — para que "sem dado" nunca
   seja desenhado com a mesma cor de "zero". */

:root {
  --tinta: #0f172a;
  --tinta-fraca: #475569;
  --fundo: #f8fafc;
  --papel: #ffffff;
  --borda: #e2e8f0;
  --acento: #0284c7;
  --bom: #15803d;
  --atencao: #b45309;
  --ruim: #b91c1c;
  --neutro: #64748b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--tinta);
  background: var(--fundo);
}

a { color: var(--acento); }

.topo {
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
  padding: .9rem 1.25rem;
  background: var(--papel);
  border-bottom: 1px solid var(--borda);
}
.marca { font-size: 1.05rem; text-decoration: none; color: var(--tinta); }
.menu { display: flex; gap: 1rem; }
.menu a { text-decoration: none; }
.sair { margin-left: auto; }
.sair button {
  border: 1px solid var(--borda); background: var(--papel);
  color: var(--tinta-fraca); border-radius: 6px; padding: .35rem .7rem;
  cursor: pointer; font: inherit;
}

.conteudo { padding: 1.25rem; max-width: 1200px; margin: 0 auto; }

h1 { font-size: 1.35rem; margin: 0 0 .25rem; }
h2 { font-size: 1.05rem; margin: 1.75rem 0 .5rem; }
.subtitulo { color: var(--tinta-fraca); margin: 0 0 1rem; }

.seletor { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.seletor a {
  text-decoration: none; padding: .3rem .7rem; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--papel);
  color: var(--tinta-fraca);
}
.seletor a.ativa { border-color: var(--acento); color: var(--acento); }

table { width: 100%; border-collapse: collapse; background: var(--papel); }
th, td {
  text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--borda);
  vertical-align: top;
}
th { font-size: .8rem; text-transform: uppercase; color: var(--tinta-fraca); }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; }

.selo {
  display: inline-block; padding: .1rem .55rem; border-radius: 999px;
  font-size: .78rem; border: 1px solid currentColor;
}
.selo-saudavel { color: var(--bom); }
.selo-silenciosa { color: var(--atencao); }
.selo-fora_do_ar { color: var(--ruim); }
.selo-nunca { color: var(--neutro); }

/* Os quatro estados. `--sem-dado` NÃO é `0`: uma janela sem tráfego é ausência
   (RN24), e desenhá-la como zero a faria parecer a mais rápida do dia. */
.carregando, .vazio, .erro, .sucesso {
  padding: 1rem 1.1rem; border-radius: 8px; border: 1px solid var(--borda);
  background: var(--papel);
}
.carregando { color: var(--tinta-fraca); }
.vazio { color: var(--tinta-fraca); border-style: dashed; }
.erro { color: var(--ruim); border-color: currentColor; }
.sem-dado { color: var(--neutro); font-style: italic; }

.rodape {
  display: flex; flex-direction: column; gap: .35rem;
  padding: 1.25rem; margin-top: 2rem;
  border-top: 1px solid var(--borda);
  color: var(--tinta-fraca); font-size: .8rem;
}

.entrada { max-width: 320px; margin: 3rem auto; }
.entrada label { display: block; margin: .75rem 0 .2rem; }
.entrada input {
  width: 100%; padding: .5rem; border: 1px solid var(--borda); border-radius: 6px;
  font: inherit;
}
.entrada button {
  margin-top: 1rem; width: 100%; padding: .55rem; border: 0; border-radius: 6px;
  background: var(--acento); color: #fff; font: inherit; cursor: pointer;
}

/* --- Inventário de instalações (04/09/2026) --------------------------------
   Cadastrar instalação passou a ser ato DENTRO do app, e não do Admin (decisão
   do Lucas). As classes abaixo servem só a essa área; os estados de tela
   (`.vazio`, `.erro`, `.sucesso`) continuam sendo os mesmos das quatro telas —
   é o que faz as duas áreas parecerem do mesmo produto. */

.formulario { max-width: 560px; background: var(--papel); padding: 1.1rem;
  border: 1px solid var(--borda); border-radius: 8px; }
.formulario p { margin: 0 0 1rem; }
.formulario label { display: block; font-size: .85rem; color: var(--tinta-fraca);
  margin: 0 0 .25rem; }
.formulario input[type="text"] {
  width: 100%; padding: .5rem; border: 1px solid var(--borda); border-radius: 6px;
  font: inherit;
}
.formulario .ajuda { display: block; margin-top: .3rem; font-size: .8rem;
  color: var(--tinta-fraca); }
/* O slug na edição é TEXTO, não campo: ele não muda depois de criado, e um campo
   desabilitado ainda parece um campo que um dia vai poder ser preenchido. */
.formulario .somente-leitura { display: inline-block; padding: .3rem .5rem;
  border: 1px dashed var(--borda); border-radius: 6px; color: var(--tinta); }
.formulario button {
  padding: .55rem 1.1rem; border: 0; border-radius: 6px;
  background: var(--acento); color: #fff; font: inherit; cursor: pointer;
}
.formulario .voltar { margin-left: .9rem; font-size: .9rem; }

/* Desativar/reativar é POST, nunca link — o botão fica com cara de ação
   secundária de propósito: encerrar um cliente não é o caminho comum. */
td.acoes { display: flex; gap: .6rem; align-items: center; }
td.acoes form { margin: 0; }
td.acoes button {
  border: 1px solid var(--borda); background: var(--papel);
  color: var(--tinta-fraca); border-radius: 6px; padding: .25rem .6rem;
  cursor: pointer; font: inherit; font-size: .85rem;
}