/* ============================================================================
   EUPHORIA · css/euphoria.css
   Solo lo propio del EA. Lo demás (tokens, PanelFrame, MetricCard, DataGrid,
   insignias, rejilla) viene de los tokens de NEMESIS, ya integrados en /euphoria/css/.
   Acento de EUPHORIA: violeta eléctrico (#a86bff) sobre negro violáceo.
   ========================================================================== */
:root{
  --nt-canvas:#07040d;
  --nt-canvas-2:#0b0714;
  --eu-violet:#a86bff;                /* acento de EUPHORIA */
  --eu-glow:rgba(168,107,255,.16);
  --eu-green:#4dffb8;
  --eu-amber:#ffc247;
  --eu-red:#ff5470;
}

body{background:#07040d}
body::before{opacity:.42}


/* ============================================================================
   TEMAS PROPIOS DE EUPHORIA · misma mecánica que los de NEMESIS: cada tema solo
   declara su paleta --th-* y el resto de tokens se derivan igual (themes.css).
   Tres más, elegidos para casar con el proyecto: violeta eléctrico, verde
   fósforo de laboratorio y cian profundo con ámbar.
   ========================================================================== */
body[data-theme="euphoria"]{        /* eld del proyecto: violeta eléctrico + verde */
  --th-bg:#07040d; --th-bg2:#0d0718; --th-text:#efe6ff; --th-muted:#8b7aa8;
  --th-accent:#a86bff; --th-accent2:#efe6ff; --th-green:#4dffb8; --th-amber:#ffc247;
  --th-red:#ff5470; --th-violet:#a86bff;
}
body[data-theme="phosphor"]{        /* laboratorio: fósforo verde y ámbar */
  --th-bg:#04120a; --th-bg2:#071a0f; --th-text:#e6ffe9; --th-muted:#5f8f6a;
  --th-accent:#5cff9d; --th-accent2:#c8ffdc; --th-green:#5cff9d; --th-amber:#ffd166;
  --th-red:#ff6b6b; --th-violet:#9df0c0;
}
body[data-theme="abyss"]{           /* cian profundo con ámbar: contraste alto */
  --th-bg:#03080f; --th-bg2:#061120; --th-text:#dff2ff; --th-muted:#66879c;
  --th-accent:#22d3ee; --th-accent2:#bfefff; --th-green:#34d399; --th-amber:#fbbf24;
  --th-red:#fb7185; --th-violet:#7dd3fc;
}

/* el título de la página: sustituye a la cabecera y a la banda informativa ----- */
.eu-titulo{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  padding:10px 2px 2px;border-bottom:1px solid var(--nt-border-subtle);flex-wrap:wrap}
.eu-titulo-l{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.eu-titulo{align-items:center}
.eu-titulo-l{min-width:0}
.eu-titulo h1{font-family:'Orbitron',system-ui,sans-serif;font-size:clamp(22px,2.4vw,32px);
  letter-spacing:.16em;margin:0;font-weight:700;color:var(--nt-text-primary)}
/* --- el logotipo: neón futurista, en la línea del panel (cian + violeta) --- */
.eu-logo{position:relative;font-weight:800;letter-spacing:.20em;
  background:linear-gradient(100deg,var(--nt-cyan) 0%,#8be9ff 38%,var(--nt-text-primary) 70%,var(--nt-violet) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--nt-cyan) 45%,transparent))
         drop-shadow(0 0 26px color-mix(in srgb,var(--nt-violet) 30%,transparent))}
/* el reflejo tenue debajo, como un tubo de neón sobre superficie oscura */
.eu-logo::after{content:attr(data-txt);position:absolute;left:0;top:100%;width:100%;
  font:inherit;letter-spacing:inherit;font-weight:800;
  background:inherit;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  transform:scaleY(-.55);opacity:.16;filter:blur(1.5px);pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 70%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 70%)}
/* un pulso lento de neón, muy sutil, para que respire */
@keyframes euNeon{0%,100%{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--nt-cyan) 45%,transparent))
  drop-shadow(0 0 26px color-mix(in srgb,var(--nt-violet) 30%,transparent))}
  50%{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--nt-cyan) 62%,transparent))
  drop-shadow(0 0 34px color-mix(in srgb,var(--nt-violet) 44%,transparent))}}
.eu-logo{animation:euNeon 5.5s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.eu-logo{animation:none}}
.eu-sub{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--nt-text-muted)}
.eu-titulo-r{display:flex;gap:6px;align-items:center}

/* --- banda del EA: separación inequívoca de la cuenta real ------------------ */
.eu-band{position:sticky;top:6px;z-index:30;border-left:3px solid var(--eu-violet);
  background:linear-gradient(90deg,rgba(168,107,255,.12),rgba(7,4,13,.92) 70%);
  backdrop-filter:blur(6px);font-size:11px}
.eu-band .tag{border-color:var(--eu-violet);color:var(--eu-violet)}
.eu-band b{color:var(--eu-violet)}

/* --- cabecera --------------------------------------------------------------- */
.topbar.lab{background:linear-gradient(90deg,rgba(168,107,255,.10),transparent 42%),var(--nt-surface-1)}
.topbar.lab .brand b{color:var(--eu-violet);text-shadow:0 0 14px var(--eu-glow)}

/* --- tarjetas de métrica de la cuenta virtual ------------------------------- */
.metric-grid.fin{grid-template-columns:repeat(6,minmax(0,1fr))}
.metric.sim::before{background:var(--eu-violet)}
.metric .value.xl{font-size:clamp(17px,1.35vw,22px)}
.metric .delta{font-size:9.5px;color:var(--nt-text-muted)}

/* --- panel del repositorio -------------------------------------------------- */
.eu-repo{display:flex;flex-direction:column;gap:3px}
.eu-linea{display:grid;grid-template-columns:190px 1fr;gap:8px;font-size:10.5px;line-height:1.5}
.eu-k{color:var(--nt-text-muted);text-transform:uppercase;letter-spacing:.05em;font-size:9.5px}
.eu-v{color:var(--nt-text-primary)}
.eu-link{display:inline-block;margin-top:7px;font-size:10.5px;color:var(--eu-violet);
  text-decoration:none;border-bottom:1px dashed var(--eu-violet);width:max-content}
.eu-link:hover{color:#fff;border-color:#fff}
@media(max-width:640px){.eu-linea{grid-template-columns:1fr;gap:1px}}

/* --- semáforo y barra de mandos -------------------------------------------- */
.cmdbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.semaforo{width:11px;height:11px;border-radius:50%;background:var(--eu-red);
  box-shadow:0 0 8px currentColor;display:inline-block}
.semaforo.on{background:var(--eu-green)}

/* --- el tamaño de la cuenta de los cuatro, junto al botón reset -------------- */
.cmdbar .eu-saldo-reset{font-family:var(--nt-font-data);font-size:10.5px;color:var(--nt-text-primary);
  background:var(--nt-bg-deep,#05080c);border:1px solid var(--nt-line);border-radius:3px;
  padding:3px 6px;width:196px;max-width:46vw}
.cmdbar .eu-saldo-reset:focus{outline:none;border-color:var(--nt-cyan);box-shadow:0 0 10px var(--nt-glow-cyan)}
/* con un tamaño escrito, el campo se enciende: las cuatro NO van con el saldo real */
.cmdbar .eu-saldo-reset.a-mano{border-color:var(--eu-violet);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--eu-violet) 35%,transparent)}

/* --- tabla de ejecutores: lo virtual se distingue de lo real ----------------- */
.eu-virtual{color:var(--eu-violet);font-weight:600}
.eu-virtual::after{content:' ·';opacity:.5}

/* los botones .btn los hereda del diseño de NEMESIS (components.css) */

/* --- competición de los cuatro: podio y tabla ------------------------------- */
.eu-podio{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.eu-barra-l{display:grid;grid-template-columns:34px 118px 1fr auto;gap:8px;align-items:center;font-size:11px}
.eu-medalla{color:var(--nt-text-muted);font-size:10px;letter-spacing:.06em}
.eu-nombre{font-weight:600;letter-spacing:.03em}
.eu-barra{position:relative;height:9px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.eu-barra i{display:block;height:100%;border-radius:3px}
.eu-barra i.ok{background:linear-gradient(90deg,var(--nt-green-dim),var(--nt-green))}
.eu-barra i.mal{background:linear-gradient(90deg,var(--nt-red-dim),var(--nt-red))}
.eu-cifra{font-variant-numeric:tabular-nums}
.eu-tabla{margin-top:2px}
.eu-tr{display:grid;grid-template-columns:34px 1fr 74px 1.15fr 96px 62px 104px 78px;gap:8px;
  align-items:center;padding:3px 2px;border-bottom:1px solid rgba(255,255,255,.045);font-size:10.5px}
.eu-tr:last-child{border-bottom:0}
.eu-th{color:var(--nt-text-muted);text-transform:uppercase;font-size:9px;letter-spacing:.07em;border-bottom:1px solid rgba(255,255,255,.10)}
.eu-1{color:var(--nt-amber);font-weight:700}
.eu-tr .pos{color:var(--nt-green)}
.eu-tr .neg{color:var(--nt-red)}
@media(max-width:900px){.eu-tr{grid-template-columns:28px 1.2fr 1fr 74px 84px;font-size:10px}
  .eu-tr .eu-th{display:none}.eu-barra-l{grid-template-columns:28px 92px 1fr auto}}

/* --- casilla de neuronas (cabecera): sutil, viva, sin ruido -------------------- */
.eu-neu{display:inline-flex;align-items:center;gap:7px;padding:3px 9px;border-radius:4px;
  border:1px solid var(--nt-border-subtle);
  background:linear-gradient(90deg,color-mix(in srgb,var(--nt-violet) 12%,transparent),transparent 72%);
  font-variant-numeric:tabular-nums;line-height:1}
.eu-neu-k{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--nt-text-muted)}
.eu-neu-n{font-size:15px;font-weight:700;color:var(--nt-text-primary);
  text-shadow:0 0 10px color-mix(in srgb,var(--nt-violet) 60%,transparent)}
.eu-neu-t{font-size:9px;letter-spacing:.05em;color:var(--nt-text-dim)}
.eu-neu-latido{width:6px;height:6px;border-radius:50%;background:var(--nt-violet);
  box-shadow:0 0 0 0 color-mix(in srgb,var(--nt-violet) 70%,transparent);opacity:.45}
.eu-neu-latido.on{animation:euLatido .55s ease-out}
@keyframes euLatido{
  0%{opacity:1;transform:scale(1.35);box-shadow:0 0 0 0 color-mix(in srgb,var(--nt-violet) 75%,transparent)}
  100%{opacity:.45;transform:scale(1);box-shadow:0 0 0 9px transparent}
}
@media(max-width:700px){
  .eu-neu-t{display:none}
  /* el consenso sí enseña su porcentaje en el móvil: es el dato que se mira */
  .eu-cons .eu-neu-t{display:inline;font-size:8px;margin-left:4px;white-space:nowrap}
  /* tres casillas en una fila de móvil: se reparten el ancho en vez de desbordarse */
  .eu-neu-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 6px;width:100%}
  .eu-neu{padding:3px 7px;gap:6px}
  .eu-neu-n{font-size:13px}
}
@media(max-width:520px){
  /* las casillas se apilan por dentro (dato arriba, porcentaje abajo) y así las tres caben
     en la fila del móvil sin que nada se salga de la pantalla */
  .eu-neu{flex-wrap:wrap;justify-content:center;row-gap:1px}
  .eu-cons .eu-neu-t{flex-basis:100%;margin-left:0;text-align:center;font-size:8px}
  .eu-cons .eu-neu-vot{display:none}
  .eu-neu-k{font-size:8px;letter-spacing:.06em}
  .eu-neu-n{font-size:12px}
}
@media(max-width:520px){
  /* en un móvil estrecho se aprieta: etiquetas cortas, letra pequeña y casillas al ras,
     para que las TRES quepan en la fila sin desbordar nada */
  .eu-neu{padding:3px 5px;gap:4px}
  .eu-neu-k{font-size:8px;letter-spacing:.06em}
  .eu-neu-n{font-size:12px}
}

