/* Terminal SSH del panel — workspace estilo Terminator (lo monta terminal.js).
 *
 * PORQUÉ un CSS aparte y no en style.css: el panel no tiene build step y este archivo
 * sólo lo necesita quien abre un terminal; terminal.js lo inyecta la primera vez.
 *
 * REGLA: todo sale de los tokens de style.css (--bg, --panel, --line, --text, --muted,
 * --primary, --accent, --radius, --shadow…). Nada de colores fijos: el panel se usa en
 * claro y en oscuro y el terminal tiene que seguirlo sin una sola regla duplicada.
 * Única excepción, comentada abajo: el blanco sobre la barra de difusión.
 */

/* ── overlay ──────────────────────────────────────────────────────────────────
 * Por encima del modal del panel (z-index 50) y por debajo de los toasts (9999):
 * un aviso tiene que poder verse aunque el terminal esté abierto. */
.tw-overlay {
  position: fixed; inset: 0; z-index: 60;
  display: flex; padding: clamp(0px, 1.4vmin, 18px);
  background: color-mix(in srgb, var(--bg) 68%, transparent);
  backdrop-filter: blur(10px) saturate(1.15);
  animation: tw-in .16s ease both;
}
.tw-overlay:focus, .tw-overlay:focus-visible { outline: none; }
@keyframes tw-in { from { opacity: 0; } to { opacity: 1; } }

.tw-frame {
  position: relative; flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, transparent), var(--panel));
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: box-shadow .18s;
}
/* Difusión activa: el marco entero se tiñe. Ver .tw-bcast-bar. */
.tw-frame.bcast { box-shadow: var(--shadow), inset 0 0 0 2px var(--error); }
/* Mientras se arrastra un separador nadie debe seleccionar texto por accidente. */
.tw-frame.tw-dragging, .tw-frame.tw-dragging * { user-select: none !important; }

/* ── barra de difusión ────────────────────────────────────────────────────────
 * Difundir es peligroso (lo tecleado se replica en TODAS las sesiones), así que el
 * aviso es una barra roja a pantalla completa imposible de pasar por alto.
 * El texto es #fff a propósito: va sobre --error (#f43f5e), que es el MISMO color en
 * ambos temas, así que el contraste no depende del tema. */
.tw-bcast-bar { display: none; }
.tw-frame.bcast .tw-bcast-bar {
  display: flex; align-items: center; gap: 9px; flex: none;
  padding: 7px 14px; color: #fff; font-size: 12.5px; letter-spacing: .02em;
  background: linear-gradient(90deg, var(--error), color-mix(in srgb, var(--error) 72%, var(--primary)));
  animation: tw-bcast-glow 2s ease-in-out infinite;
}
@keyframes tw-bcast-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.16); } }
.tw-bcast-bar b { font-weight: 800; letter-spacing: .08em; }
.tw-bcast-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #fff; flex: none;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); animation: tw-ping 1.4s ease-out infinite;
}
@keyframes tw-ping {
  0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}
