/* ==========================================================================
   Centro de operações
   ==========================================================================
   Linguagem visual vinda do desenho "Sentinela NOC": paleta, escala de
   superfícies, raios e animações são os de lá. O que mudou foi o CONTEÚDO —
   aqui só entra número medido (ver a migração 0018).

   Uma regra de cor manda em tudo: vermelho é reservado para offline e limiar
   estourado. Se qualquer coisa pode ficar vermelha, nada chama atenção.

   Fonte em ASCII de propósito. Este arquivo já foi corrompido uma vez por uma
   reescrita do PowerShell que estragou travessao e acento maiusculo; texto que
   aparece na tela mora no HTML, aqui nao entra caractere especial.
   ========================================================================== */

:root {
  --bg:      #06080d;
  --pnl:     rgba(255, 255, 255, .045);
  --pnl2:    rgba(255, 255, 255, .026);
  --bd:      rgba(255, 255, 255, .085);
  --bd2:     rgba(255, 255, 255, .05);
  --fg:      #e9eef6;
  --fg2:     #8b97ab;
  --fg3:     #5c6a7e;
  --ok:      #35d6a4;
  --warn:    #f5b544;
  --crit:    #ff5c6c;
  --info:    #6aa8ff;
  --vio:     #a78bfa;
  --hov:     rgba(255, 255, 255, .07);
  --sh:      0 12px 34px rgba(0, 0, 0, .34);
  --sh-alta: 0 24px 60px rgba(0, 0, 0, .55);
  --grid:    rgba(255, 255, 255, .024);
  --chrome:  rgba(9, 12, 19, .78);

  /* Superficie OPACA, para o que o sistema operacional desenha por conta —
     a lista suspensa de um <select>. Ela nao compoe com o fundo da pagina: uma
     cor com alfa vira quase-branco sobre o popup do Windows, e o texto some. */
  --pop:     #151922;

  --r-p: 8px;
  --r-m: 12px;
  --r-g: 16px;

  /* Manrope e JetBrains Mono sao as do desenho. NAO sao carregadas do Google:
     um painel de operacao precisa abrir com a rede da loja ruim ou sem internet,
     e uma fonte remota que nao chega troca o texto inteiro de metrica no meio do
     turno. A pilha do sistema no Windows 11 (Segoe UI Variable) tem proporcao
     parecida. Para usar as originais, sirva os .woff2 de dashboard/vendor/. */
  --fonte: "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, -apple-system, sans-serif;
  --mono: "Cascadia Mono", ui-monospace, "JetBrains Mono", Consolas, monospace;
}

html[data-tema="light"] {
  --bg:      #eef1f6;
  --pnl:     rgba(255, 255, 255, .94);
  --pnl2:    rgba(15, 23, 42, .032);
  --bd:      rgba(15, 23, 42, .11);
  --bd2:     rgba(15, 23, 42, .07);
  --fg:      #0e1626;
  --fg2:     #5b6879;
  --fg3:     #8593a5;
  --ok:      #0d9b74;
  --warn:    #a9720d;
  --crit:    #d21f37;
  --info:    #2563eb;
  --vio:     #7c3aed;
  --hov:     rgba(15, 23, 42, .055);
  --sh:      0 10px 26px rgba(15, 23, 42, .1);
  --sh-alta: 0 20px 48px rgba(15, 23, 42, .18);
  --grid:    rgba(15, 23, 42, .04);
  --chrome:  rgba(255, 255, 255, .82);
  --pop:     #ffffff;
}

/* A lista suspensa do <select> e desenhada pelo sistema, nao pela pagina: ela
   ignora backdrop-filter e nao compoe alfa com o que esta atras. Sem cor OPACA
   aqui, as opcoes ficavam cinza-escuro sobre cinza-escuro e so a selecionada
   (que o Windows pinta de azul) era legivel. */
select option {
  background-color: var(--pop);
  color: var(--fg);
}

select option:checked { font-weight: 600; }

* { box-sizing: border-box; }

/* O ESSENCIAL. `[hidden]` vale display:none pela folha do navegador, e qualquer
   `display:` de autor vence essa origem. Sem esta linha, `.painel` e `.modal`
   (que sao flex) NUNCA sumiam: ficavam empilhados sobre o dashboard, e o botao
   de fechar parecia nao funcionar mesmo com o JS marcando hidden = true. */
[hidden] { display: none !important; }

html, body { margin: 0; padding: 0; background: var(--bg); }

body {
  color: var(--fg);
  font: 13px/1.5 var(--fonte);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.015em; }
button { font-family: inherit; }
a { color: var(--info); text-decoration: none; }
a:hover { color: var(--vio); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

input { font-family: inherit; }
input::placeholder { color: var(--fg3); }

:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }

.mono { font-family: var(--mono); font-variant-ligatures: none; }

/* Numero medido nunca deve dancar de largura ao atualizar. */
.mono, .tira-valor strong, .cel-val { font-variant-numeric: tabular-nums; }

.ico { width: 15.5px; height: 15.5px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; }

@keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .32; transform: scale(.8); } }
@keyframes riseIn   { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes slideL   { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes popIn    { from { opacity: 0; transform: translate(-50%, -50%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%); } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* --------------------------------------------------------------- malha --- */
.malha {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* ------------------------------------------------------------- esqueleto --- */
.app {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  min-height: 100vh;
}

/* =========================================================== barra lateral === */
.lateral {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 12px;
  background: var(--chrome);
  backdrop-filter: blur(14px);
  border-right: 1px solid var(--bd2);
  overflow-y: auto;
}

.marca-app { display: flex; align-items: center; gap: 10px; padding: 2px 6px; }

.marca-selo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(150deg, var(--ok), var(--info));
  display: grid;
  place-items: center;
  color: #04120c;
  flex: 0 0 auto;
}

.marca-selo svg { width: 17px; height: 17px; }
.marca-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.marca-nome-app { font-size: 14px; font-weight: 800; letter-spacing: -.02em; }

.etiqueta-micro {
  font-size: 8.5px;
  letter-spacing: .12em;
  color: var(--fg3);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.secao-lateral {
  font-size: 8.5px;
  letter-spacing: .16em;
  color: var(--fg3);
  text-transform: uppercase;
  padding: 2px 6px;
}

.vistas { display: flex; flex-direction: column; gap: 2px; }
.vistas:empty { display: none; }

.vista {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 7px 9px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: none;
  color: var(--fg2);
  font-size: 12.5px;
  cursor: pointer;
  transition: background .12s, color .12s;
}

.vista:hover { background: var(--hov); color: var(--fg); }
.vista.ativa { background: var(--hov); border-color: var(--bd); color: var(--fg); font-weight: 600; }
.vista-rot { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.vista-num {
  font-size: 9.5px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--pnl2);
  color: var(--fg2);
}

.vista-num.ruim    { color: var(--crit); background: color-mix(in srgb, var(--crit) 15%, transparent); }
.vista-num.alerta  { color: var(--warn); background: color-mix(in srgb, var(--warn) 15%, transparent); }
.vista-num.zero    { color: var(--fg3); background: var(--pnl2); }

/* Ponto de marca na lista de marcas. */
.marca-cor { width: 7px; height: 7px; border-radius: 2px; flex: 0 0 auto; background: var(--info); }

.cartao-lateral {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11px 12px;
  background: var(--pnl);
  border: 1px solid var(--bd2);
  border-radius: var(--r-m);
}

.cl-topo { display: flex; align-items: center; justify-content: space-between; }
.cl-topo .secao-lateral { padding: 0; }
.cartao-lateral > .secao-lateral { padding: 0; }
.cl-numero { display: flex; align-items: baseline; gap: 6px; }
.cl-numero strong { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }
.cl-unidade { font-size: 10px; color: var(--fg3); }
.cl-nota { margin: 0; font-size: 9.5px; line-height: 1.45; color: var(--fg3); }

.lateral-pe { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }

.btn-lateral {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 9px;
  border-radius: 9px;
  border: 1px solid var(--bd2);
  background: var(--pnl2);
  color: var(--fg2);
  font-size: 12px;
  cursor: pointer;
}

.btn-lateral:hover { background: var(--hov); color: var(--fg); }

.usuario-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border-radius: 10px;
  background: var(--pnl);
  border: 1px solid var(--bd2);
}

.avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--info), var(--vio));
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  flex: 0 0 auto;
}

.usuario-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.usuario-nome { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================================================================= topo === */
.principal { min-width: 0; display: flex; flex-direction: column; }

.topo {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px;
  background: var(--chrome);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--bd2);
}

.topo-titulo { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
.topo-titulo h1 { font-size: 21px; letter-spacing: -.025em; }

.busca-caixa {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1 1 auto;
  max-width: 420px;
  padding: 0 11px;
  height: 34px;
  border-radius: 10px;
  background: var(--pnl2);
  border: 1px solid var(--bd2);
  color: var(--fg3);
}

.busca-caixa:focus-within { border-color: var(--info); background: var(--pnl); }

.busca-caixa input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font-size: 12.5px;
  outline: none;
}

.tecla {
  font-size: 9.5px;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--bd);
  color: var(--fg3);
}

.topo-estado { display: flex; align-items: center; gap: 7px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }

.selo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--bd2);
  background: var(--pnl2);
  font-size: 11px;
  color: var(--fg2);
  white-space: nowrap;
}

.selo b { font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.selo-ok     { border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.selo-ok b   { color: var(--ok); }
.selo-alerta { border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.selo-alerta b { color: var(--warn); }
.selo-ruim   { border-color: color-mix(in srgb, var(--crit) 34%, transparent); }
.selo-ruim b { color: var(--crit); }
.selo.zero   { border-color: var(--bd2); }
.selo.zero b { color: var(--fg3); }

.ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--fg3); flex: 0 0 auto; }
.ponto-ok     { background: var(--ok); animation: pulseDot 2.6s ease-in-out infinite; }
.ponto-alerta { background: var(--warn); }
.ponto-ruim   { background: var(--crit); animation: pulseDot 1.5s ease-in-out infinite; }

.btn-primario, .btn-secundario {
  border-radius: 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  white-space: nowrap;
  transition: filter .12s, background .12s, border-color .12s;
}

.btn-primario { background: var(--info); color: #fff; border: 1px solid transparent; }
.btn-primario:hover { filter: brightness(1.12); }
.btn-primario:disabled { opacity: .5; cursor: default; filter: none; }

.btn-secundario { background: var(--pnl2); color: var(--fg2); border: 1px solid var(--bd); }
.btn-secundario:hover { background: var(--hov); color: var(--fg); }

.btn-primario.largo, .btn-secundario.largo { width: 100%; padding: 11px; font-size: 13.5px; margin-top: 10px; }

.btn-icone {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--bd2);
  background: var(--pnl2);
  color: var(--fg2);
  cursor: pointer;
}

.btn-icone:hover { background: var(--hov); color: var(--fg); }

/* ================================================================= KPIs === */
.tiras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 10px;
  padding: 16px 22px 0;
}

.tira {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 15px 11px;
  background: var(--pnl);
  border: 1px solid var(--bd2);
  border-radius: var(--r-g);
  position: relative;
  overflow: hidden;
  animation: riseIn .3s ease both;
}

