From 7ebb5932887f192cab5394d916c82456408b24d5 Mon Sep 17 00:00:00 2001
From: hacklab <hacklab@laenre.net>
Date: Fri, 22 May 2026 16:28:17 +0200
Subject: [PATCH] Panel: fuente Xirod, titulos centrados y diseno de dos
 columnas

Anade la fuente Xirod (web/panel/fonts/xirod.otf, de 1001fonts) para el titulo del panel, tanto en Raspberry como en portatil. Titulos centrados en la cabecera y en cada tarjeta. En pantalla ancha el panel pasa a dos columnas para aprovechar el espacio del portatil (Visuales/Audio/Sensibilidad a la izquierda, Motor y controles a la derecha); en movil sigue en una sola columna, igual que antes. El README explica el uso en ordenador con diagrama, comandos y tabla de diferencias, recalcando que en ordenador no se usa el modo kiosko.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 README.md                  |  59 +++++--
 web/panel/fonts/README.txt |   9 ++
 web/panel/fonts/xirod.otf  | Bin 0 -> 31556 bytes
 web/panel/index.html       | 311 +++++++++++++++++++------------------
 web/panel/panel.css        |  84 +++++++---
 5 files changed, 281 insertions(+), 182 deletions(-)
 create mode 100644 web/panel/fonts/README.txt
 create mode 100644 web/panel/fonts/xirod.otf

diff --git a/README.md b/README.md
index 220ef57..77648d3 100644
--- a/README.md
+++ b/README.md
@@ -2,11 +2,15 @@
 
 # FOSFENO
 
-**Motor de visuales audio-reactivas para Raspberry Pi.**
+**Motor de visuales audio-reactivas para Raspberry Pi y para portátil Linux.**
 Convierte una Raspberry Pi + un proyector + un micro USB en una estación de
-VJ automática: la Pi escucha la música de la sala, detecta su BPM y proyecta
+VJ automática: escucha la música de la sala, detecta su BPM y proyecta
 visuales que reaccionan al sonido. Todo se controla desde un panel web.
 
+Funciona en dos escenarios: en una **Raspberry Pi** como aparato dedicado que
+arranca solo, o en un **portátil Linux** que lanzas cuando quieras. El apartado
+[En un portátil Linux](#en-un-portátil-linux) explica las diferencias.
+
 ```
    [ Música en la sala ]
             │  (micro USB)
@@ -76,13 +80,7 @@ bash install.sh --no-projectm   # omite la compilación de projectM
 bash install.sh --check          # solo comprueba el sistema, no instala nada
 ```
 
-### En un portátil Linux
-
-FOSFENO también corre en un portátil con Debian, Ubuntu o Mint, sin Raspberry
-Pi. Se instala con `bash install.sh --laptop` y se arranca cuando quieras con
-`./fosfeno`. Los detalles están en [FOSFENO en un portátil](docs/portatil.md).
-
-Después:
+Después, en la Raspberry, activa el arranque al escritorio:
 
 ```bash
 sudo raspi-config   # System Options → Boot/Auto Login → Desktop Autologin
@@ -91,6 +89,49 @@ sudo reboot
 
 Al reiniciar, la Pi arranca sola en modo kiosko mostrando las visuales.
 
+### En un portátil Linux
+
+FOSFENO no necesita la Raspberry: corre igual en un portátil con Debian,
+Ubuntu o Mint. El portátil ya trae micrófono y cámara, y lo conectas al
+proyector por HDMI como cualquier otra cosa.
+
+```
+   [ Música de la sala ]
+            │  (micrófono integrado, o USB)
+            ▼
+   ┌────────────────────────┐
+   │   Portátil Linux       │── HDMI ──▶  [ Proyector :: visuales ]
+   │   ./fosfeno            │
+   └───────────┬────────────┘
+               │
+        Panel:  http://localhost:8080/
+        (o desde el móvil, en la misma red Wi-Fi)
+```
+
+Se instala una vez y se arranca a mano cuando lo necesites:
+
+```bash
+bash install.sh --laptop     # instala, sin tocar el arranque del sistema
+./fosfeno                    # arranca FOSFENO; Ctrl+C para cerrarlo
+```
+
+Diferencias con la Raspberry Pi:
+
+| | Raspberry Pi | Portátil Linux |
+|---|---|---|
+| Arranque | Automático al encender | A mano, con `./fosfeno` |
+| Modo kiosko | Sí: visuales a pantalla completa al arrancar | **No**: ventana normal que mueves al proyector |
+| Puerto del panel | 80 — `http://fosfeno.local/` | 8080 — `http://localhost:8080/` |
+| Micrófono y cámara | Por USB | Los integrados del portátil |
+| Cambios en el sistema | Arranque automático y nombre de red | Ninguno |
+
+La diferencia clave: en el portátil **no se usa el modo kiosko**. Las visuales
+salen en una ventana de navegador normal que arrastras a la pantalla del
+proyector y pones a pantalla completa con F11. Así FOSFENO no se apodera de tu
+pantalla ni se mete en el arranque del sistema; lo abres y lo cierras tú.
+
+Guía completa: [FOSFENO en un portátil](docs/portatil.md).
+
 ## Uso
 
 - **Visuales** → salen automáticamente por el proyector (HDMI).
diff --git a/web/panel/fonts/README.txt b/web/panel/fonts/README.txt
new file mode 100644
index 0000000..10e3196
--- /dev/null
+++ b/web/panel/fonts/README.txt
@@ -0,0 +1,9 @@
+Fuente del panel
+================
+
+xirod.otf  -  fuente "Xirod", usada para el titulo del panel.
+Descargada de 1001fonts.com. Comprueba sus condiciones de uso si vas a
+distribuir el proyecto con fines comerciales.
+
+Para cambiar la fuente del titulo, sustituye este archivo y ajusta la
+regla @font-face de web/panel/panel.css.
diff --git a/web/panel/fonts/xirod.otf b/web/panel/fonts/xirod.otf
new file mode 100644
index 0000000000000000000000000000000000000000..7abda0724a7652917774d32fe6761ac665f056a8
GIT binary patch
literal 31556
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
N)^7<fhgddzJ^@?s2Gsxn

