/* La paleta y las formas salen de los mockups de Overa
   (app-mockups/grafana/00-citrix-kubermetes.css): fondo gris azulado, paneles
   blancos redondeados con sombra suave, azul para la navegacion y naranja para
   las migas. Los colores de nivel son los de ahi, un poco mas oscuros en el
   texto para que un 12 px sobre blanco siga leyendose. */
:root{--bg:#eef1f4;--panel:#fff;--ink:#2c3a44;--ink2:#5a6b76;--ink3:#7d8b95;
--rule:#e4e8ec;--rule2:#eef1f4;--accent:#d05f11;--accent-d:#a84c0c;--accent-w:#fdf1e8;
--blue:#2f6fa5;--blue-bg:#eaf1fa;--blue-badge:#dbe7f6;
--ok:#2f7a41;--warn:#8a6212;--crit:#b3402c;--grey:#9aa7b0;
--ok-l:#46a35a;--warn-l:#e0a63b;--crit-l:#e0533d;
--ok-w:#e9f5ec;--warn-w:#fbf1de;--crit-w:#fbe7e3;
--shadow:0 1px 3px rgba(30,45,55,.06),0 1px 2px rgba(30,45,55,.05);
--radio:12px}
*{box-sizing:border-box}
/* Un elemento con [hidden] tiene que desaparecer AUNQUE su clase le ponga un
   display. Sin esto el filtro del lateral no filtraba nada: `.nav-item` es
   display:flex y eso gana al display:none que el navegador da a [hidden], asi
   que las filas se marcaban como escondidas y seguian a la vista. */
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);
font:14px/1.5 -apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
header.top{background:var(--panel);border-bottom:1px solid var(--rule);padding:16px 24px}
header.top h1{margin:0;font-size:20px;font-weight:700}
header.top .meta{color:var(--ink3);font-size:12.5px;margin-top:2px}
/* Las migas: dentro del contenido, arriba y a la izquierda, justo encima de las
   pestanas. */
.crumb{font-size:13px;color:var(--ink2);margin:0 0 10px}
.crumb a{cursor:pointer;text-decoration:none;color:var(--accent);font-weight:600}
.crumb a:hover{text-decoration:underline;color:var(--accent-d)}
/* El nombre de la herramienta: es la casa, no un enlace a otra parte (todavia).
   Cuando haya mas secciones al mismo nivel que Servidores, sera un enlace. */
.crumb .croot{color:var(--ink2);font-weight:700}
.crumb span.sep{color:var(--ink3);margin:0 6px}
.layout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px;
align-items:start;padding:16px 24px 60px}
@media (max-width:900px){.layout{grid-template-columns:1fr}}
aside{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radio);
box-shadow:var(--shadow);overflow:hidden;position:sticky;top:16px;max-height:calc(100vh - 32px);
overflow-y:auto}
/* La cabecera del lateral es la vuelta al nivel 1, y se ve que lo es. */
.nav-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
background:var(--blue-bg);padding:14px 18px;cursor:pointer;font-size:15px;font-weight:700;
color:var(--blue)}
.nav-head:hover{background:var(--blue-badge)}
.nav-head.active{background:var(--blue-badge)}
/* Un grupo del lateral: SERVIDORES / NODOS / BASES DE DATOS, con su cuenta. */
.nav-group{display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:13px 18px 7px;font-size:11.5px;font-weight:700;color:var(--ink2);
text-transform:uppercase;letter-spacing:.05em}
.nav-group:not(:first-of-type){border-top:1px solid var(--rule);margin-top:6px}
.nav-item{padding:8px 16px;cursor:pointer;display:flex;align-items:center;gap:9px}
/* La salud, un punto y no un numero. */
.pt{width:8px;height:8px;border-radius:50%;flex:0 0 auto;background:var(--grey)}
.pt.ok{background:var(--ok-l)}
.pt.warn{background:var(--warn-l)}
.pt.crit{background:var(--crit-l)}
/* Etiqueta de aviso del ciclo de vida: no es salud, asi que no es una chapita
   de nivel. */
.nav-item .tag{flex:0 0 auto;font-size:9.5px;font-weight:700;letter-spacing:.04em;
color:var(--crit);background:var(--crit-w);border-radius:4px;padding:1px 5px}
.nav-item:hover{background:var(--rule2)}
.nav-item.active{background:var(--blue-bg)}
.nav-item.active .nm{color:var(--blue);font-weight:600}
.nav-item .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:13px;
cursor:pointer;line-height:1.25}
.nav-item .sub{display:flex;align-items:center;gap:5px}
.nav-item .sub .eico{margin:0;vertical-align:-2px}
/* La flecha del arbol: despliega sin cambiar de vista. Area de pulsacion propia,
   que a 10 px de ancho no se acierta. */
.nav-item .caret{flex:0 0 auto;width:18px;text-align:center;color:var(--ink3);cursor:pointer;
font-size:11px;line-height:1;user-select:none}
.nav-item .caret:hover{color:var(--blue)}
.nav-item .caret.on{color:var(--blue)}
/* Cabecera de seccion: titulo a la izquierda, mando a la derecha, misma linea.
   Y la primera de cada columna sin margen arriba, que es lo que alinea las dos
   columnas de una pantalla. */
.sechd{display:flex;align-items:center;justify-content:space-between;gap:14px;
flex-wrap:wrap;margin:26px 0 8px;min-height:28px}
.sechd h3{margin:0}
.sechd .brange{margin:0}
.dos > div > .sechd:first-child{margin-top:0}
.lado > .sechd:first-child{margin-top:0}

/* Cabecera pulsable: ordena por esa columna. La flecha dice por cual y en que
   sentido. */
th.ord{cursor:pointer;user-select:none}
th.ord:hover{color:var(--blue)}
.sort-arrow{color:var(--grey);margin-left:4px;font-size:9px}

/* ── Filtrar tablas ───────────────────────────────────────────────────────
   La barra de busqueda de una tabla, con su contador a la derecha. */
.qtabla{margin-top:6px}
.table-toolbar{display:flex;align-items:center;gap:10px;margin:8px 0 4px;flex-wrap:wrap}
.table-hint{font-size:12px;color:var(--ink3)}
.search-input{border:1px solid var(--rule);border-radius:999px;padding:6px 14px;font:inherit;
font-size:12.5px;color:var(--ink);background:var(--panel);min-width:300px;flex:0 1 420px}
.search-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg)}
/* Lo que esta marcado, en pastillas con su cruz: quitar una consulta de las
   graficas no puede obligar a volver a buscar su fila en la tabla. */
