/* Componentes comuns (js/ui/*): ícones, formulário padrão, tabela padrão, gráficos e o menu da Central.
   Tokens próprios nos dois temas; o resto vem de css/workspace.css (--surface, --text, --border...). */
:root {
  --ui-accent: #3b82f6; --ui-accent-strong: #2f6feb; --ui-accent-ring: #4c8dff40;
  --ui-danger: #f58a8a; --ui-danger-bg: #1a0f14; --ui-danger-border: #5a2a30;
  --chart-1: #3b82f6; --chart-2: #0d9488; --chart-3: #d97706; --chart-4: #a855f7;
  --chart-good: #34c38f; --chart-warning: #f2c14e; --chart-critical: #f06a6a; --chart-neutral: #64748b;
  --chart-track: #1a2740; --chart-grid: #1c2940;
  --side-bg: #0b1220; --side-border: #16223a; --side-text: #9aa7bd; --side-strong: #e7edf7;
  --side-hover: #121c2e; --side-active: #16233a; --side-active-ring: #24375a; --side-muted: #7d8aa1;
}
body.theme-light {
  --ui-accent: #2563eb; --ui-accent-strong: #1d4ed8; --ui-accent-ring: #2563eb33;
  --ui-danger: #b42318; --ui-danger-bg: #fef3f2; --ui-danger-border: #f3b8b3;
  --chart-1: #2563eb; --chart-2: #0d9488; --chart-3: #d97706; --chart-4: #9333ea;
  --chart-good: #137957; --chart-warning: #9b6500; --chart-critical: #bc303a; --chart-neutral: #64748b;
  --chart-track: #e5eaf0; --chart-grid: #e0e6ec;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- ícones ---------- */
.icon { display: inline-block; width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.btn:has(> .icon) { display: inline-flex; align-items: center; justify-content: center; }
.btn .icon { width: 16px; height: 16px; margin-right: 6px; }
.btn .icon:last-child:not(:first-child) { margin: 0 0 0 6px; }
.ui-icon-btn { display: inline-grid; place-items: center; min-width: 40px; min-height: 40px; border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; }
.ui-icon-btn:hover { color: var(--text); background: var(--surface-2); }
.ui-icon-btn .icon { margin: 0; width: 20px; height: 20px; }

/* ---------- formulário padrão ---------- */
.modal.ui-form { max-width: 960px; padding: 0; display: flex; flex-direction: column; overflow: hidden; max-height: min(90vh, 900px); }
.ui-form-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 12px; }
.ui-form-head h2 { margin: 0; font-size: 1.15rem; letter-spacing: -.01em; overflow-wrap: anywhere; }
.ui-form-subtitle { margin: 4px 0 0; color: var(--muted); font-size: .85rem; }
.ui-form-form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.ui-tabs { display: flex; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--border); overflow-x: auto; flex-shrink: 0; }
.ui-tab { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font: inherit; font-size: .88rem; font-weight: 600; padding: 10px 12px; white-space: nowrap; cursor: pointer; }
.ui-tab:hover { color: var(--text); }
.ui-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--ui-accent); }
.ui-tab > .icon { width: 16px; height: 16px; margin-right: 6px; }
.ui-form-body { padding: 20px 24px; overflow-y: auto; flex: 1; min-height: 0; }
.ui-form-body .field input, .ui-form-body .field select, .ui-form-body .field textarea { width: 100%; box-sizing: border-box; }
.ui-form-body .field-row { flex-wrap: wrap; }
.ui-form-body .field-row .field { min-width: min(220px, 100%); }
.ui-field-error { margin: 6px 0 0; color: var(--ui-danger); font-size: .8rem; font-weight: 600; }
[aria-invalid="true"] { border-color: var(--ui-danger) !important; }
.ui-danger { margin-top: 24px; border: 1px solid var(--ui-danger-border); border-radius: 14px; padding: 16px; background: var(--ui-danger-bg); }
.ui-danger h3 { margin: 0 0 4px; font-size: .9rem; color: var(--ui-danger); }
.ui-danger-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ui-danger-border); }
.ui-form-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--border); background: var(--surface-2); flex-shrink: 0; }
.ui-form-status { margin: 0; color: var(--ui-danger); font-size: .85rem; flex: 1 1 200px; }
.ui-form-actions { display: flex; gap: 10px; margin-left: auto; }

/* ---------- select com busca ---------- */
.ui-combo { position: relative; }
.ui-combo > label { display: block; font-size: .8rem; color: var(--text-2); margin-bottom: .35rem; font-weight: 500; }
.ui-combo-control { position: relative; }
.ui-combo-input { width: 100%; box-sizing: border-box; padding-right: 36px !important; }
.ui-combo-chevron { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: flex; }
.ui-combo-list { position: absolute; z-index: 5; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none; max-height: 240px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow); }
.ui-combo-option { padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: .88rem; }
.ui-combo-option.active, .ui-combo-option:hover { background: var(--surface-2); }
.ui-combo-option[aria-selected="true"] { font-weight: 650; color: var(--ui-accent); }
.ui-combo-empty { margin: 4px 0 0; color: var(--muted); font-size: .85rem; }

/* ---------- tabela padrão ---------- */
.ui-table { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ui-table-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.ui-search { flex: 1 1 280px; display: flex; align-items: center; gap: 10px; padding: 0 14px; min-height: 44px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); min-width: 0; }
.ui-search:focus-within { border-color: var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-ring); }
.ui-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text); font: inherit; font-size: .9rem; }
.ui-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.ui-chip { font: inherit; font-size: .83rem; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; }
.ui-chip[aria-pressed="true"] { background: var(--surface-2); color: var(--text); border-color: var(--ui-accent); font-weight: 600; }
.ui-table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; }
.ui-table-grid { width: 100%; border-collapse: collapse; font-size: .85rem; }
.ui-table-grid th { text-align: left; color: var(--muted); font-weight: 600; font-size: .78rem; padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.ui-table-grid td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
.ui-table-grid tbody tr:last-child td { border-bottom: 0; }
.ui-sort { display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: inherit; font: inherit; cursor: pointer; }
.ui-sort .icon { width: 14px; height: 14px; opacity: .7; }
.ui-row-clickable { cursor: pointer; }
.ui-row-clickable:hover td { background: var(--surface-2); }
.ui-row-open { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.ui-table-message td { text-align: center; color: var(--muted); padding: 28px 14px; }
.ui-table-error { color: var(--ui-danger) !important; }
.ui-table-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: .85rem; }
.ui-pager { display: flex; gap: 6px; }
.ui-pager .btn .icon { margin: 0 4px; }

/* ---------- Acesso: usuários e grupos ---------- */
.ui-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.ui-badges .pill, .ui-table-grid .pill { white-space: nowrap; }
.ui-switch-row { flex-direction: row !important; align-items: center !important; justify-content: space-between; gap: 16px !important; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ui-notice { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); font-size: .88rem; }
.ui-notice.is-critical { border-color: var(--critical); color: var(--critical); }
.ui-notice .icon { flex-shrink: 0; margin-top: 2px; }
#deteccao-ia-aviso { margin-top: 12px; }
.ui-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .88rem; }
.ui-history li { padding: 8px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }

/* ---------- gráficos ---------- */
.ui-chart { margin: 0; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.ui-chart > svg { width: 100%; height: auto; overflow: visible; }
.ui-chart > svg.ui-donut { width: 160px; flex-shrink: 0; }
.ui-chart > svg.ui-gauge { max-width: 240px; margin: 0 auto; }
.ui-mark { fill: var(--c); }
.ui-chart-axis, .ui-chart-grid { stroke: var(--chart-grid); stroke-width: 1; }
.ui-chart-value { fill: var(--text-2); font-size: 10px; font-weight: 600; }
.ui-chart-label { fill: var(--muted); font-size: 10px; }
.ui-ring-track, .ui-gauge-track { fill: none; stroke: var(--chart-track); }
.ui-ring-track, .ui-ring { stroke-width: 5; }
.ui-ring { fill: none; stroke: var(--c); }
.ui-donut-total { fill: var(--text); font-size: 7px; font-weight: 700; }
.ui-donut-caption { fill: var(--muted); font-size: 3px; }
.ui-area { fill: var(--chart-1); fill-opacity: .16; stroke: none; }
.ui-line { fill: none; stroke: var(--chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ui-dot { fill: var(--chart-1); stroke: var(--surface); stroke-width: 2; }
.ui-dot-hit { fill: transparent; }
.ui-gauge-track, .ui-gauge-value { fill: none; stroke-width: 10; }
.ui-gauge-value { stroke: var(--c); }
.ui-gauge-percent { fill: var(--text); font-size: 14px; font-weight: 700; }
.ui-chart-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .85rem; color: var(--text); }
.ui-chart-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--c); margin-right: 8px; }
.ui-chart-axis-labels, .ui-chart-caption { width: 100%; display: flex; justify-content: space-between; color: var(--muted); font-size: .8rem; }
.ui-chart-caption { justify-content: center; }
.ui-chart-legend-row { flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
.ui-spark-wrap { display: block; }
.ui-chart > svg.ui-spark { display: block; width: 100%; height: 28px; }
.ui-meter { display: grid; grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr) minmax(3.2rem, auto); align-items: center; gap: 10px; font-size: .85rem; }
.ui-meter-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.ui-meter-track { display: block; height: 8px; border-radius: 99px; background: var(--chart-track); overflow: hidden; }
.ui-meter-track > span { display: block; height: 100%; border-radius: 99px; background: var(--c); }
.ui-meter-value { font-variant-numeric: tabular-nums; text-align: right; font-weight: 600; }

