/* ===========================================================================
 * RV3 · styles/widget-diag.css  ·  WIDGET-DIAG-V2 (nativo)
 * La vista reusa rv2-sub-header, rv2-tlb, rv2-tbl/rv2-cell-*, rv2-st, rv2-foot,
 * rv2-spinner, rv2-btn y RV3.Modal. Esto es SOLO lo que no existe en el módulo:
 *   - tira de KPIs (no hay componente KPI)
 *   - colores de severidad sobre el pill rv2-st (no hay estado error/warn/info)
 *   - estado activo del toggle rv2-tlb-btn (no existe modificador on)
 *   - <select> de filtro con look del módulo (no hay select estilado)
 *   - internos del modal de detalle (pérdida / fix / kv / sparkline)
 * Todo con tokens --lk-* (sistema de diseño LUZO).
 * ======================================================================== */

/* KPIs */
.wd-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: .5px solid var(--lk-border); border-radius: var(--lk-radius-lg);
  overflow: hidden; background: var(--lk-bg-card); margin: 12px 16px;
}
@media (max-width: 720px) { .wd-kpis { grid-template-columns: repeat(2, 1fr); } }
.wd-kpi { padding: 12px 14px; border-right: .5px solid var(--lk-border); }
.wd-kpi:nth-child(4n) { border-right: 0; }
.wd-kpi-t { font: 500 11px/1.2 var(--lk-font-sans); color: var(--lk-text-muted); }
.wd-kpi-v { font: 500 22px/1.1 var(--lk-font-sans); margin-top: 6px; font-variant-numeric: tabular-nums; }
.wd-kpi-s { font: 400 11px/1.3 var(--lk-font-sans); color: var(--lk-text-faint); margin-top: 2px; }
.wd-kpi--ok   .wd-kpi-v { color: var(--lk-green); }
.wd-kpi--warn .wd-kpi-v { color: var(--lk-amber); }
.wd-kpi--err  .wd-kpi-v { color: var(--lk-red); }

/* severidad: color sobre el pill nativo rv2-st (ancho fijo ya lo da rv2-st) */
.rv2-st.wd-sev-err  { background: var(--lk-red-soft);   color: var(--lk-red); }
.rv2-st.wd-sev-warn { background: var(--lk-amber-soft); color: var(--lk-amber); }
.rv2-st.wd-sev-info { background: var(--lk-bg-hover);   color: var(--lk-text-muted); }
.rv2-st[class*="wd-sev-"] .rv2-st-dot { background: currentColor; }

/* estado activo del toggle de rango (reusa rv2-tlb-btn) */
.rv2-tlb-btn.is-active {
  background: var(--lk-brand-muted); color: var(--lk-brand-soft);
  border-color: var(--lk-brand-border);
}

/* <select> de filtro con el look de rv2-tlb-btn */
.wd-sel {
  height: 32px; padding: 0 8px;
  border: .5px solid var(--lk-border); border-radius: 7px;
  background: var(--lk-bg-card); color: var(--lk-text-secondary);
  font: 500 11.5px/1 var(--lk-font-sans); cursor: pointer;
}

/* celda categoría: texto plano alineado */
.wd-cell-cat { font-size: var(--lk-font-sm, 12px); color: var(--lk-text-secondary); display: flex; align-items: center; }

/* indicadores del sub-header */
.wd-build { font-family: var(--lk-font-mono); font-size: 11px; color: var(--lk-text-faint); }
.wd-live { display: inline-flex; align-items: center; gap: 7px; font: 500 11.5px/1 var(--lk-font-sans); color: var(--lk-text-muted); }
.wd-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lk-green); flex: 0 0 auto; }
.wd-live.is-off .wd-live-dot { background: var(--lk-amber); }

