/* ============ NOC Desk · VAMO Telecom ============ */
:root {
  --brand-1: #4eaae3;
  --brand-2: #3152a8;
  --brand: #3e7ac4;
  --brand-grad: linear-gradient(90deg, var(--brand-1), var(--brand-2));
  --radius: 12px;
  --radius-sm: 8px;
  --sidebar-w: 240px;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Montserrat', var(--font);

  --st-nova: #38bdf8;
  --st-andamento: #3b82f6;
  --st-aguardando: #f59e0b;
  --st-resolvida: #22c55e;
  --st-cancelada: #6b7280;
  --ok: #22c55e;
  --warn: #f59e0b;
  --danger: #ef4444;
}

html[data-theme='dark'] {
  color-scheme: dark;
  --bg: #07090d;
  --surface: #0f1218;
  --surface-2: #151a22;
  --surface-3: #1b212c;
  --border: #232a37;
  --border-strong: #2f3848;
  --text: #e8ecf3;
  --text-2: #b7c0cf;
  --muted: #7d889b;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  --sidebar-bg: #05070a;
  --input-bg: #0b0e13;
}
html[data-theme='light'] {
  color-scheme: light;
  --bg: #f3f5f9;
  --surface: #ffffff;
  --surface-2: #f5f7fb;
  --surface-3: #eceff5;
  --border: #e1e6ee;
  --border-strong: #cfd6e2;
  --text: #0b0d12;
  --text-2: #333b4a;
  --muted: #697386;
  --shadow: 0 10px 30px rgba(20, 30, 60, 0.12);
  --sidebar-bg: #0a0c11;
  --input-bg: #ffffff;
}

* { box-sizing: border-box; }
/* rolagem SEMPRE pela janela (nunca pelo body) — evita menu fixo "solto" no iPhone/Android */
html { overflow-x: hidden; overflow-x: clip; overscroll-behavior-y: none; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--brand-1); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
svg { width: 1.1em; height: 1.1em; flex: none; }
.avatar svg { width: 15px; height: 15px; }
.avatar.sm svg { width: 12px; height: 12px; }
.badge svg { width: 12px; height: 12px; }
.dropzone svg { width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; }
.chip svg { width: 13px; height: 13px; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -0.01em; margin: 0; }
h1 { font-size: 22px; font-weight: 800; }
h2 { font-size: 16px; font-weight: 700; }
h3 { font-size: 14px; font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace; }
.hidden { display: none !important; }
::selection { background: rgba(78, 170, 227, 0.35); }

/* ---------- boot ---------- */
.boot { height: 100vh; height: 100dvh; display: grid; place-items: center; background: #07090d; }
.boot-logo { width: 54px; opacity: 0.9; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; transform: scale(0.94); } }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #1b2230 transparent;
  background: var(--sidebar-bg);
  border-right: 1px solid #151a22;
  display: flex; flex-direction: column;
  padding: 18px 14px;
  color: #cfd6e2;
}
.sidebar .brand { display: flex; flex-direction: column; gap: 6px; padding: 4px 8px 18px; }
.sidebar .brand img { width: 128px; }
.sidebar .brand .b-mini { display: none; }
.sidebar .brand .tag {
  font: 700 10px/1.5 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase;
  background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 12px; border-radius: 9px;
  color: #a9b3c4; font-weight: 500; text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.nav a svg { width: 18px; height: 18px; flex: none; }
.nav a:hover { background: #111620; color: #fff; }
.nav a.active { background: linear-gradient(90deg, rgba(78,170,227,.16), rgba(49,82,168,.10)); color: #fff; box-shadow: inset 2px 0 0 var(--brand-1); }
.nav a .count {
  margin-left: auto; font-size: 11px; font-weight: 700; min-width: 20px; text-align: center;
  padding: 1px 6px; border-radius: 999px; background: #1b2230; color: #cfd6e2;
}
.nav a .count.alert { background: var(--danger); color: #fff; }
.nav .sep { height: 1px; background: #151a22; margin: 10px 6px; }
.sidebar .foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.userbox { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; background: #0d1117; }
.userbox .who { min-width: 0; flex: 1; }
.userbox .who b { display: block; color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userbox .who span { font-size: 11px; color: #7d889b; text-transform: capitalize; }

.avatar {
  --c: var(--brand);
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--c); color: #fff; font-weight: 700; font-size: 12px;
}
.avatar.sm { width: 22px; height: 22px; font-size: 10px; }
.avatar.none { background: transparent; border: 1.5px dashed var(--border-strong); color: var(--muted); }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 28px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.topbar .title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.topbar .title h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .mlogo { display: none; }
.content { padding: 24px 28px 60px; flex: 1; min-width: 0; }

.bottomnav { display: none; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: 9px;
  border: 1px solid var(--border-strong); background: var(--surface-2);
  font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.05s, opacity .15s;
}
.btn:hover { background: var(--surface-3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.btn.primary { background: var(--brand-grad); border-color: transparent; color: #fff; box-shadow: 0 4px 14px rgba(62,122,196,.35); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger { background: transparent; border-color: rgba(239,68,68,.5); color: #f87171; }
.btn.danger:hover { background: rgba(239,68,68,.1); }
.btn.success { background: #16a34a; border-color: transparent; color: #fff; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.btn.icon { width: 36px; padding: 0; }
.btn.sm.icon { width: 30px; }
.btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > label, .label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.input, select.input, textarea.input {
  width: 100%; height: 38px; padding: 0 12px;
  background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 9px;
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
textarea.input { height: auto; min-height: 90px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.input:focus { border-color: var(--brand-1); box-shadow: 0 0 0 3px rgba(78,170,227,.18); }
.input.sm { height: 32px; font-size: 13px; }
input[type='color'].input { padding: 3px; width: 44px; cursor: pointer; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.stack { display: flex; flex-direction: column; gap: 14px; }
.hint { font-size: 12px; color: var(--muted); }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; }
.check input { width: 16px; height: 16px; accent-color: var(--brand); }
.search { position: relative; }
.search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.search .input { padding-left: 34px; }

/* ---------- cards ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.card-h { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.card-h h2 { flex: 1; font-size: 14px; }
.card-b { padding: 16px; }
.empty { padding: 36px 16px; text-align: center; color: var(--muted); }
.empty svg { width: 36px; height: 36px; opacity: .5; margin-bottom: 6px; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi {
  position: relative; overflow: hidden;
  padding: 14px 16px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  cursor: pointer; transition: border-color .15s, transform .15s;
}
.kpi:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.kpi .k-label { font-size: 12px; color: var(--muted); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.kpi .k-label svg { width: 14px; height: 14px; }
.kpi .k-val { font: 800 28px/1.15 var(--font-display); margin-top: 6px; }
.kpi .k-sub { font-size: 11px; color: var(--muted); }
.kpi::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent, var(--brand)); }
.kpi.danger { --accent: var(--danger); }
.kpi.danger .k-val { color: #f87171; }
.kpi.warn { --accent: var(--warn); }
.kpi.ok { --accent: var(--ok); }

.dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.dash-grid .col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding: 8px 4px 0; }
.bars .day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; min-width: 0; }
.bars .stackb { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.bars .b { width: 42%; max-width: 12px; border-radius: 3px 3px 0 0; min-height: 2px; }
.bars .b.c { background: var(--brand-1); }
.bars .b.r { background: var(--ok); }
.bars .lbl { font-size: 10px; color: var(--muted); }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

.hbar { display: flex; flex-direction: column; gap: 10px; }
.hbar .row { display: grid; grid-template-columns: 130px 1fr 28px; gap: 10px; align-items: center; font-size: 13px; }
.hbar .row .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.hbar .track { height: 8px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.hbar .fill { height: 100%; border-radius: 99px; }
.hbar .v { text-align: right; font-weight: 700; }

.team { width: 100%; border-collapse: collapse; font-size: 13px; }
.team th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 6px 8px; }
.team td { padding: 8px; border-top: 1px solid var(--border); }
.team td.n { text-align: right; font-weight: 700; }

/* ---------- badges / chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--surface-3); color: var(--text-2);
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.st { --c: var(--muted); background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.badge.st-nova { --c: var(--st-nova); }
.badge.st-andamento { --c: var(--st-andamento); }
.badge.st-aguardando { --c: var(--st-aguardando); }
.badge.st-resolvida { --c: var(--st-resolvida); }
.badge.st-cancelada { --c: var(--st-cancelada); }
.badge.pri { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); }
.badge.cat { background: transparent; border: 1px solid var(--border-strong); color: var(--text-2); }
.badge.cat .dot { background: var(--c); }
.sla { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.sla svg { width: 14px; height: 14px; }
.sla.ok { color: var(--ok); }
.sla.atencao { color: var(--warn); }
.sla.estourado { color: #f87171; }
.sla.pausado { color: #94a3b8; }
.sla.cumprido { color: var(--ok); }
.sla.cancelado { color: var(--muted); }
.slabar { height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.slabar i { display: block; height: 100%; border-radius: 99px; background: var(--ok); }
.slabar.atencao i { background: var(--warn); }
.slabar.estourado i { background: var(--danger); }
.slabar.pausado i { background: #64748b; }

.code { font: 600 12px/1 ui-monospace, Menlo, Consolas, monospace; color: var(--muted); }

/* ---------- demand list ---------- */
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar .search { flex: 1 1 240px; }
.toolbar select.input { width: auto; min-width: 140px; }
.filt-t { display: none; }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 9px; padding: 3px; }
.seg button { border: 0; background: transparent; height: 28px; padding: 0 12px; border-radius: 7px; font-weight: 600; font-size: 12px; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.seg button svg { width: 15px; height: 15px; }
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.chip {
  height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border-strong); background: transparent; color: var(--text-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.chip .n { opacity: .75; }

.dlist { display: flex; flex-direction: column; }
.drow {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr) 150px 120px 150px 36px;
  gap: 14px; align-items: center;
  padding: 12px 16px 12px 0;
  border-top: 1px solid var(--border);
  cursor: pointer; transition: background .12s;
}
.drow:first-child { border-top: 0; }
.drow:hover { background: var(--surface-2); }
.drow .pbar { align-self: stretch; border-radius: 0 3px 3px 0; background: var(--c); }
.drow .main-c { min-width: 0; }
.drow .t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drow .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--muted); }
.drow .meta .ic { display: inline-flex; align-items: center; gap: 3px; }
.drow .meta svg { width: 13px; height: 13px; }
.drow.done { opacity: .6; }
.list-head { display: grid; grid-template-columns: 4px minmax(0,1fr) 150px 120px 150px 36px; gap: 14px; padding: 10px 16px 10px 0; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); }

/* ---------- kanban ---------- */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(260px, 1fr)); gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 10px; }
.kcol { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); display: flex; flex-direction: column; max-height: calc(100vh - 190px); min-height: 200px; }
.kcol-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 13px; }
.kcol-h .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.kcol-h .n { margin-left: auto; color: var(--muted); font-weight: 600; }
.kcol-b { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; transition: background .15s; }
.kcol.over .kcol-b { background: color-mix(in srgb, var(--brand-1) 8%, transparent); }
.kcard {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 12px; cursor: grab; position: relative;
  border-left: 3px solid var(--c);
  transition: border-color .15s, transform .12s, box-shadow .15s;
}
.kcard:hover { border-color: var(--border-strong); border-left-color: var(--c); box-shadow: var(--shadow); }
.kcard.dragging { opacity: .45; }
.kcard .top { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.kcard .top .avatar { margin-left: auto; }
.kcard .t { font-weight: 600; font-size: 13px; line-height: 1.35; margin-bottom: 8px; word-break: break-word; }
.kcard .bot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.kcard .bot .ic { display: inline-flex; align-items: center; gap: 3px; }
.kcard .bot svg { width: 12px; height: 12px; }
.kcard .wr { font-size: 11px; color: var(--st-aguardando); margin: -3px 0 7px; }

/* ---------- detail ---------- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.detail .left { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.detail .right { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }
.d-head { display: flex; flex-direction: column; gap: 10px; }
.d-head .badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.d-title { font: 800 22px/1.3 var(--font-display); outline: none; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; word-break: break-word; }
.d-title[contenteditable='true']:hover { background: var(--surface-2); }
.d-title:focus { background: var(--surface-2); box-shadow: 0 0 0 2px var(--brand-1); }
.desc { white-space: pre-wrap; word-break: break-word; color: var(--text-2); }
.desc.empty-d { color: var(--muted); font-style: italic; }
.props { display: flex; flex-direction: column; }
.prop { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--border); font-size: 13px; }
.prop:first-child { border-top: 0; }
.prop > span:first-child { color: var(--muted); font-size: 12px; }
.prop .input { height: 32px; font-size: 13px; }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick .btn { width: 100%; }
.cl-item { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--border); }
.cl-item:first-child { border-top: 0; }
.cl-item .txt { flex: 1; min-width: 0; word-break: break-word; }
.cl-item.done .txt { text-decoration: line-through; color: var(--muted); }
.cl-item .by { font-size: 11px; color: var(--muted); }
.cl-item .btn { opacity: 0; }
.cl-item:hover .btn { opacity: 1; }
.progress { height: 6px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--ok); border-radius: 99px; transition: width .2s; }
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.att { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface-2); position: relative; cursor: pointer; }
.att .thumb { height: 90px; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); overflow: hidden; }
.att .thumb img { width: 100%; height: 100%; object-fit: cover; }
.att .thumb svg { width: 28px; height: 28px; }
.att .nm { padding: 7px 9px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att .nm small { display: block; color: var(--muted); font-size: 11px; }
.att .del { position: absolute; top: 6px; right: 6px; opacity: 0; background: rgba(0,0,0,.6); color: #fff; border: 0; }
.att:hover .del { opacity: 1; }
.dropzone { border: 1.5px dashed var(--border-strong); border-radius: 10px; padding: 14px; text-align: center; color: var(--muted); font-size: 12px; cursor: pointer; transition: border-color .15s, background .15s; }
.dropzone.over, .dropzone:hover { border-color: var(--brand-1); background: color-mix(in srgb, var(--brand-1) 6%, transparent); color: var(--text-2); }

.timeline { display: flex; flex-direction: column; }
.tl { display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 0; position: relative; }
.tl::before { content: ''; position: absolute; left: 14px; top: 38px; bottom: -8px; width: 1px; background: var(--border); }
.tl:last-child::before { display: none; }
.tl .ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--muted); z-index: 1; }
.tl .ico svg { width: 14px; height: 14px; }
.tl .body { min-width: 0; padding-top: 5px; font-size: 13px; }
.tl .body .when { font-size: 11px; color: var(--muted); margin-left: 6px; }
.tl.comment .bubble { margin-top: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; word-break: break-word; }
.tl.comment .ico { padding: 0; background: transparent; }
.tl .del-c { opacity: 0; margin-left: 4px; }
.tl:hover .del-c { opacity: 1; }
.composer { display: flex; flex-direction: column; gap: 8px; }
.composer .btn-row { justify-content: flex-end; }

/* ---------- portal ---------- */
.portal-group { margin-bottom: 26px; }
.portal-group > h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 12px; font-family: var(--font); font-weight: 700; }
.portal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.pcard {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: 18px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); text-decoration: none !important;
  transition: transform .15s, border-color .15s, box-shadow .15s;
  overflow: hidden; min-height: 150px;
}
.pcard::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c); opacity: .85; }
.pcard:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 55%, var(--border)); box-shadow: 0 12px 30px color-mix(in srgb, var(--c) 18%, transparent); }
.pcard .plogo { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb, var(--c) 18%, var(--surface-2)); color: var(--c); font: 800 18px/1 var(--font-display); flex: none; }
.pcard .plogo img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.pcard .pname { font: 700 16px/1.2 var(--font-display); display: flex; align-items: center; gap: 6px; }
.pcard .pname svg { width: 14px; height: 14px; color: var(--muted); }
.pcard .pdesc { font-size: 12px; color: var(--muted); line-height: 1.4; }
.pcard .phost { font-size: 11px; color: var(--muted); margin-top: auto; font-family: ui-monospace, Menlo, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pcard.nolink .phost { color: var(--warn); font-family: var(--font); font-weight: 600; }
.pcard.inactive { opacity: .45; }
.pcard .pedit { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; }
.pcard .pedit .btn { background: var(--surface-2); }
.pcard.add { align-items: center; justify-content: center; border-style: dashed; color: var(--muted); cursor: pointer; --c: var(--brand); }
.pcard.add svg { width: 26px; height: 26px; }

/* ---------- settings ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; scrollbar-width: none; }
.tabs a { padding: 10px 14px; color: var(--muted); font-weight: 600; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.tabs a:hover { color: var(--text); }
.tabs a.on { color: var(--text); border-bottom-color: var(--brand-1); }
.cfg-list { display: flex; flex-direction: column; }
.cfg-row { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.cfg-row:first-child { border-top: 0; }
.cfg-row .grow { flex: 1 1 180px; min-width: 140px; }
.cfg-row.off { opacity: .55; }
.cfg-row .ord { display: flex; flex-direction: column; }
.cfg-row .ord .btn { height: 16px; width: 22px; padding: 0; border: 0; background: transparent; }
.cfg-row .ord svg { width: 14px; height: 14px; }
.sla-in { display: flex; gap: 6px; align-items: center; }
.sla-in .input { width: 80px; }
.sla-in select.input { width: 100px; }
.utable { width: 100%; border-collapse: collapse; font-size: 13px; }
.utable th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.utable td { padding: 12px 16px; border-top: 1px solid var(--border); vertical-align: middle; }
.utable tr:first-child td { border-top: 0; }
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.temp-pass { font: 700 20px/1 ui-monospace, Menlo, monospace; padding: 14px; background: var(--surface-2); border: 1px dashed var(--brand-1); border-radius: 10px; text-align: center; letter-spacing: .05em; user-select: all; }

/* ---------- modal ---------- */
.modal-bg { position: fixed; inset: 0; z-index: 100; background: rgba(3,5,8,.7); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; animation: fade .15s; }
.modal { width: 100%; max-width: 560px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: var(--shadow); animation: pop .18s; }
.modal.wide { max-width: 760px; }
.modal-h { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-h h2 { flex: 1; font-size: 17px; }
.modal-b { padding: 20px; overflow-y: auto; }
.modal-f { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--border); }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ---------- toasts ---------- */
#toasts { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { pointer-events: auto; min-width: 240px; max-width: 360px; padding: 12px 14px; border-radius: 10px; background: #111620; color: #e8ecf3; border: 1px solid #262e3c; box-shadow: var(--shadow); font-size: 13px; display: flex; gap: 9px; align-items: flex-start; animation: pop .18s; }
.toast svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.toast.ok svg { color: var(--ok); }
.toast.err svg { color: var(--danger); }
.toast.info svg { color: var(--brand-1); }

/* ---------- login ---------- */
.login {
  min-height: 100vh; display: grid; place-items: center; padding: 20px;
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(78,170,227,.22), transparent 60%),
    radial-gradient(800px 500px at 110% 110%, rgba(49,82,168,.28), transparent 60%),
    #05070a;
  color: #e8ecf3;
}
.login-card { width: 100%; max-width: 390px; background: rgba(15,18,24,.85); border: 1px solid #222a37; border-radius: 18px; padding: 32px 28px; box-shadow: 0 30px 80px rgba(0,0,0,.5); backdrop-filter: blur(8px); }
.login-card .lg { width: 170px; display: block; margin: 0 auto 6px; }
.login-card .sub { text-align: center; font: 700 11px/1.6 var(--font-display); letter-spacing: .3em; text-transform: uppercase; margin-bottom: 28px; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.login-card .input { background: #0a0d12; border-color: #283141; color: #e8ecf3; }
.login-card .btn.primary { width: 100%; height: 42px; font-size: 14px; }
.login-card .err { color: #f87171; font-size: 13px; min-height: 18px; }

/* ---------- misc ---------- */
.spin { width: 18px; height: 18px; border: 2px solid var(--border-strong); border-top-color: var(--brand-1); border-radius: 50%; animation: rot .7s linear infinite; }
@keyframes rot { to { transform: rotate(360deg); } }
.loading { display: grid; place-items: center; padding: 60px; }
.pill-tabs { display: flex; gap: 6px; }
.kbd { font: 600 10px/1 ui-monospace, monospace; padding: 2px 5px; border-radius: 4px; border: 1px solid var(--border-strong); color: var(--muted); }
.row-flex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp { flex: 1; }
.fab { display: none; }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--brand-1) 10%, transparent); border: 1px solid color-mix(in srgb, var(--brand-1) 30%, transparent); font-size: 13px; }
.notice svg { width: 18px; height: 18px; flex: none; color: var(--brand-1); margin-top: 1px; }
.notice.warn { background: color-mix(in srgb, var(--warn) 10%, transparent); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.notice.warn svg { color: var(--warn); }

/* ---------- responsive ---------- */
@media (max-width: 1280px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: 1fr; }
  .detail { grid-template-columns: 1fr; }
  .detail .right { position: static; order: -1; }
  .drow, .list-head { grid-template-columns: 4px minmax(0,1fr) 120px 130px 30px; }
  .drow .c-cat, .list-head .c-cat { display: none; }
}
@media (max-width: 860px) {
  :root { --sidebar-w: 0px; }
  .shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .topbar { padding: 12px 16px; padding-top: max(12px, env(safe-area-inset-top)); }
  .topbar .mlogo { display: block; width: 26px; }
  .topbar h1 { font-size: 18px; }
  .content { padding: 16px 16px 100px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi .k-val { font-size: 24px; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .drow, .list-head { grid-template-columns: 4px minmax(0,1fr) auto; gap: 10px; padding-right: 12px; }
  .drow .c-assignee, .drow .c-status, .list-head .c-assignee, .list-head .c-status, .drow .c-go, .list-head .c-go { display: none; }
  .list-head { display: none; }
  .drow .t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .filt-t { display: inline-flex; }
  .toolbar { flex-wrap: wrap; }
  .toolbar .search { flex: 1 1 0; }
  .toolbar select.input { display: none; flex: 1 1 45%; min-width: 0; }
  .toolbar.show-f select.input { display: block; }
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .chip { flex: none; }
  .d-title { font-size: 19px; }
  .kanban { grid-template-columns: repeat(4, 82vw); scroll-snap-type: x mandatory; }
  .kcol { scroll-snap-align: start; max-height: none; }
  .bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    transform: translateZ(0); -webkit-transform: translateZ(0); will-change: transform; /* camada própria: não "flutua" na rolagem */
    touch-action: manipulation;
    background: rgba(5,7,10,.96); backdrop-filter: blur(10px);
    border-top: 1px solid #151a22;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10px; color: #7d889b; padding: 4px 0; text-decoration: none; position: relative; }
  .bottomnav a svg { width: 21px; height: 21px; }
  .bottomnav a.active { color: #fff; }
  .bottomnav a.active svg { color: var(--brand-1); }
  .bottomnav a .count { position: absolute; top: 0; left: 55%; font-size: 9px; font-weight: 700; background: var(--danger); color: #fff; border-radius: 99px; padding: 0 5px; }
  .fab {
    display: grid; place-items: center;
    position: fixed; right: 18px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 51;
    width: 54px; height: 54px; border-radius: 50%; border: 0;
    background: var(--brand-grad); color: #fff; box-shadow: 0 8px 24px rgba(62,122,196,.5);
  }
  .fab svg { width: 24px; height: 24px; }
  .topbar .btn.new-d { display: none; }
  .modal-bg { padding: 0; align-items: end; }
  .modal { max-width: none; border-radius: 18px 18px 0 0; max-height: 92vh; }
  #toasts { left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .toast { max-width: none; }
  .hbar .row { grid-template-columns: 100px 1fr 24px; }
  .portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pcard { padding: 14px; min-height: 130px; }
  .pcard .plogo { width: 44px; height: 44px; }
  .pcard .pname { font-size: 14px; }
  .utable .hide-m { display: none; }
}

/* ---------- v1.1: banner de push, dispositivos, kanban mobile ---------- */
.push-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 16px 28px 0; padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(78,170,227,.14), rgba(49,82,168,.14));
  border: 1px solid rgba(78,170,227,.35); font-size: 13px;
}
.push-banner > svg { width: 20px; height: 20px; color: var(--brand-1); }
.push-banner .pb-txt { flex: 1 1 220px; }
.dev-this, .dev-row { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.dev-list { display: flex; flex-direction: column; gap: 8px; }
.dev-row.me { border-color: color-mix(in srgb, var(--brand-1) 55%, var(--border)); }
.dev-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-3); color: var(--brand-1); flex: none; }
.dev-ic svg { width: 19px; height: 19px; }
.dev-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dev-act { display: flex; gap: 6px; flex: none; }
.btn.icon.danger { color: #f87171; }
.kmove { display: none; }
.ktabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 12px; padding: 0 16px; }
.ktab { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); font-weight: 600; font-size: 12px; color: var(--text-2); cursor: pointer; }
.ktab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ktab .n { color: var(--muted); }
.ktab.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, var(--surface)); color: var(--text); }
.kcol-m { display: flex; flex-direction: column; gap: 10px; }
.kcol-m .kcard { cursor: pointer; }
.kcol-m .kmove { display: inline-flex; margin-left: auto; height: 28px; }
.sheet-opt { justify-content: flex-start; height: 46px; font-size: 14px; }
.sheet-opt .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }

@media (max-width: 860px) {
  .push-banner { margin: 12px 16px 0; }
  /* evita zoom automático do iOS ao focar campos */
  .input, select.input, textarea.input, .input.sm { font-size: 16px; }
  .dev-row { flex-wrap: wrap; }
  .dev-act { width: 100%; justify-content: flex-end; }
  .topbar .seg button { padding: 0 9px; }
  .topbar .seg button span { display: none; }
  .prop { grid-template-columns: 100px 1fr; }
  .detail .right { gap: 12px; }
  .quick .btn { height: 44px; }
  .btn { min-height: 36px; }
  .modal-f { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .modal-f .btn { flex: 1; height: 44px; }
}
html[data-standalone='1'] .topbar { padding-top: max(12px, env(safe-area-inset-top)); }

/* ================= v1.2 ================= */
/* ---- infraestrutura ---- */
.isite { margin-bottom: 16px; }
.isite .card-h svg { width: 16px; height: 16px; color: var(--brand-1); }
.elist { display: flex; flex-direction: column; }
.erow {
  display: grid; grid-template-columns: 14px minmax(0, 1.4fr) 190px minmax(0, 1fr) auto;
  gap: 14px; align-items: center; padding: 11px 16px; border-top: 1px solid var(--border); cursor: pointer; transition: background .12s;
}
.erow:first-child { border-top: 0; }
.erow:hover { background: var(--surface-2); }
.erow.off { opacity: .5; }
.sdot { width: 11px; height: 11px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 3px color-mix(in srgb, var(--muted) 20%, transparent); }
.sdot.up { background: var(--ok); box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.sdot.down { background: var(--danger); box-shadow: 0 0 0 3px rgba(239,68,68,.25); animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
.e-main { min-width: 0; }
.e-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.e-name b { font-size: 14px; }
.e-meta { font-size: 12px; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e-ip { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.ipbtn { border: 0; background: var(--surface-3); color: var(--text); padding: 3px 8px; border-radius: 6px; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ipbtn svg { width: 12px; height: 12px; opacity: .5; }
.ipbtn:hover { background: color-mix(in srgb, var(--brand-1) 22%, var(--surface-3)); }
.lat { font-size: 11px; color: var(--muted); }
.acc { display: flex; gap: 6px; flex-wrap: wrap; }
.acc .btn { text-decoration: none; }
.e-act { display: flex; gap: 2px; }

/* ---- menções ---- */
.mention { color: var(--brand-1); font-weight: 600; background: color-mix(in srgb, var(--brand-1) 12%, transparent); padding: 0 3px; border-radius: 4px; }
.mention-pop { position: absolute; left: 0; top: 100%; z-index: 30; min-width: 240px; margin-top: 4px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow); padding: 4px; }
.mention-pop .mi { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.mention-pop .mi small { margin-left: auto; color: var(--muted); font-size: 11px; }
.mention-pop .mi.on, .mention-pop .mi:hover { background: var(--surface-3); }

/* ---- relatórios ---- */
.rtable td:first-child { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbars { gap: 3px; }
.mbars .b { width: 45%; max-width: 9px; }

/* ---- menu "Mais" (mobile) ---- */
.more-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.more-it { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); text-decoration: none !important; font-size: 12px; font-weight: 600; text-align: center; }
.more-it svg { width: 24px; height: 24px; color: var(--brand-1); }

/* ---- painel TV ---- */
html.tv-mode { overflow: hidden; }
html.tv-mode body { background: #030407; }
.tv { height: 100vh; display: flex; flex-direction: column; gap: 1.2vh; padding: 1.6vh 1.6vw; background: radial-gradient(1200px 600px at 0% 0%, rgba(78,170,227,.10), transparent 60%), #030407; color: #e8ecf3; font-size: clamp(12px, 0.9vw, 22px); }
.tv-h { display: flex; align-items: center; gap: 1.4vw; }
.tv-logo { height: 5.2vh; }
.tv-title { font: 800 2.6vh/1 var(--font-display); letter-spacing: .02em; }
.tv-title span { font-weight: 600; color: #7d889b; font-size: 2vh; }
.tv-clock { margin-left: auto; text-align: right; }
.tv-clock #tvTime { font: 800 5vh/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.tv-clock #tvDate { color: #7d889b; font-size: 1.7vh; text-transform: capitalize; margin-top: .4vh; }
.tv-kpis { display: grid; grid-template-columns: repeat(7, 1fr); gap: .8vw; }
.tk { background: #0c1017; border: 1px solid #1c2330; border-radius: 1.2vh; padding: 1.1vh 1vw; display: flex; flex-direction: column; border-top: .45vh solid #2f3848; }
.tk b { font: 800 5vh/1 var(--font-display); font-variant-numeric: tabular-nums; }
.tk span { color: #8a94a6; font-size: 1.6vh; margin-top: .3vh; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.tk.good { border-top-color: #22c55e; }
.tk.warn { border-top-color: #f59e0b; } .tk.warn b { color: #fbbf24; }
.tk.bad { border-top-color: #ef4444; background: linear-gradient(180deg, rgba(239,68,68,.16), #0c1017 70%); } .tk.bad b { color: #f87171; }
.tk.pulse { position: relative; }
.tk.pulse::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 .6vh rgba(239,68,68,.35); opacity: 0; pointer-events: none; animation: tvpulse 1.6s ease-in-out infinite; will-change: opacity; }
@keyframes tvpulse { 50% { opacity: 1; } } /* só opacidade: roda na GPU, não redesenha a tela da TV a cada quadro */
.tv-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: 1.2fr 1.2fr .8fr; gap: 1vw; }
.tv-col { min-height: 0; display: flex; flex-direction: column; background: #080b10; border: 1px solid #161c26; border-radius: 1.4vh; padding: 1.2vh .8vw; overflow: hidden; }
.tv-col h2 { font: 800 1.9vh/1.2 var(--font-display); margin: 0 0 1vh; display: flex; align-items: center; gap: .6vw; text-transform: uppercase; letter-spacing: .04em; }
.tv-col h2 span { margin-left: auto; background: #1b2230; border-radius: 99px; padding: .2vh .8vw; font-size: 1.7vh; }
.tv-col.late h2 { color: #f87171; } .tv-col.crit h2 { color: #fb923c; } .tv-col.warn h2 { color: #fbbf24; }
.tv-list { display: flex; flex-direction: column; gap: 1vh; overflow: hidden; }
.tv-card { background: #0f141c; border: 1px solid #1e2633; border-left: .5vh solid var(--c); border-radius: 1vh; padding: 1.1vh .8vw; }
.tv-card.late { background: linear-gradient(90deg, rgba(239,68,68,.14), #0f141c 55%); border-color: rgba(239,68,68,.45); border-left-color: #ef4444; }
.tv-card-top { display: flex; align-items: center; gap: .6vw; flex-wrap: wrap; font-size: 1.45vh; }
.tv-code { font-family: ui-monospace, Menlo, monospace; color: #8a94a6; font-weight: 700; }
.tv-pri { color: var(--c); font-weight: 800; }
.tv-cat { color: #b7c0cf; display: inline-flex; align-items: center; gap: .3vw; }
.tv-cat i { width: .9vh; height: .9vh; border-radius: 50%; display: inline-block; }
.tv-card-t { font-weight: 700; font-size: 2.05vh; line-height: 1.25; margin: .6vh 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tv-card-b { display: flex; align-items: center; gap: .8vw; font-size: 1.55vh; }
.tv-who { display: inline-flex; align-items: center; gap: .4vw; color: #cfd6e2; }
.tv-who.none { color: #fbbf24; font-weight: 700; }
.tv-sla { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.tv-sla.estourado { color: #f87171; } .tv-sla.atencao { color: #fbbf24; } .tv-sla.ok { color: #4ade80; } .tv-sla.pausado { color: #94a3b8; }
.tv-empty { color: #5b6474; font-size: 1.8vh; padding: 2vh 0; text-align: center; }
.tv-infra { display: flex; flex-direction: column; padding: .8vh .7vw; background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.35); border-radius: .9vh; }
.tv-infra b { font-size: 1.8vh; } .tv-infra span { font-size: 1.5vh; color: #fca5a5; } .tv-infra small { color: #8a94a6; font-size: 1.3vh; }
.tv-team { display: flex; flex-direction: column; gap: .6vh; font-size: 1.6vh; }
.tv-team div { display: flex; align-items: center; gap: .5vw; }
.tv-team b { margin-left: auto; font-size: 1.9vh; }
.tv .avatar.sm { width: 2.4vh; height: 2.4vh; font-size: 1.05vh; }
.tv-recent { display: flex; flex-direction: column; gap: .5vh; font-size: 1.45vh; color: #b7c0cf; }
.tv-recent div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-ctrl { position: fixed; right: 1.4vw; bottom: 1.4vh; display: flex; gap: 8px; align-items: center; background: rgba(12,16,23,.9); border: 1px solid #222a37; padding: 8px; border-radius: 12px; transition: opacity .3s; z-index: 5; }
.tv-ctrl.hide { opacity: 0; pointer-events: none; }
.tv-ctrl .btn { background: #151a22; border-color: #2a3342; color: #e8ecf3; }
@media (max-width: 1100px) {
  .tv { height: auto; min-height: 100vh; overflow: auto; }
  html.tv-mode { overflow: auto; }
  .tv-kpis { grid-template-columns: repeat(4, 1fr); }
  .tv-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1100px) {
  .erow { grid-template-columns: 14px minmax(0, 1fr) auto; }
  .erow .acc { grid-column: 2 / -1; }
  .erow .e-act { grid-row: 1; grid-column: 3; }
  .erow .e-ip { grid-column: 2 / 3; }
}
@media (max-width: 860px) {
  .hide-m { display: none; }
  .topbar #pgActions .btn { padding: 0 10px; }
  .erow { padding: 12px; gap: 8px 10px; }
  .more-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ================= v1.3 ================= */
/* ---- portal em colunas verticais por categoria ---- */
.portal-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; align-items: start; }
.pcol { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.pcol-h { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); border-top: 3px solid var(--gc); }
.pcol-h h2 { flex: 1; font-size: 12px; text-transform: uppercase; letter-spacing: .1em; font-family: var(--font); font-weight: 800; color: var(--text-2); }
.pcol-h span { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-3); border-radius: 99px; padding: 1px 8px; }
.pcol-list { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.pcol.new { background: transparent; border-style: dashed; }
.pcol .pcard {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-items: center;
  min-height: 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2);
}
.pcol .pcard::before { inset: 0 auto 0 0; width: 3px; height: auto; }
.pcol .pcard:hover { transform: translateX(2px); }
.pcol .pcard .plogo { grid-row: 1 / span 2; width: 40px; height: 40px; border-radius: 10px; font-size: 15px; }
.pcol .pcard > div:nth-of-type(2) { min-width: 0; }
.pcol .pcard .pname { font-size: 14px; }
.pcol .pcard .pdesc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcol .pcard .phost { grid-column: 2; margin-top: 0; font-size: 10.5px; }
.pcol .pcard .pedit { position: absolute; top: 6px; right: 6px; }
.pcol .pcard.add { display: flex; justify-content: center; padding: 14px; flex-direction: row; }
.pcol .pcard.add svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .portal-cols { grid-template-columns: 1fr; }
}

/* ---- push obrigatório ---- */
.push-banner.must { background: linear-gradient(90deg, rgba(239,68,68,.16), rgba(245,158,11,.10)); border-color: rgba(239,68,68,.45); }
.push-banner.must > svg { color: #f87171; animation: blink 1.6s ease-in-out infinite; }

/* ---- transferir / WhatsApp ---- */
.pick-users { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.pick-u { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--border-strong); border-radius: 10px; cursor: pointer; }
.pick-u input { accent-color: var(--brand); }
.pick-u:has(input:checked) { border-color: var(--brand-1); background: color-mix(in srgb, var(--brand-1) 10%, transparent); }
.wa-btn { color: #25d366; border-color: rgba(37,211,102,.45); }
.wa-btn:hover { background: rgba(37,211,102,.1); }
.wtabs { width: fit-content; }
.wtabs button:disabled { opacity: .4; cursor: not-allowed; }
.modal-f { flex-wrap: wrap; }

/* ---- monitoramento ---- */
.mon-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.gauge { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; }
.gauge .g-l { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.gauge .g-v { font: 800 26px/1.2 var(--font-display); margin: 4px 0 8px; }
.gauge .g-s { font-size: 11px; color: var(--muted); margin-top: 6px; }
.gbar { height: 7px; background: var(--surface-3); border-radius: 99px; overflow: hidden; }
.gbar i { display: block; height: 100%; border-radius: 99px; background: var(--ok); }
.gbar.w i { background: var(--warn); } .gbar.d i { background: var(--danger); }
.spark { width: 100%; height: 46px; display: block; margin-top: 6px; }
.svc { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 13px; }
.svc:first-child { border-top: 0; }
.svc .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--muted); }
.svc .dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.svc .dot.alerta { background: var(--warn); } .svc .dot.erro { background: var(--danger); animation: blink 1.4s infinite; } .svc .dot.off { background: #475569; }
.svc b { min-width: 230px; } .svc span { color: var(--muted); font-size: 12px; }
.kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; font-size: 13px; }
.kv > span:nth-child(odd) { color: var(--muted); }
.u-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; }
.u-st i { width: 9px; height: 9px; border-radius: 50%; background: #475569; }
.u-st.online { color: var(--ok); } .u-st.online i { background: var(--ok); box-shadow: 0 0 0 3px rgba(34,197,94,.25); }
.u-st.ausente { color: var(--warn); } .u-st.ausente i { background: var(--warn); }
.u-st.offline { color: var(--muted); }
.u-dev { font-size: 12px; color: var(--text-2); padding: 6px 0 0 0; display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; }
.u-dev .mono { font-size: 11.5px; }
.loglist { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; max-height: 280px; overflow: auto; }
.loglist div { padding: 6px 16px; border-top: 1px solid var(--border); white-space: pre-wrap; word-break: break-all; }
.loglist .warn { color: #fbbf24; } .loglist .error { color: #f87171; }
@media (max-width: 1100px) { .mon-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .svc b { min-width: 0; } .svc { flex-wrap: wrap; } }
@media (max-width: 860px) { .kv { grid-template-columns: 110px 1fr; } }
.svc .avatar { color: #fff; font-size: 10px; }

/* ================= v1.4 ================= */
/* ---- status online / ausente / ocupado ---- */
.st-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: #64748b; box-shadow: 0 0 0 2px var(--surface); }
.st-dot.online { background: #22c55e; } .st-dot.ocupado { background: #ef4444; } .st-dot.ausente { background: #f59e0b; } .st-dot.offline { background: #64748b; }
.av-wrap { position: relative; display: inline-flex; flex: none; }
.av-wrap .st-dot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; box-shadow: 0 0 0 2px var(--surface); }
.av-wrap.sm .st-dot { width: 9px; height: 9px; right: -2px; bottom: -2px; }
.sidebar .av-wrap .st-dot { box-shadow: 0 0 0 2px #0d1117; }
.st-lbl { font-size: 11px; font-weight: 600; color: var(--muted); }
.st-lbl.online { color: #22c55e; } .st-lbl.ocupado { color: #f87171; } .st-lbl.ausente { color: #fbbf24; }
.me-st { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; }
.me-st .who { display: flex; flex-direction: column; min-width: 0; }
.me-st .who b { color: #fff; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-st:hover .st-lbl { text-decoration: underline; }
.me-st.wide { width: 100%; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); margin-bottom: 12px; }
.me-st.wide .who b { color: var(--text); font-size: 14px; }
.st-opts { display: flex; flex-direction: column; gap: 8px; }
.st-opt { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border-strong); border-radius: 10px; cursor: pointer; }
.st-opt input { accent-color: var(--brand); }
.st-opt span { display: flex; flex-direction: column; } .st-opt small { color: var(--muted); font-size: 12px; }
.st-opt:has(input:checked) { border-color: var(--brand-1); background: color-mix(in srgb, var(--brand-1) 10%, transparent); }
.who-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who-txt { display: flex; flex-direction: column; min-width: 0; }
.who-txt b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pick-u .pu-txt { display: flex; flex-direction: column; min-width: 0; }
.pick-u .pu-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tv-team .av-wrap .st-dot { box-shadow: 0 0 0 2px #080b10; }
.tv-team .offline { opacity: .5; }

/* ---- barra de nova versão ---- */
.upd-bar { position: fixed; left: 50%; transform: translateX(-50%); top: 12px; z-index: 300; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #111620; color: #e8ecf3; border: 1px solid var(--brand-1); box-shadow: var(--shadow); font-size: 13px; max-width: calc(100vw - 24px); }
.upd-bar svg { width: 18px; height: 18px; color: var(--brand-1); }

/* ---- tabelas no mobile viram cartões / rolam dentro do card ---- */
.tteam td:first-child { max-width: 0; width: 55%; }
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 860px) {
  .push-banner { font-size: 12px; padding: 10px 12px; gap: 10px; }
  .push-banner > svg { width: 18px; height: 18px; }
  .push-banner .pb-txt { flex: 1 1 170px; }
  .bars .lbl.dow { display: none; }
  .bars { gap: 3px; }
  .team { font-size: 12.5px; }
  .team th, .team td { padding: 7px 5px; }
  .team td.mono, .team td .mono { word-break: break-all; }
  .utable, .utable tbody, .utable tr, .utable td { display: block; width: 100%; }
  .utable thead { display: none; }
  .utable tr { position: relative; padding: 12px 16px; border-top: 1px solid var(--border); }
  .utable tr:first-child { border-top: 0; }
  .utable td { padding: 2px 0; border: 0 !important; }
  .utable td:last-child:not(:first-child) { position: absolute; top: 10px; right: 12px; width: auto; }
  .utable td .row-flex { flex-wrap: nowrap; min-width: 0; padding-right: 84px; }
  .utable td .row-flex > div { min-width: 0; overflow: hidden; }
  .utable td .row-flex .muted.small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .card-h { flex-wrap: wrap; }
  .card-h h2 { min-width: 0; flex: 1 1 150px; }
  .svc b { flex: 1 1 60%; }
  .u-dev { padding-left: 0 !important; }
  .me-st.wide .who b { white-space: normal; }
}
html:has(.modal-bg) { overflow: hidden; } /* trava o fundo com janela aberta */

/* ================= v1.5 — Clientes IXC ================= */
.ip-test { display: flex; gap: 6px; flex: 0 1 300px; }
.ip-test .input { min-width: 0; }
.xcli { margin-bottom: 14px; }
.xlogin { margin-bottom: 14px; }
.xlogin .card-h h2 { flex: 0 1 auto; }
.xlogin.off { border-color: color-mix(in srgb, var(--danger) 35%, var(--border)); }
.tests { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.tres { border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 10px; background: var(--surface-2); overflow: hidden; }
.tres.ok { border-left-color: var(--ok); } .tres.warn { border-left-color: var(--warn); } .tres.bad { border-left-color: var(--danger); }
.tres-h { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; padding: 10px 12px; font-size: 13px; }
.tres-h span { color: var(--text-2); }
.term { margin: 0; padding: 10px 12px; background: #05070a; color: #b7f7c3; font: 11.5px/1.5 ui-monospace, Menlo, Consolas, monospace; max-height: 220px; overflow: auto; white-space: pre-wrap; word-break: break-all; border-top: 1px solid var(--border); }
.hops { display: flex; flex-direction: column; padding: 4px 12px 10px; font-size: 12.5px; }
.hop { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; padding: 3px 0; border-top: 1px dashed var(--border); }
.hop:first-child { border-top: 0; }
.hop .n { color: var(--muted); text-align: right; }
.hop.lost { color: var(--muted); }
.ports { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 12px; }
.port { font-size: 12px; padding: 4px 9px; border-radius: 99px; border: 1px solid var(--border-strong); }
.port.open { border-color: rgba(34,197,94,.5); color: #4ade80; } .port.closed { color: #f87171; border-color: rgba(239,68,68,.4); } .port.none { color: var(--muted); }
@media (max-width: 860px) {
  .ip-test { flex: 1 1 100%; }
  .xlogin .card-h { gap: 6px; }
}
@media (max-width: 640px) {
  .xcli .card-h { flex-wrap: wrap; }
  .xcli .card-h > div:first-child { flex: 1 1 100% !important; }
  .xcli .card-h [data-newdem] { margin-left: auto; }
  .xlogin .card-h { flex-wrap: wrap; }
}
.svc.pkg { flex-wrap: wrap; row-gap: 4px; }
.svc.pkg .pkg-n { font-size: 13px; min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.svc.pkg .btn { padding: 4px 8px; }

/* ===== Clientes IXC v1.6 ===== */
.ix-top { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.ix-seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ix-seg::-webkit-scrollbar { display: none; }
.ix-seg button { height: 32px; padding: 0 14px; font-size: 13px; white-space: nowrap; flex: 0 0 auto; }
.ix-hero { padding: 16px; margin-bottom: 16px; }
.ix-searchrow { display: flex; gap: 10px; align-items: stretch; }
.ix-search { position: relative; flex: 1 1 auto; min-width: 0; }
.ix-search > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; }
.ix-search .input { height: 46px; padding-left: 42px; font-size: 15px; border-radius: 10px; width: 100%; }
.ix-searchrow > .btn { height: 46px; border-radius: 10px; }
.ix-searchrow > .btn.on { border-color: var(--brand-1); color: var(--brand-1); }
.ix-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700; }
.ix-count:empty { display: none; }
.tabs .ix-count { background: var(--surface-3); color: var(--text-2); margin-left: 4px; }
.ix-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ix-chips:not(:empty) { margin-top: 12px; }
.ix-fchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 4px 4px 10px; border-radius: 99px; background: color-mix(in srgb, var(--brand) 16%, transparent); border: 1px solid color-mix(in srgb, var(--brand) 40%, transparent); font-size: 12px; color: var(--text-2); max-width: 100%; }
.ix-fchip b { color: var(--text); font-weight: 600; }
.ix-fchip span { color: var(--text); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-fchip button { border: 0; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; }
.ix-fchip button:hover { background: var(--surface-3); color: var(--text); }
.ix-fchip svg { width: 13px; height: 13px; }
.ix-link { border: 0; background: none; color: var(--brand-1); font-weight: 600; font-size: 12px; cursor: pointer; padding: 2px 4px; }
.ix-link:hover { text-decoration: underline; }
.ix-fpanel { margin-top: 14px; padding: 14px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 10px; }
.ix-fhead { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.ix-frow { display: grid; grid-template-columns: minmax(150px, 1.1fr) 110px minmax(140px, 1.5fr) auto; gap: 8px; align-items: center; }
.ix-frow .input { height: 38px; min-width: 0; }
.ix-op { text-align: center; }
.ix-factions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ix-presets { display: flex; gap: 4px 8px; flex-wrap: wrap; align-items: center; border-top: 1px dashed var(--border); padding-top: 10px; }
.ix-reshead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 2px 12px; }
.ix-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ix-ccard { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; min-width: 0; }
.ix-ccard:hover { border-color: var(--brand-1); transform: translateY(-1px); box-shadow: var(--shadow); }
.ix-ccard.inactive { opacity: .6; }
.ix-ccard.skel { min-height: 104px; }
.ix-ccard.skel div { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2), var(--surface-3), var(--surface-2)); background-size: 200% 100%; animation: ixsk 1.2s infinite; }
.ix-ccard.skel div:first-child { width: 60%; height: 16px; } .ix-ccard.skel div:last-child { width: 40%; }
@keyframes ixsk { to { background-position: -200% 0; } }
.ix-cc-top { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.ix-cc-main { flex: 1; min-width: 0; }
.ix-cc-name { font-weight: 700; font-size: 14px; line-height: 1.3; overflow-wrap: anywhere; }
.ix-cc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--muted); margin-top: 3px; }
.ix-cc-meta span { display: inline-flex; align-items: center; gap: 4px; }
.ix-cc-meta svg { width: 12px; height: 12px; }
.ix-av { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; background: #475569; position: relative; }
.ix-av.on { background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); }
.ix-av.off { background: linear-gradient(135deg, #f87171, #b91c1c); }
.ix-av.dead { background: #374151; color: #9ca3af; }
.ix-av.lg { width: 60px; height: 60px; border-radius: 16px; font-size: 20px; }
.ix-cc-logins { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ix-lchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-family: ui-monospace, monospace; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); cursor: default; }
button.ix-lchip { cursor: pointer; }
.ix-lchip i { width: 7px; height: 7px; border-radius: 50%; background: #64748b; }
.ix-lchip.on i { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.ix-lchip.off i { background: var(--danger); }
.ix-lchip.hit { border-color: var(--brand-1); color: var(--text); }
.ix-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: var(--surface-3); color: var(--text-2); }
.ix-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ix-pill.ok { background: color-mix(in srgb, var(--ok) 15%, transparent); color: #4ade80; }
.ix-pill.bad { background: color-mix(in srgb, var(--danger) 15%, transparent); color: #f87171; }
.ix-pill.warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: #fbbf24; }
.ix-pill.info { background: color-mix(in srgb, var(--brand-1) 16%, transparent); color: var(--brand-1); }
.ix-pill.off { color: var(--muted); }
:root[data-theme="light"] .ix-pill.ok { color: #15803d; } :root[data-theme="light"] .ix-pill.bad { color: #b91c1c; } :root[data-theme="light"] .ix-pill.warn { color: #b45309; }
.ix-empty { text-align: center; padding: 42px 20px; }
.ix-empty h3 { margin: 14px 0 6px; font-size: 17px; }
.ix-empty p { margin: 0 auto; max-width: 520px; line-height: 1.6; font-size: 13px; }
.ix-empty-ic { width: 64px; height: 64px; margin: 0 auto; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, var(--brand-1), var(--brand-2)); color: #fff; }
.ix-empty-ic svg { width: 30px; height: 30px; }
.ix-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ix-kpis > div { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ix-kpis span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.ix-kpis b { font-size: 20px; font-family: var(--font-display); }
.ix-kpis .ok b { color: #4ade80; } .ix-kpis .bad b { color: #f87171; } .ix-kpis .warn b { color: #fbbf24; }
.ix-kpis .bad { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); }
.ix-chero .ix-kpis { margin-bottom: 0; }
.ix-rx { font-family: ui-monospace, monospace; font-weight: 700; font-size: 12.5px; }
.ix-rx.ok { color: #4ade80; } .ix-rx.warn { color: #fbbf24; } .ix-rx.bad { color: #f87171; }
/* PON */
.ix-ponform { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(160px, 1fr) auto; gap: 10px; align-items: end; }
.ix-ponform .field { margin: 0; } .ix-ponform .btn { height: 40px; }
.ix-pongrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.ix-pontile { text-align: left; padding: 12px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 6px; font: inherit; }
.ix-pontile:hover { border-color: var(--brand-1); }
.ix-pt-h { display: flex; gap: 6px; align-items: center; } .ix-pt-h svg { width: 15px; height: 15px; color: var(--brand-1); }
.ix-pt-n { font-size: 22px; font-weight: 800; font-family: var(--font-display); } .ix-pt-n span { font-size: 12px; font-weight: 500; color: var(--muted); }
.ix-pt-s { display: flex; flex-direction: column; gap: 2px; }
.ix-onulist { display: flex; flex-direction: column; }
.ix-onu { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto 86px; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--border); border-left: 3px solid transparent; }
.ix-onu:first-child { border-top: 0; }
.ix-onu.off { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 5%, transparent); }
.ix-onu.on { border-left-color: var(--ok); }
.ix-onu-n { font-weight: 700; color: var(--muted); text-align: center; }
.ix-onu-cli { font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; } .ix-onu-cli:hover { color: var(--brand-1); }
.ix-onu-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.ix-onu-st { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.ix-onu-rx { display: flex; flex-direction: column; align-items: flex-end; }
.ix-ipform { display: flex; gap: 10px; flex-wrap: wrap; } .ix-ipform .ix-search { flex: 1 1 280px; } .ix-ipform .btn { height: 46px; }
/* painel do cliente */
.ix-back { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); text-decoration: none; font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.ix-back:hover { color: var(--text); } .ix-back svg { width: 16px; height: 16px; }
.ix-chero { padding: 18px; margin-bottom: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--brand-2) 14%, var(--surface)), var(--surface) 60%); }
.ix-ch-top { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ix-ch-main { flex: 1 1 260px; min-width: 0; }
.ix-ch-main h1 { margin: 0; font-size: 20px; font-family: var(--font-display); line-height: 1.25; overflow-wrap: anywhere; }
.ix-ch-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ix-tabs a { display: inline-flex; align-items: center; gap: 6px; } .ix-tabs svg { width: 16px; height: 16px; }
.ix-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ix-llist { display: flex; flex-direction: column; }
.ix-lrow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 0; border-top: 1px solid var(--border); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; width: 100%; }
.ix-lrow:first-child { border-top: 0; } .ix-lrow:hover { background: var(--surface-2); }
.ix-lrow > svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.ix-lr-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ix-lr-main b { overflow-wrap: anywhere; }
.ix-lr-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ix-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #64748b; }
.on > .ix-dot, .online > .ix-dot, .ix-dot.on { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
.off > .ix-dot, .offline > .ix-dot, .ix-dot.off { background: var(--danger); }
.ix-lsplit { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; align-items: start; }
.ix-lside { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 76px; }
.ix-lpick { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: inherit; font: inherit; cursor: pointer; }
.ix-lpick .ix-dot { grid-row: 1 / 3; }
.ix-lpick .mono { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-lpick.on { border-color: var(--brand-1); background: color-mix(in srgb, var(--brand-1) 10%, var(--surface)); }
.ix-ldet .card-h { flex-wrap: wrap; gap: 8px; }
.ix-ldet .card-h h2 { flex: 0 1 auto; overflow-wrap: anywhere; }
.ix-sec + .ix-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.ix-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ix-sec h3 svg { width: 15px; height: 15px; color: var(--brand-1); }
.ix-sig { display: grid; grid-template-columns: repeat(2, minmax(0, 170px)); gap: 10px; }
.ix-sig > div { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); display: flex; flex-direction: column; }
.ix-sig span { font-size: 11.5px; color: var(--muted); font-weight: 600; } .ix-sig b { font-size: 17px; font-family: ui-monospace, monospace; }
.ix-sig .ok b { color: #4ade80; } .ix-sig .warn b { color: #fbbf24; } .ix-sig .bad b { color: #f87171; }
.ix-sig .bad { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.ix-ct-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.ix-ct .kv span:nth-child(even) { display: flex; flex-wrap: wrap; gap: 4px; }
.ix-diag { display: flex; flex-direction: column; gap: 10px; }
.ix-diag-row { padding-bottom: 10px; border-bottom: 1px solid var(--border); } .ix-diag-row:last-child { border: 0; padding: 0; }
.ix-fields { margin-top: 6px; color: var(--text-2); overflow-wrap: anywhere; line-height: 1.6; }
@media (max-width: 900px) {
  .ix-cols, .ix-lsplit { grid-template-columns: minmax(0, 1fr); }
  .ix-lside { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .ix-lpick { flex: 0 0 auto; max-width: 220px; }
}
@media (max-width: 640px) {
  .ix-top .seg { width: 100%; } .ix-seg button { flex: 1 0 auto; justify-content: center; padding: 0 10px; }
  .ix-hero { padding: 12px; }
  .ix-searchrow > .btn span:not(.ix-count) { display: none; }
  .ix-frow { grid-template-columns: minmax(0, 1fr) auto; padding-bottom: 10px; border-bottom: 1px dashed var(--border); }
  .ix-frow > select[data-k=field] { grid-column: 1 / -1; }
  .ix-frow > .ix-opsel, .ix-frow > .ix-op { grid-column: 1 / -1; }
  .ix-frow > .ix-op { display: none; }
  .ix-frow > [data-k=value] { grid-column: 1; }
  .ix-grid { grid-template-columns: minmax(0, 1fr); }
  .ix-ponform { grid-template-columns: minmax(0, 1fr); }
  .ix-onu { grid-template-columns: 30px minmax(0, 1fr) 64px; padding: 10px; gap: 8px; }
  .ix-onu-st { grid-column: 2 / 4; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; align-items: center; gap: 6px; order: 5; }
  .ix-chero { padding: 14px; }
  .ix-ch-top { gap: 12px; }
  .ix-av.lg { width: 48px; height: 48px; font-size: 17px; }
  .ix-ch-main { flex-basis: calc(100% - 64px); }
  .ix-ch-actions { width: 100%; }
  .ix-ch-actions .primary { margin-left: auto; }
  .ix-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ix-kpis b { font-size: 18px; }
  .ix-lr-side .ix-pill { display: none; }
  .ix-sig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ix-ipform .btn-row { width: 100%; } .ix-ipform .btn-row .btn { flex: 1; justify-content: center; }
}
:root[data-theme="light"] :is(.ix-rx.ok, .ix-kpis .ok b, .ix-sig .ok b) { color: #15803d; }
:root[data-theme="light"] :is(.ix-rx.warn, .ix-kpis .warn b, .ix-sig .warn b) { color: #b45309; }
:root[data-theme="light"] :is(.ix-rx.bad, .ix-kpis .bad b, .ix-sig .bad b) { color: #b91c1c; }
a.btn { text-decoration: none; }
.ix-cols .card-h h2 { display: flex; align-items: center; gap: 8px; }
.ix-cols .card-h h2 svg { width: 16px; height: 16px; color: var(--brand-1); }
@media (max-width: 640px) {
  .ix-tabs a { padding: 10px 10px; font-size: 13.5px; }
  .ix-tabs a svg { display: none; }
  .ix-tabs { justify-content: space-between; }
}
.ix-sample { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 14px; margin-top: 8px; font-size: 12px; max-height: 320px; overflow: auto; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.ix-sample span:nth-child(odd) { color: var(--muted); }
.ix-sample span:nth-child(even) { overflow-wrap: anywhere; }

/* ===== Pendências (v1.7) ===== */
.pd-tools { flex-wrap: wrap; gap: 8px; }
.pd-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pd-h { display: flex; align-items: center; gap: 8px; margin: 0 2px 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.pd-h svg { width: 16px; height: 16px; color: var(--brand-1); }
.pd-h .ix-count { background: var(--surface-3); color: var(--text-2); }
.pd-list { display: flex; flex-direction: column; gap: 10px; }
.pd-list.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.pd-none { padding: 18px; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius); }
.pd-card { position: relative; padding: 13px 14px 12px 17px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); cursor: pointer; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.pd-card::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: #64748b; }
.pd-card.pri-urgente::before { background: var(--danger); } .pd-card.pri-alta::before { background: var(--warn); } .pd-card.pri-normal::before { background: var(--brand-1); }
.pd-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.pd-card.late { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.pd-card.st-feita, .pd-card.st-cancelada { opacity: .75; }
.pd-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pd-code { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.pd-type { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 99px; color: var(--c); background: color-mix(in srgb, var(--c) 15%, transparent); }
.pd-title { font-weight: 700; font-size: 14.5px; margin: 8px 0 6px; line-height: 1.35; overflow-wrap: anywhere; }
.pd-meta { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text-2); }
.pd-meta span { display: flex; gap: 6px; align-items: flex-start; overflow-wrap: anywhere; min-width: 0; }
.pd-meta svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--muted); }
.pd-meta .late-t { color: #f87171; font-weight: 700; } .pd-meta .late-t svg { color: #f87171; }
.pd-desc { white-space: pre-wrap; font-size: 13px; color: var(--text-2); background: var(--surface-2); border-radius: 8px; padding: 10px 12px; margin-top: 8px; overflow-wrap: anywhere; }
.pd-done { margin-top: 8px; font-size: 12.5px; color: #4ade80; display: flex; gap: 6px; align-items: flex-start; }
.pd-done svg { width: 15px; height: 15px; flex: none; }
.pd-actions { display: flex; gap: 8px; align-items: center; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--border); }
.pd-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.pd-hist { display: flex; flex-direction: column; gap: 5px; font-size: 13px; max-height: 220px; overflow: auto; }
.pd-link { display: flex; gap: 8px; } .pd-link .input { flex: 1; min-width: 0; font-size: 12px; }
.pd-cli { position: relative; }
.pd-clires:not(:empty) { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow); max-height: 260px; overflow: auto; }
.pd-clopt { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-top: 1px solid var(--border); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.pd-clopt:first-child { border-top: 0; } .pd-clopt:hover { background: var(--surface-2); }
/* painel público */
.pd-pub { max-width: 820px; margin: 0 auto; padding: 0 16px 40px; }
.pd-pub-h { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 12px 0; margin-bottom: 12px; background: var(--bg); border-bottom: 1px solid var(--border); }
.pd-pub-h img { height: 30px; } .pd-pub-h div { display: flex; flex-direction: column; } .pd-pub-h b { font-size: 17px; font-family: var(--font-display); }
:root[data-theme="light"] .pd-pub-h img { filter: invert(1) hue-rotate(180deg); }
@media (max-width: 900px) { .pd-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .pd-tools .search { flex: 1 1 100% !important; order: 2; }
  .pd-tools .seg { order: 1; }
  .pd-tools #pdCity { order: 3; flex: 1 1 auto !important; }
  .pd-tools #pdPdf, .pd-tools #pdWa { order: 4; }
  .pd-list.grid { grid-template-columns: minmax(0, 1fr); }
  .pd-actions .btn { flex: 1; justify-content: center; }
  .pd-actions .sp { display: none; } .pd-actions .ghost { flex: 0 0 auto; }
}

/* ===== Saúde PON / gráficos / sessões (v1.7) ===== */
.ix-hhead { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.ix-hh-main { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ix-hh-t { display: flex; gap: 8px; align-items: center; font-size: 15px; } .ix-hh-t svg { width: 18px; height: 18px; color: var(--brand-1); }
.ix-hh-act { display: flex; gap: 8px; }
.ix-subbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.input.sm { height: 32px; padding: 0 10px; font-size: 13px; width: auto; }
.bad-t { color: #f87171; font-weight: 700; } .warn-t { color: #fbbf24; font-weight: 700; } .ok-t { color: #4ade80; font-weight: 700; }
:root[data-theme="light"] .bad-t { color: #b91c1c; } :root[data-theme="light"] .warn-t { color: #b45309; } :root[data-theme="light"] .ok-t { color: #15803d; }
.ix-rank { overflow: hidden; }
.ix-rk-h, .ix-rk { display: grid; grid-template-columns: 34px minmax(140px, 2fr) repeat(6, minmax(64px, 1fr)); gap: 8px; align-items: center; padding: 9px 14px; }
.ix-rk-h { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); }
.ix-rk-h span:nth-child(n+3), .ix-rk > span:nth-child(n+3) { text-align: right; }
.ix-rk { border-top: 1px solid var(--border); cursor: pointer; font-size: 13px; font-variant-numeric: tabular-nums; }
.ix-rk:hover, .ix-rk.open { background: var(--surface-2); }
.ix-rk-n { color: var(--muted); font-weight: 700; }
.ix-rk-name { display: flex; flex-direction: column; min-width: 0; } .ix-rk-name .muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ix-rk-more { padding: 10px 14px 14px; background: var(--surface-2); border-top: 1px dashed var(--border); }
.ix-rk-charts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.ix-grp { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--surface-2); border-top: 1px solid var(--border); font-size: 12.5px; }
.ix-grp svg { width: 14px; height: 14px; color: var(--brand-1); }
.ix-chart-wrap { margin-top: 12px; }
.ix-chart { position: relative; margin-top: 4px; min-height: 40px; }
.ix-chart-empty { padding: 14px; border: 1px dashed var(--border); border-radius: 8px; text-align: center; }
.ix-svg { display: block; overflow: visible; touch-action: pan-y; }
.ix-svg .g { stroke: var(--border); stroke-width: 1; }
.ix-svg .yt, .ix-svg .xt { fill: var(--muted); font-size: 10.5px; font-family: var(--font); }
.ix-svg .yt { text-anchor: end; }
.ix-svg .ref { stroke-width: 1.2; stroke-dasharray: 4 4; }
.ix-svg .ref.warn { stroke: #f59e0b; } .ix-svg .ref.bad { stroke: #ef4444; }
.ix-svg .rt { font-size: 10px; text-anchor: end; font-weight: 700; font-family: var(--font); }
.ix-svg .rt.warn { fill: #f59e0b; } .ix-svg .rt.bad { fill: #ef4444; }
.ix-svg .ln { fill: none; stroke: var(--brand-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ix-svg .cross { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.ix-svg .dot { fill: var(--brand-1); stroke: var(--surface); stroke-width: 2; }
.ix-tip { position: absolute; top: -6px; pointer-events: none; background: var(--surface-3); border: 1px solid var(--border-strong); border-radius: 8px; padding: 5px 9px; font-size: 12px; display: flex; flex-direction: column; box-shadow: var(--shadow); white-space: nowrap; z-index: 2; }
.ix-tip span { color: var(--muted); font-size: 11px; }
.ix-sess-k { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 10px; }
.ix-cons small { font-size: 12px; color: var(--muted); font-weight: 600; }
.ix-sess-k b.ix-cons { font-size: 15px; }
.ix-motivos { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.ix-sess { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; font-size: 12.5px; }
.ix-ss-h, .ix-ss { display: grid; grid-template-columns: 1fr 1fr 0.8fr 1fr 1.4fr; gap: 8px; padding: 7px 12px; align-items: center; }
.ix-ss-h { background: var(--surface-2); font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.ix-ss { border-top: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.ix-ss.open { background: color-mix(in srgb, var(--ok) 6%, transparent); }
.ix-sess .ix-link { margin: 6px 10px 8px; }
@media (max-width: 900px) {
  .ix-rk-h { display: none; }
  .ix-rk { grid-template-columns: 28px minmax(0, 1fr) repeat(3, auto); row-gap: 4px; }
  .ix-rk > span[data-l] { display: flex; flex-direction: column; font-size: 12.5px; }
  .ix-rk > span[data-l]::before { content: attr(data-l); font-size: 10px; color: var(--muted); font-weight: 600; }
  .ix-rk > span[data-l="7 dias"], .ix-rk > span[data-l="Quedas 24h"], .ix-rk > span[data-l="ONUs"] { display: none; }
  .ix-rk-charts { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ix-seg button { font-size: 12px; gap: 4px; } .ix-seg button svg { display: none; }
  .ix-sess-k { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ix-ss-h { display: none; }
  .ix-ss { grid-template-columns: 1fr 1fr; row-gap: 2px; }
  .ix-ss > span::before { content: attr(data-l) ': '; color: var(--muted); font-size: 11px; }
  .ix-subbar .seg { width: 100%; } .ix-subbar .seg button { flex: 1; justify-content: center; }
  .ix-hh-act { width: 100%; } .ix-hh-act .primary { flex: 1; justify-content: center; }
}
.ix-chart svg.ix-svg { width: 100%; height: 150px; flex: none; }
.ix-svg .cross, .ix-svg .dot { visibility: hidden; } .ix-svg.hov .cross, .ix-svg.hov .dot { visibility: visible; }
.pd-done { display: block; } .pd-done svg { vertical-align: -3px; margin-right: 5px; }

/* ===== Filial / níveis / OS (v1.8) ===== */
.ix-fil { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; background: color-mix(in srgb, #8b5cf6 16%, transparent); color: #a78bfa; white-space: nowrap; font-family: var(--font); }
.ix-fil svg { width: 12px; height: 12px; }
:root[data-theme="light"] .ix-fil { color: #6d28d9; }
.ix-levels { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.ix-lv { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.ix-lv i { width: 9px; height: 9px; border-radius: 50%; background: #64748b; }
.ix-lv.bad i { background: var(--danger); } .ix-lv.warn i { background: var(--warn); } .ix-lv.ok i { background: var(--ok); }
.ix-lv .n { font-weight: 600; color: var(--muted); }
.ix-lv.on { color: var(--text); border-color: var(--brand-1); background: color-mix(in srgb, var(--brand-1) 14%, transparent); }
.ix-lv-hint { flex: 1 1 100%; }
.ix-onu.sel { grid-template-columns: 62px minmax(0, 1fr) auto 86px; }
.ix-onu-ck { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ix-onu-ck input { width: 17px; height: 17px; accent-color: var(--brand-1); }
.ix-onu.picked { background: color-mix(in srgb, var(--brand-1) 9%, transparent); }
.ix-selbar { position: sticky; bottom: 12px; z-index: 6; display: flex; align-items: center; gap: 10px; margin: 12px 0; padding: 10px 14px; border-radius: 12px; background: var(--surface-3); border: 1px solid var(--brand-1); box-shadow: var(--shadow); }
.os-items { display: flex; flex-wrap: wrap; gap: 6px; max-height: 120px; overflow: auto; }
.os-res { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--border); border-radius: 10px; padding: 10px; max-height: 260px; overflow: auto; }
.os-sum { display: flex; gap: 6px; margin-bottom: 6px; }
.os-r { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1.3fr); gap: 8px; font-size: 12.5px; padding: 4px 0; border-top: 1px solid var(--border); }
.os-r.ok span:last-child { color: #4ade80; } .os-r.erro span:last-child { color: #f87171; } .os-r.pulada span:last-child { color: #fbbf24; }
.lvdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.lvdot.bad { background: var(--danger); } .lvdot.warn { background: var(--warn); }
@media (max-width: 640px) {
  .ix-onu.sel { grid-template-columns: 52px minmax(0, 1fr) 64px; }
  .ix-selbar { bottom: 76px; }
  .os-r { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 640px) {
  .ix-selbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .ix-selbar .sp { display: none; }
  .ix-selbar .primary { flex: 1 1 100%; justify-content: center; order: 3; }
  .ix-selbar .ghost { margin-left: auto; }
}

/* ===== Pendências: fotos, localização, técnico, dashboard (v1.9) ===== */
.pd-thumbs { display: flex; gap: 6px; margin: 2px 0 8px; cursor: zoom-in; }
.pd-ph { position: relative; display: inline-flex; width: 72px; height: 72px; border-radius: 8px; overflow: hidden; background: var(--surface-3); border: 1px solid var(--border); flex: none; padding: 0; cursor: zoom-in; }
.pd-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-ph img:not([src]) { opacity: 0; }
.pd-ph.more { align-items: center; justify-content: center; font-weight: 800; color: var(--text-2); font-size: 15px; }
.pd-ph.err::after { content: '!'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.pd-ph.new button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.65); color: #fff; display: grid; place-items: center; cursor: pointer; padding: 0; }
.pd-ph.new button svg { width: 13px; height: 13px; }
.pd-phin { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-phin .btn { cursor: pointer; }
.pd-prev { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pd-prev:empty { display: none; }
.pd-geo { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pd-map { display: inline-flex; align-items: center; gap: 5px; color: var(--brand-1); font-weight: 700; text-decoration: none; }
.pd-map svg { width: 14px; height: 14px; color: var(--brand-1) !important; margin: 0 !important; }
.pd-by { color: var(--muted) !important; font-size: 11.5px; }
.pd-gal { display: flex; gap: 8px; flex-wrap: wrap; }
.pd-gal .pd-ph { width: 96px; height: 96px; }
.pd-lb { display: flex; flex-direction: column; gap: 10px; }
.pd-lb-img { background: #000; border-radius: 10px; display: grid; place-items: center; min-height: 240px; max-height: 70vh; overflow: hidden; }
.pd-lb-img img { max-width: 100%; max-height: 70vh; object-fit: contain; }
.pd-lb-bar { display: flex; gap: 8px; align-items: center; }
.dp-list { display: flex; flex-direction: column; }
.dp-row { display: flex; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--border); cursor: pointer; align-items: flex-start; border-left: 3px solid transparent; }
.dp-row:first-child { border-top: 0; } .dp-row:hover { background: var(--surface-2); }
.dp-row.pri-urgente { border-left-color: var(--danger); } .dp-row.pri-alta { border-left-color: var(--warn); }
.dp-ph { width: 56px; height: 56px; } .dp-ph i { position: absolute; right: 3px; bottom: 3px; font-style: normal; font-size: 10.5px; font-weight: 800; background: rgba(0,0,0,.65); color: #fff; padding: 0 5px; border-radius: 6px; }
.dp-ph.none { display: grid; place-items: center; color: var(--muted); border-radius: 8px; background: var(--surface-2); border: 1px dashed var(--border); flex: none; width: 56px; height: 56px; }
.dp-ph.none svg { width: 20px; height: 20px; }
.dp-main { flex: 1; min-width: 0; }
.dp-t { font-weight: 700; font-size: 13.5px; overflow-wrap: anywhere; }
.dp-m { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 12px; color: var(--text-2); margin-top: 3px; }
.dp-by { display: flex; gap: 5px; align-items: center; font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.dp-by svg { width: 12px; height: 12px; }
@media (max-width: 640px) { .pd-ph { width: 64px; height: 64px; } .pd-gal .pd-ph { width: 84px; height: 84px; } }
.dp-head { flex-wrap: wrap; row-gap: 2px; }
.dp-head h2 { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; }
.dp-head h2 svg { width: 17px; height: 17px; color: var(--brand-1); }
.dp-sub { flex: 1 1 100%; }

/* ===== Configurações: menu lateral agrupado (v1.9.1) ===== */
.cfg-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 20px; align-items: start; }
.cfg-nav { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 14px; padding: 12px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); max-height: calc(100vh - 96px); overflow-y: auto; }
.cfg-g { display: flex; flex-direction: column; gap: 2px; }
.cfg-gt { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 10px 4px; }
.cfg-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-weight: 600; font-size: 13.5px; }
.cfg-nav a svg { width: 17px; height: 17px; flex: none; color: var(--muted); }
.cfg-nav a:hover { background: var(--surface-2); color: var(--text); }
.cfg-nav a.on { background: color-mix(in srgb, var(--brand-1) 16%, transparent); color: var(--text); }
.cfg-nav a.on svg { color: var(--brand-1); }
.cfg-body { min-width: 0; }
@media (max-width: 1200px) {
  .cfg-shell { grid-template-columns: 196px minmax(0, 1fr); gap: 14px; }
  .cfg-nav { padding: 10px 8px; }
  .cfg-nav a { font-size: 13px; padding: 7px 8px; gap: 8px; }
}
@media (max-width: 860px) {
  .cfg-shell { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cfg-nav { position: static; max-height: none; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; padding: 8px; }
  .cfg-nav::-webkit-scrollbar { display: none; }
  .cfg-g { display: contents; }
  .cfg-gt { display: none; }
  .cfg-nav a { flex: 0 0 auto; white-space: nowrap; padding: 7px 11px; border: 1px solid var(--border-strong); border-radius: 99px; font-size: 12.5px; }
  .cfg-nav a svg { width: 14px; height: 14px; }
}

/* ===== Terminal SSH/Telnet (v1.10) ===== */
.tm-wrap { display: flex; flex-direction: column; gap: 12px; }
.tm-wrap:fullscreen { background: var(--bg); padding: 10px; }
.tm-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; }
.tm-eq { display: flex; flex-direction: column; min-width: 0; }
.tm-eq b { font-size: 15px; }
.tm-proto button { height: 30px; }
.tm-tools { display: flex; gap: 4px; align-items: center; }
.tm-login { padding: 16px; display: flex; flex-direction: column; gap: 12px; max-width: 720px; }
.tm-lg-h { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.tm-lg-h svg { width: 18px; height: 18px; color: var(--brand-1); }
.tm-box { background: #05070a; border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; height: calc(100vh - 220px); min-height: 320px; }
.tm-wrap:fullscreen .tm-box { height: calc(100vh - 90px); }
.tm-term { width: 100%; height: 100%; }
.tm-term .xterm { height: 100%; }
.tm-term .xterm-viewport { scrollbar-width: thin; }
.tm-keys { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: thin; }
.tm-keys button { flex: none; min-width: 44px; height: 38px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font: 600 13px var(--font); cursor: pointer; }
.tm-keys button:active { background: var(--brand); color: #fff; }
.tm-log { max-height: 65vh; overflow: auto; white-space: pre-wrap; font-size: 12px; }
@media (max-width: 640px) {
  .tm-head { gap: 8px; padding: 10px; }
  .tm-proto { order: 5; width: 100%; } .tm-proto button { flex: 1; justify-content: center; }
  .tm-box { height: calc(100vh - 330px); min-height: 260px; padding: 4px; }
}
.no-fab .fab { display: none !important; }

/* ===== Credenciais do terminal (v1.10.3) ===== */
.tm-src { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.tm-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: 10px; cursor: pointer; }
.tm-opt input { margin-top: 3px; accent-color: var(--brand-1); }
.tm-opt svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--muted); }
.tm-opt span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tm-opt small { color: var(--muted); font-size: 11.5px; }
.tm-opt.on { border-color: var(--brand-1); background: color-mix(in srgb, var(--brand-1) 10%, transparent); }
.tm-opt.on svg { color: var(--brand-1); }
.tm-opt.off { opacity: .6; cursor: not-allowed; }
.tm-pane { display: flex; flex-direction: column; gap: 10px; }
.uc-list { display: flex; flex-direction: column; }
.uc-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--border); }
.uc-row:first-child { border-top: 0; }
.uc-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand-1) 14%, transparent); color: var(--brand-1); }
.uc-ic svg { width: 17px; height: 17px; }
.uc-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.uc-act { display: flex; gap: 6px; }
@media (max-width: 640px) { .uc-row { grid-template-columns: 36px minmax(0, 1fr) auto; } .uc-meta { grid-column: 2 / 4; } }

/* ===== Quedas de PON (v1.11) ===== */
.qd-me { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--border-strong); cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text-2); user-select: none; }
.qd-me input { display: none; }
.qd-me svg { width: 15px; height: 15px; }
.qd-me.on { border-color: var(--ok); color: #4ade80; background: color-mix(in srgb, var(--ok) 12%, transparent); }
.qd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-bottom: 8px; }
.qd-card { padding: 14px; display: flex; flex-direction: column; gap: 9px; border-left: 4px solid var(--warn); }
.qd-card.lv-total, .qd-card.lv-massiva { border-left-color: var(--danger); }
.qd-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.qd-top > div { display: flex; flex-direction: column; } .qd-top b { font-size: 16px; }
.qd-big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.qd-big > b { font-size: 30px; font-family: var(--font-display); color: #f87171; line-height: 1; }
.qd-big span { color: var(--text-2); font-size: 13px; }
.qd-bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.qd-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #ef4444); border-radius: 99px; }
.qd-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.qd-meta span { display: inline-flex; gap: 4px; align-items: center; } .qd-meta svg { width: 13px; height: 13px; }
.qd-cbar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--surface-3); }
.qd-cbar i, .qd-cleg i { display: block; }
.qd-cbar i.los, .qd-cleg i.los { background: #ef4444; } .qd-cbar i.dgasp, .qd-cleg i.dgasp { background: #f59e0b; }
.qd-cbar i.outro, .qd-cleg i.outro { background: var(--brand-1); } .qd-cbar i.sem, .qd-cleg i.sem { background: #64748b; }
.qd-cleg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--text-2); }
.qd-cleg span { display: inline-flex; align-items: center; gap: 6px; }
.qd-cleg i { width: 9px; height: 9px; border-radius: 3px; }
.qd-diag { font-size: 13px; font-weight: 600; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.qd-act { display: flex; gap: 6px; flex-wrap: wrap; }
.qd-hist td { vertical-align: middle; }
@media (max-width: 640px) { .qd-grid { grid-template-columns: minmax(0, 1fr); } .qd-me span { display: none; } .qd-me { padding: 0 10px; } }

/* ===== v1.12 — VAMO Empresarial · RBs ===== */
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.err-box { padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(248,113,113,.35); background: rgba(248,113,113,.08); color: #fca5a5; font-size: 13px; }
.kpi.sel { border-color: var(--accent, var(--brand)); box-shadow: 0 0 0 1px var(--accent, var(--brand)) inset; }
.rb-head { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; padding: 16px 18px; margin-bottom: 14px; }
.rb-head-t { flex: 1 1 320px; min-width: 0; }
.rb-head-t h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 17px; }
.rb-head-t h2 svg { width: 20px; height: 20px; color: var(--brand-1, var(--brand)); }
.rb-head-t p { margin: 0; }
.rb-head-b { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rb-kpis .kpi { cursor: pointer; }
.rb-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.rb-bar .search { flex: 1 1 260px; min-width: 0; }
.rb-bar select { flex: 0 1 220px; width: auto; }
.rb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.rb-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rb-card.inactive { opacity: .55; }
.rb-h { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.rb-ic { flex: 0 0 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(78,170,227,.12); color: var(--brand-1, #4eaae3); }
.rb-ic svg { width: 18px; height: 18px; }
.rb-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rb-t b, .rb-t span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-model { flex: 0 0 auto; font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border-strong); color: var(--muted); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rb-ip { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.rb-ip .mono { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.rb-ip .sp { flex: 1; }
.rb-ip .muted.small { white-space: nowrap; }
.rb-dot { display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); margin-right: 2px; vertical-align: middle; }
.rb-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.rb-dot.off { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.18); }
.rb-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 6px; background: rgba(245,158,11,.15); color: #fbbf24; }
.rb-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); }
.rb-meta span { display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.rb-meta svg { width: 13px; height: 13px; flex: 0 0 13px; }
.rb-meta .rb-warn { color: #fbbf24; }
.rb-notes { border-left: 2px solid var(--border-strong); padding-left: 8px; overflow-wrap: anywhere; }
.rb-act { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: auto; }
.rb-act .sp { flex: 1; }
.rb-act a.disabled { opacity: .45; }
.rb-src { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: rgba(78,170,227,.08); border: 1px solid rgba(78,170,227,.25); overflow-wrap: anywhere; }
.rb-res { display: flex; flex-direction: column; gap: 8px; max-height: min(52vh, 460px); overflow: auto; }
.rb-pick { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.rb-pick-c { display: flex; flex-direction: column; min-width: 0; }
.rb-pick-l { display: flex; flex-wrap: wrap; gap: 6px; }
.rb-login { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--border-strong); background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer; max-width: 100%; }
.rb-login:hover:not(:disabled) { border-color: var(--brand-1, #4eaae3); background: rgba(78,170,227,.08); }
.rb-login.taken { opacity: .55; cursor: default; }
.rb-login em { font-style: normal; font-size: 11px; color: var(--muted); }
.rb-login input { margin: 0; }
.rb-imp-q { display: flex; gap: 8px; }
.rb-imp-q .input { flex: 1; min-width: 0; }
.rb-imp-top { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.rb-imp-def summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.tm-eq .rb-dot { margin-right: 6px; }
@media (max-width: 760px) {
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rb-head-b { width: 100%; }
  .rb-head-b .btn { flex: 1 1 auto; justify-content: center; }
  .rb-bar select { flex: 1 1 100%; }
}

/* ===== v1.12 — janela não maximizada: menu lateral compacto e telas baixas ===== */
@media (min-width: 861px) and (max-height: 780px) {
  .sidebar { padding: 12px 12px; }
  .sidebar .brand { padding: 2px 8px 10px; gap: 4px; }
  .sidebar .brand .b-full { width: 108px; }
  .nav a { padding: 7px 12px; }
  .nav .sep { margin: 6px 6px; }
  .sidebar .foot { padding-top: 10px; }
  .userbox { padding: 8px; }
}
@media (min-width: 861px) and (max-height: 620px) {
  .nav a { padding: 5px 12px; font-size: 13px; }
  .nav .sep { margin: 4px 6px; }
  .sidebar .brand .tag { display: none; }
}
/* 861–1180px: menu vira uma barra de ícones para sobrar espaço para o conteúdo */
@media (min-width: 861px) and (max-width: 1180px) {
  :root { --sidebar-w: 72px; }
  .sidebar { padding: 14px 8px; }
  .sidebar .brand { align-items: center; padding: 2px 0 12px; }
  .sidebar .brand .b-full, .sidebar .brand .tag { display: none; }
  .sidebar .brand .b-mini { display: block; width: 30px; }
  .nav a { justify-content: center; padding: 10px 0; position: relative; gap: 0; }
  .nav a > span:not(.count) { display: none; }
  .nav a .count { position: absolute; top: 2px; right: 4px; margin: 0; font-size: 9px; padding: 0 4px; min-width: 16px; line-height: 15px; }
  #sbNew { padding: 0; justify-content: center; gap: 0; height: 40px; }
  #sbNew .sb-lbl, #sbNew .kbd { display: none; }
  .userbox { flex-direction: column; padding: 8px 0; gap: 4px; }
  .userbox .who { display: none; }
  .userbox .me-st { flex: none; }
}
@media (min-width: 861px) and (max-width: 1180px) and (max-height: 780px) {
  .nav a { padding: 7px 0; }
}
/* tabelas largas: rolam dentro do cartão em vez de estourar a tela */
.card:has(> .utable), .card-b:has(> .utable) { overflow-x: auto; }
@media (min-width: 861px) and (max-width: 1280px) { .utable th, .utable td { padding-left: 10px; padding-right: 10px; } }

/* ===== v1.13 — quedas: CTO, RADIUS, confirmação ===== */
.qd-card.confirming { opacity: .8; border-style: dashed; }
.ix-kpis small { display: block; font-size: 11px; color: #fbbf24; font-weight: 600; }
.qd-ctol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.qd-ctol svg { width: 14px; height: 14px; }
.qd-ctol span { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-strong); }
.qd-ctol span.full { border-color: rgba(239,68,68,.5); color: #fca5a5; }
.qd-facts { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.qd-facts .ix-pill { margin: 2px 4px 2px 0; }
.qd-sub { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.qd-sub svg { width: 14px; height: 14px; }
.qd-ctos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 8px; }
.qd-cto { position: relative; overflow: hidden; padding: 8px 10px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; font-size: 12px; }
.qd-cto span { color: var(--muted); }
.qd-cto i { position: absolute; left: 0; bottom: 0; height: 3px; background: #f59e0b; }
.qd-cto.full { border-color: rgba(239,68,68,.45); }
.qd-cto.full i { background: #ef4444; }
.qd-cfg-h { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.qd-fields { display: flex; flex-wrap: wrap; gap: 6px; }
.qd-fields > span { font-size: 12px; padding: 3px 8px; border-radius: 8px; border: 1px solid var(--border); color: var(--muted); }
.qd-fields > span.cause { border-color: rgba(78,170,227,.5); color: var(--text); }
.qd-fields > span.date { border-color: rgba(245,158,11,.4); }

/* ===== v1.13 — Painel de ONUs ===== */
.od-head { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.od-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.od-filters select { width: auto; max-width: 220px; }
.od-kpis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.od-kpi { position: relative; overflow: hidden; text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 12px 10px; cursor: pointer; color: var(--text); font: inherit; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.od-kpi:hover { border-color: var(--border-strong); }
.od-kpi::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--acc, var(--brand)); }
.od-kpi.ok { --acc: var(--ok); } .od-kpi.bad { --acc: var(--danger); } .od-kpi.warn { --acc: var(--warn); }
.od-kpi span { font-size: 12px; color: var(--muted); font-weight: 600; }
.od-kpi b { font: 800 24px/1.15 var(--font-display); }
.od-kpi small { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.od-card { min-width: 0; }
.od-wide { grid-column: span 2; }
.od-full { grid-column: 1 / -1; }
.od-hist { display: flex; flex-direction: column; gap: 6px; }
.od-bars { display: flex; align-items: flex-end; gap: 2px; height: 150px; border-bottom: 1px solid var(--border); }
.od-bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: flex-end; background: none; border: 0; padding: 0; cursor: pointer; }
.od-bar:disabled { cursor: default; }
.od-bar i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--brand-1); transition: filter .15s; }
.od-bar:hover:not(:disabled) i { filter: brightness(1.25); }
.od-bar.hot i { background: var(--warn); }
.od-bar.lv-critico i { background: var(--danger); } .od-bar.lv-atencao i { background: var(--warn); } .od-bar.lv-bom i { background: var(--ok); }
.od-bar.lv-forte i { background: repeating-linear-gradient(135deg, var(--danger) 0 3px, color-mix(in srgb, var(--danger) 55%, transparent) 3px 6px); }
.od-axis { display: flex; gap: 2px; font-size: 10.5px; color: var(--muted); }
.od-axis span { flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap; overflow: visible; }
.od-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.od-lg { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; cursor: pointer; }
.od-lg i { width: 10px; height: 10px; border-radius: 3px; background: var(--muted); }
.od-lg i.lv-critico { background: var(--danger); } .od-lg i.lv-atencao { background: var(--warn); } .od-lg i.lv-bom { background: var(--ok); }
.od-lg i.lv-forte { background: repeating-linear-gradient(135deg, var(--danger) 0 2px, transparent 2px 4px); border: 1px solid var(--danger); }
.od-hbars { display: flex; flex-direction: column; gap: 8px; }
.od-hrow { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) auto; gap: 10px; align-items: center; background: none; border: 0; padding: 2px 0; font: inherit; color: var(--text); cursor: pointer; text-align: left; }
.od-hrow:disabled { cursor: default; opacity: .6; }
.od-hl { font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.od-htrack { height: 10px; border-radius: 0 4px 4px 0; background: var(--surface-2); overflow: hidden; }
.od-htrack i { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--brand-1); }
.od-htrack i.c-los { background: var(--danger); } .od-htrack i.c-dgasp { background: var(--warn); } .od-htrack i.c-sem { background: var(--muted); }
.od-hrow b { font-size: 13px; min-width: 28px; text-align: right; }
.od-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.od-stats > div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; }
.od-stats span { font-size: 11.5px; color: var(--muted); }
.od-stats b { font: 700 18px/1.2 var(--font-display); }
.od-tab .n { text-align: right; white-space: nowrap; }
.od-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--brand-1); cursor: pointer; text-align: left; }
.od-vers { display: flex; flex-wrap: wrap; gap: 4px; }
.od-chip { font: inherit; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-2); cursor: pointer; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-chip:hover { border-color: var(--brand-1); }
.od-quality { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.od-q { display: flex; flex-direction: column; gap: 2px; text-align: left; font: inherit; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.od-q:disabled { cursor: default; opacity: .6; }
.od-q.has { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.od-q b { font: 800 20px/1.2 var(--font-display); }
.od-q span { font-size: 12px; color: var(--muted); }
.od-list { max-height: 60vh; }
.od-tip { position: fixed; z-index: 200; pointer-events: none; background: #0b0f16; color: #e8ecf3; border: 1px solid #2a3342; font-size: 12px; padding: 6px 9px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.35); display: none; white-space: nowrap; }
@media (max-width: 1280px) { .od-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .od-quality { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .od-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .od-wide { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .od-grid { grid-template-columns: minmax(0, 1fr); } .od-grid > .od-card { grid-column: 1 / -1 !important; }
  .od-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .od-quality { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .od-filters { width: 100%; } .od-filters select { flex: 1 1 140px; max-width: none; }
  .od-bars { height: 120px; } .od-hrow { grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto; }
}
/* tabelas do Painel de ONUs: no celular rolam de lado (mantêm colunas e cabeçalho) */
@media (max-width: 860px) {
  .utable.od-tab { display: table; width: 100%; min-width: 560px; }
  .utable.od-tab thead { display: table-header-group; }
  .utable.od-tab tbody { display: table-row-group; }
  .utable.od-tab tr { display: table-row; padding: 0; position: static; }
  .utable.od-tab td, .utable.od-tab th { display: table-cell; width: auto; padding: 9px 10px; position: static; border-top: 1px solid var(--border) !important; }
  .od-list .utable { display: table; min-width: 820px; }
  .od-list .utable thead { display: table-header-group; } .od-list .utable tbody { display: table-row-group; }
  .od-list .utable tr { display: table-row; padding: 0; position: static; } .od-list .utable td, .od-list .utable th { display: table-cell; width: auto; padding: 8px; position: static; border-top: 1px solid var(--border) !important; }
}
.modal.wide:has(.od-list) { max-width: min(1180px, calc(100vw - 32px)); }
.od-list td { vertical-align: top; }
.ix-rxtx { display: inline-flex; flex-direction: column; align-items: flex-end; font-size: 11.5px; line-height: 1.25; font-family: ui-monospace, monospace; }

/* ===== v1.18 — barra central de carregamento ===== */
.gl-load { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity .18s; }
.gl-load.on { opacity: 1; }
.gl-card { width: min(360px, calc(100vw - 48px)); background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--border-strong); border-radius: 14px;
  padding: 14px 16px 12px; box-shadow: 0 18px 50px rgba(0,0,0,.45); backdrop-filter: blur(6px); }
.gl-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.gl-t { flex: 1; min-width: 0; font-weight: 700; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-p { font: 800 15px/1 var(--font-display); color: var(--brand-1); font-variant-numeric: tabular-nums; }
.gl-bar { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.gl-bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--brand-grad); transition: width .2s linear; position: relative; overflow: hidden; }
.gl-bar i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: glshine 1.1s linear infinite; }
@keyframes glshine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.gl-s { margin-top: 8px; font-size: 11.5px; color: var(--muted); min-height: 14px; font-variant-numeric: tabular-nums; }
#view > .loading .spin { display: none; }
@media (prefers-reduced-motion: reduce) { .gl-bar i::after { animation: none; } .gl-bar i { transition: none; } }

/* ===== v1.19 — seletor em menu (substitui fileiras de chips) ===== */
.pk-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; }
.pk-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; max-width: 100%; padding: 5px 10px 5px 12px; border-radius: 10px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; text-align: left; transition: border-color .15s, background .15s; }
.pk-btn:hover, .pk-btn.open { border-color: var(--brand-1); }
.pk-btn.set { background: color-mix(in srgb, var(--brand-1) 10%, var(--surface)); border-color: color-mix(in srgb, var(--brand-1) 55%, transparent); }
.pk-btn > svg:first-child { width: 16px; height: 16px; color: var(--muted); flex: none; }
.pk-btn.set > svg:first-child { color: var(--brand-1); }
.pk-l { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.pk-l small { font-size: 10.5px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.pk-l b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }
.pk-caret { width: 15px; height: 15px; color: var(--muted); flex: none; transition: transform .15s; }
.pk-btn.open .pk-caret { transform: rotate(180deg); }
.pk-n { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 1px 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pk-n.bad { color: #f87171; background: rgba(239,68,68,.12); }
.pk-menu { position: fixed; z-index: 300; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(0,0,0,.45); overflow: hidden; animation: pkin .12s ease-out; }
@keyframes pkin { from { opacity: 0; transform: translateY(-4px); } }
.pk-s { position: relative; padding: 8px; border-bottom: 1px solid var(--border); }
.pk-s svg { position: absolute; left: 19px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); }
.pk-s .input { padding-left: 32px; height: 36px; }
.pk-list { overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 1px; }
.pk-it { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--text-2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.pk-it:hover, .pk-it:focus-visible { background: var(--surface-2); color: var(--text); outline: none; }
.pk-it.on { color: var(--text); font-weight: 600; background: color-mix(in srgb, var(--brand-1) 12%, transparent); }
.pk-it-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pk-ok { width: 15px; height: 15px; color: var(--brand-1); flex: none; }
.od-filters .pk-btn { min-height: 34px; }
@media (max-width: 640px) {
  .pk-row .pk-btn, .od-filters .pk-btn { flex: 1 1 calc(50% - 8px); }
  .pk-l b { max-width: none; }
}

/* ---- Sessões RADIUS (somente leitura) ---- */
.ra-seg { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin: 14px 0 0; }
.ra-seg::-webkit-scrollbar { display: none; }
.ra-seg button { height: 32px; padding: 0 12px; font-size: 13px; white-space: nowrap; flex: 0 0 auto; }
.od-kpis.ra-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ra-series .od-bars { gap: 1px; }
.ra-series .ra-hwrap { overflow-x: auto; }
.ra-series .ra-hwrap .od-hist { min-width: 520px; }
.ra-ipf { display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 10px; align-items: end; }
.ra-ipf .field { margin: 0; }
.ra-ipb { display: flex; gap: 8px; }
.ra-heat { display: grid; grid-template-columns: 38px repeat(24, minmax(16px, 1fr)); gap: 3px; min-width: 520px; align-items: center; }
.ra-heat i { display: block; height: 22px; border-radius: 4px; background: var(--border); opacity: .5; }
.ra-heat i.l1 { background: #4eaae3; opacity: .25; } .ra-heat i.l2 { background: #4eaae3; opacity: .5; } .ra-heat i.l3 { background: #4eaae3; opacity: .8; }
.ra-heat i.l4 { background: #f59e0b; opacity: .9; } .ra-heat i.l5 { background: #ef4444; opacity: 1; }
.ra-hh { font-size: 10px; color: var(--muted); text-align: center; }
.ra-hd { font-size: 11px; color: var(--muted); }
.ra-tl { position: relative; height: 22px; border-radius: 6px; background: var(--border); overflow: hidden; }
.ra-tl i { position: absolute; top: 3px; bottom: 3px; background: #22c55e; border-radius: 3px; min-width: 2px; }
.ra-tl i.open { background: #4eaae3; }
.ra-tla { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: -6px; }
@media (max-width: 860px) {
  .od-kpis.ra-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ra-ipf { grid-template-columns: 1fr 1fr; }
  .ra-ipb { grid-column: 1 / -1; } .ra-ipb .btn { flex: 1; justify-content: center; }
}
@media (max-width: 520px) { .ra-ipf { grid-template-columns: 1fr; } .ra-seg button { font-size: 12px; padding: 0 9px; } }

.ra-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
.ra-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--text); font-size: 12.5px; cursor: pointer; }
.ra-chip.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 16%, transparent); }
.ra-chip sup, .ra-tag sup { font-size: 10px; font-weight: 700; line-height: 1; padding: 2px 5px; border-radius: 999px; background: var(--danger); color: #fff; vertical-align: 0; font-family: var(--font); }
.ra-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 7px; margin: 2px 6px 2px 0; border: 1px solid var(--border); border-radius: 6px; font-size: 12px; }
.ra-more { padding: 8px 14px 12px; text-align: center; }
.utable.ra-lean td, .utable.ra-lean th { padding-top: 8px; padding-bottom: 8px; }

/* carregamento leve no cabeçalho (v1.21) — .topbar já é sticky (serve de referência) */
.tb-load { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .18s; }
.tb-load.free { position: fixed; top: 0; bottom: auto; z-index: 400; }
.tb-load.on { opacity: 1; }
.tb-load i { display: block; height: 100%; width: 0; background: var(--brand-grad); border-radius: 0 3px 3px 0; transition: width .2s linear; box-shadow: 0 0 8px color-mix(in srgb, var(--brand) 60%, transparent); }
@media (prefers-reduced-motion: reduce) { .tb-load i { transition: none; } }

/* PON/OLT — resumo de todas as OLTs (v1.21.3) */
.olt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.olt-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer; font: inherit; transition: border-color .15s, transform .15s, box-shadow .15s; }
.olt-card:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.olt-h { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.olt-h svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--brand); }
.olt-h b { min-width: 0; font-size: 13px; line-height: 1.3; overflow-wrap: break-word; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.olt-n { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.olt-n b { font: 800 26px/1 var(--font-display, var(--font)); font-variant-numeric: tabular-nums; }
.olt-n span { font-size: 12px; color: var(--muted); }
.olt-on { display: flex; flex-direction: column; gap: 6px; }
.olt-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--danger) 55%, transparent); overflow: hidden; }
.olt-bar i { display: block; height: 100%; background: var(--ok); border-radius: 999px; }
.olt-onl { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; font-variant-numeric: tabular-nums; }
.ok-t { color: var(--ok); }
.olt-rx { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2, rgba(127,127,127,.08)); font-size: 12px; }
.olt-rx span { color: var(--muted); }
.olt-rx b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.olt-rx.ok b { color: var(--ok); } .olt-rx.warn b { color: var(--warn); } .olt-rx.bad b { color: var(--danger); }
.olt-st { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.olt-st div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border-radius: 8px; border: 1px solid var(--border); min-width: 0; }
.olt-st b { font-size: 15px; font-variant-numeric: tabular-nums; }
.olt-st span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.olt-st .bad { border-color: color-mix(in srgb, var(--danger) 45%, transparent); } .olt-st .bad b { color: var(--danger); }
.olt-st .warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); } .olt-st .warn b { color: var(--warn); }
.olt-note { font-size: 11.5px; color: var(--muted); margin-top: -4px; }
@media (max-width: 520px) { .olt-grid { grid-template-columns: 1fr; } }

.olt-age { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 11.5px; color: var(--muted); margin-top: -4px; }
.olt-age svg { width: 13px; height: 13px; flex: 0 0 auto; }
.olt-age.stale { color: var(--warn); font-weight: 600; }
.olt-card.stale { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }

/* v1.22.2 — celular: nenhum campo abaixo de 16px (senão o iOS dá zoom ao tocar e o menu de baixo/topo "soltam" da tela) */
@media (max-width: 860px), (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea { font-size: 16px !important; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .seg button { white-space: nowrap; flex-shrink: 0; }
}

/* v1.22.3 — celular: a página não rola mais o documento; quem rola é só a área do meio (.main).
   O menu de baixo e o + viram parte do layout (não são mais "fixed"), então o iOS não tem como deixá-los soltos. */
@media (max-width: 860px) {
  html:has(.shell), body:has(.shell) { height: 100%; overflow: hidden; overscroll-behavior: none; }
  .shell { display: flex; flex-direction: column; height: 100vh; height: 100dvh; min-height: 0; position: relative; overflow: hidden; }
  .shell > .main { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
  .shell > .bottomnav { position: relative !important; left: auto; right: auto; bottom: auto; flex: 0 0 auto; transform: none !important; -webkit-transform: none !important; will-change: auto; }
  .shell > .fab { position: absolute; transform: none; }
  .content { padding-bottom: 84px; }
  html.kb-open .bottomnav, html.kb-open .fab { display: none !important; }
  html:has(.modal-bg) .shell > .main { overflow: hidden; }
}
.ix-tabs { scroll-margin-top: 84px; }

/* v1.23.1 — menu do celular no estilo do CT Garra: botão MENU no topo abre abas (categorias) + lista de itens */
.mm-btn, .mmenu { display: none; }
@media (max-width: 860px) {
  .shell > .bottomnav, .shell > .fab { display: none !important; }
  .content { padding-bottom: 28px !important; }
  #toasts { bottom: calc(16px + env(safe-area-inset-bottom)) !important; }
  .topbar .mlogo { width: 24px; }
  .mm-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; flex: 0 0 auto; width: 54px; height: 46px; border-radius: 12px; border: 0;
    background: var(--brand-grad); color: #fff; cursor: pointer; position: relative; box-shadow: 0 4px 14px rgba(62,122,196,.35); -webkit-tap-highlight-color: transparent; }
  .mm-btn small { font-size: 10px; font-weight: 800; letter-spacing: .06em; line-height: 1; }
  .mm-bars { position: relative; width: 22px; height: 14px; display: block; }
  .mm-bars i { position: absolute; left: 0; right: 0; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .2s, opacity .2s, top .2s; }
  .mm-bars i:nth-child(1) { top: 0; } .mm-bars i:nth-child(2) { top: 5.75px; } .mm-bars i:nth-child(3) { top: 11.5px; }
  html.mm-open .mm-bars i:nth-child(1) { top: 5.75px; transform: rotate(45deg); }
  html.mm-open .mm-bars i:nth-child(2) { opacity: 0; }
  html.mm-open .mm-bars i:nth-child(3) { top: 5.75px; transform: rotate(-45deg); }
  .mm-dot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #fc7a1e; border: 2px solid var(--bg); }
  html.mm-open .mm-dot { display: none; }

  .mmenu:not([hidden]) { display: block; position: absolute; z-index: 45; left: 0; right: 0; top: var(--mm-top, 60px); bottom: 0; overflow-y: auto; overscroll-behavior: contain;
    background: var(--bg); padding: 14px 14px calc(20px + env(safe-area-inset-bottom)); animation: mmIn .18s ease-out; }
  @keyframes mmIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  html.mm-open .shell > .main { overflow: hidden; }
  .mm-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 7px; margin-bottom: 12px; }
  .mm-cat { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-width: 0; height: 64px; padding: 6px 2px;
    border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2, var(--muted)); font: inherit; font-size: 11.5px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mm-cat svg { width: 22px; height: 22px; }
  .mm-cat span:not(.count) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mm-cat.on { background: var(--surface-2); border-color: var(--brand-1); color: #fff; }
  .mm-cat.on svg { color: var(--brand-1); }
  .mm-caret { position: absolute; right: 6px; bottom: 5px; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; opacity: .7; }
  .mm-cat .count { position: absolute; top: -7px; right: -4px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: #fc7a1e; color: #fff; font-size: 11px; font-weight: 800; line-height: 20px; text-align: center; }
  .mm-list { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
  .mm-it { display: flex; align-items: center; gap: 14px; min-height: 54px; padding: 8px 12px; border-radius: 12px; border: 0; background: none; color: var(--text); text-decoration: none;
    font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .mm-it:active { background: var(--surface-2); }
  .mm-ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand-1) 14%, transparent); color: var(--brand-1); }
  .mm-ic svg { width: 19px; height: 19px; }
  .mm-l { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mm-it .count { min-width: 24px; height: 24px; padding: 0 8px; border-radius: 99px; background: var(--danger); color: #fff; font-size: 12px; font-weight: 800; line-height: 24px; text-align: center; }
  .mm-it.on { background: #fff; color: #0b1220; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
  .mm-it.on .mm-ic { background: var(--brand-grad); color: #fff; }
  .mm-it.hl .mm-ic { background: var(--brand-grad); color: #fff; }
  .mm-it.hl { color: var(--brand-1); }
  .mm-it.danger { color: var(--danger); } .mm-it.danger .mm-ic { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
  html[data-theme='light'] .mm-cat.on { color: var(--text); }
  html[data-theme='light'] .mm-it.on { background: var(--brand-1); color: #fff; }
  html.kb-open .mm-btn { display: flex; }
}
@media (prefers-reduced-motion: reduce) { .mmenu, .mm-bars i { animation: none !important; transition: none !important; } }

/* v1.24 — Transmissores (OLT) */
.warn-t { color: var(--warn); }
.tx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.tx-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); }
.tx-card.warn { border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.tx-card.bad { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.tx-card.off { opacity: .6; }
.tx-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tx-t { display: flex; align-items: flex-start; gap: 8px; min-width: 0; flex: 1 1 160px; }
.tx-t svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 2px; color: var(--brand-1); }
.tx-t b { font-size: 14px; line-height: 1.3; overflow-wrap: break-word; word-break: break-word; min-width: 0; }
.tx-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.tx-sub { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; margin-top: -4px; }
.tx-ms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tx-m { display: flex; flex-direction: column; gap: 3px; padding: 8px; border-radius: 10px; background: var(--surface-2); min-width: 0; }
.tx-m span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.tx-m b { font-size: 15px; font-variant-numeric: tabular-nums; }
.tx-m i { display: block; height: 4px; border-radius: 99px; background: var(--border); overflow: hidden; }
.tx-m i em { display: block; height: 100%; background: var(--ok); border-radius: 99px; }
.tx-m.bad b { color: var(--danger); } .tx-m.bad i em { background: var(--danger); }
.tx-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: 12.5px; }
.tx-kv div { display: flex; flex-direction: column; min-width: 0; }
.tx-kv span { font-size: 11px; color: var(--muted); }
.tx-kv b { font-weight: 700; overflow-wrap: anywhere; }
.tx-kv small { font-size: 11px; font-weight: 700; }
.tx-al { display: flex; flex-direction: column; gap: 5px; }
.tx-al div { display: flex; align-items: center; gap: 7px; font-size: 12px; padding: 6px 9px; border-radius: 8px; }
.tx-al svg { width: 14px; height: 14px; flex: 0 0 auto; }
.tx-al .bad { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.tx-al .warn { background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--warn); }
.tx-al .off { background: var(--surface-2); color: var(--muted); }
.tx-act { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.tx-det td:first-child { white-space: nowrap; width: 40%; }
@media (max-width: 520px) { .tx-grid { grid-template-columns: 1fr; } }

/* v1.24.1 — seções dentro das abas de Configurações */
.cfg-sub { display: flex; gap: 6px; margin: 0 0 14px; padding: 5px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); overflow-x: auto; scrollbar-width: none; }
.cfg-sub::-webkit-scrollbar { display: none; }
.cfg-sub button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 9px; border: 0; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.cfg-sub button svg { width: 16px; height: 16px; }
.cfg-sub button:hover { color: var(--text); background: var(--surface-2); }
.cfg-sub button.on { color: #fff; background: var(--brand-grad); }
.cfg-grid.sectioned { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.cfg-grid.sectioned > .card { grid-column: 1 / -1 !important; }
.cfg-grid > [hidden] { display: none !important; }

/* eixo dos histogramas: rótulo alinhado à esquerda do seu grupo de barras, sem vazar */
.od-axis span { text-align: left; overflow: hidden; text-overflow: clip; white-space: nowrap; }
.od-axis.c span { text-align: center; white-space: normal; overflow-wrap: anywhere; line-height: 1.15; }
.tx-m span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ra-series .od-axis { gap: 1px; }

/* v1.24.2 — Monitoramento em abas */
.mon-sub { margin-bottom: 16px; }
.mon-n { font-style: normal; font-size: 10.5px; font-weight: 800; min-width: 18px; padding: 1px 6px; border-radius: 99px; background: var(--surface-2); color: var(--text); text-align: center; }
.mon-n:empty { display: none; }
.mon-n.bad { background: var(--danger); color: #fff; }
.cfg-sub button.on .mon-n { background: rgba(255,255,255,.25); color: #fff; }
.mon-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; margin: 16px 0; }
.mon-2 > .card { margin: 0; }
.mon-u { align-items: flex-start !important; flex-direction: column; gap: 2px; }
.mon-u .u-dev { padding-left: 32px; }
.mon-api .spark { width: 100%; height: 70px; }
@media (max-width: 520px) { .mon-2 { grid-template-columns: minmax(0, 1fr); } .mon-u .u-dev { padding-left: 0; } }
@media (max-width: 860px) { #monUpd { display: none; } }

/* v1.25 — verificação em 2 etapas */
.login-card.mfa-card { max-width: 420px; }
.mfa-p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #c8d0dd; text-align: left; }
.modal .mfa-p { color: var(--text); }
.mfa-code { text-align: center; font-size: 26px !important; letter-spacing: .3em; font-family: var(--mono, ui-monospace, monospace); height: 54px; }
.mfa-steps { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.55; color: inherit; text-align: left; }
.mfa-qr { display: grid; place-items: center; margin: 12px auto; width: 200px; max-width: 70vw; aspect-ratio: 1; background: #fff; border-radius: 12px; padding: 8px; }
.mfa-qr svg { width: 100%; height: 100%; display: block; }
.mfa-man { font-size: 12.5px; margin: 0 0 10px; text-align: left; }
.mfa-man summary { cursor: pointer; color: var(--brand-1); }
.mfa-key { margin: 8px 0 4px; padding: 8px 10px; border-radius: 8px; background: rgba(127,127,127,.12); font-size: 15px; letter-spacing: .08em; word-break: break-all; user-select: all; }
.mfa-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.mfa-codes span { padding: 9px; border-radius: 8px; background: rgba(127,127,127,.12); text-align: center; font-size: 15px; letter-spacing: .06em; user-select: all; }
.mfa-policy { margin-bottom: 14px; }
.mfa-policy svg { width: 22px; height: 22px; color: var(--brand-1); }
.login-card .mfa-steps, .login-card .mfa-man { color: #c8d0dd; }
.login-card.mfa-card .sub { letter-spacing: .14em; white-space: normal; overflow-wrap: anywhere; } .login-card.mfa-card { min-width: 0; }
.login-card.mfa-card .btn.ghost { white-space: normal; height: auto; min-height: 36px; padding-top: 8px; padding-bottom: 8px; text-align: center; }
.mfa-open { display: flex; width: 100%; white-space: normal; height: auto; min-height: 38px; padding: 8px 12px; text-align: center; margin: 0 0 10px; font-size: 12.5px; } @media (hover: hover) and (pointer: fine) { .mfa-open { display: none; } }
.modal.wide:has(.qd-cl) { max-width: min(1080px, calc(100vw - 32px)); } .utable.qd-cl td { vertical-align: top; } .utable.qd-cl th:nth-child(1) { width: 30%; } .utable.qd-cl th:nth-child(4) { width: 130px; }
@media (min-width: 861px) { .ix-top .ix-seg { flex-wrap: wrap; overflow: visible; height: auto; row-gap: 4px; } }
.utable.qd-cl td:nth-child(2) div { white-space: nowrap; }

/* v1.26 — recuperação de conta */
.rq-list { display: flex; flex-direction: column; }
.rq { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border-top: 1px solid var(--border); }
.rq.pendente { background: color-mix(in srgb, var(--warn) 6%, transparent); }
.rq-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rq-msg { font-size: 13px; padding: 6px 10px; border-left: 3px solid var(--brand-1); background: var(--surface-2); border-radius: 0 8px 8px 0; margin-top: 2px; }
.rq-act { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 860px) { .topbar #pgSub { display: none; } }

/* v1.27 — interface ajustada ao tamanho do monitor (zoom). Com zoom, 100vh/100vw ficam maiores que a tela: divide por --z */
:root { --z: 1; }
html[data-zoom] .shell { min-height: calc(100dvh / var(--z)); }
html[data-zoom] .sidebar { height: calc(100dvh / var(--z)); }
html[data-zoom] .boot, html[data-zoom] .login { min-height: calc(100dvh / var(--z)); }
html[data-zoom] .modal { max-height: calc(100dvh / var(--z) - 32px); }
html[data-zoom] .kcol { max-height: calc(100dvh / var(--z) - 190px); }
html[data-zoom] .od-list { max-height: calc(60dvh / var(--z)); }
html[data-zoom] .pd-lb-img, html[data-zoom] .pd-lb-img img { max-height: calc(70dvh / var(--z)); }
html[data-zoom] .rb-res { max-height: min(calc(52dvh / var(--z)), 460px); }
html[data-zoom] .modal.wide:has(.od-list) { max-width: min(1180px, calc(100vw / var(--z) - 32px)); }
html[data-zoom] .modal.wide:has(.qd-cl) { max-width: min(1080px, calc(100vw / var(--z) - 32px)); }
html[data-zoom] .gl-card { width: min(360px, calc(100vw / var(--z) - 48px)); }
html[data-zoom] .boot { height: calc(100dvh / var(--z)); }

/* ===== v1.28 — manutenção programada, mapa da queda, atalhos, impressão ===== */
.mw-now { margin-bottom: 14px; }
.mw-now svg { color: var(--brand-1); }
.mw-list { padding: 4px 0; }
.mw-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.mw-row:last-of-type { border-bottom: 0; }
.mw-row.st-ativa { background: color-mix(in srgb, var(--brand-1) 8%, transparent); }
.mw-row.st-encerrada, .mw-row.st-cancelada { opacity: .62; }
.mw-row.st-cancelada .mw-t b { text-decoration: line-through; }
.mw-when { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mw-when b { font-size: 13px; text-transform: capitalize; }
.mw-when span { font: 600 12px/1.3 ui-monospace, monospace; }
.mw-when small { color: var(--muted); font-size: 11px; }
.mw-main { min-width: 0; }
.mw-t { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mw-t b { overflow-wrap: anywhere; }
.mw-main .muted { overflow-wrap: anywhere; margin-top: 2px; }
.mw-note { margin-top: 4px; color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.mw-act { display: flex; gap: 4px; }
.mw-more { margin: 6px 14px 8px; }
@media (max-width: 640px) {
  .mw-row { grid-template-columns: minmax(0, 1fr) auto; }
  .mw-when { grid-column: 1 / -1; flex-direction: row; gap: 8px; align-items: baseline; flex-wrap: wrap; }
  .mw-main { grid-column: 1; }
}

.qd-mapbox { min-width: 0; }
.qd-map { position: relative; isolation: isolate; height: 360px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border-strong); background: var(--surface-2, #0f141b); }
.qd-map-ld { position: absolute; inset: 0; display: grid; place-items: center; }
.qd-map .leaflet-popup-content { font-size: 12px; line-height: 1.35; margin: 10px 12px; }
.qd-map .leaflet-popup-content .mono { font-family: ui-monospace, monospace; }
.qd-map .leaflet-control-layers { font-size: 12px; }
.qd-mleg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.qd-mleg i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.qd-mleg i.off { background: #ef4444; border: 1px solid #991b1b; }
.qd-mleg i.back { background: #22c55e; border: 1px solid #15803d; }
.qd-mleg i.on { background: #94a3b8; border: 1px solid #64748b; }
.qd-mleg i.cto { border-radius: 2px; background: #1f4e8c; border: 1px solid #fff; }
.qd-cto-ic span { display: inline-block; transform: translate(-50%, -50%); padding: 1px 5px; border-radius: 4px; background: #1f4e8c; color: #fff; font: 700 10px/1.4 ui-monospace, monospace; border: 1px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); white-space: nowrap; }
@media (max-width: 860px) { .qd-map { height: 280px; } }

/* atalhos */
.sb-kb { display: flex; align-items: center; gap: 8px; width: 100%; margin: 8px 0 2px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font: inherit; font-size: 12px; cursor: pointer; }
.sb-kb:hover { background: var(--surface-2, rgba(255,255,255,.05)); color: var(--text); }
.sb-kb svg { width: 15px; height: 15px; flex: none; }
.sb-kb .kbd { margin-left: auto; }
@media (min-width: 861px) and (max-width: 1180px) { .sb-kb { justify-content: center; padding: 6px 0; } .sb-kb .sb-lbl, .sb-kb .kbd { display: none; } }
.kb-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.kb-tbl td { padding: 6px 4px; border-bottom: 1px solid var(--border); }
.kb-tbl td.kb-keys { white-space: nowrap; width: 1%; padding-right: 16px; }
.kb-tbl .kbd { font-size: 11px; padding: 3px 7px; }
.kb-hint { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 200; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 32px); padding: 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow); font-size: 12px; color: var(--muted); animation: fade .12s; }
.kb-hint .kbd { color: var(--text); }

/* ---- impressão ---- */
.print-head { display: none; }
/* antes de imprimir o mapa assume o tamanho do papel (o Leaflet reenquadra os pontos) */
html.printing .qd-map { width: 1000px !important; max-width: none !important; height: 330px !important; }
@media print {
  @page { size: A4 landscape; margin: 10mm; } /* paisagem: cabe o layout de desktop e as tabelas largas */
  html, body { background: #fff !important; color: #111 !important; height: auto !important; overflow: visible !important; }
  html { zoom: 1 !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none !important; backdrop-filter: none !important; animation: none !important; }
  .print-head { display: flex !important; align-items: center; gap: 14px; padding: 0 0 8px; margin-bottom: 12px; border-bottom: 2px solid #1f4e8c; }
  .print-head img { height: 30px; width: auto; }
  .print-head b { display: block; font-size: 16px; color: #14305a; }
  .print-head span { font-size: 11px; color: #555; }
  /* tela */
  .sidebar, .topbar .mm-btn, .topbar .mlogo, #pgActions, .topbar .new-d, #pushBanner, .mmenu, #toasts, .tb-load, .gl-load, .kb-hint, .bottomnav, #bnav, .tb-search, .inst-nudge { display: none !important; }
  .topbar { display: none !important; }
  .shell { display: block !important; height: auto !important; min-height: 0 !important; }
  .shell > .main, .main { display: block !important; height: auto !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; }
  .content { padding: 0 !important; max-width: none !important; overflow: visible !important; }
  .card, .kpi, .qd-card, .ix-kpis > div { break-inside: avoid; border-color: #ccc !important; background: #fff !important; }
  .btn, button, .ix-tabs, .ix-hh-act, .qd-act, .mw-act, .mw-more, select.input, .cfg-sub { display: none !important; }
  a { color: inherit !important; text-decoration: none !important; }
  .tscroll, .card-b, .card { overflow: visible !important; }
  table { break-inside: auto; } tr { break-inside: avoid; } thead { display: table-header-group; }
  .leaflet-control-zoom, .leaflet-control-layers { display: none !important; }
  /* tabelas sempre como tabela no papel (mesmo se a folha for estreita) */
  .utable { display: table !important; width: 100% !important; }
  .utable thead { display: table-header-group !important; } .utable tbody { display: table-row-group !important; }
  .utable tr { display: table-row !important; position: static !important; padding: 0 !important; }
  .utable td, .utable th { display: table-cell !important; width: auto; position: static !important; padding: 5px 8px !important; border-top: 1px solid #ddd !important; }
  /* só a janela (detalhe da queda) */
  html.print-modal body > *:not(.print-target):not(.print-head) { display: none !important; }
  html.print-modal .print-target { position: static !important; display: block !important; background: none !important; padding: 0 !important; inset: auto !important; }
  html.print-modal .print-target .modal { max-width: none !important; width: 100% !important; max-height: none !important; border: 0 !important; border-radius: 0 !important; background: #fff !important; display: block !important; }
  html.print-modal .print-target .modal-h { display: none !important; } /* o título já vai no cabeçalho da folha */
  html.print-modal .print-target .modal-b { padding: 0 !important; overflow: visible !important; max-height: none !important; }
  html.print-modal .print-target .modal-f { display: none !important; }
  .qd-map { break-inside: avoid; border-color: #bbb !important; }
  .qd-cl td, .qd-cl th { font-size: 10.5px !important; padding: 4px 6px !important; }
  .notice { background: #f3f6fa !important; border-color: #c9d4e3 !important; }
  .ix-pill { border: 1px solid #bbb !important; }
}

/* prazo em dias */
.due-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.due-row > input[type="datetime-local"] { flex: 1 1 190px; min-width: 0; }
.due-days { position: relative; flex: 0 0 150px; }
.due-days input { padding-right: 44px; }
.due-days span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 13px; pointer-events: none; }
@media (max-width: 480px) { .due-days { flex: 1 1 100%; } }

/* clientes por filial (PON / OLT) */
.ix-filbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.ix-filc { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font: inherit; font-size: 12px; max-width: 100%; }
.ix-filc svg { width: 13px; height: 13px; flex: none; color: #a78bfa; }
.ix-filc b { color: var(--text); }
.ix-filc small { font-size: 11px; }
button.ix-filc { cursor: pointer; }
button.ix-filc:hover { border-color: var(--brand-1); }
.ix-filc.on { border-color: var(--brand-1); background: color-mix(in srgb, var(--brand-1) 14%, transparent); color: var(--text); }
.ix-pt-fil { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 11.5px; color: var(--text-2); min-width: 0; }
.ix-pt-fil span { display: flex; align-items: center; gap: 4px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ix-pt-fil svg { width: 12px; height: 12px; flex: none; color: #a78bfa; }
.ix-pt-fil b { margin-left: auto; color: var(--text); padding-left: 6px; }
/* mapa da PON */
.pon-mapcard { padding: 10px; margin-bottom: 12px; }
.pon-mapcard .qd-map { height: 420px; }
.pon-mapcard .qd-mleg .sp { flex: 1; }
@media (max-width: 860px) { .pon-mapcard { padding: 8px; } .pon-mapcard .qd-map { height: 320px; } }
/* mapa da OLT */
.om-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.om-bar select { flex: 1 1 220px; max-width: 360px; min-width: 0; }
.om-color { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; }
.om-color button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; padding: 7px 12px; cursor: pointer; }
.om-color button.on { background: color-mix(in srgb, var(--brand-1) 18%, transparent); color: var(--text); }
.om-map { height: 520px; }
.om-pl { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border); background: transparent; color: var(--text-2); border-radius: 999px; padding: 2px 8px; font: 600 11px/1.4 ui-monospace, monospace; cursor: pointer; }
.om-pl i { width: 10px; height: 10px; border-radius: 50%; margin: 0 !important; border: 1px solid rgba(0,0,0,.35); }
.qd-mleg i.unk { background: #60a5fa; border: 1px solid #1d4ed8; }
@media (max-width: 860px) { .om-map { height: 380px; } .om-bar select { max-width: none; } }

/* ===== v1.29 — Integração Zabbix / topologia ===== */
.zb-groups { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.zb-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.zb-tools .search { flex: 1 1 240px; }
.zb-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; flex: none; }
.zb-prob { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.zb-prob:last-child { border-bottom: 0; }
.zb-prob.row { cursor: pointer; } .zb-prob.row:hover { background: var(--surface-2); }
.zb-sev { width: 6px; align-self: stretch; min-height: 32px; border-radius: 3px; flex: none; }
.zb-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.zb-item { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: inherit; font: inherit; cursor: pointer; min-width: 0; }
.zb-item span { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zb-item b { font-size: 16px; }
.zb-item:hover { border-color: var(--brand-1); }
.zb-ubar { position: relative; height: 16px; min-width: 80px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.zb-ubar i { position: absolute; inset: 0 auto 0 0; background: #22c55e; opacity: .55; }
.zb-ubar.warn i { background: #facc15; } .zb-ubar.bad i { background: #ef4444; }
.zb-ubar span { position: relative; font-size: 11px; font-weight: 700; padding-left: 6px; line-height: 16px; }
.zb-chartbox { min-height: 280px; }
.zb-chart { width: 100%; height: 280px; display: block; }
.zb-chart .g { stroke: var(--border); stroke-width: 1; }
.zb-chart text { fill: var(--muted); font-size: 11px; }

.zt-bar, .zt-edbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.zt-bar select { flex: 0 1 300px; min-width: 0; }
.zt-bar .sp, .zt-edbar .sp { flex: 1; }
.zt-edbar { padding: 8px 10px; border-radius: 12px; border: 1px dashed var(--brand-1); background: color-mix(in srgb, var(--brand-1) 7%, transparent); }
.zt-wrap { position: relative; height: calc(100vh - 250px); min-height: 440px; border-radius: 14px; border: 1px solid var(--border-strong); overflow: hidden; touch-action: none; user-select: none;
  background-color: var(--surface); background-image: radial-gradient(color-mix(in srgb, var(--text) 10%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
html[data-zoom] .zt-wrap { height: calc(100vh / var(--z) - 250px); }
.zt-wrap.editing { border-color: var(--brand-1); }
.zt-svg { width: 100%; height: 100%; display: block; cursor: grab; }
.zt-svg:active { cursor: grabbing; }
.zt-link .hit { fill: none; stroke: transparent; stroke-width: 18; cursor: pointer; }
.zt-link .ln { fill: none; stroke-linecap: round; pointer-events: none; }
.zt-link .mid { fill: var(--surface); stroke: var(--muted); stroke-width: 1.5; pointer-events: none; }
.zt-link.sel .ln { filter: drop-shadow(0 0 4px var(--brand-1)); }
.zt-link.stale .ln { stroke-dasharray: 6 5; opacity: .6; }
.zt-lab { pointer-events: none; }
.zt-lab rect { fill: var(--surface); stroke-width: 1.5; }
.zt-lab text { font: 700 11px/1 ui-monospace, monospace; fill: var(--text); }
.zt-ltxt { font-size: 11px; fill: var(--muted); font-weight: 600; pointer-events: none; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.zt-util { font: 700 10px ui-monospace, monospace; fill: var(--muted); pointer-events: none; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.zt-node { cursor: pointer; }
.zt-wrap.editing .zt-node { cursor: move; }
.zt-node .ring { fill: none; stroke-width: 4; }
.zt-node .bg { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1; }
.zt-node .ic { fill: none; stroke: var(--text); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.zt-node.free .bg { fill: color-mix(in srgb, var(--brand-1) 12%, var(--surface-2)); }
.zt-node .nm { font-size: 12px; font-weight: 700; fill: var(--text); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.zt-node .ip { font: 10.5px ui-monospace, monospace; fill: var(--muted); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.zt-node .bdg { font-size: 10px; font-weight: 800; fill: #111; }
.zt-node.sel .bg, .zt-node.linking .bg { stroke: var(--brand-1); stroke-width: 3; }
.zt-node:hover .bg { stroke: var(--brand-1); }
.zt-zoom { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-strong); background: var(--surface); }
.zt-zoom button { width: 34px; height: 32px; border: 0; background: transparent; color: var(--text); font-size: 18px; cursor: pointer; }
.zt-zoom button + button { border-top: 1px solid var(--border); }
.zt-zoom button:hover { background: var(--surface-2); }
.zt-hint { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: var(--brand-1); color: #fff; font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow); max-width: calc(100% - 80px); text-align: center; }
.zt-legend { position: absolute; left: 10px; bottom: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 5px 10px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border); font-size: 11.5px; color: var(--muted); max-width: calc(100% - 70px); }
.zt-legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.zt-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.zt-empty svg { width: 34px; height: 34px; color: var(--brand-1); }
.zt-empty h3 { margin: 8px 0 4px; }
.zt-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.zt-kind { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; font-size: 11.5px; text-align: center; }
.zt-kind input { display: none; }
.zt-kind svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.zt-kind:has(input:checked) { border-color: var(--brand-1); background: color-mix(in srgb, var(--brand-1) 14%, transparent); }
.zt-lend { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 10px; border-radius: 10px; background: var(--surface-2); text-align: center; }
.zt-lend span { color: var(--brand-1); font-size: 18px; }
.zt-side { display: flex; width: 100%; }
.zt-side button { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zt-side button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.zt-hlist { max-height: 50vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.zt-hrow { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; flex-wrap: wrap; }
.zt-hrow:hover { background: var(--surface-2); }
.zt-hrow b { font-size: 13px; }
@media (max-width: 860px) {
  .zt-wrap { height: 62vh; min-height: 360px; }
  .zt-bar select { flex: 1 1 100%; }
  .zt-edbar .btn { flex: 1 1 calc(50% - 8px); justify-content: center; }
  .zt-edbar .sp { display: none; }
}
.zt-empty[hidden], .zt-hint[hidden], .zt-edbar[hidden] { display: none !important; }
/* sites / POPs e tráfego animado (v1.30) */
.zt-site .box { fill: color-mix(in srgb, var(--sc) 9%, transparent); stroke: color-mix(in srgb, var(--sc) 70%, transparent); stroke-width: 1.5; stroke-dasharray: 7 5; }
.zt-site .hd rect { fill: var(--sc); }
.zt-site .hd text { fill: #fff; font-size: 12px; font-weight: 800; }
.zt-site { cursor: zoom-in; }
.zt-wrap.editing .zt-site { cursor: move; }
.zt-wrap.editing .zt-site .box:hover { stroke-width: 2.5; }
.zt-node.site .bg { fill: color-mix(in srgb, var(--sc) 22%, var(--surface-2)); stroke: var(--sc); stroke-width: 2; }
.zt-node.site .nm { font-size: 13px; }
.zt-link .flow { fill: none; stroke: rgba(255,255,255,.7); stroke-linecap: round; stroke-dasharray: 2 14; animation: ztflow 1.5s linear infinite !important; pointer-events: none; }
html[data-theme='light'] .zt-link .flow { stroke: rgba(255,255,255,.95); mix-blend-mode: normal; }
@keyframes ztflow { to { stroke-dashoffset: -32; } }
/* v1.35.3: o fluxo não some mais com "reduzir animações" do sistema — liga/desliga no botão Animação */
.zt-mode button { white-space: nowrap; }
.zt-colors { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 4px; }
.zt-colors input { display: none; }
.zt-colors i { display: block; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 3px solid transparent; }
.zt-colors input:checked + i { border-color: var(--text); }
.zt-mode[hidden] { display: none !important; }
@media (max-width: 860px) { .zt-mode { order: 5; width: 100%; } .zt-mode button { flex: 1; justify-content: center; } }
.zb-gpin span { display: block; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #0f172a; box-shadow: 0 1px 4px rgba(0,0,0,.5); }
.zb-gpin span.man { border-color: #fff; outline: 2px dashed #0f172a; outline-offset: 1px; }
.qd-mleg i.zb-man { background: #22c55e; border: 2px solid #fff; outline: 1px dashed #64748b; }
.qd-map.placing, .qd-map.placing .leaflet-interactive, .qd-map.placing .leaflet-grab { cursor: crosshair !important; }
#gEd .small svg { width: 14px; height: 14px; vertical-align: -2px; }
.mn-list { display: grid; gap: 6px; }
.mn-row { display: grid; grid-template-columns: 34px minmax(160px, 240px) minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--border); }
.mn-row label { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mn-ic { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); }
.mn-ic svg { width: 17px; height: 17px; }
@media (max-width: 640px) { .mn-row { grid-template-columns: 34px minmax(0, 1fr); } .mn-row .input { grid-column: 1 / -1; } }
.zb-hfilter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: sticky; top: -20px; z-index: 2; background: var(--surface); padding: 6px 0; }
.zb-hfilter .search { flex: 1 1 240px; }
.zb-hsec { flex-wrap: wrap; }
.zb-hsec button { white-space: nowrap; }
.zb-ifq { margin-bottom: 8px; }
.zb-all td { vertical-align: top; }
.zb-all .mono.muted { word-break: break-all; }
/* POP como prédio com a lista de equipamentos (v1.31) */
.zt-bld .ring { fill: none; stroke-width: 4; }
.zt-bld .bbg { fill: color-mix(in srgb, var(--sc) 30%, var(--surface-2)); stroke: var(--sc); stroke-width: 2; }
.zt-bld .ic { stroke: #fff; }
.zt-bld .bnm { font-size: 13.5px; font-weight: 800; }
.zt-bld .blbg { fill: color-mix(in srgb, var(--surface) 92%, transparent); stroke: color-mix(in srgb, var(--sc) 55%, var(--border)); stroke-width: 1.2; }
.zt-bld .brow .bhit { fill: transparent; }
.zt-bld .brow:hover .bhit { fill: color-mix(in srgb, var(--sc) 14%, transparent); }
.zt-bld .brow { cursor: pointer; }
.zt-bld .bic { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.zt-bld .brn { font-size: 11.5px; font-weight: 600; fill: var(--text); }
.zt-bld .bpr { font: 800 11px ui-monospace, monospace; }
.zt-bld .bempty, .zt-bld .bmore { font-size: 11px; fill: var(--muted); font-style: italic; }
.zt-bld.sel .bbg, .zt-bld.linking .bbg { stroke: var(--brand-1); stroke-width: 3.5; }
.zt-wrap.editing .zt-bld .bbg { cursor: move; }
/* POP no mapa geográfico (v1.32) */
.zb-gpop { background: none; border: 0; }
.zb-gpop > div { position: relative; width: 40px; height: 40px; border-radius: 12px; background: var(--pc); border: 3px solid var(--st); box-shadow: 0 2px 8px rgba(0,0,0,.45); display: grid; place-items: center; }
.zb-gpop svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zb-gpop b { position: absolute; left: -8px; bottom: -8px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #0f172a; color: #fff; font: 800 11px/20px ui-monospace, monospace; text-align: center; border: 1.5px solid #fff; }
.zb-gpop i { position: absolute; right: -8px; top: -8px; min-width: 18px; height: 18px; border-radius: 9px; background: #ef4444; color: #fff; font: 800 10px/18px ui-monospace, monospace; font-style: normal; text-align: center; border: 1.5px solid #fff; }
.zb-gpop > span { position: absolute; left: 50%; top: 46px; transform: translateX(-50%); white-space: nowrap; font: 800 12px/1.3 system-ui, sans-serif; color: #0f172a; background: rgba(255,255,255,.92); padding: 1px 7px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.qd-mleg i.zb-popl { border-radius: 3px; background: #3b82f6; border: 2px solid #22c55e; }
#gGrpL[hidden] { display: none !important; }
.zt-bld .brow.lk .bhit { fill: color-mix(in srgb, var(--brand-1) 30%, transparent); }
#ztLk[hidden] { display: none !important; }
/* editor de ligações (v1.33) */
.modal.zl-modal { max-width: min(1280px, calc(100vw - 24px)) !important; }
html[data-zoom] .modal.zl-modal { max-width: min(1280px, calc(100vw / var(--z) - 24px)) !important; }
.zl-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.zl-top .btn { font-size: 18px; }
.zl-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); align-items: start; }
.zl-wires { width: 100%; display: block; overflow: visible; }
.zl-wires path { fill: none; stroke: #22c55e; stroke-width: 3; stroke-linecap: round; cursor: pointer; }
.zl-wires path:hover, .zl-wires path.on { stroke: var(--brand-1); stroke-width: 5; }
.zl-wires path.new { stroke: #facc15; stroke-dasharray: 6 5; pointer-events: none; }
.zl-dev { border: 1px solid var(--border-strong); border-radius: 14px; background: var(--surface-2); padding: 10px; min-width: 0; }
.zl-dev.empty { display: grid; place-items: center; min-height: 160px; }
.zl-dh { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.zl-fp { width: 100%; height: auto; max-height: 90px; display: block; margin-bottom: 8px; }
.zl-fp .fpb { fill: #1f2937; stroke: #475569; stroke-width: 1.5; }
html[data-theme='light'] .zl-fp .fpb { fill: #374151; }
.zl-fp .fpear { fill: #64748b; }
.zl-fp .fpic { fill: none; stroke: #cbd5e1; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.zl-fp .led { fill: #38bdf8; }
.zl-fp .fpt { fill: #94a3b8; font-size: 12px; }
.zl-fp .fpp { cursor: pointer; }
.zl-fp .fpp .cu { fill: #0b1220; stroke: #94a3b8; stroke-width: 1; }
.zl-fp .fpp .sfp { fill: #0b1220; stroke: #cbd5e1; stroke-width: 1.2; }
.zl-fp .fpp.used .cu, .zl-fp .fpp.used .sfp { stroke: #22c55e; stroke-width: 2; }
.zl-fp .fpp.sel .cu, .zl-fp .fpp.sel .sfp { stroke: #facc15; stroke-width: 2.5; }
.zl-fp .fpp:hover rect:first-of-type { stroke: var(--brand-1); stroke-width: 2.5; }
.zl-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.zl-tools .search { flex: 1 1 160px; }
.zl-ports { display: flex; flex-direction: column; gap: 3px; }
.zl-port { position: relative; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border); cursor: pointer; min-height: 34px; }
.zl-port:hover { border-color: var(--brand-1); }
.zl-port.sel { border-color: #facc15; box-shadow: 0 0 0 2px color-mix(in srgb, #facc15 35%, transparent); }
.zl-port.conn { border-color: #22c55e; }
.zl-port.on { background: color-mix(in srgb, var(--brand-1) 14%, var(--surface)); border-color: var(--brand-1); }
.zl-st { width: 10px; height: 10px; border-radius: 50%; background: #64748b; }
.zl-st.up { background: #22c55e; } .zl-st.down { background: #ef4444; }
.zl-pn { display: flex; flex-direction: column; min-width: 0; }
.zl-pn b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }
.zl-pn small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.zl-tr { white-space: nowrap; }
.zl-dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); transform: translateY(-50%); }
.zl-dev[data-dev="l"] .zl-dot { right: -8px; } .zl-dev[data-dev="r"] .zl-dot { left: -8px; }
.zl-port.conn .zl-dot { border-color: #22c55e; background: #22c55e; }
.zl-port.sel .zl-dot { border-color: #facc15; background: #facc15; }
.zl-panel { margin-top: 12px; padding: 12px; border-radius: 12px; border: 1px dashed var(--brand-1); background: color-mix(in srgb, var(--brand-1) 6%, transparent); }
.zl-ph { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 10px; font-size: 13px; }
.zl-ph svg { width: 16px; height: 16px; color: var(--brand-1); }
#zlMeas { display: flex; } #zlMeas button { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zl-all { margin-top: 14px; }
.zl-tbl tr { cursor: pointer; } .zl-tbl tr.on td { background: color-mix(in srgb, var(--brand-1) 12%, transparent); }
.zl-tbl .zl-arrow { color: var(--brand-1); font-size: 16px; width: 1%; }
@media (max-width: 860px) {
  .zl-stage { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); }
  .zl-tr { display: none; }
  .zl-port { grid-template-columns: 8px minmax(0, 1fr); padding: 6px 8px; }
  .zl-tools .check { font-size: 11px; }
}
.zl-tools .search .input { padding-left: 34px; }
/* editor de ligações no celular (v1.33.1): nada passa da largura da tela */
.zl, .zl-stage, .zl-dev, .zl-panel, .zl-all { min-width: 0; max-width: 100%; }
.zl-top select { min-width: 0; width: 100%; text-overflow: ellipsis; }
.zl-dev { overflow: hidden; }
.zl-dh b { overflow-wrap: anywhere; }
.zl-tools .search { min-width: 0; }
.zl-tools .search .input { width: 100%; min-width: 0; }
@media (max-width: 860px) {
  .zl-top { grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); gap: 6px; }
  .zl-top .btn { padding: 0; width: 40px; justify-content: center; }
  .zl-stage { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); }
  .zl-dev { padding: 6px; border-radius: 10px; }
  .zl-dh { gap: 4px; margin-bottom: 4px; }
  .zl-dh b { font-size: 12.5px; }
  .zl-dh .ix-pill, .zl-dh .mono { font-size: 10.5px; }
  .zl-fp { max-height: 44px; margin-bottom: 6px; }
  .zl-tools { gap: 4px; margin-bottom: 4px; }
  .zl-tools .search { flex: 1 1 100%; }
  .zl-tools .search .input { height: 32px; font-size: 13px; padding-left: 30px; }
  .zl-tools .search svg { left: 9px; width: 14px; height: 14px; }
  .zl-tools .check { font-size: 11px; }
  .zl-port { grid-template-columns: 8px minmax(0, 1fr); gap: 6px; padding: 5px 7px; min-height: 30px; border-radius: 7px; }
  .zl-pn b { white-space: normal; overflow-wrap: anywhere; font-size: 11.5px; line-height: 1.25; }
  .zl-pn small { white-space: normal; overflow-wrap: anywhere; font-size: 10px; }
  .zl-st { width: 8px; height: 8px; }
  .zl-dot { width: 10px; height: 10px; }
  .zl-dev[data-dev="l"] .zl-dot { right: -6px; } .zl-dev[data-dev="r"] .zl-dot { left: -6px; }
  .zl-wires path { stroke-width: 2.5; }
  .zl-panel { padding: 10px; }
  .zl-ph { font-size: 12.5px; overflow-wrap: anywhere; }
  .zl-panel .grid3 { grid-template-columns: 1fr; }
  .zl-panel .row-flex .btn { flex: 1 1 auto; justify-content: center; }
  .zl > p.small { font-size: 11.5px; }
}
/* detalhe do equipamento no celular: filtros quebram linha em vez de alargar a janela */
.zb-ifq, .zb-hsec { flex-wrap: wrap; max-width: 100%; }
.zb-hfilter { min-width: 0; }
.modal-b .chips { flex-wrap: wrap; max-width: 100%; }
@media (max-width: 860px) { .zb-hsec button { padding: 0 9px; font-size: 11.5px; } }
/* auditoria (v1.34) */
.au-f { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; align-items: center; }
.au-f select { flex: 0 1 200px; min-width: 0; }
.au-day { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 12px 0 4px; }
.au-row { display: grid; grid-template-columns: 44px 26px minmax(0, 1fr); gap: 8px; align-items: start; padding: 7px 4px; border-bottom: 1px solid var(--border); }
.au-t { font-size: 12px; color: var(--muted); padding-top: 3px; }
.au-row .av.sm { width: 24px; height: 24px; font-size: 10px; display: grid; place-items: center; border-radius: 50%; color: #fff; font-weight: 700; }
.au-m { min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.au-d { margin-top: 2px; }
.search .input.sm { padding-left: 32px; width: 100%; }
@media (max-width: 700px) { .au-f select { flex: 1 1 calc(50% - 4px); } .au-f .search { flex: 1 1 100% !important; } }
/* v1.34 — ligação caída (porta DOWN no Zabbix) */
.zt-link.down .ln { stroke-dasharray: 10 6; animation: ztblink 1s steps(2, jump-none) infinite; }
.zt-link.down .mid { stroke: #ef4444; }
@keyframes ztblink { 0% { opacity: 1; } 100% { opacity: .25; } }
.zt-dn rect { fill: #ef4444; stroke: #7f1d1d; stroke-width: 1; }
.zt-dn text { fill: #fff; font-size: 11px; font-weight: 800; letter-spacing: .05em; }
@media (prefers-reduced-motion: reduce) { .zt-link.down .ln { animation: none; } }
.zt-alert { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(239,68,68,.55); background: rgba(239,68,68,.12); animation: ztpulse 2s ease-in-out infinite; }
.zt-alert[hidden] { display: none !important; }
@keyframes ztpulse { 50% { box-shadow: 0 0 0 3px rgba(239,68,68,.25); } }
.zt-al-h { display: flex; align-items: center; gap: 6px; color: #f87171; font-size: 14px; }
.zt-al-h svg { width: 18px; height: 18px; }
.zt-al-it { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; max-width: 100%; text-align: left; padding: 5px 10px; border-radius: 9px; border: 1px solid rgba(239,68,68,.4); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; font-size: 12.5px; }
.zt-al-it b { overflow-wrap: anywhere; }
.zt-al-it span { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.zt-al-it:hover { border-color: #ef4444; }
/* v1.34 — topologia no Painel TV */
.tv-topo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tv-topo[hidden], .tv-kpis[hidden], .tv-grid[hidden] { display: none !important; }
.tv-topo .zt-bar { margin-bottom: 8px; }
.tv-topo .zt-wrap { flex: 1; height: auto !important; min-height: 0; background: #05070b; }
.tv-topo .zt-alert { font-size: 1.6vh; }
.tv-topo .zt-al-h { font-size: 2vh; }
.tv-topo .zt-al-it { font-size: 1.5vh; }
.tv-ctrl select.input { width: auto; background: #151a22; border-color: #2a3342; color: #e8ecf3; }
.zt-dn.part rect { fill: #f59e0b; stroke: #78350f; } .zt-dn.part text { fill: #111; }
/* v1.34 — pico / média / 95º percentil no gráfico */
.zb-chart .cap { stroke: #ef4444; stroke-width: 1.2; stroke-dasharray: 6 4; }
.zb-chart .capt { fill: #f87171; font-size: 10.5px; font-weight: 700; }
.zb-chart .pk circle:last-child { fill: none; stroke-width: 1.5; opacity: .7; }
.zb-stats th, .zb-stats td { white-space: nowrap; font-size: 12.5px; }
.zb-stats td:first-child { white-space: normal; min-width: 140px; }
.zb-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.zb-daily { display: grid; gap: 3px; max-height: 240px; overflow: auto; }
.zb-daily > div { display: grid; grid-template-columns: 46px minmax(40px, 1fr) auto 42px; gap: 8px; align-items: center; font-size: 12px; }
.zb-daily i { height: 8px; border-radius: 4px; background: var(--surface-2, rgba(148,163,184,.15)); overflow: hidden; display: block; }
.zb-daily i b { display: block; height: 100%; border-radius: 4px; }
.btn.xs { height: 26px; padding: 0 8px; font-size: 11.5px; border-radius: 7px; gap: 4px; white-space: nowrap; }
.btn.xs svg { width: 13px; height: 13px; }
.zb-pr-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; white-space: nowrap; }
.zb-prob > .btn.xs { align-self: center; flex-shrink: 0; }
@media (max-width: 560px) { .zb-prob.row { flex-wrap: wrap; } .zb-pr-side { flex-direction: row; align-items: center; flex-wrap: wrap; width: 100%; justify-content: flex-end; } }
/* v1.34 — busca global do Zabbix */
.zb-top { flex-wrap: wrap; }
.zs-box { position: relative; flex: 1 1 260px; min-width: 0; max-width: 460px; margin-left: auto; }
.zs-res { position: absolute; top: calc(100% + 6px); right: 0; width: min(560px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; z-index: 40; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.35); padding: 6px; }
.zs-res[hidden] { display: none !important; }
.zs-h { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 8px 8px 4px; }
.zs-it { display: block; width: 100%; text-align: left; padding: 8px; border-radius: 9px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; }
.zs-it + .zs-it { border-top: 1px solid var(--border); border-radius: 0; }
.zs-btn { cursor: pointer; } .zs-btn:hover { background: rgba(148,163,184,.08); }
.zs-t { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; min-width: 0; }
.zs-t b { overflow-wrap: anywhere; }
.zs-t svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--muted); }
.zs-t .btn { margin-left: auto; }
.zs-pl { margin: 6px 0 0 16px; padding-left: 8px; border-left: 2px solid var(--border); font-size: 12.5px; }
.zs-pl > div { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zs-pl > div > svg { width: 13px; height: 13px; color: var(--muted); }
.zs-pl > div > .btn { margin-left: auto; }
.zs-lk { display: flex; align-items: flex-start; gap: 6px; width: 100%; text-align: left; margin-top: 3px; padding: 4px 6px; border-radius: 7px; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 12px; cursor: pointer; }
.zs-lk:hover { background: rgba(148,163,184,.1); }
.zs-lk svg { width: 12px; height: 12px; margin-top: 3px; flex-shrink: 0; color: var(--muted); }
.zs-lk span { overflow-wrap: anywhere; }
.zs-port { font-size: 11px; padding: 0 5px; border-radius: 5px; background: rgba(148,163,184,.14); }
.zs-mem { margin-top: 3px; overflow-wrap: anywhere; }
.zs-empty { padding: 12px; }
.zt-bld .brow.hl .bhit { fill: rgba(78,170,227,.28); }
.zt-bld .brow.hl .brn { font-weight: 800; }
@media (max-width: 640px) { .zs-box { flex: 1 1 100%; max-width: none; } .zs-res { left: 0; right: auto; width: 100%; } }
.notice.bad { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.45); } .notice.bad svg { color: #ef4444; }
.zb-stats { width: 100%; border-collapse: collapse; }
.zb-stats th { text-align: left; font-size: 11px; font-weight: 700; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); }
.zb-stats td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.zb-stats td:first-child { min-width: 120px; }
@media (max-width: 640px) { .zb-stats th, .zb-stats td { padding: 6px 6px; font-size: 11.5px; } .zb-stats td:first-child { min-width: 110px; } }
.zb-chartbox { min-width: 0; width: 100%; max-width: 100%; overflow: hidden; } .zb-chartbox .tscroll { max-width: 100%; }
.modal:has(.zb-chartbox), .modal:has(.zb-chartbox) .modal-b, .modal:has(.zb-chartbox) .stack { min-width: 0; }
/* v1.35 — ONUs IXC × Zabbix */
.on-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.on-bar > select { flex: 0 1 340px; min-width: 0; }
.on-map { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2, var(--text)); flex-wrap: wrap; min-width: 0; }
.on-map svg { width: 14px; height: 14px; color: var(--muted); flex-shrink: 0; }
.on-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
.on-k { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; text-align: left; min-width: 0; }
.on-k b { font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.on-k span { font-size: 12px; color: var(--muted); }
.on-k.on { border-color: var(--brand-1); box-shadow: 0 0 0 1px var(--brand-1) inset; }
.on-k.ok b { color: #22c55e; } .on-k.warn b { color: #facc15; } .on-k.bad b { color: #f87171; } .on-k.info b { color: #60a5fa; } .on-k.off b { color: var(--muted); }
.on-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.on-tools select { flex: 0 1 240px; min-width: 0; }
.on-tools .search { flex: 1 1 240px; min-width: 0; }
.on-info { margin-bottom: 10px; line-height: 1.5; }
.on-list { padding: 0; overflow: hidden; }
.on-row { display: grid; grid-template-columns: 96px minmax(0, 1.3fr) 130px 120px 110px minmax(0, 1.6fr) 104px; gap: 10px; align-items: start; padding: 9px 14px; border-top: 1px solid var(--border); font-size: 13px; }
.on-row:first-child { border-top: 0; }
.on-h { font-size: 11.5px; font-weight: 700; color: var(--muted); background: rgba(148,163,184,.05); }
.on-row > span { min-width: 0; }
.on-cli, .on-sig, .on-st { display: flex; flex-direction: column; gap: 2px; }
.on-cli b { overflow-wrap: anywhere; }
.on-ser { overflow-wrap: anywhere; }
.on-st .ix-pill { align-self: flex-start; }
.on-act { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.on-sig .ok { color: #22c55e; } .on-sig .warn { color: #facc15; } .on-sig .bad { color: #f87171; } .on-sig .off { color: var(--muted); }
.on-row.st-div { background: rgba(239,68,68,.05); }
@media (max-width: 1100px) { .on-row { grid-template-columns: 90px minmax(0, 1.3fr) 120px 110px minmax(0, 1.5fr) 90px; } .on-row > .on-ser { display: none; } }
@media (max-width: 760px) {
  .on-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .on-h { display: none !important; }
  .on-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px 10px; padding: 11px 12px; }
  .on-row > .on-ser { display: block; grid-column: 1 / -1; order: 3; }
  .on-pos { order: 1; } .on-act { order: 2; }
  .on-cli { order: 3; grid-column: 1 / -1; }
  .on-ser { order: 4; }
  .on-sig { order: 5; }
  .on-sig::before { content: attr(data-l); font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--muted); letter-spacing: .04em; }
  .on-st { order: 7; grid-column: 1 / -1; }
  .on-bar > select { flex: 1 1 100%; }
}

/* v1.35.3 — animação e cruzamentos */
.zt-anim.on { color: var(--brand-1); border-color: color-mix(in srgb, var(--brand-1) 45%, transparent); }
.zt-x { font-size: 12px; font-weight: 700; white-space: nowrap; }
.zt-x.ok { color: #22c55e; } .zt-x.bad { color: #f87171; }
.zt-xmark circle { fill: rgba(239,68,68,.18); stroke: #ef4444; stroke-width: 1.5; }
.zt-xmark path { stroke: #ef4444; stroke-width: 2; stroke-linecap: round; }
.zt-xmark { pointer-events: none; }
/* v1.36 — lista de atualizações */
.sb-up { text-decoration: none; margin-top: 0; }
.sb-up .muted { font-size: 11px; }
.sb-up.active { color: var(--text); background: var(--surface-2, rgba(255,255,255,.05)); }
.up-dot { margin-left: auto; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 99px; background: #f97316; color: #fff; }
.up-dot[hidden] { display: none !important; }
.up-top { margin-bottom: 14px; }
.up-cur { display: flex; gap: 12px; align-items: flex-start; }
.up-cur > svg { width: 22px; height: 22px; color: var(--brand-1); flex-shrink: 0; margin-top: 2px; }
.up-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.up-tools .search { flex: 1 1 280px; min-width: 0; }
.up-day { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 18px 2px 8px; }
.up-e { padding: 14px 16px; margin-bottom: 10px; }
.up-e header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.up-e h3 { margin: 0; font-size: 15px; }
.up-v { font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 7px; background: rgba(78,170,227,.14); color: var(--brand-1); }
.up-new { font-size: 10.5px; font-weight: 800; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; background: #f97316; color: #fff; }
.up-e.new { border-color: color-mix(in srgb, #f97316 45%, transparent); }
.up-e ul { margin: 0; padding-left: 20px; display: grid; gap: 5px; font-size: 13.5px; line-height: 1.5; }
.up-e ul ul { margin-top: 4px; font-size: 13px; }
.up-e li { overflow-wrap: anywhere; }
.up-e code { font-size: 12px; padding: 0 4px; border-radius: 4px; background: rgba(148,163,184,.14); }
/* v1.37 — caminho das ligações (pontos de dobra) */
.zt-link .ln, .zt-link .flow { stroke-linejoin: round; }
.zt-bend circle { fill: var(--brand-1); stroke: #fff; stroke-width: 2; cursor: move; }
.zt-badd { cursor: copy; }
.zt-badd circle { fill: var(--surface); stroke: var(--brand-1); stroke-width: 1.8; stroke-dasharray: 3 2; }
.zt-badd path { stroke: var(--brand-1); stroke-width: 2; stroke-linecap: round; }
.zt-badd:hover circle { fill: color-mix(in srgb, var(--brand-1) 25%, var(--surface)); }
.zt-pv { fill: none; stroke: var(--brand-1); stroke-width: 3; stroke-dasharray: 8 6; pointer-events: none; }
.zt-pvp { fill: var(--brand-1); stroke: #fff; stroke-width: 2; pointer-events: none; }
.zt-lbar { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 6; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: calc(100% - 24px); padding: 8px 10px 8px 14px; border-radius: 12px; border: 1px solid var(--brand-1); background: var(--surface); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.zt-lbar[hidden] { display: none !important; }
.zt-lb-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.zt-lb-t b { overflow-wrap: anywhere; }
.zt-lb-a { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
@media (max-width: 640px) { .zt-lbar { left: 8px; right: 8px; transform: none; max-width: none; bottom: 8px; } }
/* v1.38 — Tráfego · CDNs (Akvorado) */
.tr-top { flex-wrap: wrap; }
.tr-rng { margin-left: auto; }
.tr-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.tr-k { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); border-left: 4px solid var(--c, var(--brand-1)); min-width: 0; }
.tr-k span { font-size: 12px; color: var(--muted); }
.tr-k b { font-size: 22px; font-variant-numeric: tabular-nums; }
.tr-k small { font-size: 11.5px; color: var(--muted); }
.tr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tr-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; min-width: 0; }
.tr-card:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.tr-card.link { display: flex; flex-direction: column; cursor: default; }
.tr-side { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.tr-logo { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; }
.tr-logo.big { width: 72px; height: 72px; }
.tr-logo.ini { display: inline-grid; place-items: center; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); font-weight: 800; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); font-size: 13px; }
.tr-logo.ini.big { font-size: 24px; border-radius: 16px; }
.tr-name { color: var(--c); letter-spacing: .03em; text-transform: uppercase; font-size: 13px; overflow-wrap: anywhere; }
.tr-now { width: 100%; display: flex; flex-direction: column; padding: 5px 8px; border-radius: 8px; background: rgba(148,163,184,.07); border-left: 3px solid var(--c); text-align: left; }
.tr-now.up { border-left-color: #facc15; }
.tr-now span { font-size: 10.5px; color: var(--muted); }
.tr-now b { font-size: 15px; font-variant-numeric: tabular-nums; }
.tr-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.tr-chart { width: 100%; height: 170px; display: block; }
.tr-card.link .tr-chart { height: 150px; }
.tr-chart .g { stroke: var(--border); stroke-width: 1; }
.tr-chart text { fill: var(--muted); font-size: 10.5px; }
.tr-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.tr-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.tr-via { display: flex; flex-direction: column; gap: 5px; }
.tr-vbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(148,163,184,.12); }
.tr-vbar i { display: block; height: 100%; }
.tr-vleg { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 11.5px; color: var(--muted); }
.tr-vleg i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; }
.tr-vleg b { color: var(--text); }
.tr-lhead { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tr-lhead b { font-size: 15px; color: var(--c); }
.tr-lnow { font-weight: 800; font-variant-numeric: tabular-nums; }
.tr-lnow small { font-weight: 700; margin-left: 4px; } .tr-lnow small.ok { color: #22c55e; } .tr-lnow small.warn { color: #facc15; } .tr-lnow small.bad { color: #f87171; }
.tr-lsvc { display: grid; gap: 5px; margin-top: 4px; }
.tr-lsvc > div { display: grid; grid-template-columns: 10px minmax(70px, 130px) minmax(40px, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; }
.tr-lsvc .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-lsvc i { height: 7px; border-radius: 4px; background: rgba(148,163,184,.12); overflow: hidden; display: block; }
.tr-lsvc i b { display: block; height: 100%; border-radius: 4px; }
.tr-lsvc .v { font-variant-numeric: tabular-nums; color: var(--muted); }
.tr-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.tr-foot { margin-top: 12px; line-height: 1.5; }
.tr-svcs { display: grid; gap: 6px; }
.tr-svc { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border); flex-wrap: wrap; }
.tr-svc.off { opacity: .55; }
.tr-svc .tr-asns { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.tr-ord { width: 30px; }
.tr-lcfg { display: grid; gap: 6px; }
.tr-lcfg > div { display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 110px; gap: 8px; align-items: center; }
@media (max-width: 1180px) { .tr-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .tr-card { grid-template-columns: minmax(0, 1fr); }
  .tr-side { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: center; text-align: left; gap: 8px; }
  .tr-side .tr-logo.big { width: 44px; height: 44px; grid-row: span 2; }
  .tr-side .tr-name { grid-column: 2 / -1; }
  .tr-chart { height: 140px; }
  .tr-rng { margin-left: 0; }
  .tr-lcfg > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tr-lcfg > div > span { grid-column: 1 / -1; }
}
/* v1.39 — AS × trânsito */
.tr-asx { display: grid; gap: 4px; padding-top: 6px; border-top: 1px dashed var(--border); }
.tr-asx-h { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.tr-asr { display: grid; grid-template-columns: 78px minmax(40px, 1fr) auto; gap: 8px; align-items: center; font-size: 11.5px; }
.tr-asr .mono { color: var(--text-2, var(--text)); }
.tr-vbar.sm { height: 6px; display: flex; border-radius: 3px; overflow: hidden; background: rgba(148,163,184,.12); }
.tr-vbar.sm i { display: block; height: 100%; }
.tr-asv { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr-mx { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tr-mx th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tr-mx th .tr-dot { margin-right: 5px; vertical-align: -1px; }
.tr-mx td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: top; min-width: 90px; }
.tr-mx td.z { color: var(--muted); }
.tr-mxb { height: 5px; border-radius: 3px; background: rgba(148,163,184,.12); margin: 3px 0 1px; overflow: hidden; }
.tr-mxb i { display: block; height: 100%; }
.tr-dleg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; margin-top: 6px; }
.tr-dleg i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.modal:has(.tr-mx) { max-width: min(1100px, calc(100vw - 32px)); }
.modal:has(.tr-mx), .modal:has(.tr-mx) .modal-b, .modal:has(.tr-mx) .stack { min-width: 0; }
/* v1.40 — tráfego: filtros, alertas, TV */
.tr-flt { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: -4px 0 12px; }
.tr-flt select { flex: 0 1 220px; min-width: 0; }
.tr-alerts { display: grid; gap: 8px; margin-bottom: 12px; }
.tr-al { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(239,68,68,.5); background: rgba(239,68,68,.1); }
.tr-al.link { border-color: rgba(245,158,11,.55); background: rgba(245,158,11,.1); }
.tr-al svg { width: 18px; height: 18px; color: #f87171; flex-shrink: 0; margin-top: 2px; }
.tr-al.link svg { color: #f59e0b; }
.tr-al > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tr-al span { font-size: 12.5px; overflow-wrap: anywhere; } .tr-al small { font-size: 11px; color: var(--muted); }
.tr-lup { font-weight: 700; color: #facc15; margin-left: 8px; font-size: 13px; }
.tv-akv { flex: 1; min-height: 0; overflow: hidden; }
.tv-akv[hidden] { display: none !important; }
.tv-akv .tr-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tv-akv .tr-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1vh 1vw; }
.tv-akv .tr-card { cursor: default; grid-template-columns: 9vw minmax(0, 1fr); padding: 1vh .8vw; }
.tv-akv .tr-chart { height: 13vh; }
.tv-akv .tr-asx { display: none; }
.tv-akv .tr-logo.big { width: 5vh; height: 5vh; }
.zt-akv { pointer-events: auto; }
.zt-akv .bg { fill: var(--surface); stroke: var(--border-strong); stroke-width: 1; }
.zt-lb-akv { display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
.zt-lb-akv select { min-width: 150px; }
/* v1.40 TV compacta: alertas em chips numa linha, cards sem esticar */
.tv-akv .tr-grid { align-content: start; }
.tv-akv .tr-alerts { display: flex; flex-wrap: wrap; gap: .6vh .5vw; margin-bottom: 1vh; max-height: 9vh; overflow: hidden; }
.tv-akv .tr-al { padding: .5vh .7vw; align-items: center; }
.tv-akv .tr-al small { display: none; }
.tv-akv .tr-al span { white-space: nowrap; }
.tv-akv .tr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tv-akv .tr-card { grid-template-columns: 7vw minmax(0, 1fr); }
.tv-akv .tr-chart { height: 11vh; }
.tv-akv .tr-logo.big { width: 4vh; height: 4vh; }
/* v1.41 Tráfego · Explorar */
.trx { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 12px; align-items: start; }
.trx-side .card-b { gap: 12px; }
.trx-sec { display: flex; flex-direction: column; gap: 6px; }
.trx-sec > label, .trx-row .field label { font-size: 12px; font-weight: 600; color: var(--muted); }
.trx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.trx-row.chk { display: flex; flex-wrap: wrap; gap: 14px; }
.trx-cust { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 6px; align-items: center; }
.trx-dims { display: flex; flex-direction: column; gap: 4px; }
.trx-dim { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2, rgba(255,255,255,.03)); font-size: 12.5px; font-family: var(--mono, monospace); min-width: 0; }
.trx-dim > b { width: 18px; height: 18px; border-radius: 50%; background: var(--primary, #4eaae3); color: #fff; display: grid; place-items: center; font-size: 11px; flex-shrink: 0; }
.trx-dim .muted { font-family: inherit; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.trx-dim button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 3px; }
.trx-dim button:hover { color: var(--text); }
.trx-flt { resize: vertical; min-height: 64px; font-size: 12.5px; }
.trx-val .ok { color: #22c55e; } .trx-val .bad { color: #f87171; }
.trx-build { display: grid; grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr) auto; gap: 4px; }
.trx-act { display: flex; gap: 6px; flex-wrap: wrap; }
.trx-act .btn.primary { flex: 1; }
.trx-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.trx-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.trx-fshow { overflow-wrap: anywhere; }
.trx-tot { font-size: 13px; }
.trx-box { position: relative; min-height: 120px; }
.trx-box.busy { opacity: .55; pointer-events: none; }
.trx-cw { position: relative; }
.trx-chart { width: 100%; display: block; }
.trx-chart .g { stroke: var(--border); stroke-width: 1; }
.trx-chart text { fill: var(--muted); font-size: 11px; }
.trx-chart .trx-cur { stroke: var(--text); stroke-width: 1; opacity: .6; }
.trx-tip { position: absolute; top: 6px; z-index: 3; min-width: 220px; max-width: 360px; padding: 8px 10px; border-radius: 10px; background: rgba(10,14,22,.95); border: 1px solid var(--border); color: #e8ecf3; font-size: 12px; pointer-events: none; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.trx-tip div { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 6px; align-items: center; margin-top: 3px; }
.trx-tip div i { width: 10px; height: 10px; border-radius: 3px; }
.trx-tip div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trx-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.trx-tbl th { text-align: right; font-size: 11px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.trx-tbl td { text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.trx-tbl th:nth-child(-n+2), .trx-tbl td.d { text-align: left; }
.trx-tbl td.d { max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
.trx-tbl tbody tr { cursor: pointer; }
.trx-tbl tbody tr:hover { background: rgba(255,255,255,.03); }
.trx-tbl tbody tr.hi { background: rgba(78,170,227,.12); }
.trx-tbl td.a { text-align: right; } .trx-tbl td.a .btn { padding: 2px; }
.trx-sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.trx-foot { margin-top: 8px; } .trx-foot svg { width: 13px; height: 13px; vertical-align: -2px; }
.trx-empty { padding: 30px 0; text-align: center; }
@media (max-width: 1100px) { .trx { grid-template-columns: minmax(0, 1fr); } }
.trx-cust[hidden] { display: none; }
.trx .chips { flex-wrap: wrap; overflow: visible; }
.trx-build { grid-template-columns: auto minmax(0, 1fr) auto; }
.trx-build #xBd { grid-column: 1 / -1; }
.trx-tbl th, .trx-tbl td { padding: 6px 6px; }
.trx-tbl td.d { max-width: 260px; }
/* v1.42 ASN / BGP */
.as-q { display: flex; gap: 8px; } .as-q .search { flex: 1; } .as-q .search .input { width: 100%; font-size: 15px; }
.as-q.sm .input { flex: 1; }
.as-sum { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.as-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; margin-bottom: 8px; border-radius: 10px; background: rgba(78,170,227,.1); border: 1px solid rgba(78,170,227,.35); font-size: 13px; }
.as-act[hidden] { display: none; }
.as-act select { width: auto; }
.as-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.as-tbl th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.as-tbl td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.as-tbl tr.hot td:nth-child(2) a { color: #22c55e; }
.as-tbl td:first-child, .as-tbl th:first-child { width: 28px; }
.as-pdb { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: rgba(167,139,250,.15); color: #c4b5fd; margin-left: 4px; }
.as-svc { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--c) 60%, transparent); color: var(--c); margin: 1px 3px 1px 0; white-space: nowrap; }
.as-tr { display: grid; grid-template-columns: 90px minmax(60px, 160px); gap: 2px 8px; align-items: center; }
.as-tr .muted { grid-column: 1 / -1; }
.as-foot { margin-top: 10px; }
.as-top { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: flex-start; }
.as-org { font-size: 15px; font-weight: 600; }
.as-links { display: flex; flex-wrap: wrap; gap: 6px; }
.as-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.as-sec { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.as-sec h4 { margin: 0; font-size: 13px; display: flex; align-items: center; gap: 6px; } .as-sec h4 svg { width: 15px; height: 15px; }
.as-kp { display: flex; gap: 14px; font-size: 13px; } .as-kp b { font-size: 18px; }
.as-pf { display: flex; flex-wrap: wrap; gap: 4px 10px; max-height: 180px; overflow: auto; }
.as-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; margin: 0; font-size: 12.5px; } .as-dl dt { color: var(--muted); } .as-dl dd { margin: 0; overflow-wrap: anywhere; }
.as-ix { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow: auto; font-size: 12.5px; }
.as-ix > div { display: flex; flex-direction: column; padding: 4px 8px; border-radius: 8px; background: rgba(255,255,255,.03); } .as-ix > div.br { background: rgba(34,197,94,.1); }
.as-nb { display: flex; flex-direction: column; gap: 2px; max-height: 200px; overflow: auto; font-size: 12.5px; }
.as-nb a { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 8px; padding: 3px 6px; border-radius: 6px; color: inherit; text-decoration: none; }
.as-nb a:hover { background: rgba(255,255,255,.05); } .as-nb a span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.as-pick { margin-top: 8px; padding: 10px; border: 1px dashed var(--border); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.as-pick .tscroll { max-height: 280px; overflow: auto; }
.as-pick button[data-asn] { display: none; }
.as-pick-f { display: flex; gap: 8px; justify-content: space-between; align-items: center; flex-wrap: wrap; }
@media (max-width: 800px) { .as-grid { grid-template-columns: minmax(0, 1fr); } .as-tbl td:nth-child(4), .as-tbl th:nth-child(4) { display: none; } .as-tr { grid-template-columns: minmax(0, 1fr); } }
/* v1.43 Tráfego · Segurança BGP */
.as-kind { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px; white-space: nowrap; border: 1px solid transparent; }
.as-kind.k-eye { background: rgba(52,211,153,.14); color: #34d399; border-color: rgba(52,211,153,.35); }
.as-kind.k-cdn { background: rgba(167,139,250,.14); color: #a78bfa; border-color: rgba(167,139,250,.35); }
.as-kind.k-tr { background: rgba(56,189,248,.14); color: #38bdf8; border-color: rgba(56,189,248,.35); }
.as-kind.k-ent { background: rgba(148,163,184,.14); color: #94a3b8; border-color: rgba(148,163,184,.35); }
.bgp { display: flex; flex-direction: column; gap: 14px; }
.bgp details > summary { cursor: pointer; list-style: none; }
.bgp details > summary::-webkit-details-marker { display: none; }
.bgp-about > summary, .bgp-cfg > summary { display: flex; align-items: center; gap: 8px; padding: 14px 16px; flex-wrap: wrap; }
.bgp-about > summary svg, .bgp-cfg > summary svg { width: 18px; height: 18px; color: var(--primary, #4eaae3); }
.bgp-about > summary::after, .bgp-cfg > summary::after { content: '▾'; margin-left: auto; color: var(--muted); transition: transform .2s; }
.bgp-about[open] > summary::after, .bgp-cfg[open] > summary::after { transform: rotate(180deg); }
.bgp-about-b { display: flex; flex-direction: column; gap: 12px; padding-top: 0; font-size: 13.5px; line-height: 1.55; }
.bgp-about-b p { margin: 0; }
.bgp-gloss { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.bgp-gloss > div { padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.02); }
.bgp-gloss h4, .bgp-todo h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 13.5px; }
.bgp-gloss h4 svg, .bgp-todo h4 svg { width: 16px; height: 16px; color: var(--primary, #4eaae3); }
.bgp-gloss p { font-size: 12.5px; color: var(--muted); }
.bgp-todo { padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(52,211,153,.35); background: rgba(52,211,153,.06); }
.bgp-todo ol { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.bgp-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bgp-bar .sp, .bgp-ev-h .sp, .bgp-my-h .sp { flex: 1; }
.bgp-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.bgp-kpi { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); border-left: 4px solid var(--border); min-width: 0; }
.bgp-kpi span { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.bgp-kpi b { font-size: 20px; line-height: 1.2; }
.bgp-kpi small { font-size: 11.5px; color: var(--muted); }
.bgp-kpi.st-ok { border-left-color: #22c55e; } .bgp-kpi.st-ok b { color: #22c55e; }
.bgp-kpi.st-warn { border-left-color: #f59e0b; } .bgp-kpi.st-warn b { color: #f59e0b; }
.bgp-kpi.st-crit { border-left-color: #ef4444; background: rgba(239,68,68,.08); } .bgp-kpi.st-crit b { color: #f87171; }
.bgp-kpi.st-none b { color: var(--muted); font-size: 16px; }
.bgp-sec { display: flex; flex-direction: column; gap: 10px; }
.bgp-sec > h3 { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: 15px; flex-wrap: wrap; }
.bgp-sec > h3 svg { width: 18px; height: 18px; color: var(--primary, #4eaae3); }
.bgp-my-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.bgp-my-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px; }
.bgp-my-g h4 { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.bgp-as { color: inherit; text-decoration: none; } .bgp-as:hover .mono { text-decoration: underline; }
.bgp-as .mono { font-weight: 700; color: var(--primary, #4eaae3); }
.bgp-as.big .mono { font-size: 17px; } .bgp-as.big .nm { font-size: 15px; font-weight: 700; }
.bgp-pt { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.bgp-pt th { text-align: left; font-size: 11px; color: var(--muted); padding: 5px 6px; border-bottom: 1px solid var(--border); }
.bgp-pt td { padding: 6px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.bgp-pt a { color: inherit; }
.bgp-rp { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.bgp-rp.valid { background: rgba(34,197,94,.15); color: #22c55e; } .bgp-rp.unknown { background: rgba(245,158,11,.15); color: #f59e0b; } .bgp-rp.invalid { background: rgba(239,68,68,.18); color: #f87171; }
.bgp-vis { display: inline-block; width: 70px; height: 6px; border-radius: 3px; background: rgba(148,163,184,.2); vertical-align: middle; overflow: hidden; }
.bgp-vis i { display: block; height: 100%; background: #22c55e; } .bgp-vis.warn i { background: #f59e0b; } .bgp-vis.bad i { background: #ef4444; }
.bgp-evs { display: flex; flex-direction: column; gap: 8px; }
.bgp-ev { border: 1px solid var(--border); border-left: 4px solid #64748b; border-radius: 12px; background: rgba(255,255,255,.02); }
.bgp-ev.sev-crit { border-left-color: #ef4444; background: rgba(239,68,68,.06); } .bgp-ev.sev-warn { border-left-color: #f59e0b; } .bgp-ev.sev-info { border-left-color: #38bdf8; }
.bgp-ev > summary { padding: 9px 12px; display: flex; flex-direction: column; gap: 4px; }
.bgp-ev-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; }
.bgp-type { padding: 1px 8px; border-radius: 6px; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.bgp-type.hijack { background: rgba(239,68,68,.18); color: #f87171; } .bgp-type.leak { background: rgba(245,158,11,.18); color: #fbbf24; }
.bgp-st { color: var(--muted); font-size: 11.5px; } .bgp-st.on { color: #f87171; font-weight: 700; }
.bgp-new { padding: 0 6px; border-radius: 6px; background: #4eaae3; color: #fff; font-size: 10.5px; font-weight: 800; }
.bgp-rel { padding: 0 7px; border-radius: 6px; border: 1px solid var(--border); font-size: 11px; }
.bgp-when { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.bgp-conf { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.bgp-conf i { width: 46px; height: 6px; border-radius: 3px; background: linear-gradient(90deg, currentColor var(--p), rgba(148,163,184,.25) var(--p)); }
.bgp-conf[data-c=h] { color: #f87171; } .bgp-conf[data-c=m] { color: #f59e0b; } .bgp-conf[data-c=l] { color: #94a3b8; }
.bgp-ev-w { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.bgp-ev-d { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; border-top: 1px dashed var(--border); padding-top: 10px; }
.bgp-tags { margin: 4px 0 2px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 3px; }
.bgp-tags li { display: flex; gap: 8px; } .bgp-tags li span { width: 44px; flex-shrink: 0; font-weight: 700; }
.bgp-tags li.up span { color: #f87171; } .bgp-tags li.dn span { color: #22c55e; }
.bgp-pfx { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; } .bgp-pfx a { color: inherit; font-size: 12px; }
.bgp-seg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0; }
.bgp-seg > span { padding: 3px 8px; border: 1px solid var(--border); border-radius: 8px; } .bgp-seg > span.lk { border-color: #f59e0b; background: rgba(245,158,11,.1); }
.bgp-seg > i { color: var(--muted); font-style: normal; }
.bgp-ok { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(34,197,94,.08); color: #4ade80; font-size: 13px; }
.bgp-ok svg { width: 16px; height: 16px; flex-shrink: 0; }
.bgp-svc { border-left: 4px solid var(--c); }
.bgp-svc-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bgp-log { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow: auto; }
.bgp-log > div { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 2px 10px; padding: 6px 8px; border-left: 3px solid #64748b; border-radius: 6px; background: rgba(255,255,255,.02); font-size: 12.5px; }
.bgp-log > div > span:last-child { grid-column: 2; color: var(--muted); }
.bgp-log .lv-crit { border-left-color: #ef4444; } .bgp-log .lv-warn { border-left-color: #f59e0b; } .bgp-log .lv-ok { border-left-color: #22c55e; }
.bgp-cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.bgp-cfg-grid h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; } .bgp-cfg-grid h4 svg { width: 16px; height: 16px; }
.bgp-steps { padding: 8px 10px; border-radius: 10px; background: rgba(78,170,227,.07); line-height: 1.5; }
.bgp-inl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.row-btns { display: flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 1280px) { .bgp-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .bgp-my-g { grid-template-columns: minmax(0, 1fr); } .bgp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bgp-inl { grid-template-columns: minmax(0, 1fr); } }
.bgp-more { display: flex; justify-content: center; margin-top: 10px; }
.bgp-cfg-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .bgp-cfg-foot .sp { flex: 1; }
/* v1.44 Topologia: ferramentas de edição (mover, ligar, dobrar, tesoura, excluir, desfazer) */
.zt-tools { position: absolute; left: 10px; top: 10px; z-index: 7; display: flex; flex-direction: column; gap: 2px; padding: 5px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.zt-tools[hidden] { display: none; }
.zt-tools button { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 58px; padding: 6px 2px 5px; border: 1px solid transparent; border-radius: 9px; background: none; color: var(--text); font-size: 10.5px; font-weight: 600; cursor: pointer; }
.zt-tools button svg { width: 18px; height: 18px; }
.zt-tools button:hover:not(:disabled) { background: rgba(255,255,255,.06); }
.zt-tools button.on { background: var(--brand-1); color: #fff; border-color: var(--brand-1); }
.zt-tools button.t-red.on { background: #dc2626; border-color: #dc2626; }
.zt-tools button:disabled { opacity: .35; cursor: default; }
.zt-tools > i { height: 1px; margin: 3px 4px; background: var(--border); }
.zt-undo { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 12px; border-radius: 999px; background: #111827; color: #f3f4f6; border: 1px solid #374151; box-shadow: 0 10px 28px rgba(0,0,0,.45); font-size: 12.5px; max-width: calc(100% - 24px); }
.zt-undo[hidden] { display: none; }
.zt-undo > svg { width: 16px; height: 16px; flex-shrink: 0; color: #f87171; }
.zt-undo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zt-undo .btn { flex-shrink: 0; }
.zt-wrap.tool-cut .zt-svg { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 24 24' fill='%23111827' stroke='%23ef4444' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='3'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Cpath d='M20 4 8.12 15.88M14.47 14.48 20 20M8.12 8.12 12 12'/%3E%3C/svg%3E") 12 12, crosshair; }
.zt-wrap.tool-erase .zt-svg { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23111827' stroke='%23ef4444' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3C/svg%3E") 12 12, not-allowed; }
.zt-wrap.tool-bend .zt-svg { cursor: crosshair; }
.zt-wrap.tool-cut .zt-link:hover, .zt-wrap.tool-erase .zt-link:hover { filter: drop-shadow(0 0 5px #ef4444) drop-shadow(0 0 2px #ef4444); }
.zt-wrap.tool-cut .zt-link:hover path:not(.hit), .zt-wrap.tool-erase .zt-link:hover path:not(.hit) { stroke: #ef4444 !important; }
.zt-wrap.tool-erase .zt-node:hover, .zt-wrap.tool-erase .brow:hover { filter: drop-shadow(0 0 7px #ef4444); opacity: .7; }
.zt-wrap.tool-erase .zt-node .brow:hover { opacity: .6; }
.zt-wrap.tool-bend .zt-link:hover { filter: drop-shadow(0 0 5px #38bdf8); }
@media (max-width: 700px) {
  .zt-tools { top: 8px; left: 8px; flex-direction: row; max-width: calc(100% - 66px); overflow-x: auto; }
  .zt-tools button { width: 48px; flex-shrink: 0; font-size: 10px; }
  .zt-tools > i { width: 1px; height: auto; margin: 4px 3px; flex-shrink: 0; }
  .zt-wrap.editing .zt-hint { top: 74px; }
}
.zt-tools button.t-conf.on { background: rgba(34,197,94,.14); color: #22c55e; border-color: rgba(34,197,94,.45); }
/* v1.45 Clientes IXC · OS de estrutura */
.ose { display: flex; flex-direction: column; gap: 12px; }
.ose-head .card-b { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.ose-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ose-act { display: flex; gap: 6px; flex-wrap: wrap; }
.ose-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ose-kpi { display: flex; flex-direction: column; gap: 2px; padding: 11px 13px; border-radius: 14px; border: 1px solid var(--border); border-left: 4px solid var(--border); background: var(--surface); text-align: left; color: var(--text); cursor: pointer; font: inherit; min-width: 0; }
.ose-kpi:not([data-kact]) { cursor: default; }
.ose-kpi span { font-size: 11.5px; color: var(--muted); font-weight: 600; } .ose-kpi b { font-size: 21px; line-height: 1.2; } .ose-kpi small { font-size: 11px; color: var(--muted); }
.ose-kpi.st-blue { border-left-color: #38bdf8; } .ose-kpi.st-red { border-left-color: #ef4444; background: rgba(239,68,68,.07); } .ose-kpi.st-red b { color: #f87171; }
.ose-kpi.st-warn { border-left-color: #f59e0b; } .ose-kpi.st-warn b { color: #f59e0b; } .ose-kpi.st-ok { border-left-color: #22c55e; } .ose-kpi.st-ok b { color: #22c55e; }
.ose-st { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ose-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; }
.ose-chip.on { border-color: var(--brand-1); background: rgba(78,170,227,.15); }
.ose-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ose-flt .card-b { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ose-flt .search { flex: 1 1 240px; min-width: 200px; }
.ose-flt select { flex: 0 1 190px; min-width: 150px; }
.ose-main { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 12px; align-items: start; }
#oList { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#oSide { display: flex; flex-direction: column; gap: 10px; }
#oSide h4 { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.ose-rk { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; }
.ose-rk:hover { background: rgba(255,255,255,.04); } .ose-rk.on { background: rgba(78,170,227,.15); }
.ose-rk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ose-os { padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); border-left: 4px solid #38bdf8; background: var(--surface); display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ose-os.late { border-left-color: #ef4444; } .ose-os.closed { border-left-color: #64748b; opacity: .88; }
.ose-os header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.ose-os header .sp { flex: 1; }
.ose-badge { padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; border: 1px solid currentColor; }
.s-a { color: #38bdf8; } .s-an { color: #94a3b8; } .s-en { color: #818cf8; } .s-as { color: #a78bfa; } .s-ag { color: #f59e0b; } .s-ds { color: #22d3ee; } .s-ex { color: #22c55e; } .s-rag { color: #fb923c; } .s-f { color: #64748b; }
.ose-dot.s-a { background: #38bdf8; } .ose-dot.s-an { background: #94a3b8; } .ose-dot.s-en { background: #818cf8; } .ose-dot.s-as { background: #a78bfa; } .ose-dot.s-ag { background: #f59e0b; } .ose-dot.s-ds { background: #22d3ee; } .ose-dot.s-ex { background: #22c55e; } .ose-dot.s-rag { background: #fb923c; } .ose-dot.s-f { background: #64748b; }
.ose-prio { padding: 1px 7px; border-radius: 6px; font-size: 11px; font-weight: 700; background: rgba(148,163,184,.15); }
.ose-prio.p-A { background: rgba(245,158,11,.18); color: #fbbf24; } .ose-prio.p-C { background: rgba(239,68,68,.2); color: #f87171; } .ose-prio.p-B { color: var(--muted); }
.ose-orig { font-size: 11px; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--border); color: var(--muted); text-decoration: none; }
.ose-orig.noc { border-color: rgba(78,170,227,.5); color: #4eaae3; }
.ose-age { font-size: 12px; color: var(--muted); white-space: nowrap; } .ose-age.bad, .ose-age.bad b { color: #f87171; }
.ose-w { font-size: 14px; overflow-wrap: anywhere; }
.ose-m { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--muted); }
.ose-m span { display: inline-flex; align-items: center; gap: 5px; } .ose-m svg { width: 13px; height: 13px; } .ose-m .warn { color: #f59e0b; }
.ose-msg { font-size: 12.5px; padding: 7px 10px; border-radius: 9px; background: rgba(255,255,255,.03); overflow-wrap: anywhere; }
.ose-msg.r { background: rgba(34,197,94,.07); }
.ose-steps { display: flex; gap: 4px; flex-wrap: wrap; }
.ose-steps span { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 999px; font-size: 11px; color: var(--muted); border: 1px dashed var(--border); }
.ose-steps span i { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.ose-steps span.ok { color: var(--text); border-style: solid; } .ose-steps span.ok i { background: #22c55e; }
.ose-steps small { color: var(--muted); font-size: 10.5px; }
@media (max-width: 1280px) { .ose-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .ose-main { grid-template-columns: minmax(0, 1fr); } #oSide { display: none; } }
@media (max-width: 600px) { .ose-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ose-flt select { flex: 1 1 45%; min-width: 0; } }
/* v1.46 Tráfego · Looking Glass */
.lg { display: flex; flex-direction: column; gap: 12px; }
.lg-head .card-b { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lg-q { display: flex; gap: 8px; } .lg-q .search { flex: 1; } .lg-q.sm .input { min-width: 220px; }
.lg-what { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lg-real { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(34,197,94,.07); border: 1px solid rgba(34,197,94,.3); font-size: 13px; }
.lg-real > svg { width: 18px; height: 18px; color: #22c55e; flex-shrink: 0; margin-top: 2px; }
.lg-tg { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.lg-t { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; }
.lg-t:has(input:checked) { border-color: var(--brand-1); background: rgba(78,170,227,.08); }
.lg-t > div { display: flex; flex-direction: column; min-width: 0; } .lg-t b { font-size: 13px; }
.lg-run { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.lg-f { display: flex; flex-direction: column; gap: 5px; } .lg-f > label { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.lg-f.wide { flex: 1 1 420px; } .lg-f.go { flex-direction: row; align-items: center; gap: 10px; margin-left: auto; }
.lg-f[hidden] { display: none; }
#lgTg { min-width: 200px; }
.lg-rh { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 14px; }
.lg-cmp, .lg-hops, .lg-bgp, .lg-hist { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lg-cmp th, .lg-hops th, .lg-bgp th, .lg-hist th { text-align: left; font-size: 11px; color: var(--muted); padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.lg-cmp td, .lg-hops td, .lg-bgp td, .lg-hist td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.lg-cmp tbody tr, .lg-hist tbody tr { cursor: pointer; } .lg-cmp tbody tr:hover, .lg-hist tbody tr:hover { background: rgba(255,255,255,.03); }
.lg-hops td:nth-child(n+4) { white-space: nowrap; }
.lg-hops tr.mine { background: rgba(34,197,94,.06); } .lg-hops tr.entry { box-shadow: inset 3px 0 0 #22c55e; } .lg-hops tr.noresp td { opacity: .6; }
td.bad, b.bad, .lg .bad { color: #f87171; } .lg .ok { color: #22c55e; }
.lg-p header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; } .lg-p header .sp { flex: 1; }
.lg-st { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); } .lg-st.finished { color: #22c55e; border-color: rgba(34,197,94,.4); } .lg-st.failed, .lg-st.offline { color: #f87171; }
.lg-k { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--muted); margin-bottom: 8px; } .lg-k b { color: var(--text); } .lg-k small { font-size: 11px; }
.lg-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12.5px; }
.lg-hopas { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,.02); }
.lg-hopas.mine { border-color: rgba(34,197,94,.5); background: rgba(34,197,94,.08); }
.lg-arr { color: var(--muted); font-style: normal; }
.lg-as { color: inherit; text-decoration: none; } .lg-as b { color: var(--brand-1, #4eaae3); } .lg-as:hover b { text-decoration: underline; } .lg-as span { font-size: 12px; }
.lg-as.mine b { color: #22c55e; }
.lg-tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px; font-size: 10.5px; font-weight: 700; background: rgba(148,163,184,.15); color: var(--muted); }
.lg-tag.in { background: rgba(34,197,94,.15); color: #22c55e; } .lg-tag.loss { background: rgba(239,68,68,.15); color: #f87171; }
.lg-bars { display: flex; align-items: flex-end; gap: 3px; height: 46px; margin: 6px 0; }
.lg-bars i { flex: 1; max-width: 22px; background: var(--brand-1, #4eaae3); border-radius: 3px 3px 0 0; opacity: .8; } .lg-bars i.lost { background: #ef4444; }
.lg-raw summary { cursor: pointer; font-size: 12px; color: var(--muted); margin-top: 8px; }
.lg-raw pre { max-height: 320px; overflow: auto; font-size: 11.5px; padding: 10px; border-radius: 8px; background: rgba(0,0,0,.3); white-space: pre-wrap; }
.lg-bgph { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.lg-pfx { border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; }
.lg-pfx > summary { cursor: pointer; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lg-upbar { display: inline-flex; width: 180px; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(148,163,184,.2); margin-left: auto; } .lg-upbar i { display: block; height: 100%; }
.lg-ups { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 0; font-size: 13px; } .lg-ups i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.lg-pp { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lg-iprow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 6px; }
.lg-cmd { padding: 10px; border-radius: 8px; background: rgba(0,0,0,.3); overflow-x: auto; white-space: pre; margin: 0; }
@media (max-width: 700px) { .lg-f.go { margin-left: 0; } .lg-upbar { width: 100%; margin-left: 0; } .lg-q { flex-wrap: wrap; } }
/* v1.46.1 Looking Glass mais fácil */
.lg-help > summary { display: flex; align-items: center; gap: 8px; padding: 12px 16px; cursor: pointer; list-style: none; flex-wrap: wrap; }
.lg-help > summary::-webkit-details-marker { display: none; }
.lg-help > summary svg { width: 18px; height: 18px; color: var(--brand-1, #4eaae3); }
.lg-help > summary::after { content: '▾'; margin-left: auto; color: var(--muted); } .lg-help[open] > summary::after { transform: rotate(180deg); }
.lg-help .card-b { padding-top: 0; }
.lg-steps { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.5; }
.lg-rec { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.lg-r { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.lg-r:hover { border-color: var(--brand-1, #4eaae3); background: rgba(78,170,227,.06); }
.lg-r .e { font-size: 22px; line-height: 1; } .lg-r b { font-size: 13.5px; } .lg-r small { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.lg-stp { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.lg-stp > span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-1, #4eaae3); color: #fff; font-weight: 800; font-size: 12.5px; flex-shrink: 0; }
.lg-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lg-ty { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.lg-ty.on { border-color: var(--brand-1, #4eaae3); background: rgba(78,170,227,.12); box-shadow: 0 0 0 1px var(--brand-1, #4eaae3) inset; }
.lg-ty b { font-size: 14px; } .lg-ty-s { font-size: 11px; font-weight: 700; color: var(--brand-1, #4eaae3); } .lg-ty small { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.lg-adv > summary { cursor: pointer; } .lg-adv .lg-run { margin-top: 8px; }
.lg-gorow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; border-top: 1px solid var(--border); }
.lg-sum { flex: 1 1 280px; font-size: 13px; padding-top: 10px; }
.lg-gobtn { padding: 10px 22px; font-size: 14px; margin-top: 10px; }
.lg-gorow #lgRate { margin-top: 10px; }
.lg-quick { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--border); font-size: 13px; }
.lg-quick ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.lg-quick li.warn::marker { color: #f59e0b; } .lg-quick li.bad::marker { color: #ef4444; }
.lg-ver { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 7px 10px; border-radius: 9px; font-size: 13px; }
.lg-ver svg { width: 16px; height: 16px; flex-shrink: 0; }
.lg-ver.ok { background: rgba(34,197,94,.1); color: #4ade80; } .lg-ver.warn { background: rgba(245,158,11,.1); color: #fbbf24; } .lg-ver.bad { background: rgba(239,68,68,.1); color: #f87171; }
@media (max-width: 1000px) { .lg-rec { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .lg-rec, .lg-types { grid-template-columns: minmax(0, 1fr); } }

/* v1.47 Ranking técnico */
.rk { display: flex; flex-direction: column; gap: 12px; }
.rk-cnt { margin: 0 2px; }
.rk-sg { align-items: flex-start; } .rk-sg .btn { margin-left: 6px; vertical-align: middle; }
.rk-gs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
.rk-g { min-width: 0; } .rk-g .card-b { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rk-g .table-wrap, .rk-fora .table-wrap { overflow-x: auto; max-width: 100%; }
.rk-t { width: 100%; border-collapse: collapse; font-size: 13px; }
.rk-t th { text-align: left; font-size: 11.5px; color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rk-t td { border-top: 1px solid var(--border); }
.rk-pts-t table { border-collapse: collapse; width: 100%; } .rk-pts-t td, .rk-pts-t th { padding: 4px 6px; text-align: left; } .rk-pts-t th.num { text-align: right; } .rk-pts-t td:nth-child(n+3) { width: 90px; text-align: right; } .rk-t td.num, .rk-t th.num { white-space: nowrap; text-align: right; }
.rk-cfg [hidden] { display: none !important; }
@media (max-width: 1700px) and (min-width: 1101px) { .rk-t .rk-spc { display: none; } }
.rk-gh { display: flex; flex-direction: column; gap: 2px; } .rk-gh h3 { margin: 0; font-size: 16px; }
.rk-pod { display: flex; justify-content: center; align-items: flex-end; gap: 10px; padding-top: 4px; }
.rk-pd { flex: 1 1 0; max-width: 180px; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px 0; border: 1px solid var(--border); border-radius: 14px 14px 6px 6px; background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; text-align: center; }
.rk-pd b { font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-pd .m { font-size: 26px; line-height: 1; } .rk-pd .pt { font-weight: 800; font-size: 17px; } .rk-pd small { color: var(--muted); font-size: 11px; }
.rk-pd i { display: block; width: 100%; margin-top: 8px; border-radius: 6px 6px 0 0; }
.rk-pd.p1 i { height: 46px; background: linear-gradient(180deg, rgba(250,204,21,.55), rgba(250,204,21,.12)); } .rk-pd.p1 { border-color: rgba(250,204,21,.6); }
.rk-pd.p2 i { height: 30px; background: linear-gradient(180deg, rgba(203,213,225,.5), rgba(203,213,225,.1)); }
.rk-pd.p3 i { height: 18px; background: linear-gradient(180deg, rgba(217,119,6,.45), rgba(217,119,6,.1)); }
.rk-pd:hover { border-color: var(--primary, #38bdf8); }
.rk-t td, .rk-t th { padding: 7px 8px; vertical-align: middle; }
.rk-t td small { display: block; color: var(--muted); font-size: 11px; font-weight: 400; }
.rk-t tbody tr[data-tec] { cursor: pointer; } .rk-t tbody tr[data-tec]:hover { background: var(--surface-2); }
.rk-t tr.top { background: rgba(250,204,21,.05); } .rk-t tr.dim { opacity: .6; }
.rk-pos { width: 34px; text-align: center; font-weight: 700; font-size: 15px; }
.rk-nm small { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-pts b { font-size: 15px; } .rk-pts small { color: #f87171 !important; }
.rk-t td.bad { color: #f87171; }
.rk-spark { width: 84px; height: 22px; display: block; } .rk-spark rect { fill: var(--primary, #38bdf8); opacity: .75; }
.rk-fora summary, .rk-help summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.rk-help ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.rk-det h4 { margin: 14px 0 6px; } .rk-osl { max-height: 46vh; overflow: auto; }
.rk-dk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rk-dk div { border: 1px solid var(--border); border-radius: 12px; padding: 8px 10px; display: flex; flex-direction: column; } .rk-dk span { font-size: 11.5px; color: var(--muted); } .rk-dk b { font-size: 19px; }
.rk-ret { color: #f87171; font-size: 12px; font-weight: 600; }
.rk-cfg { display: flex; flex-direction: column; gap: 10px; } .rk-ctab { align-self: flex-start; flex-wrap: wrap; }
.rk-cts { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; }
.rk-ct { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--border); }
.rk-ct span { display: flex; flex-direction: column; min-width: 0; } .rk-ct small { color: var(--muted); font-size: 11px; }
.rk-ct[hidden] { display: none; }
.rk-defp { display: flex; gap: 14px; flex-wrap: wrap; } .rk-defp label { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; }
.rk-defp input, .rk-pts-t input { width: 76px !important; flex: 0 0 76px; text-align: right; }
.rk-pts-t { max-height: 46vh; overflow: auto; }
@media (max-width: 1100px) { .rk-gs { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .rk-dk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rk-ct { flex-direction: column; align-items: stretch; } .rk-ct .seg { align-self: flex-start; flex-wrap: wrap; }
  .rk-nm small { max-width: 140px; } .rk-pd .m { font-size: 22px; } .rk-pd .pt { font-size: 15px; }
  .rk-head .seg { flex-wrap: wrap; }
}
@media (max-width: 600px) { .rk .hide-sm, .rk-t .hide-sm { display: none; } }

/* v1.47.1 Ranking técnico no Painel TV */
.tv-rank { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tv-rank[hidden] { display: none !important; }
.tvr { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.2vh; }
.tvr-h { display: flex; justify-content: space-between; align-items: baseline; gap: 2vw; font-size: 2.2vh; flex-wrap: wrap; }
.tvr-h .muted { font-size: 1.5vh; color: #8b95a7; }
.tvr-gs { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2vw; }
.tvr-g { min-height: 0; display: flex; flex-direction: column; gap: 1.4vh; padding: 1.6vh 1.2vw; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); overflow: hidden; }
.tvr-g.moto { border-top: 4px solid #38bdf8; } .tvr-g.escada { border-top: 4px solid #a78bfa; }
.tvr-g header { display: flex; flex-direction: column; gap: .4vh; }
.tvr-g h2 { margin: 0; font-size: 3vh; }
.tvr-st { display: flex; gap: 1.6vw; font-size: 1.8vh; color: #9aa4b5; flex-wrap: wrap; } .tvr-st b { color: #e8ecf3; }
.tvr-pod { display: flex; justify-content: center; align-items: flex-end; gap: 1vw; }
.tvr-pd { flex: 1 1 0; min-width: 0; max-width: 32%; display: flex; flex-direction: column; align-items: center; gap: .3vh; padding: 1.4vh .6vw 0; border-radius: 16px 16px 6px 6px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); text-align: center; }
.tvr-pd .m { font-size: 5vh; line-height: 1; } .tvr-pd.p1 .m { font-size: 6.4vh; }
.tvr-pd .n { font-size: 2.2vh; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tvr-pd.p1 .n { font-size: 2.6vh; }
.tvr-pd .pt { font-size: 3.4vh; font-weight: 800; line-height: 1.1; } .tvr-pd.p1 .pt { font-size: 4.4vh; color: #facc15; } .tvr-pd .pt small { font-size: 1.6vh; font-weight: 600; color: #9aa4b5; }
.tvr-pd .sub { font-size: 1.5vh; color: #9aa4b5; } .tvr-pd .sub .r { color: #f87171; }
.tvr-pd i { display: block; width: 100%; margin-top: 1vh; border-radius: 6px 6px 0 0; }
.tvr-pd.p1 { border-color: rgba(250,204,21,.55); } .tvr-pd.p1 i { height: 7vh; background: linear-gradient(180deg, rgba(250,204,21,.55), rgba(250,204,21,.1)); }
.tvr-pd.p2 i { height: 4.5vh; background: linear-gradient(180deg, rgba(203,213,225,.5), rgba(203,213,225,.08)); }
.tvr-pd.p3 i { height: 2.6vh; background: linear-gradient(180deg, rgba(217,119,6,.5), rgba(217,119,6,.08)); }
.tvr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6vh; min-height: 0; overflow: hidden; }
.tvr-list li, .tvr-lh { display: grid; grid-template-columns: 2.6vw minmax(0, 1fr) 4.2vw 2.6vw 3.2vw 4.6vw 5.4vw; gap: .6vw; align-items: center; padding: .8vh .8vw; }
.tvr-list li { border-radius: 10px; background: rgba(255,255,255,.03); font-size: 2vh; }
.tvr-list li.top { background: rgba(250,204,21,.05); }
.tvr-lh { font-size: 1.4vh; color: #8b95a7; text-transform: uppercase; letter-spacing: .04em; padding-top: 0; padding-bottom: 0; }
.tvr-lh span:nth-child(n+3), .tvr-list li span:nth-child(n+3) { text-align: right; }
.tvr-list .n { position: relative; padding-bottom: .7vh; }
.tvr-list .n .bar { position: absolute; left: 0; bottom: 0; height: .45vh; border-radius: 3px; background: #38bdf8; opacity: .8; }
.tvr-g.escada .tvr-list .n .bar { background: #a78bfa; }
.tvr-list .rt small { font-size: 1.4vh; }
.tvr-list .p { font-weight: 800; color: #9aa4b5; font-size: 2.2vh; } .tvr-list .n { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvr-list .pt { font-weight: 800; } .tvr-list .os, .tvr-list .tm { color: #9aa4b5; } .tvr-list .rt { color: #9aa4b5; text-align: right; } .tvr-list .rt.bad { color: #f87171; }
@media (max-width: 900px) { .tvr-gs { grid-template-columns: 1fr; overflow: auto; } }

/* v1.47.2 ranking: plantão, férias, horários */
.rk-bdg { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 999px; vertical-align: 1px; }
.rk-bdg.au { background: rgba(34,197,94,.12); color: #4ade80; } .rk-bdg.pl { padding: 0 2px; }
.rk-aus .card-b { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rk-chip { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12.5px; cursor: pointer; }
.rk-chip small { color: var(--muted); }
.rk-tf { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .rk-tf .search { flex: 1 1 200px; }
.rk-ctr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.rk-pl { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rk-ht { border-collapse: collapse; width: 100%; } .rk-ht td, .rk-ht th { padding: 5px 6px; text-align: left; white-space: nowrap; } .rk-ht input { width: 110px; display: inline-block; }
.rk-aadd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .rk-aadd label { display: inline-flex; gap: 4px; align-items: center; font-size: 12.5px; } .rk-aadd #auTec { min-width: 220px; } .rk-aadd #auObs { flex: 1 1 140px; }
.rk-al { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; max-height: 40vh; overflow: auto; }
.rk-ai { display: grid; grid-template-columns: minmax(0, 1.4fr) 90px 170px minmax(0, 1fr) 34px; gap: 8px; align-items: center; padding: 5px 8px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; }
.rk-ai b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-ausn { margin-bottom: 10px; }
.tvr-list .n small.au { color: #4ade80; font-size: 1.4vh; font-weight: 600; }
.tvr-aus { font-size: 1.7vh; color: #9aa4b5; } .tvr-aus b { color: #4ade80; font-weight: 600; }
@media (max-width: 600px) { .rk-ai { grid-template-columns: 1fr auto; } .rk-ai span { grid-column: 1; } .rk-ht input { width: 92px; } }

/* v1.48.1 ranking: plantão liga/desliga, escala, busca de assunto */
.rk-plon { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; }
.rk-ht.pl-off .plc, .rk-ht.pl-off td:last-child { opacity: .35; pointer-events: none; }
.rk-esc { margin-top: 14px; } .rk-esc h4 { margin: 0 0 4px; } .rk-esc.pl-off { opacity: .35; pointer-events: none; }
.rk-ai.es { grid-template-columns: minmax(0, 1.4fr) 90px 170px minmax(0, 1fr) 34px; }
.rk-pts-t tr[hidden] { display: none; }
.rk-tf .check.small { font-size: 12.5px; }

/* v1.48.3 TV ranking: todos os técnicos, nomes completos, letra ajustável */
.tvr-pd .n { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tvr-list li { font-size: var(--tvr-fs, 2vh); padding: .5vh .8vw; }
.tvr-list .p { font-size: calc(var(--tvr-fs, 2vh) * 1.05); }
.tvr-list .n { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; overflow-wrap: anywhere; padding-bottom: .6vh; }
.tvr-list .n .nm { font-weight: 700; }
.tvr-list .n small.pl { font-size: calc(var(--tvr-fs, 2vh) * .8); }
.tvr-list li.zero { opacity: .5; }
.tvr-list { gap: .45vh; overflow: hidden; }
.tvr-list li, .tvr-lh { grid-template-columns: 2.4vw minmax(0, 1fr) 4vw 2.8vw 3.2vw 4.6vw 5.2vw; }
.tvr.compact .tvr-pd { padding-top: .8vh; } .tvr.compact .tvr-pd .m { font-size: 3.4vh; } .tvr.compact .tvr-pd.p1 .m { font-size: 4vh; }
.tvr.compact .tvr-pd .pt { font-size: 2.6vh; } .tvr.compact .tvr-pd.p1 .pt { font-size: 3.2vh; } .tvr.compact .tvr-pd .n { font-size: 1.8vh; }
.tvr.compact .tvr-pd i { margin-top: .5vh; } .tvr.compact .tvr-pd.p1 i { height: 3vh; } .tvr.compact .tvr-pd.p2 i { height: 2vh; } .tvr.compact .tvr-pd.p3 i { height: 1.2vh; }
.tvr.compact .tvr-g { gap: .9vh; padding: 1.2vh 1vw; } .tvr.compact .tvr-g h2 { font-size: 2.5vh; }
.rk-sets { display: flex; flex-wrap: wrap; gap: 6px 16px; max-height: 26vh; overflow: auto; padding: 6px 2px; } .rk-sets .check { font-size: 13px; }

/* v1.48.3 regiões */
.rk-bdg.rg { background: rgba(56,189,248,.12); color: #7dd3fc; }
.rk-rsel { width: auto; min-width: 130px; }
.tvr-list .n small.rg { color: #7dd3fc; font-size: calc(var(--tvr-fs, 2vh) * .7); font-weight: 600; }
.tvr-h .tvr-reg { color: #7dd3fc; }
.tvr-g { display: flex; flex-direction: column; min-height: 0; }
.tvr-list { flex: 1 1 auto; min-height: 0; }
.tvr.nopod .tvr-pod { display: none; }
.tvr-list li { padding: calc(var(--tvr-fs, 2vh) * .25) .8vw; }
.tvr-list .n { padding-bottom: calc(var(--tvr-fs, 2vh) * .3); }
.tvr-list .n small.rg, .rk-bdg.rg { white-space: nowrap; display: inline-block; }

/* v1.48.4 reincidência clicável */
.rk-rei { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dashed; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rk-rei:hover { color: #f87171; }
.tvr .rk-rei { cursor: pointer; }
.rk-rein { display: flex; flex-direction: column; gap: 6px; max-height: 65vh; overflow: auto; }
.rk-ri { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) 90px minmax(0, 1.5fr); gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; }
.rk-ri .cli, .rk-ri .os { display: flex; flex-direction: column; min-width: 0; }
.rk-ri .cli b { overflow-wrap: anywhere; }
.rk-ri .lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.rk-ri .os.nv .lbl { color: #f87171; }
.rk-ri .arr { text-align: center; color: var(--muted); font-size: 18px; display: flex; flex-direction: column; } .rk-ri .arr small { font-size: 11px; }
@media (max-width: 700px) { .rk-ri { grid-template-columns: 1fr; gap: 4px; } .rk-ri .arr { flex-direction: row; gap: 6px; align-items: center; text-align: left; } }

/* v1.48.5 TV: linhas com altura fixa (1/N) e nome do pódio sem passar por cima dos pontos */
.tvr-list { display: flex; flex-direction: column; }
.tvr-list li { min-height: var(--slot, auto); box-sizing: border-box; flex: 0 0 auto; }
.tvr-pd .n { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 100%; flex: 0 0 auto; }
.tvr-pd { overflow: hidden; }

/* v1.49 em atendimento agora */
.rk-live .card-b { padding-top: 12px; padding-bottom: 12px; }
.rkl-h { display: flex; align-items: center; gap: 8px; } .rkl-h .n { background: var(--surface-2); border-radius: 999px; padding: 0 8px; font-weight: 700; font-size: 12px; }
.rkl-err { color: #f59e0b; font-size: 12px; }
.rkl-sub { font-size: 11.5px; color: var(--muted); margin: 2px 0 8px; }
.rkl-empty { color: var(--muted); font-size: 13px; padding: 6px 0; }
.rkl-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.rkl-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border); border-left: 4px solid #22c55e; background: var(--surface-2); }
.rkl-list li.warn { border-left-color: #f59e0b; } .rkl-list li.over { border-left-color: #ef4444; background: rgba(239,68,68,.1); animation: rklPulse 1.6s ease-in-out infinite; }
@keyframes rklPulse { 50% { background: rgba(239,68,68,.22); } }
.rkl-list .g { font-size: 18px; }
.rkl-list .w { display: flex; flex-direction: column; min-width: 0; } .rkl-list .w b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.rkl-list .w small { color: var(--muted); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rkl-list .w small.c { color: var(--text); opacity: .75; }
.rkl-list .bar { display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.08); margin-top: 4px; } .rkl-list .bar > i { display: block; height: 100%; border-radius: 2px; background: #22c55e; width: 0; }
.rkl-list li.warn .bar > i { background: #f59e0b; } .rkl-list li.over .bar > i { background: #ef4444; }
.rkl-list .tm { text-align: right; display: flex; flex-direction: column; } .rkl-list .tm .t { font: 700 18px/1.1 ui-monospace, Menlo, Consolas, monospace; } .rkl-list .tm small { color: var(--muted); font-size: 11px; }
.rkl-list li.warn .t { color: #f59e0b; } .rkl-list li.over .t { color: #f87171; }
/* pop-up */
.rk-alerts { position: fixed; right: 16px; top: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.rk-alerts.tv { width: min(36vw, 640px); top: 2vh; right: 1.5vw; }
.rk-alert { pointer-events: auto; background: #1a0b0b; border: 2px solid #ef4444; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.6), 0 0 0 6px rgba(239,68,68,.15); padding: 12px 14px; color: #fde8e8; transform: translateX(120%); transition: transform .35s ease; }
.rk-alert.show { transform: none; animation: rkaShake .5s ease .35s 2; }
@keyframes rkaShake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.rk-al-h { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 15px; color: #fca5a5; margin-bottom: 6px; }
.rk-al-h button { background: none; border: 0; color: #fca5a5; font-size: 16px; cursor: pointer; }
.rk-al-i { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid rgba(239,68,68,.25); }
.rk-al-i .g { font-size: 20px; } .rk-al-i div { display: flex; flex-direction: column; min-width: 0; } .rk-al-i small { color: #fecaca; opacity: .8; font-size: 12px; }
.rk-al-i .t { font: 800 22px/1 ui-monospace, Menlo, Consolas, monospace; color: #f87171; } .rk-al-i .lim { grid-column: 3; text-align: right; font-size: 11px; }
.rk-alerts.tv .rk-al-h { font-size: 2.4vh; } .rk-alerts.tv .rk-al-i b { font-size: 2.2vh; } .rk-alerts.tv .rk-al-i small { font-size: 1.6vh; } .rk-alerts.tv .rk-al-i .t { font-size: 3.2vh; } .rk-alerts.tv .rk-al-i .g { font-size: 3vh; }
/* TV: 3ª coluna */
.tvr-gs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .62fr); }
.tvr-live { min-height: 0; display: flex; flex-direction: column; padding: 1.4vh .9vw; border-radius: 18px; border: 1px solid rgba(255,255,255,.08); border-top: 4px solid #22c55e; background: rgba(255,255,255,.025); overflow: hidden; }
.tvr-live .rkl-h { font-size: 2.4vh; } .tvr-live .rkl-h .n { font-size: 1.8vh; background: rgba(255,255,255,.08); }
.tvr-live .rkl-sub { font-size: 1.4vh; color: #9aa4b5; margin-bottom: 1vh; } .tvr-live .rkl-empty { font-size: 1.8vh; color: #9aa4b5; }
.tvr-live .rkl-list { display: flex; flex-direction: column; gap: .7vh; overflow: hidden; }
.tvr-live .rkl-list li { padding: .8vh .6vw; background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.08); border-left-width: .4vw; }
.tvr-live .rkl-list .g { font-size: 2.4vh; } .tvr-live .rkl-list .w b { font-size: 1.8vh; } .tvr-live .rkl-list .w small { font-size: 1.35vh; }
.tvr-live .rkl-list .tm .t { font-size: 2.8vh; } .tvr-live .rkl-list .tm small { font-size: 1.2vh; } .tvr-live .rkl-list .bar { height: .4vh; margin-top: .5vh; }
@media (max-width: 900px) { .tvr-gs { grid-template-columns: 1fr; } }
/* v1.49: com a coluna "em atendimento" na TV, números mais estreitos para sobrar espaço para o nome */
.tvr-gs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .52fr); gap: 1vw; }
.tvr-list li, .tvr-lh { grid-template-columns: 2vw minmax(0, 1fr) 3.2vw 2.2vw 2.8vw 3.6vw 4.2vw; gap: .45vw; }
.tvr-live .rkl-h b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvr-live .rkl-list .tm .t { font-size: 2.5vh; }
.tvr-live .rkl-list .w b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.15; }
/* v1.49: colunas da TV com rolagem quando não couber todo mundo */
.tvr-list, .tvr-live .rkl-list { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; }
.tvr-list::-webkit-scrollbar, .tvr-live .rkl-list::-webkit-scrollbar { width: 6px; } .tvr-list::-webkit-scrollbar-thumb, .tvr-live .rkl-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }
.tvr-live .rkl-list { flex: 1 1 auto; min-height: 0; }
/* v1.49: na TV o pop-up fica embaixo, no centro (não cobre a coluna "em atendimento") */
.rk-alerts.tv { top: auto; bottom: 3vh; right: auto; left: 50%; transform: translateX(-50%); width: min(44vw, 760px); flex-direction: column-reverse; }
.rk-alerts, .rk-alerts.tv { background: transparent !important; height: auto !important; min-height: 0 !important; max-height: 94vh; padding: 0 !important; }
.rk-alerts:not(.tv) { top: auto; bottom: 16px; right: 16px; flex-direction: column-reverse; }
.rk-alerts { max-height: 60vh; overflow: hidden; }
.rk-al-l { max-height: 26vh; overflow-y: auto; scrollbar-width: thin; }
.rk-alerts.tv .rk-al-l { max-height: 34vh; }

/* v1.49.1 clique na OS / técnico abre as finalizadas */
.rkl-list li[data-os], .tvr-list li[data-tvtec], .tvr-pd[data-tvtec] { cursor: pointer; }
.rkl-list li[data-os]:hover { filter: brightness(1.15); }
.tvr-list li[data-tvtec]:hover { background: rgba(255,255,255,.07); }
.rk-dlive { margin-bottom: 12px; } .rk-dlive h4 { margin: 0 0 6px; }
.rk-dli { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); border-left: 4px solid #22c55e; margin-bottom: 6px; }
.rk-dli span { display: flex; flex-direction: column; min-width: 0; } .rk-dli small { font-size: 11.5px; }
.rk-dli .t { font: 800 20px/1 ui-monospace, Menlo, Consolas, monospace; }
.rk-dli.warn { border-left-color: #f59e0b; } .rk-dli.warn .t { color: #f59e0b; }
.rk-dli.over { border-left-color: #ef4444; background: rgba(239,68,68,.08); } .rk-dli.over .t { color: #f87171; }

/* v1.49.2 filtros salvos + cliente no detalhe */
.rk-fseg button { white-space: nowrap; }
.rk-cli { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-flist { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.rk-fi { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr) auto auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.rk-fi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-fedit { margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; gap: 10px; }
.rk-fedit[hidden] { display: none; }
.rk-fblk { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.rk-fh { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; } .rk-fh input { width: 180px; }
.rk-fopts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 12px; max-height: 160px; overflow: auto; font-size: 13px; }
.rk-fopts label[hidden] { display: none; }
.rk-fm { flex: none; } .rk-fid { font-size: 10.5px; } .rk-fwho { border-color: color-mix(in srgb, var(--brand-1) 45%, var(--border)); background: color-mix(in srgb, var(--brand-1) 5%, transparent); }
.rk-fhint { margin: 0 0 6px; } .rk-ftg { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; } .rk-ftb { font-size: 10.5px; padding: 0 6px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; } .rk-ftb.off { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.rk-ftset { border: 1px solid var(--border); background: var(--surface-2); border-radius: 6px; padding: 0 4px; font-size: 12px; line-height: 18px; cursor: pointer; } .rk-ftset:hover { border-color: var(--brand-1); }
.rk-fopts[data-flk=tecs] { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); max-height: 300px; gap: 6px 12px; } .rk-fopts[data-flk=tecs] label { align-items: center; } .rk-fopts[data-flk=tecs] .rk-ftg { margin-left: auto; }
.rk-ffil { display: block; font-size: 11px; color: var(--text-2); } .rk-ffil.none { color: var(--muted); font-style: italic; }
.rk-fall { display: inline-flex; gap: 4px; margin-left: auto; } .rk-fall .btn { padding: 2px 8px; font-size: 12px; } .rk-fwho .rk-fopts { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 600px) { .rk-fi { grid-template-columns: 1fr auto auto; } .rk-fi span { grid-column: 1 / -1; grid-row: 2; white-space: normal; } }
.rk-osl td, .rk-osl th { white-space: nowrap; } .rk-osl td.rk-cli { white-space: nowrap; }

/* v1.50 ajustes de layout: nada sai do cartão */
/* cartão de queda: nome longo da OLT (sem espaços) não empurra mais o selo para fora */
.qd-top > div { min-width: 0; flex: 1 1 auto; }
.qd-top > div > span, .qd-top > div > b { overflow-wrap: anywhere; }
.qd-top > .ix-pill, .qd-top > span:last-child { flex: 0 0 auto; white-space: nowrap; }
/* usuários: botões de ação quebram em 2 linhas em vez de sumir à direita */
.utable td.u-acts { text-align: right; white-space: normal; width: 1%; }
.u-acts-in { display: inline-flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 92px; }
/* ranking no celular: botões de período/região/turno quebram linha */
.ose-act .seg { flex-wrap: wrap; max-width: 100%; }
.ose-act { min-width: 0; max-width: 100%; }
/* v1.50 juntar PONs da mesma OLT numa OS */
.qd-sel { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; margin: -4px 0 -2px; flex-wrap: wrap; }
.qd-sel small { font-weight: 400; }
.qd-card.qd-picked { outline: 2px solid #38bdf8; outline-offset: -1px; }
.qd-joinbar { position: sticky; top: 8px; z-index: 5; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(56,189,248,.5); background: var(--surface-2); box-shadow: 0 6px 20px rgba(0,0,0,.25); font-size: 13px; }
.qd-joinbar > span:first-child { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.qd-joinbar .sp { flex: 1; }

/* ===== modo offline / fila de envio (v1.51) ===== */
.net-pill { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 190; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px);
  padding: 7px 14px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--brand-1) 45%, transparent); background: color-mix(in srgb, var(--surface) 92%, var(--brand-1)); color: var(--text);
  font: inherit; font-size: 12.5px; box-shadow: var(--shadow); cursor: pointer; white-space: nowrap; }
.net-pill span { overflow: hidden; text-overflow: ellipsis; }
.net-pill svg { width: 15px; height: 15px; flex: none; color: var(--brand-1); }
.net-pill.off { border-color: color-mix(in srgb, var(--warn) 55%, transparent); background: color-mix(in srgb, var(--surface) 88%, var(--warn)); }
.net-pill.off svg { color: var(--warn); }
.net-pill.bad { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.net-pill.bad svg { color: var(--danger); }
.net-pill.sync svg { animation: rot 1s linear infinite; }
.net-pill.in-tb { position: static; transform: none; flex: none; box-shadow: none; max-width: 42%; padding: 6px 12px; }
@media (max-width: 860px) { .net-pill { bottom: calc(12px + env(safe-area-inset-bottom)); font-size: 12px; padding: 6px 12px; opacity: .96; } }
.ob-list { display: flex; flex-direction: column; gap: 8px; }
.ob-it { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); min-width: 0; }
.ob-it.conflict { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.ob-it.error { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.ob-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ob-err { color: var(--warn); margin-top: 3px; } .ob-it.error .ob-err { color: var(--danger); }
.ob-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; flex: none; max-width: 55%; }
.ob-acts .danger-t { color: var(--danger); }
@media (max-width: 600px) { .ob-it { flex-direction: column; align-items: stretch; } .ob-acts { max-width: none; justify-content: flex-start; } }
.pend-tag { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); vertical-align: middle; }
.tl.comment.pend .bubble { opacity: .75; border-style: dashed; }
.notice.off-pend { cursor: pointer; margin-bottom: 14px; background: color-mix(in srgb, var(--warn) 10%, transparent); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.notice.off-pend svg { color: var(--warn); }
#inBtn[hidden] { display: none !important; }

/* v1.52: assuntos — ativo + tempo limite por assunto */
.rk-pts-t td.rk-aon, .rk-pts-t th:first-child { width: 46px; text-align: center; }
.rk-aon-cb { width: 18px; height: 18px; accent-color: var(--ok); cursor: pointer; }
.rk-pts-t tr.rk-aoff td:not(.rk-aon) { opacity: .45; }
.rk-pts-t tr.rk-aoff td:nth-child(2) { text-decoration: line-through; }
.rk-defp b.small { align-self: center; color: var(--text-2); }
.rkl-list .lim.own { color: var(--brand-1); }
/* v1.52: configuração do ranking no celular — nada estica a janela para fora da tela */
@media (max-width: 860px) {
  .modal:has(.rk-cfg) { max-width: 100vw; }
  .modal:has(.rk-cfg) .modal-b { min-width: 0; overflow-x: hidden; }
  .rk-cfg { min-width: 0; max-width: 100%; }
  .rk-cfg .seg, .rk-cfg .rk-defp, .rk-cfg .rk-tf { flex-wrap: wrap; }
  .rk-cfg .seg button { white-space: normal; }
  .rk-cfg .table-wrap { max-width: 100%; overflow-x: auto; }
  .rk-cfg .rk-pts-t td:nth-child(2) { min-width: 130px; }
}

/* v1.53: filiais do usuário (Ranking técnico) */
.u-fil { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; max-height: 200px; overflow: auto; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.u-fil .check { margin: 0; overflow-wrap: anywhere; }

/* v1.54: assuntos mais usados + tempo Moto × Escada */
.rk-pts-t.rk-vt .rk-cpt, .rk-pts-t.rk-vp .rk-ctm { display: none; }
.rk-pts-t td.rk-au, .rk-pts-t td.rk-am { white-space: nowrap; }
.rk-pts-t td.rk-am { width: auto !important; font-size: 12px; }
.rk-pts-t td.rk-an { min-width: 180px; }
.rk-apos { display: inline-block; min-width: 26px; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rk-amodo, .rk-uso-h, .rk-uso-a { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rk-amodo { margin-bottom: 10px; }
.rk-uso { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.rk-uso-s { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.rk-uso-s .check { margin: 0; }
.rk-pts-t { max-height: 50vh; }

/* v1.54.1: aba Assuntos reorganizada */
.modal.wide:has(.rk-cfg) { max-width: min(1040px, calc(100vw - 32px)); }
.rka { display: flex; flex-direction: column; gap: 10px; }
.rka-card { border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.rka-h { display: flex; align-items: center; gap: 8px; font-size: 13px; } .rka-h svg { width: 15px; height: 15px; color: var(--brand-1); }
.rka-row { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.rka-f { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; position: relative; }
.rka-l { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.rka-in { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.rka-in input { width: 64px !important; text-align: right; }
.rka-setbtn { max-width: 340px; } .rka-setbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rka-setbtn svg { width: 14px; height: 14px; margin: 0 0 0 4px; }
.rka-pop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 300px; max-width: min(420px, 86vw); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow); padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.rka-pop[hidden] { display: none; }
.rka-poplist { max-height: 260px; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: 2px; }
.rka-poplist .check { margin: 0; padding: 4px 6px; border-radius: 6px; } .rka-poplist .check:hover { background: var(--surface-2); }
.rka-auto { margin-left: 6px; font-size: 10px; font-weight: 700; color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); border-radius: 999px; padding: 0 6px; }
.rka-popf { display: flex; align-items: center; gap: 6px; border-top: 1px solid var(--border); padding-top: 6px; } .rka-popf .sp { flex: 1; }
.rka-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .rka-tools .search { flex: 1 1 220px; }
.rka-sel { width: auto !important; min-width: 170px; }
.rka-act { position: relative; } .rka-act .rka-pop { left: auto; right: 0; }
.rka-menu button { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.rka-menu button:hover { background: var(--surface-2); } .rka-menu button svg { width: 15px; height: 15px; color: var(--brand-1); }
.rka-menu button small { flex-basis: 100%; padding-left: 23px; color: var(--muted); font-size: 11.5px; }
.rka-t-wrap { max-height: 46vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.rka-tbl { width: 100%; border-collapse: collapse; }
.rka-tbl thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-3); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); padding: 8px 8px; white-space: nowrap; }
.rk-pts-t .rka-tbl td { padding: 6px 8px; vertical-align: middle; border-top: 1px solid var(--border); width: auto; text-align: left; }
.rka-tbl tbody tr:hover { background: color-mix(in srgb, var(--brand-1) 5%, transparent); }
.rk-pts-t .rka-tbl td.rka-c, .rka-tbl th.rka-c { width: 36px; text-align: center; }
.rk-pts-t .rka-tbl td.rka-pos, .rka-tbl th.rka-pos { width: 38px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; }
.rka-n { min-width: 220px; } .rka-nm { display: block; font-weight: 600; font-size: 13px; line-height: 1.25; } .rka-n small { color: var(--muted); font-size: 11px; }
.rk-pts-t .rka-tbl td.rka-os { width: 70px; text-align: right; white-space: nowrap; } .rka-os b { display: block; font-size: 13.5px; } .rka-os small { color: var(--muted); font-size: 11px; }
.rk-pts-t .rka-tbl td.rka-t { width: 108px; text-align: right; }
.rka-t input { width: 72px !important; text-align: right; }
.rka-med { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.rka-tbl tr.rk-own td.rk-ctm input { border-color: color-mix(in srgb, var(--brand-1) 55%, var(--border)); }
.rka-tbl tr.rk-aoff td:not(.rka-c) { opacity: .45; } .rka-tbl tr.rk-aoff .rka-nm { text-decoration: line-through; }
.rka-tbl tr.rk-aoff td.rka-n { text-decoration: none; }
.rka-empty { padding: 22px; text-align: center; color: var(--muted); font-size: 13px; }
.rka-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; }
@media (max-width: 600px) {
  .rka-n { min-width: 150px; } .rka-pop { min-width: 0; width: 86vw; } .rka-act .rka-pop { right: auto; left: 0; }
  .rka-tbl th.rka-pos, .rka-tbl td.rka-pos { display: none; }
  .rka-f.rka-set { width: 100%; } .rka-setbtn { max-width: 100%; flex: 1 1 auto; min-width: 0; justify-content: space-between; }
}

/* ===== Proxmox VE (v1.55) ===== */
.pv-top .sp { flex: 1; }
.pv-cnt { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.pv-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #64748b; flex: none; }
.pv-dot.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); } .pv-dot.off { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.15); } .pv-dot.warn { background: var(--warn); }
.pv-bar { display: inline-block; position: relative; width: 100%; max-width: 160px; height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; vertical-align: middle; }
.pv-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: #22c55e; }
.pv-bar.warn i { background: var(--warn); } .pv-bar.crit i { background: var(--danger); }
.pv-bad { color: #f87171; font-weight: 600; } .pv-ok { color: #4ade80; font-weight: 600; }
.pv-new { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: #0b0d12; background: #38bdf8; vertical-align: middle; }
.pv-al { display: inline-flex; margin-left: 6px; vertical-align: middle; } .pv-al svg { width: 14px; height: 14px; } .pv-al.crit { color: var(--danger); } .pv-al.warn { color: var(--warn); }
.pv-err { margin: 6px 0; padding: 6px 10px; border-radius: 8px; background: rgba(239,68,68,.1); color: #fca5a5; font-size: 12.5px; overflow-wrap: anywhere; }
/* faixa de alarmes */
.pv-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-bottom: 14px; }
.pv-sa { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); border-left: 4px solid var(--warn); background: var(--surface); cursor: pointer; min-width: 0; }
.pv-sa b { font-size: 13px; overflow-wrap: anywhere; } .pv-sa small { font-size: 11.5px; overflow-wrap: anywhere; }
.pv-sa.crit { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.pv-sa.more { justify-content: center; align-items: center; color: var(--muted); border-left-color: var(--border-strong); }
.pv-allok { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 9px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); font-size: 13px; }
.pv-allok svg { width: 16px; height: 16px; color: var(--ok); }
/* cartões dos servidores */
.pv-srvs { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; }
.pv-srv { padding: 14px 16px; border-top: 3px solid var(--ok); }
.pv-srv.warn { border-top-color: var(--warn); } .pv-srv.crit, .pv-srv.down { border-top-color: var(--danger); }
.pv-sh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pv-sh h3 { margin: 0; font: 800 18px var(--font-display); }
.pv-sst { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; }
.pv-sst.on { color: #4ade80; background: rgba(34,197,94,.12); } .pv-sst.off { color: #fca5a5; background: rgba(239,68,68,.15); }
.pv-sk { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 8px; }
.pv-sk div { padding: 8px 10px; border-radius: 8px; background: var(--surface-2); min-width: 0; }
.pv-sk span { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-sk b { font: 800 22px var(--font-display); } .pv-sk b small { font-size: 13px; color: var(--muted); font-weight: 600; }
.pv-sk .crit b { color: #f87171; } .pv-sk .warn b { color: var(--warn); }
.pv-tr { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.pv-spark { flex: 1; height: 30px; min-width: 60px; }
.pv-nodes { display: grid; gap: 8px; }
.pv-node { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; display: grid; gap: 5px; }
.pv-node:hover { border-color: var(--border-strong); }
.pv-nh { display: flex; align-items: center; gap: 8px; } .pv-nh small { margin-left: auto; }
.pv-nm { display: grid; grid-template-columns: 52px minmax(60px, 1fr) auto; gap: 8px; align-items: center; font-size: 12px; }
.pv-nm span { color: var(--muted); } .pv-nm .pv-bar { max-width: none; } .pv-nm small { color: var(--text-2); white-space: nowrap; }
/* filtros e tabelas */
.pv-flt { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; } .pv-flt .search { flex: 1 1 220px; }
.pv-cnt-l { margin: 0 0 6px; }
.pv-t td { vertical-align: middle; } .pv-t td.num, .pv-t th.num { text-align: right; white-space: nowrap; }
.pv-t tbody tr[data-vm], .pv-t tbody tr[data-node] { cursor: pointer; }
.pv-t tr.off td:not(:first-child) { opacity: .6; }
.pv-t tr.al-crit { background: color-mix(in srgb, var(--danger) 7%, transparent); } .pv-t tr.al-warn { background: color-mix(in srgb, var(--warn) 7%, transparent); }
.pv-vn { display: flex; align-items: center; flex-wrap: wrap; gap: 0; } .pv-vn b { overflow-wrap: anywhere; }
.pv-mem { min-width: 120px; } .pv-mem small { display: block; font-size: 11px; color: var(--muted); }
.pv-net { font-size: 12px; line-height: 1.35; white-space: nowrap; }
.pv-pos { width: 30px; color: var(--muted); font-size: 12px; }
.pv-sec { margin-bottom: 14px; } .pv-sec .card-h h2 { display: flex; align-items: center; gap: 8px; } .pv-sec .card-h h2 svg { width: 16px; height: 16px; }
.pv-h4 { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pv-h4:first-child { margin-top: 0; }
.pv-zfs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.pv-zp { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; border-left: 4px solid var(--ok); }
.pv-zp.crit { border-left-color: var(--danger); } .pv-zh { font-weight: 800; font-size: 12px; } .pv-zp.crit .pv-zh { color: #f87171; } .pv-zp .pv-bar { max-width: none; }
.pv-sm { font-size: 11.5px; font-weight: 800; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--border); }
.pv-sm.ok { color: #4ade80; border-color: rgba(34,197,94,.4); } .pv-sm.crit { color: #fca5a5; border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.12); }
/* gráficos */
.pv-chart { width: 100%; height: auto; display: block; }
.pv-chart line.g { stroke: var(--border); stroke-width: 1; } .pv-chart text { fill: var(--muted); font-size: 10.5px; }
.pv-leg { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-2); margin-top: 2px; }
.pv-leg i { display: inline-block; width: 12px; height: 3px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.pv-nochart { padding: 16px 0; }
.pv-trg { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 14px; margin-bottom: 14px; }
.pv-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.pv-cols-tk { grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); }
/* tarefas */
.pv-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pv-k { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); }
.pv-k span { display: block; font-size: 11.5px; color: var(--muted); } .pv-k b { font: 800 24px var(--font-display); } .pv-k small { display: block; font-size: 11px; }
.pv-k.crit b { color: #f87171; } .pv-k.warn b { color: var(--warn); }
.pv-tl { max-height: 62vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.pv-tk { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 7px 8px; border-radius: 8px; font-size: 13px; }
.pv-tk[data-tk] { cursor: pointer; } .pv-tk[data-tk]:hover { background: var(--surface-2); }
.pv-tki { font-weight: 800; text-align: center; } .pv-tk.ok .pv-tki { color: #4ade80; } .pv-tk.err .pv-tki { color: #f87171; } .pv-tk.run .pv-tki { color: #38bdf8; }
.pv-tk.err { background: rgba(239,68,68,.06); }
.pv-log { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); } .pv-log svg { width: 13px; height: 13px; }
.pv-pre { white-space: pre-wrap; word-break: break-word; font: 12px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--input-bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; max-height: 60vh; overflow: auto; margin: 0; }
/* alarmes */
.pv-als { display: flex; flex-direction: column; gap: 8px; }
.pv-alr { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border); border-left: 4px solid var(--warn); border-radius: 10px; background: var(--surface); }
.pv-alr.crit { border-left-color: var(--danger); } .pv-alr.info { border-left-color: #38bdf8; } .pv-alr.closed { opacity: .65; }
.pv-lv { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; text-align: center; padding: 3px 0; border-radius: 6px; background: var(--surface-2); }
.pv-alr.crit .pv-lv { color: #fca5a5; } .pv-alr.warn .pv-lv { color: var(--warn); } .pv-alr.info .pv-lv { color: #7dd3fc; }
.pv-alb { min-width: 0; overflow-wrap: anywhere; } .pv-alb .small { margin: 2px 0; color: var(--text-2); }
/* detalhe da VM */
.pv-vh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.pv-vk { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.pv-vk div { padding: 8px 10px; border-radius: 8px; background: var(--surface-2); min-width: 0; } .pv-vk span { display: block; font-size: 11px; color: var(--muted); }
.pv-vk b { display: block; font-size: 16px; } .pv-vk small { font-size: 11px; color: var(--muted); }
.pv-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 10px 0; }
.pv-cfgl { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; } .pv-cfgl small { color: var(--muted); overflow-wrap: anywhere; }
.pv-vopt { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.pv-nd { margin-top: 10px; }
/* configuração */
.pv-cfg { display: flex; flex-direction: column; gap: 14px; max-width: 980px; }
.pv-cfg .card-h h2 { display: flex; align-items: center; gap: 8px; } .pv-cfg .card-h h2 svg { width: 16px; height: 16px; }
.pv-cs { border: 1px solid var(--border); border-radius: 10px; padding: 12px; margin-bottom: 10px; background: var(--surface-2); }
.pv-csh, .pv-cst { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pv-csh .sp, .pv-cst .sp { flex: 1; }
.pv-csg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin: 10px 0; }
.pv-csg .field { margin: 0; }
.pv-fp { font-family: ui-monospace, monospace; }
.pv-tres { margin-top: 6px; overflow-wrap: anywhere; }
.pv-cfgf { display: flex; flex-direction: column; gap: 10px; } .pv-cfgf label { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; }
.pv-cfgf input.num { width: 72px !important; text-align: right; }
.pv-save { display: flex; justify-content: flex-end; }
/* dashboard */
.pv-dash { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: -4px 0 16px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); text-decoration: none; font-size: 13px; }
.pv-dash:hover { border-color: var(--border-strong); } .pv-dash > svg { width: 16px; height: 16px; color: var(--brand-1); }
.pv-ds { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); } .pv-ds i { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; }
.pv-ds.warn i { background: var(--warn); } .pv-ds.crit i, .pv-ds.down i { background: var(--danger); } .pv-ds.down { color: #fca5a5; font-weight: 700; } .pv-ds b { color: #f87171; }
/* Painel TV */
.tv-pve { flex: 1; min-height: 0; overflow: auto; padding: 0 4px; }
.tv-pve[hidden] { display: none !important; }
.tv-pve .pv-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tv-pve .pv-sa b { font-size: 1.7vh; } .tv-pve .pv-sa small { font-size: 1.35vh; }
.tv-pve .pv-srvs { grid-template-columns: repeat(auto-fit, minmax(30vw, 1fr)); gap: 1.6vh; }
.tv-pve .pv-sh h3 { font-size: 3vh; } .tv-pve .pv-sk b { font-size: 3.6vh; } .tv-pve .pv-sk span { font-size: 1.3vh; }
.tv-pve .pv-tr { font-size: 2vh; } .tv-pve .pv-nm { font-size: 1.45vh; grid-template-columns: 7vh minmax(60px, 1fr) auto; } .tv-pve .pv-nh { font-size: 1.8vh; }
.tv-pve .pv-node { cursor: default; }
@media (max-width: 860px) {
  .pv-srvs, .pv-trg { grid-template-columns: 1fr; } .pv-cols-tk { grid-template-columns: 1fr; }
  .pv-sk { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pv-vk { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-charts { grid-template-columns: 1fr; }
  .pv-csg { grid-template-columns: 1fr; } .pv-alr { grid-template-columns: 1fr; gap: 6px; } .pv-lv { justify-self: start; padding: 2px 8px; }
  .pv-nm { grid-template-columns: 44px minmax(40px, 1fr); } .pv-nm small { grid-column: 1 / -1; }
}

.pv-t { width: 100%; } .pv-tw .pv-t td:first-child { width: 18px; }
.pv-node.off { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.05); } .pv-node.off .pv-nm { opacity: .45; }
@media (max-width: 860px) { .pv-top #pvAt { display: none; } }

/* v1.57: Proxmox reorganizado */
.pv-top .btn.icon { flex: none; } .pv-top .btn.spinning svg { animation: pvspin 1s linear infinite; }
@keyframes pvspin { to { transform: rotate(360deg); } }
.pv-kr { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.pv-kt { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); min-width: 0; border-top: 3px solid transparent; }
.pv-kt[data-go] { cursor: pointer; } .pv-kt[data-go]:hover { border-color: var(--border-strong); }
.pv-kt > span { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-kt > b { display: block; font: 800 22px/1.15 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-kt > b small { font-size: 13px; color: var(--muted); font-weight: 600; }
.pv-kt > small { display: block; font-size: 11.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-kt.crit { border-top-color: var(--danger); } .pv-kt.crit > b { color: #f87171; } .pv-kt.warn { border-top-color: var(--warn); } .pv-kt.warn > b { color: var(--warn); } .pv-kt.ok { border-top-color: var(--ok); }
.pv-ov { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.pv-oc .card-h h2 { display: flex; align-items: center; gap: 8px; font-size: 14px; } .pv-oc .card-h h2 svg { width: 15px; height: 15px; color: var(--brand-1); }
.pv-oc .card-b { display: flex; flex-direction: column; gap: 8px; }
.pv-or { display: grid; gap: 3px; } .pv-or .pv-bar { max-width: none; } .pv-or small { font-size: 11px; }
.pv-orh { display: flex; align-items: baseline; gap: 6px; font-size: 13px; min-width: 0; } .pv-orh small { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-orh > span { font-weight: 700; }
.pv-li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; min-width: 0; padding: 2px 0; }
.pv-li b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pv-li small { margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pv-li[data-vm] { cursor: pointer; } .pv-li[data-vm]:hover b { text-decoration: underline; }
.pv-li .pv-pos { width: auto; flex: none; }
.pv-li2 { flex-direction: column; align-items: stretch; gap: 0; padding: 5px 8px; border-left: 3px solid var(--border-strong); border-radius: 6px; background: var(--surface-2); }
.pv-li2 small { margin-left: 0; white-space: normal; overflow-wrap: anywhere; } .pv-li2.crit { border-left-color: var(--danger); } .pv-li2.info { border-left-color: #38bdf8; }
.pv-bk3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.pv-bk3 div { padding: 6px 8px; border-radius: 8px; background: var(--surface-2); text-align: center; min-width: 0; } .pv-bk3 b { display: block; font: 800 20px var(--font-display); } .pv-bk3 small { display: block; font-size: 10.5px; color: var(--muted); line-height: 1.2; }
.pv-oc .pv-h4 { margin: 4px 0 0; }
.pv-q { font-size: 10.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; letter-spacing: .03em; } .pv-q.ok { color: #4ade80; background: rgba(34,197,94,.1); } .pv-q.bad { color: #fff; background: var(--danger); }
.pv-mbtn { margin-left: auto; } .pv-mbtn svg { width: 14px; height: 14px; }
.pv-mnt { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 7px 10px; border-radius: 8px; background: color-mix(in srgb, #a78bfa 14%, transparent); color: var(--text); font-size: 12.5px; } .pv-mnt svg { width: 15px; height: 15px; color: #a78bfa; flex: none; }
.pv-srv.mnt { border-top-color: #a78bfa; }
.pv-mh { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pv-t th.pv-sortable { cursor: pointer; user-select: none; white-space: nowrap; } .pv-t th.pv-sortable:hover, .pv-t th.on { color: var(--text); }
.pv-wear { display: inline-flex; align-items: center; gap: 6px; } .pv-wear .pv-bar { width: 50px; }
.pv-h3 { margin: 0; font: 700 15px var(--font-display); }
.pv-flt-tk { margin-top: 16px; } .pv-hint { margin: -4px 0 10px; }
.pv-cols-bk { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pv-bkl { max-height: 46vh; overflow: auto; }
.pv-jobs { display: flex; flex-direction: column; gap: 8px; }
.pv-job { padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; border-left: 4px solid var(--ok); display: grid; gap: 3px; overflow-wrap: anywhere; }
.pv-job.off { border-left-color: var(--border-strong); opacity: .7; }
.pv-jh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pv-jh .muted { margin-left: auto; }
.pv-tag { font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--muted); }
.pv-allbad { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); font-size: 13px; } .pv-allbad svg { width: 18px; height: 18px; color: var(--warn); flex: none; margin-top: 2px; }
.pv-alr.acked { opacity: .85; } .pv-alr.acked .pv-lv { opacity: .7; }
.pv-cfgw .card-h h2 { display: flex; align-items: center; gap: 8px; } .pv-cfgw .card-h h2 svg { width: 16px; height: 16px; }
.pv-cfgsec { display: flex; flex-direction: column; gap: 8px; padding-bottom: 10px; border-bottom: 1px dashed var(--border); } .pv-cfgsec:last-child { border-bottom: 0; padding-bottom: 0; } .pv-cfgsec .pv-h4 { margin: 0; }
.pv-cfgw + .pv-save { position: sticky; bottom: 0; z-index: 3; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 0; background: linear-gradient(transparent, var(--bg) 35%); }
.pv-nk { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 10px; }
.pv-nvms { max-height: 190px; overflow: auto; } .pv-nvms .pv-dot { width: 7px; height: 7px; }
.pv-note { margin: 4px 0 0; max-width: 460px; }
.pv-sk div.warn b { color: var(--warn); }
@media (max-width: 1280px) { .pv-ov { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-kr { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pv-cols-bk { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .pv-ov, .pv-cols-bk { grid-template-columns: 1fr; } .pv-kr { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-kt > b { font-size: 19px; }
  .pv-nk { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pv-flt .search { flex-basis: 100%; }
}
/* v1.57: Painel TV do Proxmox (tela cheia, sem rolagem) */
.tv-pve { overflow: hidden; }
.pvtv { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 1.1vh; font-size: 1.35vh; }
.pvtv .pv-kr { margin: 0; gap: .7vw; } .pvtv .pv-kt { padding: .8vh .8vw; border-radius: 1vh; } .pvtv .pv-kt > span { font-size: 1.3vh; } .pvtv .pv-kt > b { font-size: 2.9vh; } .pvtv .pv-kt > b small { font-size: 1.7vh; } .pvtv .pv-kt > small { font-size: 1.35vh; }
.pvtv .pv-strip, .pvtv .pv-allok { margin: 0; } .pvtv .pv-strip { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6vw; }
.pvtv .pv-sa { padding: .7vh .7vw; cursor: default; gap: .2vh; } .pvtv .pv-sa b { font-size: 1.5vh; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pvtv .pv-sa small { font-size: 1.25vh; } .pvtv .pv-sa small:not(.muted) { display: none; }
.pvtv .pv-allok { font-size: 1.6vh; padding: .8vh 1vw; } .pvtv .pv-allok svg { width: 2vh; height: 2vh; }
.pvtv-g { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .95fr); gap: .9vw; min-height: 0; }
.pvtv-c { display: flex; flex-direction: column; gap: 1.1vh; min-height: 0; overflow: hidden; }
.pvtv-c > .card { min-height: 0; overflow: hidden; flex: 1 1 auto; }
.pvtv .card-h { padding: .8vh .9vw; min-height: 0; } .pvtv .card-b { padding: .8vh .9vw; } .pvtv .pv-oc .card-h h2 { font-size: 1.65vh; } .pvtv .pv-oc .card-h h2 svg { width: 1.9vh; height: 1.9vh; }
.pvtv .pv-oc .card-b { gap: .6vh; }
.pvtv-srv { gap: 1.1vh; } .pvtv-sw { min-height: 0; display: flex; } .pvtv-sw > .pv-srv { flex: 1; padding: 1vh .9vw; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.pvtv .pv-sh { gap: .6vw; } .pvtv .pv-sh h3 { font-size: 2.3vh; } .pvtv .pv-sh .small { font-size: 1.3vh; } .pvtv .pv-sst, .pvtv .pv-q { font-size: 1.1vh; padding: .2vh .6vw; }
.pvtv .pv-sk { margin: .8vh 0 .5vh; gap: .4vw; } .pvtv .pv-sk div { padding: .5vh .6vw; } .pvtv .pv-sk span { font-size: 1.15vh; } .pvtv .pv-sk b { font-size: 2.4vh; } .pvtv .pv-sk b small { font-size: 1.4vh; }
.pvtv .pv-tr { font-size: 1.6vh; margin-bottom: .5vh; }
.pvtv .pv-nodes { gap: .6vh; min-height: 0; overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(14vw, 1fr)); align-content: start; }
.pvtv .pv-node { padding: .6vh .6vw; gap: .3vh; cursor: default; }
.pvtv .pv-nh { font-size: 1.5vh; gap: .4vw; } .pvtv .pv-nh small { font-size: 1.15vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pvtv .pv-nm { font-size: 1.2vh; grid-template-columns: 5vh minmax(30px, 1fr) auto; gap: .4vw; } .pvtv .pv-bar { height: .7vh; }
.pvtv .pv-nm:nth-child(4) { display: none; } /* "Disco /" do nó: some na TV para caber */
.pvtv .pv-mnt, .pvtv .pv-err { font-size: 1.3vh; padding: .5vh .6vw; margin-top: .6vh; } .pvtv .pv-mnt svg { width: 1.6vh; height: 1.6vh; }
.pvtv .pv-or { gap: .2vh; } .pvtv .pv-or small, .pvtv .pv-li small { font-size: 1.25vh; } .pvtv .pv-orh, .pvtv .pv-li { font-size: 1.5vh; } .pvtv .pv-li { padding: .1vh 0; }
.pvtv .pv-bk3 div { padding: .5vh .4vw; } .pvtv .pv-bk3 b { font-size: 2.5vh; } .pvtv .pv-bk3 small { font-size: 1.1vh; } .pvtv .pv-h4 { font-size: 1.15vh; }
.pvtv-tr { flex: 0 1 auto !important; } .pvtv-ch .pv-chart text { font-size: 12px; } .pvtv-ch small { font-size: 1.25vh; } .pvtv .pv-leg { font-size: 1.2vh; }
.pvtv .pv-li2 { padding: .4vh .5vw; } .pvtv .pv-li2 small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pvtv-g.many { grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr) minmax(0, .9fr); } .pvtv-g.many .pvtv-srv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); }
@media (max-width: 1100px) { html.tv-mode .tv-pve { overflow: auto; } .pvtv { height: auto; font-size: 13px; } .pvtv-g, .pvtv-g.many { grid-template-columns: 1fr; } .pvtv .pv-kr { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pvtv .pv-strip { grid-template-columns: 1fr; } }

/* v1.56: Turnstile ("não sou robô") */
.cap { min-height: 0; } .cap:empty { display: none; } .cap iframe { max-width: 100%; }
.cap-err { color: #fca5a5; font-size: 12.5px; }
.cap-card { margin-top: 12px; } .cap-card .card-b { display: flex; flex-direction: column; gap: 10px; }
.cap-f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; } .cap-f .field { margin: 0; }
.cap-how summary { cursor: pointer; color: var(--text-2); } .cap-how ol { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 700px) { .cap-f { grid-template-columns: 1fr; } }

/* ===== v1.58: Central de alarmes ===== */
.al-top { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .al-top .sp { flex: 1; }
.al-srcs { display: flex; flex-wrap: wrap; gap: 8px; }
.al-sc { position: relative; display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer; border-bottom: 3px solid transparent; }
.al-sc svg { width: 15px; height: 15px; } .al-sc b { font: 800 17px var(--font-display); color: var(--text); }
.al-sc:hover { border-color: var(--border-strong); } .al-sc.on { border-color: var(--brand-1); background: color-mix(in srgb, var(--brand-1) 10%, var(--surface)); color: var(--text); }
.al-sc.crit { border-bottom-color: var(--danger); } .al-sc.crit b { color: #f87171; } .al-sc.warn { border-bottom-color: var(--warn); } .al-sc.warn b { color: var(--warn); } .al-sc.ok b { color: var(--muted); }
.al-nv { position: absolute; top: -7px; right: -6px; font-style: normal; font-size: 10px; font-weight: 800; line-height: 16px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; }
.al-sils { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; padding: 8px 12px; border-radius: 10px; background: color-mix(in srgb, #a78bfa 12%, transparent); border: 1px solid color-mix(in srgb, #a78bfa 35%, transparent); font-size: 13px; }
.al-sils > svg { width: 16px; height: 16px; color: #a78bfa; }
.al-sil { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); } .al-sil small { color: var(--muted); } .al-sil .btn { padding: 2px 4px; } .al-sil .btn svg { width: 12px; height: 12px; }
.al-flt .search { flex: 1 1 240px; } .al-flt [hidden], .al-top [hidden] { display: none !important; }
.al-acts { display: flex; gap: 6px; align-items: center; flex: none; }
.al-list { display: flex; flex-direction: column; gap: 6px; }
.al-row { display: grid; grid-template-columns: 22px 92px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--border); border-left: 4px solid var(--warn); border-radius: 10px; background: var(--surface); }
.al-row.crit { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 5%, var(--surface)); }
.al-row.acked { opacity: .72; } .al-row.acked.crit { background: var(--surface); }
.al-cb { width: 16px; height: 16px; accent-color: var(--brand-1); } .al-cb-ok { color: #4ade80; font-weight: 800; text-align: center; }
.al-src { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; color: var(--text-2); min-width: 0; } .al-src svg { width: 16px; height: 16px; } .al-src small { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.al-b { min-width: 0; overflow-wrap: anywhere; } .al-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .al-d { color: var(--text-2); margin: 2px 0; }
.al-lv { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 2px 7px; border-radius: 6px; background: var(--surface-2); flex: none; } .al-lv.crit { color: #fca5a5; background: rgba(239,68,68,.14); } .al-lv.warn { color: var(--warn); }
.al-act { display: flex; gap: 4px; align-items: center; } .al-act .btn svg { width: 14px; height: 14px; }
.al-mitem { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); } .al-mitem svg { width: 15px; height: 15px; color: #a78bfa; }
@media (max-width: 860px) {
  .al-row { grid-template-columns: 22px minmax(0, 1fr); } .al-src { grid-column: 2; flex-direction: row; align-items: center; } .al-b { grid-column: 1 / -1; } .al-act { grid-column: 1 / -1; justify-content: flex-end; }
  .al-sc { padding: 6px 10px; } .al-acts { width: 100%; } .al-acts #alMnt { flex: 1; } .al-srcs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .al-top .sp { display: none; }
}
/* TV */
.tv-alm { flex: 1; min-height: 0; overflow: hidden; } .tv-alm[hidden] { display: none !important; }
.altv { height: 100%; display: flex; flex-direction: column; gap: 1.2vh; font-size: 1.6vh; }
.altv-top { display: flex; gap: .8vw; align-items: stretch; }
.altv-big { display: flex; flex-direction: column; justify-content: center; padding: .9vh 1.2vw; min-width: 11vw; border-radius: 1.2vh; border: 1px solid #1c2330; background: #0c1017; border-top: .45vh solid #22c55e; }
.altv-big b { font: 800 4.6vh/1 var(--font-display); } .altv-big span { font-size: 1.5vh; color: #8a94a6; text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-top: .3vh; }
.altv-big.crit { border-top-color: #ef4444; background: linear-gradient(180deg, rgba(239,68,68,.16), #0c1017 70%); } .altv-big.crit b { color: #f87171; } .altv-big.warn { border-top-color: #f59e0b; } .altv-big.warn b { color: #fbbf24; }
.altv-sil { flex: 1; display: flex; align-items: center; font-size: 1.6vh; padding: .8vh 1vw; border-radius: 1.2vh; background: color-mix(in srgb, #a78bfa 14%, transparent); border: 1px solid color-mix(in srgb, #a78bfa 35%, transparent); }
.altv-g { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 1vw; }
.altv-main { min-height: 0; display: flex; flex-direction: column; overflow: hidden; background: #080b10; border: 1px solid #161c26; border-radius: 1.4vh; padding: 1.2vh .9vw; }
.altv-main h3 { margin: 0 0 1vh; font: 800 2vh var(--font-display); text-transform: uppercase; letter-spacing: .04em; } .altv-main h3 small { font: 500 1.4vh var(--font); color: #8a94a6; text-transform: none; letter-spacing: 0; margin-left: .6vw; }
.altv-l { display: flex; flex-direction: column; gap: .8vh; min-height: 0; overflow: hidden; }
.altv-r { display: grid; grid-template-columns: 9vw minmax(0, 1fr) auto; gap: .9vw; align-items: center; padding: .9vh .9vw; border-radius: 1vh; border: 1px solid #1e2633; border-left: .55vh solid var(--warn); background: #0f141c; }
.altv-r.crit { border-left-color: #ef4444; background: linear-gradient(90deg, rgba(239,68,68,.14), #0f141c 60%); } .altv-r.acked { opacity: .6; }
.altv-src { display: flex; align-items: center; gap: .4vw; font-size: 1.45vh; color: #b7c0cf; min-width: 0; } .altv-src svg { width: 2vh; height: 2vh; flex: none; }
.altv-b { min-width: 0; } .altv-b b { display: block; font-size: 1.95vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .altv-b small { display: block; font-size: 1.4vh; color: #8a94a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.altv-t { font: 700 1.9vh var(--font-display); text-align: right; white-space: nowrap; } .altv-t small { display: block; font: 500 1.25vh var(--font); color: #4ade80; }
.altv-side { min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); gap: .8vh; overflow: hidden; }
.altv-c { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: .4vh; padding: .8vh .9vw; border-radius: 1.1vh; border: 1px solid #1c2330; background: #0c1017; border-left: .55vh solid #22c55e; }
.altv-c.warn { border-left-color: #f59e0b; } .altv-c.crit { border-left-color: #ef4444; background: linear-gradient(90deg, rgba(239,68,68,.1), #0c1017 60%); }
.altv-ch { display: flex; align-items: center; gap: .5vw; font-size: 1.7vh; font-weight: 700; } .altv-ch svg { width: 2vh; height: 2vh; color: #8a94a6; } .altv-ch b { margin-left: auto; font: 800 2.8vh/1 var(--font-display); }
.altv-c.warn .altv-ch b { color: #fbbf24; } .altv-c.crit .altv-ch b { color: #f87171; } .altv-c.ok .altv-ch b { color: #5b6474; }
.altv-cl { display: flex; flex-direction: column; gap: .2vh; min-height: 0; overflow: hidden; } .altv-cl div { display: flex; gap: .5vw; font-size: 1.4vh; } .altv-cl div b { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .altv-cl div small { color: #8a94a6; white-space: nowrap; }
.altv-cl div.crit b { color: #fca5a5; } .altv-cm { font-size: 1.25vh; color: #8a94a6; } .altv-okt { font-size: 1.4vh; color: #4ade80; }
/* TV · demandas (v1.58.1) */
.tv-empty.big { font-size: 2.4vh; padding: 8vh 0; } .tv-empty.sm { padding: .6vh 0; font-size: 1.5vh; text-align: left; }
.tv-more { text-align: center; color: #8a94a6; font-size: 1.5vh; }
.tv-card.crit { border-left-color: #fb923c; } .tv-card.warn { border-left-color: #f59e0b; }
.tvd-src { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5vw; margin-bottom: 1vh; }
.tvd-src div { display: flex; align-items: center; gap: .4vw; padding: .6vh .6vw; border-radius: .9vh; background: #0f141c; border: 1px solid #1e2633; border-bottom: .35vh solid #22c55e; font-size: 1.35vh; color: #b7c0cf; min-width: 0; }
.tvd-src div svg { width: 1.7vh; height: 1.7vh; flex: none; } .tvd-src div span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tvd-src div b { font: 800 2.2vh var(--font-display); }
.tvd-src .warn { border-bottom-color: #f59e0b; } .tvd-src .warn b { color: #fbbf24; } .tvd-src .crit { border-bottom-color: #ef4444; } .tvd-src .crit b { color: #f87171; } .tvd-src .ok b { color: #5b6474; }
.tvd-a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: .7vw; padding: .8vh .8vw; border-radius: 1vh; background: #0f141c; border: 1px solid #1e2633; border-left: .5vh solid #f59e0b; }
.tvd-a.crit { border-left-color: #ef4444; background: linear-gradient(90deg, rgba(239,68,68,.12), #0f141c 60%); } .tvd-a.acked { opacity: .6; }
.tvd-as { grid-row: span 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .2vh; font-size: 1.15vh; color: #8a94a6; width: 5.5vw; text-align: center; } .tvd-as svg { width: 2vh; height: 2vh; }
.tvd-a b { font-size: 1.8vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tvd-a small { grid-column: 2; font-size: 1.35vh; color: #8a94a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tvd-a i { grid-column: 3; grid-row: 1 / span 2; align-self: center; font-style: normal; font: 700 1.6vh var(--font-display); white-space: nowrap; }
.tvd-h { margin-top: 1.4vh !important; } .tvd-inf { flex: none; }
.pl-r { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); } .pl-r span { flex: 1; } .pl-r input { width: 80px !important; text-align: right; }
.pl-add { display: flex; gap: 8px; margin-top: 10px; } .pl-add select { flex: 1; }

/* ===== v1.58: busca global (Ctrl+K) ===== */
.tb-search { display: inline-flex; align-items: center; gap: 8px; min-width: 220px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--input-bg); color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; margin-left: auto; }
.tb-search:hover { border-color: var(--border-strong); color: var(--text-2); } .tb-search svg { width: 15px; height: 15px; } .tb-search span:first-of-type { flex: 1; text-align: left; }
@media (max-width: 860px) { .tb-search { min-width: 0; padding: 7px; margin-left: 0; } .tb-search span { display: none; } }
.gs-bg { position: fixed; inset: 0; z-index: 400; background: rgba(3,4,7,.6); backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 16px 16px; animation: fade .12s; }
.gs { width: min(680px, 100%); max-height: 76vh; display: flex; flex-direction: column; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface); box-shadow: 0 24px 70px rgba(0,0,0,.5); overflow: hidden; animation: pop .14s; }
.gs-in { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); } .gs-in svg { width: 18px; height: 18px; color: var(--muted); }
.gs-in input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 16px; min-width: 0; }
.gs-res { overflow: auto; padding: 6px; } .gs-res.busy { opacity: .7; }
.gs-hint { padding: 16px; color: var(--muted); font-size: 13px; }
.gs-g + .gs-g { margin-top: 4px; } .gs-gh { display: flex; align-items: center; gap: 6px; padding: 8px 10px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); } .gs-gh svg { width: 13px; height: 13px; }
.gs-it { display: flex; align-items: baseline; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 14px; min-width: 0; }
.gs-it b { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gs-it small { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 55%; }
.gs-it.on { background: color-mix(in srgb, var(--brand-1) 16%, transparent); } .gs-it mark { background: color-mix(in srgb, var(--brand-1) 35%, transparent); color: inherit; border-radius: 3px; }
.gs-it svg { width: 15px; height: 15px; align-self: center; color: var(--brand-1); } .gs-ixc { border-top: 1px dashed var(--border); border-radius: 0 0 8px 8px; }
.gs-dot { width: 8px; height: 8px; border-radius: 50%; align-self: center; flex: none; background: #64748b; } .gs-dot.on { background: #22c55e; } .gs-dot.off { background: #ef4444; }
.gs-foot { display: flex; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 11.5px; color: var(--muted); flex-wrap: wrap; } .gs-foot .kbd { margin-right: 3px; }
@media (max-width: 860px) { .gs-bg { padding-top: max(12px, env(safe-area-inset-top)); } .gs { max-height: 86vh; } .gs-foot { display: none; } .gs-it { flex-direction: column; gap: 1px; } .gs-it small { margin-left: 0; max-width: 100%; } }

/* ===== v1.58: instalar o app ===== */
.sb-inst { color: var(--brand-1) !important; font-weight: 600; } .sb-inst.ready { background: color-mix(in srgb, var(--brand-1) 12%, transparent); }
.inst-hero { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .inst-hero img { width: 52px; height: 52px; border-radius: 12px; } .inst-hero div { display: flex; flex-direction: column; }
.inst-why { list-style: none; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); display: grid; gap: 4px; font-size: 13px; }
.inst-steps { margin: 0; padding-left: 0; list-style: none; counter-reset: st; display: grid; gap: 10px; }
.inst-steps li { counter-increment: st; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 10px; font-size: 14px; }
.inst-steps li::before { content: counter(st); grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-1); color: #fff; font-weight: 800; font-size: 13px; }
.inst-steps li small { color: var(--muted); font-size: 12.5px; }
.inst-nudge { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 300; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface); box-shadow: 0 12px 40px rgba(0,0,0,.45); animation: pop .2s; }
.inst-nudge img { width: 38px; height: 38px; border-radius: 9px; } .inst-nudge div { flex: 1; display: flex; flex-direction: column; min-width: 0; } .inst-nudge small { color: var(--muted); font-size: 12px; }

/* ===== v1.58: o que mudou ===== */
.wn { display: flex; flex-direction: column; gap: 14px; max-height: 60vh; overflow: auto; }
.wn-e ul { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; } .wn-e ul ul { margin: 2px 0; } .wn-e li { margin: 3px 0; }
.wn-h { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .wn-v { font: 800 12px var(--font-display); padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--brand-1) 18%, transparent); color: var(--brand-1); }

/* ===== v1.59: geolocalização de IP ===== */
.geo-wrap { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.geo-b { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); cursor: pointer; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.geo-b svg { width: 12px; height: 12px; flex: none; } .geo-b span { overflow: hidden; text-overflow: ellipsis; }
.geo-b.ok { color: #4ade80; border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.08); } .geo-b.warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 9%, transparent); }
.geo-b.bad { color: #fca5a5; border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.1); } .geo-b.unk { color: var(--muted); }
.geo-cg, .geo-v { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; font-size: 13px; border: 1px solid var(--border); background: var(--surface-2); }
.geo-cg svg, .geo-v svg { width: 18px; height: 18px; flex: none; margin-top: 1px; } .geo-v div { display: flex; flex-direction: column; } .geo-v small { color: var(--muted); }
.geo-v.ok { border-color: rgba(34,197,94,.4); } .geo-v.ok svg { color: #4ade80; } .geo-v.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); } .geo-v.warn svg { color: var(--warn); } .geo-v.bad { border-color: rgba(239,68,68,.5); } .geo-v.bad svg { color: #f87171; }
.geo-t { width: 100%; border-collapse: collapse; font-size: 13px; } .geo-t th, .geo-t td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; } .geo-t th { color: var(--muted); font-weight: 600; font-size: 12px; white-space: nowrap; }
.geo-t a { display: inline-flex; align-items: center; gap: 4px; } .geo-t a svg { width: 13px; height: 13px; }
.geo-cfg .card-h h2 { display: flex; align-items: center; gap: 8px; } .geo-cfg .card-h h2 svg { width: 16px; height: 16px; }
.geo-cb { display: flex; flex-direction: column; gap: 12px; }
.geo-st { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); }
.geo-st > div { flex: 1; display: flex; flex-direction: column; } .geo-st small { color: var(--muted); font-size: 12px; } .geo-st > svg { width: 18px; height: 18px; } .geo-st.ok > svg { color: #4ade80; } .geo-st.warn > svg { color: var(--warn); }
.geo-ufs { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-ck { position: relative; } .chip-ck input { position: absolute; opacity: 0; pointer-events: none; }
.chip-ck span { display: inline-block; min-width: 38px; text-align: center; padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border); font-size: 12px; font-weight: 700; color: var(--muted); cursor: pointer; }
.chip-ck input:checked + span { color: #fff; background: var(--brand-1); border-color: var(--brand-1); }
.geo-test { display: flex; gap: 8px; } .geo-test input { flex: 1; max-width: 320px; }
.geo-row { display: grid; grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr) 150px minmax(120px, 1fr) auto; gap: 8px; align-items: center; margin-bottom: 8px; }
#pxList .geo-row { grid-template-columns: minmax(150px, 1fr) 90px minmax(140px, 1fr) minmax(120px, 1fr) auto; }
.geo-how { margin-top: 12px; } .geo-how summary { cursor: pointer; color: var(--text-2); } .geo-how ol { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 860px) { .geo-row, #pxList .geo-row { grid-template-columns: 1fr 1fr; } .geo-row > span { display: none; } .geo-test input { max-width: none; } .geo-row > * { min-width: 0; width: 100%; } .geo-row > button, .geo-row > .btn { width: auto; justify-self: start; } }
.geo-row input, .geo-row select { min-width: 0; }

/* ===== v1.60: Proxmox — um servidor por vez, alarmes compactos, termos explicados ===== */
.pv-ss { display: flex; gap: 8px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.pv-ss button { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; min-width: 190px; padding: 9px 14px; border-radius: 12px; border: 1px solid var(--border); border-top: 3px solid var(--ok); background: var(--surface); color: var(--text); text-align: left; cursor: pointer; font: inherit; }
.pv-ss button.warn { border-top-color: var(--warn); } .pv-ss button.crit, .pv-ss button.down { border-top-color: var(--danger); }
.pv-ss button:hover { background: var(--surface-2); }
.pv-ss button.on { background: color-mix(in srgb, var(--brand-1) 14%, var(--surface)); border-color: var(--brand-1); box-shadow: 0 0 0 1px var(--brand-1) inset; }
.pv-ss button > span { display: flex; flex-direction: column; min-width: 0; } .pv-ss b { font: 800 15px var(--font-display); } .pv-ss small { font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.pv-ss em { margin-left: auto; font-style: normal; font-weight: 800; font-size: 12px; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 999px; color: #fff; background: var(--warn); } .pv-ss em.crit { background: var(--danger); }
.pv-g2 { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pv-srv.solo .pv-nodes { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pv-srv.solo .pv-tr small { margin-right: 4px; }
.pv-alc .card-h h2 .pv-cnt { margin-left: 2px; }
.pv-ams { display: flex; flex-direction: column; gap: 6px; }
.pv-am { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px 7px 0; border-radius: 8px; background: var(--surface-2); cursor: pointer; min-width: 0; }
.pv-am:hover { background: var(--surface-3); }
.pv-am > i { align-self: stretch; border-radius: 4px; background: var(--warn); } .pv-am.crit > i { background: var(--danger); } .pv-am.info > i { background: #38bdf8; }
.pv-am > div { display: flex; flex-direction: column; min-width: 0; }
.pv-am b, .pv-am small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-am b { font-size: 13px; } .pv-am small { font-size: 11.5px; color: var(--muted); }
.pv-am > span { font-size: 11.5px; white-space: nowrap; }
.pv-more { align-self: flex-start; cursor: pointer; }
.pv-what { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; margin-bottom: 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--brand-1) 35%, var(--border)); background: color-mix(in srgb, var(--brand-1) 7%, var(--surface)); font-size: 13px; line-height: 1.5; }
.pv-what > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--brand-1); }
.pv-k[title] { cursor: help; }
.pv-tag.ok { color: #4ade80; background: rgba(34,197,94,.12); }
.pv-jd { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 3px 10px; margin: 6px 0 0; font-size: 12.5px; }
.pv-jd dt { color: var(--muted); } .pv-jd dd { margin: 0; overflow-wrap: anywhere; }
.pv-rows { display: flex; flex-direction: column; }
.pv-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 13px; min-width: 0; }
.pv-row:last-child { border-bottom: 0; }
.pv-row > div:first-child { display: flex; flex-direction: column; min-width: 0; flex: 1; } .pv-row b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-row small { font-size: 11.5px; }
.pv-row.warn { box-shadow: 3px 0 0 var(--warn) inset; } .pv-row.off { opacity: .6; }
.pv-row .btn { flex: none; }
.pv-rr { display: flex; flex-direction: column; align-items: flex-end; text-align: right; white-space: nowrap; } .pv-rr small { font-size: 11px; }
.pv-foot { margin: 8px 0 0; }
.pv-bkl { max-height: 460px; overflow: auto; }
.pv-tk { grid-template-columns: 18px minmax(0, 1fr) auto 44px; align-items: center; padding: 5px 8px; gap: 10px; }
.pv-tkt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-tkm { white-space: nowrap; font-size: 11.5px; }
.pv-tl { gap: 1px; }
.pv-als { gap: 4px; }
.pv-alr { grid-template-columns: 66px minmax(0, 1fr) auto auto; gap: 10px; padding: 7px 10px; cursor: pointer; }
.pv-alr:hover { background: var(--surface-2); }
.pv-alb { display: flex; flex-direction: column; } .pv-alb b { font-size: 13px; }
.pv-alb b, .pv-ald { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pv-ald { font-size: 12px; color: var(--text-2); }
.pv-alm { display: none; margin-top: 2px; }
.pv-alr.open .pv-alb b, .pv-alr.open .pv-ald { white-space: normal; } .pv-alr.open .pv-alm { display: block; }
.pv-age { font-size: 11.5px; white-space: nowrap; }
.pv-alr .btn svg { width: 14px; height: 14px; }
.pv-gl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pv-gli { display: flex; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.pv-gli > svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--brand-1); }
.pv-gli b { font-size: 13.5px; } .pv-gli p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
@media (max-width: 1100px) { .pv-g2 { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .pv-ss button { min-width: 0; padding: 8px 12px; } .pv-ss small { display: none; }
  .pv-gl { grid-template-columns: 1fr; }
  .pv-alr { grid-template-columns: minmax(0, 1fr) auto; } .pv-alr .pv-lv { display: none; } .pv-alr .pv-age { display: none; }
  .pv-alr.crit { border-left-color: var(--danger); }
  .pv-tk { grid-template-columns: 18px minmax(0, 1fr) 40px; } .pv-tkm { grid-column: 2; grid-row: 2; }
  .pv-srv.solo .pv-nodes { grid-template-columns: 1fr; } .pv-srv.solo .pv-tr > small { display: none; }
}

/* ===== v1.61: Painel de quedas (Painel TV, view=qdb) ===== */
.tv-qdb { flex: 1; min-height: 0; display: flex; } .tv-qdb[hidden] { display: none !important; }
.qd { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 1.2vh; }
.qd-h { display: flex; flex-direction: column; gap: 1.2vh; }
.qd-top { display: flex; align-items: center; gap: 1vw; flex-wrap: wrap; }
.qd-tt { display: flex; flex-direction: column; gap: .3vh; min-width: 0; flex: 1; }
.qd-tt h2 { margin: 0; display: flex; align-items: center; gap: .6vw; font: 800 clamp(18px, 1.6vw, 34px) var(--font-display); color: #fff; }
.qd-tt h2 svg { width: 1.1em; height: 1.1em; color: #f87171; } .qd-tt small { color: #9aa4b2; font-size: clamp(12px, .8vw, 17px); } .qd-tt small b { color: #e8ecf3; }
.qd-ctl { display: flex; gap: .6vw; flex-wrap: wrap; }
.qd-seg button { font-size: clamp(12px, .78vw, 16px); }
.qd-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .8vw; }
.qd-k { padding: 1.2vh 1vw; border-radius: 1.2vh; border: 1px solid rgba(255,255,255,.08); border-top: 3px solid rgba(255,255,255,.18); background: rgba(255,255,255,.03); display: flex; flex-direction: column; min-width: 0; }
.qd-k span { font-size: clamp(11px, .75vw, 16px); color: #9aa4b2; } .qd-k b { font: 800 clamp(22px, 2.4vw, 52px) var(--font-display); color: #fff; line-height: 1.1; }
.qd-k small { font-size: clamp(11px, .7vw, 15px); color: #9aa4b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qd-k.crit { border-top-color: #ef4444; } .qd-k.crit b { color: #fca5a5; } .qd-k.warn { border-top-color: #f59e0b; } .qd-k.warn b { color: #fcd34d; } .qd-k.ok { border-top-color: #22c55e; }
.qd-l { flex: 1; min-height: 0; overflow: auto; border-radius: 1.2vh; border: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.02); scrollbar-width: thin; }
.qd-th, .qd-r { display: grid; grid-template-columns: 3.2vw minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 1.25fr) minmax(0, .7fr) minmax(0, .8fr); gap: 1vw; align-items: center; padding: 1vh 1.2vw; }
.qd-th { position: sticky; top: 0; z-index: 1; background: #0b0e14; border-bottom: 1px solid rgba(255,255,255,.1); font-size: clamp(11px, .72vw, 15px); color: #9aa4b2; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.qd-th .r, .qd-r .r { text-align: right; justify-self: end; }
.qd-r { border-bottom: 1px solid rgba(255,255,255,.05); cursor: pointer; font-size: clamp(13px, .9vw, 20px); border-left: 4px solid transparent; }
.qd-r:hover { background: rgba(255,255,255,.04); }
.qd-r.warn { border-left-color: #f59e0b; } .qd-r.crit { border-left-color: #ef4444; background: rgba(239,68,68,.05); }
.qd-pos { color: #6b7686; font-weight: 700; font-variant-numeric: tabular-nums; }
.qd-c { display: flex; flex-direction: column; min-width: 0; } .qd-c b { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qd-c small { display: flex; align-items: center; gap: 6px; color: #8b95a5; font-family: var(--font-mono, monospace); font-size: .8em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qd-on { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #6b7280; } .qd-on.on { background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }
.qd-n { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 8px; width: 100%; }
.qd-n b { grid-column: 2; font: 800 1.35em var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.qd-n i { grid-column: 1; grid-row: 1; justify-self: end; height: 6px; border-radius: 3px; background: rgba(248,113,113,.55); max-width: 100%; }
.qd-n small { grid-column: 1 / -1; font-size: .72em; color: #9aa4b2; text-align: right; }
.qd-r.crit .qd-n b { color: #fca5a5; } .qd-r.warn .qd-n b { color: #fcd34d; }
.qd-cz { justify-self: start; max-width: 100%; padding: .25em .7em; border-radius: 999px; font-size: .8em; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: rgba(148,163,184,.12); color: #cbd5e1; }
.qd-cz.fis { background: rgba(239,68,68,.14); color: #fca5a5; } .qd-cz.cli { background: rgba(56,189,248,.13); color: #7dd3fc; }
.qd-last { color: #cbd5e1; white-space: nowrap; }
.qd-foot { padding: 1.2vh 1.2vw; font-size: clamp(11px, .72vw, 15px); color: #8b95a5; }
.qd-empty { margin: 6vh auto; display: flex; flex-direction: column; align-items: center; gap: 1vh; text-align: center; color: #9aa4b2; font-size: clamp(14px, 1vw, 22px); padding: 0 16px; }
.qd-empty svg { width: 3em; height: 3em; color: #f59e0b; } .qd-empty.ok svg { color: #22c55e; } .qd-empty b { color: #fff; font-size: 1.2em; }
.qd-dl { display: flex; flex-direction: column; gap: 4px; max-height: 60vh; overflow: auto; }
.qd-dl > div { display: grid; grid-template-columns: 170px 110px minmax(0, 1fr); gap: 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.qd-ok { color: #4ade80; } .qd-bad { color: #f87171; }
@media (max-width: 900px) {
  html.tv-mode .tv { height: auto; min-height: 100vh; }
  .tv-qdb { min-height: 0; } .qd-l { overflow: visible; flex: none; }
  .qd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .qd-th { display: none; }
  .qd-r { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 12px; font-size: 14px; }
  .qd-r .qd-pos { grid-row: 1 / span 2; } .qd-r .qd-c { grid-column: 2; } .qd-r .qd-n { grid-column: 3; grid-row: 1; width: auto; }
  .qd-r .qd-n i { display: none; } .qd-r .qd-cz { grid-column: 2; grid-row: 2; } .qd-r .qd-last { grid-column: 3; grid-row: 2; font-size: 12px; } .qd-r .hm { display: none; }
  .qd-dl > div { grid-template-columns: 1fr auto; } .qd-dl > div small { grid-column: 1 / -1; }
}
.qdb-chk { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px; }
.qdb-us { display: flex; flex-direction: column; gap: 6px; }
.qdb-u { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px; border: 1px solid var(--border); border-radius: 10px; }
.qdb-u .check { flex: 1; min-width: 200px; } .qdb-u select { width: auto; } .qdb-u.off { opacity: .6; }
.qdb-cfg .check small { margin-left: 4px; }
.qd-ctl { flex-direction: column; align-items: flex-end; } .qd-ctl .seg { width: auto; flex: none; display: inline-flex; max-width: 100%; overflow-x: auto; }
@media (max-width: 600px) {
  .tv-h .tv-title span { display: none; } .tv-clock #tvTime { font-size: 26px; } .tv-clock #tvDate { font-size: 11px; } .tv-h .tv-logo { height: 34px; width: auto; }
  .qd-ctl { align-items: stretch; width: 100%; } .qd-ctl .seg { width: 100%; }
}
/* v1.61.1: backoffice alterna Ranking × Quedas no topo do Painel TV */
.tv-sw { margin: 0 auto; background: #0d1118; border-color: #2a3342; }
.tv-sw button { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(13px, .85vw, 18px); padding: .7vh 1.1vw; color: #9aa4b2; }
.tv-sw button svg { width: 1.1em; height: 1.1em; }
.tv-sw button.on { color: #fff; background: var(--brand-1, #2b7fd6); }
@media (max-width: 600px) { .tv-h { flex-wrap: wrap; } .tv-sw { order: 3; width: 100%; margin: 6px 0 0; } .tv-sw button { flex: 1; justify-content: center; padding: 8px 6px; font-size: 13px; } }
.tv-swb { margin: 0 auto; display: flex; align-items: center; gap: 10px; position: relative; }
.tv-swb .tv-sw { margin: 0; }
.tv-rot { width: auto; background: #0d1118; border-color: #2a3342; color: #cbd5e1; font-size: clamp(12px, .75vw, 16px); }
.tv-rotbar { position: absolute; left: 0; right: 0; bottom: -6px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.06); overflow: hidden; opacity: 0; }
.tv-rotbar.on { opacity: 1; } .tv-rotbar i { display: block; height: 100%; width: 0; background: var(--brand-1, #2b7fd6); }
@media (max-width: 600px) { .tv-swb { order: 3; width: 100%; flex-wrap: wrap; margin: 6px 0 0; } .tv-swb .tv-sw { width: 100%; order: 0; } .tv-rot { width: 100%; order: 1; } }

/* ===== v1.62: log RADIUS do cliente + abrir OS (painel de quedas) ===== */
.qd-os { font-style: normal; margin-left: 6px; padding: 0 6px; border-radius: 6px; font-size: .9em; font-weight: 700; color: #7dd3fc; background: rgba(56,189,248,.13); font-family: var(--font-body, inherit); }
.ql { display: flex; flex-direction: column; gap: 14px; }
.ql-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.ql-st { padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: 12px; color: #fca5a5; background: rgba(239,68,68,.12); } .ql-st.on { color: #4ade80; background: rgba(34,197,94,.12); }
.ql-osr { display: inline-flex; align-items: center; gap: 6px; color: #7dd3fc; font-size: 12.5px; } .ql-osr svg { width: 14px; height: 14px; }
.ql-k { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ql-k > div { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); display: flex; flex-direction: column; min-width: 0; }
.ql-k span { font-size: 11.5px; color: var(--muted); } .ql-k b { font: 800 22px var(--font-display); color: var(--text); } .ql-k b.sm { font-size: 15px; } .ql-k small { font-size: 11.5px; color: var(--muted); }
.ql-k > .fis { border-color: rgba(239,68,68,.45); } .ql-k > .fis b { color: #fca5a5; } .ql-k > .cli { border-color: rgba(56,189,248,.45); } .ql-k > .cli b { color: #7dd3fc; }
.ql-sec h4 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ql-tl { position: relative; height: 26px; border-radius: 8px; background: rgba(239,68,68,.10); border: 1px solid var(--border); overflow: hidden; }
.ql-tl i { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; background: #22c55e; opacity: .85; }
.ql-tl i.fis { background: #22c55e; box-shadow: 2px 0 0 #ef4444; } .ql-tl i.cli { box-shadow: 2px 0 0 #38bdf8; } .ql-tl i.open { background: #4ade80; opacity: 1; }
.ql-ax { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 3px; }
.ql-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; }
.ql-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 120px; align-items: end; }
.ql-days > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 3px; }
.ql-days i { width: 70%; border-radius: 4px 4px 0 0; background: rgba(248,113,113,.55); } .ql-days i.hi { background: #ef4444; }
.ql-days b { font-size: 12px; } .ql-days small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.ql-dl { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 7px 10px; margin: 0; font-size: 13px; }
.ql-dl dt { color: var(--muted); } .ql-dl dd { margin: 0; overflow-wrap: anywhere; } .ql-dl .qd-cz { display: inline-block; margin: 0 4px 3px 0; font-size: 11.5px; }
.ql-tw { max-height: 300px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.ql-t { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ql-t th { position: sticky; top: 0; background: var(--surface-2); text-align: left; font-weight: 600; color: var(--muted); padding: 6px 10px; font-size: 11.5px; }
.ql-t td { padding: 5px 10px; border-top: 1px solid var(--border); white-space: nowrap; } .ql-t .qd-cz { font-size: 11.5px; }
.ql-os textarea { width: 100%; resize: vertical; }
.ql-pv summary { cursor: pointer; font-size: 13px; color: var(--text-2); } .ql-pv pre { white-space: pre-wrap; font-size: 12px; max-height: 280px; overflow: auto; padding: 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); }
.ql-warn { display: flex; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 8px; margin-bottom: 10px; font-size: 13px; background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); } .ql-warn svg { width: 16px; height: 16px; color: var(--warn); flex: none; }
@media (max-width: 760px) { .ql-k { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ql-g { grid-template-columns: 1fr; } .ql-t .hm { display: none; } }
.ql, .ql-sec, .ql-g > * { min-width: 0; }
.ql-days { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.ql-days small { max-width: 100%; overflow: hidden; font-size: 10.5px; text-align: center; line-height: 1.2; white-space: normal; }
.ql-osr { flex-wrap: wrap; white-space: normal; }
.ql-dl .qd-cz { white-space: normal; }
.ql-k b.sm { overflow-wrap: anywhere; }
@media (max-width: 760px) { .ql-days { height: 100px; gap: 3px; } .ql-days i { width: 80%; } .ql-k b { font-size: 19px; } .ql-k b.sm { font-size: 14px; } .ql-tw { max-height: 260px; } .ql-t td, .ql-t th { padding: 5px 7px; } }
.modal-bg:has(.ql), .modal-bg:has(.ql-os) { grid-template-columns: minmax(0, 1fr); } .modal:has(.ql) .modal-b { min-width: 0; }
.ql-days i { max-height: calc(100% - 46px); flex: none; }

/* ===== v1.63: topologia — feixe de cabos, trunk e traçado arredondado ===== */
.zt-link .ln.dn { stroke-dasharray: 7 5; }
.zt-link .hit { stroke-linejoin: round; }
.zt-bend circle { stroke-width: 2.5; }
.zt-badd circle { opacity: .75; }
.zt-badd:hover circle { opacity: 1; }

/* ===== v1.64: painel de portas do equipamento ===== */
.modal.wide.zb-hmodal { max-width: min(1120px, calc(100vw - 32px)); }
.pp { display: flex; flex-direction: column; gap: 10px; }
.pp-sum { font-size: 13px; color: var(--text-2); }
.pp-face { display: flex; flex-wrap: wrap; gap: 14px 22px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); overflow-x: auto; }
.pp-g { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pp-gl { font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.pp-rows { display: flex; flex-direction: column; gap: 4px; }
.pp-rows > div, .pp-row1 { display: grid; grid-template-columns: repeat(var(--n), 28px); gap: 4px; }
.pp-c { width: 28px; height: 24px; padding: 0; border-radius: 5px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-2); font: 700 11px var(--font-mono, monospace); cursor: pointer; position: relative; }
.pp-c:hover { filter: brightness(1.15); transform: translateY(-1px); }
.pp-c.ok { background: #16a34a; border-color: #22c55e; color: #fff; }
.pp-c.deg { background: #ca8a04; border-color: #facc15; color: #fff; }
.pp-c.fora { background: #dc2626; border-color: #f87171; color: #fff; }
.pp-c.nodata { background: #64748b; border-color: #94a3b8; color: #fff; }
.pp-c.out { border: 2px solid #818cf8; color: #c7d2fe; }
.pp-c.free { color: var(--muted); }
.pp-c.unk { border-style: dashed; color: var(--muted); }
.pp-c.desc::after { content: ''; position: absolute; top: 2px; left: 2px; width: 5px; height: 5px; border-radius: 1px; background: #c084fc; }
.pp-c.sel { outline: 2px solid #fff; outline-offset: 1px; z-index: 1; }
.pp-c.mini { width: 14px; height: 12px; display: inline-block; vertical-align: -2px; margin-right: 5px; cursor: default; pointer-events: none; }
.pp-c.mini.desc::after { top: 1px; left: 1px; width: 3px; height: 3px; }
.pp-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--muted); }
.pp-sel { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.pp-sh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.pp-pill { font-size: 11.5px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); }
.pp-pill.ok { color: #4ade80; background: rgba(34,197,94,.12); } .pp-pill.fora { color: #fca5a5; background: rgba(239,68,68,.12); } .pp-pill.deg { color: #fde047; background: rgba(250,204,21,.12); } .pp-pill.out { color: #c7d2fe; background: rgba(129,140,248,.14); }
.pp-dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 12px; margin: 0 0 10px; font-size: 13px; }
.pp-dl dt { color: var(--muted); } .pp-dl dd { margin: 0; overflow-wrap: anywhere; }
.pp-bad { color: #f87171; }
.pp-hint { margin: 0; }
.pp-log summary { cursor: pointer; font-size: 13px; }
.pp-lg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pp-li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 12px; cursor: pointer; max-width: 100%; }
.pp-li.sel { border-color: var(--brand-1); } .pp-li small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.pp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #64748b; margin-right: 6px; flex: none; }
.pp-dot.ok { background: #22c55e; } .pp-dot.deg { background: #facc15; } .pp-dot.fora { background: #ef4444; } .pp-dot.out { background: #818cf8; }
.pp-links { display: flex; flex-direction: column; }
.pp-lr { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 2px; border-bottom: 1px solid var(--border); font-size: 13px; }
.pp-lr > span:first-child { display: flex; align-items: center; min-width: 0; flex-wrap: wrap; gap: 0 4px; }
.pp-lr a { color: var(--brand-1); text-decoration: underline; text-underline-offset: 2px; }
.pp-lr > span:last-child { white-space: nowrap; text-align: right; }
.pp-tk { padding: 0 6px; border-radius: 5px; background: rgba(129,140,248,.14); color: #c7d2fe; font-size: 11px; }
.zb-verd { padding: 9px 12px; border-radius: 8px; border-left: 4px solid #22c55e; background: rgba(34,197,94,.08); font-size: 13px; }
.zb-verd.warn { border-left-color: #facc15; background: rgba(250,204,21,.08); } .zb-verd.bad { border-left-color: #ef4444; background: rgba(239,68,68,.08); }
.zb-rx { height: 140px; }
@media (max-width: 760px) {
  .pp-dl { grid-template-columns: 1fr; gap: 2px; } .pp-dl dd { margin-bottom: 6px; }
  .pp-lr { flex-direction: column; align-items: flex-start; gap: 2px; } .pp-lr > span:last-child { text-align: left; }
  .pp-c { width: 26px; } .pp-rows > div, .pp-row1 { grid-template-columns: repeat(var(--n), 26px); }
}
/* v1.64: selo de fornecedor/serviço e filtro */
.zt-svc rect { fill: rgba(129,140,248,.16); stroke: rgba(129,140,248,.55); stroke-width: 1; }
.zt-svc text { font: 700 10.5px var(--font-body, sans-serif); fill: #c7d2fe; }
.zt-util.contr { fill: #c7d2fe; }
.zt-dimmed .zt-node:not(.hl), .zt-dimmed .zt-link:not(.hl) { opacity: .18; transition: opacity .2s; }
.zt-svcbox { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; background: var(--surface-2); }
.zt-svcbox summary { cursor: pointer; }
.zt-svcf { max-width: 220px; }
/* v1.65: quedas no mapa (pisca), aviso de 10 s, aba Ocorrências e importação LLDP */
@keyframes zipulse { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }
@keyframes ziring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
.zt-node.inc .ring { stroke: #ef4444 !important; stroke-width: 6; animation: zipulse 1s ease-in-out infinite; }
.zt-node.inc .bg, .zt-node.inc .bbg { stroke: #ef4444; stroke-width: 2.5; }
.zt-node.inc .nm { fill: #fca5a5; }
.zb-gpin.inc span { box-shadow: 0 0 0 0 rgba(239,68,68,.8); animation: zipulse 1s ease-in-out infinite; border-color: #fff; }
.zb-gpin.inc::after, .zb-gpop.inc::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid #ef4444; animation: ziring 1.2s ease-out infinite; pointer-events: none; }
.zb-gpop.inc > div { outline: 3px solid #ef4444; animation: zipulse 1s ease-in-out infinite; }
.leaflet-interactive.zi-gline { animation: zipulse 1s ease-in-out infinite; }
.zi-pops { position: fixed; top: 74px; right: 16px; z-index: 9000; display: flex; flex-direction: column; gap: 10px; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
.zi-pop { pointer-events: auto; position: relative; overflow: hidden; display: flex; gap: 12px; align-items: flex-start; padding: 12px 34px 14px 12px; border-radius: 14px; background: #1a0b0e; border: 1px solid rgba(239,68,68,.65); color: #fee2e2; box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 0 1px rgba(239,68,68,.25); cursor: pointer; animation: ziin .25s ease-out; transition: opacity .3s, transform .3s; }
.zi-pop.up { background: #071a10; border-color: rgba(34,197,94,.6); color: #dcfce7; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.zi-pop.out { opacity: 0; transform: translateX(40px); }
@keyframes ziin { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
.zi-pi { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #ef4444; color: #fff; }
.zi-pop.down .zi-pi { animation: zipulse 1s ease-in-out infinite; }
.zi-pop.up .zi-pi { background: #16a34a; }
.zi-pi svg { width: 20px; height: 20px; }
.zi-pb { min-width: 0; }
.zi-pt { font-size: 12px; letter-spacing: .02em; opacity: .9; }
.zi-pt b { font-size: 13px; letter-spacing: .08em; color: #f87171; }
.zi-pop.up .zi-pt b { color: #4ade80; }
.zi-pn { font-weight: 700; font-size: 14px; margin-top: 2px; overflow-wrap: anywhere; }
.zi-ps { font-size: 12px; opacity: .8; margin-top: 2px; overflow-wrap: anywhere; }
.zi-px { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: inherit; font-size: 20px; line-height: 1; cursor: pointer; opacity: .7; }
.zi-px:hover { opacity: 1; }
.zi-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: currentColor; opacity: .5; transform-origin: left; animation: zibar 10s linear forwards; }
@keyframes zibar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.zi-help { margin: 0 0 12px; }
.zi-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.zi-kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; }
.zi-kpi b { font-size: 22px; }
.zi-kpi span { font-size: 12px; color: var(--muted); }
.zi-kpi.bad { border-color: rgba(239,68,68,.6); }
.zi-kpi.bad b { color: #f87171; }
.zi-top { margin-bottom: 12px; }
.zi-tr { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 13px; min-width: 0; }
.zi-tr b { overflow-wrap: anywhere; }
.zi-tr .sp { flex: 1; }
.zi-list { padding: 0 !important; }
.zi-row { display: grid; grid-template-columns: 78px 28px minmax(0, 1fr) 150px 80px 34px; gap: 10px; align-items: center; padding: 9px 14px; border-top: 1px solid var(--border); cursor: pointer; }
.zi-row:first-child { border-top: 0; }
.zi-row:hover { background: var(--surface-2); }
.zi-row.open { background: rgba(239,68,68,.07); }
.zi-m { min-width: 0; display: flex; flex-direction: column; }
.zi-m b { overflow-wrap: anywhere; }
.zi-t { display: flex; flex-direction: column; font-size: 12.5px; }
.zi-d { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.zi-k svg { width: 18px; height: 18px; color: var(--muted); }
.zi-live { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 11px; letter-spacing: .06em; animation: zipulse 1.2s ease-in-out infinite; }
.zi-ok { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(34,197,94,.16); color: #4ade80; font-size: 11px; letter-spacing: .06em; }
@media (max-width: 760px) {
  .zi-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zi-row { grid-template-columns: 70px minmax(0, 1fr) 34px; }
  .zi-row .zi-k { display: none; }
  .zi-row .zi-t, .zi-row .zi-d { grid-column: 2; text-align: left; }
  .zi-pops { top: auto; bottom: 16px; }
}
@media (prefers-reduced-motion: reduce) { .zt-node.inc .ring, .zi-live, .zb-gpin.inc span, .leaflet-interactive.zi-gline { animation-duration: 2s; } }
.ll-help { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 10px 14px; }
.ll-help summary { cursor: pointer; display: flex; align-items: center; gap: 8px; }
.ll-help summary svg { width: 18px; height: 18px; }
.ll-hb { font-size: 13.5px; line-height: 1.5; }
.ll-hb ol { padding-left: 20px; margin: 8px 0; }
.ll-hb li { margin: 4px 0; }
.ll-hb ul { padding-left: 18px; margin: 6px 0 0; color: var(--muted); }
.ll-hb code { font-size: 12.5px; background: rgba(148,163,184,.14); padding: 1px 5px; border-radius: 5px; white-space: nowrap; }
.ll-cmd { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 13px; }
.ll-cmd td { border-top: 1px solid var(--border); padding: 5px 8px; vertical-align: top; }
.ll-cmd td:first-child { font-weight: 700; white-space: nowrap; width: 1%; }
.ll-in { display: flex; gap: 12px; align-items: flex-start; }
.ll-in textarea { width: 100%; min-height: 170px; font-size: 12.5px; white-space: pre; }
.ll-side { flex: 0 0 250px; display: flex; flex-direction: column; gap: 10px; }
.ll-file { cursor: pointer; justify-content: center; }
.ll-sum { font-size: 13.5px; margin-bottom: 8px; }
.ll-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.ll-bar .sp { flex: 1; }
.ll-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.ll-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) 130px auto; gap: 10px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--border); cursor: pointer; font-size: 13px; }
.ll-row:first-child { border-top: 0; }
.ll-row.st-existe { opacity: .55; cursor: default; }
.ll-ends { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ll-e { overflow-wrap: anywhere; }
.ll-ar { color: var(--muted); font-weight: 700; }
.ll-w { color: #fbbf24; }
.ll-new { color: #a5b4fc; }
.ll-both { color: #4ade80; }
@media (max-width: 760px) {
  .ll-in { flex-direction: column; }
  .ll-side { flex: 1 1 auto; width: 100%; }
  .ll-row { grid-template-columns: 22px minmax(0, 1fr); }
  .ll-row .ll-tk, .ll-row > .ix-pill { grid-column: 2; justify-self: start; }
  .ll-cmd td { display: block; width: auto; border: 0; padding: 2px 0; }
  .ll-cmd tr { display: block; border-top: 1px solid var(--border); padding: 4px 0; }
  .ll-hb code { white-space: normal; }
}
/* Leaflet: o svg das linhas usa width/height próprios (a regra global de ícones encolhia o desenho) */
.leaflet-overlay-pane svg, .leaflet-pane > svg { width: auto; height: auto; max-width: none; }
/* v1.66: barra de edição em grupos, tipos de elemento, texto solto, guias do ímã, ficha do elemento manual */
.zt-edbar { flex-direction: column; align-items: stretch; gap: 6px; }
.zt-eg { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.zt-eg + .zt-eg { border-top: 1px dashed color-mix(in srgb, var(--brand-1) 30%, transparent); padding-top: 6px; }
.zt-egl { flex: 0 0 86px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.zt-eg .zt-find { flex: 1 1 200px; max-width: 300px; }
.zt-tg.on, .zt-anim.on { border-color: var(--brand-1); color: var(--brand-1); background: color-mix(in srgb, var(--brand-1) 12%, transparent); }
.zt-nolbl .zt-lab, .zt-nolbl .zt-util { display: none; }
#ztGd line { stroke: #f472b6; stroke-width: 1.5; stroke-dasharray: 6 5; pointer-events: none; vector-effect: non-scaling-stroke; }
.zt-txt .ring { fill: color-mix(in srgb, var(--surface) 70%, transparent); stroke: var(--border); stroke-width: 1; stroke-dasharray: 4 4; }
.zt-txt.sel .ring { stroke: var(--brand-1); stroke-dasharray: none; }
.zt-txt .tx { font: 800 15px var(--font-body, system-ui, sans-serif); fill: var(--text); letter-spacing: .04em; pointer-events: none; }
.zt-kgs { display: flex; flex-direction: column; gap: 8px; }
.zt-kgl { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.zm-info { display: flex; gap: 12px; align-items: center; }
.zm-ic { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 2px solid var(--border); }
.zm-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .zt-egl { flex: 1 0 100%; }
  .zt-eg .btn { flex: 1 1 calc(50% - 6px); }
  .zt-eg .zt-find { flex: 1 0 100%; max-width: none; }
}
.pp-note { margin: 4px 0 8px; }
/* v1.67: formato da topologia */
.zf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.zf-opt { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; background: var(--surface-2); }
.zf-opt input { position: absolute; opacity: 0; pointer-events: none; }
.zf-opt svg { width: 100%; height: 54px; fill: var(--brand-1); stroke: var(--muted); stroke-width: 1.4; }
.zf-opt svg circle[fill="none"] { stroke: var(--muted); }
.zf-opt b { font-size: 13.5px; }
.zf-opt small { font-size: 11.5px; line-height: 1.35; }
.zf-opt:has(input:checked) { border-color: var(--brand-1); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-1) 35%, transparent); background: color-mix(in srgb, var(--brand-1) 10%, var(--surface-2)); }
@media (max-width: 760px) { .zf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.zf-opt svg path { fill: none; }
/* v1.68: ausência (saúde) e pontos ajustados */
.rk-bdg.au.sd { background: rgba(244,114,182,.14); color: #f9a8d4; border-color: rgba(244,114,182,.4); }
.rk-proj { display: block; font-size: 11px; color: #a5b4fc; font-weight: 600; }
.tvr-list .pt .rk-proj { display: inline; margin-left: 4px; font-size: .62em; }
.rk-qaus { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rk-qaus label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.rk-qaus #qaObs { flex: 1 1 200px; }
/* v1.68: RX/TX da ONU nas OS dos técnicos */
.rk-sig { display: inline-flex; align-items: baseline; gap: 4px; margin-top: 3px; padding: 1px 8px; border-radius: 999px; font: 600 11.5px var(--font-mono, ui-monospace, monospace); white-space: nowrap; border: 1px solid transparent; width: fit-content; }
.rk-sig b { font-weight: 800; font-size: .85em; opacity: .75; }
.rk-sig small { font-size: .85em; opacity: .75; }
.rk-sig.bom { background: rgba(34,197,94,.14); color: #4ade80; border-color: rgba(34,197,94,.35); }
.rk-sig.atencao { background: rgba(250,204,21,.14); color: #facc15; border-color: rgba(250,204,21,.4); }
.rk-sig.critico, .rk-sig.sem { background: rgba(239,68,68,.16); color: #f87171; border-color: rgba(239,68,68,.45); }
.rk-sig.forte { background: rgba(56,189,248,.14); color: #7dd3fc; border-color: rgba(56,189,248,.4); }
.rk-sig.off { outline: 1px dashed rgba(239,68,68,.6); }
.rk-sig.none { font-family: inherit; font-weight: 500; color: var(--muted); background: var(--surface-2); }
.rkl-list .w .rk-sig { display: inline-flex; }
.tv .rkl-list .rk-sig { font-size: .78em; }
/* v1.68: OS de estrutura (TV e faixa do ranking) */
@keyframes estpulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.55), inset 0 0 0 2px rgba(239,68,68,.9); } 50% { box-shadow: 0 0 0 10px rgba(239,68,68,0), inset 0 0 0 2px rgba(239,68,68,.35); } }
@keyframes estglow { 0%, 100% { background-color: rgba(245,158,11,.16); } 50% { background-color: rgba(245,158,11,.30); } }
.tv-est { flex: 1; min-height: 0; overflow: hidden; } .tv-est[hidden] { display: none !important; }
.tve { height: 100%; display: flex; flex-direction: column; gap: 1.4vh; }
.tve-empty { padding: 8vh 0; text-align: center; font-size: 22px; color: var(--muted); }
.tve-hd { display: flex; align-items: center; gap: 2vw; padding: 1.4vh 1.4vw; border-radius: 16px; border: 2px solid rgba(245,158,11,.6); background: repeating-linear-gradient(-45deg, rgba(245,158,11,.14) 0 18px, rgba(0,0,0,.0) 18px 36px), #120d03; }
.tve-hd.on { animation: estglow 2.2s ease-in-out infinite; }
.tve.has-late .tve-hd { border-color: rgba(239,68,68,.8); }
.tve-hd.ok { border-color: rgba(34,197,94,.5); background: #04130a; }
.tve-ti { display: flex; align-items: center; gap: 1vw; min-width: 0; }
.tve-ic { font-size: 2.6em; line-height: 1; }
.tve-ti b { display: block; font-size: 1.9em; letter-spacing: .06em; color: #fbbf24; }
.tve-hd.ok .tve-ti b { color: #4ade80; }
.tve-ti small { color: #cbd5e1; font-size: .95em; }
.tve-ks { display: flex; flex-wrap: wrap; gap: .8vw; margin-left: auto; }
.tve-k { min-width: 7.5vw; padding: .8vh .9vw; border-radius: 12px; background: rgba(15,23,42,.75); border: 1px solid rgba(148,163,184,.25); display: flex; flex-direction: column; }
.tve-k b { font-size: 2.2em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.tve-k span { font-size: .85em; color: #94a3b8; }
.tve-k.warn b { color: #fbbf24; } .tve-k.bad { border-color: rgba(239,68,68,.6); } .tve-k.bad b { color: #f87171; } .tve-k.ok b { color: #4ade80; }
.tve-g { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22vw), 1fr)); grid-auto-rows: minmax(0, max-content); gap: 1vw; align-content: start; overflow: hidden; }
.tve-c { position: relative; display: flex; flex-direction: column; gap: .6vh; padding: 1.2vh 1vw; border-radius: 14px; background: #0b1220; border: 1px solid rgba(245,158,11,.45); border-left: 6px solid #f59e0b; min-width: 0; }
.tve-c.alta, .tve-c.crit { border-left-color: #f97316; }
.tve-c.late { border-left-color: #ef4444; background: #1a0a0d; animation: estpulse 1.6s ease-out infinite; }
.tve-ct { display: flex; flex-wrap: wrap; align-items: center; gap: .5vw; font-size: .95em; }
.tve-st { padding: 1px 8px; border-radius: 999px; background: rgba(148,163,184,.18); }
.tve-pr { padding: 1px 8px; border-radius: 999px; background: rgba(249,115,22,.2); color: #fdba74; font-weight: 700; }
.tve-pr.crit { background: #ef4444; color: #fff; }
.tve-lt { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: #ef4444; color: #fff; font-weight: 800; letter-spacing: .08em; animation: zipulse 1s ease-in-out infinite; }
.tve-e { font-size: 1.45em; font-weight: 800; color: #fde68a; overflow-wrap: anywhere; line-height: 1.15; }
.tve-a { font-size: .95em; color: #cbd5e1; overflow-wrap: anywhere; }
.tve-m { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .4vw 1vw; font-size: 1em; }
.tve-m .bad { color: #f87171; font-weight: 800; }
.tve-msg { font-size: .9em; color: #94a3b8; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tve-ag { display: flex; align-items: baseline; gap: .6vw; margin-top: auto; }
.tve-ag span { color: #94a3b8; font-size: .9em; } .tve-ag b { font-size: 1.8em; font-variant-numeric: tabular-nums; } .tve-ag small { margin-left: auto; color: #64748b; }
.tve-c.late .tve-ag b { color: #f87171; }
.tve-more { text-align: center; color: #fbbf24; font-weight: 700; }
.tve-none { flex: 1; display: grid; place-items: center; font-size: 2.4em; color: #4ade80; font-weight: 800; }
.tve:not(.is-tv) { font-size: 14px; } .tve:not(.is-tv) .tve-g { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tv-estb[hidden] { display: none !important; }
.rk-estb { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; border: 2px solid rgba(245,158,11,.7); color: #fde68a; text-decoration: none; background: repeating-linear-gradient(-45deg, rgba(245,158,11,.16) 0 14px, transparent 14px 28px), #1a1305; animation: estglow 2s ease-in-out infinite; }
.rk-estb.late { border-color: #ef4444; animation: estpulse 1.6s ease-out infinite; }
.rk-estb .ic { font-size: 22px; } .rk-estb .tx { font-size: 15px; } .rk-estb .tx .lt { color: #fca5a5; }
.rk-estb .ls { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 260px; }
.rk-estb .ls > span { padding: 2px 9px; border-radius: 999px; background: rgba(0,0,0,.35); font-size: 12.5px; color: #fef3c7; }
.rk-estb .ls > span.late { background: rgba(239,68,68,.35); }
.rk-estb .ls small { opacity: .75; }
.rk-estb .go { margin-left: auto; font-weight: 800; }
.rk-estb.is-tv { margin: 0; font-size: 1.15em; } .rk-estb.is-tv .tx { font-size: 1.2em; } .rk-estb.is-tv .ic { font-size: 1.8em; } .rk-estb.is-tv .ls > span { font-size: .95em; }
.tv-estb { flex: 0 0 auto; }
/* v1.68: Tráfego CDN na TV com Serviços e Links */
.tva-hd { display: flex; align-items: center; gap: 1.2vw; margin-bottom: 1vh; }
.tva-ti { display: flex; flex-direction: column; } .tva-ti b { font-size: 1.4em; } .tva-ti small { color: #94a3b8; }
.tva-sw button.cur { box-shadow: inset 0 -3px 0 var(--brand-1); }
.tr-grid.links.tv { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
.tva-b .tr-grid.links.tv .tr-card { min-width: 0; }
@media (max-width: 760px) { .tve-hd { flex-direction: column; align-items: stretch; } .tve-ks { margin-left: 0; } .tve-k { min-width: 0; flex: 1 1 30%; } .tva-hd { flex-direction: column; align-items: flex-start; } }
#qaList .rk-ai { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr) auto; }
#qaList .rk-ai > span:last-child { justify-content: flex-end; }
@media (max-width: 760px) {
  .tv-est { overflow: auto; }
  .tve-g { grid-template-columns: 1fr; overflow: visible; }
  #qaList .rk-ai { grid-template-columns: 1fr 1fr; }
}

/* v1.69: RX/TX nas quedas de clientes */
.qd-sig { display: inline-flex; align-items: baseline; gap: .35em; padding: .15em .6em; border-radius: 999px; font: 700 .86em var(--font-mono, ui-monospace, monospace); white-space: nowrap; border: 1px solid transparent; }
.qd-sig b { font-size: .78em; opacity: .7; }
.qd-sig.ok { color: #4ade80; background: rgba(34,197,94,.13); border-color: rgba(34,197,94,.35); }
.qd-sig.warn { color: #facc15; background: rgba(250,204,21,.13); border-color: rgba(250,204,21,.4); }
.qd-sig.bad { color: #f87171; background: rgba(239,68,68,.14); border-color: rgba(239,68,68,.4); }
.qd-sig.hot { color: #7dd3fc; background: rgba(56,189,248,.13); border-color: rgba(56,189,248,.4); }
.qd-sig.off { outline: 1px dashed rgba(239,68,68,.6); }
.qd-sig.sem { color: #94a3b8; background: none; border: 0; }
.qd-sig.big { font-size: 1em; }
@media (max-width: 760px) { .qd-r .qd-sg { grid-column: 2 / -1; } }
/* v1.69: OS de estrutura — situação, pausa e mensagem do IXC */
.tve-st { font-weight: 800; }
.tve-st.en { background: rgba(56,189,248,.22); color: #7dd3fc; }
.tve-st.an { background: rgba(167,139,250,.24); color: #c4b5fd; }
.tve-st.ag { background: rgba(45,212,191,.2); color: #5eead4; }
.tve-st.rag { background: rgba(251,191,36,.24); color: #fcd34d; }
.tve-st.as { background: rgba(34,197,94,.2); color: #86efac; }
.tve-st.ab { background: rgba(148,163,184,.2); color: #e2e8f0; }
.tve-ixm { border-radius: 10px; background: rgba(56,189,248,.08); border: 1px solid rgba(56,189,248,.3); padding: .6vh .7vw; }
.tve-ixm .h { font-size: .8em; color: #7dd3fc; font-weight: 700; } .tve-ixm .h small { color: #94a3b8; font-weight: 500; }
.tve-ixm .t { font-size: 1em; color: #f1f5f9; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tve-pz { font-size: .85em; color: #a5b4fc; }
/* v1.69: Painel TV com menu lateral à esquerda (mais altura para o conteúdo) */
.tv.has-rail { flex-direction: row; gap: 1vw; padding: 1.2vh .9vw; }
.tv-rail { flex: 0 0 auto; width: clamp(112px, 9.5vw, 230px); display: flex; flex-direction: column; gap: 1.2vh; padding: 1.4vh .6vw; background: #070a10; border: 1px solid #161c26; border-radius: 1.4vh; min-height: 0; }
.tv-rail .tv-logo { width: 82%; height: auto; max-height: 6vh; object-fit: contain; align-self: center; margin: 0 0 .6vh; }
.tv-nav { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5vh; overflow: auto; scrollbar-width: none; }
.tv-nav button { display: flex; align-items: center; gap: .55vw; width: 100%; padding: 1.1vh .6vw; border-radius: 1vh; border: 1px solid transparent; background: transparent; color: #aab4c3; font: 600 clamp(11px, .8vw, 19px)/1.15 inherit; text-align: left; cursor: pointer; }
.tv-nav button svg { width: 1.35em; height: 1.35em; flex: 0 0 auto; }
.tv-nav button:hover { background: rgba(255,255,255,.05); color: #fff; }
.tv-nav button.on { background: linear-gradient(135deg, rgba(78,170,227,.9), rgba(37,99,235,.85)); color: #fff; box-shadow: 0 4px 14px rgba(37,99,235,.35); }
.tv-rots { position: relative; }
.tv-rail .tv-rot, .tv-rail .tv-cor { width: 100%; font-size: clamp(10px, .7vw, 16px); padding: .5vh .4vw; }
.tv-rail .tv-rotbar { position: absolute; left: 4px; right: 4px; bottom: -4px; }
.tv-rail .tv-clock { text-align: center; margin: auto 0 0; }
.tv-rail #tvTime { font-size: clamp(16px, 1.55vw, 38px); font-weight: 800; letter-spacing: .02em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tv-rail #tvDate { font-size: clamp(10px, .65vw, 15px); color: #8a94a6; }
.tv-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 1.2vh; }
@media (max-width: 760px) {
  .tv.has-rail { flex-direction: column; height: auto; min-height: 100vh; }
  .tv-rail { width: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px; gap: 8px; }
  .tv-rail .tv-logo { width: 70px; margin: 0; }
  .tv-nav { flex-direction: row; overflow-x: auto; flex: 1 1 100%; order: 3; }
  .tv-nav button { width: auto; white-space: nowrap; padding: 8px 10px; font-size: 13px; }
  .tv-rail .tv-clock { margin: 0 0 0 auto; }
  .tv-rots, .tv-rail .tv-cor { flex: 1 1 140px; }
}
/* v1.69: cor para TV com pouco brilho — "Brilho alto" clareia tudo e reforça textos; "Fundo claro" inverte para fundo branco */
.tv.tvc-hc { background: #000; font-weight: 600; }
.tv.tvc-hc .tv-main, .tv.tvc-hc .tv-rail { filter: brightness(1.35) contrast(1.18) saturate(1.45); }
.tv.tvc-hc .muted, .tv.tvc-hc small, .tv.tvc-hc .tv-rail #tvDate { color: #f1f5f9 !important; opacity: 1 !important; }
.tv.tvc-hc .qd-foot, .tv.tvc-hc .tr-foot, .tv.tvc-hc .tk-leg, .tv.tvc-hc .tvr-legend { display: none; }
.tv.tvc-hc .tv-nav button { color: #fff; }
.tv.tvc-claro { background: #f4f6fa; }
.tv.tvc-claro .tv-main, .tv.tvc-claro .tv-rail { filter: invert(1) hue-rotate(180deg) contrast(1.12) saturate(1.2); }
.tv.tvc-claro .tv-main img:not(.tv-logo), .tv.tvc-claro .tr-logo { filter: invert(1) hue-rotate(180deg); }
.tv.tvc-claro .qd-foot, .tv.tvc-claro .tr-foot, .tv.tvc-claro .tk-leg { display: none; }
/* v1.69: tráfego compacto na TV (Serviços e Links juntos) */
.tk { height: 100%; display: flex; flex-direction: column; gap: 1.2vh; min-height: 0; text-transform: none; letter-spacing: normal; }
.tk * { text-transform: none; letter-spacing: normal; }
.tk-k span { text-transform: uppercase; letter-spacing: .05em; font-size: .78em; }
.tk-list > .tk-r { flex: 1 1 0; max-height: 9vh; min-height: 0; }
.tva-b { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tva-b > .tk { flex: 1; }
.tk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8vw; }
.tk-k { padding: 1vh .9vw; border-radius: 1.2vh; background: #0b1018; border: 1px solid #1b2433; display: flex; flex-direction: column; }
.tk-k span { color: #94a3b8; font-size: .9em; } .tk-k b { font-size: 2.1em; line-height: 1.1; font-variant-numeric: tabular-nums; } .tk-k small { color: #94a3b8; }
.tk-k.bad { border-color: rgba(239,68,68,.6); } .tk-k.bad b { color: #f87171; } .tk-k.warn b { color: #fbbf24; } .tk-k.ok b { color: #4ade80; }
.tk-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1vw; }
.tk-col { min-height: 0; display: flex; flex-direction: column; background: #080b10; border: 1px solid #161c26; border-radius: 1.4vh; padding: 1.2vh .9vw; overflow: hidden; }
.tk-col h3 { margin: 0 0 .8vh; font-size: 1.25em; } .tk-col h3 small { font-size: .7em; color: #8a94a6; font-weight: 500; margin-left: .4em; }
.tk-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: .5vh; overflow: hidden; }
.tk-r { display: grid; grid-template-columns: 2.4em minmax(0, 1.3fr) minmax(0, 1fr) 7.5em 3.2em 4.5em; gap: .7vw; align-items: center; padding: .7vh .6vw; border-radius: 1vh; background: #0c111a; border-left: 4px solid var(--c); }
.tk-lnk .tk-r { grid-template-columns: .9em minmax(0, 1.4fr) minmax(0, 1fr) 7.5em 3.2em; }
.tk-logo .tr-logo { width: 2.2em; height: 2.2em; font-size: .8em; }
.tk-n { min-width: 0; display: flex; flex-direction: column; } .tk-n b { font-size: 1.1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tk-n small { color: #8a94a6; font-size: .8em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-sp { width: 100%; height: 3.2vh; min-height: 22px; }
.tk-v { display: flex; flex-direction: column; align-items: flex-end; gap: .3vh; } .tk-v b { font-size: 1.2em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-bar { display: block; width: 100%; height: 5px; border-radius: 3px; background: rgba(148,163,184,.18); overflow: hidden; } .tk-bar > i { display: block; height: 100%; background: var(--c); border-radius: 3px; }
.tk-r.ok .tk-bar.u > i { background: #22c55e; } .tk-r.warn .tk-bar.u > i { background: #f59e0b; } .tk-r.bad .tk-bar.u > i { background: #ef4444; }
.tk-r.bad { box-shadow: inset 0 0 0 1px rgba(239,68,68,.5); }
.tk-p { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; } .tk-r.bad .tk-p { color: #f87171; } .tk-r.warn .tk-p { color: #fbbf24; }
.tk-via { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(148,163,184,.15); } .tk-via > i { display: block; min-width: 3px; }
.tk-dot { width: .8em; height: .8em; border-radius: 50%; background: var(--c); }
.tk-leg { display: flex; flex-wrap: wrap; gap: .4vh .9vw; margin-top: .8vh; font-size: .8em; color: #cbd5e1; } .tk-leg i { display: inline-block; width: .8em; height: .8em; border-radius: 2px; margin-right: .3em; vertical-align: -1px; }
.tva-hd { margin-bottom: .6vh; }
@media (max-width: 900px) { .tk-body { grid-template-columns: 1fr; } .tk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tk-r { grid-template-columns: 2.4em minmax(0, 1fr) 6.5em 3em; } .tk-r .tk-sp, .tk-r .tk-via { display: none; } .tk-lnk .tk-r { grid-template-columns: .9em minmax(0, 1fr) 6.5em 3em; } }
.tv-akv:not([hidden]) { display: flex; flex-direction: column; }
.tk-leg, .tk-leg span { text-transform: none !important; letter-spacing: normal !important; } .tk-legt { color: #8a94a6; }
/* v1.69: tráfego da TV com mais informação (preenche a tela) */
.tk-r { grid-template-columns: 2.4em minmax(0, 1.1fr) minmax(0, .9fr) minmax(0, 1fr) 7.5em 3.2em 5.5em; }
.tk-lnk .tk-r { grid-template-columns: .9em minmax(0, 1.3fr) minmax(0, 1fr) 7.5em 3.2em; grid-template-rows: auto auto; }
.tk-st { display: flex; flex-direction: column; font-size: .78em; color: #8a94a6; white-space: nowrap; overflow: hidden; } .tk-st b { color: #dbe3ee; font-weight: 700; }
.tk-vw { display: flex; flex-direction: column; gap: .3vh; } .tk-vw small { font-size: .72em; color: #8a94a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-ls { grid-column: 2 / -1; font-size: .78em; color: #8a94a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tk-ls b { color: #dbe3ee; }
.tk-ls em { font-style: normal; margin-left: .6em; padding: 0 .5em; border-radius: 999px; border-left: 3px solid var(--c); background: rgba(148,163,184,.1); color: #e2e8f0; }
.tk-lnk .tk-list { flex: 0 1 auto; }
.tk-lnk .tk-list > .tk-r { flex: 0 0 auto; max-height: none; }
.tk-tot { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 1vh; padding-top: 1vh; border-top: 1px solid #1b2433; }
.tk-tot h4 { margin: 0 0 .6vh; font-size: 1em; } .tk-tot h4 small { color: #8a94a6; font-weight: 500; margin-left: .5em; }
.tk-tot .tr-chart { flex: 1; min-height: 0; width: 100%; height: 100%; }
@media (max-width: 900px) { .tk-r .tk-st, .tk-r .tk-vw { display: none; } .tk-r { grid-template-columns: 2.4em minmax(0, 1fr) 6.5em 3em; } }
.tk-st, .tk-st span, .tk-ls { font-size: .78em !important; text-transform: none !important; letter-spacing: normal !important; line-height: 1.3; }
.tk-st span { font-size: 1em !important; }
.tk-st b, .tk-ls b, .tk-ls em { font-size: 1em !important; line-height: 1.3; }
.tk-svc .tk-r { grid-template-columns: 2.4em minmax(0, 1fr) minmax(0, .75fr) minmax(0, 1.25fr) 7.2em 3em 7em; }
@media (max-width: 900px) { .tk-svc .tk-r { grid-template-columns: 2.4em minmax(0, 1fr) 6.5em 3em; } }
/* v1.69.1: coluna de links não encavala (muitos links: linhas compactas; gráfico total com altura mínima) */
.tk-lnk .tk-list { flex: 0 1 auto; min-height: 0; overflow: hidden; }
.tk-lnk.many .tk-ls { display: none; }
.tk-lnk.many .tk-r { padding: .5vh .6vw; }
.tk-lnk.many .tk-sp { height: 2.6vh; }
.tk-lnk.lots .tk-list { flex: 1 1 auto; }
.tk-tot { flex: 1 1 14vh; min-height: 14vh; overflow: hidden; }
.tk-tot h4 { flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-leg { flex: 0 0 auto; position: relative; z-index: 1; background: #080b10; }
/* v1.69.1: gráfico da entrada total sobe para a faixa de cima (tem espaço) */
.tk-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 2.4fr); }
.tk-kpis.no-hot { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 2.4fr); }
.tk-k.tk-tot { flex: none; min-height: 0; margin: 0; padding: .8vh .8vw .4vh; border-top: 1px solid #1b2433; overflow: hidden; }
.tk-k.tk-tot > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-k.tk-tot > span small { text-transform: none; letter-spacing: normal; color: #8a94a6; margin-left: .4em; font-size: .95em; }
.tk-k.tk-tot .tr-chart { flex: 1 1 auto; height: 8.5vh; min-height: 0; width: 100%; }
.tk-lnk .tk-list { flex: 1 1 auto; }
@media (max-width: 900px) { .tk-kpis, .tk-kpis.no-hot { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tk-k.tk-tot { grid-column: 1 / -1; } }

/* v1.69.1: na TV, toda borda de quadro vira uma linha ciano fina (separa bem os blocos; o vermelho/amarelo de alerta continua por cima) */
.tv:not(.tvc-claro) { --tv-line: rgba(34, 211, 238, .42); --border: var(--tv-line); }
:where(.tv:not(.tvc-claro)) .card,
:where(.tv:not(.tvc-claro)) .kpi,
:where(.tv:not(.tvc-claro)) .pv-kt,
:where(.tv:not(.tvc-claro)) .pv-sa,
:where(.tv:not(.tvc-claro)) .pv-node,
:where(.tv:not(.tvc-claro)) .pv-k,
:where(.tv:not(.tvc-claro)) .pv-alr,
:where(.tv:not(.tvc-claro)) .pv-allok,
:where(.tv:not(.tvc-claro)) .pv-allbad,
:where(.tv:not(.tvc-claro)) .pv-job,
:where(.tv:not(.tvc-claro)) .pv-cs,
:where(.tv:not(.tvc-claro)) .pv-sm,
:where(.tv:not(.tvc-claro)) .tk-k,
:where(.tv:not(.tvc-claro)) .tk-col,
:where(.tv:not(.tvc-claro)) .tve-c,
:where(.tv:not(.tvc-claro)) .tve-k,
:where(.tv:not(.tvc-claro)) .tve-ixm,
:where(.tv:not(.tvc-claro)) .tr-card,
:where(.tv:not(.tvc-claro)) .tr-k,
:where(.tv:not(.tvc-claro)) .tr-svc,
:where(.tv:not(.tvc-claro)) .tr-al,
:where(.tv:not(.tvc-claro)) .qd-k,
:where(.tv:not(.tvc-claro)) .qd-l,
:where(.tv:not(.tvc-claro)) .qd-map,
:where(.tv:not(.tvc-claro)) .zi-kpi,
:where(.tv:not(.tvc-claro)) .rk-ri,
:where(.tv:not(.tvc-claro)) .rka-card,
:where(.tv:not(.tvc-claro)) .tvr-g,
:where(.tv:not(.tvc-claro)) .tvr-live,
:where(.tv:not(.tvc-claro)) .tvr-pd,
:where(.tv:not(.tvc-claro)) .tv-card,
:where(.tv:not(.tvc-claro)) .tv-col,
:where(.tv:not(.tvc-claro)) .tv-infra,
:where(.tv:not(.tvc-claro)) .altv-c,
:where(.tv:not(.tvc-claro)) .altv-r,
:where(.tv:not(.tvc-claro)) .altv-big,
:where(.tv:not(.tvc-claro)) .altv-main,
:where(.tv:not(.tvc-claro)) .olt-card,
:where(.tv:not(.tvc-claro)) .gl-card,
:where(.tv:not(.tvc-claro)) .kcard,
:where(.tv:not(.tvc-claro)) .kcol,
:where(.tv:not(.tvc-claro)) .tx-card,
:where(.tv:not(.tvc-claro)) .od-kpi,
:where(.tv:not(.tvc-claro)) .ose-kpi,
:where(.tv:not(.tvc-claro)) .bgp-kpi,
:where(.tv:not(.tvc-claro)) .pp-c,
:where(.tv:not(.tvc-claro)) .zt-wrap,
:where(.tv:not(.tvc-claro)) .zt-alert,
:where(.tv:not(.tvc-claro)) .al-row,
:where(.tv:not(.tvc-claro)) .tv-rail { border-color: var(--tv-line); }
:where(.tv:not(.tvc-claro)) .card-h { border-bottom-color: rgba(34, 211, 238, .18); }
:where(.tv:not(.tvc-claro)) .tv-rail { border-width: 0 1px 0 0; border-style: solid; }
.tv.tvc-hc { --tv-line: rgba(103, 232, 249, .55); }

/* v1.70: Mapa da rede (OZmap) */
.pp-ok { color: #4ade80; }
.oz { display: flex; flex-direction: column; height: calc(100vh - var(--oz-top, 132px)); min-height: 480px; gap: 8px; }
.oz-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.oz-bar .sp { flex: 1; }
.oz-proj { display: inline-flex; align-items: center; gap: 6px; } .oz-proj svg { width: 16px; height: 16px; color: var(--muted); }
.oz-proj select { min-width: 220px; max-width: 340px; font-weight: 600; }
.oz-srch { position: relative; flex: 0 1 300px; min-width: 200px; } .oz-srch .search { width: 100%; } .oz-srch input { width: 100%; }
.oz-res { position: absolute; z-index: 1200; top: calc(100% + 4px); left: 0; right: 0; max-height: 360px; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.35); padding: 4px; }
.oz-res button { display: block; width: 100%; text-align: left; background: none; border: 0; color: inherit; padding: 7px 9px; border-radius: 7px; cursor: pointer; font: inherit; font-size: 13px; }
.oz-res button:hover { background: var(--surface-2, rgba(148,163,184,.12)); }
.oz-res small { display: inline-block; min-width: 52px; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.oz-res .muted { padding: 8px; display: block; }
.oz-lys { display: flex; flex-wrap: wrap; gap: 4px; }
.oz-ly { border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; }
.oz-ly.on { background: color-mix(in srgb, var(--brand-1) 18%, transparent); color: var(--text); border-color: color-mix(in srgb, var(--brand-1) 55%, transparent); }
.oz-ly b { font-weight: 600; opacity: .7; }
.oz-body { position: relative; flex: 1; min-height: 0; display: flex; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.oz-map { flex: 1; min-width: 0; background: #0b1220; }
.oz-load { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(2,6,23,.55); color: #e2e8f0; z-index: 1100; font-weight: 600; }
.oz-side { width: 380px; max-width: 46%; flex: 0 0 auto; overflow: auto; background: var(--surface); border-left: 1px solid var(--border); padding: 14px; position: relative; font-size: 13px; }
.oz-x { position: absolute; top: 8px; right: 8px; }
.oz-h small { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .04em; } .oz-h h3 { margin: 2px 30px 6px 0; font-size: 18px; }
.oz-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }
.oz-occ { margin: 6px 0 12px; } .oz-occ > div:last-child { margin-top: 5px; }
.oz-ob { height: 10px; border-radius: 6px; background: rgba(148,163,184,.2); overflow: hidden; } .oz-ob i { display: block; height: 100%; }
.oz-sec { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 10px; }
.oz-sec h4 { margin: 0 0 6px; font-size: 13px; }
.oz-li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; } .oz-li[data-cab] { cursor: pointer; } .oz-li[data-cab]:hover { color: var(--brand-1); }
.oz-cl { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.oz-cl:last-child { border-bottom: 0; } .oz-cl.off b a, .oz-cl.off > div > b { color: #f87171; }
.oz-cl > div { min-width: 0; } .oz-cl > div > b, .oz-cl > div > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oz-cl .dot { width: 9px; height: 9px; border-radius: 50%; display: block; } .oz-cl .dot.on { background: #22c55e; } .oz-cl .dot.off { background: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.25); } .oz-cl .dot.nd { background: #94a3b8; }
.oz-rx { text-align: right; } .oz-rx b, .oz-rx small { display: block; white-space: nowrap; } .oz-rx small { color: var(--muted); font-size: 11px; }
.oz-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 4px 0; } .oz-kv span { color: var(--muted); }
.oz-leg { position: absolute; left: 10px; bottom: 22px; z-index: 1000; max-width: 300px; background: rgba(11,18,32,.92); color: #e2e8f0; border: 1px solid rgba(34,211,238,.3); border-radius: 10px; padding: 6px 10px; font-size: 12px; }
.oz-leg summary { cursor: pointer; font-weight: 600; }
.oz-lg { display: flex; flex-wrap: wrap; gap: 3px 10px; margin-top: 6px; } .oz-lg b { width: 100%; font-size: 11px; color: #94a3b8; font-weight: 600; }
.oz-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; }
.oz-lg i.ring { background: transparent; border: 2px solid #ef4444; } .oz-lg i.dash { background: transparent; border: 2px dashed #f59e0b; }
.oz-tps label { display: flex; align-items: center; gap: 4px; cursor: pointer; } .oz-tps small { color: #94a3b8; }
.oz-pop span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #7c3aed; color: #fff; border: 2px solid #0b1220; } .oz-pop svg { width: 13px; height: 13px; }
.oz-cfg .row-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.oz-pl { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 6px 14px; }
.oz-pr span { display: flex; flex-direction: column; } .oz-pr small { font-size: 11px; }
.u-oz { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px 12px; max-height: 180px; overflow: auto; }
@media (max-width: 900px) {
  .oz { height: calc(100vh - 150px); }
  .oz-side { position: absolute; inset: auto 0 0 0; width: auto; max-width: none; max-height: 60%; z-index: 1150; border-left: 0; border-top: 1px solid var(--border); }
  .oz-proj select { min-width: 0; max-width: 60vw; } .oz-srch { flex: 1 1 100%; } .oz-cfg .row-2 { grid-template-columns: 1fr; }
}
.oz-load[hidden], .oz-side[hidden], .oz-res[hidden] { display: none !important; }
.oz { height: auto; }
.oz-cor { margin: 6px 0 2px; }
.oz-srch { flex: 0 1 260px; min-width: 180px; }
.oz-bar #ozSt { white-space: nowrap; }
@media (max-width: 1700px) { .oz-bar #ozSync span { display: none; } }
@media (max-width: 900px) { .oz-leg { max-width: 220px; font-size: 11px; } }
/* v1.71: CTO × CEO, avisos e diagnóstico do OZmap */
.pp-warn { color: #fbbf24; }
.oz-ceo { display: grid; place-items: center; background: none; border: 0; }
.oz-ceo i { display: block; width: var(--s, 11px); height: var(--s, 11px); background: var(--c, #a855f7); transform: rotate(45deg); border: 1.5px solid #0b1220; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.35); }
.oz-ceo.ni i { opacity: .65; border: 1.5px dashed #f59e0b; }
.oz-lg i.dia { background: #a855f7; border-radius: 1px; transform: rotate(45deg); width: 9px; height: 9px; }
.oz-tyl { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 14px; margin: 8px 0; }
.oz-tyl span { display: flex; flex-direction: column; }
.oz-dg { align-self: flex-start; margin-top: 4px; }
.oz-diag { max-height: 60vh; overflow: auto; background: #0b1220; color: #cbd5e1; padding: 12px; border-radius: 8px; font-size: 12px; white-space: pre; }
.oz-nr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 8px; }
.oz-pv { margin: 10px 0 4px; padding: 10px 12px; border-radius: 10px; background: rgba(34,211,238,.06); border: 1px solid rgba(34,211,238,.25); display: grid; gap: 4px; }
.oz-pv code { font-size: 11px; padding: 1px 5px; border-radius: 5px; background: rgba(148,163,184,.15); margin-right: 2px; }
.oz-sub { margin: 14px 0 4px; font-size: 13px; }
@media (max-width: 900px) { .oz-nr { grid-template-columns: 1fr; } }
/* v1.73: Mapa da rede no Painel TV (só visualização) */
.tv-oz { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.tv-oz[hidden] { display: none !important; }
.oz.oz-tv { height: auto !important; flex: 1; min-height: 0; gap: 1vh; }
.oz-tv, .oz-tv * { text-transform: none; letter-spacing: normal; }
.oz-tv .oz-bar { gap: .6vw; }
.oz-tv .oz-ly { font-size: max(13px, 1.45vh); padding: .55vh .9vw; }
.oz-tv .oz-proj select, .oz-tv .oz-srch input { font-size: max(13px, 1.5vh); }
.oz-tv .oz-side { font-size: max(13px, 1.45vh); width: max(360px, 24vw); }
.oz-tv .oz-leg { font-size: max(12px, 1.3vh); }
.oz-tv .oz-body { border-color: var(--tv-line, rgba(34,211,238,.42)); }
.tv.tvc-claro .oz-leg { background: rgba(255,255,255,.95); color: #0f172a; }
/* v1.74: animação do tráfego em azul (não branca) e um contorno escuro nas faixas para separar as ligações paralelas */
.zt-link .flow { stroke: #3b82f6 !important; stroke-dasharray: 3 13; }
html[data-theme='light'] .zt-link .flow { stroke: #1d4ed8 !important; filter: none; }
.zt-link .ln { paint-order: stroke; }
.zt-inmap { margin-left: auto; font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(245,158,11,.15); color: #fbbf24; white-space: nowrap; }

/* v1.75: Painéis (dashboards do Grafana reproduzidos) */
.dg-top { display: flex; gap: 8px; justify-content: flex-end; margin: -4px 0 8px; }
.dg { display: flex; flex-direction: column; gap: 10px; }
.dg-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dg-bar .sp { flex: 1; }
.dg-bn { font-size: 15px; }
.dg-grid { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 8px; }
.dg-p { background: #111720; border: 1px solid rgba(34,211,238,.18); border-radius: 8px; padding: 6px 8px 4px; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; color: #d8dee9; }
.dg-p h4 { margin: 0 0 2px; font-size: 12.5px; font-weight: 600; color: #e5e7eb; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .01em; }
.dg-b { flex: 1; min-height: 0; position: relative; }
.dg-svg { display: block; }
.dg-svg .dg-gl { stroke: rgba(148,163,184,.12); stroke-width: 1; }
.dg-svg text.dg-ax { fill: #94a3b8; font-size: 10.5px; font-family: Inter, system-ui, sans-serif; }
.dg-svg .dg-hover { stroke: rgba(226,232,240,.55); stroke-width: 1; stroke-dasharray: 3 3; }
.dg-leg { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 11.5px; color: #cbd5e1; padding: 2px 4px 0; }
.dg-leg span { white-space: nowrap; } .dg-leg i { display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: 2px; }
.dg-leg small { color: #94a3b8; margin-left: 6px; } .dg-leg b { font-weight: 600; color: #e2e8f0; } .dg-leg .miss { opacity: .75; }
.dg-tip { position: fixed; z-index: 3000; pointer-events: none; background: rgba(15,23,42,.96); border: 1px solid rgba(148,163,184,.3); border-radius: 8px; padding: 6px 9px; font-size: 12px; color: #e2e8f0; min-width: 170px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.dg-tip small { color: #94a3b8; display: block; margin-bottom: 3px; } .dg-tip i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; } .dg-tip b { float: right; margin-left: 12px; }
.dg-err { color: #fca5a5; font-size: 12px; padding: 8px; }
.dg-text { padding: 0; background: none; border: 0; }
.dg-hd { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 8px 18px; border-radius: 12px; border: 1px solid rgba(0,220,255,.22); background: linear-gradient(135deg, #071426 0%, #16345f 45%, #071426 100%); box-shadow: 0 4px 18px rgba(0,0,0,.45); }
.dg-logo { height: 40px; width: auto; padding: 4px 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; }
.dg-hc { flex: 1; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dg-hc small { color: #22d3ee; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.dg-hc b { color: #fff; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; padding: 6px 18px; border-radius: 999px; border: 1px solid rgba(34,211,238,.45); background: rgba(8,20,40,.6); }
.dg-on { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #cbd5e1; border: 1px solid rgba(148,163,184,.4); }
.dg-on.on { color: #4ade80; border-color: rgba(74,222,128,.5); background: rgba(22,101,52,.25); } .dg-on i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.dg-stat { padding: 0; } .dg-stat .dg-b { display: flex; }
.dg-stat > .dg-b > .dg-stat, div.dg-stat { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; border-radius: 6px; color: #fff; }
div.dg-stat span { font-size: clamp(16px, 1.8vw, 30px); letter-spacing: .02em; } div.dg-stat b { font-size: clamp(30px, 3.6vw, 64px); font-weight: 600; }
.dg-pie { display: flex; justify-content: center; } .dg-pct { fill: #fff; font-size: 12px; font-weight: 700; paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: 3px; }
.dg-pt { width: 100%; font-size: 11.5px; border-collapse: collapse; margin-top: 4px; } .dg-pt td { padding: 2px 4px; border-top: 1px solid rgba(148,163,184,.1); white-space: nowrap; }
.dg-pt td:nth-child(2), .dg-pt td:nth-child(3) { text-align: right; } .dg-pt i { display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 6px; vertical-align: 2px; }
.dg-ml { display: flex; flex-direction: column; gap: 6px; } .dg-mi { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; } .dg-mi .sp { flex: 1; }
@media (max-width: 900px) { .dg-grid { grid-template-columns: 1fr; } .dg-p { grid-column: 1 / -1 !important; } .dg-hd { flex-wrap: wrap; } .dg-logo { display: none; } }
/* TV */
.tv-graf { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; } .tv-graf::-webkit-scrollbar { display: none; }
.tv-graf[hidden] { display: none !important; }
.dg-tv, .dg-tv * { text-transform: none; letter-spacing: normal; }
.dg-tv .dg-hc small, .dg-tv .dg-hc b, .dg-tv .dg-on { text-transform: uppercase; letter-spacing: .08em; }
.dg-tv .dg-p h4 { font-size: max(13px, 1.4vh); } .dg-tv .dg-leg { font-size: max(12px, 1.25vh); }
.tv.tvc-hc .dg-p { background: #000; border-color: rgba(103,232,249,.55); }
.dg-b svg, .dg-pie svg { width: auto; height: auto; max-width: none; }
.tv-graf { width: 100%; align-self: stretch; } .tv-graf > div, .tv-graf .dg { width: 100%; }

/* v1.76 — Painéis: variáveis, seções e tipos novos */
.dg-vars { display: contents; }
.dg-var { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.dg-var > span { padding: 0 8px; font-size: 12px; color: #94a3b8; background: rgba(148,163,184,.08); align-self: stretch; display: flex; align-items: center; white-space: nowrap; }
.dg-var select { border: 0; border-radius: 0; max-width: 260px; }
.dg-notes { margin: 6px 0 0; }
.dg-grid { margin-top: 8px; }
.dg-row { align-self: end; font-size: 14px; font-weight: 700; color: #e2e8f0; padding: 0 2px 4px; border-bottom: 1px solid rgba(34,211,238,.25); letter-spacing: .01em; }
.dg-p h4 .dg-i { font-style: normal; color: #64748b; font-size: 11px; cursor: help; }
.dg-p.dg-stat { padding: 6px 8px 6px; } .dg-p.dg-stat .dg-b { display: block; }
.dg-stats { display: grid; gap: 6px; height: 100%; grid-auto-rows: 1fr; }
.dg-st { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 6px; min-width: 0; min-height: 0; overflow: hidden; text-align: center; padding: 2px 4px; }
.dg-st.bg { color: #fff; } .dg-st.bg b { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.dg-st span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; opacity: .92; z-index: 1; }
.dg-st b { font-weight: 600; line-height: 1.1; white-space: nowrap; z-index: 1; }
.dg-st .dg-spark { position: absolute; left: 0; right: 0; bottom: 0; opacity: .9; }
.dg-none { display: flex; align-items: center; justify-content: center; height: 100%; color: #64748b; font-size: 12px; }
.dg-gauges { display: flex; height: 100%; align-items: center; justify-content: space-around; }
.dg-g { display: flex; flex-direction: column; align-items: center; min-width: 0; } .dg-g small { color: #94a3b8; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dg-gv { font-weight: 600; font-family: Inter, system-ui, sans-serif; }
.dg-bars { display: flex; flex-direction: column; gap: 3px; height: 100%; overflow-y: auto; scrollbar-width: thin; padding-right: 2px; }
.dg-br { display: grid; grid-template-columns: var(--nw) 1fr auto; align-items: center; gap: 8px; font-size: 12px; flex: none; }
.dg-br > span { color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.dg-bt { height: 100%; background: rgba(148,163,184,.1); border-radius: 3px; overflow: hidden; } .dg-bt i { display: block; height: 100%; border-radius: 3px; min-width: 2px; }
.dg-br > b { min-width: 36px; text-align: right; font-weight: 700; font-size: 13px; }
.dg-state { display: flex; flex-direction: column; gap: 2px; height: 100%; overflow-y: auto; scrollbar-width: thin; }
.dg-sr { display: grid; grid-template-columns: var(--lw) auto; align-items: stretch; gap: 8px; flex: none; }
.dg-sr > span { font-size: 12px; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; align-self: center; }
.dg-sl { position: relative; background: rgba(148,163,184,.06); border-radius: 3px; overflow: hidden; }
.dg-sg { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; overflow: hidden; white-space: nowrap; opacity: .85; border-right: 1px solid rgba(0,0,0,.25); }
.dg-sax { position: relative; height: 14px; margin-left: calc(var(--lw) + 8px); flex: none; } .dg-sax em { position: absolute; transform: translateX(-50%); font-style: normal; font-size: 10.5px; color: #94a3b8; } .dg-sax em:first-child { transform: none; } .dg-sax em:last-child { transform: translateX(-100%); }
.dg-sk { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 11.5px; color: #cbd5e1; margin-left: calc(var(--lw) + 8px); flex: none; } .dg-sk i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.dg-pl { height: 100%; overflow-y: auto; scrollbar-width: thin; font-size: 12px; }
.dg-pl table { width: 100%; border-collapse: collapse; } .dg-pl th { text-align: left; font-weight: 600; color: #94a3b8; padding: 4px 6px; border-bottom: 1px solid rgba(148,163,184,.2); position: sticky; top: 0; background: #111720; }
.dg-pl td { padding: 4px 6px; border-bottom: 1px solid rgba(148,163,184,.08); vertical-align: top; } .dg-pl td:nth-child(4), .dg-pl td:nth-child(5) { white-space: nowrap; }
.dg-sev { display: inline-block; padding: 1px 7px; border-radius: 4px; color: #111; font-weight: 700; font-size: 11px; white-space: nowrap; }
.dg-ok { display: flex; align-items: center; justify-content: center; height: 100%; color: #4ade80; font-weight: 600; font-size: 13px; }
.dg-hc2 b { text-transform: none; font-size: 20px; border: 0; background: none; padding: 0; letter-spacing: .03em; } .dg-hc2 small { color: #9ad3d1; }
.dg-logo-sp { width: 1px; }
.dg-leg { overflow-y: auto; scrollbar-width: thin; }
.dg-tv .dg-row { font-size: max(15px, 1.6vh); }
@media (max-width: 900px) { .dg-row, .dg-p { grid-row: auto !important; } .dg-p { min-height: calc(var(--h, 8) * 30px); } .dg-var select { max-width: 160px; } }

/* v1.77 — TV: menu lateral compacto com separadores, números menores, barra inferior e OS de estrutura */
.tv-rail { width: clamp(118px, 8.6vw, 200px); gap: .9vh; padding: 1.2vh .5vw; }
.tv-nav { gap: 0; }
.tv-nav button { position: relative; gap: .6vw; padding: .85vh .55vw; border-radius: .8vh; font: 600 clamp(10.5px, .74vw, 16px)/1.2 inherit; white-space: nowrap; letter-spacing: .01em; color: #9aa6b8; }
.tv-nav button > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tv-nav button svg { width: 1.2em; height: 1.2em; opacity: .85; }
.tv-nav button + button { margin-top: 1px; }
.tv-nav button:not(.on)::after { content: ''; position: absolute; left: .55vw; right: .55vw; bottom: -1px; height: 1px; background: linear-gradient(90deg, rgba(34,211,238,.16), rgba(34,211,238,.04)); }
.tv-nav button.on { background: linear-gradient(90deg, rgba(37,99,235,.55), rgba(37,99,235,.18)); box-shadow: inset 3px 0 0 #38bdf8; color: #fff; }
.tv-nav button.on svg { opacity: 1; color: #7dd3fc; }
.tv-sep { border: 0; height: 1px; margin: .9vh .3vw; background: rgba(56,189,248,.35); }
.tv-kpis { gap: .6vw; }
.tv-kpis > .tk { flex-direction: row; align-items: center; gap: .7vw; padding: .7vh .9vw; border-top-width: .35vh; border-radius: 1vh; min-height: 0; } /* só os números de Demandas (.tk também é o Tráfego CDN) */
.tv-kpis > .tk b { font-size: 3.4vh; min-width: 1.4ch; }
.tv-kpis > .tk span { font-size: 1.2vh; line-height: 1.2; margin: 0; letter-spacing: .05em; }
.tv-ctrl { gap: 6px; padding: 6px 8px; border-radius: 999px; background: rgba(8,12,18,.86); border-color: rgba(56,189,248,.28); backdrop-filter: blur(8px); box-shadow: 0 8px 28px rgba(0,0,0,.45); }
.tv-ctrl .btn, .tv-ctrl select.input { height: 28px; padding: 0 10px; font-size: 12px; border-radius: 999px; background: rgba(21,26,34,.9); }
.tv-ctrl .btn svg { width: 14px; height: 14px; }
.tv-ctrl #tvUpd { padding: 0 6px; font-size: 11px; }
.tve.is-tv .tve-hd { flex-direction: column; align-items: stretch; gap: 1.2vh; padding: 1.4vh 1.2vw; }
.tve.is-tv .tve-ti { justify-content: center; text-align: center; }
.tve.is-tv .tve-ti > div { display: flex; flex-direction: column; align-items: center; }
.tve.is-tv .tve-ic { font-size: 2.1em; }
.tve.is-tv .tve-ti b { font-size: 1.7em; }
.tve.is-tv .tve-ti small { font-size: .85em; opacity: .85; }
.tve.is-tv .tve-ks { margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7vw; }
.tve.is-tv .tve-k { min-width: 0; align-items: center; text-align: center; padding: .7vh .6vw; }
.tve.is-tv .tve-k b { font-size: 2em; }
.dg-ord { display: inline-flex; gap: 2px; }
.tv-rail { width: clamp(142px, 9vw, 210px); }
.tv-nav button { font-size: clamp(11px, .72vw, 16px); }
.tv-kpis > .tk span { font-size: max(10px, 1.25vh); }
.tv-kpis > .tk { padding: 1vh .9vw; }
.tv-ctrl [hidden] { display: none !important; }
.tv-ctrl:not([data-v="rank"]) :is(#tvRk, #tvRkt, #tvRkf, #tvRkr) { display: none !important; }

/* v1.78 — dashboards prontos: equipamentos e links */
.dg-hosts { display: grid; gap: 6px; height: 100%; overflow-y: auto; scrollbar-width: thin; align-content: start; }
.dg-h { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 8px; background: rgba(15,23,42,.7); border: 1px solid rgba(148,163,184,.14); border-left: 4px solid var(--c); min-width: 0; }
.dg-h i { width: 11px; height: 11px; border-radius: 50%; background: var(--c); box-shadow: 0 0 8px var(--c); flex: none; }
.dg-h div { min-width: 0; display: flex; flex-direction: column; }
.dg-h b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-h span { font-size: 11.5px; color: var(--c); font-weight: 700; } .dg-h span em { font-style: normal; font-weight: 600; }
.dg-h.fora { background: linear-gradient(90deg, rgba(239,68,68,.22), rgba(15,23,42,.7)); }
.dg-links { display: grid; gap: 8px; height: 100%; overflow-y: auto; scrollbar-width: thin; align-content: start; }
.dg-lk { display: flex; flex-direction: column; gap: 5px; padding: 9px 11px; border-radius: 10px; background: rgba(15,23,42,.75); border: 1px solid rgba(148,163,184,.16); min-width: 0; }
.dg-lk.down { border-color: rgba(239,68,68,.7); background: linear-gradient(180deg, rgba(239,68,68,.18), rgba(15,23,42,.75)); }
.dg-lt { display: flex; align-items: center; gap: 8px; } .dg-lt b { flex: 1; min-width: 0; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dg-lt b small { color: #94a3b8; font-size: 11px; font-weight: 600; }
.dg-ls { padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; letter-spacing: .04em; flex: none; }
.dg-lsub { font-size: 11.5px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-lv { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; } .dg-lv div { display: flex; flex-direction: column; min-width: 0; } .dg-lv small { font-size: 10.5px; color: #94a3b8; } .dg-lv b { font-size: 14px; white-space: nowrap; }
.dg-lbar { position: relative; height: 16px; border-radius: 6px; background: rgba(148,163,184,.12); overflow: hidden; } .dg-lbar i { position: absolute; inset: 0 auto 0 0; border-radius: 6px; opacity: .85; } .dg-lbar em { position: relative; display: block; text-align: center; font-style: normal; font-size: 11px; font-weight: 700; line-height: 16px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.dg-tv .dg-lt b { font-size: max(15px, 1.7vh); } .dg-tv .dg-lv b { font-size: max(14px, 1.55vh); } .dg-tv .dg-h b { font-size: max(13px, 1.45vh); }

/* v1.79 — equipamentos sem corte (altura fixa, o quadro cresce) e resumo para leigo */
.dg-hosts { height: auto; overflow: visible; grid-auto-rows: 50px; }
.dg-h { padding: 6px 10px; }
.dg-h b { font-size: 13px; line-height: 1.25; }
.dg-h span { font-size: 11.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-h.manut { opacity: .85; }
.dg-links { height: auto; overflow: visible; }
.dg-p.dg-summary { padding: 6px; background: transparent; border-color: transparent; }
.dg-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; height: 100%; }
.dg-sm { display: flex; flex-direction: column; justify-content: center; padding: 8px 16px; border-radius: 12px; border: 1px solid rgba(148,163,184,.18); background: rgba(15,23,42,.8); border-left: 6px solid var(--c, #22c55e); min-width: 0; }
.dg-sm.ok { --c: #22c55e; } .dg-sm.warn { --c: #f59e0b; } .dg-sm.bad { --c: #ef4444; background: linear-gradient(90deg, rgba(239,68,68,.22), rgba(15,23,42,.8)); }
.dg-sm b { font-size: clamp(18px, 1.9vw, 34px); color: var(--c); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dg-sm span { font-size: 13px; color: #cbd5e1; } .dg-sm small { font-size: 11.5px; color: #94a3b8; }
@media (max-width: 900px) { .dg-sum { grid-template-columns: 1fr 1fr; } }
.tv-rail select[hidden] { display: none !important; }
/* v1.81 — Google Maps: consumo */
.gm-use { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gm-use div { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.gm-use small { color: var(--muted, #94a3b8); font-size: 11.5px; } .gm-use b { font-size: 22px; } .gm-use span { font-size: 11.5px; color: var(--muted, #94a3b8); }