/* Supervisorio QCB_Control — identidade EFS canonica.
 *
 * Cores e tipografia saem de shared/identidade.json, a mesma fonte que o
 * qcb-gerador usa no caderno eletrico. Nao invente tom aqui: se precisar de uma
 * cor nova, ela nasce la e desce para as variaveis abaixo.
 *
 * Fontes hospedadas AQUI, nao no Google. Painel de bomba precisa abrir na rede
 * do predio, que costuma ser ruim e as vezes bloqueia dominio de fora; e uma
 * requisicao a servidor de terceiro em toda visita e dado de cliente vazando de
 * graca. Sao 56 KB, subconjunto latino (cobre os acentos do portugues).
 */

@font-face {
  font-family: 'Open Sans'; font-style: normal;
  font-weight: 400 600;                 /* arquivo variavel: um so para os dois */
  font-display: swap;                   /* texto aparece na hora, troca depois */
  src: url('fontes/open-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins'; font-style: normal; font-weight: 600;
  font-display: swap;
  src: url('fontes/poppins-600-latin.woff2') format('woff2');
}

:root {
  /* ── identidade (shared/identidade.json) ── */
  --primaria:       #161F44;
  --primaria-clara: #2E3A6E;
  --secundaria:     #2BA8A0;
  --acento:         #F58220;
  --tinta:          #23272F;
  --leve:           #9AA1AD;
  --suave:          #F2F4F7;
  --fundo:          #FFFFFF;

  /* ── estados operacionais ────────────────────────────────────────────────
   * Nao estao na identidade porque nao sao marca, sao semaforo. Escolhidos
   * para conviver com ela: o alarme e o proprio acento da EFS, e o verde foi
   * puxado para perto do teal secundario em vez de um verde generico. */
  --ok:        #1B8F63;
  --ok-fundo:  #E4F4EC;
  --alarme:       #99560C;   /* texto: o acento puro nao tem contraste em fundo claro */
  --alarme-vivo:  #F58220;   /* faixa e ponto: aqui ele brilha */
  --alarme-fundo: #FDF0E1;
  --critico:       #B32D23;
  --critico-fundo: #FBE7E5;
  --offline:       #6B7480;
  --offline-fundo: #ECEFF2;

  --borda:      #DFE4EA;
  --borda-forte:#C6CDD6;
  --texto-fraco:#5F6B78;

  /* ── escala: um passo so, para o espacamento nao virar sorteio ── */
  --e1: 0.25rem;  --e2: 0.5rem;   --e3: 0.75rem;
  --e4: 1rem;     --e5: 1.5rem;   --e6: 2rem;
  --r-p: 6px;     --r-m: 10px;    --r-g: 14px;
  --sombra:       0 1px 2px rgba(22, 31, 68, .06), 0 2px 8px rgba(22, 31, 68, .06);
  --sombra-alta:  0 6px 16px rgba(22, 31, 68, .12), 0 2px 6px rgba(22, 31, 68, .08);

  --fonte-titulo: 'Poppins', 'Segoe UI', Arial, sans-serif;
  --fonte-corpo:  'Open Sans', 'Segoe UI', Arial, sans-serif;
  --fonte-tecnica:'JetBrains Mono', Consolas, 'Courier New', monospace;
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: var(--fonte-corpo);
  font-size: 16px; line-height: 1.5;
  background: var(--suave); color: var(--tinta);
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3, h4 { font-family: var(--fonte-titulo); font-weight: 600; line-height: 1.25; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* Foco visivel importa aqui mais que na media: muita operacao e feita com o
   painel aberto ao lado do quadro, com uma mao so, no teclado. */
:focus-visible { outline: 3px solid var(--secundaria); outline-offset: 2px; border-radius: 3px; }

/* ─── Cabecalho ─────────────────────────────────────────────────────────── */
.topo {
  display: flex; align-items: center; gap: var(--e3);
  flex-wrap: wrap;
  background: var(--primaria); color: #fff;
  padding: var(--e3) var(--e4);
  box-shadow: var(--sombra);
}
.topo h1 {
  font-size: 1rem; letter-spacing: .01em; margin-right: auto;
  display: flex; align-items: center; gap: var(--e2);
}
/* Barrinha teal antes do titulo: assina a marca sem precisar de imagem. */
.topo h1::before {
  content: ''; width: 4px; height: 1.15em;
  background: var(--secundaria); border-radius: 2px; flex: none;
}
.topo nav { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.topo a { color: #C9D2E8; font-size: .92rem; }
.topo a:hover { color: #fff; }
.topo nav > span { color: #97A2C0; font-size: .82rem; }

main { padding: var(--e4); max-width: 1180px; margin: 0 auto; }
main h2 { font-size: 1.35rem; margin: var(--e2) 0 var(--e4); }

/* ─── Cartao base ───────────────────────────────────────────────────────── */
.cartao {
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: var(--r-m); padding: var(--e4); box-shadow: var(--sombra);
}
.grade-cartoes {
  display: grid; gap: var(--e3); margin-bottom: var(--e4);
  grid-template-columns: 1fr;                     /* celular primeiro */
}
@media (min-width: 560px) {
  .grade-cartoes { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--e4); }
}

/* ─── Cartao de quadro (frota) ──────────────────────────────────────────── */
.quadro {
  display: flex; flex-direction: column; gap: var(--e3);
  padding: var(--e4); position: relative; overflow: hidden;
  border-radius: var(--r-m);
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
/* A faixa de estado e o primeiro sinal: le-se a cor antes de ler a palavra. */
.quadro::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: var(--offline);
}
.quadro.ok::before      { background: var(--ok); }
.quadro.alarme::before  { background: var(--alarme-vivo); }
.quadro.offline::before { background: var(--offline); }
.quadro:hover { box-shadow: var(--sombra-alta); transform: translateY(-1px); border-color: var(--borda-forte); }
.quadro.offline { background: #FBFCFD; }

.q-topo { display: flex; align-items: flex-start; gap: var(--e2); }
.q-nome { font-size: 1.05rem; flex: 1; min-width: 0; word-break: break-word; }
.q-tipo {
  font-family: var(--fonte-corpo); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--primaria-clara); background: var(--suave);
  border-radius: var(--r-p); padding: 2px var(--e2); white-space: nowrap;
}
.q-cliente { color: var(--texto-fraco); font-size: .84rem; }
.q-cliente .sem-vinculo { color: var(--leve); font-style: italic; }

/* Selo de estado — palavra, nao so cor: daltonico opera bomba tambem. */
.selo {
  display: inline-flex; align-items: center; gap: var(--e1);
  font-size: .76rem; font-weight: 600; letter-spacing: .02em;
  padding: 3px var(--e2); border-radius: 999px; white-space: nowrap;
}
.selo::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.selo-ok       { color: var(--ok);       background: var(--ok-fundo); }
.selo-alarme   { color: var(--alarme);   background: var(--alarme-fundo); }
.selo-critico  { color: var(--critico);  background: var(--critico-fundo); }
.selo-offline  { color: var(--offline);  background: var(--offline-fundo); }
.q-selos { display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }

/* ─── Bombas ────────────────────────────────────────────────────────────── */
.bombas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e2); }
.bomba {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--suave); border: 1px solid var(--borda);
  border-radius: var(--r-p); padding: var(--e2) var(--e3);
  font-size: .86rem;
}
.bomba .rot { font-size: .68rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-fraco); }
/* Numeros alinhados por coluna (tabular-nums) em vez de fonte monoespacada:
   corrente que oscila entre 9 A e 10 A nao pode fazer o cartao "pular". */
.bomba .val { font-size: .98rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.bomba.ligada { background: var(--ok-fundo); border-color: #BFE3D2; }
.bomba.ligada .rot, .bomba.ligada .val { color: var(--ok); }
.bomba.alerta { background: var(--critico-fundo); border-color: #F0C8C4; }
.bomba.alerta .rot, .bomba.alerta .val { color: var(--critico); }
/* Compatibilidade com telas que ainda usam .ligada solto. */
.ligada { color: var(--ok); font-weight: 600; }

/* ─── Reservatorios: barra em vez de numero solto ───────────────────────── */
.reservatorios { display: grid; gap: var(--e2); }
.nivel { display: grid; grid-template-columns: 4.6rem 1fr auto; align-items: center; gap: var(--e2); }
.nivel .rot { font-size: .74rem; color: var(--texto-fraco); }
/* display:block e obrigatorio: sao <span>, e altura nao se aplica a elemento
   inline - a barra ficava com a borda desenhada e o preenchimento invisivel. */
.nivel .barra { display: block; height: 8px; background: var(--suave);
  border-radius: 999px; overflow: hidden; border: 1px solid var(--borda); }
.nivel .cheio { display: block; height: 100%; background: var(--secundaria);
  border-radius: 999px; transition: width .3s ease; }
.nivel .cheio.baixo { background: var(--alarme-vivo); }
.nivel .cheio.critico { background: var(--critico); }
.nivel .pct { font-size: .82rem; font-weight: 600; font-variant-numeric: tabular-nums;
  min-width: 2.8rem; text-align: right; }
.nivel .pct.vazio { color: var(--leve); font-weight: 400; }

/* ─── Alertas do cartao ─────────────────────────────────────────────────── */
.q-alertas { display: flex; flex-wrap: wrap; gap: var(--e2); }
.alerta {
  display: inline-flex; align-items: center; gap: var(--e1);
  background: var(--critico-fundo); color: var(--critico);
  font-size: .76rem; font-weight: 600;
  border-radius: var(--r-p); padding: 2px var(--e2);
}
.alerta.morno { background: var(--alarme-fundo); color: var(--alarme); }

/* ─── Etiquetas gerais ──────────────────────────────────────────────────── */
.tags { display: flex; flex-wrap: wrap; gap: var(--e2); }
.tag {
  background: var(--suave); color: var(--primaria); border: 1px solid var(--borda);
  border-radius: var(--r-p); padding: 2px var(--e2);
  font-size: .8rem; font-weight: 600;
}
.tag.pend { background: var(--alarme-fundo); color: var(--alarme); border-color: #F3DCC0; }
.tag.ok   { background: var(--ok-fundo);     color: var(--ok);     border-color: #BFE3D2; }

/* ─── Tabelas ───────────────────────────────────────────────────────────── */
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th {
  text-align: left; padding: var(--e2) var(--e3);
  font-family: var(--fonte-titulo); font-size: .74rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; color: var(--texto-fraco);
  border-bottom: 2px solid var(--borda);
}
.tabela td { text-align: left; padding: var(--e3); border-bottom: 1px solid var(--borda); }
.tabela tr:last-child td { border-bottom: 0; }
.sev-alarme  td:nth-child(2) { color: var(--alarme);  font-weight: 600; }
.sev-critico td:nth-child(2) { color: var(--critico); font-weight: 700; }
/* Tabela nao cabe em tela de celular: rola dentro do cartao, sem empurrar a
   pagina inteira para o lado. */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

canvas { max-width: 100%; }
.legenda { color: var(--texto-fraco); font-size: .84rem; margin-top: var(--e2); }
.vazio-msg { color: var(--texto-fraco); padding: var(--e5); text-align: center;
  background: var(--fundo); border: 1px dashed var(--borda-forte); border-radius: var(--r-m); }

/* ─── Login ─────────────────────────────────────────────────────────────── */
.tela-login {
  display: grid; place-items: center; min-height: 100vh; padding: var(--e4);
  background: linear-gradient(160deg, var(--primaria) 0%, var(--primaria-clara) 100%);
}
.login {
  width: min(94vw, 380px); display: flex; flex-direction: column; gap: var(--e3);
  background: var(--fundo); padding: var(--e5); border-radius: var(--r-g);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
}
.login h1 { font-size: 1.3rem; display: flex; align-items: center; gap: var(--e2); }
.login h1::before { content: ''; width: 4px; height: 1.15em;
  background: var(--secundaria); border-radius: 2px; }
.login .subtitulo { color: var(--texto-fraco); font-size: .9rem; margin-top: calc(var(--e3) * -1); }
.login label { display: flex; flex-direction: column; gap: var(--e1); font-size: .86rem;
  font-weight: 600; color: var(--texto-fraco); }
.login input {
  padding: var(--e3); border: 1px solid var(--borda-forte); border-radius: var(--r-p);
  font-size: 1rem; font-family: inherit; color: var(--tinta);
}
.login input:focus { border-color: var(--secundaria); }
.login button {
  padding: var(--e3); background: var(--primaria); color: #fff; border: 0;
  border-radius: var(--r-p); font-size: 1rem; font-weight: 600;
  font-family: var(--fonte-titulo); margin-top: var(--e1);
}
.login button:hover { background: var(--primaria-clara); }
.erro { color: var(--critico); font-size: .9rem; }

/* ─── Configuracao remota ───────────────────────────────────────────────── */
.aviso { padding: var(--e3); border-radius: var(--r-p); margin: var(--e3) 0;
  font-size: .9rem; border: 1px solid transparent; }
.aviso-ok  { background: var(--ok-fundo);      color: var(--ok);      border-color: #BFE3D2; }
.aviso-erro{ background: var(--critico-fundo); color: var(--critico); border-color: #F0C8C4; }
.cfg-linha { display: flex; flex-direction: column; gap: var(--e2);
  padding: var(--e3) 0; border-bottom: 1px solid var(--borda); }
.cfg-linha > label { font-weight: 600; color: var(--primaria); font-family: var(--fonte-titulo); }
.cfg-linha small { color: var(--texto-fraco); font-weight: 400; font-family: var(--fonte-corpo); }
.cfg-controle { display: flex; align-items: center; gap: var(--e2); flex-wrap: wrap; }
.cfg-controle select, .cfg-controle input {
  padding: var(--e2) var(--e3); border: 1px solid var(--borda-forte);
  border-radius: var(--r-p); font-size: .95rem; font-family: inherit; }
.cfg-controle input[type=number] { width: 8rem; font-family: var(--fonte-tecnica); }
.cfg-controle button { padding: var(--e2) var(--e4); background: var(--primaria); color: #fff;
  border: 0; border-radius: var(--r-p); font-weight: 600; }
.cfg-controle button:hover { background: var(--primaria-clara); }
.cfg-linha.inativa { opacity: .55; }
.unid { color: var(--texto-fraco); font-size: .84rem; }
.por { color: var(--leve); font-size: .8rem; }

/* ─── Avisos: sino e caixa ──────────────────────────────────────────────── */
.sino { position: relative; background: none; border: 0; font-size: 1.15rem;
  line-height: 1; padding: var(--e1) var(--e2); color: #fff; }
.sino .contador {
  position: absolute; top: -2px; right: -4px;
  background: var(--critico); color: #fff;
  font-size: .64rem; font-weight: 700; line-height: 1;
  padding: 3px 5px; border-radius: 999px; min-width: 17px; text-align: center;
  border: 2px solid var(--primaria);
}

/* No celular a caixa vira folha inteira: ancorar menu suspenso a um cabecalho
   que quebra em duas linhas sempre acaba cobrindo o titulo. */
.painel-avisos {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column;
  background: var(--fundo); color: var(--tinta);
}
/* display:flex vence o atributo [hidden] (que so define display:none), entao a
   caixa ficaria por cima da tela desde o carregamento, comendo os cliques. */
.painel-avisos[hidden] { display: none; }
.painel-avisos .cabeca, .painel-avisos .rodape { padding: var(--e3) var(--e4); }
.painel-avisos .cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  background: var(--primaria); color: #fff;
}
.painel-avisos .cabeca strong { font-family: var(--fonte-titulo); }
.painel-avisos .cabeca .btn-link { color: #C9D2E8; }
.painel-avisos .cabeca span { display: flex; align-items: center; gap: var(--e3); }
.painel-avisos .rodape { border-top: 1px solid var(--borda); background: var(--suave);
  display: grid; gap: var(--e1); }
.painel-avisos .dica { color: var(--texto-fraco); font-size: .74rem; line-height: 1.35; }
.painel-avisos #pushEstado { color: var(--ok); font-size: .78rem; }
.btn-link { background: none; border: 0; color: var(--primaria); font-weight: 600;
  font-size: .84rem; padding: 0; text-align: left; font-family: inherit; }
.lista-avisos { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.lista-avisos li { border-bottom: 1px solid var(--borda); }
.lista-avisos li.vazio { padding: var(--e5) var(--e4); color: var(--texto-fraco); }
.lista-avisos a { display: grid; gap: 3px; padding: var(--e3) var(--e4);
  border-left: 5px solid transparent; color: var(--tinta); }
.lista-avisos a:hover, .lista-avisos a:focus { background: var(--suave); }
.lista-avisos strong { font-size: .92rem; color: var(--primaria); font-family: var(--fonte-titulo); }
.lista-avisos span { font-size: .84rem; color: var(--texto-fraco); }
.lista-avisos time { font-size: .74rem; color: var(--leve); }
.lista-avisos .sev-critico { border-left: 0; }
.lista-avisos .sev-critico a { border-left-color: var(--critico); }
.lista-avisos .sev-alarme  a { border-left-color: var(--alarme-vivo); }
.lista-avisos .sev-aviso   a { border-left-color: var(--secundaria); }
/* Lido continua legivel — e historico, nao lixo: serve de prova de que avisamos. */
.lista-avisos .novo a { background: #FFFCF6; }
.lista-avisos .lido a { background: var(--fundo); }
.lista-avisos .lido strong { color: var(--texto-fraco); }

@media (min-width: 720px) {
  main { padding: var(--e5) var(--e4); }
  .topo { padding: var(--e3) var(--e5); }
  .topo h1 { font-size: 1.1rem; }
  /* No computador a caixa volta a ser um menu que desce do sino. */
  .painel-avisos {
    inset: auto 12px auto auto; top: 58px;
    width: 440px; max-height: min(70vh, 560px);
    border: 1px solid var(--borda); border-radius: var(--r-m); overflow: hidden;
    box-shadow: var(--sombra-alta);
  }
}