/*
 * estilo.css - o visual do painel, num arquivo só.
 *
 * Até 04/09/2026 as três páginas (index.html, cliente.php, cadastro.php)
 * carregavam cada uma a sua cópia dos tokens e dos componentes, com um
 * comentário em cada arquivo avisando que "se um dia as cores mudarem, mudam
 * nos três lugares". Mudaram. Isto é o lugar único.
 *
 * O que mora AQUI: tokens, tipografia, e os componentes que aparecem em mais
 * de uma página - cartão, botão, campo, pílula, crachá, menu da conta, tabela,
 * cabeçalho, rodapé.
 *
 * O que NÃO mora aqui: o que só existe numa página. O calendário do período e
 * o gráfico são do cliente.php; o gráfico de acessos é do cadastro.php. Cada
 * um segue no <style> da sua página, usando os tokens deste arquivo.
 *
 * ---------------------------------------------------------------------------
 * AS BORDAS
 *
 * Elas eram `rgba(11,11,11,0.10)` - 10% de preto sobre um fundo quase branco,
 * o que dá um traço que existe no CSS e quase não existe na tela: em monitor
 * claro, de lado, os cartões flutuavam sem contorno. Agora são cor sólida
 * (--borda), com uma variante mais forte (--borda-forte) para o elemento em
 * foco ou sob o cursor. É a diferença entre "tem uma borda" e "dá para ver a
 * borda".
 */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  color-scheme: light;

  /* superfícies */
  --plane:       #f4f6f8;   /* o fundo da página */
  --surface:     #ffffff;   /* cartão */
  --surface-2:   #f8fafc;   /* miolo recessivo: cabeçalho de tabela, chip */

  /* texto */
  --ink:         #0f172a;
  --ink-2:       #475569;
  --ink-muted:   #8494a8;

  /* traços */
  --borda:       #dbe2ea;
  --borda-forte: #b8c4d2;
  --grid:        #eef2f6;   /* grade do gráfico: some, mas orienta */
  --axis:        #cbd5e1;

  /* cores com significado. Cada uma tem o par "suave" para fundo de chip:
     texto colorido sobre fundo colorido claro passa no contraste, texto
     colorido sobre branco no tamanho de rótulo muitas vezes não. */
  --umid:          #2563eb;  --umid-suave:     #eff6ff;
  --temp:          #e2542a;  --temp-suave:     #fff2ed;
  --good:          #16a34a;  --good-suave:     #ecfdf5;
  --critical:      #dc2626;  --critical-suave: #fef2f2;
  --warning:       #d97706;  --warning-suave:  #fffbeb;
  --lacuna:        rgba(217,119,6,0.10);

  /* Séries do gráfico de acessos do cadastro.php, nesta ordem fixa. A ordem é
     o que garante a separação sob daltonismo - trocar uma cor de lugar
     invalida o resto. */
  --ac-1: #2563eb;   /* entradas    */
  --ac-2: #e2542a;   /* falhas      */
  --ac-3: #0f9d76;   /* credenciais */
  --ac-4: #d97706;   /* cadastro    */

  --raio:      14px;
  --raio-2:    10px;
  --sombra:    0 1px 2px rgba(15,23,42,.04), 0 2px 6px rgba(15,23,42,.05);
  --sombra-2:  0 12px 32px rgba(15,23,42,.16);
}

/* No escuro os tons não são os claros "apagados": são a mesma paleta
   re-passada para uma superfície escura e conferida nela. A borda ganha ainda
   mais peso relativo - sobre preto, 10% de branco é invisível. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --plane:       #0b0f14;
    --surface:     #141a21;
    --surface-2:   #1b232c;
    --ink:         #f1f5f9;
    --ink-2:       #b6c2d1;
    --ink-muted:   #7d8b9c;
    --borda:       #2b3644;
    --borda-forte: #3d4c5e;
    --grid:        #1f2833;
    --axis:        #3d4c5e;
    --umid:        #4b8ef8;  --umid-suave:     #10233f;
    --temp:        #f2703f;  --temp-suave:     #341a12;
    --good:        #29b45f;  --good-suave:     #0d2a1a;
    --critical:    #ef4444;  --critical-suave: #341418;
    --warning:     #eaa72c;  --warning-suave:  #33270c;
    --lacuna:      rgba(234,167,44,0.13);
    --ac-1: #4b8ef8;
    --ac-2: #f2703f;
    --ac-3: #21b98d;
    --ac-4: #eaa72c;
    --sombra:   0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
    --sombra-2: 0 12px 32px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --plane:       #0b0f14;
  --surface:     #141a21;
  --surface-2:   #1b232c;
  --ink:         #f1f5f9;
  --ink-2:       #b6c2d1;
  --ink-muted:   #7d8b9c;
  --borda:       #2b3644;
  --borda-forte: #3d4c5e;
  --grid:        #1f2833;
  --axis:        #3d4c5e;
  --umid:        #4b8ef8;  --umid-suave:     #10233f;
  --temp:        #f2703f;  --temp-suave:     #341a12;
  --good:        #29b45f;  --good-suave:     #0d2a1a;
  --critical:    #ef4444;  --critical-suave: #341418;
  --warning:     #eaa72c;  --warning-suave:  #33270c;
  --lacuna:      rgba(234,167,44,0.13);
  --ac-1: #4b8ef8;
  --ac-2: #f2703f;
  --ac-3: #21b98d;
  --ac-4: #eaa72c;
  --sombra:   0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --sombra-2: 0 12px 32px rgba(0,0,0,.5);
}

/* ==========================================================================
   2. BASE E TIPOGRAFIA
   ========================================================================== */

