/* CORTEX Visão — tema glass (escuro e claro) sobre o Bootstrap 5.3.
   Tema: atributo data-bs-theme no <html> ("dark" | "light"). Cor da organização: --acento, --acento-sobre e
   --acento-texto vêm do <style nonce> do base.html. Contraste conferido por capturas_v4.py (NOTAS no README).
   Vidro (blur) só no trilho, no topo, nos cartões do painel, no login, em menus e modais. Telas de trabalho
   (tabelas, formulários, revisão, auditoria) usam superfície quase sólida e um véu mais forte sobre a foto. */

/* ---------- tokens ---------- */
:root, [data-bs-theme=dark] {
  --fundo-img: url("/static/img/fundo-noite.svg");
  --fundo-cor: #120f1f;
  --escurecer: rgba(8, 8, 18, .45);             /* véu do painel e do login */
  --escurecer-trabalho: rgba(8, 8, 18, .80);    /* véu das telas de trabalho */
  --vidro: rgba(16, 18, 34, .58);
  --vidro-leve: rgba(16, 18, 34, .26);
  --vidro-solido: rgba(20, 22, 40, .92);        /* sem backdrop-filter, menus e modais */
  --superficie: rgba(18, 20, 36, .94);          /* cartões das telas de trabalho */
  --campo: #161a2c;                             /* fundo de campo de formulário */
  --vidro-borda: rgba(255, 255, 255, .14);
  --vidro-luz: rgba(255, 255, 255, .10);
  --sub: rgba(255, 255, 255, .06);
  --sub-forte: rgba(255, 255, 255, .12);
  --tx: #f4f5fa; --tx2: #c3c8d6; --tx3: #a7aec0;
  --ok: #34d399; --off: #fca5a5; --atencao: #fcd34d;
  --sev-info: #93c5fd; --sev-baixa: #86efac; --sev-media: #fde047; --sev-alta: #fdba74; --sev-critica: #fca5a5;
  --sombra: 0 10px 40px rgba(0, 0, 0, .35);
  --sombra-p: 0 4px 18px rgba(0, 0, 0, .28);
  --acento-texto: #92befe;
  color-scheme: dark;

  --bs-body-bg: var(--campo); --bs-body-bg-rgb: 22, 26, 44;
  --bs-body-color: var(--tx); --bs-body-color-rgb: 244, 245, 250;
  --bs-emphasis-color: #fff; --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-heading-color: var(--tx);
  --bs-secondary-color: var(--tx3); --bs-secondary-color-rgb: 167, 174, 192;
  --bs-tertiary-color: var(--tx3); --bs-tertiary-color-rgb: 167, 174, 192;
  --bs-secondary-bg: #20253a; --bs-tertiary-bg: #1b1f33; --bs-tertiary-bg-rgb: 27, 31, 51;
  --bs-border-color: rgba(255, 255, 255, .18); --bs-border-color-translucent: rgba(255, 255, 255, .14);
  --bs-code-color: #f9a8d4;
}
[data-bs-theme=light] {
  --fundo-img: url("/static/img/fundo-dia.svg");
  --fundo-cor: #e9e6f0;
  --escurecer: rgba(255, 255, 255, .25);
  --escurecer-trabalho: rgba(255, 255, 255, .72);
  --vidro: rgba(255, 255, 255, .60);
  --vidro-leve: rgba(255, 255, 255, .30);
  --vidro-solido: rgba(250, 250, 253, .95);
  --superficie: rgba(255, 255, 255, .94);
  --campo: #ffffff;
  --vidro-borda: rgba(255, 255, 255, .75);
  --vidro-luz: rgba(255, 255, 255, .70);
  --sub: rgba(15, 23, 42, .05);
  --sub-forte: rgba(15, 23, 42, .09);
  --tx: #0f172a; --tx2: #334155; --tx3: #475569;
  --ok: #065f46; --off: #991b1b; --atencao: #713f12;
  --sev-info: #1d4ed8; --sev-baixa: #166534; --sev-media: #713f12; --sev-alta: #9a3412; --sev-critica: #991b1b;
  --sombra: 0 10px 40px rgba(60, 50, 90, .16);
  --sombra-p: 0 4px 18px rgba(60, 50, 90, .12);
  --acento-texto: #0c56c6;
  color-scheme: light;

  --bs-body-bg: var(--campo); --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: var(--tx); --bs-body-color-rgb: 15, 23, 42;
  --bs-emphasis-color: #000; --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-heading-color: var(--tx);
  --bs-secondary-color: var(--tx3); --bs-secondary-color-rgb: 71, 85, 105;
  --bs-tertiary-color: var(--tx3); --bs-tertiary-color-rgb: 71, 85, 105;
  --bs-secondary-bg: #eef0f5; --bs-tertiary-bg: #f4f5f9; --bs-tertiary-bg-rgb: 244, 245, 249;
  --bs-border-color: rgba(15, 23, 42, .16); --bs-border-color-translucent: rgba(15, 23, 42, .12);
}
:root { --raio: 24px; --raio-p: 16px; --acento-rgb: 13, 110, 253; --acento: #0d6efd; --acento-sobre: #000; }

/* ---------- base ---------- */
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .9375rem;
  color: var(--tx);
  background: var(--fundo-cor);
  --veu: var(--escurecer-trabalho);
}
body.tela-painel, body.tela-publica { --veu: var(--escurecer); }
/* foto fixa + véu num pseudo-elemento: rolar não repinta o fundo */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(var(--veu), var(--veu)), var(--fundo-img) center / cover no-repeat;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--tx); }
:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pular { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 8px 14px; border-radius: 12px;
  background: var(--acento); color: var(--acento-sobre); font-weight: 600; text-decoration: none; }
