/* Semáforo de alertas — hoja de estilos
   Identidad visual Bytelink SAS (Manual de Identidad Visual):
   - Colores primarios: #00B3FF, #006DFF, #0022AF, #170041. Degradado #00B3FF → #006DFF.
   - Colores secundarios (grises): #F6F9FB, #EDF2F5, #D1D6DB, #B5BAC1, #9A9FA8, #7E838E,
     #626874, #464C5A, #2A3040, #161B27.
   - Tipografía: Poppins (Light / Regular / Medium / Semibold), tracking -25 (-0.025em).
   - Logotipo: variante clara sobre fondos oscuros y variante oscura sobre fondos claros;
     isotipo solo en tamaños pequeños; área de respeto 2X; sin sombras ni rotaciones.
   Los colores semánticos del semáforo (verde/amarillo/rojo/apagado) son independientes
   del acento de marca. Oscuro por defecto; versión clara equivalente. */
:root {
  --bl-cyan: #00B3FF;
  --bl-blue: #006DFF;
  --bl-navy: #0022AF;
  --bl-violet: #170041;
  --bl-gradient: linear-gradient(90deg, #00B3FF 0%, #006DFF 100%);

  --bg: #161B27;
  --bg-2: #170041;
  --panel: #1E2334;
  --panel-2: #2A3040;
  --border: #363D4D;
  --fg: #F6F9FB;
  --heading: #FFFFFF;
  --muted: #9A9FA8;
  --accent: #00B3FF;
  --accent-2: #006DFF;
  --accent-fg: #FFFFFF;
  --danger: #FF6B6B;
  --lamp-off: #2A3040;
  --lamp-off-ring: #464C5A;
  --lvl0: #7E838E;
  --lvl1: #31D17C;
  --lvl2: #F7C948;
  --lvl3: #FF4D57;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  --logo-url: url("img/bytelink-logo-light.svg");
  --topbar-fg: #FFFFFF;
  --topbar-muted: #B5BAC1;
  --topbar-accent: #00B3FF;
  --topbar-hover: rgba(255, 255, 255, 0.08);
  --topbar-border: rgba(255, 255, 255, 0.14);
  --font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F6F9FB; --bg-2: #FFFFFF; --panel: #FFFFFF; --panel-2: #EDF2F5; --border: #D1D6DB;
    --fg: #161B27; --heading: #170041; --muted: #7E838E; --accent: #006DFF; --accent-2: #00B3FF; --accent-fg: #FFFFFF; --danger: #C62F3B;
    --lamp-off: #D1D6DB; --lamp-off-ring: #B5BAC1;
    --lvl0: #7E838E; --lvl1: #1AA85F; --lvl2: #D8A500; --lvl3: #E03440;
    --shadow: 0 10px 30px rgba(23, 0, 65, 0.10);
    --logo-url: url("img/bytelink-logo-dark.svg");
    --topbar-fg: #170041; --topbar-muted: #7E838E; --topbar-accent: #006DFF; --topbar-hover: #EDF2F5; --topbar-border: #D1D6DB;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F6F9FB; --bg-2: #FFFFFF; --panel: #FFFFFF; --panel-2: #EDF2F5; --border: #D1D6DB;
  --fg: #161B27; --heading: #170041; --muted: #7E838E; --accent: #006DFF; --accent-2: #00B3FF; --accent-fg: #FFFFFF; --danger: #C62F3B;
  --lamp-off: #D1D6DB; --lamp-off-ring: #B5BAC1;
  --lvl0: #7E838E; --lvl1: #1AA85F; --lvl2: #D8A500; --lvl3: #E03440;
  --shadow: 0 10px 30px rgba(23, 0, 65, 0.10);
  --logo-url: url("img/bytelink-logo-dark.svg");
  --topbar-fg: #170041; --topbar-muted: #7E838E; --topbar-accent: #006DFF; --topbar-hover: #EDF2F5; --topbar-border: #D1D6DB;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
[hidden] { display: none !important; }
h1, h2, h3 { font-family: var(--font-display); margin: 0; text-wrap: balance; letter-spacing: -0.025em; color: var(--heading); font-weight: 600; }
h2 { font-size: 19px; }
h3 { font-size: 15px; }
.section-head h2::before, .section-head h3::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--bl-gradient); margin-right: 9px; vertical-align: 0; }
.mono { font-family: var(--font-mono); font-size: 12.5px; }
.muted { color: var(--muted); }
.tabular { font-variant-numeric: tabular-nums; }

/* ----- barra superior ---------------------------------------------------- */
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: var(--bg-2); border-bottom: 1px solid var(--border);
  border-image: var(--bl-gradient) 1;
  padding: 10px 20px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-logo { display: block; width: 118px; height: 32px; flex: none; background: var(--logo-url) left center / contain no-repeat; }
