/* ══════════════════════════════════════════════════════════════════════
   EL PANEL DE LA SALA DE IA · parada 07 de que-es.html      01/09/2026
   ─────────────────────────────────────────────────────────────────────
   Vive fuera de `que-es.html` a posta: esa página la están tocando dos
   ventanas a la vez, y cuanto menos se le inyecte, menos hay que volver
   a pegar cuando se pisen. Lo que sí va dentro del HTML es el TEXTO —el
   manifiesto tiene que ser indexable, que es media razón de existir de
   este panel—; la ropa está aquí.

   ⚠ TRES REGLAS QUE NO SE TOCAN, Y POR QUÉ
   1 · EL APAGADO DEL VUELO GANA POR UN TIPO. Encender es
       `#casa.con-ia #iaPanel` (2,1,0) y apagar `body.volando #casa
       #iaPanel` (2,1,1). Si alguien le añade una clase a la de encender
       la deja en (2,2,0), le gana a la de apagar POR CLASE, y el panel se
       queda puesto encima de las nueve salas durante los vuelos. Es
       exactamente la pelea que está documentada en la hoja de la página
       para `#ciudadSala`, y aquí se repite igual a propósito.
   2 · NO EMPIEZA EN EL CANTO IZQUIERDO. Ahí vive `#atras`, la flecha de
       volver: 46 px en `left:clamp(14px,2.6vw,28px)` y z-index 8, o sea
       por encima de este panel. Si el panel se pega al borde, la flecha
       se le queda flotando dentro y parece un botón del panel. El `left`
       de aquí abajo es esa cuenta: hueco de la flecha + su ancho + aire.
   3 · LOS PANELES DE FICHA SE ESCONDEN CON UNA CLASE, NUNCA CON [hidden].
       El `[hidden]{display:none}` del navegador es una regla de la hoja
       DEL NAVEGADOR y pierde contra cualquier regla de autor: un
       `.ip-f{display:block}` escrito después lo anula y las doce fichas
       salen a la vez, apiladas. `.ip-f` nace en `display:none` y sube con
       `.viva`. El atributo se pone igualmente, pero para el lector de
       pantalla, no para esconder.
   ══════════════════════════════════════════════════════════════════════ */

/* ── LA CAPA ──────────────────────────────────────────────────────────
   `overflow:hidden` en la caja y el desplazamiento SOLO en el cuerpo de
   la ficha: si el panel entero rueda, la rejilla de iconos se va hacia
   arriba y dejas de saber en cuál estás. */
#iaPanel{
  position:absolute; z-index:6;
  left:calc(clamp(14px,2.6vw,28px) + 46px + clamp(10px,1.2vw,20px));
  top:calc(var(--head-h) + 54px);
  bottom:clamp(20px,3.6vh,42px);
  width:min(38vw, 470px);
  display:none;
  flex-direction:column;
  pointer-events:auto;
}
#casa.con-ia #iaPanel{display:flex; animation:ia-entra .5s var(--ease) both}
body.entrando #casa #iaPanel,
body.volando  #casa #iaPanel{display:none}
@keyframes ia-entra{from{opacity:0; transform:translateX(-14px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  #casa.con-ia #iaPanel{animation:none}
}

/* ── EL DIFUMINADO NEGRO ──────────────────────────────────────────────
   El croquis pedía «un difuminado en negro y un panel dentro». Son las
   dos cosas, y en este orden: primero el velo que separa el panel de la
   habitación, y dentro la caja con su filo.
   ⚠ `backdrop-filter` DESENFOCA LO QUE HAY DETRÁS AUNQUE EL FONDO SEA
   TRANSPARENTE. Poner `background:transparent` no lo apaga —eso ya costó
   una pasada en la portada—: si algún día sobra, se quita la línea
   entera, no el color. Y el radio es 16 y no 40 porque detrás hay un
   pasillo con robots moviéndose: desenfocarlo del todo mata justamente
   lo que se acaba de encender. */
#iaPanel .ip-in{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(11,11,13,.93) 0%, rgba(11,11,13,.88) 62%, rgba(11,11,13,.93) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(1.06);
  backdrop-filter:blur(16px) saturate(1.06);
  border:1px solid rgba(242,242,240,.14);
  /* ── EL FILO MECANIZADO · 03/09/2026 ────────────────────────────────
     Tres sombras en una, y cada una hace un trabajo distinto:
     · el `inset 0 1px 0` es la luz que pega en el canto de arriba de
       cualquier chapa. Sin él la caja es un rectángulo pintado; con él
       tiene grosor. Es UN píxel y es lo que más se nota de todo esto.
     · el `inset 0 -1px 0` es lo mismo por abajo, en negro, para que la
       caja se apoye en vez de flotar.
     · la sombra grande sube de 70 a 90 px y baja el desplazamiento a
       34: en un pasillo oscuro una sombra corta no se ve, y lo que
       separa el panel de la habitación es precisamente eso.
     ⚠ NINGUNA ANIMA. Son estáticas y el panel no se mueve una vez
     puesto; una `box-shadow` animada a este tamaño es repintado del
     área entera en cada fotograma. */
  box-shadow:
    inset 0 1px 0 rgba(242,242,240,.07),
    inset 0 -1px 0 rgba(0,0,0,.5),
    0 34px 90px -34px rgba(0,0,0,.94);
  overflow:hidden;
}

/* ── LA CABECERA ──────────────────────────────────────────────────────
   El `position:relative` no es de adorno: sostiene el «07» fantasma de
   más abajo. Si se quita, el número se va a buscar el primer antepasado
   posicionado, que es `#iaPanel`, y aparece flotando sobre las fichas. */
#iaPanel .ip-cab{
  position:relative;
  flex:none; padding:clamp(14px,2vh,20px) clamp(15px,1.5vw,22px) clamp(10px,1.4vh,14px);
  border-bottom:1px solid rgba(242,242,240,.10);
}