* { box-sizing: border-box; }

/*
 * A Inter vem PRIMEIRO e não é baixada: se a máquina já tiver, o painel usa;
 * se não tiver, cai no tipo do sistema, que no Windows é a Segoe UI e no Mac a
 * SF. Nenhum @font-face, nenhum Google Fonts - uma fonte remota num painel que
 * roda em rede de cliente é um pedido que pode demorar, falhar ou vazar quem
 * está olhando a tela, e o desenho não depende dela.
 */
body {
  margin: 0;
  /*
   * O env(safe-area-inset-*) só vale alguma coisa com o viewport-fit=cover do
   * <head>, e é ele que impede o cabeçalho de ficar embaixo do relógio do
   * iPhone e o rodapé embaixo da barrinha de gestos. Em telefone sem entalhe e
   * no desktop os quatro valores são zero, e a conta devolve o padding de
   * sempre.
   */
  padding: calc(22px + env(safe-area-inset-top)) calc(18px + env(safe-area-inset-right))
           calc(56px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
  background: var(--plane);
  color: var(--ink);
  font: 14px/1.55 Inter, "Segoe UI Variable Text", system-ui, -apple-system,
        "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1180px; margin: 0 auto; }

h1 { font-size: 25px; line-height: 1.2; margin: 0; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 15px; margin: 0; font-weight: 600; letter-spacing: -0.01em; }

/* Números que mudam sozinhos na tela: largura fixa por dígito, senão o valor
   "dança" a cada leitura nova e o olho persegue o movimento. */
.num, .val, table, .tabular { font-variant-numeric: tabular-nums; }

.spacer { flex: 1 1 auto; }
[hidden] { display: none !important; }

a.link { color: var(--umid); font-size: 13px; text-decoration: none; }
a.link:hover { text-decoration: underline; }

/* ==========================================================================
   3. CABEÇALHO E RODAPÉ
   ========================================================================== */

header {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 18px;
}

/* O ponto de conexão no topo não é pílula: ele fica solto ao lado do título,
   porque não é um rótulo que se lê, é um sinal que se confere de relance. */
.estado-topo {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; color: var(--ink-2);
}

.rodape {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borda);
  font-size: 12px; color: var(--ink-muted);
}
.rodape .ico { width: 13px; height: 13px; flex: none; }

/* ==========================================================================
   4. PÍLULAS, PONTOS E CRACHÁS
   ========================================================================== */

.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--surface);
  font-size: 13px; color: var(--ink-2); white-space: nowrap;
}
.pill.plano { border-color: var(--umid); color: var(--umid); background: var(--umid-suave); }
.pill.plano b { font-weight: 600; }
.pill.sync { border-color: var(--warning); background: var(--warning-suave); color: var(--ink); }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted); flex: none; }
.dot.ok   { background: var(--good); }
.dot.bad  { background: var(--critical); }
.dot.warn { background: var(--warning); }

/* Crachá: o estado de UMA coisa, colado no nome dela. */
.cracha {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 1.4;
  border: 1px solid transparent;
}
.cracha.ok   { background: var(--good-suave);     color: var(--good);     border-color: var(--good); }
.cracha.bad  { background: var(--critical-suave); color: var(--critical); border-color: var(--critical); }
.cracha.warn { background: var(--warning-suave);  color: var(--warning);  border-color: var(--warning); }

.spin {
  width: 11px; height: 11px; flex: none; border-radius: 50%;
  border: 2px solid var(--warning); border-top-color: transparent;
  animation: gira .8s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* ==========================================================================
   5. BOTÕES E CAMPOS
   ========================================================================== */

button, input, select, textarea {
  font: inherit; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--borda); border-radius: var(--raio-2);
  padding: 8px 12px;
}
button { cursor: pointer; line-height: 1.35; }
button:hover { border-color: var(--borda-forte); }
button:disabled { opacity: .5; cursor: not-allowed; }

