/* ═══════════════════════════════════════
   SMARTFACTORY - ESTILOS GEMELO DIGITAL 2D
   ═══════════════════════════════════════ */

/* ── Desplegable de Alertas Activas (header) ── */
.cmo-alerts-dropdown {
  position: fixed;
  z-index: 9999;
  width: 340px;
  max-width: calc(100vw - 16px);
  max-height: 60vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg-panel, #1a1a24);
  border: 1px solid var(--border, #2a2a38);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  animation: cmo-alerts-dd-in 0.14s ease-out;
}
@keyframes cmo-alerts-dd-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cmo-alerts-dd-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1, #e8e8ef);
  border-bottom: 1px solid var(--border-subtle, #232330);
}
.cmo-alerts-dd-head button {
  background: none;
  border: 1px solid var(--border-subtle, #232330);
  border-radius: 5px;
  color: var(--text-muted, #8a8a99);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  cursor: pointer;
}
.cmo-alerts-dd-head button:hover { color: var(--text-1, #e8e8ef); border-color: var(--border, #2a2a38); }
.cmo-alerts-dd-body {
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cmo-alerts-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 24px 12px;
  color: var(--green, #3FB950);
  font-size: 12px;
}
.cmo-alert-item {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 6px;
  background: var(--yellow-glow, rgba(210,153,34,0.12));
  border: 1px solid var(--border-subtle, #232330);
  font-size: 11px;
}
.cmo-alert-item--crit {
  background: var(--red-glow, rgba(248,81,73,0.12));
  border-color: var(--red-dim, rgba(248,81,73,0.4));
}
.cmo-alert-ico { font-size: 14px; color: var(--yellow, #D29922); flex-shrink: 0; margin-top: 1px; }
.cmo-alert-item--crit .cmo-alert-ico { color: var(--red, #F85149); }
.cmo-alert-msg { flex: 1; color: var(--text-1, #e8e8ef); line-height: 1.4; }
.cmo-alert-time { font-size: 9px; color: var(--text-muted, #8a8a99); white-space: nowrap; font-family: 'JetBrains Mono', monospace; }

#sf-canvas-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #F8FAFC;
  cursor: grab;
  outline: none;
  box-shadow: inset 0 0 40px rgba(0,0,0,0.05);
}
#sf-canvas-wrapper:active {
  cursor: grabbing;
}
#sf-grid-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
#sf-canvas-surface {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  z-index: 20;
}
#sf-svg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  transform-origin: 0 0;
  z-index: 10;
}

/* Module panel inside 2D grid */
.sf-module {
  position: absolute;
  background-color: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 0 0 1px rgba(255,255,255,0.02);
  display: flex;
  flex-direction: column;
  padding: 0;              /* padding handled by sf-mod-* children */
  user-select: none;
  cursor: move;
  overflow: hidden;        /* clip util bar corners */
  transition: border-color 0.15s, box-shadow 0.15s;
  min-width: 210px;
  min-height: 148px;
  /* position/size are set once on creation and never changed by renderAll */
}
/* Contenedor del contenido dinámico — se actualiza sin tocar el módulo raíz */
.sf-mod-inner {
  display: contents; /* hereda el flex-direction del padre sin crear caja extra */
}
.sf-module:hover {
  border-color: var(--border-active);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.04);
  transform: translateY(-1px);
}
.sf-module.selected {
  border: 3px solid transparent;
  border-image: repeating-linear-gradient(
    -45deg,
    #FF6A00 0,
    #FF6A00 7px,
    #0f0f0f 7px,
    #0f0f0f 14px
  ) 3;
  box-shadow:
    inset 0 0 0 1px rgba(255,106,0,0.12),
    0 0 16px rgba(255,106,0,0.40),
    0 6px 24px rgba(0,0,0,0.55);
  animation: sf-hazard-glow 2s ease-in-out infinite;
  z-index: 20;
}
@keyframes sf-hazard-glow {
  0%, 100% {
    box-shadow:
      inset 0 0 0 1px rgba(255,106,0,0.10),
      0 0 14px rgba(255,106,0,0.35),
      0 6px 24px rgba(0,0,0,0.55);
  }
  50% {
    box-shadow:
      inset 0 0 0 1px rgba(255,106,0,0.22),
      0 0 28px rgba(255,106,0,0.65),
      0 6px 24px rgba(0,0,0,0.55);
  }
}
.sf-module--stopped {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--red-dim), 0 4px 12px rgba(211,47,47,0.2);
}

/* ── Modal: Gestión de Operarios ────────────────────────────── */
.op-mgr-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--border-subtle);
  transition: background 0.1s;
}
.op-mgr-row:hover { background: var(--bg-subtle); }
.op-mgr-av {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff;
  flex-shrink: 0; margin-top: 1px;
}
.op-mgr-info { flex-shrink: 0; min-width: 160px; }
.op-mgr-name {
  font-size: 12px; font-weight: 600; color: var(--text-1);
  display: flex; align-items: center; gap: 4px;
}
.op-mgr-role { font-size: 10px; color: var(--text-3); margin-top: 1px; }
.op-mgr-depts {
  display: flex; flex-wrap: wrap; gap: 4px; flex: 1; align-items: center;
}
.op-mgr-dept-chip {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px 2px 7px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 10px; color: var(--text-2);
  white-space: nowrap;
}
.op-mgr-dept-chip--current {
  background: rgba(245,158,11,0.12);
  border-color: rgba(245,158,11,0.35);
  color: var(--primary);
}
.op-mgr-dept-chip button {
  border: none; background: none; padding: 0; margin: 0;
  cursor: pointer; color: var(--text-3); font-size: 13px;
  line-height: 1; display: flex; align-items: center;
  transition: color 0.1s;
}
.op-mgr-dept-chip button:hover { color: var(--red); }
.op-mgr-add-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: 999px;
  font-size: 10px; color: var(--text-3);
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.1s, color 0.1s, background 0.1s;
}
.op-mgr-add-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(245,158,11,0.06); }
.op-mgr-picker {
  min-width: 180px; max-height: 220px; overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 200;
  scrollbar-width: thin;
}
.op-mgr-pick-item {
  padding: 7px 12px;
  font-size: 11px; color: var(--text-1);
  cursor: pointer;
  transition: background 0.1s;
}
.op-mgr-pick-item:hover { background: var(--bg-subtle); }
.op-mgr-empty {
  padding: 32px 18px;
  text-align: center;
  font-size: 12px; color: var(--text-3);
  font-style: italic;
}
.op-mgr-supervisor-badge {
  font-size: 9px; font-weight: 700;
  padding: 1px 5px; border-radius: 3px;
  background: rgba(245,158,11,0.15);
  color: var(--primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* ── Indicadores top-3 cuellos de botella ───────────────────── */
.sf-module--bn-1 { box-shadow: 0 0 0 2px #C2410C, 0 0 20px 3px rgba(194,65,12,0.4); }
.sf-module--bn-2 { box-shadow: 0 0 0 2px #B45309, 0 0 14px 2px rgba(180,83,9,0.28); }
.sf-module--bn-3 { box-shadow: 0 0 0 2px #78716C, 0 0 10px 1px rgba(120,113,108,0.2); }

.sf-bn-badge {
  position: absolute;
  bottom: 5px;
  left: 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 5px 2px 4px;
  border-radius: 3px;
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}
.sf-bn-badge iconify-icon {
  font-size: 9px;
  flex-shrink: 0;
}
.sf-bn-badge--1 {
  background: rgba(194, 65, 12, 0.82);
  color: #fff;
}
.sf-bn-badge--2 {
  background: rgba(180, 83, 9, 0.75);
  color: #fff;
}
.sf-bn-badge--3 {
  background: rgba(68, 64, 60, 0.7);
  color: rgba(255,255,255,0.88);
}
.sf-module.connecting-source {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px var(--yellow), 0 0 16px var(--yellow-glow);
  animation: pulse-border 1.2s infinite;
}
.sf-module__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 6px;
  margin-bottom: 8px;
  flex-shrink: 0;
}
.sf-module__info {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
}
.sf-module__icon {
  font-size: 14px;
}
.sf-module__name {
  font-weight: 700;
  font-size: 12px;
  color: var(--text-1);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-module__status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--green);
  box-shadow: 0 0 6px var(--green);
}
.sf-module__body {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 2px;
}
.sf-module-stop-banner {
  border: 1px solid var(--red-dim);
  background: var(--red-glow);
  color: var(--red);
  border-radius: 3px;
  padding: 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.sf-module-stop-banner strong {
  color: var(--text-1);
  font-size: 10px;
  line-height: 1.1;
}
.sf-module__footer {
  margin-top: 8px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 4px;
  font-size: 10px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: space-between;
}

/* Small task tracking cards inside 2D module */
.sf-module-task {
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sf-module-task__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
}
.sf-module-task__code {
  color: var(--yellow);
}
.sf-module-task__name {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-module-task__progress-track {
  height: 3px;
  background-color: var(--border-subtle);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}
.sf-module-task__progress-bar {
  height: 100%;
  background-color: var(--yellow);
  width: 0%;
  transition: width 0.3s ease;
}
.sf-module-task__dispatch-btn {
  width: 100%;
  background-color: transparent;
  color: var(--green);
  border: 1px solid var(--green-dim);
  border-radius: 2px;
  font-size: 9px;
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 4px;
  cursor: pointer;
  text-align: center;
  margin-top: 1px;
  transition: all var(--transition-base);
}
.sf-module-task__dispatch-btn:hover {
  background-color: var(--green-glow);
  border-color: var(--green);
}
.sf-module-task__dispatch-btn:disabled {
  border-color: var(--red-dim);
  color: var(--red);
  cursor: not-allowed;
  background: var(--red-glow);
}
.sf-module-task__status-label {
  font-size: 9px;
  color: var(--text-3);
  font-style: italic;
  text-align: center;
  padding-top: 1px;
}
.sf-conn-group {
  pointer-events: stroke;
}
.sf-conn-group:hover [id^="conn-path-"] {
  stroke: var(--yellow) !important;
  filter: drop-shadow(0 0 3px var(--yellow));
}

/* Resize handles */
.sf-resize-handle {
  position: absolute;
  background-color: transparent;
  z-index: 50;
}
.sf-resize-handle--se {
  width: 12px;
  height: 12px;
  right: 0;
  bottom: 0;
  cursor: se-resize;
}

/* Connect buttons in 2D blueprint modules */
.sf-module__connect-btn {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-3);
  font-size: 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  transition: all var(--transition-base);
}
.sf-module__connect-btn:hover {
  border-color: var(--yellow);
  color: var(--yellow);
  background-color: var(--yellow-glow);
  box-shadow: 0 0 6px var(--yellow);
}

/* ─── CANVAS TOOLBAR (floating) ──────────────────────────────── */
#sf-canvas-toolbar {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 12px;
  z-index: 50;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.sf-canvas-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-2);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-base);
}
.sf-canvas-btn:hover {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-1);
}
.sf-canvas-btn.active {
  background: var(--yellow-glow);
  border-color: var(--yellow);
  color: var(--yellow);
  box-shadow: 0 0 8px var(--yellow-glow);
}

.sf-canvas-sep {
  width: 1px;
  background: var(--border);
  margin: 4px 4px;
}

/* Panel Operativo Derecho — Sidebar siempre visible */
#sf-details-panel {
  width: 300px;
  flex-shrink: 0;
  background-color: var(--bg-panel);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 10;
}

.sf-details-header {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: rgba(255,255,255,0.01);
}
.sf-details-title {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
}
.sf-details-close {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-3);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  transition: all 0.15s;
}
.sf-details-close:hover {
  color: var(--text-1);
  border-color: var(--border);
  background: var(--bg-surface);
}
.sf-details-body {
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 12px;
}
.sf-details-section {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sf-details-section label {
  font-size: 9.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: bold;
}
.sf-details-section span {
  color: var(--text-1);
  font-size: 12.5px;
  font-weight: 600;
}
.sf-details-stop {
  border: 1px solid var(--red-dim);
  background: var(--red-glow);
  border-radius: 4px;
  padding: 8px;
}
.sf-details-task-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

/* Context menu */
.sf-context-menu {
  position: fixed;
  background-color: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 0;
  min-width: 160px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.sf-ctx-item {
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.sf-ctx-item:hover {
  background-color: var(--bg-card-hover);
  color: var(--text-1);
}
.sf-ctx-item--danger {
  color: var(--red);
}
.sf-ctx-item--danger:hover {
  background-color: var(--red-glow);
  color: var(--text-1);
}
.sf-ctx-divider {
  height: 1px;
  background-color: var(--border-subtle);
  margin: 4px 0;
}
#sf-scale-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  min-width: 36px;
  height: 32px;
  pointer-events: none;
  white-space: nowrap;
}
#sf-connect-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--yellow);
  color: #000;
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 12px;
  z-index: 90;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════
   CENTRO DE MANDO OPERATIVO (CMO) — ESTILOS
   ═══════════════════════════════════════════════════════════════ */

/* ── Barra de Mando ─────────────────────────────────────────── */
.cmo-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  height: 54px;
  flex-shrink: 0;
  position: relative;
  z-index: 300;
  isolation: isolate;
}

/* ── Dot de turno en el footer (statusbar) ───────────────────── */
.cmo-sb-shift-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 4px var(--green);
  margin-right: 4px;
  flex-shrink: 0;
  animation: cmo-pulse-dot 2s infinite;
  vertical-align: middle;
}

@keyframes cmo-pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* ── KPI Strip ──────────────────────────────────────────────── */
.cmo-kpi-strip {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
  gap: 0;
  overflow: hidden;
}

.cmo-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 5px 18px;
  cursor: default;
  transition: background 0.15s;
  border-radius: 4px;
}
.cmo-kpi:hover { background: var(--bg-card); }

.cmo-kpi__val {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1;
  letter-spacing: 0.5px;
  transition: color 0.3s;
}

.cmo-kpi__lbl {
  font-size: 9px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 600;
  white-space: nowrap;
}

.cmo-kpi--danger   .cmo-kpi__val { color: var(--red); }
.cmo-kpi--warn     .cmo-kpi__val { color: var(--yellow); }
.cmo-kpi--good     .cmo-kpi__val { color: var(--green); }

.cmo-kpi--danger.has-stoppages .cmo-kpi__val {
  animation: cmo-pulse-val 1.4s infinite;
}
@keyframes cmo-pulse-val {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.cmo-kpi-divider {
  width: 1px;
  height: 26px;
  background: var(--border);
  flex-shrink: 0;
}

/* ── Reloj ──────────────────────────────────────────────────── */
.cmo-clock {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}
.cmo-clock__time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-1);
  letter-spacing: 1px;
  line-height: 1;
}
.cmo-clock__date {
  font-size: 9.5px;
  color: var(--text-3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ── Botones de acceso rápido (nav group) ───────────────────── */
.btn-cmo--nav {
  background: rgba(245,158,11,0.08) !important;
  border: 1px solid rgba(245,158,11,0.25) !important;
  color: var(--text-1) !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
}
.btn-cmo--nav:hover {
  background: rgba(245,158,11,0.22) !important;
  border-color: rgba(245,158,11,0.55) !important;
  color: var(--primary) !important;
}
.btn-cmo--nav iconify-icon { color: var(--primary) !important; }

/* ── Lado Derecho del Header ────────────────────────────────── */
.cmo-header__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.cmo-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── Separador visual entre grupos de botones ───────────────── */
.cmo-actions-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 3px;
  flex-shrink: 0;
}

/* ── Menú desplegable de Herramientas ───────────────────────── */
.cmo-tools-menu {
  position: relative;
}
.cmo-tools-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.cmo-tools-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 420px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: var(--bg-panel) !important;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
  padding: 6px;
  z-index: 9000;
  animation: tools-dropdown-in 0.15s ease;
}
.cmo-tools-dropdown.open {
  display: block;
  column-count: 2;
  column-gap: 4px;
  transform: translateZ(0);
  will-change: transform;
}
.cmo-tools-group-label,
.cmo-tools-divider {
  column-span: all;
}
@keyframes tools-dropdown-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cmo-tools-group-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  padding: 5px 8px 3px;
}
.cmo-tools-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: 5px 0;
}
.cmo-tool-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 5px;
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.cmo-tool-item iconify-icon {
  font-size: 15px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color 0.12s;
}
.cmo-tool-item:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}
.cmo-tool-item:hover iconify-icon {
  color: var(--yellow);
}

