@charset "utf-8";

/* ============================================================
   CRM FOCUS — CASCO (master.css)
   Identidade: Grafite e Azul Elétrico
   ------------------------------------------------------------
   MEDIDAS QUE NAO PODEM MUDAR (dependencias de logica/JS):
   .dv-cabecalho ........ 130px  \ soma 170, usada por
   .dv-rodape ........... 40px   / ajusta_iframe() em index.php
   .li-menu-slave ....... height 38px + padding-top 12px
   .li-menu-slave-submenu padding 12px 10px 7px 10px
   .dv-menu-slave-submenu-sel      margin-left -10px / top 13px
   .dv-menu-slave-submenu-niv2-sel margin-top -24px
   Essas quatro ultimas ancoram o dropdown position:fixed.
   ============================================================ */

:root {
	--gf-900:#12171C;
	--gf-800:#1B2229;
	--gf-700:#242E37;
	--gf-600:#33404C;
	--el-500:#2F8BFF;
	--el-600:#1E6FE0;
	--tx-hi:#E8EEF4;
	--tx-md:#97A6B4;
	--tx-lo:#6B7A88;
	--pg:#EEF1F4;
	--ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

.body {
	margin:0;
	background-color:var(--pg);
	font-family:var(--ui);
	-webkit-font-smoothing:antialiased;
}

/* ---------- CABECALHO ---------- */
.dv-cabecalho {
	position:relative;
	width:100%;
	height:130px;
	background:var(--gf-900);
	background-image:none;
	box-sizing:border-box;
}
.dv-cabecalho-box {
	width:100%;
	height:130px;
	margin:auto;
}

/* ---------- LOGO ---------- */
.dv-logo {
	width:auto;
	height:40px;
	float:left;
	margin:6px 0 0 22px;
}
.lg-mark {
	display:block;
	float:left;
	width:26px;
	height:34px;
	margin-top:2px;
	overflow:visible;
}
.lg-b1, .lg-b3 { fill:#FFFFFF; }
.lg-b2 { fill:var(--el-500); }

@keyframes lg-w1 { from { width:0 } to { width:46px } }
@keyframes lg-w2 { from { width:0 } to { width:32px } }
@keyframes lg-h3 { from { height:0 } to { height:18px } }

.lg-b1 { animation:lg-w1 .55s cubic-bezier(.2,.8,.25,1) .10s both; }
.lg-b2 { animation:lg-w2 .55s cubic-bezier(.2,.8,.25,1) .26s both; }
.lg-b3 { animation:lg-h3 .55s cubic-bezier(.2,.8,.25,1) .42s both; }

.lg-word {
	float:left;
	margin:1px 0 0 11px;
}
.lg-word-1 {
	display:block;
	font-family:var(--ui);
	font-size:15px;
	font-weight:600;
	letter-spacing:.15em;
	line-height:19px;
	color:#FFFFFF;
}
.lg-word-2 {
	display:block;
	font-family:var(--ui);
	font-size:9px;
	font-weight:600;
	letter-spacing:.24em;
	line-height:12px;
	color:var(--tx-lo);
}

/* ---------- MENU PRINCIPAL (topo direita) ---------- */
.dv-menu-main {
	float:right;
	height:40px;
	margin:6px 22px 0 0;
}
.ul-menu-main {
	height:40px;
	list-style:none;
	margin:0;
	padding:0;
}
.li-menu-main, .li-menu-main-sel {
	height:26px;
	float:left;
	margin-left:3px;
	padding:14px 13px 0 13px;
	background-image:none;
	background-color:transparent;
	border-radius:8px;
	font-family:var(--ui);
	font-size:12px;
	font-weight:500;
	text-decoration:none;
	color:var(--tx-md);
	cursor:pointer;
}
.li-menu-main-sel {
	background-image:none;
	background-color:var(--gf-700);
	color:#FFFFFF;
}
.dv-menu-main-link { width:100%; }

/* Divs decorativos do skin antigo. O JS ainda alterna o display
   deles; aqui eles ficam sem area, sem efeito visual. */
.dv-menu-main-esq, .dv-menu-main-dir,
.dv-menu-main-esq-sel, .dv-menu-main-dir-sel {
	width:0;
	height:0;
	float:none;
	margin:0;
	background-image:none;
	overflow:hidden;
}

/* ---------- LINHA DE INFORMACAO ---------- */
.dv-nome-sistema {
	float:left;
	margin-left:22px;
}
.p-nome-sistema, .p-nome-sistema-versao {
	font-family:var(--ui);
	font-size:12px;
	color:var(--tx-md);
	margin:0;
	text-align:left;
}
.p-nome-sistema-versao {
	font-size:11px;
	color:var(--tx-lo);
}
.dv-inf-usuario {
	float:right;
	margin:4px 22px 0 0;
}
.dv-banco-de-dados {
	float:right;
	margin:4px 26px 0 0;
}
.p-inf-usuario {
	font-family:var(--ui);
	font-size:12px;
	color:var(--tx-md);
	margin:0;
	line-height:26px;
}
.p-inf-usuario b {
	color:var(--tx-hi);
	font-weight:600;
}
.dv-banco-de-dados .p-inf-usuario {
	float:left;
	margin-right:9px;
	color:var(--tx-lo);
}
/* Especificidade acima da regra de prg.css, que carrega depois */
.dv-banco-de-dados select.in-tx-txt003,
.dv-banco-de-dados select.in-tx-txt003:focus {
	float:left;
	height:26px;
	padding:0 6px;
	border:1px solid var(--gf-600);
	border-radius:6px;
	background-color:#FFFFFF;
	font-family:var(--ui);
	font-size:12px;
	color:#12171C;
	cursor:pointer;
}

/* ---------- MENU DE APLICATIVOS ---------- */
.dv-menu-slave {
	position:relative;
	width:100%;
	height:50px;
	margin:4px auto 0 auto;
	background-image:none;
	background-color:var(--gf-800);
}
.dv-menu-slave-esq, .dv-menu-slave-dir {
	width:0;
	height:50px;
	float:left;
	background-image:none;
}
/*Em tela estreita os itens nao cabem, e o menu quebrava numa segunda
  linha que subia por cima do conteudo. Agora a faixa anda de lado, pelas
  setas do index.php, e o que sai dela e cortado aqui.
  A faixa anda pela MARGEM da ul, e nao por rolagem nem por transform:
  - o dropdown e position:fixed e se ancora na posicao do item no layout.
    Rolagem (scrollLeft) nao mexe no layout, e o submenu ficava parado no
    lugar de onde o item saiu;
  - transform no pai faria dele o bloco de conteudo do fixed, e o submenu
    passaria a ser cortado por este overflow.
  Margem negativa muda o layout: o item anda, e o submenu vai junto. */
.dv-menu-slave-mei {
	width:100%;
	height:50px;
	float:left;
	padding-right:58px;
	box-sizing:border-box;
	overflow:hidden;
}
/*Sem transicao na margem: com ela o Chrome nao chegava a aplicar o valor
  novo (a margem computada ficava em zero), e a faixa nao andava.*/
.ul-menu-slave {
	display:inline-block;
	vertical-align:top;
	list-style:none;
	margin:0;
	padding:0 0 0 18px;
	white-space:nowrap;
}
.li-menu-slave, .li-menu-slave-sel {
	height:38px;
	padding:12px 10px 0 10px;
	margin-left:3px;
	cursor:pointer;
	display:inline-block;
	vertical-align:top;
	box-sizing:content-box;
	font-family:var(--ui);
	font-size:12px;
	font-weight:500;
	color:var(--tx-md);
	background-image:none;
}
.li-menu-slave-sel {
	background-image:none;
	background-color:var(--gf-700);
	color:#FFFFFF;
	box-shadow:inset 0 -3px 0 var(--el-500);
}

/* ---------- SETAS DA FAIXA DE APLICATIVOS ----------
   Nascem escondidas. O menu_setas() do index.php liga cada uma so quando
   ha item escondido daquele lado, entao na tela larga nenhuma aparece.
   A sombra lateral avisa que a faixa continua por baixo da seta. */
.bt-menu-rl {
	display:none;
	position:absolute;
	top:0;
	width:34px;
	height:50px;
	padding:0;
	border:0;
	background-color:var(--gf-800);
	color:var(--tx-md);
	cursor:pointer;
	z-index:20;
}
.bt-menu-rl:hover {
	background-color:var(--gf-700);
	color:#FFFFFF;
}
.bt-menu-rl-esq {
	left:0;
	box-shadow:12px 0 14px -6px var(--gf-800);
}
.bt-menu-rl-dir {
	right:58px;
	box-shadow:-12px 0 14px -6px var(--gf-800);
}
.bt-menu-rl-ic {
	display:block;
	width:16px;
	height:16px;
	margin:0 auto;
}
.dv-menu-slave.mn-esq .bt-menu-rl-esq { display:block; }
.dv-menu-slave.mn-dir .bt-menu-rl-dir { display:block; }
/*Cabecalho recolhido: a faixa reserva 262px a direita (etiqueta da base
  mais o botao), e a seta acompanha esse recuo.*/
.hd-min .bt-menu-rl-dir { right:262px; }

/* ---------- SUBMENUS (position:fixed — geometria preservada) ---------- */
.dv-menu-slave-submenu { display:none; }
.dv-menu-slave-submenu-sel {
	display:block;
	position:fixed;
	margin-left:-10px;
	margin-top:13px;
	background-color:var(--gf-800);
	border:1px solid var(--gf-700);
	border-radius:0 0 8px 8px;
	box-shadow:0 12px 28px rgba(0,0,0,.38);
	overflow:hidden;
	z-index:60;
}
.dv-menu-slave-submenu-niv2-sel {
	display:block;
	position:fixed;
	margin-top:-24px;
	background-color:var(--gf-800);
	border:1px solid var(--gf-700);
	border-radius:8px;
	box-shadow:0 12px 28px rgba(0,0,0,.38);
	overflow:hidden;
	z-index:70;
}
.ul-menu-slave-submenu {
	list-style:none;
	margin:0;
	padding:0;
}
.li-menu-slave-submenu, .li-menu-slave-submenu-sel {
	padding:12px 10px 7px 10px;
	margin-left:0;
	font-family:var(--ui);
	font-size:12px;
	color:var(--tx-md);
	background-color:transparent;
	cursor:pointer;
}
.li-menu-slave-submenu-sel {
	background-color:var(--el-500);
	color:#FFFFFF;
}

/* ---------- MEIO / CONTEUDO ---------- */
.dv-meio, .dv-conteudo, .fr-cont { height:400px; }
.dv-meio {
	width:100%;
	background-color:var(--pg);
}
.dv-conteudo {
	width:100%;
	margin:auto;
	background-color:#FFFFFF;
	text-align:right;
}
.fr-cont {
	display:block;
	width:100%;
	border:0;
	background-color:#FFFFFF;
}

/* ---------- RODAPE ---------- */
.dv-rodape {
	width:100%;
	height:40px;
	background-image:none;
	background-color:var(--gf-900);
	border-top:1px solid var(--gf-700);
	box-sizing:border-box;
}
.p-debug, a.p-debug {
	font-family:var(--ui);
	font-size:11px;
	color:var(--tx-lo);
	text-align:right;
	font-style:normal;
	text-decoration:none;
	margin:0;
	padding:13px 24px 0 0;
}
a.p-debug:hover { color:var(--el-500); }

/* ---------- UTILITARIOS ---------- */
.dv-clear-left  { clear:left; }
.dv-clear-right { clear:right; }
.dv-clear-all   { clear:both; }
.dv-hidde { display:none; }

/* ---------- BOTAO RECOLHER / EXPANDIR ---------- */
.bt-header {
	position:absolute;
	right:18px;
	bottom:14px;
	width:28px;
	height:22px;
	padding:0;
	margin:0;
	line-height:0;
	background-color:transparent;
	border:1px solid var(--gf-600);
	border-radius:6px;
	color:var(--tx-md);
	cursor:pointer;
	z-index:40;
}
.bt-header:hover {
	background-color:var(--gf-700);
	border-color:var(--el-500);
	color:#FFFFFF;
}
.bt-header:focus-visible {
	outline:2px solid var(--el-500);
	outline-offset:2px;
}
.bt-header-ic {
	display:inline-block;
	width:14px;
	height:14px;
	vertical-align:middle;
}
.hd-min .bt-header-ic { transform:rotate(180deg); }

/* ---------- ETIQUETA DA BASE (so no cabecalho recolhido) ---------- */
.et-base {
	display:none;
	position:absolute;
	right:54px;
	bottom:14px;
	max-width:190px;
	height:22px;
	padding:0 10px;
	box-sizing:border-box;
	background-color:var(--gf-900);
	border:1px solid var(--gf-600);
	border-radius:6px;
	font-family:var(--ui);
	font-size:11px;
	font-weight:500;
	line-height:20px;
	color:var(--tx-md);
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	cursor:default;
	z-index:40;
}
.et-base::before {
	content:"";
	display:inline-block;
	width:6px;
	height:6px;
	margin-right:7px;
	border-radius:50%;
	background-color:var(--el-500);
	vertical-align:middle;
}
.hd-min .et-base { display:block; }
.hd-min .dv-menu-slave-mei { padding-right:262px; }

/* ---------- CABECALHO RECOLHIDO ----------
   Some a faixa da logo e a linha de usuario/base de dados.
   A barra de aplicativos permanece: e a navegacao.
   130px -> 50px. O novo total (50 + rodape 40 = 90) esta em
   aplica_header() no index.php.                                */
.hd-min .dv-cabecalho,
.hd-min .dv-cabecalho-box { height:50px; }
.hd-min .dv-logo,
.hd-min .dv-menu-main,
.hd-min .dv-nome-sistema,
.hd-min .dv-inf-usuario,
.hd-min .dv-banco-de-dados { display:none; }
.hd-min .dv-menu-slave { margin-top:0; }

/* ---------- TELA DE LOGIN ---------- */
.lgn-wrap {
	height:100vh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.lgn-card {
	width:340px;
	padding:34px 34px 26px 34px;
	background-color:var(--gf-800);
	border:1px solid var(--gf-700);
	border-radius:14px;
	box-shadow:0 24px 60px rgba(0,0,0,.45);
	box-sizing:border-box;
}
.lgn-brand {
	height:40px;
	margin-bottom:26px;
}
.lgn-brand .lg-mark { float:left; }
.lgn-brand .lg-word { float:left; }
.lgn-lb {
	display:block;
	font-family:var(--ui);
	font-size:11px;
	font-weight:600;
	letter-spacing:.06em;
	color:var(--tx-lo);
	margin-bottom:6px;
}
.lgn-fd { margin-bottom:16px; }
.lgn-msg {
	font-family:var(--ui);
	font-size:12px;
	line-height:17px;
	color:#FF8A80;
	text-align:center;
	margin:16px 0 0 0;
	min-height:17px;
}
.lgn-tag {
	font-family:var(--ui);
	font-size:11px;
	font-weight:500;
	letter-spacing:.18em;
	color:var(--tx-lo);
	text-align:center;
	text-transform:uppercase;
	margin:24px 0 0 0;
}

/* ---------- ACESSIBILIDADE ---------- */
@media (prefers-reduced-motion:reduce) {
	.lg-b1, .lg-b2, .lg-b3 { animation:none; }
}