/* ============================================================
   Supervisório de utilidades — identidade "Grafite".
   Segue a lógica de HMI de alto desempenho (ISA-101): a tela em
   repouso é acinzentada e cor saturada significa anormalidade.
   Cores de fase conforme ABNT (marrom / preto / cinza).

   Tipografia embarcada, sem CDN: a rede da instalação costuma ser
   isolada, e a tela precisa ficar igual em toda loja.
     Barlow Semi Condensed  títulos e placas — condensada de sinalização
     IBM Plex Sans          corpo e números (dígitos tabulares)
     IBM Plex Mono          tags ISA
   Os valores usam dígitos tabulares: alinham na coluna sem o
   aspecto rígido de terminal.
   ============================================================ */

@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("fontes/barlow-semi-condensed-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("fontes/barlow-semi-condensed-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Semi Condensed";
  src: url("fontes/barlow-semi-condensed-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fontes/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fontes/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("fontes/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fontes/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("fontes/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ============================================================
   Tokens. Três blocos fixos, nesta ordem:
     1. :root                      fontes, raios e espaços (nenhuma cor)
     2. :root, [data-tema=escuro]  cores do tema escuro (padrão)
     3. [data-tema=claro]          as mesmas variáveis no tema claro
   Regra ISA-101: a cor vive aqui. Fora destes blocos não há cor
   literal (só sombra preta translúcida); o teste "Tokens e temas"
   barra o contrário. Valores: docs/planos/referencia/identidade
   e planta-3d (canvas).
   ============================================================ */

:root {
  --titulo: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --corpo: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --num: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  --raio: 2px;
  --esp-1: 4px;
  --esp-2: 8px;
  --esp-3: 12px;
  --esp-4: 16px;
  --esp-5: 20px;
}

:root, [data-tema="escuro"] {
  /* superfícies e linhas */
  --fundo: #0f1215;
  --chapa: #161a1e;
  --chapa-2: #1c2126;
  --chapa-3: #252b31;
  --linha: #2c333a;
  --linha-2: #3b434b;

  /* texto */
  --texto: #e7eaed;
  --texto-2: #adb6be;
  --texto-3: #808a94;

  /* seleção e estados: cor saturada só aqui */
  --sel: #4fc3d1;
  --info: #6aa6ee;
  --atencao: #f2a93b;
  --critico: #ff5b4f;
  --ok: #46c08a;
  --sobre-estado: #0f1215;
  --critico-fundo: #2c1a19;
  --atencao-fundo: #2a2318;
  --info-fundo: #1f2d40;

  /* fases ABNT (marrom / preto / cinza) e água */
  --fase-a: #c08a5c;
  --fase-b: #d5d9dd;
  --fase-c: #8b949c;
  --agua: #3f86c9;

  /* séries da comparação no Histórico (ordem fixa, distinguíveis entre si) */
  --serie-1: #6aa6ee; --serie-2: #e0894f; --serie-3: #46c08a; --serie-4: #f2c14b;
  --serie-5: #d987b0; --serie-6: #8bc34a; --serie-7: #9d8cf0; --serie-8: #ff7b72;

  /* cor fixa de cada setor (a mesma do 3D da Planta): identificação, não estado */
  --setor-1: #3987e5; --setor-2: #d95926; --setor-3: #199e70; --setor-4: #c98500;
  --setor-5: #d55181; --setor-6: #2f9a2f; --setor-7: #9085e9; --setor-8: #2ab3b8;

  /* placa clara das logomarcas: as cores da marca não somem no escuro */
  --logo-fundo: #f7f8f9;
  --logo-texto: #4a545c;

  /* cena 3D */
  --c3d-fundo: #12161a;
  --c3d-piso: #161a1e;
  --c3d-laje: #1f252a;
  --c3d-parede: #2a3137;
  --c3d-equip: #454e56;
  --c3d-normal: #5a646c;
  --c3d-normal-2: #a3adb6;

  color-scheme: dark;

  /* pontes de compatibilidade com os nomes antigos (somem conforme as telas migram) */
  --painel: var(--fundo); --painel-borda: var(--linha);
  --tela: var(--chapa); --tela-2: var(--chapa-2); --tela-3: var(--chapa-3);
  --grafite: var(--chapa); --grafite-2: var(--chapa-2);
  --tinta: var(--texto); --tinta-2: var(--texto-2); --tinta-3: var(--texto-3);
  --linha-forte: var(--linha-2); --neutro: var(--info);
  /* cena Loja 2: tokens do visualizador de referência (modelo_loja2.html), tema escuro */
  --s1: #3987e5; --s2: #d95926; --s3: #199e70; --s4: #c98500; --s5: #d55181; --s6: #008300; --s7: #9085e9;
  --c-ceu: #1a1f21; --c-chao: #22282a; --c-laje: #2b3235; --c-parede-ext: #555d60; --c-parede: #646d70;
  --c-camara: #4b5457; --c-pilar: #8d9693; --c-linha: #3f474a; --c-vidro: #5f8a96; --c-cobertura: #4a5254;
  --m-movel: #5c6567; --m-movel-2: #6c7577; --m-escuro: #a0a9a5; --m-carga: #6e6a60; --m-estrutura: #879090;
  --m-quadro: #c3cbc8; --m-luz-outra: #8a928f;
  --m-amarelo: #c9a21a; --m-telha: #3b4245; --m-condensadora: #9ea7a6;
  --m-corpo: #8e9796; --m-inox: #7f898a; --m-produto: #8a8274; --m-produto-2: #737c83; --m-carne: #9a4a3f; --m-luz: #f2f4f1; --m-luz-quente: #f0a24c;
  /* etiquetas do artifact (quadros, câmaras, salas) */
  --l2-surface: #232a2c; --l2-ink: #e2e6e3; --l2-ink-2: #a3aca8; --l2-ink-3: #78817e; --l2-line: #394144; --l2-sel: #3fc6de;
  --l2-sel-texto: #ffffff;
  /* cena do Atacadista (modelo.html dele): no tema escuro, as paredes são as mesmas da Loja 2 */
  --c-parede-ext-atacadista: #555d60; --c-parede-atacadista: #646d70;
}

[data-tema="claro"] {
  --fundo: #e9ecee;
  --chapa: #f7f8f9;
  --chapa-2: #eef1f3;
  --chapa-3: #e2e6e9;
  --linha: #d2d8dc;
  --linha-2: #bcc4ca;

  --texto: #14181c;
  --texto-2: #4a545c;
  --texto-3: #5f6a73;

  --sel: #0d7f8d;
  --info: #2a64b5;
  --atencao: #9a6100;
  --critico: #c42b20;
  --ok: #1b7a4e;
  --sobre-estado: #ffffff;
  --critico-fundo: #f6e3e3;
  --atencao-fundo: #f6efe0;
  --info-fundo: #d3deea;

  --fase-a: #7a4a22;
  --fase-b: #23272a;
  --fase-c: #6a737b;
  --agua: #2f78bf;

  --serie-1: #1f5fb8; --serie-2: #b5521a; --serie-3: #17825a; --serie-4: #8a6200;
  --serie-5: #b0457c; --serie-6: #4d7a14; --serie-7: #5b45c9; --serie-8: #c4342b;

  --setor-1: #2a78d6; --setor-2: #eb6834; --setor-3: #1baf7a; --setor-4: #eda100;
  --setor-5: #e87ba4; --setor-6: #008300; --setor-7: #6250d6; --setor-8: #138f94;

  --logo-fundo: #f7f8f9;
  --logo-texto: #4a545c;

  --c3d-fundo: #dde2e5;
  --c3d-piso: #d1d7db;
  --c3d-laje: #eceff1;
  --c3d-parede: #f7f8f9;
  --c3d-equip: #98a1a9;
  --c3d-normal: #bcc4cb;
  --c3d-normal-2: #6f7a84;

  color-scheme: light;

  /* as pontes são recalculadas aqui: valem também se o atributo estiver num descendente */
  --painel: var(--fundo); --painel-borda: var(--linha);
  --tela: var(--chapa); --tela-2: var(--chapa-2); --tela-3: var(--chapa-3);
  --grafite: var(--chapa); --grafite-2: var(--chapa-2);
  --tinta: var(--texto); --tinta-2: var(--texto-2); --tinta-3: var(--texto-3);
  --linha-forte: var(--linha-2); --neutro: var(--info);
  /* cena Loja 2: tokens do visualizador de referência, tema claro */
  --s1: #2a78d6; --s2: #eb6834; --s3: #1baf7a; --s4: #eda100; --s5: #e87ba4; --s6: #008300; --s7: #6250d6;
  --c-ceu: #dfe2de; --c-chao: #cfd3ce; --c-laje: #e9ebe7; --c-parede-ext: #c9ccc8; --c-parede: #d3d6d2;
  --c-camara: #c9cec9; --c-pilar: #6a716e; --c-linha: #a9afa9; --c-vidro: #9fbcc4; --c-cobertura: #a9afa9;
  --m-movel: #b3b9b4; --m-movel-2: #9aa19c; --m-escuro: #59615d; --m-carga: #c7c2b5; --m-estrutura: #7a827e;
  --m-quadro: #3d4442; --m-luz-outra: #f4f5f2;
  --m-amarelo: #f0c419; --m-telha: #e3e6e4; --m-condensadora: #f2f3f1;
  --m-corpo: #eceeeb; --m-inox: #b9c0c0; --m-produto: #c9bfa9; --m-produto-2: #b7bec4; --m-carne: #b0574a; --m-luz: #ffffff; --m-luz-quente: #ffb35c;
  --l2-surface: #eef0ec; --l2-ink: #1b2022; --l2-ink-2: #545c5a; --l2-ink-3: #7b8380; --l2-line: #bcc1bb; --l2-sel: #0a93ad;
  --l2-sel-texto: #ffffff;
  /* cena do Atacadista (modelo.html dele): as paredes do tema claro, mais escuras que as da Loja 2 */
  --c-parede-ext-atacadista: #bfc4be; --c-parede-atacadista: #a6aca7;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--painel);
  color: var(--tinta);
  font-family: var(--corpo);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

body {
  display: grid;
  grid-template-columns: 84px 1fr;
  grid-template-rows: 100%;
}

/* ---------------------------------------------------- coluna de navegação
   Igual ao artifact Grafite: .rail, .marca, .ri, .badge, .rail-pe.        */

.coluna {
  background: var(--chapa);
  color: var(--texto-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid var(--linha);
  overflow-y: auto;
  padding: 14px 0;
  gap: 4px;
}

.marca {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 12px;
  background: var(--texto);
  color: var(--fundo);
  display: grid;
  place-items: center;
  font: 700 22px var(--titulo);
  margin-bottom: 12px;
}

.menu { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.ri {
  position: relative;
  width: 70px;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--texto-2);
  cursor: pointer;
  font: 600 11.5px var(--titulo);
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
}
.ri:hover { background: var(--chapa-2); color: var(--texto); }
.ri[aria-current="page"] { background: var(--chapa-3); color: var(--texto); }
.ri[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 16px;
  bottom: 16px;
  width: 3px;
  border-radius: 2px;
  background: var(--sel);
}
.ri:focus-visible { outline: 2px solid var(--sel); outline-offset: 1px; }
.ri[hidden] { display: none; }
.ri .icone { display: flex; }
.ri .nome { font: inherit; letter-spacing: inherit; text-transform: inherit; }
/* Tema, Som e Sair: o mesmo item, sem ícone, mais baixo */
.ri.mini { min-height: 34px; font-size: 10.5px; text-align: center; line-height: 1.15; padding: 4px 2px; }

/* selo âmbar da contagem de alarmes (.badge do artifact) */
.ri .contagem {
  position: absolute;
  top: 5px;
  right: 9px;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  background: var(--atencao);
  color: var(--sobre-estado);
  font: 600 10.5px/17px var(--num);
  letter-spacing: 0;
  text-align: center;
  padding: 0 4px;
}
.ri .contagem[hidden] { display: none; }

.rodape-coluna {
  margin-top: auto;
  width: 100%;
  align-items: center;
  text-align: center;
  padding: 12px 6px 0;
  border-top: 1px solid var(--linha);
  font-size: 11px;
  color: var(--texto-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rodape-coluna .linha-estado { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.rodape-coluna .ri { width: 100%; }
.rodape-coluna .usuario { color: var(--texto-2); font-size: 10.5px; overflow-wrap: break-word; max-width: 100%; }

/* assinatura da Engemase: marca contratual, pequena, mas não sai */
.assinatura { width: 56px; background: var(--logo-fundo); padding: 5px 4px 6px; display: flex; flex-direction: column; gap: 3px; }
.assinatura[hidden] { display: none; }
.assinatura span { font-size: 7.5px; letter-spacing: 0; text-transform: none; color: var(--logo-texto); line-height: 1.1; }
.assinatura img { display: block; height: 20px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; }
.cabecalho .logo-cliente { height: 32px; width: auto; max-width: 220px; object-fit: contain; flex: none; }

/* ------------------------------------------------------------- área útil */

.area { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }

/* fichas do artifact: .tag (placa de tag ISA) e .chip (estado em pílula) */
.tag {
  font: 500 12px var(--mono);
  color: var(--texto-2);
  border: 1px solid var(--linha-2);
  border-radius: 6px;
  padding: 2px 7px;
}
.tag[hidden] { display: none; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--chapa-2);
  border: 1px solid var(--linha);
  color: var(--texto-2);
  white-space: nowrap;
}
.chip[hidden] { display: none; }
.chip .led { width: 8px; height: 8px; }
.chip.relogio { font-variant-numeric: tabular-nums; }
/* Simulação: ficha âmbar */
#faixa-sim {
  background: color-mix(in srgb, var(--atencao) 15%, var(--chapa));
  border-color: var(--atencao);
  color: var(--texto);
  font-weight: 600;
}

.cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  padding: 14px 24px;
  background: var(--chapa);
  border-bottom: 1px solid var(--linha);
}
.cab-titulos { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cab-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cab-fichas { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.migalha {
  font: 600 12.5px var(--titulo);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-3);
}
.cabecalho h1 {
  margin: 0;
  font: 700 26px/1.1 var(--titulo);
  letter-spacing: .01em;
  text-transform: none;
}

/* faixa de alarme: tom, não vermelho cheio. Ordem e especificidade fixas:
   base (âmbar), alta, baixa e, por último, reconhecida, que ganha de qualquer nível. */
.faixa-alarme {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 24px;
  background: color-mix(in srgb, var(--atencao) 15%, var(--chapa));
  border-bottom: 1px solid var(--atencao);
  color: var(--texto);
  font-size: 13px;
}
.faixa-alarme[data-nivel="alta"] {
  background: color-mix(in srgb, var(--critico) 17%, var(--chapa));
  border-bottom-color: var(--critico);
}
.faixa-alarme[data-nivel="baixa"] {
  background: color-mix(in srgb, var(--info) 12%, var(--chapa));
  border-bottom-color: var(--info);
}
.faixa-alarme.ciente,
.faixa-alarme.ciente[data-nivel] {
  background: var(--chapa-2);
  border-bottom-color: var(--linha);
}
.faixa-alarme.visivel { display: flex; }
.faixa-alarme .quando { font-family: var(--num); font-size: 12.5px; color: var(--texto-2); }
.faixa-alarme .msg { font-weight: 600; }
.faixa-alarme .resto { color: var(--texto-2); }
.faixa-alarme .acoes { margin-left: auto; display: flex; gap: 8px; }
.btn[hidden] { display: none; }
.faixa-alarme .btn.apagado { opacity: .6; }
.faixa-alarme .btn[disabled] { opacity: .45; cursor: default; }
/* enquanto não reconhecido, o marcador pulsa: é o que chama o operador de longe */
.faixa-alarme:not(.ciente) .msg::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: pulsar 1.1s steps(2, end) infinite;
  vertical-align: baseline;
}
@media (prefers-reduced-motion: reduce) {
  .faixa-alarme:not(.ciente) .msg::before { animation: none; }
}

.tela { padding: 20px; overflow-y: auto; flex: 1; }
.tela > * + * { margin-top: 16px; }

/* ------------------------------------------------------ placa de identificação
   Assinatura da interface: placa de acrílico gravada, com os dois parafusos.  */

.placa {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 0;
  background: none;
  color: var(--texto);
  padding: 18px 22px 14px;
  position: relative;
  border-bottom: 0;
}
/* cabeçalho de cartão: título .rot e, depois dele, a ficha ISA */
.placa .isa {
  order: 2;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 11px;
  color: var(--texto-2);
  border: 1px solid var(--linha-2);
  border-radius: 6px;
  padding: 2px 7px;
}
.placa .isa:empty { display: none; }
.placa .titulo {
  order: 1;
  font: 600 11px var(--titulo);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-2);
  white-space: nowrap;
}
.placa .estado {
  margin-left: auto;
  white-space: nowrap;
  font: 600 11px var(--titulo);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--texto-3);
  background: var(--chapa-2);
  border: 1px solid var(--linha);
  border-radius: 5px;
  padding: 2px 7px;
}
.placa .estado.ruim { color: var(--sobre-estado); background: var(--critico); border-color: var(--critico); }
.placa .estado.atencao { color: var(--sobre-estado); background: var(--atencao); border-color: var(--atencao); }
.placa .estado.semcom {
  color: var(--texto-2);
  border: 1px dashed var(--linha-2);
  background: repeating-linear-gradient(135deg, var(--chapa-3) 0 4px, var(--chapa-2) 4px 8px);
}
/* estado do disjuntor no cabeçalho, na convenção de painel elétrico:
   vermelho = fechado (energizado), verde = aberto */
.placa .estado-dj {
  margin-left: auto;
  white-space: nowrap;
  font: 700 11px var(--corpo);
  letter-spacing: .08em;
  padding: 2px 8px;
  border: 1px solid var(--linha-2);
  border-radius: 5px;
  color: var(--texto-2);
}
.placa .estado-dj.fechado { background: var(--critico); border-color: var(--critico); color: var(--sobre-estado); }
.placa .estado-dj.aberto { background: var(--ok); border-color: var(--ok); color: var(--sobre-estado); }
.placa .estado-dj + .estado { margin-left: 12px; }

/* ------------------------------------------------------------- instrumentos */

.bloco {
  background: var(--chapa);
  border: 1px solid var(--linha);
  border-radius: 14px;
  overflow: hidden;
}
.bloco > .corpo { padding: 14px 16px 16px; }
.placa + .corpo { padding: 0 22px 20px; }

.grade { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grade.dupla { grid-template-columns: minmax(340px, 1fr) minmax(340px, 1.2fr); }
.largura-total { grid-column: 1 / -1; }

.leituras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--linha);
  border-left: 1px solid var(--linha);
}
.leitura {
  background: var(--tela);
  padding: 9px 11px 10px;
  border-right: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  border-left: 3px solid transparent;
}
/* a fase aparece como um ponto da cor dela antes do rótulo, sem borda colorida */
.leitura[data-fase] .rotulo::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px;
  margin-right: 7px; vertical-align: 1px; background: var(--neutro);
}
.leitura[data-fase="a"] .rotulo::before { background: var(--fase-a); }
.leitura[data-fase="b"] .rotulo::before { background: var(--fase-b); }
.leitura[data-fase="c"] .rotulo::before { background: var(--fase-c); }
.leitura.anormal { background: var(--critico-fundo); border-left-color: var(--critico); }

.rotulo {
  display: block;
  font: 600 12px var(--titulo);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-3);
  margin-bottom: 5px;
}
.valor {
  font-family: var(--num);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.005em;
}
.valor.g { font-size: 42px; font-weight: 500; letter-spacing: -.015em; }
.valor .un { font-size: 12px; color: var(--tinta-2); margin-left: 4px; letter-spacing: 0; }
.valor.sem-dado { color: var(--tinta-3); }
/* ângulo de fase: discreto, ao lado da medida (relé de proteção) */
.leitura .angulo {
  margin-left: 6px;
  font-family: var(--num);
  font-size: 13px;
  color: var(--tinta-2);
  white-space: nowrap;
}
.leitura.anormal .valor { color: var(--critico); }