/* Dot indicador de toggle (activo/inactivo) */
.cmo-tool-toggle-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--border);
  margin-left: auto;
  flex-shrink: 0;
  transition: background 0.15s;
}
.cmo-tool-item.active .cmo-tool-toggle-dot {
  background: var(--primary);
  box-shadow: 0 0 5px rgba(245,158,11,0.5);
}
.cmo-tool-item.active {
  color: var(--text-primary);
}
.cmo-tool-item.active iconify-icon {
  color: var(--primary);
}

/* ── Botones CMO ────────────────────────────────────────────── */
.btn-cmo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 11px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: 0.3px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition-base);
  white-space: nowrap;
  position: relative;
}
.btn-cmo iconify-icon { font-size: 13px; }
.btn-cmo-text { display: none; }

.btn-cmo--success {
  background: var(--green-glow);
  border-color: var(--green-dim);
  color: var(--green);
}
.btn-cmo--success:hover {
  background: var(--green);
  color: #000;
  border-color: var(--green);
}
.btn-cmo--danger {
  background: var(--red-glow);
  border-color: var(--red-dim);
  color: var(--red);
}
.btn-cmo--danger:hover {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}
.btn-cmo--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
  padding: 6px 8px;
}
.btn-cmo--ghost:hover {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-1);
}

/* ── Badge de Notificaciones ───────────────────────────────── */
.cmo-notif-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  pointer-events: none;
  font-family: 'JetBrains Mono', monospace;
}

/* ── Cuerpo CMO ─────────────────────────────────────────────── */
.cmo-body {
  padding: 0 !important;
  position: relative;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: row;
}

/* Área del canvas (ocupa el espacio restante) */
#cmo-canvas-area {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

/* ── Layer Toggle Buttons ───────────────────────────────────── */
.sf-layer-btn { opacity: 0.35; }
.sf-layer-btn.active { opacity: 1; }

/* ── Módulo Enriquecido: Barra de Utilización ───────────────── */
.sf-module__utilization {
  height: 3px;
  background: var(--border-subtle);
  border-radius: 2px;
  overflow: hidden;
  margin: 0 0 5px 0;
}
.sf-module__utilization-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease, background-color 0.3s;
}

/* ── Módulo Enriquecido: Fila de Stats ──────────────────────── */
.sf-module__stats {
  display: flex;
  gap: 5px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.sf-module__stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-3);
  background: rgba(0,0,0,0.18);
  border-radius: 3px;
  padding: 2px 5px;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid var(--border-subtle);
}
.sf-module__stat-badge iconify-icon { font-size: 9px; }
.sf-module__stat-badge--green  { color: var(--green);  background: var(--green-glow);  border-color: var(--green-dim); }
.sf-module__stat-badge--yellow { color: var(--yellow); background: var(--yellow-glow); border-color: var(--border-subtle); }
.sf-module__stat-badge--red    { color: var(--red);    background: var(--red-glow);    border-color: var(--red-dim); }