literal 0
HcmV?d00001

diff --git a/web/panel/index.html b/web/panel/index.html
index 30bd11a..2f6c3e6 100644
--- a/web/panel/index.html
+++ b/web/panel/index.html
@@ -10,7 +10,7 @@
 </head>
 <body>
   <header>
-    <h1>F O S F E N O</h1>
+    <h1>FOSFENO</h1>
     <span id="conn" class="dot off" title="Conexion"></span>
   </header>
 
@@ -20,167 +20,176 @@
     <button id="notif-close" aria-label="Cerrar aviso">&times;</button>
   </div>
 
+  <!-- En movil las tarjetas van en una sola columna; en pantalla ancha,
+       en dos columnas (.column pasa a display:contents en movil). -->
   <main>
-    <!-- Encendido -->
-    <section class="card center">
-      <div class="cardhead">
-        <span class="label">Visuales</span>
-        <button class="info" data-help="power">i</button>
-      </div>
-      <button id="power" class="power-btn">ON</button>
-    </section>
+    <div class="column">
 
-    <!-- Selector de motor -->
-    <section class="card">
-      <div class="cardhead">
-        <span class="label">Motor de visuales</span>
-        <button class="info" data-help="engines">i</button>
-      </div>
-      <div class="engines">
-        <button class="engine" data-engine="projectm">
-          <strong>projectM</strong><small>nativo</small></button>
-        <button class="engine" data-engine="butterchurn">
-          <strong>Butter</strong><small>MilkDrop</small></button>
-        <button class="engine" data-engine="hydra">
-          <strong>Hydra</strong><small>codigo</small></button>
-        <button class="engine" data-engine="shaders">
-          <strong>Shaders</strong><small>GLSL</small></button>
-        <button class="engine" data-engine="mixer">
-          <strong>Mezcla</strong><small>camara</small></button>
-      </div>
-    </section>
+      <!-- Encendido -->
+      <section class="card center" id="card-power">
+        <div class="cardhead">
+          <span class="label">Visuales</span>
+          <button class="info" data-help="power">i</button>
+        </div>
+        <button id="power" class="power-btn">ON</button>
+      </section>
 