input::placeholder, textarea::placeholder { color: var(--ink-muted); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--umid); outline-offset: 1px;
}

button.primary {
  background: var(--umid); border-color: var(--umid); color: #fff; font-weight: 500;
}
button.primary:hover { filter: brightness(1.07); border-color: var(--umid); }
button.perigo { color: var(--critical); border-color: var(--borda); }
button.perigo:hover { border-color: var(--critical); background: var(--critical-suave); }

/* Botão com ícone à esquerda - o do PDF, o de recarregar. */
.btn-ico { display: inline-flex; align-items: center; gap: 8px; }
.btn-ico .ico { width: 15px; height: 15px; flex: none; }

/*
 * Link com cara de botão. Continua sendo <a> - abre em nova aba com o clique
 * do meio, mostra o destino na barra de status e funciona sem JavaScript,
 * coisas que um <button> que navega perde todas.
 */
.botao-link {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--ink);
  background: var(--surface); border: 1px solid var(--borda);
  border-radius: var(--raio-2); padding: 8px 12px; font-size: 13px; line-height: 1.35;
}
.botao-link:hover { border-color: var(--borda-forte); }
.botao-link.primary { background: var(--umid); border-color: var(--umid); color: #fff; font-weight: 500; }
.botao-link.primary:hover { filter: brightness(1.07); }

/* Rótulo em cima, campo embaixo. */
.f { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--ink-2); }
.f select, .f input { width: 100%; }
.faixa { display: flex; gap: 8px; align-items: center; color: var(--ink-muted); }
.faixa input { width: 96px; }

/* Um formulário em grade: sem isto os campos viram uma coluna única e o
   cartão fica com dois palmos de altura só para quatro campos. */
.campos {
  display: grid; gap: 12px; margin: 14px 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.acoes-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.chk {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.chk input { width: auto; padding: 0; }

.nota, .hint { font-size: 12px; margin: 0 0 6px; color: var(--ink-muted); }
.nota.ok  { color: var(--good); }
.nota.err { color: var(--critical); }
.nota:empty { display: none; }

/* A senha do broker: monoespaçada, porque ela vai ser COPIADA à mão para o
   portal do sensor e "l" contra "1" decide se o aparelho conecta. */
.cred {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; background: var(--surface-2); border: 1px solid var(--borda);
  border-radius: 7px; padding: 3px 7px; user-select: all; word-break: break-all;
}

/* ==========================================================================
   6. CARTÕES
   ========================================================================== */

.card, .cartao {
  background: var(--surface);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.cartao { max-width: 480px; }
.cartao p { margin: 0 0 12px; font-size: 13px; color: var(--ink-2); }

/* Cabeçalho do cartão: título e legenda à esquerda, controles à direita. */
.card-cab {
  display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.card-cab .cresce { flex: 1 1 auto; min-width: 0; }
.card h2 { display: flex; align-items: center; gap: 8px; }
.card .cap { font-size: 12px; color: var(--ink-muted); margin: 3px 0 0; }
.swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; }

/* Rótulo de seção: caixa alta pequena. Ele nomeia o bloco sem competir com o
   número que vem embaixo. */
.rotulo {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-2); display: flex; align-items: center; gap: 8px;
}
/* Em caixa alta ele competiria com o que vem logo abaixo. Serve para a
   legenda que só apresenta o bloco - "Sensor selecionado" acima do nome do
   sensor, que é quem tem de ganhar o olho. */
.rotulo.suave {
  font-size: 12.5px; font-weight: 400; letter-spacing: 0; text-transform: none;
  color: var(--ink-muted);
}

/* Quadradinho colorido que carrega o ícone de um bloco. */
.ico-chip {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.ico-chip svg { width: 15px; height: 15px; }
.ico-chip.temp { background: var(--temp-suave);     color: var(--temp); }
.ico-chip.umid { background: var(--umid-suave);     color: var(--umid); }
.ico-chip.good { background: var(--good-suave);     color: var(--good); }
.ico-chip.warn { background: var(--warning-suave);  color: var(--warning); }
.ico-chip.bad  { background: var(--critical-suave); color: var(--critical); }
.ico-chip.grande { width: 46px; height: 46px; border-radius: 12px; }
.ico-chip.grande svg { width: 24px; height: 24px; }

/* ==========================================================================
   7. MENU DA CONTA
   ========================================================================== */

.menu { position: relative; }
/* O triângulo padrão do <summary> some; a seta ▾ do markup é a nossa. */
.menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 5px 12px 5px 6px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--surface);
  font-size: 13px; color: var(--ink); white-space: nowrap;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary:hover { border-color: var(--borda-forte); }
/* O foco tem que aparecer: o menu é operável só pelo teclado. */
.menu > summary:focus-visible { outline: 2px solid var(--umid); outline-offset: 2px; }
.menu .seta { font-size: 10px; color: var(--ink-muted); }
.menu[open] .seta { transform: rotate(180deg); }

/* A inicial de quem está logado, num círculo. */
.avatar {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--good-suave); color: var(--good);
  font-size: 12px; font-weight: 600; text-transform: uppercase;
}

.menu-itens {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20;
  min-width: 200px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--borda);
  border-radius: var(--raio-2); padding: 5px;
  box-shadow: var(--sombra-2);
}
.menu-itens a, .menu-itens button {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border: none; border-radius: 7px;
  background: none; color: var(--ink); font: inherit; font-size: 13px;
  text-decoration: none; cursor: pointer;
}
.menu-itens a:hover, .menu-itens button:hover { background: var(--surface-2); }