/* ── Panel Derecho Enriquecido ──────────────────────────────── */
#sf-details-panel { width: 300px; }

.sf-details-kpi-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.sf-details-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sf-details-kpi-card__val {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1;
}
.sf-details-kpi-card__lbl {
  font-size: 9px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
}

.sf-util-gauge {
  height: 6px;
  background: var(--border-subtle);
  border-radius: 3px;
  overflow: hidden;
  margin: 4px 0;
}
.sf-util-gauge__bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}

.sf-details-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.sf-dqa-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-2);
  transition: all var(--transition-base);
  letter-spacing: 0.2px;
  text-decoration: none;
  justify-content: center;
}
.sf-dqa-btn:hover {
  background: var(--bg-card-hover, var(--bg-panel));
  color: var(--text-1);
  border-color: var(--border-active);
}
.sf-dqa-btn--danger {
  border-color: var(--red-dim);
  color: var(--red);
  background: var(--red-glow);
}
.sf-dqa-btn--danger:hover { background: var(--red); color: #fff; }
.sf-dqa-btn--success {
  border-color: var(--green-dim);
  color: var(--green);
  background: var(--green-glow);
}
.sf-dqa-btn iconify-icon { font-size: 12px; flex-shrink: 0; }

/* ── Dashboard Panel (modo sin selección) ───────────────────── */
.sf-dash-section-title {
  font-size: 9.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 4px;
}
.sf-dash-bottleneck {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11.5px;
}
.sf-dash-bottleneck:last-child { border-bottom: none; }
.sf-dash-bn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sf-dash-bn-name { flex: 1; color: var(--text-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-dash-bn-util { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; flex-shrink: 0; }

.sf-dash-order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11.5px;
  gap: 6px;
}
.sf-dash-order-row:last-child { border-bottom: none; }
.sf-dash-order-id    { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--yellow); font-weight: 700; flex-shrink: 0; }
.sf-dash-order-client{ color: var(--text-2); font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-dash-status-tag  { font-size: 9px; padding: 2px 6px; border-radius: 3px; font-weight: 700; text-transform: uppercase; flex-shrink: 0; }
.sf-dash-status-tag--urgent { background: var(--red-glow);  color: var(--red);    border: 1px solid var(--red-dim); }
.sf-dash-status-tag--ok     { background: var(--bg-card);   color: var(--text-3); border: 1px solid var(--border-subtle); }
.sf-dash-status-tag--today  { background: var(--yellow-glow); color: var(--yellow); border: 1px solid var(--border-subtle); }

/* ── Cajón de Notificaciones ────────────────────────────────── */
#sf-notif-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 304px;
  height: 100%;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 24px rgba(0,0,0,0.4);
}
#sf-notif-drawer.visible { transform: translateX(0); }

.sf-notif-drawer__header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-1);
  flex-shrink: 0;
}
.sf-notif-clear {
  font-size: 10px; color: var(--text-3); background: none;
  border: none; cursor: pointer; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3px; font-family: var(--font-sans);
}
.sf-notif-clear:hover { color: var(--text-1); }

.sf-notif-drawer__body {
  flex: 1; overflow-y: auto; padding: 8px;
  display: flex; flex-direction: column; gap: 5px;
}
.sf-notif-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--border);
  border-radius: 4px;
  padding: 7px 9px;
  font-size: 11.5px;
  color: var(--text-2);
  display: flex;
  gap: 7px;
  align-items: flex-start;
}
.sf-notif-item--success { border-left-color: var(--green); }
.sf-notif-item--error   { border-left-color: var(--red); }
.sf-notif-item--warning { border-left-color: var(--yellow); }
.sf-notif-item--info    { border-left-color: var(--text-3); }
.sf-notif-icon  { font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.sf-notif-text  { flex: 1; line-height: 1.4; }
.sf-notif-time  { font-size: 9px; color: var(--text-3); font-family: 'JetBrains Mono', monospace; flex-shrink: 0; white-space: nowrap; }
.sf-notif-empty { color: var(--text-3); font-style: italic; font-size: 12px; text-align: center; padding: 24px 12px; }

/* ── Cajón de Almacén de Producto Terminado ─────────────────── */
#sf-warehouse-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 320px;
  height: 100%;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  z-index: 200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: -4px 0 24px rgba(0,0,0,0.4);
}
#sf-warehouse-drawer.visible { transform: translateX(0); }

.wh-item {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wh-item-header { display: flex; align-items: center; gap: 8px; }
.wh-item-icon { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.wh-item-name { font-size: 12px; font-weight: 700; color: var(--text-1); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wh-item-qty { font-family: var(--font-sans); font-size: 18px; font-weight: 900; flex-shrink: 0; }
.wh-item-meta { font-size: 10px; color: var(--text-3); display: flex; justify-content: space-between; }
.wh-sell-btn {
  width: 100%; padding: 5px 8px; border-radius: 4px;
  border: 1px solid var(--green); background: rgba(16,185,129,0.06);
  color: var(--green); font-family: var(--font-sans); font-size: 11px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 5px;
  transition: all 0.12s;
}
.wh-sell-btn:hover { background: rgba(16,185,129,0.14); }

/* ── Context Menu: Label de sección + Badge ─────────────────── */
.sf-ctx-section-label {
  padding: 6px 12px 4px;
  font-family: var(--font-sans);
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sf-ctx-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-md);
  background: var(--yellow-glow);
  color: var(--yellow);
  font-size: 9px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  border: 1px solid var(--border-subtle);
}
.sf-ctx-item--success { color: var(--green); }
.sf-ctx-item--success:hover { background: var(--green-glow); color: var(--text-1); }

/* ═══════════════════════════════════════════════════════════════
   TEMA INDUSTRIAL OSCURO
   ═══════════════════════════════════════════════════════════════ */
#sf-app[data-theme="dark"] {
  --bg-root:        #0D1117;
  --bg-surface:     #161B22;
  --bg-panel:       #1C2128;
  --bg-card:        #21262D;
  --bg-card-hover:  #30363D;
  --bg-input:       #0D1117;
  --text-1:         #E6EDF3;
  --text-2:         #8B949E;
  --text-3:         #484F58;
  --border:         #30363D;
  --border-subtle:  #21262D;
  --border-active:  #E2B007;
  --yellow:         #D29922;
  --yellow-dim:     #B8860B;
  --yellow-glow:    rgba(210, 153, 34, 0.18);
  --green:          #3FB950;
  --green-dim:      #2EA043;
  --green-glow:     rgba(63, 185, 80, 0.18);
  --red:            #F85149;
  --red-dim:        #DA3633;
  --red-glow:       rgba(248, 81, 73, 0.18);
  --orange:         #F0883E;
  --status-active:  #D29922;
  --status-done:    #3FB950;
  --status-blocked: #F85149;
}

#sf-app[data-theme="dark"] body,
#sf-app[data-theme="dark"] {
  color-scheme: dark;
}

#sf-app[data-theme="dark"] #sf-canvas-wrapper {
  background-color: #0D1117;
  box-shadow: inset 0 0 60px rgba(0,0,0,0.6);
}

/* Transición suave al cambiar tema */
#sf-app,
#sf-app *:not(iconify-icon):not(canvas):not(svg) {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease;
}

/* ── Filter Buttons ─────────────────────────────────────────── */
.sf-filter-btn { opacity: 0.35; }
.sf-filter-btn.active { opacity: 1; color: var(--yellow) !important; }

/* ── Módulo Dimmed (filtro de vista) ────────────────────────── */
.sf-module--dimmed {
  opacity: 0.12 !important;
  filter: grayscale(80%) !important;
  pointer-events: none;
}

/* ── Barra de Estado Inferior ───────────────────────────────── */
#cmo-statusbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 26px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 0;
  z-index: 60;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
}

.cmo-sb-item {
  color: var(--text-3);
  padding: 0 8px;
  white-space: nowrap;
  font-weight: 500;
  cursor: default;
  transition: color 0.2s;
}
.cmo-sb-item:hover { color: var(--text-2); }
.cmo-sb-item span { color: var(--text-2); font-weight: 700; }

.cmo-sb-div {
  color: var(--border);
  font-size: 12px;
  flex-shrink: 0;
}

/* Canvas ocupa todo #cmo-canvas-area dejando espacio para statusbar */
#cmo-canvas-area #sf-canvas-wrapper {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 26px !important;
}

/* Panel derecho override de segunda definición (neutralizar) */
#sf-details-panel { width: 300px; }

/* ── Workflow Preview (modal de nueva orden) ─────────────────── */
#qo-workflow-preview {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 10px 12px;
}
.qo-flow-title {
  font-size: 9.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-bottom: 8px;
}
.qo-flow-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.qo-flow-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 3px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  font-size: 10.5px;
  color: var(--text-2);
  font-weight: 600;
  white-space: nowrap;
}
.qo-flow-step iconify-icon { font-size: 10px; }
.qo-flow-arrow {
  color: var(--text-3);
  font-size: 12px;
  flex-shrink: 0;
}
.qo-comp-label {
  font-size: 10px;
  color: var(--yellow);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 4px;
}

/* ── Status bar no cubre el toolbar flotante ────────────────── */
#sf-canvas-toolbar {
  bottom: 36px;
}

