/*
 * Template "moderno" da Intranet.
 * Visual do painel3: menu lateral azul-marinho, fundo cinza-claro, azul de destaque, cantos arredondados.
 * So apresentacao: as paginas continuam as mesmas (HTML antigo com tabelas); a camada ".conteudo" abaixo
 * moderniza tabelas, campos e botoes sem editar cada tela.
 * Fonte do sistema (sem CDN). A pagina e servida em ISO-8859-1.
 */

:root {
	--nav: #0E1A33;
	--nav-2: #142446;
	--nav-ativo: #1B2F5C;
	--nav-linha: #22355F;
	--nav-texto: #AEB9CF;
	--nav-grupo: #8A97B2;
	--nav-forte: #FFFFFF;
	--canvas: #F3F5F9;
	--superficie: #FFFFFF;
	--linha: #E2E7EF;
	--texto: #0F172A;
	--suave: #64748B;
	--destaque: #2563EB;
	--destaque-forte: #1D4ED8;
	--destaque-claro: #EAF1FE;
	--aviso: #C2410C;
	--aviso-claro: #FDF0E8;
	--erro: #DC2626;
	--erro-claro: #FDECEC;
	--raio: 10px;
	--raio-pq: 7px;
	--lateral: 248px;
	--fonte: "Segoe UI", "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
	background: var(--canvas);
	color: var(--texto);
	font-family: var(--fonte);
	font-size: 13px;
	line-height: 1.5;
	text-align: left; /* o template antigo centralizava o corpo; as tabelas nao herdavam isso */
	-webkit-font-smoothing: antialiased;
}
a { color: var(--destaque); text-decoration: none; }
a:hover { color: var(--destaque-forte); text-decoration: underline; }
a img { border: 0; }
:focus-visible { outline: 2px solid var(--destaque); outline-offset: 2px; }
::selection { background: var(--destaque-claro); }
hr { border: 0; border-top: 1px solid var(--linha); }

/* ------------------------------------------------------------------ estrutura */
.app { display: flex; min-height: 100vh; }

.lateral {
	flex: none;
	width: var(--lateral);
	height: 100vh;
	height: 100dvh; /* navegadores novos: altura visivel real (sem a barra de enderecos) */
	position: sticky;
	top: 0;
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	background: var(--nav);
	color: var(--nav-texto);
	overflow: hidden;
}
.marca {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px;
	color: var(--nav-forte);
	border-bottom: 1px solid var(--nav-linha);
	text-decoration: none !important;
}
.marca-sigla {
	width: 34px; height: 34px;
	display: grid; place-items: center;
	border-radius: 8px;
	background: var(--nav-ativo);
	border: 1px solid var(--nav-linha);
	color: #8FB4FF;
	font-weight: 700;
	font-size: 15px;
}
.marca-nome { font-weight: 600; font-size: 15px; line-height: 1.2; }
.marca-nome small { display: block; font-weight: 400; font-size: 11px; color: var(--nav-grupo); margin-top: 2px; }

