/* ───────────────────────────────────────────────────────────────────────────
   webtmux — paleta y proporciones tomadas del sidebar de tmux: fondo casi
   negro, una franja de color por máquina, tarjetas de tres líneas
   (nombre+tamaño+edad / comando / ruta) y el indicador de actividad a la
   derecha. Quien use las dos cosas no debería tener que reaprender nada.
   ─────────────────────────────────────────────────────────────────────────── */
:root {
  --bg: #0e0f12;
  --panel: #15171c;
  --panel-2: #1b1e25;
  --line: #262a33;
  --fg: #d6dae2;
  --muted: #7d8595;
  --green: #7ec86b;      /* sesión activa            */
  --yellow: #e6c05c;     /* guardada en disco        */
  --red: #e0685f;        /* launcher disponible      */
  --cyan: #63c9d6;       /* sesión actual / acento   */
  --busy: #c98ee6;       /* ⠿ pensando               */
  --wait: #e6a35c;       /* ◆ espera decisión        */
  --crit: #e0685f;
  --sidew: 310px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--fg);
  font: 13px/1.45 ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  -webkit-text-size-adjust: 100%; overflow: hidden;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.spacer { flex: 1; }

/* dvh y no vh: en Safari de iOS, 100vh cuenta la barra de direcciones como si no
   existiera, así que el último trozo del terminal —y la barra de teclas— quedaban
   por debajo del borde. `dvh` sigue al viewport de verdad mientras la barra se
   contrae al hacer scroll. La línea de vh queda de reserva para navegadores viejos. */
#app { display: flex; height: 100vh; height: 100dvh; }

/* ── sidebar ─────────────────────────────────────────────────────────────── */
#side {
  width: var(--sidew); flex: 0 0 var(--sidew);
  display: flex; flex-direction: column;
  background: var(--panel); border-right: 1px solid var(--line);
}
.side-top {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px calc(10px) 12px; border-bottom: 1px solid var(--line);
  padding-top: max(10px, env(safe-area-inset-top));
}
.side-top .mark { color: var(--cyan); }
.side-top .title { font-weight: 600; letter-spacing: .04em; }
.side-top button { margin-left: auto; }
.side-top button + button { margin-left: 0; }