/* ── Select de velocidad de simulación ─────────────────────── */
.cmo-sb-select {
  background: transparent;
  border: none;
  color: var(--text-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  padding: 0 2px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.cmo-sb-select:focus { color: var(--text-1); }
.cmo-sb-select option {
  background: var(--bg-panel);
  color: var(--text-1);
  font-family: var(--font-sans);
}

/* ═══════════════════════════════════════════════════════════════
   MÓDULO 2D — SISTEMA DE DISEÑO sf-mod-*
   Jerarquía visual clara: util bar → header → métricas → órdenes → footer
   ═══════════════════════════════════════════════════════════════ */

/* Override de las clases base del módulo para el nuevo sistema */
.sf-module {
  padding: 0;           /* el padding lo manejan los hijos */
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ① Barra de utilización — top edge-to-edge */
.sf-mod-util {
  height: 5px;
  background: var(--border-subtle);
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 1px 1px 0 0;
}
.sf-mod-util__fill {
  height: 100%;
  border-radius: inherit;
  transition: width 0.5s ease, background-color 0.3s;
}

/* ② Header: Ícono + Nombre + Pill */
.sf-mod-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px 6px;
  flex-shrink: 0;
}
.sf-mod-head__icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}
.sf-mod-head__name {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}

/* Pill de estado */
.sf-mod-pill {
  font-size: 9px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  flex-shrink: 0;
  white-space: nowrap;
}
.sf-mod-pill--active  { background: rgba(46,125,50,0.15);  color: var(--green); }
.sf-mod-pill--stopped { background: var(--red-glow);         color: var(--red);   border: 1px solid var(--red-dim); }
.sf-mod-pill--idle    { background: var(--bg-card);          color: var(--text-3);}
.sf-mod-pill--alert   { background: rgba(230,81,0,0.14);    color: var(--orange,#E67E22); }

/* ③ Métricas (compact KPI strip) */
.sf-mod-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 4px 11px;
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
  background: rgba(0,0,0,0.04);
  overflow: hidden;
}
.sf-mod-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0 10px 0 0;
  margin-right: 10px;
  border-right: 1px solid var(--border-subtle);
}
.sf-mod-metric:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.sf-mod-metric__val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1;
}
.sf-mod-metric__lbl {
  font-size: 7.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.sf-mod-metric--green .sf-mod-metric__val { color: var(--green); }
.sf-mod-metric--yellow .sf-mod-metric__val { color: var(--yellow); }
.sf-mod-metric--red .sf-mod-metric__val { color: var(--red); }

/* ④ Banner de alerta */
.sf-mod-alert-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2px;
  flex-shrink: 0;
}
.sf-mod-alert-banner--stop {
  background: var(--red-glow);
  border-bottom: 1px solid var(--red-dim);
  color: var(--red);
  text-transform: uppercase;
}
.sf-mod-alert-banner--andon {
  background: rgba(230,81,0,0.1);
  border-bottom: 1px solid rgba(230,81,0,0.2);
  color: var(--orange, #E67E22);
}
.sf-mod-alert-time {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--text-3);
}

/* ⑤ Lista de órdenes */
.sf-mod-orders {
  flex: 1;
  overflow-y: auto;
  padding: 6px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}

/* Mensaje de estado libre */
.sf-mod-idle-msg {
  color: var(--text-3);
  font-style: italic;
  font-size: 11px;
  text-align: center;
  padding: 8px 0;
}

/* Fila de orden */
.sf-mod-order {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  border-left: 3px solid var(--yellow);
  transition: border-color 0.15s, background 0.15s;
  cursor: pointer;
}
.sf-mod-order:hover {
  background: var(--bg-card-hover, var(--bg-panel));
  border-color: var(--border-active);
}
.sf-mod-order--paused {
  opacity: 0.65;
  border-left-color: var(--text-3);
}
.sf-mod-order--ready {
  border-left-color: var(--green);
  background: rgba(46,125,50,0.04);
}

/* Row 1: ID + cliente + tags */
.sf-mod-order__row1 {
  display: flex;
  align-items: center;
  gap: 5px;
}
.sf-mod-order__id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--yellow);
  flex-shrink: 0;
}
.sf-mod-order__client {
  flex: 1;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-mod-order__tag {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 800;
  flex-shrink: 0;
}
.sf-mod-order__tag--paused { background: var(--bg-panel); color: var(--text-3); }
.sf-mod-order__tag--ready  { background: var(--green-glow); color: var(--green); }
.sf-mod-order__days {
  font-size: 9.5px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Nombre del componente */
.sf-mod-order__comp {
  font-size: 10.5px;
  color: var(--text-2);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Barra de progreso */
.sf-mod-order__prog {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sf-mod-order__bar-track {
  flex: 1;
  height: 4px;
  background: var(--border-subtle);
  border-radius: 2px;
  overflow: hidden;
}
.sf-mod-order__bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s ease;
}
.sf-mod-order__pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-3);
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ⑥ Footer */
.sf-mod-footer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 5px 11px 6px;
  border-top: 1px solid var(--border-subtle);
  background: rgba(0,0,0,0.02);
  flex-shrink: 0;
  gap: 8px;
}
.sf-mod-footer__orders {
  font-size: 9.5px;
  color: var(--text-3);
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.sf-mod-footer__orders--active {
  color: var(--yellow);
}
/* Badge responsable / supervisor — absoluto, mismo nivel que bn-badge */
.sf-mod-resp-badge {
  position: absolute;
  bottom: 5px;
  right: 7px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}
.sf-mod-resp-badge__label {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 7px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-3);
  line-height: 1;
}
.sf-mod-resp-badge__name {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-2);
  text-align: right;
  max-width: 88px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Dark theme override */
#sf-app[data-theme="dark"] .sf-mod-metrics { background: rgba(255,255,255,0.03); }
#sf-app[data-theme="dark"] .sf-mod-footer   { background: rgba(255,255,255,0.02); }

/* ═══════════════════════════════════════════════════════════════
   TOOLTIP FLOTANTE DE DEPARTAMENTO (hover)
   ═══════════════════════════════════════════════════════════════ */

#sf-dept-tooltip {
  position: fixed;
  z-index: 9999;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 7px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.04);
  overflow: hidden;
  pointer-events: none;
  animation: sf-tooltip-in 0.12s ease;
}

@keyframes sf-tooltip-in {
  from { opacity: 0; transform: translateY(4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Header del tooltip */
.sf-dtt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 13px 9px;
  background: rgba(0,0,0,0.12);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-1);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.sf-dtt-count {
  margin-left: auto;
  font-size: 9.5px;
  color: var(--text-3);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0;
}

/* Banner de parada en tooltip */
.sf-dtt-stop {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: var(--red-glow);
  border-bottom: 1px solid var(--red-dim);
  font-size: 11px;
  color: var(--red);
  font-weight: 600;
}
.sf-dtt-stop strong { color: var(--text-1); }
.sf-dtt-stop-time {
  margin-left: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-3);
}

/* Cada orden en el tooltip */
.sf-dtt-order {
  padding: 10px 13px;
  border-bottom: 1px solid var(--border-subtle);
}
.sf-dtt-order:last-of-type { border-bottom: none; }

.sf-dtt-order__head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}
.sf-dtt-order__id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--yellow);
  flex-shrink: 0;
}
.sf-dtt-order__client {
  flex: 1;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-dtt-tag {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 800;
  flex-shrink: 0;
}
.sf-dtt-tag--paused { background: var(--bg-card); color: var(--text-3); }
.sf-dtt-tag--ready  { background: var(--green-glow); color: var(--green); border: 1px solid var(--green-dim); }

.sf-dtt-order__product {
  font-size: 10px;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-dtt-order__comp {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 600;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-dtt-order__prog {
  display: flex;
  align-items: center;
  gap: 7px;
}
.sf-dtt-bar-track {
  flex: 1;
  height: 5px;
  background: var(--border-subtle);
  border-radius: 3px;
  overflow: hidden;
}
.sf-dtt-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-2);
  min-width: 30px;
  text-align: right;
  flex-shrink: 0;
}

/* Hint al final del tooltip */
.sf-dtt-hint {
  padding: 7px 13px;
  font-size: 9.5px;
  color: var(--text-3);
  font-style: italic;
  background: rgba(0,0,0,0.06);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   RUTA DE FLUJO DE TRABAJO (breadcrumb en panel de tarea)
   ═══════════════════════════════════════════════════════════════ */
.sf-wf-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 5px 0 6px;
  overflow-x: auto;
}
.sf-wf-node {
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all var(--transition-base);
}
.sf-wf-node--done    { background: var(--green-glow);  color: var(--green); border: 1px solid var(--green-dim); }
.sf-wf-node--current { background: var(--yellow-glow); color: var(--yellow); border: 1px solid var(--yellow-dim); font-weight: 800; }
.sf-wf-node--pending { background: var(--bg-card);     color: var(--text-3); border: 1px solid var(--border-subtle); }
.sf-wf-sep {
  font-size: 9px;
  color: var(--text-3);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   BÚSQUEDA RÁPIDA (Ctrl+K)
   ═══════════════════════════════════════════════════════════════ */
.sf-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 20000;
  display: none;            /* JS lo muestra con .style.display='flex' */
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.sf-search-overlay.open {
  display: flex;
}

.sf-search-box {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  width: 540px;
  max-width: calc(100vw - 32px);
  overflow: hidden;
  animation: sf-search-in 0.15s ease;
}

@keyframes sf-search-in {
  from { opacity: 0; transform: translateY(-12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sf-search-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.sf-search-icon { font-size: 18px; color: var(--text-3); flex-shrink: 0; }
.sf-search-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-1);
}
.sf-search-input::placeholder { color: var(--text-3); }
.sf-search-esc {
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-3);
  background: var(--bg-card);
  cursor: pointer;
  flex-shrink: 0;
}

.sf-search-results {
  max-height: 340px;
  overflow-y: auto;
}
.sf-sr-section-label {
  padding: 8px 16px 4px;
  font-size: 9.5px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}
.sf-sr-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.1s;
  border-bottom: 1px solid var(--border-subtle);
}
.sf-sr-item:last-child { border-bottom: none; }
.sf-sr-item:hover, .sf-sr-item.focused {
  background: var(--bg-card);
}
.sf-sr-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.sf-sr-info { flex: 1; overflow: hidden; }
.sf-sr-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-sr-sub {
  font-size: 11px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-sr-tag {
  font-size: 9px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 700;
  flex-shrink: 0;
}
.sf-search-footer {
  display: flex;
  gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.04);
}
.sf-search-footer span { font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 4px; }
.sf-search-footer kbd {
  font-size: 9px;
  padding: 1px 5px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-card);
  color: var(--text-2);
  font-family: 'JetBrains Mono', monospace;
}
.sf-search-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--text-3);
  font-style: italic;
  font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL DE ATAJOS DE TECLADO
   ═══════════════════════════════════════════════════════════════ */