/* ---- internos del modal de detalle (no hay equivalentes) ---- */
.wd-det-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wd-det-ts { margin-left: auto; font-family: var(--lk-font-mono); font-size: 11px; color: var(--lk-text-faint); }
.wd-det-title { font: 500 15px/1.3 var(--lk-font-sans); margin: 8px 0 0; }
.wd-muted { font-size: 11px; color: var(--lk-text-faint); }
.wd-blk { margin-top: 16px; }
.wd-blk-t { font: 600 11px/1 var(--lk-font-sans); color: var(--lk-text-faint); margin-bottom: 7px; }
.wd-p { font: 400 13px/1.6 var(--lk-font-sans); color: var(--lk-text-secondary); margin: 0; }

.wd-loss { border: .5px solid var(--lk-border); border-radius: var(--lk-radius-md); padding: 11px 13px; }
.wd-loss-h { display: flex; align-items: center; gap: 8px; font: 500 13px/1.3 var(--lk-font-sans); }
.wd-loss-h svg { width: 15px; height: 15px; flex: 0 0 auto; }
.wd-loss-row { font: 400 12px/1.55 var(--lk-font-sans); color: var(--lk-text-secondary); margin-top: 6px; }
.wd-loss--ok   { background: var(--lk-green-soft); } .wd-loss--ok   .wd-loss-h { color: var(--lk-green); }
.wd-loss--warn { background: var(--lk-amber-soft); } .wd-loss--warn .wd-loss-h { color: var(--lk-amber); }
.wd-loss--err  { background: var(--lk-red-soft); }   .wd-loss--err  .wd-loss-h { color: var(--lk-red); }

.wd-fix { margin: 0; padding-left: 18px; font: 400 13px/1.7 var(--lk-font-sans); color: var(--lk-text-secondary); }

.wd-reps { display: flex; align-items: flex-end; gap: 14px; }
.wd-reps-n { font: 500 20px/1 var(--lk-font-sans); font-variant-numeric: tabular-nums; }
.wd-spark7 { display: flex; align-items: flex-end; gap: 4px; height: 40px; }
.wd-spark7-bar { width: 14px; border-radius: 3px 3px 0 0; background: var(--lk-brand); opacity: .8; }

.wd-folios { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-folio { font-family: var(--lk-font-mono); font-size: 11px; background: var(--lk-bg-surface); border: .5px solid var(--lk-border); border-radius: 6px; padding: 3px 8px; }

.wd-kv { border: .5px solid var(--lk-border); border-radius: var(--lk-radius-md); overflow: hidden; }
.wd-kv-row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 8px 12px; border-bottom: .5px solid var(--lk-border-soft); }
.wd-kv-row:last-child { border-bottom: 0; }
.wd-kv-k { font-size: 11px; color: var(--lk-text-muted); }
.wd-kv-v { font-size: 11px; color: var(--lk-text-secondary); font-family: var(--lk-font-mono); word-break: break-all; }

/* ---- Widget público: contenedor sub-pestañas + Funciones ----
 * Reusa rv2-subtabs/rv2-subbody y el rv2-switch nativo; lo único nuevo es el
 * estado on/off del switch scoped a la fila (el nativo va atado a .rv2-prefs). */