.tira header { display: flex; align-items: center; gap: 6px; }
/* O icone da tira: 13px, na cor do estado dela.
   Fica ANTES do rotulo e nao depois do numero, porque a leitura de uma tira e
   "o que e isto" -> "quanto e" — e o icone pertence a primeira pergunta.
   currentColor faz a cor vir da propria tira: uma tira que muda de estado
   leva o icone junto, sem regra extra. */
.tira-ico {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--fg3);
}
.tira-ruim:not(.zero)   .tira-ico { color: var(--crit); }
.tira-alerta:not(.zero) .tira-ico { color: var(--warn); }

.tira-rot { font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--fg3); }
.tira-valor { display: flex; align-items: baseline; gap: 7px; }
.tira-valor strong { font-size: 26px; font-weight: 600; line-height: 1; letter-spacing: -.03em; }
.tira-unid { font-size: 10.5px; color: var(--fg3); }
.tira-nota { margin: 0; font-size: 10.5px; color: var(--fg2); min-height: 15px; }

/* Zero nao e noticia. Um "0 degradados" aceso de laranja ensina a equipe a
   ignorar laranja, que e o contrario do que a cor existe para fazer. */
.tira-ruim:not(.zero)   .tira-valor strong { color: var(--crit); }
.tira-alerta:not(.zero) .tira-valor strong { color: var(--warn); }
.tira.zero .tira-valor strong { color: var(--fg2); font-weight: 600; }

/* ---------------------------------------------------------- sparkline --- */
/* Barras em div, nao canvas: sao poucas dezenas de valores, o navegador desenha
   sem custo, e a barra herda a cor do tema sem precisar redesenhar na troca. */
.spark { display: flex; align-items: flex-end; justify-content: flex-start; gap: 1.5px; height: 26px; margin-top: 2px; }

/* max-width e o que impede a barra de MENTIR.
   Com `flex: 1` puro, uma frota nova — que tem um ou dois baldes de historico —
   virava um retangulo azul de largura total, que se le como "100% de alguma
   coisa". Limitada, uma serie curta parece o que e: uma serie curta. */
.spark span {
  flex: 1 1 0;
  min-width: 1px;
  max-width: 6px;
  border-radius: 1.5px;
  background: color-mix(in srgb, var(--info) 55%, transparent);
}
.spark span.alta { background: var(--info); }
.spark-lateral { height: 20px; }
.spark-lateral span { background: color-mix(in srgb, var(--ok) 55%, transparent); }
.spark-lateral span.alta { background: var(--ok); }
.spark-vazio { color: var(--fg3); font-size: 9.5px; align-self: center; }

/* ============================================================= filtros === */
.barra-filtros {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 14px 22px 4px;
}

.rot-filtro, .rotulo-campo {
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg3);
}

.segmentado {
  display: flex;
  gap: 2px;
  padding: 2px;
  border-radius: 10px;
  background: var(--pnl2);
  border: 1px solid var(--bd2);
}

.seg {
  padding: 5px 12px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--fg2);
  font-size: 12px;
  cursor: pointer;
}

.seg:hover { color: var(--fg); }
.seg.ativa { background: var(--pnl); color: var(--fg); font-weight: 600; box-shadow: var(--sh); }

.barra-filtros select {
  padding: 5px 9px;
  background: var(--pnl2);
  border: 1px solid var(--bd2);
  border-radius: 8px;
  color: var(--fg);
  font-size: 12px;
  font-family: inherit;
}

.barra-filtros select:hover { border-color: var(--bd); }
.barra-filtros .espaco { flex: 1; }
.atualizacao { font-size: 10px; color: var(--fg3); }
.aviso-escopo { color: var(--warn); }

/* ================================================ carga + fila de atencao === */
.grade-topo {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .85fr);
  gap: 12px;
  padding: 12px 22px 0;
  align-items: start;
}

.painel-caixa {
  background: var(--pnl);
  border: 1px solid var(--bd2);
  border-radius: var(--r-g);
  padding: 15px 16px;
  animation: riseIn .34s ease both;
}

.pc-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.pc-topo h2 { font-size: 14.5px; }
.pc-sub { margin: 2px 0 0; font-size: 10.5px; color: var(--fg3); }

.faixas { display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--pnl2); border: 1px solid var(--bd2); flex: 0 0 auto; }

.faixa {
  padding: 4px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--fg2);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.faixa:hover { color: var(--fg); }
.faixa.ativa { background: var(--pnl); color: var(--fg); box-shadow: var(--sh); }

.grafico-frota { height: 244px; }

/* --------------------------------------------------------------- fila --- */
/* A mascara desbota os ultimos pixels: sem ela o item cortado no fim parece
   defeito de layout, e nao "tem mais coisa abaixo". */
.fila {
  list-style: none;
  margin: 0;
  padding: 0 2px 0 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 262px;
  overflow-y: auto;
  mask-image: linear-gradient(180deg, #000 calc(100% - 22px), transparent);
}

.item-fila {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 10px 11px;
  border-radius: var(--r-m);
  border: 1px solid var(--bd2);
  background: var(--pnl2);
  cursor: pointer;
  animation: slideL .3s ease both;
  transition: background .12s, border-color .12s;
}

.item-fila:hover { background: var(--hov); border-color: var(--bd); }

.if-icone {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--pnl2);
  border: 1px solid var(--bd2);
  color: var(--fg2);
}

.if-crit .if-icone   { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 34%, transparent); background: color-mix(in srgb, var(--crit) 11%, transparent); }
.if-alerta .if-icone { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 34%, transparent); background: color-mix(in srgb, var(--warn) 11%, transparent); }

.if-corpo { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.if-titulo { font-size: 12.5px; font-weight: 600; }
.if-desc { font-size: 11px; color: var(--fg2); line-height: 1.45; word-break: break-word; }
.if-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }

.if-tag {
  font-family: var(--mono);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 4px;
  border: 1px solid var(--bd2);
  background: var(--pnl2);
  color: var(--fg3);
}

.if-quando { font-family: var(--mono); font-size: 9.5px; color: var(--fg3); white-space: nowrap; }
.fila-vazia { padding: 26px 12px; text-align: center; color: var(--fg3); font-size: 12px; }

/* ================================================================ frota === */
.secao-frota { padding: 20px 22px 44px; }
/* `flex-wrap` + `margin-left: auto` na direita: numa janela estreita os selos
   descem para a linha de baixo em vez de comprimir o titulo. */
.sf-topo { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.sf-direita { display: flex; align-items: center; gap: 14px; margin-left: auto; }

/* ---------------------------------------- densidade da grade (larguraMinima) --- */
.sf-densidade { display: flex; align-items: center; gap: 7px; }

.sf-dens-rot {
  font-size: 9px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg3);
}

/* 84px de trilha: o suficiente para escolher entre 240 e 460 sem roubar espaco
   dos selos, que sao a informacao do cabecalho. */
.sf-densidade input[type="range"] { width: 84px; accent-color: var(--info); cursor: pointer; }
.sf-densidade output { font-size: 10px; color: var(--fg2); min-width: 22px; text-align: right; }

/* ------------------------------------------------ contadores da frota (selos) --- */
.sf-selos { display: flex; align-items: center; gap: 6px; }

.sf-selo {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 9.5px;
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: help;
}

.sf-selo strong { font-size: 11.5px; font-weight: 700; letter-spacing: -.01em; }

.sf-selo-ok     { color: var(--ok);   background: color-mix(in srgb, var(--ok) 12%, transparent);   border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.sf-selo-alerta { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 28%, transparent); }
.sf-selo-ruim   { color: var(--crit); background: color-mix(in srgb, var(--crit) 12%, transparent); border-color: color-mix(in srgb, var(--crit) 30%, transparent); }
.sf-selo-parada { color: var(--fg3);  background: var(--pnl2); border-color: var(--bd2); }

/* `zero` do handoff: o selo apaga quando o valor e 0. Um "0 incidente" em
   vermelho aceso grita um problema que nao existe, e depois de um turno olhando
   isso o operador para de reagir ao vermelho de verdade. */
.sf-selo-zero {
  color: var(--fg3);
  background: transparent;
  border-color: var(--bd2);
}
.sf-selo-zero strong { color: var(--fg3); }

.sf-topo h2 { font-size: 14.5px; }

.vazio { color: var(--fg3); padding: 46px 24px; text-align: center; font-size: 12.5px; }

/* ------------------------------------------------- cartao de loja (modo lojas) --- */
/* 300px e o minimo do handoff, e nao um numero solto: abaixo disso a coluna de
   dados fica com menos de 200px e o rotulo, a nota, o sub e o valor da linha de
   metrica colidem -- eu vi "DISCO LIVRE uso 61%38 115 G" numa captura. Os 96px da
   coluna de estado saem desse total, entao 272px davam 176px de dados. */
.grade-lojas { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }

.cartao-loja {
  --acento: var(--ok);
  position: relative;
  overflow: hidden;
  padding: 13px 14px;
  background: var(--pnl);
  border: 1px solid var(--bd2);
  border-radius: var(--r-g);
  display: flex;
  flex-direction: column;
  gap: 9px;
  animation: riseIn .3s ease both;
}

.cartao-loja::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--acento); }
.cl-incidente { --acento: var(--crit); background: linear-gradient(90deg, color-mix(in srgb, var(--crit) 7%, transparent), transparent 62%), var(--pnl); }
.cl-atencao   { --acento: var(--warn); }
.cl-estavel   { --acento: var(--ok); }
.cl-parada    { --acento: var(--fg3); }

