/* Reset mínimo */
*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* ===== Tema oscuro ===== */
:root[data-theme="dark"] {
  --bg:#0b1016;
  --panel:#111923;
  --muted:#7b8896;
  --text:#e8eef5;
  --accent:#3aa9ff;
  --accent-2:#7bde7a;
  --danger:#ff6b6b;
  --ok:#69d2b1;
  --border:#1c2733;
  --chip:#162232;
  --chip-brd:#243449;
}

/* ===== Tema claro ===== */
:root[data-theme="light"] {
  --bg: #f6f8fb;
  --panel: #ffffff;
  --text: #0b1016;
  --muted: #576174;
  --border: #dfe6ef;
  --chip: #f2f6fb;
  --chip-brd: #d5dfec;
  --accent: #0d6efd;
  --accent-2: #2ea44f;
  --danger: #dc3545;
  --ok: #198754;
}

/* Fondo y texto */
body {
  background: var(--bg);
  color: var(--text);
  font:14px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
}

/* Transiciones */
html, body, .card, .module, .table th, .table td,
.input, .select, .btn {
  transition: background-color .25s ease,
              color .25s ease,
              border-color .25s ease,
              box-shadow .25s ease;
}

/* Topbar */
.topbar{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--border);
  backdrop-filter:saturate(140%) blur(6px);position:sticky;top:0;
  background:rgba(12,17,25,.7)}
:root[data-theme="light"] .topbar {
  background:rgba(255,255,255,.7);border-bottom-color: var(--border);
}
.brand{display:flex;gap:12px;align-items:center}
.logo {
  font-size: 1.6rem;font-weight: 800;padding: 0.4em 0.7em;border-radius: 0.6em;
  background: linear-gradient(90deg, #c0392b 0%, #ffffff 50%, #27ae60 100%);
  color: #000;text-shadow: 0 1px 2px rgba(0,0,0,0.2);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  display: inline-block;user-select: none;
}
.titles h1{margin:0;font-size:18px}
.titles p{margin:0;color:var(--muted);font-size:12px}
.stats{display:flex;gap:10px;flex-wrap:wrap}
.stat{padding:6px 10px;border:1px solid var(--border);
  border-radius:10px;background:var(--chip);color:#cfe7ff}
:root[data-theme="light"] .stat { background:#f7faff;color:#223;border-color:var(--border); }

/* Layout */
.container{max-width:1100px;margin:24px auto;padding:0 16px;display:grid;gap:16px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}
.card h2{margin:0;font-size:16px}
.table-wrap{overflow:auto}

/* Tablas */
.table{width:100%;border-collapse:collapse;table-layout:fixed}
.table th,.table td{padding:10px 12px;border-bottom:1px solid var(--border);
  white-space:nowrap;text-align:left;vertical-align:middle;overflow:hidden;text-overflow:ellipsis}
.table th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.table tr:hover td{background:#0e1722}
:root[data-theme="light"] .table tr:hover td{background:#f3f7fd}

/* Actividad reciente (5 cols) */
#activity td:nth-child(1){white-space:normal;line-height:1.2}          /* Hora en 2 líneas */
#activity th:nth-child(1), #activity td:nth-child(1){
  width:14ch;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace
}
#activity th:nth-child(2), #activity td:nth-child(2){width:14ch;text-align:center}
#activity th:nth-child(3), #activity td:nth-child(3){width:24ch}
#activity th:nth-child(4), #activity td:nth-child(4){width:24ch;text-align:center}
#activity th:nth-child(5), #activity td:nth-child(5){width:auto}
.ago{color:var(--muted);font-size:12px}

/* Nodos enlazados (6 cols) */
#linkednodes th:nth-child(1), #linkednodes td:nth-child(1){width:14ch}
#linkednodes th:nth-child(2), #linkednodes td:nth-child(2){width:6ch;text-align:center}
#linkednodes th:nth-child(3), #linkednodes td:nth-child(3){width:9ch;text-align:center}
#linkednodes th:nth-child(4), #linkednodes td:nth-child(4){width:16ch;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
#linkednodes th:nth-child(5), #linkednodes td:nth-child(5){width:20ch;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
#linkednodes th:nth-child(6), #linkednodes td:nth-child(6){width:20ch;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Peers enlazados (6 cols) */
#peers th:nth-child(1), #peers td:nth-child(1){width:14ch}
#peers th:nth-child(2), #peers td:nth-child(2){width:10ch;text-align:center}
#peers th:nth-child(3), #peers td:nth-child(3){width:9ch;text-align:center}
#peers th:nth-child(4), #peers td:nth-child(4){width:16ch;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
#peers th:nth-child(5), #peers td:nth-child(5){width:20ch;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
#peers th:nth-child(6), #peers td:nth-child(6){width:20ch;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}

/* Módulos */
.modules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:12px}
.module{border:1px solid var(--border);border-radius:14px;padding:12px;background:var(--chip)}
.module-head{display:flex;align-items:center;justify-content:space-between}
.module .badge{display:inline-block;border:1px solid var(--chip-brd);background:#0d1928;border-radius:8px;padding:3px 8px;font-weight:600}
:root[data-theme="light"] .module .badge{background:#fff;border-color:var(--chip-brd)}
.module .desc{margin:8px 0 0;color:#c9d6e2;font-size:13px}
:root[data-theme="light"] .module .desc{color:#334}
.module .meta{margin-top:8px;font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.module .pill{padding:2px 6px;border:1px solid var(--border);border-radius:999px}
.module.active{outline:1px solid var(--accent);box-shadow:0 0 0 3px rgba(58,169,255,.15)}

/* Inputs */
.input,.select,.btn{background:#0f1824;border:1px solid var(--border);color:var(--text);border-radius:10px;padding:8px 10px}
:root[data-theme="light"] .input,
:root[data-theme="light"] .select,
:root[data-theme="light"] .btn { background:#f9fbfe;border-color:var(--border);color:var(--text) }
.btn{cursor:pointer}
.btn[aria-pressed="true"]{outline:2px solid var(--accent)}

/* Footer */
.footer{display:flex;gap:10px;align-items:center;justify-content:center;color:var(--muted);padding:16px}

/* Responsive fino para actividad */
@media (max-width: 720px) {
  #activity th:nth-child(1), #activity td:nth-child(1) { width: 12ch; }
  #activity th:nth-child(3), #activity td:nth-child(3) { width: 12ch; }
}