/* =====================================================================
   VENOSONAR — SISTEMA VISUAL "INSTRUMENTO"
   Aprovado pelo Rafael em 04/09/2026. Manual em MANUAL_VISUAL.md.

   Princípio: a tela é um painel de equipamento, não um site.
   Cantos retos, moldura visível, número como mostrador, âmbar só
   onde há leitura. Nada de sombra difusa, gradiente decorativo ou
   canto arredondado — isso é linguagem de SaaS e foi descartado.

   Largura: ocupa a tela inteira, com 20px de folga nas bordas.
   ===================================================================== */

:root {
  /* --- cor: superfícies (do fundo para a frente) --- */
  --carvao:      #191714;   /* fundo da página */
  --painel:      #221f1a;   /* bloco sobre o fundo */
  --painel2:     #2b2721;   /* cabeçalho de bloco, bloco em destaque */
  --risco:       #3b352c;   /* toda linha, borda e divisória */
  --risco-fraco: rgba(59,53,44,.5);

  /* --- cor: texto --- */
  --tinta:       #f2ece1;   /* texto principal */
  --tinta-fraca: #9c9284;   /* rótulo, unidade, texto secundário */

  /* --- cor: sinal (usar com parcimônia) --- */
  --ambar:       #ffa229;   /* a leitura, o valor medido, o que importa */
  --vermelho:    #e3563f;   /* subiu, falhou, atenção */
  --verde:       #7fb069;   /* desceu, funcionou, operando */

  /* --- tipografia --- */
  --cond: "Bahnschrift", "Arial Narrow", "Roboto Condensed", sans-serif;
  --mono: "Consolas", ui-monospace, "Courier New", monospace;

  /* Condensada para rótulo, título e navegação.
     Monoespaçada para TODO número, código e nome de técnica. */

  /* --- escala de espaço (múltiplos de 2) --- */
  --e1: 2px;    /* vão entre blocos irmãos — a moldura vira a divisória */
  --e2: 6px;
  --e3: 10px;
  --e4: 14px;
  --e5: 18px;   /* respiro padrão dentro de bloco */
  --e6: 24px;   /* respiro entre seções */
  --e7: 32px;

  --borda: 20px; /* folga da página até a borda da tela */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--carvao);
  color: var(--tinta);
  font-family: var(--cond);
  font-size: 15px;
  line-height: 1.5;
  /* textura de linha de varredura: dá superfície física, quase invisível */
  background-image: repeating-linear-gradient(
    0deg, transparent 0 3px, rgba(0,0,0,.16) 3px 4px);
}

a { color: inherit; text-decoration: none; }

/* =====================================================================
   PLACA — a faixa de identificação no topo. Não é "header de site":
   é a plaqueta de um equipamento, com campos rotulados.
   ===================================================================== */
.placa {
  display: flex;
  align-items: stretch;
  background: var(--painel);
  border-bottom: 3px solid var(--ambar);
}
.placa .id {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px;
  border-right: 1px solid var(--risco);
}
.placa .id b { font-size: 20px; letter-spacing: 3px; text-transform: uppercase; }

.mostrador-onda {
  width: 26px; height: 26px;
  border: 2px solid var(--ambar);
  border-radius: 50%;
  position: relative;
  flex: none;
}
.mostrador-onda::after {
  content: ""; position: absolute; inset: 5px;
  border: 2px solid var(--ambar); border-radius: 50%; opacity: .5;
}

.placa .campo {
  padding: var(--e3) 22px;
  border-right: 1px solid var(--risco);
  min-width: 150px;
}
.placa .campo span {
  display: block;
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--tinta-fraca);
}
.placa .campo b { font-size: 15px; font-weight: 600; }

.placa .navegacao { display: flex; align-items: stretch; }
.placa .navegacao a {
  display: flex; align-items: center;
  padding: 0 20px;
  border-right: 1px solid var(--risco);
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--tinta-fraca);
}
.placa .navegacao a:hover { background: var(--painel2); color: var(--tinta); }
.placa .navegacao a.ativo {
  background: var(--painel2);
  color: var(--ambar);
  box-shadow: inset 0 -3px 0 var(--ambar);
}

.placa .estado {
  margin-left: auto;
  display: flex; align-items: center; gap: 9px;
  padding: 0 22px;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--verde);
  white-space: nowrap;
}
.led {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--verde); box-shadow: 0 0 9px var(--verde);
  flex: none;
}

/* =====================================================================
   ÁREA — largura total, 20px de folga. Sem max-width: a tela é o painel.
   ===================================================================== */
