@font-face { font-family: 'Ubuntu Sans'; font-weight: 100 800; font-stretch: 75% 100%; font-display: swap; src: local('Ubuntu Sans'), url(/fuentes/UbuntuSans.ttf) format('truetype'); }
@font-face { font-family: 'Ubuntu Sans Mono'; font-weight: 400 700; font-display: swap; src: local('Ubuntu Sans Mono'), url(/fuentes/UbuntuSansMono.ttf) format('truetype'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 600; font-display: swap; src: url(/fuentes/ChakraPetch-SemiBold.ttf) format('truetype'); }
@font-face { font-family: 'Chakra Petch'; font-weight: 700; font-display: swap; src: url(/fuentes/ChakraPetch-Bold.ttf) format('truetype'); }

/* Oscuro, moderno y gamer: grafito profundo, naranja de acento (el mismo del escritorio) y cian para datos */
:root {
  --fondo: #0b0d12;
  --panel: #12151d;
  --panel-alto: #181c27;
  --linea: #1f2433;
  --linea-fuerte: #2b3247;
  --texto: #eef1f8;
  --tenue: #8e97ad;
  --acento: #ff6b2c;
  --acento-boton: #d9531a;
  --cian: #33d6ff;
  --serie-a: #1e9cbd;   /* bajada / permitidas — validado contra el fondo oscuro */
  --serie-b: #e35a20;   /* subida / bloqueadas */
  --verde: #22c55e;
  --ambar: #f59e0b;
  --rojo: #ef4444;
  --apagado: #4a5166;
  --display: 'Chakra Petch', 'Ubuntu Sans', system-ui, sans-serif;
  --ui: 'Ubuntu Sans', Ubuntu, 'Segoe UI', system-ui, sans-serif;
  --mono: 'Ubuntu Sans Mono', 'Cascadia Mono', Consolas, ui-monospace, monospace;
  --radio: 18px;
  --salida: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--fondo); scroll-behavior: smooth; scroll-padding-top: 76px; }
body { margin: 0; color: var(--texto); font: 400 14.5px/1.5 var(--ui); -webkit-font-smoothing: antialiased; caret-color: var(--acento); -webkit-tap-highlight-color: transparent;
       background: radial-gradient(1200px 500px at 15% -10%, rgb(255 107 44 / .07), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgb(51 214 255 / .05), transparent 60%) no-repeat, var(--fondo); }
::selection { background: rgb(255 107 44 / .45); color: #fff; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; border-radius: 8px; }
* { scrollbar-width: thin; scrollbar-color: var(--linea-fuerte) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--linea-fuerte); border-radius: 10px; border: 2px solid var(--fondo); }
::-webkit-scrollbar-track { background: transparent; }
svg.icono { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Tarjetas */
.tarjeta { position: relative; background: linear-gradient(180deg, rgb(255 255 255 / .018), transparent 120px), var(--panel); border: 1px solid var(--linea);
           border-radius: var(--radio); padding: 18px; min-width: 0; }
.cabeza { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; min-height: 34px; }
.cabeza .marca-icono { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgb(255 107 44 / .12); color: var(--acento); flex: none; }
.cabeza h2 { margin: 0; font: 600 16.5px/1.15 var(--display); letter-spacing: .01em; }
.cabeza h2 small { display: block; font: 400 12.5px/1.3 var(--ui); color: var(--tenue); letter-spacing: 0; margin-top: 2px; }
.cabeza .derecha { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.pastilla { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 99px; background: var(--panel-alto); border: 1px solid var(--linea);
            font: 500 12.5px/1 var(--ui); color: var(--tenue); white-space: nowrap; }
.pastilla.si { color: #86efac; border-color: rgb(34 197 94 / .3); background: rgb(34 197 94 / .08); }
.pastilla.alerta { color: #fcd34d; border-color: rgb(245 158 11 / .35); background: rgb(245 158 11 / .08); }
.pastilla.acento { color: #ffb08c; border-color: rgb(255 107 44 / .35); background: rgb(255 107 44 / .1); }
.luz { width: 8px; height: 8px; border-radius: 50%; background: var(--apagado); flex: none; }
.luz.si { background: var(--verde); box-shadow: 0 0 0 3px rgb(34 197 94 / .18); }
.luz.alerta { background: var(--ambar); box-shadow: 0 0 0 3px rgb(245 158 11 / .18); }
.luz.vivo { background: var(--rojo); box-shadow: 0 0 0 3px rgb(239 68 68 / .2); }

/* Botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 15px;
  border-radius: 11px; border: 1px solid var(--linea-fuerte); background: var(--panel-alto); color: var(--texto);
  font: 600 14px/1 var(--display); letter-spacing: .02em; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: border-color .2s, background .2s, box-shadow .25s var(--salida), transform .12s;
}
.boton:hover:not(:disabled) { border-color: rgb(255 107 44 / .6); box-shadow: 0 6px 20px -10px var(--acento); }
.boton:active:not(:disabled) { transform: translateY(1px); }
.boton:disabled { opacity: 1; background: var(--panel-alto); border-color: var(--linea); color: #5d6579; cursor: not-allowed; }
.boton.principal { background: var(--acento-boton); border-color: transparent; color: #fff; }
.boton.principal:hover:not(:disabled) { background: var(--acento); }
.boton.peligro:hover:not(:disabled) { border-color: rgb(239 68 68 / .7); box-shadow: 0 6px 20px -10px var(--rojo); }
.boton.icono-solo { width: 38px; padding: 0; }
.boton.chico { min-height: 32px; padding: 0 11px; font-size: 13px; border-radius: 9px; }
.boton.icono-solo.chico { width: 32px; padding: 0; }

/* Controles */
.interruptor { position: relative; width: 44px; height: 24px; border-radius: 99px; border: 1px solid var(--linea-fuerte); background: var(--panel-alto); cursor: pointer; transition: background .2s, border-color .2s; flex: none; padding: 0; }
.interruptor::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--tenue); transition: transform .25s var(--salida), background .2s; }
.interruptor[aria-checked="true"] { background: rgb(255 107 44 / .2); border-color: rgb(255 107 44 / .6); }
.interruptor[aria-checked="true"]::after { transform: translateX(20px); background: var(--acento); }
.interruptor:disabled { opacity: .4; cursor: not-allowed; }
.campo, .selector { min-height: 34px; padding: 0 11px; border-radius: 9px; border: 1px solid var(--linea-fuerte); background: #0d1017; color: var(--texto); font: 500 13.5px var(--ui); }
.selector { padding-right: 30px; appearance: none; cursor: pointer;
            background: #0d1017 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238e97ad' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
.campo:focus, .selector:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgb(255 107 44 / .2); }
.campo::placeholder { color: #626a80; }
.selector option { background: #12151d; }

/* Medidores de LEDs */
.medida { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: baseline; }
.medida > span { font-size: 13px; color: var(--tenue); }
.medida > b { font: 600 14px var(--display); font-variant-numeric: tabular-nums; }
.leds { grid-column: 1 / -1; position: relative; height: 8px; --c: var(--acento); background: repeating-linear-gradient(90deg, var(--linea-fuerte) 0 7px, transparent 7px 10px); }
.leds i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v, 0) * 1%); transition: width .7s var(--salida);
          background: repeating-linear-gradient(90deg, var(--c) 0 7px, transparent 7px 10px); filter: drop-shadow(0 1px 4px color-mix(in srgb, var(--c) 60%, transparent)); }

.dato-mono { font-family: var(--mono); font-size: 13px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.tenue { color: var(--tenue); }
.numero { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}