/* ══════ WORKSPACE ══════ */
.workspace { display: flex; flex: 1; overflow: hidden; }

/* ══════ SIDEBAR ══════ */
.sidebar { width: 300px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.sidebar-header { padding: .75rem 1rem .5rem; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sidebar-header h2 { font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.sidebar-header .conteo { font-size: .72rem; color: var(--muted); margin-top: .15rem; }

.filtros { padding: .6rem .8rem; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: .4rem; flex-shrink: 0; }
.filtros input, .filtros select { background: var(--bg); border: 1px solid var(--border); color: var(--text); border-radius: 6px; font-size: .78rem; padding: .35rem .5rem; outline: none; }
.filtros input:focus, .filtros select:focus { border-color: var(--accent); }
.filtros .fila { display: flex; gap: .35rem; }
.filtros .fila > * { flex: 1; }
.btn-limpiar-filtros { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 6px; font-size: .72rem; padding: .35rem; cursor: pointer; }
.btn-limpiar-filtros:hover { color: #fff; border-color: var(--accent); }

.alerta-global { background: rgba(248,81,73,.1); border-bottom: 1px solid rgba(248,81,73,.3); padding: .5rem .8rem; font-size: .75rem; color: var(--offline); display: flex; align-items: center; gap: .4rem; flex-shrink: 0; }
.alerta-global.oculto { display: none; }

/* ══════ LISTA DE DISPOSITIVOS ══════ */
.device-list { overflow-y: auto; flex: 1; }
.device-item { padding: .7rem 1rem; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .1s; position: relative; }
.device-item:hover  { background: rgba(88,166,255,.07); }
.device-item.active { background: rgba(88,166,255,.12); border-left: 2px solid var(--accent); }
.device-name { font-size: .82rem; font-weight: 500; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 3.5rem; }
.device-model { font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.device-meta { font-size: .68rem; color: var(--muted); margin-top: .2rem; }
.device-status { display: flex; align-items: center; gap: .35rem; margin-top: .35rem; }
.dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.dot.online  { background: var(--online); }
.dot.warn    { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
.dot.offline { background: var(--offline); }
.device-time { font-size: .68rem; color: var(--muted); }

.badge-msg { position: absolute; top: .6rem; right: .75rem; background: var(--offline); color: #fff; font-size: .65rem; font-weight: 600; border-radius: 10px; padding: .1rem .4rem; min-width: 18px; text-align: center; }
.badge-alerta { position: absolute; top: .6rem; right: 2.2rem; background: var(--warn); color: #0D1117; font-size: .65rem; font-weight: 700; border-radius: 10px; padding: .1rem .4rem; min-width: 18px; text-align: center; }

.btn-del-device { position: absolute; top: .55rem; right: .5rem; background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: .95rem; line-height: 1; padding: .15rem .3rem; border-radius: 4px; display: none; }
.device-item:hover .btn-del-device { display: inline-block; }
.btn-del-device:hover { color: var(--offline); background: rgba(248,81,73,.12); }


/* Botón que despliega los filtros (solo móvil; el d-md-none lo oculta en pantallas grandes) */
.btn-filtros-toggle { background: transparent; color: var(--accent); border: 1px solid var(--accent); border-radius: 6px; font-size: .75rem; padding: .3rem .7rem; cursor: pointer; white-space: nowrap; }
.btn-filtros-toggle[aria-expanded="true"] { background: rgba(88,166,255,.12); }