/* ---------- Central › Clientes (#313) ---------- */
.cli-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cli-head p { margin: 0; }
.cli-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cli-sub, .cli-hint { color: var(--muted); font-size: .8rem; font-weight: 400; }
.cli-hint { display: block; margin-top: 4px; }
.cli-ixc { display: inline-block; font-size: .7rem; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--surface-3); color: var(--text); border: 1px solid var(--border-strong); }
.cli-req { color: var(--ui-danger); }
/* Selo e asterisco ficam na linha do rótulo (.field span é bloco). */
.field span.cli-req { display: inline; }
.field span.cli-ixc { display: inline-block; margin: 0 0 0 4px; }
.ui-form .field input[readonly], .ui-form .field textarea[readonly] { color: var(--text-2); border-style: dashed; }
.cli-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.cli-status .icon { width: 16px; height: 16px; }
.cli-status.good { color: var(--chart-good); } .cli-status.warning { color: var(--chart-warning); } .cli-status.critical { color: var(--chart-critical); } .cli-status.neutral { color: var(--muted); }
.cli-usage { display: flex; flex-direction: column; gap: 4px; white-space: nowrap; }
.cli-bar { display: block; width: 96px; height: 6px; border-radius: 99px; background: var(--chart-track); overflow: hidden; }
.cli-bar > span { display: block; height: 100%; border-radius: 99px; background: var(--chart-1); }
.cli-bar.warning > span { background: var(--chart-warning); } .cli-bar.critical > span { background: var(--chart-critical); }
.cli-cat { border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.cli-cat h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .95rem; }
.cli-sub-title { margin: 12px 0 8px; font-size: .85rem; color: var(--text-2); }
/* 20/10/2026: recursos pagos marcáveis; produto marcado mostra os próprios campos. */
.cli-check { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); cursor: pointer; }
.cli-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--brand); }
.cli-check span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cli-produto-campos { padding: 0 0 8px 30px; }
.cli-produto-campos[hidden] { display: none; }
/* Campo com botão de consulta ao lado (CEP, CNPJ); no celular o botão desce. */
.cli-inline { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; flex: 1 1 260px; min-width: 0; }
.cli-inline > .field { flex: 1 1 200px; min-width: 0; margin-bottom: 0; }
.cli-inline > .btn { margin-top: 26px; }
@media (max-width: 600px) { .cli-inline > .btn { margin-top: 0; } }
.cli-cidade { flex: 1 1 200px; min-width: 0; }
.cli-servidor { padding: 4px 10px; }
.cli-group { border: 1px solid var(--border); border-radius: 12px; padding: 8px 16px 12px; margin: 12px 0 0; min-width: 0; }
.cli-group legend { font-weight: 600; font-size: .85rem; padding: 0 6px; }
.cli-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 24px; margin: 0 0 16px; }
.cli-facts dt { color: var(--muted); font-size: .8rem; margin-bottom: 2px; }
.cli-facts dd { margin: 0; overflow-wrap: anywhere; }
/* #342: situação longa (último teste, fila) quebra a linha dentro do quadro de fatos, inclusive no celular. */
.cli-facts dd .cli-status { white-space: normal; align-items: flex-start; }
.cli-facts dd .cli-status .icon { flex: none; margin-top: 2px; }
.cli-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* #322: câmeras sem cliente só em número, com o caminho para vincular. */
.cli-sem-cliente { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 12px 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--muted); font-size: .9rem; }
.cli-sem-cliente > span { flex: 1 1 220px; }
.cli-sem-cliente[hidden] { display: none; }
.cli-confirm { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 0 0 12px; }
.cli-confirm .field { flex: 1 1 220px; margin: 0; }

