/* Monitor · clases propias. Las tres hojas tf-* se copian tal cual de TecnoFinanzas (tema de tarjetas); aquí solo va lo de Monitor,
   con prefijo mon- y únicamente con los tokens de tokens.css: ningún color literal. */

/* Buscador global de la barra: crece hasta ocupar el espacio libre antes de la cuenta. */
.mon-buscador { flex: 1 1 22rem; max-width: 40rem; display: flex; align-items: center; gap: var(--tf-space-2); margin: 0; }
.mon-buscador input[type="search"] {
  flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--tf-font-sm); padding: 0.3rem 0.65rem; min-height: 2rem;
  border: 1px solid var(--tf-line-strong); border-radius: var(--tf-radius-control); background: var(--tf-card); color: var(--tf-ink);
}
.mon-buscador input[type="search"]:focus-visible { outline: none; border-color: var(--tf-amber-ink); box-shadow: 0 0 0 3px var(--tf-amber-soft); }
.mon-buscador .tf-btn { gap: var(--tf-space-1); }

/* En pantallas chicas el botón queda solo con la lupa; el texto sigue para lectores de pantalla. */
@media (max-width: 44rem) {
  .mon-buscador { flex-basis: 100%; max-width: none; }
  .mon-buscador .tf-btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.mon-buscador-grande .tf-campo { max-width: 40rem; flex: 1 1 24rem; }

/* Resultados del buscador: título enlazado y, debajo, dónde vive en una línea de texto secundario. */
.mon-resultados ul { list-style: none; margin: 0; padding: 0; }
.mon-resultados li { padding: var(--tf-space-2) 0; border-bottom: var(--tf-filo); }
.mon-resultados li:last-child { border-bottom: 0; }
.mon-resultados h2 { display: flex; align-items: center; gap: var(--tf-space-2); }
.mon-donde { display: block; font-family: var(--tf-font-mono); font-size: var(--tf-font-xs); color: var(--tf-ink-2); overflow-wrap: anywhere; }

.mon-fases { margin: 0; padding-left: var(--tf-space-5); }
.mon-fases li { margin-bottom: var(--tf-space-2); }

/* Semáforo de servidores: siempre color y palabra. Rojo y naranja para estado, como en TecnoFinanzas; el ámbar queda para la acción principal. */
.mon-semaforo { display: inline-flex; align-items: center; gap: var(--tf-space-1); font-size: var(--tf-font-xs); font-weight: 600; padding: 0.1rem var(--tf-space-2);
  border-radius: var(--tf-radius-pastilla); border: 1px solid var(--tf-line-strong); color: var(--tf-ink-2); background: var(--tf-card); white-space: nowrap; }
.mon-semaforo::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--tf-gris); flex: none; }
.mon-semaforo--verde { color: var(--tf-green); border-color: var(--tf-green); background: var(--tf-green-soft); }
.mon-semaforo--verde::before { background: var(--tf-green); }
.mon-semaforo--amarillo { color: var(--tf-orange-ink); border-color: var(--tf-orange); background: var(--tf-orange-soft); }
.mon-semaforo--amarillo::before { background: var(--tf-orange); }
.mon-semaforo--rojo { color: var(--tf-red); border-color: var(--tf-red); background: var(--tf-red-soft); }
.mon-semaforo--rojo::before { background: var(--tf-red); }
.tf-titulo .mon-semaforo { font-size: var(--tf-font-sm); }

.mon-hallazgo-corto { display: block; font-size: var(--tf-font-xs); color: var(--tf-ink-2); }
.mon-hallazgos { list-style: none; margin: 0; padding: 0; }
.mon-hallazgos li { padding: var(--tf-space-2) 0; border-bottom: var(--tf-filo); }
.mon-hallazgos li:last-child { border-bottom: 0; }

/* Gráfica de 24 h: RAM en la serie principal, CPU en tinta. */
.mon-grafica-ram { fill: none; stroke: var(--tf-serie-1-fuerte); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.mon-grafica-cpu { fill: none; stroke: var(--tf-serie-2); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.mon-leyenda::before { content: ""; display: inline-block; width: 0.9rem; height: 3px; margin-right: 0.35rem; vertical-align: 0.2em; border-radius: 2px; }
.mon-leyenda--ram::before { background: var(--tf-serie-1-fuerte); }
.mon-leyenda--cpu::before { background: var(--tf-serie-2); }

/* Barra de uso de disco en SVG (sin estilos en línea por la CSP). */
.mon-barra-uso { display: block; width: 8rem; max-width: 100%; height: 0.5rem; }
.mon-barra-uso__fondo { fill: var(--tf-line-2); }
.mon-barra-uso__valor { fill: var(--tf-serie-2); }
.mon-barra-uso--aviso .mon-barra-uso__valor { fill: var(--tf-orange); }
.mon-barra-uso--grave .mon-barra-uso__valor { fill: var(--tf-red); }

.mon-huella { font-size: var(--tf-font-xs); overflow-wrap: anywhere; }
.mon-notas { white-space: pre-line; }
.mon-pasos { margin: 0; padding-left: var(--tf-space-5); }
.mon-pasos li { margin-bottom: var(--tf-space-2); }

/* Pools en la ficha del servidor: uno por renglón, plegados con <details>. */
.mon-pool { border-bottom: var(--tf-filo); padding: var(--tf-space-2) 0; }
.mon-pool:last-child { border-bottom: 0; }
.mon-pool > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: var(--tf-space-2); }
.mon-pool[open] > summary { margin-bottom: var(--tf-space-3); }

/* Listas largas plegadas dentro de una tarjeta (bases de la ficha del servidor). */
.mon-plegable > summary { cursor: pointer; font-weight: 600; padding: var(--tf-space-2) 0; }
.mon-plegable[open] > summary { margin-bottom: var(--tf-space-2); }

/* Puesta en producción: barra de pasos, paso con recursos al lado, casillas con su comando plegado. */
.mon-avance { margin-bottom: var(--tf-space-4); }
.mon-avance ol { list-style: none; margin: 0 0 var(--tf-space-2); padding: 0; display: flex; flex-wrap: wrap; gap: var(--tf-space-2); }
.mon-avance a { display: inline-flex; align-items: center; gap: var(--tf-space-2); min-height: 2.25rem; padding: 0 var(--tf-space-3) 0 var(--tf-space-1);
    border: 1px solid var(--tf-line-strong); border-radius: var(--tf-radius-pastilla); background: var(--tf-card); color: var(--tf-ink);
    font-size: var(--tf-font-sm); text-decoration: none; }
.mon-avance a:hover { border-color: var(--tf-ink-2); text-decoration: none; }
.mon-avance a[aria-current] { background: var(--tf-ink); border-color: var(--tf-ink); color: var(--tf-on-ink); font-weight: 600; }
.mon-avance__num { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--tf-canvas);
    color: var(--tf-ink-2); font-size: var(--tf-font-xs); font-weight: 700; font-variant-numeric: tabular-nums; }