.qchips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.qchip{display:inline-flex;align-items:center;gap:6px;max-width:340px;background:var(--blue-bg);
color:var(--ink);border:1px solid var(--blue-badge);border-radius:999px;padding:3px 6px 3px 10px;
font-size:11.5px;font-family:ui-monospace,Consolas,monospace;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap}
.qchip i{color:var(--blue);font-style:normal;font-weight:700;font-family:var(--font)}
/* El punto del color de su linea: es lo que ata la pastilla con la banda de
   la grafica sin tener que leer el identificador entero. */
.qchip em{width:9px;height:9px;border-radius:50%;flex:0 0 auto;display:inline-block}
.qchip b{cursor:pointer;color:var(--ink3);font-size:13px;line-height:1;padding:0 4px;
border-radius:50%}
.qchip b:hover{color:var(--crit);background:#fff}
.qchip{cursor:pointer}
.qchip:hover{border-color:var(--blue);background:var(--blue-badge)}

/* La rama de un servidor desplegado: fondo propio y guia a la izquierda, para
   que se vea DE QUIEN cuelga y donde acaba. */
/* La rama de un servidor desplegado: se ve DE QUIEN cuelga --guia a la
   izquierda y fondo propio-- y no se va de largo: la lista de bases de datos
   tiene su propio alto y su scroll, asi que con 49 el resto del arbol se queda
   donde estaba. */
.rama{background:var(--rule2);border-left:2px solid var(--blue);
margin:0 0 6px 20px;padding:2px 0 4px;border-radius:0 8px 8px 0}
.rama .nav-item{padding:6px 12px 6px 21px}
.rama .nav-item:hover{background:#e3e8ee}
.nav-lista{max-height:min(46vh,340px);overflow-y:auto;overscroll-behavior:contain}
.nav-buscar{padding:4px 12px 6px 21px}
.nav-buscar input{width:100%;font:inherit;font-size:11.5px;color:var(--ink);
border:1px solid var(--rule);border-radius:999px;padding:4px 10px;background:var(--panel)}
.nav-buscar input:focus{outline:none;border-color:var(--blue)}
/* Las ramas: un nivel mas adentro y con una guia, o no se ve de quien cuelgan. */
/* La "B" de BASES DE DATOS cae en la misma columna que la "a" de su servidor:
   16 de padding + 18 de la flecha + 9 + 8 del punto + 9 son 60 px, y la rama
   pone 20 de margen + 2 de guia, asi que aqui van 38. Si cambia el ancho de
   la flecha o del punto, hay que recalcular los tres numeros a la vez. */
.nav-sub{padding:8px 14px 3px 38px;font-size:10.5px;font-weight:700;color:var(--ink2);
text-transform:uppercase;letter-spacing:.05em;display:flex;justify-content:space-between;gap:8px}
.nav-sub .badge{font-size:11px;padding:1px 8px}
.nav-item.hijo .nm{font-size:12.5px}
/* Sin bullet: el punto de salud ya marca cada fila y la guia de la rama dice
   de quien cuelga; ademas descuadraba la columna del texto. */
.nav-item .sub{font-size:11px;color:var(--ink3);font-weight:400}
.badge{background:#eef0f2;color:var(--ink);font-weight:700;font-size:12.5px;
padding:2px 10px;border-radius:6px;min-width:26px;text-align:center}
.badge-total{background:var(--blue-badge);color:var(--blue)}
.eico{vertical-align:-5px;margin-right:7px;flex:0 0 auto}
h2 .eico{vertical-align:-6px;margin-right:9px}
.eleg{display:flex;gap:18px;flex-wrap:wrap;align-items:center;margin:-4px 0 14px;
      font-size:12px;color:var(--ink3)}
.eleg span{display:inline-flex;align-items:center}
main{min-width:0;display:flex;flex-direction:column}
.view-section{display:none}
.view-section.active{display:block}
/* Pestanas dentro de una vista: el contenido de un servidor no cabe en una sola
   columna sin volverse ilegible. */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--rule);margin:14px 0 0;
align-items:flex-end}
.tab{appearance:none;border:1px solid transparent;border-bottom:0;background:transparent;
     color:var(--ink2);font:inherit;font-size:13px;padding:8px 14px;cursor:pointer;
     border-radius:6px 6px 0 0;position:relative;top:1px}
.tab:hover{color:var(--ink);background:var(--accent-w)}
.tab.active{color:var(--blue);font-weight:600;background:var(--panel);
            border-color:var(--rule);border-bottom:1px solid var(--panel)}
.tab:hover{background:var(--blue-bg)}
.tabpanel{display:none;padding-top:4px}
/* Sin pestanas que pintar, la barra solo lleva el mando: sin raya, que no
   separa nada. */
.tabs.solo{border-bottom:0;margin-bottom:0}
/* Un dia con motivo se marca y se puede abrir: el timeline deja de ser solo
   un semaforo y pasa a ser la puerta de entrada al pasado. */
.tl .d.clickable{cursor:pointer}
.tl .d.clickable:hover{outline:2px solid var(--accent);outline-offset:-2px}
.tl .d .pin{position:absolute;top:2px;right:3px;font-weight:700;font-size:10px;
            line-height:1;opacity:.75}
.tl .d{position:relative}
.tabpanel.active{display:block}
/* Las etiquetas en diagonal de la vista de un dia necesitan sitio abajo. */
#view-day .chart{height:300px}
/* Aviso de ciclo de vida: separado de las alertas de salud a proposito. */
.aviso{margin:10px 0 4px;padding:10px 14px;border-radius:8px;font-size:13px;
       background:var(--accent-w);border-left:4px solid var(--warn-l)}
.aviso.grave{border-left-color:var(--crit-l)}
.aviso b{color:var(--ink)}
h2{font-size:19px;font-weight:700;margin:0 0 4px}
h3{font-size:13px;font-weight:700;margin:26px 0 8px;color:var(--ink2);
text-transform:uppercase;letter-spacing:.04em}
h4{font-size:13.5px;font-weight:700;margin:18px 0 6px}
.sub{color:var(--ink3);font-size:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:12px 0 4px}
/* KPI del mockup: borde izquierdo de color, etiqueta pequena en mayusculas y
   el numero grande. El color lo pone card() mirando si el valor trae una
   chapita de nivel, asi que una tarjeta en rojo se ve sin leerla. */
