/* /sistema/board — a vitrine do painel web.

   Mesma família visual do site: as fontes, o rótulo mono, o fio de 1px, o azul da
   marca como acento e o verde da varredura do raio reservado para a IA.

   DOIS TEMAS, CLARO POR PADRÃO. O tema vive inteiro em tokens: `:root` é o claro e
   `[data-theme="dark"]` troca só os valores. Nenhuma regra abaixo repete cor literal,
   e é isso que permite o canvas (gráfico e mapa) ler o tema do próprio CSS em vez de
   carregar uma segunda paleta no JavaScript.

   A home escala com a largura da janela (--u = 100vw/1224), porque é a réplica de um
   vídeo. Num painel isso seria ruim: em monitor grande a tipografia ficaria enorme.
   Então aqui --u é redefinida com teto e piso — todo `calc(N * var(--u))` do projeto
   continua valendo, com ergonomia de aplicação. */

/* ================================================================= tema claro (padrão) */
:root{
  --u: clamp(0.82px, calc(100vw / 1512), 1.18px);

  --bg:        #EFEFEF;
  --panel:     #FFFFFF;
  --panel-2:   #FAFAFA;
  --surface:   #FFFFFF;
  --sunken:    #F6F6F6;
  --hover:     #F4F4F4;
  --active:    #EDEDED;

  --line:      #E6E6E6;
  --line-2:    #D2D2D2;
  --shadow:    0 calc(1 * var(--u)) calc(3 * var(--u)) rgba(12,12,12,.05);

  --ink:       #0C0C0C;
  --ink-2:     #4F4F4F;
  --ink-3:     #8A8A8A;
  --ink-4:     #B0B0B0;

  --blue:      #0A16C8;   /* o azul de marca funciona cheio sobre branco: 11:1 */
  --ok:        #1A6B3D;   /* o verde profundo do raio; o claro reprovaria em texto */
  --warn:      #A66A00;
  --crit:      #C24800;

  --demo-bg1:  #FDF3DC;
  --demo-bg2:  #F8EAC8;
  --demo-line: #E8D5A0;
  --demo-ink:  #8A6410;

  /* gráfico */
  --ch-grid:   #E8E8E8;
  --ch-band:   rgba(10,22,200,.05);
  --ch-line:   #0A16C8;
  --ch-fill-1: rgba(10,22,200,.22);
  --ch-fill-2: rgba(10,22,200,0);
  --ch-now:    #0C0C0C;
  --ch-halo:   rgba(10,22,200,.16);

  /* mapa de zonas */
  --z-op-fill:  #E7EDFC;  --z-op-line:  #C3CEF2;  --z-op-label:  #465AA8;
  --z-ri-fill:  #FBF2DC;  --z-ri-line:  #E8D5A0;  --z-ri-label:  #8A6410;
  --z-in-fill:  #FDE7D8;  --z-in-line:  #F0BE99;  --z-in-label:  #C24800;
  --z-fo-fill:  #F2F2F2;  --z-fo-line:  #CFCFCF;  --z-fo-label:  #9A9A9A;
  --z-dot:      #2B3A94;
  --z-num:      #0C0C0C;

  --rail:      calc(196 * var(--u));
  --demo-h:    calc(30 * var(--u));
}

/* ================================================================= tema escuro */
:root[data-theme="dark"]{
  --bg:        #0A0A0A;
  --panel:     #121212;
  --panel-2:   #171717;
  --surface:   #0D0D0D;
  --sunken:    #0E0E0E;
  --hover:     #161616;
  --active:    #1A1A1A;

  --line:      #232323;
  --line-2:    #2E2E2E;
  --shadow:    none;

  --ink:       #F2F2F2;
  --ink-2:     #A8A8A8;
  --ink-3:     #6E6E6E;
  --ink-4:     #4A4A4A;

  --blue:      #6E82FF;   /* o #0A16C8 é escuro demais sobre painel preto */
  --ok:        #40D17A;
  --warn:      #FFB020;
  --crit:      #FC5E00;

  --demo-bg1:  #1B1405;
  --demo-bg2:  #150F04;
  --demo-line: #2A2008;
  --demo-ink:  #C79A3A;

  --ch-grid:   #1E1E1E;
  --ch-band:   rgba(255,255,255,.055);
  --ch-line:   #6E82FF;
  --ch-fill-1: rgba(76,99,255,.42);
  --ch-fill-2: rgba(76,99,255,0);
  --ch-now:    #FFFFFF;
  --ch-halo:   rgba(110,130,255,.18);

  --z-op-fill:  #141C3C;  --z-op-line:  #26315F;  --z-op-label:  #8A94C8;
  --z-ri-fill:  #2A2109;  --z-ri-line:  #4A3A10;  --z-ri-label:  #C79A3A;
  --z-in-fill:  #2A1204;  --z-in-line:  #5A2400;  --z-in-label:  #FC5E00;
  --z-fo-fill:  #131313;  --z-fo-line:  #2E2E2E;  --z-fo-label:  #5A5A5A;
  --z-dot:      #C9D2FF;
  --z-num:      #FFFFFF;
}

html, body{height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font-body);
  font-size:calc(12 * var(--u));
  line-height:1.35;
  overflow:hidden;              /* o painel rola por dentro, como aplicação */
}
::selection{background:var(--blue); color:#fff}

.bd-scroll, .bd-feed__list, .bd-alertas__list{scrollbar-width:thin; scrollbar-color:var(--line-2) transparent}
.bd-scroll::-webkit-scrollbar, .bd-feed__list::-webkit-scrollbar, .bd-alertas__list::-webkit-scrollbar{width:calc(5 * var(--u)); height:calc(5 * var(--u)); display:block}
.bd-scroll::-webkit-scrollbar-thumb, .bd-feed__list::-webkit-scrollbar-thumb, .bd-alertas__list::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:99px}