/* ── EL NÚMERO DE PARADA, FANTASMA ────────────────────────────────────
   Un «07» grande y casi apagado en el canto de la cabecera. Hace dos
   cosas: le da a la cabecera una segunda altura de lectura —ahora mismo
   todo el panel está en tres tamaños de letra muy juntos y por eso se
   lee plano— y repite el número de parada en grande, que es la única
   pista de dónde estás desde que se retiró la barra de avance el 25/08.

   ⚠ ES `content`, O SEA DECORACIÓN PURA, Y ASÍ TIENE QUE SEGUIR. El
   texto que cuenta —«Parada 07 · Inteligencia artificial»— está escrito
   en el HTML dos líneas más arriba y lo lee un rastreador y un lector de
   pantalla. Esto de aquí no lo lee nadie, y es justo lo que se quiere:
   un número repetido dos veces seguidas en voz alta es ruido.

   ⚠ Y NO ES UNA CIFRA CODIFICADA A MANO POR VAGUERÍA: la parada 07 es la
   07 en el guion de SALAS y no se mueve. Si algún día se reordenan las
   salas, esto se cambia aquí y en el `<p class="ip-tag">` del HTML, que
   son los dos sitios.

   ⚠ VA DETRÁS DEL TEXTO CON `z-index:-1`, Y NO ES OPCIONAL. Un `::after`
   se pinta DESPUÉS del contenido, o sea ENCIMA: aunque esté al 5,5 % de
   opacidad, un número de 54 px cruzando la segunda línea del titular le
   mete una neblina que no se sabe de dónde viene y se lee como que la
   letra está sucia. Con `-1` cae en la capa negativa de `.ip-in` —que es
   el contexto de apilado más cercano, porque lleva `backdrop-filter`—,
   o sea encima del fondo de la caja y debajo del texto. Exactamente
   donde tiene que estar, y sin tocar el orden del HTML. */
#iaPanel .ip-cab::after{
  content:"07";
  position:absolute; z-index:-1;
  top:clamp(6px,1vh,12px); right:clamp(11px,1.1vw,16px);
  font:700 clamp(38px,3.6vw,54px)/1 'Poppins',sans-serif;
  color:rgba(242,242,240,.055);
  letter-spacing:-.04em;
  pointer-events:none;
}
#iaPanel .ip-tag{
  display:flex; align-items:center; gap:9px;
  font:600 9.5px var(--mono); letter-spacing:.22em; text-transform:uppercase;
  color:var(--hueso-3);
}
#iaPanel .ip-tag i{
  width:11px; height:10px; background:var(--red); flex:none;
  clip-path:polygon(10% 16%,92% 0%,100% 55%,96% 92%,0% 96%);
}
#iaPanel .ip-tit{
  margin-top:9px;
  font:700 clamp(17px,1.44vw,22px)/1.16 'Poppins',sans-serif;
  color:var(--bone); letter-spacing:-.01em;
}
#iaPanel .ip-tit b{color:var(--red); font-weight:700}
#iaPanel .ip-lead{
  margin-top:7px;
  font:400 clamp(11.5px,.94vw,13px)/1.5 'Montserrat',sans-serif;
  color:rgba(242,242,240,.6);
}

/* ── LA REJILLA DE ICONOS ─────────────────────────────────────────────
   Doce teclas, cuatro por fila. No es una lista de enlaces: es un cuadro
   de mandos, que es lo que pega en una sala de racks — y por eso la tecla
   viva se marca con el rojo de la casa y no con un subrayado. */
#iaPanel .ip-rejilla{
  flex:none;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1px; padding:1px;
  background:rgba(242,242,240,.10);
  border-bottom:1px solid rgba(242,242,240,.10);
}
/* ── LA TECLA · el filete de arriba es toda la mejora ─────────────────
   Antes la tecla viva se marcaba SÓLO con un lavado rojo al 16 %. Sobre
   un fondo casi negro y con el pasillo moviéndose detrás del panel,
   ese lavado es un cambio de luminancia de nada: había que buscar cuál
   estaba puesta. Ahora lleva además un filete rojo de 2 px en el canto
   de arriba, encendido de verdad — que es como se marca una unidad viva
   en un rack, que es lo que este cuadro está imitando.

   ⚠ EL FILETE SE PINTA CON `box-shadow:inset`, NO CON `border-top`. Un
   borde le come 2 px a la caja y como las doce comparten rejilla, las
   cuatro de la fila viva se desalinean con las otras ocho y el icono
   baja. Con `inset` se pinta DENTRO y no ocupa. Es el mismo motivo por
   el que el `outline` del foco lleva `offset:-2px`.
   ⚠ Y NO SE ANIMA EL `box-shadow`, se anima la opacidad de nada: la
   transición sigue siendo `background` y `color`, que son las dos
   baratas. El filete entra de golpe, y está bien que entre de golpe —es
   un piloto, no una luz de mesilla. */
#iaPanel .ip-tec{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:5px; padding:clamp(8px,1.2vh,11px) 3px clamp(7px,1vh,9px);
  background:rgba(11,11,13,.72);
  color:rgba(242,242,240,.62);
  transition:background .12s var(--ease), color .12s var(--ease);
  min-height:0;
}
/* ⚠ EL ICONO SE PINTA A MANO Y NO CON `class="ic"`.
   `aima-iconos.js` inyecta `.ic{display:inline-block}` y eso ya reventó
   el plano del hall el 25/08. Lo que hace falta de esa clase son estas
   cuatro líneas, y nada más: los símbolos son de TRAZO —líneas abiertas—
   y sin `fill:none` el navegador aplica lo de fábrica, relleno negro y
   trazo ninguno, que no dibuja el icono sino la mancha que queda al
   cerrarlo. Medido en su día: 342 px de tinta rellenado contra 420
   trazado, y por eso nadie lo notó en un año. */
#iaPanel .ip-tec svg{
  width:clamp(17px,1.5vw,21px); height:clamp(17px,1.5vw,21px);
  fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linejoin:miter; stroke-linecap:square;
  --ic-acento:currentColor;
}
#iaPanel .ip-tec span{
  font:600 clamp(7.4px,.62vw,8.6px) var(--mono);
  letter-spacing:.1em; text-transform:uppercase; text-align:center; line-height:1.25;
}
#iaPanel .ip-tec:hover{
  background:rgba(11,11,13,.42); color:var(--bone);
  box-shadow:inset 0 2px 0 rgba(242,242,240,.22);
}
#iaPanel .ip-tec[aria-selected="true"]{
  background:rgba(193,39,45,.16); color:var(--bone);
  box-shadow:inset 0 2px 0 var(--red);
  --ic-acento:var(--red);
}
/* la viva gana al hover: sin esto, pasar el ratón por encima de la que
   ya está puesta le apaga el filete rojo y parece que se ha desmarcado */
#iaPanel .ip-tec[aria-selected="true"]:hover{
  background:rgba(193,39,45,.22);
  box-shadow:inset 0 2px 0 var(--red);
}
/* el símbolo de la viva, un pelo más gordo. Es un cuarto de píxel de
   trazo y no se ve como grosor: se ve como que ese icono está encendido
   y los otros once no */