.mon-avance--parcial .mon-avance__num { background: var(--tf-amber-soft); color: var(--tf-amber-ink); }
.mon-avance--completo .mon-avance__num { background: var(--tf-green-soft); color: var(--tf-green); }
.mon-avance a[aria-current] .mon-avance__num { background: var(--tf-on-ink); color: var(--tf-ink); }
/* En pantallas angostas solo el número (el nombre sigue para lectores de pantalla), salvo el paso abierto. */
@media (max-width: 44rem) {
    .mon-avance ol { gap: var(--tf-space-1); }
    .mon-avance a:not([aria-current]) { padding: 0 var(--tf-space-1); }
    .mon-avance a:not([aria-current]) .mon-avance__titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.mon-puesta { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--tf-space-4); align-items: start; }
.mon-puesta__apoyo { position: sticky; top: var(--tf-space-4); }
@media (max-width: 64rem) { .mon-puesta { grid-template-columns: minmax(0, 1fr); } .mon-puesta__apoyo { position: static; } }

.mon-recursos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tf-space-3); }
.mon-recursos li { display: grid; gap: var(--tf-space-1); }
.mon-recursos a { font-weight: 600; }

.mon-casillas { list-style: none; margin: var(--tf-space-3) 0; padding: 0; border-top: var(--tf-filo); }
/* minmax(0, 1fr): sin él, un comando largo ensancha la columna y se mete bajo los recursos. */
.mon-casillas > li { padding: var(--tf-space-3) 0; border-bottom: var(--tf-filo); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tf-space-1); }
.mon-casillas > li > .tf-ayuda { margin: 0 0 0 1.9rem; }
.mon-casilla { display: flex; align-items: flex-start; gap: var(--tf-space-2); margin: 0; }
.mon-casilla input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; flex: none; accent-color: var(--tf-green); }
.mon-casilla label { font-weight: 600; cursor: pointer; }
.mon-casillas--hecha .mon-casilla label, .mon-casillas--hecha .mon-casilla legend { color: var(--tf-ink-2); }
/* Dentro del paso, los fieldset no son tarjetas (ya están en una): las secciones conservan su leyenda y las preguntas se ven como etiquetas. */
.mon-puesta__paso .tf-tarjeta fieldset { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; margin: 0 0 var(--tf-space-4); }
.mon-puesta__paso fieldset.tf-campo > legend, .mon-casilla--condicional > legend { float: none; width: auto; border: 0; text-transform: none; letter-spacing: normal;
    color: var(--tf-ink); padding: 0; }
.mon-puesta__paso fieldset.tf-campo > legend { font-size: var(--tf-font-sm); font-weight: 600; margin: 0 0 var(--tf-space-1); }
.mon-puesta__paso .tf-tarjeta .mon-casilla--condicional { display: grid; gap: var(--tf-space-1); padding: 0 0 0 1.9rem; margin: 0; }
.mon-casilla--condicional > legend { font-size: var(--tf-font-md); font-weight: 600; margin: 0 0 var(--tf-space-1) -1.9rem; }
.mon-casilla--condicional .tf-ayuda { margin: 0; }

.mon-comando { margin-left: 1.9rem; min-width: 0; }
.mon-comando > summary { cursor: pointer; width: max-content; font-size: var(--tf-font-sm); color: var(--tf-enlace); }
.mon-comando pre { margin: var(--tf-space-2) 0 0; padding: var(--tf-space-3); background: var(--tf-canvas); border: var(--tf-filo); border-radius: var(--tf-radius-control);
    overflow-x: auto; font-size: var(--tf-font-sm); line-height: 1.5; user-select: all; }
.mon-comando code { font-size: inherit; white-space: pre; }

.mon-progreso { width: 7rem; height: 0.5rem; vertical-align: middle; accent-color: var(--tf-green); }