/* escala com marcas de limite — mostra onde o valor está dentro da faixa */
.escala { margin-top: 8px; }
.escala .trilho {
  position: relative;
  height: 8px;
  background: var(--tela-3);
  border: 1px solid var(--linha-forte);
}
.escala .barra { position: absolute; inset: 0 auto 0 0; background: var(--tinta-2); transition: width .5s ease; }
.escala .barra.atencao { background: var(--atencao); }
.escala .barra.critico { background: var(--critico); }
/* marca de limite na régua. Nome próprio: ".marca" já é a logomarca da coluna,
   e o padding dela virava um bloco de 33 px em cima da régua. */
.escala .limite {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  margin: 0;
  padding: 0;
  background: var(--tinta);
  border-radius: 1px;
}
.escala .limite.atencao { background: var(--atencao); }
.escala .limite.critico { background: var(--critico); }
.escala .extremos {
  display: flex;
  justify-content: space-between;
  font-family: var(--num);
  font-size: 10px;
  color: var(--tinta-3);
  margin-top: 3px;
}

/* barras de fase */
.barras { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.barra-fase { display: grid; grid-template-columns: 20px 1fr 66px; align-items: center; gap: 10px; font-size: 11px; }
.barra-fase .id { font-family: var(--mono); color: var(--tinta-2); }
.barra-fase .trilho {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--chapa-3);
  overflow: hidden;
}
.barra-fase .fill { display: block; height: 100%; width: 0; border-radius: 3px; transition: width .5s ease; }
.barra-fase .medida { font-family: var(--num); text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- anunciador de falhas (gerador) */

.anunciador {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr));
  gap: 8px;
}
.janela {
  position: relative;
  background: var(--tela-2);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 11px 12px 11px 30px;
  font-size: 12px;
  line-height: 1.25;
  color: var(--tinta-2);
  min-height: 52px;
  display: flex;
  align-items: center;
}
.janela::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 50%;
  margin-top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tela-3);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .2);
}
.janela.ativa {
  background: var(--critico);
  border-color: var(--critico);
  color: var(--sobre-estado);
  font-weight: 600;
  animation: piscar-janela 1.1s steps(2, end) 6;
}
.janela.ativa::before { background: var(--sobre-estado); box-shadow: 0 0 7px var(--sobre-estado); }
.janela.ativa[data-prioridade="media"] { background: var(--atencao); border-color: var(--atencao); color: var(--sobre-estado); }
/* estado de operação normal (bomba ligada, disjuntor fechado): acende, não alarma */
.janela.ativa[data-prioridade="info"] {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--sobre-estado);
  animation: none;
}
.janela.primeira::after {
  content: "1ª";
  position: absolute;
  right: 8px;
  top: 6px;
  font-family: var(--num);
  font-size: 10px;
  opacity: .8;
}
@keyframes piscar-janela { 50% { filter: brightness(.62); } }

/* ------------------------------------------------------------ indicadores */

.led { width: 9px; height: 9px; border-radius: 50%; background: var(--tinta-3); flex: 0 0 auto; }
.led.ok { background: var(--ok); }
.led.atencao { background: var(--atencao); }
.led.critico { background: var(--critico); animation: pulsar 1.1s steps(2, end) infinite; }
@keyframes pulsar { 50% { opacity: .3; } }