#iaPanel .ip-tec[aria-selected="true"] svg{stroke-width:1.9}
#iaPanel .ip-tec:focus-visible{outline:2px solid var(--red); outline-offset:-2px}

/* ── LAS FICHAS ───────────────────────────────────────────────────── */
#iaPanel .ip-cuerpo{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(13px,1.9vh,19px) clamp(15px,1.5vw,22px) clamp(15px,2.2vh,22px);
  scrollbar-width:thin; scrollbar-color:var(--grafito) transparent;
}
#iaPanel .ip-cuerpo::-webkit-scrollbar{width:7px}
#iaPanel .ip-cuerpo::-webkit-scrollbar-thumb{background:var(--grafito)}
#iaPanel .ip-f{display:none}
#iaPanel .ip-f.viva{display:block; animation:ia-ficha .28s var(--ease) both}
@keyframes ia-ficha{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ #iaPanel .ip-f.viva{animation:none} }
/* `text-wrap:balance` en los dos titulares · 03/09/2026.
   En una columna de 38 vw casi todos los títulos de dos líneas caían con
   cuatro palabras arriba y una sola abajo —«Webs que son un sitio, / no
   una página»—, y esa palabra suelta es lo que hacía que el panel se
   viera desequilibrado sin que se supiera por qué. El navegador reparte
   las líneas él solo. Donde no está soportado no pasa nada: se ignora y
   vuelve el corte de siempre. */
#iaPanel .ip-tit,
#iaPanel .ip-f h3{text-wrap:balance}
#iaPanel .ip-f h3{
  font:700 clamp(14.5px,1.16vw,17px)/1.28 'Poppins',sans-serif;
  color:var(--bone); letter-spacing:-.005em;
}
#iaPanel .ip-f p{
  margin-top:9px;
  font:400 clamp(12px,.98vw,13.6px)/1.62 'Montserrat',sans-serif;
  color:rgba(242,242,240,.78);
}
#iaPanel .ip-f p + p{margin-top:8px}
#iaPanel .ip-f b{color:var(--bone); font-weight:600}
#iaPanel .ip-f em{color:var(--red); font-style:normal; font-weight:600}
#iaPanel .ip-f a{
  color:var(--bone); border-bottom:1px solid rgba(193,39,45,.75);
  transition:border-color .12s var(--ease)
}
#iaPanel .ip-f a:hover{border-bottom-color:var(--bone)}

/* ── EL NÚMERO DE FICHA, COMO EL DE UNA UNIDAD DE RACK ────────────────
   Lleva delante un filete rojo de 14 px, con `::before` y no con un
   borde: es el mismo gesto que la marca de la cabecera y el que remata
   la tecla viva, y repetido tres veces deja de ser un adorno y pasa a
   ser el acento de la sala. El `vertical-align` es lo que lo pone a la
   altura de la letra en vez de en la base de la línea. */
#iaPanel .ip-n{
  display:block; margin-bottom:8px;
  font:600 9px var(--mono); letter-spacing:.24em; color:var(--red);
}
#iaPanel .ip-n::before{
  content:""; display:inline-block; vertical-align:middle;
  width:14px; height:2px; margin-right:8px;
  background:var(--red);
}

/* ── EL CIERRE: EL CORREO ─────────────────────────────────────────── */
#iaPanel .ip-correo{
  margin-top:13px; display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:10px 12px;
  background:rgba(242,242,240,.05);
  border:1px solid rgba(242,242,240,.14);
}
#iaPanel .ip-correo code{
  font:600 clamp(11.5px,.95vw,13px) var(--mono); color:var(--bone); letter-spacing:.01em;
}
#iaPanel .ip-copia{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border:1px solid rgba(242,242,240,.22);
  font:600 9px var(--mono); letter-spacing:.16em; text-transform:uppercase;
  color:var(--bone);
  transition:background .12s var(--ease), border-color .12s var(--ease);
}
#iaPanel .ip-copia:hover{background:var(--red); border-color:var(--red)}
#iaPanel .ip-copia svg{
  width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.6;
  stroke-linejoin:miter; stroke-linecap:square; --ic-acento:currentColor;
}
#iaPanel .ip-copia.hecho{border-color:var(--red)}

/* ── EL TIRADOR DE PLEGAR · RETIRADO EL 06/09/2026 ────────────────────
   Decía «VER LA SALA» y funcionaba: `pliega()` en `sala-ia.js` ponía la
   clase `.plegado`, escondía la caja y le cambiaba el rótulo a «Ver el
   panel». Se retira porque lo pidió Bratney, no porque estuviera roto.

   Y el motivo por el que ya no hace falta es que el panel dejó de tapar
   la sala: el canto derecho se fue a 40vw el 03/09 para despejar el
   rótulo horneado de la pared, así que el pasillo con los robots se ve
   entero por la derecha sin plegar nada. Un control que resuelve un
   problema que ya no existe es un botón más que explicar.

   Se retira el trío entero —botón, hoja y estado `.plegado`— porque
   dejar la hoja de un botón que no está en el marcado es lo que hace que
   dentro de un mes alguien lo devuelva a medias.
   ⚠ SI VUELVE, QUE NO VUELVA COMO ESTABA. `#iaPanel.plegado{bottom:auto}`
   con la caja en `display:none` dejaba el botón solo, flotando a la
   altura del rótulo del hall; y el panel es `position:absolute` con
   `top` Y `bottom`, así que soltar el `bottom` le quita la única altura
   que tenía. Eso hay que resolverlo, no heredarlo. */