.area { padding: var(--borda); }

/* CABEÇA — título de tela, sempre com o traço âmbar à esquerda */
.cabeca { border-left: 4px solid var(--ambar); padding-left: 16px; margin-bottom: var(--e6); }
.cabeca h1 {
  margin: 0;
  font-size: 27px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase;
}
.cabeca p {
  margin: 3px 0 0;
  font-family: var(--mono); font-size: 12.5px; color: var(--tinta-fraca);
}

/* =====================================================================
   MOSTRADORES — a fileira de números do topo.
   Vão de 2px entre eles: a moldura comum vira a divisória.
   ===================================================================== */
.mostradores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--e1);
  background: var(--risco);
  border: 1px solid var(--risco);
  margin-bottom: var(--e6);
}
.mostrador { background: var(--painel); padding: 15px var(--e5) 17px; }
.mostrador .rot {
  font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--tinta-fraca); margin-bottom: 9px;
}
.mostrador .val {
  font-family: var(--mono);
  font-size: 32px; font-weight: 600; letter-spacing: -1px; line-height: 1;
}
.mostrador .un { font-size: 15px; color: var(--tinta-fraca); margin-right: 3px; }
.mostrador .pe { font-size: 11.5px; color: var(--tinta-fraca); margin-top: 7px; letter-spacing: .5px; }

/* Só UM mostrador por fileira leva destaque — o que é a leitura do momento. */
.mostrador.destaque { background: var(--painel2); border-left: 3px solid var(--ambar); }
.mostrador.destaque .val { color: var(--ambar); }

/* =====================================================================
   BLOCO — a caixa padrão. Cabeçalho com rótulo espaçado, corpo dentro.
   ===================================================================== */
.grade { display: grid; gap: var(--e1); background: var(--risco); border: 1px solid var(--risco); }
.grade.duas { grid-template-columns: 1.7fr 1fr; }
.grade.meio { grid-template-columns: 1fr 1fr; }

.bloco { background: var(--painel); }
.bloco.solo { border: 1px solid var(--risco); margin-bottom: var(--e6); }
.bloco h2 {
  margin: 0;
  padding: 12px var(--e5);
  font-size: 12px; letter-spacing: 2.4px; text-transform: uppercase; font-weight: 600;
  color: var(--tinta-fraca);
  background: var(--painel2);
  border-bottom: 1px solid var(--risco);
  display: flex; align-items: center; gap: var(--e4);
}
.bloco h2 .direita { margin-left: auto; }

/* =====================================================================
   TABELA — número sempre monoespaçado; cabeçalho condensado e espaçado.
   ===================================================================== */
.rolagem { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 13px; }
th {
  padding: 8px var(--e5);
  text-align: left;
  font-family: var(--cond);
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600;
  color: var(--tinta-fraca);
  border-bottom: 1px solid var(--risco);
  white-space: nowrap;
}
td { padding: 9px var(--e5); border-bottom: 1px solid var(--risco-fraco); }
tr:last-child td { border-bottom: none; }
tbody tr.clicavel:hover { background: var(--painel2); cursor: pointer; }
td.dir, th.dir { text-align: right; }
td .titulo-item { font-family: var(--cond); font-size: 14.5px; font-weight: 600; display: block; }
td .sub-item { font-family: var(--mono); font-size: 11.5px; color: var(--tinta-fraca); }

.sobe  { color: var(--vermelho); }
.desce { color: var(--verde); }
.zero, .neutro { color: var(--tinta-fraca); }

/* =====================================================================
   SELO — etiqueta retangular. Nunca arredondada, nunca colorida de fundo.
   ===================================================================== */
.selo {
  display: inline-block;
  border: 1px solid var(--risco);
  background: var(--carvao);
  padding: 2px 8px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .5px;
  white-space: nowrap;
}
.selo.ok    { border-color: var(--verde);    color: var(--verde); }
.selo.nao   { border-color: var(--vermelho); color: var(--vermelho); }
.selo.aviso { border-color: var(--ambar);    color: var(--ambar); }

/* BOTÃO — retângulo. O primário é âmbar sólido, e só há um por tela. */
.botao {
  display: inline-block;
  padding: 7px 16px;
  border: 1px solid var(--ambar);
  background: var(--ambar);
  color: #191714;
  font-family: var(--cond);
  font-size: 12px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600;
  cursor: pointer;
}
.botao.vazio { background: transparent; border-color: var(--risco); color: var(--tinta-fraca); }
.botao.vazio:hover { border-color: var(--tinta-fraca); color: var(--tinta); }

