:root {
  --bg: #0d1117; --panel: #161b22; --panel-2: #1c232d; --borde: #272f3b;
  --texto: #e6edf3; --muted: #9aa4b2; --accent: #79b8ff;
  --ok: #3fb950; --warn: #e3b341; --crit: #f85149;
  --max: #ff4d4f; /* valores maximos: rojo, distinto de la serie de temperatura (naranja) */
  /* servicios (VRAM): mismos colores en barra, leyenda, grafica y titulos */
  --c-ollama: #c792ea; --c-llamaswap: #4fc3f7; --c-comfyui: #ff9e5e;
  --c-whisper: #5fd38d; --c-otros: #8b97a8; --c-libre: #222a35;
  /* series de las graficas */
  --s-temp: #ff8c42; --s-pot: #e3b341; --s-vent: #39c5cf; --s-util: #79b8ff;
  --s-swap: #f78fb3;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px; line-height: 1.4;
  background: var(--bg); color: var(--texto); margin: 0;
  padding: 1rem 1.5rem 1.5rem; min-width: 320px;
}
.num, .valor, .kpi-valor, .tabla td, .leyenda-val { font-variant-numeric: tabular-nums; }

/* ---- cabecera ---- */
.cabecera {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem;
  margin-bottom: 1rem; padding-bottom: .8rem; border-bottom: 1px solid var(--borde);
}
.cabecera h1 { font-size: 1.25rem; font-weight: 650; margin: 0; letter-spacing: .01em; }
.pestanas { display: inline-flex; gap: .25rem; padding: .2rem; border: 1px solid var(--borde); border-radius: 999px; background: var(--panel); }
.pestanas a { color: var(--muted); text-decoration: none; font-weight: 600; font-size: .85rem; padding: .25rem .9rem; border-radius: 999px; white-space: nowrap; }
.pestanas a:hover { color: var(--texto); }
.pestanas a[aria-current="page"] { background: #79b8ff22; color: var(--accent); }
.pestanas a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cab-estado { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cab-conexion { margin-left: auto; display: flex; gap: 1rem; align-items: baseline; font-size: .85rem; }
.conexion { color: var(--ok); }
.conexion.error { color: var(--crit); font-weight: 600; }
.badge {
  display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .7rem;
  border-radius: 999px; font-weight: 600; font-size: .8rem; white-space: nowrap;
  border: 1px solid var(--borde); background: var(--panel); font-variant-numeric: tabular-nums;
}
.badge .punto { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; }
.badge-dry { color: var(--warn); border-color: #e3b34166; background: #e3b34116; }
.badge-live { color: var(--ok); border-color: #3fb95066; background: #3fb95016; }
.badge-live .punto { animation: latido 1.6s ease-in-out infinite; }
.badge-ventana { color: var(--accent); border-color: #79b8ff55; background: #79b8ff14; }
.badge-proxima { color: var(--muted); }
@keyframes latido { 50% { opacity: .35; } }

/* ---- rejilla: 12 columnas en escritorio, 2 en portatil estrecho, 1 en movil ---- */
.rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .9rem; align-items: stretch; }
.card {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 10px;
  padding: .9rem 1rem 1rem; min-width: 0; overflow: hidden;
  display: flex; flex-direction: column;
}
.c-gpu, .c-vram { grid-column: span 6; }
.c-cpu, .c-ram, .c-turnos { grid-column: span 4; }
.c-srv { grid-column: span 3; }
.c-mitad { grid-column: span 6; }
@media (max-width: 1100px) {
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-gpu, .c-vram, .c-turnos, .c-mitad { grid-column: span 2; }
  .c-cpu, .c-ram, .c-srv { grid-column: span 1; }
}
@media (max-width: 700px) {
  body { padding: .7rem .75rem 1rem; }
  .rejilla { grid-template-columns: minmax(0, 1fr); }
  .c-gpu, .c-vram, .c-turnos, .c-mitad, .c-cpu, .c-ram, .c-srv { grid-column: span 1; }
  .cab-conexion { margin-left: 0; }
}

h2 {
  display: flex; align-items: baseline; gap: .5rem;
  margin: 0 0 .7rem; font-size: .75rem; font-weight: 650; color: var(--muted);
  text-transform: uppercase; letter-spacing: .07em;
}
h2 .subtitulo { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: auto; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.punto-srv { display: inline-block; width: .6rem; height: .6rem; border-radius: 2px; align-self: center; flex: none; }
.muted { color: var(--muted); font-size: .82rem; }
.ok { color: var(--ok); } .warn { color: var(--warn); } .crit { color: var(--crit); }
.maximo { color: var(--max); font-size: .75rem; font-weight: 400; white-space: nowrap; }
p { margin: 0 0 .4rem; }
.vacio { color: var(--muted); font-style: italic; font-size: .85rem; margin: 0; }

/* ---- KPIs (cuadricula de cifras grandes, ancho tabular) ---- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.2rem, 1fr)); gap: .6rem .8rem; margin-bottom: .8rem; }
.kpi { min-width: 0; }
.kpi-etq { font-size: .72rem; color: var(--muted); display: flex; align-items: center; gap: .35rem; white-space: nowrap; }
.kpi-etq i { width: .6rem; height: .18rem; border-radius: 2px; display: inline-block; }
.kpi-valor { font-size: 1.45rem; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.kpi-valor small { font-size: .8rem; font-weight: 400; color: var(--muted); margin-left: .15rem; }
.kpi-sub { font-size: .72rem; color: var(--muted); white-space: nowrap; min-height: 1.05rem; }
.kpi-sub .maximo { font-size: .72rem; }

/* ---- filas etiqueta/valor ---- */
.fila { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .22rem 0; border-bottom: 1px solid #ffffff0a; }
.fila:last-child { border-bottom: 0; }
.fila > span:first-child { color: var(--muted); }
.fila .valor { font-weight: 600; text-align: right; overflow-wrap: anywhere; }

/* ---- barras ---- */
.barra-fondo { background: var(--c-libre); border-radius: 5px; height: 10px; overflow: hidden; margin: .15rem 0 .6rem; }
.barra-usada { height: 100%; transition: width .4s ease, background-color .4s ease; }
.bg-ok { background: var(--ok); } .bg-warn { background: var(--warn); } .bg-crit { background: var(--crit); }
.barra-apilada { display: flex; height: 26px; border-radius: 6px; overflow: hidden; background: var(--c-libre); margin: .25rem 0 .7rem; }
.barra-apilada > div { height: 100%; min-width: 0; transition: width .4s ease; }
.barra-apilada > div + div { box-shadow: inset 1px 0 0 var(--panel); }

/* ---- cabecera VRAM + leyenda ---- */
.vram-resumen { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .2rem 1rem; }
.vram-resumen .grande { font-size: 1.45rem; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vram-resumen .grande small { font-size: .8rem; font-weight: 400; color: var(--muted); }
.leyenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.4rem, 1fr)); gap: .3rem .8rem; margin-bottom: .7rem; }
.leyenda-it { display: flex; align-items: center; gap: .4rem; min-width: 0; font-size: .82rem; }
.leyenda-it i { width: .65rem; height: .65rem; border-radius: 2px; flex: none; }
.leyenda-it .nom { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leyenda-it .leyenda-val { margin-left: auto; font-weight: 600; white-space: nowrap; }

/* ---- graficas (uPlot) ---- */
.graf-bloque { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; padding-top: .3rem; }
.grafica { position: relative; width: 100%; min-width: 0; flex: 1 1 215px; min-height: 0; overflow: hidden; }
.grafica-corta { flex-basis: 175px; }
.grafica .uplot { max-width: 100%; }
.u-legend { display: none; }
.cadena-leyenda { display: flex; flex-wrap: wrap; gap: .15rem .9rem; margin: 0 0 .25rem; font-size: .76rem; min-height: 1.1rem; }
.cadena-leyenda span { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; color: var(--muted); }
.cadena-leyenda i { width: .7rem; height: .18rem; border-radius: 2px; display: inline-block; }
.cadena-leyenda i.blq { height: .65rem; width: .65rem; }
.cadena-leyenda b { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.cadena-leyenda .futuro { opacity: .55; }
.u-select { background: #ffffff10; }
.u-cursor-x, .u-cursor-y { border-color: #9aa4b288 !important; }
.tooltip {
  position: fixed; z-index: 20; pointer-events: none; padding: .45rem .65rem;
  background: #0b0f14ee; border: 1px solid var(--borde); border-radius: 7px;
  font-size: .78rem; box-shadow: 0 6px 18px #0009; white-space: nowrap;
}
.tooltip .t-h { color: var(--muted); margin-bottom: .2rem; font-variant-numeric: tabular-nums; }
.tooltip .t-r { display: flex; align-items: center; gap: .45rem; font-variant-numeric: tabular-nums; }
.tooltip .t-r i { width: .6rem; height: .6rem; border-radius: 2px; }
.tooltip .t-r b { margin-left: auto; padding-left: 1rem; font-weight: 600; }

/* ---- listas / tablas ---- */
ul.lista { margin: 0; padding: 0; list-style: none; }
ul.lista li { padding: .25rem 0; border-bottom: 1px solid #ffffff0a; overflow-wrap: anywhere; }
ul.lista li:last-child { border-bottom: 0; }
.tabla { width: 100%; border-collapse: collapse; font-size: .82rem; }
.tabla th { text-align: left; font-weight: 500; color: var(--muted); font-size: .72rem; padding: .15rem .4rem .25rem 0; }
.tabla td { padding: .2rem .4rem .2rem 0; border-top: 1px solid #ffffff0a; overflow-wrap: anywhere; }
.tabla .der { text-align: right; padding-right: 0; white-space: nowrap; }
.tabla .punto-srv { margin-right: .4rem; vertical-align: middle; }
#card-procesos { margin-top: .8rem; }
#card-procesos h3, .sub-h { margin: 0 0 .3rem; font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.etiqueta { display: inline-block; padding: .05rem .45rem; border-radius: 4px; font-size: .75rem; background: var(--panel-2); border: 1px solid var(--borde); }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 .5rem; }
code { font-family: var(--mono); font-size: .76rem; color: var(--muted); }
.scroll-lista { max-height: 11rem; overflow: auto; }

/* ---- turnos ---- */
.turnos-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-bottom: .8rem; }
.turnos-cifras .kpi-valor { font-size: 1.8rem; }

footer { margin-top: 1rem; text-align: center; }
@media (prefers-reduced-motion: reduce) { .badge-live .punto { animation: none; } .barra-usada, .barra-apilada > div { transition: none; } }

/* ---- tarjetas plegables (details/summary) ---- */
.plegable > summary { display: flex; align-items: center; gap: .6rem; cursor: pointer; list-style: none; border-radius: 6px; }
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary h2 { flex: 1; min-width: 0; margin: 0 0 .7rem; }
.plegable > summary::after { content: ""; flex: none; width: .5rem; height: .5rem; margin: 0 .25rem .7rem 0;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform .15s; }
.plegable[open] > summary::after { transform: rotate(45deg); margin-top: -.15rem; }
.plegable:not([open]) > summary h2 { margin-bottom: 0; }
.plegable:not([open]) > summary::after { margin-bottom: 0; }
.plegable > summary:hover h2, .plegable > summary:hover::after { color: var(--texto); border-color: var(--texto); }
.plegable > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .plegable > summary::after { transition: none; } }

/* ---- indicadores de la cabecera (fase 5a): semaforo del chat y campana de alertas ---- */
.cab-indic { display: flex; align-items: center; gap: .45rem; }
.indic {
  position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem;
  border: 1px solid var(--borde); border-radius: 999px; background: var(--panel); color: var(--muted);
  font-size: .78rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: default;
}
a.indic { cursor: pointer; }
.indic:hover, .indic:focus-visible { color: var(--texto); border-color: #ffffff2e; }
.indic:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.indic .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--muted); flex: none; }
.indic[data-estado="pasa"] .dot { background: var(--ok); }
.indic[data-estado="espera"] .dot { background: var(--warn); }
.indic[data-estado="ocupado"] .dot { background: var(--crit); }
.indic[data-estado="pasa"] { border-color: #3fb95044; }
.indic[data-estado="espera"] { border-color: #e3b34155; }
.indic[data-estado="ocupado"] { border-color: #f8514966; }
.indic-campana .indic-n { font-variant-numeric: tabular-nums; min-width: .7rem; text-align: center; }
.indic-campana[data-estado="aviso"] { color: var(--warn); border-color: #e3b34166; background: #e3b34116; }
.indic-campana[data-estado="grave"] { color: var(--crit); border-color: #f8514977; background: #f8514918; }
.indic-campana[data-estado="grave"] svg { animation: latido 1.6s ease-in-out infinite; }
.indic-tip {
  display: none; position: absolute; top: calc(100% + .45rem); left: 0; z-index: 40; width: max-content;
  max-width: min(19rem, 80vw); padding: .5rem .7rem; background: #0b0f14f2; border: 1px solid var(--borde);
  border-radius: 7px; box-shadow: 0 6px 18px #0009; color: var(--texto); font-weight: 400; font-size: .78rem;
  line-height: 1.4; white-space: pre-line; text-align: left; pointer-events: none;
}
.indic-campana .indic-tip { left: auto; right: 0; }
.indic:hover .indic-tip, .indic:focus-visible .indic-tip { display: block; }
@media (prefers-reduced-motion: reduce) { .indic-campana[data-estado="grave"] svg { animation: none; } }

/* Portatil de 1366 px: con la pestana Salud y los dos indicadores nuevos, la cabecera de Panel y Orquestacion
   no cabria en una linea. Se compacta (menos aire, sin la palabra "Actualizado") en vez de partirla en dos. */
@media (max-width: 1500px) {
  .cabecera { gap: .6rem .8rem; }
  .pestanas a { padding: .25rem .65rem; }
  .cab-conexion .etq-act { display: none; }
}