:root {
  --bg: #1a1423;
  --panel: #2a2235;
  --panel2: #332a40;
  --accent: #fc6d26;
  --accent2: #6e49cb;
  --ok: #2da160;
  --fail: #dd2b0e;
  --text: #ececef;
  --muted: #a8a3b3;
  --border: #3d3550;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

header {
  padding: 20px 32px;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
}
.header-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
header h1 { font-size: 1.5rem; }
.subtitle { color: rgba(255,255,255,.85); font-size: .9rem; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.header-actions button {
  padding: 8px 16px; border: 1px solid rgba(255,255,255,.4); border-radius: 8px;
  background: rgba(255,255,255,.12); color: #fff; font-weight: 600; cursor: pointer;
}
.header-actions button:hover { background: rgba(255,255,255,.22); }
.status { font-size: .85rem; color: rgba(255,255,255,.85); }

main { max-width: 1040px; margin: 0 auto; padding: 24px 32px; }

.summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 24px; }
.card { background: var(--panel); border-radius: 10px; padding: 18px; text-align: center; }
.card-value { font-size: 1.8rem; font-weight: 700; }
.card-label { color: var(--muted); font-size: .8rem; margin-top: 4px; }
.card.ok .card-value { color: #4ad38a; }
.card.fail .card-value { color: #ff6b52; }

.runs h2 { font-size: 1.1rem; margin-bottom: 12px; }
.empty { color: var(--muted); text-align: center; padding: 24px; }

/* Tarjeta de ejecucion */
.run-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.run-head {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer;
}
.run-head:hover { background: var(--panel2); }
.run-title { font-weight: 600; }
.run-mr { color: var(--muted); font-weight: 400; }
.run-esc { color: var(--muted); font-size: .85rem; }
.run-date { margin-left: auto; color: var(--muted); font-size: .82rem; }
.run-caret { transition: transform .2s; color: var(--muted); }
.run-card.open .run-caret { transform: rotate(180deg); }

.run-detail { display: none; padding: 0 16px 14px; }
.run-card.open .run-detail { display: block; }
.run-analysis { background: var(--panel2); border-radius: 8px; padding: 10px 12px; font-size: .88rem; margin-bottom: 10px; color: var(--muted); }
.run-analysis strong { color: var(--text); }

.scenario-list { display: flex; flex-direction: column; gap: 4px; }
.scenario-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px;
  cursor: pointer; background: var(--panel2);
}
.scenario-row:hover { outline: 1px solid var(--accent); }
.sc-name { flex: 1; font-size: .9rem; }
.sc-meta { color: var(--muted); font-size: .78rem; }
.scenario-empty { color: var(--muted); font-size: .85rem; padding: 8px; }

.sc-icon { width: 18px; text-align: center; font-weight: 700; }
.sc-icon.passed { color: #4ad38a; }
.sc-icon.failed { color: #ff6b52; }

.badge { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: .78rem; font-weight: 600; }
.badge.passed { background: rgba(45,161,96,.2); color: #4ad38a; }
.badge.failed { background: rgba(221,43,14,.2); color: #ff6b52; }

/* Drawer de detalle */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 10; }
.drawer {
  position: fixed; top: 0; right: 0; width: min(640px, 92vw); height: 100vh;
  background: var(--panel); border-left: 1px solid var(--border); z-index: 11;
  display: flex; flex-direction: column; box-shadow: -8px 0 24px rgba(0,0,0,.4);
}
.drawer.hidden, .drawer-overlay.hidden { display: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.drawer-head h3 { font-size: 1.05rem; }
.drawer-close { background: none; border: none; color: var(--muted); font-size: 1.6rem; cursor: pointer; line-height: 1; }
.drawer-body { padding: 16px 20px; overflow-y: auto; }

.sc-status { margin-bottom: 12px; }

.step { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.step-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--panel2); font-size: .88rem; }

.api { padding: 10px 12px; }
.api-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.method { font-weight: 700; color: var(--accent); font-size: .8rem; }
.url { font-family: monospace; font-size: .8rem; word-break: break-all; flex: 1; }
.status-code { font-weight: 700; font-size: .8rem; padding: 1px 8px; border-radius: 10px; }
.status-code.ok { background: rgba(45,161,96,.2); color: #4ad38a; }
.status-code.fail { background: rgba(221,43,14,.2); color: #ff6b52; }

.kv { margin: 6px 0; }
.kv summary { cursor: pointer; font-size: .82rem; color: var(--muted); padding: 4px 0; }
.kv pre {
  background: #15101d; border: 1px solid var(--border); border-radius: 6px;
  padding: 10px; font-size: .78rem; overflow-x: auto; white-space: pre-wrap; word-break: break-word;
}

.err-box {
  background: rgba(221,43,14,.12); border: 1px solid rgba(221,43,14,.4); border-radius: 6px;
  padding: 8px 10px; font-size: .82rem; color: #ff9b88; margin: 8px 0; white-space: pre-wrap;
}

@media (max-width: 680px) {
  .summary { grid-template-columns: repeat(2,1fr); }
  .run-date { display: none; }
}