/* ============================================================================
   NEXUS · panel principal — telemetría del sistema y observación de agentes
   Estilos nuevos en el lenguaje del panel. Se cargan DESPUÉS de
   nexus-cybercore.css, así que aquí manda lo de aquí.
   Nada de colores fijos salvo los avisos: el resto hereda del tema activo.
   ========================================================================== */

main{display:grid;gap:14px}

/* ---------------------------------------------------- telemetría (tarjetas) */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:12px}
.metric{position:relative;padding:12px 14px 10px;border-radius:6px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
  background:color-mix(in srgb,var(--accent) 4%,transparent)}
.metric::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0,color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%)}
.metric .k{font-size:.6rem;letter-spacing:1.7px;text-transform:uppercase;color:var(--muted)}
.metric .v{font-size:1.5rem;font-weight:700;line-height:1.15;margin:.18rem 0 .06rem;
  color:var(--accent);font-variant-numeric:tabular-nums}
.metric .v small{font-size:.6rem;font-weight:400;color:var(--muted);letter-spacing:1px;margin-left:.35em}
.metric .sub{font-size:.67rem;letter-spacing:.4px;color:var(--muted);min-height:1em}
.metric .meter{height:4px;border-radius:3px;margin-top:8px;overflow:hidden;
  background:color-mix(in srgb,var(--accent) 13%,transparent)}
.metric .meter i{display:block;height:100%;width:0;background:var(--accent);
  box-shadow:0 0 9px var(--accent);transition:width .45s ease}