/* ── EL PASILLO VIVO · las CUATRO pistas encadenadas ──────────────────
   `ia_bucle.mp4`, `ia_agentes.mp4`, `ia_reposo.mp4` e `ia_relevo.mp4`,
   apiladas encima de la foto de la sala. Las cuatro se generaron con
   fotograma inicial Y final = `casa/ia.jpg`, así que el primero y el
   último fotograma de las cuatro SON la foto que hay debajo. De ahí las
   cuatro cosas de este
   bloque:

   · MISMO ENCAJE QUE LA FOTO. `object-fit:cover` como `#casa .capa img`,
     y `contain` por debajo de 1024 px, donde la página cambia de encaje.
     Si no van a la par, el vídeo y la foto no coinciden en el primer
     fotograma y se ve un salto al arrancar.
   · HACEN FALTA LAS DOS CLASES PARA VERSE, `.listo` Y `.viva`, y no es
     redundante: `.listo` la pone `canplay` y significa «este fichero
     existe y se puede reproducir»; `.viva` la pone el montaje y
     significa «te toca a ti ahora». Una pista cargada pero en reposo
     tiene `.listo` y no `.viva`; una pista a la que le toca pero cuyo
     mp4 todavía no está tiene `.viva` y no `.listo`, y no se ve —lo que
     se ve es la foto de debajo, que es su primer fotograma, sin hueco
     negro y sin error.
   · EL FUNDIDO ES LINEAL Y DURA 2,2 s, y las dos cosas importan. Lineal
     porque un `var(--ease)` en un encadenado de vídeo hace que el peso
     de la imagen se vaya a un lado a mitad del cruce y se ve el tirón;
     una curva está bien para una caja que entra, no para dos planos que
     se cruzan. Y 2,2 s porque ⚠ ES EL MISMO NÚMERO QUE `SOLAPE` EN
     `sala-ia.js`: si aquí dura más, la pista que se va llega a su bucle
     todavía a media vista y se ven los robots reaparecer de golpe.
     Se tocan los dos o ninguno, y la cuenta de por qué es 2,2 y no 1,1
     —el perfil de actividad de los tres clips— está en el .js.
   · Z-INDEX 2 LAS TRES: por encima de las dos capas de foto y por debajo
     de los clips del dron (3), del polvo (5) y del panel (6). Durante un
     vuelo el clip del dron tiene que taparlas, no al revés. Entre ellas
     no hace falta orden: en cualquier instante hay como mucho dos
     encendidas y lo que decide cuál pesa es la opacidad, no el apilado.

   ⚠ EL APAGADO DEL VUELO, OTRA VEZ: encender es `#casa.con-ia .ia-pista`
   (1,1,0) y apagar `body.volando #casa .ia-pista` (1,1,1). Una clase más
   en la de encender y los vídeos se quedan puestos encima de las nueve
   salas. Es la misma pelea documentada arriba para el panel. */
.ia-pista{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:none; z-index:2;
  opacity:0; transition:opacity 2.2s linear;
  pointer-events:none; background:transparent;
}
#casa.con-ia .ia-pista{display:block}
body.entrando #casa .ia-pista,
body.volando  #casa .ia-pista{display:none}
.ia-pista.listo.viva{opacity:1}
@media (prefers-reduced-motion:reduce){ .ia-pista{transition:none} }

/* ── LA PROFUNDIDAD DE ESTA SALA ES GRANO, NO DEGRADADO ───────────────
   Bratney, 03/09: «hay que mejorar estéticamente esto», y de las tres
   cosas que eligió una era «la habitación alrededor».

   ⚠ Y LA VIÑETA ESTÁ PROHIBIDA POR ÉL MISMO. Bratney, 25/08: «que no
   haya degradado ni línea que muestre en dónde nos encontramos, y esto
   aplica para todas las salas». Aquello se llevó por delante el
   `#casa::after` entero —viñeta radial más sombra de abajo— y la cuenta
   está escrita en la hoja de `que-es.html`. Volver a meterla aquí,
   aunque sea sólo en esta sala, es deshacer esa orden por la puerta de
   atrás y que dentro de un mes nadie sepa por qué la parada 07 tiene un
   degradado que las otras ocho no tienen.

   Lo que SÍ está bendecido en esa misma lápida es el ruido: «el grano
   (#grano) es otra capa y sigue puesto: no es un degradado, es ruido, y
   es lo que evita que el negro grande se lea como cartulina». Este
   pasillo es la sala más oscura de la casa —la piedra de la portada
   media 66/255 y ésta anda por ahí—, o sea que es justo donde el negro
   grande se lee como cartulina. Sube de .05 a .075. Son dos centésimas
   y media que no se ven como grano: se ven como que el pasillo tiene
   aire dentro.

   No hay `transition`: entra con el fundido de la propia sala. Animar
   la opacidad de una capa de ruido a pantalla completa es exactamente
   el tipo de gasto que ya costó el tirón de la portada. */
#casa.con-ia #grano{opacity:.075}

/* ── POR DEBAJO DE 1024 px CAMBIAN LAS DOS COSAS ──────────────────────
   1 · La foto pasa a `contain` (media query de `#casa .capa img` en la
       hoja de la página) y las TRES pistas tienen que pasar a `contain`
       A LA VEZ, o dejan de coincidir con el fotograma que tienen debajo
       —y, peor, dejan de coincidir entre ellas en el fundido.
   2 · El panel deja de ser «la izquierda». A 380 px de ancho una columna
       de 38 % son 145 px: la rejilla de doce iconos no entra y el texto
       sale en palabras sueltas. Pasa al canto de abajo, a lo ancho, que
       es donde cabe — mismo contenido, otra pared. Es la misma decisión
       que se tomó con la ciudad el 26/08. */
@media (max-width:1024px){
  .ia-pista{object-fit:contain}
}
@media (max-width:900px){
  #iaPanel{
    left:clamp(10px,3vw,22px); right:clamp(10px,3vw,22px);
    width:auto; top:auto; bottom:clamp(58px,9vh,86px);
    max-height:64svh;
  }
  #iaPanel .ip-rejilla{grid-template-columns:repeat(6,1fr)}
  #iaPanel .ip-tec span{display:none}
  #iaPanel .ip-tec{padding:9px 3px}
}

/* ══════════════════════════════════════════════════════════════════════
   EL TABLERO · 03/09/2026
   ----------------------------------------------------------------------
   Bratney: «ese panel tiene que ser una putísima locura; inspírate en
   Arduino, en n8n, en sistemas agénticos».

   Lo que era: una columna de 470 px con doce teclas en rejilla y la ficha
   debajo. Un cuadro de mandos correcto y mudo — doce botones no cuentan
   que las doce cosas se hablan entre ellas, y eso es justo lo que hay que
   contar en la sala que va de sistemas agénticos.

   Lo que es: una placa. Los doce siguen siendo los doce botones de antes
   —mismo `role="tab"`, mismo `aria-controls`, mismo `sala-ia.js`— pero
   colocados en cinco columnas que son cinco etapas, unidos por catorce
   cables, con un testigo que recorre el grafo encendiéndolos por orden y
   escribiendo lo que hace. La ficha ya no va debajo: va al lado, como el
   inspector de un editor de nodos.

   TRES REGLAS QUE SE HAN RESPETADO Y QUE NO SON NEGOCIABLES:
   · Las doce fichas siguen siendo HTML de verdad. Nada de esto se pinta
     desde JS: con el guion apagado se ven los doce nodos, se leen las doce
     fichas y funciona el tabulador. Lo único que aporta el JS son los
     cables y el testigo, o sea el adorno.
   · Canto vivo. Ni un `border-radius` en toda la sección — la casa va a
     1 px en las nueve salas, y un nodo redondeado aquí es un widget de
     otra web pegado encima.
   · Nada corre fuera de su parada. Todo cuelga de `#casa.con-ia`, así que
     en las otras ocho salas el panel está en `display:none` y un nodo en
     `display:none` no anima. Es la misma disciplina que salvó al lienzo
     del polvo, que era el que se comía los fotogramas.
   ══════════════════════════════════════════════════════════════════════ */