/* ==========================================================================
   8. TABELAS
   ========================================================================== */

table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: right; padding: 9px 12px; border-bottom: 1px solid var(--grid); }
th:first-child, td:first-child { text-align: left; }
th:last-child,  td:last-child  { text-align: left; }
th {
  color: var(--ink-2); font-weight: 600; font-size: 11px;
  letter-spacing: .05em; text-transform: uppercase;
  background: var(--surface-2); border-bottom: 1px solid var(--borda);
  position: sticky; top: 0; z-index: 1;
}
tbody tr:last-child td { border-bottom: none; }
.tbl-wrap {
  max-height: 340px; overflow: auto;
  border: 1px solid var(--borda); border-radius: var(--raio-2);
}

.tag {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--borda); color: var(--ink-muted); white-space: nowrap;
}
.tag.buf { border-color: var(--warning);  color: var(--warning);  background: var(--warning-suave); }
.tag.sr  { border-color: var(--critical); color: var(--critical); background: var(--critical-suave); }
.tag.on  { border-color: var(--good);     color: var(--good);     background: var(--good-suave); }

/* ==========================================================================
   9. GRÁFICOS - o que é comum às duas páginas que desenham
   ========================================================================== */

.chart { position: relative; }
.chart svg { display: block; width: 100%; overflow: visible; }
.empty {
  height: 190px; display: flex; align-items: center; justify-content: center;
  color: var(--ink-muted); font-size: 13px;
}
.tip {
  position: absolute; pointer-events: none; opacity: 0;
  transform: translate(-50%, -100%); transition: opacity .1s;
  background: var(--surface); border: 1px solid var(--borda);
  border-radius: var(--raio-2); padding: 8px 11px; font-size: 12px;
  color: var(--ink); white-space: nowrap;
  box-shadow: var(--sombra-2); z-index: 5;
}
.tip b { font-variant-numeric: tabular-nums; }
.tip .t { color: var(--ink-muted); display: block; font-size: 11px; margin-bottom: 3px; }
.tip .o { color: var(--warning); display: block; font-size: 11px; }

.legenda {
  display: flex; gap: 18px; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-2); padding: 10px 0 2px;
}
.legenda span { display: inline-flex; align-items: center; gap: 7px; }
.mk-linha  { width: 16px; height: 2px; border-radius: 2px; flex: none; }
.mk-trac   { width: 16px; height: 0; border-top: 2px dashed currentColor; flex: none; }
.mk-vivo   { width: 16px; height: 2px; background: var(--ink-2); flex: none; }
.mk-buffer { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--warning); flex: none; }
.mk-gap    { width: 16px; height: 10px; background: var(--lacuna); border: 1px solid var(--warning); flex: none; }

/* ==========================================================================
   10. O CONVITE PARA INSTALAR
   Nasce escondido no HTML; quem decide se ele aparece é o app.js.
   ========================================================================== */

.instalar { margin-top: 16px; text-align: center; }
.botao-instalar {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: 13px; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--borda);
  border-radius: 999px; padding: 9px 16px;
}
.botao-instalar:hover { border-color: var(--borda-forte); color: var(--ink); }
.dica-instalar {
  font-size: 12px; line-height: 1.5; color: var(--ink-muted);
  margin: 8px 0 0; padding: 8px 10px;
  background: var(--surface-2); border: 1px solid var(--borda); border-radius: 8px;
}
.dica-instalar b { color: var(--ink-2); font-weight: 600; }
/* Dentro do menu da conta ele é um item da lista, não um cartão solto. */
.menu-itens .dica-instalar { margin: 2px 4px 4px; }

/* ==========================================================================
   11. TELA ESTREITA
   ========================================================================== */

@media (max-width: 640px) {
  body { padding: 16px 12px 48px; }
  h1 { font-size: 21px; }
  .card, .cartao { padding: 14px; }
}