/* --- comparativa técnica del aprendizaje ------------------------------------ */
.ap-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(max-width:900px){.ap-lista{grid-template-columns:1fr}}
.ap-ficha{border:1px solid var(--nt-border-subtle);border-radius:4px;padding:8px 10px;
  background:color-mix(in srgb,var(--nt-surface-1) 80%,transparent)}
.ap-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.ap-nombre{font-size:12px;letter-spacing:.1em}
.ap-modelo{font-size:10px;color:var(--nt-text-secondary);margin-bottom:3px}
.ap-que{font-size:10px;color:var(--nt-text-muted);line-height:1.4;margin-bottom:4px;min-height:26px}
.ap-props{font-size:9.5px;color:var(--nt-text-dim);margin-bottom:6px}
.ap-barras{display:flex;flex-direction:column;gap:4px}
.ap-b-l{display:grid;grid-template-columns:132px 1fr 54px;gap:7px;align-items:center;font-size:9.5px}
.ap-b-n{color:var(--nt-text-muted);text-transform:uppercase;letter-spacing:.05em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-b{height:7px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden}
.ap-b i{display:block;height:100%;border-radius:3px;transition:width .5s ease}
.ap-b i.alto{background:linear-gradient(90deg,var(--nt-green-dim),var(--nt-green))}
.ap-b i.medio{background:linear-gradient(90deg,var(--nt-amber-dim),var(--nt-amber))}
.ap-b i.bajo{background:linear-gradient(90deg,var(--nt-red-dim),var(--nt-red))}
.ap-b i.sin{background:repeating-linear-gradient(45deg,rgba(255,255,255,.14) 0 3px,transparent 3px 6px)}
.ap-b-v{text-align:right;font-variant-numeric:tabular-nums;color:var(--nt-text-secondary)}

/* línea discreta del resumen (no una banda grande) */
.eu-band-min{font-size:10px;color:var(--nt-text-dim);padding:3px 0 5px}
.eu-band-min.real{color:var(--nt-red)}

/* quién abre la operación (columna «abre») */
.eu-quien{font-size:10px;letter-spacing:.06em;color:var(--nt-amber)}

/* detalle de lo aprendido por cada agente */
.ap-det{font-size:9.5px;color:var(--nt-green);margin-bottom:6px;line-height:1.35}

/* salidas: por qué cierra cada operador */
.lg-tema{font-size:10px;color:var(--nt-text-dim);margin-bottom:7px}
.lg-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
@media(max-width:900px){.lg-lista{grid-template-columns:1fr}}
.lg-ficha{border:1px solid var(--nt-border-subtle);border-radius:4px;padding:7px 9px;
  background:color-mix(in srgb,var(--nt-surface-1) 78%,transparent)}
.lg-cab{display:flex;align-items:baseline;gap:7px;margin-bottom:4px}
.lg-nombre{font-size:11.5px;letter-spacing:.09em}
.lg-modelo{font-size:9px;color:var(--nt-text-dim)}
.lg-linea{font-size:10px;color:var(--nt-text-secondary);margin-bottom:5px;line-height:1.35}
.lg-chips{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:5px}
.lg-chip{font-size:9px;padding:2px 6px;border-radius:3px;letter-spacing:.03em;
  border:1px solid color-mix(in srgb,var(--nt-red) 40%,transparent);
  background:color-mix(in srgb,var(--nt-red) 12%,transparent);color:var(--nt-text-primary)}
.lg-cfg{font-size:9px;color:var(--nt-text-dim);font-style:italic}

/* telemetría unificada del simulado: una sola tarjeta, tres cifras grandes */
.simpanel .mg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end}
@media(max-width:900px){.simpanel .mg{grid-template-columns:1fr 1fr}}
.simpanel .mc{border-left:2px solid var(--nt-border-subtle);padding-left:10px}
.simpanel .mc.pl{border-left-color:var(--nt-cyan)}
.simpanel .mc.fl{border-left-color:var(--nt-amber)}
.simpanel .mc.fl .mv{font-size:22px}
.simpanel .ml{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--nt-text-dim);margin-bottom:2px}
.simpanel .mv{font-family:var(--nt-mono,monospace);font-size:26px;line-height:1.05;color:var(--nt-text-primary);font-variant-numeric:tabular-nums}
.simpanel .mc.pl .mv{font-size:30px;font-weight:600}
.simpanel .mv.pos{color:var(--nt-green)}
.simpanel .mv.neg{color:var(--nt-red)}
.simpanel .md{font-size:10px;color:var(--nt-text-secondary);margin-top:7px}
.simpanel .md.dim{color:var(--nt-text-dim)}

/* diario de cierres con narrador y chistes */
.dia-lista{margin-top:9px;border-top:1px solid var(--nt-border-subtle);padding-top:7px;
  max-height:230px;overflow:auto}
.dia-fila{display:flex;gap:7px;padding:2px 0;font-size:10.5px;line-height:1.4}
.dia-cuando{flex:0 0 42px;color:var(--nt-text-dim);font-family:var(--nt-mono,monospace);font-size:9.5px;padding-top:1px}
.dia-texto{color:var(--nt-text-secondary)}
.dia-texto.chiste{color:var(--nt-amber);font-style:italic}

/* diario de cierres: hora · resultado · narración y, debajo, la gracia */
.dia-lista{margin-top:9px;border-top:1px solid var(--nt-border-subtle);padding-top:7px;max-height:250px;overflow:auto}
.dia-vacio{margin-top:9px;border-top:1px solid var(--nt-border-subtle);padding-top:8px;
  font-size:10px;color:var(--nt-text-dim);font-style:italic}
.dia-fila{display:grid;grid-template-columns:42px 74px 1fr;gap:7px;padding:5px 0;
  border-bottom:1px solid color-mix(in srgb,var(--nt-border-subtle) 55%,transparent)}
.dia-fila:last-child{border-bottom:0}
.dia-cuando{font-family:var(--nt-mono,monospace);font-size:9.5px;color:var(--nt-text-dim);padding-top:1px}
.dia-pl{font-family:var(--nt-mono,monospace);font-size:10px;text-align:right;font-variant-numeric:tabular-nums}
.dia-pl.pos{color:var(--nt-green)}
.dia-pl.neg{color:var(--nt-red)}
.dia-texto{font-size:10.5px;color:var(--nt-text-secondary);line-height:1.45}
.dia-gracia{grid-column:3;margin-top:3px;padding-left:8px;font-size:10px;
  border-left:2px solid color-mix(in srgb,var(--nt-amber) 55%,transparent);
  color:var(--nt-amber);font-style:italic}

/* registro final: eventos y chistes en un solo hilo */
.lg-filtros{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:7px}
.lg-filtros .chip{font-size:9px;padding:2px 7px;border-radius:3px;cursor:pointer;
  border:1px solid var(--nt-border-subtle);background:transparent;color:var(--nt-text-secondary)}
.lg-filtros .chip.off{opacity:.38;text-decoration:line-through}
.log-lista{max-height:290px;overflow:auto;border-top:1px solid var(--nt-border-subtle);padding-top:5px}
.log-vacio{font-size:10px;color:var(--nt-text-dim);font-style:italic;padding:6px 0}
.log-fila{display:grid;grid-template-columns:56px 60px 66px 1fr;gap:7px;padding:2px 0;
  font-size:10.5px;line-height:1.4;border-bottom:1px solid color-mix(in srgb,var(--nt-border-subtle) 40%,transparent)}
.log-hora{font-family:var(--nt-mono,monospace);font-size:9.5px;color:var(--nt-text-dim)}
.log-tipo{font-size:9px;letter-spacing:.05em;text-transform:uppercase;color:var(--nt-text-dim)}
.log-usc{font-family:var(--nt-mono,monospace);font-size:10px;text-align:right;font-variant-numeric:tabular-nums}
.log-usc.pos{color:var(--nt-green)}
.log-usc.neg{color:var(--nt-red)}
.log-texto{color:var(--nt-text-secondary)}
.log-fila.chiste{background:color-mix(in srgb,var(--nt-amber) 7%,transparent)}
.log-fila.chiste .log-texto{color:var(--nt-amber);font-style:italic}
.log-fila.chiste .log-tipo{color:var(--nt-amber)}
.log-fila.apertura .log-texto{color:var(--nt-text-primary)}
.log-fila.aviso .log-texto{color:var(--nt-amber)}