.cl-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.cl-nome { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.cl-meta { margin: 2px 0 0; font-family: var(--mono); font-size: 9.5px; color: var(--fg3); }

.cl-selo {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 6px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.cl-selo-estavel   { color: var(--ok);   background: color-mix(in srgb, var(--ok) 13%, transparent);   border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.cl-selo-atencao   { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.cl-selo-incidente { color: var(--crit); background: color-mix(in srgb, var(--crit) 13%, transparent); border-color: color-mix(in srgb, var(--crit) 32%, transparent); }
.cl-selo-parada    { color: var(--fg3);  background: var(--pnl2); border-color: var(--bd2); }

/* Heatmap de hosts: um quadrado por maquina. E o que faz a tela caber em dezenas
   de lojas sem virar rolagem infinita, e ainda permite ir direto na maquina. */
.mapa-hosts { display: flex; flex-wrap: wrap; gap: 3px; }

.host-quad {
  width: 15px;
  height: 15px;
  border-radius: 4px;
  border: 1px solid var(--bd2);
  background: var(--pnl2);
  padding: 0;
  cursor: pointer;
  transition: transform .1s, box-shadow .1s;
}

.host-quad:hover { transform: scale(1.22); box-shadow: 0 0 0 2px var(--bd); z-index: 1; }
.hq-online     { background: color-mix(in srgb, var(--ok) 46%, transparent);   border-color: color-mix(in srgb, var(--ok) 52%, transparent); }
.hq-degradado  { background: color-mix(in srgb, var(--warn) 52%, transparent); border-color: color-mix(in srgb, var(--warn) 58%, transparent); }
.hq-offline    { background: color-mix(in srgb, var(--crit) 58%, transparent); border-color: color-mix(in srgb, var(--crit) 62%, transparent); }
.hq-never_seen { background: repeating-linear-gradient(45deg, var(--pnl2), var(--pnl2) 3px, var(--bd) 3px, var(--bd) 5px); }
.hq-disabled   { opacity: .4; }

.cl-celulas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 9px; border-top: 1px solid var(--bd2); }
.cel { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* nowrap: "disco livre" quebrando em duas linhas empurrava o valor para baixo e
   desalinhava as quatro celulas entre si. */
.cel-rot {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cel-val { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
.cel-val.ruim { color: var(--crit); }
.cel-val.alerta { color: var(--warn); }
.cel-val.ok { color: var(--ok); }

/* -------------------------------- modo maquinas: marca > loja > cartoes --- */
.marca { margin-bottom: 26px; }

.marca-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--fg3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--bd2);
  margin-bottom: 14px;
}

.marca-cod {
  font-family: var(--mono);
  background: var(--pnl2);
  border: 1px solid var(--bd2);
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 9px;
  color: var(--fg2);
}

.marca-nome { letter-spacing: .16em; }

.loja { margin: 0 0 18px; padding-left: 12px; border-left: 2px solid var(--bd2); }
.loja-titulo { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; margin-bottom: 9px; }

.loja-cod {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--info);
  background: color-mix(in srgb, var(--info) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--info) 26%, transparent);
  padding: 2px 7px;
  border-radius: 6px;
}

.loja-nome { color: var(--fg2); font-weight: 500; }
.contador { display: flex; gap: 5px; margin-left: auto; font-size: 10px; font-weight: 600; }
.contador > span { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--bd2); background: var(--pnl2); color: var(--fg3); }
.cont-ok   { color: var(--ok) !important;   border-color: color-mix(in srgb, var(--ok) 28%, transparent) !important; }
.cont-ruim { color: var(--crit) !important; border-color: color-mix(in srgb, var(--crit) 32%, transparent) !important; }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }

.cartao {
  --acento: var(--fg3);
  position: relative;
  overflow: hidden;
  background: var(--pnl);
  border: 1px solid var(--bd2);
  border-radius: var(--r-m);
  padding: 12px 13px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: border-color .12s, transform .12s, box-shadow .12s;
  animation: riseIn .28s ease both;
}

.cartao::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--acento); }
.cartao:hover { border-color: var(--bd); transform: translateY(-1px); box-shadow: var(--sh); }

.cartao-online     { --acento: var(--ok); }
.cartao-degradado  { --acento: var(--warn); }
.cartao-offline    { --acento: var(--crit); background: linear-gradient(90deg, color-mix(in srgb, var(--crit) 7%, transparent), transparent 60%), var(--pnl); }
.cartao-never_seen { --acento: var(--warn); }
.cartao-disabled   { --acento: var(--fg3); opacity: .55; }

.cartao-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cartao-nome { font-weight: 700; font-size: 13px; }
.bolha { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--fg3); }
.bolha-online { background: var(--ok); }
.bolha-degradado { background: var(--warn); }
.bolha-offline { background: var(--crit); }
.bolha-never_seen { background: var(--warn); }

/* word-break porque hostname pode ser longo, ou conter caractere estranho: nesse
   caso ele tem de ficar contido no cartao, nao vazar no layout. */
.cartao-host { margin: 3px 0 8px; font-family: var(--mono); font-size: 9.5px; color: var(--fg3); word-break: break-all; }

.cartao-status { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }

.etiqueta {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 5px;
  border: 1px solid transparent;
}

.etiqueta-online     { color: var(--ok);   background: color-mix(in srgb, var(--ok) 13%, transparent);   border-color: color-mix(in srgb, var(--ok) 28%, transparent); }
.etiqueta-degradado  { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.etiqueta-offline    { color: var(--crit); background: color-mix(in srgb, var(--crit) 13%, transparent); border-color: color-mix(in srgb, var(--crit) 32%, transparent); }
.etiqueta-never_seen { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.etiqueta-disabled   { color: var(--fg3);  background: var(--pnl2); border-color: var(--bd2); }

.cartao-visto { font-size: 10.5px; color: var(--fg3); }

.cartao-manutencao {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
  padding: 2px 7px;
  border-radius: 5px;
  display: inline-block;
}

.metricas { display: flex; flex-direction: column; gap: 6px; }

/* Rotulo, BARRA, valor. A barra recebe o espaco elastico porque ela e o que se
   le de longe; o numero fica alinhado a direita, na coluna. */
.metrica { display: grid; grid-template-columns: 58px 1fr 46px; align-items: center; gap: 8px; }
.metrica-rot { font-size: 10px; color: var(--fg3); }
.metrica-val { font-family: var(--mono); font-size: 11px; text-align: right; color: var(--fg2); }
.barra { height: 5px; background: var(--pnl2); border-radius: 999px; overflow: hidden; }
.barra-fill { display: block; height: 100%; border-radius: 999px; background: var(--info); transition: width .3s ease; }
.barra-fill-ruim { background: var(--crit); }
.barra-vazia { display: block; }

.cartao-pe {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--bd2);
  font-family: var(--mono);
  font-size: 9px;
  color: var(--fg3);
}

.cartao-servicos {
  margin: 8px 0 0;
  padding: 6px 9px;
  font-size: 10.5px;
  color: var(--crit);
  background: color-mix(in srgb, var(--crit) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--crit) 26%, transparent);
  border-radius: var(--r-p);
  word-break: break-word;
}

/* ==================================================== faixa de incidente === */
/* O elemento mais gritante da tela, e o unico com direito a isso.
   Se qualquer outra coisa piscar em vermelho, esta faixa deixa de significar
   alguma coisa — e o dia em que ela importar, ninguem vai olhar. */
@keyframes pulsoIncidente {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--crit) 55%, transparent); }
  70%      { box-shadow: 0 0 0 10px color-mix(in srgb, var(--crit) 0%, transparent); }
}

@keyframes brilhoFaixa {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.faixa-incidente {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 22px 0;
  padding: 13px 17px;
  border-radius: var(--r-m);
  border: 1px solid var(--crit);
  color: var(--fg);
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--crit) 26%, transparent),
    color-mix(in srgb, var(--crit) 12%, transparent),
    color-mix(in srgb, var(--crit) 26%, transparent));
  background-size: 220% 100%;
  animation: brilhoFaixa 5s ease-in-out infinite;
}

.fi-sinal {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--crit);
  flex: 0 0 auto;
  animation: pulsoIncidente 1.8s ease-out infinite;
}

.fi-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.fi-texto strong { font-size: 13.5px; color: var(--crit); letter-spacing: -.01em; }
.fi-detalhe { font-size: 12px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.faixa-incidente .btn-secundario, .faixa-incidente .btn-perigo { flex: 0 0 auto; }

/* Movimento e um recurso de atencao, nao um enfeite: quem pediu menos movimento
   continua vendo a faixa, so que parada. A cor e a borda ja bastam. */
@media (prefers-reduced-motion: reduce) {
  .faixa-incidente, .fi-sinal { animation: none; }
}

/* =========================================================== destrutivo === */
/* Vermelho contornado, nao preenchido: preenchido competiria com o "+ Adicionar
   PC" e um botao que apaga historico nao pode disputar atencao com um de uso
   rotineiro. So fica solido quando ARMADO, no segundo clique. */
.btn-perigo {
  padding: 7px 13px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  color: var(--crit);
  background: color-mix(in srgb, var(--crit) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--crit) 34%, transparent);
  transition: background .12s, color .12s;
}

.btn-perigo:hover { background: color-mix(in srgb, var(--crit) 18%, transparent); }
.btn-perigo.largo { width: 100%; padding: 11px; font-size: 13px; }
.btn-perigo:disabled { opacity: .55; cursor: default; }

.btn-perigo.armado {
  background: var(--crit);
  color: #fff;
  border-color: var(--crit);
  animation: pulseDot 1.1s ease-in-out infinite;
}

.faixa-demo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 22px 0;
  padding: 11px 15px;
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, transparent);
}

.fd-texto { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fd-texto strong { font-size: 12.5px; color: var(--warn); }
.fd-sub { font-size: 10.5px; color: var(--fg2); }
.faixa-demo .btn-perigo { margin-left: auto; }

/* -------------------------------------------------------------------------
   Acoes remotas
   ------------------------------------------------------------------------- */
.acoes { margin-top: 26px; }
.acoes h4 {
  margin: 20px 0 8px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg3);
}

/* Marcado por padrao, e visivel: simular e o caminho normal, agir de verdade e
   a excecao consciente. */
.simular {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: 12.5px;
  color: var(--fg2);
  cursor: pointer;
}
.simular input { accent-color: var(--ok); width: 15px; height: 15px; cursor: pointer; }

/* Em simulacao a secao inteira muda de cor. O rotulo do botao ja diz, mas a
   cor chega antes da leitura — e o objetivo e nao existir clique sem a pessoa
   saber em qual modo esta. */
.modo-simulacao {
  border-left: 2px solid var(--info);
  padding-left: 12px;
  margin-left: -14px;
}
.modo-simulacao .btn-acao,
.modo-simulacao .btn-perigo { border-style: dashed; }
.modo-simulacao .btn-perigo { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); background: none; }

.acao-linha { display: flex; gap: 8px; margin-bottom: 8px; }

.acao-campo {
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--r-p);
  border: 1px solid var(--bd);
  background: var(--pnl2);
  color: var(--fg);
  font-family: var(--fonte);
  font-size: 12.5px;
}
.acao-campo option { background-color: var(--pop); }
.acao-campo:disabled { opacity: .5; }

.btn-acao {
  flex: 0 0 auto;
  padding: 8px 13px;
  border-radius: var(--r-p);
  border: 1px solid var(--bd);
  background: var(--pnl2);
  color: var(--fg);
  font-family: var(--fonte);
  font-size: 12.5px;
  cursor: pointer;
}
.btn-acao:hover:not(:disabled) { border-color: var(--acento); color: var(--acento); }
.btn-acao:disabled { opacity: .45; cursor: default; }

.acoes .acao-linha:has(.btn-acao:only-child) .btn-acao { flex: 1 1 0; }

/* Historico */
.comandos { list-style: none; margin: 0; padding: 0; }

.comando {
  padding: 9px 11px;
  margin-bottom: 6px;
  border-radius: var(--r-p);
  border: 1px solid var(--bd);
  /* A barra da esquerda carrega o estado: da para varrer a lista sem ler. */
  border-left: 3px solid var(--fg3);
  background: var(--pnl2);
  font-size: 12.5px;
}

.cmd-pending, .cmd-sent, .cmd-acked { border-left-color: var(--warn); }
.cmd-succeeded { border-left-color: var(--ok); }
.cmd-failed, .cmd-expired { border-left-color: var(--crit); }
.cmd-canceled { border-left-color: var(--fg3); opacity: .7; }

