/* OV Studio - tema negro profundo y verde esmeralda (sin azul). Se carga después de styles.css. */
:root {
  --ov-bg: #040706;
  --ov-panel: #08100d;
  --ov-panel-2: #0c1713;
  --ov-line: #14382b;
  --ov-line-2: #1d5a43;
  --ov-green: #10e08a;
  --ov-green-dim: #0a8f5a;
  --ov-text: #e6f5ee;
  --ov-muted: #7fa595;
  --ov-warn: #e0b020;
  --ov-bad: #e5534b;
  color-scheme: dark;
  /* Sustituye las variables azules de styles.css por la paleta negro/verde */
  --bg: #040706;
  --bg-elev: #07100c;
  --panel: #08100d;
  --panel2: #0c1713;
  --panel3: #112019;
  --border: #14382b;
  --border-strong: #1d5a43;
  --text: #e6f5ee;
  --muted: #7fa595;
  --accent: #10e08a;
  --accent-strong: #0bbf74;
  --accent-bg: rgba(16, 224, 138, .12);
  --accent-glow: rgba(16, 224, 138, .14);
  --ok: #10e08a;
  --warn: #e0b020;
  --err: #e5534b;
  --violet: #0a8f5a;
}
html, body {
  background: radial-gradient(1200px 600px at 100% 100%, rgba(16, 224, 138, .08), transparent 60%), var(--ov-bg);
  color: var(--ov-text);
  font-family: "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  font-size: 14px;
}
.muted { color: var(--ov-muted); }
.topbar {
  background: linear-gradient(180deg, #07130f, #050a08);
  border-bottom: 1px solid var(--ov-line);
  box-shadow: 0 1px 24px rgba(16, 224, 138, .08);
  min-height: 52px;
}
.brand { color: var(--ov-green); font-weight: 800; font-size: 20px; letter-spacing: .3px; text-shadow: 0 0 14px rgba(16, 224, 138, .45); }
.navbtn {
  background: transparent; color: var(--ov-muted); border: 1px solid transparent;
  border-radius: 10px; padding: 8px 14px; font-weight: 600; cursor: pointer;
}
.navbtn:hover { color: var(--ov-text); background: var(--ov-panel-2); }
.navbtn[aria-current="page"] {
  color: var(--ov-green); background: rgba(16, 224, 138, .1);
  border-color: var(--ov-line-2); box-shadow: 0 0 14px rgba(16, 224, 138, .25);
}
.conn { color: var(--ov-green); border: 1px solid var(--ov-line-2); border-radius: 999px; padding: 3px 12px; background: rgba(16, 224, 138, .08); }
.sidebar { background: var(--ov-panel); border-right: 1px solid var(--ov-line); }
.side-head h2 { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ov-muted); }
.btn {
  background: var(--ov-panel-2); color: var(--ov-text); border: 1px solid var(--ov-line);
  border-radius: 10px; padding: 7px 14px; cursor: pointer; font-weight: 600;
}
.btn:hover:not(:disabled) { border-color: var(--ov-green-dim); box-shadow: 0 0 10px rgba(16, 224, 138, .2); }
.btn:focus-visible, .navbtn:focus-visible { outline: 2px solid var(--ov-green); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, #14f09a, #0bbf74); color: #02130b; border-color: #14f09a; box-shadow: 0 0 16px rgba(16, 224, 138, .35); }
.btn.small { padding: 4px 10px; font-size: 12px; }
.main, .view, .editor-area, .panel, .tabs, .statusbar { background: var(--ov-bg); border-color: var(--ov-line); }
.statusbar { color: var(--ov-muted); border-top: 1px solid var(--ov-line); }
.card, .stat, .dropzone {
  background: linear-gradient(180deg, var(--ov-panel-2), var(--ov-panel));
  border: 1px solid var(--ov-line); border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(16, 224, 138, .03), 0 8px 24px rgba(0, 0, 0, .4);
}
.card h2, .card h3 { color: var(--ov-text); }
.stat b { color: var(--ov-green); font-size: 28px; }
.tag { display: inline-block; border: 1px solid var(--ov-line); color: var(--ov-muted); border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.tag.ok { color: var(--ov-green); border-color: var(--ov-line-2); background: rgba(16, 224, 138, .08); }
.badge { border-radius: 999px; padding: 3px 12px; font-size: 12px; font-weight: 700; border: 1px solid var(--ov-line); }
.badge.s-running { color: var(--ov-warn); border-color: rgba(224, 176, 32, .5); background: rgba(224, 176, 32, .08); }
.badge.s-queued { color: var(--ov-muted); }
.badge.s-done { color: var(--ov-green); border-color: var(--ov-line-2); }
.badge.s-failed { color: var(--ov-bad); border-color: rgba(229, 83, 75, .5); }
input, select, textarea { background: #050d0a; color: var(--ov-text); border: 1px solid var(--ov-line); border-radius: 8px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ov-green); box-shadow: 0 0 0 2px rgba(16, 224, 138, .2); }
.error { color: var(--ov-bad); }
.step-n { background: rgba(16, 224, 138, .12); color: var(--ov-green); border: 1px solid var(--ov-line-2); }

/* Elementos nuevos del panel del jefe */
.boss-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; padding: 0 0 16px; }
.meter { height: 8px; border-radius: 999px; background: #0a1a14; border: 1px solid var(--ov-line); overflow: hidden; }
.meter > i { display: block; height: 100%; background: linear-gradient(90deg, var(--ov-green-dim), var(--ov-green)); box-shadow: 0 0 10px rgba(16, 224, 138, .6); }
.meter.pending > i { width: 0; }
.qrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--ov-line); align-items: center; }
.qrow:last-child { border-bottom: 0; }
.qrow .meter { grid-column: 1 / -1; }
.meter.full > i { width: 100%; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.gallery .ph { aspect-ratio: 4 / 3; border: 1px dashed var(--ov-line-2); border-radius: 12px; display: grid; place-items: center; color: var(--ov-muted); font-size: 12px; text-align: center; padding: 8px; background: rgba(16, 224, 138, .03); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid var(--ov-line); }
.agent-list { list-style: none; margin: 8px 0 0; padding: 0; }
.agent-row { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ov-line); }
.agent-row:last-child { border-bottom: 0; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ov-green); box-shadow: 0 0 8px rgba(16, 224, 138, .7); }
.dot.off { background: #24352e; box-shadow: none; border: 1px solid var(--ov-line-2); }
@media (max-width: 640px) { .navbtn { padding: 6px 8px; } .boss-grid { grid-template-columns: 1fr; } }

/* Colores azules escritos directamente en styles.css */
.brand { background: none; -webkit-background-clip: border-box; background-clip: border-box; }
.statusbar { background: #06130d; color: var(--ov-muted); border-top: 1px solid var(--ov-line-2); }
#status-msg[data-kind="ok"] { color: var(--ov-green); }
.btn.primary { color: #02130b; }
.btn.primary:hover:not(:disabled) { background: #10e08a; border-color: #10e08a; }
.ta::selection { background: rgba(16, 224, 138, .3); }
.t-keyword { color: #10e08a; }
.t-string { color: #a8e6c3; }
.t-comment { color: #5f8576; font-style: italic; }
.t-number { color: #e0b020; }
.t-tag { color: #5be3a8; }
.row.selected { background: rgba(16, 224, 138, .12); box-shadow: inset 2px 0 0 var(--ov-green); }
.tab.active { background: var(--ov-bg); box-shadow: inset 0 2px 0 var(--ov-green); }
.ptab[aria-selected="true"] { color: var(--ov-green); box-shadow: inset 0 -2px 0 var(--ov-green); }
.resizer:hover, .resizer.dragging { background: var(--ov-green); }