/* min-height:0 e o que deixa o menu rolar sozinho dentro do flex em todos os navegadores (sem ele o rodape da conta some ou a pagina inteira rola) */
.menu-lateral {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 6px 10px 12px;
	scrollbar-width: thin;
	scrollbar-color: #2E4372 transparent;
}
.menu-lateral::-webkit-scrollbar { width: 8px; }
.menu-lateral::-webkit-scrollbar-track { background: transparent; }
.menu-lateral::-webkit-scrollbar-thumb { background: #2E4372; border-radius: 8px; border: 2px solid var(--nav); }
.menu-lateral::-webkit-scrollbar-thumb:hover { background: #3E5A98; }
.menu-lateral .mn-titulo {
	margin: 12px 0 2px;
	padding: 9px 10px 0;
	border-top: 1px solid var(--nav-linha);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--nav-forte);
}
.menu-lateral .mn-link {
	display: block;
	margin-left: 12px;
	padding: 3px 10px 3px 12px;
	border-left: 1px solid var(--nav-linha);
	border-radius: 0 var(--raio-pq) var(--raio-pq) 0;
	color: var(--nav-texto);
	font-size: 12.5px;
	line-height: 1.35;
	text-decoration: none;
}
.menu-lateral .mn-link:hover { background: var(--nav-2); color: var(--nav-forte); border-left-color: #7FB0FF; }
.menu-lateral .mn-destaque {
	margin: 2px 0 0;
	padding: 6px 10px;
	border-left: 0;
	border-radius: var(--raio-pq);
	color: var(--nav-forte);
	font-weight: 600;
	background: var(--nav-2);
}
.menu-lateral .mn-destaque:hover { background: var(--nav-ativo); }
.menu-lateral .mn-grupo-inline { margin-left: 12px; padding: 3px 10px 3px 12px; font-size: 12.5px; border-left: 1px solid var(--nav-linha); color: var(--nav-grupo); }
.menu-lateral .mn-link-inline { display: inline; margin: 0; padding: 0; border: 0; border-radius: 0; }
.menu-lateral .mn-link-inline:hover { background: none; text-decoration: underline; }

.conta {
	flex: none;
	border-top: 1px solid var(--nav-linha);
	padding: 12px 16px 14px 18px;
	font-size: 12px;
	color: var(--nav-grupo);
}
.conta-quem b { display: block; color: var(--nav-forte); font-weight: 500; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-quem span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-quem .conta-sessao { margin-top: 2px; }
.conta-quem .conta-sessao b { display: inline; font-weight: 500; color: var(--nav-texto); }
.conta-acoes { display: flex; gap: 14px; margin-top: 8px; }
.conta-acoes a { color: var(--nav-texto); }
.conta-acoes a:hover { color: var(--nav-forte); }

.principal { flex: 1; min-width: 0; padding: 22px 32px 18px; }
.topo { margin: 0 0 18px; }
.topo h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.topo-sub { margin: 2px 0 0; color: var(--suave); font-size: 13px; }
.topo-compacto { text-align: right; color: var(--suave); font-size: 12px; margin-bottom: 4px; }
.rodape { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--linha); color: var(--suave); font-size: 11px; letter-spacing: .02em; }

/* modo tela cheia (?temp=full): sem menu lateral */
.tela-cheia .principal { padding: 12px 16px; }

/* aviso de fim de sessao (escrito pelo js.js) */
.aviso-sessao {
	margin: 0 0 16px;
	padding: 10px 14px;
	border-radius: var(--raio-pq);
	background: var(--aviso-claro);
	border: 1px solid #F3C9AD;
	color: var(--aviso);
}

/* ------------------------------------------------------------------ camada para as telas antigas */
.conteudo { overflow-x: auto; }
.conteudo table { font-size: 12.5px; max-width: 100%; }
/* O HTML antigo fixa a largura de tabelas (width="950") e de colunas (width="200") para a fonte pequena do template classico.
   Aqui a largura vira minimo: a tabela cresce se o conteudo pedir e nada quebra em duas linhas sem necessidade. */
.conteudo td[width], .conteudo th[width] { width: auto; }
.conteudo table[width]:not([width$="%"]) { width: auto; }
.conteudo table[width="238"]  { min-width: 238px; }
.conteudo table[width="300"]  { min-width: 300px; }
.conteudo table[width="400"]  { min-width: 400px; }
.conteudo table[width="500"]  { min-width: 500px; }
.conteudo table[width="600"]  { min-width: 600px; }
.conteudo table[width="700"]  { min-width: 700px; }
.conteudo table[width="800"]  { min-width: 800px; }
.conteudo table[width="900"]  { min-width: 900px; }
.conteudo table[width="950"]  { min-width: 950px; }
.conteudo table[width="1000"] { min-width: 1000px; }
.conteudo table[width="1100"] { min-width: 1100px; }
/* mais respiro nas celulas das tabelas antigas (cellpadding 1 a 3) */
.conteudo table[cellpadding="1"] td, .conteudo table[cellpadding="2"] td, .conteudo table[cellpadding="3"] td { padding: 5px 9px; }
/* celulas de acao ("[ Interface Info | Destravar ]") em uma linha so */
.conteudo td a { white-space: nowrap; }
.conteudo center { display: block; }
.conteudo h1, .conteudo h2, .conteudo h3 { font-weight: 600; }
.conteudo font { font-family: inherit; }

/* Cores de status do HTML antigo (bgcolor em <tr> ou <td>): fundo suave, texto escuro legivel e faixa colorida na primeira celula.
   Sao as cores de status do cores.conf: critical #F8514D, warning #F2E281, atuando #167FCA, attention #FF7F00, normal green. */
.conteudo tr[bgcolor="#F8514D" i], .conteudo td[bgcolor="#F8514D" i] { background-color: #FDF1F1; }
.conteudo tr[bgcolor="#F2E281" i], .conteudo td[bgcolor="#F2E281" i] { background-color: #FEFBE8; }
.conteudo tr[bgcolor="#167FCA" i], .conteudo td[bgcolor="#167FCA" i] { background-color: #EEF5FC; }
.conteudo tr[bgcolor="#FF7F00" i], .conteudo td[bgcolor="#FF7F00" i] { background-color: #FFF4E8; }
.conteudo tr[bgcolor="green" i],   .conteudo td[bgcolor="green" i]   { background-color: #EEF9F1; }
.conteudo tr[bgcolor="#F8514D" i] > td:first-child { box-shadow: inset 4px 0 0 #F8514D; }
.conteudo tr[bgcolor="#F2E281" i] > td:first-child { box-shadow: inset 4px 0 0 #E6CB3C; }
.conteudo tr[bgcolor="#167FCA" i] > td:first-child { box-shadow: inset 4px 0 0 #167FCA; }
.conteudo tr[bgcolor="#FF7F00" i] > td:first-child { box-shadow: inset 4px 0 0 #FF7F00; }
.conteudo tr[bgcolor="green" i]   > td:first-child { box-shadow: inset 4px 0 0 #16A34A; }
.conteudo tr[bgcolor="#F8514D" i] a, .conteudo td[bgcolor="#F8514D" i] a,
.conteudo tr[bgcolor="#F2E281" i] a, .conteudo td[bgcolor="#F2E281" i] a,
.conteudo tr[bgcolor="#167FCA" i] a, .conteudo td[bgcolor="#167FCA" i] a,
.conteudo tr[bgcolor="#FF7F00" i] a, .conteudo td[bgcolor="#FF7F00" i] a,
.conteudo tr[bgcolor="green" i] a,   .conteudo td[bgcolor="green" i] a { color: var(--texto); }
.conteudo tr[bgcolor="#F8514D" i] a:hover, .conteudo tr[bgcolor="#F2E281" i] a:hover, .conteudo tr[bgcolor="#167FCA" i] a:hover,
.conteudo tr[bgcolor="#FF7F00" i] a:hover, .conteudo tr[bgcolor="green" i] a:hover { color: var(--destaque-forte); }
/* celulas de acao sobre o fundo das linhas da tabela (antes preto, com link branco) */
.conteudo td[bgcolor="#CBD3E1" i] a, .conteudo td[bgcolor="#CBD3E1" i] a font { color: var(--destaque-forte); }

/* campos e botoes: as telas usam class="text" em quase tudo */
.conteudo input.text:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]),
.conteudo textarea, .conteudo select, .textlogin {
	font-family: var(--fonte);
	font-size: 13px;
	color: var(--texto);
	background: var(--superficie);
	border: 1px solid #CBD5E1;
	border-radius: var(--raio-pq);
	padding: 5px 8px;
}
.conteudo input[type="text"], .conteudo input[type="password"], .conteudo input[type="number"], .conteudo input[type="date"], .conteudo input[type="email"] {
	font-family: var(--fonte);
	font-size: 13px;
	border: 1px solid #CBD5E1;
	border-radius: var(--raio-pq);
	padding: 5px 8px;
	background: var(--superficie);
}
.conteudo input:focus, .conteudo textarea:focus, .conteudo select:focus, .textlogin:focus {
	outline: none;
	border-color: var(--destaque);
	box-shadow: 0 0 0 3px var(--destaque-claro);
}
.conteudo input[type="submit"], .conteudo input[type="button"], .conteudo input[type="reset"], .conteudo button {
	font-family: var(--fonte);
	font-size: 13px;
	font-weight: 500;
	color: #FFFFFF;
	background: var(--destaque);
	border: 1px solid var(--destaque);
	border-radius: var(--raio-pq);
	padding: 5px 14px;
	cursor: pointer;
}
.conteudo input[type="submit"]:hover, .conteudo input[type="button"]:hover, .conteudo input[type="reset"]:hover, .conteudo button:hover {
	background: var(--destaque-forte);
	border-color: var(--destaque-forte);
}
.conteudo input[type="submit"]:disabled, .conteudo input[type="button"]:disabled, .conteudo button:disabled { opacity: .55; cursor: default; }

/* classes herdadas do template antigo (ainda usadas por algumas telas e pela pagina de redirecionamento) */
.text, .text2, .form, .select, .select2, .select3 { font-family: var(--fonte); font-size: 13px; }
.menu, .menu2, .menu3 { font: inherit; color: var(--destaque); position: static; }
.menu:hover, .menu2:hover { color: var(--destaque-forte); }
.tempolimite { color: var(--suave); }
.botaotestador { cursor: pointer; }
.redireciona {
	width: 380px;
	max-width: 92%;
	margin: 0 auto;
	padding: 18px;
	background: var(--superficie);
	border: 1px solid var(--linha);
	border-radius: var(--raio);
	text-align: center;
}

/* ------------------------------------------------------------------ Ratius (monitoramento) */
.al-aviso {
	margin: 0 0 14px;
	padding: 10px 14px;
	border-radius: var(--raio-pq);
	background: var(--aviso-claro);
	border: 1px solid #F3C9AD;
	color: var(--aviso);
}
.al-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 0 0 18px; }
.al-legenda { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; color: var(--suave); }
.al-legenda li { display: flex; align-items: center; gap: 8px; }
.al-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.al-btn {
	display: inline-block;
	padding: 5px 12px;
	border: 1px solid #CBD5E1;
	border-radius: var(--raio-pq);
	background: var(--superficie);
	color: var(--texto);
	font-weight: 500;
	white-space: nowrap;
}
.al-btn:hover { border-color: var(--destaque); color: var(--destaque-forte); text-decoration: none; }
.conteudo a.al-btn { color: var(--texto); }
.conteudo a.al-btn:hover { color: var(--destaque-forte); }

/* chip de status: ponto colorido + texto, sem blocos de cor chapada */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; font-weight: 600; font-size: 12px; border: 1px solid transparent; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip-critical { background: #FDECEC; color: #B91C1C; border-color: #F8C4C4; }
.chip-warning  { background: #FEF7D6; color: #8A6D00; border-color: #F2E281; }
.chip-atuando  { background: #E7F1FB; color: #0F5FA6; border-color: #B5D5F0; }
.chip-normal   { background: #E8F7EC; color: #15803D; border-color: #B7E4C4; }

.al-ramal { display: flex; align-items: center; gap: 10px; }
.al-meuramal { display: grid; padding: 6px 12px; border-radius: var(--raio-pq); border-left: 4px solid transparent; font-size: 12.5px; }
.al-meuramal span { color: var(--suave); }

/* cartao com titulo + tabela */
.al-cartao { margin: 0 0 18px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; }
.al-titulo { margin: 0; padding: 10px 14px; font-size: 13.5px; font-weight: 600; background: #F8FAFC; border-bottom: 1px solid var(--linha); }
.al-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.conteudo table.al-tabela { font-size: 13px; }
.al-tabela th { padding: 7px 12px; text-align: left; font-weight: 600; font-size: 12px; color: var(--suave); background: #F8FAFC; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.al-tabela td { padding: 7px 12px; border-bottom: 1px solid var(--linha-suave, #EEF1F6); vertical-align: top; word-break: break-word; }
.al-tabela tbody tr:last-child td { border-bottom: 0; }
.al-tabela td.al-host, .al-tabela th.al-host { width: 210px; white-space: nowrap; font-weight: 600; }
.al-tabela td.al-servico, .al-tabela th.al-servico { width: 260px; }
.al-tabela td.al-duracao, .al-tabela th.al-duracao { width: 1%; white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.al-tabela td.al-centro, .al-tabela th.al-centro { width: 1%; white-space: nowrap; text-align: center; }
.al-tabela th a { color: inherit; }
.al-tabela td a { color: inherit; white-space: normal; }
.al-tabela td a:hover { color: var(--destaque-forte); }
.al-tabela td.al-host a { white-space: nowrap; }
.al-tabela td.al-duracao a { white-space: nowrap; }
.al-ord { font-size: 9px; color: var(--destaque); }

/* linha por estado: fundo suave + faixa colorida a esquerda (cores de status do classico) */
.al-tabela tr.al-critical td  { background: #FDF1F1; }
.al-tabela tr.al-warning td   { background: #FEFBE8; }
.al-tabela tr.al-atuando td   { background: #EEF5FC; }
.al-tabela tr.al-attention td { background: #FFF4E8; }
.al-tabela tr.al-normal td    { background: #EEF9F1; }
.al-tabela tr.al-critical td:first-child  { box-shadow: inset 4px 0 0 #F8514D; }
.al-tabela tr.al-warning td:first-child   { box-shadow: inset 4px 0 0 #E6CB3C; }
.al-tabela tr.al-atuando td:first-child   { box-shadow: inset 4px 0 0 #167FCA; }
.al-tabela tr.al-attention td:first-child { box-shadow: inset 4px 0 0 #FF7F00; }
.al-tabela tr.al-normal td:first-child    { box-shadow: inset 4px 0 0 #16A34A; }
/* varios servicos do mesmo host: so a primeira linha mostra o host; as demais ficam coladas, com uma linha separando os hosts */
.al-tabela tr.al-novo-host td { border-top: 1px solid #D9DFEA; }
.al-tabela tbody tr:first-child td { border-top: 0; }
.al-tabela tr:hover td { filter: brightness(.985); }
.al-p { display: inline-block; margin-right: 6px; padding: 0 5px; border-radius: 4px; background: #167FCA; color: #FFFFFF; font-size: 11px; font-weight: 700; line-height: 1.5; }
.al-registrar { text-align: center; }

/* ------------------------------------------------------------------ login (mesmo padrao do painel3: lateral escura + formulario) */
.pagina-login { background: var(--superficie); }
.login-grade { display: grid; grid-template-columns: minmax(320px, 440px) 1fr; min-height: 100vh; }
.login-lateral {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding: 22px 18px 32px;
	background: var(--nav);
	color: var(--nav-texto);
}
.login-lateral .marca { padding: 18px 18px 0; border-bottom: 0; }
.login-recursos { list-style: none; margin: 0; padding: 0 18px; display: grid; gap: 22px; }
.login-recursos li { display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.login-recursos i {
	width: 32px; height: 32px;
	display: grid; place-items: center;
	border-radius: 8px;
	background: var(--nav-2);
	color: #7FB0FF;
}
.login-recursos b { display: block; color: var(--nav-forte); font-weight: 600; }
.login-recursos span { font-size: 13px; }
.login-rodape { margin: auto 0 0; padding: 0 18px; font-size: 12px; color: #5D6B88; }
.login-principal { display: grid; place-items: center; padding: 32px 16px; background: var(--superficie); }
.login-cartao { width: 100%; max-width: 380px; }
.login-cartao h1 { margin: 0 0 6px; font-size: 26px; font-weight: 600; letter-spacing: -0.01em; }
.login-lead { margin: 0 0 24px; color: var(--suave); }
.campo { display: grid; gap: 6px; margin-bottom: 16px; }
.campo label { font-size: 13px; font-weight: 500; }
.login-cartao .textlogin { width: 100%; height: 40px; font-size: 14px; padding: 8px 10px; }
.botao-login {
	display: block;
	width: 100%;
	height: 42px;
	margin-top: 8px;
	font-family: var(--fonte);
	font-size: 14px;
	font-weight: 600;
	color: #FFFFFF;
	background: var(--texto);
	border: 1px solid var(--texto);
	border-radius: var(--raio-pq);
	cursor: pointer;
}
.botao-login:hover { background: #1E293B; border-color: #1E293B; }
/* botao SSO em destaque; o login por usuario e senha continua logo abaixo */
.botao-sso {
	display: block;
	width: 100%;
	height: 44px;
	line-height: 44px;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: #FFFFFF;
	background: var(--destaque);
	border-radius: var(--raio-pq);
	box-shadow: 0 1px 2px rgba(37, 99, 235, .35);
	text-decoration: none;
}
.botao-sso:hover { background: var(--destaque-forte); color: #FFFFFF; text-decoration: none; }
.login-ou { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px; color: var(--suave); font-size: 12px; }
.login-ou::before, .login-ou::after { content: ""; flex: 1; height: 1px; background: var(--linha); }
.login-aviso { margin: 0 0 16px; padding: 10px 12px; border-radius: var(--raio-pq); background: var(--destaque-claro); border: 1px solid #C9DAFB; color: #1E3A8A; }
/* a mensagem de "Dados Incorretos" ja vem do PHP com texto em vermelho: aqui ela vira um aviso de erro */
.login-aviso:has(font[color="#ff0000" i]) { background: var(--erro-claro); border-color: #F5C2C2; color: #991B1B; }
.login-aviso-bloqueio { background: var(--aviso-claro); border-color: #F3C9AD; color: var(--aviso); }
.login-aviso font { color: inherit; }
.login-aviso br { display: none; }
.login-aviso center { display: block; text-align: left; }
@media (max-width: 760px) { .login-grade { grid-template-columns: 1fr; } .login-lateral { display: none; } }

/* ------------------------------------------------------------------ telas estreitas */
@media (max-width: 900px) {
	.app { display: block; }
	.lateral { position: static; width: 100%; height: auto; }
	.menu-lateral { max-height: 40vh; }
	.principal { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; }
}