/* ── LA CAPA · ahora ocupa la sala ─────────────────────────────────────
   ⚠ SIGUE SIENDO `#iaPanel` Y NO UNA CAPA NUEVA. Reescribir cuatro
   propiedades aquí es todo lo que hacía falta para pasar de columna a
   tablero; una segunda capa al lado habría duplicado los apagados de
   `body.volando` y el resto de estados, que son varios sitios donde
   olvidarse de uno no da error y deja el panel colgado encima de la
   habitación siguiente durante todo el vuelo.
   (El `pliega()` y el botón «Ver la sala» que esta nota citaba como dos
   de esos sitios se retiraron el 06/09 — ver más arriba.) */
#casa.con-ia #iaPanel{
  left:clamp(14px,2.4vw,34px);
  /* ⚠ EL CANTO DERECHO ES UN TERCIO DE LA VENTANA, Y ES PARA QUE SE LEA
     LA PARED · 03/09, segunda pasada. Bratney: «hazlo más corto para que
     no tape las letras del fondo, un tercio más pequeño por la derecha».
     La foto de la sala tiene rotulada la pared —el «IA» grande en rojo y
     la frase de al lado—, y a sangre completa el tablero se la comía
     entera. En `vw` y no en píxeles porque lo que hay que despejar es una
     FRACCIÓN de la foto: el rótulo está donde está dentro del encuadre, y
     un margen fijo lo destapa en una pantalla y lo vuelve a tapar en otra.

     ⚠ Y 33vw NO BASTABA · tercera pasada, el mismo día. Bratney, viéndolo
     en pantalla: «recórtalo un poco más, que sigue tapando las letras». No
     era cuestión de gusto: en su ventana de 1.990 px el canto caía en 1.333
     y «TODO, APOYADO EN» empieza en 1.250 — o sea que seguía comiéndose el
     principio de la frase y el filo de la «I». Con 40vw el canto se va a
     1.194 y el rótulo entero queda fuera, con 56 px de aire. El tablero
     baja del 65 % al 58 % del ancho.
     Medir esto en la captura y no a ojo es lo que hace que el número sea
     ése y no otro: la pared está donde está dentro del encuadre. */
  right:max(34px, 40vw);
  /* ── EL RÓTULO DE LA SALA VA ANTES QUE EL PANEL · 06/09/2026 ─────────
     Estaba en +30 y se comía el «• IA» de la esquina. No era cuestión de
     gusto, se despeja: `.hud.tl` arranca en `--head-h + 22` y mide unos
     12 px de caja —9,5 px de mono en un flex centrado—, así que su canto
     de abajo cae en +34. Un panel que empieza en +30 nace CUATRO PÍXELES
     POR ENCIMA del rótulo que la sala usa para decir dónde estás.
     +54 es el mismo número que ya usa el modo estrecho de más abajo, así
     que no se estrena una medida: se deja de tener dos. Da 20 px de aire
     y le quita 24 px de alto al tablero, que los tenía de sobra. */
  top:calc(var(--head-h) + 54px);
  bottom:clamp(64px,8vh,96px);
  width:auto;
}
#iaPanel .ip-in{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(280px,27%,420px);
  grid-template-rows:auto minmax(0,1fr) auto auto;
  grid-template-areas:
    "cab      cab"
    "lienzo   ficha"
    "regleta  ficha"
    "log      ficha";
  overflow:hidden;
}
#iaPanel .ip-cab{grid-area:cab}
#iaPanel .ip-lienzo{grid-area:lienzo}
#iaPanel .ip-regleta{grid-area:regleta}
#iaPanel .ip-log{grid-area:log}
#iaPanel .ip-cuerpo{
  grid-area:ficha; min-height:0;
  border-left:1px solid rgba(242,242,240,.10); border-top:0;
}

/* ── LA PLACA ──────────────────────────────────────────────────────────
   El fondo de perfboard: la retícula de taladros de una placa de
   prototipos, que es donde empieza todo lo que luego se llama sistema.
   ⚠ SON DOS `background-image` Y NI UN NODO EN EL DOM. Un punto por
   agujero serían ~1.800 elementos para dibujar algo que no se puede
   pulsar; con dos degradados repetidos lo pinta el compositor una vez y
   no vuelve a costar nada. La cuadrícula grande va encima y más apagada:
   es la que le da la escala, y sin ella los puntos solos se leen como
   ruido de compresión sobre el vídeo. */
#iaPanel .ip-lienzo{
  position:relative; min-height:0; overflow:hidden;
  border-bottom:1px solid rgba(242,242,240,.10);
}
#iaPanel .ip-placa{
  position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(242,242,240,.13) 1px, transparent 1.1px),
    linear-gradient(rgba(242,242,240,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242,242,240,.035) 1px, transparent 1px);
  background-size:19px 19px, 95px 95px, 95px 95px;
  background-position:center;
  /* los cantos se apagan: una placa que muere en el borde de la caja se
     ve como un `background` pegado, y difuminada se ve como que sigue */
  -webkit-mask-image:radial-gradient(ellipse 78% 82% at 50% 48%, #000 55%, transparent 100%);
          mask-image:radial-gradient(ellipse 78% 82% at 50% 48%, #000 55%, transparent 100%);
}

/* ── LOS CABLES ────────────────────────────────────────────────────────
   Catorce curvas de puerto a puerto. La `d` la escribe `AIMATablero`
   midiendo dónde ha caído cada nodo — con `grid` y `clamp()` de por
   medio, cualquier trazado escrito a mano deja de ser verdad en cuanto
   cambia el ancho de la ventana. Mismo criterio que los hilos del CRM.
   ⚠ `vector-effect:non-scaling-stroke` PORQUE EL SVG VA ESTIRADO. Con
   `preserveAspectRatio="none"` el trazo se deformaría con la caja y los
   cables saldrían más gordos en horizontal que en vertical. */
#iaPanel .ip-cables{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; overflow:visible;
}
#iaPanel .ip-cables path{
  fill:none; vector-effect:non-scaling-stroke;
  stroke:rgba(242,242,240,.20); stroke-width:1;
  transition:stroke .25s var(--ease), stroke-width .25s var(--ease);
}
/* el cable que entra o sale del nodo abierto se enciende: es lo que
   convierte doce fichas sueltas en un grafo que se puede seguir */