/* resumen: cinco cifras y diario en líneas limpias */
.rs-tira{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin-bottom:9px}
@media(max-width:900px){.rs-tira{grid-template-columns:repeat(3,1fr)}}
.rs-c{border-left:2px solid var(--nt-border-subtle);padding-left:9px}
.rs-k{font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--nt-text-dim);margin-bottom:2px}
.rs-v{font-family:var(--nt-mono,monospace);font-size:15px;color:var(--nt-text-primary);font-variant-numeric:tabular-nums}
.rs-v.pos{color:var(--nt-green)}
.rs-v.neg{color:var(--nt-red)}
.rs-sub{margin:9px 0 5px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--nt-text-dim);
  border-top:1px solid var(--nt-border-subtle);padding-top:7px}
.rs-diario{max-height:260px;overflow:auto}
.rs-vacio{font-size:10px;color:var(--nt-text-dim);font-style:italic;padding:4px 0}
.rs-item{padding:4px 0;border-bottom:1px solid color-mix(in srgb,var(--nt-border-subtle) 50%,transparent)}
.rs-item:last-child{border-bottom:0}
.rs-linea{display:grid;grid-template-columns:40px 84px 46px 68px 1fr;gap:6px;align-items:baseline;font-size:10.5px}
.rs-hora{font-family:var(--nt-mono,monospace);font-size:9.5px;color:var(--nt-text-dim)}
.rs-quien{font-size:9.5px;letter-spacing:.05em;color:var(--nt-text-primary)}
.rs-motiv{font-size:9px;letter-spacing:.04em;padding:1px 5px;border-radius:3px;text-align:center;
  border:1px solid var(--nt-border-subtle)}
.rs-motiv.m-sl{color:var(--nt-red);border-color:color-mix(in srgb,var(--nt-red) 45%,transparent);
  background:color-mix(in srgb,var(--nt-red) 10%,transparent)}
.rs-motiv.m-tp{color:var(--nt-green);border-color:color-mix(in srgb,var(--nt-green) 45%,transparent);
  background:color-mix(in srgb,var(--nt-green) 10%,transparent)}
.rs-motiv.m-trail{color:var(--nt-cyan);border-color:color-mix(in srgb,var(--nt-cyan) 45%,transparent)}
.rs-usc{font-family:var(--nt-mono,monospace);font-size:10px;text-align:right;font-variant-numeric:tabular-nums}
.rs-usc.pos{color:var(--nt-green)}
.rs-usc.neg{color:var(--nt-red)}
.rs-txt{color:var(--nt-text-secondary);line-height:1.4}
.rs-chiste{margin:2px 0 0 130px;font-size:10px;font-style:italic;color:var(--nt-amber);
  border-left:2px solid color-mix(in srgb,var(--nt-amber) 50%,transparent);padding-left:8px}

/* casilla de ciclos: mismo lenguaje que neuronas, en cian para distinguirla */
.eu-cic{background:linear-gradient(90deg,color-mix(in srgb,var(--nt-cyan) 12%,transparent),transparent 72%)}
.eu-cic .eu-neu-n{text-shadow:0 0 10px color-mix(in srgb,var(--nt-cyan) 60%,transparent)}
.eu-cic .eu-neu-latido{background:var(--nt-cyan);box-shadow:0 0 0 0 color-mix(in srgb,var(--nt-cyan) 70%,transparent)}
.eu-cic .eu-neu-latido.on{animation:euLatidoC .55s ease-out}

/* la casilla del día en la cuenta real, justo debajo de la de neuronas */
/* la cabecera en 2x2: neuronas + ciclos arriba, y debajo «pl cuenta real» + «pl mensual» */
.eu-neu-grid{display:grid;grid-template-columns:auto auto auto;gap:4px 10px;align-items:stretch;justify-items:stretch;max-width:100%;min-width:0}
/* cada casilla llena su columna: así neuronas queda del ancho de pl cuenta real y
   ciclos del de pl mensual, los cuatro cuadrados a juego y sin huecos */
.eu-neu-grid .eu-neu{width:100%;justify-content:space-between}
.eu-neu-grid .eu-neu .eu-neu-n{margin-left:auto;text-align:right}
.eu-neu-grid .eu-neu .eu-neu-t{margin-left:6px}
.eu-hoy{background:rgba(57,255,136,.06);border-color:color-mix(in srgb,var(--nt-green) 45%,transparent)}
.eu-hoy .eu-neu-n{color:var(--nt-green);text-shadow:0 0 10px color-mix(in srgb,var(--nt-green) 60%,transparent)}
.eu-hoy .eu-neu-latido{background:var(--nt-green);box-shadow:0 0 0 0 color-mix(in srgb,var(--nt-green) 70%,transparent)}
.eu-hoy.neg{background:rgba(255,59,92,.07);border-color:color-mix(in srgb,var(--nt-red) 45%,transparent)}
.eu-hoy.neg .eu-neu-n{color:var(--nt-red);text-shadow:0 0 10px color-mix(in srgb,var(--nt-red) 60%,transparent)}
.eu-hoy.neg .eu-neu-latido{background:var(--nt-red)}

/* --- casilla del consenso (cabecera): a dónde apuntan los cuatro, con su acuerdo ---
   verde cuando la mayoría vota compra, rojo cuando vota venta, ámbar cuando no hay
   mayoría. Mismo tamaño y mecánica que las otras dos: etiqueta, dirección y acuerdo. */
.eu-cons{background:linear-gradient(90deg,color-mix(in srgb,var(--nt-amber) 10%,transparent),transparent 72%);
  flex-wrap:wrap;row-gap:3px}
/* la flecha: la dirección del consenso sin escribirla (▲ compra, ▼ venta) */
.eu-cons-dir{font-size:14px;line-height:1;color:var(--nt-amber);transition:color .25s ease}
/* la barra de carga: el acuerdo entre los cuatro, de un vistazo */
.eu-cons-barra{flex-basis:100%;height:4px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden}
.eu-cons-barra i{display:block;height:100%;width:0;border-radius:3px;background:var(--nt-amber);
  transition:background .25s ease}
.eu-cons-pct{font-size:12px;font-weight:700;color:var(--nt-text-primary);font-variant-numeric:tabular-nums}
.eu-cons.compra{background:linear-gradient(90deg,rgba(57,255,136,.10),transparent 72%);
  border-color:color-mix(in srgb,var(--nt-green) 45%,transparent)}
.eu-cons.compra .eu-cons-dir{color:var(--nt-green);text-shadow:0 0 10px color-mix(in srgb,var(--nt-green) 60%,transparent)}
.eu-cons.compra .eu-cons-barra i{background:linear-gradient(90deg,color-mix(in srgb,var(--nt-green) 45%,transparent),var(--nt-green))}
.eu-cons.compra .eu-neu-latido{background:var(--nt-green);box-shadow:0 0 0 0 color-mix(in srgb,var(--nt-green) 70%,transparent)}
.eu-cons.compra .eu-neu-latido.on{animation:euLatidoV .55s ease-out}
.eu-cons.venta{background:linear-gradient(90deg,rgba(255,59,92,.10),transparent 72%);
  border-color:color-mix(in srgb,var(--nt-red) 45%,transparent)}
.eu-cons.venta .eu-cons-dir{color:var(--nt-red);text-shadow:0 0 10px color-mix(in srgb,var(--nt-red) 60%,transparent)}
.eu-cons.venta .eu-cons-barra i{background:linear-gradient(90deg,color-mix(in srgb,var(--nt-red) 45%,transparent),var(--nt-red))}
.eu-cons.venta .eu-neu-latido{background:var(--nt-red);box-shadow:0 0 0 0 color-mix(in srgb,var(--nt-red) 70%,transparent)}
.eu-cons.venta .eu-neu-latido.on{animation:euLatidoR .55s ease-out}
@keyframes euLatidoV{
  0%{opacity:1;transform:scale(1.35);box-shadow:0 0 0 0 color-mix(in srgb,var(--nt-green) 75%,transparent)}
  100%{opacity:.45;transform:scale(1);box-shadow:0 0 0 9px transparent}
}
@keyframes euLatidoR{
  0%{opacity:1;transform:scale(1.35);box-shadow:0 0 0 0 color-mix(in srgb,var(--nt-red) 75%,transparent)}
  100%{opacity:.45;transform:scale(1);box-shadow:0 0 0 9px transparent}
}
@keyframes euLatidoC{
  0%{opacity:1;transform:scale(1.35);box-shadow:0 0 0 0 color-mix(in srgb,var(--nt-cyan) 75%,transparent)}
  100%{opacity:.45;transform:scale(1);box-shadow:0 0 0 9px transparent}
}


/* ============ descarga del proyecto: línea de producto bajo el título ============ */
/* vive en la fila de la derecha, junto a las casillas: contenido y sin estirar nada */
.dl-host{display:inline-flex}

/* --- la descarga: un botón por sistema, con su logo y su color -----------------
   Windows con la bandera sobre verde; macOS con la manzanita sobre grafito.
   Cada uno baja SU paquete y el peso se lee al pasar el ratón. */
.dl2-fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dl2-btn{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 15px 0 7px;
  border-radius:11px;text-decoration:none;position:relative;overflow:hidden;
  border:1px solid var(--nt-border-subtle);
  background:color-mix(in srgb,var(--nt-surface-2) 72%,transparent);
  transition:transform .16s,border-color .16s,box-shadow .16s,background .16s}
.dl2-btn:hover{transform:translateY(-1px)}
.dl2-btn:active{transform:translateY(0)}
.dl2-logo{display:grid;place-items:center;width:33px;height:33px;border-radius:9px;flex:none}
.dl2-txt{display:flex;flex-direction:column;gap:2px;line-height:1}
.dl2-os{font-family:var(--nt-font-ui);font-size:9px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--nt-text-dim)}
.dl2-acc{display:inline-flex;align-items:center;gap:5px;font-family:var(--nt-font-ui);font-size:12px;
  font-weight:800;letter-spacing:.02em;color:var(--nt-text-primary)}
