/* NOC FibraSLP · vista «Respaldos» — v1.9 · rediseño Fase 1
 * Estilos del módulo static/respaldos.js (prefijo .bk-). Reutiliza las variables y clases de
 * index.html (.tiles.compact/.tile, .pill/.dot, .seg, button.on/.mini/.danger, .banner, table/th/td,
 * .num, .pager, dialog/.dlg-head/.dlg-body, .form/.card/.head/.grid2, label.f, .check, .secret,
 * .actions, .res, .hint) y los componentes globales del rediseño (.trunc, .mono, .sub, .dense,
 * .tbl-wrap, td.acts/.acts-row, button.icon, details.kebab), que aquí NO se redefinen: las
 * variantes llevan prefijo .bk-. Acciones: respaldo = azul (--s1), reinicio = ámbar (--warning),
 * actualización = naranja (--serious). */
#respaldos-root{display:flex;flex-direction:column;gap:12px;min-width:0}
#bk-stage{display:flex;flex-direction:column;gap:10px;min-width:0}
.bk-muted{color:var(--muted)}
.bk-warn{color:var(--warning)}
.bk-add{color:var(--good);font-variant-numeric:tabular-nums}
.bk-rem{color:var(--critical);font-variant-numeric:tabular-nums}
.bk-sub{color:var(--muted);font-size:11px;font-weight:400;line-height:1.3}
.bk-count{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.bk-count:empty{display:none}
.bk-empty{color:var(--muted);padding:18px 14px;background:var(--surface);border:1px solid var(--border);
  border-radius:10px;line-height:1.55}
.bk-empty b{color:var(--ink-2)}
.bk-empty ul{margin:8px 0;padding-left:20px}
.bk-empty li{margin:3px 0}
.bk-foot{display:flex;gap:4px 14px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.bk-foot .err{color:var(--critical)}
/* punto azul con pulso: respaldo o tarea en curso */
.dot.bk-run{background:var(--s1);animation:bk-pulse 1.3s ease-in-out infinite}
@keyframes bk-pulse{0%,100%{box-shadow:0 0 0 0 rgba(57,135,229,.55)}60%{box-shadow:0 0 0 5px rgba(57,135,229,0)}}
@media(prefers-reduced-motion:reduce){.dot.bk-run{animation:none}}

/* tarjetas que son botones (filtro «Con error», atajos a Programaciones): un <button> centra su
   contenido en vertical y, como la de «Respaldados» es más alta por su barrita, quedarían
   desalineadas; así arrancan arriba como las demás */
.bk-kpis button.tile{display:flex;flex-direction:column;justify-content:flex-start}

/* barra: pestañas · dato común (#bk-info) · resultado de «Respaldar todos» · filtros a la derecha.
   Botones y campos de 30 px, como los del encabezado */
.bk-bar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;min-height:30px}
.bk-bar .seg{flex-wrap:wrap}
.bk-bar .seg button{height:30px;padding:0 12px;font-size:13px}
.bk-bar .seg button.on{background:var(--surface);box-shadow:inset 0 -2px 0 var(--s1)}
.bk-n{display:inline-block;margin-left:4px;padding:0 6px;border-radius:999px;background:var(--grid);
  color:var(--ink-2);font-size:11px;line-height:17px;font-variant-numeric:tabular-nums}
/* «Programación de los 46: …» cuando todos los equipos están en las mismas: un renglón que se
   corta con «…» (el title lo lista completo) en lugar de una columna que repite lo mismo */
.bk-info{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:6px;overflow:hidden;white-space:nowrap;
  color:var(--muted);font-size:12px}
.bk-info:empty{display:none}
.bk-info-k{flex:none}
.bk-info .bk-chip{margin:0;flex:0 1 auto;min-width:0}
.bk-bar-res{max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-bar-res:empty{display:none}
.bk-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto;justify-content:flex-end;min-width:0}
.bk-tools input[type=search],.bk-tools select,.bk-pick-bar input[type=search]{background:var(--plane);color:var(--ink);
  border:1px solid var(--border);border-radius:6px;padding:5px 9px;font:inherit;font-size:13px}
.bk-tools input[type=search],.bk-tools select{height:30px}
.bk-tools input[type=search]{width:240px;max-width:60vw}
.bk-tools input:focus,.bk-tools select:focus,.bk-pick-bar input:focus{outline:none;border-color:var(--s1)}
.bk-tools .res{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* enlace con aspecto de botón (descargas: <a href download>) */
.bk-abtn{display:inline-block;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border);
  border-radius:6px;padding:6px 12px;font-size:13px;text-decoration:none;cursor:pointer;white-space:nowrap}
.bk-abtn:hover{color:var(--ink);border-color:var(--muted)}

/* avisos */
.bk-notices{display:grid;gap:8px}
.bk-notices:empty{display:none}
.bk-notices .banner{margin:0;line-height:1.5;padding:8px 14px}
.bk-notices .banner b{color:var(--ink)}
.bk-cta{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;background:var(--surface);
  border:1px dashed var(--s1);border-radius:10px;padding:10px 16px;color:var(--ink-2);line-height:1.5}
.bk-cta .t{flex:1 1 380px;min-width:0}
.bk-cta .t b{color:var(--ink);display:block;margin-bottom:2px}
.bk-cta .a{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* contenedor con desplazamiento horizontal propio (equipos eliminados): en pantallas angostas se
   desplaza la tabla y no la página */
.bk-tablewrap{overflow-x:auto;max-width:100%;border-radius:10px}
.bk-table,.bk-jtable,.bk-stable,.bk-otable{white-space:nowrap}
.bk-table td,.bk-jtable td,.bk-stable td,.bk-otable td{vertical-align:middle}

/* ── Equipos: un renglón por equipo (.dense, fila ≈ 30 px) ──
   Relleno lateral de 8 px (10 en .dense): con 10 columnas son 40 px que hacen falta para que la
   tabla quepa a 1366 sin desplazarse. Los anchos tope de los textos cortados con «…» bajan por
   niveles (.bk-tight / .bk-tight2, abajo) que respaldos.js elige MIDIENDO si la tabla cabe. */
.bk-table td,.bk-table th{padding-left:8px;padding-right:8px}
.bk-table th{letter-spacing:.04em}
.bk-table th.sortable{cursor:pointer;user-select:none}
.bk-table th.sortable:hover,.bk-table th.on{color:var(--ink)}
/* la flecha solo existe en la columna ordenada (vacía no ocupa nada): antes reservaba 16 px en
   cada cabecera ordenable y eso, no el dato, fijaba el ancho de las columnas de fecha */
.bk-table th .arrow{margin-left:3px;color:var(--s1);font-size:9px}
.bk-table .bk-name{--trunc:300px}
.bk-table .bk-site{--trunc:170px}
.bk-table .bk-note{--trunc:240px}
/* estado + segundo dato (error o resultado de «Respaldar») en un renglón. En Equipos la celda
   entera lleva tope (--stl): con «con error» + «⚠ sin guardar» + el error llegaba a ~437 px y
   desbordaba la tabla aun a 1920; la nota es lo que cede (flex 1 1 auto con min-width 0) */
.bk-stl{display:inline-flex;align-items:center;gap:6px;max-width:100%;vertical-align:middle}
.bk-stl > .pill,.bk-stl > .bk-badge,.bk-stl > .bk-chip{flex:none}
.bk-stl .bk-chip{margin:0}
.bk-table .bk-stl{max-width:var(--stl,330px)}
.bk-table .bk-stl > .bk-note{flex:1 1 auto;min-width:0}
/* la nota va a 13 px (los del resto de la fila densa) y el error en un rojo aclarado solo para
   texto: el --critical puro sobre --surface daba ≈ 3.6:1 (el mismo tono que .kebab-menu > .danger) */
.bk-note.err{color:color-mix(in srgb,var(--critical) 65%,#fff)}
.bk-note.ok{color:var(--good)}
.bk-link{background:none;border:none;padding:0;color:var(--ink);font:inherit;font-weight:600;cursor:pointer;
  text-align:left}
.bk-link:hover{color:var(--s1);text-decoration:underline}
.bk-link.trunc{vertical-align:middle}
/* equipo deshabilitado: la fila va atenuada (tr.dim) y la palabra solo en el title del nombre */
.bk-table tr.dim .bk-link{color:var(--muted);font-weight:500}
/* chips dentro de las tablas: 12 px como las píldoras, sin margen (con el de abajo la fila subía
   a 35 px) y el de la columna Programación con tope (el texto completo va en su title) */
.bk-table .bk-chip{margin:0;font-size:12px}
.bk-table .bk-schchip{max-width:110px}
/* número de versiones como enlace: abre el diálogo de versiones (antes era un botón aparte) */
.bk-vlink{background:none;border:none;border-radius:4px;padding:0 3px;margin:0 -3px;color:var(--ink);font:inherit;
  cursor:pointer;font-variant-numeric:tabular-nums;text-decoration:underline dotted var(--muted);text-underline-offset:3px}
.bk-vlink:hover{color:var(--s1);text-decoration:underline solid var(--s1)}
.bk-vlink:focus-visible{outline:2px solid var(--s1);outline-offset:1px}
/* «Respaldar»: icono + texto de 26 px (alto de un button.icon en .dense) que no estira la fila.
   Clase propia .bk-runbtn: con .bk-run le caía también al punto azul con pulso (.dot.bk-run) de
   «respaldando…» y lo volvía un óvalo de 18×8 px */
.bk-runbtn{height:26px;padding:0 9px;font-size:12px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.bk-runbtn svg.i{width:14px;height:14px}
/* el error de la ficha del equipo (caja .bk-box) sigue en varios renglones: allí sí hay espacio */
.bk-err{color:var(--critical);font-size:11px;line-height:1.35;margin-top:4px;max-width:260px;white-space:normal;
  overflow-wrap:anywhere}
.bk-chip{display:inline-block;margin:0 4px 3px 0;padding:1px 8px;border-radius:999px;font-size:11px;line-height:17px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.bk-chip.bk{border-color:rgba(57,135,229,.55);color:#9cc4f5}
.bk-chip.rb{border-color:rgba(250,178,25,.55);color:#ffd479}
.bk-chip.up{border-color:rgba(236,131,90,.6);color:#f5b49b}
button.bk-chip.x{cursor:pointer;border-color:var(--s1);color:var(--ink);font-size:12px;padding:3px 10px;margin:0}
button.bk-chip.x:hover{background:var(--s1)}
.bk-chips{display:inline-flex;gap:6px;flex-wrap:wrap;align-items:center}
.bk-chips:empty{display:none}
/* Si la tabla no cabe ni con los recortes, respaldos.js marca el contenedor con .bk-ovf: se
   desplaza a lo ancho dentro de su caja y no la página. Ahí el encabezado ya no puede quedar fijo
   contra la página (el contenedor con overflow lo impide), así que vuelve a top:0 en lugar de
   flotar 50 px dentro de la caja, y la columna de acciones se queda pegada a la derecha (con una
   sombra que avisa que hay más columnas debajo): Respaldar, Ejecutar, Editar, Historial y el ⋯
   siguen a la vista a cualquier ancho. Vale para las tres tablas (Equipos, Programaciones,
   Historial). */
.bk-tw.bk-ovf{overflow-x:auto}
.bk-tw.bk-ovf > table > thead > tr > th{top:0}
.bk-tw.bk-ovf > table > thead > tr > th.acts,.bk-tw.bk-ovf td.bk-actions{position:sticky;right:0;
  background:var(--surface);box-shadow:-10px 0 10px -10px rgba(0,0,0,.7)}
.bk-tw.bk-ovf > table > thead > tr > th.acts{z-index:3}
.bk-tw.bk-ovf tbody tr:hover td.bk-actions{background:var(--surface-2)}
@media(max-width:900px){
  /* .tbl-wrap ya se desplaza a lo ancho aquí (index.html): el mismo arreglo del encabezado */
  .bk-tw > table > thead > tr > th{top:0}
}

/* ── Historial: un renglón por trabajo; el Detalle toma el ancho que sobra y se corta con «…» ──
   Origen se oculta cuando es el mismo en toda la página (respaldos.js lo dice en la barra); si no,
   lleva tope para no quitarle ancho al Detalle, que es lo que cambia de fila a fila */
.bk-jtable .bk-jdev{--trunc:240px}
.bk-jtable .bk-jorig{--trunc:180px}
.bk-jorig svg.i,.bk-info .bk-chip svg.i{color:var(--muted);margin-right:5px}
/* el Detalle es la columna elástica (ancho tope 0: toma lo que sobra) con un mínimo útil: si no le
   quedan 220 px, la tabla «no cabe» y fitTable() pasa al nivel siguiente, que recorta las demás */
.bk-jtable td.bk-jdetail{max-width:0;width:100%;min-width:220px;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.bk-otable{min-width:640px}
.bk-orph{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 14px}
.bk-orph summary{cursor:pointer;color:var(--ink-2);font-size:13px;user-select:none}
.bk-orph summary:hover{color:var(--ink)}
.bk-orph table{background:var(--surface-2)}

/* insignia de acción */
.bk-badge{display:inline-block;padding:1px 9px;border-radius:999px;font-size:11px;font-weight:700;line-height:17px;
  letter-spacing:.02em;white-space:nowrap;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--border)}
.bk-badge.bk{background:var(--s1);border-color:var(--s1);color:#fff}
.bk-badge.rb{background:var(--warning);border-color:var(--warning);color:#1a1a19}
.bk-badge.up{background:var(--serious);border-color:var(--serious);color:#1a1a19}

/* ── Programaciones: un renglón por programación ──
   La franja izquierda conserva el color de la acción (lo que antes era el borde superior de la
   tarjeta); las deshabilitadas van atenuadas. Opciones es la columna elástica: toma el ancho que
   sobra y se corta, con un mínimo de 120 px; si no cabe, fitTable() pasa al nivel .bk-tight, que la
   oculta (las opciones siguen en el title del nombre y en el detalle que abre el nombre). */
.bk-stable .bk-swc{width:1%;padding-right:4px}
/* el interruptor (21 px) y las insignias al medio: con la línea base estiraban la fila a 37 px */
.bk-stable .bk-switch,.bk-stable .bk-badge{vertical-align:middle}
/* para el operador el interruptor es un punto suelto: un span en línea ignora width/height fuera
   de un contenedor flex y medía 0×0 */
.bk-swc > .dot{display:inline-block;vertical-align:middle}
.bk-srow > td:first-child{box-shadow:inset 3px 0 0 var(--muted)}
.bk-srow.bk > td:first-child{box-shadow:inset 3px 0 0 var(--s1)}
.bk-srow.rb > td:first-child{box-shadow:inset 3px 0 0 var(--warning)}
.bk-srow.up > td:first-child{box-shadow:inset 3px 0 0 var(--serious)}
.bk-srow.dim .bk-badge,.bk-srow.dim .pill{opacity:.65}
.bk-sname{--trunc:340px;font-weight:600;color:var(--ink)}
.bk-srow.dim .bk-sname{color:var(--ink-2)}
.bk-stable .bk-swhen{--trunc:200px}
.bk-stable .bk-tgt{--trunc:180px}
.bk-stable .bk-ldet{--trunc:150px;color:var(--ink-2);font-size:12px}
/* resultado de una acción en la columna de acciones: con tope para no ensancharla */
.bk-stable .bk-sres{--trunc:110px;margin-right:4px}
.bk-stable td.bk-optc{max-width:0;width:100%;min-width:120px;overflow:hidden;color:var(--ink-2);font-size:12px}
.bk-stable .bk-opts{--trunc:100%}
.bk-noteic{display:inline-flex;color:var(--muted);cursor:help}
.bk-noteic svg.i{width:14px;height:14px}
/* notas en el detalle de una programación: conservan sus saltos de línea */
.bk-snotes{white-space:pre-wrap;overflow-wrap:anywhere}

/* ── Niveles de recorte (respaldos.js fitTable(): los elige MIDIENDO si la tabla cabe) ──
   Nivel 1 · .bk-tight: sin la IP ni el segundo archivo a la vista (siguen en el title y en el
   buscador), «Respaldar» solo con icono y topes menores. En Programaciones, sin el detalle de la
   última ejecución (va en el title de su píldora), sin «en 4 h» y sin la columna Opciones. */
.bk-tight .bk-table .bk-host,.bk-tight .bk-table .bk-x{display:none}
.bk-tight .bk-table{--stl:250px}
.bk-tight .bk-table .bk-name{--trunc:190px}
.bk-tight .bk-table .bk-site{--trunc:120px}
.bk-tight .bk-table .bk-note{--trunc:150px}
.bk-tight .bk-runbtn{width:26px;padding:0;justify-content:center}
.bk-tight .bk-runbtn .lbl{display:none}
.bk-tight .bk-jtable .bk-jdev{--trunc:170px}
.bk-tight .bk-jtable .bk-jorig{--trunc:140px}
.bk-tight .bk-stable .bk-swhen{--trunc:150px}
.bk-tight .bk-stable .bk-tgt{--trunc:150px}
.bk-tight .bk-stable .bk-ldet,.bk-tight .bk-stable .bk-nextin,.bk-tight .bk-stable .bk-optc{display:none}
/* sin Opciones, el nombre pasa a ser la columna elástica: toma lo que sobra (a 1720 cabe entero)
   en lugar de repartirlo entre todas las columnas con el nombre cortado a un tope fijo. Su mínimo
   (340 px con la insignia; 280 sin ella desde .bk-tight2) hace que, si el nombre quedaría muy
   corto, la tabla «no cabe» y se pase al nivel siguiente */
.bk-tight .bk-stable td.bk-cname{max-width:0;width:100%;min-width:340px}
.bk-tight .bk-stable .bk-sname{--trunc:100%}
/* Nivel 2 · .bk-tight2 (≈ 1366): topes menores, el error todavía a la vista. En Programaciones se
   recortan Cuándo y Equipos antes que el nombre, y la insignia se oculta: la franja de color de la
   fila ya dice la acción (y el title del nombre la nombra). */
.bk-tight2 .bk-table{--stl:220px}
.bk-tight2 .bk-table .bk-name{--trunc:160px}
.bk-tight2 .bk-table .bk-site{--trunc:100px}
.bk-tight2 .bk-table .bk-note{--trunc:110px}
.bk-tight2 .bk-jtable .bk-jdev{--trunc:140px}
.bk-tight2 .bk-stable .bk-swhen{--trunc:120px}
.bk-tight2 .bk-stable .bk-tgt{--trunc:140px}
.bk-tight2 .bk-stable .bk-cname .bk-badge{display:none}
.bk-tight2 .bk-stable td.bk-cname{min-width:280px}
/* Nivel 3 · .bk-tight3 (≈ 1280, letra grande, celular): sin la nota del error (sigue en el title
   de la píldora; el resultado recién pulsado de «Respaldar» sí se ve, corto) y «⚠» sin palabra:
   en el celular la columna Estado deja ver el nombre del equipo, que es lo que identifica la fila */
.bk-tight3 .bk-table .bk-name{--trunc:150px}
.bk-tight3 .bk-table .bk-site{--trunc:90px}
.bk-tight3 .bk-table .bk-note:not(.bk-note-res){display:none}
.bk-tight3 .bk-table .bk-note{--trunc:100px}
.bk-tight3 .bk-uns-l{display:none}
.bk-tight3 .bk-stable .bk-swhen,.bk-tight3 .bk-stable .bk-tgt{--trunc:110px}
/* Nivel 4 · .bk-ovf (arriba): se desplaza dentro de su caja, con las columnas elásticas en su mínimo */

/* pantallas medianas: buscador más corto y «Programación:» sin «de los 46» (sigue en el title) */
@media(max-width:1700px){
  .bk-tools input[type=search]{width:190px}
  .bk-info-x{display:none}
}

/* ── Programaciones en el celular (≤ 700 px): lista apilada en lugar de tabla ──
   Cada fila es una rejilla: interruptor y nombre (puede ocupar dos renglones) arriba, un renglón
   por dato con su rótulo y las acciones al final, todo a la vista y sin desplazar a lo ancho
   (Opciones, el detalle de la última ejecución y «en 4 h» vuelven a verse aquí, porque hay alto
   de sobra). */
@media(max-width:700px){
  .bk-stable,.bk-stable > tbody{display:block}
  .bk-stable > thead{display:none}
  .bk-stable > tbody > tr.bk-srow{display:grid;grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"sw name" ". when" ". tgt" ". next" ". last" ". opt" ". acts";
    gap:3px 10px;align-items:center;padding:8px 10px 9px;border-bottom:1px solid var(--grid)}
  .bk-stable > tbody > tr.bk-srow:last-child{border-bottom:0}
  .bk-stable > tbody > tr.bk-srow > td,.bk-stable > tbody > tr.bk-srow > td:first-child{display:block;padding:0;
    border:0;min-width:0;max-width:none;width:auto;font-size:13px;box-shadow:none;border-radius:0}
  /* la franja de color pasa de la primera celda a la fila completa */
  .bk-srow{box-shadow:inset 3px 0 0 var(--muted)}
  .bk-srow.bk{box-shadow:inset 3px 0 0 var(--s1)}
  .bk-srow.rb{box-shadow:inset 3px 0 0 var(--warning)}
  .bk-srow.up{box-shadow:inset 3px 0 0 var(--serious)}
  .bk-stable td.bk-swc{grid-area:sw}
  .bk-stable td.bk-cname{grid-area:name}
  .bk-stable td.acts{grid-area:acts;text-align:left;padding-top:3px}
  .bk-stable td.bk-cwhen{grid-area:when}
  .bk-stable td.bk-ctgt{grid-area:tgt}
  .bk-stable td.bk-cnext{grid-area:next}
  .bk-stable td.bk-clast{grid-area:last}
  .bk-stable td.bk-optc{grid-area:opt;white-space:normal;overflow:visible}
  /* rótulo + dato en una fila flexible: el dato cede (min-width 0) y se corta dentro de la tarjeta
     en lugar de salirse por la derecha */
  .bk-stable > tbody > tr.bk-srow > td:is(.bk-cwhen,.bk-ctgt,.bk-cnext,.bk-clast,.bk-optc){display:flex;
    align-items:center;gap:0 6px}
  .bk-stable td:is(.bk-cwhen,.bk-ctgt,.bk-cnext,.bk-clast,.bk-optc) > *{min-width:0}
  .bk-stable td:is(.bk-cwhen,.bk-ctgt,.bk-cnext,.bk-clast,.bk-optc)::before{flex:none;width:62px;
    color:var(--muted);font-size:12px}
  .bk-stable td.bk-cwhen::before{content:"Cuándo"}
  .bk-stable td.bk-ctgt::before{content:"Equipos"}
  .bk-stable td.bk-cnext::before{content:"Próxima"}
  .bk-stable td.bk-clast::before{content:"Última"}
  .bk-stable td.bk-optc::before{content:"Opciones"}
  .bk-stable td.bk-cnext .sub{margin-left:0}
  /* sin topes: cada dato tiene el ancho de la tarjeta (y se corta con «…» si aun así no cabe) */
  .bk-stable .bk-sname,.bk-stable .bk-swhen,.bk-stable .bk-tgt,.bk-stable .bk-ldet{--trunc:100%}
  .bk-stable .bk-stl{max-width:100%;min-width:0}
  .bk-stable .bk-stl > .trunc{flex:0 1 auto;min-width:0}
  /* el nombre es lo que identifica la programación: aquí sí puede partirse en dos renglones */
  .bk-stable .bk-cname{white-space:normal}
  .bk-stable .bk-cname .bk-stl{flex-wrap:wrap;row-gap:3px}
  .bk-stable .bk-sname{white-space:normal;overflow:visible;overflow-wrap:anywhere}
  .bk-stable .bk-opts{white-space:normal;overflow:visible}
  /* «Opciones —» de los respaldos no dice nada */
  .bk-stable > tbody > tr.bk-srow > td.bk-optc:has(> .bk-muted){display:none}
}

/* interruptor habilitar / deshabilitar */
.bk-switch{position:relative;display:inline-block;width:38px;height:21px;flex:none;cursor:pointer}
.bk-switch input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.bk-switch span{position:absolute;inset:0;border-radius:999px;background:var(--grid);border:1px solid var(--border);
  transition:background .15s}
.bk-switch span::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;
  background:var(--ink-2);transition:transform .15s,background .15s}
.bk-switch input:checked+span{background:var(--good);border-color:var(--good)}
.bk-switch input:checked+span::after{transform:translateX(17px);background:#fff}
.bk-switch input:focus-visible+span{outline:2px solid var(--s1);outline-offset:2px}
.bk-switch input:disabled+span{opacity:.5}

/* clave/valor de los diálogos */
.bk-kv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;font-size:13px;align-items:baseline}
.bk-kv .k{color:var(--muted);white-space:nowrap}
.bk-kv .v{color:var(--ink);min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.bk-kv code,.bk-vmeta code,.bk-dhead code{background:var(--plane);padding:1px 5px;border-radius:4px;font-size:12px}
.bk-jmsg{padding:8px 12px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--ink-2);
  font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.bk-jmsg.err{border-color:rgba(208,59,59,.6);background:rgba(208,59,59,.12);color:#ff9a9a}
.bk-acts-inline{display:inline-flex;gap:8px;flex-wrap:wrap}
dialog.bk-job-dlg{max-width:820px}
dialog.bk-cli-dlg{max-width:600px}
dialog.bk-sch-dlg{max-width:880px}
dialog.bk-ver-dlg{max-width:1280px}

/* visor de configuración y diff (texto NO confiable: siempre escapado) */
.bk-code{margin:0;padding:10px 12px;background:var(--plane);border:1px solid var(--border);border-radius:8px;
  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);white-space:pre;overflow:auto;
  max-height:58vh;tab-size:4}
.bk-diff{padding:6px 0}
.bk-dl{display:block;padding:0 12px;min-width:max-content}
.bk-dl.a{background:rgba(12,163,12,.16);color:#9fe39f}
.bk-dl.r{background:rgba(208,59,59,.16);color:#ff9a9a}
.bk-dl.at{color:var(--s1);background:rgba(57,135,229,.10)}
.bk-dl.h{color:var(--muted)}

/* diálogo de versiones: lista a la izquierda, visor a la derecha */
.bk-ver{display:grid;grid-template-columns:minmax(250px,330px) minmax(0,1fr);gap:16px;align-items:start}
@media(max-width:860px){.bk-ver{grid-template-columns:1fr}}
.bk-vside{display:flex;flex-direction:column;gap:8px;min-width:0}
.bk-vcount{color:var(--muted);font-size:12px}
.bk-vlist{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow:auto;padding-right:2px}
@media(max-width:860px){.bk-vlist{max-height:32vh}}
.bk-v{display:flex;flex-direction:column;gap:2px;text-align:left;padding:8px 10px;border-radius:8px;
  background:var(--surface-2);border:1px solid var(--border);color:var(--ink-2)}
.bk-v:hover{border-color:var(--muted)}
.bk-v.sel{border-color:var(--s1);box-shadow:inset 3px 0 0 var(--s1);color:var(--ink)}
.bk-v .d{font-weight:600;color:var(--ink);font-size:13px}
.bk-v .m{font-size:12px;font-variant-numeric:tabular-nums}
.bk-v .c{font-size:11px;color:var(--muted)}
.bk-vjobs{font-size:12px;color:var(--ink-2)}
.bk-vjobs summary{cursor:pointer;color:var(--muted);user-select:none;padding:4px 0}
.bk-vjobs summary:hover{color:var(--ink)}
.bk-vjob{padding:6px 0;border-top:1px solid var(--grid)}
.bk-viewer{display:flex;flex-direction:column;gap:10px;min-width:0}
.bk-vmeta{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);align-items:baseline}
.bk-vmeta b{color:var(--ink)}
.bk-vbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bk-vbar button,.bk-vbar .bk-abtn{padding:4px 11px;font-size:12px}
.bk-dhead{font-size:12px;color:var(--ink-2)}
.bk-lock{padding:12px 14px;border-radius:8px;border:1px solid rgba(250,178,25,.55);background:rgba(250,178,25,.10);
  color:#ffd479;font-size:13px;line-height:1.5}

/* editor de programación */
.bk-form input[type=date],.bk-form input[type=time]{background:var(--plane);color:var(--ink);
  border:1px solid var(--border);border-radius:6px;padding:6px 9px;font:inherit;font-size:13px;width:100%}
.bk-form input[type=date]:focus,.bk-form input[type=time]:focus{outline:none;border-color:var(--s1)}
.bk-form code{background:var(--plane);padding:1px 5px;border-radius:4px}
.bk-acts{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.bk-acts{grid-template-columns:1fr}}
.bk-act{position:relative;display:flex;flex-direction:column;gap:4px;padding:10px 12px 10px 34px;border-radius:10px;
  border:1px solid var(--border);background:var(--plane);cursor:pointer;min-width:0}
.bk-act input{position:absolute;left:11px;top:12px;margin:0;accent-color:var(--s1)}
.bk-act .t{color:var(--ink);font-weight:600;font-size:13px}
.bk-act .d{color:var(--muted);font-size:11px;line-height:1.4}
.bk-act:hover{border-color:var(--muted)}
.bk-act.bk:has(input:checked){border-color:var(--s1);box-shadow:inset 0 0 0 1px var(--s1)}
.bk-act.rb:has(input:checked){border-color:var(--warning);box-shadow:inset 0 0 0 1px var(--warning)}
.bk-act.up:has(input:checked){border-color:var(--serious);box-shadow:inset 0 0 0 1px var(--serious)}
.bk-act.rb input{accent-color:var(--warning)}
.bk-act.up input{accent-color:var(--serious)}
.bk-act:has(input:disabled){cursor:default;opacity:.55}
.bk-act:has(input:disabled:checked){opacity:1}
.bk-danger{padding:10px 14px;border-radius:8px;border:1px solid rgba(208,59,59,.6);border-left:3px solid var(--critical);
  background:rgba(208,59,59,.12);color:#ffb3b3;font-size:13px;line-height:1.5}
.bk-targets,.bk-vendors{display:flex;gap:8px 18px;flex-wrap:wrap}
.bk-vendors{margin-top:10px;padding:10px 12px;background:var(--plane);border-radius:8px;border:1px solid var(--border)}
.bk-targets input:disabled+*{opacity:.6}
.bk-pick{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.bk-pick-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.bk-pick-bar input[type=search]{flex:1 1 220px;min-width:0}
.bk-pick-bar button.mini{margin:0;padding:4px 10px}
.bk-pick-list{max-height:270px;overflow:auto;border:1px solid var(--border);border-radius:8px;background:var(--plane);
  padding:4px 0}
.bk-pick-list>.bk-muted{padding:10px 12px;font-size:12px}
.bk-pick-group{position:sticky;top:-4px;z-index:1;padding:5px 12px;background:var(--surface-2);color:var(--muted);
  font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--grid)}
/* columnas fijas: cada fila es su propia rejilla y así todas quedan alineadas */
.bk-pick-row{display:grid;grid-template-columns:16px minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) 92px;
  gap:10px;align-items:center;padding:5px 12px;font-size:13px;cursor:pointer}
.bk-pick-row .t{text-align:right}
.bk-pick-row:hover{background:var(--surface)}
.bk-pick-row input{accent-color:var(--s1);margin:0}
.bk-pick-row .n{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-pick-row .h,.bk-pick-row .s{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.bk-pick-row .t{color:var(--warning);font-size:11px;white-space:nowrap}
.bk-pick-row.no{cursor:default;opacity:.5}
.bk-pick-row.off .n{color:var(--ink-2);font-style:italic}
@media(max-width:640px){.bk-pick-row{grid-template-columns:16px minmax(0,1fr) 92px}.bk-pick-row .h,.bk-pick-row .s{display:none}}
.bk-when{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.bk-wdays{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.bk-wday{position:relative;cursor:pointer}
.bk-wday input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.bk-wday span{display:inline-flex;align-items:center;justify-content:center;width:36px;height:34px;border-radius:8px;
  border:1px solid var(--border);background:var(--plane);color:var(--ink-2);font-weight:600;font-size:13px}
.bk-wday:hover span{border-color:var(--muted)}
.bk-wday input:checked+span{background:var(--s1);border-color:var(--s1);color:#fff}
.bk-wday input:focus-visible+span{outline:2px solid var(--s1);outline-offset:2px}
.bk-preview{margin-top:12px;padding:10px 12px;border-radius:8px;background:var(--plane);border:1px solid var(--border);
  font-size:12px;color:var(--ink-2);min-height:42px}
.bk-preview .t{color:var(--ink);font-size:13px;font-weight:600}
.bk-preview .k{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
.bk-preview ol{margin:4px 0 0;padding-left:20px;font-variant-numeric:tabular-nums;line-height:1.6}
.bk-perr{color:var(--critical)}
.bk-checks{display:grid;gap:8px;margin-top:12px}

/* caja compacta de la ficha del equipo */
.bk-box{display:flex;flex-direction:column;gap:8px;background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:10px 14px;font-size:13px;color:var(--ink-2);margin-bottom:10px}
.bk-box-line{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap}
.bk-box-line b{color:var(--ink)}
.bk-box .bk-err{max-width:none;font-size:12px;margin:0}
.bk-box-warn{padding:8px 12px;border-radius:8px;border:1px solid rgba(250,178,25,.55);background:rgba(250,178,25,.10);
  color:#ffd479;font-size:12px;line-height:1.5}
.bk-box-warn button.mini{margin:0 0 0 6px}
.bk-box-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.bk-box-actions button{padding:4px 10px;font-size:12px}
.bk-box .bk-chip{margin:0}

@media(max-width:700px){
  .bk-tools{margin-left:0;justify-content:flex-start;width:100%}
  .bk-tools input[type=search]{flex:1 1 160px;width:auto;max-width:none}
  .bk-kv{grid-template-columns:1fr}
  .bk-kv .k{margin-top:4px}
}
/* segundo archivo de la versión (.backup binario / startup-config) y aviso de cambios sin guardar */
.bk-chip.bk-extra{border-color:rgba(57,135,229,.55);color:#9cc4f5}
.bk-chip.bk-unsaved{border-color:rgba(250,178,25,.6);color:#ffd479;background:rgba(250,178,25,.10)}

/* Ajustes → Respaldos: cuándo se respalda cada tipo de equipo (v1.16.2). Una fila por tipo con
   anchos fijos por columna (las tres quedan alineadas) que se envuelve en pantallas angostas */
.bk-plans{display:grid;gap:8px}
.bk-plan{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;padding:10px 12px;border:1px solid var(--border);
  border-left:3px solid var(--border);border-radius:8px}
.bk-plan.on{border-left-color:var(--good)}
.bk-plan.chg{border-color:color-mix(in srgb,var(--s1) 60%,transparent);border-left-color:var(--s1)}
.bk-plan-who{width:120px;display:flex;flex-direction:column;gap:1px;align-self:center}
.bk-plan-who b{font-size:13.5px;color:var(--ink)}
.bk-plan-who .sub{font-size:11.5px;color:var(--muted)}
.bk-plan-freq{width:150px}
.bk-plan-when{width:296px}
.bk-plan-when .f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.bk-plan-when label.f{width:170px}
.bk-plan-at{width:112px}
.bk-plan.chg label.f,.bk-plan.chg .bk-plan-when .f{color:var(--s1)}
.bk-plan input[type=time]{background:var(--plane);color:var(--ink);border:1px solid var(--border);border-radius:6px;
  padding:6px 9px;font:inherit;font-size:13px;width:100%;color-scheme:dark}
.bk-plan input[type=time]:focus{outline:none;border-color:var(--s1)}
.bk-plan .bk-wdays{margin-top:0;gap:5px;flex-wrap:nowrap}
.bk-plan .bk-wday span{width:36px;height:32px}
.bk-plan-txt{display:flex;align-items:center;min-height:32px;font-size:13px;color:var(--ink-2)}
.bk-plan-st{flex:1 1 220px;min-width:0;align-self:center;font-size:12px;color:var(--ink-2);line-height:1.6}
.bk-plan-st > div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-plan-st .k{color:var(--muted)}
.bk-plan-st b{color:var(--ink);font-weight:600}
.bk-plan-st .sub{color:var(--muted)}
.bk-plan-st .pill{vertical-align:middle}
.bk-plan-note{margin-top:10px;display:grid;gap:8px}
.bk-plan-msg{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:9px 12px;border-radius:8px;
  border:1px solid var(--border);border-left:3px solid var(--s1);font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.bk-plan-msg.warn{border-left-color:var(--warning);background:rgba(250,178,25,.06)}
.bk-plan-msg .t{flex:1 1 320px;min-width:0}
.bk-plan-msg b{color:var(--ink)}
.bk-plan-msg .a{display:flex;gap:6px;flex:none}
.bk-plan-msg .a button{padding:5px 12px;font-size:12px}
/* en Programaciones: la que administra Ajustes lleva un chip que lleva allá */
.bk-chip.bk-preset{margin:0;flex:none;text-decoration:none;border-color:rgba(57,135,229,.55);color:#9cc4f5}
.bk-chip.bk-preset:hover{background:rgba(57,135,229,.12)}
@media(max-width:700px){
  .bk-plan{gap:8px 12px}
  .bk-plan-who{width:100%;flex-direction:row;align-items:baseline;gap:8px}
  .bk-plan-freq,.bk-plan-at{width:calc(50% - 6px)}
  .bk-plan-when,.bk-plan-when label.f{width:100%}
  .bk-plan .bk-wdays{flex-wrap:wrap}
  .bk-plan-st{flex-basis:100%}
}