/* ============================================================
   Simulador Ladder do Neon — a aparência.
   As cores saem do estilo.css (--tinta, --verde, --linha-forte...),
   então o tema escuro vem junto sem repetir nada aqui.
   Verde = energia passando. Cinza = fio sem energia.
   ============================================================ */

.lad{
  --lad-vivo: var(--verde);
  --lad-morto: var(--linha-forte);
  margin: 22px 0; padding: 16px;
  border: 1.5px solid var(--tinta); border-radius: 12px; background: var(--caixa);
}
.lad 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;
}
.lad button:hover{ border-color: var(--tinta); }
.lad button[aria-pressed="true"]{ background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.lad button:disabled{ opacity: .4; cursor: not-allowed; }

/* ---- a barra de cima */
.lad-barra{ display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.lad-abas, .lad-grupo, .lad-modos{ display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.lad-abas{ width: 100%; padding-bottom: 10px; border-bottom: 1px solid var(--linha); }
.lad .lad-abas button{ border-radius: 8px; }
.lad .lad-run{ border-color: var(--tinta); }
.lad .lad-proximo{ background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.lad .lad-proximo:hover{ background: var(--caixa); color: var(--tinta); }
.lad-contador{ margin-left: auto; font: 12px var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.lad.parado .lad-contador{ color: var(--vermelho); font-weight: 700; }
.lad .lad-energia{ border-color: var(--tinta); }
.lad.sem-energia .lad-campo, .lad.sem-energia .lad-rolagem{ opacity: .45; filter: grayscale(1); }
.lad.sem-energia .lad-grade{ border-left-color: var(--lad-morto); }

/* ---- o curto entre contatores */
.lad-curto{ display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 12px 0 0; padding: 10px 14px; border: 1.5px solid var(--vermelho); border-radius: 10px; background: var(--papel); }
.lad-curto[hidden]{ display: none; }
.lad-curto p{ flex: 1 1 240px; margin: 0; font: 700 13px/1.5 var(--mono); color: var(--vermelho); }
.lad-saida.contator.ligada .ic{ border-color: var(--lad-vivo); color: var(--lad-vivo); background: color-mix(in srgb, var(--lad-vivo) 16%, transparent); }

/* ---- as três fases do ciclo */
.lad-ciclo{ list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; padding: 0; }
.lad-ciclo li{ margin: 0; font: 12px/1.3 var(--mono); padding: 6px 10px; border-radius: 6px; border: 1px dashed var(--linha-forte); color: var(--dim); }
.lad-ciclo li.agora{ border: 1px solid var(--tinta); background: var(--tinta); color: var(--papel); }

/* ---- o campo: botões e saídas */
.lad-campo{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px 22px; margin: 14px 0 4px; }
.lad-lado{ min-width: 0; }
.lad-titulo{ font: 700 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin: 0 0 8px; }
.lad-lista{ display: flex; flex-wrap: wrap; gap: 12px; }
.lad-entrada{ display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.lad .lad-botao{
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  min-width: 124px; padding: 9px 12px; border-radius: 10px; border-color: var(--tinta);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.lad-botao .nm{ font-size: 16px; }
.lad-botao .rt{ font-weight: 400; font-size: 11.5px; color: var(--dim); }
.lad-botao .bt{ font-weight: 400; font-size: 11px; color: var(--fraco); }
.lad .lad-botao.apertado{ background: var(--tinta); color: var(--papel); }
.lad-botao.apertado .rt, .lad-botao.apertado .bt{ color: var(--papel); opacity: .78; }
.lad-entrada .bit, .lad-saida .bit{ font: 12px/1.4 var(--mono); color: var(--dim); font-variant-numeric: tabular-nums; }
.lad-entrada .bit.um{ color: var(--lad-vivo); font-weight: 700; }
.lad .lad-fio{ font-size: 11.5px; min-height: 32px; padding: 5px 10px; }

.lad-saida{ display: flex; gap: 12px; align-items: center; min-width: 160px; }
.lad-saida .ic{
  position: relative; width: 40px; height: 40px; flex: none; border-radius: 50%;
  border: 2px solid var(--lad-morto); display: grid; place-items: center;
  font: 700 14px var(--mono); color: var(--dim);
}
.lad-saida.lampada.ligada .ic{ background: #f2b01e; border-color: #9a6a00; box-shadow: 0 0 16px 4px rgba(242,176,30,.55); }
.lad-saida.motor.ligada .ic{ border-color: var(--lad-vivo); color: var(--lad-vivo); }
.lad-saida.motor.ligada .ic::after{
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px dashed var(--lad-vivo); animation: lad-gira 1.6s linear infinite;
}
.lad-saida .tx{ display: flex; flex-direction: column; min-width: 0; }
.lad-saida .nm{ font: 700 13px/1.35 var(--mono); }
@keyframes lad-gira{ to{ transform: rotate(360deg); } }
html.nx-parado .lad-saida.motor.ligada .ic::after{ animation: none; }

/* ---- a paleta de edição */
.lad-paleta{ margin: 12px 0 0; padding: 12px; border: 1px dashed var(--linha-forte); border-radius: 10px; }
.lad-ferramentas{ display: flex; flex-wrap: wrap; gap: 6px; }
.lad .lad-ferramentas button{ border-radius: 8px; display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 74px; padding: 6px 8px; }
.lad-ferramentas .sb{ font-size: 15px; }
.lad-ferramentas .lg{ font-weight: 400; font-size: 10.5px; }
.lad-campos{ display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 10px 0 0; font: 13px var(--mono); }
.lad-campos select, .lad-campos input{
  font: 13px var(--mono); padding: 6px 8px; min-height: 38px; border-radius: 6px;
  border: 1.5px solid var(--linha-forte); background: var(--caixa); color: var(--tinta);
}
.lad-campos input{ width: 90px; }
.lad-dica{ font: 12px/1.55 var(--mono); color: var(--dim); margin: 10px 0 0; }

/* ---- o programa */
.lad-rolagem{ overflow-x: auto; margin: 14px 0 0; padding-bottom: 4px; }
.lad-programa{ display: inline-flex; flex-direction: column; gap: 10px; min-width: 100%; }
.lad-linha{ padding: 6px 10px 8px; border-radius: 8px; border: 1.5px solid transparent; }
.lad-linha.agora{ border-color: var(--tinta); background: var(--papel); }
.lad-cab{ display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font: 12px/1.4 var(--mono); margin: 0 0 4px; }
.lad-cab .n{ font-weight: 700; }
.lad-cab .cm{ color: var(--dim); }
.lad-acoes{ display: inline-flex; gap: 4px; margin-left: auto; }
.lad .lad-acoes button{ min-height: 30px; padding: 3px 9px; font-size: 12px; }

.lad-grade{
  position: relative; box-sizing: content-box;
  border-left: 4px solid var(--lad-vivo); border-right: 4px solid var(--lad-morto);
}
.lad.parado .lad-grade{ border-left-color: var(--lad-morto); }

.lad .lad-cel{ position: absolute; display: block; margin: 0; padding: 0; min-height: 0; border: 0; border-radius: 0; background: transparent; color: inherit; }
.lad-cel svg{ display: block; width: 100%; height: 100%; overflow: visible; }
.lad-cel line, .lad-cel path, .lad-cel .caixa{ stroke: var(--lad-morto); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.lad-cel .miolo{ fill: transparent; stroke: none; }
.lad-cel .vazia{ fill: none; stroke: none; }
.lad-cel.fechado .sim{ stroke: var(--tinta); }
.lad-cel.fechado .miolo{ fill: color-mix(in srgb, var(--tinta) 10%, transparent); }
.lad-cel.vivo-e .e{ stroke: var(--lad-vivo); stroke-width: 4; }
.lad-cel.vivo-s .s, .lad-cel.vivo-s .sim{ stroke: var(--lad-vivo); stroke-width: 4; }
.lad-cel.vivo-s .miolo{ fill: color-mix(in srgb, var(--lad-vivo) 24%, transparent); }
.lad-cel.pronto .caixa{ fill: color-mix(in srgb, var(--lad-vivo) 20%, transparent); }
.lad-cel text{ font-family: var(--mono); text-anchor: middle; fill: var(--tinta); }
.lad-cel .nm{ font-size: 12px; font-weight: 700; }
.lad-cel .en{ font-size: 10.5px; fill: var(--dim); }
.lad-cel .letra{ font-size: 12px; font-weight: 700; }
.lad-cel .conta{ font-size: 10px; fill: var(--dim); }

.lad.editando .lad-cel .vazia{ stroke: var(--linha-forte); stroke-dasharray: 3 4; stroke-width: 1.2; }
.lad.editando .lad-cel{ cursor: pointer; }
.lad.editando .lad-cel:hover, .lad.editando .lad-cel:focus-visible{
  background: color-mix(in srgb, var(--azul) 10%, transparent); outline: 2px solid var(--azul); outline-offset: -2px;
}
.lad-liga{ position: absolute; width: 3px; background: var(--lad-morto); pointer-events: none; }
.lad-liga.vivo{ width: 4px; background: var(--lad-vivo); }
.lad .lad-poe{
  position: absolute; z-index: 2; width: 22px; height: 22px; min-height: 0; padding: 0;
  border-radius: 50%; font-size: 13px; line-height: 1; background: var(--caixa); border: 1.5px dashed var(--linha-forte);
}
.lad .lad-poe.ligado{ border-style: solid; border-color: var(--tinta); }
.lad .lad-mais{ align-self: flex-start; border-style: dashed; }

/* ---- a narração e o conferidor */
.lad-leitura{ font: 13px/1.6 var(--mono); margin: 12px 0 0; min-height: 1.6em; overflow-wrap: anywhere; }
.lad-teste{ margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--linha); }
.lad .lad-confere{ background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.lad .lad-confere:hover{ background: var(--caixa); color: var(--tinta); }
.lad-resultado{ list-style: none; padding: 0; margin: 10px 0 0; font: 13px/1.6 var(--mono); }
.lad-resultado li{ margin: 2px 0; }
.lad-resultado .ok{ color: var(--verde); }
.lad-resultado .falhou{ color: var(--vermelho); }
.lad-resultado .total{ margin-top: 8px; font-weight: 700; color: var(--tinta); }
.lad-resultado .total.ok{ color: var(--verde); }

@media (max-width: 600px){
  .lad{ padding: 12px; }
  .lad-contador{ margin-left: 0; width: 100%; }
}
@media print{ .lad-barra, .lad-paleta, .lad-teste{ display: none; } }