/* =====================================================================
   LINHAS — lista rótulo/valor dentro de um bloco. Divisória tracejada
   para distinguir de tabela (que usa linha cheia).
   ===================================================================== */
.linhas { padding: var(--e2) var(--e5) var(--e5); font-family: var(--mono); font-size: 12.5px; }
.linhas div {
  display: flex; justify-content: space-between; gap: var(--e4);
  padding: 9px 0;
  border-bottom: 1px dashed var(--risco);
}
.linhas div:last-child { border-bottom: none; }
.linhas span:first-child { font-family: var(--cond); letter-spacing: .6px; color: var(--tinta-fraca); }

/* =====================================================================
   RÉGUA — escala com agulha. É a assinatura da direção: mostra posição
   dentro de uma faixa, como um instrumento analógico.
   ===================================================================== */
.regua { position: relative; height: 26px; border-top: 1px solid var(--risco); margin-top: var(--e3); }
.regua i { position: absolute; top: 0; width: 1px; height: 6px; background: var(--risco); }
.regua i.alto { height: 11px; background: var(--tinta-fraca); }
.regua b {
  position: absolute; top: 13px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--tinta-fraca);
}
.agulha {
  position: absolute; top: -4px; width: 2px; height: 16px;
  background: var(--ambar); box-shadow: 0 0 8px var(--ambar);
}
.agulha.cinza { background: var(--tinta-fraca); box-shadow: none; height: 12px; top: -2px; }

/* =====================================================================
   LEITURA — o gráfico. Preço muda em degrau, então a linha é escada
   (shape-rendering crispEdges), nunca curva suave.
   ===================================================================== */
.leitura { padding: var(--e5); }
.leitura svg { width: 100%; height: 180px; display: block; }
.traco { fill: none; stroke: var(--ambar); stroke-width: 2; shape-rendering: crispEdges; }
.traco.fraco { stroke: var(--tinta-fraca); stroke-width: 1; stroke-dasharray: 4 4; }
.malha { stroke: var(--risco); stroke-width: 1; }
.marca-txt { fill: var(--tinta-fraca); font-family: var(--mono); font-size: 10px; }
.marca-txt.ambar { fill: var(--ambar); }

/* BARRA — proporção dentro de uma célula de tabela */
.barra { height: 4px; background: var(--carvao); border: 1px solid var(--risco); min-width: 70px; }
.barra i { display: block; height: 100%; background: var(--ambar); }

/* FITA — aviso. Fundo do próprio painel, tarja âmbar à esquerda. */
.fita {
  background: var(--painel);
  border: 1px solid var(--risco);
  border-left: 3px solid var(--ambar);
  padding: 13px var(--e5);
  margin-bottom: var(--e6);
  font-size: 14px;
}
.fita b { color: var(--ambar); }
.fita code { font-family: var(--mono); font-size: 12.5px; color: var(--tinta); }

.rodape {
  margin-top: 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .4px;
  color: var(--tinta-fraca);
}

/* =====================================================================
   TELA DE ENTRADA
   ===================================================================== */
.entrada { display: grid; place-items: center; min-height: 100vh; padding: var(--borda); }
.entrada .caixa {
  width: 100%; max-width: 360px;
  background: var(--painel);
  border: 1px solid var(--risco);
  border-top: 3px solid var(--ambar);
}
.entrada .caixa .marca {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 24px 0 6px;
}
.entrada .caixa .marca b { font-size: 20px; letter-spacing: 3px; text-transform: uppercase; }
.entrada .caixa p {
  text-align: center; margin: 0 0 22px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 1.6px;
  color: var(--tinta-fraca); text-transform: uppercase;
}
.entrada form { padding: 0 24px 26px; }
.campo { margin-bottom: var(--e4); }
.campo label {
  display: block; margin-bottom: var(--e2);
  font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--tinta-fraca);
}
.campo input {
  width: 100%; padding: 10px 12px;
  background: var(--carvao);
  border: 1px solid var(--risco);
  color: var(--tinta);
  font-family: var(--mono); font-size: 14px;
}
.campo input:focus { outline: none; border-color: var(--ambar); }
.entrada .botao { width: 100%; margin-top: var(--e2); }

/* =====================================================================
   TELAS ESTREITAS
   ===================================================================== */
@media (max-width: 980px) {
  .grade.duas, .grade.meio { grid-template-columns: 1fr; }
  .placa { flex-wrap: wrap; }
  .placa .estado { margin-left: 0; padding: 10px 22px; }
}