:root{
  --bg: #0b0b0b;
  --panel: #000000;
  --panel2:#0f0f0f;
  --text: #ffffff;
  --muted:#b8b8b8;
  --line:#ff7a00;
  --blue:#1e90ff;
  --green:#00ff88;
  --red:#ff4d4d;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:"Segoe UI", Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* HEADER */
.topbar{
  background:var(--panel);
  height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 35px;
  border-bottom:3px solid var(--line);
  position:sticky;
  top:0;
  z-index:1000;
}
.header-left{ display:flex; flex-direction:column; }
.title-main{ color:var(--text); font-size:22px; font-weight:600; letter-spacing:.5px; }
.title-sub{ color:var(--blue); font-size:14px; margin-top:4px; }
.status-global{ display:flex; gap:25px; align-items:center; }
.status-box{ color:var(--text); font-size:14px; }
.status-online{ color:var(--green); font-weight:600; }
.status-offline{ color:var(--red); font-weight:600; }
.logo{ height:48px; width:auto; }

/* LAYOUT */
.main{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:16px;
  padding:16px;
  max-width:1400px;
  margin:0 auto;
}
.card{
  background:var(--panel2);
  border:1px solid rgba(255,122,0,.35);
  border-radius:14px;
  overflow:hidden;
}
.card-head{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,122,0,.25);
  display:flex;
  gap:10px;
  align-items:center;
}
.search{
  flex:1;
  background:#0a0a0a;
  color:var(--text);
  border:1px solid rgba(255,122,0,.35);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
}
.btn{
  background:#0a0a0a;
  color:var(--text);
  border:1px solid rgba(255,122,0,.35);
  border-radius:10px;
  padding:10px 12px;
  cursor:pointer;
}
.btn:hover{ border-color:rgba(255,122,0,.75); }

.tree{
  padding:10px 12px 14px;
  max-height: calc(100vh - 140px);
  overflow:auto;
}

/* TREE NODES */
.group{
  border:1px solid rgba(255,122,0,.25);
  border-radius:12px;
  margin-bottom:10px;
}
.group > .g-head{
  padding:10px 12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
}
.g-title{
  font-weight:600;
}
.g-meta{
  color:var(--muted);
  font-size:12px;
}
.g-body{ padding:0 12px 12px; display:none; }
.group.open .g-body{ display:block; }

.section{
  margin-top:10px;
  border-top:1px dashed rgba(255,122,0,.25);
  padding-top:10px;
}
.section > .s-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  cursor:pointer;
  user-select:none;
}
.s-head .label{ color:var(--muted); font-size:13px; }
.section .s-body{ margin-top:8px; display:none; }
.section.open .s-body{ display:block; }

.device{
  width:100%;
  text-align:left;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.device:hover{ border-color:rgba(255,122,0,.35); background:#0a0a0a; }
.device.active{ border-color:rgba(255,122,0,.75); background:#0a0a0a; }

.dot{ margin-right:8px; }
.id{ color:var(--muted); font-size:12px; }

/* DETAILS */
.details{
  padding:14px;
}
.kv{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,122,0,.18);
}
.kv .k{ color:var(--muted); font-size:13px; }
.kv .v{ color:var(--text); font-size:14px; }
.badge{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid rgba(255,122,0,.35);
  font-size:12px;
  color:var(--text);
}
.badge.online{ border-color:rgba(0,255,136,.35); }
.badge.offline{ border-color:rgba(255,77,77,.35); }

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}

/* badge server status */
.badge.online{ border-color:rgba(0,255,136,.55) !important; }
.badge.offline{ border-color:rgba(255,77,77,.55) !important; }

/* === PATCH UI v1: indicadores online/offline + font +2px === */
body { font-size: 16px; } /* si estaba 14px, esto es +2 */

.tree, .details, .card, .btn, .search, .g-title, .device { font-size: 16px; }

.dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 10px;
  flex: 0 0 10px;
  box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 10px rgba(255,122,0,.10);
}
.dot.on  { background: #22c55e; } /* verde */
.dot.off { background: #ef4444; } /* rojo */

/* Alineación dentro de cada fila de equipo */
.device > div:first-child{
  display:flex;
  align-items:center;
  gap: 0px;
}

/* DOTS ONLINE/OFFLINE */
.dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  margin-right:10px;
  flex: 0 0 10px;
}
.dot.on{ background:#22c55e; }
.dot.off{ background:#ef4444; }

/* para que el dot quede alineado */
.device > div:first-child{
  display:flex;
  align-items:center;
}

/* FONT +2px solo panel */
.tree, .details, .device, .g-title, .g-meta, .label, .btn, .search {
  font-size: 16px;
}

.btn-drive{
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.12);
  background: rgba(255,255,255,.92);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.btn-drive:hover{
  transform: translateY(-1px);
}

.btn-drive{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration:none;
  font-weight:700;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(0,0,0,.25);
  color: #eaeaea;
}
.btn-drive:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.35);
}

/* ===== LOGIN: mejoras estéticas ===== */
.login-wrap{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card{
  width: min(520px, 92vw);
  border: 1px solid rgba(255,122,0,.45);
  border-radius: 18px;
  padding: 22px 22px 18px;
  background: rgba(0,0,0,.55);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}
.login-head{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom: 16px;
}
.login-title{
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  color: #fff;
}
.login-sub{
  margin-top: 4px;
  color: #b8b8b8;
  font-size: 13px;
}
.login-logo{
  height: 42px;
  width: auto;
  max-width: 220px;
  object-fit: contain;
}
.login-card input{
  width: 100%;
  margin: 10px 0;
}
.login-card button{
  width: 100%;
  margin-top: 8px;
}