.tw-bcast-txt { opacity: .92; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-bcast-off {
  margin-left: auto; flex: none; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .14); color: #fff;
  border-radius: 8px; padding: 3px 10px; font: inherit; font-weight: 700; transition: .14s;
}
.tw-bcast-off:hover { background: #fff; color: var(--error); }

/* ── cabecera ─────────────────────────────────────────────────────────────── */
.tw-head {
  display: flex; align-items: center; gap: 10px; flex: none; min-width: 0;
  padding: 8px 10px; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel2), color-mix(in srgb, var(--panel2) 40%, transparent));
}
.tw-id { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 0 1 auto; padding-right: 4px; }
.tw-id-ico {
  font-size: 15px; width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  border-radius: 9px; background: var(--grad); box-shadow: 0 5px 14px color-mix(in srgb, var(--primary) 40%, transparent);
}
.tw-id-txt { min-width: 0; }
.tw-id-txt b { display: block; font-size: 13.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-id-txt small { display: block; color: var(--muted); font-size: 11px; font-family: ui-monospace, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Pestañas: se comen el espacio sobrante y hacen scroll horizontal ELLAS, nunca el body. */
.tw-tabs {
  display: flex; align-items: stretch; gap: 3px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  padding: 2px; border-left: 1px solid var(--line); padding-left: 10px;
}
.tw-tabs::-webkit-scrollbar { height: 0; }
.tw-tab {
  display: flex; align-items: center; gap: 7px; flex: 0 1 auto; min-width: 0; max-width: 190px;
  padding: 6px 8px 6px 11px; cursor: pointer; white-space: nowrap;
  border: 1px solid transparent; border-radius: 10px; background: transparent;
  color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; transition: .14s;
}
.tw-tab:hover { background: var(--panel2); color: var(--text); }
.tw-tab.active {
  background: var(--panel2); color: var(--text); border-color: var(--line);
  box-shadow: inset 0 -2px 0 0 var(--primary);
}
.tw-tab-n { overflow: hidden; text-overflow: ellipsis; }
.tw-tab-x {
  flex: none; width: 17px; height: 17px; display: grid; place-items: center;
  border-radius: 5px; font-size: 10px; opacity: .45; transition: .12s;
}
.tw-tab:hover .tw-tab-x { opacity: .8; }
.tw-tab-x:hover { opacity: 1; background: color-mix(in srgb, var(--error) 20%, transparent); color: var(--error); }
.tw-tab-add {
  flex: none; width: 26px; height: 26px; cursor: pointer; font-size: 16px; line-height: 1;
  border: 1px dashed var(--line); border-radius: 9px; background: transparent; color: var(--muted); transition: .14s;
}
.tw-tab-add:hover { color: var(--text); border-color: var(--primary); border-style: solid; background: var(--panel2); }

.tw-tools { display: flex; align-items: center; gap: 4px; flex: none; margin-left: auto; padding-left: 8px; border-left: 1px solid var(--line); }
.tw-btn {
  min-width: 30px; height: 30px; padding: 0 8px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel2); color: var(--muted);
  font: inherit; font-size: 13px; font-weight: 700; line-height: 1; transition: .14s;
}
.tw-btn:hover:not(:disabled) { color: var(--text); border-color: var(--primary); transform: translateY(-1px); }
.tw-btn:active:not(:disabled) { transform: translateY(0); }
.tw-btn:disabled { opacity: .35; cursor: not-allowed; }
.tw-btn.on { background: color-mix(in srgb, var(--primary) 20%, var(--panel2)); border-color: var(--primary); color: var(--text); }
.tw-btn.tw-close:hover { background: color-mix(in srgb, var(--error) 16%, transparent); border-color: var(--error); color: var(--error); }
/* El botón de difusión anuncia su propio peligro cuando está activo. */
.tw-btn.tw-cast.on {
  background: color-mix(in srgb, var(--error) 22%, var(--panel2)); border-color: var(--error); color: var(--error);
  animation: tw-cast-pulse 1.6s ease-in-out infinite;
}
@keyframes tw-cast-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--error) 55%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--error) 0%, transparent); }
}

/* ── escenario / pestañas ─────────────────────────────────────────────────── */
.tw-stage { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; }
/* Cada pestaña ocupa el escenario entero; sólo la activa se pinta. No se desmonta:
 * así xterm conserva su scrollback y su tamaño al volver. */
.tw-tab-pane { position: absolute; inset: 0; display: none; padding: 8px; min-width: 0; min-height: 0; }
.tw-tab-pane.active { display: flex; }

/* ── árbol de paneles ─────────────────────────────────────────────────────────
 * Las direcciones van prefijadas (tw-row/tw-col) porque style.css tiene una utilidad
 * global `.row` que centraría los paneles: el terminal no debe heredar nada del panel
 * sin querer. Por lo mismo se fijan aquí align-items/gap/flex-wrap en vez de confiar
 * en los valores por defecto. */
.tw-split { display: flex; flex: 1 1 0; min-width: 0; min-height: 0; align-items: stretch; flex-wrap: nowrap; gap: 0; }
.tw-split.tw-row { flex-direction: row; }
.tw-split.tw-col { flex-direction: column; }

