/* JLS Production Scheduler — Operator View
   Extraído 1:1 del prototipo visual (JLS_OperatorView_Prototype.html),
   revisado y aprobado por el usuario. No cambiar valores sin volver a
   revisar con Miguel/Albert — este es el look oficial. */

:root{
  --bg:#0f0f10;--surface:#1a1a1c;--surface2:#222226;--surface3:#2a2a2e;
  --border:rgba(255,255,255,.07);--border-strong:rgba(255,255,255,.13);
  --text:#f0f0ee;--text-sec:#8a8a8a;--text-muted:#555;
  --accent:#4f8ef7;--accent-bg:rgba(79,142,247,.12);--accent-border:rgba(79,142,247,.3);
  --success:#3ecf8e;--success-bg:rgba(62,207,142,.1);--success-border:rgba(62,207,142,.3);
  --warning:#f5a524;--warning-bg:rgba(245,165,36,.1);--warning-border:rgba(245,165,36,.3);
  --danger:#ef4444;--danger-bg:rgba(239,68,68,.1);--danger-border:rgba(239,68,68,.3);
  --mono:'DM Mono',monospace;--sans:'Inter',system-ui,sans-serif;
  --display:'Syne',system-ui,sans-serif;--radius:8px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;min-height:100vh;display:flex;flex-direction:column}
button{font-family:var(--sans);cursor:pointer}

.app-shell{max-width:1200px;width:100%;margin:0 auto;display:flex;flex-direction:column;flex:1}

.topbar{background:var(--surface);border-bottom:0.5px solid var(--border);padding:12px 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.logo{font-family:var(--display);font-size:15px;font-weight:500;color:var(--text)}
.proto-badge{font-size:11px;padding:2px 8px;border-radius:20px;border:0.5px solid var(--border-strong);color:var(--text-muted);font-family:var(--mono)}
.proto-note{background:var(--surface);border-bottom:0.5px solid var(--border);padding:8px 20px;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text-sec)}
.proto-dot{width:6px;height:6px;border-radius:50%;background:var(--warning);flex-shrink:0}
.proto-dot.live{background:var(--success)}
.proto-dot.error{background:var(--danger)}

.station-bar{background:var(--surface);border-bottom:0.5px solid var(--border);padding:10px 20px;display:flex;align-items:center;justify-content:space-between}
.station-left{display:flex;align-items:center;gap:12px}
.station-name{font-family:var(--display);font-size:16px;font-weight:500;color:var(--text)}
.station-badge{background:var(--accent-bg);color:var(--accent);font-size:11px;font-weight:500;padding:3px 10px;border-radius:20px}
.station-meta{font-size:12px;color:var(--text-sec)}
.clock{font-size:12px;color:var(--text-sec);font-family:var(--mono)}

.main{display:grid;grid-template-columns:1fr 280px;flex:1}
.left-col{padding:16px;display:flex;flex-direction:column;gap:12px;border-right:0.5px solid var(--border);overflow-y:auto}
.right-col{padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--surface)}

.card{background:var(--surface2);border:0.5px solid var(--border);border-radius:12px;padding:14px 16px}
.card-label{font-size:11px;font-weight:500;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px}

.pdesc{font-family:var(--display);font-size:28px;font-weight:500;color:var(--text);line-height:1.15;margin-bottom:8px}
.top-section{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.product-block{flex:1}
.qty-block{text-align:center;flex-shrink:0}
.qty-label{font-size:11px;color:var(--text-muted);margin-bottom:4px}
.qty-value{font-size:42px;font-weight:500;color:var(--text);line-height:1;font-family:var(--mono)}
.color-row{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.color-chip{display:inline-flex;align-items:center;gap:8px;background:var(--surface3);border:0.5px solid var(--border-strong);border-radius:var(--radius);padding:6px 12px}
.color-swatch{width:13px;height:13px;border-radius:50%;border:0.5px solid rgba(255,255,255,.15)}
.color-text{font-size:14px;font-weight:500;color:var(--text)}
.overdue-badge{font-size:11px;background:var(--danger-bg);color:var(--danger);padding:4px 10px;border-radius:var(--radius);font-weight:500;display:inline-flex;align-items:center;gap:4px;border:0.5px solid var(--danger-border)}
.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;padding-top:12px;border-top:0.5px solid var(--border)}
.meta-item{display:flex;flex-direction:column;gap:3px}
.meta-label{font-size:11px;color:var(--text-muted)}
.meta-value{font-size:13px;font-weight:500;color:var(--text);font-family:var(--mono)}
.meta-value.accent{color:var(--accent)}
.icon-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;border-radius:var(--radius);padding:4px 10px;cursor:pointer;border:0.5px solid;transition:opacity .15s}
.dwg-btn{color:var(--accent);background:var(--accent-bg);border-color:var(--accent-border)}
.dwg-btn:hover{opacity:.8}
.barcode-btn{color:var(--text-sec);background:var(--surface3);border-color:var(--border-strong);opacity:.55;cursor:not-allowed}
.section-divider{border-top:0.5px solid var(--border);margin-top:12px;padding-top:12px}
.config-text{font-size:12px;color:var(--text-sec);line-height:1.6}
.bom-list{display:flex;flex-direction:column;gap:5px;margin-top:5px}
.bom-row{display:flex;align-items:center;gap:8px;font-size:12px}
.bom-qty{color:var(--text-muted);font-family:var(--mono);min-width:24px}
.bom-desc{color:var(--text-sec);flex:1}
.bom-sku{color:var(--text-muted);font-family:var(--mono);font-size:11px}
.bom-text{font-size:12px;color:var(--text-sec);line-height:1.6;white-space:pre-line}
.empty-state{font-size:13px;color:var(--text-sec);padding:24px 8px;text-align:center}
.route-warning{font-size:11px;color:var(--warning);background:var(--warning-bg);border-radius:var(--radius);padding:6px 10px;margin-top:8px}