.sf-shortcuts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.sf-sc-group { display: flex; flex-direction: column; gap: 6px; }
.sf-sc-group-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 4px;
}
.sf-sc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--text-2);
}
.sf-sc-row kbd {
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--bg-card);
  color: var(--text-1);
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.sf-sc-row span { color: var(--text-2); }

/* ═══════════════════════════════════════════════════════════════
   GANTT SIMPLIFICADO DE ÓRDENES (dashboard panel)
   ═══════════════════════════════════════════════════════════════ */
.sf-gantt { display: flex; flex-direction: column; gap: 5px; }

.sf-gantt-row {
  display: flex;
  align-items: center;
  gap: 7px;
}
.sf-gantt-info {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 100px;
  flex-shrink: 0;
}
.sf-gantt-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--yellow);
  flex-shrink: 0;
}
.sf-gantt-client {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.sf-gantt-track-wrap {
  flex: 1;
  position: relative;
  height: 14px;
  background: var(--border-subtle);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
}
.sf-gantt-segs {
  display: flex;
  width: 100%;
  height: 100%;
  gap: 1px;
  padding: 1px;
}
.sf-gantt-seg {
  flex: 1;
  border-radius: 2px;
  transition: all 0.3s;
}
.sf-gantt-seg:hover { filter: brightness(1.2); }
.sf-gantt-overlay {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  pointer-events: none;
  transition: width 0.5s ease;
}
.sf-gantt-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   MODAL RESUMEN DE TURNO
   ═══════════════════════════════════════════════════════════════ */
.sf-shift-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.sf-shift-kpi {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 5px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
  transition: border-color 0.15s;
}
.sf-shift-kpi--warn { border-color: var(--yellow-dim); background: var(--yellow-glow); }
.sf-shift-kpi__val {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1;
}
.sf-shift-kpi__lbl {
  font-size: 9px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  line-height: 1.2;
}

/* ── Indicador parada activa en panel de dpto ────────────────── */
.sf-stop-cost-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--red-glow);
  border: 1px solid var(--red-dim);
  border-radius: 4px;
  font-size: 11px;
  color: var(--text-2);
  margin-top: 4px;
}
.sf-stop-cost-badge strong { color: var(--red); font-family: var(--font-sans); font-size: 12px; }

/* ── Alert cards en dashboard panel ─────────────────────────── */
.sf-dash-alert-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11.5px;
}
.sf-dash-alert-row:last-child { border-bottom: none; }
.sf-dash-alert-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sf-dash-alert-name { flex: 1; color: var(--text-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-dash-alert-tag  { font-size: 9px; padding: 2px 6px; border-radius: 3px; font-weight: 700; text-transform: uppercase; flex-shrink: 0; }

/* ── Días hasta entrega — colores en status bar ─────────────── */
#sb-sim-icon { font-size: 10px; color: var(--green); }

/* ═══════════════════════════════════════════════════════════════
   MÓDULOS ENRIQUECIDOS — NUEVOS ESTILOS
   ═══════════════════════════════════════════════════════════════ */

/* Quick buttons en módulo canvas */
.sf-module-task__quick-btn {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 2px;
  font-size: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  color: var(--text-3);
  cursor: pointer;
  padding: 2px 4px;
  transition: all 0.12s;
}
.sf-module-task__quick-btn:hover {
  background: var(--yellow-glow);
  color: var(--yellow);
  border-color: var(--yellow);
}
.sf-module-task__quick-btn--accent {
  background: var(--green-glow);
  color: var(--green);
  border-color: var(--green-dim);
}
.sf-module-task__quick-btn--accent:hover {
  background: var(--green);
  color: #000;
}

.sf-module-task--ready {
  border-color: var(--green-dim);
  background: rgba(46,125,50,0.04);
}
.sf-module-task--paused {
  border-color: var(--text-3);
  opacity: 0.75;
}

/* Estado de pausa en footer del módulo */
.sf-module-task--paused .sf-module-task__name {
  color: var(--text-3);
}

/* ═══════════════════════════════════════════════════════════════
   PANEL DE OPERACIONES — TARJETAS DE ORDEN DE TRABAJO
   ═══════════════════════════════════════════════════════════════ */

/* Bloque de estado del departamento */
.sf-dept-status-block {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid;
  border-radius: 5px;
}
.sf-dept-status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Tarjeta de orden de trabajo en panel — acordeón */
.sf-order-task-card {
  background: linear-gradient(90deg, rgba(250,189,47,0.05) 0%, var(--bg-card) 32%);
  border: 1px solid var(--border);
  border-left: 3px solid var(--yellow);
  border-radius: 6px;
  padding: 0;
  margin-bottom: 6px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.28);
}
.sf-order-task-card:hover {
  border-color: var(--yellow);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35), 0 0 0 1px rgba(250,189,47,0.14);
}
.sf-order-task-card--open {
  box-shadow: 0 3px 12px rgba(0,0,0,0.35);
}
.sf-order-task-card--ready {
  border-left-color: var(--green);
  border-color: rgba(46,125,50,0.4);
  background: linear-gradient(90deg, rgba(46,125,50,0.08) 0%, var(--bg-card) 36%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.28), 0 0 8px rgba(46,125,50,0.12);
}
.sf-order-task-card--ready:hover,
.sf-order-task-card--ready.sf-order-task-card--open {
  border-color: var(--green);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35), 0 0 14px rgba(46,125,50,0.2);
}
.sf-order-task-card--paused {
  border-left-color: var(--text-3);
  border-color: var(--border-subtle);
  background: var(--bg-card);
  opacity: 0.78;
}

/* ── Fila resumen compacta (siempre visible) ── */
.sf-otc-summary {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 9px 6px;
  cursor: pointer;
  user-select: none;
  min-height: 0;
}
.sf-otc-summary:hover { background: rgba(255,255,255,0.02); }

.sf-otc-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.sf-otc-order-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--yellow);
  flex-shrink: 0;
}
.sf-otc-summary-client {
  flex: 1;
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.sf-otc-summary-pct {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  flex-shrink: 0;
}
.sf-otc-days {
  font-size: 9.5px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Badges pequeños de estado en la fila compacta */
.sf-otc-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 3px;
  flex-shrink: 0;
}
.sf-otc-badge--urgent { background: var(--red-glow); color: var(--red); }
.sf-otc-badge--paused { background: var(--bg-panel); color: var(--text-3); border: 1px solid var(--border-subtle); }
.sf-otc-badge--ready  { background: rgba(46,125,50,0.18); color: var(--green); }

/* Chevron que rota al abrir */
.sf-otc-chevron {
  font-size: 12px;
  color: var(--text-3);
  flex-shrink: 0;
  transition: transform 0.2s ease;
  display: block;
}
.sf-order-task-card--open .sf-otc-chevron {
  transform: rotate(180deg);
}

/* Mini barra de progreso debajo del resumen */
.sf-otc-mini-bar-track {
  height: 2px;
  background: var(--border-subtle);
  overflow: hidden;
}
.sf-otc-mini-bar-fill {
  height: 100%;
  transition: width 0.4s ease;
}

/* ── Sección expandible ── */
.sf-otc-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  padding: 0 10px;
}
.sf-order-task-card--open .sf-otc-detail {
  max-height: 700px;
  padding: 8px 10px 10px;
}

/* Cabecera legacy (solo se usa en tooltip, no en acordeón) */
.sf-otc-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.sf-otc-client {
  flex: 1;
  font-size: 11px;
  color: var(--text-2);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-otc-paused-badge {
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--bg-panel);
  color: var(--text-3);
  border: 1px solid var(--border-subtle);
  font-weight: 700;
  flex-shrink: 0;
}