/* Separador arrastrable: zona de agarre generosa (8px) con una guía fina dentro. */
.tw-sep { position: relative; flex: none; touch-action: none; background: transparent; align-self: stretch; }
.tw-sep.tw-row { width: 8px; cursor: col-resize; }
.tw-sep.tw-col { height: 8px; cursor: row-resize; }
.tw-sep::after {
  content: ""; position: absolute; border-radius: 3px;
  background: var(--line); transition: background .14s, box-shadow .14s;
}
.tw-sep.tw-row::after { top: 6px; bottom: 6px; left: 3px; width: 2px; }
.tw-sep.tw-col::after { left: 6px; right: 6px; top: 3px; height: 2px; }
.tw-sep:hover::after, .tw-frame.tw-dragging .tw-sep:active::after {
  background: var(--primary); box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 70%, transparent);
}

.tw-pane {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  min-width: 0; min-height: 0;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg2);
  transition: border-color .16s, box-shadow .16s;
}
/* El realce del foco sólo tiene sentido con más de un panel: con uno solo no hay
 * dónde equivocarse (terminal.js pone .multi cuando hay 2+). */
.tw-tab-pane.multi .tw-pane.focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 12px 34px color-mix(in srgb, var(--primary) 26%, transparent);
}
/* Se apaga la CABECERA del panel sin foco, nunca su terminal: en un terminal se lee
 * tanto donde no escribes (logs, un tail -f) como donde sí, y atenuar ese texto sería
 * pagar legibilidad por una señal que el borde ya da de sobra. */
.tw-tab-pane.multi .tw-pane:not(.focus) .tw-pane-hd { color: var(--muted); opacity: .75; }
/* Con difusión activa el borde de TODOS los paneles avisa: escribes en todos. */
.tw-tab-pane.bcast .tw-pane { border-color: color-mix(in srgb, var(--error) 50%, var(--line)); }
.tw-tab-pane.bcast .tw-pane.focus {
  border-color: var(--error);
  box-shadow: 0 0 0 1px var(--error), 0 12px 34px color-mix(in srgb, var(--error) 26%, transparent);
}
/* Panel maximizado (Ctrl+Shift+Z): acento distinto para no confundirlo con «hay uno solo». */
.tw-tab-pane.zoomed .tw-pane { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }

.tw-pane-hd {
  display: flex; align-items: center; gap: 8px; flex: none; min-height: 29px; min-width: 0;
  padding: 4px 5px 4px 10px; font-size: 11.5px; color: var(--text);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 75%, transparent), transparent);
}
.tw-pane-title { font-weight: 600; font-family: ui-monospace, monospace; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-pane-msg { flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Estado de la sesión: un punto vale más que una palabra cuando hay 4 paneles. */
.tw-st { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.tw-st[data-st="connecting"] { background: var(--warn); animation: tw-blink 1s ease-in-out infinite; }
.tw-st[data-st="open"] { background: var(--success); box-shadow: 0 0 8px var(--success); }
.tw-st[data-st="closed"] { background: var(--muted); }
.tw-st[data-st="error"] { background: var(--error); box-shadow: 0 0 8px var(--error); }
@keyframes tw-blink { 50% { opacity: .3; } }

/* Los botones del panel sólo asoman donde miras: menos ruido con 4 paneles abiertos. */
.tw-pbtn {
  flex: none; width: 22px; height: 22px; padding: 0; cursor: pointer; opacity: 0;
  border: 0; border-radius: 6px; background: transparent; color: var(--muted);
  font: inherit; font-size: 11px; line-height: 1; transition: .12s;
}
.tw-pane:hover .tw-pbtn, .tw-pane.focus .tw-pbtn, .tw-pbtn:focus-visible { opacity: .75; }
.tw-pbtn:hover { opacity: 1 !important; background: var(--panel2); color: var(--text); }
.tw-p-x:hover { background: color-mix(in srgb, var(--error) 20%, transparent); color: var(--error); }

.tw-pane-body { position: relative; flex: 1 1 auto; min-height: 0; min-width: 0; }
/* FitAddon mide ESTE elemento (el padre del .xterm) para calcular cols/rows: tiene que
 * tener un tamaño real y el hueco se hace con inset, no con padding del .xterm. */
.tw-term { position: absolute; inset: 6px 4px 6px 8px; }
.tw-term .xterm { height: 100%; }
.tw-term .xterm-viewport { background: transparent !important; scrollbar-width: thin; }
.tw-term .xterm-viewport::-webkit-scrollbar { width: 10px; }
.tw-term .xterm-viewport::-webkit-scrollbar-track { background: transparent; }
.tw-term .xterm-viewport::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--muted) 45%, transparent);
  border: 3px solid transparent; border-radius: 8px; background-clip: padding-box;
}
.tw-term .xterm-viewport::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 75%, transparent); background-clip: padding-box; }