.cmd-topo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cmd-topo strong { font-weight: 600; }
.cmd-estado { font-size: 11px; color: var(--fg3); white-space: nowrap; }
.cmd-quando { font-size: 11px; color: var(--fg3); margin-top: 2px; }

/* Saida do agente: pode ser longa e ter caminho de arquivo, entao quebra em
   qualquer ponto em vez de esticar o painel. */
.cmd-texto {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg2);
  word-break: break-word;
}

.btn-mini {
  margin-top: 7px;
  padding: 3px 9px;
  border-radius: 5px;
  border: 1px solid var(--bd);
  background: none;
  color: var(--fg2);
  font-family: var(--fonte);
  font-size: 11px;
  cursor: pointer;
}
.btn-mini:hover { border-color: var(--crit); color: var(--crit); }

.zona-perigo {
  margin-top: 30px;
  padding: 14px 15px;
  border-radius: var(--r-m);
  border: 1px solid color-mix(in srgb, var(--crit) 26%, transparent);
  background: color-mix(in srgb, var(--crit) 6%, transparent);
}

.zona-perigo h3 { margin: 0 0 6px; color: var(--crit); font-family: var(--fonte); font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.zona-perigo .dica { margin-bottom: 4px; }

/* Botao de remover no cartao de loja: so aparece no hover ou com foco pelo
   teclado, para nao poluir uma grade de trinta lojas com trinta lixeiras. */
.cl-remover {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  border: 1px solid transparent;
  background: none;
  color: var(--fg3);
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, color .12s, background .12s;
}

.cartao-loja:hover .cl-remover,
.cl-remover:focus-visible { opacity: 1; }
.cl-remover:hover { color: var(--crit); background: color-mix(in srgb, var(--crit) 14%, transparent); }
.cl-remover.armado { opacity: 1; color: #fff; background: var(--crit); border-color: var(--crit); }
.cl-remover svg { width: 13px; height: 13px; }
.cl-cab-acoes { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* ============================================================== painel === */
.cortina { position: fixed; inset: 0; background: rgba(3, 5, 9, .62); backdrop-filter: blur(2px); z-index: 40; }

.painel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(620px, 100%);
  background: var(--bg);
  border-left: 1px solid var(--bd);
  box-shadow: var(--sh-alta);
  z-index: 50;
  display: flex;
  flex-direction: column;
  animation: slideL .22s ease both;
}

.painel-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--bd2);
  background: var(--pnl2);
}

.painel-topo h2 { font-size: 17px; word-break: break-all; }
.painel-sub { margin: 4px 0 0; font-size: 10.5px; color: var(--fg3); }

.btn-fechar {
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--fg3);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}

.btn-fechar:hover { color: var(--fg); background: var(--hov); border-color: var(--bd2); }

.painel-corpo { overflow-y: auto; padding: 18px 20px 40px; }
.painel-corpo h3 { font-size: 9px; margin: 24px 0 10px; color: var(--fg3); text-transform: uppercase; letter-spacing: .14em; font-family: var(--mono); }

/* Zebra: com quinze linhas de par rotulo/valor, alternar o fundo e o que permite
   seguir uma linha com o olho ate a direita sem se perder. */
.dados {
  display: grid;
  grid-template-columns: 150px 1fr;
  margin: 0 0 18px;
  font-size: 11.5px;
  border: 1px solid var(--bd2);
  border-radius: var(--r-p);
  overflow: hidden;
}

.dados dt { color: var(--fg3); padding: 6px 12px; }
.dados dd { margin: 0; padding: 6px 12px; word-break: break-all; font-family: var(--mono); }
.dados dt:nth-of-type(odd), .dados dd:nth-of-type(odd) { background: var(--pnl2); }

.painel-corpo .faixas { margin-bottom: 12px; display: inline-flex; }

.grafico-caixa {
  height: 190px;
  margin-bottom: 11px;
  background: var(--pnl2);
  border: 1px solid var(--bd2);
  border-radius: var(--r-m);
  padding: 10px;
}

.eventos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }

.evento {
  display: grid;
  grid-template-columns: 108px 128px 1fr;
  gap: 10px;
  padding: 7px 10px;
  background: var(--pnl2);
  border: 1px solid var(--bd2);
  border-radius: var(--r-p);
  font-size: 10.5px;
  position: relative;
  overflow: hidden;
}

.evento::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--fg3); }
.evento-warning::before { background: var(--warn); }
.evento-critical::before { background: var(--crit); }
.evento-quando { font-family: var(--mono); color: var(--fg3); }
.evento-tipo { font-family: var(--mono); color: var(--info); font-size: 10px; }
.evento-msg { color: var(--fg2); word-break: break-word; }
.evento-vazio { color: var(--fg3); font-size: 11.5px; padding: 10px; }

/* =============================================================== modal === */
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--r-g);
  box-shadow: var(--sh-alta);
  z-index: 60;
  display: flex;
  flex-direction: column;
  animation: popIn .18s ease both;
}

.modal-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--bd2);
  background: var(--pnl2);
  border-radius: var(--r-g) var(--r-g) 0 0;
}

.modal-topo h2 { font-size: 15px; }
.modal-corpo { overflow-y: auto; padding: 18px 20px 22px; }
.modal-corpo label { display: block; margin: 16px 0 6px; font-size: 11.5px; color: var(--fg2); font-weight: 500; }
.modal-corpo > label:first-child { margin-top: 0; }

/* A LISTA DE TIPOS E O CONTRATO. Ela nasceu com `text` porque era o unico tipo
   que existia nos modais, e quando entrou um `email` na tela de usuarios o campo
   ficou estreito e pálido do lado de um `text` bem desenhado -- parecia bug de
   layout e era uma regra que nunca soube daquele tipo.

   Tipo novo de campo entra AQUI, e nao numa regra propria: duas regras com as
   mesmas propriedades divergem, e a que perder a disputa e sempre a que alguem
   esqueceu de atualizar. */
.modal-corpo input[type="text"],
.modal-corpo input[type="email"],
.modal-corpo input[type="password"],
.modal-corpo input[type="number"],
.modal-corpo select {
  width: 100%;
  padding: 10px 12px;
  background: var(--pnl2);
  border: 1px solid var(--bd);
  border-radius: 9px;
  color: var(--fg);
  font-size: 13.5px;
  font-family: inherit;
}

.modal-corpo input::placeholder { color: var(--fg3); }

.modal-corpo input:focus, .modal-corpo select:focus {
  outline: none;
  border-color: var(--info);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 20%, transparent);
}

.modal-corpo h3 { font-size: 12.5px; margin: 20px 0 9px; }
.dica { margin: 6px 0 0; font-size: 10.5px; color: var(--fg3); line-height: 1.5; }
.dica code { font-family: var(--mono); background: var(--pnl2); padding: 1px 5px; border-radius: 4px; font-size: 10px; }

.erro {
  margin: 14px 0 0;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--crit) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--crit) 34%, transparent);
  border-radius: var(--r-p);
  color: var(--crit);
  font-size: 12px;
}

.ok-msg {
  margin: 0 0 6px;
  padding: 11px 13px;
  background: color-mix(in srgb, var(--ok) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 32%, transparent);
  border-radius: var(--r-p);
  color: var(--ok);
  font-size: 12.5px;
}

/* O comando e longo; ele rola DENTRO da caixa em vez de esticar o modal e
   empurrar o botao de copiar para fora da tela. */
.comando-caixa { background: var(--pnl2); border: 1px solid var(--bd); border-radius: var(--r-p); padding: 11px; }

.comando-caixa pre {
  margin: 0 0 9px;
  padding: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.6;
  color: var(--info);
  max-height: 170px;
}

.detalhes { margin-top: 18px; border-top: 1px solid var(--bd2); padding-top: 14px; }
.detalhes summary { cursor: pointer; font-size: 12px; color: var(--info); font-weight: 500; }
.detalhes summary:hover { text-decoration: underline; }
.detalhes .dica { margin: 9px 0 11px; }

.aviso-token {
  margin: 18px 0 0;
  padding: 11px 13px;
  background: color-mix(in srgb, var(--warn) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  border-radius: var(--r-p);
  color: var(--warn);
  font-size: 11.5px;
  line-height: 1.55;
}

/* =========================================================== relatorio === */
.modal-largo { width: min(1080px, calc(100vw - 32px)); }
.rel-acoes { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.rel-acoes select {
  padding: 6px 10px;
  background: var(--pnl2);
  border: 1px solid var(--bd);
  border-radius: 8px;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 12px;
}

.rel-resumo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 1px;
  background: var(--bd2);
  border: 1px solid var(--bd2);
  border-radius: var(--r-m);
  overflow: hidden;
  margin-bottom: 14px;
}

.rr-item { background: var(--pnl); padding: 11px 13px; display: flex; flex-direction: column; gap: 1px; }
.rr-num { font-family: var(--mono); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rr-rot { font-size: 9px; letter-spacing: .13em; text-transform: uppercase; color: var(--fg3); }

/* A tabela rola DENTRO da caixa: com trinta lojas ela nao pode empurrar o
   rodape do modal para fora da tela. */
.rel-tabela-caixa {
  max-height: 46vh;
  overflow: auto;
  border: 1px solid var(--bd2);
  border-radius: var(--r-p);
  margin-top: 12px;
}

.rel-tabela { width: 100%; border-collapse: collapse; font-size: 11.5px; }

.rel-tabela th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--pnl);
  text-align: left;
  padding: 8px 10px;
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg3);
  border-bottom: 1px solid var(--bd);
  white-space: nowrap;
}

.rel-tabela td { padding: 7px 10px; border-bottom: 1px solid var(--bd2); }
.rel-tabela tr:last-child td { border-bottom: 0; }
.rel-tabela tbody tr:hover { background: var(--hov); }
.rel-tabela td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.rel-tabela td.ruim { color: var(--crit); }
.rel-tabela td.alerta { color: var(--warn); }
.rel-tabela td.ok { color: var(--ok); }
.rel-vazio { padding: 30px; text-align: center; color: var(--fg3); }

/* ============================================================== brinde === */
.brinde {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pnl);
  backdrop-filter: blur(14px);
  border: 1px solid var(--bd);
  border-radius: var(--r-m);
  box-shadow: var(--sh-alta);
  padding: 11px 18px;
  font-size: 12.5px;
  z-index: 70;
  max-width: 90vw;
}

.brinde-erro { color: var(--crit); border-color: color-mix(in srgb, var(--crit) 40%, transparent); }

/* ====================================================== erro de script === */
/* Fixo no topo e por cima de tudo: um erro de JavaScript pode ter impedido a
   montagem da interface, entao esta faixa nao pode depender de nenhum layout. */
.falha-js {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #7f1d1d;
  color: #fee2e2;
  padding: 13px 18px;
  border-bottom: 2px solid #fca5a5;
  font-size: 12.5px;
  max-height: 45vh;
  overflow-y: auto;
}