/* ================================================================= tarja de demo
   Fica fixa e não fecha. A /sistema promete que nenhum número é inventado; esta tela
   é maquete, e dizer isso o tempo todo é o que mantém a promessa de pé. */
.bd-demo{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--demo-h);
  display:flex; align-items:center; gap:calc(10 * var(--u));
  padding:0 calc(16 * var(--u));
  background:repeating-linear-gradient(135deg, var(--demo-bg1) 0 calc(9*var(--u)), var(--demo-bg2) calc(9*var(--u)) calc(18*var(--u)));
  border-bottom:1px solid var(--demo-line);
  font-family:var(--font-mono);
  font-size:calc(7.6 * var(--u)); letter-spacing:.14em; text-transform:uppercase;
  color:var(--demo-ink);
}
.bd-demo b{color:var(--warn); font-weight:500}
.bd-demo .sep{opacity:.45}
.bd-demo a{margin-left:auto; color:var(--demo-ink); border-bottom:1px solid currentColor}
.bd-demo a:hover{color:var(--warn)}

/* ================================================================= trilho lateral */
.bd-rail{
  position:fixed; left:0; top:var(--demo-h); bottom:0; z-index:60;
  width:var(--rail);
  display:flex; flex-direction:column;
  background:var(--surface);
  border-right:1px solid var(--line);
}
.bd-rail__brand{
  display:flex; align-items:center; gap:calc(10 * var(--u));
  height:calc(58 * var(--u));
  padding:0 calc(18 * var(--u));
  border-bottom:1px solid var(--line);
}
.bd-rail__bolt{
  width:calc(17 * var(--u)); height:calc(21 * var(--u));
  background:var(--ok);
  -webkit-mask:var(--bolt-mask) center/contain no-repeat;
  mask:var(--bolt-mask) center/contain no-repeat;
  flex:none;
}
.bd-rail__name{
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-size:calc(13 * var(--u)); line-height:1; text-transform:uppercase; color:var(--ink);
}
.bd-rail__name span{
  display:block; margin-top:calc(3 * var(--u));
  font-family:var(--font-mono); font-size:calc(6.6 * var(--u));
  letter-spacing:.16em; color:var(--ink-3);
}

.bd-nav{padding:calc(14 * var(--u)) calc(10 * var(--u)); flex:1}
.bd-nav__label{
  display:block; padding:0 calc(8 * var(--u)) calc(9 * var(--u));
  font-family:var(--font-mono); font-size:calc(6.8 * var(--u));
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-4);
}
.bd-nav button{
  position:relative;
  display:flex; align-items:center; gap:calc(11 * var(--u));
  width:100%;
  padding:calc(9 * var(--u)) calc(10 * var(--u));
  border-radius:calc(7 * var(--u));
  font-size:calc(11.5 * var(--u));
  color:var(--ink-2);
  transition:background-color .18s ease, color .18s ease;
  text-align:left;
}
.bd-nav button svg{width:calc(15 * var(--u)); height:calc(15 * var(--u)); flex:none; stroke:currentColor; fill:none; stroke-width:1.5}
.bd-nav button:hover{background:var(--hover); color:var(--ink)}
.bd-nav button.is-on{background:var(--active); color:var(--ink)}
.bd-nav button.is-on::before{
  content:''; position:absolute; left:calc(-10 * var(--u)); top:calc(9 * var(--u)); bottom:calc(9 * var(--u));
  width:calc(2 * var(--u)); border-radius:0 99px 99px 0; background:var(--blue);
}
.bd-nav button.is-on[data-id="central"]::before{background:var(--ok)}