/* ── velo de sesión muerta ────────────────────────────────────────────────────
 * Una sesión caída no cierra el panel: se puede reconectar sin perder el layout. */
.tw-veil {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 12px;
  background: color-mix(in srgb, var(--bg2) 78%, transparent); backdrop-filter: blur(2px);
  animation: tw-in .14s ease both;
}
.tw-veil-card {
  text-align: center; max-width: 320px; padding: 18px 22px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow);
}
.tw-veil-t { display: block; font-size: 14px; margin-bottom: 4px; }
.tw-veil-m { margin: 0 0 12px; color: var(--muted); font-size: 12.5px; line-height: 1.5; word-break: break-word; }
.tw-veil-b { cursor: pointer; }

/* ── pie ──────────────────────────────────────────────────────────────────── */
.tw-foot {
  display: flex; align-items: center; gap: 10px; flex: none; min-width: 0;
  padding: 5px 12px; border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel2) 60%, transparent);
  color: var(--muted); font-size: 11.5px;
}
.tw-foot-hint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-foot-hint b {
  color: var(--text); font-weight: 700; font-family: ui-monospace, monospace; font-size: 10.5px;
  padding: 1px 5px; margin-right: 1px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel2);
}
.tw-foot-sp { flex: 1 1 auto; }
.tw-foot-font { flex: none; font-variant-numeric: tabular-nums; }

/* ── ayuda ────────────────────────────────────────────────────────────────── */
.tw-help {
  position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; padding: 18px;
  background: color-mix(in srgb, var(--bg) 60%, transparent); backdrop-filter: blur(3px);
  animation: tw-in .14s ease both;
}
.tw-help-card {
  width: min(540px, 100%); max-height: 100%; overflow: auto; padding: 22px 24px;
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  background: linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, transparent), var(--panel));
  animation: tw-pop .18s ease both;
}
@keyframes tw-pop { from { opacity: 0; transform: translateY(6px) scale(.985); } to { opacity: 1; transform: none; } }
.tw-help-card h3 { margin: 0 0 14px; font-size: 17px; letter-spacing: -.2px; }
.tw-help-card dl { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; align-items: center; margin: 0; }
.tw-help-card dt { justify-self: start; }
.tw-help-card dd { margin: 0; color: var(--muted); font-size: 12.5px; }
.tw-help-card kbd {
  display: inline-block; white-space: nowrap;
  font-family: ui-monospace, monospace; font-size: 11.5px; font-weight: 700; color: var(--text);
  padding: 3px 7px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px;
  background: var(--panel2);
}
.tw-help-note {
  margin: 16px 0 14px; padding-top: 12px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: 12px; line-height: 1.55;
}
.tw-help-x { width: 100%; }

/* ── pantallas estrechas ─────────────────────────────────────────────────────
 * El overlay pasa a ocupar el 100%: en móvil los márgenes sólo roban terminal. */
@media (max-width: 820px) {
  .tw-overlay { padding: 0; }
  .tw-frame { border-radius: 0; border: 0; }
  .tw-id-txt small, .tw-foot-hint { display: none; }
  .tw-tab { max-width: 130px; }
}

/* Respeta a quien pide menos movimiento: el aviso de difusión sigue siendo rojo,
 * que es lo que importa; lo que se va es el parpadeo. */
@media (prefers-reduced-motion: reduce) {
  .tw-overlay, .tw-frame *, .tw-help, .tw-help-card, .tw-veil { animation: none !important; }
  .tw-btn:hover:not(:disabled) { transform: none; }
}