/* ---------- menu e topo da Central e do Agente (barra lateral escura nos dois temas; #321) ---------- */
:is(#platform-admin-screen, #app-shell) > .sidebar { background: var(--side-bg); border-right-color: var(--side-border); color: var(--side-strong); }
:is(#platform-admin-screen, #app-shell, #client-area-screen, #tecnico-screen) .brand-mark { width: 32px; height: 32px; flex-shrink: 0; }
:is(#platform-admin-screen, #app-shell) .brand-name { color: var(--side-strong); font-size: 15px; letter-spacing: 0; }
:is(#platform-admin-screen, #app-shell) .brand-name small { color: var(--side-muted); font-size: 12px; letter-spacing: 0; text-transform: none; margin-top: 2px; font-weight: 500; }
:is(#platform-nav, #main-nav) .nav-item, :is(#platform-nav, #main-nav) .nav-group-toggle { color: var(--side-text); font-size: 14px; border-radius: 10px; }
:is(#platform-nav, #main-nav) .nav-item svg, :is(#platform-nav, #main-nav) .nav-group-toggle svg { color: inherit; }
:is(#platform-nav, #main-nav) .nav-item:hover, :is(#platform-nav, #main-nav) .nav-group-toggle:hover { background: var(--side-hover); color: var(--side-strong); }
:is(#platform-nav, #main-nav) .nav-item.active { background: var(--side-active); color: var(--side-strong); border-color: var(--side-active-ring); }
:is(#platform-nav, #main-nav) .nav-item.active::before { display: none; }
:is(#platform-nav, #main-nav) .nav-group-toggle { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 40px; padding: 10px 12px; background: none; border: 1px solid transparent; font: inherit; font-weight: 500; cursor: pointer; text-align: left; }
:is(#platform-nav, #main-nav) .nav-group-toggle .nav-chevron { margin-left: auto; transition: transform .15s; }
:is(#platform-nav, #main-nav) .nav-group-toggle[aria-expanded="false"] .nav-chevron { transform: rotate(-90deg); }
:is(#platform-nav, #main-nav) .nav-sub { display: flex; flex-direction: column; gap: 2px; }
:is(#platform-nav, #main-nav) .nav-sub .nav-item { padding-left: 24px; font-size: 13px; }
/* #354: o grupo Rastreador fechado mostra a soma dos alarmes pendentes; aberto, cada item mostra os seus. */
#main-nav .nav-group-toggle .badge { margin-left: auto; }
#main-nav .nav-group-toggle[aria-expanded="true"] .badge { display: none; }
#main-nav .nav-group-toggle[aria-expanded="false"] .badge:not([hidden]) + .nav-chevron { margin-left: 0; }
:is(#platform-admin-screen, #app-shell) .sidebar-footer { color: var(--side-muted); border-top-color: var(--side-border); }
[data-workspace-theme] .icon { margin: 0; }
body.theme-light .theme-icon-dark, body:not(.theme-light) .theme-icon-light { display: none; }
:is(#platform-admin-screen, #app-shell) .user-menu .btn { display: inline-flex; align-items: center; }
.placeholder-card { text-align: center; padding: 40px 20px; color: var(--muted); }
.placeholder-card .icon { width: 32px; height: 32px; margin-bottom: 8px; }

@media (max-width: 720px) {
  :is(#platform-admin-screen, #app-shell) > .sidebar { flex-wrap: wrap; gap: 8px; }
  :is(#platform-admin-screen, #app-shell) > .sidebar .brand { display: none; }
  :is(#platform-nav, #main-nav) { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
  :is(#platform-nav, #main-nav) .nav-item span:last-child { display: inline; }
  :is(#platform-nav, #main-nav) .nav-item, :is(#platform-nav, #main-nav) .nav-sub .nav-item { width: auto; white-space: nowrap; padding: 8px 12px; }
  :is(#platform-nav, #main-nav) .nav-group-toggle { display: none; }
  :is(#platform-nav, #main-nav) .nav-group, :is(#platform-nav, #main-nav) .nav-sub, :is(#platform-nav, #main-nav) .nav-sub[hidden] { display: contents; }
  :is(#platform-admin-screen, #app-shell) .topbar { height: auto; flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  :is(#platform-admin-screen, #app-shell) .topbar-actions, :is(#platform-admin-screen, #app-shell) .user-menu { flex-wrap: wrap; min-width: 0; }
  :is(#platform-admin-screen, #app-shell) .user-menu { border-left: 0; padding-left: 0; }
  :is(#platform-admin-screen, #app-shell) .user-info { min-width: 0; overflow-wrap: anywhere; }
  .ui-form-head, .ui-form-body, .ui-form-foot { padding-left: 16px; padding-right: 16px; }
  .modal.ui-form { max-height: 94vh; }
}

/* ---------- Servidores da Central (js/central/servidores.ts) ---------- */
.srv-status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.srv-status.srv-ok { color: var(--chart-good); }
.srv-status.srv-warn { color: var(--chart-warning); }
.srv-status.srv-crit { color: var(--chart-critical); }
.srv-status.srv-off { color: var(--muted); }
.srv-meter { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.srv-track { width: 56px; height: 6px; border-radius: 99px; background: var(--chart-track); overflow: hidden; flex-shrink: 0; }
.srv-fill { display: block; height: 100%; border-radius: 99px; background: var(--chart-1); }
.srv-meter.srv-warn .srv-fill { background: var(--chart-warning); }
.srv-meter.srv-crit .srv-fill { background: var(--chart-critical); }
.srv-meter.srv-warn .srv-pct, .srv-meter.srv-crit .srv-pct { font-weight: 700; }
#platform-servers-table .ui-table-grid td { white-space: nowrap; }
.srv-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.srv-panel > p { margin: 0; }
/* #31: Saúde e política (avisos, cartões de resumo e barras) e Histórico (tabela) ocupam a largura toda. */
.srv-saude > *, .srv-historico > * { width: 100%; }
.srv-saude > .btn { width: auto; }
.srv-avisos:empty { display: none; }
.srv-avisos .ui-notice { margin: 0 0 8px; }
.srv-saude .vg-stats { margin: 0; }
.srv-saude .stat-value { font-size: 1.15rem; overflow-wrap: anywhere; }
.srv-subtitulo { margin: 8px 0 0; font-size: .88rem; color: var(--text-2); }
.srv-saude .vg-medidores .ui-meter { grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto; }
@media (max-width: 520px) { .srv-saude .vg-medidores .ui-meter { grid-template-columns: minmax(0, 1fr) auto; } .srv-saude .vg-medidores .ui-meter-track { grid-column: 1 / -1; grid-row: 2; } }
.srv-steps, .srv-history { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; }
/* #279: empresas sincronizadas e histórico da integração (tabela padrão, pills de contagem, detalhe da execução). */
.int-tab { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.int-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.int-pills:empty { display: none; }
.pill.int-pill-ok { color: var(--chart-good); border-color: color-mix(in srgb, var(--chart-good) 45%, transparent); }
.pill.int-pill-warn { color: var(--chart-warning); border-color: color-mix(in srgb, var(--chart-warning) 45%, transparent); }
.int-nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
.int-situacao { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Tabelas dentro do formulário da integração: colunas mais justas para caber em 960 px sem rolar. */
.int-tab .ui-table-grid th, .int-tab .ui-table-grid td { padding-left: 10px; padding-right: 10px; }
.int-situacao .cli-status { white-space: normal; }
.int-contratos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.int-contratos li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.int-ligar { max-width: 520px; margin-bottom: 10px; }
.int-local { margin-top: 16px; padding-top: 4px; border-top: 1px solid var(--border); }
.int-periodo { max-width: 260px; margin: 0; }
.int-run { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface-2); }
.int-run[hidden] { display: none; }
.int-run-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.int-run-head h3 { margin: 0; font-size: 1rem; flex: 1 1 auto; }
.int-run-msg { margin: 0; overflow-wrap: anywhere; }
/* Seções do formulário da integração (20/10/2026): cada bloco com título e um respiro do anterior. */
.int-secao { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.int-secao h3, .int-vinculo h3, .int-confirmar h3 { margin: 0 0 6px; font-size: .95rem; }
.int-secao .toggle-field-block { margin-bottom: 12px; }
.int-texto { margin: 0 0 14px; line-height: 1.55; font-size: .92rem; }
/* #328: vínculo com o IXC (planos, produtos e contratos marcados). */
.int-vinculo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.int-vinculo > p { margin: 0; }
.int-vinculo-resumo { font-weight: 600; }
.int-vinculo-leitura { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.int-vinculo-leitura p { margin: 0; }
.int-vinculo-abas { padding: 0; }
.int-vinculo-painel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.int-vinculo-painel[hidden] { display: none; }
.int-vinculo-busca { flex: 0 1 auto; max-width: 520px; }
.int-vinculo-lista { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; }
.int-vinculo-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 10px 12px; border-top: 1px solid var(--border); }
.int-vinculo-item:first-child, .int-vinculo-vazio:first-child { border-top: 0; }
.int-vinculo-item.marcado { background: color-mix(in srgb, var(--ui-accent) 8%, transparent); }
.int-vinculo-vazio { padding: 12px; }
.int-vinculo-marca { display: flex; align-items: flex-start; gap: 10px; min-width: 0; flex: 1 1 260px; cursor: pointer; }
.int-vinculo-marca input { margin-top: 3px; flex: none; }
.int-vinculo-nome { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.int-vinculo-nome .muted { font-size: .85em; }
.int-vinculo-recurso { flex: 0 1 220px; min-width: 0; max-width: 100%; min-height: 36px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: .86rem; }
.int-vinculo-buscar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.int-vinculo-buscar .field { flex: 0 1 260px; margin: 0; min-width: 0; }
.int-vinculo-achado { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 1.2em; overflow-wrap: anywhere; }
.int-vinculo-criar { margin-top: 6px; }
.int-vinculo-criar p { margin: 6px 0 0; }
.int-vinculo-novo { margin: 0; }
/* Pedido de senha da inadimplência: só aparece quando o Salvar encontra a regra alterada. */
.int-confirmar { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--ui-accent); border-radius: 12px; background: color-mix(in srgb, var(--ui-accent) 7%, transparent); }
.int-confirmar[hidden] { display: none; }
.int-confirmar > p { margin: 0 0 12px; }
.int-confirmar .field:last-child { margin-bottom: 0; }
.srv-step { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: start; font-size: .88rem; }
.srv-step.srv-ok > .icon { color: var(--chart-good); }
.srv-step.srv-warn > .icon { color: var(--chart-warning); }
.srv-step-state { font-weight: 600; }
.srv-step-detail { grid-column: 2 / -1; overflow-wrap: anywhere; }

/* ---------- Auditoria da Central (js/central/auditoria.ts) ---------- */
.aud-tools { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.aud-tools .ui-search { flex: 0 0 auto; }
.aud-period { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.aud-period .field { margin: 0; min-width: 0; }
.aud-period .field input[type=date] { min-height: 44px; box-sizing: border-box; }
.aud-period .ui-combo { min-width: 220px; }
.aud-more { display: flex; justify-content: center; margin-top: 12px; }
.aud-detail { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.aud-item { display: grid; grid-template-columns: 9rem 1fr; gap: 4px 12px; }
.aud-item dt { color: var(--muted); font-size: .82rem; }
.aud-item dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 720px) {
  .aud-period > .field, .aud-period > div { flex: 1 1 100%; }
  .aud-item { grid-template-columns: 1fr; }
}

/* ---------- Central › Configurações Gerais (#318) e segundo fator ---------- */
.cfg { display: flex; flex-direction: column; gap: 16px; min-width: 0; margin-bottom: 16px; }
/* No diálogo o status divide a linha com os botões (base 200px); aqui, em coluna, a base virava 200px de altura vazia. */
.cfg > .ui-form-status { flex: none; }
.cfg .card { margin: 0; }
.cfg-abas { padding: 0; }
.cfg-estado { margin: 0 0 12px; }
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 4px 16px; }
.cfg-grid .field { min-width: 0; margin-bottom: 8px; }
.cfg .field input, .cfg .field select { width: 100%; box-sizing: border-box; min-height: 44px; }
.cfg-group { border: 1px solid var(--border); border-radius: 12px; padding: 8px 16px 12px; margin: 0 0 12px; min-width: 0; }
.cfg-group legend { font-weight: 600; font-size: .85rem; padding: 0 6px; }
.cfg-option { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; cursor: pointer; }
.cfg-option input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; }
.cfg-option input:disabled + span { opacity: .7; cursor: not-allowed; }
.cfg-option small { display: block; }
.cfg-senha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cfg-senha input { flex: 1 1 200px; }
.cfg-state { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--chart-good); }
.cfg-state .icon { width: 16px; height: 16px; }
.cfg-teste { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px; }
.cfg-teste h4 { margin: 0 0 8px; font-size: .9rem; }
.cfg-teste-linha { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.cfg-teste-linha .field { flex: 1 1 260px; margin: 0; }
.cfg-resultado { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-weight: 600; min-height: 1.4em; }
.cfg-resultado .icon { width: 18px; height: 18px; flex-shrink: 0; }
.cfg-resultado.good { color: var(--chart-good); }
.cfg-resultado.critical { color: var(--chart-critical); }
.cfg-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cfg-barra .muted { flex: 1 1 220px; }
.mfa-metodos { border: 1px solid var(--border); border-radius: 12px; padding: 8px 16px 12px; margin: 0 0 12px; min-width: 0; }
.mfa-metodos legend { font-weight: 600; font-size: .85rem; padding: 0 6px; }
.mfa-qr { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin: 8px 0 12px; }
.mfa-qr-img { width: 200px; max-width: 100%; flex-shrink: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); background: #fff; }
.mfa-qr-img svg { display: block; width: 100%; height: auto; }
.mfa-qr-img:not(:empty):not(:has(svg)) { padding: 12px; color: #1f2937; font-size: 13px; line-height: 1.4; }
.mfa-qr-texto { flex: 1 1 220px; min-width: 0; }
@media (max-width: 720px) {
  .cfg-barra .ui-form-actions { width: 100%; }
  .cfg-barra .ui-form-actions .btn { flex: 1; }
}
.login-code-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: -4px 0 12px; }
.login-code-notice { margin: 0; font-size: .8rem; color: var(--text-2); flex: 1 1 200px; }
.cfg .field > label { display: block; font-size: .8rem; color: var(--text-2); margin-bottom: .35rem; font-weight: 500; }

/* ---------- Central › Visão geral (#319) ---------- */
.vg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
/* Oito cartões: 4 colunas (duas linhas cheias), 2 em telas estreitas. */
.vg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.3rem; }
@media (max-width: 900px) { .vg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* dense: um cartão de meia largura sobe para a linha com vaga, e os da mesma linha ficam com a mesma altura. */
.vg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); grid-auto-flow: row dense; gap: 0 1.2rem; }
.vg-evolucao { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px 32px; }
.vg-evolucao > .vg-nota, .vg-evolucao > .vg-empty { grid-column: 1 / -1; }
.vg-grid > .card { min-width: 0; }
.vg-grid > .vg-wide { grid-column: 1 / -1; }
.vg-produtos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px; }
.vg-par h4, .vg-serie h4 { margin: 0 0 8px; font-size: .88rem; color: var(--text-2); }

.vg-nota { margin: 6px 0 0; font-size: .8rem; }
.vg-empty { margin: 0 0 10px; }
.vg-contas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.vg-contas li { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: .85rem; }
.vg-conta-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-barra { display: block; height: 8px; border-radius: 99px; background: var(--chart-track); overflow: hidden; }
.vg-barra > span { display: block; height: 100%; border-radius: 99px; background: var(--chart-1); }
.vg-contas strong { font-variant-numeric: tabular-nums; }

/* ---------- menu suspenso (pncMenu) e menu de perfil no nome da conta ---------- */
.ui-menu-wrap { position: relative; }
.ui-menu-trigger { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 8px; border: 1px solid transparent; border-radius: 12px; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; min-width: 0; }
.ui-menu-trigger:hover, .ui-menu-trigger[aria-expanded="true"] { background: var(--surface-2); border-color: var(--border); }
.ui-menu-trigger:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.ui-menu-trigger .ui-menu-chevron { color: var(--muted); transition: transform .15s; }
.ui-menu-trigger[aria-expanded="true"] .ui-menu-chevron { transform: rotate(180deg); }
.ui-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 220px; padding: 6px; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--border-strong, var(--border)); border-radius: 12px; box-shadow: var(--shadow); }
.ui-menu [role="menuitem"] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.ui-menu [role="menuitem"]:hover, .ui-menu [role="menuitem"]:focus-visible { background: var(--surface-2); outline: none; }
.ui-menu [role="menuitem"] .icon { color: var(--muted); }
.ui-menu .ui-menu-sep { height: 1px; margin: 4px 6px; background: var(--border); }

/* ---------- campo de senha (pncForm.password) e regras ---------- */
.ui-password > label { display: block; font-size: .8rem; color: var(--text-2); margin-bottom: .35rem; font-weight: 500; }
.ui-password-control { position: relative; }
.ui-password-control input { width: 100%; box-sizing: border-box; padding-right: 48px !important; }
.ui-password-toggle { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.ui-field-hint { margin: 6px 0 0; font-size: .8rem; color: var(--muted); }
.ui-rules { margin: -4px 0 16px; padding-left: 20px; font-size: .82rem; color: var(--text-2); display: flex; flex-direction: column; gap: 2px; }
.ui-inline-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.modal.ui-form:has(#platform-password-form) { max-width: 520px; }

/* ---------- Central › Meu perfil e Acesso ---------- */
.perfil { display: flex; flex-direction: column; gap: 16px; max-width: 780px; }
.perfil > .card { margin: 0; }
.perfil-resumo { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; min-width: 0; }
.perfil-resumo .avatar { width: 48px; height: 48px; font-size: 1.1rem; flex-shrink: 0; }
.perfil-nome { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.perfil-nome strong { font-size: 1.05rem; }
.perfil-dados { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.perfil-dados > div { display: grid; grid-template-columns: 9rem 1fr; gap: 4px 12px; align-items: center; }
.perfil-dados dt { color: var(--muted); font-size: .85rem; }
.perfil-dados dd { margin: 0; overflow-wrap: anywhere; }
.perfil-nota { margin: 16px 0 0; font-size: .82rem; }
#platform-mfa-panel:focus { outline: none; }
#platform-mfa-panel form { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 12px; }
#platform-mfa-panel form > .field, #platform-mfa-panel form > fieldset, #platform-mfa-panel form > div, #platform-mfa-panel form > p { align-self: stretch; }
#platform-view-usuarios .cam-table-toolbar, #platform-view-grupos .cam-table-toolbar { justify-content: flex-end; }
:is(#platform-nav, #main-nav) .nav-sub .nav-group-toggle { padding-left: 24px; font-size: 13px; min-height: 36px; }
:is(#platform-nav, #main-nav) .nav-sub .nav-sub .nav-item { padding-left: 40px; }
@media (max-width: 720px) {
  .perfil-dados > div { grid-template-columns: 1fr; }
  :is(#platform-admin-screen, #app-shell) .ui-menu-trigger { flex: 1; }
  :is(#platform-admin-screen, #app-shell) .ui-menu { left: 0; right: auto; }
}
.ui-fieldset { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.ui-fieldset > legend { padding: 0; margin-bottom: 4px; font-size: .8rem; font-weight: 500; color: var(--text-2); }
.ui-fieldset > .ui-switch-row:last-child { border-bottom: 0; }
.ui-switch-row strong { font-size: .9rem; }
.ui-switch-row .muted { font-size: .82rem; }
.ui-switch-row .toggle-switch { flex-shrink: 0; }
#platform-mfa-panel p, #platform-mfa-panel li { font-size: .9rem; }
#platform-mfa-panel #platform-mfa-message:empty { display: none; }
#login-code-hint { margin: -6px 0 12px; }
#app-shell .ui-menu-trigger .avatar { display: grid; }
@media (max-width: 720px) { #app-shell .user-menu { padding-left: 4px; } #app-shell .ui-menu-trigger { padding: 2px 4px; min-height: 40px; gap: 4px; } }

.vg-grid .card-head { gap: 12px; flex-wrap: wrap; }
.vg-grid .card-head h3 { margin: 0; }
.vg-estado { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.vg-estado .icon { width: 14px; height: 14px; flex-shrink: 0; }
.vg-estado.good { color: var(--chart-good); } .vg-estado.warning { color: var(--chart-warning); } .vg-estado.critical { color: var(--chart-critical); } .vg-estado.neutral { color: var(--muted); }
.vg-servicos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vg-servico { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.vg-servico:last-child { border-bottom: 0; }
.vg-servico .vg-estado { white-space: normal; }
.vg-srv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.vg-srv { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.vg-srv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.vg-srv-titulo { display: flex; flex-direction: column; min-width: 0; font-size: .85rem; }
.vg-srv-titulo strong, .vg-srv-titulo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-srv-titulo strong { font-size: .95rem; }
.vg-srv-meta { margin: 0; font-size: .8rem; }
.vg-medidores { display: flex; flex-direction: column; gap: 10px; }
.vg-metrica { display: grid; grid-template-columns: minmax(0, 1fr) 72px; align-items: center; gap: 10px; }
.vg-metrica > .ui-meter:only-child { grid-column: 1 / -1; }
.vg-srv-servicos { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--border); }
.vg-cotas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px 32px; }
.vg-cota h4 { margin: 0 0 10px; font-size: .88rem; color: var(--text-2); }
.vg-cota .ui-meter { grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; }

/* ---------- Agente › Relatórios e Configurações › Servidor (#322) ---------- */
.rel-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px 24px; margin-bottom: 16px; }
.rel-grupo h3 { margin: 0 0 8px; font-size: .88rem; color: var(--text-2); }
.rel-grafico:not(:empty) { margin-bottom: 16px; }
.srv-agente { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px 32px; align-items: start; }
.srv-agente h4 { margin: 0 0 6px; font-size: .88rem; color: var(--text-2); }
.srv-agente .ui-summary { margin-top: 16px; font-size: .88rem; }
#agvg-servidor-corpo > .vg-servicos { margin-top: 12px; }

/* Ícones Lucide no lugar dos antigos emojis do Agente (#321): tamanho pelo contexto. */
.panic-alert-icon .icon { width: 32px; height: 32px; }
.upload-icon .icon, .placeholder-card .icon { width: 32px; height: 32px; }
.cell-check .icon, .cell-x .icon, .uc-lock-icon .icon, .tab-check .icon, .csi-arme .icon { width: 15px; height: 15px; }
.table-icon-btn .icon, .modal-close .icon, .chip .icon, .csi-loc .icon, .placa-sub .icon, .placa-chip .icon, .stat-label .icon { width: 14px; height: 14px; }
.csi-star .icon { width: 1em; height: 1em; }
.csi-star.active .icon { fill: currentColor; }
.apc-loc .icon { width: 10px; height: 10px; fill: currentColor; }
.apc-loc.apc-online { color: var(--good); } .apc-loc.apc-offline { color: var(--critical); } .apc-loc.apc-instavel { color: var(--warning); }

/* Agente › Dispositivos (#321): nome com o ponto de situação e resumo somente leitura. */
.cam-name-cell { display: inline-flex; align-items: center; gap: 8px; }
.ui-summary { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0 0 12px; }
.ui-summary dt { color: var(--muted); }
.ui-summary dd { margin: 0; overflow-wrap: anywhere; }
.ui-form-section { font-size: .85rem; font-weight: 700; margin: 16px 0 8px; }
.ui-form-section:first-child { margin-top: 0; }
.ui-checks { border: 0; padding: 0; margin: 0; min-width: 0; }
.ui-checks legend { font-size: .85rem; font-weight: 600; margin-bottom: 8px; padding: 0; }

/* ---------- Agente › página do cliente (#321; js/clientes.ts) ---------- */
.cliente-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 12px; }
.cliente-topo .cli-name { flex: 1 1 200px; }
.cliente-topo .cli-name strong { font-size: 1.05rem; }
.cliente-topo .btn .icon, .card-head .btn .icon, .cam-table-toolbar .btn .icon { margin-right: 6px; }
.cliente-abas { padding: 0; margin-bottom: 16px; }
.cliente-painel { min-width: 0; }
.cliente-painel:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 4px; }
.cliente-painel > .card + .card { margin-top: 16px; }
.cliente-painel .card-head { flex-wrap: wrap; gap: 8px; }
.cliente-painel .card-head h3 { display: inline-flex; align-items: center; gap: 8px; }
.ui-form .cli-group .ui-combo-input { width: 100%; box-sizing: border-box; margin: 4px 0 8px; }

/* ---------- Relatórios da Central e do Agente (#326): período, resumo, mapa de calor e PDF ---------- */
.rel-periodo { display: flex; flex-direction: column; gap: 10px; }
.rel-periodo-off { opacity: .55; }
.rel-lista { margin-bottom: 14px; }
.rel-acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rel-resumo { margin: 0 0 16px; }
.rel-resumo:empty { display: none; }
.rel-graficos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px 32px; align-items: start; }
.rel-graficos > * { min-width: 0; max-width: 560px; }
.rel-graficos h4 { margin: 0 0 6px; font-size: .88rem; color: var(--text-2); }
.ui-chart > svg.ui-heat { max-width: 560px; }
.ui-heat-zero { fill: var(--chart-track); }
.ui-heat-scale { display: inline-block; width: 64px; height: 8px; margin: 0 6px; border-radius: 99px; vertical-align: middle;
  background: linear-gradient(90deg, color-mix(in srgb, var(--chart-1) 15%, transparent), var(--chart-1)); }

/* Página de impressão: fora da impressão não aparece; na impressão, só ela (sem menu, topo nem botões). */
#pnc-print { display: none; }
@media print {
  @page { size: A4; margin: 14mm 12mm 16mm;
    @bottom-left { content: "PlusNetCam"; font: 8pt system-ui, sans-serif; color: #617084; }
    @bottom-right { content: "Página " counter(page) " de " counter(pages); font: 8pt system-ui, sans-serif; color: #617084; } }
  body.pnc-imprimindo { background: #fff !important; }
  body.pnc-imprimindo > :not(#pnc-print) { display: none !important; }
  body.pnc-imprimindo #pnc-print { display: block; }
}
.pr-doc {
  --page: #fff; --surface: #fff; --surface-2: #f0f3f6; --surface-3: #e5eaf0; --text: #1b2838; --text-2: #48596d; --muted: #617084; --border: #e0e6ec;
  --chart-1: #2563eb; --chart-2: #0d9488; --chart-3: #d97706; --chart-4: #9333ea;
  --chart-good: #137957; --chart-warning: #9b6500; --chart-critical: #bc303a; --chart-neutral: #64748b; --chart-track: #e5eaf0; --chart-grid: #e0e6ec;
  color: var(--text); background: #fff; font: 10pt/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.pr-head { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid #2563eb; }
.pr-mark { width: 30px; height: 30px; flex-shrink: 0; }
.pr-brand { display: flex; flex-direction: column; }
.pr-brand strong { font-size: 13pt; letter-spacing: -.01em; }
.pr-brand span { color: var(--muted); font-size: 9pt; }
.pr-meta { margin: 0 0 0 auto; display: flex; gap: 18px; text-align: right; }
.pr-meta dt { color: var(--muted); font-size: 8pt; text-transform: uppercase; letter-spacing: .04em; }
.pr-meta dd { margin: 0; font-weight: 600; }
.pr-title { margin: 14px 0 2px; font-size: 17pt; letter-spacing: -.01em; }
.pr-sub { margin: 0 0 10px; color: var(--text-2); }
.pr-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 6px; }
.pr-card { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; break-inside: avoid; }
.pr-card span { color: var(--muted); font-size: 8pt; }
.pr-card strong { font-size: 14pt; }
.pr-card small { color: var(--text-2); font-size: 8pt; }
.pr-sec { margin-top: 14px; }
.pr-sec h2 { font-size: 11.5pt; margin: 0 0 6px; padding-bottom: 3px; border-bottom: 1px solid var(--border); break-after: avoid; }
.pr-graficos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; align-items: start; margin-bottom: 8px; }
.pr-graficos > * { break-inside: avoid; }
.pr-graficos h4 { margin: 0 0 4px; font-size: 9pt; color: var(--text-2); }
.pr-graficos .ui-chart { gap: 8px 14px; }
.pr-graficos .ui-chart > svg { max-height: 62mm; }
.pr-graficos .ui-chart > svg.ui-donut { width: 34mm; }
.pr-graficos .ui-chart-legend { font-size: 8pt; gap: 3px; }
.pr-nota { color: var(--text-2); font-size: 8.5pt; margin: 4px 0 6px; }
.pr-tabela { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.pr-tabela thead { display: table-header-group; }
.pr-tabela th { text-align: left; font-weight: 600; color: var(--text-2); background: #f0f3f6; border-bottom: 1px solid var(--border); padding: 5px 6px; overflow-wrap: anywhere; hyphens: auto; text-transform: none; letter-spacing: 0; }
.pr-tabela-larga { font-size: 7.5pt; }
.pr-tabela-larga th, .pr-tabela-larga td { padding: 4px; }
.pr-tabela td { padding: 4px 6px; border-bottom: 1px solid var(--border); vertical-align: top; overflow-wrap: anywhere; }
.pr-tabela tr { break-inside: avoid; }
.pr-tabela tbody tr:nth-child(even) td { background: #f8fafc; }
.pr-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pr-foot { margin-top: 16px; padding-top: 6px; border-top: 1px solid var(--border); color: var(--muted); font-size: 8pt; }

/* ---------- #325: ONVIF e PTZ (js/camera-onvif.ts, js/ptz.ts) e aviso do mapa do ao vivo ---------- */
.onvif-painel .field-row { align-items: flex-start; }
.onvif-painel .onvif-porta { flex: 0 0 120px; }
.onvif-painel .onvif-resultado:empty { display: none; }
.onvif-painel .onvif-tipos .cfg-option { padding: 4px 0; }
.mc-ptz { border-top: 1px solid var(--border); margin-top: .6rem; padding-top: .8rem; display: grid; gap: 12px; }
.mc-ptz-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.mc-ptz-dica { font-size: .8rem; }
.mc-ptz-corpo { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; border-radius: 12px; }
.mc-ptz-corpo:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 4px; }
.mc-ptz-pad { display: grid; grid-template-columns: repeat(3, 48px); grid-template-rows: repeat(3, 48px); gap: 6px; }
.mc-ptz-btn { width: 48px; height: 48px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 12px; touch-action: none; user-select: none; -webkit-user-select: none; }
.mc-ptz-btn .icon { width: 20px; height: 20px; margin: 0; }
.mc-ptz-btn.ativo, .mc-ptz-btn:active { background: var(--ui-accent); border-color: var(--ui-accent); color: #fff; }
.mc-ptz-parar .icon { width: 14px; height: 14px; fill: currentColor; }
.mc-ptz-lado { display: grid; gap: 12px; flex: 1 1 180px; min-width: 0; }
.mc-ptz-zoom { display: flex; gap: 6px; }
.mc-ptz-velocidade { margin: 0; }
.mc-ptz-velocidade input[type="range"] { width: 100%; accent-color: var(--ui-accent); }
.mc-ptz-presets { display: grid; gap: 8px; }
.mc-ptz-presets-head { display: flex; justify-content: space-between; gap: 8px; }
.mc-ptz-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 220px; overflow-y: auto; }
.mc-ptz-lista li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.mc-ptz-lista li.mc-ptz-vazio { border-style: dashed; justify-content: flex-start; }
.mc-ptz-nome { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.mc-ptz-nome .icon { width: 14px; height: 14px; flex-shrink: 0; }
.mc-ptz-acoes { display: inline-flex; gap: 4px; flex-shrink: 0; }
.mc-ptz-acoes .btn .icon { margin-right: 4px; }
.mc-ptz-remover .icon { margin-right: 0 !important; }
.mc-ptz-salvar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.mc-ptz-salvar .field { flex: 1 1 160px; margin: 0; }
.mc-ptz-salvar .btn .icon { margin-right: 6px; }
.mc-ptz-status:empty { display: none; }
.mc-ptz-status { margin: 0; font-size: .82rem; }
.mc-mapa-aviso { position: absolute; left: 56px; top: 12px; z-index: 2; margin: 0; max-width: calc(100% - 240px); padding: 6px 10px; border-radius: 999px; font-size: .78rem; background: var(--surface); color: var(--text-2); box-shadow: var(--shadow); }
.overview-cam-marker { cursor: pointer; }

/* #325: Clientes › cliente › Ao vivo abre no mapa também no celular (acima da lista); a Área do Cliente segue com a lista. */
@media (max-width: 720px) {
  #cliente-painel-aovivo .mc-layout-player:not(.mc-com-camera) .mc-map-card-full { display: block; height: 260px; margin: 0 0 12px; }
  #cliente-painel-aovivo .mc-layout-player:not(.mc-com-camera) .mc-map-card-full .overview-map { height: 260px; min-height: 0; }
  .mc-mapa-aviso { left: 10px; top: auto; bottom: 10px; max-width: calc(100% - 20px); }
}

/* ---------- Alarmes e eventos (#331; js/alarmes.ts): filtros, tabela e o ocorrido ---------- */
.alarmes-filtros .aud-period > .ui-field, .alarmes-filtros .aud-period > .field { flex: 1 1 180px; min-width: 0; }
.ui-table-grid td.alarmes-msg { min-width: 14rem; overflow-wrap: anywhere; }
.alarme-ocorrido { display: flex; flex-direction: column; gap: 14px; }
.alarme-midia { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.alarme-midia figure { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.alarme-midia figcaption { font-size: .82rem; }
.alarme-midia video, .alarme-midia img, .alarme-sem-video { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: #000; object-fit: contain; display: block; }
.alarme-sem-video { display: grid; place-items: center; padding: 12px; box-sizing: border-box; text-align: center; }
.alarme-mensagem { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.alarme-tratamento { border-top: 1px solid var(--border); padding-top: 12px; }
.alarme-tratamento h4 { margin: 0 0 8px; font-size: .95rem; }
.alarme-tratado { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 6px; }
.alarme-tratado .icon { color: var(--chart-good); flex-shrink: 0; margin-top: 2px; }
.alarme-comentario { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--ui-accent); background: var(--surface-2); border-radius: 0 8px 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.alarme-acoes a.btn { text-decoration: none; }

/* #279 (refeita em 20/10/2026): Gravações (js/gravacoes.ts) — topo compacto, vídeo, controles grandes, linha do tempo
   arrastável com a agulha no meio, eventos do dia ao lado (largo) ou embaixo, trechos e clipes recolhidos. */
.grav { display: flex; flex-direction: column; gap: 12px; min-width: 0;
  --ev-movimento: #d97706; --ev-pessoa: #9333ea; --ev-veiculo: #0d9488; --ev-invasao: #dc2626; --ev-placa: #2563eb; --ev-outro: #64748b; }
.grav > * { min-width: 0; }
.grav-ev-movimento { --ev: var(--ev-movimento); } .grav-ev-pessoa { --ev: var(--ev-pessoa); } .grav-ev-veiculo { --ev: var(--ev-veiculo); }
.grav-ev-invasao { --ev: var(--ev-invasao); } .grav-ev-placa { --ev: var(--ev-placa); } .grav-ev-outro { --ev: var(--ev-outro); }
.grav-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.grav-cam { flex: 1 1 220px; min-width: 0; max-width: 380px; }
.grav-cam-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 4px 10px 4px 4px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.grav-cam-btn:hover:not(:disabled), .grav-cam-btn[aria-expanded="true"] { background: var(--surface-2); }
.grav-cam-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.grav-cam-btn:disabled { cursor: default; opacity: 1; }
.grav-cam-btn:disabled .ui-menu-chevron { display: none; }
.grav-cam-mini { flex: 0 0 auto; width: 64px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--surface-2); color: var(--muted); display: grid; place-items: center; }
.grav-cam-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grav-cam-nome { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grav-cam-menu { left: 0; right: auto; width: min(380px, calc(100vw - 32px)); max-height: min(60vh, 420px); overflow-y: auto; }
.grav-cam-menu .grav-cam-mini { width: 56px; }
.grav-cam-item[aria-current="true"] { font-weight: 650; background: var(--surface-2) !important; }
.grav-dia { display: flex; align-items: center; gap: 6px; }
.grav-data { font: inherit; min-height: 40px; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); }
.grav-dia .icon-btn:disabled { opacity: .4; cursor: default; }
.grav-aovivo { margin-left: auto; }
.grav-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 1100px) { .grav-corpo { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .grav-ev-lista { max-height: 520px; } }
.grav-palco { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.grav-tela { position: relative; overflow: hidden; border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; aspect-ratio: 16 / 9; max-height: min(62vh, 620px); width: 100%; background: #000; touch-action: manipulation; }
.grav-tela-conteudo { position: absolute; inset: 0; display: grid; place-items: center; }
.grav-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; display: block; cursor: pointer; }
.grav-video[controls] { cursor: auto; }
.grav-tela-hora { position: absolute; left: 10px; top: 8px; margin: 0; padding: 2px 8px; border-radius: 6px; background: rgba(0, 0, 0, .6); color: #fff; font-size: .85rem; font-variant-numeric: tabular-nums; pointer-events: none; }
.grav-tela-hora:empty { display: none; }
.grav-toque { position: absolute; top: 50%; transform: translateY(-50%); padding: 10px 16px; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font-weight: 700; pointer-events: none; }
.grav-toque.esq { left: 12%; } .grav-toque.dir { right: 12%; }
.grav-tela-aviso { display: flex; flex-direction: column; align-items: center; gap: 10px; color: #d6dbee; padding: 16px; text-align: center; font-size: .9rem; }
.grav-tela-aviso > .icon { width: 28px; height: 28px; opacity: .8; }
.grav-tocar-aqui { min-height: 48px; padding: 10px 20px; font-size: 1rem; }
.grav-excluir-clipe { position: absolute; right: 10px; top: 8px; }
.grav-controles { display: flex; align-items: center; gap: 6px; padding: 8px 12px; }
.grav-ctl { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 48px; padding: 6px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.grav-ctl:hover:not(:disabled), .grav-ctl[aria-expanded="true"] { background: var(--surface-2); }
.grav-ctl:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.grav-ctl:disabled { opacity: .4; cursor: default; }
.grav-ctl .icon { width: 20px; height: 20px; }
.grav-ctl-principal { min-width: 64px; background: var(--action); border-color: var(--action); color: var(--action-ink); }
.grav-ctl-principal:hover:not(:disabled) { background: var(--action-hover); }
.grav-ctl-espaco { flex: 1; }
.grav-menu-cima { top: auto; bottom: calc(100% + 6px); }
/* Os menus dos controles e do mosaico abrem alinhados à direita do botão (o menu do perfil no celular abre à esquerda). */
:is(#app-shell, #client-area-screen) :is(.grav-controles, .mos-barra) .ui-menu { left: auto; right: 0; max-width: calc(100vw - 32px); }
[data-vel][aria-checked="false"] .icon { visibility: hidden; }
.grav-linha { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px 12px 6px; border-top: 1px solid var(--border); }
/* 03/11/2026: prévia da linha do tempo (js/previa-linha.ts), a mesma nas Gravações e no Ao vivo › Minhas Câmeras. */
.previa-linha { position: absolute; z-index: 6; width: 200px; transform: translate(-50%, calc(-100% - 8px)); display: flex; flex-direction: column; gap: 4px; padding: 4px; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); border-radius: 8px; box-shadow: var(--shadow); pointer-events: none; }
.previa-linha[hidden] { display: none; }
.previa-linha-img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 5px; background: #000; }
.previa-linha-img[hidden] { display: none; }
.previa-linha-hora { text-align: center; font-size: .8rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.previa-linha-so-hora { width: auto; padding: 4px 10px; }
.grav-linha-topo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.grav-relogio { grid-column: 2; margin: 0; font-weight: 700; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.grav-zooms { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 2px; }
.grav-zoom-texto { min-width: 3.6em; text-align: center; font-size: .8rem; }
.grav-zooms .icon-btn:disabled { opacity: .4; cursor: default; }
.grav-faixa { position: relative; height: 66px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.grav-faixa:active { cursor: grabbing; }
.grav-faixa:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.grav-faixa-conteudo { position: absolute; inset: 0; pointer-events: none; }
.grav-fora { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(45deg, transparent 0 6px, color-mix(in srgb, var(--muted) 22%, transparent) 6px 8px); }
.grav-marca { position: absolute; top: 0; bottom: 0; width: 1px; background: color-mix(in srgb, var(--border-strong) 55%, transparent); }
.grav-marca span { position: absolute; top: 4px; left: 4px; font-size: .68rem; line-height: 1; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.grav-trecho { position: absolute; top: 20px; height: 22px; background: var(--ui-accent); opacity: .8; border-radius: 4px; }
.grav-alerta { position: absolute; bottom: 4px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--ev); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--surface-2); }
.grav-alerta::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 2px; height: 28px; margin-left: -1px; background: var(--ev); opacity: .65; }
.grav-alerta .icon { width: 10px; height: 10px; stroke-width: 2.6; }
.grav-agulha { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--text); box-shadow: 0 0 0 1px var(--surface); pointer-events: none; }
.grav-agulha::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--text); }
.grav-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; font-size: .76rem; }
.grav-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.grav-leg { display: inline-block; width: 14px; height: 8px; border-radius: 2px; }
.grav-leg-rec { background: var(--ui-accent); opacity: .8; }
.grav-leg-ev { width: 10px; height: 10px; border-radius: 50%; background: conic-gradient(var(--ev-movimento) 0 33%, var(--ev-pessoa) 0 66%, var(--ev-invasao) 0); }
.grav-leg-dica { margin-left: auto; }
.grav-situacao { margin: 0; padding: 0 12px 10px; font-size: .82rem; overflow-wrap: anywhere; }
.grav-situacao:empty { display: none; }
.grav-lado { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 4px 12px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.grav-titulo { margin: 0; font-size: .95rem; }
.grav-ev-chips { gap: 6px; }
.grav-ev-chips:empty { display: none; }
.grav-ev-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; }
.grav-ev-chip .icon { color: var(--ev); }
.grav-ev-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow-y: auto; }
.grav-ev { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 8px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.grav-ev:hover { background: var(--surface-2); }
.grav-ev:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.grav-ev-icone { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; background: var(--ev); color: #fff; display: grid; place-items: center; }
.grav-ev-icone .icon { width: 16px; height: 16px; }
.grav-ev-texto { display: flex; flex-direction: column; min-width: 0; }
.grav-ev-texto strong { font-size: .88rem; font-variant-numeric: tabular-nums; }
.grav-ev-texto small { font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grav-ev-vazio { margin: 0; font-size: .85rem; }
.grav-ev-vazio:empty { display: none; }
.grav-abas { padding: 0; margin-bottom: 10px; overflow-x: auto; }
.grav-painel { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.grav-painel[hidden] { display: none; }
.grav-previa { display: inline-grid; place-items: center; width: 112px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--surface-2); color: var(--muted); vertical-align: middle; }
.grav-previa img { width: 100%; height: 100%; object-fit: cover; display: block; }
.grav-atalhos { margin: 0; }
@media (max-width: 600px) {
  .grav-cam { flex: 1 1 0; max-width: none; }
  .grav-aovivo { order: 1; }
  .grav-dia { order: 2; flex: 1 1 100%; }
  .grav-dia .grav-data { flex: 1 1 auto; min-width: 0; }
  .grav-aovivo { margin-left: 0; font-size: 0; gap: 0; min-width: 44px; justify-content: center; }
  .grav-controles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; padding: 8px; }
  .grav-controles > .ui-menu-wrap > .grav-ctl { width: 100%; }
  .grav-ctl-espaco { display: none; }
  .grav-ctl { min-width: 0; padding: 4px 2px; flex-direction: column; gap: 0; font-size: .72rem; }
  .grav-ctl-mais .grav-ctl-rotulo, .grav-ctl-vel .icon { display: none; }
  .grav-ctl-vel { font-size: .9rem; }
  .grav-previa { width: 80px; }
  .grav-leg-dica { margin-left: 0; }
  .grav-linha-topo { grid-template-columns: auto 1fr; }
  .grav-relogio { grid-column: 1; font-size: 1.15rem; }
  .grav-zooms { grid-column: 2; }
}
.grav-palco:fullscreen { border: 0; border-radius: 0; }
.grav-palco:fullscreen .grav-tela { border-radius: 0; }
.grav-palco:fullscreen .grav-tela { flex: 1; max-height: none; aspect-ratio: auto; }

/* 20/10/2026: mosaico (js/mosaicos.ts) — página do cliente, Área do Cliente e Monitoramento. A mesma grade no ao vivo
   e na edição: 1, 4, 6 (uma grande e cinco), 9, 16 e Retrato (3 em coluna). */
.mos-painel { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mos-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mos-escolha { flex: 1 1 200px; min-width: 0; max-width: 380px; }
.mos-select { width: 100%; min-height: 40px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; }
.mos-status { margin: 0; font-size: .85rem; }
.mos-status:empty { display: none; }
.mos-grade { display: grid; gap: 4px; width: min(100%, calc(72vh * 16 / 9)); aspect-ratio: 16 / 9; margin-inline: auto; }
.mos-vivo.mos-grade { background: #000; border-radius: var(--radius-sm); overflow: hidden; }
.mos-l1 { grid-template: 1fr / 1fr; }
.mos-l4 { grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr)); }
.mos-l6, .mos-l9 { grid-template: repeat(3, minmax(0, 1fr)) / repeat(3, minmax(0, 1fr)); }
.mos-l6 > :first-child { grid-column: span 2; grid-row: span 2; }
.mos-l16 { grid-template: repeat(4, minmax(0, 1fr)) / repeat(4, minmax(0, 1fr)); }
.mos-l3 { grid-template: repeat(3, minmax(0, 1fr)) / 1fr; aspect-ratio: 16 / 27; width: min(100%, 420px, calc(72vh * 16 / 27)); }
.mos-grade > .camera-tile { aspect-ratio: auto; min-height: 0; height: 100%; border: 0; border-radius: 0; }
.mos-vazio { background: var(--surface-2); }
.mos-editor { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.mos-layouts { flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 2px; }
.mos-layout { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }
.mos-editor-corpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 900px) { .mos-editor-corpo { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; } }
.mos-pos { position: relative; min-width: 0; min-height: 44px; padding: 0; border: 2px dashed var(--border-strong); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.mos-pos[draggable="true"] { border-style: solid; border-color: var(--border); cursor: grab; }
.mos-pos[aria-pressed="true"] { border: 3px solid var(--ui-accent); box-shadow: 0 0 0 3px var(--ui-accent-ring); }
.mos-pos:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.mos-pos.mos-alvo { border-color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 14%, var(--surface-2)); }
.mos-pos .mos-mini { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.mos-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mos-num { position: absolute; left: 4px; top: 4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: rgba(0, 0, 0, .65); color: #fff; font-size: .72rem; font-weight: 700; display: grid; place-items: center; }
.mos-nome { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; background: linear-gradient(transparent, rgba(0, 0, 0, .8)); color: #fff; font-size: .75rem; font-weight: 600; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mos-vazia { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); font-size: .8rem; }
.mos-l9 .mos-vazia, .mos-l16 .mos-vazia { font-size: 0; }
.mos-escolher { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.mos-escolher-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.mos-escolher-titulo { margin: 0; font-size: .95rem; overflow-wrap: anywhere; }
.mos-mover { display: flex; flex-wrap: wrap; gap: 4px; }
.mos-escolher .mos-busca { flex: 0 0 auto; }
.mos-mover .btn:disabled { opacity: .4; cursor: default; }
.mos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 360px; overflow-y: auto; }
.mos-cam { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 4px 8px 4px 4px; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mos-cam:hover { background: var(--surface-2); }
.mos-cam:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.mos-cam[aria-pressed="true"] { border-color: var(--ui-accent); }
.mos-cam .mos-mini { flex: 0 0 auto; width: 72px; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--surface-2); display: grid; place-items: center; color: var(--muted); }
.mos-cam-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mos-cam-texto strong, .mos-cam-texto small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mos-cam-texto small { font-size: .78rem; }
.mos-onde { flex: 0 0 auto; }
.mos-aviso { margin: 0; font-size: .8rem; }
.mos-aviso:empty { display: none; }

/* #340: Minhas Câmeras (antes Monitoramento): mapa de clientes e câmeras sem cliente. */
#mon-abas { padding: 0; margin-bottom: 16px; overflow-x: auto; }
.mon-mapa { height: max(480px, calc(100vh - 330px)); border-radius: var(--radius-sm); overflow: hidden; }
.mon-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; padding: 0; margin: 0 0 12px; font-size: 0.82rem; color: var(--text-2); }
.mon-legenda li { display: inline-flex; align-items: center; gap: 8px; }
.mon-marcador { background: none; border: 0; display: flex; align-items: center; justify-content: center; }
.mon-pino { display: inline-block; flex: none; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); background: var(--muted); }
.mon-pino.mon-cliente { width: 22px; height: 22px; }
.mon-pino.mon-camera { width: 12px; height: 12px; border-width: 1.5px; }
.mon-legenda .mon-pino { width: 14px; height: 14px; }
.mon-pino.is-online { background: var(--chart-good); }
.mon-pino.is-atencao { background: var(--chart-warning); }
.mon-pino.is-offline { background: var(--chart-critical); }
@media (max-width: 720px) { .mon-mapa { height: 420px; } }
/* 28/10/2026: Minhas Câmeras — mapa grande e, ao lado, todas as câmeras (ao vivo da selecionada no alto). */
.mon-mapa-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.mon-mapa-card { min-width: 0; }
.mon-mapa-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.mon-mapa-topo .mon-legenda { margin: 0; }
.mon-lado { display: flex; flex-direction: column; gap: 10px; min-width: 0; height: max(560px, calc(100vh - 240px)); }
.mon-lado-topo { display: flex; align-items: center; gap: 10px; }
.mon-lado-titulo { margin: 0; font-size: 1rem; flex: none; }
.mon-lado-topo .mon-busca { flex: 1 1 auto; min-height: 34px; padding: 0 10px; gap: 6px; border-radius: var(--radius-sm); }
.mon-lado-topo .mon-busca .icon { width: 14px; height: 14px; }
.mon-lado-topo .mon-busca input { font-size: .84rem; }
.mon-lista-resumo { margin: 0; font-size: .82rem; }
.mon-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mon-item { width: 100%; text-align: left; font: inherit; color: var(--text); }
.mon-item .cli-status { flex: none; font-size: .78rem; }
.mon-item .csi-name, .mon-item .csi-loc { display: block; }
.mon-thumb { display: grid; place-items: center; color: var(--muted); background: var(--surface-2); }
.mon-item .mon-local { display: flex; align-items: center; gap: 4px; }
.mon-local .icon { width: 12px; height: 12px; flex: none; }
/* 07/11/2026: a câmera escolhida abre no centro (no lugar do mapa) com o ao vivo grande, as gravações e as ações. */
.mon-camera { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mon-camera-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.mon-camera-nome { display: flex; flex-direction: column; min-width: 0; }
.mon-camera-nome h3 { margin: 0; overflow-wrap: anywhere; }
.mon-camera-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.mon-camera-tela .ui-tabs { padding: 0; }
.mon-camera-tela .ui-tabpanel { margin-top: 12px; }
.mon-camera-tela .tg-vivo { aspect-ratio: 16 / 9; max-height: calc(100vh - 300px); width: 100%; }
/* 29/10/2026: a imagem inteira da câmera, sem recorte (antes o vídeo no tamanho natural mostrava só o canto da data e hora). */
.tg-vivo > :is(video, canvas).feed-el { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.tg-vivo > p { margin: 0; padding: 12px; color: #fff; }
/* Tela grande da câmera (Minhas Câmeras, Câmeras): quase a tela toda, por cima do mapa, com ao vivo e gravações. */
.modal-backdrop:has(> .modal-tela) { padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
.modal.modal-tela { max-width: none; width: 100%; height: 100%; max-height: none; display: flex; flex-direction: column; padding: 12px 16px; }
.modal-tela .modal-head { margin-bottom: 0; padding-bottom: 8px; cursor: default; gap: 8px; }
.modal-tela .modal-head h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-tela .tg-corpo { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.modal-tela .ui-tabs { padding: 0; }
.modal-tela .ui-tabpanel { flex: 1 1 auto; min-height: 0; margin-top: 12px; }
.tg-vivo { position: relative; background: #000; border-radius: var(--radius-sm); overflow: hidden; }
.tg-gravacoes { overflow-y: auto; }
.mon-pino.mon-camera.is-selecionada { width: 18px; height: 18px; border-width: 3px; box-shadow: 0 0 0 4px var(--ui-accent-ring), 0 1px 4px rgba(0, 0, 0, 0.45); }
@media (max-width: 1100px) {
  .mon-mapa-layout { grid-template-columns: minmax(0, 1fr); }
  .mon-lado { height: auto; }
  .mon-lista { max-height: 460px; }
}

/* 28/10/2026: Meus Mosaicos — lista, mosaico aberto no tamanho do formato e escolha do formato. */
.mm-vendo-titulo { display: flex; flex-direction: column; min-width: 0; }
.mm-vendo-titulo h3 { margin: 0; overflow-wrap: anywhere; }
.mm-vendo-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-quadro[data-formato="tablet"] .mos-grade { width: min(100%, 900px, calc(72vh * 4 / 3)); aspect-ratio: 4 / 3; }
.mm-quadro[data-formato="telefone"] .mos-grade { width: min(100%, 420px, calc(72vh * 9 / 16)); aspect-ratio: 9 / 16; }
.mm-formato { display: inline-flex; align-items: center; gap: 6px; }
.mm-formatos-rotulo { margin: 14px 0 6px; font-weight: 600; font-size: .9rem; }
.mm-formatos { margin-bottom: 12px; }
.mm-formato-opcao { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; }

/* #279: Configurações › Servidor — QR code do endereço para o aplicativo de telefone e tablet. */
.srv-app { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.srv-app-qr svg { display: block; width: 168px; height: 168px; background: #fff; padding: 8px; border-radius: 10px; }
.srv-app-endereco { margin: 0; font-family: ui-monospace, monospace; word-break: break-all; }
/* #343 (fase 3): comando de instalação do servidor secundário (texto longo, quebra em qualquer ponto). */
.sec-comando { width: 100%; font-family: ui-monospace, monospace; font-size: 13px; word-break: break-all; resize: vertical; }
.sec-resumo dd { word-break: break-all; }
#srv-secundarios .card-head { flex-wrap: wrap; gap: 8px; }
.sec-recusadas { list-style: none; margin: 0; padding: 0; }
.sec-recusadas li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; border-top: 1px solid var(--border); overflow-wrap: anywhere; }
.sec-recusadas span { color: var(--muted); font-size: 13px; }