.selo {
  display: inline-block;
  font: 600 11px var(--titulo);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid;
  border-radius: 5px;
}
.selo.alta { color: var(--critico); border-color: var(--critico); }
.selo.media { color: var(--atencao); border-color: var(--atencao); }
.selo.baixa { color: var(--info); border-color: var(--info); }
.selo.ok { color: var(--ok); border-color: var(--ok); }

.dados-linha { display: flex; flex-wrap: wrap; gap: 22px; }
.dado .rotulo { margin-bottom: 3px; }
.dado .n { font-family: var(--num); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.big { font-family: var(--num); font-size: 25px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: 0; }

/* ------------------------------------------------------------- desenhos SVG */

.rolagem { overflow-x: auto; }
.desenho { width: 100%; display: block; }
.desenho text { fill: var(--tinta); font-family: var(--corpo); font-size: 11px; }
.desenho .rot { fill: var(--tinta-2); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.desenho .simbolo { fill: var(--tinta-2); font-family: var(--mono); font-size: 10px; }
.desenho .num { font-family: var(--num); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.desenho .caixa { fill: var(--tela-2); stroke: var(--linha-forte); stroke-width: 1; }
.desenho .cond { stroke: var(--linha-forte); stroke-width: 2; fill: none; }
.desenho .cond.energizado { stroke: var(--tinta); }
.desenho .cond.atencao-carga { stroke: var(--atencao); }
.desenho .cond.sobrecarga { stroke: var(--critico); stroke-width: 3; }
.desenho .fluxo {
  stroke: var(--tinta); stroke-width: 2; stroke-dasharray: 5 9; fill: none;
  opacity: .75; animation: correr 1.6s linear infinite;
}
.desenho .fluxo.atencao-carga { stroke: var(--atencao); }
.desenho .fluxo.sobrecarga { stroke: var(--critico); }
@keyframes correr { to { stroke-dashoffset: -28; } }
.desenho .barra-geral { stroke: var(--tinta); stroke-width: 5; stroke-linecap: square; }
.desenho .trilho-svg { fill: var(--tela-3); stroke: var(--linha-forte); stroke-width: 1; }
.desenho .led-svg { stroke: rgba(0, 0, 0, .2); stroke-width: 1; }
.desenho .f-a { fill: var(--fase-a); }
.desenho .f-b { fill: var(--fase-b); }
.desenho .f-c { fill: var(--fase-c); }
.desenho .alerta { fill: var(--critico); }
.desenho .cota { stroke: var(--tinta-3); stroke-width: .8; fill: none; }
.desenho .agua { fill: var(--agua); }
/* a parede do tanque não pode ter preenchimento: pintaria por cima da água */
.desenho .parede { fill: none; stroke: var(--linha-forte); stroke-width: 1.5; }
.desenho .parede-interna { fill: none; stroke: var(--linha); stroke-width: 1; }
.desenho .valor-desenho {
  font-family: var(--num);
  font-weight: 700;
  font-size: 30px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.015em;
  fill: var(--tinta);
}
.desenho .valor-desenho.alerta { fill: var(--critico); }
.desenho .agua-topo { stroke: var(--info); stroke-width: 1.5; fill: none; }
.desenho .diesel { fill: var(--texto-3); }

@media (prefers-reduced-motion: reduce) {
  .desenho .fluxo, .led.critico, .janela.ativa { animation: none; }
}

/* ----------------------------------------------------------------- controles */

.entrada {
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 8px;
  background: var(--fundo);
  color: var(--tinta);
  border: 1px solid var(--linha-2);
  border-radius: 8px;
}
.entrada:focus-visible { outline: 2px solid var(--sel); outline-offset: 1px; }
.controles label.rotulo { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
code { font-family: var(--mono); font-size: .92em; background: var(--tela-2); padding: 1px 4px; }

select, .botao {
  font-family: var(--corpo);
  font-size: 12px;
  background: var(--chapa-3);
  color: var(--tinta);
  border: 1px solid var(--linha-2);
  border-radius: 8px;
  padding: 7px 13px;
  min-height: 36px;
  cursor: pointer;
}
.botao:hover { border-color: var(--texto-3); }
select:focus-visible, .botao:focus-visible { outline: 2px solid var(--sel); outline-offset: 1px; }
/* grupo de botões = .seg do artifact: trilho com o selecionado em relevo */
.grupo-botoes, .seg { display: inline-flex; gap: 2px; background: var(--chapa-2); border: 1px solid var(--linha); border-radius: 10px; padding: 3px; }
.grupo-botoes .botao, .seg .botao { font: 500 12.5px var(--corpo); color: var(--texto-2); background: none; border: 0; border-radius: 7px; padding: 6px 11px; min-height: 30px; }
.grupo-botoes .botao:hover, .seg .botao:hover { color: var(--texto); }
.seg .botao[aria-pressed="true"] { background: var(--chapa-3); color: var(--texto); box-shadow: inset 0 0 0 1px var(--linha-2); }
.grupo-botoes .botao[aria-pressed="true"] { background: var(--chapa-3); color: var(--texto); border-color: var(--sel); box-shadow: inset 0 0 0 1px var(--linha-2); }

.controles { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
canvas { width: 100%; height: 320px; display: block; }

/* Histórico: comparação de várias grandezas */
.hist-series { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; min-height: 32px; }
.hist-chip { display: inline-flex; align-items: center; gap: 8px; background: var(--chapa-2); border: 1px solid var(--linha);
             border-radius: 999px; padding: 4px 4px 4px 12px; font-size: 13px; max-width: 100%; }
/* ponto da cor da série */
.hist-chip > i { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.hist-chip b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hist-chip-num { color: var(--tinta-2); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 12px; }
.hist-tirar { border: 0; background: none; font-size: 18px; line-height: 1; padding: 2px 8px; border-radius: 999px; cursor: pointer; color: inherit; }
.hist-tirar:hover, .hist-tirar:focus-visible { background: var(--chapa-3); color: var(--texto); }
.hist-paineis { position: relative; display: grid; gap: 6px; }
.hist-area { position: relative; cursor: crosshair; user-select: none; }
.hist-cruz { position: absolute; top: 12px; bottom: 24px; width: 1px; background: var(--texto-3); pointer-events: none; }
/* trecho sendo arrastado para ampliar */
.hist-selecao { position: absolute; top: 12px; bottom: 24px; pointer-events: none;
  background: color-mix(in srgb, var(--sel) 16%, transparent); border-inline: 1px solid var(--sel); }
.hist-intervalo[hidden] { display: none; }
.hist-intervalo .entrada { min-height: 32px; }
.hist-aviso { color: var(--critico); }
.hist-ajuda { margin: 8px 0 0; }
.hist-dica { position: absolute; z-index: 5; background: var(--chapa-3); color: var(--texto); border: 1px solid var(--linha-2); padding: 8px 10px; font-size: 12px;
             pointer-events: none; min-width: 200px; max-width: 320px; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.hist-dica > div { display: flex; align-items: center; gap: 6px; padding: 1px 0; }
.hist-dica i { width: 10px; height: 3px; flex: none; }
.hist-dica b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hist-dica-hora { color: var(--texto-2); margin-bottom: 4px; }
@media (max-width: 640px) {
  .hist-chip { flex-wrap: wrap; }
  .hist-chip-num { white-space: normal; }
}

/* ----------------------------------------------------------- indicadores
   Mosaico de números do período. Segue a mesma regra do resto da interface:
   o número é escuro em operação normal e só ganha cor quando sai do alvo. */
/* flex, e não grid: assim as fichas da última fileira se esticam e preenchem a
   largura, em vez de deixar um vão cinza do lado */
.indicadores {
  display: flex;
  flex-wrap: wrap;
  background: var(--chapa-2);
  border: 1px solid var(--linha);
  border-radius: 12px;
  overflow: hidden;
}
.indicador { flex: 1 1 168px; min-width: 168px; }
/* as divisórias vão nas fichas, não no vão do grid: a última linha quase nunca
   fecha certo, e com gap colorido a sobra viraria uma faixa cinza sem sentido */
.indicador {
  padding: 11px 13px 12px;
  border-right: 1px solid var(--linha);
  border-bottom: 1px solid var(--linha);
  margin: -1px -1px 0 0;
}
.indicador .n {
  font-family: var(--num);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  line-height: 1.15;
}
.indicador .un { font-size: 12px; font-weight: 600; color: var(--tinta-2); margin-left: 3px; }
.indicador .apoio {
  font-size: 11px;
  color: var(--tinta-2);
  margin-top: 4px;
  letter-spacing: .01em;
  min-height: 14px;
}
.indicador.atencao { background: var(--atencao-fundo); }
.indicador.atencao .n { color: var(--atencao); }
.indicador.critico { background: var(--critico-fundo); }
.indicador.critico .n { color: var(--critico); }
.indicador.critico .apoio, .indicador.atencao .apoio { color: inherit; opacity: .8; }

/* ------------------------------------------------------------ consumo
   Um gráfico de colunas por setor. Uma cor só (o azul de informação): cada
   gráfico é um setor e o título diz qual. Hora estimada e hora em andamento
   levam hachura na mesma cor, nunca um tom mais claro. Grade e eixo em
   linha fina, recessivos — quem fala é a coluna. */
.cons-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.cons-paineis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  margin-top: 12px;
}
.cons-painel { background: var(--tela-2); border: 1px solid var(--linha); padding: 10px 10px 6px; min-width: 0; }
.cons-painel.destaque { background: var(--tela); border-color: var(--linha-forte); }
.cons-cabecalho { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 4px; }
.cons-nome { font-family: var(--titulo); font-size: 13px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--tinta); }
.cons-cabecalho .isa { font-family: var(--mono); font-size: 10.5px; color: var(--tinta-3); margin-left: 7px; }
.cons-total { text-align: right; font-size: 12px; color: var(--tinta-2); white-space: nowrap; }
.cons-total b { font-family: var(--num); font-size: 17px; font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
.cons-area { width: 100%; min-width: 0; }
.cons-svg { display: block; overflow: visible; }
.cons-grade { stroke: var(--linha); stroke-width: 1; }
.cons-base { stroke: var(--linha-forte); stroke-width: 1; }
.cons-eixo { font-family: var(--mono); font-size: 10.5px; fill: var(--tinta-2); }
.cons-coluna { fill: var(--info); }
.cons-coluna.estimada { fill: url(#cons-hachura); }
.cons-coluna.parcial { fill: url(#cons-hachura-parcial); }
.cons-hachura-fundo { fill: var(--info-fundo); }
.cons-hachura-traco { stroke: var(--info); stroke-width: 2.4; }
.cons-sem-dado { stroke: var(--tinta-3); stroke-width: 2; stroke-dasharray: 2 2; }
.cons-alvo { fill: transparent; cursor: default; }
.cons-alvo:hover { fill: var(--texto); fill-opacity: .08; }

.cons-legenda { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--tinta-2); margin-left: auto; }
.cons-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.cons-chave { display: inline-block; width: 11px; height: 11px; border-radius: 2px 2px 0 0; background: var(--info); }
.cons-chave.estimada { background: repeating-linear-gradient(45deg, var(--info) 0 2px, var(--info-fundo) 2px 4px); }
.cons-chave.parcial { background: repeating-linear-gradient(135deg, var(--info) 0 2px, var(--info-fundo) 2px 4px); }
.cons-chave.sem-dado { height: 0; border-top: 2px dashed var(--tinta-3); border-radius: 0; }

.cons-dica {
  position: fixed;
  z-index: 50;
  pointer-events: none;
  max-width: 220px;
  padding: 7px 9px;
  background: var(--grafite);
  border: 1px solid var(--linha-2);
  color: var(--texto);
  font-size: 12px;
  line-height: 1.45;
  white-space: pre-line;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

.cons-ranking { display: grid; gap: 7px; }
.cons-linha { display: grid; grid-template-columns: minmax(110px, 180px) 1fr minmax(150px, auto); align-items: center; gap: 12px; font-size: 13px; }
.cons-rotulo { color: var(--tinta); overflow-wrap: anywhere; }
.cons-trilho { height: 14px; background: var(--tela-2); }
.cons-barra { --cor-setor: var(--info); display: block; height: 100%; background: var(--cor-setor); border-radius: 0 2px 2px 0; }
.cons-barra.cinza { background: var(--linha-forte); }
.cons-valor { color: var(--tinta-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cons-valor b { color: var(--tinta); font-weight: 600; }
.cons-tabela { margin-top: 14px; overflow-x: auto; }
.cons-tabela tfoot td { border-top: 1px solid var(--linha-forte); background: var(--tela-2); }

@media (max-width: 600px) {
  .cons-linha { grid-template-columns: 1fr; gap: 3px; }
  .cons-legenda { margin-left: 0; }
}

/* Consumo igual ao artifact: controles no alto da tela, quatro indicadores em
   cartões, participação em barra empilhada, entrada geral e a grade por setor.
   O pico é a coluna de consPico, em --texto; o "Não medido" vai tracejado. */
.cons-tela { gap: 18px; }
.cons-controles { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.cons-dia { align-items: center; }
.cons-dia .botao[data-cons="hoje"] { color: var(--texto); }
.cons-extenso { font: 600 12.5px var(--corpo); color: var(--texto); padding: 0 8px 0 10px; border-left: 1px solid var(--linha-2); white-space: nowrap; }
.cons-extenso::first-letter { text-transform: uppercase; }
.cons-dia .entrada { background: none; border: 0; padding: 4px 6px; color: var(--texto-2); }

.cons-tela .indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; background: none; border: 0; border-radius: 0; overflow: visible; }
.cons-tela .indicador { margin: 0; min-width: 0; padding: 16px 18px 15px; border: 1px solid var(--linha); border-radius: 14px; background: var(--chapa); }
.cons-tela .indicador .rotulo { font: 600 11px var(--titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); margin: 0 0 4px; }
.cons-tela .indicador .n { font-size: 27px; overflow-wrap: anywhere; }
.cons-tela .indicador .apoio { font-size: 12px; }

.cons-tela .card-cab .cons-ajuda { margin-left: auto; font-size: 12px; color: var(--texto-2); }
.cons-pilha { display: flex; gap: 2px; height: 18px; border-radius: 5px; overflow: hidden; margin: 0 0 14px; background: var(--chapa-2); }
.cons-seg { --cor-setor: var(--info); flex: none; min-width: 2px; background: var(--cor-setor); cursor: pointer; }
.cons-pilha:has(.sel) .cons-seg:not(.sel) { background: var(--linha-2); }
.cons-pilha .cons-seg.cinza, .cons-pilha:has(.sel) .cons-seg.cinza:not(.sel) {
  background: repeating-linear-gradient(135deg, var(--texto-3) 0 3px, var(--chapa-2) 3px 6px);
}
.cons-tela .cons-ranking { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 4px 12px; }
.cons-tela .cons-linha {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome valor" "trilho trilho";
  align-items: baseline; gap: 4px 10px; padding: 7px 8px; min-width: 0;
  font: 500 13px var(--corpo); color: var(--texto); text-align: left;
  background: none; border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.cons-tela .cons-linha:hover { background: var(--chapa-2); }
.cons-tela .cons-linha.sel { background: var(--chapa-3); border-color: var(--linha-2); }
.cons-tela .cons-linha:focus-visible { outline: 2px solid var(--sel); outline-offset: 1px; }
.cons-tela .cons-rotulo { grid-area: nome; min-width: 0; overflow-wrap: normal; }
.cons-tela .cons-valor { grid-area: valor; font-size: 12.5px; }
.cons-tela .cons-trilho { grid-area: trilho; height: 3px; border-radius: 2px; background: var(--chapa-3); overflow: hidden; }
.cons-tela .cons-barra.cinza { background: var(--texto-3); }

.cons-entrada .cons-legenda { margin-left: auto; }
.cons-chave.pico { background: var(--texto); }
/* pico medido: coluna cheia em --texto; pico estimado ou em andamento mantém a hachura e ganha contorno */
.cons-coluna.pico:not(.estimada):not(.parcial) { fill: var(--texto); }
.cons-coluna.pico.estimada, .cons-coluna.pico.parcial { stroke: var(--texto); stroke-width: 1.5; }
.cons-entrada .cons-painel { background: none; border: 0; border-radius: 0; padding: 0; }

.cons-setor-cab { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 4px 0 -4px; }
.cons-setor-cab .rot { font: 600 11px var(--titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.cons-setor-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cons-tela .btn[aria-pressed="true"] { border-color: var(--sel); }
.cons-tela .cons-paineis { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-top: 0; }
.cons-tela .cons-paineis .cons-painel { background: var(--chapa); border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px 10px; }
.cons-tela .cons-painel.sel { border-color: var(--sel); box-shadow: 0 0 0 1px var(--sel); }
.cons-tela .cons-cabecalho { align-items: baseline; margin-bottom: 2px; }
.cons-titulo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; }
.cons-tela .cons-nome { font: 700 16px var(--titulo); letter-spacing: .02em; }
.cons-titulo .tag { font-size: 10.5px; padding: 1px 6px; }
.cons-sub { font-size: 12px; color: var(--texto-2); }
.cons-tela .cons-total b { font-size: 18px; font-weight: 600; }
.cons-total .un { font-size: 12px; color: var(--texto-2); margin-left: 3px; }
.cons-pico { font-size: 12px; color: var(--texto-2); margin: 0 0 6px; }
.cons-tela .cons-tabela { margin-top: 0; }

/* quatro cartões numa fileira até 760 px, como o mosaico do original; abaixo disso, dois e um */
@media (max-width: 1100px) {
  .cons-tela .indicadores { gap: 10px; }
  .cons-tela .indicador { padding: 13px 12px 12px; }
  .cons-tela .indicador .n { font-size: 23px; }
}
@media (max-width: 720px) {
  .cons-tela .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .cons-tela .indicadores { grid-template-columns: minmax(0, 1fr); }
  .cons-controles { justify-content: flex-start; }
  .cons-entrada .cons-legenda { margin-left: 0; }
}

/* diagnóstico de uma linha, abaixo de um bloco */
.veredito {
  margin-top: 12px;
  padding: 9px 12px;
  border-left: 3px solid var(--linha-forte);
  background: var(--tela-2);
  font-size: 12.5px;
  line-height: 1.55;
}
.veredito.atencao { border-left-color: var(--atencao); background: var(--atencao-fundo); }
.veredito.critico { border-left-color: var(--critico); background: var(--critico-fundo); }
.veredito b { font-weight: 600; }

.desenho .barra-bat { fill: var(--tinta-2); }
.desenho .barra-bat.atencao { fill: var(--atencao); }
.desenho .barra-bat.critico { fill: var(--critico); }
.desenho .limite-bat { stroke: var(--critico); stroke-width: 1; stroke-dasharray: 4 3; }

/* -------------------------------------------- seções da instalação (editor) */
.secao-instalacao + .secao-instalacao {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--linha);
}
.titulo-secao {
  font-family: var(--titulo);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta);
  margin: 0 0 12px;
}
.campos-secao {
  display: grid;
  gap: 12px 18px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.campo-secao { display: block; }
.campo-secao .entrada { width: 100%; margin-top: 3px; }
.campo-secao .un { color: var(--tinta-3); }
.campo-secao .dica {
  display: block;
  font-size: 11px;
  color: var(--tinta-3);
  margin-top: 3px;
  line-height: 1.4;
}

/* --------------------------------------------------------------- tabelas */

table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th {
  text-align: left;
  font: 600 11px var(--titulo);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-3);
  padding: 8px 10px;
  border-bottom: 1px solid var(--linha);
  background: none;
  position: sticky;
  top: 0;
}
td { padding: 8px 10px; border-bottom: 1px solid var(--linha); }
tbody tr:hover { background: var(--chapa-2); }
tr.prioridade-alta td:first-child { box-shadow: inset 3px 0 0 var(--critico); }
tr.prioridade-media td:first-child { box-shadow: inset 3px 0 0 var(--atencao); }
tr.prioridade-baixa td:first-child { box-shadow: inset 3px 0 0 var(--info); }
td.n { font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.vazio { padding: 26px 4px; text-align: center; color: var(--tinta-2); }

/* estado vazio: a tela existe e explica o que falta, em vez de sumir do menu */
.vazio-guia { max-width: 62ch; padding: 6px 2px 4px; }
.vazio-texto { margin: 0 0 14px; font-size: 15px; color: var(--tinta); }
.vazio-passos { margin: 0; padding-left: 20px; color: var(--tinta-2); font-size: 13.5px; line-height: 1.75; }
.vazio-passos li { padding-left: 4px; }
.vazio-passos li::marker { color: var(--tinta-3); font-weight: 600; }
.vazio-passos b { color: var(--tinta); font-weight: 600; }

/* nota explicativa: frase inteira, em caixa normal. O .rotulo é para etiqueta
   curta de campo, e em caixa alta um parágrafo fica ilegível. */
.nota {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--tinta-2);
  max-width: 96ch;
}
.nota b { color: var(--tinta); font-weight: 600; }

/* --------------------------------------------------------- editor de tabela */

table.editor td { padding: 5px 6px; vertical-align: middle; }
table.editor th { padding: 7px 6px; }
table.editor .entrada { width: 100%; }
.entrada.curta { width: 84px; }
.entrada.larga { min-width: 170px; }
table.editor input[type="radio"] { accent-color: var(--grafite); width: 15px; height: 15px; }

.botao.destaque {
  background: var(--chapa-3);
  color: var(--texto);
  border-color: var(--linha-2);
  font-weight: 700;
}
.botao.destaque:hover { background: var(--linha-2); }

.resultado {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid;
  font-size: 13px;
  background: var(--tela-2);
}
.resultado.ok { border-left-color: var(--ok); }
.resultado.ruim { border-left-color: var(--critico); background: var(--critico-fundo); }
.resultado ul { padding-left: 18px; }
.resultado li { text-transform: none; letter-spacing: 0; font-size: 12.5px; line-height: 1.6; }
.resultado.atencao { border-left-color: var(--atencao); background: var(--atencao-fundo); }

/* ------------------------------------------------------------ acionamento */

.comandos { display: flex; flex-wrap: wrap; gap: 14px; }
.comando {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--linha-forte);
  border-left: 3px solid var(--linha-forte);
  border-radius: 2px;
  background: var(--tela-2);
  min-width: 300px;
}
.comando.perigoso { border-left-color: var(--critico); }
/* armado: o segundo toque executa, então o estado precisa ser inconfundível */
.comando.armado {
  background: var(--critico-fundo);
  border-color: var(--critico);
  border-left-color: var(--critico);
}
.comando .acionar {
  font-weight: 600;
  min-width: 170px;
  padding: 9px 14px;
  background: var(--chapa-3);
  color: var(--texto);
  border-color: var(--linha-2);
  font-weight: 700;
}
.comando .acionar:hover:not([disabled]) { background: var(--linha-2); }
.comando .acionar[disabled] {
  opacity: .45;
  cursor: not-allowed;
}
.comando.armado .acionar {
  background: var(--critico);
  border-color: var(--critico);
  /* o --texto herdado ficava em ~2,5:1 (escuro) e ~3,1:1 (claro) sobre o vermelho */
  color: var(--sobre-estado);
  animation: pulsar 1s steps(2, end) infinite;
}
.comando-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.comando-estado { flex: 1; min-width: 160px; }
.comando-senha {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px dashed var(--linha-forte);
}
.comando-senha .entrada { max-width: 260px; font-family: var(--corpo); font-size: 13px; padding: 8px 10px; }
.comando .motivo {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--tinta-2);
}
.comando .motivo.aviso { color: var(--critico); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .comando.armado .acionar { animation: none; }
}

/* ----------------------------------------------------------------- Planta 3D
   Vinda do canvas de referência (docs/planos/referencia/planta-3d.canvas.html).
   A cena fica em .vista; rótulos (.l3), ferramentas (.ferr) e legenda (.leg)
   flutuam sobre ela. Só tokens: a cor da cena sai de --c3d-*. */

.planta { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.planta-lado { flex: 1 1 340px; max-width: 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.planta-esp { flex: 1 1 auto; }
.planta-fraco { font-size: 12px; color: var(--texto-3); }
.planta-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.planta-cab .rotulo { margin-bottom: 0; }

.vista { position: relative; flex: 1 1 640px; min-width: 0; height: 640px; border-radius: 16px; overflow: hidden; background: var(--c3d-fundo); border: 1px solid var(--linha); }
.vista canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.planta-rotulos { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* Uma linha só (nome e valor), com a cor fixa do setor numa faixa à esquerda (a mesma do Consumo). */
.l3 { --cor-setor: var(--linha-2); position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; display: flex; align-items: baseline; gap: 7px; background: var(--chapa); background: color-mix(in srgb, var(--chapa) 94%, transparent); border: 1px solid var(--linha-2); border-radius: 6px; padding: 3px 8px 4px 11px; white-space: nowrap; text-align: left; color: var(--texto); font: inherit; box-shadow: 0 2px 8px rgba(0, 0, 0, .22); }
.l3::before { content: ""; position: absolute; left: 3px; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--cor-setor); }
.l3 b { font: 600 10.5px var(--titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.l3 span { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.l3.atencao { border-color: var(--atencao); }
.l3.atencao span { color: var(--atencao); }
.l3.critico { border-color: var(--critico); }
.l3.critico span { color: var(--critico); }
.l3.semcom { border-style: dashed; }
.l3.semcom span { color: var(--texto-3); }
.l3.semmed { border-style: dashed; opacity: .9; }
.l3.semmed span { color: var(--texto-3); }
.l3.sel { box-shadow: 0 0 0 2px var(--sel); }
/* área focada: o rótulo abre em cartão, com carga, energia de hoje e fases */
.l3:has(.l3-mais) { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; row-gap: 4px; align-items: baseline; padding-bottom: 7px; }
.l3-mais { grid-column: 1 / -1; display: grid; gap: 3px; }
.l3-carga { display: block; height: 4px; border-radius: 2px; background: var(--linha); overflow: hidden; margin: 2px 0 3px; }
.l3-carga i { display: block; height: 100%; background: var(--cor-setor); }
.l3-carga i.atencao { background: var(--atencao); }
.l3-carga i.critico { background: var(--critico); }
.l3 .l3-linha { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--texto); }
.l3 .l3-linha span { font-size: 12px; }
.l3 .l3-rot { font: 600 10px var(--titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-3); min-width: 38px; }
.l3:focus-visible, .row:focus-visible, .btn:focus-visible { outline: 2px solid var(--sel); outline-offset: 2px; }

.ferr { position: absolute; left: 14px; top: 14px; right: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; pointer-events: none; }
.ferr > * { pointer-events: auto; }
.ferr .planta-esp { pointer-events: none; }
.planta-chip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 5px 11px; border-radius: 999px; background: var(--chapa-2); border: 1px dashed var(--linha-2); color: var(--texto-2); }
.planta-sem3d { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--texto-2); }
.planta-sem3d[hidden], .planta-rotulos[hidden] { display: none; }

.leg { position: absolute; left: 14px; bottom: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: var(--chapa); background: color-mix(in srgb, var(--chapa) 90%, transparent); border: 1px solid var(--linha); border-radius: 10px; padding: 8px 12px; font-size: 12px; color: var(--texto-2); max-width: calc(100% - 28px); }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 5px; }
.sw.tracejada { border: 1px dashed var(--texto-3); }
/* a legenda troca com o modo: Operação (estados) ou Consumo do dia (escala) */
.leg-grupo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.leg-grupo[hidden] { display: none; }
.leg-escala { display: inline-block; width: 90px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--c3d-normal), var(--info)); }

/* cartões do aside, no idioma do Unifilar */
.planta .card { background: var(--chapa); border: 1px solid var(--linha); border-radius: 14px; min-width: 0; }
.planta-alim { padding: 12px 10px 10px; }
.planta-alim > .planta-cab { padding: 0 6px; }
.planta-lista { display: flex; flex-direction: column; }

/* indicadores 2 × 2 com divisórias */
.planta-kpi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; }
.planta-kpi > div { padding: 14px 16px; min-width: 0; }
.planta-kpi > div:nth-child(odd) { border-right: 1px solid var(--linha); }
.planta-kpi > div:nth-child(-n+2) { border-bottom: 1px solid var(--linha); }
.planta-kpi .rotulo { margin-bottom: 2px; }
.planta-big { font: 500 27px/1.15 var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; color: var(--texto); }
.planta-big .un { font: 400 13px var(--corpo); color: var(--texto-3); margin-left: 3px; letter-spacing: 0; }
.planta-big .alerta { color: var(--critico); }
.planta-kpi-sub { font-size: 12px; color: var(--texto-3); }

.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; align-items: center; text-align: left; width: 100%; background: none; border: 1px solid transparent; border-radius: 10px; padding: 8px 10px; color: var(--texto); font: inherit; cursor: pointer; }
.row:hover { background: var(--chapa-2); }
.row.sel { border-color: var(--sel); background: var(--chapa-2); }
.row-nome { display: flex; align-items: center; gap: 8px; min-width: 0; }
.row-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-val { display: flex; align-items: center; gap: 8px; }
.row-val .num { min-width: 58px; text-align: right; font-variant-numeric: tabular-nums; }

.planta-tag { font: 500 10.5px var(--mono); color: var(--texto-2); border: 1px solid var(--linha-2); border-radius: 6px; padding: 0 5px; white-space: nowrap; }
.planta-tag.hip { border-style: dashed; color: var(--texto-3); }
.planta-tag.conflito { border-color: var(--atencao); color: var(--atencao); }
.planta-estado { font: 600 11px var(--titulo); letter-spacing: .08em; text-transform: uppercase; border-radius: 5px; padding: 2px 7px; flex: none; color: var(--texto-3); background: var(--chapa-2); border: 1px solid var(--linha); }
.planta-estado.atencao { color: var(--sobre-estado); background: var(--atencao); border-color: var(--atencao); }
.planta-estado.critico { color: var(--sobre-estado); background: var(--critico); border-color: var(--critico); }
.planta-estado.semcom, .planta-estado.semmed { color: var(--texto-2); border-style: dashed; border-color: var(--linha-2); }
.planta-barra { grid-column: 1 / -1; display: block; height: 6px; border-radius: 3px; background: var(--chapa-3); overflow: hidden; }
.planta-barra i { display: block; height: 100%; border-radius: 3px; background: var(--texto-3); }
.planta-barra.atencao i { background: var(--atencao); }
.planta-barra.critico i { background: var(--critico); }
.planta-barra.semcom i { background: repeating-linear-gradient(135deg, var(--texto-3) 0 3px, transparent 3px 6px); }
.planta-barra.info i { background: var(--info); }

.planta-detalhe { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.planta-detalhe .planta-cab { margin-bottom: 0; }
.planta-detalhe .nota { margin: 0; }
.planta-nome { --cor-setor: transparent; font: 700 24px/1.1 var(--titulo); border-left: 4px solid var(--cor-setor); padding-left: 10px; }
/* Área escolhida: o detalhe sobe para o topo da coluna, acima dos indicadores e da lista. */
.planta-lado.com-sel .planta-detalhe { order: -1; }
.planta-limpar { padding: 3px 9px; font-size: 12px; }
/* volta à loja inteira, no 3D, só com área escolhida: em destaque, com a cor de seleção */
.ferr .planta-voltar { border: 1px solid var(--sel); color: var(--texto); }
.ferr .planta-voltar[hidden] { display: none; }
/* energia de hoje da área escolhida: barras por hora na cor do setor */
.planta-energia-det { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--linha); padding-top: 10px; }
.planta-energia-det .planta-cab { margin-bottom: 0; }
.planta-energia-det .planta-fraco { margin: 0; }
.planta-horas { --cor-setor: var(--info); display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; align-items: end; height: 64px; border-bottom: 1px solid var(--linha-2); }
.planta-horas i { display: block; background: var(--cor-setor); border-radius: 2px 2px 0 0; min-height: 0; opacity: .85; }
.planta-horas i.pico { opacity: 1; box-shadow: 0 0 0 1px var(--texto); }
.planta-horas i.parc { opacity: .45; }
.planta-horas i.est { background: repeating-linear-gradient(135deg, var(--cor-setor) 0 3px, transparent 3px 6px); opacity: 1; }
.planta-horas i.fut, .planta-horas i.sem { background: none; }
.planta-horas-eixo { display: flex; justify-content: space-between; font-size: 11px; color: var(--texto-3); margin-top: -4px; }
.planta-part { --cor-setor: var(--info); height: 8px; border-radius: 4px; background: var(--linha); overflow: hidden; }
.planta-part i { display: block; height: 100%; background: var(--cor-setor); }
.planta-medidor { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--linha); padding-top: 10px; }
.planta-medidor .en-grupo { display: grid; gap: 6px; padding: 8px 0; border-top: 1px solid var(--linha); }
.planta-medidor .en-grupo:first-child { border-top: 0; }
.planta-medidor .en-grupo-tit { font: 600 10.5px var(--titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-3); }
.planta-medidor .leituras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; border: 0; }
.planta-medidor .leitura { background: none; border: 0; padding: 0; min-width: 0; }
/* mesma escala dos campos de cima (Potência, Carga…): rótulo fraco, número de 16 px */
.planta-medidor .leitura .rotulo { font: 400 12px var(--corpo); letter-spacing: 0; text-transform: none; color: var(--texto-3); }
.planta-medidor .valor { font-size: 16px; }
.planta-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.planta-campos .num { font-size: 16px; font-variant-numeric: tabular-nums; }
.planta-campos .alerta { color: var(--critico); }
/* barras de fase do detalhe, na escala do disjuntor */
.planta-fases { display: flex; flex-direction: column; gap: 7px; }
.planta-fase { display: grid; grid-template-columns: 28px minmax(0, 1fr) 64px; gap: 8px; align-items: center; font-size: 12.5px; }
.planta-fase-id { font-family: var(--mono); color: var(--texto-3); }
.planta-fase-trilho { display: block; height: 5px; border-radius: 3px; background: var(--chapa-3); overflow: hidden; }
.planta-fase-trilho i { display: block; height: 100%; border-radius: 3px; transition: width .5s ease; }
.planta-fase .num { text-align: right; font-variant-numeric: tabular-nums; }
.planta-quadro, .planta-local { border-top: 1px solid var(--linha); padding-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 12.5px; color: var(--texto-2); }
.planta-quadro .rotulo, .planta-local .rotulo { margin-bottom: 0; }
.planta-local { flex-direction: column; align-items: stretch; }
.planta-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

.fotos { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fotos li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12.5px; color: var(--texto-2); }
.foto-ph { width: 64px; height: 44px; border-radius: 6px; border: 1px dashed var(--linha-2); display: grid; place-items: center; font: 500 10.5px var(--mono); color: var(--texto-3); background: var(--chapa-2); overflow: hidden; }
.foto-ph img { width: 100%; height: 100%; object-fit: cover; }

.btn { font: 500 13px var(--corpo); color: var(--texto); background: var(--chapa-3); border: 1px solid var(--linha-2); border-radius: 8px; padding: 7px 13px; cursor: pointer; min-height: 36px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.btn:hover { border-color: var(--texto-3); }

/* ----------------------------------------------------- Planta 3D · cena do artifact
   Cena do visualizador de referência de cada loja (cena-loja2.js,
   cena-atacadista.js), com os mesmos ganchos (.loja2-*). Os tokens da cena são
   os do artifact (modelo_loja2.html) e ficam nos blocos de tema (--s*, --c-*,
   --m-*, --l2-*); a cena os lê no .vista. Nada aqui muda o resto da tela. */
.loja2-cena { background: var(--c-ceu); }
/* Atacadista (modelo.html dele): só as paredes diferem dos tokens da Loja 2 (no tema claro) */
.loja2-cena.cena-atacadista { --c-parede-ext: var(--c-parede-ext-atacadista); --c-parede: var(--c-parede-atacadista); }
.loja2-etiquetas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.loja2-etiquetas .pin {
  position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; white-space: nowrap;
  font: 600 11px/1 var(--titulo); letter-spacing: .04em; text-transform: uppercase;
  color: var(--l2-ink); background: var(--l2-surface); border: 1px solid var(--l2-line); padding: 4px 6px 3px; border-radius: 2px;
}
.loja2-etiquetas .pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 8px; background: var(--l2-ink-3); }
.loja2-etiquetas .pin.quadro { background: var(--m-quadro); color: var(--l2-surface); border-color: var(--m-quadro); font-size: 10px; }
.loja2-etiquetas .pin.sel { background: var(--l2-sel); color: var(--l2-sel-texto); border-color: var(--l2-sel); z-index: 2; }
.loja2-etiquetas .pin.sel::after { background: var(--l2-sel); }
.loja2-etiquetas .pin[hidden] { display: none !important; }
.loja2-etiquetas .pin.camara { font-size: 10px; display: inline-flex; gap: 6px; }
.loja2-etiquetas .pin.camara b { font-family: var(--mono); font-weight: 500; color: var(--l2-ink-2); letter-spacing: 0; }

/* painel Cena: o resto dos controles do artifact, por cima do 3D */
.loja2-painel { position: absolute; top: 62px; right: 14px; width: 330px; max-width: calc(100% - 28px); max-height: calc(100% - 76px); overflow-y: auto;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; background: var(--chapa); border: 1px solid var(--linha-2);
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .28); z-index: 3; }
.loja2-painel[hidden] { display: none; }
.loja2-painel .rotulo { margin: 4px 0 0; }
.loja2-painel .seg { flex-wrap: wrap; }
.loja2-painel .medidores { list-style: none; margin: 0; padding: 0; display: grid; width: 100%; }
.loja2-painel .medidores button { width: 100%; display: grid; grid-template-columns: 12px 58px 1fr auto; gap: 10px; align-items: center; text-align: left;
  background: transparent; border: 0; border-radius: 7px; padding: 7px 8px; cursor: pointer; color: var(--texto); font: 400 13px/1.2 var(--corpo); }
.loja2-painel .medidores button:hover { background: var(--chapa-2); }
.loja2-painel .medidores button[aria-current="true"] { background: var(--chapa-3); box-shadow: inset 3px 0 0 var(--sel); }
.loja2-painel .medidores i { width: 12px; height: 12px; border-radius: 2px; display: block; }
.loja2-painel .medidores .tag { font-family: var(--mono); font-size: 12px; color: var(--texto-2); background: none; border: 0; padding: 0; border-radius: 0; }
.loja2-painel .medidores .q { font-family: var(--mono); font-size: 11px; color: var(--texto-3); }
.loja2-painel .medidores .pend i { background: transparent !important; border: 1.5px dashed var(--texto-3); }
.loja2-painel .ficha { display: grid; gap: 8px; width: 100%; border-top: 1px solid var(--linha); padding-top: 10px; }
.loja2-painel .ficha h2 { margin: 0; font: 700 20px/1.1 var(--titulo); display: flex; align-items: center; gap: 8px; }
.loja2-painel .ficha h2 i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.loja2-painel .ficha p { margin: 0; color: var(--texto-2); font-size: 12.5px; line-height: 1.45; }
.loja2-painel .dados { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 12.5px; }
.loja2-painel .dados dt { color: var(--texto-2); }
.loja2-painel .dados dd { margin: 0; font-family: var(--mono); font-variant-numeric: tabular-nums; min-width: 0; }
.loja2-painel .inv { display: grid; gap: 4px; }
.loja2-painel .inv ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12px; }
.loja2-painel .inv li { display: grid; grid-template-columns: 1fr auto; gap: 10px; color: var(--texto); }
.loja2-painel .inv li b { font-family: var(--mono); font-weight: 500; color: var(--texto-2); }
.loja2-painel details.amb { width: 100%; border-top: 1px solid var(--linha); padding-top: 6px; }
.loja2-painel details.amb summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; padding: 4px 0; }
.loja2-painel details.amb summary::-webkit-details-marker { display: none; }
.loja2-painel details.amb summary::after { content: "+"; font-family: var(--mono); color: var(--texto-3); }
.loja2-painel details.amb[open] summary::after { content: "–"; }
.loja2-painel .lista { list-style: none; margin: 0; padding: 0; }
.loja2-painel .lista button { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 8px; text-align: left; background: transparent; border: 0;
  padding: 5px 6px; cursor: pointer; color: var(--texto); font: 400 12.5px/1.25 var(--corpo); border-radius: 6px; }
.loja2-painel .lista button:hover { background: var(--chapa-2); }
.loja2-painel .lista button[aria-current="true"] { background: var(--chapa-3); box-shadow: inset 3px 0 0 var(--sel); }
.loja2-painel .lista .m2 { font-family: var(--mono); font-size: 12px; color: var(--texto-2); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- estreito */

@media (max-width: 760px) {
  body { grid-template-columns: 100%; grid-template-rows: auto 1fr; }
  .coluna { flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; overflow: visible; border-right: 0; border-bottom: 1px solid var(--linha); padding: 8px; }
  .marca { display: none; }
  .menu { flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .ri[aria-current="page"]::before { left: 16px; right: 16px; top: auto; bottom: -5px; width: auto; height: 3px; }
  .rodape-coluna { margin-top: 0; width: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; border-top: 0; padding: 4px 0 0; gap: 6px 8px; }
  .rodape-coluna .ri { width: 70px; }
  .rodape-coluna .linha-estado { flex-direction: row; }
  /* no celular as fichas descem para a linha de baixo, sem cortar */
  .cabecalho { padding: 12px 14px; }
  .cabecalho h1 { font-size: 22px; }
  .cab-fichas { margin-left: 0; flex-basis: 100%; }
  .cabecalho .logo-cliente { position: absolute; right: 14px; top: 10px; height: 24px; max-width: 120px; }
  .cabecalho:has(.logo-cliente:not([hidden])) { position: relative; padding-right: 148px; }
  .faixa-alarme { padding: 10px 14px; }
}

@media (max-width: 860px) {
  .tela { padding: 14px; }
  .grade.dupla { grid-template-columns: 1fr; }
  .valor.g { font-size: 32px; }
  .vista { height: 460px; }
  /* 3D baixo: os dois grupos da barra ficam um embaixo do outro, à esquerda,
     para não cobrir os rótulos do alto da vista de cima */
  .ferr { flex-direction: column; align-items: flex-start; }
  .ferr .planta-esp { display: none; }
  .ferr .planta-chip { position: absolute; top: 0; right: 0; }
}
/* quando o aside desce para baixo do 3D, ele ocupa a largura toda */
@media (max-width: 1130px) {
  .planta-lado { max-width: none; }
}

/* ------------------------------------------------------------------ Unifilar
   Diagrama do QGBT no formato do projeto: entrada no topo, disjuntor geral,
   barra e uma descida por multimedidor. Repouso em cinza; a cor só aparece
   quando a maior fase passa de 80% do disjuntor (ISA-101). Até 900 px o
   diagrama ocupa a largura do cartão; abaixo disso, rola dentro do cartão.  */

.uni-grade { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.uni-grade .card { background: var(--chapa); border: 1px solid var(--linha); border-radius: 14px; padding: 18px 20px; min-width: 0; }
.uni-grade .rot:not([data-carga-txt]) { font: 600 11px var(--titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.uni-grade .tag { font-size: 11px; }
.uni-rolagem { margin: 0 -6px; padding: 0 6px 4px; }
.uni-dia { --uni-n: 1; min-width: max(900px, calc(var(--uni-n) * 136px)); display: flex; flex-direction: column; align-items: stretch; }

/* símbolos */
.uni-simb { stroke: var(--texto); stroke-width: 1.6; fill: none; }
.uni-med { fill: var(--chapa); stroke: var(--texto); stroke-width: 1.6; }
.uni-no { fill: var(--texto); }
.uni-sem-med { stroke: var(--texto-3); stroke-width: 2; stroke-dasharray: 5 4; fill: none; }
.uni-pt { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; }
.uni-pt.a { background: var(--fase-a); }
.uni-pt.b { background: var(--fase-b); }
.uni-pt.c { background: var(--fase-c); }
.uni-dj-tag, .uni-med-tag {
  position: absolute; font: 500 12px var(--mono); color: var(--texto-2); white-space: nowrap; line-height: 16px;
}
.uni-med-tag { display: inline-flex; align-items: center; gap: 6px; }
.uni-led { width: 7px; height: 7px; display: block; flex: none; }
.uni-led .led-svg { stroke: none; }

/* placas */
.uni-placa {
  position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0;
  background: var(--chapa-2); border: 1px solid var(--linha); border-top: 3px solid var(--texto);
  border-radius: 8px; padding: 10px 12px 12px;
}
.uni-nome { font: 700 16px/1.2 var(--titulo); color: var(--texto); }
.uni-sub { font-size: 12px; color: var(--texto-3); overflow-wrap: anywhere; }
/* o subtítulo vem depois do kW no HTML (leitura: nome, potência, quadro) e aparece sob o nome */
.uni-placa > .uni-nome { order: -2; }
.uni-placa > .uni-sub { order: -1; }
.uni-placa-ent > .uni-sub { order: 0; margin-top: -4px; }
.uni-kw { font: 600 26px/1.15 var(--num); font-variant-numeric: tabular-nums; margin-top: 8px; white-space: nowrap; }
.uni-kw .un { font: 400 12px var(--corpo); color: var(--texto-3); }
.uni-carga { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; min-height: 36px; }
.uni-barra { display: block; width: 100%; height: 6px; overflow: hidden; border-radius: 3px; }
.uni-barra .trilho-svg { fill: var(--chapa-3); stroke: none; }
.uni-carga-txt, .uni-grupo, .uni-calc, .uni-sem-lim { font-size: 12px; color: var(--texto-2); line-height: 1.35; }
.uni-grade [data-carga-txt] { font: inherit; color: inherit; letter-spacing: 0; text-transform: none; }
.uni-grade [data-carga-txt].alerta { color: var(--critico); font-weight: 600; }
.uni-fases { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.uni-f { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.uni-f-rot { font: 600 12px var(--titulo); color: var(--texto-2); letter-spacing: .04em; }
.uni-f-v { margin-left: auto; font: 500 15px var(--mono); color: var(--texto); white-space: nowrap; }
.uni-f.acima .uni-f-v { color: var(--atencao); font-weight: 600; }
.uni-f.acima-limite .uni-f-v { color: var(--critico); font-weight: 600; }

/* topo: entrada (e gerador) até a barra */
.uni-topo { position: relative; margin: 0 auto; }
.uni-placas { display: flex; align-items: flex-end; justify-content: flex-end; gap: 56px; }
.uni-placa-ent { padding: 12px 16px 14px; gap: 6px; }
.uni-ent-l1 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.uni-ent-v { display: inline-flex; align-items: baseline; gap: 12px; font: 500 17px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.uni-ent-v .uni-f-rot { font-size: 12px; }
.uni-placa-ent .uni-kw { font-size: 30px; margin-top: 0; }
.uni-ent-carga { display: flex; align-items: center; gap: 14px; }
.uni-ent-carga .uni-barra { flex: 1; }
.uni-ent-carga .uni-carga-txt { white-space: nowrap; }
.uni-ent-fases { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 18px; margin-top: 2px; }
.uni-ent-fases .uni-f-v { font-size: 17px; }
.uni-ent-extra { display: flex; gap: 24px; padding-top: 6px; border-top: 1px solid var(--linha); }
.uni-ent-x { display: inline-flex; align-items: baseline; gap: 8px; }
.uni-x-rot { font: 600 11px var(--titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-2); }
.uni-ent-xv { font: 500 17px var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.uni-placa-ger { border: 1.5px dashed var(--linha-2); border-top-width: 1.5px; background: none; gap: 6px; }
.uni-ger-v { display: flex; align-items: baseline; gap: 8px; }
.uni-ger-kw { font: 600 17px var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.uni-tronco { position: relative; }
.uni-tronco > svg { display: block; overflow: visible; }
.uni-qta {
  position: absolute; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 4px 12px;
  background: var(--chapa-2); border: 1.5px solid var(--texto-2); border-radius: 8px;
}
.uni-grade .uni-qta .rot { font-size: 10px; }
.uni-qta-pos { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.uni-qta-pos b { font-weight: 600; }
.uni-grade .estado.normal {
  margin-left: auto; font: 600 10px var(--titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2);
  border: 1px solid var(--linha-2); border-radius: 4px; padding: 1px 6px;
}
.uni-qta .estado[hidden] { display: none; }

/* barra QGBT: cada descida desenha o seu trecho; a primeira e a última param no meio */
.uni-barra-rot { display: flex; align-items: center; gap: 10px; padding: 0 0 8px; }
.uni-barra-v { font: 500 15px var(--mono); font-variant-numeric: tabular-nums; color: var(--tinta-2); white-space: nowrap; }
.uni-barra-v:first-of-type { margin-left: auto; }
.uni-ent-tit { display: inline-flex; align-items: baseline; gap: 8px; }
/* --uni-n: descidas + "Demais circuitos", posto pela tela no .uni-dia */
/* coluna até 300 px: com poucas saídas o diagrama fica no meio, e a barra ainda passa sob o tronco */
.uni-saidas { display: grid; grid-template-columns: repeat(var(--uni-n), minmax(0, 300px)); justify-content: center; column-gap: 14px; }
.uni-saida { position: relative; display: flex; flex-direction: column; min-width: 0; }
.uni-saida::before {
  content: ""; position: absolute; top: -3px; height: 6px; left: -7px; right: -7px; background: var(--texto);
}
.uni-saida:first-child::before { left: 50%; border-radius: 3px 0 0 3px; }
.uni-saida:last-child::before { right: calc(50% - 3px); border-radius: 0 3px 3px 0; }
.uni-saida:only-child::before { left: calc(50% - 160px); right: calc(50% - 160px); border-radius: 3px; }
.uni-desc { position: relative; height: 112px; flex: none; }
.uni-saida > .uni-placa { flex: 1; }
.uni-desc-svg { position: absolute; left: calc(50% - 20px); top: 0; width: 40px; height: 112px; overflow: visible; }
.uni-desc .uni-dj-tag, .uni-desc .uni-med-tag { left: calc(50% + 16px); }
.uni-placa-demais { border: 1px dashed var(--linha-2); border-top: 1px dashed var(--linha-2); background: none; }
.uni-placa-demais .uni-nome, .uni-placa-demais .uni-kw { color: var(--texto-2); }

/* atenção (maior fase ≥ 80% do disjuntor) e sobrecarga: condutor, símbolos e placa juntos */
.uni-saida:has(path.atencao-carga) :is(.uni-simb, .uni-med) { stroke: var(--atencao); }
.uni-saida:has(path.atencao-carga) .cond { stroke-width: 3; }
.uni-saida:has(path.atencao-carga) .uni-placa { border-color: var(--atencao); border-top-color: var(--atencao); box-shadow: inset 0 0 0 1px var(--atencao); }
.uni-saida:has(path.atencao-carga) .uni-carga-txt { color: var(--atencao); font-weight: 600; }
.uni-saida:has(path.sobrecarga) :is(.uni-simb, .uni-med) { stroke: var(--critico); }
.uni-saida:has(path.sobrecarga) .uni-placa { border-color: var(--critico); border-top-color: var(--critico); box-shadow: inset 0 0 0 1px var(--critico); }
.uni-saida:has(path.sobrecarga) .uni-nome { color: var(--critico); }
.uni-saida:has(path.atencao-carga) .uni-nome::after {
  content: "ATENÇÃO"; margin-left: 8px; font: 700 10px var(--titulo); letter-spacing: .08em;
  background: var(--atencao); color: var(--sobre-estado); border-radius: 4px; padding: 2px 6px; vertical-align: 2px;
}
.uni-topo:has(path.atencao-carga[data-cond]) .uni-placa-ent .uni-carga-txt { color: var(--atencao); font-weight: 600; }
.uni-topo:has(path.atencao-carga[data-cond]) .uni-placa-ent { border-color: var(--atencao); border-top-color: var(--atencao); }
.uni-topo:has(path.atencao-carga[data-cond]) .uni-simb { stroke: var(--atencao); }
.uni-topo:has(path.sobrecarga[data-cond]) .uni-placa-ent { border-color: var(--critico); border-top-color: var(--critico); }

/* sem comunicação: a descida apaga e a placa tracejada diz o estado */
.uni-saida.fora-do-ar .uni-placa { border-style: dashed; border-top: 1px dashed var(--linha-2); border-color: var(--linha-2); }
.uni-saida.fora-do-ar :is(.uni-simb, .uni-med) { stroke: var(--texto-3); }
.uni-saida.fora-do-ar .uni-nome::after {
  content: "SEM COMUNICAÇÃO"; display: block; width: fit-content; margin-top: 4px; font: 600 10px var(--titulo); letter-spacing: .08em; padding: 2px 6px;
  color: var(--texto-2); border: 1px dashed var(--linha-2); border-radius: 4px;
  background: repeating-linear-gradient(135deg, var(--chapa-3) 0 4px, var(--chapa-2) 4px 8px);
}
.uni-saida.fora-do-ar .uni-barra { background: repeating-linear-gradient(135deg, var(--texto-3) 0 3px, transparent 3px 6px); }
.uni-saida.fora-do-ar .uni-barra .trilho-svg { fill: transparent; }

/* legenda */
.uni-legenda {
  display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--linha); color: var(--texto-3); font-size: 12px;
}
.uni-legenda > span { display: inline-flex; align-items: center; gap: 6px; }
.uni-legenda svg { width: 26px; height: 18px; flex: none; }
.uni-lg-a { fill: var(--fase-a); }
.uni-lg-b { fill: var(--fase-b); }
.uni-lg-c { fill: var(--fase-c); }
.uni-lg-at { stroke: var(--atencao); stroke-width: 3; fill: none; }

/* acionamento: o bloco de comandos continua o mesmo, só o visual muda */
.uni-grade .uni-acion { padding: 18px 22px 20px; }
.uni-acion > .bloco { background: none; border: 0; border-radius: 0; overflow: visible; }
.uni-acion .placa { background: none; border: 0; padding: 0 0 14px; min-height: 0; }
.uni-acion .placa .isa:empty { display: none; }
.uni-acion .placa .titulo { font: 600 11px var(--titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.uni-acion > .bloco > .corpo { padding: 0; }
.uni-acion .comandos { gap: 12px; }
.uni-acion .comando { border-radius: 8px; }
.uni-acion .comando .acionar { border-radius: 8px; }

@media (max-width: 760px) {
  .uni-grade .card { padding: 16px; }
}


/* ------------------------------------------------------------------ Energia
   Cartão "Entrada geral" em largura total e grade de alimentadores abaixo,
   no mesmo idioma dos cartões do Unifilar.                                    */

.energia-tela { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.energia-tela .card { background: var(--chapa); border: 1px solid var(--linha); border-radius: 14px; padding: 18px 22px 20px; min-width: 0; }
.energia-tela .card-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.energia-tela .card-cab .rot { font: 600 22px/1.15 var(--titulo); letter-spacing: 0; text-transform: none; color: var(--texto); }
.energia-tela .en-nome { font: 600 22px/1.15 var(--titulo); color: var(--texto); }
.energia-tela .tag { font-size: 11px; }
.energia-tela .en-fichas { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.energia-tela .estado {
  font: 600 10px var(--titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2);
  border: 1px solid var(--linha-2); border-radius: 4px; padding: 2px 7px; white-space: nowrap;
}
.energia-tela .estado.semcom {
  color: var(--texto-2); border: 1px dashed var(--linha-2);
  background: repeating-linear-gradient(135deg, var(--chapa-3) 0 4px, var(--chapa-2) 4px 8px);
}
.energia-tela .estado-dj { font: 700 11px var(--corpo); letter-spacing: .08em; padding: 2px 8px; border: 1px solid var(--linha-2); border-radius: 5px; color: var(--texto-2); white-space: nowrap; }
.energia-tela .estado-dj.fechado { background: var(--critico); border-color: var(--critico); color: var(--sobre-estado); }
.energia-tela .estado-dj.aberto { background: var(--ok); border-color: var(--ok); color: var(--sobre-estado); }
.energia-tela .leituras { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 10px; border: 0; }
.energia-tela .energia-entrada .leituras { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
/* entrada geral separada por grandeza: título do grupo à esquerda, leituras à direita */
.energia-entrada .en-grupos { display: grid; }
.energia-entrada .en-grupo {
  display: grid; grid-template-columns: 112px 1fr; gap: 10px;
  padding: 12px 0; border-top: 1px solid var(--linha);
}
.energia-entrada .en-grupo:first-child { border-top: 0; padding-top: 4px; }
.energia-entrada .en-grupo-tit {
  font: 600 11px var(--titulo); letter-spacing: .12em; text-transform: uppercase;
  color: var(--texto-2); padding-top: 9px;
}
.energia-tela .energia-entrada .en-grupo .leituras { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1200px) { .energia-tela .energia-entrada .en-grupo .leituras { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .energia-entrada .en-grupo { grid-template-columns: 1fr; gap: 4px; }
  .energia-entrada .en-grupo-tit { padding-top: 0; }
  .energia-tela .energia-entrada .en-grupo .leituras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.energia-tela .leitura { background: none; border: 0; padding: 0; min-width: 0; }
.energia-tela .leitura.anormal { background: var(--critico-fundo); border-radius: 8px; padding: 6px 8px; }
.energia-tela .rotulo { font: 500 11.5px var(--corpo); letter-spacing: 0; text-transform: none; color: var(--texto-2); margin-bottom: 2px; }
.energia-tela .valor { font: 600 25px var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 0; }
.energia-tela .valor .un { font: 500 11px var(--corpo); color: var(--texto-2); margin-left: 3px; }
.energia-tela .valor.sem-dado { color: var(--texto-2); }
.energia-tela .energia-entrada .barras { margin-top: 18px; }
.energia-tela .barra-fase .id { color: var(--texto-2); }
.energia-grade { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.energia-alim .leituras { grid-template-columns: minmax(0, 1fr); }
.energia-alim .valor { font-size: 27px; }
.energia-alim .barras { margin-top: 14px; }
.energia-alim .escala { margin-top: 10px; }
.energia-alim .escala .extremos { font-size: 11px; color: var(--texto-2); }

.energia-acion { background: var(--chapa); border: 1px solid var(--linha); border-radius: 14px; padding: 18px 22px 20px; min-width: 0; }
.energia-acion > .bloco { background: none; border: 0; border-radius: 0; overflow: visible; }
.energia-acion .placa { background: none; border: 0; padding: 0 0 14px; min-height: 0; }
.energia-acion .placa .isa:empty { display: none; }
.energia-acion .placa .titulo { font: 600 11px var(--titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.energia-acion > .bloco > .corpo { padding: 0; }
.energia-acion .comando { border-radius: 8px; }
.energia-acion .comando .acionar { border-radius: 8px; }

@media (max-width: 1240px) { .energia-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .energia-grade { grid-template-columns: minmax(0, 1fr); }
  .energia-tela .card { padding: 16px; }
}


/* ------------------------------------------------- Água, Gerador, Histórico, Alarmes
   Mesmo idioma dos cartões do Unifilar e da Energia: .card com cabeçalho
   .rot + ficha ISA, indicadores em cartões 2 × 2, fichas .estado.
   Os blocos que o código travado ainda emite (.bloco + .placa) herdam o
   mesmo visual daqui.                                                          */

.tela-card { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tela-card .grade { gap: 20px; }
.tela-card .card, .tela-card .bloco { background: var(--chapa); border: 1px solid var(--linha); border-radius: 14px; min-width: 0; }
.tela-card .card { padding: 18px 22px 20px; }
.tela-card .card-cab { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.tela-card .card-cab .rot { font: 600 11px var(--titulo); letter-spacing: .12em; text-transform: uppercase; color: var(--texto-2); }
.tela-card .tag { font-size: 11px; }
.tela-card .card-cab .rot.nome { font: 600 22px/1.15 var(--titulo); letter-spacing: 0; text-transform: none; color: var(--texto); }
.tela-card .en-fichas { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }
.tela-card .com-nome .en-fichas { margin-left: 4px; }
.tela-card .com-nome .tag { margin-left: auto; }

/* fichas de estado */
.tela-card .estado {
  font: 600 11px var(--titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2);
  border: 1px solid var(--linha-2); border-radius: 5px; padding: 2px 7px; white-space: nowrap; flex: none;
}
.tela-card .estado.semcom {
  color: var(--texto-2); border: 1px dashed var(--linha-2);
  background: repeating-linear-gradient(135deg, var(--chapa-3) 0 4px, var(--chapa-2) 4px 8px);
}
.tela-card .estado.critico { color: var(--sobre-estado); background: var(--critico); border-color: var(--critico); }
.tela-card .estado.atencao { color: var(--sobre-estado); background: var(--atencao); border-color: var(--atencao); }
.tela-card .estado.info { color: var(--info); border-color: var(--info); }
.tela-card .estado.ok { color: var(--ok); border-color: var(--ok); }

.tela-card .estado-dj { font: 700 11px var(--corpo); letter-spacing: .08em; padding: 2px 8px; border: 1px solid var(--linha-2); border-radius: 5px; color: var(--texto-2); white-space: nowrap; }
.tela-card .estado-dj.fechado { background: var(--critico); border-color: var(--critico); color: var(--sobre-estado); }
.tela-card .estado-dj.aberto { background: var(--ok); border-color: var(--ok); color: var(--sobre-estado); }

/* indicadores em cartões 2 × 2 */
.tela-card .leituras { gap: 12px; border: 0; }
.tela-card .leituras.quad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tela-card .leituras.fluida { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tela-card .leitura { background: var(--chapa-2); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.tela-card .leitura.larga { grid-column: 1 / -1; }
.tela-card .leitura.anormal { background: var(--critico-fundo); border-color: var(--critico); }
.tela-card .rotulo { font: 500 11.5px var(--corpo); letter-spacing: 0; text-transform: none; color: var(--texto-2); margin-bottom: 2px; }
.tela-card .valor { font: 600 25px var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: 0; }
.tela-card .valor.g { font-size: 40px; }
.tela-card .valor .un { font: 500 11px var(--corpo); color: var(--texto-2); margin-left: 3px; }
.tela-card .valor.sem-dado { color: var(--texto-2); }
.tela-card .escala .extremos { font-size: 11px; color: var(--texto-2); }
.tela-card .escala .trilho { border-radius: 4px; border-color: var(--linha); background: var(--chapa-3); }
.tela-card .escala .barra { border-radius: 3px; }
.tela-card .dados-linha { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.tela-card .dado { background: var(--chapa-2); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.tela-card .dado .n { font-size: 19px; overflow-wrap: anywhere; }
.tela-card .controles { margin-bottom: 14px; }

/* blocos emitidos pelo código travado: mesmo recorte de cartão */
.tela-card .bloco > .corpo { padding: 0 22px 20px; }
.tela-card .bloco .escala .trilho { border-radius: 4px; }
.tela-card .veredito { border-radius: 0 10px 10px 0; }

/* desenhos de tanque */
.agua-tanque, .ger-tanque { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.ger-tanque .desenho { width: 280px; flex: 0 0 auto; align-self: center; margin-inline: auto; }
.ger-tanque-lado { flex: 1 1 240px; min-width: 0; }
.ger-tanque-lado .escala { margin-top: 12px; }
.agua-anunciador { margin-top: 14px; }
/* reservatório: em coluna única o desenho não encolhe até ficar ilegível */
.agua-tela .desenho { max-width: 760px; margin-inline: auto; }
@media (max-width: 1240px) { .agua-tela .grade.dupla { grid-template-columns: minmax(0, 1fr); } }

/* tendência: resumo ao lado do seletor de período */
.tela-card .resumo { margin: 0; }

/* alarmes: cada ocorrência é uma linha .row */
.alarme-cab, .alarme-lin {
  display: grid; align-items: center; column-gap: 14px;
  grid-template-columns: 138px 84px minmax(180px, 1fr) 70px 100px 130px 112px;
  grid-template-areas: "hora prio msg val lim dur acao";
}
.alarme-tab { position: relative; }
.alarme-cab { padding: 6px 10px 8px 13px; border-bottom: 1px solid var(--linha); }
/* abaixo de 1100 px o cabeçalho sai da vista, mas continua na árvore de acessibilidade */
@media (max-width: 1100px) {
  .alarme-cab { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; border: 0; }
}
.alarme-cab .rot { font: 600 11px var(--titulo); letter-spacing: .1em; text-transform: uppercase; color: var(--texto-3); }
.alarme-lin.row {
  cursor: default; border: 0; border-bottom: 1px solid var(--linha);
  border-radius: 0; padding: 9px 10px 9px 13px; min-height: 48px; font-size: 13px;
}
.alarme-lin.row:last-child { border-bottom: 0; }
.alarme-lin.prioridade-alta { box-shadow: inset 3px 0 0 var(--critico); }
.alarme-lin.prioridade-media { box-shadow: inset 3px 0 0 var(--atencao); }
.alarme-lin.prioridade-baixa { box-shadow: inset 3px 0 0 var(--info); }
.alarme-lin > * { min-width: 0; }
.alarme-hora { grid-area: hora; }
.alarme-prio { grid-area: prio; }
/* a ocorrência é o único <span> sem classe da linha */
.alarme-lin > span:not([class]) { grid-area: msg; overflow-wrap: anywhere; }
.alarme-val { grid-area: val; }
.alarme-lim { grid-area: lim; }
.alarme-dur { grid-area: dur; }
.alarme-acao { grid-area: acao; display: flex; justify-content: flex-end; }
.alarme-lin .n { font-family: var(--num); font-variant-numeric: tabular-nums; font-weight: 600; }
.alarme-lin .alarme-hora, .alarme-lin .alarme-dur { white-space: nowrap; }
.alarme-lin .btn { min-height: 32px; padding: 4px 12px; font-size: 12.5px; }
.alarme-aviso { margin: 0; align-self: center; }
@media (max-width: 1100px) {
  .alarme-lin {
    grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 8px;
    grid-template-areas: "hora prio acao" "msg msg msg" "val lim dur";
  }
  .alarme-acao { justify-self: end; }
  .alarme-lin [data-rot]:not(.alarme-hora):not(.alarme-prio):not(.alarme-acao)::before {
    content: attr(data-rot); display: block; font: 600 11px var(--titulo); letter-spacing: .1em;
    text-transform: uppercase; color: var(--texto-3); margin-bottom: 1px;
  }
}
@media (max-width: 800px) {
  .tela-card .card { padding: 16px; }
  .tela-card .placa { padding: 16px 16px 12px; }
  .placa + .corpo, .tela-card .bloco > .corpo { padding: 0 16px 16px; }
  .tela-card .valor.g { font-size: 40px; }
}

/* ------------------------------------------- relé: sinalizações e diagnóstico */

.sinais { display: grid; gap: 12px; }
.grupo-sinais .rotulo { margin-bottom: 6px; }
.lista-sinais { display: flex; flex-wrap: wrap; gap: 6px; }
.sinal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--linha);
  background: var(--tela);
  font-size: 12px;
  color: var(--tinta-2);
  white-space: nowrap;
}
.sinal i { width: 9px; height: 9px; border-radius: 50%; background: var(--linha-2); flex: none; }
/* LED e proteção acesas = atuação (vermelho); entrada e saída ligadas = estado (âmbar) */
.sinal-led.ativa, .sinal-prot.ativa { border-color: var(--critico); color: var(--tinta); font-weight: 600; }
.sinal-led.ativa i, .sinal-prot.ativa i { background: var(--critico); box-shadow: 0 0 0 3px var(--critico-fundo); }
.sinal-bi.ativa, .sinal-bo.ativa { border-color: var(--atencao); color: var(--tinta); font-weight: 600; }
.sinal-bi.ativa i, .sinal-bo.ativa i { background: var(--atencao); }

.disparo-topo { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; font-size: 13px; color: var(--tinta-2); }
.disparo-eq { font-weight: 600; color: var(--tinta); }
.disparo-conf { margin-left: auto; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.disparo-conf.conf-alta { color: var(--critico); }
.disparo-conf.conf-media { color: var(--atencao); }
.disparo-hist { min-height: 28px; padding: 4px 10px; font-size: 12px; }
.disparo-sec li .disparo-hist { min-height: 24px; padding: 2px 8px; margin-left: 4px; }
.disparo-causa { font-family: var(--titulo); font-size: 19px; font-weight: 700; margin: 6px 0 4px; }
.disparo-texto { margin: 0 0 8px; max-width: 80ch; }
.disparo-sec { margin-top: 8px; }
.disparo-sec ul { margin: 4px 0 0; padding-left: 20px; }
.disparo-sec li { margin: 2px 0; }
.disparo-sec.ajuste { border-left: 3px solid var(--atencao); padding-left: 10px; }
.disparo-sec summary { cursor: pointer; }