.card{background:var(--panel);border:1px solid var(--rule);border-left:4px solid var(--grey);
border-radius:var(--radio);box-shadow:var(--shadow);padding:14px 18px}
.card.ok{border-left-color:var(--ok-l)}
.card.warn{border-left-color:var(--warn-l)}
.card.crit{border-left-color:var(--crit-l)}
.card .l{font-size:11px;color:var(--ink3);font-weight:700;text-transform:uppercase;
letter-spacing:.04em}
.card .v{font-size:21px;font-weight:700;margin-top:4px;font-variant-numeric:tabular-nums}
.card .s{font-size:11.5px;color:var(--ink3);margin-top:3px}
.tw{overflow-x:auto;margin:10px 0 4px}

/* ── PIEZAS QUE SE USABAN SIN ESTILO ───────────────────────────────────────
   Todas estas clases estaban ya en el marcado de /flow/, /virt/ o /k8s/ y NO
   tenian una sola regla: el navegador las pinta como texto suelto y nadie se
   entera, porque no falla nada. La mas llamativa es `.lg`, que la emite
   `MapaSalud.leyenda` del propio componente comun: **la leyenda del mapa de
   salud llevaba sin cuadros de color en los tres paneles**. */

/* El mando pegado a la barra de pestanas (la escala de tiempo, el selector de
   carpeta). Se alinea a la derecha y no compite con las pestanas. */
.mando{margin-left:auto;display:inline-flex;align-items:center;gap:6px;
font-size:12px;color:var(--ink2)}
.mando select{font:inherit;padding:2px 6px;border:1px solid var(--rule);
border-radius:6px;background:var(--panel);color:var(--ink)}

/* Una fila de mandos SOBRE una tabla, no en la barra de pestanas. El
   `margin-left:auto` de `.mando` esta puesto para pegarse a la derecha de las
   pestanas; dentro de una fila propia hay que quitarlo, o el desplegable se va
   solo al otro extremo de la pantalla lejos de la tabla que filtra. */
.mandos{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:8px 0 2px}
.mandos>.mando{margin-left:0}

/* Una imagen de contenedor, una etiqueta, una ruta: texto que se compara
   caracter a caracter y no debe salir en la tipografia del texto corrido. */
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:.92em;background:var(--soft,rgba(128,128,128,.10));
padding:1px 4px;border-radius:4px;word-break:break-all}

/* El cuadrito de color de una leyenda. */
.leyenda{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 10px}
.lg{display:inline-block;width:11px;height:11px;border-radius:3px;
vertical-align:-1px;margin-right:2px;background:var(--ink3)}
.lg.ok{background:#46a35a}.lg.warn{background:#e0a63b}.lg.crit{background:#e0533d}
.lg.n,.lg.unknown{background:#9aa7b0}
/* La marca de un suceso en la banda: un reinicio, una presion. */
.lg.marca,.marca{background:#7c3aed}

/* Los motivos de un rato, dentro del cuadro que se abre al pulsar la banda. */
.motivos{list-style:none;margin:6px 0;padding:0}
.motivos li{padding:3px 0;font-size:12.5px;border-bottom:1px solid var(--rule2)}
.motivos li:last-child{border-bottom:0}
/* Y lo que se puede hacer con ese rato. */
.acciones{margin-top:10px;padding-top:8px;border-top:1px solid var(--rule)}
.acciones button{font:inherit;font-size:12px;padding:4px 10px;margin-right:6px;
border:1px solid var(--rule);border-radius:6px;background:var(--panel);
color:var(--ink);cursor:pointer}
.acciones button:hover{border-color:var(--blue);color:var(--blue)}

/* La linea de la cabecera que dice de cuando es el dato y por que via entro. */
.pie{color:var(--ink2)}

/* ── LA CADENA DE UN AUTOMATISMO: quien lo llama, el, y a quien llama ──────
   Tres columnas y el de en medio destacado. En pantalla estrecha se apilan en
   el mismo orden --predecesores, el, sucesores-- porque ese orden ES la
   informacion: leerlo de arriba abajo cuenta la misma historia. */
.cadena3{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:start;
margin:8px 0 4px}
.cadena3 h4{margin:0 0 6px;font-size:12px;color:var(--ink2);font-weight:600}
.cadena-yo{text-align:center;padding:0 8px}
.cadena-yo .chip{font-size:13px;padding:6px 12px}
.cadena{list-style:none;margin:0;padding:0}
.cadena li{padding:3px 0;font-size:12.5px;border-bottom:1px solid var(--rule2)}
.cadena li:last-child{border-bottom:0}
@media (max-width:900px){.cadena3{grid-template-columns:1fr}}

/* ── UNA TABLA QUE NO NECESITA SCROLL HORIZONTAL ───────────────────────────
   `th,td` llevan `white-space:nowrap` para TODAS las tablas de la casa, y esta
   bien: una cifra partida en dos lineas se lee fatal. Pero una tabla de once
   columnas donde tres llevan texto libre --el nombre y su ruta, la carpeta, y
   la lista de quien llama a quien-- se va a los dos mil pixeles y obliga a
   arrastrar la barra para ver el porcentaje de fallos, que es justo lo que se
   iba a mirar.

   `.envuelve` deja que el TEXTO se parta y mantiene las CIFRAS enteras: se
   envuelve por columna, no por tabla. `overflow-wrap:anywhere` y no
   `break-word` porque lo que hay que partir son rutas largas sin espacios
   (`f/overa_flow/consumer`), y `break-word` no las parte. */
/* Layout AUTOMATICO y no `fixed`: con `fixed` las columnas de texto se reparten
   por igual y el nombre del automatismo sale tan estrecho como la de etiquetas.
   En automatico, y pudiendo partir el texto, el navegador ya encaja la tabla en
   el ancho disponible y le da a cada columna lo que necesita. */
table.envuelve th,table.envuelve td{white-space:normal;overflow-wrap:anywhere;
vertical-align:top}
/* Las numericas se quedan de una pieza y ocupan lo justo. */
table.envuelve td.num,table.envuelve th.num{white-space:nowrap;width:1%}
/* Los chips no se parten por dentro: o cabe entero o baja al renglon siguiente. */
table.envuelve .chip{white-space:nowrap}

table{border-collapse:collapse;width:100%;background:var(--panel);font-size:13px;
font-variant-numeric:tabular-nums}
th,td{border-bottom:1px solid var(--rule2);padding:9px 12px;text-align:right;white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th{background:var(--panel);font-weight:600;font-size:12px;color:var(--ink2);
border-bottom:1px solid var(--rule);position:sticky;top:0}
tbody tr:last-child td{border-bottom:none}
tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--rule2)}
td.dash,.dash{color:var(--ink3)}
/* Pastilla, no etiqueta: sin borde y con el fondo del nivel, como el mockup. */
/* Una alerta abierta, en una linea: nombre, cuantas y los dos botones. */
/* Una cuenta que se pulsa. No es un boton: es el numero de la tabla, y tiene que
   seguir leyendose como un numero. */
.numlink{cursor:pointer;color:var(--blue);border-bottom:1px dotted var(--blue);
font-variant-numeric:tabular-nums}
.numlink:hover{color:var(--accent)}
/* La tabla del modal: su cabecera se queda pegada arriba al bajar, que con
   cuarenta filas el nombre de la columna se pierde. */
#fmask .tw{max-height:none}
#fmask thead th{position:sticky;top:0;background:var(--panel);z-index:1}

/* Boton de accion de una fila: redondo y con icono, como en los mockups. */
.row-action{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
flex:0 0 auto;border-radius:50%;border:1px solid var(--rule);background:var(--panel);
color:var(--ink3);cursor:pointer;font:inherit;font-size:14px;line-height:1;padding:0}
.row-action:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg)}
.alerta{cursor:pointer;display:flex;align-items:center;gap:8px;background:var(--panel);
border:1px solid var(--rule);border-left:4px solid var(--crit-l);border-radius:10px;
box-shadow:var(--shadow);padding:8px 10px;margin-top:8px}
.alerta:hover{background:var(--rule2)}
.alerta .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-weight:600;font-size:13px}
.alerta .desde{font-size:11px;color:var(--ink3);font-variant-numeric:tabular-nums}
.alerta .qbtn{padding:3px 9px;font-size:11px;border-radius:999px}
/* El borde de la izquierda dice de que gravedad es SIN tener que leer: rojo el
   critico, ambar el aviso. Por defecto rojo, que es el caso que trae a nadie. */
