/* =========================================================================
   CONVERSOR WHP — "DYNO CONSOLE"
   Mundo visual próprio, só para esta tela (Service → Conversor WHP).
   Tudo aqui vive escopado em ".cp-console" — nunca vaza pro resto do app,
   nunca redefine as variáveis --nv-* globais de tema-novo.css. Reaproveita
   as mesmas fontes já hospedadas pelo app (Rajdhani/Inter/JetBrains Mono,
   @font-face declarado em tema-novo.css) e a mesma marca (vermelho BMS).
   Referência do mundo: o console de bancada de reprogramação/dyno que a
   equipe já usa todo dia — canais de entrada, leituras em mono, medidores
   de ganho — não um formulário de admin genérico.
   ========================================================================= */

.cp-console{
  --cp-bg:#eef0f3; --cp-bg2:#e4e7ec; --cp-painel:#ffffff; --cp-painel2:#f7f8fa;
  --cp-borda:#d7dbe1; --cp-tinta:#14161a; --cp-sub:#666c76;
  --cp-azul:#2461e0; --cp-azul-fraco:rgba(36,97,224,.10);
  --cp-vermelho:#d81f26; --cp-vermelho-fraco:rgba(216,31,38,.10);
  --cp-ambar:#b3760a; --cp-ambar-fraco:rgba(179,118,10,.12);
  --cp-verde:#1a8a4a;
  --cp-fonte-titulo:"Rajdhani",Arial Narrow,sans-serif;
  --cp-fonte-corpo:"Inter",-apple-system,sans-serif;
  --cp-fonte-dados:"JetBrains Mono",ui-monospace,monospace;
  font-family:var(--cp-fonte-corpo);
  color:var(--cp-tinta);
  max-width:1180px;
}
body.layout-novo.dark .cp-console{
  --cp-bg:#0a0b0d; --cp-bg2:#111318; --cp-painel:#15171c; --cp-painel2:#1a1d23;
  --cp-borda:#282c33; --cp-tinta:#eef1f5; --cp-sub:#8b909a;
  --cp-azul:#4d8dff; --cp-azul-fraco:rgba(77,141,255,.14);
  --cp-vermelho:#ff4550; --cp-vermelho-fraco:rgba(255,69,80,.14);
  --cp-ambar:#f2b23e; --cp-ambar-fraco:rgba(242,178,62,.14);
  --cp-verde:#3ddc84;
}

/* -------- cabeçalho: instrumento com curva de fundo -------- */
.cp-cab{
  position:relative; overflow:hidden; background:linear-gradient(180deg,var(--cp-bg2),var(--cp-bg));
  border:1px solid var(--cp-borda); border-radius:14px; padding:26px 28px 22px; margin-bottom:16px;
}
.cp-cab-curva{ position:absolute; inset:0; width:100%; height:100%; opacity:.55; pointer-events:none; }
body.layout-novo.dark .cp-cab-curva{ opacity:.4; }
.cp-cab-conteudo{ position:relative; z-index:1; }
.cp-eyebrow{
  font-family:var(--cp-fonte-dados); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cp-vermelho); font-weight:500; display:flex; align-items:center; gap:8px; margin-bottom:6px;
}
.cp-eyebrow::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--cp-vermelho); box-shadow:0 0 8px var(--cp-vermelho); }
.cp-titulo{
  font-family:var(--cp-fonte-titulo); font-weight:700; font-size:34px; letter-spacing:.01em; text-transform:uppercase;
  margin:0 0 4px; line-height:1.05;
}
.cp-subtitulo{ font-size:13.5px; color:var(--cp-sub); max-width:560px; line-height:1.5; }

/* -------- módulos genéricos -------- */
.cp-modulo{
  background:var(--cp-painel); border:1px solid var(--cp-borda); border-radius:12px; padding:18px 20px; margin-bottom:16px;
}
.cp-modulo-titulo{
  font-family:var(--cp-fonte-titulo); font-weight:700; font-size:15px; text-transform:uppercase; letter-spacing:.04em;
  display:flex; align-items:center; gap:8px; margin-bottom:12px;
}
.cp-modulo-titulo svg{ width:16px; height:16px; stroke:var(--cp-sub); fill:none; stroke-width:1.8; }
.cp-modulo-desc{ font-size:12.5px; color:var(--cp-sub); line-height:1.55; margin-bottom:12px; }