-    <!-- Audio: tarjeta + BPM -->
-    <section class="card">
-      <div class="cardhead">
-        <span class="label">Audio</span>
-        <button class="info" data-help="audio">i</button>
-      </div>
-      <select id="audio-device"><option>Detectando entradas...</option></select>
-      <button id="dev-rescan" class="cmd">Buscar dispositivos de nuevo</button>
-      <div class="row">
-        <span class="label">BPM detectado</span>
-        <span id="bpm" class="bpm">--</span>
-      </div>
-      <p class="hint">Si conectas el microfono o la camara con la Raspberry ya
-        encendida, pulsa este boton para que aparezcan.</p>
-    </section>
+      <!-- Audio: tarjeta + BPM -->
+      <section class="card" id="card-audio">
+        <div class="cardhead">
+          <span class="label">Audio</span>
+          <button class="info" data-help="audio">i</button>
+        </div>
+        <select id="audio-device"><option>Detectando entradas...</option></select>
+        <button id="dev-rescan" class="cmd">Buscar dispositivos de nuevo</button>
+        <div class="row">
+          <span class="label">BPM detectado</span>
+          <span id="bpm" class="bpm">--</span>
+        </div>
+        <p class="hint">Si conectas el microfono o la camara con el equipo ya
+          encendido, pulsa este boton para que aparezcan.</p>
+      </section>
 
-    <!-- Sensibilidad -->
-    <section class="card">
-      <div class="cardhead">
-        <span class="label">Sensibilidad al audio:
-          <span id="sens-val" class="value">1.0</span></span>
-        <button class="info" data-help="sensibilidad">i</button>
-      </div>
-      <input id="sens" type="range" min="0" max="4" step="0.1" value="1">
-    </section>
+      <!-- Sensibilidad -->
+      <section class="card" id="card-sens">
+        <div class="cardhead">
+          <span class="label">Sensibilidad al audio:
+            <span id="sens-val" class="value">1.0</span></span>
+          <button class="info" data-help="sensibilidad">i</button>
+        </div>
+        <input id="sens" type="range" min="0" max="4" step="0.1" value="1">
+      </section>
 
-    <!-- Butterchurn -->
-    <section class="card" id="ctl-butterchurn" hidden>
-      <div class="cardhead">
-        <span class="label">Butterchurn</span>
-        <button class="info" data-help="butterchurn">i</button>
-      </div>
-      <div class="row">
-        <button class="cmd" data-action="prev">&laquo; Anterior</button>
-        <button class="cmd" data-action="next">Siguiente &raquo;</button>
-      </div>
-      <select id="bc-preset"><option>Cargando presets...</option></select>
-      <label class="check">
-        <input type="checkbox" id="bc-shuffle"> Cambio automatico de preset
-      </label>
-      <div class="seg">
-        <button id="bc-mode-seconds" class="segbtn">Por segundos</button>
-        <button id="bc-mode-beats" class="segbtn">Al compas (BPM)</button>
-      </div>
-      <div class="row">
-        <span class="label">Intervalo: <span id="bc-int-val">20</span>
-          <span id="bc-int-unit">s</span></span>
-      </div>
-      <input id="bc-interval" type="range" min="1" max="120" step="1" value="20">
-      <div class="row">
-        <span class="label">Transicion: <span id="bc-blend-val">2.7</span> s</span>
-      </div>
-      <input id="bc-blend" type="range" min="0" max="10" step="0.1" value="2.7">
-    </section>
+      <!-- Estado -->
+      <section class="card" id="card-now">
+        <span class="label">Ahora suena</span>
+        <div id="now" class="now">-</div>
+      </section>
 
-    <!-- Editor de codigo (Hydra / Shaders) -->
-    <section class="card" id="ctl-editor" hidden>
-      <div class="cardhead">
-        <span class="label" id="editor-title">Editor de codigo</span>
-        <button class="info" id="editor-info" data-help="hydra">i</button>
-      </div>
-      <select id="lib-select"><option>Libreria...</option></select>
-      <textarea id="code"></textarea>
-      <div class="row">
-        <button id="run-code" class="cmd accent">Ejecutar</button>
-        <button id="clear-code" class="cmd">Limpiar</button>
-      </div>
-      <p class="hint" id="editor-hint"></p>
-    </section>
+      <!-- Sistema -->
+      <section class="card sys" id="card-sys">
+        <button id="reboot" class="sysbtn">Reiniciar</button>
+        <button id="shutdown" class="sysbtn danger">Apagar</button>
+      </section>
 