.dl2-peso{font-family:var(--nt-mono,monospace);font-size:9.5px;color:var(--nt-text-dim);
  align-self:flex-end;margin-bottom:3px}
.dl2-svg{flex:none;transition:transform .18s}
.dl2-btn:hover .dl2-svg{transform:translateY(2px)}

/* Windows: el verde de la casa */
.dl2-win .dl2-logo{color:#05200f;background:linear-gradient(140deg,#6bffab,#12b76a);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.25),0 0 12px rgba(57,255,136,.28)}
.dl2-win .dl2-acc{color:var(--nt-green,#39ff88)}
.dl2-win:hover{border-color:color-mix(in srgb,var(--nt-green,#39ff88) 50%,transparent);
  background:color-mix(in srgb,#39ff88 7%,transparent);
  box-shadow:0 0 16px rgba(57,255,136,.16)}

/* macOS: el grafito de la manzana */
.dl2-mac .dl2-logo{color:#f3f5f8;background:linear-gradient(140deg,#565d66,#1d2126);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 10px rgba(255,255,255,.05)}
.dl2-mac:hover{border-color:rgba(255,255,255,.26);background:rgba(255,255,255,.04);
  box-shadow:0 0 16px rgba(255,255,255,.07)}

.dl-ficha{position:fixed;z-index:80;width:330px;padding:11px 13px;border-radius:8px;
  border:1px solid var(--nt-border-subtle);
  background:color-mix(in srgb,var(--nt-bg-panel,#0b0d12) 97%,transparent);
  box-shadow:0 14px 40px rgba(0,0,0,.55);backdrop-filter:blur(8px);
  opacity:0;pointer-events:none;transform:translateY(-4px);
  transition:opacity .16s,transform .16s}
.dl-ficha.on{opacity:1;transform:translateY(0)}
.dl-f-t{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.dl-f-tag{font-size:9px;letter-spacing:.14em;text-transform:uppercase;padding:2px 7px;border-radius:3px;
  color:var(--nt-cyan);border:1px solid color-mix(in srgb,var(--nt-cyan) 40%,transparent);
  background:color-mix(in srgb,var(--nt-cyan) 10%,transparent)}
.dl-f-ver{font-family:var(--nt-mono,monospace);font-size:10px;color:var(--nt-text-secondary);font-weight:400}
.dl-f-b{font-size:11px;line-height:1.75;color:var(--nt-text-secondary)}
.dl-f-b b{color:var(--nt-text-primary);font-weight:600}

/* ============ histórico acumulado de la cuenta ============ */
.eu-hx .eu-h2{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.eu-hx .eu-h2-sub{font-size:10.5px;color:var(--nt-text-dim);letter-spacing:.04em;font-weight:400}
.hx-tira{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;margin:4px 0 12px}
@media(max-width:860px){.hx-tira{grid-template-columns:1fr 1fr 1fr}}
.hx-d{display:flex;flex-direction:column;gap:2px;padding-left:9px;
  border-left:2px solid var(--nt-border-subtle)}
.hx-d span{font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--nt-text-dim)}
.hx-d b{font-size:15px;font-weight:600;color:var(--nt-text-primary);
  font-family:var(--nt-mono,monospace)}
.hx-d b.hx-pl.bueno{color:var(--nt-green)}
.hx-d b.hx-pl.malo{color:var(--nt-red)}
.hx-lienzo{width:100%;border-radius:6px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,#0a0e14 60%,transparent),transparent)}
.hx-cv{width:100%;height:auto;display:block}
.hx-nota{margin-top:8px;font-size:10px;color:var(--nt-text-dim);font-family:var(--nt-mono,monospace)}

/* ============ gráfico de TradingView: la caja y la lectura de la cruz ============ */
.tv-wrap{position:relative;width:100%;height:clamp(300px,44vh,540px);border-radius:6px;overflow:hidden}
/* la libreria mide su contenedor: se le dan medidas explicitas y observables */
.tv-caja{position:relative;width:100%;height:100%;min-height:300px;display:block}
/* la lectura de la vela bajo el ratón: arriba a la izquierda, como MT5 */
.tv-lectura{position:absolute;top:6px;left:8px;display:flex;gap:11px;align-items:center;
  padding:4px 10px;border-radius:5px;pointer-events:none;z-index:3;
  background:color-mix(in srgb,#0a1119 88%,transparent);
  border:1px solid var(--nt-border-subtle);
  font-family:var(--nt-mono,monospace);font-size:10px;color:var(--nt-text-secondary);
  opacity:0;transition:opacity .12s;backdrop-filter:blur(4px)}
.tv-lectura b{color:var(--nt-text-primary);font-weight:600}
.tv-lectura .tv-h{color:var(--nt-cyan);letter-spacing:.04em}
/* la marca de TradingView (attributionLogo) ya va desactivada: no se ve nada raro */
.eu-chart .ch-leyenda{margin-top:9px}

/* ============ consenso real: tres bloques centrados, fáciles de leer ============ */
.cons-fila{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding:12px 10px;margin:0 0 2px;border-radius:7px;
  background:linear-gradient(180deg,color-mix(in srgb,#0e1826 94%,transparent),transparent);
  border:1px solid var(--nt-border-subtle)}
.cons-b{display:flex;justify-content:center}
.cons-b + .cons-b{border-left:1px solid var(--nt-border-subtle)}
.cons-v{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;min-width:0}
/* el titulo de cada bloque: pequeno, espaciado y en gris para que mande el dato */
.cons-k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--nt-text-dim);white-space:nowrap}
/* el dato: grande y con su color */
.cons-d{font-family:var(--nt-mono,monospace);font-size:19px;font-weight:600;line-height:1.15;
  color:var(--nt-text-primary);white-space:nowrap}
.cons-d.pos{color:var(--nt-green)} .cons-d.neg{color:var(--nt-red)}
/* el reparto de votos es mas largo: un punto menos para que no desborde */
.cons-b:nth-child(3) .cons-d{font-size:14px}
@media (max-width:820px){
  .cons-fila{grid-template-columns:1fr;gap:0}
  .cons-b + .cons-b{border-left:0;border-top:1px solid var(--nt-border-subtle);padding-top:10px;margin-top:10px}
  .cons-d{font-size:17px}
  .cons-b:nth-child(3) .cons-d{font-size:13px}
}

/* ============ las capas del gráfico: interruptores discretos ============ */
.tv-capas{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.tv-cap-t{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--nt-text-dim)}
/* cada interruptor: pequeno, con su punto de color cuando esta encendido */
.tv-cap{font-size:10px;padding:2.5px 8px;border-radius:10px;cursor:pointer;user-select:none;
  color:var(--nt-text-dim);border:1px solid var(--nt-border-subtle);
  background:color-mix(in srgb,#0e1826 80%,transparent);transition:all .12s}
.tv-cap:hover{color:var(--nt-text-secondary);border-color:var(--nt-border)}
.tv-cap.on{color:var(--nt-text-primary);border-color:rgba(0,243,255,.45);
  background:color-mix(in srgb,#00f3ff 12%,transparent)}
.tv-cap.on::before{content:'●';margin-right:5px;color:var(--nt-cyan);font-size:9px}

/* ============ títulos de panel: nunca desbordan ============
   El título de APRENDIZAJE medía 457 px en un panel de 465 y se salía 282 px del
   panel en pantallas de 1366. Ahora los títulos recortan con puntos suspensivos en
   vez de desbordar, así que ningún título rompe el diseño en ningún ancho. */
.panel-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-head{min-width:0;flex-wrap:nowrap}
.panel-head .panel-actions{flex:0 0 auto}
/* por debajo de 1100 px el título se puede partir en dos líneas en vez de recortarse */
@media(max-width:1100px){
  .panel-title{white-space:normal;overflow:visible;line-height:1.25}
}

/* ============ el gráfico ocupa TODO su panel ============
   Con las filas igualadas, el panel del gráfico puede ser más alto que la ventana
   del canvas: si no se estira, queda un hueco vacío debajo. Ahora el gráfico
   crece con su panel y se re-mide solo cuando el panel cambia de tamaño. */
.eu-chart{display:flex;flex-direction:column}
.eu-chart .panel-body{display:flex;flex-direction:column;flex:1;min-height:0}
.eu-chart .tv-wrap{flex:1;min-height:220px;height:auto}
.eu-chart .tv-caja,.eu-chart canvas{display:block}

/* ============ los paneles llenan su hueco ============
   La rejilla estiraba el hueco pero el panel de dentro se quedaba con su altura
   natural: el gráfico acababa en 382 y el aprendizaje en 519, la fila dentada.
   Ahora el panel llena su hueco y las dos piezas de una fila terminan igual. */
.grid>*>.panel{height:100%;display:flex;flex-direction:column}
.grid>*>.panel>.panel-body{flex:1;min-height:0}
/* las cajas con lista/scroll crecen con el panel en vez de dejar hueco debajo */
.grid>*>.panel>.panel-body>.scroll{flex:1;min-height:0;max-height:none}

/* ============ el conectoma, casi cuadrado ============
   A media anchura (unos 700 px) el cerebro ya no es una franja estirada. Con la
   proporción a 1:1 y un tope de alto, queda prácticamente cuadrado, que es como
   mejor se ve la red, y no se lleva media pantalla. */
.c6 .brain-lienzo,.c6 .eu-brain-lienzo{aspect-ratio:1/1;height:auto;max-height:clamp(300px,58vh,600px)}
/* la competición, al lado, llena su hueco sin dejar aire debajo */
.c6 .eu-tabla,.c6 .panel-body>.scroll{flex:1;min-height:0}
@media(max-width:1279px){
  /* en pantallas estrechas vuelven a su sitio: mejor uno debajo de otro */
  .c6 .brain-lienzo,.c6 .eu-brain-lienzo{aspect-ratio:auto;height:clamp(280px,40vh,440px);max-height:none}
}

/* ============ la tabla de la competición, a media anchura ============
   Con el cerebro al lado, la competición pasa a 700 px y su tabla (8 columnas
   fijas) se salía 117 px. Ahora la tabla se recorta con scroll propio y las
   columnas se estrechan: nada se sale del panel. */
.c6 .eu-tabla{overflow-x:auto;min-width:0}
.c6 .eu-tr{grid-template-columns:30px 1.15fr 62px 1.25fr 82px 52px 88px 62px;gap:6px;font-size:10px}
.c6 .eu-tr>*{min-width:0;overflow:hidden;text-overflow:ellipsis}
@media(max-width:1500px){
  .c6 .eu-tr{grid-template-columns:28px 1.1fr 56px 1.2fr 74px 46px 78px 56px;gap:5px;font-size:9.5px}
}

/* ============ las cuentas de los cuatro ============
   Una línea por agente con su cuenta: saldo, equidad, flotante y su botón para
   reiniciar SOLO la suya. El que quiebra se marca en rojo y deja de operar. */
.eu-cuentas{display:flex;flex-direction:column;gap:3px;margin:7px 0 2px}
.eu-cuenta-leyenda{background:none;border-color:transparent;padding-bottom:1px}
.eu-cuenta-leyenda>*{color:var(--nt-text-muted);font-size:9px;letter-spacing:.12em;text-transform:uppercase}
.eu-cuenta{display:grid;grid-template-columns:96px 1fr 1fr 1fr 74px 78px 92px 30px;gap:6px;align-items:center;
  padding:3px 6px;border:1px solid var(--nt-line);border-radius:3px;background:rgba(255,255,255,.015);font-size:10.5px;min-width:0}
.eu-cuenta>*{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eu-cuenta-nom{font-weight:600;letter-spacing:.04em}
.eu-cuenta-cif{color:var(--nt-text-dim);text-align:right;font-variant-numeric:tabular-nums}
.eu-cuenta-cif.pos{color:var(--nt-green)}
.eu-cuenta-cif.neg{color:var(--nt-red)}
.eu-cuenta.quebrada{border-color:var(--nt-red);background:rgba(255,64,80,.07)}
.tag-quiebra{color:var(--nt-red);font-weight:700;letter-spacing:.06em;font-size:9.5px;text-align:center}
.btn.mini{padding:1px 6px;font-size:10px;line-height:1.5}
@media(max-width:1500px){
  .eu-cuenta{grid-template-columns:84px 1fr 1fr 1fr 66px 66px 80px 28px;gap:5px;font-size:9.5px}
}

/* ============ la cabecera del panel, cuando el panel es estrecho ============
   A media anchura los tres distintivos de la competición («líder», «ventaja»,
   «operaciones») no caben en la misma línea y estiraban el panel 167 px. Ahora
   la cabecera baja de línea y los textos se recortan en vez de desbordar. */
.c6 .panel-head{flex-wrap:wrap;row-gap:4px}
/* los distintivos se van a su propia línea y se reparten ahí: antes el bloque pedía su
   ancho máximo (787 px) y estiraba la cabecera 94 px fuera del panel */
.c6 .panel-actions{flex:1 1 100%;min-width:0;max-width:100%;flex-wrap:wrap;row-gap:4px;
  justify-content:flex-end;overflow:hidden}
.c6 .panel-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c6 .badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* más sitio para las cifras de las cuentas: el nombre puede encogerse */
.c6 .eu-cuenta{grid-template-columns:82px 1.05fr 1.05fr 1fr 62px 62px 74px 26px}

/* ============ el conectoma llena su cuadro ============
   La ventana 3D se lleva TODO el alto del panel (antes se quedaba con una franja y
   sobraba caja) y la descripción se va al fondo del cuadro, pegada al borde. Así el
   cerebro se ve más grande y con más detalle, que es de lo que se trata. */
.eu-brain-panel .panel-body.brain{flex:1 1 auto;min-height:0}
.eu-brain-panel .eu-brain-lienzo{flex:1 1 auto;min-height:260px;height:auto!important;max-height:none!important;aspect-ratio:auto}
.eu-brain-panel .panel-body.tight{flex:0 0 auto;margin-top:auto;padding-bottom:2px}
.eu-brain-panel .panel-body.tight .legend{font-size:10px;line-height:1.35;opacity:.92}

/* ============ las cuatro tarjetas de cuenta ============
   Una por agente: su equidad en grande y debajo su saldo, su flotante y su
   porcentaje. El que quiebra se marca en rojo. Cuatro columnas, dos en pantallas
   estrechas. */
/* los cuatro operadores del cajón «simulado»: una línea cada uno, sin tarjetas
   (ocupa cinco renglones escasos y deja todo el sitio al gráfico y a la competición) */
.eu-mini{display:flex;flex-direction:column;gap:1px;margin:2px 0 5px}
.eu-mini-fila{display:grid;grid-template-columns:98px minmax(76px,auto) 56px 1fr;gap:8px;
  align-items:baseline;font-size:11px;font-variant-numeric:tabular-nums;padding:1px 0;min-width:0}
.eu-mini-nom{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.eu-mini-eq{font-weight:600}
.eu-mini-pct{font-size:10px}
.eu-mini-pct.pos{color:var(--nt-green)}.eu-mini-pct.neg{color:var(--nt-red)}
.eu-mini-det{font-size:10px;color:var(--nt-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eu-mini-fila.quebrada .eu-mini-eq{color:var(--nt-red)}
@media(max-width:900px){.eu-mini-fila{grid-template-columns:82px minmax(66px,auto) 50px 1fr;font-size:10px}}

/* ============ la barra de conexión con el MetaTrader 5 ============
   Cada usuario conecta SU MT5 desde aquí. Cuando está conectado, los campos se
   esconden y solo queda la cuenta y el símbolo que se están leyendo. */
.mt5bar{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-bottom:7px;
  padding:5px 7px;border:1px solid var(--nt-line);border-radius:4px;background:rgba(255,255,255,.02)}

/* --- la frase que pide conectar y el botón único ------------------------------ */
.m5fila{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.m5pide{font-family:var(--nt-font-ui);font-size:11px;line-height:1.5;color:var(--nt-text-secondary);
  flex:1 1 auto;min-width:180px}
.m5link{font-family:var(--nt-font-ui);font-size:10px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;color:var(--nt-text-dim);text-decoration:none;white-space:nowrap;
  border-bottom:1px solid transparent;transition:color .16s,border-color .16s}
.m5link:hover{color:var(--nt-cyan);border-bottom-color:currentColor}
.btn.m5cta{color:#08120c;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  border-color:transparent;background:var(--nt-green,#39ff88);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--nt-green,#39ff88) 40%,transparent),
             0 0 14px color-mix(in srgb,var(--nt-green,#39ff88) 22%,transparent)}
.btn.m5cta:hover{filter:brightness(1.08)}
.mt5campos{display:flex;align-items:center;gap:6px;flex-wrap:wrap;flex:1 1 auto;min-width:0}
.mt5campos input{font-family:var(--nt-font-data);font-size:10.5px;color:var(--nt-text-primary);
  background:var(--nt-bg-deep,#05080c);border:1px solid var(--nt-line);border-radius:3px;
  padding:3px 6px;min-width:0;flex:1 1 130px;max-width:190px}
.mt5campos input:focus{outline:none;border-color:var(--nt-cyan);box-shadow:0 0 10px var(--nt-glow-cyan)}
.mt5bar .small{flex:1 1 100%;color:var(--nt-text-dim)}

/* ============================================================================
   ANÁLISIS DE LA MOSCA · último bloque de la página
   Un botón y, debajo, su recuadro: las 10 últimas lecturas apiladas en orden de
   fecha y hora, la más nueva abajo, con scroll para bajarlas todas.
   ========================================================================== */
.mo-fila{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.mo-btn{display:inline-flex;align-items:center;gap:7px;height:31px;padding:0 14px;border-radius:7px;
  cursor:pointer;font-family:var(--nt-font-ui);font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--eu-violet);
  border:1px solid color-mix(in srgb,var(--eu-violet) 55%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--eu-violet) 20%,transparent),
    color-mix(in srgb,var(--eu-violet) 6%,transparent));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent);
  transition:border-color .16s,box-shadow .16s,transform .16s,background .16s,color .16s}
.mo-btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--eu-violet);color:#f1e6ff;
  background:linear-gradient(180deg,color-mix(in srgb,var(--eu-violet) 34%,transparent),
    color-mix(in srgb,var(--eu-violet) 12%,transparent));
  box-shadow:0 4px 18px color-mix(in srgb,var(--eu-violet) 34%,transparent),
    inset 0 1px 0 color-mix(in srgb,#fff 16%,transparent)}
.mo-btn:active:not(:disabled){transform:translateY(0)}
.mo-btn:disabled{cursor:progress;opacity:.62}
.mo-svg{flex:none;transition:transform .18s}
.mo-btn:hover:not(:disabled) .mo-svg{transform:translateY(-1px) rotate(-8deg)}
.mo-pista{font-size:10.5px;color:var(--nt-text-dim);letter-spacing:.01em}
/* --- reset chat: discreto, y en rojo solo cuando de verdad va a borrar --- */
.mo-reset{display:inline-flex;align-items:center;gap:6px;height:31px;padding:0 12px;border-radius:7px;
  cursor:pointer;font-family:var(--nt-font-ui);font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--nt-text-dim);
  border:1px solid var(--nt-border-subtle);background:color-mix(in srgb,var(--nt-surface-2) 60%,transparent);
  transition:color .16s,border-color .16s,background .16s,transform .16s}
.mo-reset:hover:not(:disabled){color:var(--nt-text-primary);
  border-color:var(--nt-border-default);transform:translateY(-1px)}
.mo-reset:disabled{opacity:.45;cursor:default}
.mo-reset.confirmar{color:var(--nt-red);
  border-color:color-mix(in srgb,var(--nt-red) 60%,transparent);
  background:color-mix(in srgb,var(--nt-red) 12%,transparent)}

/* --- el recuadro: alto cómodo y scroll propio, la lectura nueva al final --- */
.mo-caja{margin-top:11px;border:1px solid var(--nt-border-subtle);border-radius:8px;
  background:color-mix(in srgb,var(--nt-surface-2) 70%,transparent);
  transition:border-color .2s,background .2s}
.mo-caja.mo-pensando{border-color:color-mix(in srgb,var(--eu-violet) 32%,transparent);
  background:color-mix(in srgb,var(--eu-violet) 5%,transparent)}
.mo-caja.mo-error{border-color:color-mix(in srgb,var(--nt-red) 45%,transparent)}
.mo-hist{max-height:min(72vh,620px);overflow-y:auto;display:flex;flex-direction:column;gap:9px;
  padding:11px 12px;scroll-behavior:smooth}
.mo-hist::-webkit-scrollbar{width:9px}
.mo-hist::-webkit-scrollbar-track{background:transparent}
.mo-hist::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--eu-violet) 35%,transparent);
  border-radius:5px;border:2px solid transparent;background-clip:content-box}
.mo-hist::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--eu-violet) 60%,transparent);
  background-clip:content-box}

.mo-l{padding:10px 12px 11px;border-radius:6px;border:1px solid var(--nt-border-subtle);
  border-left:2px solid color-mix(in srgb,var(--eu-violet) 60%,transparent);
  background:color-mix(in srgb,var(--nt-surface-1) 55%,transparent)}
.mo-l.ultima{border-left-color:var(--eu-violet);
  box-shadow:0 0 14px color-mix(in srgb,var(--eu-violet) 16%,transparent)}
.mo-caja.mo-lista .mo-l.ultima{animation:moEntra .38s ease-out both}
@keyframes moEntra{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.mo-l-cab{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:6px;
  font-size:10px;letter-spacing:.05em;color:var(--nt-text-dim);text-transform:uppercase}
.mo-l-cab b{color:var(--eu-violet);font-size:11px;letter-spacing:.06em}
.mo-l-txt{font-size:12.5px;line-height:1.62;color:var(--nt-text-primary);
  white-space:pre-wrap;overflow-wrap:anywhere}
.mo-l-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.mo-l-chips:empty{display:none}
.mo-chip{display:inline-flex;align-items:baseline;gap:5px;padding:3px 8px;border-radius:5px;font-size:10.5px;
  color:var(--nt-text-secondary);border:1px solid color-mix(in srgb,var(--eu-violet) 26%,transparent);
  background:color-mix(in srgb,var(--eu-violet) 8%,transparent)}
.mo-chip b{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--eu-violet)}

.mo-vacio{padding:14px 12px;font-size:11.5px;line-height:1.7;color:var(--nt-text-dim)}

/* --- la espera, justo donde va a salir la lectura nueva: abajo --- */
.mo-espera{display:none;align-items:center;gap:9px;padding:3px 12px 12px}
.mo-caja.mo-pensando .mo-espera{display:flex}
.mo-puntos{display:inline-flex;gap:4px;flex:none}
.mo-punto{width:5px;height:5px;border-radius:50%;background:var(--eu-violet);opacity:.25;
  animation:moLatido 1.05s ease-in-out infinite}
.mo-punto:nth-child(2){animation-delay:.17s}
.mo-punto:nth-child(3){animation-delay:.34s}
@keyframes moLatido{0%,100%{opacity:.22;transform:translateY(0)}45%{opacity:1;transform:translateY(-3px)}}
.mo-frase{font-size:11px;color:var(--nt-text-secondary);letter-spacing:.01em}
@media (max-width:700px){.mo-pista{display:none}.mo-hist{max-height:60vh}}

/* --- recado de la mosca cuando no puede leer el mercado --- */
.mo-aviso{margin:0 12px 10px;padding:9px 11px;border-radius:6px;font-size:11.5px;line-height:1.6;
  color:var(--nt-text-secondary);border:1px solid color-mix(in srgb,var(--nt-red) 35%,transparent);
  background:color-mix(in srgb,var(--nt-red) 7%,transparent)}

/* --- competición en móvil: ocho columnas no caben, así que cada cuenta va en
       dos líneas y cada cifra lleva delante su palabra (que en pantalla ancha
       sobra porque ya está la fila de títulos) ------------------------------- */
.eu-palabra{display:none}
@media(max-width:767px){
  .eu-cuenta-leyenda{display:none}
  .eu-cuenta{display:flex;flex-wrap:wrap;gap:3px 9px;align-items:baseline;padding:6px 7px;font-size:10px}
  .eu-cuenta>*{white-space:normal;overflow:visible;text-overflow:clip;flex:0 0 auto}
  .eu-cuenta-nom{flex:1 0 100%;font-size:11px}
  .eu-palabra{display:inline;color:var(--nt-text-muted);font-style:normal}
}

/* --- competición: el recuadro acaba en el podio ---------------------------------
   Debajo del podio salía la tabla de los cuatro ejecutores (diez columnas) y era
   la que se desmadraba: en móvil estiraba el cajón a más de 1.300 px. Se quita
   por petición del dueño: con el podio tiene bastante. */
.eu-tabla{display:none}

/* --- operaciones abiertas: la tabla se desliza DENTRO del cajón ------------------
   Sin esto, con nueve columnas se aprieta hasta partir los títulos en el móvil. */
@media(max-width:767px){
  .opsfull table{min-width:600px}
}

/* --- el cuadro de operaciones abiertas, fuera -------------------------------
   Su tabla ya no se enseña (lo pidió el dueño). El cajón de últimos cierres
   sigue igual: ese sí lo usa. */
.fuera-de-la-web{display:none !important}

/* --- móvil: el título del cajón nunca se queda sin sitio --------------------
   Al dejar que la cabecera pase a dos líneas, el título se comprimía a cero y
   salía deformado (sin cabecera). Ahora tiene su trozo garantizado y las
   acciones bajan a su propia línea. La lista de la mosca ocupa el ancho entero. */
@media(max-width:767px){
  .panel-title{flex:1 1 auto;min-width:130px;white-space:normal;overflow:visible;text-overflow:clip}
  .panel-actions{flex:1 1 100%;justify-content:flex-start}
  .mo-hist,.mo-l,.mo-item,.mo-lect{width:100%;max-width:100%}
}

/* competición: fuera los textos de debajo; se queda el podio y sus mandos */
.comp-sin-textos .small{display:none !important}

/* ❗ La línea del reparto de operaciones: encima del gráfico y pegada a él. Es la lectura rápida de
   lo que está pasando (quién tiene qué abierto y cómo va), así que va con la fuente mono del panel,
   en una sola línea que no crece ni empuja el gráfico, y se recorta con puntos si llena el ancho. */
.tv-ops{font-family:var(--nt-mono,ui-monospace,monospace);font-size:9.5px;letter-spacing:.5px;
  color:#8fa9c4;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  padding:3px 2px 5px;border-bottom:1px solid rgba(120,150,180,.12);margin-bottom:5px}

/* --- los valores en la web pública: se LEEN como datos, no como campos ---
   (los ajustes los cambia solo el administrador desde /euphoria/admin/) */
input.solo-lectura{
  background:transparent; border-color:transparent; color:var(--nt-text);
  cursor:default; padding-left:2px;
}
input.solo-lectura:hover{border-color:transparent}
input.solo-lectura:focus{outline:none; border-color:transparent; box-shadow:none}

/* el acceso del administrador, al lado del título: discreto, pero se ve */
.eu-admin{
  display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;
  border-radius:999px;align-self:center;text-decoration:none;flex:none;
  font-family:var(--nt-font-ui);font-size:9px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--nt-text-muted);
  border:1px solid var(--nt-border,rgba(255,255,255,.14));
  background:rgba(255,255,255,.02);
  transition:color .18s,border-color .18s,background .18s,transform .18s;
}
.eu-admin:hover{color:var(--nt-green,#39ff88);border-color:var(--nt-green,#39ff88);
  background:rgba(57,255,136,.07);transform:translateY(-1px)}
.eu-admin-ico{display:grid;place-items:center;line-height:0}
@media(max-width:520px){.eu-admin{height:20px;padding:0 8px;font-size:8.5px;letter-spacing:.12em}}

/* --- panel de cuentas por agente en admin (reset individual) --- */
.eu-admin-agentes{display:grid;gap:4px}
.eu-adm-fila{display:grid;grid-template-columns:70px 80px 80px 70px 70px 1fr 70px;align-items:center;gap:6px;padding:5px 6px;border-radius:6px;background:rgba(255,255,255,.015);border:1px solid var(--nt-line,rgba(255,255,255,.08));font-size:11px}
.eu-adm-fila.quebrada{border-color:var(--nt-red,rgba(255,60,60,.5));background:rgba(255,60,60,.04)}
.eu-adm-nom{font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.eu-adm-bal,.eu-adm-eq{font-variant-numeric:tabular-nums;font-family:var(--nt-font-mono);color:var(--nt-text-secondary)}
.eu-adm-pct{font-variant-numeric:tabular-nums;font-family:var(--nt-font-mono);font-weight:600}
.eu-adm-pct.pos{color:var(--nt-green,#39ff88)}
.eu-adm-pct.neg{color:var(--nt-red,#ff3c3c)}
.eu-adm-ops{font-variant-numeric:tabular-nums;font-family:var(--nt-font-mono);color:var(--nt-text-dim);font-size:10px}
.eu-adm-estado{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.eu-adm-fila.quebrada .eu-adm-estado{color:var(--nt-red,#ff3c3c)}
.eu-adm-btn{height:22px;padding:0 10px;font-size:10px}
.eu-adm-head{display:grid;grid-template-columns:70px 80px 80px 70px 70px 1fr 70px;align-items:center;gap:6px;padding:4px 6px;font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--nt-text-muted);border-bottom:1px solid var(--nt-line,rgba(255,255,255,.08));margin-bottom:2px}
@media(max-width:760px){
  .eu-adm-fila,.eu-adm-head{grid-template-columns:60px 70px 70px 60px 60px 1fr 60px;font-size:10px}
  .eu-adm-btn{padding:0 6px}
}
@media(max-width:520px){
  .eu-adm-fila,.eu-adm-head{grid-template-columns:1fr 1fr;grid-auto-flow:dense}
  .eu-adm-nom{grid-column:1/3}
  .eu-adm-bal{grid-column:1}
  .eu-adm-eq{grid-column:2}
  .eu-adm-pct{grid-column:1}
  .eu-adm-ops{grid-column:2}
  .eu-adm-estado{grid-column:1}
  .eu-adm-btn{grid-column:2}
  .eu-adm-head{display:none}
}


/* ===================== BOTÓN LIVE (tira vertical del directo) ===============
   Pequeño, como el de admin, pero con el punto encendido: es lo que se pulsa para
   sacar la tira de datos del directo en otra ventana. */
.eu-live{
  display:inline-flex; align-items:center; gap:6px;
  margin-left:8px; padding:3px 9px;
  border:1px solid rgba(255,77,106,.55);
  border-radius:999px;
  font-family:'Share Tech Mono', ui-monospace, monospace;
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  color:#ff8fa3; text-decoration:none;
  background:rgba(255,77,106,.08);
  transition:background .15s, color .15s, border-color .15s;
}
.eu-live:hover{ background:rgba(255,77,106,.2); color:#fff; border-color:#ff4d6a; }
.eu-live-punto{
  width:7px; height:7px; border-radius:50%;
  background:#ff4d6a; box-shadow:0 0 0 0 rgba(255,77,106,.6);
  animation:euLiveLatido 1.6s ease-out infinite;
}
@keyframes euLiveLatido{
  0%{ box-shadow:0 0 0 0 rgba(255,77,106,.55); }
  70%{ box-shadow:0 0 0 7px rgba(255,77,106,0); }
  100%{ box-shadow:0 0 0 0 rgba(255,77,106,0); }
}


/* El botón «Live Full» es el de la emisión completa: va en dorado, como el banner,
   para distinguirlo del «Live», que es solo la tira de datos. */
.eu-live-full{
  border-color:rgba(212,175,55,.6) !important;
  color:#f0d890 !important;
  background:rgba(212,175,55,.1) !important;
}
.eu-live-full:hover{
  background:rgba(212,175,55,.24) !important;
  border-color:#d4af37 !important;
  color:#fff !important;
}
.eu-live-full .eu-live-punto{ background:#d4af37; animation-name:euFullLatido; }
@keyframes euFullLatido{
  0%{ box-shadow:0 0 0 0 rgba(212,175,55,.6); }
  70%{ box-shadow:0 0 0 7px rgba(212,175,55,0); }
  100%{ box-shadow:0 0 0 0 rgba(212,175,55,0); }
}

/* «Live Inverted»: la misma emisión con los datos arriba. Va en verde, para
   distinguirlo de un vistazo del Live Full (dorado) sin desentonar. */
.eu-live-inv{
  border-color:rgba(139,195,74,.6) !important;
  color:#c3e0a8 !important;
  background:rgba(139,195,74,.1) !important;
}
.eu-live-inv:hover{
  background:rgba(139,195,74,.24) !important;
  border-color:#8bc34a !important;
  color:#fff !important;
}
.eu-live-inv .eu-live-punto{ background:#8bc34a; animation-name:euInvLatido; }
@keyframes euInvLatido{
  0%{ box-shadow:0 0 0 0 rgba(139,195,74,.6); }
  70%{ box-shadow:0 0 0 7px rgba(139,195,74,0); }
  100%{ box-shadow:0 0 0 0 rgba(139,195,74,0); }
}


/* ============================================================================
   COMPETICIÓN CARA A CARA — los cuatro agentes, justo DEBAJO del cerebro male-cns.
   Cuadro compacto, mismo diseño (tokens y tarjetas del panel), con el que va
   primero destacado y su puesto 1º/2º/3º/4º.
   ========================================================================== */
.eu-cara{width:100%;border-collapse:collapse;font-family:var(--nt-mono,monospace);font-size:12px}
.eu-cara th{font-family:var(--nt-font-data,monospace);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--nt-text-dim);text-align:right;padding:4px 8px;border-bottom:1px solid var(--nt-border-subtle);font-weight:400}
.eu-cara th.iz{text-align:left}
.eu-cara td{padding:6px 8px;text-align:right;border-bottom:1px solid rgba(255,255,255,.05);font-variant-numeric:tabular-nums}
.eu-cara td.iz{text-align:left}
.eu-cara tr.lider{background:rgba(80,220,140,.10)}
.eu-cara tr.lider td{font-weight:700}
.eu-cara .puesto{display:inline-block;min-width:24px;font-family:var(--nt-font-data,monospace);font-weight:700;color:var(--nt-text-dim)}
.eu-cara tr.lider .puesto{color:var(--nt-green)}
.eu-cara .ag{font-weight:700}
.eu-cara .pos{color:var(--nt-green)}
.eu-cara .neg{color:var(--nt-red)}

/* ============================================================================
   CUENTA COPY — bloque PEQUEÑO y discreto de la cuenta a la que se copia.
   Va DEBAJO del cerebro male-cns y ENCIMA de la competición de los cuatro.
   Mismo lenguaje visual que la sección simulado (tokens, tipografía, colores),
   pero en formato compacto: una tarjeta, las cifras en una fila corta y la
   gráfica en una caja de altura fija. Nada que se desborde ni apile mal.
   ========================================================================== */
.panel.eu-copy{border-color:rgba(80,220,180,.45)}
.eu-copy .ec-cab{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.eu-copy .ec-titulo{font-family:var(--nt-font-data,monospace);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--nt-text-dim);white-space:nowrap}
.eu-copy .ec-cuenta{font-family:var(--nt-mono,monospace);font-size:11px;color:var(--nt-text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.eu-copy .ec-cifras{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:8px}
@media(max-width:620px){.eu-copy .ec-cifras{grid-template-columns:repeat(3,minmax(0,1fr))}}
.eu-copy .ec-c{min-width:0}
.eu-copy .ec-k{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--nt-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.eu-copy .ec-v{display:block;font-family:var(--nt-mono,monospace);font-size:17px;line-height:1.2;color:var(--nt-text-primary);font-variant-numeric:tabular-nums}
@media(max-width:620px){.eu-copy .ec-v{font-size:15px}}
.eu-copy .ec-v.pos,.eu-copy .pos{color:var(--nt-green)}
.eu-copy .ec-v.neg,.eu-copy .neg{color:var(--nt-red)}
/* la etiqueta de a que cuenta se copia: que nadie las confunda */
.eu-copy-badge{font-family:var(--nt-font-data,monospace);font-size:10px;letter-spacing:.12em;font-weight:700;
  padding:2px 7px;border-radius:3px;white-space:nowrap;flex:0 0 auto}
.eu-copy-badge.demo{background:rgba(80,220,140,.16);color:var(--nt-green);border:1px solid rgba(80,220,140,.55)}
.eu-copy-badge.real{background:rgba(255,90,90,.20);color:var(--nt-red);border:1px solid var(--nt-red)}
.eu-copy-badge.sin{background:rgba(255,255,255,.06);color:var(--nt-text-dim);border:1px solid var(--nt-border-subtle)}
/* la grafica: altura FIJA y pequena, siempre dentro de su caja */
.eu-copy-lienzo{width:100%;height:180px;display:block;margin-top:8px;background:rgba(0,0,0,.25);
  border:1px solid var(--nt-border-subtle);border-radius:4px;max-width:100%}
@media(max-width:620px){.eu-copy-lienzo{height:140px}}
.eu-copy-leyenda{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.eu-copy-op{display:inline-flex;gap:6px;align-items:baseline;border:1px solid var(--nt-border-subtle);border-radius:3px;
  padding:3px 6px;font-family:var(--nt-mono,monospace);font-size:10px;white-space:nowrap}
.eu-copy-op b{color:var(--nt-text-primary)}
.eu-copy-op i{color:var(--nt-text-dim);font-style:normal}
.eu-copy-op em{font-style:normal}
.eu-copy-op em.pos{color:var(--nt-green)}
.eu-copy-op em.neg{color:var(--nt-red)}
.eu-copy-op u{text-decoration:none;color:var(--nt-text-dim)}

/* --- la competición cara a cara y la leyenda de CUENTA COPY en pantalla estrecha:
       nada de partir textos ni números: se oculta lo accesorio y, si hace falta,
       la tabla se desplaza en horizontal dentro de su caja, sin romper el resto --- */
.eu-cara-caja{overflow-x:auto;-webkit-overflow-scrolling:touch}
.eu-cara th,.eu-cara td{white-space:nowrap}
@media(max-width:620px){
  .eu-cara .col-oculta{display:none}
}
/* la leyenda de operaciones: cada una en su fila cuando no cabe, sin recortar cifras */
@media(max-width:620px){
  .eu-copy-leyenda{flex-direction:column;gap:4px}
  .eu-copy-op{width:100%;justify-content:space-between;flex-wrap:wrap;white-space:normal}
}

/* --- cabeceras de panel en pantalla estrecha: los distintivos de la derecha
       (lider, ventaja, ops…) se apilaban y se cortaba su texto. Que hagan fila. --- */
@media(max-width:620px){
  .panel-head{flex-wrap:wrap;row-gap:5px}
  .panel-head .panel-actions{flex-wrap:wrap;justify-content:flex-start;gap:5px}
  .panel-head .badge{white-space:normal}
}

/* ===================== CUENTA COPY: casilla COMPACTA =====================
   A peticion del dueño: sin la lista de operaciones y mas pequeña, para que
   no ocupe espacio. Las operaciones se siguen viendo marcadas en la grafica.
   Se añadieron P/L dia y P/L semana: la fila pasa a SEIS casillas (una sola
   fila en pantalla ancha, tres y tres en pantalla estrecha) sin crecer de alto. */
.eu-copy .panel-body { padding: 5px 8px !important; }
.eu-copy .ec-cab { margin-bottom: 3px !important; }
.eu-copy .ec-cifras { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 6px !important; margin: 2px 0 0 !important; }
.eu-copy .ec-c, .eu-copy .ec-k, .eu-copy .ec-v { font-size: 10px !important; line-height: 1.15 !important; }
.eu-copy .ec-v { font-size: 13px !important; }
.eu-copy .eu-copy-lienzo { height: 92px !important; margin-top: 3px !important; }
.eu-copy .eu-copy-leyenda { display: none !important; }
.eu-copy .ec-cuenta { font-size: 10px !important; }
.eu-copy .small { font-size: 9px !important; }
/* etiquetas de la fila de cifras: con SEIS casillas son mas cortas, asi que en
   pantalla estrecha se dejan caer a la letra de 8 px para que no se recorten */
@media(max-width:760px){
  .eu-copy .ec-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .eu-copy .ec-k { font-size: 8px !important; }
  .eu-copy .ec-v { font-size: 11px !important; }
}

/* ===================== CUENTA COPY DENTRO DEL SIMULADO =====================
   La casilla ya NO es un panel aparte: vive DENTRO de la tarjeta «simulado»
   (una sola tarjeta, un solo marco). Se separa de los cuatro con una linea
   fina y se queda compacta: cabecera + seis cifras + el grafico de TradingView
   (Lightweight Charts) en una caja de altura FIJA y pequena. */
.simpanel .eu-copy { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--nt-line); min-width: 0; }
.eu-copy .ec-pie { font-family: var(--nt-mono,monospace); font-size: 9px; line-height: 1.3; margin-top: 3px; }
/* el contenedor del grafico de TradingView: la libreria mide su caja, asi que se le da
   un tamano explicito y observables; nunca se sale de su sitio */
}

/* ===================== CUENTA REAL (debajo de simulado) =====================
   Tarjeta propia, con la chapa REAL bien visible, seis cifras grandes en una
   fila (tres y tres en pantalla estrecha) y las operaciones abiertas en renglones.
   Todo en USD y sin ceros falsos: si no hay conexión, lo dice. */
.eu-real { border-left: 3px solid var(--nt-red); }
.eu-real .panel-title { font-size: 13px; color: var(--nt-text-secondary); }
.eu-real .badge.real { background: rgba(255,90,90,.18); border-color: var(--nt-red); color: var(--nt-red); font-weight: 700; letter-spacing: .1em; }
.eu-real .badge.real.on { background: var(--nt-red); color: #10060a; }
.eu-real .badge.ok { border-color: var(--nt-green); color: var(--nt-green); }
.eu-real .badge.bad { border-color: var(--nt-text-dim); color: var(--nt-text-dim); }
.eu-real-cifras { grid-template-columns: repeat(6, minmax(0,1fr)) !important; gap: 8px; }
.eu-real-cifras .mc { border-left: 2px solid var(--nt-border-subtle); padding-left: 8px; min-width: 0; }
.eu-real-cifras .mv { font-size: 17px !important; }
.eu-real-cifras .ml { font-size: 8.5px; }
.eu-real-ops-titulo { margin-top: 7px; }
.eu-real-ops { display: flex; flex-direction: column; gap: 3px; margin-top: 3px; }
.eu-real-op { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; gap: 8px; align-items: center;
  font-family: var(--nt-mono, monospace); font-size: 10px; line-height: 1.35; padding: 3px 6px;
  background: rgba(255,255,255,.03); border: 1px solid var(--nt-border-subtle); border-radius: 4px; }
.eu-real-op-t { color: var(--nt-text-dim); }
.eu-real-op-d { color: var(--nt-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eu-real-op-q { color: var(--nt-text-secondary); white-space: nowrap; }
.eu-real-op-pl { text-align: right; white-space: nowrap; }
.eu-real-op-pl.pos { color: var(--nt-green); }
.eu-real-op-pl.neg { color: var(--nt-red); }
.eu-real-seguridad { color: var(--nt-text-dim); font-size: 9px; line-height: 1.3; margin-top: 5px; }
@media(max-width:900px){
  .eu-real-cifras { grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media(max-width:620px){
  .eu-real-cifras .mv { font-size: 15px !important; }
  .eu-real-op { grid-template-columns: auto minmax(0,1fr) auto; font-size: 9px; }
  .eu-real-op-q { display: none; }
}


/* Configuración de copia: compacta y adaptable, sin desbordes ni solapes. */
.eu-copy-config-block { min-width:0; width:100%; }
.eu-copy-config-block .panel-head { min-width:0; gap:6px; align-items:flex-start; }
.eu-copy-config-block .panel-title { font-size:13px; line-height:1.2; white-space:normal; overflow-wrap:anywhere; }
.eu-copy-config-block .panel-sub { min-width:0; font-size:10px; line-height:1.25; white-space:normal; overflow-wrap:anywhere; }
 .eu-copy-config-body { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; padding:8px 10px; }
.eu-copy-config-body > .eu-copy-warning, .eu-copy-config-body > .eu-copy-switch,
.eu-copy-config-body > .eu-copy-fields, .eu-copy-config-body > .eu-copy-advanced,
.eu-copy-config-body > .eu-copy-real-more, .eu-copy-config-body > .eu-copy-summary, .eu-copy-config-body > .eu-copy-account, .eu-copy-config-body > .eu-copy-brakes,
.eu-copy-config-body > .eu-copy-counts, .eu-copy-config-body > .eu-copy-controls { grid-column:1 / -1; }
.eu-copy-settings-group { min-width:0; }
.eu-copy-group-label { margin:0 0 3px !important; color:var(--nt-text-secondary); }
.eu-copy-config-body > .small { margin:2px 0 0 !important; line-height:1.25 !important; }
.eu-copy-config-block .cmdbar { min-width:0; gap:5px !important; }
.eu-copy-modes { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)); }
.eu-copy-modes .btn { min-width:0; padding:5px 6px !important; font-size:11px !important; text-align:center; white-space:nowrap; }
.eu-copy-agents { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px !important; }
.eu-copy-agents label { min-width:0; font-size:10px !important; white-space:nowrap; }
.eu-copy-agents input { margin:0; }
.eu-copy-fields { display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) auto; gap:5px !important; align-items:end !important; }
 .eu-copy-field { display:grid; grid-template-columns:minmax(0,1fr); gap:2px; min-width:0; }
.eu-copy-field > span { min-width:0; font-size:9px !important; line-height:1.1; white-space:nowrap; }
.eu-copy-field input { width:100% !important; min-width:0; box-sizing:border-box; height:28px; padding:3px 5px; }
.eu-copy-fields .btn { min-width:0; padding:5px 8px !important; font-size:10px !important; white-space:nowrap; }
.eu-copy-config-block .eu-copy-pos { min-width:0; }
.eu-copy-config-block .panel-body { min-width:0; }
.eu-copy-config-block .small { overflow-wrap:anywhere; }
.eu-copy-config-block .eu-copy-frenos, .eu-copy-config-block .eu-copy-resumen { line-height:1.3; }
@media(max-width:620px){
  .eu-copy-config-block .panel-head { display:grid; grid-template-columns:auto minmax(0,1fr); }
  .eu-copy-config-block .panel-head .panel-sub { grid-column:2; }
  .eu-copy-config-body { grid-template-columns:repeat(2,minmax(0,1fr)); padding:7px; gap:4px; }
  .eu-copy-settings-group { grid-column:auto; }
  .eu-copy-modes { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .eu-copy-agents { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .eu-copy-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .eu-copy-fields .btn { grid-column:1 / -1; justify-self:stretch; text-align:center; }
  .eu-copy-config-block .eu-copy-controls { display:grid; grid-template-columns:minmax(0,1fr); }
}

/* Administracion: dos tarjetas paralelas en escritorio; en movil aparecen las dos
   abiertas con controles basicos visibles y los extras dentro de acordeones. */
.eu-copy-config-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-items:start; width:100%; min-width:0; }
.eu-copy-config-block { min-width:0; align-self:start; }
 .eu-copy-config-head { display:flex; cursor:pointer; list-style:none; user-select:none; }
.eu-copy-config-head::-webkit-details-marker { display:none; }
.eu-copy-config-head::marker { content:''; }
.eu-copy-advanced, .eu-copy-open-positions, .eu-copy-real-more { min-width:0; border:1px solid var(--nt-line); border-radius:5px; padding:5px 7px; }
.eu-copy-advanced > summary, .eu-copy-open-positions > summary, .eu-copy-real-more > summary { cursor:pointer; color:var(--nt-text-secondary); font-size:11px; line-height:1.3; user-select:none; }
.eu-copy-advanced[open] > summary, .eu-copy-open-positions[open] > summary, .eu-copy-real-more[open] > summary { margin-bottom:5px; }
.eu-copy-real-more .eu-copy-controls { margin-top:5px; }
.eu-copy-advanced .eu-copy-fields { padding-top:2px; }
.eu-copy-config-block .eu-copy-switch .btn { font-size:12px !important; padding:6px 10px !important; }
.eu-copy-config-block .eu-copy-fields-primary .btn { padding:5px 10px !important; font-size:10px !important; }
.eu-copy-config-block .eu-copy-panic { padding:5px 8px !important; font-size:10px !important; }
.eu-copy-config-block .eu-copy-summary { font-size:10px; }
.eu-copy-config-block .eu-copy-account, .eu-copy-config-block .eu-copy-brakes,
.eu-copy-config-block .eu-copy-counts { font-size:9px; line-height:1.2; }
.eu-copy-config-block:not([open]) { height:auto; }
.eu-copy-config-block:not([open]) > .eu-copy-config-body { display:none; }
.eu-copy-config-head::after { content:'▾'; margin-left:auto; color:var(--nt-text-dim); font-size:12px; }
.eu-copy-config-block[open] > .eu-copy-config-head::after { content:'▴'; }
@media(max-width:760px){
  .eu-copy-config-grid { grid-template-columns:minmax(0,1fr); }
}



/* de quién es cada operación de la cuenta real: la copiamos nosotros o la abrió el dueño */
.eu-real-op-m { font-size: 8.5px; letter-spacing: .3px; padding: 1px 5px; border-radius: 7px;
  white-space: nowrap; flex: 0 0 auto; font-weight: 700; }
.eu-real-op-m.mia  { color: var(--nt-accent, #4fc3f7); background: rgba(79,195,247,.13);
  border: 1px solid rgba(79,195,247,.35); }
.eu-real-op-m.tuya { color: #ffb300; background: rgba(255,179,0,.14);
  border: 1px solid rgba(255,179,0,.45); }