/* ===== Base / layout ===== */
:root{--primary:#2c3e50;--secondary:#3498db;--accent:#1abc9c;--light:#f8f9fa;--shadow:0 4px 12px rgba(0,0,0,.08);--sidebar:250px}
html,body{height:100%}
body{background:linear-gradient(135deg,#f5f7fa 0%,#e4edf5 100%);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;min-height:100vh;color:#333}
.mobile-menu{display:none;position:fixed;top:10px;left:10px;z-index:1051;border-radius:50%;background:#2c3e50;color:#fff;border:0;width:40px;height:40px}

/* ===== Sidebar ===== */
body.has-sidebar{padding-left:var(--sidebar)}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:var(--primary);color:#fff;overflow:auto;transition:transform .25s ease}
.sidebar a{display:block;padding:12px 18px;color:#cfd8dc;text-decoration:none}
.sidebar a:hover,.sidebar a.active{background:rgba(0,0,0,.25);color:#fff}
.submenu{display:none;background:rgba(0,0,0,.15)}
.submenu.show{display:block}

@media (max-width:992px){
    body.has-sidebar{padding-left:0}
    .sidebar{transform:translateX(-100%)}
    .sidebar.active{transform:translateX(0)}
    .mobile-menu{display:block}
}

/* ===== Dashboard common ===== */
.dashboard{max-width:1800px;margin:20px 20px 40px auto;background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:22px}
.bg-card{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:16px}
.table thead th{position:sticky;top:0;background:#2c3e50 !important;color:#fff}
.table-responsive{max-height:520px}

/* ===== Summary cards ===== */
.summary-card{box-shadow:var(--shadow);border:none;border-radius:12px;overflow:hidden}
.summary-card .card-body{padding:18px}
.summary-card::before{content:"";display:block;height:4px;background:var(--accent)}

/* ===== Stock box ===== */
.stock{border-radius:12px;box-shadow:var(--shadow);padding:16px;background:#fff}

/* ===== Graph page (related_docs_graph.html) ===== */
.graph-body{margin:0;background:#0f1120;color:#e6e7ee}
.graph-wrap{max-width:1200px;margin:0 auto;padding:18px}
.graph-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.graph-input{background:#161a2a;border:1px solid #262a42;border-radius:10px;color:#e6e7ee;padding:10px 12px;height:40px}
.graph-btn{height:40px;padding:0 14px;border-radius:10px;border:1px solid #262a42;background:#1b1f31;color:#e6e7ee;cursor:pointer}
.graph-panel{width:96%;max-width:1200px;height:80vh;margin:10px auto;border:1px solid #262a42;border-radius:16px;background:#151725}
.legend{display:flex;gap:8px;color:#92a0bb;font-size:12px}
.pill{padding:4px 8px;border:1px solid #262a42;border-radius:999px;background:#17192a}
.dot{display:inline-block;width:10px;height:10px;border-radius:999px;margin-right:6px}
.so{background:#4f83ff}.inv{background:#00b894}.del{background:#e17055}.nc{background:#a29bfe}.pm{background:#fdcb6e}
.node-card{background:#1a1d2b;border:1px solid #2f3a63;border-radius:12px;padding:8px 10px;min-width:180px;max-width:220px;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.node-card .hd{display:flex;gap:8px;margin-bottom:4px;font-weight:600}
.node-card .badge{margin-left:auto;border:1px solid #2f3a63;border-radius:999px;padding:2px 6px;font-size:11px;background:#222b4a}
.kv{display:flex;justify-content:space-between;font-size:12px;margin:3px 0}
.muted{color:#92a0bb}

/* ===== Cajas page ===== */
.cajas-monitor{border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,.08);margin:20px;background:#fff}
.cajas-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid #eee;background:#f8fafb}
.cajas-title h2{margin:0;font-size:1.2rem;color:#2c3e50;display:flex;align-items:center;gap:8px}
.cajas-sub{margin:4px 0 0;font-size:.85rem;color:#7f8c8d}
.cajas-actions{display:flex;align-items:center;gap:10px}
.cajas-select{padding:8px 10px;border:1px solid #e0e0e0;border-radius:6px}
.cajas-btn{background:#fff;border:1px solid #e0e0e0;border-radius:20px;padding:8px 14px;font-size:.85rem;cursor:pointer}
.cajas-btn.active{background:#3498db;border-color:#3498db;color:#fff}
.cajas-refresh{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid #e0e0e0;color:#3498db}
.cajas-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:16px;padding:16px}
.cajas-card{border:1px solid #e0e0e0;border-radius:10px;overflow:hidden;background:#fff}
.cajas-card.alert{border-left:4px solid #e74c3c}
.cajas-card-h{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:#f8fafb;border-bottom:1px solid #eee}
.badge-soft{display:flex;align-items:center;gap:8px;border:1px solid #e0e0e0;border-radius:20px;padding:6px 10px;background:#fff;font-size:.85rem}
.badge-soft.critical{background:#fdecea;border-color:#f5c2c2;color:#d32f2f}
.dot-on{width:10px;height:10px;border-radius:50%;background:#2ecc71}
.dot-off{width:10px;height:10px;border-radius:50%;background:#95a5a6}
.cajas-list{padding:0;margin:0}
.cajas-item{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-top:1px solid #f2f2f2}
.cajas-item .meta{font-size:.8rem;color:#7f8c8d}
.cajas-empty{padding:40px;text-align:center;color:#7f8c8d}
@media (max-width:768px){.cajas-header{flex-direction:column;align-items:flex-start;gap:10px}}