.falha-js strong { display: block; margin-bottom: 6px; }
.falha-js pre { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--mono); font-size: 11px; line-height: 1.4; }
.falha-js-dica { margin: 9px 0 0; font-size: 11px; opacity: .85; }
.falha-js a { color: #fecaca; }

/* ============================================================= estreito === */
@media (max-width: 1180px) {
  .grade-topo { grid-template-columns: minmax(0, 1fr); }
  .fila { max-height: none; }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--bd2); }
  .lateral-pe { margin-top: 12px; }
  .topo { flex-wrap: wrap; }
  .busca-caixa { max-width: none; order: 3; flex-basis: 100%; }
  .topo-estado { margin-left: 0; }
}

@media (max-width: 640px) {
  .tiras, .barra-filtros, .grade-topo, .secao-frota { padding-left: 14px; padding-right: 14px; }
  .topo { padding: 12px 14px; }
  .grade, .grade-lojas { grid-template-columns: 1fr; }
  .dados { grid-template-columns: 1fr; }
  .dados dt { padding-bottom: 0; }
  .dados dt:nth-of-type(odd), .dados dd:nth-of-type(odd) { background: none; }
  .dados dd { border-bottom: 1px solid var(--bd2); }
  .evento { grid-template-columns: 1fr; gap: 3px; }
  .cl-celulas { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------------
   Paleta de comandos
   ------------------------------------------------------------------------- */
.paleta {
  position: fixed;
  left: 50%;
  top: 12vh;
  transform: translateX(-50%);
  z-index: 81;
  width: 620px;
  max-width: 92vw;
  max-height: 66vh;
  display: flex;
  flex-direction: column;
  background: var(--pnl);
  backdrop-filter: blur(20px);
  border: 1px solid var(--bd);
  border-radius: var(--r-g);
  box-shadow: var(--sh-alta);
  overflow: hidden;
  animation: paletaIn .16s ease;
}

@keyframes paletaIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateX(-50%); }
}

.paleta-campo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--bd2);
  color: var(--fg3);
}

.paleta-campo input {
  flex: 1;
  border: 0;
  outline: 0;
  background: none;
  color: var(--fg);
  font: 14px var(--fonte);
}

.paleta-lista { overflow-y: auto; padding: 6px; }

.pal-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: var(--r-m);
  background: none;
  color: var(--fg);
  text-align: left;
  cursor: pointer;
}

/* O primeiro fica sempre destacado: Enter age nele, e um Enter que age em
   algo invisivel e uma armadilha. */
.pal-item:hover, .pal-item.alvo { background: var(--hov); }

.pal-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  flex: 0 0 auto;
  background: color-mix(in srgb, currentColor 14%, transparent);
}

.pal-ico svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.pal-texto { min-width: 0; flex: 1; }
.pal-titulo { display: block; font-size: 12.5px; font-weight: 600; }
.pal-sub { display: block; font-size: 10px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-cat { font-size: 9px; padding: 2px 6px; border-radius: 4px; border: 1px solid var(--bd); color: var(--fg3); flex: 0 0 auto; }
.pal-vazio { padding: 26px 14px; font-size: 12px; color: var(--fg3); text-align: center; }

.paleta-pe {
  display: flex;
  gap: 14px;
  padding: 8px 14px;
  border-top: 1px solid var(--bd2);
  font-size: 10px;
  color: var(--fg3);
}

.paleta-pe span:last-child { margin-left: auto; }

/* -------------------------------------------------------------------------
   Tabela densa
   -------------------------------------------------------------------------
   30px por linha, mono nos numeros. Densidade e o ponto: quem opera precisa
   ver sessenta maquinas sem rolar. Linha alta e confortavel para ler cinco
   itens e inutil para varrer duzentos. */
.td-caixa { overflow-x: auto; }
.td-grade { min-width: 760px; }

.td-cab {
  display: grid;
  background: var(--pnl2);
  border-radius: var(--r-p);
  padding: 6px 14px;
  margin-bottom: 2px;
}

.td-cab span {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fg3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.td-linha {
  display: grid;
  align-items: center;
  padding: 7px 14px;
  min-height: 30px;
  border-bottom: 1px solid var(--bd2);
  cursor: pointer;
  transition: background .13s ease;
  text-align: left;
  width: 100%;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  background: none;
  color: var(--fg);
}

.td-linha:hover { background: var(--hov); }
.td-linha > * { min-width: 0; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td-dir { text-align: right; }
.td-host { display: flex; align-items: center; gap: 7px; font-weight: 600; }
.td-ponto { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
.td-fraco { color: var(--fg3); font-size: 11px; }

/* -------------------------------------------------------------------------
   Heatmap
   -------------------------------------------------------------------------
   Uma faixa por loja, o parque inteiro numa tela. E a unica vista que
   responde "onde esta o problema" sem rolar — duzentos hosts cabem aqui, e
   um vermelho no meio de verdes salta aos olhos sem lista e sem procura. */
.hm-linha {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr) 120px;
  gap: 12px;
  align-items: center;
  padding: 5px 0;
  border-top: 1px solid var(--bd2);
}

.hm-loja { min-width: 0; }
.hm-nome { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-meta { font-family: var(--mono); font-size: 9.5px; color: var(--fg3); }
.hm-hosts { display: flex; gap: 4px; flex-wrap: wrap; }

.hm-quad {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  padding: 0;
  cursor: pointer;
  transition: transform .13s ease;
}

/* 1.28 e o suficiente para o quadradinho sob o cursor se destacar dos
   vizinhos sem empurrar a fileira. */
.hm-quad:hover { transform: scale(1.28); }

.hm-num { text-align: right; }
.hm-num .mono { font-size: 11px; }
.hm-barra { width: 44px; height: 4px; margin-left: auto; margin-top: 4px; border-radius: 4px; background: var(--pnl2); overflow: hidden; }
.hm-barra i { display: block; height: 100%; border-radius: 4px; background: var(--info); }

.hm-legenda { display: flex; gap: 12px; font-size: 10.5px; color: var(--fg3); margin-bottom: 10px; }
.hm-legenda span { display: flex; align-items: center; gap: 5px; }
.hm-legenda i { width: 10px; height: 10px; border-radius: 3px; }
.hm-vazio { font-size: 11px; color: var(--fg3); }

/* ------------------------------------------------------ atualizar agentes --- */
.at-linha {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--bd2);
  font-size: 11.5px;
}

.at-nome { font-weight: 600; }
.at-motivo { font-size: 10.5px; color: var(--fg2); margin-top: 2px; }
.at-versao { font-family: var(--mono); font-size: 10px; color: var(--fg3); white-space: nowrap; }

/* A lista de PULADAS e o conteudo principal deste modal, nao um rodape:
   e ela que diz quais maquinas ainda exigem uma visita. */
.at-titulo {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fg3);
  margin: 16px 0 6px;
}

/* ==========================================================================
   Tela de entrada
   ==========================================================================
   O login existia e funcionava, mas nao tinha uma linha de CSS: era o
   formulario branco do navegador. Numa ferramenta que a equipe abre todo dia,
   a primeira tela ser a unica sem desenho e a que mais chama atencao.

   Duas colunas em tela larga: identidade a esquerda, formulario a direita. A
   coluna da esquerda existe para a tela pertencer ao produto — nao para
   preencher espaco — e por isso ela some primeiro quando falta largura.
   ========================================================================== */

.lg-tela {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--fonte);
  overflow: hidden;
}

/* A mesma grade do painel, e um halo frio no alto. Sem o halo o fundo quase
   preto fica chapado e o cartao parece colado. */
.lg-grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 78% at 50% -14%,
      color-mix(in srgb, var(--info) 13%, transparent), transparent 62%),
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 46px 100%;
  -webkit-mask-image: radial-gradient(120% 96% at 50% 0%, #000 42%, transparent 88%);
          mask-image: radial-gradient(120% 96% at 50% 0%, #000 42%, transparent 88%);
}

.lg-quadro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 380px);
  gap: 52px;
  align-items: center;
  width: 100%;
  max-width: 940px;
}

/* -------------------------------------------------------------- identidade --- */
.lg-marca { min-width: 0; }

.lg-selo {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  margin-bottom: 22px;
  border: 1px solid color-mix(in srgb, var(--info) 32%, transparent);
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--info) 12%, transparent);
}

.lg-selo svg { width: 27px; height: 27px; }

.lg-selo path {
  fill: none;
  stroke: var(--info);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

/* O tracado do pulso e mais fino e sem canto vivo: ele le como linha de
   monitor, nao como parte do escudo. */
.lg-selo .lg-pulso {
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lg-nome {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.05;
}

.lg-tag {
  margin: 9px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--fg3);
}

.lg-lista {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 13px;
}

.lg-lista li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg2);
}

.lg-ponto {
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
}

.lg-ponto-ok   { background: var(--ok); }
.lg-ponto-warn { background: var(--warn); }
.lg-ponto-info { background: var(--info); }

.lg-pe {
  margin: 30px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--bd2);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--fg3);
  max-width: 42ch;
}

/* --------------------------------------------------------------- o cartao --- */
.lg-cartao {
  padding: 30px 28px 26px;
  border: 1px solid var(--bd);
  border-radius: var(--r-g);
  background: var(--pnl);
  box-shadow: var(--sh-alta);
  backdrop-filter: blur(9px);
}

.lg-titulo { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -.012em; }
.lg-sub    { margin: 6px 0 26px; font-size: 12.5px; color: var(--fg2); }

.lg-rot {
  display: block;
  margin: 0 0 7px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg2);
}

.lg-campo {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--bd);
  border-radius: var(--r-p);
  background: var(--pnl2);
  color: var(--fg);
  font-family: var(--fonte);
  font-size: 13.5px;
  transition: border-color .14s ease, box-shadow .14s ease;
}

.lg-campo::placeholder { color: var(--fg3); }

.lg-campo:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--info) 56%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--info) 17%, transparent);
}

/* Espaco para o botao do olho DENTRO do campo, para nao empurrar a largura. */
.lg-senha { position: relative; margin-bottom: 22px; }
.lg-senha .lg-campo { padding-right: 42px; }

.lg-ver {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--r-p);
  background: none;
  color: var(--fg3);
  cursor: pointer;
  transition: color .13s ease, background .13s ease;
}

.lg-ver:hover { color: var(--fg2); background: var(--hov); }
.lg-ver svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lg-ver[aria-pressed="true"] { color: var(--info); }

.lg-campo + .lg-rot,
.lg-senha + .lg-rot { margin-top: 0; }

#email { margin-bottom: 22px; }

.lg-entrar {
  width: 100%;
  margin-top: 4px;
  padding: 12px 16px;
  border: 1px solid color-mix(in srgb, var(--info) 50%, transparent);
  border-radius: var(--r-p);
  background: color-mix(in srgb, var(--info) 20%, transparent);
  color: var(--fg);
  font-family: var(--fonte);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}

.lg-entrar:hover:not(:disabled) {
  background: color-mix(in srgb, var(--info) 30%, transparent);
  border-color: color-mix(in srgb, var(--info) 68%, transparent);
}

.lg-entrar:disabled { opacity: .58; cursor: progress; }

.aviso-dev {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 32%, transparent);
  border-radius: var(--r-p);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  color: var(--warn);
  font-size: 12px;
}