-    <!-- Mezclador VJ -->
-    <section class="card" id="ctl-mixer" hidden>
-      <div class="cardhead">
-        <span class="label">Mezclador VJ</span>
-        <button class="info" data-help="mixer">i</button>
-      </div>
-      <div class="seg" id="mixer-source">
-        <button class="segbtn" data-src="cam">Camara</button>
-        <button class="segbtn" data-src="video">Video</button>
-        <button class="segbtn" data-src="mix">Mezcla</button>
-      </div>
-      <label class="check">
-        <input type="checkbox" id="mix-cam"> Camara activada
-      </label>
-      <select id="mix-camera"><option value="0">Camara por defecto</option></select>
-      <select id="mix-video"><option value="">-- sin video --</option></select>
-      <button id="mix-rescan" class="cmd">Actualizar lista de videos</button>
-      <div class="row">
-        <span class="label">Modo de mezcla</span>
-        <select id="mix-blend" class="inline">
-          <option value="blend">Fundido</option>
-          <option value="diff">Diferencia</option>
-          <option value="mult">Multiplicar</option>
-          <option value="add">Sumar</option>
-          <option value="layer">Capa</option>
-        </select>
-      </div>
-      <div id="mixer-sliders"></div>
-      <label class="check">
-        <input type="checkbox" id="mix-invert"> Invertir colores
-      </label>
-      <label class="check">
-        <input type="checkbox" id="mix-beat"> Pulso al ritmo
-      </label>
-    </section>
+      <p id="net-foot" class="netfoot">FOSFENO</p>
+    </div>
 
-    <!-- projectM -->
-    <section class="card" id="ctl-projectm" hidden>
-      <div class="cardhead">
-        <span class="label">projectM</span>
-        <button class="info" data-help="projectm">i</button>
-      </div>
-      <div class="row">
-        <button class="cmd" data-action="prev">&laquo; Anterior</button>
-        <button class="cmd" data-action="next">Siguiente &raquo;</button>
-      </div>
-    </section>
+    <div class="column">
 
-    <!-- Estado -->
-    <section class="card">
-      <span class="label">Ahora suena</span>
-      <div id="now" class="now">-</div>
-    </section>
+      <!-- Selector de motor -->
+      <section class="card" id="card-engines">
+        <div class="cardhead">
+          <span class="label">Motor de visuales</span>
+          <button class="info" data-help="engines">i</button>
+        </div>
+        <div class="engines">
+          <button class="engine" data-engine="projectm">
+            <strong>projectM</strong><small>nativo</small></button>
+          <button class="engine" data-engine="butterchurn">
+            <strong>Butter</strong><small>MilkDrop</small></button>
+          <button class="engine" data-engine="hydra">
+            <strong>Hydra</strong><small>codigo</small></button>
+          <button class="engine" data-engine="shaders">
+            <strong>Shaders</strong><small>GLSL</small></button>
+          <button class="engine" data-engine="mixer">
+            <strong>Mezcla</strong><small>camara</small></button>
+        </div>
+      </section>
 
-    <!-- Sistema -->
-    <section class="card sys">
-      <button id="reboot" class="sysbtn">Reiniciar Pi</button>
-      <button id="shutdown" class="sysbtn danger">Apagar Pi</button>
-    </section>
+      <!-- Butterchurn -->
+      <section class="card" id="ctl-butterchurn" hidden>
+        <div class="cardhead">
+          <span class="label">Butterchurn</span>
+          <button class="info" data-help="butterchurn">i</button>
+        </div>
+        <div class="row">
+          <button class="cmd" data-action="prev">&laquo; Anterior</button>
+          <button class="cmd" data-action="next">Siguiente &raquo;</button>
+        </div>
+        <select id="bc-preset"><option>Cargando presets...</option></select>
+        <label class="check">
+          <input type="checkbox" id="bc-shuffle"> Cambio automatico de preset
+        </label>
+        <div class="seg">
+          <button id="bc-mode-seconds" class="segbtn">Por segundos</button>
+          <button id="bc-mode-beats" class="segbtn">Al compas (BPM)</button>
+        </div>
+        <div class="row">
+          <span class="label">Intervalo: <span id="bc-int-val">20</span>
+            <span id="bc-int-unit">s</span></span>
+        </div>
+        <input id="bc-interval" type="range" min="1" max="120" step="1" value="20">
+        <div class="row">
+          <span class="label">Transicion: <span id="bc-blend-val">2.7</span> s</span>
+        </div>
+        <input id="bc-blend" type="range" min="0" max="10" step="0.1" value="2.7">
+      </section>
 