#iaPanel .ip-cables path.viva{stroke:rgba(193,39,45,.85); stroke-width:1.8}
/* la corriente, en su propia capa · ver el mismo apaño en los cables del
   CRM: `stroke-dasharray` no se interpola desde el trazo continuo */
#iaPanel .ip-cables .ip-flujo path{
  stroke:rgba(242,242,240,.55); stroke-width:1.3;
  stroke-dasharray:.03 .97; stroke-dashoffset:0;
}
#casa.con-ia #iaPanel .ip-cables .ip-flujo path{
  animation:ipFluye 4.2s linear infinite;
  animation-delay:calc(var(--i) * .3s);
}
@keyframes ipFluye{ to{stroke-dashoffset:-1} }

/* ── LOS NODOS ─────────────────────────────────────────────────────────
   La rejilla de doce teclas pasa a ser una placa de cinco columnas por
   cuatro filas, y cada nodo dice en `--c`/`--r` dónde se sienta. Las cinco
   columnas son cinco etapas y se leen de izquierda a derecha: lo que
   entra, el cimiento, el motor, lo que se fabrica y a quién va. */
#iaPanel .ip-rejilla{
  position:absolute; inset:0;
  display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(4,1fr);
  gap:0; padding:clamp(10px,1.6vh,20px) clamp(5px,.6vw,12px);
  background:none; border:0;
  place-items:center;
}
#iaPanel .ip-tec{
  grid-column:var(--c); grid-row:var(--r) / span var(--rs,1);
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:5px; padding:clamp(7px,1vh,10px) clamp(6px,.7vw,12px);
  width:clamp(58px,6.2vw,106px); min-height:0;
  background:rgba(11,11,13,.9);
  border:1px solid rgba(242,242,240,.16);
  color:rgba(242,242,240,.66);
  transition:background .16s var(--ease), color .16s var(--ease),
             border-color .16s var(--ease), transform .16s var(--ease),
             box-shadow .16s var(--ease);
}
/* ⚠ EL MOTOR ES MÁS GRANDE, Y ESO ES INFORMACIÓN. «Agentes» es el nodo
   del que salen los cuatro cables de fabricación y al que llegan los dos
   del cimiento: si se dibuja del mismo tamaño que los demás, el grafo
   tiene doce iguales y no se ve dónde está el centro. */
#iaPanel .ip-tec[data-tipo="motor"]{
  /* ⚠ EL MOTOR ENCOGE ANTES QUE LOS DEMÁS, Y ES POR LA COLUMNA. Al
     estrechar el tablero un tercio, la columna del lienzo pasa a medir
     126 px en una ventana de 1.440 y el motor iba a 124: cabía por dos
     píxeles, o sea que no cabía. El término en `vw` baja de 8,6 a 7,6 y
     con eso mide 109 en esa ventana y sigue topando en 122 en cuanto la
     pantalla da para ello.
     ⚠ Y VOLVIÓ A ENCOGER AL RECORTAR OTRA VEZ · tercera pasada. Con el
     canto en 40vw la columna baja a 88 px en una ventana de 1.340, así
     que los dos mínimos —el del nodo normal y el de éste— tuvieron que
     bajar con ella. Lo que se gana a cambio es el umbral: con los tamaños
     de antes el tablero no habría cabido por debajo de 1.646 px y los
     portátiles de 1.440 se habrían quedado sin él. */
  width:clamp(64px,6.6vw,116px);
  padding-block:clamp(11px,1.6vh,17px);
  border-color:rgba(193,39,45,.55);
  background:rgba(11,11,13,.96);
}
#iaPanel .ip-tec[data-tipo="motor"] svg{width:24px; height:24px}
#iaPanel .ip-tec:hover{
  background:rgba(11,11,13,.98); color:var(--bone);
  border-color:rgba(242,242,240,.42);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(11,11,13,.55);
}
#iaPanel .ip-tec[aria-selected="true"]{
  background:rgba(193,39,45,.16); color:var(--bone);
  border-color:var(--red);
  box-shadow:0 0 0 1px rgba(193,39,45,.45), 0 10px 26px rgba(11,11,13,.6);
}

/* ── LOS PINES · el detalle de Arduino ─────────────────────────────────
   Dos cuadraditos en los cantos: el de entrada a la izquierda y el de
   salida a la derecha. Son lo que hace que un rectángulo con un icono se
   lea como un componente y no como un botón, y son además donde mueren
   los cables — `AIMATablero` mide ESTOS, no el nodo entero, así que el
   cable llega al pin y no al aire de al lado. */
#iaPanel .ip-pin{
  position:absolute; top:50%; width:7px; height:7px; margin-top:-3.5px;
  background:var(--graphite); border:1px solid rgba(242,242,240,.3);
  transition:background .16s var(--ease), border-color .16s var(--ease);
}
#iaPanel .ip-pin-e{left:-4px}
#iaPanel .ip-pin-s{right:-4px}
/* los de entrada no tienen pin de entrada y los destinos no tienen salida:
   el borde del grafo se dibuja quitando el pin que no lleva a ninguna parte */
#iaPanel .ip-tec[data-tipo="entrada"] .ip-pin-e,
#iaPanel .ip-tec[data-tipo="destino"] .ip-pin-s{display:none}
#iaPanel .ip-tec[aria-selected="true"] .ip-pin{background:var(--red); border-color:var(--red)}

/* el piloto: apagado de base, encendido cuando el testigo pasa por él */
#iaPanel .ip-led{
  position:absolute; top:5px; right:5px;
  width:4px; height:4px; background:rgba(242,242,240,.22);
  transition:background .2s var(--ease), box-shadow .2s var(--ease);
}
#iaPanel .ip-tec.corriendo .ip-led{
  background:var(--red); box-shadow:0 0 0 3px rgba(193,39,45,.22);
}
#iaPanel .ip-tec.corriendo{border-color:rgba(193,39,45,.7)}

/* ── EL TESTIGO ────────────────────────────────────────────────────────
   Abajo a la izquierda de la placa: dice si el sistema está corriendo y
   por dónde va. No es un botón de play — es una etiqueta de estado, que
   es lo que lleva un editor de flujos de verdad. */