/* Qual ambiente. Producao em ambar de propriedade: quem esta entrando precisa
   ver, antes de digitar, que dali sai comando para maquina de loja. */
.lg-ambiente {
  margin: 20px 0 0;
  padding-top: 15px;
  border-top: 1px solid var(--bd2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg3);
}

.lg-ambiente[data-producao="1"] { color: var(--warn); }

/* ---------------------------------------------------------- tema e largura --- */
.lg-btn-tema {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--bd);
  border-radius: var(--r-p);
  background: var(--pnl2);
  color: var(--fg3);
  cursor: pointer;
  transition: color .13s ease, background .13s ease;
  z-index: 2;
}

.lg-btn-tema:hover { color: var(--fg); background: var(--hov); }
.lg-btn-tema svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* A identidade sai antes do formulario: sem ela ainda se entra no sistema. */
@media (max-width: 820px) {
  .lg-quadro { grid-template-columns: minmax(0, 380px); justify-content: center; gap: 0; }
  .lg-marca { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-campo, .lg-entrar, .lg-ver, .lg-btn-tema { transition: none; }
}

/* -------------------------------------------------------------------- sair --- */
/* Discreto de proposito: sair e a acao menos frequente desta barra, e um
   botao vermelho ao lado do nome convidaria ao clique errado. */
.btn-sair {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--r-p);
  background: none;
  color: var(--fg3);
  cursor: pointer;
  transition: color .13s ease, background .13s ease, border-color .13s ease;
}

.btn-sair:hover {
  color: var(--crit);
  background: color-mix(in srgb, var(--crit) 10%, transparent);
  border-color: color-mix(in srgb, var(--crit) 28%, transparent);
}

.btn-sair svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: reduce) { .btn-sair { transition: none; } }

/* --------------------------------------------------- leitura desatualizada --- */
/* O til fica menor e mais apagado que o numero: ele avisa sem competir com o
   valor. A cor do numero NAO muda -- um disco em 3% livre continua vermelho
   mesmo sendo leitura de ontem, porque o problema e real. */
.cel-til {
  margin-right: 1px;
  font-size: .82em;
  opacity: .6;
}

.cel-velho { cursor: help; }

/* Rotulo de duas palavras ("disco livre") nao pode quebrar linha e desalinhar
   a fileira de quatro celulas. */
.cel-rot { white-space: nowrap; }

/* ------------------------------------------------------- "de 238" da celula --- */
/* Abaixo do valor, menor e apagado: e contexto, nao medida. Bloco proprio para
   nao herdar a cor de alerta do valor -- o total do disco nao fica vermelho. */
.cel-sub {
  display: block;
  margin-top: 1px;
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .01em;
  color: var(--fg3);
  white-space: nowrap;
}

/* ---------------------------------------------------------- editar cadastro --- */
.painel-acoes { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* `.btn-icone` e o hover dele vem de cima. Aqui entra so o SVG, que a regra
   original nao previa porque nasceu para botao de texto. */
.btn-icone svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* No cartao de loja o lapis mora junto da lixeira e herda o tamanho dela:
   32px ao lado de 26px desalinharia o cabecalho do cartao. */
.cl-cab-acoes .btn-icone {
  width: 26px;
  height: 26px;
  border-color: transparent;
  background: none;
  color: var(--fg3);
}

.cl-cab-acoes .btn-icone svg { width: 13px; height: 13px; }

/* Azul no lapis, e nao o hover cinza herdado: editar e reversivel, e o
   vermelho desta interface e reservado a offline e limiar estourado. */
.cl-cab-acoes .btn-icone:hover,
.painel-acoes .btn-icone:hover {
  color: var(--info);
  background: color-mix(in srgb, var(--info) 12%, transparent);
  border-color: color-mix(in srgb, var(--info) 38%, transparent);
}

.ed-campo { margin-bottom: 16px; }
.ed-campo:last-child { margin-bottom: 0; }
.ed-nota { margin: 5px 0 0; font-size: 10.5px; color: var(--fg3); line-height: 1.45; }

/* ------------------------------------------------------- cartao de loja clicavel --- */
.cl-clicavel { cursor: pointer; }

/* Borda e elevacao, nao troca de fundo: o fundo do cartao carrega a situacao
   da loja (incidente, atencao, estavel), e clarea-lo no hover apagaria o
   unico sinal de cor que a vista por loja tem. */
.cl-clicavel:hover {
  border-color: color-mix(in srgb, var(--info) 34%, var(--bd));
  transform: translateY(-1px);
  box-shadow: var(--sh);
}

.cl-clicavel { transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease; }

/* O nome como botao, sem parecer botao: ele ja era o titulo do cartao, e
   pintar de azul competiria com o selo de situacao. O sublinhado no hover diz
   que e clicavel sem acrescentar cor a uma tela que ja usa cor para estado. */
.cl-nome-btn {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.cl-nome-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Foco visivel: e por aqui que o teclado entra na loja. */
.cl-nome-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--info) 70%, transparent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .cl-clicavel { transition: none; }
  .cl-clicavel:hover { transform: none; }
}

/* ----------------------------------------------------------------- usuarios --- */
.modal-largo { max-width: 720px; width: calc(100vw - 40px); }

.us-novo {
  padding: 15px 16px 17px;
  border: 1px solid var(--bd);
  border-radius: var(--r-m);
  background: var(--pnl2);
}

.us-novo h3 { margin: 0 0 14px; }

.us-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 14px;
  align-items: start;
}

/* E-mail ocupa a linha inteira: e o campo mais longo dos tres, e era o que
   estava com menos espaco. */
.us-larga { grid-column: 1 / -1; }

.us-grade label { margin: 0 0 6px; }

.us-rot-lojas {
  margin: 16px 0 7px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--fg2);
}

/* Rolagem com teto: vinte lojas nao podem empurrar o botao de criar fora da
   tela. */
.us-lojas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 132px;
  overflow-y: auto;
  padding: 9px;
  border: 1px solid var(--bd2);
  border-radius: var(--r-p);
}

.us-loja {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--bd2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg2);
  cursor: pointer;
  user-select: none;
}

.us-loja:hover { background: var(--hov); }
.us-loja input { margin: 0; accent-color: var(--info); }
.us-loja.marcada { color: var(--fg); border-color: color-mix(in srgb, var(--info) 45%, transparent); background: color-mix(in srgb, var(--info) 12%, transparent); }

/* Desabilitado quando o papel e admin: admin ignora escopo por loja, e deixar
   as caixas ativas prometeria um limite que nao existe. */
.us-lojas.inerte { opacity: .45; pointer-events: none; }

.us-senha { margin-top: 16px; }
.us-senha-rot { margin: 0 0 7px; font-size: 11.5px; font-weight: 600; color: var(--warn); }
.us-senha .comando-caixa pre { font-size: 14px; letter-spacing: .04em; }

.us-titulo-lista { margin: 24px 0 10px; }

.us-linha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 12px 0;
  border-top: 1px solid var(--bd2);
}

.us-linha-empilhada { /* marcador para o teste de layout, ver verificar-nada-sumiu */ }

.us-quem { min-width: 0; }
.us-email { font-size: 12.5px; font-weight: 600; word-break: break-all; }
.us-meta { margin-top: 3px; font-family: var(--mono); font-size: 10px; color: var(--fg3); }
.us-eu { color: var(--info); }
.us-acoes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.us-acoes select { width: auto; min-width: 120px; }

.us-vazio { font-size: 11.5px; color: var(--fg3); padding: 12px 0; }

@media (max-width: 620px) {
  .us-grade { grid-template-columns: minmax(0, 1fr); }
  .us-linha { grid-template-columns: minmax(0, 1fr); }
  .us-acoes { justify-content: flex-start; }
}

/* ------------------------------------------------------- usuarios: acabamento --- */
.us-cabeca { margin-bottom: 16px; }
.us-cabeca h3 { margin: 0; }
.us-cabeca-sub { margin: 5px 0 0; font-size: 11px; color: var(--fg3); }

.us-novo .us-grade label { margin-top: 0; }
.us-criar { margin-top: 18px; }

/* A pastilha DESENHA o estado; a caixa nativa fica so como alvo de clique e de
   teclado. Checkbox do sistema num tema escuro sai cinza-claro e chapado, e
   vinte delas numa fileira e a coisa mais feia que esta tela tinha. */
.us-loja input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

.us-loja {
  position: relative;
  padding: 6px 11px;
  font-size: 11px;
  letter-spacing: .02em;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

/* O visto entra na frente do codigo quando marcada, e o espaco dele existe
   sempre -- sem isso a pastilha pula de largura ao ser clicada e a fileira
   inteira se reorganiza embaixo do cursor. */
.us-loja::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1px solid var(--bd);
  border-radius: 3px;
  flex: 0 0 auto;
}

.us-loja.marcada::before {
  border-color: var(--info);
  background: var(--info);
  box-shadow: inset 0 0 0 1.5px var(--pnl);
}

/* Foco visivel na pastilha, ja que a caixa nativa esta escondida: sem isto,
   quem navega por teclado perde completamente onde esta. */
.us-loja:focus-within {
  outline: 2px solid color-mix(in srgb, var(--info) 65%, transparent);
  outline-offset: 2px;
}

.us-lojas { align-content: flex-start; min-height: 46px; }
.us-lojas:empty::after,
.us-lojas-vazia { font-size: 11px; color: var(--fg3); }

/* A gaveta de lojas da lista. O triangulo padrao do <details> ao lado de um
   texto estilizado de botao le como defeito, nao como controle. */
.us-acoes details > summary { list-style: none; cursor: pointer; }
.us-acoes details > summary::-webkit-details-marker { display: none; }
.us-acoes details[open] > summary { border-color: color-mix(in srgb, var(--info) 40%, transparent); color: var(--fg); }

/* A gaveta aberta sai da fileira de botoes e ocupa a linha inteira: dentro do
   flex ela ficava estrangulada num canto. */
.us-acoes details { position: relative; }
.us-acoes details[open] { flex: 1 0 100%; order: 9; }

/* Altura igual em tudo que e clicavel na linha. Antes, select e botao tinham
   alturas diferentes e a fileira parecia desalinhada. */
.us-acoes select,
.us-acoes .btn-secundario,
.us-acoes .btn-perigo,
.us-acoes details > summary {
  height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  font-size: 11.5px;
  border-radius: var(--r-p);
}

.us-linha { padding: 14px 0; }
.us-linha:hover { background: color-mix(in srgb, var(--fg) 2%, transparent); }

/* Papel como etiqueta, ao lado do e-mail: da para varrer a lista e ver quem e
   admin sem ler o conteudo de cada select. */
