/* ----- LDP TV: estilos isolados ----- */
body.mode-tv{
  background:#000;
  color:#e5e7eb;
  font-family:'Poppins', Arial, sans-serif;
}

/* ===== Variáveis de escala e layout ===== */
:root{
  /* TOPBAR (logos + relógio) */
  --hdr-unit: clamp(10px, 2.4vw, 22px);
  --brand-left-mult: 2.5;   /* Rumo   */
  --brand-right-mult: 4.0;  /* IIoT   */
  --clock-mult: 2.0;        /* Relógio */
  --hdr-pad: calc(var(--hdr-unit) * 0.35);

  /* RODAPÉ */
  --footer-h: 48px;
  --footer-bg: #0a2a64;
  --footer-fg: #e6f0ff;
  --footer-radius: 14px;

  /* LAYOUT EM ALTURA (TV) */
  --gap-v: 12px;
  --topbar-h: 86px;     /* preenchido via JS */
  --rounding-fix: 2px;

  /* TABELAS */
  --table-head-bg: #0a2a64;   /* azul do layout */
  --table-head-fg: #e6f0ff;
  --table-cell-fg: #e5e7eb;
  --table-radius: 12px;
}

/* ===== Topbar ===== */
.tv-topbar{
  position:sticky; top:0; z-index:10;
  background:#000; border-bottom:1px solid #1f2937;
  padding-block: var(--hdr-pad);
}
.tv-topbar .brand{
  display:block; width:auto; height:auto; line-height:0;
  object-fit:contain;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.12));
}
.tv-topbar .brand-left  { max-height: calc(var(--hdr-unit) * var(--brand-left-mult)); }
.tv-topbar .brand-right { max-height: calc(var(--hdr-unit) * var(--brand-right-mult)); }

.tv-clock{
  margin:0; line-height:1; white-space:nowrap;
  font-weight:800; letter-spacing:.05em; font-variant-numeric:tabular-nums;
  font-size: calc(var(--hdr-unit) * var(--clock-mult));
  color:#e5e7eb;
}

/* ===== Página sem scroll (o scroll fica nas tabelas) ===== */
html, body{ overflow:hidden; }

/* ===== DIAGRAMA ===== */
.svg-wrap{
  margin-top: var(--gap-v);
  padding: 8px;
  background:#000;
  border:1px solid #1f2937;
  border-radius:12px;
  box-shadow:0 2px 16px rgba(0,0,0,.35);
  overflow-x:auto;
}
/* Altura do SVG é medida via JS e salva em --svg-h */
.ldp-svg{
  width:100%;
  height:100%;            /* mantém seu comportamento atual */
  display:block;
  overflow:visible;       /* protege topo do SVG de cortes globais */
}

/* ===== TABELAS ===== */
.tables-container{
  height: calc(
    100vh - var(--topbar-h) - var(--footer-h)
          - var(--svg-h, 0px)
          - var(--gap-v) - var(--rounding-fix)
  );
  overflow:auto;
  display:grid;
  grid-template-columns: repeat(3, minmax(280px,1fr));
  gap:12px;
  margin-top: var(--gap-v);
}
@media (max-width: 1200px){ .tables-container{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 800px){  .tables-container{ grid-template-columns: 1fr; } }

/* ===== Cartão da tabela (raio real aqui) ===== */
.table-wrap{
  background:#0b0b0c;
  border:1px solid #1f2937;          /* moldura externa arredondada */
  border-radius: var(--table-radius);
  overflow:hidden;                    /* recorta os cantos do conteúdo */
  box-shadow:0 2px 16px rgba(0,0,0,.35);
}

/* A própria tabela não desenha borda externa; só divisórias internas */
.table-wrap table{
  width:100%;
  border-collapse: separate;          /* importante para não “achatar” o raio */
  border-spacing: 0;
  background: transparent;
  color:#e5e7eb;
  font-size:15px;
}

/* Cabeçalho azul e centralizado */
.table-wrap thead th{
  background: var(--table-head-bg);
  color: var(--table-head-fg);
  text-align: center;
  vertical-align: middle;
  padding:10px 12px;
  position: sticky; top: 0; z-index: 1;
  border:0;                           /* sem quadro externo */
}

/* Corpo centralizado */
.table-wrap tbody td{
  text-align:center;
  vertical-align:middle;
  padding:10px 12px;
  border:0;                           /* sem quadro externo */
  color: var(--table-cell-fg);
}

/* Grade interna: divisórias somente */
.table-wrap thead th { border-bottom: 1px solid #1f2937; }      /* separa header do corpo */
.table-wrap thead th + th,
.table-wrap tbody td + td { border-left: 1px solid #1f2937; }   /* verticais */
.table-wrap tbody tr + tr td { border-top: 1px solid #1f2937; } /* horizontais */

/* Listras do corpo */
.table-wrap tbody tr:nth-child(odd){ background:#0f172a; }
.table-wrap tbody tr:nth-child(even){ background:#0b1220; }
.table-wrap tbody tr:hover{ background:#14213d; }

/* ===== Rodapé ===== */
body.has-footer{ padding-bottom: calc(var(--footer-h) + 12px); } /* segurança */

.tv-footer{
  position:fixed; left:10px; right:10px; bottom:8px;
  height:var(--footer-h);
  background:var(--footer-bg); color:var(--footer-fg);
  border-radius:var(--footer-radius);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 26px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex; align-items:center; justify-content:center;
  z-index:9;
}
.tv-footer-inner{
  display:inline-flex; align-items:baseline; gap:.6rem; padding:0 14px;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700; letter-spacing:.02em; white-space:nowrap;
  font-size:clamp(12px, 1.6vw, 18px);
}
.tv-footer-brand{ font-weight:800; }
.tv-footer-sep{ opacity:.9; }
.tv-footer-text{ font-weight:700; }

/*Telas estreitas */
@media (max-width: 640px){
  :root{ --footer-h: 44px; }
  .tv-footer-inner{ gap:.45rem; }
}


@keyframes manobra-blink {
  50%   { fill: black; }
  50%  { fill:  yellow; }
  
}

/* classe que ativa o piscar */
.blinking {
  animation: manobra-blink 2s infinite;
}


/*Lucas -----------------------------
/* Indicador de conexão */
.status-indicador {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-left: 5px;
  background: gray; /* cor inicial neutra */
}

.status-on {
  background: limegreen; /* verde */
}

.status-off {
  background: red; /* vermelho */
}

.status-checking {
  background: gold; /* amarelo (checando) */
}