/* -------- canais (original / reprogramado) -------- */
.cp-canais{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media (max-width:820px){ .cp-canais{ grid-template-columns:1fr; } }
.cp-canal{
  background:var(--cp-painel); border:1px solid var(--cp-borda); border-radius:12px; padding:20px;
  position:relative;
}
/* diferenciação de canal sem tarja de cor na borda: LED + rótulo colorido (abaixo) já bastam */
.cp-canal.cp-original{ --cp-cor:var(--cp-azul); }
.cp-canal.cp-reprog{ --cp-cor:var(--cp-vermelho); }
.cp-canal-cab{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cp-canal-nome{
  font-family:var(--cp-fonte-titulo); font-weight:700; font-size:16px; text-transform:uppercase; letter-spacing:.03em;
  color:var(--cp-cor); display:flex; align-items:center; gap:8px;
}
.cp-canal-nome::before{ content:""; width:9px; height:9px; border-radius:2px; background:var(--cp-cor); box-shadow:0 0 8px var(--cp-cor); }
.cp-canal-tag{
  font-family:var(--cp-fonte-dados); font-size:10.5px; color:var(--cp-sub); border:1px solid var(--cp-borda);
  padding:3px 9px; border-radius:999px; text-transform:uppercase; letter-spacing:.05em;
}
.cp-grade{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cp-campo{ display:flex; flex-direction:column; gap:5px; }
.cp-campo label{
  font-family:var(--cp-fonte-dados); font-size:10.5px; color:var(--cp-sub); text-transform:uppercase; letter-spacing:.06em; font-weight:500;
}
.cp-campo input{
  font-family:var(--cp-fonte-dados); font-size:17px; font-weight:500; color:var(--cp-tinta);
  background:var(--cp-bg); border:1px solid var(--cp-borda); border-radius:8px; padding:9px 11px;
  transition:border-color .12s, box-shadow .12s;
}
.cp-campo input::placeholder{ color:var(--cp-sub); opacity:.55; font-weight:400; }
.cp-campo input:focus{ outline:none; border-color:var(--cp-cor,var(--cp-vermelho)); box-shadow:0 0 0 3px color-mix(in srgb, var(--cp-cor,var(--cp-vermelho)) 18%, transparent); }
.cp-canal-nota{ font-size:11.5px; color:var(--cp-sub); margin-top:12px; line-height:1.5; }
.cp-limpar-btn{
  margin-top:12px; display:inline-flex; align-items:center; gap:6px; font-family:var(--cp-fonte-corpo); font-weight:600; font-size:12.5px;
  padding:8px 14px; border-radius:8px; border:1px solid var(--cp-borda); background:var(--cp-painel2); color:var(--cp-tinta); cursor:pointer;
}
.cp-limpar-btn:hover{ border-color:var(--cp-vermelho); color:var(--cp-vermelho); }

/* -------- resultado / medidores -------- */
.cp-resultado{
  background:var(--cp-painel); border:1px solid var(--cp-borda); border-radius:12px; padding:22px 24px 24px;
}
.cp-vazio{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:30px 10px; color:var(--cp-sub); text-align:center; font-size:13px; }
.cp-vazio svg{ width:26px; height:26px; stroke:var(--cp-sub); fill:none; stroke-width:1.6; opacity:.7; }

.cp-medidores{ display:flex; flex-direction:column; gap:14px; margin-bottom:18px; }
.cp-medidor-linha{ display:flex; align-items:center; gap:14px; }
.cp-medidor-rotulo{ width:190px; flex-shrink:0; font-size:12.5px; color:var(--cp-sub); }
.cp-medidor-barra{ flex:1; height:8px; border-radius:999px; background:var(--cp-bg); border:1px solid var(--cp-borda); overflow:hidden; position:relative; }
.cp-medidor-preenchido{ height:100%; width:100%; border-radius:999px; background:linear-gradient(90deg,var(--cp-azul),var(--cp-vermelho)); transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.cp-medidor-valor{ width:172px; flex-shrink:0; text-align:right; font-family:var(--cp-fonte-dados); font-size:12.5px; font-weight:500; }

.cp-leituras{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
@media (max-width:820px){ .cp-leituras{ grid-template-columns:1fr; } }
.cp-leitura{
  background:var(--cp-bg); border:1px solid var(--cp-borda); border-radius:10px; padding:16px 18px;
  border-top:2px solid var(--cp-vermelho);
}
.cp-leitura-rotulo{ font-family:var(--cp-fonte-dados); font-size:10.5px; color:var(--cp-sub); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.cp-leitura-valor{ font-family:var(--cp-fonte-titulo); font-weight:700; font-size:34px; line-height:1; color:var(--cp-tinta); }
.cp-leitura-valor small{ font-family:var(--cp-fonte-dados); font-size:15px; font-weight:500; color:var(--cp-sub); margin-left:4px; }
.cp-leitura-delta{ font-family:var(--cp-fonte-dados); font-size:12.5px; font-weight:500; margin-top:6px; }
.cp-leitura-delta.pos{ color:var(--cp-verde); }
.cp-leitura-delta.neg{ color:var(--cp-vermelho); }

.cp-nota-final{ font-size:12px; color:var(--cp-sub); line-height:1.6; border-top:1px solid var(--cp-borda); padding-top:14px; }