.brand .sep { width: 1px; height: 28px; background: var(--border); flex: none; }
.topbar .brand .sep { background: var(--topbar-border); }
.brand h1 { font-size: 15px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.15; }
.brand small { display: block; font-family: var(--font-body); font-size: 11px; color: var(--muted); letter-spacing: 0.02em; font-weight: 400; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav button {
  background: transparent; border: 1px solid transparent; border-radius: 8px;
  padding: 7px 12px; color: var(--muted); cursor: pointer; font-weight: 500;
}
.topbar .nav button { color: var(--topbar-muted); }
.topbar .nav button:hover { color: var(--topbar-fg); background: var(--topbar-hover); }
.topbar .nav button[aria-selected="true"] { color: var(--topbar-accent); background: var(--topbar-hover); border-color: var(--topbar-border); font-weight: 600; }
.topbar .pill, .topbar .btn { background: var(--topbar-hover); border-color: var(--topbar-border); color: var(--topbar-fg); }
.topbar .pill { color: var(--topbar-muted); }
.topbar .brand h1 { color: var(--topbar-fg); }
.topbar .brand small { color: var(--topbar-muted); }
.nav button .count { margin-left: 6px; font-size: 11px; background: var(--lvl3); color: #fff; border-radius: 999px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.reader { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--border); background: var(--panel); border-radius: 999px;
  padding: 5px 11px; font-size: 12px; color: var(--muted); white-space: nowrap;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lvl0); flex: none; }
.pill.ok .dot { background: var(--lvl1); box-shadow: 0 0 8px var(--lvl1); }
.pill.err .dot { background: var(--lvl3); box-shadow: 0 0 8px var(--lvl3); }
.pill.busy .dot { background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: blink 1s infinite; }
.pill.warn .dot { background: var(--lvl2); }
@keyframes blink { 50% { opacity: 0.25; } }

/* ----- disposición general ---------------------------------------------- */
.page { padding-block: 22px 60px; padding-inline: 20px; max-width: 1400px; margin: 0 auto; }
.view[hidden] { display: none; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.section-head p { margin: 2px 0 0; color: var(--muted); }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 12px; cursor: pointer; font-weight: 500; color: var(--fg); line-height: 1.2;
}
.btn:hover { border-color: var(--accent); }
.btn:focus-visible, .nav button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--bl-gradient); color: #FFFFFF; border-color: transparent; }
.btn.primary:hover { filter: brightness(1.06); border-color: transparent; }
.btn.danger { color: var(--danger); }
.btn.sm { padding: 4px 9px; font-size: 12.5px; }
.btn:disabled { opacity: 0.55; cursor: progress; }