/* Componente y paso */
.sf-otc-component {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* Barra de progreso */
.sf-otc-progress-wrap { margin-bottom: 8px; }
.sf-otc-progress-track {
  height: 6px;
  background: var(--border-subtle);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 3px;
}
.sf-otc-progress-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.sf-otc-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Botones de acción de tarea */
.sf-otc-actions {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: center;
}
.sf-tact-btn {
  padding: 4px 9px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-panel);
  color: var(--text-2);
  transition: all 0.12s;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.sf-tact-btn:hover {
  background: var(--bg-card-hover, var(--bg-card));
  color: var(--text-1);
  border-color: var(--border-active);
}
.sf-tact-btn--complete {
  background: var(--green-glow);
  border-color: var(--green-dim);
  color: var(--green);
}
.sf-tact-btn--complete:hover { background: var(--green); color: #000; border-color: var(--green); }

.sf-tact-btn--dispatch {
  background: var(--yellow-glow);
  border-color: var(--yellow-dim);
  color: var(--yellow);
  flex: 1;
  text-align: center;
}
.sf-tact-btn--dispatch:hover { background: var(--yellow); color: #000; }

.sf-tact-btn--pause {
  background: transparent;
  border-color: var(--border-subtle);
  color: var(--text-3);
  padding: 4px 7px;
}
.sf-tact-btn--pause:hover { color: var(--yellow); border-color: var(--yellow); }

.sf-tact-btn--resume {
  background: var(--green-glow);
  border-color: var(--green-dim);
  color: var(--green);
}
.sf-tact-btn--resume:hover { background: var(--green); color: #000; }

.sf-tact-btn--quality {
  background: var(--yellow-glow);
  border-color: var(--border-subtle);
  color: var(--yellow);
  padding: 4px 7px;
}
.sf-tact-btn--quality:hover { background: var(--red-glow); color: var(--red); border-color: var(--red-dim); }

.sf-otc-blocked {
  font-size: 10px;
  color: var(--red);
  font-weight: 700;
  font-style: italic;
}

/* Sin tareas */
.sf-empty-tasks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 16px;
  color: var(--text-3);
  font-style: italic;
  font-size: 12px;
  text-align: center;
}

/* Chips de operarios */
.sf-op-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.sf-op-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-2);
  cursor: default;
  transition: all 0.12s;
}
.sf-op-chip:hover {
  background: var(--yellow-glow);
  border-color: var(--yellow-dim);
  color: var(--text-1);
}

/* Lista de activos */
.sf-assets-list { display: flex; flex-direction: column; gap: 4px; }
.sf-asset-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 7px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  font-size: 11px;
}
.sf-asset-icon { flex-shrink: 0; }
.sf-asset-name { flex: 1; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-asset-status {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   PANEL BI ANALYTICS — CENTRO DE INTELIGENCIA OPERACIONAL
   ═══════════════════════════════════════════════════════ */

.modal-bi-overlay {
  z-index: 2100;
  align-items: stretch;
  padding: 0;
}
.modal-bi-overlay.active {
  display: flex;
}
.modal-bi-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  overflow: hidden;
}
.modal-bi-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}
.modal-bi-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Sección labels ── */
.bi-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 2px;
}

/* ── Filas ── */
.bi-row { display: grid; gap: 12px; }
.bi-row--oee { grid-template-columns: 200px 1fr 1fr 1fr; }
.bi-row--two { grid-template-columns: 1fr 1fr; }

/* ── Cards base ── */
.bi-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 14px;
  overflow: hidden;
}
.bi-card--gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.bi-card--kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 10px;
}
.bi-card__title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

/* ── KPI Cards OEE ── */
.bi-oee-kpi__label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
}
.bi-oee-kpi__value {
  font-size: 32px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1;
}
.bi-oee-kpi__bar {
  width: 100%;
  height: 6px;
  background: var(--border-subtle);
  border-radius: 3px;
  overflow: hidden;
}
.bi-oee-kpi__bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
.bi-oee-kpi__formula {
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.4;
}

/* ── Chart areas ── */
.bi-chart-area { width: 100%; min-height: 140px; }
.bi-chart-area--donut { min-height: 120px; }
.bi-chart-area svg { display: block; }

/* ── OEE table ── */
.bi-oee-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.bi-oee-tbl th {
  text-align: left;
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.bi-oee-tbl td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  vertical-align: middle;
}
.bi-oee-tbl tr:last-child td { border-bottom: none; }
.bi-oee-tbl tr:hover td { background: var(--bg-hover); }
.bi-traffic {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 4px;
}

/* ── 3-col stats row for SPC KPIs ── */
.bi-row--stats3 { grid-template-columns: 1fr 1fr 1fr; }

/* ── Bottleneck rows ── */
.bi-bottleneck-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.bi-bottleneck-row:last-child { border-bottom: none; }
.bi-bottleneck-rank {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  width: 28px;
  flex-shrink: 0;
}
.bi-bottleneck-info { flex: 1; min-width: 0; }
.bi-bottleneck-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.bi-bottleneck-stat { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.bi-bottleneck-bar-wrap { width: 80px; flex-shrink: 0; }
.bi-bottleneck-bar-bg {
  height: 6px;
  background: var(--border-subtle);
  border-radius: 3px;
  overflow: hidden;
}
.bi-bottleneck-bar-fill {
  height: 100%;
  border-radius: 3px;
}

/* ── Heatmap ── */
.bi-heatmap-grid {
  display: grid;
  gap: 1px;
  font-size: 8px;
}
.bi-heatmap-cell {
  border-radius: 2px;
  transition: opacity 0.2s;
  cursor: default;
}
.bi-heatmap-label {
  font-size: 9px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: center;
}

/* ── Empty state ── */
.bi-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--text-muted);
  font-size: 12px;
  gap: 6px;
}

/* ── Dark mode overrides ── */
#sf-app[data-theme="dark"] .modal-bi-container {
  background: #0D1117;
}
#sf-app[data-theme="dark"] .modal-bi-header {
  background: #161B22;
}

@media (max-width: 900px) {
  .bi-row--oee { grid-template-columns: 1fr 1fr; }
  .bi-row--two { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════
   ITERACIÓN 13 — GEMELO DIGITAL AVANZADO
   ═══════════════════════════════════════════════════════ */


/* ── Zoom semántico ── */
/* Nano: solo nombre + dot de estado */
.sf-module--nano .sf-mod-kpi-strip,
.sf-module--nano .sf-mod-alert-banner,
.sf-module--nano .sf-mod-footer,
.sf-module--nano .sf-mod-head__status { display: none !important; }
.sf-module--nano .sf-mod-header       { padding: 6px 8px !important; }
.sf-module--nano .sf-mod-head__name   { font-size: 11px !important; }
/* Compact: oculta solo footer */
.sf-module--compact .sf-mod-footer    { display: none !important; }

/* ── Partículas de flujo SVG ── */
.sf-flow-particle {
  pointer-events: none;
}
@keyframes sf-flow-anim {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ═══════════════════════════════════════════════════════
   ITERACIÓN 10 — CONTROL ACTIVO DE PRODUCCIÓN
   ═══════════════════════════════════════════════════════ */

/* ── Tarjeta expedida ── */
.sf-order-task-card--expedited {
  border-left: 3px solid var(--red) !important;
  border-color: rgba(211,47,47,0.4);
  background: linear-gradient(90deg, rgba(211,47,47,0.09) 0%, var(--bg-card) 36%);
  box-shadow: 0 1px 4px rgba(0,0,0,0.28), 0 0 8px rgba(211,47,47,0.14);
}
.sf-order-task-card--expedited:hover,
.sf-order-task-card--expedited.sf-order-task-card--open {
  border-color: var(--red);
  box-shadow: 0 2px 10px rgba(0,0,0,0.35), 0 0 14px rgba(211,47,47,0.22);
}
.sf-otc-expedited-badge {
  font-size: 9px;
  font-weight: 800;
  color: var(--red);
  background: var(--red-glow);
  border: 1px solid var(--red-dim);
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* ── Orden atrasada (tiempo estándar excedido sin completar) ── */
.sf-order-task-card--overdue {
  border-left: 3px solid var(--red) !important;
  border-color: rgba(211,47,47,0.5);
  background: linear-gradient(90deg, rgba(211,47,47,0.13) 0%, var(--bg-card) 40%);
  animation: sf-overdue-pulse 1.6s ease-in-out infinite;
}
@keyframes sf-overdue-pulse {
  0%, 100% { box-shadow: 0 1px 4px rgba(0,0,0,0.28), 0 0 6px rgba(211,47,47,0.18); }
  50%      { box-shadow: 0 1px 4px rgba(0,0,0,0.28), 0 0 14px rgba(211,47,47,0.45); }
}
.sf-otc-overdue-badge {
  display: none;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  background: var(--red);
  border-radius: 3px;
  padding: 1px 5px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  animation: sf-overdue-blink 1.2s steps(1) infinite;
}
.sf-order-task-card--overdue .sf-otc-overdue-badge { display: inline-flex; }
@keyframes sf-overdue-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ── Botones nuevos ── */
.sf-tact-btn--skip {
  background: var(--bg-card) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-subtle) !important;
  font-size: 13px !important;
  padding: 3px 7px !important;
}
.sf-tact-btn--skip:hover { color: var(--yellow) !important; border-color: var(--yellow) !important; }

.sf-tact-btn--expedite {
  font-size: 10px !important;
  padding: 3px 8px !important;
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 3px !important;
}
.sf-tact-btn--expedite:hover { color: var(--red) !important; border-color: var(--red) !important; }
.sf-tact-btn--expedited-active {
  color: var(--red) !important;
  border-color: var(--red-dim) !important;
  background: var(--red-glow) !important;
}

.sf-otc-secondary-actions {
  margin-top: 4px;
  display: flex;
  gap: 4px;
}

/* ── Cola global de tareas ── */
.sf-queue-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.15s;
}
.sf-queue-row:last-child { border-bottom: none; }
.sf-queue-row:hover { background: var(--bg-hover); }
.sf-queue-row[draggable]:hover { cursor: grab; }
.sf-queue-row.sf-queue-dragging { opacity: 0.4; background: var(--bg-card); }
.sf-queue-row.sf-queue-drop-over {
  border-top: 2px solid var(--yellow);
  background: var(--yellow-glow);
}
.sf-queue-rank {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  width: 20px;
  flex-shrink: 0;
  text-align: center;
}
.sf-queue-info { flex: 1; min-width: 0; }
.sf-queue-order {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

/* ═══════════════════════════════════════════════════════
   ITERACIÓN 17 — COSTOS REALES Y RENTABILIDAD
   ═══════════════════════════════════════════════════════ */

.sf-otc-cost-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  padding: 4px 8px;
  background: var(--bg-primary);
  border-radius: 3px;
  border: 1px solid var(--border-subtle);
}
.sf-otc-margin-badge {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid;
  font-family: 'JetBrains Mono', monospace;
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════
   ITERACIONES 14, 15, 16 — TRAZABILIDAD / SIMULADOR / SKILLS
   ═══════════════════════════════════════════════════════ */

.sf-tact-btn--trace {
  font-size: 10px !important;
  padding: 3px 7px !important;
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-subtle) !important;
}
.sf-tact-btn--trace:hover { color: var(--yellow) !important; border-color: var(--yellow) !important; }

.sf-tact-btn--sim {
  font-size: 10px !important;
  padding: 3px 7px !important;
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-subtle) !important;
}
.sf-tact-btn--sim:hover { color: var(--green) !important; border-color: var(--green) !important; }

/* ═══════════════════════════════════════════════════════
   ITERACIÓN 12 — ALERTAS INTELIGENTES
   ═══════════════════════════════════════════════════════ */

/* Badge de alertas en header — animación pulso para críticas */
#cmo-alert-badge {
  animation: alert-pulse 1.8s ease-in-out infinite;
}
@keyframes alert-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.15); opacity: 0.85; }
}