.wd-shell .rv2-subbody { min-width: 0; }
.wd-fn-list { border: .5px solid var(--lk-border); border-radius: var(--lk-radius-lg); overflow: hidden; background: var(--lk-bg-card); margin-top: 6px; }
.wd-fn-row { display: flex; align-items: center; gap: 13px; padding: 13px 15px; border-bottom: .5px solid var(--lk-border-soft); cursor: pointer; }
.wd-fn-row:last-child { border-bottom: 0; }
.wd-fn-row.is-ro { cursor: default; }
.wd-fn-ic { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--lk-radius-md); background: var(--lk-bg-surface); border: .5px solid var(--lk-border); color: var(--lk-text-muted); }
.wd-fn-ic svg { width: 15px; height: 15px; }
.wd-fn-ic:empty { display: none; }
.wd-fn-txt { flex: 1; min-width: 0; }
.wd-fn-t { display: block; font: 500 12.5px/1.3 var(--lk-font-sans); color: var(--lk-text-primary); }
.wd-fn-s { display: block; font: 400 11px/1.4 var(--lk-font-sans); color: var(--lk-text-muted); margin-top: 2px; }
.wd-fn-cb { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.wd-fn-row input.wd-fn-cb:checked + .rv2-switch { background: var(--lk-brand); }
.wd-fn-row input.wd-fn-cb:checked + .rv2-switch .rv2-switch-knob { transform: translateX(13px); }
.wd-fn-row input.wd-fn-cb:disabled + .rv2-switch { opacity: .5; }

/* ---- Volver a Configuración (botón compacto; el SVG necesita tamaño) ---- */
.rv2-cfg-back {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 12px 0 9px;
  border: .5px solid var(--lk-border); border-radius: 999px;
  background: var(--lk-bg-card); color: var(--lk-text-muted);
  font: 500 12px/1 var(--lk-font-sans); cursor: pointer; margin-bottom: 14px;
}
.rv2-cfg-back:hover { background: var(--lk-bg-hover); color: var(--lk-text-primary); }
.rv2-cfg-back svg { width: 16px; height: 16px; }

/* ---- Widget: Profesionales (orden) ---- */
.wd-prof-ctrl { margin-top: 6px; }
.wd-modedesc { font: 400 11.5px/1.5 var(--lk-font-sans); color: var(--lk-text-muted); margin: 8px 2px 14px; }
.wd-range-row { display: flex; align-items: center; gap: 12px; margin: 6px 2px 14px; }
.wd-range-row input[type=range] { flex: 1; accent-color: var(--lk-brand); height: 4px; }
.wd-range-lbl { font: 400 11.5px/1.3 var(--lk-font-sans); color: var(--lk-text-muted); min-width: 130px; }
.wd-range-lbl b { font-weight: 500; color: var(--lk-text-primary); }
.wd-prof-prevh { display: flex; align-items: center; gap: 6px; margin: 18px 2px 8px; font: 600 11px/1 var(--lk-font-sans); color: var(--lk-text-faint); }
.wd-prof-prevh svg { width: 14px; height: 14px; }
.wd-prow { display: flex; align-items: center; gap: 12px; padding: 11px 15px; border-bottom: .5px solid var(--lk-border-soft); }
.wd-prow:last-child { border-bottom: 0; }
.wd-prank { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 6px; background: var(--lk-brand-muted); color: var(--lk-brand-soft); font: 600 11px/1 var(--lk-font-mono); }
.wd-pcol { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.wd-pnm { font: 500 12.5px/1.3 var(--lk-font-sans); color: var(--lk-text-primary); }
.wd-pcargo { font: 400 11px/1.3 var(--lk-font-sans); color: var(--lk-text-muted); }
.wd-mbadge { flex: 0 0 auto; min-width: 104px; text-align: center; font: 500 11px/1 var(--lk-font-sans); padding: 5px 10px; border-radius: 12px; background: var(--lk-bg-surface); border: .5px solid var(--lk-border); color: var(--lk-text-muted); }

/* ---- Widget: Pantallas (grupos por pantalla) ---- */
.wd-scr-h { margin: 18px 2px 7px; }
.wd-scr-h:first-child { margin-top: 6px; }
.wd-scr-h-t { font: 600 11px/1 var(--lk-font-sans); color: var(--lk-text-faint); }
.wd-scr-h-s { display: block; font: 400 11px/1.4 var(--lk-font-sans); color: var(--lk-text-muted); margin-top: 3px; }

/* ============================================================
   Diagnóstico v6 — panel nativo (reproduce mockup_diag_panel_v6,
   namespaced wd6- para no colisionar con clases globales del CRM).
   Raíz: .wd6 (se monta dentro de .wd-ca del shell, sin card extra).
   ============================================================ */
.wd6 { font-size: 13px; }
.wd6-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.wd6-htitle { font-size: 16px; font-weight: 500; }
.wd6-hsub { font-size: 11.5px; color: var(--lk-text-muted); margin-top: 2px; }
.wd6-live { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 11px; border-radius: 8px; border: .5px solid var(--lk-border); background: var(--lk-bg-card); font-size: 11px; font-weight: 500; color: var(--lk-text-muted); cursor: default; position: relative; }
.wd6-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lk-green); position: relative; flex: 0 0 auto; }
.wd6-live.is-off .wd6-live-dot { background: var(--lk-amber); }
.wd6-live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; background: var(--lk-green); opacity: .35; animation: wd6pulse 1.8s ease-out infinite; }
.wd6-live.is-off .wd6-live-dot::after { background: var(--lk-amber); }
@keyframes wd6pulse { 0% { transform: scale(.6); opacity: .5; } 100% { transform: scale(1.8); opacity: 0; } }