.metric .spark{display:block;width:100%;height:30px;margin-top:5px;opacity:.92}
.metric.hot .v{color:#ffb26b}
.metric.hot .meter i{background:#ffb26b;box-shadow:0 0 9px #ffb26b}
.metric.cold .v{color:var(--muted)}
.chart-wrap{position:relative;height:190px;margin-top:12px}
.chart-wrap canvas{width:100%!important;height:100%!important}
.legend-inline{display:flex;gap:14px;flex-wrap:wrap;font-size:.66rem;color:var(--muted);letter-spacing:1px;margin-top:6px}
.legend-inline i{display:inline-block;width:11px;height:2px;vertical-align:middle;margin-right:5px}


/* ------------------------------------------------------------- aprendizaje */
.ap-lista{display:grid;gap:10px}
.ap-ficha{border-left:2px solid color-mix(in srgb,var(--accent) 40%,transparent);padding:2px 0 2px 10px}
.ap-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ap-nombre{font-size:.78rem;letter-spacing:1px}
.ap-modelo{font-size:.68rem;color:var(--muted);letter-spacing:.5px;margin-top:2px}
.ap-que{font-size:.72rem;color:var(--text);opacity:.85;margin-top:3px;line-height:1.5}
.ap-props{font-size:.66rem;color:var(--muted);letter-spacing:.8px;margin-top:3px}
.ap-barras{display:grid;gap:3px;margin-top:6px}
.ap-b-l{display:grid;grid-template-columns:150px 1fr 62px;align-items:center;gap:8px;font-size:.68rem}
.ap-b-n{color:var(--muted);letter-spacing:.5px}
.ap-b{display:block;height:7px;border-radius:4px;background:color-mix(in srgb,var(--accent) 10%,transparent);overflow:hidden}
.ap-b i{display:block;height:100%;border-radius:4px;background:var(--accent)}
.ap-b i.alto{background:var(--accent2)}
.ap-b i.medio{background:#ffb26b}
.ap-b i.bajo{background:#ff8b6b}
.ap-b i.sin{background:color-mix(in srgb,var(--muted) 40%,transparent)}
.ap-b-v{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:620px){.ap-b-l{grid-template-columns:110px 1fr 54px}}

/* ------------------------------------------------- cerebro male-cns (3D) */
.brain-lienzo{position:relative;width:100%;height:clamp(320px,44vh,560px);min-height:260px;
  overflow:hidden;border-radius:4px}
.brain-lienzo #brainCanvas{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:900px){.brain-lienzo{height:clamp(270px,40vh,430px)}}
.brain-pie{display:grid;gap:4px;font-size:.68rem;color:var(--muted);letter-spacing:.6px}
.brain-pie .legend{display:flex;gap:12px;flex-wrap:wrap}
.brain-pie .legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:middle}
.brain-pie b{color:var(--accent)}
.panel-actions .btn.act{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}

/* ---------------------------------------------------------- barra superior */
.badge{font-size:.64rem;letter-spacing:1px;padding:2px 7px;border-radius:3px;color:var(--muted);
  border:1px solid color-mix(in srgb,var(--muted) 40%,transparent)}
.badge.nominal{color:var(--accent2);border-color:color-mix(in srgb,var(--accent2) 45%,transparent)}
.badge.active{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.badge.wait{color:#ffb26b;border-color:color-mix(in srgb,#ffb26b 45%,transparent)}
.badge.bad{color:#ff6b6b;border-color:color-mix(in srgb,#ff6b6b 45%,transparent)}
.panel-title{font-size:.72rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--text);opacity:.9}
.panel-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--muted)}
.dot.on{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.dot.idle{background:color-mix(in srgb,var(--muted) 70%,transparent)}
.btn{cursor:pointer;font:inherit;font-size:.68rem;letter-spacing:.8px;padding:3px 8px;border-radius:3px;
  color:var(--muted);background:transparent;border:1px solid color-mix(in srgb,var(--muted) 35%,transparent)}
.btn:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.btn.sm{font-size:.64rem;padding:2px 6px}
.src-line{font-size:.68rem;color:var(--muted);line-height:1.7;margin:0 0 10px}
.src-line a{color:var(--accent);text-decoration:none;border-bottom:1px dotted color-mix(in srgb,var(--accent) 55%,transparent)}
.src-line b{color:var(--text);opacity:.85}


/* ------------------------------------------------- cuenta simulada (dinero) */
.money{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:12px}
.money .box{position:relative;border-radius:6px;padding:11px 13px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
  background:color-mix(in srgb,var(--accent) 4%,transparent)}
.money .box .k{font-size:.6rem;letter-spacing:1.7px;text-transform:uppercase;color:var(--muted)}
.money .box .v{font-size:1.5rem;font-weight:700;line-height:1.15;margin:.15rem 0 .1rem;
  color:var(--accent);font-variant-numeric:tabular-nums}
.money .box .s{font-size:.66rem;color:var(--muted);letter-spacing:.4px}
.money .box.pos .v{color:var(--accent2)}
.money .box.neg .v{color:#ff6b6b}
.money .box.pos{border-color:color-mix(in srgb,var(--accent2) 32%,transparent)}
.money .box.neg{border-color:color-mix(in srgb,#ff6b6b 32%,transparent)}
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:5px 16px;
  font-size:.69rem;color:var(--muted);letter-spacing:.4px;margin-top:12px}
.datos b{color:var(--text);opacity:.92;font-variant-numeric:tabular-nums}
.eq-curve{display:block;width:100%;height:76px;margin-top:12px}
.op-abierta{display:grid;grid-template-columns:104px 1fr;gap:6px 12px;font-size:.7rem;color:var(--muted);
  padding:7px 0;border-bottom:1px solid color-mix(in srgb,var(--accent) 10%,transparent);letter-spacing:.4px}
.op-abierta b{color:var(--text);opacity:.92;font-variant-numeric:tabular-nums}
.op-abierta .p{color:var(--accent2)}
.op-abierta .n{color:#ff6b6b}
@media(max-width:640px){.op-abierta{grid-template-columns:1fr}.money{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}


/* ==================== telemetría: estados y histórico 3D (2026-09-24) ==================== */
.metric .m-head{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.est{font-size:.58rem;letter-spacing:1.3px;text-transform:uppercase;padding:1px 6px;border-radius:2px;
  border:1px solid color-mix(in srgb,var(--muted) 40%,transparent);color:var(--muted);white-space:nowrap}
.est.e0{color:#2fe07a;border-color:color-mix(in srgb,#2fe07a 45%,transparent)}
.est.e1{color:#ffb648;border-color:color-mix(in srgb,#ffb648 55%,transparent);background:color-mix(in srgb,#ffb648 9%,transparent)}
.est.e2{color:#ff4d5e;border-color:color-mix(in srgb,#ff4d5e 60%,transparent);background:color-mix(in srgb,#ff4d5e 14%,transparent);
  animation:estPulso 1.3s infinite ease-in-out}
@keyframes estPulso{0%,100%{opacity:1}50%{opacity:.42}}
.metric.e0::before{background:#2fe07a;box-shadow:0 0 10px #2fe07a}
.metric.e1::before{background:#ffb648;box-shadow:0 0 10px #ffb648}
.metric.e2::before{background:#ff4d5e;box-shadow:0 0 14px #ff4d5e}
.metric.e1 .v{color:#ffd79a}
.metric.e2 .v{color:#ffb3ba}
.metric.e1 .meter i{background:#ffb648;box-shadow:0 0 9px #ffb648}
.metric.e2 .meter i{background:#ff4d5e;box-shadow:0 0 9px #ff4d5e}
.metric.e1{border-color:color-mix(in srgb,#ffb648 30%,transparent)}
.metric.e2{border-color:color-mix(in srgb,#ff4d5e 38%,transparent);background:color-mix(in srgb,#ff4d5e 5%,transparent)}

.t3d{margin-top:13px}
.t3d-cab{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.t3d-cab .panel-actions{margin-left:auto;display:flex;gap:5px;flex-wrap:wrap}
.t3d-lienzo{position:relative;width:100%;height:clamp(300px,42vh,470px);min-height:250px;border-radius:6px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  background:radial-gradient(120% 120% at 50% 0,color-mix(in srgb,var(--accent) 6%,transparent),transparent 70%)}
#t3dCanvas{position:absolute;inset:0}
#t3dCanvas canvas{display:block}
.t3d-ejes{position:absolute;left:0;right:0;bottom:0;padding:14px 11px 8px;display:flex;gap:13px;flex-wrap:wrap;align-items:center;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.34) 55%,transparent);
  font-size:.61rem;color:var(--muted);letter-spacing:.5px;pointer-events:none}
.t3d-ejes i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:middle}
.t3d-ejes b{color:var(--text);opacity:.85}
.t3d-ejes .der{margin-left:auto;opacity:.8}
.t3d-g2{position:absolute;inset:0;width:100%;height:100%;display:block}
.t3d-etq3d{position:absolute;inset:0;pointer-events:none;z-index:2}
.t3d-etq3d .e3{position:absolute;left:0;top:0;white-space:nowrap;font:600 11px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--muted);transform:translate(-50%,-50%);text-shadow:0 1px 3px rgba(0,0,0,.95);letter-spacing:.3px}
.t3d-etq3d .e3.iz{transform:translate(-100%,-50%)}
.t3d-etq3d .e3.der,.t3d-etq3d .e3.der2{transform:translate(0,-50%)}
.t3d-etq3d .e3.der{color:var(--accent)}
@media(max-width:700px){.t3d-etq3d .e3{font-size:10px}}
.t3d-mini{display:block;width:100%;height:54px;margin-top:9px;cursor:ew-resize;border-radius:4px;
  border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);background:color-mix(in srgb,var(--accent) 3%,transparent)}
.t3d .legend-inline{justify-content:space-between}
.t3d .legend-inline .der{opacity:.75}
@media(max-width:700px){.t3d-ejes .der{display:none}}

/* ==================== descarga del programa (arriba a la derecha) ====================
   Los dos paquetes de EUPHORIA: el enlace es fijo (siempre la compilación corriente) y la
   versión y el peso se leen en vivo. Estética NEXUS: borde fino, mono y neón del tema. */
.descargas{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.dl2-btn{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 10px 0 5px;border-radius:4px;
  text-decoration:none;color:var(--text);position:relative;transition:.16s;
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  background:color-mix(in srgb,var(--accent) 5%,transparent)}
.dl2-btn:hover{transform:translateY(-1px);box-shadow:var(--glow);
  border-color:color-mix(in srgb,var(--accent) 60%,transparent)}
.dl2-btn:active{transform:translateY(0)}
.dl2-logo{display:grid;place-items:center;width:24px;height:24px;border-radius:5px;flex:none}
.dl2-txt{display:flex;flex-direction:column;gap:2px;line-height:1}
.dl2-os{font-family:var(--mono);font-size:8.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.dl2-beta{font-style:normal;font-size:7.5px;letter-spacing:.1em;padding:0 3px;border-radius:2px;
  color:var(--bg);background:var(--accent2);font-weight:700}
.dl2-acc{display:inline-flex;align-items:center;gap:4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.6px}
.dl2-peso{font-family:var(--mono);font-size:8.5px;color:var(--muted);letter-spacing:.3px;min-width:0}
.dl2-svg{flex:none;transition:transform .18s}
.dl2-btn:hover .dl2-svg{transform:translateY(2px)}
.dl2-win .dl2-logo{color:#05200f;background:linear-gradient(140deg,#6bffab,#12b76a)}
.dl2-win .dl2-acc{color:var(--accent2)}
.dl2-win:hover{border-color:color-mix(in srgb,var(--accent2) 55%,transparent)}
.dl2-mac .dl2-logo{color:#f3f5f8;background:linear-gradient(140deg,#565d66,#1d2126)}
.dl2-mac .dl2-acc{color:var(--text)}

/* ==================== el guiño al proyecto MARIO (cabecera, discreto) ====================
   Va junto al título, en pequeño y apagado: quien reconoce el icono sabe dónde entrar; quien no,
   ni se fija. Se enciende al pasar el ratón. */
.mario-link{display:inline-flex;align-items:center;gap:5px;margin-left:3px;padding:2px 6px;border-radius:4px;
  text-decoration:none;opacity:.42;transition:.18s;vertical-align:middle;border:1px solid transparent}
.mario-link:hover{opacity:1;border-color:color-mix(in srgb,var(--accent) 34%,transparent);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
.mario-ico-host{display:inline-flex;line-height:0}
.mario-ico{display:block;image-rendering:pixelated}
.mario-txt{font-family:var(--mono);font-size:.55rem;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--muted);white-space:nowrap}
.mario-link:hover .mario-txt{color:var(--accent)}
@media(max-width:1100px){.mario-txt{display:none}}

/* ==================== entrar al sistema EUPHORIA (a la izquierda de la descarga) ====================
   Mismo cuerpo que los botones de descarga, pero con el acento del tema y un brillo suave: es la
   acción destacada de la barra (entrar al laboratorio), así que se lleva la vista sin gritar. */
/* los tres botones de la barra, con el MISMO ancho y el mismo reparto por dentro: así las etiquetas y
   las acciones caen todas en la misma columna y la fila se ve cuadrada */
#dl-host > .dl2-btn{min-width:150px;justify-content:flex-start}
#dl-host > .dl2-btn .dl2-txt{flex:1;min-width:0}
#dl-host > .dl2-btn .dl2-acc{justify-content:space-between;width:100%}
.dl2-eu .dl2-logo{color:var(--bg);background:linear-gradient(140deg,var(--accent2),var(--accent))}
.dl2-eu .dl2-acc{color:var(--accent);font-weight:600}
.dl2-eu{border-color:color-mix(in srgb,var(--accent) 46%,transparent);
  background:color-mix(in srgb,var(--accent) 9%,transparent)}
.dl2-eu:hover{border-color:color-mix(in srgb,var(--accent) 82%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 26%,transparent),var(--glow)}
.dl2-vivo{font-style:normal;font-size:7.5px;letter-spacing:.1em;padding:1px 4px;border-radius:2px;
  margin-left:2px;color:var(--accent);background:color-mix(in srgb,var(--accent) 16%,transparent);font-weight:700}
.dl2-eu:hover .dl2-svg{transform:translateX(2px)}   /* la flecha apunta hacia dentro al pasar el ratón */

/* la ficha al pasar el ratón: versión y peso reales, leídos del propio paquete */
.dl-ficha{position:fixed;z-index:60;pointer-events:none;opacity:0;transform:translateY(-4px);transition:.16s;
  min-width:212px;max-width:290px;padding:9px 11px;border-radius:5px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(6px);
  box-shadow:0 10px 26px rgba(0,0,0,.55)}
.dl-ficha.on{opacity:1;transform:none}
.dl-f-t{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.dl-f-tag{font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--bg);background:var(--accent);padding:1px 5px;border-radius:2px;font-weight:700}
.dl-f-ver{font-family:var(--mono);font-size:10px;color:var(--accent);letter-spacing:.3px}
.dl-f-b{font-size:.7rem;color:var(--text);opacity:.88;line-height:1.5}
.dl-f-b b{color:var(--accent2)}
@media(max-width:980px){.descargas{order:4;width:100%;justify-content:flex-end}}
@media(max-width:520px){.dl2-peso{display:none}}
/* ==================== LOS TRES BOTONES EN PANTALLAS ESTRECHAS ====================
   En el móvil el ancho mínimo de 150 px los descuadraba (uno en una columna y dos en otra, o los tres
   pegados a la derecha). Por debajo de 700 px se ponen en UNA COLUMNA, a todo el ancho disponible,
   uno debajo de otro: se leen bien, se pulsan bien y nada se sale de la pantalla. */
@media(max-width:980px){
  #dl-host{display:flex;width:100%;gap:7px;justify-content:stretch !important}
  #dl-host > .dl2-btn{flex:1 1 auto;min-width:0}
}
@media(max-width:700px){
  .descargas{width:100%;margin-left:0 !important;order:4}
  #dl-host{display:grid;grid-template-columns:1fr;gap:7px;width:100%}
  #dl-host > .dl2-btn{width:100%;min-width:0;height:38px;padding:0 12px 0 7px}
  #dl-host > .dl2-btn .dl2-logo{width:26px;height:26px}
  #dl-host > .dl2-btn .dl2-os{font-size:9px}
  #dl-host > .dl2-btn .dl2-acc{font-size:11px}
  /* el icono y el texto, alineados a la izquierda, y la acción y su flecha a la derecha */
  #dl-host > .dl2-btn .dl2-txt{width:100%}
  .dl2-eu .dl2-acc, .dl2-win .dl2-acc, .dl2-mac .dl2-acc{justify-content:space-between}
}
@media(max-width:400px){
  #dl-host > .dl2-btn{height:36px}
  #dl-host > .dl2-btn .dl2-acc{font-size:10.5px;letter-spacing:.4px}
}


/* la descarga ocupa el borde derecho de la barra y los temas quedan justo a su izquierda */
.descargas{order:4}
/* cuando la barra tiene que partirse (por debajo de 1360) la descarga baja a su fila, pegada a la derecha */
@media(max-width:1360px){.descargas{margin-left:auto}}
.themes{order:3}
/* en pantallas justas se recortan uptime y lectura (siguen en la tarjeta del nodo) antes que partir la barra,
   y por debajo de 1360 se quita la palabra «descargar»: el logo, la flecha y la etiqueta beta ya lo dicen */
@media(max-width:1500px){.topbar .tb-op{display:none}}
@media(max-width:1360px){.dl2-acc-t{display:none}}
/* y un poco menos de aire entre bloques y en los chips: así la barra sigue en UNA sola fila a 1280 */
@media(max-width:1360px){.topbar{gap:.45rem .8rem}}
@media(max-width:1360px){.theme{padding:.28rem .42rem;letter-spacing:1.1px}}
@media(max-width:900px){.dl2-peso{display:none}}

/* ==================== estilos del gráfico de la telemetría ==================== */
.t3d-estilos{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:.45rem 0 .15rem}
.t3d-estilos .etq{font-family:var(--mono);font-size:.62rem;letter-spacing:1.6px;text-transform:uppercase;color:var(--muted)}
.t3d-estilos .der{font-size:.64rem;color:var(--muted);margin-left:auto;text-align:right}
@media(max-width:760px){.t3d-estilos .der{margin-left:0}}