.list { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

.band {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; font-weight: 700; font-size: 12px;
  color: #fff; letter-spacing: .05em; position: sticky; top: 0; z-index: 2;
}
.band.off { background: #2a2d35 !important; color: var(--muted); }
.band .alert {
  margin-left: auto; font-weight: 600; font-size: 11px;
  background: rgba(0,0,0,.28); padding: 1px 6px; border-radius: 3px;
}
.band .alert.crit { color: #ffdad6; }

.row {
  display: grid; grid-template-columns: 14px 1fr auto auto;
  gap: 2px 8px; padding: 7px 10px 8px;
  border-bottom: 1px solid #1c1f26; cursor: pointer;
}
.row .dots {
  grid-row: 1; background: transparent; border: 0; color: #4b5261;
  font: inherit; cursor: pointer; padding: 0 2px; line-height: 1;
}
.row:hover .dots, .row .dots:focus { color: var(--fg); }
.row:hover { background: var(--panel-2); }
.row.sel { background: #1d2530; box-shadow: inset 2px 0 0 var(--cyan); }
.row .glyph { grid-row: 1; color: var(--green); }
.row .name  { grid-row: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .act   { grid-row: 1; font-size: 11px; }
.row .meta  { grid-column: 2 / -1; color: var(--muted); font-size: 11px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .path  { grid-column: 2 / -1; color: #5f6675; font-size: 11px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row.sub    { padding-top: 3px; padding-bottom: 4px; }
.row.sub .name { font-weight: 400; }
.row.sub .glyph { color: #4b5261; }
.row.saved .glyph, .row.saved .name { color: var(--yellow); }
.row.launcher .glyph, .row.launcher .name { color: var(--red); }
.row .act.busy { color: var(--busy); }
.row .act.waiting { color: var(--wait); }

.side-foot {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  border-top: 1px solid var(--line); font-size: 11px;
  padding-bottom: max(7px, env(safe-area-inset-bottom));
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.dot.ok { background: var(--green); }
.dot.bad { background: var(--crit); }

/* ── main ────────────────────────────────────────────────────────────────── */
#main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid var(--line); background: var(--panel);
  padding-top: max(8px, env(safe-area-inset-top));
}
.bar-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-title .host { color: var(--muted); font-weight: 400; }

button.ghost {
  background: transparent; border: 1px solid var(--line); color: var(--fg);
  border-radius: 6px; padding: 3px 9px; cursor: pointer; font: inherit; line-height: 1.3;
}
button.ghost:hover { background: var(--panel-2); border-color: #39404d; }
.modes { display: flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg { background: transparent; border: 0; color: var(--muted); font: inherit;
       padding: 3px 10px; cursor: pointer; }
.seg.on { background: #24303d; color: var(--cyan); }

/* `overflow: hidden` y NO auto: el terminal se escala para caber entero, así que
   no debe haber nada que desplazar. Con `auto` cualquier error de medida se
   convertía en una barra lateral y en información fuera de la vista. */
.termwrap { flex: 1; position: relative; overflow: hidden; background: #000; padding: 6px; }

/* inline-block en los dos: si son bloques, el navegador los estira al ancho del
   contenedor y `offsetWidth` devuelve ESE ancho, no el del terminal. Midiendo eso
   el escalado calculaba 1.0 con un contenido de 1096 px en un hueco de 884, y la
   diferencia se iba por la derecha. Encogidos al contenido, la medida es real. */
#termscale { transform-origin: top left; display: inline-block; }
#term { display: inline-block; }
.overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(8,9,11,.82); color: var(--muted); text-align: center; padding: 20px;
}

/* ── barra de teclas (iPad) ──────────────────────────────────────────────── */
.keys {
  display: flex; gap: 6px; padding: 7px 10px; overflow-x: auto;
  background: var(--panel); border-top: 1px solid var(--line);
  padding-bottom: max(7px, env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
.keys button {
  flex: 0 0 auto; min-width: 44px; min-height: 36px;   /* objetivo táctil cómodo */
  background: var(--panel-2); border: 1px solid var(--line); color: var(--fg);
  border-radius: 7px; font: inherit; cursor: pointer; padding: 0 10px;
}
.keys button:active { background: #2c3644; }
.keys button.mod.on { background: #24303d; color: var(--cyan); border-color: #2f3d4d; }

/* ── panel de máquinas ───────────────────────────────────────────────────── */
.machines { flex: 1; overflow-y: auto; padding: 14px; display: grid; gap: 14px;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); align-content: start; }
.mcard { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.mcard > h3 { margin: 0; padding: 8px 12px; font-size: 12px; letter-spacing: .05em;
              color: #fff; display: flex; align-items: center; gap: 8px; }
.mcard.off > h3 { background: #2a2d35 !important; color: var(--muted); }
.gauges { display: flex; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.gauge { flex: 1; }
.gauge .lab { font-size: 10px; color: var(--muted); letter-spacing: .06em; }
.gauge .val { font-size: 16px; font-weight: 600; }
.gauge .barbg { height: 4px; background: #24272f; border-radius: 2px; margin-top: 4px; }
.gauge .bar { height: 4px; border-radius: 2px; background: var(--green); }
.gauge .bar.warn { background: var(--wait); }
.gauge .bar.crit { background: var(--crit); }
.svc { display: flex; align-items: baseline; gap: 8px; padding: 5px 12px; font-size: 12px;
       border-top: 1px solid #1c1f26; }
.svc .port { color: var(--cyan); min-width: 42px; }
.svc .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc .pr { margin-left: auto; color: var(--muted); font-size: 11px; }
.svc.infra { opacity: .5; }
.mcard .none { padding: 8px 12px; color: var(--muted); font-size: 12px; }

/* ── acciones sobre una sesión ───────────────────────────────────────────── */
.acts { display: flex; gap: 6px; padding: 6px 10px 9px; grid-column: 1 / -1; }
.acts button { font-size: 11px; padding: 2px 8px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #222833; border: 1px solid #39404d; border-radius: 8px;
  padding: 9px 14px; max-width: min(90vw, 560px); opacity: 0; pointer-events: none;
  transition: opacity .18s; white-space: pre-wrap; z-index: 50;
}
.toast.on { opacity: 1; }

/* ── login ───────────────────────────────────────────────────────────────── */
.login-body { display: grid; place-items: center; }
.login { width: min(92vw, 330px); text-align: center; display: grid; gap: 10px; }
.login-mark { font-size: 30px; color: var(--cyan); }
.login h1 { margin: 0; font-size: 17px; letter-spacing: .06em; }
.login p { margin: 0 0 6px; font-size: 12px; }
.login input, .login button {
  font: inherit; padding: 9px 11px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--panel); color: var(--fg); text-align: center;
}
.login button { background: #24303d; color: var(--cyan); cursor: pointer; border-color: #2f3d4d; }
.login .err { color: var(--crit); min-height: 18px; font-size: 12px; }

/* ── estrecho: el sidebar y el terminal se turnan la pantalla ────────────── */
.only-narrow { display: none; }
/* 900 y no 760: un iPad de 11" en VERTICAL mide 834, así que con el corte
   anterior seguía mostrando el sidebar y al terminal le quedaban 524 px — el
   escalado bajaba a 0.47 y el texto quedaba diminuto. A pantalla completa sube a
   ~0.75. En horizontal (1194) el sidebar sigue visible, que es lo cómodo. */
@media (max-width: 900px) {
  :root { --sidew: 100%; }
  #main { display: none; }
  body.showing-main #side { display: none; }
  body.showing-main #main { display: flex; }
  .only-narrow { display: inline-block; }
}

/* Aviso de "hay versión nueva". Fijo abajo, por encima de todo: en el iPad la
   página vive añadida a la pantalla de inicio y puede pasar días sin recargarse. */
.update {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: max(14px, env(safe-area-inset-bottom));
  background: #24303d; color: var(--cyan); border: 1px solid #2f3d4d;
  border-radius: 8px; padding: 9px 14px; font: inherit; cursor: pointer; z-index: 60;
}