#iaPanel .ip-testigo{
  position:absolute; left:clamp(10px,1.2vw,18px); bottom:clamp(8px,1vh,14px);
  z-index:3; display:flex; align-items:center; gap:8px;
  padding:5px 10px; background:rgba(11,11,13,.88);
  border:1px solid rgba(242,242,240,.14);
  font:600 9px var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--hueso-3); pointer-events:none;
}
#iaPanel .ip-testigo i{
  width:5px; height:5px; background:var(--red); flex:none;
  animation:ipLatido 1.9s var(--ease) infinite;
}
@keyframes ipLatido{0%,100%{opacity:1}50%{opacity:.25}}

/* ── LA REGLETA ────────────────────────────────────────────────────────
   Con qué habla el sistema. Va debajo de la placa y a lo ancho, como la
   fila de bornes de un cuadro eléctrico. */
#iaPanel .ip-regleta{
  flex:none; display:flex; align-items:center; gap:clamp(10px,1.2vw,18px);
  padding:clamp(7px,1vh,11px) clamp(12px,1.2vw,18px);
  border-bottom:1px solid rgba(242,242,240,.10);
  overflow:hidden;
}
#iaPanel .ip-regleta .ip-kick{
  flex:none; font:600 8.5px var(--mono); letter-spacing:.22em;
  text-transform:uppercase; color:var(--hueso-3);
}
#iaPanel .ip-regleta ul{
  display:flex; flex-wrap:wrap; gap:5px 7px; margin:0; padding:0; list-style:none; min-width:0;
}
#iaPanel .ip-regleta li{
  display:flex; align-items:center; gap:6px; flex:none;
  padding:3px 8px; border:1px solid rgba(242,242,240,.14);
  font:500 10px 'Montserrat',sans-serif; color:rgba(242,242,240,.72);
  white-space:nowrap;
}
#iaPanel .ip-regleta i{
  width:5px; height:5px; flex:none;
  background:var(--m, rgba(242,242,240,.55));
}
/* ⚠ UNO ESTÁ APAGADO A POSTA, Y ES EL MISMO QUE EN LA PARADA 06. Allí
   YouTube sale «sin conectar» porque un tablero donde todo está verde no
   lo cree nadie; aquí pasa igual y por el mismo motivo. Si algún día se
   conecta de verdad, se cambia en los dos sitios. */
#iaPanel .ip-regleta li[data-on="0"]{opacity:.4}
#iaPanel .ip-regleta li[data-on="0"] i{background:rgba(242,242,240,.3)}

/* ── EL REGISTRO ───────────────────────────────────────────────────────
   Tres renglones de log bajo la regleta, escritos por el testigo según
   recorre el grafo. Es lo que termina de contar que esto no es un menú:
   un menú no tiene nada que registrar.
   ⚠ ALTURA FIJA EN `em` Y NO `auto`. Con alto automático, cada línea
   nueva empuja la placa hacia arriba y los cables —que se midieron con la
   caja de antes— dejan de llegar a los pines. Tres renglones caben
   siempre y no mueven nada. */
#iaPanel .ip-log{
  flex:none; margin:0; padding:clamp(6px,.8vh,9px) clamp(12px,1.2vw,18px);
  list-style:none; height:calc(3 * 1.65em + 1.6vh);
  overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end;
  font:400 10px/1.65 var(--mono); color:var(--hueso-3);
}
#iaPanel .ip-log li{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#iaPanel .ip-log li b{color:var(--red); font-weight:600}
#iaPanel .ip-log li em{color:rgba(242,242,240,.72); font-style:normal}
#iaPanel .ip-log li:last-child{color:rgba(242,242,240,.86)}

/* ── LA FICHA, AHORA AL LADO ───────────────────────────────────────────
   El inspector del editor. Sólo cambia de sitio: el contenido, el
   desplazamiento y el `role="tabpanel"` son los de siempre. */
#iaPanel .ip-cuerpo{overflow:auto}

/* ── ESTRECHO · la placa no cabe y no se finge que sí ───────────────────
   Por debajo del umbral el tablero vuelve a ser lo que era: rejilla
   arriba, ficha debajo. Cinco columnas de nodos en 900 px son nodos de
   60 px con cables de dos píxeles, o sea un dibujo ilegible que además
   tapa la sala. Y a esa anchura la placa no aporta: lo que se lee es la
   ficha.

   ⚠ EL UMBRAL SUBIÓ DE 1.100 A 1.280 AL ESTRECHAR EL TABLERO · 03/09,
   segunda pasada, y no es un número de gusto: se despeja. La columna del
   lienzo mide `(ancho − inspector − 2·relleno) / 5`, y con el tablero al
   67 % de la ventana eso da 83 px en 1.101 contra los 84 que mide el
   nodo motor en su mínimo. O sea que entre 1.101 y 1.269 los nodos se
   salían de su columna y se pisaban unos a otros. Barrido píxel a píxel
   de 1.101 a 3.440: con el umbral en 1.280 no queda ni un ancho donde un
   nodo no quepa. Si algún día se estrecha más el tablero, este número
   sube con él.
   ⚠ TERCERA PASADA: el canto se fue a 40vw y el umbral subió a 1.340. Con
   los tamaños de nodo de la segunda pasada habría tenido que subir a
   1.646 —o sea, fuera del tablero todos los portátiles de 1.440—, y por
   eso lo que se tocó fueron los mínimos del nodo y no este número.
   Barrido de 1.340 a 3.440: ni un ancho donde un nodo se salga. */
@media (max-width:1339px){
  #casa.con-ia #iaPanel{
    left:clamp(14px,2.6vw,28px); right:auto;
    top:calc(var(--head-h) + 54px); bottom:clamp(20px,3.6vh,42px);
    width:min(38vw,470px);
  }
  #iaPanel .ip-in{display:flex; flex-direction:column}
  #iaPanel .ip-lienzo{flex:none; min-height:0}
  #iaPanel .ip-placa, #iaPanel .ip-cables, #iaPanel .ip-testigo{display:none}
  #iaPanel .ip-rejilla{
    position:static; display:grid;
    grid-template-columns:repeat(4,1fr); grid-template-rows:none;
    gap:1px; padding:1px; background:rgba(242,242,240,.10);
  }
  #iaPanel .ip-tec{
    grid-column:auto; grid-row:auto; width:auto;
    border:0; background:rgba(11,11,13,.72);
  }
  #iaPanel .ip-tec[data-tipo="motor"]{width:auto; padding-block:clamp(8px,1.2vh,11px)}
  #iaPanel .ip-tec[data-tipo="motor"] svg{width:20px; height:20px}
  #iaPanel .ip-pin{display:none}
  #iaPanel .ip-regleta{flex-wrap:wrap; row-gap:6px}
  #iaPanel .ip-log{display:none}
  #iaPanel .ip-cuerpo{border-left:0; border-top:1px solid rgba(242,242,240,.10)}
}