/* KPIs */
.wd6-kpis { display: grid; grid-template-columns: repeat(4,1fr); border: .5px solid var(--lk-border); border-radius: 10px; overflow: hidden; background: var(--lk-bg-card); margin-bottom: 14px; }
@media (max-width: 680px) { .wd6-kpis { grid-template-columns: repeat(2,1fr); } }
.wd6-kpi { padding: 12px 13px; border-right: .5px solid var(--lk-border); cursor: pointer; position: relative; transition: background .12s; }
.wd6-kpi:hover { background: var(--lk-bg-surface); }
.wd6-kpi:nth-child(4n) { border-right: 0; }
.wd6-kpi-top { display: flex; align-items: center; gap: 6px; color: var(--lk-text-muted); font-size: 11px; }
.wd6-kpi-top svg { width: 13px; height: 13px; color: var(--lk-text-faint); }
.wd6-kpi-top.g svg { color: var(--lk-green); }
.wd6-kpi-top.r svg { color: var(--lk-red); }
.wd6-kpi-top.a svg { color: var(--lk-amber); }
.wd6-kpi-val { font-size: 23px; font-weight: 500; line-height: 1.1; margin-top: 7px; font-variant-numeric: tabular-nums; }
.wd6-kpi-val.r { color: var(--lk-red); }
.wd6-kpi-val.a { color: var(--lk-amber); }
.wd6-kpi-val.g { color: var(--lk-green); }
.wd6-kpi-sub { font-size: 10px; color: var(--lk-text-faint); margin-top: 1px; }