-    <p id="net-foot" class="netfoot">FOSFENO</p>
+      <!-- Editor de codigo (Hydra / Shaders) -->
+      <section class="card" id="ctl-editor" hidden>
+        <div class="cardhead">
+          <span class="label" id="editor-title">Editor de codigo</span>
+          <button class="info" id="editor-info" data-help="hydra">i</button>
+        </div>
+        <select id="lib-select"><option>Libreria...</option></select>
+        <textarea id="code"></textarea>
+        <div class="row">
+          <button id="run-code" class="cmd accent">Ejecutar</button>
+          <button id="clear-code" class="cmd">Limpiar</button>
+        </div>
+        <p class="hint" id="editor-hint"></p>
+      </section>
+
+      <!-- Mezclador VJ -->
+      <section class="card" id="ctl-mixer" hidden>
+        <div class="cardhead">
+          <span class="label">Mezclador VJ</span>
+          <button class="info" data-help="mixer">i</button>
+        </div>
+        <div class="seg" id="mixer-source">
+          <button class="segbtn" data-src="cam">Camara</button>
+          <button class="segbtn" data-src="video">Video</button>
+          <button class="segbtn" data-src="mix">Mezcla</button>
+        </div>
+        <label class="check">
+          <input type="checkbox" id="mix-cam"> Camara activada
+        </label>
+        <select id="mix-camera"><option value="0">Camara por defecto</option></select>
+        <select id="mix-video"><option value="">-- sin video --</option></select>
+        <button id="mix-rescan" class="cmd">Actualizar lista de videos</button>
+        <div class="row">
+          <span class="label">Modo de mezcla</span>
+          <select id="mix-blend" class="inline">
+            <option value="blend">Fundido</option>
+            <option value="diff">Diferencia</option>
+            <option value="mult">Multiplicar</option>
+            <option value="add">Sumar</option>
+            <option value="layer">Capa</option>
+          </select>
+        </div>
+        <div id="mixer-sliders"></div>
+        <label class="check">
+          <input type="checkbox" id="mix-invert"> Invertir colores
+        </label>
+        <label class="check">
+          <input type="checkbox" id="mix-beat"> Pulso al ritmo
+        </label>
+      </section>
+
+      <!-- projectM -->
+      <section class="card" id="ctl-projectm" hidden>
+        <div class="cardhead">
+          <span class="label">projectM</span>
+          <button class="info" data-help="projectm">i</button>
+        </div>
+        <div class="row">
+          <button class="cmd" data-action="prev">&laquo; Anterior</button>
+          <button class="cmd" data-action="next">Siguiente &raquo;</button>
+        </div>
+      </section>
+
+    </div>
   </main>
 
   <!-- Ventana de informacion -->
diff --git a/web/panel/panel.css b/web/panel/panel.css
index 38188c4..a29e23e 100644
--- a/web/panel/panel.css
+++ b/web/panel/panel.css
@@ -1,5 +1,13 @@
 /* FOSFENO :: Panel de control
-   Tema verde acido y negro, con acentos en naranja neon. */
+   Tema verde acido y negro, con acentos en naranja neon.
+   Movil: una columna.  Pantalla ancha: dos columnas. */
+
+@font-face {
+  font-family: "Xirod";
+  src: url("/panel/fonts/xirod.otf") format("opentype");
+  font-display: swap;
+}
+
 :root {
   --bg: #060a06;
   --card: #0d120c;
@@ -27,24 +35,52 @@ body {
   padding-bottom: 48px;
 }
 
+/* --- Cabecera con el titulo centrado --- */
 header {
-  display: flex; align-items: center; justify-content: space-between;
-  padding: 18px 20px; border-bottom: 2px solid var(--green-d);
-  position: sticky; top: 0; background: var(--bg); z-index: 10;
+  position: sticky; top: 0; z-index: 10;
+  display: flex; align-items: center; justify-content: center;
+  padding: 16px 20px; border-bottom: 2px solid var(--green-d);
+  background: var(--bg);
 }
 header h1 {
-  font-size: 20px; font-weight: 800; letter-spacing: 0.32em;
-  color: var(--green); text-shadow: 0 0 14px rgba(180, 255, 0, 0.55);
+  font-family: "Xirod", "Arial Black", sans-serif;
+  font-size: 21px; font-weight: 400; letter-spacing: 0.16em;
+  color: var(--green); text-shadow: 0 0 16px rgba(180, 255, 0, 0.6);
+}
+#conn {
+  position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
 }
-
 .dot { width: 13px; height: 13px; border-radius: 50%; display: inline-block; }
 .dot.on { background: var(--green); box-shadow: 0 0 9px var(--green); }
 .dot.off { background: var(--red); box-shadow: 0 0 9px var(--red); }
 
+/* --- Disposicion: movil en una columna --- */
 main {
   max-width: 560px; margin: 0 auto;
   padding: 16px; display: flex; flex-direction: column; gap: 14px;
 }
