:root {
  --bg: #0b1120;
  --surface: #131c30;
  --surface-2: #1a2540;
  --border: #23304d;
  --text: #e6ecf7;
  --muted: #93a3bd;
  --primary: #38bdf8;
  --accent: #818cf8;
  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  --purple: #c084fc;
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  background: var(--bg); color: var(--text); line-height:1.5;
}
a { color: var(--primary); text-decoration:none; }
a:hover { text-decoration:underline; }
code { font-family: 'JetBrains Mono', Consolas, monospace; background:rgba(255,255,255,.06);
       padding:1px 5px; border-radius:4px; font-size:.85em; }

/* Topbar */
.topbar {
  display:flex; justify-content:space-between; align-items:center;
  padding:14px 24px; background:linear-gradient(180deg,#0e1626,#0a0f1c);
  border-bottom:1px solid var(--border);
}
.brand { display:flex; align-items:center; gap:12px; }
.logo { font-size:1.6rem; color:var(--primary); }
.brand-title { font-weight:700; font-size:1.1rem; }
.brand-sub { color:var(--muted); font-size:.78rem; }
.topbar-right { display:flex; align-items:center; gap:14px; }
.meta { color:var(--muted); font-size:.8rem; }

.btn {
  border:none; border-radius:8px; padding:9px 16px; font-size:.85rem; font-weight:600;
  cursor:pointer; background:var(--surface-2); color:var(--text); border:1px solid var(--border);
}
.btn:hover { border-color:var(--primary); }
.btn-refresh { background:linear-gradient(135deg,#0ea5e9,#6366f1); border:none; color:#fff; }
.btn-refresh:hover { filter:brightness(1.1); }
.btn-sm { padding:5px 10px; font-size:.78rem; }

/* Nav */
.nav {
  display:flex; gap:4px; padding:0 16px; background:var(--surface);
  border-bottom:1px solid var(--border); overflow-x:auto;
}
.nav a {
  padding:12px 16px; color:var(--muted); font-size:.88rem; font-weight:500;
  border-bottom:2px solid transparent; white-space:nowrap;
}
.nav a:hover { color:var(--text); text-decoration:none; }
.nav a.active { color:var(--primary); border-bottom-color:var(--primary); }

/* Content */
.content { padding:24px; max-width:1500px; margin:0 auto; }
h1 { font-size:1.5rem; margin-bottom:4px; }
h2 { font-size:1.1rem; margin:24px 0 12px; color:#cbd5e1; }
h3 { font-size:.95rem; margin:14px 0 8px; color:var(--muted); }
.subtitle { color:var(--muted); margin-bottom:20px; font-size:.9rem; }

/* Cards */
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; }
.card {
  background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px;
}
.card .kpi { font-size:2rem; font-weight:700; }
.card .kpi-label { color:var(--muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; }
.card.warn { border-color:rgba(248,113,113,.4); }
.card.warn .kpi { color:var(--red); }
.card.ok .kpi { color:var(--green); }

/* Tables */
table { width:100%; border-collapse:collapse; background:var(--surface);
        border:1px solid var(--border); border-radius:10px; overflow:hidden; }
th, td { padding:9px 12px; text-align:left; font-size:.85rem; border-bottom:1px solid var(--border); }
th { background:var(--surface-2); color:var(--muted); font-weight:600; text-transform:uppercase;
     font-size:.72rem; letter-spacing:.04em; }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,255,255,.02); }
td.num, th.num { text-align:right; font-family:'JetBrains Mono',monospace; }

/* Badges */
.badge { display:inline-block; padding:2px 9px; border-radius:999px; font-size:.72rem; font-weight:600; }
.st-done { background:rgba(52,211,153,.15); color:var(--green); border:1px solid rgba(52,211,153,.35); }
.st-integration { background:rgba(56,189,248,.15); color:var(--primary); border:1px solid rgba(56,189,248,.35); }
.st-qa { background:rgba(192,132,252,.15); color:var(--purple); border:1px solid rgba(192,132,252,.35); }
.st-rollback { background:rgba(251,191,36,.15); color:var(--amber); border:1px solid rgba(251,191,36,.35); }
.st-hold { background:rgba(148,163,184,.15); color:var(--muted); border:1px solid rgba(148,163,184,.35); }
.st-default { background:rgba(148,163,184,.1); color:var(--muted); border:1px solid var(--border); }
.badge-fn { background:rgba(52,211,153,.12); color:var(--green); border:1px solid rgba(52,211,153,.3); }
.badge-nf { background:rgba(251,191,36,.12); color:var(--amber); border:1px solid rgba(251,191,36,.3); }
.badge-order { background:rgba(129,140,248,.15); color:var(--accent); border:1px solid rgba(129,140,248,.35); }
.badge-rank { background:rgba(56,189,248,.12); color:var(--primary); border:1px solid rgba(56,189,248,.3);
              font-family:'JetBrains Mono',monospace; }
.badge-risk { background:rgba(248,113,113,.18); color:var(--red); border:1px solid rgba(248,113,113,.4); }

/* Prioridad / criticidad del ticket (Jira) */
.prio-blocker  { background:rgba(220,38,38,.22);  color:#fca5a5; border:1px solid rgba(220,38,38,.55); font-weight:700; }
.prio-critical { background:rgba(248,113,113,.18); color:var(--red);   border:1px solid rgba(248,113,113,.45); }
.prio-high     { background:rgba(251,146,60,.16);  color:#fb923c;      border:1px solid rgba(251,146,60,.4); }
.prio-medium   { background:rgba(56,189,248,.14);  color:var(--primary); border:1px solid rgba(56,189,248,.35); }
.prio-low      { background:rgba(148,163,184,.14); color:var(--muted); border:1px solid rgba(148,163,184,.35); }
.prio-trivial  { background:rgba(148,163,184,.1);  color:var(--muted); border:1px solid var(--border); }
.prio-default  { background:rgba(148,163,184,.1);  color:var(--muted); border:1px solid var(--border); }

/* Tipo de ticket (Jira issuetype) */
.badge-type { background:rgba(129,140,248,.12); color:var(--accent); border:1px solid rgba(129,140,248,.3); }

/* "¿Puede salir a PROD?" (Release Note x Ventana) */
.rel-box { border:1px solid var(--border); border-radius:10px; padding:10px 12px;
  background:var(--surface, rgba(148,163,184,.04)); }
.rel-list { margin-top:4px; display:flex; flex-direction:column; gap:3px; }
.rel-item { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:.82rem; }
.rel-item .summary { color:var(--muted); }

/* Flash */
.flash { padding:10px 16px; border-radius:8px; margin-bottom:14px; font-size:.88rem; }
.flash-ok { background:rgba(52,211,153,.12); border:1px solid rgba(52,211,153,.35); color:var(--green); }
.flash-error { background:rgba(248,113,113,.12); border:1px solid rgba(248,113,113,.35); color:var(--red); }

/* Toolbar / filters */
.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }
.toolbar select, .toolbar input {
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:7px 10px; font-size:.85rem;
}
.seg { display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.seg a { padding:7px 14px; color:var(--muted); font-size:.85rem; }
.seg a.active { background:var(--primary); color:#04121f; font-weight:600; }
.seg a:hover { text-decoration:none; }

/* Split columns */
.split { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
@media (max-width:1000px){ .split { grid-template-columns:1fr; } }

.col-head { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.pill { font-size:.72rem; padding:2px 10px; border-radius:999px; }
.pill-fn { background:rgba(52,211,153,.15); color:var(--green); }
.pill-nf { background:rgba(251,191,36,.15); color:var(--amber); }

.muted { color:var(--muted); }
.small { font-size:.8rem; }
.right { text-align:right; }
.nowrap { white-space:nowrap; }
.mono { font-family:'JetBrains Mono',monospace; }
.section-box { background:var(--surface); border:1px solid var(--border); border-radius:12px;
               padding:18px; margin-bottom:18px; }
.order-flow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:10px 0; }
.order-step { padding:8px 14px; border-radius:10px; border:1px solid var(--border);
              background:var(--surface-2); font-size:.85rem; }
.order-step.blocked { border-color:rgba(248,113,113,.5); }
.order-step.ready { border-color:rgba(52,211,153,.5); }
.arrow { color:var(--muted); }
.bar { height:8px; background:var(--surface-2); border-radius:4px; overflow:hidden; }
.bar > span { display:block; height:100%; background:var(--green); }

/* Usuarios y permisos / login */
.section-box input[type=text], .section-box input[type=password], .section-box input[type=email] {
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-radius:8px; padding:7px 10px; font-size:.85rem;
}
.perm-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:6px 14px; }
.perm { font-size:.85rem; display:flex; align-items:center; gap:6px; cursor:pointer; }
.user-card { border:1px solid var(--border); border-radius:10px; padding:14px; margin-top:12px; background:var(--surface-2); }
.user-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.btn-danger { border-color:rgba(248,113,113,.5); color:var(--red); }
.btn-danger:hover { border-color:var(--red); }