/* ----- resumen ----------------------------------------------------------- */
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.stat { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; }
.stat .swatch { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.stat .n { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: var(--heading); font-variant-numeric: tabular-nums; line-height: 1; }
.stat .l { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }

/* ----- tarjetas de semáforo ---------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 16px; display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: start;
  position: relative; overflow: hidden; min-width: 0;
}
.card.lvl3 { border-color: color-mix(in srgb, var(--lvl3) 55%, var(--border)); }
.card.lvl2 { border-color: color-mix(in srgb, var(--lvl2) 45%, var(--border)); }
.card .body { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.card .name { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.025em; color: var(--heading); line-height: 1.2; overflow-wrap: anywhere; }
.card .code { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); letter-spacing: 0.04em; }
.card .state { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.card .state .label { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.card .state.l0 .label { color: var(--lvl0); } .card .state.l1 .label { color: var(--lvl1); }
.card .state.l2 .label { color: var(--lvl2); } .card .state.l3 .label { color: var(--lvl3); }
.card .meta { font-size: 12px; display: grid; gap: 2px; }
.card .meta b { font-weight: 500; color: var(--fg); overflow-wrap: anywhere; }
.card .actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

.tl { width: 64px; background: #0a0d14; border-radius: 16px; padding: 8px; display: grid; gap: 6px; justify-items: center; border: 1px solid #000; box-shadow: inset 0 1px 0 rgba(255,255,255,0.08); }
.tl .lamp { width: 44px; height: 44px; border-radius: 50%; background: var(--lamp-off); box-shadow: inset 0 3px 8px rgba(0,0,0,0.55), 0 0 0 2px var(--lamp-off-ring); transition: background 0.35s, box-shadow 0.35s; }
.tl .lamp.on.r { background: radial-gradient(circle at 35% 35%, #ffb3b6, var(--lvl3) 60%, #a30d16); box-shadow: 0 0 18px 4px var(--lvl3), 0 0 0 2px var(--lamp-off-ring); }
.tl .lamp.on.y { background: radial-gradient(circle at 35% 35%, #fff2b8, var(--lvl2) 60%, #a37a00); box-shadow: 0 0 18px 4px var(--lvl2), 0 0 0 2px var(--lamp-off-ring); }
.tl .lamp.on.g { background: radial-gradient(circle at 35% 35%, #c2ffdf, var(--lvl1) 60%, #0d7a3f); box-shadow: 0 0 18px 4px var(--lvl1), 0 0 0 2px var(--lamp-off-ring); }
.tl.off { opacity: 0.85; }
.tl.alarm .lamp.on.r { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 6px 1px var(--lvl3), 0 0 0 2px var(--lamp-off-ring); } }
@media (prefers-reduced-motion: reduce) { .tl.alarm .lamp.on.r, .pill.busy .dot { animation: none; } }

.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; white-space: nowrap; }
.badge .swatch { width: 8px; height: 8px; border-radius: 50%; }
.badge.l0 { background: color-mix(in srgb, var(--lvl0) 18%, transparent); color: var(--fg); }
.badge.l1 { background: color-mix(in srgb, var(--lvl1) 18%, transparent); color: var(--lvl1); }
.badge.l2 { background: color-mix(in srgb, var(--lvl2) 20%, transparent); color: var(--lvl2); }
.badge.l3 { background: color-mix(in srgb, var(--lvl3) 18%, transparent); color: var(--lvl3); }
.badge.s-ok { background: color-mix(in srgb, var(--lvl1) 14%, transparent); color: var(--fg); }
.badge.s-manual { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--fg); }
.badge.s-unidentified_site, .badge.s-unidentified_level { background: color-mix(in srgb, var(--lvl2) 18%, transparent); color: var(--fg); }
.badge.s-ignored { background: var(--panel-2); color: var(--muted); }

/* ----- paneles y tablas -------------------------------------------------- */
.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px; min-width: 0; }
.panel + .panel { margin-top: 16px; }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 16px; align-items: start; }
.two-col.even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 900px) { .two-col, .two-col.even { grid-template-columns: 1fr; } }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); font-weight: 500; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:hover { background: var(--panel-2); }
td.subject { max-width: 420px; overflow-wrap: anywhere; }
td.nowrap { white-space: nowrap; }
.empty { padding: 28px; text-align: center; color: var(--muted); }

/* ----- formularios ------------------------------------------------------- */
.form { display: grid; gap: 12px; }
.form .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.field { display: grid; gap: 4px; min-width: 0; }
.field label { font-size: 12px; color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea {
  background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; width: 100%; min-width: 0;
}
.field textarea { min-height: 70px; resize: vertical; }
.field .hint { font-size: 11.5px; color: var(--muted); }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.result { border-radius: 8px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--border); font-size: 13px; }
.result.ok { border-color: color-mix(in srgb, var(--lvl1) 60%, var(--border)); }
.result.err { border-color: color-mix(in srgb, var(--lvl3) 60%, var(--border)); }
.filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 12px; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; color: var(--muted); font-size: 12.5px; flex-wrap: wrap; }

/* ----- modal ------------------------------------------------------------- */
.modal-backdrop { position: fixed; inset: 0; background: rgba(5, 8, 16, 0.6); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
.modal { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 20px; width: min(640px, 100%); max-height: calc(100% - 32px); overflow: auto; box-shadow: var(--shadow); }
.modal h2 { margin-bottom: 12px; }
.level-picker { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.level-picker button { border: 1px solid var(--border); background: var(--bg-2); border-radius: 10px; padding: 12px 6px; cursor: pointer; display: grid; gap: 6px; justify-items: center; font-weight: 600; font-size: 12px; }
.level-picker button .swatch { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 2px 5px rgba(0,0,0,0.3); }
.level-picker button[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--bg-2)); }
.swatch.l0 { background: var(--lvl0); } .swatch.l1 { background: var(--lvl1); } .swatch.l2 { background: var(--lvl2); } .swatch.l3 { background: var(--lvl3); }