/* ── MOVIMIENTO REDUCIDO ───────────────────────────────────────────────
   Se para todo lo que se mueve solo: la corriente de los cables, el
   latido del testigo y el recorrido del grafo —eso último lo apaga el
   propio JS, que pregunta lo mismo—. Lo que NO se toca es el estado: los
   cables se quedan dibujados y los nodos en su sitio. Apagar con
   `animation:none` sin más dejaría los cables de flujo con su guion
   congelado a mitad de camino, que se ve como suciedad del trazo. */
@media (prefers-reduced-motion:reduce){
  #casa.con-ia #iaPanel .ip-cables .ip-flujo path{animation:none}
  #iaPanel .ip-cables .ip-flujo{display:none}
  #iaPanel .ip-testigo i{animation:none}
  #iaPanel .ip-tec{transition:none}
}

/* ══════════════════════════════════════════════════════════════════════
   EL COLOR DE LA SEÑAL · 03/09/2026, segunda pasada
   ----------------------------------------------------------------------
   Bratney: «quizá pondría más colores, como el azul de n8n, y alguna
   referencia a él o a Arduino también».

   ⚠ DOS COLORES NUEVOS, Y NINGUNO ENTRA EN LA PALETA DE LA CASA. La
   paleta está sellada en seis —forja, hueso, rojo, gris, grafito, oro— y
   esto no la toca: son colores PRESTADOS, exactamente igual que el azul
   de Google o el rosa de TikTok en los cuatro cables de la parada 06. Se
   usan como marca de otro, no como color de AIMA, y por eso viven en dos
   variables con su nombre encima y no sueltos por las reglas.

   ⚠ Y EL REPARTO NO ES DECORATIVO, ES SEMÁNTICO. En este tablero hay dos
   cosas distintas y ahora tienen dos colores distintos:
   · ROJO = tú. Lo que has abierto, lo que has elegido, el nodo motor.
     Es el color de la casa y sigue siendo el de la identidad.
   · AZUL = la máquina. El dato que corre por los cables, el piloto del
     nodo por el que va pasando el testigo, el reloj del registro.
   Antes las dos cosas iban en rojo y por eso el tablero se leía plano:
   no había forma de distinguir «esto lo has abierto tú» de «por aquí está
   pasando algo ahora mismo».
   ══════════════════════════════════════════════════════════════════════ */
#iaPanel{
  /* el azul de señal de un editor de nodos · lo que corre por el cable */
  --senal:#3B82F6;
  /* y el verde azulado de una placa Arduino · SÓLO en la serigrafía y en
     el tinte de las pistas, que es donde está en una placa de verdad. No
     pinta ni un texto de contenido: la ley del verde de esta casa dice
     que no hay verde, y esto no es un color de AIMA, es el de la placa
     que el tablero está imitando. */
  --placa:#00979D;
}

/* la placa coge el tinte de una de verdad: los taladros siguen en hueso
   —son agujeros, no cobre— y las pistas se van al verde azulado */
#iaPanel .ip-placa{
  background-image:
    radial-gradient(rgba(242,242,240,.13) 1px, transparent 1.1px),
    linear-gradient(rgba(0,151,157,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,151,157,.10) 1px, transparent 1px);
}
/* ── LA SERIGRAFÍA ─────────────────────────────────────────────────────
   La referencia que pedía Bratney, y puesta donde va en el objeto que se
   está imitando: el texto blanco impreso en el canto de una placa, con su
   nombre y su revisión. Va en `content` porque es decoración pura — el
   contenido de esta sala son las doce fichas, y meter esto en el HTML
   sería darle a un rastreador una línea que no dice nada de AIMA. */
#iaPanel .ip-placa::after{
  content:"AIMA · TABLERO REV.1 — GRAFO ESTILO n8n · PLACA ESTILO ARDUINO";
  position:absolute; right:12px; bottom:9px;
  font:600 8px var(--mono); letter-spacing:.16em;
  color:rgba(0,151,157,.5);
  pointer-events:none;
}

/* ── LA CORRIENTE, AHORA AZUL ──────────────────────────────────────────
   Es el cambio que más se nota: catorce cables grises con un punto azul
   viajando por dentro. El cable sigue apagado y el DATO es lo que brilla,
   que es exactamente lo que se ve en un editor de flujos cuando ejecutas. */
#iaPanel .ip-cables .ip-flujo path{
  stroke:var(--senal); stroke-width:1.6;
  stroke-dasharray:.035 .965;
}
/* y el cable del nodo abierto se queda ROJO: eso eres tú, no la máquina */
#iaPanel .ip-cables path.viva{stroke:rgba(193,39,45,.85)}

/* ── EL NODO POR EL QUE VA PASANDO ─────────────────────────────────────
   El piloto y el filo pasan a azul. Un nodo abierto (rojo) y un nodo por
   el que corre el testigo (azul) pueden ser el mismo, y ahora se ve: filo
   rojo del seleccionado y piloto azul encendido a la vez. */
#iaPanel .ip-tec.corriendo .ip-led{
  background:var(--senal); box-shadow:0 0 0 3px rgba(59,130,246,.24);
}
#iaPanel .ip-tec.corriendo{
  border-color:rgba(59,130,246,.7);
  background:rgba(59,130,246,.10);
}
/* el seleccionado gana al que corre en el borde: si estás mirando una
   ficha, el filo tiene que decir cuál estás mirando */
#iaPanel .ip-tec[aria-selected="true"].corriendo{
  border-color:var(--red); background:rgba(193,39,45,.16);
}
#iaPanel .ip-tec.corriendo .ip-pin{background:var(--senal); border-color:var(--senal)}

#iaPanel .ip-testigo i{background:var(--senal)}
#iaPanel .ip-testigo{border-color:rgba(59,130,246,.3)}

/* ── EL REGISTRO ───────────────────────────────────────────────────────
   El nombre del nodo pasa a azul: en un log, lo que va en color es la
   etiqueta de quién habla, y quien habla aquí es la máquina. El rojo se
   reserva para la línea del nodo que además tienes abierto. */
#iaPanel .ip-log li b{color:var(--senal)}