/* ═══════════════════════════════════════════════════════
   ZONAS DE SEGURIDAD + SENSORES VIRTUALES
   ═══════════════════════════════════════════════════════ */

.sf-safety-zone {
  transition: border-color 0.3s, background 0.3s;
}
.sf-safety-zone:hover {
  filter: brightness(1.15);
  box-shadow: 0 0 8px rgba(255,255,255,0.08);
}
.sf-zone-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-zone-sensor {
  background: rgba(0,0,0,0.35);
  border-radius: 3px;
  padding: 1px 4px;
}

/* ═══════════════════════════════════════════════════════
   HEIJUNKA — modal body
   ═══════════════════════════════════════════════════════ */
#heijunka-body svg {
  display: block;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════
   PLANIFICADOR DE TURNOS
   ═══════════════════════════════════════════════════════ */
.sf-shift-cell:hover {
  filter: brightness(1.2) !important;
  transform: scale(1.06);
}
#shift-grid-container {
  scrollbar-width: thin;
}

/* ═══════════════════════════════════════════════════════
   PINS DE DEFECTOS EN PLANO
   ═══════════════════════════════════════════════════════ */
.sf-defect-pin {
  transition: transform 0.15s;
  transform-origin: 50% 100%;
}
.sf-defect-pin:hover {
  transform: scale(1.3);
  z-index: 200 !important;
}


/* ═══ Fase 4 planmovil — Aviso "mejor en pantalla grande" para el canvas ═══ */
.canvas-mobile-notice { display: none; }
@media (max-width: 768px) {
  .canvas-mobile-notice {
    display: block;
    padding: 8px 12px;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    color: var(--text-2);
    font-size: 12px;
    line-height: 1.4;
    text-align: center;
  }

  /* Rediseñar Header del CMO para Móviles */
  .cmo-header {
    display: flex !important;
    flex-flow: row wrap !important;
    height: auto !important;
    min-height: unset !important;
    padding: 6px 12px !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
  }

  /* Posicionamiento en dos filas usando Flexbox order */
  .cmo-header .sf-hamburger {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border: none;
    background: transparent;
    color: var(--text-1);
    cursor: pointer;
    border-radius: 4px;
    flex-shrink: 0;
    font-size: 20px;
    order: 1;
    margin-right: auto;
  }

  .cmo-header .cmo-kpi-strip {
    order: 2;
    display: flex !important;
    gap: 12px;
    align-items: center;
    margin-right: 0;
    margin-left: auto;
  }

  .cmo-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .cmo-kpi__val {
    font-size: 13px !important;
  }

  .cmo-kpi__lbl {
    font-size: 9px !important;
  }

  .cmo-kpi-divider {
    height: 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    display: block !important;
  }

  .cmo-header__right {
    order: 3;
    width: 100% !important;
    margin-left: 0 !important;
    display: block !important;
  }

  /* Acciones en una cuadrícula compacta de 5 columnas */
  .cmo-header-actions {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
    width: 100% !important;
    overflow: visible !important;
    white-space: normal !important;
    padding: 4px 0 !important;
  }

  /* Botones del CMO restaurados con su estilo original y texto visible */
  .cmo-header .btn-cmo {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    padding: 4px 2px !important;
    min-height: unset !important;
    height: 48px !important;
    width: 100% !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-2) !important;
    box-shadow: none !important;
  }

  .cmo-header .btn-cmo--success {
    background: var(--green-glow) !important;
    border-color: var(--green-dim) !important;
    color: var(--green) !important;
  }

  .cmo-header .btn-cmo--danger {
    background: var(--red-glow) !important;
    border-color: var(--red-dim) !important;
    color: var(--red) !important;
  }

  .cmo-header .btn-cmo--nav {
    display: flex !important;
  }

  .cmo-header .btn-cmo span {
    display: block !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: normal !important;
    word-break: break-word !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .cmo-header .btn-cmo iconify-icon {
    font-size: 16px !important;
    margin: 0 !important;
  }

  .cmo-header .cmo-actions-sep {
    display: none !important;
  }

  .cmo-header .cmo-tools-menu {
    width: 100% !important;
    height: 100% !important;
  }

  .cmo-header #btn-tools-menu {
    width: 100% !important;
    height: 100% !important;
  }

  .cmo-header #tools-chevron {
    display: none !important;
  }

  .cmo-header .cmo-tools-dropdown.open {
    display: block !important;
    position: fixed !important;
    top: auto !important;
    bottom: 12px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: 65vh !important;
    column-count: 2 !important;
    column-gap: 8px !important;
    z-index: 9999 !important;
    background: var(--bg-panel) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.6) !important;
    border-radius: 12px !important;
  }

  /* Forzar altura de la vista del mapa para evitar colapso vertical */
  #sf-main {
    display: flex !important;
    flex-direction: column !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  .cmo-body {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    overflow: hidden !important;
  }
  
  #cmo-canvas-area {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  /* Panel lateral de detalles en móviles (Drawer completo) */
  #sf-details-panel {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 320px !important;
    max-width: 85vw !important;
    height: 100dvh !important;
    z-index: 1600 !important;
    box-shadow: -4px 0 20px rgba(0,0,0,0.5) !important;
    transform: translateX(100%) !important;
    transition: transform 0.25s ease-in-out !important;
    background: var(--bg-panel) !important;
    border-left: 1px solid var(--border) !important;
  }

  #sf-details-panel.visible {
    transform: translateX(0) !important;
  }

  /* Scroll horizontal táctil para la barra de estado inferior */
  #cmo-statusbar {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 4px;
    scrollbar-width: none;
  }
  #cmo-statusbar::-webkit-scrollbar {
    display: none;
  }

  /* Compactar barra de herramientas flotante de zoom */
  #sf-canvas-toolbar #btn-reset-view,
  #sf-canvas-toolbar #btn-fullscreen,
  #sf-canvas-toolbar div[style*="background"],
  #sf-canvas-toolbar #btn-uniformize {
    display: none !important;
  }
  #sf-canvas-toolbar {
    max-width: 90vw;
    padding: 4px 8px;
    bottom: 36px;
  }
}

@media (max-width: 540px) {
  /* En teléfonos, KPIs en formato badge compacto */
  .cmo-kpi {
    background: var(--bg-card);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--border);
    flex-direction: row;
    align-items: center;
    gap: 4px;
  }
  .cmo-kpi__lbl {
    display: none !important;
  }
  .cmo-kpi-divider {
    display: none !important;
  }
}

@media (max-width: 480px) {
  /* Reducir ancho del dropdown de herramientas en pantallas muy pequeñas */
  .cmo-tools-dropdown {
    width: 290px !important;
    max-width: calc(100vw - 20px);
    right: -10px;
  }
  .cmo-tools-dropdown.open {
    column-count: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════
   DISENO MES INDUSTRIAL — DEPARTAMENTOS EN INDEX
   Celdas de planta mas legibles, densas y profesionales.
   ═══════════════════════════════════════════════════════ */
#cmo-canvas-area #sf-canvas-wrapper {
  background-color: #F6F8FB;
  background-image: none;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.04), inset 0 28px 70px rgba(15, 23, 42, 0.05);
}

#sf-app[data-theme="dark"] #cmo-canvas-area #sf-canvas-wrapper {
  background-color: #0F1622;
  background-image: none;
}

.sf-module {
  isolation: isolate;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.42);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,250,252,0.98) 100%);
  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.12),
    0 2px 5px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.88);
  color: var(--text-1);
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease, filter 0.14s ease;
}

.sf-module::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15,23,42,0.045), transparent 34%),
    repeating-linear-gradient(135deg, rgba(15,23,42,0.035) 0, rgba(15,23,42,0.035) 1px, transparent 1px, transparent 10px);
  opacity: 0.55;
}

.sf-module::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  z-index: 1;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, var(--dept-theme, var(--yellow)), var(--dept-accent, var(--yellow)));
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.18);
  pointer-events: none;
}