/* ----- notificaciones ---------------------------------------------------- */
.toasts { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; z-index: 60; max-width: min(380px, calc(100vw - 32px)); }
.toast { background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 10px; padding: 10px 14px; box-shadow: var(--shadow); font-size: 13px; }
.toast.l3 { border-left-color: var(--lvl3); } .toast.l2 { border-left-color: var(--lvl2); } .toast.l1 { border-left-color: var(--lvl1); } .toast.l0 { border-left-color: var(--lvl0); }
.toast.err { border-left-color: var(--danger); }
.toast b { display: block; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

/* ----- banda de demostración -------------------------------------------- */
.demo-bar { background: color-mix(in srgb, var(--accent) 14%, var(--bg-2)); border-bottom: 1px solid var(--border); padding: 8px 20px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.demo-bar input { flex: 1 1 240px; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; min-width: 0; }
.demo-bar .check { white-space: nowrap; }
.demo-bar select { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; max-width: 300px; }
.demo-bar .tag { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; color: var(--accent); }

@media (max-width: 560px) {
  .topbar { padding-inline: 16px; }
  .page { padding-inline: 16px; }
  .card { grid-template-columns: 56px 1fr; }
  .tl { width: 56px; } .tl .lamp { width: 38px; height: 38px; }
}

/* ----- inicio de sesión ------------------------------------------------- */
/* Portada del manual: degradado violeta con trazos finos en cian. */
.login { position: relative; overflow: hidden; min-height: 100%; display: flex; align-items: center; justify-content: center; padding-block: 40px; padding-inline: 16px; background: linear-gradient(135deg, #2A0A6E 0%, #170041 45%, #0B0030 100%); color-scheme: dark; }
.login::before, .login::after { content: ""; position: absolute; border: 1px solid rgba(0, 179, 255, 0.45); pointer-events: none; }
.login::before { width: 60vw; height: 60vw; max-width: 700px; max-height: 700px; left: -22vw; top: -30vw; border-radius: 0 0 60% 0; }
.login::after { width: 180px; height: 260px; right: 12vw; bottom: -120px; }
.login-card { position: relative; width: min(420px, 100%); background: var(--panel); border: 1px solid var(--border); border-radius: 16px; padding: 30px 30px 26px; display: grid; gap: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45); }
.login-card .brand { flex-direction: column; align-items: flex-start; gap: 14px; }
.login-card .brand-logo { width: 150px; height: 40px; }
.login-title { font-size: 18px; font-weight: 600; letter-spacing: -0.025em; }
.login-card .brand small { display: block; font-size: 12px; color: var(--muted); font-weight: 400; }
.login-card .btn.primary { padding: 10px 14px; }
.login-hint { font-size: 12px; margin: 4px 0 0; }

/* ----- menú de usuario ------------------------------------------------------ */
.user-menu { position: relative; }
.avatar { width: 20px; height: 20px; border-radius: 50%; background: var(--bl-gradient); color: #FFFFFF; display: inline-grid; place-items: center; font-size: 10px; font-weight: 600; font-family: var(--font-display); }
.menu { position: absolute; right: 0; top: calc(100% + 6px); background: var(--panel); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); min-width: 220px; padding: 6px; z-index: 30; display: grid; gap: 2px; }
.menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 4px; display: grid; font-size: 13px; }
.menu-item { background: transparent; border: 0; text-align: left; padding: 8px 10px; border-radius: 7px; cursor: pointer; width: 100%; }
.menu-item:hover { background: var(--panel-2); }

/* ----- subpestañas de administración --------------------------------------- */
.subnav { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.subnav button { background: transparent; border: 0; border-bottom: 2px solid transparent; padding: 9px 12px; color: var(--muted); cursor: pointer; font-weight: 500; margin-bottom: -1px; }
.subnav button:hover { color: var(--fg); }
.subnav button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.badge.role-admin { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--fg); }
.badge.role-operador { background: color-mix(in srgb, var(--lvl1) 16%, transparent); color: var(--fg); }
.badge.role-consulta { background: var(--panel-2); color: var(--muted); }

/* ----- dispositivos MQTT ------------------------------------------------------ */
.dev-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--lvl0); margin-right: 6px; vertical-align: 1px; }
.dev-dot.on { background: var(--lvl1); box-shadow: 0 0 6px var(--lvl1); }
.dev-dot.off { background: var(--lvl3); }
.card .device { font-size: 12px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.card .device .mono { font-size: 11.5px; }
.card .head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.badge.dev-on { background: color-mix(in srgb, var(--lvl1) 16%, transparent); color: var(--fg); font-weight: 500; }
.badge.dev-off { background: color-mix(in srgb, var(--lvl3) 16%, transparent); color: var(--fg); font-weight: 500; }
.badge.dev-none { background: var(--panel-2); color: var(--muted); font-weight: 500; }
.badge .dev-dot { margin-right: 0; }
.badge.dev-on, .badge.dev-off, .badge.dev-none { white-space: normal; line-height: 1.3; }
.stat.warn { border-color: color-mix(in srgb, var(--lvl3) 45%, var(--border)); }

/* ----- clientes ---------------------------------------------------------------- */
.badge.client-tag { background: color-mix(in srgb, var(--bl-blue) 16%, transparent); color: var(--fg); font-family: var(--font-body); font-weight: 500; letter-spacing: 0; font-size: 11px; vertical-align: 1px; }
.client-filter { margin: 0; }
.client-filter select { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; min-width: 180px; }
.topbar .user-menu .menu-head span { font-size: 12px; }
td .check { margin: 0; font-size: 12.5px; }