.pular:focus { top: 12px; }
svg.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
a { color: var(--acento-texto); }
a:hover { color: var(--acento-texto); }

/* ---------- vidro ---------- */
.vidro {
  background: var(--vidro);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio);
  box-shadow: inset 0 1px 0 var(--vidro-luz), var(--sombra);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}
.dropdown-menu, .modal-content {
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  backdrop-filter: blur(22px) saturate(160%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .vidro { background: var(--vidro-solido); }
}

/* Topo e trilho mais transparentes que os cartões: o conteúdo aparece por trás.
   Menos véu, desfoque menor e uma sombra leve no texto para não perder leitura. */
.trilho.vidro, .topo.vidro {
  background: var(--vidro-leve);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
}
.topo.vidro .org, .topo.vidro .pilulas a { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
[data-bs-theme="light"] .topo.vidro .org, [data-bs-theme="light"] .topo.vidro .pilulas a { text-shadow: 0 1px 2px rgba(255, 255, 255, .6); }
.topo.vidro .pilulas { background: transparent; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .trilho.vidro, .topo.vidro { background: var(--vidro-solido); }
}

/* ---------- moldura: trilho de ícones + topo em pílula ---------- */
.trilho {
  position: fixed; left: 16px; top: 16px; bottom: 16px; width: 64px; z-index: 1030;
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; border-radius: 28px;
}
.trilho .marca { margin-bottom: 14px; }
.trilho a, .trilho button {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; border: 0; padding: 0;
  background: transparent; color: var(--tx2); text-decoration: none; transition: background .2s, color .2s;
}
.trilho a:hover, .trilho button:hover { background: var(--sub-forte); color: var(--tx); }
.trilho a[aria-current] { background: var(--acento); color: var(--acento-sobre); }
.trilho .marca, .trilho .marca:hover { background: transparent; }
.trilho .fim { margin-top: auto; }
.marca-logo { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none;
  background: var(--acento); color: var(--acento-sobre); font-weight: 800; font-size: 15px; letter-spacing: -.5px; }
.logo-marca { height: 38px; width: auto; max-width: 120px; border-radius: 10px; object-fit: contain; background: #fff; padding: 3px; }
.trilho .logo-marca { max-width: 42px; }

.com-menu .conteudo, .com-menu > .topo { margin-left: 96px; }
.topo {
  position: sticky; top: 12px; z-index: 1020; display: flex; align-items: center; gap: 16px;
  margin: 16px 24px 0 96px; padding: 8px 8px 8px 18px; border-radius: 999px;
}
.org { display: flex; align-items: center; gap: 10px; font-weight: 700; white-space: nowrap; color: var(--tx); text-decoration: none; min-width: 0; }
.org:hover { color: var(--tx); }
.org .marca-logo, .org .logo-marca { display: none; }
.org-nome { display: block; overflow: hidden; text-overflow: ellipsis; }
.org small { display: block; font-weight: 500; color: var(--tx3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.pilulas { display: flex; gap: 4px; margin: 0 auto; padding: 4px; border-radius: 999px; background: var(--sub); }
.pilulas a { padding: 8px 16px; border-radius: 999px; text-decoration: none; color: var(--tx2); font-weight: 500; white-space: nowrap; transition: background .2s, color .2s; }
.pilulas a:hover { color: var(--tx); background: var(--sub); }
.pilulas a[aria-current] { background: var(--tx); color: var(--fundo-pilula, #11131f); }
[data-bs-theme=light] .pilulas a[aria-current] { --fundo-pilula: #fff; background: var(--tx); }
.acoes { display: flex; align-items: center; gap: 8px; }
.icone-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--sub); color: var(--tx);
  display: grid; place-items: center; cursor: pointer; text-decoration: none; }
.icone-btn:hover { background: var(--sub-forte); color: var(--tx); }
.sino-num { position: absolute; top: -3px; right: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; background: #b91c1c; color: #fff; }
.avatar { width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; font-weight: 700;
  background: linear-gradient(135deg, #f0abfc, #818cf8); color: #1e1b4b; cursor: pointer; }
.dropdown-header { color: var(--tx2); font-size: .8rem; white-space: normal; max-width: 260px; }
.dropdown-header b { color: var(--tx); font-size: .9rem; }
.item-sair { color: var(--off); }

.conteudo { padding: 24px 24px 40px 0; max-width: 1560px; width: auto; }
body:not(.com-menu) .conteudo { padding-left: 24px; margin: 0 auto; }

/* ---------- Bootstrap: superfícies, tabelas, formulários, menus ---------- */
.card {
  --bs-card-bg: var(--superficie); --bs-card-color: var(--tx); --bs-card-cap-bg: var(--sub);
  --bs-card-border-color: var(--vidro-borda); --bs-card-border-radius: var(--raio-p);
  --bs-card-inner-border-radius: calc(var(--raio-p) - 1px);
  color: var(--tx);
}
.card.shadow-sm, .card.border-0 { box-shadow: inset 0 0 0 1px var(--vidro-borda), var(--sombra-p) !important; }
.card-img-top { border-top-left-radius: var(--raio-p); border-top-right-radius: var(--raio-p); }
.table {
  --bs-table-bg: transparent; --bs-table-color: var(--tx); --bs-table-border-color: var(--bs-border-color-translucent);
  --bs-table-hover-bg: var(--sub); --bs-table-hover-color: var(--tx);
  --bs-table-striped-bg: var(--sub); --bs-table-striped-color: var(--tx);
  --bs-table-active-bg: var(--sub-forte); --bs-table-active-color: var(--tx);
}
.table > thead th { color: var(--tx2); font-weight: 600; font-size: .8rem; text-transform: none; }
.form-control, .form-select { background-color: var(--campo); color: var(--tx); border-color: var(--bs-border-color); }
.form-control::placeholder { color: var(--tx3); opacity: 1; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--acento); box-shadow: 0 0 0 .2rem rgba(var(--acento-rgb), .35); color: var(--tx); background-color: var(--campo); }
.form-check-input { background-color: var(--campo); border-color: var(--tx3); }
.form-check-input:checked { background-color: var(--acento); border-color: var(--acento); }
.form-control:disabled, .form-select:disabled { background-color: var(--sub-forte); color: var(--tx3); }
.form-text { color: var(--tx3); }
.form-control-color { padding: .25rem; }
.dropdown-menu {
  --bs-dropdown-bg: var(--vidro-solido); --bs-dropdown-color: var(--tx); --bs-dropdown-border-color: var(--vidro-borda);
  --bs-dropdown-link-color: var(--tx); --bs-dropdown-link-hover-color: var(--tx); --bs-dropdown-link-hover-bg: var(--sub-forte);
  --bs-dropdown-link-active-color: var(--acento-sobre); --bs-dropdown-link-active-bg: var(--acento);
  --bs-dropdown-divider-bg: var(--vidro-borda); --bs-dropdown-header-color: var(--tx2);
  --bs-dropdown-border-radius: var(--raio-p); box-shadow: var(--sombra); padding: 6px;
}
.dropdown-item { border-radius: 10px; }
.modal { --bs-modal-bg: var(--vidro-solido); --bs-modal-color: var(--tx); --bs-modal-border-color: var(--vidro-borda);
  --bs-modal-border-radius: var(--raio); --bs-modal-header-border-color: var(--vidro-borda); --bs-modal-footer-border-color: var(--vidro-borda); }
.modal-content { box-shadow: inset 0 1px 0 var(--vidro-luz), var(--sombra); }
.pagination { --bs-pagination-color: var(--acento-texto); --bs-pagination-hover-color: var(--acento-texto);
  --bs-pagination-bg: var(--campo); --bs-pagination-hover-bg: var(--bs-secondary-bg); --bs-pagination-border-color: var(--bs-border-color);
  --bs-pagination-active-bg: var(--acento); --bs-pagination-active-border-color: var(--acento); --bs-pagination-active-color: var(--acento-sobre);
  --bs-pagination-disabled-color: var(--tx3); --bs-pagination-disabled-bg: var(--campo); --bs-pagination-disabled-border-color: var(--bs-border-color); }
.progress { --bs-progress-bar-bg: var(--acento); --bs-progress-bg: var(--sub-forte); }
.nav-tabs, .nav-pills { --bs-nav-link-color: var(--acento-texto); --bs-nav-link-hover-color: var(--acento-texto);
  --bs-nav-pills-link-active-bg: var(--acento); --bs-nav-pills-link-active-color: var(--acento-sobre); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--tx); --bs-list-group-border-color: var(--bs-border-color-translucent); }
kbd { background: var(--tx); color: var(--fundo-cor); }
hr { border-color: var(--vidro-borda); opacity: 1; }

/* botões */
.btn { border-radius: 999px; font-weight: 600; }
.btn-sm { border-radius: 999px; }
.btn-primary { --bs-btn-bg: var(--acento); --bs-btn-border-color: var(--acento); --bs-btn-color: var(--acento-sobre);
  --bs-btn-hover-bg: var(--acento); --bs-btn-hover-border-color: var(--acento); --bs-btn-hover-color: var(--acento-sobre);
  --bs-btn-active-bg: var(--acento); --bs-btn-active-border-color: var(--acento); --bs-btn-active-color: var(--acento-sobre);
  --bs-btn-disabled-bg: var(--acento); --bs-btn-disabled-border-color: var(--acento); --bs-btn-disabled-color: var(--acento-sobre); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-outline-primary { --bs-btn-color: var(--acento-texto); --bs-btn-border-color: var(--acento-texto);
  --bs-btn-hover-bg: var(--acento); --bs-btn-hover-border-color: var(--acento); --bs-btn-hover-color: var(--acento-sobre);
  --bs-btn-active-bg: var(--acento); --bs-btn-active-border-color: var(--acento); --bs-btn-active-color: var(--acento-sobre); }
.btn-outline-secondary, .btn-outline-dark { --bs-btn-color: var(--tx2); --bs-btn-border-color: var(--bs-border-color);
  --bs-btn-hover-bg: var(--sub-forte); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--tx);
  --bs-btn-active-bg: var(--sub-forte); --bs-btn-active-color: var(--tx); --bs-btn-disabled-color: var(--tx3); }
.btn-outline-danger { --bs-btn-color: var(--off); --bs-btn-border-color: var(--off);
  --bs-btn-hover-bg: var(--off); --bs-btn-hover-border-color: var(--off); --bs-btn-hover-color: var(--fundo-cor);
  --bs-btn-active-bg: var(--off); --bs-btn-active-color: var(--fundo-cor); }
.btn-link { --bs-btn-color: var(--acento-texto); --bs-btn-hover-color: var(--acento-texto); --bs-btn-active-color: var(--acento-texto); font-weight: 500; }
.btn-acento { background: var(--acento); color: var(--acento-sobre); width: 100%; display: inline-flex; gap: 8px;
  align-items: center; justify-content: center; padding: 10px 18px; transition: transform .2s, filter .2s; }
.btn-acento:hover { background: var(--acento); color: var(--acento-sobre); filter: brightness(1.08); transform: translateY(-1px); }

/* texto e selos do Bootstrap com cores do tema (as originais não passam 4,5:1 no escuro) */
.text-secondary, .text-body-secondary, .text-muted { color: var(--tx3) !important; }
.text-body { color: var(--tx) !important; }
.text-danger { color: var(--off) !important; }
.text-success { color: var(--ok) !important; }
.text-warning { color: var(--atencao) !important; }
.text-bg-primary { background-color: var(--acento) !important; color: var(--acento-sobre) !important; }
.text-bg-light { background-color: var(--sub-forte) !important; color: var(--tx) !important; }
.text-bg-secondary { background-color: #475569 !important; color: #fff !important; }
.text-bg-danger { background-color: #b91c1c !important; color: #fff !important; }
.text-bg-success { background-color: #047857 !important; color: #fff !important; }
.text-bg-warning { background-color: #fcd34d !important; color: #1c1917 !important; }
.bg-body-tertiary { background-color: var(--sub-forte) !important; }

/* ---------- telas de trabalho ---------- */
.titulo-pagina { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.titulo-pagina h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.4px; margin: 0; }
.cartao-num { font-size: 1.9rem; font-weight: 600; line-height: 1.1; }
.tabela-compacta td, .tabela-compacta th { padding-top: .45rem; padding-bottom: .45rem; vertical-align: middle; }
.snap { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: #0b0d14; border-radius: 12px; }
.card-img-top.snap { border-radius: var(--raio-p) var(--raio-p) 0 0; }
.snap-mini { width: 120px; aspect-ratio: 16/9; object-fit: cover; background: #0b0d14; border-radius: 8px; display: block; }
.status-ponto { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; }
.status-online { background: #20c997; } .status-offline { background: #adb5bd; } .status-erro { background: #ef4444; }
.status-iniciando { background: #ffc107; }
.barra { height: .6rem; background: var(--acento); border-radius: .3rem; min-width: 2px; }
.amostra-cor { display: inline-block; width: 1rem; height: 1rem; border-radius: .25rem; vertical-align: -2px; border: 1px solid var(--bs-border-color); }
svg.amostra-cor { padding: 0; }
.palco-zona { position: relative; display: inline-block; max-width: 100%; user-select: none; }
.palco-zona img { display: block; max-width: 100%; border-radius: 12px; }
.palco-zona svg { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: .1rem .55rem; border-radius: 1rem; background: var(--sub-forte);
  color: var(--tx); font-size: .8rem; font-weight: 600; margin: 0 .2rem .2rem 0; text-decoration: none; white-space: nowrap; }
a.chip:hover { color: var(--tx); background: var(--sub); }
.titulo-pagina .chip { background: var(--superficie); box-shadow: inset 0 0 0 1px var(--vidro-borda); }
.chip[class*="sev-"]::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sev-info { --sev: var(--sev-info); } .sev-baixa { --sev: var(--sev-baixa); } .sev-media { --sev: var(--sev-media); }
.sev-alta { --sev: var(--sev-alta); } .sev-critica { --sev: var(--sev-critica); }
.chip.sev-info, .chip.sev-baixa, .chip.sev-media, .chip.sev-alta, .chip.sev-critica { color: var(--sev); }
.segredo-uma-vez { font-family: var(--bs-font-monospace); word-break: break-all; }
.rotulo-dia { font-size: .65rem; }
.barra-svg { display: block; width: 100%; height: .6rem; }
.barra-svg .barra-rect, .barra-rect { fill: var(--acento); }
.grafico-dias { height: auto; max-height: 230px; }
.grafico-num { font-size: 9px; fill: var(--tx3); }
.grafico-rotulo { font-size: 7px; fill: var(--tx3); }
.trunc-360 { max-width: 360px; } .trunc-260 { max-width: 260px; }
.previa-barra { background: var(--vidro-solido); color: var(--tx); border: 1px solid var(--vidro-borda); }
.sem-imagem { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 1rem; text-align: center; color: #cbd5e1; font-size: .85rem; }
.codigo-otp { letter-spacing: .4em; font-family: var(--bs-font-monospace); }
.qr-2fa { max-width: 220px; image-rendering: pixelated; background: #fff; padding: 8px; border-radius: 12px; }
.text-pre { white-space: pre-wrap; }

/* revisão de rótulos */
.palco-rotulo { position: relative; display: inline-block; max-width: 100%; user-select: none; }
.palco-rotulo img { display: block; max-width: 100%; border-radius: 12px; }
.palco-rotulo svg { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
.palco-rotulo .cx { fill-opacity: .08; stroke-width: 2; vector-effect: non-scaling-stroke; cursor: move; }
.palco-rotulo .cx.sugestao { fill-opacity: 0; stroke-dasharray: 6 4; cursor: pointer; }
.palco-rotulo .cx.sel { stroke-width: 3.5; fill-opacity: .18; }
.palco-rotulo .alca { fill: #fff; stroke: #14181f; stroke-width: 1; vector-effect: non-scaling-stroke; cursor: nwse-resize; }
.palco-rotulo .alca.ne, .palco-rotulo .alca.sw { cursor: nesw-resize; }
.palco-rotulo .rot { font-size: 13px; font-weight: 600; paint-order: stroke; stroke: #000; stroke-width: 3px; fill: #fff; pointer-events: none; }
.item-rotulo.ativo { border-width: 2px; border-color: var(--acento); background: rgba(var(--acento-rgb), .16); color: var(--tx); }
.lista-caixas li { display: flex; justify-content: space-between; padding: .15rem .25rem; border-radius: .25rem; cursor: pointer; }
.lista-caixas li.sel { background: rgba(var(--acento-rgb), .18); }
.progresso-rev { width: 220px; }
.curva { height: auto; max-height: 220px; }
.curva .eixo { stroke: var(--bs-border-color); stroke-width: 1; }
.curva .perda { fill: none; stroke: var(--tx3); stroke-width: 2; }
.curva .map { fill: none; stroke: var(--acento); stroke-width: 2; }
.curva text { font-size: 9px; fill: var(--tx3); }
.melhor { font-weight: 600; color: var(--ok); }

/* ---------- configurações ---------- */
.config-grupo { margin-bottom: 26px; }
.config-grupo h2 { font-size: 1rem; font-weight: 600; margin: 0 0 10px; color: var(--tx2); }
.config-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.config-cartao { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: var(--raio-p);
  background: var(--superficie); box-shadow: inset 0 0 0 1px var(--vidro-borda), var(--sombra-p); color: var(--tx); text-decoration: none; }
.config-cartao:hover { color: var(--tx); box-shadow: inset 0 0 0 2px var(--acento), var(--sombra-p); }
.config-cartao .ico-kpi { flex: none; }
.config-cartao b { display: block; }
.config-cartao span.sub { font-size: .82rem; }

/* ---------- painel ---------- */
.saudacao { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 6px 4px 22px; flex-wrap: wrap; }
.saudacao h1 { margin: 0; font-size: 34px; letter-spacing: -.8px; font-weight: 600; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); }
[data-bs-theme=light] .saudacao h1 { text-shadow: none; }
.saudacao p { margin: 8px 0 0; color: var(--tx2); }
.saudacao p.etiqueta { display: inline-block; font-size: 13.5px; padding: 6px 14px; }
.etiqueta { font-size: 12px; padding: 6px 12px; border-radius: 999px; color: var(--tx2); }
.grade { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.c3 { grid-column: span 3; } .c4 { grid-column: span 4; } .c8 { grid-column: span 8; }
.pilha { display: grid; gap: 18px; align-content: start; }
.cartao { padding: 20px; transition: transform .25s ease, box-shadow .25s ease; min-width: 0; }
.cartao:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 var(--vidro-luz), 0 18px 50px rgba(0, 0, 0, .4); }
.cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.cab h2 { margin: 0; font-size: 15px; font-weight: 600; }
.sub { color: var(--tx3); font-size: 12.5px; }
.link { white-space: nowrap; color: var(--tx2); font-size: 12.5px; text-decoration: none; display: inline-flex; gap: 4px; align-items: center; }
.link:hover { color: var(--tx); text-decoration: underline; }
.kpi { display: flex; flex-direction: column; gap: 6px; min-height: 150px; }
.kpi .topo-kpi { display: flex; align-items: center; gap: 10px; color: var(--tx2); font-weight: 500; }
.ico-kpi { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--sub-forte); color: var(--tx); }
.kpi .valor { font-size: 32px; font-weight: 650; letter-spacing: -1px; line-height: 1.1; }
.kpi .valor small { font-size: 15px; font-weight: 500; color: var(--tx3); letter-spacing: 0; }
.link-kpi { color: inherit; text-decoration: none; } .link-kpi:hover { color: inherit; text-decoration: underline; }
.kpi .rodape { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.selo { white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600;
  padding: 3px 8px; border-radius: 999px; background: var(--sub); color: var(--tx2); text-decoration: none; }
.selo svg.ico { width: 14px; height: 14px; }
.selo.bom { color: var(--ok); } .selo.ruim { color: var(--off); }
a.selo:hover { text-decoration: underline; }
.spark { width: 96px; height: 34px; overflow: visible; }
.spark .linha { fill: none; stroke: var(--acento); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spark .area { fill: var(--acento); opacity: .18; }

/* eventos por hora */
.grafico { display: flex; flex-direction: column; }
.barras { width: 100%; height: auto; overflow: visible; flex: 1; min-height: 0; }
.barras .fundo-col { fill: var(--sub); }
.barras .seg { opacity: .55; transition: opacity .2s; }
.barras .col:hover .seg { opacity: .85; }
.barras .pico .seg { opacity: 1; }
.barras .pico .fundo-col { fill: rgba(var(--acento-rgb), .22); }
.barras .futuro .fundo-col { opacity: .4; }
.barras .dica-fundo { fill: var(--acento); }
.barras .dica { font-size: 12px; font-weight: 700; fill: var(--acento-sobre); }
.barras .eixo { font-size: 11px; fill: var(--tx3); }
.legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 10px; font-size: 12.5px; color: var(--tx2); }
.legenda b { color: var(--tx); font-weight: 600; }

/* linha do tempo "Agora" */
.linha-tempo { list-style: none; margin: 0; padding: 0; position: relative; }
.linha-tempo::before { content: ""; position: absolute; left: 33px; top: 8px; bottom: 8px; width: 1px; background: var(--vidro-borda); }
.linha-tempo li { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 0; }
.linha-tempo li.vazio { display: block; padding-left: 0; }
.linha-tempo .lado { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.miniatura { width: 66px; height: 44px; border-radius: 10px; overflow: hidden; background: #0b0d14; border: 2px solid var(--sev, var(--vidro-borda)); position: relative; display: block; }
.miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.linha-tempo .msg { display: block; font-weight: 550; line-height: 1.3; color: var(--tx); text-decoration: none; overflow-wrap: anywhere; }
.linha-tempo .msg:hover { text-decoration: underline; }
.linha-tempo .meta { font-size: 12.5px; color: var(--tx3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-tempo .chip { margin: 0; background: var(--sub); }
.hora { font-size: 12.5px; color: var(--tx2); font-variant-numeric: tabular-nums; text-align: right; }

/* câmeras ao vivo */
.cameras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.cameras.uma { grid-template-columns: 1fr; }
.tela { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #0b0d14; isolation: isolate; margin: 0; }
.tela img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tela img:not([src]) { visibility: hidden; }
.caixas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.caixas rect:not(.etq) { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke; }
.caixas text { font-weight: 700; font-family: inherit; }
.tela::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0, 0, 0, .88)); z-index: 1; pointer-events: none; }
.tela .rotulo { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 3; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; color: #fff; }
.tela .rotulo a { color: #fff; text-decoration: none; } .tela .rotulo a:hover { text-decoration: underline; }
.tela .rotulo strong { display: block; font-size: 13.5px; }
.tela .rotulo span { font-size: 12px; color: #e2e5ee; font-variant-numeric: tabular-nums; }
.status-tela { position: absolute; top: 10px; left: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; padding: 4px 9px; border-radius: 999px; background: rgba(0, 0, 0, .66); color: #fff; }
.status-tela .pt { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52, 211, 153, .6); animation: pulso 2s infinite; }
.tela.offline img { filter: grayscale(1) brightness(.5); }
.tela.offline .status-tela .pt { background: #f87171; animation: none; }
.tela .sem-sinal { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; z-index: 2; color: #fff; font-weight: 600; text-align: center; padding: 0 16px; }
.tela .sem-sinal small { display: block; font-weight: 400; font-size: 12px; color: #e2e5ee; }
.contagem { position: absolute; top: 10px; right: 10px; z-index: 3; font-size: 11.5px; padding: 4px 9px; border-radius: 999px; background: rgba(0, 0, 0, .66); color: #fff; }
.contagem:empty { display: none; }
@keyframes pulso { 70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } }

/* detector */
.detector-topo { display: flex; gap: 18px; align-items: center; }
.anel { width: 112px; height: 112px; flex: none; }
.anel .trilha-anel { fill: none; stroke: var(--sub-forte); stroke-width: 10; }
.anel .arco { fill: none; stroke: var(--acento); stroke-width: 10; stroke-linecap: round; }
.anel .pct { font-size: 24px; font-weight: 700; fill: var(--tx); }
.anel .rot { font-size: 10.5px; fill: var(--tx3); }
.dados { display: grid; grid-template-columns: 1fr auto; gap: 7px 12px; font-size: 13px; margin: 16px 0; flex: 1; }
.detector-topo .dados { margin: 0; }
.dados dt { color: var(--tx2); font-weight: 400; } .dados dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* zonas */
.zonas { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.zonas .lin { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.zonas .lin span { color: var(--tx3); font-size: 12.5px; }
.trilha .barra-svg { height: 8px; border-radius: 999px; background: var(--sub); }
.trilha .barra-rect { fill: var(--tx2); opacity: .6; }
.trilha.primeira .barra-rect { fill: var(--acento); opacity: 1; }

/* ---------- login e 2FA ---------- */
.tela-publica .conteudo { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.cartao-publico { width: 100%; max-width: 420px; padding: 32px; }
.cartao-publico .marca-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.cartao-publico .marca-topo .marca-logo { width: 44px; height: 44px; font-size: 17px; }
.marca-grande { font-size: 1.35rem; font-weight: 700; letter-spacing: -.3px; color: var(--tx); line-height: 1.15; }
.marca-grande small { display: block; font-size: .8rem; font-weight: 500; color: var(--tx2); letter-spacing: 0; }
.cartao-publico h1 { font-size: 1.15rem; font-weight: 600; margin-bottom: 4px; }
.cartao-publico .ajuda { color: var(--tx2); font-size: .85rem; }
.cartao-publico .form-label { color: var(--tx2); font-weight: 500; }
.cartao-publico .btn-primary { padding: 10px 18px; }
.cartao-publico .rodape-publico { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--vidro-borda); color: var(--tx2); font-size: .8rem; }
.tela-publica .alert { max-width: 420px; width: 100%; }

/* ---------- responsivo ---------- */
@media (max-width: 1180px) {
  .c3 { grid-column: span 6; } .c4, .c8 { grid-column: span 12; }
  .pilha { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .pilulas a { padding: 8px 12px; }
}
@media (max-width: 760px) {
  .trilho { display: none; }
  .com-menu .conteudo, .com-menu > .topo { margin-left: 0; }
  .topo { margin: 10px 10px 0; flex-wrap: wrap; border-radius: 26px; padding: 10px 10px 10px 14px; gap: 10px; top: 6px; }
  .org .marca-logo, .org .logo-marca { display: grid; }
  .org .logo-marca { display: block; height: 32px; }
  .org .marca-logo { width: 32px; height: 32px; font-size: 13px; border-radius: 10px; }
  .org small { max-width: 150px; }
  .pilulas { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; margin: 0; }
  .acoes { margin-left: auto; }
  .conteudo { padding: 16px 12px 32px; }
  .saudacao h1 { font-size: 26px; }
  .grade { gap: 12px; }
  .cartao { padding: 16px; }
  .kpi { min-height: 0; }
  .kpi .valor { font-size: 26px; }
  .kpi .spark { display: none; }
  .kpi .topo-kpi { font-size: 13px; }
  .cameras { grid-template-columns: 1fr; }
  .barras .eixo.impar, .barras .dica, .barras .dica-fundo { display: none; }
  .barras .eixo { font-size: 24px; }  /* o SVG encolhe ~0,45x no celular */
  .detector-topo { flex-wrap: wrap; }
  .vidro, .dropdown-menu { -webkit-backdrop-filter: blur(14px) saturate(150%); backdrop-filter: blur(14px) saturate(150%); }
  .cartao-publico { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .cartao:hover, .btn-acento:hover { transform: none; }
}

/* ---------- avisos de eventos novos (alertas.js) ---------- */
.aviso-evento { background: var(--vidro-solido); color: var(--tx); border: 1px solid var(--vidro-borda);
  border-left: 4px solid var(--sev, var(--acento)); box-shadow: var(--sombra); }
.aviso-evento a { color: var(--tx); text-decoration: none; }
.aviso-evento a:hover, .aviso-evento a:focus-visible { text-decoration: underline; }
.aviso-evento .small { color: var(--tx2); }
.sev-borda-info { --sev: var(--sev-info); } .sev-borda-baixa { --sev: var(--sev-baixa); }
.sev-borda-media { --sev: var(--sev-media); } .sev-borda-alta { --sev: var(--sev-alta); }
.sev-borda-critica { --sev: var(--sev-critica); }
.cota-alta .barra-rect { fill: var(--atencao); } .cota-cheia .barra-rect { fill: var(--off); }

/* ---------- saúde: faixa de disponibilidade diária ---------- */
.faixa-dias { width: 180px; height: 12px; display: block; }
.legenda-dias svg { width: 6px; height: 12px; vertical-align: -1px; }
.dia-ok { fill: var(--ok); } .dia-meio { fill: var(--atencao); } .dia-ruim { fill: var(--off); } .dia-sem { fill: var(--sub-forte); }
.sla-abaixo { color: var(--off); font-weight: 600; }

/* ---------- mapa da unidade ---------- */
.ponto-mapa { stroke: #0b1020; stroke-width: .003; fill: var(--tx3); }
.ponto-mapa.status-online { fill: var(--ok); } .ponto-mapa.status-erro { fill: var(--off); }
.ponto-mapa.status-offline, .ponto-mapa.status-iniciando { fill: var(--atencao); } .ponto-mapa.status-desativada { fill: var(--tx3); }
.legenda-mapa svg { width: 10px; height: 10px; vertical-align: -1px; }
.legenda-mapa .ponto-mapa { stroke-width: 1; }
.texto-ok { color: var(--ok); } .texto-falha { color: var(--off); }

/* ---------- marca CORTEX Visão (logo padrão, sem white-label) ---------- */
.logo-icone { width: 40px; height: 40px; object-fit: contain; }
.logo-palavra { height: 34px; width: auto; display: block; }
.org-sub { display: block; font-weight: 500; color: var(--tx3); font-size: 12px; margin-top: 2px; }
.org:has(.logo-palavra) { flex-direction: column; align-items: flex-start; gap: 0; }
.logo-login { width: 100%; max-width: 320px; height: auto; display: block; }
.so-escuro { display: none; }
[data-bs-theme="dark"] .so-escuro { display: block; }
[data-bs-theme="dark"] .so-claro { display: none; }
@media (max-width: 760px) { .logo-palavra { height: 24px; } }