/* =========================
   NMS – Tema Claro Profesional
   ========================= */

:root{
  --bg:#f5f6f8;
  --panel:#ffffff;
  --card:#ffffff;

  --text:#111111;
  --muted:#5f6b7a;

  --line:#e2e6ea;

  --ok:#22a06b;
  --down:#d92d20;
  --warn:#f79009;

  --hover:#f0f2f5;
}

/* Reset básico */
*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial;
  font-size:13px;
  background:var(--bg);
  color:var(--text);
}

/* Layout */
.app{
  display:flex;
  min-height:100vh;
}

/* Sidebar */
.sidebar{
  width:240px;
  background:var(--panel);
  border-right:1px solid var(--line);
  padding:14px;
}

.brand{
  font-weight:700;
  font-size:14px;
  margin-bottom:14px;
}

.brand .small{
  font-weight:400;
  margin-top:2px;
}

/* Navegación */
.sidebar nav a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  color:var(--muted);
  margin-bottom:4px;
}

.sidebar nav a:hover{
  background:var(--hover);
  color:var(--text);
}

.sidebar nav a.active{
  background:#e9edf2;
  color:var(--text);
  font-weight:600;
}

/* Logout */
.logout{
  margin-top:14px;
}

.logout button{
  width:100%;
  background:transparent;
  border:1px solid var(--line);
  color:var(--muted);
  padding:10px;
  border-radius:10px;
  cursor:pointer;
}

.logout button:hover{
  background:var(--hover);
  color:var(--text);
}

/* Main */
.main{
  flex:1;
  padding:18px;
}

/* Cards */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}

/* Titles */
.h1{
  font-size:15px;
  font-weight:700;
  margin:0 0 6px 0;
}

.small{
  font-size:12px;
  color:var(--muted);
}

/* Grid */
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

/* Tables */
.table{
  width:100%;
  border-collapse:collapse;
}

.table th{
  text-align:left;
  font-size:12px;
  font-weight:600;
  color:#333;
  border-bottom:1px solid var(--line);
  padding:8px 6px;
}

.table td{
  border-bottom:1px solid var(--line);
  padding:8px 6px;
  vertical-align:middle;
}

/* Inputs */
.input,
select,
textarea{
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
  color:var(--text);
}

.input:focus,
select:focus,
textarea:focus{
  outline:none;
  border-color:#94b6ff;
  box-shadow:0 0 0 2px rgba(100,140,255,.15);
}

textarea{
  min-height:70px;
  resize:vertical;
}

/* Buttons */
.btn{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 12px;
  font-size:13px;
  cursor:pointer;
  color:var(--text);
}

.btn:hover{
  background:var(--hover);
}

/* Badges de estado */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
}

/* Puntos de estado */
.dot{
  width:8px;
  height:8px;
  border-radius:50%;
}

.dot.up{ background:var(--ok); }
.dot.down{ background:var(--down); }
.dot.warn{ background:var(--warn); }
.dot.unknown{ background:#9aa4b2; }

/* Toast / mensajes */
.toast{
  margin-bottom:12px;
  padding:10px 12px;
  border-radius:10px;
  background:#f9fafb;
  border:1px solid var(--line);
  font-size:13px;
}

/* Canvas Topología */
#stageWrap{
  background:#f8f9fb;
}