.alerta.warn,.alerta.warning{border-left-color:var(--warn-l)}
.alerta.ok{border-left-color:var(--ok-l)}
/* Los motivos, desplegados BAJO su propia linea. Enteros --con sus numeros y su
   prueba-- no caben en una columna de 380 px: en cuanto dos elementos tienen
   seis motivos, la columna es una pared de texto y no se lee ninguno. Aqui se
   abren de uno en uno, sin perder de vista el resto de la lista. */
.alerta-det{margin:-2px 0 8px;padding:8px 10px 2px;background:var(--rule2);
border:1px solid var(--rule);border-top:0;border-radius:0 0 10px 10px}
.alerta-det .alerts{margin:0}
/* Una cifra que se sale de su sitio --un datastore provisionado al 154 %, un
   porcentaje por encima de su limite-- se lee en rojo y en negrita, sin
   necesidad de una chapita: va dentro de una celda que ya tiene su columna. */
.mal{color:var(--crit);font-weight:700}
/* LO QUE YA NO ES DE AHORA, EN GRIS. Una plataforma que ha dejado de contestar
   sigue teniendo su ultima foto buena, y esa foto sigue sirviendo --que maquinas
   habia, cuanta memoria, que almacenes-- mientras se arregla. Lo que no puede es
   parecer el estado actual: se apaga el color, que es lo que en un panel dice
   "esto esta vivo", y el aviso de arriba pone la fecha. */
.viejo{opacity:.72;filter:saturate(.35)}
.viejo .note.grave{opacity:1;filter:none}
/* Apagada: gris y sin color de nivel, que el verde es para lo que funciona. */
.estado.off{color:var(--ink3);background:#f1f3f5}
.estado.warn{color:var(--warn);background:var(--warn-w)}
/* El mando de paginas de la lista de alertas: discreto y a la derecha, que es
   un mando y no contenido. La cuenta va en medio para que se vea de cuantas se
   esta viendo un trozo sin tener que contar filas. */
/* EL CONTROL DE ALERTAS MIDE LO MISMO SIEMPRE, en las tres aplicaciones y en
   todas sus secciones. `--alertas-alto` son las diez líneas de una página; el
   `min-height` es lo que impide que un bloque con tres alertas se encoja y
   arrastre a todo lo de al lado.

   No es maquetación por gusto: la columna derecha cambiaba de alto al cambiar
   de pantalla --tres alertas aquí, treinta allí-- y lo que hay debajo subía y
   bajaba con ella. Un panel que se mueve al navegar hace perder el sitio. */
:root{--alertas-alto:322px}
.alertas-pag{min-height:var(--alertas-alto)}
.pager{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:8px;
font-size:11.5px;color:var(--ink3);font-variant-numeric:tabular-nums}
.pager button{width:22px;height:22px;font-size:13px}
.pager button[disabled]{opacity:.35;cursor:default}
.pager button[disabled]:hover{border-color:var(--rule);color:var(--ink3);background:var(--panel)}

/* Dos columnas para "lo de siempre y lo de ahora": el mapa de salud manda y las
   alertas abiertas van al lado, no media pantalla mas abajo. Por debajo de
   1200 px se apilan: el mapa necesita ancho para que un cuadro sea legible. */
/* La columna de al lado crece con la pantalla: a 360 px fijos, un motivo como
   "49 base(s) de datos sin tope de crecimiento en un disco al 23.6% libre"
   salia en cuatro lineas. Un tercio del ancho, con 380 px de minimo. */
.dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,32%);gap:18px;
align-items:start}
@media (max-width:1200px){.dos{grid-template-columns:1fr}}
.dos .lado h3{margin-top:0}
.dos .lado .alerts{margin-top:8px}

/* La fila a la que lleva el lateral: si no se resalta, en una tabla de once
   columnas no se encuentra. */