/* Filtros */
.wd6-filters { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--lk-bg-surface); border: .5px solid var(--lk-border); border-radius: 9px; margin-bottom: 14px; flex-wrap: wrap; }
.wd6-chip { height: 26px; padding: 0 11px; border-radius: 7px; background: var(--lk-bg-card); border: .5px solid var(--lk-border); font-size: 11.5px; color: var(--lk-text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.wd6-chip:hover { border-color: var(--lk-text-muted); color: var(--lk-text-primary); }
.wd6-chip.on { background: var(--lk-brand-muted); border-color: var(--lk-brand-border); color: var(--lk-brand-soft); }
.wd6-ddbtn { height: 26px; min-width: 148px; border: .5px solid var(--lk-border); border-radius: 6px; background: var(--lk-bg-card); color: var(--lk-text-muted); font: inherit; font-size: 11px; font-weight: 500; padding: 0 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: space-between; gap: 6px; }
.wd6-ddbtn:hover { border-color: var(--lk-text-muted); color: var(--lk-text-primary); }
.wd6-ddbtn.act { background: var(--lk-brand-muted); border-color: var(--lk-brand-border); color: var(--lk-brand-soft); }
.wd6-ddbtn svg { width: 11px; height: 11px; opacity: .6; }
.wd6-fsp { flex: 1; }
.wd6-tbbtn { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; background: var(--lk-bg-card); border: .5px solid var(--lk-border); border-radius: 8px; color: var(--lk-text-secondary); font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; }
.wd6-tbbtn:hover { background: var(--lk-bg-hover); color: var(--lk-text-primary); }
.wd6-tbbtn svg { width: 14px; height: 14px; }
.wd6-tbbtn.primary { background: var(--lk-brand); border-color: var(--lk-brand); color: #fff; }
.wd6-tbbtn.primary:hover { background: var(--lk-brand-soft); }

/* Grid */
.wd6-gridwrap { overflow-x: auto; border: .5px solid var(--lk-border); border-radius: 10px; background: var(--lk-bg-card); }
.wd6-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.wd6-grid th, .wd6-grid td { text-align: left; }
.wd6-grid thead th { height: 40px; background: var(--lk-bg-surface); border-bottom: .5px solid var(--lk-border); position: relative; }
.wd6-ghs { display: inline-flex; align-items: center; gap: 4px; height: 40px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--lk-text-faint); cursor: pointer; }
.wd6-ghs:hover { color: var(--lk-text-primary); }
.wd6-ghs .sortic { width: 11px; height: 11px; opacity: .45; }
.wd6-ghs.act .sortic { opacity: .9; color: var(--lk-brand-soft); }
.wd6-ght { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; font-size: 9.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--lk-text-faint); }
.wd6-grid tbody td { height: 46px; padding: 0 13px; color: var(--lk-text-secondary); vertical-align: middle; border-bottom: .5px solid var(--lk-border-soft); }
.wd6-grid tbody tr:last-child td { border-bottom: 0; }
.wd6-grid tbody tr { cursor: pointer; transition: background .1s; }
.wd6-grid tbody tr:hover { background: var(--lk-bg-surface); }
.wd6-code { display: inline-flex; align-items: center; gap: 6px; font-family: var(--lk-font-mono); font-size: 11.5px; color: var(--lk-brand-soft); font-weight: 500; white-space: nowrap; }
.wd6-copy { width: 20px; height: 20px; border-radius: 5px; border: 0; background: none; color: var(--lk-text-faint); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .1s; }
.wd6-grid tbody tr:hover .wd6-copy { opacity: 1; }
.wd6-copy:hover { background: var(--lk-bg-hover); color: var(--lk-brand-soft); }
.wd6-copy svg { width: 12px; height: 12px; }
.wd6-bdg { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 10.5px; font-weight: 500; border-radius: 20px; height: 22px; padding: 0 12px; white-space: nowrap; min-width: 112px; }
.wd6-bdg svg { width: 11px; height: 11px; flex: 0 0 auto; }
.wd6-bdg.amber { background: var(--lk-amber-soft); color: var(--lk-amber); }
.wd6-bdg.red { background: var(--lk-red-soft); color: var(--lk-red); }
.wd6-bdg.mut { background: var(--lk-bg-surface); color: var(--lk-text-faint); border: .5px solid var(--lk-border); }
.wd6-dt { font-family: var(--lk-font-mono); font-size: 11px; color: var(--lk-text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.wd6-ago { font-size: 11.5px; color: var(--lk-text-faint); }
.wd6-go { width: 30px; height: 30px; border-radius: 8px; border: .5px solid var(--lk-border); background: var(--lk-bg-card); color: var(--lk-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all .12s; }
.wd6-go:hover { background: var(--lk-brand-muted); border-color: var(--lk-brand-border); color: var(--lk-brand-soft); }
.wd6-go svg { width: 14px; height: 14px; }
.wd6-tblfoot { display: flex; align-items: center; gap: 14px; padding: 11px 13px; border-top: .5px solid var(--lk-border); background: var(--lk-bg-surface); font-size: 11px; color: var(--lk-text-muted); flex-wrap: wrap; }
.wd6-tblfoot .wd6-sp { flex: 1; }
.wd6-foot-i { display: inline-flex; align-items: center; gap: 6px; }
.wd6-foot-i svg { width: 13px; height: 13px; }
.wd6-empty { padding: 40px 16px; text-align: center; color: var(--lk-text-faint); font-size: 12px; }

/* Diagnóstico v6 — detalle de evento (en modal) */
.wd6-det { font-size: 13px; }
.wd6-det-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.wd6-det-ts { font-family: var(--lk-font-mono); font-size: 11px; color: var(--lk-text-faint); margin-left: auto; }
.wd6-det-title { font-size: 16px; font-weight: 500; margin-top: 10px; }
.wd6-muted { color: var(--lk-text-muted); font-size: 12px; }
.wd6-blk { margin-top: 16px; }
.wd6-blk-t { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--lk-text-faint); margin-bottom: 8px; }
.wd6-p { font-size: 12.5px; color: var(--lk-text-secondary); line-height: 1.6; margin: 0; }
.wd6-loss { border: .5px solid var(--lk-border); border-radius: 11px; padding: 12px 13px; }
.wd6-loss--none { background: var(--lk-green-soft); border-color: transparent; }
.wd6-loss--warn { background: var(--lk-amber-soft); border-color: transparent; }
.wd6-loss--crit { background: var(--lk-red-soft); border-color: transparent; }
.wd6-loss-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; }
.wd6-loss--none .wd6-loss-h { color: var(--lk-green); }
.wd6-loss--warn .wd6-loss-h { color: var(--lk-amber); }
.wd6-loss--crit .wd6-loss-h { color: var(--lk-red); }
.wd6-loss-h svg { width: 15px; height: 15px; }
.wd6-loss-row { font-size: 11.5px; color: var(--lk-text-secondary); margin-top: 6px; line-height: 1.5; }
.wd6-fix { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--lk-text-secondary); line-height: 1.7; }
.wd6-reps { display: flex; align-items: flex-end; gap: 12px; }
.wd6-reps-n { font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums; }
.wd6-spark7 { display: flex; align-items: flex-end; gap: 3px; height: 44px; flex: 1; }
.wd6-spark7-bar { flex: 1; min-height: 8px; border-radius: 2px; background: var(--lk-brand-muted); }
.wd6-folios { display: flex; flex-wrap: wrap; gap: 7px; }
.wd6-folio { font-family: var(--lk-font-mono); font-size: 11.5px; color: var(--lk-brand-soft); background: var(--lk-brand-muted); border: .5px solid var(--lk-brand-border); border-radius: 7px; padding: 4px 9px; }
.wd6-kv { display: flex; flex-direction: column; gap: 6px; }
.wd6-kv-row { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; padding: 5px 0; border-bottom: .5px solid var(--lk-border-soft); }
.wd6-kv-k { color: var(--lk-text-muted); }
.wd6-kv-v { font-weight: 500; text-align: right; word-break: break-word; font-family: var(--lk-font-mono); font-size: 11px; }
.wd6-menu { position: absolute; z-index: 60; min-width: 184px; background: var(--lk-bg-card); border: .5px solid var(--lk-border); border-radius: 11px; box-shadow: var(--lk-shadow-lg); padding: 5px; }
.wd6-mi { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; color: var(--lk-text-secondary); cursor: pointer; white-space: nowrap; }
.wd6-mi:hover { background: var(--lk-bg-hover); color: var(--lk-text-primary); }
.wd6-mi.on { color: var(--lk-text-primary); font-weight: 500; }
.wd6-mi .ck { width: 14px; height: 14px; color: var(--lk-brand-soft); opacity: 0; flex: 0 0 auto; }
.wd6-mi.on .ck { opacity: 1; }

/* ============================================================
   Widget público — SHELL + NAV VERTICAL (look del mockup, nativo, tokens --lk)
   ============================================================ */
.wd-shell { display: grid; grid-template-columns: 198px minmax(0,1fr); background: var(--lk-bg-card); border: .5px solid var(--lk-border); border-radius: 16px; overflow: hidden; }
@media (max-width: 760px) { .wd-shell { grid-template-columns: 1fr; } }
.wd-nav { border-right: .5px solid var(--lk-border); background: var(--lk-bg-surface); padding: 12px 10px; display: flex; flex-direction: column; }
@media (max-width: 760px) { .wd-nav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: .5px solid var(--lk-border); } }
.wd-wchip { display: flex; align-items: center; gap: 9px; padding: 9px; border: .5px solid var(--lk-border); border-radius: 10px; background: var(--lk-bg-card); margin-bottom: 12px; }
.wd-wi { width: 30px; height: 30px; border-radius: 8px; background: var(--lk-brand-muted); color: var(--lk-brand-soft); display: grid; place-items: center; flex: 0 0 auto; }
.wd-wi svg { width: 16px; height: 16px; }
.wd-wt { font-size: 11.5px; font-weight: 500; line-height: 1.2; }
.wd-ws { font-size: 9.5px; color: var(--lk-text-faint); display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.wd-navpt { font-size: 10px; font-weight: 600; color: var(--lk-text-faint); letter-spacing: .02em; padding: 9px 9px 5px; }
.wd-ni { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 8px; font-size: 12px; color: var(--lk-text-muted); cursor: pointer; margin-bottom: 1px; user-select: none; }
.wd-ni:hover { background: var(--lk-bg-hover); color: var(--lk-text-primary); }
.wd-ni.is-on { background: var(--lk-brand-muted); color: var(--lk-brand-soft); font-weight: 500; }
.wd-ni-ico { width: 16px; height: 16px; flex: 0 0 auto; display: grid; place-items: center; }
.wd-ni-ico svg { width: 16px; height: 16px; }
.wd-navsp { flex: 1; }
.wd-ca { min-height: 560px; padding: 18px 20px; }
.wd-live { display: inline-flex; align-items: center; gap: 7px; font: 500 11.5px/1 var(--lk-font-sans); color: var(--lk-text-muted); }
.wd-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lk-green); flex: 0 0 auto; }
.wd-live.is-off .wd-live-dot { background: var(--lk-amber); }

