/* KITT · pantalla de monitor de los contadores de energía (para un monitor fijo: grande, oscura y legible de lejos) */
@font-face { font-family:"Orbitron"; font-weight:700; font-display:swap; src:url(fuentes/orbitron-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family:"Orbitron"; font-weight:900; font-display:swap; src:url(fuentes/orbitron-latin-900-normal.woff2) format("woff2"); }
@font-face { font-family:"Rajdhani"; font-weight:500; font-display:swap; src:url(fuentes/rajdhani-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family:"Rajdhani"; font-weight:600; font-display:swap; src:url(fuentes/rajdhani-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family:"Rajdhani"; font-weight:700; font-display:swap; src:url(fuentes/rajdhani-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family:"Share Tech Mono"; font-weight:400; font-display:swap; src:url(fuentes/share-tech-mono-latin-400-normal.woff2) format("woff2"); }

:root {
  --bg:#050505; --card:#0f0f11; --card2:#151518; --tx:#f2f2f2; --mu:#8d939c; --ln:#26262b;
  --rojo:#ff2a1a; --rojo-suave:rgba(255,42,26,.14);
  --calor:#ff6b3d; --calor-suave:rgba(255,107,61,.16);
  --frio:#4fb6ff; --frio-suave:rgba(79,182,255,.16);
  --ok:#3ddc84; --ok-suave:rgba(61,220,132,.14); --ambar:#ffb02e; --ambar-suave:rgba(255,176,46,.15);
  --f-tit:"Orbitron","Bahnschrift","Segoe UI",system-ui,sans-serif;
  --f-txt:"Rajdhani","Bahnschrift","Segoe UI",system-ui,sans-serif;
  --f-num:"Share Tech Mono","Bahnschrift","Consolas",ui-monospace,monospace;
  --u:clamp(10px, .82vw + .35vh, 22px);          /* unidad que crece con la pantalla */
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html, body { margin:0; height:100%; }
body { background:radial-gradient(1200px 520px at 50% -200px,rgba(255,40,20,.20),transparent 70%),linear-gradient(180deg,#0a0505,#000 55%) fixed;
  background-color:var(--bg); color:var(--tx); font-family:var(--f-txt); font-size:calc(var(--u) * 1.05);
  display:flex; flex-direction:column; height:100vh; overflow:hidden; cursor:none; }
body.raton { cursor:default; }

/* ---------------------------------------------------------------- cabecera */
.cab { display:flex; align-items:center; gap:calc(var(--u) * 1.4); padding:calc(var(--u) * .9) calc(var(--u) * 1.6) calc(var(--u) * .6); }
.logo { height:calc(var(--u) * 2.6); width:auto; flex:none; }
.tit { flex:1; min-width:0; }
.tit h1 { margin:0; font-family:var(--f-tit); font-weight:900; letter-spacing:.06em; font-size:calc(var(--u) * 1.9); line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tit .sub { margin:.15em 0 0; color:var(--mu); font-size:calc(var(--u) * 1); letter-spacing:.12em; text-transform:uppercase; }
.reloj { text-align:right; flex:none; }
.reloj b { display:block; font-family:var(--f-num); font-weight:400; font-size:calc(var(--u) * 2.4); line-height:1; letter-spacing:.04em; }
.reloj span { color:var(--mu); font-size:calc(var(--u) * .95); }

.escaner { position:relative; height:3px; margin:0 calc(var(--u) * 1.6); background:linear-gradient(90deg,transparent,rgba(255,42,26,.25),transparent); overflow:hidden; border-radius:2px; }
.escaner i { position:absolute; top:0; left:0; height:100%; width:18%; background:linear-gradient(90deg,transparent,var(--rojo),transparent);
  box-shadow:0 0 18px var(--rojo); animation:barrido 3.2s ease-in-out infinite alternate; }
@keyframes barrido { from { transform:translateX(-30%); } to { transform:translateX(480%); } }
body.sin-datos .escaner i { animation-play-state:paused; opacity:.25; }

/* ---------------------------------------------------------------- aviso general (sin conexión, sin llave) */
.aviso { margin:calc(var(--u) * .8) calc(var(--u) * 1.6) 0; padding:calc(var(--u) * .7) calc(var(--u) * 1.1); border-radius:12px;
  background:var(--rojo-suave); border:1px solid rgba(255,42,26,.45); color:#ffd2cc; font-weight:700; font-size:calc(var(--u) * 1.25); }

/* ---------------------------------------------------------------- tarjetas de los contadores */
.rejilla { flex:1; display:grid; gap:calc(var(--u) * 1.2); padding:calc(var(--u) * 1) calc(var(--u) * 1.6);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, calc(var(--u) * 30)), 1fr)); grid-auto-rows:minmax(0, 1fr); align-content:stretch; min-height:0; overflow:auto; }
.cont { background:linear-gradient(180deg,var(--card2),var(--card)); border:1px solid var(--ln); border-radius:18px;
  padding:calc(var(--u) * 1.1) calc(var(--u) * 1.3); display:flex; flex-direction:column; gap:calc(var(--u) * .9);
  box-shadow:0 10px 40px rgba(0,0,0,.55); position:relative; overflow:hidden; min-height:0; transition:opacity .4s, filter .4s; }
.cont::before { content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--ln); }
.cont.calor::before { background:var(--calor); box-shadow:0 0 16px var(--calor); }
.cont.frio::before { background:var(--frio); box-shadow:0 0 16px var(--frio); }
.cont.mal { border-color:rgba(255,42,26,.55); }
.cont.mal::before { background:var(--rojo); box-shadow:0 0 16px var(--rojo); }
.cont.viejo .vals, .cont.viejo .hero, .cont.viejo .energia, .cont.viejo .graf { opacity:.38; filter:grayscale(1); }

.c-cab { display:flex; align-items:center; gap:calc(var(--u) * .8); flex-wrap:wrap; }
.c-cab h2 { margin:0; font-family:var(--f-tit); font-weight:700; letter-spacing:.05em; font-size:calc(var(--u) * 1.45); flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pill { display:inline-flex; align-items:center; gap:.4em; padding:.25em .8em; border-radius:999px; font-weight:700; letter-spacing:.06em;
  font-size:calc(var(--u) * .95); text-transform:uppercase; background:var(--card2); border:1px solid var(--ln); color:var(--mu); white-space:nowrap; }
.pill::before { content:""; width:.6em; height:.6em; border-radius:50%; background:currentColor; }
.pill.ok { color:var(--ok); background:var(--ok-suave); border-color:rgba(61,220,132,.35); }
.pill.ambar { color:var(--ambar); background:var(--ambar-suave); border-color:rgba(255,176,46,.4); }
.pill.rojo { color:#ff6a5f; background:var(--rojo-suave); border-color:rgba(255,42,26,.5); }
.pill.rojo::before { animation:latido 1.2s ease-in-out infinite; }
@keyframes latido { 50% { opacity:.25; } }

.hero { display:flex; align-items:flex-end; gap:calc(var(--u) * 1); flex-wrap:wrap; }
.hero .num { font-family:var(--f-num); font-size:calc(var(--u) * 5.4); line-height:.9; letter-spacing:-.01em; }
.hero .num small { font-size:.36em; color:var(--mu); margin-left:.25em; letter-spacing:0; }
.hero .que { display:flex; flex-direction:column; gap:.2em; padding-bottom:.35em; }
.hero .que b { font-family:var(--f-tit); font-size:calc(var(--u) * 1.05); letter-spacing:.14em; text-transform:uppercase; }
.hero .que span { color:var(--mu); font-size:calc(var(--u) * .95); }
.cont.calor .hero .num, .cont.calor .hero .que b { color:var(--calor); text-shadow:0 0 24px rgba(255,107,61,.35); }
.cont.frio .hero .num, .cont.frio .hero .que b { color:var(--frio); text-shadow:0 0 24px rgba(79,182,255,.35); }

.vals { display:grid; grid-template-columns:repeat(4, 1fr); gap:calc(var(--u) * .6); }
.val { background:rgba(255,255,255,.03); border:1px solid var(--ln); border-radius:12px; padding:calc(var(--u) * .55) calc(var(--u) * .7); min-width:0; }
.val b { display:block; font-family:var(--f-num); font-weight:400; font-size:calc(var(--u) * 2.05); line-height:1.05; white-space:nowrap; }
.val b small { font-size:.5em; color:var(--mu); margin-left:.2em; }
.val span { display:block; color:var(--mu); font-size:calc(var(--u) * .9); letter-spacing:.08em; text-transform:uppercase; margin-top:.2em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.val.imp b { color:#ffcf9a; } .val.ret b { color:#9fd6ff; }

.energia { display:grid; grid-template-columns:repeat(4, 1fr); gap:calc(var(--u) * .6); border-top:1px solid var(--ln); padding-top:calc(var(--u) * .8); }
.en b { display:block; font-family:var(--f-num); font-weight:400; font-size:calc(var(--u) * 1.55); white-space:nowrap; }
.en b small { font-size:.55em; color:var(--mu); margin-left:.2em; }
.en span { display:block; color:var(--mu); font-size:calc(var(--u) * .85); letter-spacing:.08em; text-transform:uppercase; }
.en em { display:block; font-style:normal; color:var(--frio); font-family:var(--f-num); font-size:calc(var(--u) * 1.05); }

.graf { position:relative; flex:1; display:flex; flex-direction:column; min-height:calc(var(--u) * 5); }
.graf figcaption { color:var(--mu); font-size:calc(var(--u) * .85); letter-spacing:.08em; text-transform:uppercase; margin-bottom:.3em; display:flex; justify-content:space-between; gap:1em; }
.graf svg { display:block; width:100%; flex:1; min-height:calc(var(--u) * 3.5); }
.graf .rej { stroke:rgba(255,255,255,.07); stroke-width:1; }
.graf .eje { fill:var(--mu); font-family:var(--f-num); font-size:calc(var(--u) * .8); }
.graf .area-calor { fill:var(--calor-suave); } .graf .linea-calor { fill:none; stroke:var(--calor); stroke-width:2.2; }
.graf .area-frio { fill:var(--frio-suave); } .graf .linea-frio { fill:none; stroke:var(--frio); stroke-width:2.2; }
.graf .vacio { fill:var(--mu); font-size:calc(var(--u) * 1); }

.averias { margin:0; padding:calc(var(--u) * .6) calc(var(--u) * .9); list-style:none; border-radius:12px; background:var(--rojo-suave);
  border:1px solid rgba(255,42,26,.45); display:flex; flex-direction:column; gap:.3em; }
.averias li { font-weight:700; font-size:calc(var(--u) * 1.1); color:#ffd2cc; }
.averias li.aviso { color:#ffe2b0; }
.averias li span { font-weight:500; color:var(--mu); margin-left:.5em; font-size:.85em; }

.c-pie { display:flex; justify-content:space-between; gap:1em; color:var(--mu); font-size:calc(var(--u) * .85); flex-wrap:wrap; }

/* ---------------------------------------------------------------- pie */
.pie { display:flex; justify-content:space-between; align-items:center; gap:1em; padding:calc(var(--u) * .5) calc(var(--u) * 1.6) calc(var(--u) * .8);
  color:var(--mu); font-size:calc(var(--u) * .95); }
.estado { display:inline-flex; align-items:center; gap:.55em; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.estado i { width:.7em; height:.7em; border-radius:50%; background:var(--mu); }
.estado.ok i { background:var(--ok); box-shadow:0 0 10px var(--ok); animation:latido 2.4s ease-in-out infinite; }
.estado.ok { color:var(--ok); }
.estado.mal i { background:var(--rojo); box-shadow:0 0 10px var(--rojo); animation:latido 1.2s ease-in-out infinite; }
.estado.mal { color:#ff6a5f; }

.vacio-grande { grid-column:1 / -1; text-align:center; color:var(--mu); font-size:calc(var(--u) * 1.4); padding:calc(var(--u) * 4) 0; }

/* pantallas estrechas o en vertical */
@media (orientation: portrait) {
  .rejilla { grid-template-columns:1fr; }
}
@media (max-width: 900px) {
  .vals, .energia { grid-template-columns:repeat(2, 1fr); }
  .reloj span { display:none; }
}
@media (prefers-reduced-motion: reduce) {
  .escaner i, .pill.rojo::before, .estado i { animation:none !important; }
}