.us-papel-selo {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.us-papel-admin    { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.us-papel-operator { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); }
.us-papel-viewer   { color: var(--fg3); background: var(--pnl2); }

@media (prefers-reduced-motion: reduce) { .us-loja { transition: none; } }

/* ---------------------------------------------------- usuarios: lista legivel --- */
/* A etiqueta de papel nao quebra: em coluna estreita ela virava uma torre de
   letras, uma por linha. */
.us-papel-selo { white-space: nowrap; }

/* `break-all` no e-mail existe para uuid de 36 caracteres nao estourar a
   caixa. Com a linha empilhada ha largura de sobra, mas a regra fica: e mais
   barato quebrar um uuid do que ter rolagem horizontal no modal. */
.us-email { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; line-height: 1.35; }

/* Conta sem e-mail registrado (criada antes da 0035): o uuid vai para a linha
   de baixo, em fonte menor. Ele nao e o NOME de ninguem -- botar um uuid onde
   deveria estar um e-mail faz a lista parecer defeito. */
.us-sem-email { color: var(--fg3); font-weight: 500; font-style: italic; }
.us-id { font-family: var(--mono); font-size: 9.5px; color: var(--fg3); }

/* A gaveta aberta encosta na margem da linha, nao no fim da fileira de botoes. */
.us-acoes details[open] { flex: 1 0 100%; order: 9; margin-top: 4px; }

/* -------------------------------------------------------------- sessao na TV --- */
/* No RODAPE, nao no topo: o topo carrega os KPIs, e a faixa empurraria a tela
   inteira para baixo a cada expiracao -- numa TV isso e um solavanco visivel do
   outro lado da sala. */
.faixa-sessao {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(680px, calc(100vw - 32px));
  padding: 11px 15px;
  border: 1px solid color-mix(in srgb, var(--warn) 42%, transparent);
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--warn) 12%, var(--pnl));
  box-shadow: var(--sh);
}

.fs-ponto {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--warn);
  animation: pulseDot 1.8s ease-in-out infinite;
}

.fs-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fs-texto strong { font-size: 12.5px; color: var(--fg); }
#fs-sub { font-size: 11px; color: var(--fg2); }

/* Legivel a distancia: numa TV a 4 metros, 11px nao se le. */
@media (min-width: 1600px) {
  .faixa-sessao { padding: 15px 20px; bottom: 24px; }
  .fs-texto strong { font-size: 15px; }
  #fs-sub { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) { .fs-ponto { animation: none; } }

/* ------------------------------------------------------- o servidor da loja --- */
/* Anel em volta do quadradinho, e nao cor diferente: a COR do quadradinho ja
   carrega o estado (online, degradado, offline) e disputar esse canal apagaria
   a informacao que mais importa. O anel e um segundo canal, livre. */
.hq-servidor {
  box-shadow: 0 0 0 1.5px var(--pnl), 0 0 0 3px currentColor;
  margin: 1.5px;
}

/* currentColor herda a cor do proprio estado: servidor offline tem anel
   vermelho, servidor saudavel tem anel verde. O anel diz QUEM e; a cor dele
   continua dizendo COMO esta. */


/* ------------------------------------------------------------ saude do disco --- */
.secao-discos { margin: 22px 0 0; }
.secao-discos h3 { margin: 0 0 4px; font-size: 12.5px; }

.disco-linha {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--bd2);
}

.disco-id { display: flex; flex-direction: column; gap: 2px; }
.disco-letra { font-family: var(--mono); font-size: 13px; font-weight: 600; }
.disco-tipo {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .08em;
  background: var(--pnl2);
  color: var(--fg3);
  width: fit-content;
}

/* SSD e HDD tem falhas diferentes: SSD gasta por escrita, HDD morre por setor.
   A cor distingue os dois porque a leitura do desgaste depende de qual e. */
.disco-tipo-ssd { color: var(--info); background: color-mix(in srgb, var(--info) 12%, transparent); }
.disco-tipo-hdd { color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }

.disco-barra { height: 5px; border-radius: 4px; background: var(--pnl2); overflow: hidden; }
.disco-barra i { display: block; height: 100%; border-radius: 4px; background: var(--ok); }
.disco-espaco { font-size: 11.5px; margin-bottom: 5px; }
.disco-nums { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; }

.disco-num { display: flex; flex-direction: column; gap: 1px; }
.disco-num b { font-family: var(--mono); font-size: 11.5px; font-weight: 600; }
.disco-num span {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--fg3);
}

/* "nao medido" nao pode parecer numero: sem negrito, sem mono grande, em cinza.
   O contrario -- um 0% com a mesma tipografia de um 78% -- e o que fazia a tela
   afirmar desgaste zero em 44 discos que ninguem tinha medido. */
.disco-sem { font-size: 10.5px; font-style: italic; color: var(--fg3); font-weight: 400; }

.disco-selo { font-size: 10px; white-space: nowrap; }
.disco-pequeno { opacity: .55; }
.disco-vazio { font-size: 11.5px; color: var(--fg3); padding: 10px 0; }

@media (max-width: 560px) {
  .disco-linha { grid-template-columns: 56px minmax(0, 1fr); }
}

/* --------------------------------------------- saude do disco no cartao --- */
/* Linha propria abaixo dos quatro numeros, e nao uma quinta celula: a fileira
   de quatro e o que o olho aprendeu a ler de longe, e um quinto item aperta
   todos. Aqui a informacao entra sem mexer no que ja funciona. */
.cl-saude {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--bd2);
  font-size: 10.5px;
  color: var(--fg3);
}

.cl-saude b { font-family: var(--mono); font-size: 11px; color: var(--fg2); font-weight: 600; }
.cl-saude .cs-alvo { font-weight: 600; color: var(--fg2); }

/* O rotulo fica minusculo e a MEDIDA grande: numa TV a quatro metros o que
   precisa ser lido e o numero, nao a palavra. */
.cs-rot {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg3);
}

@media (min-width: 1600px) {
  .cl-saude { font-size: 12px; }
  .cl-saude b { font-size: 13px; }
}

/* ------------------------------------------------- ordem escolhida do cartao --- */
/* A alca e o UNICO ponto que arrasta. O cartao inteiro arrastavel brigaria com
   o clique que entra na loja e com selecionar texto -- e voce perderia o gesto
   mais usado da tela para ganhar o menos usado. */
.cl-alca {
  display: grid;
  place-items: center;
  width: 22px;
  height: 26px;
  flex: 0 0 auto;
  margin-right: 2px;
  border-radius: var(--r-p);
  color: var(--fg3);
  cursor: grab;
  opacity: 0;
  transition: opacity .13s ease, color .13s ease, background .13s ease;
}

/* Aparece no hover do cartao: numa TV, 20 alcas visiveis o tempo todo sao 20
   ruidos. Quem vai arrastar esta com o mouse no cartao. */
.cartao-loja:hover .cl-alca { opacity: 1; }
.cl-alca:hover { color: var(--fg); background: var(--hov); }
.cl-alca:active { cursor: grabbing; }
.cl-alca svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Foco visivel: a alca e alcancavel por teclado e move com as setas. */
.cl-alca:focus-visible { opacity: 1; outline: 2px solid color-mix(in srgb, var(--info) 70%, transparent); outline-offset: 1px; }

.cl-arrastando { opacity: .4; }

/* Linha no lugar onde vai cair, e nao o cartao mudando de posicao ao vivo:
   reordenar a grade durante o arrasto faz o alvo fugir do cursor. */
/* Contorno no cartao todo, nao barra na borda: barra diz "entra aqui e empurra a
   fila"; contorno diz "este troca com aquele". A forma do realce tem que
   descrever o que o gesto FAZ. */
.cl-alvo {
  box-shadow: 0 0 0 2px var(--info);
  transform: scale(1.015);
}

.cl-ordem-aviso {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 10.5px;
  color: var(--fg3);
}

@media (prefers-reduced-motion: reduce) { .cl-alca { transition: none; } }

/* --------------------------------------- o cartao inteiro pega para arrastar --- */
/* `grab` no cartao todo, e nao `pointer`: o cursor precisa dizer qual gesto
   aquele lugar aceita. Clique continua funcionando -- o navegador distingue
   pressionar-e-soltar de pressionar-e-mover. */
.cartao-loja[draggable="true"] { cursor: grab; }
.cartao-loja[draggable="true"]:active { cursor: grabbing; }

/* Os controles de dentro mantem o cursor deles: ali o gesto e clicar, e o
   cursor nao pode prometer arrasto onde a acao e outra. */
.cartao-loja[draggable="true"] button,
.cartao-loja[draggable="true"] .host-quad { cursor: pointer; }
.cartao-loja[draggable="true"] .cl-alca { cursor: grab; }

/* A alca continua existindo: ela e o caminho de TECLADO (setas movem) e a dica
   visual de que o cartao se move. Sem ela, arrastar seria um segredo. */

/* ------------------------------------------------------------- duas abas --- */
.abas-loja {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--bd2);
}

.aba {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--fg3);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: color .13s ease, border-color .13s ease;
}

.aba:hover { color: var(--fg2); }
.aba[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--info); }

/* O contador e a informacao, nao enfeite: "Atencao 3" diz o tamanho do problema
   antes de a pessoa trocar de aba. */
.aba-n {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--pnl2);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
}

/* Vermelho SO quando ha algo: aba de atencao vazia e boa noticia e nao pode
   ficar acesa, senao a cor perde o significado. */
.aba-atencao[data-tem="1"] .aba-n { background: color-mix(in srgb, var(--crit) 22%, transparent); color: var(--crit); }
.aba-atencao[data-tem="1"] { color: var(--fg2); }

/* Numa TV a 4 metros, 12,5px de aba nao se le. */
@media (min-width: 1600px) {
  .aba { font-size: 15px; padding: 11px 18px; }
  .aba-n { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) { .aba { transition: none; } }

/* --------------------------------------------- as duas abas dentro do cartao --- */
.ca-abas {
  display: flex;
  gap: 2px;
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--bd2);
}

/* Abas pequenas e discretas: elas sao NAVEGACAO do cartao, nao conteudo. Se
   competirem com os numeros, o cartao passa a mostrar o proprio menu em vez do
   dado. */
.ca-aba {
  padding: 3px 9px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--fg3);
  font: inherit;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .09em;
  text-transform: uppercase;
  cursor: pointer;
}

.ca-aba:hover { color: var(--fg2); background: var(--hov); }
.ca-aba[aria-selected="true"] {
  color: var(--fg);
  background: color-mix(in srgb, var(--info) 16%, transparent);
}

/* Altura minima igual nos dois paineis: sem isso o cartao pula de tamanho ao
   trocar de aba, e numa grade isso reflui as linhas de baixo. */
.ca-painel { min-height: 58px; }

.ca-sem { margin: 8px 0 0; font-size: 10.5px; color: var(--fg3); line-height: 1.45; }

/* A ordem visual muda: as abas ficam ABAIXO dos paineis no DOM por causa da
   ordem de criacao, mas devem aparecer ANTES. */
.cartao-loja { display: flex; flex-direction: column; }
.cartao-loja .ca-abas { order: 8; }
.cartao-loja .ca-painel { order: 9; }

@media (min-width: 1600px) { .ca-aba { font-size: 11px; padding: 4px 12px; } }

/* =============================================================================
   Grade de lojas v3 — cartao dividido (handoff)
   =============================================================================
   Duas colunas: 96px de estado a esquerda, dados a direita. O cartao antigo
   empilhava tudo numa coluna e os numeros ficavam apertados; dividindo, o mesmo
   espaco carrega o mapa de calor E as quatro metricas com barra.

   Nenhuma cor fora dos tokens, e o vermelho segue reservado para offline e
   limiar estourado -- e a regra da DS, e e o que mantem o vermelho significando
   "olhe aqui". */
