/* 🗄 Data Monitor — Latency · Zoom · Operations · Inventory (`apps/datamonitor`).

   The views came from the alphinity-data panel; its CSS is ported here SCOPED under `.dm` (the
   page wrapper) so it cannot touch the rest of LiveFirst, keeping only the rules the four views
   use. Its own colour variables are mapped onto the app's theme tokens (shell.css), so the pages
   follow LiveFirst's light/dark switch instead of carrying their own palette. The logic behind
   them is this app's `apps/datamonitor/lake` (served at /data/api). */
.dm {
  --fondo: var(--bg); --panel-alto: color-mix(in srgb, var(--panel) 88%, var(--text));
  --borde: var(--border); --texto: var(--text); --tenue: var(--text-dim);
  --ok: var(--buy); --aviso: var(--incomplete); --error: var(--sell); --na: var(--abstain);
  --acento: var(--selected); --marca-piel: var(--warn);
  --col-puesto: 34px; --col-nombre: 270px; --col-reloj: 170px; --col-numeros: 210px;
  color: var(--text); font-size: 14px; line-height: 1.5;
}
.dm, .dm * { box-sizing: border-box; }
.dm .barra {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 16px 24px; border-bottom: 1px solid var(--borde); background: var(--panel);
  position: sticky; top: 0; z-index: 5;
}
.dm .titulo h1 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.dm .titulo .sub { color: var(--tenue); font-size: 12px; }
.dm .controles { display: flex; align-items: flex-end; gap: 12px; }
.dm .controles label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--tenue); }
.dm input, .dm select, .dm button {
  font: inherit; color: var(--texto); background: var(--panel-alto);
  border: 1px solid var(--borde); border-radius: 4px; padding: 6px 10px;
}
.dm input:focus, .dm select:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
.dm button { cursor: pointer; }
.dm button:hover:not(:disabled) { border-color: var(--acento); }
.dm button:disabled { opacity: .45; cursor: not-allowed; }
.dm button.peligro { background: transparent; border-color: var(--error); color: var(--error); }
.dm button.peligro:hover:not(:disabled) { background: var(--error); color: #fff; }
.dm .filtros { display: flex; gap: 12px; padding: 16px 24px 8px; align-items: center; flex-wrap: wrap; }
.dm #search { flex: 0 1 260px; }
.dm .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.dm .chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: transparent; }
.dm .chip.activo { background: var(--acento); border-color: var(--acento); color: #fff; }
.dm main { padding: 8px 24px 40px; }
.dm .acceso {
  font-size: 10.5px; padding: 3px 8px; border-radius: 999px; background: transparent;
  color: var(--tenue);
}
.dm .acceso:hover:not(:disabled) { color: var(--texto); border-color: var(--acento); }
.dm #refrescar-fechas { font-size: 11px; padding: 3px 10px; border-radius: 999px; background: transparent; }
.dm .punto { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--na); }
.dm .punto.ok { background: var(--ok); }
.dm .punto.aviso { background: var(--aviso); }
.dm .punto.error { background: var(--error); }
@keyframes latido { 50% { opacity: .25; } }
.dm .loading { color: var(--tenue); }
.dm .pie { font-size: 11px; color: var(--tenue); margin: 8px 0 0; line-height: 1.5; }
.dm .pie.destacado {
  border-left: 2px solid var(--acento); padding-left: 10px; margin: 0 0 12px;
}
.dm .pie code { font-size: 11px; }
.dm .atajo { font-size: 11px; padding: 3px 9px; border-radius: 999px; background: transparent; }
.dm .tabla-scroll { overflow-x: auto; border: 1px solid var(--borde); border-radius: 4px; }
.dm .tabla-scroll table { border-collapse: collapse; font-size: 11px; width: 100%; }
.dm .tabla-scroll th, .dm .tabla-scroll td {
  padding: 5px 8px; text-align: left; white-space: nowrap;
  max-width: 190px; overflow: hidden; text-overflow: ellipsis;
}
.dm .tabla-scroll th {
  background: var(--panel-alto); color: var(--tenue); font-weight: 600;
  position: sticky; top: 0; text-transform: none; z-index: 1;
}
.dm .tabla-scroll tbody tr { border-top: 1px solid var(--borde); }
.dm .tabla-scroll tbody tr:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.dm .fallo-texto { color: var(--error); }
.dm .modos { border: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.dm .modos legend { padding: 0; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
.dm .modo {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  padding: 10px 12px; border: 1px solid var(--borde); border-radius: 4px;
  background: var(--panel-alto);
}
.dm .modo:has(input:checked) { border-color: var(--acento); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.dm .modo.peligrosa:has(input:checked) { border-color: var(--error); background: color-mix(in srgb, var(--down) 8%, transparent); }
.dm .modo input { margin-top: 2px; flex: none; }
.dm .modo-cuerpo b { display: block; font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.dm .modo-cuerpo small { display: block; color: var(--tenue); font-size: 11px; line-height: 1.5; }
.dm #ciclo-cerrar { margin-top: 12px; font-size: 11px; }
.dm .modal {
  position: fixed; inset: 0; z-index: 60; background: var(--overlay);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.dm .modal.oculto { display: none; }
.dm .modal-caja {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 4px;
  padding: 20px; width: min(520px, 100%); max-height: 90vh; overflow-y: auto;
  box-shadow: var(--shadow);
}
.dm .modal-caja h3 { margin: 0 0 14px; font-size: 16px; }
.dm .modal-caja h3.peligro { color: var(--error); }
.dm .modal-botones { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.dm .estado-pulso {
  padding: 12px 24px; margin-top: 0; margin-bottom: 0; font-size: 12px; color: var(--tenue);
}
.dm .ok-texto { color: var(--ok); }
.dm .aviso-texto { color: var(--aviso); }
.dm .lat-grupo { margin-bottom: 26px; }
.dm .lat-grupo-cab {
  display: flex; align-items: baseline; gap: 14px; margin: 0 0 8px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em; color: var(--tenue); font-weight: 400;
}
.dm .lat-grupo-nombre { color: var(--texto); font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.dm .lat-fuera { margin-top: 26px; border-top: 1px solid var(--borde); padding-top: 14px; }
.dm .lat-fuera > h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--tenue);
  margin: 0 0 4px;
}
.dm .lat-fuera > .pie { margin: 0 0 10px; max-width: 68ch; }
.dm .oculto { display: none; }
.dm .inv-lista { display: flex; flex-direction: column; gap: 2px; }
.dm .inv-fila {
  display: flex; align-items: center; gap: 12px; min-height: 30px; padding: 3px 8px;
  border-radius: 4px;
}
.dm .inv-fila:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.dm .inv-fila.sin_control { background: color-mix(in srgb, var(--down) 7%, transparent); }
.dm .inv-fila.sin_control:hover { background: color-mix(in srgb, var(--down) 13%, transparent); }
.dm .punto.federada { background: var(--acento); }
.dm .punto.borrar { background: var(--na); }
.dm .inv-nombre {
  width: var(--col-nombre); flex: none; display: flex; align-items: center; gap: 7px;
  overflow: hidden; white-space: nowrap; font-size: 11.5px;
}
.dm .inv-tabla { overflow: hidden; text-overflow: ellipsis; }
.dm .inv-fila.borrar .inv-tabla { text-decoration: line-through; opacity: .6; }
.dm .inv-tipo {
  flex: none; font-size: 9px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--tenue); border: 1px solid var(--borde); border-radius: 999px; padding: 0 5px;
}
.dm .inv-situacion {
  flex: 1; min-width: 0; font-size: 11px; color: var(--tenue);
  display: flex; flex-direction: column; gap: 1px;
}
.dm .inv-situacion code { font-size: 10px; }
.dm .inv-situacion b { font-weight: 600; color: var(--texto); }
.dm .inv-situacion .fallo-texto { color: var(--error); }
.dm .inv-cuando { opacity: .7; }
.dm .inv-nota { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm .inv-meta {
  width: 230px; flex: none; font-size: 10px; color: var(--tenue);
  font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dm .inv-acciones { flex: none; display: flex; gap: 4px; opacity: .55; transition: opacity .12s ease; }
.dm .inv-fila:hover .inv-acciones, .dm .inv-fila:focus-within .inv-acciones { opacity: 1; }
.dm .inv-acciones .acceso { text-decoration: none; }
.dm .inv-detalle {
  margin: 2px 0 10px var(--col-puesto); padding: 8px 10px;
  background: var(--panel); border: 1px solid var(--borde); border-radius: 4px;
}
.dm .inv-detalle .pie { margin: 0 0 8px; }
.dm .inv-detalle .tabla-scroll { max-height: 260px; overflow-y: auto; }
.dm .inv-campo { display: flex; flex-direction: column; gap: 4px; font-size: 12px; margin-bottom: 10px; }
.dm .inv-campo small { color: var(--tenue); font-size: 10.5px; }
.dm .inv-campo textarea {
  font: inherit; color: var(--texto); background: var(--panel-alto);
  border: 1px solid var(--borde); border-radius: 4px; padding: 6px 10px; resize: vertical;
}
.dm .inv-campo textarea:focus { outline: 2px solid var(--acento); outline-offset: -1px; }
.dm .modal-botones #modal-quitar { margin-right: auto; }
.dm .controles label { color: var(--tenue); font-size: 11.5px; font-weight: 500; }
.dm .lt-main { display: flex; flex-direction: column; gap: 14px; max-width: 1200px; padding-top: 4px; }
.dm .lt-main { --minor: var(--warn); --partial: var(--aviso); --major: var(--error); --none: var(--borde); }
.dm .lt-banner { display: flex; flex-direction: column; gap: 3px; padding: 16px 20px; border-radius: 4px; color: #fff; background: var(--ok); }
.dm .lt-banner b { font-size: 18px; }
.dm .lt-banner span { font-size: 12.5px; opacity: .92; }
.dm .lt-banner.minor { background: var(--warn); }
.dm .lt-banner.partial { background: var(--partial); }
.dm .lt-banner.major { background: var(--major); }
.dm .lt-banner.none { background: var(--panel); color: var(--texto); border: 1px solid var(--borde); }
.dm .lt-panel { background: var(--panel); border: 1px solid var(--borde); border-radius: 4px; padding: 4px 16px 12px; }
.dm .lt-h { margin: 12px 0 8px; font-size: 15px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dm .lt-h small { font-weight: 400; font-size: 11.5px; color: var(--tenue); }
.dm .lt-h .lt-zoom { margin-left: auto; font-size: 12.5px; }
.dm .lt-dim { color: var(--tenue); }
.dm .lt-zoom { color: var(--acento); text-decoration: none; font-size: 12px; font-weight: 600; white-space: nowrap; }
.dm .lt-zoom:hover { text-decoration: underline; }
.dm #lt-cargar.pendiente { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.dm .lt-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dm .lt-tabla th { text-align: left; font-weight: 500; color: var(--tenue); font-size: 11px; padding: 4px 8px; border-bottom: 1px solid var(--borde); }
.dm .lt-tabla td { padding: 6px 8px; border-bottom: 1px solid var(--borde); }
.dm .lt-tabla tr[data-t] { cursor: pointer; }
.dm .lt-tabla tr[data-t]:hover { background: rgba(127,127,127,.06); }
.dm .lt-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dm .lt-barra-celda { width: 32%; }
.dm .lt-barra-celda small { color: var(--tenue); margin-left: 6px; }
.dm .lt-barra { display: inline-block; height: 10px; border-radius: 3px; vertical-align: middle; max-width: 85%; }
.dm .lt-barra.partial { background: var(--partial); }
.dm .lt-barra.major { background: var(--major); }
.dm .lt-grupo { border-bottom: 1px solid var(--borde); }
.dm .lt-grupo:last-of-type { border-bottom: 0; }
.dm .lt-grupo-top { display: flex; align-items: center; gap: 10px; width: 100%; background: none; border: 0; color: var(--texto); padding: 12px 0; text-align: left; }
.dm .lt-grupo-top:hover:not(:disabled) { border: 0; }
.dm .lt-grupo-top b { font-size: 14.5px; }
.dm .lt-grupo-top small { color: var(--tenue); font-size: 11.5px; flex: 1; }
.dm .lt-mas { width: 18px; height: 18px; border: 1px solid var(--borde); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: var(--tenue); }
.dm .lt-grupo-cuerpo { display: none; padding: 0 0 8px 28px; }
.dm .lt-grupo.abierto .lt-grupo-cuerpo { display: block; }
.dm .lt-comp { padding: 10px 10px 8px; border-radius: 4px; cursor: pointer; }
.dm .lt-comp + .lt-comp { border-top: 1px solid var(--borde); }
.dm .lt-comp:hover { background: rgba(127,127,127,.05); }
.dm .lt-comp.sel { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.dm .lt-comp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.dm .lt-comp-nombre { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.dm .lt-comp-der, .dm .lt-inc-der { display: inline-flex; align-items: center; gap: 10px; }
.dm .lt-estado { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.dm .lt-estado.ok { color: var(--ok); }
.dm .lt-estado.minor { color: var(--minor); }
.dm .lt-estado.partial { color: var(--partial); }
.dm .lt-estado.major { color: var(--major); }
.dm .lt-estado.none { color: var(--tenue); }
.dm .lt-t { font-size: 11px; font-weight: 600; }
.dm .lt-t.bad { color: var(--major); }
.dm .lt-t.ok { color: var(--ok); }
.dm .lt-info { position: relative; display: inline-flex; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--tenue); color: var(--tenue); font-size: 10px; align-items: center; justify-content: center; cursor: help; }
.dm .lt-info-txt { display: none; position: absolute; left: 20px; top: -6px; z-index: 20; width: 340px; padding: 8px 10px; background: var(--fondo); border: 1px solid var(--borde); border-radius: 4px; color: var(--texto); font-size: 11.5px; line-height: 1.5; box-shadow: var(--shadow); font-weight: 400; }
.dm .lt-info:hover .lt-info-txt, .dm .lt-info:focus .lt-info-txt { display: block; }
.dm .lt-barras { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 2px; height: 30px; }
.dm .lt-b { display: block; border-radius: 2px; background: var(--none); min-width: 2px; }
.dm .lt-b.ok { background: var(--ok); }
.dm .lt-b.minor { background: var(--minor); }
.dm .lt-b.partial { background: var(--partial); }
.dm .lt-b.major { background: var(--major); }
.dm .lt-barras .lt-b:hover { opacity: .7; }
.dm .lt-comp-pie { display: flex; align-items: center; gap: 10px; margin-top: 5px; font-size: 11px; color: var(--tenue); white-space: nowrap; }
.dm .lt-comp-pie b { color: var(--texto); }
.dm .lt-linea { flex: 1; height: 1px; background: var(--borde); }
.dm .lt-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11.5px; margin: 10px 0 4px; }
.dm .lt-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.dm .lt-leyenda small { color: var(--tenue); }
.dm .lt-leyenda .lt-b { width: 10px; height: 14px; }
.dm .lt-tip { position: absolute; z-index: 50; width: 280px; padding: 9px 11px; background: var(--fondo); color: var(--texto); border: 1px solid var(--borde); border-radius: 4px; font-size: 12px; box-shadow: var(--shadow); pointer-events: none; }
.dm .lt-tip b { display: block; margin-bottom: 2px; }
.dm .lt-tip p { margin: 4px 0 0; }
.dm .lt-inc-dia h4 { margin: 12px 0 4px; font-size: 13px; padding-bottom: 4px; border-bottom: 1px solid var(--borde); }
.dm .lt-inc { position: relative; padding: 7px 10px; margin: 4px 0; border-left: 3px solid var(--major); border-radius: 0 4px 4px 0; cursor: pointer; }
.dm .lt-inc:hover { background: rgba(127,127,127,.06); }
.dm .lt-inc b { font-size: 13px; }
.dm .lt-inc p { margin: 2px 0; font-size: 12.5px; }
.dm .lt-inc small { color: var(--tenue); font-size: 11px; }
.dm .lt-inc-der { position: absolute; right: 8px; top: 7px; }
.dm .lt-sql { padding: 1px 8px; }
.dm .lt-sql-box { margin: 6px 0 8px; cursor: default; }
.dm .lt-query { position: relative; }
.dm .lt-query pre { margin: 0; padding: 10px 12px; background: var(--fondo); border: 1px solid var(--borde); border-radius: 4px; font-size: 11.5px; max-height: 320px; overflow: auto; white-space: pre; }
.dm .lt-query button { position: absolute; top: 6px; right: 6px; }
@media (max-width: 760px) {
  .dm .lt-grupo-cuerpo { padding-left: 0; }
  .dm .lt-info-txt { width: 240px; left: -100px; top: 20px; }
}
.dm .z-atajos { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dm .z-atajos .pie { margin: 0; }
.dm .atajo.activo { background: color-mix(in srgb, var(--accent) 15%, transparent); border-color: var(--acento); color: var(--acento); }
.dm .z-izq { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 1400px; }
.dm .z-ops { margin-left: auto; display: inline-flex; gap: 6px; }
.dm .z-ops a { text-decoration: none; color: var(--acento); border-color: var(--acento); }
.dm .z-grafico { background: var(--panel); border: 1px solid var(--borde); border-radius: 4px; padding: 12px 14px; min-width: 0; }
.dm .z-grafico h3 { margin: 0 0 8px; font-size: 13px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dm .z-grafico h3 small { font-weight: 400; color: var(--tenue); }
.dm .z-grafico h3 .atajo { margin-left: auto; }
.dm .z-graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dm .z-vacio { color: var(--tenue); font-size: 12.5px; padding: 30px 0; text-align: center; }
.dm #z-columnas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dm .z-chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: transparent; color: var(--tenue); --c: var(--acento); }
.dm .z-chip.on { color: var(--texto); border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.dm .z-chip.tiempo { border: 1px dashed var(--borde); cursor: default; }
.dm .z-chip small { color: var(--acento); }
.dm .z-col-pie { margin: 0 0 0 auto; }
.dm .z-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.dm .z-kpi {
  background: var(--panel); border: 1px solid var(--borde); border-top: 3px solid var(--na);
  border-radius: 4px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.dm .z-kpi.ok { border-top-color: var(--ok); }
.dm .z-kpi.aviso { border-top-color: var(--aviso); }
.dm .z-kpi.error { border-top-color: var(--error); }
.dm .z-kpi span { font-size: 11px; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }
.dm .z-kpi b { font-size: 22px; line-height: 1.2; }
.dm .z-kpi b small { font-size: 12px; color: var(--tenue); font-weight: 400; }
.dm .z-kpi.aviso b { color: var(--aviso); }
.dm .z-kpi.error b { color: var(--error); }
.dm .z-kpi > small { font-size: 11px; color: var(--tenue); line-height: 1.35; overflow-wrap: anywhere; }
.dm .z-hist + .z-hist { margin-top: 8px; border-top: 1px solid var(--borde); padding-top: 6px; }
.dm .z-hist-tit { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12.5px; }
.dm .z-hist-tit small { color: var(--tenue); font-size: 11px; }
.dm .z-nulos, .dm .z-valores-col { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.dm .z-valores { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.dm .z-valores-col > b { margin-bottom: 4px; }
.dm .z-nulo, .dm .z-valor { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 60px; gap: 8px; align-items: center; color: var(--tenue); }
.dm .z-nulo.hay, .dm .z-valor { color: var(--texto); }
.dm .z-nulo-col, .dm .z-valor-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm .z-nulo-barra { height: 8px; background: var(--panel-alto); border-radius: 4px; overflow: hidden; }
.dm .z-nulo-barra i { display: block; height: 100%; background: var(--aviso); }
.dm .z-valor .z-nulo-barra i { background: var(--acento); }
.dm .z-nulo-pct { text-align: right; font-variant-numeric: tabular-nums; }
.dm .z-sql summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.dm .z-sql summary small { font-weight: 400; color: var(--tenue); }
.dm .z-pre { margin: 4px 0 10px; padding: 10px 12px; background: var(--fondo); border: 1px solid var(--borde); border-radius: 4px; font-size: 11.5px; overflow: auto; max-height: 260px; }
@media (max-width: 1300px) {
  .dm .z-graficos { grid-template-columns: minmax(0, 1fr); }
  .dm .z-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dm .op-main { max-width: 1400px; }
.dm .op-izq { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.dm #op-salud { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-bottom: 6px; }
.dm .op-acciones { display: flex; flex-direction: column; gap: 8px; }
.dm .op-accion {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px 12px; border: 1px solid var(--borde); border-radius: 4px; background: var(--panel-alto);
}
.dm .op-accion > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dm .op-accion b { font-size: 13.5px; }
.dm .op-accion small { color: var(--tenue); font-size: 11.5px; }
.dm .op-accion small.op-no { color: var(--aviso); }
.dm .op-accion button { flex: none; min-width: 150px; }
.dm .op-accion button.armado { background: var(--error); color: #fff; }
.dm .op-historia { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; }
.dm .op-historia li { display: flex; gap: 8px; align-items: flex-start; }
.dm .op-historia li small { color: var(--tenue); font-variant-numeric: tabular-nums; }
.dm .op-historia .punto { flex: none; width: 10px; height: 10px; border-radius: 50%; margin-top: 4px; background: var(--na); }
.dm .op-historia li.ok .punto { background: var(--ok); }
.dm .op-historia li.error .punto { background: var(--error); }
@media (max-width: 1300px) {
  .dm #op-salud { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── LiveFirst-side adjustments: last, so they win over the ported rules ───────────────
   The views wear Strategy Monitor's look (desk owner: "igual a strategy monitor, con las
   bolitas"): its frame and pills come from monitor_report.css (#vm-wrap, #vm-head,
   .sm-groups); below, each view's own header is folded into that style — no title bar
   (the pill names the view), the description in grey, and the controls inline and small
   like ⏳ Data latency's (.sm2-controles / .sm2-btn / .sm2-cargar). */
.dm .sm-groups a { text-decoration: none; }
.dm main { padding: 0; }
.dm .barra {
  position: static; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 0; margin: 10px 0 8px; background: none; border: 0;
}
.dm .titulo h1 { display: none; }
.dm .titulo .sub { font-size: 12.5px; color: var(--text-dim); max-width: 90ch; }
.dm .controles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dm .controles label {
  display: inline-flex; flex-direction: row; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 400; color: var(--text-dim);
}
.dm input, .dm select {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 6px; font: inherit; font-size: 12px;
}
.dm .estado-pulso, .dm .z-atajos { padding: 0; margin: 0 0 14px; font-size: 12px; color: var(--text-dim); }
.dm .atajo {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 9px; font-size: 11.5px;
}
.dm .atajo:hover:not(:disabled) { border-color: var(--selected); }
.dm .atajo.activo { border-color: var(--selected); background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--text); }
/* The primary action is Strategy Monitor's ⟳ Load: the accent blue, bold. */
.dm button.primario {
  background: var(--selected); border: 1px solid var(--selected); color: #fff;
  border-radius: 4px; padding: 3px 10px; font-size: 12px; font-weight: 600;
}
.dm button.primario:hover:not(:disabled) { filter: brightness(1.1); }
.dm button.primario:disabled { opacity: .5; }
.dm .op-accion button.primario { padding: 6px 14px; font-size: 13px; }

/* ✅ Completeness (dm_completeness.js): the verdict is Latency's banner, the tables its .lt-tabla;
   only what is its own is here. A late signal is the app's sell red, a whole one its buy green. */
.dm .cm-ayuda { margin: 0 0 12px; font-size: 12.5px; color: var(--text-dim); }
.dm .cm-ayuda summary { cursor: pointer; color: var(--text); }
.dm .cm-ayuda ul { margin: 6px 0 0; padding-left: 20px; max-width: 110ch; }
.dm .cm-filtro { float: right; display: inline-flex; gap: 4px; align-items: center; font-size: 12px; font-weight: 400; color: var(--text-dim); }
.dm .cm-medir { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; color: var(--text-dim); }
.dm .cm-medir .pie { margin: 0; }
.dm .cm-mal { color: var(--sell); }
.dm .cm-tabla tr.cm-dif td { background: color-mix(in srgb, var(--sell) 7%, transparent); }
.dm .cm-total td { border-bottom: 1px solid var(--border); }
.dm .cm-chip { text-decoration: none; }
.dm .cm-chip:hover { text-decoration: underline; }

/* Completeness, at a glance (desk owner: "it is hardly visual"): four big tiles that link to
   their section, charts first, every table folded under its chart. */
.dm .cm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.dm a.cm-kpi { text-decoration: none; color: var(--text); padding: 10px 14px; }
.dm a.cm-kpi:hover { border-color: var(--selected); }
.dm a.cm-kpi b { font-size: 30px; }
.dm .cm-grafico { min-height: 60px; }
.dm .cm-plegado { margin-top: 8px; }
.dm .cm-plegado > summary { cursor: pointer; font-size: 12.5px; color: var(--selected); }
.dm .cm-plegado[open] > summary { margin-bottom: 8px; }
.dm .cm-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border); border-top-color: var(--selected); animation: cm-giro .8s linear infinite; }
.dm .cm-spinner[hidden] { display: none; }
@keyframes cm-giro { to { transform: rotate(360deg); } }
.dm .cm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dm .cm-chip-nulo { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border: 1px solid var(--border); border-left: 3px solid var(--buy); border-radius: 4px; font-size: 12px; }
.dm .cm-chip-nulo.hay { border-left-color: var(--warn); }
.dm .cm-chip-nulo small { color: var(--text-dim); }
@media (max-width: 1100px) { .dm .cm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 🔬 Why it differed (dm_why.js): /process/trades' shape and type — the signals on the left,
   the chosen one on the right; small uppercase headers, 12px tabular rows, one accent. Calm:
   red only where live saw an empty cell, amber where a value changed. */
.dm .wy {
  display: grid; grid-template-columns: 430px minmax(0, 1fr);
  height: calc(100vh - 190px); min-height: 520px;
  border: 1px solid var(--border); border-radius: 4px; background: var(--panel); overflow: hidden;
}
.dm .wy-lista { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.dm .wy-lista-head {
  display: flex; justify-content: space-between; padding: 8px 10px; font-size: 11px; letter-spacing: .08em;
  color: var(--text-dim); border-bottom: 1px solid var(--border);
}
.dm .wy-lista-head #wy-n { color: var(--text); letter-spacing: 0; }
.dm .wy-filtros { display: flex; gap: 3px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.dm .wy-f {
  border: 1px solid var(--border); border-radius: 4px; background: var(--panel); color: var(--text-dim);
  font-size: 11px; line-height: 1; padding: 4px 6px; cursor: pointer;
}
.dm .wy-f:hover { background: var(--subtle); color: var(--text); }
.dm .wy-f[aria-pressed="true"] { border-color: var(--selected); color: var(--selected); background: color-mix(in srgb, var(--selected) 8%, transparent); }
.dm .wy-fn { color: inherit; opacity: .75; font-variant-numeric: tabular-nums; margin-left: 2px; }
.dm .wy-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.dm .wy-tabla { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
.dm .wy-tabla th {
  position: sticky; top: 0; background: var(--panel); text-align: left; font-size: 10px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; color: var(--text-dim); border-bottom: 1px solid var(--border);
  padding: 0 6px; height: 24px;
}
.dm .wy-tabla td { height: 26px; padding: 0 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dm .wy-tabla td.wy-t { color: var(--text-dim); }
.dm .wy-fila { cursor: pointer; }
.dm .wy-fila:hover td { background: var(--subtle); }
.dm .wy-fila.is-sel td { background: var(--border); }
.dm .wy-fila.is-sel td:first-child { box-shadow: inset 3px 0 0 var(--selected); }
.dm .wy-vacio { padding: 12px 10px; color: var(--text-dim); font-size: 12px; margin: 0; }
.dm .wy-vacio[hidden] { display: none; }
.dm .wy-p {
  display: inline-block; min-width: 40px; text-align: center; padding: 0 4px; border: 1px solid var(--border);
  border-radius: 3px; font-size: 10px; line-height: 15px; font-weight: 700;
}
.dm .wy-p.up { color: var(--up); border-color: currentColor; }
.dm .wy-p.down { color: var(--down); border-color: currentColor; }
.dm .wy-p.flat, .dm .wy-p.none { color: var(--text-dim); }
.dm .wy-flecha { color: var(--text-dim); margin: 0 4px; }
.dm .wy-c { display: inline-block; padding: 0 5px; border: 1px solid var(--border); border-radius: 3px; font-size: 10.5px; line-height: 16px; color: var(--text-dim); white-space: nowrap; }
.dm .wy-c.datos { color: var(--warn); border-color: currentColor; }
.dm .wy-c.otro { color: var(--selected); border-color: currentColor; }
.dm .wy-dim { color: var(--text-dim); font-size: 11px; }

.dm .wy-detalle { overflow-y: auto; padding: 16px 22px 40px; min-width: 0; }
.dm .wy-quien { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-dim); margin-bottom: 8px; letter-spacing: .02em; }
.dm .wy-frase { font-size: 17px; line-height: 1.55; margin: 0 0 8px; color: var(--text); max-width: 95ch; }
.dm .wy-causa { font-size: 13px; line-height: 1.5; margin: 0 0 14px; color: var(--text); max-width: 110ch; }
.dm .wy-causa:empty { display: none; }
.dm .wy-frase code, .dm .wy-causa code { font-family: var(--mono-font); font-size: .88em; background: var(--subtle); padding: 0 4px; border-radius: 3px; }
.dm .wy-bloque { border-top: 1px solid var(--border); padding: 12px 0 4px; }
.dm .wy-bloque[hidden] { display: none; }
.dm .wy-bloque h4 { margin: 0 0 10px; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.dm .wy-bloque h4 small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 6px; }
.dm .wy-lado-a-lado { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; overflow-x: auto; }
.dm .wy-lado { font-size: 11px; font-weight: 600; color: var(--text); margin-bottom: 4px; }
.dm .wy-celdas { border-collapse: collapse; font-size: 11.5px; font-variant-numeric: tabular-nums; width: 100%; }
.dm .wy-celdas th { font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); text-align: right; padding: 2px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dm .wy-celdas td { text-align: right; padding: 3px 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dm .wy-celdas th:first-child, .dm .wy-celdas td.wy-bar { text-align: left; color: var(--text-dim); }
.dm .wy-celdas td.wy-missing { background: color-mix(in srgb, var(--sell) 14%, transparent); color: var(--sell); font-weight: 700; }
.dm .wy-celdas td.wy-changed, .dm .wy-celdas td.wy-extra { background: color-mix(in srgb, var(--warn) 14%, transparent); font-weight: 600; }
.dm .wy-celdas td.wy-nobar { text-align: center; color: var(--sell); background: color-mix(in srgb, var(--sell) 8%, transparent); font-style: italic; }
.dm .wy-rasgos { width: auto; margin-top: 10px; }
.dm .wy-recta { width: 100%; max-width: 620px; height: auto; display: block; }
.dm .wy-recta .banda { fill: var(--subtle); stroke: var(--border); }
.dm .wy-recta .eje { stroke: var(--text-dim); stroke-width: 1; }
.dm .wy-recta .lv { fill: var(--text); }
.dm .wy-recta .bt { fill: var(--panel); stroke: var(--text); stroke-width: 2; }
.dm .wy-recta .eti { fill: var(--text-dim); font-size: 11px; text-anchor: middle; }
.dm .wy-recta .eti.fuerte { fill: var(--text); font-weight: 600; }
.dm .wy-tira { position: relative; height: 96px; margin: 0 8px; }
.dm .wy-linea { position: absolute; left: 0; right: 0; top: 48px; border-top: 1px solid var(--text-dim); }
.dm .wy-leyo { position: absolute; top: 14px; bottom: 14px; border-left: 2px solid var(--selected); }
.dm .wy-ev { position: absolute; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; font-size: 10.5px; white-space: nowrap; color: var(--text-dim); }
.dm .wy-ev::before { content: ""; position: absolute; left: 50%; width: 7px; height: 7px; margin-left: -4px; border-radius: 50%; background: var(--text-dim); }
.dm .wy-ev.arriba { bottom: 52px; }
.dm .wy-ev.arriba::before { bottom: -8px; }
.dm .wy-ev.abajo { top: 52px; }
.dm .wy-ev.abajo::before { top: -8px; }
.dm .wy-ev-t { font-variant-numeric: tabular-nums; color: var(--text); font-weight: 600; }
.dm .wy-ev.live, .dm .wy-ev.live .wy-ev-t { color: var(--selected); }
.dm .wy-ev.live::before { background: var(--selected); }
.dm .wy-ev.tarde, .dm .wy-ev.tarde .wy-ev-t { color: var(--sell); }
.dm .wy-ev.tarde::before { background: var(--sell); }
.dm .wy-efecto { font-size: 13px; margin: 0 0 8px; }
.dm .wy-otros { width: auto; min-width: 360px; }
.dm .wy-linea-dif { border-left: 2px solid var(--border); padding-left: 10px; margin-bottom: 10px; font-size: 12px; }
.dm .wy-linea-dif p { margin: 2px 0; }
.dm .wy-linea-dif .wy-lado { display: inline-block; width: 64px; color: var(--text-dim); font-weight: 600; }
.dm .cm-salud { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 8px; }
.dm .cm-salud > summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--text); padding: 6px 0; }
.dm .cm-salud > summary small { font-weight: 400; color: var(--text-dim); margin-left: 6px; }
.dm .cm-salud-controles { margin: 6px 0 10px; }
@media (max-width: 1200px) { .dm .wy { grid-template-columns: 340px minmax(0, 1fr); } .dm .wy-lado-a-lado { grid-template-columns: minmax(0, 1fr); } }

/* ✅ Completeness's folded signal list (/process/trades' detail look). */
.dm .ln-difs { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.dm .ln-difs li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.dm .ln-difs li:hover { background: var(--subtle); }
.dm .ln-porque { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* ✅ Completeness (dm_completeness.js): ⏳ Latency's rows (.lt-comp, .lt-barras), plus the zoom
   drawer of one table — before/after numbers, its charts, its jobs. Calm: the ranges are the
   only colour (green in range, amber within the agent's lag, red late). */
.dm .cm-titular { font-size: 15px; font-weight: 500; line-height: 1.45; }
.dm .cm-titular b { font-weight: 700; }
.dm .cm-rol { color: var(--text-dim); font-size: 12px; font-weight: 400; }
.dm .cm-fila { cursor: pointer; }
.dm .cm-job-cifras { display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 12.5px; padding: 4px 0 2px; }
.dm .cm-job-cifras small { color: var(--text-dim); margin-left: 4px; }
.dm .cm-z-cambio { font-size: 12.5px; color: var(--text-dim); margin: 0 0 8px; }
.dm .cm-z-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.dm .cm-cifra { border: 1px solid var(--border); border-radius: 4px; background: var(--panel); padding: 8px 12px; display: flex; flex-direction: column; gap: 1px; }
.dm .cm-cifra > span { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.dm .cm-cifra b { font-size: 24px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.dm .cm-cifra b small { font-size: 12px; font-weight: 400; color: var(--text-dim); }
.dm .cm-cifra > small { font-size: 11.5px; color: var(--text-dim); }
.dm .cm-flecha { font-size: 14px; margin-left: 6px; vertical-align: 3px; }
.dm .cm-flecha.mejor, .dm .cm-fuente b.mejor { color: var(--buy); }
.dm .cm-flecha.peor, .dm .cm-fuente b.peor { color: var(--sell); }
.dm .cm-flecha.igual { color: var(--text-dim); }

/* ✅ Completeness: a table's detail opens right under its row (no overlays). Latency's type and
   spacing, generous whitespace, the three range colours only. */
.dm .cm-mas { display: inline-block; width: 14px; color: var(--text-dim); font-weight: 700; }
.dm .cm-fila.abierta { border-color: var(--selected); }
.dm .cm-detalle { margin: 0 0 14px; padding: 16px 18px 8px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 4px 4px; background: var(--panel); cursor: default; }
.dm .cm-g { margin: 18px 0 8px; }
.dm .cm-g h4 { margin: 0; font-size: 14px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.dm .cm-g-sub { margin: 2px 0 6px; font-size: 12px; color: var(--text-dim); max-width: 110ch; }
.dm .cm-g-plot { width: 100%; min-height: 250px; }
.dm .cm-g-plot.alto { min-height: 380px; }
.dm .cm-g-nota { margin: 2px 0 0; font-size: 12.5px; }
.dm .cm-senales { margin-top: 10px; }
.dm .wy-cajon { margin: 6px 0 12px; border: 1px solid var(--border); border-left: 3px solid var(--selected); border-radius: 4px; background: var(--panel); }
.dm .wy-cajon[hidden] { display: none; }
.dm .wy-cajon-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; }
.dm .wy-cajon-head button { border: 1px solid var(--border); background: var(--panel); border-radius: 4px; font-size: 11px; padding: 2px 6px; cursor: pointer; }
.dm .wy-cajon .wy-detalle { padding: 12px 16px 16px; }