.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.progress-header span{font-size:13px;color:var(--text-sec)}
.progress-pct{font-size:22px;font-weight:500;color:var(--text);font-family:var(--mono)}
.progress-track{height:12px;background:var(--bg);border:0.5px solid var(--border);border-radius:6px;overflow:hidden}
.progress-fill{height:100%;border-radius:6px;background:var(--success);transition:width .3s}
.progress-fill.warn{background:var(--warning)}
.progress-fill.over{background:var(--danger)}

.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.action-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:18px 12px;border-radius:12px;border:0.5px solid var(--border-strong);font-size:15px;font-weight:500;cursor:pointer;transition:transform .12s,box-shadow .12s;background:var(--surface2);color:var(--text-sec)}
.action-btn i{font-size:28px}
.action-btn:hover{transform:scale(1.02)}
.action-btn:active{transform:scale(0.96)}
.action-btn.done{background:var(--success-bg);border-color:var(--success-border);color:var(--success)}
.action-btn.working{background:rgba(245,165,36,.1);border-color:rgba(245,165,36,.3);color:var(--warning)}
.action-btn.help{background:var(--danger-bg);border-color:var(--danger-border);color:var(--danger)}
.action-btn.pause{background:var(--surface3);border-color:var(--border-strong);color:var(--text-sec)}
.action-btn.active-state{box-shadow:0 0 0 2px currentColor}
.action-btn:disabled{opacity:.4;cursor:not-allowed}

.section-label{font-size:11px;font-weight:500;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase}
.next-card{background:var(--surface2);border:0.5px solid var(--border);border-radius:12px;padding:12px 14px}
.next-label{font-size:11px;font-weight:500;color:var(--text-muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:8px}
.next-name{font-family:var(--display);font-size:16px;font-weight:500;color:var(--text);margin-bottom:3px}
.next-meta{font-size:12px;color:var(--text-sec);font-family:var(--mono)}
.queue-list{display:flex;flex-direction:column;gap:6px;flex:1;overflow-y:auto}
.queue-item{background:var(--surface2);border:0.5px solid var(--border);border-radius:8px;padding:9px 12px;display:flex;align-items:center;gap:8px;transition:border-color .15s}
.queue-item:hover{border-color:var(--border-strong)}
.queue-num{font-size:11px;color:var(--text-muted);font-family:var(--mono);min-width:14px}
.queue-info{flex:1}
.queue-name{font-size:13px;font-weight:500;color:var(--text)}
.queue-sub{font-size:11px;color:var(--text-muted);font-family:var(--mono)}
.queue-qty{font-size:12px;color:var(--text-sec);font-family:var(--mono)}
.priority-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.p-high{background:var(--danger)}
.p-medium{background:var(--warning)}
.p-low{background:var(--border-strong)}

/* Station switcher */
.station-switcher{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.sw-btn{font-size:11px;padding:4px 10px;border-radius:var(--radius);border:0.5px solid var(--border-strong);background:var(--surface2);color:var(--text-sec);cursor:pointer;transition:all .15s}
.sw-btn:hover,.sw-btn.active{background:var(--accent-bg);color:var(--accent);border-color:var(--accent-border)}

/* Dept selector (nuevo — no existía en el prototipo, necesario porque
   ahora las estaciones se pueblan dinámicamente desde js/data/stations.js
   y son demasiadas para un solo selector plano) */
.dept-select,.station-select{font-family:var(--sans);font-size:12px;background:var(--surface2);color:var(--text);border:0.5px solid var(--border-strong);border-radius:var(--radius);padding:4px 8px}

/* Link al panel de Config (nuevo — compartido por index.html/leader.html/config.html) */
.cfg-nav-link{font-size:12px;color:var(--text-sec);text-decoration:none;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:var(--radius);border:0.5px solid var(--border-strong);transition:all .15s}
.cfg-nav-link:hover{color:var(--accent);border-color:var(--accent-border);background:var(--accent-bg)}
.cfg-nav-link i{font-size:14px}