/* Monitoramento — telas de TV (1920×1080) e página de gestão */

/* ---------- Modo TV: tudo escala com a largura da tela ---------- */
body.tv {
  font-size: calc(100vw / 1920 * 17);
  height: 100vh; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto;
  padding: 1.1em 1.4em 1em; gap: 1em;
}

.tv-topo { display: flex; align-items: center; gap: 1.4em; }
.tv-topo .marca img { height: 2.2em; }
.tv-topo .titulo { flex: 1; }
.tv-topo .titulo h1 { margin: 0; font-size: 1.55em; font-weight: 650; letter-spacing: -.01em; }
.tv-topo .titulo span { color: var(--suave); font-size: .95em; }
.saude { display: flex; align-items: center; gap: .6em; padding: .55em 1em; border-radius: 999px; background: var(--painel); border: 1px solid var(--borda); font-size: 1.05em; }
.saude b { font-size: 1.25em; }
.saude.ok b { color: var(--ok); } .saude.alerta b { color: var(--alerta); } .saude.critico b { color: var(--critico); }
#relogio { text-align: right; line-height: 1.15; }
#relogio b { display: block; font-size: 2.1em; font-weight: 650; font-variant-numeric: tabular-nums; }
#relogio span { color: var(--suave); font-size: .9em; display: block; }
#relogio span::first-letter { text-transform: uppercase; }
.selo-sim { font-size: .72em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--alerta); border: 1px solid var(--alerta); padding: .3em .7em; border-radius: 999px; }

.cartao { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1em 1.1em; min-height: 0; display: flex; flex-direction: column; }
.cartao > h2 { margin: 0 0 .7em; font-size: .82em; font-weight: 650; letter-spacing: .13em; text-transform: uppercase; color: var(--suave); display: flex; justify-content: space-between; align-items: center; }
.cartao > h2 small { letter-spacing: 0; text-transform: none; font-weight: 500; font-size: 1.05em; }

/* ---------- Tela 1 ---------- */
.t1 { display: grid; grid-template-columns: 1.05fr 1.35fr; grid-template-rows: 1.15fr 1fr; gap: 1em; min-height: 0; }
.t1 .links { grid-row: 1; }
.t1 .servidores { grid-row: 1; }

.lista-links { display: grid; grid-template-rows: 1fr 1fr; gap: .9em; flex: 1; min-height: 0; }
.link { background: var(--painel-2); border-radius: 10px; padding: .8em 1em; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 1.2em; min-height: 0; border-left: 4px solid var(--ok); }
.link.alerta { border-left-color: var(--alerta); } .link.critico { border-left-color: var(--critico); }
.link .uso { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; min-width: 5.6em; }
.link .uso b { font-size: 2.9em; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.link.alerta .uso b { color: var(--alerta); } .link.critico .uso b { color: var(--critico); }
.link .uso span { color: var(--suave); font-size: .85em; margin-top: .3em; }
.link .nome { display: flex; justify-content: space-between; align-items: baseline; }
.link .nome strong { font-size: 1.1em; }
.link .nome span { color: var(--suave); font-size: .85em; }
.link .spark { width: 100%; height: 100%; min-height: 3em; }
.spark-limite { stroke: var(--alerta); stroke-dasharray: 4 4; stroke-width: 1; opacity: .5; vector-effect: non-scaling-stroke; }

.grade-srv { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: .8em; flex: 1; min-height: 0; }
.srv { background: var(--painel-2); border-radius: 10px; padding: .75em .9em; display: flex; flex-direction: column; gap: .35em; border-top: 3px solid var(--ok); }
.srv.alerta { border-top-color: var(--alerta); } .srv.critico { border-top-color: var(--critico); background: rgba(239,68,68,.08); }
.srv .cab { display: flex; align-items: center; gap: .5em; }
.srv .cab strong { font-size: 1.08em; flex: 1; }
.srv .cab small { color: var(--suave); font-variant-numeric: tabular-nums; }
.srv .funcao { color: var(--suave); font-size: .85em; margin-top: -.2em; }
.srv .med { display: grid; grid-template-columns: 2.6em 1fr 2.6em; align-items: center; gap: .5em; font-size: .85em; color: var(--suave); }
.srv .med em { font-style: normal; text-align: right; color: var(--texto); font-variant-numeric: tabular-nums; }
.srv .fora { margin: auto 0; color: var(--critico); font-weight: 650; font-size: 1.05em; }

.barra { display: block; height: .5em; background: rgba(143,160,189,.16); border-radius: 99px; overflow: hidden; }
.barra i { display: block; height: 100%; background: var(--ok); border-radius: 99px; transition: width .6s; }
.barra.alerta i { background: var(--alerta); } .barra.critico i { background: var(--critico); }

.grade-ap { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7em; flex: 1; align-content: stretch; }
.ap { background: var(--painel-2); border-radius: 10px; padding: .65em .8em; display: flex; flex-direction: column; justify-content: center; }
.ap .cab { display: flex; align-items: center; gap: .45em; font-weight: 600; }
.ap span { color: var(--suave); font-size: .82em; }
.ap b { font-size: 1.5em; font-variant-numeric: tabular-nums; margin-top: .1em; }
.ap b small { font-size: .55em; color: var(--suave); font-weight: 500; }
.ap.critico { background: rgba(239,68,68,.1); } .ap.critico b { color: var(--critico); font-size: 1.05em; }

.lista-sis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: space-around; flex: 1; }
.lista-sis li { display: flex; align-items: center; gap: .7em; padding: .45em 0; border-bottom: 1px solid var(--borda); font-size: 1.02em; }
.lista-sis li:last-child { border-bottom: 0; }
.lista-sis li span:not(.ponto) { flex: 1; }
.lista-sis li em { font-style: normal; color: var(--suave); font-variant-numeric: tabular-nums; }
.lista-sis li.critico em { color: var(--critico); font-weight: 650; }

