/* ============================================================
   Sinal analógico do Neon — a aparência. Mesmas cores do estilo.css,
   e o mesmo jeito do simulador Ladder (ladder.css).
   ============================================================ */
.an{ margin: 22px 0; padding: 16px; border: 1.5px solid var(--tinta); border-radius: 12px; background: var(--caixa); }
.an button{
  font: 700 13px/1.2 var(--mono); padding: 8px 12px; min-height: 40px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--linha-forte); background: transparent; color: var(--tinta); touch-action: manipulation;
}
.an button:hover{ border-color: var(--tinta); }
.an button[aria-pressed="true"]{ background: var(--tinta); color: var(--papel); border-color: var(--tinta); }

.an-abas{ display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--linha); }
.an .an-abas button{ border-radius: 8px; }
.an .an-codigo{ margin: 12px 0 0; padding: 10px 12px; background: var(--papel); border-radius: 8px; overflow-x: auto; font: 13px/1.55 var(--mono); white-space: pre; }
.an-corpo{ display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px 22px; align-items: center; margin: 14px 0 0; }
.an-desenho svg{ display: block; width: 100%; height: auto; }
.an-leituras{ margin: 12px 0 0; display: grid; gap: 2px; font: 13px/1.4 var(--mono); }
.an-leituras div{ display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--linha); }
.an-leituras dt{ color: var(--dim); }
.an-leituras dd{ margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.an-leituras dd.ruim{ color: var(--vermelho); }
.an-botoes{ display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.an-aviso{ margin: 12px 0 0; padding: 10px 14px; border: 1.5px solid var(--vermelho); border-radius: 10px; background: var(--papel); font: 700 13px/1.5 var(--mono); color: var(--vermelho); }
.an-aviso[hidden]{ display: none; }
.an-leitura{ margin: 12px 0 0; min-height: 1.6em; font: 13px/1.6 var(--mono); }

/* ---- o desenho do tanque */
.an svg text{ font-family: var(--mono); font-size: 11px; fill: var(--dim); text-anchor: middle; }
.an svg text.esq{ text-anchor: start; }
.an svg text.forte{ font-weight: 700; fill: var(--tinta); }
.an .cano{ stroke: var(--linha-forte); stroke-width: 6; stroke-linecap: round; fill: none; }
.an .cano.fino{ stroke-width: 3; }
.an .parede{ fill: none; stroke: var(--tinta); stroke-width: 2.5; }
.an .liquido{ fill: color-mix(in srgb, var(--azul) 42%, transparent); }
.an .bomba{ fill: var(--caixa); stroke: var(--linha-forte); stroke-width: 2.5; }
.an .bomba-seta{ fill: var(--linha-forte); }
.an svg.bomba-on .bomba{ stroke: var(--verde); }
.an svg.bomba-on .bomba-seta{ fill: var(--verde); }
.an .marca{ stroke: var(--dim); stroke-width: 1.5; stroke-dasharray: 3 3; }
.an .valvula{ fill: var(--caixa); stroke: var(--tinta); stroke-width: 2; }
.an svg.fechado .valvula{ fill: var(--tinta); }
.an .caixinha{ fill: var(--papel); stroke: var(--tinta); stroke-width: 2; }
.an .fio{ fill: none; stroke: var(--tinta); stroke-width: 2; }
.an .corta{ display: none; fill: var(--vermelho); font-size: 13px; }
.an svg.fio-solto .f1{ stroke: var(--vermelho); stroke-dasharray: 4 5; }
.an svg.fio-solto .corta{ display: inline; }
.an .lampada{ fill: var(--caixa); stroke: var(--linha-forte); stroke-width: 2; }
.an svg.alarme .lampada{ fill: var(--vermelho); stroke: var(--vermelho); }
.an .transborda{ display: none; }
.an .transborda path{ fill: none; stroke: color-mix(in srgb, var(--azul) 70%, transparent); stroke-width: 4; stroke-linecap: round; }
.an svg.transbordou .transborda{ display: inline; }

/* ---- PT100 e o desafio */
.an-controles{ display: grid; gap: 10px; }
.an-faixa{ display: grid; gap: 4px; font: 13px var(--mono); }
.an-faixa input[type="range"]{ width: 100%; }
.an-faixa select, .an-grade input{
  font: 13px var(--mono); padding: 6px 8px; min-height: 38px; border-radius: 6px; max-width: 100%;
  border: 1.5px solid var(--linha-forte); background: var(--caixa); color: var(--tinta);
}
.an-grade{ display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 16px; }
.an-grade label{ display: grid; gap: 4px; font: 13px var(--mono); }
.an .an-confere{ margin: 12px 0 0; background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.an .an-confere:hover{ background: var(--caixa); color: var(--tinta); }
.an-resultado{ list-style: none; padding: 0; margin: 10px 0 0; font: 13px/1.6 var(--mono); }
.an-resultado li{ margin: 2px 0; }
.an-resultado .ok{ color: var(--verde); }
.an-resultado .falhou{ color: var(--vermelho); }
.an-resultado .total{ margin-top: 8px; font-weight: 700; color: var(--tinta); }
.an-resultado .total.ok{ color: var(--verde); }

@media (max-width: 600px){
  .an{ padding: 12px; }
  .an-corpo{ grid-template-columns: 1fr; }
}