.sf-mod-util,
.sf-mod-head,
.sf-mod-station-meta,
.sf-mod-metrics,
.sf-mod-alert-banner,
.sf-mod-footer,
.sf-resize-handle {
  position: relative;
  z-index: 2;
}

.sf-module:hover {
  border-color: rgba(100, 116, 139, 0.62);
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.18),
    0 4px 10px rgba(15, 23, 42, 0.12),
    0 0 0 1px rgba(245, 158, 11, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.9);
  transform: translateY(-2px);
}

.sf-module.selected {
  border: 3px solid transparent !important;
  border-image: repeating-linear-gradient(
    -45deg,
    #FF6A00 0,
    #FF6A00 7px,
    #0f0f0f 7px,
    #0f0f0f 14px
  ) 3 !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,106,0,0.12),
    0 0 16px rgba(255,106,0,0.40),
    0 6px 24px rgba(0,0,0,0.35) !important;
  animation: sf-hazard-glow 2s ease-in-out infinite;
  z-index: 20;
}

.sf-module--stopped {
  border-color: rgba(220, 38, 38, 0.62);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,247,247,0.98));
  box-shadow:
    0 14px 34px rgba(127, 29, 29, 0.18),
    0 0 0 1px rgba(220, 38, 38, 0.16),
    inset 0 1px 0 rgba(255,255,255,0.88);
}

.sf-module--alert:not(.sf-module--stopped) {
  border-color: rgba(234, 88, 12, 0.46);
  box-shadow:
    0 14px 34px rgba(120, 53, 15, 0.14),
    0 0 0 1px rgba(234, 88, 12, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.88);
}

.sf-module--dimmed {
  opacity: 0.36;
  filter: grayscale(0.65) saturate(0.7);
}

.sf-module.sf-module--bn-1 {
  box-shadow:
    0 0 0 2px #C2410C,
    0 18px 42px rgba(194, 65, 12, 0.22),
    0 0 22px rgba(194, 65, 12, 0.32);
}
.sf-module.sf-module--bn-2 {
  box-shadow:
    0 0 0 2px #B45309,
    0 16px 36px rgba(180, 83, 9, 0.18),
    0 0 16px rgba(180, 83, 9, 0.22);
}
.sf-module.sf-module--bn-3 {
  box-shadow:
    0 0 0 2px #78716C,
    0 14px 32px rgba(120, 113, 108, 0.14),
    0 0 12px rgba(120, 113, 108, 0.18);
}

.sf-mod-util {
  height: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px 3px 12px;
  background: linear-gradient(180deg, rgba(15,23,42,0.045), rgba(15,23,42,0.018));
  border-bottom: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 4px 4px 0 0;
}

.sf-mod-util__track {
  flex: 1;
  min-width: 0;
  height: 4px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.24);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.16);
  overflow: hidden;
}

.sf-mod-util__fill {
  height: 100%;
  border-radius: inherit;
  box-shadow: 0 0 10px rgba(22, 163, 74, 0.24);
}

.sf-mod-util__readout {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 700;
  color: var(--text-2);
  letter-spacing: 0;
  line-height: 1;
}

.sf-mod-head {
  min-height: 36px;
  padding: 5px 10px 5px 12px;
  gap: 8px;
  align-items: center;
}

.sf-mod-head__icon {
  width: 27px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.045);
  border: 1px solid rgba(148, 163, 184, 0.24);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65);
}

.sf-mod-head__title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sf-mod-head__kicker {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  color: var(--text-3);
  line-height: 1;
  letter-spacing: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sf-mod-head__name {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-1);
  letter-spacing: 0;
  line-height: 1.12;
}

.sf-mod-pill {
  border-radius: 4px;
  padding: 2px 6px;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.38);
}

.sf-mod-pill--active {
  background: rgba(22, 163, 74, 0.11);
  border-color: rgba(22, 163, 74, 0.24);
  color: var(--green);
}
.sf-mod-pill--idle {
  background: rgba(100, 116, 139, 0.10);
  border-color: rgba(148, 163, 184, 0.22);
  color: var(--text-2);
}
.sf-mod-pill--alert {
  background: rgba(234, 88, 12, 0.11);
  border-color: rgba(234, 88, 12, 0.24);
  color: var(--orange);
}
.sf-mod-pill--stopped {
  background: rgba(220, 38, 38, 0.11);
  border-color: rgba(220, 38, 38, 0.28);
  color: var(--red);
}

.sf-mod-station-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 10px 6px 12px;
  min-width: 0;
  overflow: hidden;
}

.sf-mod-station-meta__item {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 6px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--text-2);
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sf-mod-station-meta__item iconify-icon {
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: visible;
}

.sf-mod-station-meta__item span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sf-mod-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  padding: 4px 8px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(241, 245, 249, 0.74);
}

.sf-mod-metric {
  min-width: 0;
  margin: 0;
  padding: 3px 2px 3px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 4px;
  background: rgba(255,255,255,0.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

.sf-mod-metric:last-child {
  border-right: 1px solid rgba(148, 163, 184, 0.18);
}

.sf-mod-metric__val {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  color: var(--text-1);
  letter-spacing: 0;
}

.sf-mod-metric__lbl {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 6.5px;
  letter-spacing: 0;
  color: var(--text-3);
}

.sf-mod-alert-banner {
  margin: 4px 8px 0;
  padding: 5px 7px;
  border-radius: 5px;
  border: 1px solid transparent;
  line-height: 1.2;
}

.sf-mod-alert-banner--stop {
  background: rgba(220, 38, 38, 0.09);
  border-color: rgba(220, 38, 38, 0.22);
}

.sf-mod-alert-banner--andon {
  background: rgba(234, 88, 12, 0.09);
  border-color: rgba(234, 88, 12, 0.22);
}

.sf-mod-footer {
  margin-top: auto;
  min-height: 24px;
  padding: 5px 12px;
  border-top: 1px solid rgba(148, 163, 184, 0.20);
  background: rgba(255,255,255,0.58);
}

.sf-mod-footer__orders {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 9px;
  letter-spacing: 0;
}

.sf-mod-footer__orders--active {
  color: #B45309;
}

.sf-resize-handle--se {
  width: 13px;
  height: 13px;
  border-radius: 5px 0 5px 0;
  background:
    linear-gradient(135deg, transparent 0, transparent 45%, rgba(100,116,139,0.48) 45%, rgba(100,116,139,0.48) 56%, transparent 56%, transparent 100%),
    rgba(245, 158, 11, 0.16);
}

.sf-module--compact .sf-mod-station-meta,
.sf-module--compact .sf-mod-footer {
  display: none !important;
}

.sf-module--stopped .sf-mod-station-meta,
.sf-module--alert .sf-mod-station-meta {
  display: none;
}

.sf-module--bn-1 .sf-mod-footer,
.sf-module--bn-2 .sf-mod-footer,
.sf-module--bn-3 .sf-mod-footer {
  padding-left: 86px;
}

.sf-bn-badge {
  bottom: 5px;
  left: 8px;
  height: 17px;
  max-width: 74px;
  padding: 0 6px;
  border-radius: 4px;
  gap: 3px;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 2px 6px rgba(15,23,42,0.18);
  overflow: hidden;
  text-overflow: ellipsis;
}

.sf-bn-badge iconify-icon {
  font-size: 9px !important;
}

.sf-bn-badge span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.sf-bn-badge--1 {
  background: #C2410C;
  color: #fff;
}
.sf-bn-badge--2 {
  background: #B45309;
  color: #fff;
}
.sf-bn-badge--3 {
  background: #57534E;
  color: rgba(255,255,255,0.92);
}

.sf-module--nano .sf-mod-util,
.sf-module--nano .sf-mod-station-meta,
.sf-module--nano .sf-mod-metrics,
.sf-module--nano .sf-mod-alert-banner,
.sf-module--nano .sf-mod-footer {
  display: none !important;
}

.sf-module--nano .sf-mod-head {
  min-height: 36px;
  padding: 6px 8px 6px 10px;
}

.sf-module--nano .sf-mod-head__icon {
  width: 25px;
  height: 25px;
}

.sf-module--nano .sf-mod-head__name {
  font-size: 10.5px !important;
}

#sf-app[data-theme="dark"] .sf-module {
  border-color: rgba(71, 85, 105, 0.78);
  background:
    linear-gradient(180deg, rgba(30, 41, 59, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
  box-shadow:
    0 18px 36px rgba(0, 0, 0, 0.38),
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

#sf-app[data-theme="dark"] .sf-module::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,0.045), transparent 34%),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 10px);
}

#sf-app[data-theme="dark"] .sf-mod-util {
  background: rgba(255,255,255,0.035);
  border-bottom-color: rgba(148,163,184,0.16);
}

#sf-app[data-theme="dark"] .sf-mod-head__icon,
#sf-app[data-theme="dark"] .sf-mod-station-meta__item,
#sf-app[data-theme="dark"] .sf-mod-metric {
  background: rgba(15, 23, 42, 0.54);
  border-color: rgba(148, 163, 184, 0.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

#sf-app[data-theme="dark"] .sf-mod-metrics {
  background: rgba(2, 6, 23, 0.32);
  border-color: rgba(148, 163, 184, 0.14);
}

#sf-app[data-theme="dark"] .sf-mod-footer {
  background: rgba(15, 23, 42, 0.42);
  border-top-color: rgba(148, 163, 184, 0.14);
}

#sf-app[data-theme="dark"] .sf-module--stopped {
  background:
    linear-gradient(180deg, rgba(45, 28, 34, 0.98), rgba(20, 23, 31, 0.98));
}