.cartao-loja {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 0;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  transition: border-color .15s ease, transform .15s ease;
}

.cartao-loja:hover { border-color: var(--bd2); transform: translateY(-1px); }

/* ------------------------------------------------- coluna esquerda: estado --- */
.cl-col-estado {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 12px 14px 16px;
  background: var(--pnl2);
}

/* A faixa de situacao e 2px na borda esquerda. Ela repete a informacao da
   etiqueta de proposito: numa grade de vinte cartoes, a cor na lateral e o que
   se ve com o olho parado no meio da tela. */
.cl-faixa { position: absolute; left: 0; top: 0; bottom: 0; width: 2px; }
.cl-faixa-estavel   { background: var(--ok); }
.cl-faixa-atencao   { background: var(--warn); }
.cl-faixa-incidente { background: var(--crit); }
.cl-faixa-parada    { background: var(--fg3); }

.cl-col-estado .mapa-hosts { display: flex; flex-wrap: wrap; gap: 5px; }

/* `margin-top: auto` cola a fracao no rodape da coluna: com 2 ou com 13
   maquinas, o numero fica sempre na mesma altura, e o olho aprende o lugar. */
.cl-fracao { margin-top: auto; }

.cl-fracao-n {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--fg);
  line-height: 1.1;
}

.cl-fracao-rot {
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg3);
}

/* ---------------------------------------------------- coluna direita: dados --- */
.cl-col-dados {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 14px 12px;
  min-width: 0;
}

.cl-col-dados .cl-cab { margin: 0; }
.cl-col-dados .cl-nome-btn { font-size: 14px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
.cl-col-dados .cl-meta { font-size: 10px; letter-spacing: .04em; }

.cl-metricas { display: grid; gap: 4px; }

/* ------------------------------- a linha de metrica: barra ATRAS do texto --- */
/* Empilhar numero e barra gasta duas alturas para uma informacao. Aqui o mesmo
   pixel carrega os dois, e foi isso que devolveu espaco ao cartao. */
.cl-met {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-p);
  background: var(--pnl2);
  box-shadow: inset 0 0 0 1px var(--bd2);
}

.cl-met:hover { box-shadow: inset 0 0 0 1px var(--bd); }

/* Gradiente e nao cor plana: barra plana em 90% parece um bloco e disputa a
   leitura do numero que esta em cima dela. O gradiente cai para 7% e deixa o
   texto respirar. */
.cl-met-fundo {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  transition: width .35s ease;
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--info) 22%, transparent),
    color-mix(in oklch, var(--info) 7%, transparent));
}

.cl-met-fundo-ruim {
  background: linear-gradient(90deg,
    color-mix(in oklch, var(--crit) 30%, transparent),
    color-mix(in oklch, var(--crit) 12%, transparent));
}

/* O marcador de ponta: sem ele, 8% e 12% sao indistinguiveis num cartao de
   300px, porque o gradiente morre antes de a borda ficar visivel. */
.cl-met-ponta {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  transition: left .35s ease;
  background: color-mix(in oklch, var(--info) 55%, transparent);
}

.cl-met-ponta-ruim { background: color-mix(in oklch, var(--crit) 70%, transparent); }

.cl-met-dentro {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
}

.cl-met-esq, .cl-met-dir { display: flex; align-items: baseline; gap: 6px; min-width: 0; }

.cl-met-rot {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg2);
  white-space: nowrap;
}

.cl-met-nota, .cl-met-sub { font-size: 9.5px; color: var(--fg3); white-space: nowrap; }

.cl-met-val {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--fg);
  white-space: nowrap;
}

/* A alca do arrasto vira absoluta: no layout de duas colunas ela nao pode
   ocupar largura do cabecalho, senao o nome da loja perde espaco. */
.cl-col-dados .cl-alca {
  position: absolute;
  right: 4px;
  bottom: 4px;
  margin: 0;
  z-index: 2;
}
.cl-col-dados { position: relative; }

/* Numa TV a 4 metros o valor e o que precisa ser lido; o rotulo pode ficar
   pequeno porque a posicao ja o identifica. */
@media (min-width: 1600px) {
  .cl-met-val { font-size: 15px; }
  .cl-fracao-n { font-size: 22px; }
  .cl-col-dados .cl-nome-btn { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cartao-loja, .cl-met-fundo, .cl-met-ponta { transition: none; }
  .cartao-loja:hover { transform: none; }
}

/* =============================================================================
   Painel de alertas
   =============================================================================
   Duas metades: som deste navegador, regras do servidor. O contorno separa as
   duas porque a consequencia e diferente -- uma afeta quem olha, a outra afeta
   a equipe inteira. */
.al-bloco {
  padding: 14px 16px;
  border: 1px solid var(--bd);
  border-radius: var(--r-m);
  background: var(--pnl2);
}

.al-bloco + .al-bloco { margin-top: 14px; }

.al-cabeca { margin-bottom: 12px; }
.al-cabeca h3 { margin: 0; font-size: 13px; }
.al-cabeca-sub { margin: 3px 0 0; font-size: 10.5px; color: var(--fg3); line-height: 1.45; }

.al-linha {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  cursor: pointer;
}

.al-rot { font-size: 11.5px; color: var(--fg2); }

/* A mestra em cima, com peso: e a chave que desliga tudo, e tem de se ler como
   diferente das outras linhas. */
.al-mestre { padding-bottom: 10px; border-bottom: 1px solid var(--bd2); margin-bottom: 4px; }
.al-mestre .al-rot { color: var(--fg); font-weight: 600; }

.al-linha input[type="range"] { flex: 1; max-width: 180px; accent-color: var(--info); }
.al-linha output { font-size: 10.5px; color: var(--fg2); min-width: 24px; text-align: right; }
.al-linha select { margin-left: auto; }

/* Controle desativado nao pode parecer clicavel: sem sintese de voz, a caixa
   fica apagada e o texto ao lado diz o motivo. */
.al-linha input:disabled, .al-tipo input:disabled { cursor: not-allowed; opacity: .45; }
.al-linha input:disabled ~ .al-rot { color: var(--fg3); }

.al-tipos { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bd2); }

/* auto-fill em vez de contagem fixa: sao oito tipos hoje e podem ser dez
   amanha, e a lista vem do servidor. */
.al-tipos-caixa {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.al-tipo {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--bd2);
  border-radius: var(--r-p);
  background: var(--pnl);
  cursor: pointer;
}

.al-tipo:hover { border-color: var(--bd); }
.al-tipo input { margin-top: 2px; }
.al-tipo-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.al-tipo-nome { font-size: 11px; color: var(--fg); line-height: 1.25; }
.al-tipo-sub { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg3); }

/* A borda esquerda marca o critico. Nao pinto o fundo de vermelho: a caixa e um
   controle, nao um alarme, e vermelho de alarme aqui competiria com o vermelho
   de incidente de verdade na mesma tela. */
.al-tipo-crit { border-left: 2px solid color-mix(in srgb, var(--crit) 55%, transparent); }
.al-tipo-crit .al-tipo-sub { color: var(--crit); }

.al-acoes { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.al-nota { font-size: 10.5px; color: var(--fg3); }

/* ------------------------------------------------------ regras do servidor --- */
.al-regras { display: grid; gap: 10px; }

.al-regra {
  padding: 11px 13px;
  border: 1px solid var(--bd2);
  border-radius: var(--r-p);
  background: var(--pnl);
}

/* Regra desativada fica visivelmente apagada: ela continua na lista porque
   precisa ser religavel, mas nao pode parecer que esta vigiando algo. */
.al-regra-off { opacity: .58; }

.al-regra-topo { display: flex; align-items: center; gap: 10px; }
.al-regra-nome { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.al-regra-nome strong { font-size: 12px; font-weight: 600; }

.al-regra-sev {
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
}

.al-regra-sev-critical { color: var(--crit); background: color-mix(in srgb, var(--crit) 13%, transparent); }
.al-regra-sev-warning  { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); }
.al-regra-sev-info     { color: var(--fg3); background: var(--pnl2); }

.al-chave { display: flex; align-items: center; gap: 6px; margin-left: auto; font-size: 10.5px; color: var(--fg2); cursor: pointer; }

.al-regra-exp { margin: 6px 0 0; font-size: 10.5px; color: var(--fg3); line-height: 1.5; }

.al-campos { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.al-campo { display: flex; flex-direction: column; gap: 4px; }
.al-campo-rot { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); }
.al-campo-linha { display: flex; align-items: center; gap: 5px; }

/* 74px: caberia 10080 (o silencio maximo, sete dias) sem cortar. */
.al-campo-linha input { width: 74px; }
.al-campo-un { font-size: 10px; color: var(--fg3); }

.al-regra-acoes { display: flex; align-items: center; gap: 10px; margin-top: 11px; }

/* ------------------------------------ escolha de volumes acompanhados (0044) --- */
/* Volume FORA do acompanhamento: apagado como o pequeno, mas com borda
   tracejada. Sao dois estados diferentes -- pequeno e heuristica do sistema,
   fora e escolha de alguem -- e a acao para mudar cada um e diferente, entao a
   tela nao pode mostrar os dois igual. */
.disco-fora { opacity: .55; border-left: 2px dashed var(--bd2); }

/* Atravessa as tres colunas da linha. Sem isto o rodape caiu na PRIMEIRA
   coluna, que tem 64px, e a mensagem virou uma tira vertical de uma palavra por
   linha -- foi assim que o Kaua viu na tela. .disco-linha e grade, e todo filho
   novo cai numa celula; um flex solto nao herda largura nenhuma. */
.disco-pe {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  padding-top: 7px;
  border-top: 1px solid var(--bd2);
}

.disco-marca-fora, .disco-marca-peq {
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg3);
  /* min-width: 0 e o par de flex-wrap: sem ele o item nao encolhe e o texto
     estoura para fora da linha em vez de quebrar onde deve. */
  min-width: 0;
  line-height: 1.5;
}

/* A escolha do operador fica em ambar, nao em cinza: e informacao acionavel --
   alguem decidiu isso e pode redecidir. "Pequeno" e so um fato do sistema. */
.disco-marca-fora { color: var(--warn); }

.disco-nota { font-size: 9.5px; color: var(--fg3); font-style: italic; }

/* O interruptor vai para a direita: a linha se le da esquerda (qual disco, quanto
   espaco, saude) e a acao fecha a leitura. */
.disco-acomp {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--fg2);
  cursor: pointer;
}

.disco-acomp input { cursor: pointer; }
.disco-acomp input:disabled { cursor: progress; opacity: .5; }

/* A sobra de volumes que nao cabe no cartao. Contada, nunca escondida em
   silencio: um volume cheio pode estar justamente ali, e um cartao que parece
   completo sem estar e pior que um cartao que admite o corte. */
.cl-mais {
  padding: 4px 9px;
  font-size: 9.5px;
  letter-spacing: .04em;
  color: var(--fg3);
  cursor: help;
}