/* ============================================================================
   NEMESIS · layout.css — rejilla modular escalable
   Breakpoints espejo de OpenTerminalUI: mobile ≤767 · tablet 768–1279 · desktop ≥1280
   Cada panel declara su tramo (c4/c6/c8/c12) y la rejilla decide el encaje.
   ========================================================================== */
.shell{position:relative;z-index:2;padding:8px 10px 26px;max-width:2400px;margin:0 auto;
  display:flex;flex-direction:column;gap:8px}

/* --- TopBar ---------------------------------------------------------------- */

/* --- StatusBar (tira de mercado) ------------------------------------------- */

/* --- rejilla modular ------------------------------------------------------- */
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;align-items:stretch}
/* las dos piezas de una fila terminan a la misma altura: la rejilla queda limpia */
.grid>*{min-width:0}
.c4{grid-column:span 4} .c5{grid-column:span 5} .c6{grid-column:span 6}
.c7{grid-column:span 7} .c8{grid-column:span 8} .c12{grid-column:span 12}
.row2{grid-row:span 2}

/* el conectoma y el gráfico respiran: altura fluida, nunca desbordan */
/* la VENTANA (.brain-lienzo) manda el alto; el PANEL (#brain) se ajusta a ella.
   Antes el id #brain estaba duplicado en el panel y en la ventana, así que el panel heredaba
   el alto de la ventana y se recortaba: mandos, leyenda y estadísticas fuera de la vista. */
.panel-body.brain{padding:6px;min-height:0;overflow:hidden;display:flex;flex-direction:column}
#brain.panel{height:auto;min-height:0;max-height:none;overflow:visible}   /* el panel: ancla del nav */
.brain-lienzo{position:relative;width:100%;height:clamp(300px,42vh,560px);flex:0 0 auto;min-height:240px;max-height:none}
#brainCanvas{position:absolute;inset:0}

/* --- barra inferior móvil -------------------------------------------------- */
.botnav{display:none}
@media(max-width:767px){
  .botnav{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;
    background:var(--nt-overlay);backdrop-filter:blur(8px);border-top:1px solid var(--nt-border-default);
    padding:4px 6px calc(4px + env(safe-area-inset-bottom))}
  .botnav a{flex:1;text-align:center;font-size:9px;letter-spacing:var(--nt-ls-wide);text-transform:uppercase;
    color:var(--nt-text-muted);padding:6px 2px;border-radius:var(--nt-radius-xs)}
  .botnav a:active,.botnav a.on{color:var(--nt-cyan);background:var(--nt-glow-cyan)}
  .shell{padding-bottom:64px}
}

/* --- tablet ---------------------------------------------------------------- */
@media(min-width:768px) and (max-width:1279px){
  .c4{grid-column:span 6} .c5{grid-column:span 6} .c6{grid-column:span 6}
  .c7{grid-column:span 12} .c8{grid-column:span 12}
  .metric-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* --- mobile ---------------------------------------------------------------- */
@media(max-width:767px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c4,.c5,.c6,.c7,.c8,.c12{grid-column:span 2}
  .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .metric .value{font-size:var(--nt-type-2xl)}
  .shell{padding:6px 7px 64px;gap:6px}
        .btn{padding:8px 10px;min-height:34px}
  .console .plan{grid-template-columns:repeat(2,minmax(0,1fr))}
  .console .split{grid-template-columns:minmax(0,1fr)}
  canvas.chart{height:clamp(260px,36vh,340px)}
  #simChart{height:clamp(300px,42vh,380px)}
  .brain-lienzo{height:clamp(276px,44vh,391px)}   /* la ventana, no el panel: el panel se ajusta */
  .why .wrow{grid-template-columns:52px 1fr 40px 28px}
}

/* --- móvil: que NADA ensanche la página -----------------------------------
   Si un elemento se sale del ancho (acciones de cabecera, tablas anchas), el
   navegador agranda la página y a la derecha del último cajón queda un hueco
   vacío. Aquí se obliga a todo a caber: lo que no quepa dentro, se desplaza
   dentro de su propio cajón, nunca a costa de la página. */
@media(max-width:767px){
  html,body{max-width:100%;overflow-x:hidden}
  .shell{padding:6px 6px 64px}
  .panel-head{flex-wrap:wrap;row-gap:3px}
  .panel-actions{flex-wrap:wrap;justify-content:flex-start;max-width:100%;gap:3px}
  .panel-title{white-space:normal;overflow-wrap:anywhere}
  .panel-sub{white-space:normal;overflow-wrap:anywhere;max-width:100%}
  .panel-body{overflow-wrap:anywhere;overflow-x:auto}   /* lo que no quepa se desplaza DENTRO del cajón, no ensancha la página */
  .opsbox,.hx-tabla,.mo-hist,.lg-lista,.ap-lista{overflow-x:auto;max-width:100%}
  table{max-width:100%}
}

/* --- móvil: la cabecera y las descargas, enteras y bien integradas ----------
   Con las casillas delante, los dos botones de descarga (logo + texto + peso) no
   cabían en la línea y se cortaban por la derecha. Aquí bajan a su propia línea
   y se reparten el ancho a partes iguales, sin que nada se recorte. */
@media(max-width:767px){
  .eu-titulo{flex-wrap:wrap;align-items:flex-start;gap:7px}
  .eu-titulo-l{flex:1 1 100%}
  .eu-titulo-r{flex:1 1 100%;flex-wrap:wrap;gap:7px;align-items:flex-start}
  .eu-titulo-r .dl-host{flex:1 1 100%;display:block}
  .dl2-fila{gap:7px;width:100%}
  .dl2-btn{flex:1 1 0;min-width:0;height:42px;padding:0 10px 0 6px;gap:7px}
  .dl2-logo{width:29px;height:29px;border-radius:8px}
  .dl2-logo svg{width:15px;height:15px}
  .dl2-txt{min-width:0;flex:1 1 auto}
  .dl2-os{font-size:8px;letter-spacing:.1em;white-space:nowrap}
  .dl2-acc{font-size:10.5px;gap:4px;min-width:0}
  .dl2-acc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dl2-peso{display:none}          /* el peso del paquete: fuera, así no aprieta ni se corta */
}

/* --- pantallas muy anchas: aprovechar el ancho ----------------------------- */
@media(min-width:1800px){
  .metric-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .brain-lienzo{height:clamp(414px,53vh,713px)}
}

@media print{.panel{break-inside:avoid}}

/* --- gráfico del entorno simulado: misma altura que el real, con sitio para sl/tp --- */
#simChart{height:clamp(330px,44vh,540px)}
#simchart .panel-body{padding:6px 8px}