.bd-rail__user{
  display:flex; align-items:center; gap:calc(10 * var(--u));
  padding:calc(13 * var(--u)) calc(16 * var(--u));
  border-top:1px solid var(--line);
}
.bd-rail__avatar{
  width:calc(26 * var(--u)); height:calc(26 * var(--u)); border-radius:50%;
  background:linear-gradient(135deg, #1A6B3D, #40D17A);
  display:grid; place-items:center;
  font-family:var(--font-mono); font-size:calc(8 * var(--u)); color:#04240F; font-weight:500;
  flex:none;
}
.bd-rail__who b{display:block; font-size:calc(11 * var(--u)); font-weight:500; color:var(--ink)}
.bd-rail__who span{display:block; font-family:var(--font-mono); font-size:calc(6.8 * var(--u)); letter-spacing:.1em; color:var(--ink-3)}

/* ================================================================= área principal */
.bd-main{
  position:fixed; left:var(--rail); right:0; top:var(--demo-h); bottom:0;
  display:flex; flex-direction:column;
}
.bd-top{
  display:flex; align-items:center; gap:calc(16 * var(--u));
  height:calc(58 * var(--u));
  padding:0 calc(20 * var(--u));
  border-bottom:1px solid var(--line);
  background:var(--surface);
  flex:none;
}
.bd-top__unit b{
  display:block;
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-size:calc(14 * var(--u)); line-height:1; text-transform:uppercase; color:var(--ink);
}
.bd-top__unit span{
  display:block; margin-top:calc(4 * var(--u));
  font-family:var(--font-mono); font-size:calc(7 * var(--u));
  letter-spacing:.14em; color:var(--ink-3);
}
.bd-search{
  margin-left:calc(10 * var(--u));
  display:flex; align-items:center; gap:calc(9 * var(--u));
  width:calc(300 * var(--u)); height:calc(30 * var(--u));
  padding:0 calc(12 * var(--u));
  border:1px solid var(--line-2); border-radius:calc(7 * var(--u));
  background:var(--sunken);
  color:var(--ink-3);
  font-size:calc(11 * var(--u));
}
.bd-search svg{width:calc(13 * var(--u)); height:calc(13 * var(--u)); stroke:currentColor; fill:none; stroke-width:1.6; flex:none}
.bd-search kbd{
  margin-left:auto; font-family:var(--font-mono); font-size:calc(7 * var(--u));
  border:1px solid var(--line-2); border-radius:calc(4 * var(--u));
  padding:calc(2 * var(--u)) calc(5 * var(--u)); color:var(--ink-4);
}
.bd-top__right{margin-left:auto; display:flex; align-items:center; gap:calc(24 * var(--u))}

/* seletor de tema: o mesmo segmentado do rodapé da home */
.bd-theme{
  display:flex; height:calc(26 * var(--u)); border-radius:calc(13 * var(--u));
  background:var(--sunken); border:1px solid var(--line);
  padding:calc(2 * var(--u));
}
.bd-theme button{
  display:flex; align-items:center; gap:calc(5 * var(--u));
  height:100%; padding:0 calc(10 * var(--u)); border-radius:calc(11 * var(--u));
  font-family:var(--font-mono); font-size:calc(6.6 * var(--u));
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
  transition:background-color .2s ease, color .2s ease;
}
.bd-theme button svg{width:calc(11 * var(--u)); height:calc(11 * var(--u)); stroke:currentColor; fill:none; stroke-width:1.5}
.bd-theme button:hover{color:var(--ink-2)}
.bd-theme button.is-on{background:var(--panel); color:var(--ink); box-shadow:var(--shadow)}
:root[data-theme="dark"] .bd-theme button.is-on{background:var(--active)}

.bd-live{
  display:flex; align-items:center; gap:calc(7 * var(--u));
  font-family:var(--font-mono); font-size:calc(7.4 * var(--u));
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
}
.bd-live i{
  display:block; width:calc(6 * var(--u)); height:calc(6 * var(--u)); border-radius:50%;
  background:var(--ok); box-shadow:0 0 calc(7 * var(--u)) rgba(64,209,122,.55);
  animation:bd-pulse 2.4s ease-in-out infinite;
}
@keyframes bd-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.68)}}
.bd-clock{
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' var(--disp-wght);
  font-size:calc(20 * var(--u)); line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.bd-clock small{font-size:calc(11 * var(--u)); color:var(--ink-3); margin-left:calc(3 * var(--u))}

/* ================================================================= grade */
.bd-scroll{flex:1; overflow-y:auto; padding:calc(18 * var(--u)) calc(20 * var(--u)) calc(28 * var(--u))}

.bd-kpis{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:calc(14 * var(--u));
  margin-bottom:calc(14 * var(--u));
}
.bd-kpi{
  position:relative; overflow:hidden;
  padding:calc(15 * var(--u)) calc(16 * var(--u)) calc(13 * var(--u));
  background:var(--panel); border:1px solid var(--line); border-radius:calc(10 * var(--u));
  box-shadow:var(--shadow);
  transition:border-color .25s ease, background-color .25s ease;
}
.bd-kpi:hover{border-color:var(--line-2); background:var(--panel-2)}
.bd-kpi__label{font-family:var(--font-mono); font-size:calc(7 * var(--u)); letter-spacing:.14em; color:var(--ink-3)}
.bd-kpi__v{
  display:flex; align-items:baseline; gap:calc(3 * var(--u));
  margin-top:calc(10 * var(--u));
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' var(--disp-wght);
  font-size:calc(34 * var(--u)); line-height:1; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.bd-kpi__v em{font-style:normal; font-size:calc(13 * var(--u)); color:var(--ink-2)}
.bd-kpi__nota{
  display:flex; align-items:center; gap:calc(6 * var(--u));
  margin-top:calc(9 * var(--u));
  font-size:calc(10 * var(--u)); color:var(--ink-3);
}
.bd-kpi__nota i{display:block; width:calc(5 * var(--u)); height:calc(5 * var(--u)); border-radius:50%; background:var(--ink-3); flex:none}
.bd-kpi[data-tom="ok"] .bd-kpi__nota i{background:var(--ok)}
.bd-kpi[data-tom="atencao"] .bd-kpi__nota i{background:var(--warn)}
.bd-kpi[data-tom="alerta"] .bd-kpi__nota i{background:var(--crit)}
.bd-kpi__spark{position:absolute; right:0; bottom:0; width:calc(120 * var(--u)); height:calc(44 * var(--u)); opacity:.65}

.bd-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:calc(14 * var(--u))}
.bd-panel{
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:calc(10 * var(--u));
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:border-color .35s ease, box-shadow .35s ease;
}
.bd-panel.is-flash{border-color:var(--blue); box-shadow:0 0 0 calc(3 * var(--u)) rgba(10,22,200,.14)}
.bd-panel--wide{grid-column:span 2}
.bd-panel__head{
  display:flex; align-items:center; gap:calc(10 * var(--u));
  padding:calc(13 * var(--u)) calc(16 * var(--u));
  border-bottom:1px solid var(--line);
}
.bd-panel__head h2{
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-size:calc(13 * var(--u)); line-height:1; text-transform:uppercase; color:var(--ink);
  font-weight:normal;
}
.bd-panel__head .sub{font-family:var(--font-mono); font-size:calc(7 * var(--u)); letter-spacing:.14em; color:var(--ink-3)}
.bd-panel__head .right{margin-left:auto; display:flex; align-items:center; gap:calc(10 * var(--u))}
.bd-chip{
  font-family:var(--font-mono); font-size:calc(6.8 * var(--u)); letter-spacing:.12em; text-transform:uppercase;
  padding:calc(4 * var(--u)) calc(8 * var(--u));
  border:1px solid var(--line-2); border-radius:99px; color:var(--ink-2);
  white-space:nowrap;
}
.bd-chip--ok{border-color:color-mix(in srgb, var(--ok) 45%, transparent); color:var(--ok)}
.bd-chip--warn{border-color:color-mix(in srgb, var(--warn) 45%, transparent); color:var(--warn)}
.bd-chip--crit{border-color:color-mix(in srgb, var(--crit) 50%, transparent); color:var(--crit)}
.bd-panel__body{padding:calc(16 * var(--u)); flex:1; display:flex; flex-direction:column}
.bd-panel--full{grid-column:1 / -1}

/* ================================================================= ritmo da linha */
.bd-ritmo{position:relative; flex:1; min-height:calc(210 * var(--u))}
.bd-ritmo canvas, .bd-mapa canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.bd-ritmo__legend{
  display:flex; align-items:center; gap:calc(18 * var(--u));
  margin-top:calc(12 * var(--u));
  font-family:var(--font-mono); font-size:calc(7 * var(--u)); letter-spacing:.12em; color:var(--ink-3);
}
.bd-ritmo__legend span{display:flex; align-items:center; gap:calc(6 * var(--u))}
.bd-ritmo__legend i{display:block; width:calc(12 * var(--u)); height:calc(2 * var(--u)); border-radius:99px}
.bd-ritmo__legend .l-serie{background:var(--ch-line)}
.bd-ritmo__legend .l-faixa{background:var(--ch-band); height:calc(8 * var(--u)); border:1px solid var(--line)}
.bd-ritmo__legend .l-parada{background:var(--crit)}

/* ================================================================= fontes + cadeia */
.bd-fonte{
  display:grid; grid-template-columns:calc(14 * var(--u)) 1fr auto;
  align-items:center; gap:calc(11 * var(--u));
  padding:calc(11 * var(--u)) 0;
  border-bottom:1px solid var(--line);
}
.bd-fonte:first-child{padding-top:0}
.bd-fonte__dot{width:calc(7 * var(--u)); height:calc(7 * var(--u)); border-radius:50%; background:var(--ok); box-shadow:0 0 calc(7*var(--u)) rgba(64,209,122,.45)}
.bd-fonte--parcial .bd-fonte__dot{background:var(--warn); box-shadow:0 0 calc(7*var(--u)) rgba(255,176,32,.45)}
.bd-fonte__n b{
  display:block;
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-size:calc(13 * var(--u)); text-transform:uppercase; color:var(--ink); font-weight:normal;
}
.bd-fonte__n span{font-family:var(--font-mono); font-size:calc(6.8 * var(--u)); letter-spacing:.12em; color:var(--blue)}
.bd-fonte__c{
  font-family:var(--font-mono); font-size:calc(9.5 * var(--u)); color:var(--ink-2);
  font-variant-numeric:tabular-nums; text-align:right;
}
.bd-fonte__c em{font-style:normal; color:var(--ink-3); font-size:calc(7.4 * var(--u)); display:block; letter-spacing:.1em}

.bd-cadeia{margin-top:auto; padding-top:calc(18 * var(--u)); border-top:1px solid var(--line)}
.bd-cadeia__t{font-family:var(--font-mono); font-size:calc(6.8 * var(--u)); letter-spacing:.14em; color:var(--ink-3)}
.bd-cadeia__track{position:relative; margin-top:calc(14 * var(--u)); display:flex; justify-content:space-between}
.bd-cadeia__rail{position:absolute; left:0; right:0; top:calc(5 * var(--u)); height:1px; background:var(--line-2)}
.bd-cadeia__step{position:relative; display:flex; flex-direction:column; align-items:center; gap:calc(9 * var(--u)); width:calc(48 * var(--u))}
.bd-cadeia__step i{
  display:block; width:calc(11 * var(--u)); height:calc(11 * var(--u)); border-radius:50%;
  background:var(--panel); border:1px solid var(--line-2);
  transition:background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.bd-cadeia__step.is-on i{background:var(--ok); border-color:var(--ok); box-shadow:0 0 calc(9*var(--u)) rgba(64,209,122,.55)}
.bd-cadeia__step b{
  font-family:var(--font-mono); font-size:calc(6.2 * var(--u)); letter-spacing:.1em;
  color:var(--ink-3); font-weight:400; text-align:center; white-space:nowrap;
  transition:color .3s ease;
}
.bd-cadeia__step.is-on b{color:var(--ink)}

/* ================================================================= mapa de zonas */
.bd-mapa{position:relative; height:calc(346 * var(--u))}
.bd-mapa__legend{
  display:flex; flex-wrap:wrap; align-items:center; gap:calc(16 * var(--u));
  margin-top:calc(13 * var(--u));
  font-family:var(--font-mono); font-size:calc(6.8 * var(--u)); letter-spacing:.12em; color:var(--ink-3);
}
.bd-mapa__legend span{display:flex; align-items:center; gap:calc(6 * var(--u))}
.bd-mapa__legend i{display:block; width:calc(9 * var(--u)); height:calc(9 * var(--u)); border-radius:calc(2 * var(--u)); border:1px solid transparent}
.bd-mapa__legend .z-op{background:var(--z-op-fill); border-color:var(--z-op-line)}
.bd-mapa__legend .z-ri{background:var(--z-ri-fill); border-color:var(--z-ri-line)}
.bd-mapa__legend .z-in{background:var(--z-in-fill); border-color:var(--z-in-line)}
.bd-mapa__legend .z-fo{background:var(--z-fo-fill); border:1px dashed var(--z-fo-line)}

/* planta baixa: o terreno, a cerca, as vias e o fluxo */
:root{
  --pl-terreno:  #E4E8DE;
  --pl-cerca:    #A9B4A0;
  --pl-via:      #3A4038;
  --pl-via-eixo: #EDEFE8;
  --pl-patio:    #CDD2C6;
  --pl-baia:     #E0A62E;
  --pl-flow:     #2E9B4F;
  --pl-cota:     #93A08C;
}
:root[data-theme="dark"]{
  --pl-terreno:  #101310;
  --pl-cerca:    #2E3430;
  --pl-via:      #23281F;
  --pl-via-eixo: #4C534A;
  --pl-patio:    #1B1F1A;
  --pl-baia:     #8A6410;
  --pl-flow:     #40D17A;
  --pl-cota:     #7E8C79;   /* o subtítulo da planta: com alfa sumia sobre o terreno escuro */
}
.bd-mapa__legend .z-vi{background:var(--pl-via); border-color:var(--pl-via)}
.bd-mapa__legend .z-fl{background:var(--pl-flow); border-color:var(--pl-flow)}

/* ================================================================= alertas */
.bd-alertas__list{flex:1; max-height:calc(360 * var(--u)); overflow-y:auto}
.bd-alerta{
  position:relative;
  padding:calc(13 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)) calc(20 * var(--u));
  border-bottom:1px solid var(--line);
  transition:background-color .22s ease;
}
.bd-alerta:hover{background:var(--panel-2)}
.bd-alerta::before{
  content:''; position:absolute; left:calc(10 * var(--u)); top:calc(16 * var(--u));
  width:calc(4 * var(--u)); height:calc(4 * var(--u)); border-radius:50%;
  background:var(--ink-3);
}
.bd-alerta[data-grau="critico"]::before{background:var(--crit); box-shadow:0 0 calc(8*var(--u)) rgba(252,94,0,.55); animation:bd-pulse 1.8s ease-in-out infinite}
.bd-alerta[data-grau="alto"]::before{background:var(--warn)}
.bd-alerta__top{display:flex; align-items:baseline; gap:calc(9 * var(--u)); font-family:var(--font-mono); font-size:calc(7 * var(--u)); letter-spacing:.12em; color:var(--ink-3)}
.bd-alerta__top .hora{color:var(--ink)}
.bd-alerta__top .estado{margin-left:auto}
.bd-alerta[data-estado="ABERTO"] .estado{color:var(--crit)}
.bd-alerta[data-estado="EM TRATAMENTO"] .estado{color:var(--warn)}
.bd-alerta[data-estado="TRATADO"] .estado{color:var(--ok)}
.bd-alerta__t{margin-top:calc(8 * var(--u)); font-size:calc(12.5 * var(--u)); font-weight:500; color:var(--ink)}
.bd-alerta__x{margin-top:calc(5 * var(--u)); font-size:calc(10.5 * var(--u)); line-height:1.4; color:var(--ink-2)}
.bd-alerta__ev{display:flex; flex-wrap:wrap; gap:calc(5 * var(--u)); margin-top:calc(9 * var(--u))}
.bd-alerta__ev span{
  font-family:var(--font-mono); font-size:calc(6.4 * var(--u)); letter-spacing:.1em; text-transform:uppercase;
  padding:calc(3 * var(--u)) calc(6 * var(--u));
  border:1px solid var(--line-2); border-radius:calc(4 * var(--u)); color:var(--ink-3);
  transition:border-color .2s ease, color .2s ease;
}
.bd-alerta:hover .bd-alerta__ev span{border-color:var(--ink-4); color:var(--ink-2)}

/* ================================================================= trilha ao vivo */
.bd-feed__list{height:calc(178 * var(--u)); overflow:hidden; position:relative}
.bd-feed__row{
  display:grid; grid-template-columns:calc(46 * var(--u)) calc(16 * var(--u)) calc(74 * var(--u)) 1fr;
  align-items:center; gap:calc(10 * var(--u));
  padding:calc(8 * var(--u)) 0;
  border-bottom:1px solid var(--line);
  font-size:calc(10.5 * var(--u)); color:var(--ink-2);
}
.bd-feed__row .h{font-family:var(--font-mono); font-size:calc(8.6 * var(--u)); color:var(--ink); font-variant-numeric:tabular-nums}
.bd-feed__row .k{font-family:var(--font-mono); font-size:calc(6.6 * var(--u)); letter-spacing:.1em; color:var(--ink-3)}
.bd-feed__row i{display:block; width:calc(9 * var(--u)); height:calc(9 * var(--u)); border-radius:calc(2 * var(--u))}
.bd-feed__row[data-f="camera"] i{background:var(--blue)}
.bd-feed__row[data-f="cracha"] i{background:#6A46F0}
.bd-feed__row[data-f="sensor"] i{background:var(--ok)}

/* ================================================================= Central IA */
.bd-ia{border-color:color-mix(in srgb, var(--ok) 26%, var(--line))}
.bd-ia .bd-panel__head{border-bottom-color:color-mix(in srgb, var(--ok) 20%, var(--line))}
.bd-ia__sug{display:flex; flex-wrap:wrap; gap:calc(7 * var(--u)); margin-bottom:calc(14 * var(--u))}
.bd-ia__sug button{
  font-size:calc(10.5 * var(--u));
  padding:calc(7 * var(--u)) calc(12 * var(--u));
  border:1px solid var(--line-2); border-radius:99px; color:var(--ink-2);
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
.bd-ia__sug button:hover, .bd-ia__sug button.is-on{
  border-color:color-mix(in srgb, var(--ok) 55%, transparent);
  color:var(--ok); background:color-mix(in srgb, var(--ok) 8%, transparent);
}

.bd-ia__q{
  display:flex; align-items:baseline; gap:calc(10 * var(--u));
  padding:calc(13 * var(--u)) calc(14 * var(--u));
  background:var(--sunken); border:1px solid var(--line); border-radius:calc(8 * var(--u));
}
.bd-ia__q .caret{font-family:var(--font-mono); font-size:calc(12 * var(--u)); color:var(--ok)}
.bd-ia__q .txt{
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-size:calc(15 * var(--u)); line-height:1.25; text-transform:uppercase; color:var(--ink);
}
.bd-ia__q .cur{display:inline-block; width:calc(7 * var(--u)); height:calc(13 * var(--u)); background:var(--ok); vertical-align:calc(-1.5 * var(--u)); margin-left:calc(3 * var(--u))}

.bd-ia__body{display:grid; grid-template-columns:1fr calc(228 * var(--u)); gap:calc(22 * var(--u)); margin-top:calc(16 * var(--u)); flex:1}
/* a coluna da resposta ocupa a altura da faixa e empurra o aviso para o pé:
   sem isso sobra um vazio quando o bloco vizinho é mais alto */
.bd-ia__body > div:first-child{display:flex; flex-direction:column}
.bd-ia__lbl{font-family:var(--font-mono); font-size:calc(6.8 * var(--u)); letter-spacing:.14em; color:var(--ink-3)}
.bd-ia__a{margin-top:calc(10 * var(--u))}
.bd-ia__a p{font-size:calc(11.8 * var(--u)); line-height:1.55; color:var(--ink-2)}
:root:not([data-theme="dark"]) .bd-ia__a p{color:#2E2E2E}
.bd-ia__a p + p{margin-top:calc(10 * var(--u))}
.bd-ia__ev{border-left:1px solid color-mix(in srgb, var(--ok) 32%, transparent); padding-left:calc(16 * var(--u))}
.bd-ia__ev li{
  position:relative; padding:calc(8 * var(--u)) 0 calc(8 * var(--u)) calc(17 * var(--u));
  border-bottom:1px solid var(--line);
  font-size:calc(10.2 * var(--u)); line-height:1.4; color:var(--ink-2);
}
.bd-ia__ev li::before{
  content:''; position:absolute; left:0; top:calc(13 * var(--u));
  width:calc(7 * var(--u)); height:calc(4 * var(--u));
  border-left:1.2px solid var(--ok); border-bottom:1.2px solid var(--ok);
  transform:rotate(-45deg) scale(0); transform-origin:center;
  transition:transform .28s cubic-bezier(.2,.9,.3,1.4);
}
.bd-ia__ev li.is-on::before{transform:rotate(-45deg) scale(1)}
.bd-ia__aviso{margin-top:auto; padding-top:calc(16 * var(--u)); font-size:calc(9.6 * var(--u)); line-height:1.45; color:var(--ink-3)}

/* ================================================================= relatório */
.bd-rel{display:flex; align-items:center; gap:calc(18 * var(--u)); padding-bottom:calc(14 * var(--u)); border-bottom:1px solid var(--line)}
.bd-rel__ring{position:relative; width:calc(78 * var(--u)); height:calc(78 * var(--u)); flex:none}
.bd-rel__ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.bd-rel__ring circle{fill:none; stroke-width:calc(5 * var(--u))}
.bd-rel__ring .bg{stroke:var(--line)}
.bd-rel__ring .fg{stroke:var(--blue); stroke-linecap:round; transition:stroke-dashoffset 1.2s cubic-bezier(.3,.8,.3,1)}
.bd-rel__ring b{
  position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' var(--disp-wght);
  font-size:calc(15 * var(--u)); color:var(--ink); font-variant-numeric:tabular-nums;
}
.bd-rel__meta .k{font-family:var(--font-mono); font-size:calc(6.8 * var(--u)); letter-spacing:.14em; color:var(--ink-3)}
.bd-rel__meta b{display:block; margin-top:calc(7 * var(--u)); font-size:calc(15 * var(--u)); font-weight:500; color:var(--ink)}
.bd-rel__meta p{margin-top:calc(6 * var(--u)); font-size:calc(10.4 * var(--u)); line-height:1.45; color:var(--ink-2)}

.bd-rel__list{margin-top:calc(13 * var(--u))}
.bd-rel__list li{
  position:relative; padding:calc(8 * var(--u)) 0 calc(8 * var(--u)) calc(20 * var(--u));
  border-bottom:1px solid var(--line);
  font-size:calc(10.6 * var(--u)); color:var(--ink-2);
}
.bd-rel__list li::before{
  content:''; position:absolute; left:calc(2 * var(--u)); top:calc(13 * var(--u));
  width:calc(7 * var(--u)); height:calc(4 * var(--u));
  border-left:1.2px solid var(--blue); border-bottom:1.2px solid var(--blue);
  transform:rotate(-45deg) scale(0); transform-origin:center;
  transition:transform .3s cubic-bezier(.2,.9,.3,1.4);
}
.bd-rel__list li.is-on::before{transform:rotate(-45deg) scale(1)}
.bd-rel__list li.is-wait{color:var(--ink-3)}
.bd-rel__list li.is-wait::after{
  content:'aguardando o fim do turno';
  display:block; margin-top:calc(3 * var(--u));
  font-family:var(--font-mono); font-size:calc(6.4 * var(--u)); letter-spacing:.1em; color:var(--ink-4);
}
.bd-rel__btn{
  display:flex; align-items:center; justify-content:center; gap:calc(8 * var(--u));
  width:100%; margin-top:calc(14 * var(--u));
  height:calc(34 * var(--u));
  border:1px solid var(--line-2); border-radius:calc(7 * var(--u));
  font-family:var(--font-mono); font-size:calc(7.6 * var(--u)); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-2);
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.bd-rel__btn:hover{background:var(--ink); color:var(--panel); border-color:var(--ink)}

/* ================================================================= central de CFTV
   O mosaico e sempre ESCURO, nos dois temas: tela de camera e imagem escura, e um
   mosaico claro pareceria um grid de cards vazios em vez de video. */
.cf-unidades{display:flex; flex-wrap:wrap; gap:calc(6 * var(--u))}
.cf-unidades button{
  display:flex; align-items:center; gap:calc(6 * var(--u));
  padding:calc(6 * var(--u)) calc(10 * var(--u));
  border:1px solid var(--line-2); border-radius:99px;
  font-family:var(--font-mono); font-size:calc(6.8 * var(--u));
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  white-space:nowrap;
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
.cf-unidades button i{
  display:block; width:calc(5 * var(--u)); height:calc(5 * var(--u)); border-radius:50%;
  background:var(--ok);
}
.cf-unidades button[data-estado="implantação"] i{background:var(--warn)}
.cf-unidades button:hover{color:var(--ink-2); border-color:var(--ink-4)}
.cf-unidades button.is-on{background:var(--ink); border-color:var(--ink); color:var(--panel)}
.cf-unidades button.is-on i{box-shadow:0 0 calc(6 * var(--u)) currentColor}

.cf-cadeia{margin-top:calc(12 * var(--u))}
/* quebra em duas linhas em vez de rolar: com seis locais o último sumia fora da
   borda, e cadeia com elo escondido não comunica cadeia */
.cf-cadeia__track{display:flex; flex-wrap:wrap; gap:calc(4 * var(--u))}
.cf-cadeia__track button{
  display:flex; align-items:baseline; gap:calc(5 * var(--u));
  padding:calc(5 * var(--u)) calc(8 * var(--u));
  border-radius:calc(5 * var(--u));
  font-family:var(--font-mono); font-size:calc(6.6 * var(--u));
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
  white-space:nowrap;
  transition:background-color .2s ease, color .2s ease;
}
.cf-cadeia__track button em{font-style:normal; color:var(--ink-4)}
.cf-cadeia__track button:hover{background:var(--hover); color:var(--ink-2)}
.cf-cadeia__track button.is-on{background:var(--active); color:var(--ink)}
.cf-cadeia__track button.is-on em{color:var(--blue)}

.cf-local{
  margin-top:calc(10 * var(--u));
  font-size:calc(10.4 * var(--u)); line-height:1.4; color:var(--ink-2);
}
.cf-local b{color:var(--ink); font-weight:500}

.cf-wall{
  display:grid; grid-template-columns:1fr 1fr; gap:calc(7 * var(--u));
  margin-top:calc(11 * var(--u));
}

.cam{
  position:relative; display:block; width:100%;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:calc(6 * var(--u));
  border:1px solid var(--line-2);
  background:radial-gradient(125% 105% at 50% 26%, #1F242B 0%, #14171C 62%, #0A0C0F 100%);
  text-align:left;
  transition:border-color .25s ease, transform .25s ease;
}
.cam:hover{border-color:var(--ok); transform:translateY(calc(-1 * var(--u)))}

/* a silhueta da câmera, ao fundo */
.cam__sil{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  width:52%; height:auto;
  fill:#FFFFFF; opacity:.055;
  pointer-events:none;
}
/* varredura fina: é o que faz o retângulo ler como tela, e não como caixa vazia */
.cam__grade{
  position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px calc(3 * var(--u)));
}

.cam__top, .cam__bot{
  position:absolute; left:calc(7 * var(--u)); right:calc(7 * var(--u));
  display:flex; align-items:center; gap:calc(5 * var(--u));
  font-family:var(--font-mono); font-size:calc(6 * var(--u));
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.cam__top{top:calc(6 * var(--u))}
.cam__bot{bottom:calc(6 * var(--u))}
.cam__top b, .cam__bot b{margin-left:auto; font-weight:400; color:rgba(255,255,255,.82)}
.cam__bot b{margin-left:0; color:#fff; font-weight:500; letter-spacing:.06em}
.cam__bot .ts{margin-left:auto; font-variant-numeric:tabular-nums; color:rgba(255,255,255,.5)}
.cam__rec{
  display:block; width:calc(5 * var(--u)); height:calc(5 * var(--u)); border-radius:50%;
  background:#FF3B30; box-shadow:0 0 calc(6 * var(--u)) rgba(255,59,48,.85);
  animation:bd-pulse 2s ease-in-out infinite;
}

/* a marca e o play, à frente da silhueta */
.cam__mark{
  position:absolute; left:50%; top:calc(50% - 27 * var(--u)); transform:translateX(-50%);
  display:flex; align-items:center; gap:calc(5 * var(--u));
  font-family:var(--font-display);
  font-variation-settings:'wdth' var(--disp-wdth),'wght' 760;
  font-size:calc(11 * var(--u)); letter-spacing:.06em;
  color:rgba(255,255,255,.42);
  pointer-events:none;
}
.cam__mark i{
  display:block; width:calc(9 * var(--u)); height:calc(11 * var(--u));
  background:var(--ok);
  -webkit-mask:var(--bolt-mask) center/contain no-repeat;
  mask:var(--bolt-mask) center/contain no-repeat;
}
.cam__play{
  position:absolute; left:50%; top:calc(50% + 6 * var(--u)); transform:translate(-50%,-50%);
  /* 27u acima para a marca e 6u abaixo para o play: com os dois no centro eles
     se sobrepunham, e o TBR ficava atrás do círculo */
  width:calc(30 * var(--u)); height:calc(30 * var(--u));
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.30);
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(2px);
  transition:transform .25s cubic-bezier(.2,.9,.3,1.4), background-color .25s ease, border-color .25s ease;
  pointer-events:none;
}
.cam__play svg{width:calc(11 * var(--u)); height:calc(11 * var(--u)); fill:#fff; margin-left:calc(2 * var(--u))}
.cam:hover .cam__play{transform:translate(-50%,-50%) scale(1.12); background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.55)}

/* a etiqueta da unidade, no mosaico das três */
.cam__uni{
  position:absolute; left:calc(7 * var(--u)); top:calc(6 * var(--u));
  padding:calc(3 * var(--u)) calc(6 * var(--u));
  border-radius:calc(3 * var(--u));
  background:rgba(255,255,255,.12);
  font-family:var(--font-mono); font-size:calc(6 * var(--u));
  letter-spacing:.1em; text-transform:uppercase; color:#fff;
}

/* o que NAO tem câmera: dito, e não escondido */
.cam--off{
  background:none;
  border:1px dashed var(--line-2);
  display:grid; place-items:center;
  padding:calc(10 * var(--u));
  cursor:default;
}
.cam--off:hover{border-color:var(--line-2); transform:none}
.cam__off{text-align:center}
.cam__off span{
  display:block;
  font-family:var(--font-mono); font-size:calc(6.2 * var(--u));
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-4);
}
.cam__off b{
  display:block; margin-top:calc(5 * var(--u));
  font-size:calc(9.2 * var(--u)); line-height:1.35; font-weight:400; color:var(--ink-3);
}

/* somar mais uma unidade ao mosaico */
.cam--add{
  background:none; border:1px dashed var(--line-2);
  display:grid; place-items:center;
  color:var(--ink-3);
  font-family:var(--font-mono); font-size:calc(6.4 * var(--u));
  letter-spacing:.12em; text-transform:uppercase;
}
.cam--add:hover{border-color:var(--ok); color:var(--ok); transform:none}

.cf-aviso{
  margin-top:auto; padding-top:calc(12 * var(--u));
  font-size:calc(9.4 * var(--u)); line-height:1.45; color:var(--ink-3);
}

/* ================================================================= trilho recolhido
   Só a --rail muda: a largura do trilho e o recuo da área principal saem dela, então
   recolher é trocar um número. Recolhido sobra o raio no topo e a coluna de ícones. */
:root{ --rail-min: calc(64 * var(--u)); }
:root[data-rail="min"]{ --rail: var(--rail-min); }

.bd-rail, .bd-main{transition:width .34s cubic-bezier(.4,0,.2,1), left .34s cubic-bezier(.4,0,.2,1)}

.bd-rail__toggle{
  position:absolute; z-index:70;
  right:calc(-12 * var(--u)); top:calc(36 * var(--u));
  width:calc(24 * var(--u)); height:calc(24 * var(--u));
  display:grid; place-items:center;
  border-radius:50%;
  background:var(--panel); border:1px solid var(--line-2);
  color:var(--ink-2);
  box-shadow:var(--shadow);
  transition:color .2s ease, border-color .2s ease, background-color .2s ease;
}
.bd-rail__toggle svg{width:calc(13 * var(--u)); height:calc(13 * var(--u)); stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; transition:transform .34s cubic-bezier(.4,0,.2,1)}
.bd-rail__toggle:hover{color:var(--ink); border-color:var(--ink-4)}
:root[data-rail="min"] .bd-rail__toggle svg{transform:rotate(180deg)}

:root[data-rail="min"] .bd-rail__name,
:root[data-rail="min"] .bd-nav__label,
:root[data-rail="min"] .bd-nav button .lbl,
:root[data-rail="min"] .bd-rail__who{display:none}
:root[data-rail="min"] .bd-rail__brand{justify-content:center; padding:0}
:root[data-rail="min"] .bd-nav{padding-left:calc(8 * var(--u)); padding-right:calc(8 * var(--u))}
:root[data-rail="min"] .bd-nav button{justify-content:center; padding-left:0; padding-right:0; height:calc(38 * var(--u))}
:root[data-rail="min"] .bd-nav button.is-on::before{left:calc(-8 * var(--u))}
:root[data-rail="min"] .bd-rail__user{justify-content:center; padding-left:0; padding-right:0}

/* recolhido, o nome do item vira etiqueta no hover: ícone sozinho não se explica */
:root[data-rail="min"] .bd-nav button::after{
  content:attr(data-nome);
  position:absolute; z-index:80;
  left:calc(100% + 14 * var(--u)); top:50%; transform:translateY(-50%);
  padding:calc(6 * var(--u)) calc(9 * var(--u)) calc(7 * var(--u));
  border-radius:calc(5 * var(--u));
  background:var(--ink); color:var(--panel);
  font-family:var(--font-mono); font-size:calc(6.8 * var(--u)); line-height:1.1;
  letter-spacing:.12em; text-transform:uppercase; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
:root[data-rail="min"] .bd-nav button:hover::after{opacity:1}

/* ================================================================= a fenda
   A barra do topo afina em volta do seletor de tema e volta ao normal. O recorte é
   feito de três peças: o rebaixo (a faixa de fundo que entra na barra) e duas
   concordâncias CÔNCAVAS nas pontas — cada uma é um quarto de disco desenhado por
   radial-gradient, com o fio de 1px embutido no próprio gradiente, para o contorno
   correr contínuo do reto para a curva. Sem elas o corte vira degrau, e degrau em
   barra de aplicação parece defeito, não decisão. */
.bd-slot{
  --notch: calc(17 * var(--u));
  position:relative;
  align-self:flex-start;
  display:flex; align-items:center;
  height:calc(58 * var(--u) - var(--notch));
  padding:0 calc(14 * var(--u));
}
.bd-slot__notch{
  position:absolute; left:0; right:0; top:100%;
  height:var(--notch);
  background:var(--bg);
  border-top:1px solid var(--line);
  pointer-events:none;
}
.bd-slot__notch::before, .bd-slot__notch::after{
  content:''; position:absolute; top:0; bottom:0; width:var(--notch);
}
.bd-slot__notch::before{
  left:calc(-1 * var(--notch));
  background:radial-gradient(circle at top left,
    transparent 0 calc(var(--notch) - 1px),
    var(--line) calc(var(--notch) - 1px) var(--notch),
    var(--bg) var(--notch));
}
.bd-slot__notch::after{
  right:calc(-1 * var(--notch));
  background:radial-gradient(circle at top right,
    transparent 0 calc(var(--notch) - 1px),
    var(--line) calc(var(--notch) - 1px) var(--notch),
    var(--bg) var(--notch));
}

/* ================================================================= janelas estreitas */
@media (max-width: 1180px){
  .bd-kpis{grid-template-columns:repeat(2, 1fr)}
  .bd-grid{grid-template-columns:1fr}
  .bd-panel--full{grid-column:auto}
  .bd-panel--wide{grid-column:auto}
  .bd-ia__body{grid-template-columns:1fr}
  .bd-ia__ev{border-left:0; border-top:1px solid color-mix(in srgb, var(--ok) 32%, transparent); padding-left:0; padding-top:calc(12 * var(--u))}
}

/* modo determinístico para as capturas: nada pisca, nada anda */
.is-still *{animation:none !important; transition:none !important}