+.column { display: contents; }   /* en movil, las columnas no existen */
+
+/* Orden de las tarjetas cuando estan todas en una sola columna (movil) */
+#card-power    { order: 1; }
+#card-engines  { order: 2; }
+#card-audio    { order: 3; }
+#card-sens     { order: 4; }
+#ctl-butterchurn, #ctl-editor, #ctl-mixer, #ctl-projectm { order: 5; }
+#card-now      { order: 6; }
+#card-sys      { order: 7; }
+#net-foot      { order: 8; }
+
+/* --- Disposicion: pantalla ancha (portatil) en dos columnas --- */
+@media (min-width: 880px) {
+  main {
+    max-width: 1080px; flex-direction: row;
+    align-items: flex-start; gap: 18px;
+  }
+  .column {
+    display: flex; flex-direction: column; gap: 14px; flex: 1 1 0;
+  }
+}
 
 /* --- Tarjetas --- */
 .card {
@@ -54,9 +90,10 @@ main {
 }
 .card.center { align-items: center; }
 
+/* Cabecera de tarjeta: titulo centrado, boton de info a la derecha */
 .cardhead {
-  display: flex; align-items: center; justify-content: space-between;
-  gap: 10px; width: 100%;
+  position: relative; width: 100%;
+  display: flex; align-items: center; justify-content: center;
 }
 
 .label { color: var(--green); font-size: 13px; text-transform: uppercase;
@@ -68,9 +105,10 @@ main {
   gap: 10px; }
 .row .cmd { flex: 1; }
 
-/* --- Boton de informacion (circular naranja) --- */
+/* --- Boton de informacion (circular naranja, esquina de la tarjeta) --- */
 .info {
-  width: 28px; height: 28px; flex: none; border-radius: 50%;
+  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
+  width: 28px; height: 28px; border-radius: 50%;
   background: var(--orange); color: var(--ink); border: none;
   font-weight: 900; font-style: italic; font-size: 15px; cursor: pointer;
   box-shadow: 0 0 10px rgba(255, 122, 0, 0.5);
@@ -115,9 +153,7 @@ main {
   font-weight: 700; font-size: 14px;
 }
 .cmd:active, .sysbtn:active { background: #202a16; }
-.cmd.accent {
-  background: var(--green); color: var(--ink); border: none;
-}
+.cmd.accent { background: var(--green); color: var(--ink); border: none; }
 
 /* --- Selectores y sliders --- */
 select {
@@ -165,6 +201,8 @@ input[type=range] { width: 100%; accent-color: var(--green); height: 30px; }
   font-size: 13px; font-family: "Fira Mono", Consolas, monospace;
 }
 
+/* --- Tarjeta de estado --- */
+#card-now { text-align: center; }
 .now { font-size: 15px; color: var(--orange-n); word-break: break-word; }
 
 /* --- Sistema --- */
@@ -172,11 +210,17 @@ input[type=range] { width: 100%; accent-color: var(--green); height: 30px; }
 .sys .sysbtn { flex: 1; }
 .sysbtn.danger { color: var(--red); border-color: var(--red); }
 
+/* --- Pie con la direccion del panel --- */
+.netfoot {
+  text-align: center; color: var(--dim);
+  font-size: 12px; font-family: monospace; padding: 4px 0 8px;
+}
+
 /* --- Banda de avisos --- */
 .notif {
   display: flex; align-items: center; gap: 10px;
   padding: 12px 16px; font-size: 14px; font-weight: 600;
-  position: sticky; top: 60px; z-index: 9;
+  position: sticky; top: 56px; z-index: 9;
 }
 .notif.info  { background: var(--green); color: var(--ink); }
 .notif.warn  { background: var(--orange); color: var(--ink); }
@@ -201,12 +245,8 @@ input[type=range] { width: 100%; accent-color: var(--green); height: 30px; }
   box-shadow: 0 0 30px rgba(180, 255, 0, 0.3);
 }
 .modal-box h2 {
-  color: var(--green); font-size: 18px; letter-spacing: 0.04em;
+  font-family: "Xirod", "Arial Black", sans-serif; font-weight: 400;
+  color: var(--green); font-size: 16px; letter-spacing: 0.06em;
+  text-align: center;
 }
 .modal-box p { color: var(--txt); font-size: 14px; line-height: 1.5; }
-
-/* Pie con la direccion del panel */
-.netfoot {
-  text-align: center; color: var(--dim);
-  font-size: 12px; font-family: monospace; padding: 4px 0 8px;
-}