.rodape { display: flex; gap: 1em; }
.rodape div { flex: 1; background: var(--painel); border: 1px solid var(--borda); border-radius: 10px; padding: .55em .9em; display: flex; align-items: center; gap: .6em; }
.rodape span:not(.ponto) { color: var(--suave); flex: 1; }
.rodape b { font-variant-numeric: tabular-nums; }

/* ---------- Tela 2 ---------- */
.t2 { display: grid; grid-template-columns: 1.15fr 1fr 1.1fr; grid-template-rows: 1fr auto; gap: 1em; min-height: 0; }
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55em; overflow: hidden; flex: 1; }
.lista li { background: var(--painel-2); border-radius: 10px; padding: .65em .85em; display: grid; grid-template-columns: auto 1fr auto; gap: .2em .7em; align-items: center; border-left: 4px solid var(--borda); }
.lista li.critico { border-left-color: var(--critico); background: rgba(239,68,68,.08); }
.lista li.alerta { border-left-color: var(--alerta); }
.lista li.ok { border-left-color: var(--ok); }
.lista li strong { font-size: 1.02em; font-weight: 600; }
.lista li small { grid-column: 2 / 4; color: var(--suave); font-size: .84em; }
.lista li .tag { font-size: .75em; color: var(--suave); text-transform: uppercase; letter-spacing: .08em; }
.lista li .dias { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.lista li.critico .dias { color: var(--critico); } .lista li.alerta .dias { color: var(--alerta); }
.vazio { margin: auto; text-align: center; color: var(--suave); }
.vazio b { display: block; font-size: 2.6em; color: var(--ok); line-height: 1.1; }
.falta { display: inline-flex; gap: .3em; }
.falta i { font-style: normal; font-size: .78em; padding: .1em .45em; border-radius: 6px; background: rgba(143,160,189,.16); color: var(--texto); }

.kpis { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; }
.kpi { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); padding: .8em 1.1em; }
.kpi span { color: var(--suave); font-size: .88em; }
.kpi b { display: block; font-size: 2.2em; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi b small { font-size: .45em; color: var(--suave); font-weight: 500; }

/* ---------- Página de gestão (navegador comum) ---------- */
.gestao-topo { display: flex; align-items: center; gap: 24px; padding: 18px 5vw; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.gestao-topo nav { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.gestao-topo nav a { text-decoration: none; padding: 8px 12px; border-radius: 8px; color: var(--suave); font-size: 14px; }
.gestao-topo nav a.ativo, .gestao-topo nav a:hover { background: var(--painel); color: var(--texto); }
.gestao { padding: 28px 5vw 60px; max-width: 1280px; }
.gestao h1 { margin: 0 0 4px; font-size: 26px; }
.gestao .sub { color: var(--suave); margin: 0 0 24px; }
.resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 26px; }
.resumo .kpi b { font-size: 30px; }
.duas { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; }
@media (max-width: 900px) { .duas { grid-template-columns: 1fr; } }
.gestao .cartao { font-size: 15px; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; color: var(--suave); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--borda); }
.tabela td { padding: 10px; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela td.num { font-variant-numeric: tabular-nums; text-align: right; }
.st { display: inline-flex; align-items: center; gap: 7px; }
.telas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 4px; }
.telas a { display: block; text-decoration: none; background: var(--painel-2); border: 1px solid var(--borda); border-radius: 10px; padding: 14px; }
.telas a:hover { border-color: var(--marca); }
.telas a strong { display: block; margin-bottom: 2px; }
.telas a span { color: var(--suave); font-size: 13px; }
.integracoes { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.integracoes li { display: flex; gap: 10px; align-items: center; font-size: 14px; padding: 8px 10px; background: var(--painel-2); border-radius: 8px; }
.integracoes li span:not(.ponto) { flex: 1; }
.integracoes li em { font-style: normal; font-size: 12px; color: var(--alerta); }
.fonte { font-size: 12px; color: var(--suave); }