tr.resaltada td{background:var(--blue-bg);box-shadow:inset 0 0 0 1px var(--blue)}
.chip{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 9px;
border-radius:999px;border:1px solid transparent;white-space:nowrap}
.chip.ok{color:var(--ok);background:var(--ok-w)}
.chip.warn{color:var(--warn);background:var(--warn-w)}
.chip.crit{color:var(--crit);background:var(--crit-w)}
.chip.n{color:var(--ink2);background:#f1f3f5}
/* MUDO: no se ha podido medir. Deliberadamente FUERA de la escala verde-ambar-
   rojo, porque no es un grado de salud sino la ausencia de lectura. Se lee como
   "esto no es una medida" antes de leer la cifra. */
.chip.mudo{color:#fff;background:#111;border-color:#111}
/* APAGADA y PLANTILLA: no tienen puntuacion, y no por un fallo -- de algo que
   no esta encendido no hay nada que medir. Tono neutro, FUERA de la escala:
   verde diria "lo he medido y esta bien", que es justo la mentira que se veia
   antes (una VM apagada un mes salia verde y sumaba 100 % OK). */
.chip.apagada,.chip.template{color:var(--ink2);background:#eceff1;border-color:#dde3e7}
.band i.apagada{background:#dfe4e8}
.pt.apagada,.pt.template{background:#c7ced4}
.pt.mudo{background:#111}
/* Un aviso abierto y uno ya cerrado. El cerrado se apaga: sigue estando para
   consultarlo, pero no compite por la atencion con lo que pasa ahora. */
.avisos{list-style:none;margin:0;padding:0}
.avisos li{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;
  padding:8px 10px;border-left:3px solid #111;background:#fafafa;margin-bottom:6px;
  border-radius:0 6px 6px 0}
.avisos li.cerrado{border-left-color:var(--ok);background:#fff;opacity:.7}
.avisos .aq{font-weight:600}
.avisos .acu{color:var(--ink2);font-size:12px}
.avisos .adur{margin-left:auto;font-variant-numeric:tabular-nums;font-size:12px;color:var(--ink2)}
.avisos li.cerrado .adur{color:var(--ok)}
.avisos .apor{flex:0 0 100%;color:var(--ink3);font-size:12px}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:10px;margin-top:10px}
.chart{background:var(--panel);border:1px solid var(--rule);border-radius:var(--radio);
box-shadow:var(--shadow);padding:12px;height:210px}
.charts.wide{grid-template-columns:1fr}
.charts.wide .chart{height:330px}
.alerts{background:var(--panel);border:1px solid var(--rule);border-left:4px solid var(--crit-l);
border-radius:var(--radio);box-shadow:var(--shadow);padding:12px 16px;margin-top:10px}
.alerts.ok{border-left-color:var(--ok-l)}
.alerts ul{margin:4px 0 0;padding-left:20px}
.alerts li{margin:3px 0}
.note{background:var(--warn-w);border-left:4px solid var(--warn-l);padding:10px 14px;
border-radius:8px;font-size:12.5px;margin:12px 0}
/* Una consulta ocupa UNA linea. Si se deja envolver, tres o cuatro consultas
   largas llenan la pantalla y la tabla deja de leerse; el texto entero se ve en
   el modal, que ademas deja copiarlo. */
.q{max-width:520px;text-align:left}
/* OJO con el nombre: 'qrow' ya estaba cogido por la FILA clicable de las tablas
   de consultas (.qrow{cursor:pointer} mas abajo). Reutilizarlo aqui ponia
   display:flex en cada <tr> y descuadraba la tabla entera. */
.qline{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;
       width:520px;max-width:60vw}
.q1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-family:ui-monospace,Consolas,monospace;font-size:11.5px}
.qbtn{flex:none;border:1px solid var(--rule);background:var(--bg);color:var(--ink3);
      border-radius:4px;cursor:pointer;font:inherit;font-size:11px;line-height:1;padding:4px 7px}
.qbtn:hover{color:var(--ink);border-color:var(--ink3)}
.qmask{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;z-index:60;
       align-items:center;justify-content:center;padding:24px}
.qmask.on{display:flex}
.qbox{background:var(--panel);border:1px solid var(--rule);border-radius:8px;width:100%;
      max-width:920px;max-height:82vh;display:flex;flex-direction:column;
      box-shadow:0 14px 44px rgba(0,0,0,.34)}
.qbox .hd{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--rule)}
.qbox .hd b{flex:1;font-size:13px}
.qbox pre{margin:0;padding:14px;overflow:auto;white-space:pre-wrap;word-break:break-word;
          font-family:ui-monospace,Consolas,monospace;font-size:12.5px;line-height:1.5}

/* Timeline diario: una celda por dia, coloreada por la PEOR puntuacion de ese
   dia, para que un bajon de dos minutos no parezca un dia verde. */
.tl{display:flex;gap:3px;flex-wrap:wrap;align-items:flex-end;margin:6px 0 2px}
.tl .d{width:34px;border-radius:3px;border:1px solid rgba(0,0,0,.12);position:relative;
display:flex;flex-direction:column;justify-content:flex-end;align-items:center;cursor:default}
.tl .d .sc{font-size:10px;font-weight:700;padding:2px 0;font-variant-numeric:tabular-nums}
.tl .d .dy{font-size:8.5px;color:rgba(0,0,0,.55);padding-bottom:2px}
.tl.big .d{width:46px;height:66px}
/* EL DIA SIN DATO: se pinta, vacio y con su numero de dia. Antes no se pintaba
   y la fila se acortaba, asi que las columnas de dos servidores con historicos
   distintos no cuadraban en vertical. Rayado y no gris liso, por lo mismo que en
   la franja de salud: un hueco tiene que verse como un hueco y no como una
   medida floja. */
.tl .d.nodata{background:repeating-linear-gradient(45deg,
  rgba(0,0,0,.045) 0 3px, transparent 3px 6px);
  border-style:dashed;border-color:rgba(0,0,0,.14)}
.tl .d.nodata .sc{color:rgba(0,0,0,.3)}
.tl.mini{gap:2px}
.tl.mini .d{width:23px;height:26px}
.tl.mini .d .sc{font-size:9.5px;padding:1px 0}
.tl.mini .d .dy{font-size:7.5px;padding-bottom:1px}
.tl.mini .d .bar{display:none}
.tl .d.ok{background:#cfe9dc;border-color:var(--ok)}
.tl .d.warn{background:#f6e0bd;border-color:var(--warn)}
.tl .d.crit{background:#f2cfcb;border-color:var(--crit)}
.tl .d.mudo{background:#111;border-color:#111}
.tl .d.mudo .sc{color:#fff}
.tl .d.ok .sc{color:#12432c}.tl .d.warn .sc{color:#6b3f06}.tl .d.crit .sc{color:#7a1912}
.tl .d .bar{width:100%;background:rgba(0,0,0,.10);border-radius:2px 2px 0 0}
.tlrow{display:grid;grid-template-columns:230px 1fr;gap:12px;align-items:center;
padding:5px 0;border-bottom:1px solid var(--rule)}
.tlrow .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}
/* El mapa es una seccion, y se ve como tal: panel propio como las tarjetas y
   las graficas. Sin borde flotaba sobre el fondo y no se sabia donde acababa. */
.bmap{display:grid;grid-template-columns:minmax(150px,240px) 1fr 62px auto;gap:3px 14px;
      align-items:center;background:var(--panel);border:1px solid var(--rule);
      border-radius:var(--radio);box-shadow:var(--shadow);padding:12px 16px 14px}
.bmap .hd{font-size:11px;color:var(--ink3);padding-bottom:2px}
.bmap .lbl{display:flex;align-items:center;gap:6px;font-size:12.5px;overflow:hidden;
           text-overflow:ellipsis;white-space:nowrap;cursor:pointer}
.bmap .lbl:hover{color:var(--accent)}
.bmap .lbl b{overflow:hidden;text-overflow:ellipsis}
.bmap .pct{font-size:12px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.band{display:flex;height:17px;border-radius:3px;overflow:hidden;background:var(--bg);
      border:1px solid var(--rule)}
.band i{flex:1 1 0;min-width:0;height:100%}
.band i.ok{background:#7fb08c}
.band i.warn{background:#e0a53f}
.band i.crit{background:#cf3f33}
/* NEGRO SOLIDO: se intento leer y la plataforma no contesto. Es una CAIDA, y
   por eso es un bloque macizo y no la trama de `.nd` -- hay dato, y el dato es
   que no hubo respuesta. */
.band i.mudo{background:#111}
/* GRIS RAYADO: no hay muestra ninguna, no se llego a preguntar. Es un HUECO de
   la recogida --el proceso parado, por ejemplo--, no un problema de la
   plataforma, y la trama diagonal se lee como "aqui no hay nada" en vez de como
   un color de la escala. */
.band i.nd{background:repeating-linear-gradient(45deg,var(--rule),var(--rule) 2px,transparent 2px,transparent 4px)}
/* Se pulsa SOLO el cuadro que tiene algo que contar: un cursor de mano donde no
   pasa nada es una promesa falsa. */
.band i.can{cursor:pointer}
.band i.can:hover{filter:brightness(1.18);box-shadow:inset 0 0 0 1px rgba(0,0,0,.45)}
/* ── Filas desplegables (modales) ─────────────────────────────────────────
   Cada cosa del modal es una fila y su detalle se abre debajo, indentado. Es
   <details> del navegador: sin JavaScript, con teclado y sin repintar nada. */
.fd{border:1px solid var(--rule);border-radius:8px;background:var(--panel);margin-bottom:6px}
.fd>summary{cursor:pointer;padding:8px 12px;display:flex;align-items:center;gap:9px;
list-style:none;flex-wrap:wrap}
.fd>summary::-webkit-details-marker{display:none}
.fd>summary::before{content:'\25b8';color:var(--ink3);font-size:10px;flex:0 0 auto}
.fd[open]>summary::before{content:'\25be';color:var(--blue)}
.fd>summary:hover{background:var(--rule2);border-radius:8px}
.fd[open]>summary{border-bottom:1px solid var(--rule2);border-radius:8px 8px 0 0}
/* El detalle, indentado: se ve que cuelga de su fila. */
.fd-cuerpo{padding:8px 12px 12px 32px}
.fd-cuerpo .tw{margin:4px 0 0}
.fd-plana{padding:8px 12px}
.fd .fd-t{flex:1;min-width:0;font-size:13px}

/* Lo que paso en ese rato. Mismo armazon que el modal del zoom (.zmask/.zbox). */
.bevs{padding:12px 14px 16px;max-height:min(70vh,560px);overflow:auto}
.bev{border:1px solid var(--rule);border-radius:6px;padding:9px 11px;margin-bottom:8px;
     background:var(--bg)}
.bev .cab{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink3);
          margin-bottom:6px;flex-wrap:wrap}
.bev ul{margin:0;padding-left:18px;font-size:12.5px}
/* Lo que resta cada motivo: pegado a su frase y en rojo suave, que es lo que
   deja ver de un vistazo de donde sale la puntuacion. */
.motpts .pts{display:inline-block;margin-left:8px;font-weight:700;font-size:11px;
color:var(--crit);background:var(--crit-w);border-radius:999px;padding:1px 7px;
font-variant-numeric:tabular-nums}
.bev li{margin:2px 0}
.qrow{cursor:pointer}
.qrow:hover td{background:var(--accent-w)}
.qid{font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--ink3)}
.qtxt{font-family:ui-monospace,Consolas,monospace;font-size:12px;white-space:pre-wrap;
      background:var(--bg);border:1px solid var(--rule);border-radius:5px;padding:10px 12px;
      max-height:260px;overflow:auto}
.bticks{position:relative;height:14px;font-size:10.5px;color:var(--ink3)}
.bticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.bticks span:first-child{transform:none}
.brange{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--ink3);margin:2px 0 10px}
.brange select{font:inherit;padding:4px 10px;border:1px solid var(--rule);border-radius:999px;
               background:var(--panel);color:var(--ink)}
/* Los botones de la misma barra: la MISMA pildora que el desplegable. Van en la
   hoja comun y no en la de un panel porque "callar los avisos de esto hasta el
   jueves" es la misma pregunta en los cuatro monitores, y dos hojas con la
   misma pildora escrita a mano divergen a la primera. */
.brange button{font:inherit;padding:4px 11px;border:1px solid var(--rule);border-radius:999px;
               background:var(--panel);color:var(--ink);cursor:pointer;line-height:1.4}
.brange button:hover{border-color:var(--ink3);color:var(--ink)}
/* El que DESHACE se ve distinto: pulsarlo por error vuelve a encender avisos,
   que es el lado seguro, pero confundirlo con "silenciar otras dos horas" no lo
   es. */
.brange button.deshacer{border-color:var(--ok);color:var(--ok)}
.brange b{color:var(--ink);font-weight:600}
/* Un dato que NO SE SABE y sabe por que: el signo lleva el motivo encima. En
   una tabla de cincuenta maquinas la misma explicacion repetida cincuenta veces
   hace el doble de alto cada fila y se deja de leer a la tercera; el subrayado
   de puntos dice que ahi hay algo que preguntar. */
.ayuda{cursor:help;border-bottom:1px dotted currentColor}

/* El bloque de alertas con sus propias pestañas. Va pegado al borde de arriba
   de su columna --sin el margen que lleva la barra de pestañas de la pagina--
   para que empiece a la misma altura que la seccion de al lado: dos columnas
   que arrancan a alturas distintas se leen como un descuadre. */
.apanel > .tabs{margin-top:0}
/* El mando de la barra --callar los avisos-- a la derecha del todo, y que no
   arrastre la raya de las pestañas hacia abajo. */
.apanel > .tabs > .brange{margin:0 0 4px auto;flex-wrap:wrap}
.apanel > .tabpanel{padding-top:8px}
.dos > .lado > .apanel:first-child > .tabs{margin-top:0}
.tlleg{display:flex;gap:14px;font-size:11.5px;color:var(--ink3);margin-top:8px;align-items:center}
.tlleg i{display:inline-block;width:11px;height:11px;border-radius:2px;border:1px solid;margin-right:4px;vertical-align:-1px}
.tlleg .ok i{background:#cfe9dc;border-color:var(--ok)}
.tlleg .warn i{background:#f6e0bd;border-color:var(--warn)}
.tlleg .crit i{background:#f2cfcb;border-color:var(--crit)}
.rf{font-size:11.5px;color:var(--ink3);margin-top:6px;display:flex;gap:10px;align-items:center}
.rf label{cursor:pointer}
/* "Hay datos sin pintar": tiene que verse sin gritar, y pulsarse. */
.rf .pend{cursor:pointer;color:var(--blue);background:var(--blue-bg);
border:1px solid var(--blue-badge);border-radius:999px;padding:2px 10px;font-size:11.5px}
.rf .pend:hover{background:var(--blue-badge)}
.small{font-size:11.5px;color:var(--ink3)}
details.raw{background:var(--panel);border:1px solid var(--rule);border-radius:4px;
padding:8px 12px;margin-top:8px}
details.raw summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink2)}
@media(max-width:860px){.layout{flex-direction:column}aside{width:100%;position:static;max-height:none} }

/* Barras de RANKING. Aqui vivieron las barras del reparto por base de datos y
   se fueron a lineas, con razon: para "quien se lleva la maquina" la pregunta es
   desde cuando, y eso una barra del ultimo instante no lo dice. Pero el
   diagnostico no es una serie -- es una FOTO cada 30 min, sin historia -- y para
   un ranking de una foto la barra es la forma correcta: ensena el reparto sin
   leer numeros. Asi que vuelven, en el sitio donde si valen. */
.consumo{display:flex;flex-direction:column;gap:2px;margin:6px 0 10px}
.cfila{display:grid;grid-template-columns:minmax(120px,1.4fr) minmax(80px,3fr) 92px minmax(0,1.6fr);
       gap:10px;align-items:center;padding:5px 8px;border-radius:5px;cursor:pointer}
.cfila:hover{background:var(--accent-w)}
.cnom{font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
      direction:rtl;text-align:left}
.cbar{background:var(--bg);border-radius:3px;height:14px;overflow:hidden;border:1px solid var(--rule)}
.cbar span{display:block;height:100%;border-radius:2px}
.cbar span.ok{background:var(--ok)}
.cbar span.warn{background:var(--warn)}
.cbar span.crit{background:var(--crit)}
.cbar span.n{background:var(--accent)}
.cval{text-align:right;font-size:12.5px;font-variant-numeric:tabular-nums}
/* Sin cuarta columna y sin promesa de que se pueda pinchar: en el diagnostico la
   fila no lleva a ningun sitio. */
.consumo.par .cfila{grid-template-columns:minmax(140px,1.6fr) minmax(70px,3fr) 96px}
.consumo.est .cfila{cursor:default}

/* Un motivo de alerta es una PUERTA, no una linea de texto: lleva a la base de
   datos, al nodo o al servidor donde se genera. El destino se ensena a la
   derecha para que se sepa a donde va antes de pinchar. */
/* Un motivo: el texto a la izquierda y a la derecha DONDE esta la alerta --su
   base de datos, su nodo o el servidor--, que es lo que se pulsa para ir. Debajo,
   en la fila entera, sus numeros y su prueba: estaban detras de un desplegable,
   y un motivo sin su numero obliga a un clic solo para saber si importa. */
.alerts li.motivo{border-radius:6px;padding:5px 6px;margin-left:-6px;cursor:pointer;
                  display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.alerts li.motivo .macc{display:inline-flex;align-items:center;gap:6px}
.alerts li.motivo .row-action{width:24px;height:24px;font-size:13px}
/* El texto del motivo en el modal, en grande: es el titulo de lo que se mira. */
.mgrande{font-size:14px;font-weight:600;margin:6px 0 2px}
/* Lo que resta el motivo, pegado a su frase. Misma pastilla que en el modal de
   la franja: la representacion de una alerta es la misma en todo el panel. */
.alerts li.motivo .pts{display:inline-block;margin-left:8px;font-weight:700;font-size:11px;
color:var(--crit);background:var(--crit-w);border-radius:999px;padding:1px 7px;
font-variant-numeric:tabular-nums}
.alerts li.motivo:hover{background:var(--accent-w)}
.alerts li.motivo .mtxt{cursor:pointer}
.alerts li.motivo .ir{flex:none;font-size:11px;color:var(--blue);white-space:nowrap;
background:var(--blue-bg);border-radius:999px;padding:2px 9px}
.alerts li.motivo .ir b{font-weight:600}
.alerts li.motivo .mver{padding:1px 6px;font-size:10.5px;flex:none}
/* La prueba ocupa la fila entera, debajo de las tres columnas. */
.alerts li.motivo .prueba{grid-column:1 / -1;margin:4px 0 8px;padding-left:2px}
.alerts li.motivo .prueba table{font-size:12px}
.alerts li.motivo .prueba .tw{margin:6px 0 0}
.alerts .cab{cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.alerts .cab .desde{font-size:11.5px;color:var(--ink3)}
.alerts .cab:hover .desde{color:var(--accent)}
/* Se usa desde antes en la tabla de nodos y en los identificadores de consulta,
   pero no estaba definida: el texto salia con la fuente del resto. */
.mono{font-family:ui-monospace,Consolas,monospace;font-size:11.5px}

/* Modal de grafica. Una tarjeta de 210 px con las horas en diagonal ensena la
   FORMA; el detalle se ve aqui, con el eje recalculado para que quepan las
   marcas de 15 minutos. */
/* El boton de ampliar va en la esquina, NO en la caja entera: la caja capturaba
   el clic de la leyenda, y pinchar una entrada de la leyenda es como se aisla
   una linea entre ocho. Arriba a la izquierda porque el titulo de la grafica va
   centrado y el eje Y empieza mas abajo: ahi no tapa nada. */
.chart{position:relative}
.chart .zbtn{position:absolute;top:5px;left:6px;z-index:2;
             border:1px solid var(--rule);background:var(--bg);color:var(--ink3);
             border-radius:4px;cursor:pointer;font:inherit;font-size:10px;line-height:1;
             padding:3px 6px;opacity:.55;transition:opacity .12s,color .12s}
.chart:hover .zbtn{opacity:1}
.chart .zbtn:hover{color:var(--ink);border-color:var(--ink3)}
.zmask{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;z-index:70;
       align-items:center;justify-content:center;padding:24px}
.zmask.on{display:flex}
.zbox{background:var(--panel);border:1px solid var(--rule);border-radius:8px;
      width:min(1600px,96vw);display:flex;flex-direction:column;
      box-shadow:0 16px 50px rgba(0,0,0,.38)}
.zbox .hd{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--rule)}
.zbox .hd b{flex:1;font-size:13.5px}
/* Alto fijo y generoso: con las etiquetas en diagonal, el area de dibujo se
   come 60-70 px y sin esto el modal ensenaba una franja. */
.zlienzo{height:min(70vh,660px);padding:12px 14px 16px}

/* Controles de la seleccion de consultas. Van pegados a las graficas que
   gobiernan, no al final de la tabla: el que mira una grafica y quiere cambiar
   lo que sale no deberia buscar el mando en otro sitio. */
.qctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 2px;
       font-size:12px;color:var(--ink3)}
.qctrl .qbtn{padding:3px 9px}
/* El mando del rato: manda sobre las graficas, asi que se ve como un mando y no
   como una nota al pie. */
/* En la linea de las pestanas, pegado a la derecha: es un mando de la pantalla,
   no una franja de aviso, y por eso va como pastilla y no como bloque. */
.qctrl.vent{background:var(--blue-bg);border:1px solid var(--blue-badge);border-radius:999px;
padding:4px 10px;margin:0 0 4px auto;justify-content:flex-end}
.qctrl.vent select{font:inherit;font-size:12px;padding:3px 8px;border:1px solid var(--rule);
border-radius:999px;background:var(--panel);color:var(--ink)}
.qctrl.vent .qbtn{min-width:26px;text-align:center}
/* La celda de la casilla no hereda el cursor de la fila: la fila entra en la
   ficha de la consulta y la casilla solo la marca. */
td.qpick{text-align:left;white-space:nowrap;cursor:default}
td.qpick input{vertical-align:middle;margin-right:6px;cursor:pointer}
td.qpick .qbtn{padding:2px 7px;font-size:10.5px}

/* ── Piezas que comparten los paneles de la casa ─────────────────────────────
   Este fichero es el lenguaje visual COMUN: lo sirve app-launcher en
   /comun/panel.css y lo usan /dbm/ y /virt/. Lo que se anade aqui lo tienen los
   dos, que es justo el motivo de que haya un solo fichero -- con una copia por
   panel, el dia que se retoca un color hay que acordarse de N sitios y en
   cuanto se olvida uno dejan de parecer el mismo producto. */

/* El icono de la plataforma o del motor, delante del nombre. */
.ico{flex:0 0 auto;vertical-align:-3px}
h1 .ico,h2 .ico,h3 .ico{vertical-align:-4px;margin-right:3px}

/* El punto de salud, HUECO: hay algo que mirar pero el elemento no esta
   corriendo. Se ve el aviso sin fingir que la maquina esta viva, que es lo que
   hacia el punto relleno -- una VM apagada con 100/100 salia verde, y en una
   lista de dieciseis eso se lee como "las dieciseis funcionando bien". */
.pt.hueco{background:transparent!important;border:2px solid var(--grey);box-sizing:border-box}
/* Lo apagado se atenua y las plantillas se distinguen: en una lista larga, lo
   que esta encendido tiene que saltar. */
.nav-item.apagada{color:#96a3ab}
.nav-item.plantilla{font-style:italic;color:#8fa3b5}

/* El estado de energia de una maquina. Es OTRA cosa que la salud y va al lado,
   asi que no puede ser una chapita mas: una maquina apagada no esta mal, esta
   apagada. */
.estado{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;
white-space:nowrap}
.estado.ok{color:var(--ok)}
.estado.apagado{color:#8b98a1}
.estado.warn{color:var(--warn)}
.estado.crit{color:var(--crit)}
.estado.plantilla{color:var(--blue)}
.estado.unknown{color:var(--ink3)}

/* Una fila de tabla que lleva a algun sitio. El cursor solo donde se puede
   pulsar: una mano donde no pasa nada es una promesa falsa. */
tbody tr.clic{cursor:pointer}
tbody tr.clic:hover{background:var(--blue-bg)}
.enlace{color:var(--accent);cursor:pointer;font-weight:600}
.enlace:hover{text-decoration:underline}

/* La cabecera de pagina: el titulo a la izquierda y su mando a la derecha. */
.pagehd{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
flex-wrap:wrap;margin:0 0 10px}
.pagehd h2{margin:0 0 3px;font-size:18px}
.pagehd .small{margin:0}