/* ---- Widget: campos de texto (Mantenimiento) ---- */
.wd-field { margin-top: 13px; }
.wd-field-lb { display: block; font: 500 11.5px/1 var(--lk-font-sans); color: var(--lk-text-secondary); margin-bottom: 6px; }
.wd-inp, .wd-ta { width: 100%; border: .5px solid var(--lk-border); border-radius: 9px; background: var(--lk-bg-card); color: var(--lk-text-primary); font: 400 13px/1.5 var(--lk-font-sans); padding: 9px 11px; }
.wd-inp { height: 38px; }
.wd-ta { resize: vertical; min-height: 70px; }
.wd-inp:focus, .wd-ta:focus { outline: none; border-color: var(--lk-brand-border); }
.wd-inp:disabled, .wd-ta:disabled { opacity: .55; }


/* ============================================================
   Funciones v3 — toggles tipo mockup (grid 2col + switch 40x23).
   Namespaced wd-tgl / wd-sw para no colisionar con globales.
   ============================================================ */
.wd-tgl { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
@media (max-width: 680px) { .wd-tgl { grid-template-columns: 1fr; } }
.wd-tgl-row { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-bottom: .5px solid var(--lk-border-soft); }
.wd-tgl-ic { width: 30px; height: 30px; border-radius: 8px; background: var(--lk-bg-surface); border: .5px solid var(--lk-border); color: var(--lk-text-muted); display: grid; place-items: center; flex: 0 0 auto; }
.wd-tgl-ic svg { width: 15px; height: 15px; }
.wd-tgl-b { flex: 1; min-width: 0; }
.wd-tgl-t { font-size: 12.5px; font-weight: 500; }
.wd-tgl-s { font-size: 11px; color: var(--lk-text-muted); margin-top: 1px; line-height: 1.4; }
.wd-sw { position: relative; width: 40px; height: 23px; border-radius: 99px; background: var(--lk-bg-hover); border: .5px solid var(--lk-border); cursor: pointer; flex: 0 0 auto; transition: background .15s; }
.wd-sw::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .16s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.wd-sw.on { background: var(--lk-brand); }
.wd-sw.on::after { transform: translateX(17px); }
.wd-sw.is-ro { opacity: .5; pointer-events: none; }