stackhelx 1.0.0__py3-none-any.whl

stackhelx/web/app.css

@@ -0,0 +1,1729 @@
+/* Hallmark · macrostructure: Index-First · tone: utilitario con contencion editorial
+ * genre: editorial · theme: custom "Ledger"
+ * vibe: "papel de cuaderno, tinta calida, una sola arcilla"
+ * paper oklch(96.5% 0.008 85) · accent oklch(56% 0.13 42) warm
+ * display: serif del sistema (Georgia) · body: sans nativa · data: mono
+ * axes: light paper / roman-serif display / warm accent
+ * pre-emit critique: P5 H5 E4 S5 R5 V4
+ *
+ * Sin webfonts a proposito: la CSP del servidor es default-src 'self' y una
+ * herramienta local que le pide fuentes a un CDN en cada carga esta peor
+ * diseñada que una que usa lo que ya tenes instalado. Georgia en grande, con
+ * tracking cerrado, tiene mas caracter que cualquier sans descargada.
+ */
+
+@import url("tokens.css");
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  overflow-x: clip;
+  margin: 0;
+}
+
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
+body {
+  background: var(--color-paper);
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  font-size: var(--text-base);
+  line-height: 1.55;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+::selection {
+  background: var(--color-accent-soft);
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-accent);
+  outline-offset: 2px;
+  /* Sin transicion: el anillo tiene que aparecer en el instante del foco. */
+}
+
+/* masthead ---------------------------------------------------------------- */
+
+.masthead {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-sm) var(--space-lg);
+  padding: var(--space-lg) var(--space-gutter) var(--space-md);
+  border-bottom: var(--rule) solid var(--color-rule-strong);
+}
+
+.wordmark {
+  font-family: var(--font-display);
+  font-size: var(--text-xl);
+  font-weight: 400;
+  letter-spacing: -0.022em;
+  margin: 0;
+}
+
+.masthead__status {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-ink-3);
+  margin: 0;
+}
+
+.masthead__status[data-down="true"] {
+  color: var(--color-bad);
+}
+
+/* Lo unico global de la pagina que habla de salud y no de inventario. Aparece
+   solo cuando hay algo caido: el resto del tiempo no ocupa lugar. */
+.masthead__health {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-bad);
+  margin: 0;
+}
+
+/* `display` propio le gana a la regla del navegador para [hidden]. */
+.masthead__health[hidden],
+.masthead__notify[hidden] {
+  display: none;
+}
+
+/* sheet ------------------------------------------------------------------- */
+
+.sheet {
+  flex: 1;
+  width: 100%;
+  max-width: 60rem;
+  margin: 0 auto;
+  padding: var(--space-xl) var(--space-gutter) var(--space-2xl);
+}
+
+.lede {
+  max-width: 42ch;
+  margin: 0 0 var(--space-xl);
+  color: var(--color-ink-2);
+}
+
+.empty {
+  max-width: 52ch;
+  color: var(--color-ink-2);
+  border-top: var(--rule) solid var(--color-rule);
+  padding-top: var(--space-lg);
+}
+
+.empty code {
+  font-family: var(--font-mono);
+  font-size: 0.9em;
+  color: var(--color-ink);
+}
+
+/* buscador y paginado ----------------------------------------------------- */
+
+/* `display: flex` le gana a la regla del navegador para [hidden]: sin esto, el
+   buscador y el paginador se ven siempre. */
+.find[hidden],
+.pager[hidden] {
+  display: none;
+}
+
+/* buscador y filtros estilo Raycast/Vercel -------------------------------- */
+
+.find {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+  margin-bottom: var(--space-lg);
+  padding: var(--space-sm);
+  background: var(--color-paper-2);
+  border: var(--rule) solid var(--color-rule-strong);
+  border-radius: var(--radius);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
+}
+
+.find__bar {
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+  padding: 0.4rem 0.75rem;
+  background: var(--color-paper);
+  border: var(--rule) solid var(--color-rule-strong);
+  border-radius: var(--radius);
+  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
+}
+
+.find__bar:focus-within {
+  border-color: var(--color-ink-2);
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08);
+}
+
+.find__icon {
+  inline-size: 1.1rem;
+  block-size: 1.1rem;
+  flex: none;
+  color: var(--color-ink-3);
+}
+
+.find__input {
+  flex: 1 1 auto;
+  min-width: 0;
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+  color: var(--color-ink);
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 0.2rem 0;
+}
+
+.find__input::placeholder {
+  color: var(--color-ink-3);
+}
+
+.kbd {
+  font-family: var(--font-mono);
+  font-size: 0.7rem;
+  color: var(--color-ink-3);
+  background: var(--color-paper-3);
+  border: var(--rule) solid var(--color-rule);
+  border-radius: 4px;
+  padding: 0.15rem 0.45rem;
+  line-height: 1;
+}
+
+.find__count {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-ink-3);
+  white-space: nowrap;
+}
+
+/* filter chips */
+
+.filter-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  font-family: var(--font-body);
+  font-size: var(--text-xs);
+  font-weight: 500;
+  color: var(--color-ink-2);
+  background: var(--color-paper);
+  border: var(--rule) solid var(--color-rule-strong);
+  border-radius: 9999px;
+  padding: 0.3rem 0.8rem;
+  cursor: pointer;
+  white-space: nowrap;
+  user-select: none;
+  transition:
+    background-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
+    color 160ms cubic-bezier(0.23, 1, 0.32, 1),
+    border-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
+    transform 160ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.chip:hover:not(:disabled) {
+  background: var(--color-paper-3);
+  color: var(--color-ink);
+  border-color: var(--color-ink-3);
+}
+
+.chip:active:not(:disabled) {
+  transform: scale(0.95);
+}
+
+.chip--active {
+  background: var(--color-ink);
+  color: var(--color-paper);
+  border-color: var(--color-ink);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
+}
+
+.chip--active:hover:not(:disabled) {
+  background: var(--color-ink);
+  color: var(--color-paper);
+  border-color: var(--color-ink);
+}
+
+.chip .dot {
+  inline-size: 0.45rem;
+  block-size: 0.45rem;
+}
+
+.pager {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+  margin-top: var(--space-md);
+}
+
+.pager__at {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-ink-3);
+}
+
+/* index de proyectos y acordeon ------------------------------------------- */
+
+.index {
+  display: grid;
+  gap: var(--space-md);
+}
+
+.project {
+  border: var(--rule) solid var(--color-rule-strong);
+  border-radius: var(--radius);
+  padding: var(--space-md) var(--space-lg);
+  background: var(--color-paper-2);
+  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
+}
+
+.project:hover {
+  border-color: var(--color-ink-3);
+}
+
+.project__head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-sm) var(--space-md);
+}
+
+.project__title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-md);
+}
+
+.project__name {
+  font-family: var(--font-display);
+  font-size: var(--text-lg);
+  font-weight: 400;
+  letter-spacing: -0.018em;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.project__head-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-left: auto;
+}
+
+.project__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.chevron {
+  display: inline-block;
+  font-size: 0.65rem;
+  transition: transform 220ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+.project[data-expanded="true"] .chevron {
+  transform: rotate(180deg);
+}
+
+.project__details {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 250ms cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms ease,
+    visibility 250ms;
+  opacity: 0;
+  /* `opacity: 0` no saca nada del orden de tabulacion ni del arbol de
+     accesibilidad: con la ficha cerrada se tabulaba a ciegas hasta "Quitar
+     proyecto". `visibility` si, y transiciona en discreto, asi que al abrir
+     aparece en el instante 0 y al cerrar aguanta hasta el final de la
+     animacion. */
+  visibility: hidden;
+}
+
+.project[data-expanded="true"] .project__details {
+  grid-template-rows: 1fr;
+  opacity: 1;
+  visibility: visible;
+  margin-top: var(--space-md);
+  padding-top: var(--space-md);
+  border-top: var(--rule) solid var(--color-rule);
+}
+
+.project__body {
+  overflow: hidden;
+}
+
+.project__path-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--space-xs) var(--space-sm);
+  margin: 0.15rem 0 0;
+}
+
+.project__path {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-ink-3);
+  margin: 0;
+  overflow-wrap: anywhere;
+  flex: 1 1 auto;
+}
+
+.project__path-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  flex-shrink: 0;
+}
+
+.project__path-copy {
+  font-size: var(--text-xs);
+  padding: 0.2rem 0.5rem;
+  color: var(--color-ink-3);
+  border-color: transparent;
+  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
+}
+
+.project__path-copy:hover {
+  color: var(--color-ink);
+  background: var(--color-paper-3);
+}
+
+.editor-select-wrap {
+  display: inline-flex;
+  align-items: center;
+}
+
+.editor__select {
+  font-family: var(--font-body);
+  font-size: var(--text-xs);
+  color: var(--color-ink-2);
+  background: var(--color-paper-2);
+  border: var(--rule) solid var(--color-rule-strong);
+  border-radius: var(--radius);
+  padding: 0.2rem 0.5rem;
+  cursor: pointer;
+  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
+}
+
+.editor__select:hover {
+  color: var(--color-ink);
+  border-color: var(--color-ink-3);
+}
+
+.editor__select:focus-visible {
+  outline: none;
+  border-color: var(--color-accent);
+}
+
+
+.project__error {
+  font-size: var(--text-sm);
+  color: var(--color-bad);
+  margin: var(--space-sm) 0 0;
+  padding-left: var(--space-sm);
+  border-left: 2px solid var(--color-bad);
+}
+
+/* estado ------------------------------------------------------------------ */
+
+.state {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45em;
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--color-ink-2);
+  margin: 0;
+  white-space: nowrap;
+}
+
+.dot {
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  border-radius: 50%;
+  background: var(--color-ink-3);
+  flex: none;
+}
+
+/* El color nunca lleva el significado solo: siempre va con su etiqueta. */
+[data-tone="ready"] .dot,
+.dot[data-tone="ready"] {
+  background: var(--color-ok);
+}
+[data-tone="starting"] .dot,
+.dot[data-tone="starting"] {
+  background: var(--color-warn);
+  animation: dot-pulse 1.4s ease-in-out infinite;
+}
+
+@keyframes dot-pulse {
+  0%,
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.4;
+    transform: scale(0.85);
+  }
+}
+[data-tone="warn"] .dot,
+.dot[data-tone="warn"] {
+  background: var(--color-warn);
+}
+[data-tone="bad"] .dot,
+.dot[data-tone="bad"] {
+  background: var(--color-bad);
+}
+
+/* servicios --------------------------------------------------------------- */
+
+.services {
+  list-style: none;
+  margin: var(--space-md) 0 0;
+  padding: 0;
+}
+
+/* Tabla, no fila estirada: las columnas van juntas para que el ojo lea
+   "api 8080 listo" como una unidad y no como tres datos sueltos. */
+.service {
+  display: grid;
+  grid-template-columns: minmax(0, 8rem) 4rem minmax(0, 1fr) auto auto;
+  align-items: center;
+  gap: var(--space-sm) var(--space-md);
+  padding: var(--space-xs) var(--space-sm);
+  margin-inline: calc(var(--space-sm) * -1);
+  border-radius: var(--radius);
+  transition: background-color var(--dur-fast) var(--ease-out);
+}
+
+.service:hover {
+  background: var(--color-paper-3);
+}
+
+.service__name {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  min-width: 0;
+  font-size: var(--text-sm);
+}
+
+.service__label {
+  overflow-wrap: anywhere;
+}
+
+/* El icono dice contenedor o proceso local, que es lo unico que se sabe del rol.
+   Nunca va solo: el nombre del servicio esta al lado. */
+.service__icon {
+  inline-size: 0.95rem;
+  block-size: 0.95rem;
+  flex: none;
+  fill: none;
+  stroke: var(--color-ink-3);
+  stroke-width: 1.25;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.service__port,
+.service__state {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--color-ink-2);
+}
+
+.service__port {
+  text-align: right;
+}
+
+/* Un puerto que otro proyecto registrado tambien declara. No es rojo: todavia
+   no rompio nada, y conviven mientras no corran a la vez. */
+.service__shared,
+.service__taken {
+  color: var(--color-warn);
+  cursor: help;
+}
+
+/* Unica accion en acento del index: abrir lo que esta corriendo es lo que mas se
+   hace desde aca, y es lo unico que se lleva un color. */
+.btn--open {
+  font-size: var(--text-xs);
+  padding: 0.3rem 0.6rem;
+  color: var(--color-accent);
+  border-color: var(--color-accent);
+  text-decoration: none;
+}
+
+.btn--open:hover {
+  background: var(--color-accent-soft);
+  border-color: var(--color-accent);
+}
+
+/* Badge: el estado se lee como una unidad y no como texto suelto. El color va
+   siempre con la etiqueta y con el punto, nunca solo. */
+.service__state {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45em;
+  justify-self: start;
+  max-inline-size: 100%;
+  min-width: 0;
+  padding: 0.15rem 0.5rem;
+  border-radius: 999px;
+  /* No paper-3: es el mismo fondo que toma la fila al pasar el mouse y el badge
+     se disolveria justo cuando lo estas mirando. */
+  background: var(--color-rule);
+}
+
+.service__state[data-tone="ready"] {
+  color: var(--color-ok-ink);
+  background: color-mix(in oklch, var(--color-ok) 14%, transparent);
+}
+
+.service__state[data-tone="starting"] {
+  color: var(--color-warn-ink);
+  background: color-mix(in oklch, var(--color-warn) 16%, transparent);
+}
+
+/* Ni verde ni alarma: el puerto esta tomado, y por algo que no es un problema.
+   No reusa "starting" porque ese pulsa, y aca no hay nada en transicion. */
+.service__state[data-tone="warn"] {
+  color: var(--color-warn-ink);
+  background: color-mix(in oklch, var(--color-warn) 14%, transparent);
+}
+
+.service__state[data-tone="bad"] {
+  color: var(--color-bad-ink);
+  background: var(--color-bad-soft);
+}
+
+.service__state span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.service__metrics {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-ink-2);
+  padding: 0.15rem 0.4rem;
+  background: var(--color-paper-3);
+  border-radius: var(--radius-sm);
+  white-space: nowrap;
+  align-self: center;
+}
+
+.service__act {
+  justify-self: start;
+}
+
+/* acciones ---------------------------------------------------------------- */
+
+.project__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-top: var(--space-md);
+}
+
+.project__drop {
+  margin-left: auto;
+  color: var(--color-ink-3);
+}
+
+/* El segundo paso de congelar: el boton dice que archivo va a escribir y se
+   desarma solo. Sin color de peligro, porque no destruye nada. */
+.project__freeze[data-armed] {
+  color: var(--color-ink);
+  border-color: var(--color-ink-3);
+}
+
+.btn {
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+  line-height: 1;
+  color: var(--color-ink);
+  background: var(--color-paper-2);
+  border: var(--rule) solid var(--color-rule-strong);
+  border-radius: var(--radius);
+  padding: 0.55rem 0.85rem;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background-color var(--dur-fast) var(--ease-out),
+    border-color var(--dur-fast) var(--ease-out);
+}
+
+.btn:hover:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--color-paper-3);
+  border-color: var(--color-ink-3);
+}
+
+.btn:active:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--color-rule);
+}
+
+.btn:disabled {
+  color: var(--color-ink-3);
+  background: transparent;
+  border-color: var(--color-rule);
+  cursor: not-allowed;
+}
+
+.btn[data-busy="true"] {
+  color: transparent;
+  cursor: progress;
+  pointer-events: none;
+  position: relative;
+}
+
+.btn[data-busy="true"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  margin: auto;
+  width: 1em;
+  height: 1em;
+  border: 2px solid var(--color-rule-strong);
+  border-top-color: var(--color-ink);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+.btn[aria-disabled="true"] {
+  color: var(--color-ink-3);
+  background: transparent;
+  border-color: var(--color-rule);
+  cursor: not-allowed;
+}
+
+.btn--primary {
+  background: var(--color-ink);
+  color: var(--color-paper);
+  border-color: var(--color-ink);
+}
+
+.btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--color-accent);
+  border-color: var(--color-accent);
+}
+
+.btn--quiet {
+  background: transparent;
+  border-color: transparent;
+  padding-inline: 0.5rem;
+}
+
+.btn--sm {
+  font-size: var(--text-xs);
+  padding: 0.35rem 0.55rem;
+}
+
+.btn--quiet:hover:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--color-paper-3);
+  border-color: transparent;
+}
+
+.btn--kill {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  padding: 0.3rem 0.55rem;
+  color: var(--color-bad);
+  border-color: var(--color-bad-rule);
+}
+
+.btn--kill:hover:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--color-bad-soft);
+  border-color: var(--color-bad);
+}
+
+.btn--alt-port {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  padding: 0.3rem 0.55rem;
+  color: var(--color-ink-2);
+  border-color: var(--color-rule-strong);
+}
+
+.btn--alt-port:hover:not(:disabled):not([aria-disabled="true"]) {
+  background: var(--color-paper-2);
+  color: var(--color-ink);
+  border-color: var(--color-ink-2);
+}
+
+.profile {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.profile[hidden] {
+  display: none;
+}
+
+.profile__label {
+  font-size: var(--text-xs);
+  color: var(--color-ink-3);
+}
+
+.profile__select {
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+  color: var(--color-ink);
+  background: var(--color-paper-2);
+  border: var(--rule) solid var(--color-rule-strong);
+  border-radius: var(--radius);
+  padding: 0.5rem 0.5rem;
+}
+
+/* logs -------------------------------------------------------------------- */
+
+.logs__box {
+  margin-top: var(--space-md);
+}
+
+.logs__toolbar {
+  display: flex;
+  gap: var(--space-xs);
+  align-items: center;
+  margin-bottom: var(--space-xs);
+}
+
+.logs__filter {
+  flex: 1;
+  box-sizing: border-box;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-ink);
+  background: var(--color-paper-2);
+  border: var(--rule) solid var(--color-rule);
+  border-radius: var(--radius);
+  padding: 0.4rem 0.6rem;
+}
+
+.logs__live {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-good);
+  background: color-mix(in oklch, var(--color-good) 12%, transparent);
+  border: var(--rule) solid var(--color-good);
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  white-space: nowrap;
+}
+
+.logs__live::before {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--color-good);
+  box-shadow: 0 0 4px var(--color-good);
+}
+
+.logs {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  line-height: 1.6;
+  color: var(--color-ink-2);
+  background: var(--color-paper-2);
+  border: var(--rule) solid var(--color-rule);
+  border-radius: var(--radius);
+  margin: 0;
+  padding: var(--space-md);
+  max-block-size: 22rem;
+  overflow: auto;
+  overscroll-behavior: contain;
+  overflow-wrap: anywhere;
+}
+
+.history__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-xs);
+  text-align: left;
+}
+
+.history__table th,
+.history__table td {
+  padding: var(--space-xs) var(--space-sm);
+  border-bottom: var(--rule) solid var(--color-rule-strong);
+}
+
+.history__table th {
+  font-weight: 500;
+  color: var(--color-ink-2);
+}
+
+.history__table td {
+  color: var(--color-ink);
+  white-space: pre-line;
+}
+
+.history__table tr:last-child td {
+  border-bottom: 0;
+}
+
+.chip--ports {
+  margin-left: auto;
+}
+
+/* grafo de dependencias --------------------------------------------------- */
+
+.graph__box {
+  margin-top: var(--space-sm);
+  background: var(--color-paper-2);
+  border: var(--rule) solid var(--color-rule);
+  border-radius: var(--radius);
+  padding: var(--space-sm);
+  overflow: hidden;
+}
+
+.graph__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--space-xs);
+}
+
+.graph__title {
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  color: var(--color-ink-3);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.graph__canvas-wrapper {
+  overflow-x: auto;
+  padding: var(--space-xs) 0;
+}
+
+.graph__svg {
+  display: block;
+  margin: 0 auto;
+  overflow: visible;
+}
+
+/* auditor seguro de entorno (.env) --------------------------------------- */
+
+.env__box {
+  margin-top: var(--space-sm);
+  background: var(--color-paper-2);
+  border: var(--rule) solid var(--color-rule);
+  border-radius: var(--radius);
+  padding: var(--space-sm);
+  font-size: var(--text-sm);
+}
+
+.env__header {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  margin-bottom: var(--space-xs);
+}
+
+.env__status-badge {
+  font-size: var(--text-xs);
+  font-family: var(--font-mono);
+  padding: 2px 6px;
+  border-radius: var(--radius-sm);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.env__status-badge--ok {
+  background: color-mix(in oklch, var(--color-ok) 15%, transparent);
+  color: var(--color-ok-ink);
+  border: var(--rule) solid color-mix(in oklch, var(--color-ok) 30%, transparent);
+}
+
+.env__status-badge--warn {
+  background: color-mix(in oklch, var(--color-warn) 18%, transparent);
+  color: var(--color-warn-ink);
+  border: var(--rule) solid color-mix(in oklch, var(--color-warn) 35%, transparent);
+}
+
+.env__summary {
+  color: var(--color-ink-2);
+  font-size: var(--text-xs);
+}
+
+.env__details {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  margin-top: var(--space-xs);
+}
+
+.env__section-title {
+  display: block;
+  font-size: var(--text-xs);
+  color: var(--color-ink-2);
+  font-weight: 500;
+  margin-bottom: 2px;
+}
+
+.env__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.env__key-pill {
+  display: inline-block;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  padding: 1px 6px;
+  border-radius: var(--radius-sm);
+  background: var(--color-paper-3);
+  border: var(--rule) solid var(--color-rule);
+  color: var(--color-ink);
+}
+
+.env__key-pill--missing {
+  border-color: color-mix(in oklch, var(--color-warn) 40%, transparent);
+  color: var(--color-warn-ink);
+}
+
+.env__key-pill--placeholder {
+  border-color: var(--color-bad-rule);
+  color: var(--color-bad-ink);
+}
+
+/* alta de proyecto -------------------------------------------------------- */
+
+.enroll {
+  margin-top: var(--space-xl);
+  padding-top: var(--space-lg);
+  border-top: var(--rule) solid var(--color-rule-strong);
+}
+
+.enroll__label {
+  display: block;
+  font-size: var(--text-xs);
+  color: var(--color-ink-3);
+  margin-bottom: var(--space-sm);
+}
+
+.enroll__row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+}
+
+.enroll__tools {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-sm);
+  margin-top: var(--space-sm);
+}
+
+.tools__docker {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-ink-3);
+  white-space: nowrap;
+}
+
+.tools__docker[data-tone="bad"] {
+  color: var(--color-bad);
+}
+
+/* `display` propio le gana a la regla del navegador para [hidden]. */
+.tools__docker[hidden] {
+  display: none;
+}
+
+.orphan--empty {
+  color: var(--color-ink-3);
+  font-size: var(--text-sm);
+}
+
+.project__docker-warning {
+  font-size: var(--text-xs);
+  color: oklch(50% 0.12 27);
+  background: oklch(58% 0.19 27 / 0.1);
+  border: 1px solid oklch(55% 0.12 27 / 0.3);
+  padding: var(--space-xs) var(--space-sm);
+  border-radius: var(--radius);
+  margin-top: var(--space-xs);
+}
+
+.enroll__input {
+  flex: 1 1 20rem;
+  min-width: 0;
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--color-ink);
+  background: var(--color-paper-2);
+  border: var(--rule) solid var(--color-rule-strong);
+  border-radius: var(--radius);
+  padding: 0.55rem 0.7rem;
+}
+
+.enroll__input::placeholder {
+  color: var(--color-ink-3);
+}
+
+/* explorador de carpetas -------------------------------------------------- */
+
+.picker {
+  inline-size: min(34rem, calc(100vw - 2 * var(--space-md)));
+  max-block-size: min(30rem, 80vh);
+  padding: 0;
+  color: var(--color-ink);
+  background: var(--color-paper-2);
+  border: var(--rule) solid var(--color-rule-strong);
+  border-radius: var(--radius);
+}
+
+.picker[open] {
+  display: flex;
+  flex-direction: column;
+}
+
+.picker::backdrop {
+  background: oklch(20% 0.01 70 / 0.45);
+}
+
+.picker__head {
+  display: flex;
+  flex: none;
+  align-items: baseline;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+  border-bottom: var(--rule) solid var(--color-rule);
+}
+
+.picker__path {
+  flex: 1;
+  min-width: 0;
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-ink-2);
+  overflow-wrap: anywhere;
+}
+
+.picker__frequent {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  padding: 0.35rem var(--space-md);
+  background: var(--color-paper-2);
+  border-bottom: var(--rule) solid var(--color-rule);
+  overflow-x: auto;
+}
+
+.picker__frequent-label {
+  font-size: var(--text-xs);
+  color: var(--color-ink-3);
+  white-space: nowrap;
+}
+
+.picker__frequent-chips {
+  display: flex;
+  gap: var(--space-xs);
+  flex-wrap: nowrap;
+}
+
+.picker__chip {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-ink-2);
+  background: var(--color-paper);
+  border: var(--rule) solid var(--color-rule-strong);
+  border-radius: var(--radius-sm);
+  padding: 0.15rem 0.5rem;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
+}
+
+.picker__chip:hover {
+  background: var(--color-paper-3);
+  color: var(--color-ink);
+  border-color: var(--color-ink-3);
+}
+
+.enroll--dragover {
+  border-color: var(--color-accent) !important;
+  background: color-mix(in oklch, var(--color-accent) 4%, transparent);
+}
+
+.picker__list {
+  flex: 1;
+  /* Sin esto la lista no se encoge (min-height: auto por defecto en flex), crece
+     mas alla del alto del dialogo y empuja el pie fuera de la pantalla: los
+     botones Subir y Registrar quedan inalcanzables. */
+  min-block-size: 0;
+  overflow-y: auto;
+  list-style: none;
+  padding: var(--space-xs) 0;
+  margin: 0;
+}
+
+.picker__row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-md);
+  inline-size: 100%;
+  text-align: start;
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+  color: var(--color-ink);
+  background: none;
+  border: 0;
+  padding: 0.45rem var(--space-md);
+  cursor: pointer;
+}
+
+.picker__row:hover,
+.picker__row:focus-visible {
+  background: var(--color-paper-3);
+}
+
+.picker__name {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.picker__markers {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-accent);
+  white-space: nowrap;
+}
+
+.picker__empty,
+.picker__note {
+  font-size: var(--text-xs);
+  color: var(--color-ink-3);
+  padding: var(--space-sm) var(--space-md);
+}
+
+.picker__foot {
+  display: flex;
+  flex: none;
+  justify-content: space-between;
+  gap: var(--space-sm);
+  padding: var(--space-md);
+  border-top: var(--rule) solid var(--color-rule);
+}
+
+.picker__nav {
+  display: flex;
+  gap: var(--space-sm);
+}
+
+.auth {
+  padding: var(--space-md);
+}
+
+.auth__hint {
+  font-size: var(--text-xs);
+  color: var(--color-ink-2);
+  margin-bottom: var(--space-sm);
+}
+
+.auth__input {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* colofon y avisos -------------------------------------------------------- */
+
+.colophon {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: var(--space-sm);
+  border-top: var(--rule) solid var(--color-rule);
+  padding: var(--space-md) var(--space-gutter);
+  font-size: var(--text-xs);
+  color: var(--color-ink-3);
+}
+
+.colophon__build {
+  font-family: var(--font-mono);
+}
+
+.flash {
+  position: fixed;
+  z-index: 2;
+  inset-block-end: var(--space-md);
+  inset-inline: var(--space-gutter);
+  max-inline-size: 32rem;
+  margin-inline: auto;
+  font-size: var(--text-sm);
+  color: var(--color-paper);
+  background: var(--color-ink);
+  border-radius: var(--radius);
+  padding: var(--space-sm) var(--space-md);
+}
+
+.flash[data-tone="bad"] {
+  background: var(--color-bad);
+}
+
+/* orphans ------------------------------------------------------------------ */
+
+/* En reposo la seccion es neutra, y el rojo con el punto que late aparece solo
+ * cuando hay un intruso. La seccion se muestra siempre para informar que el
+ * chequeo corrio; vestida de alarma para decir "no hay nada" comunicaba lo
+ * contrario, y un rojo encendido todo el tiempo deja de significar rojo: el dia
+ * que aparezca uno de verdad no se distingue del dia anterior.
+ *
+ * Lo pone `refreshOrphans` con data-tone, del mismo modo que los estados de
+ * servicio: el color nunca lleva el significado solo, siempre va con su texto. */
+.orphans {
+  margin-top: var(--space-xl);
+  background: var(--color-paper);
+  border: var(--rule) solid var(--color-rule-strong);
+  border-radius: var(--radius);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+
+.orphans[data-tone="bad"] {
+  border-color: oklch(55% 0.18 27 / 0.4);
+}
+
+.orphans__heading {
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+  font-weight: 600;
+  color: var(--color-ink-2);
+  background: var(--color-paper-3);
+  padding: var(--space-sm) var(--space-md);
+  border-bottom: var(--rule) solid var(--color-rule);
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+.orphans[data-tone="bad"] .orphans__heading {
+  color: oklch(65% 0.2 27);
+  background: oklch(55% 0.18 27 / 0.1);
+  border-bottom-color: oklch(55% 0.18 27 / 0.25);
+}
+
+.orphans__heading::before {
+  content: "";
+  display: block;
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--color-ink-3);
+}
+
+.orphans[data-tone="bad"] .orphans__heading::before {
+  background: oklch(65% 0.2 27);
+  box-shadow: 0 0 0 2px oklch(65% 0.2 27 / 0.25);
+  animation: orphan-pulse 1.8s ease-in-out infinite;
+}
+
+@keyframes orphan-pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.35; }
+}
+
+.orphans__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+  padding: var(--space-sm) var(--space-md) 0;
+}
+
+.orphans__desc {
+  font-size: var(--text-xs);
+  color: var(--color-ink-3);
+  margin: 0;
+}
+
+/* Los tokens y no un oklch a mano: --color-bad y sus derivados ya se redefinen
+   para el tema oscuro, y un color crudo se quedaria con el claro en los dos. */
+.btn--kill-all {
+  font-family: var(--font-body);
+  font-size: var(--text-xs);
+  padding: 0.35rem 0.75rem;
+  background: var(--color-bad-soft);
+  border: var(--rule) solid var(--color-bad-rule);
+  color: var(--color-bad);
+  border-radius: var(--radius);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.15s ease, border-color 0.15s ease;
+}
+
+.btn--kill-all:hover {
+  border-color: var(--color-bad);
+}
+
+.orphans__list {
+  list-style: none;
+  margin: 0;
+  padding: var(--space-xs) var(--space-md) var(--space-sm);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.orphan {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-md);
+  padding: var(--space-xs) var(--space-sm);
+  background: var(--color-paper-2);
+  border: var(--rule) solid var(--color-rule);
+  border-radius: var(--radius);
+}
+
+.orphan:hover {
+  background: var(--color-paper-3);
+}
+
+.orphans[data-tone="bad"] .orphan:hover {
+  background: oklch(55% 0.12 27 / 0.07);
+}
+
+/* Elegir cuales cerrar. Sale solo con dos o mas filas, porque con una sola el
+ * boton Cerrar de esa fila ya es la accion. Tamaño de dedo, y con el acento del
+ * proyecto para que no parezca un control del navegador pegado encima. */
+.orphan__pick {
+  flex: none;
+  inline-size: 1rem;
+  block-size: 1rem;
+  /* El cuadro sigue midiendo 1rem; el area sensible llega a 24px, que es lo que
+     pide WCAG 2.5.8. La casilla se agrega directo a la fila desde el JS, sin
+     `<label>` alrededor, asi que el cuadro ES todo el blanco del puntero. Las de
+     `.clean__row` no tienen el problema porque su label extiende el area. */
+  padding: 0.25rem;
+  box-sizing: content-box;
+  margin: 0;
+  accent-color: var(--color-accent);
+  cursor: pointer;
+}
+
+.orphan__port {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  font-weight: 600;
+  color: oklch(65% 0.2 27);
+  background: oklch(55% 0.18 27 / 0.15);
+  padding: 0.15rem 0.4rem;
+  border-radius: var(--radius);
+  white-space: nowrap;
+}
+
+.orphan__info {
+  flex: 1;
+  min-width: 0;
+}
+
+.orphan__name {
+  font-size: var(--text-sm);
+  font-weight: 500;
+  color: var(--color-ink);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Por que esta fila esta en la lista. Va entre el proceso y su linea de
+ * comando, con el color de aviso: el dato no es del proceso, es del puerto. */
+.orphan__claim {
+  font-size: var(--text-xs);
+  color: var(--color-warn);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.orphan__meta {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-ink-3);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.orphan__kill {
+  font-family: var(--font-body);
+  font-size: var(--text-xs);
+  padding: 0.3rem 0.6rem;
+  background: oklch(55% 0.18 27 / 0.15);
+  border: var(--rule) solid oklch(55% 0.18 27 / 0.4);
+  color: oklch(70% 0.2 27);
+  border-radius: var(--radius);
+  cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease;
+  white-space: nowrap;
+}
+
+.orphan__kill:hover {
+  background: oklch(55% 0.18 27 / 0.3);
+  border-color: oklch(55% 0.18 27 / 0.7);
+}
+
+/* mobile ------------------------------------------------------------------ */
+
+@media (max-width: 34rem) {
+  .service {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .service__state {
+    grid-column: 1 / -1;
+  }
+
+  .service__metrics {
+    grid-column: 1 / -1;
+    justify-self: start;
+  }
+
+  .service__act {
+    grid-column: 1 / -1;
+    justify-self: start;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-sm);
+    margin-top: var(--space-xs);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* Tuneles abiertos. Hereda la caja de `.orphans` y solo cambia el acento: un
+ * intruso es un estorbo local, un tunel es un puerto tuyo abierto a internet.
+ * El ambar lo separa del rojo de intrusos sin gritar como un error, porque
+ * abrirlo fue una decision deliberada y no una falla. */
+.tunnels {
+  border-color: oklch(70% 0.15 75 / 0.55);
+}
+
+/* Con la caja de intrusos ya neutra en reposo, el encabezado heredado quedaba
+ * gris. Esta seccion solo existe cuando hay puertos abiertos a internet, asi
+ * que siempre lleva su acento: no tiene estado de reposo. */
+.tunnels .orphans__heading {
+  color: oklch(58% 0.14 75);
+  background: oklch(70% 0.15 75 / 0.12);
+  border-bottom-color: oklch(70% 0.15 75 / 0.3);
+}
+
+.tunnels .orphans__heading::before {
+  background: oklch(65% 0.16 75);
+  box-shadow: 0 0 0 2px oklch(65% 0.16 75 / 0.25);
+}
+
+.tunnels .orphan__port {
+  /* El fondo tambien: `.orphan__port` trae texto Y fondo rojos, asi que cambiar
+     solo el color dejaba un puerto ambar sobre un chip rojo dentro de una
+     seccion ambar. Un tunel abierto y un intruso no significan lo mismo. */
+  color: oklch(52% 0.13 75);
+  background: oklch(70% 0.15 75 / 0.15);
+}
+
+/* `.orphan__name` viene con `white-space: nowrap` y elipsis, que para un nombre
+ * de proceso esta bien y para una URL no: la cortaba a la mitad. El
+ * `word-break` solo no alcanzaba, porque contra un `nowrap` no hay donde
+ * quebrar. La URL entera es el dato de esta fila. */
+.tunnels .orphan__name {
+  white-space: normal;
+  overflow: visible;
+  overflow-wrap: anywhere;
+  word-break: break-all;
+}
+
+/* dialogo de limpieza ------------------------------------------------------ */
+
+.clean {
+  flex: 1;
+  min-block-size: 0;
+  overflow-y: auto;
+  padding: var(--space-md);
+}
+
+/* La tabla de `docker system df` tal cual la formatea Docker: alineada por
+   espacios, asi que necesita mono y no puede envolver. */
+.clean__usage {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-ink-2);
+  background: var(--color-paper);
+  border: var(--rule) solid var(--color-rule);
+  border-radius: var(--radius);
+  margin: 0 0 var(--space-md);
+  padding: var(--space-sm);
+  overflow-x: auto;
+  white-space: pre;
+}
+
+.clean__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+}
+
+.clean__row {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-sm);
+  cursor: pointer;
+}
+
+.clean__row input {
+  flex: none;
+  accent-color: var(--color-accent);
+  cursor: pointer;
+}
+
+/* Los volumenes tienen datos adentro y no se regeneran: el unico de la lista
+   que no se puede deshacer, y por eso el unico que lleva color. */
+.clean__row[data-riesgo="true"] {
+  color: var(--color-bad);
+}
+
+.clean__warn {
+  font-size: var(--text-xs);
+  color: var(--color-ink-3);
+}
+
+/* telemetria mcp modal ------------------------------------------------------ */
+
+.mcp-modal {
+  max-width: 680px;
+  width: 90vw;
+}
+
+.mcp__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-md);
+  margin-top: var(--space-sm);
+}
+
+.mcp__stats {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-md);
+  font-size: var(--text-sm);
+  color: var(--color-ink-2);
+  background: var(--color-paper);
+  padding: var(--space-sm) var(--space-md);
+  border: var(--rule) solid var(--color-rule);
+  border-radius: var(--radius);
+}
+
+.mcp__stat strong {
+  color: var(--color-ink);
+  font-family: var(--font-mono);
+}
+
+.mcp__breakdown {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-xs);
+}
+
+.mcp__pill {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  padding: 0.2rem 0.5rem;
+  background: var(--color-paper-2);
+  border: var(--rule) solid var(--color-rule-strong);
+  border-radius: 9999px;
+  color: var(--color-ink-2);
+}
+
+.mcp__table-scroll {
+  max-height: 320px;
+  overflow-y: auto;
+  border: var(--rule) solid var(--color-rule);
+  border-radius: var(--radius);
+  background: var(--color-paper);
+}
+
+.mcp__table {
+  width: 100%;
+  margin: 0;
+}
+
+.mcp__tool-name {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-ink);
+}
+
+.mcp__status-badge {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  padding: 0.15rem 0.4rem;
+  border-radius: 3px;
+}
+
+.mcp__status-badge--ok {
+  background: color-mix(in oklch, var(--color-ok) 14%, transparent);
+  color: var(--color-ok-ink);
+}
+
+.mcp__status-badge--rate_limited {
+  background: color-mix(in oklch, var(--color-warn) 16%, transparent);
+  color: var(--color-warn-ink);
+}
+
+.mcp__status-badge--error {
+  background: var(--color-bad-soft);
+  color: var(--color-bad-ink);
+}
+