/*
 * Overrides do Portal sobre o Tabler - suporte a menu lateral com
 * multiplos niveis (accordion via collapse do Bootstrap, nao o
 * flyout-dropdown padrao do Tabler - o menu real do Portal tem grupos
 * profundos demais para um flyout ser pratico) e pequenos ajustes de
 * marca. O Tabler em si (assets/tabler/) nunca e editado diretamente.
 */

:root{
	--tblr-primary: #066fd1;
}

/* ---- fonte base maior para melhorar a leitura (Tabler usa 14px por
   padrao via --tblr-body-font-size; subimos para 16px = 1rem, o tamanho
   "padrao" da web). A maioria do texto do sistema (tabelas, card-body,
   listas) herda essa variavel do <body>, mas alguns componentes do Tabler
   fixam .875rem direto na propria regra (form-control/form-label/
   form-select/input-group-text e o botao, via --tblr-btn-font-size) - por
   isso essas poucas excecoes sao re-declaradas aqui tambem, senao ficariam
   menores que o resto do texto ao redor. ---- */
:root{
	--tblr-body-font-size: 1rem;
}
.form-control,
.form-label,
.form-select,
.form-selectgroup-label,
.input-group-text{
	font-size: 1rem;
}
.btn{
	--tblr-btn-font-size: 1rem;
}

/* ---- remove o fundo decorativo legado (css/style.css: body{background:
   url(../images/bgbody.png)}), pensado pra telas antigas com #wrapper/
   #conteudo opacos cobrindo tudo. A imagem tem uma linha azul decorativa
   perto do topo que, nas telas novas (Tabler), fica visivel nos espacos
   entre header/titulo/cards - carregada depois do portal.css, entao so um
   !important aqui consegue vencer a regra antiga. Exclui .page-login: essa
   tela usa o proprio background (gradiente azul, mais abaixo neste
   arquivo) via background-image, que esse !important genérico também
   apagava. ---- */
body:not(.page-login){
	background-image: none !important;
}

/* ---- sidebar: subgrupos aninhados ----
   "Prateleira" com régua à esquerda (em vez do texto cinza apagado direto
   sobre o azul-marinho): cada nível de submenu ganha uma borda-guia, o
   texto passa a ter contraste real contra o fundo, e o item ativo dentro
   do grupo é marcado com uma pilula clara + uma régua em destaque (dourado),
   em vez de só o negrito que o item ativo de topo já usa. */
.nav-sidebar-sub{
	display: block;
	padding-left: .8rem;
	margin: .15rem 0 .45rem 1.05rem;
	list-style: none;
	border-left: 2px solid rgba(255, 255, 255, .14);
}
.nav-sidebar-sub > li{
	display: block;
	width: 100%;
}
.nav-sidebar-sub .nav-link{
	padding: .42rem .55rem;
	border-radius: .5rem;
	font-size: .79rem;
	color: rgba(255, 255, 255, .68);
}
.nav-sidebar-sub .nav-link:hover{
	background: rgba(255, 255, 255, .06);
	color: #fff;
}
.nav-sidebar-sub .nav-sidebar-sub{
	margin-left: .75rem;
}
.nav-sidebar-sub .nav-sidebar-sub .nav-link{
	padding-left: .55rem;
}

/* ---- item de submenu que tambem e um atalho direto (ex.: "Resultados",
   que abre para a opcao mais usada - Resultados Mensais - ao clicar no
   rotulo, mas continua listando as outras opcoes por baixo). O rotulo e
   o botao de abrir/fechar viram dois elementos lado a lado, cada um com
   a classe nav-link, entao ja herdam o padding/cor/hover/estado ativo
   definidos acima sem precisar duplicar nada. ---- */
.nav-link-row{
	display: flex;
	align-items: stretch;
	gap: .15rem;
}
.nav-link-row .nav-link-primary{
	flex: 1;
	min-width: 0;
}
.nav-link-row .nav-link-caret{
	flex: 0 0 auto;
	width: 1.9rem;
	justify-content: center;
	border: none;
	background: transparent;
	font: inherit;
	cursor: pointer;
}
.nav-link-row .nav-link-caret .collapse-chevron{
	margin-left: 0;
}
.nav-subtitle{
	font-size: .66rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .4);
	padding: .75rem .55rem .25rem;
}

.navbar-vertical .nav-link{
	display: flex;
	align-items: center;
	gap: .1rem;
}
.navbar-vertical .nav-link .collapse-chevron{
	margin-left: auto;
	width: 14px;
	height: 14px;
	transition: transform .15s ease;
	opacity: .6;
}
.navbar-vertical .nav-link[aria-expanded="true"] .collapse-chevron{
	transform: rotate(90deg);
}
.navbar-vertical .nav-link.active{
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-weight: 600;
}
.nav-sidebar-sub .nav-link.active{
	position: relative;
	background: rgba(255, 255, 255, .1);
	color: #fff;
}
.nav-sidebar-sub .nav-link.active::before{
	content: '';
	position: absolute;
	left: -.95rem;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 14px;
	border-radius: 2px;
	background: #f0a93c;
}

/* ---- avatar de iniciais (sem foto de perfil no sistema) ---- */
.avatar{
	background: var(--tblr-primary);
	color: #fff;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
	font-size: .7rem;
}

/* ---- users_listar.php: lista de colaboradores com busca - troca a tabela
   antiga (uma linha de botoes grandes por colaborador: users_btn,
   users_btn_c, users_btn_d, users_btn_e) por uma lista mais enxuta, com as
   acoes em icone que só ganham destaque quando a linha recebe hover/foco,
   reduzindo a poluicao visual sem esconder as acoes atras de um menu. ---- */
.users-list .person-row{
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .65rem 1rem;
	border-bottom: 1px solid var(--tblr-border-color);
}
.users-list .person-row:last-child{
	border-bottom: none;
}
.users-list .row-actions{
	margin-left: auto;
	display: flex;
	gap: .15rem;
	opacity: .35;
	transition: opacity .15s;
}
.users-list .person-row:hover .row-actions,
.users-list .person-row:focus-within .row-actions{
	opacity: 1;
}
.users-list .row-actions form{
	display: contents;
}
.users-list .row-actions .btn-icon{
	width: 1.9rem;
	height: 1.9rem;
}
.users-search-wrap{
	position: relative;
}
.users-search-wrap .ti-search{
	position: absolute;
	left: .6rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--tblr-secondary-color);
	pointer-events: none;
}
.users-search-wrap input{
	padding-left: 2rem;
}

/* ==========================================================================
   Modernizacao automatica das telas ainda nao convertidas para a marcacao
   do Tabler (a grande maioria do sistema, ~150 telas). Em vez de reescrever
   o HTML de cada uma agora, estas regras seguram os padroes que se repetem
   em quase toda tela (tabelas de listagem, botoes de acao, caixas de
   mensagem, paginador, campos de formulario) e aplicam o visual do Tabler
   diretamente em cima da marcacao antiga, pelos mesmos seletores/classes
   que ja existem no HTML. Cada tela ganha o visual atualizado assim que e
   revisitada; nenhuma dessas regras depende de #conteudo/#wrapper (que nao
   existem mais na nova estrutura). */

/* ---- caixas de mensagem .ms <variante> - o codigo original usa varios
   apelidos inconsistentes para os mesmos 3 tipos (erro/sucesso/info);
   levantamos as variantes realmente usadas no projeto (grep em todo o
   codigo) em vez de supor nomes "corretos". */
.page-body .no, .page-body .ms.noo, .page-body .ms.no, .page-body .ms.all,
.page-body .ok, .page-body .ms.ok, .page-body .ms.okk,
.page-body .ms.in, .page-body .ms.inn, .page-body .ms.inf, .page-body .ms.al{
	/* a classe base .ms (css/style.css) flutua a esquerda com largura fixa
	   de 698px, pensada pro layout antigo (#conteudo/#wrapper) - dentro de
	   um .card do Tabler isso faz o conteudo seguinte (ex.: o cabecalho da
	   empresa em empresa_editar.php) subir e ficar do lado da mensagem em
	   vez de abaixo dela. As regras abaixo ja vencem por especificidade em
	   tudo que redeclaram, mas float/width nao eram redeclarados por
	   nenhuma delas - por isso ainda valiam os da regra antiga. */
	float: none;
	width: auto;
}
.page-body .no, .page-body .ms.noo, .page-body .ms.no, .page-body .ms.all{
	display: block;
	padding: .5rem .75rem;
	margin-bottom: 1rem;
	border-radius: var(--tblr-border-radius);
	background: var(--tblr-danger-lt);
	color: var(--tblr-danger-text-emphasis, #a52222);
	font: inherit;
	border: none;
}
.page-body .ok, .page-body .ms.ok, .page-body .ms.okk{
	display: block;
	padding: .5rem .75rem;
	margin-bottom: 1rem;
	border-radius: var(--tblr-border-radius);
	background: var(--tblr-success-lt);
	color: var(--tblr-success-text-emphasis, #1a7a3d);
	font: inherit;
	border: none;
}
.page-body .ms.in, .page-body .ms.inn, .page-body .ms.inf, .page-body .ms.al{
	display: block;
	padding: .5rem .75rem;
	margin-bottom: 1rem;
	border-radius: var(--tblr-border-radius);
	background: var(--tblr-azure-lt);
	color: var(--tblr-info-text-emphasis, #0d5aa7);
	font: inherit;
	border: none;
}

/* ---- tabelas de listagem cruas (width="100%", id="minhatabela", bgcolor no cabecalho) ---- */
.page-body table[width],
.page-body table#minhatabela{
	width: 100% !important;
	border-collapse: collapse;
	font-size: .875rem;
	background: var(--tblr-bg-surface);
	border: 1px solid var(--tblr-border-color);
	border-radius: var(--tblr-border-radius);
	overflow: hidden;
}
.page-body table[width] td, .page-body table[width] th,
.page-body table#minhatabela td, .page-body table#minhatabela th{
	border-bottom: 1px solid var(--tblr-border-color);
	padding: .5rem .75rem;
	background: transparent !important;
	color: inherit !important;
}
.page-body table[width] th, .page-body table#minhatabela th{
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--tblr-secondary) !important;
	font-weight: 600;
	text-align: left;
	background: var(--tblr-bg-surface-secondary) !important;
}
.page-body table[width] tr:hover td, .page-body table#minhatabela tr:hover td{
	background: var(--tblr-bg-surface-secondary) !important;
}
.page-body table[width] font, .page-body table#minhatabela font{
	color: inherit;
}

/* ---- epi_controle_mapa.php - badges coloridos (D/E/O/N/P/V) por cima do
   reset generico de tabelas cruas acima. A tentativa anterior usava so'
   ".epi-badge-X" (especificidade 0,2,0), que PERDIA pra
   "table[width] td" (especificidade 0,2,2, por contar os elementos table
   e td) mesmo os dois tendo !important - entre declaracoes !important,
   especificidade decide antes de ordem de declaracao, entao as cores
   nunca apareciam (bug relatado pelo Amauri em 16/10/2026, com captura
   de tela mostrando as celulas sem nenhuma cor). Qualificando com
   "td.epi-badge-X" (ou "table#minhatabela td.epi-badge-X" pro outro
   ramo do reset) garante especificidade maior que qualquer um dos dois
   ramos do reset generico. ---- */
.page-body .epi-badge{
	font-weight: 600 !important;
}
.page-body table[width] td.epi-badge-blue, .page-body table#minhatabela td.epi-badge-blue{ background: #0080C0 !important; color: #fff !important; }
.page-body table[width] td.epi-badge-red, .page-body table#minhatabela td.epi-badge-red{ background: #FF0000 !important; color: #fff !important; }
.page-body table[width] td.epi-badge-gray, .page-body table#minhatabela td.epi-badge-gray{ background: #999999 !important; color: #fff !important; }
.page-body table[width] td.epi-badge-green, .page-body table#minhatabela td.epi-badge-green{ background: #2f9e6e !important; color: #fff !important; }

/* ---- epi_controle_mapa.php - cabecalho de coluna com o nome do EPI em
   texto vertical, substituindo a antiga imagem customizada (18px de
   largura, nome do EPI desenhado na propria imagem, uma por EPI) por
   texto real rotacionado via CSS - mesma legibilidade/compacidade sem
   depender de upload manual de imagem por EPI. ---- */
.page-body .epi-mapa-th{
	width: 34px;
	height: 210px;
	vertical-align: bottom;
	padding: .35rem .1rem;
	background: transparent !important;
}
.page-body .epi-mapa-th-rotulo{
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-height: 200px;
	margin: 0 auto;
	font-size: .72rem;
	font-weight: 600;
	color: var(--tblr-body-color) !important;
}

/* ---- botao de salvar dos formularios de cadastro/edicao (cadastro_btn) ---- */
.page-body input.cadastro_btn, .page-body button.cadastro_btn{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto !important;
	padding: .4375rem 1.25rem;
	margin-top: .5rem;
	font: inherit;
	font-size: .875rem;
	font-weight: 500;
	color: #fff;
	background: var(--tblr-primary);
	border: 1px solid transparent;
	border-radius: var(--tblr-border-radius);
	cursor: pointer;
}
.page-body input.cadastro_btn:hover, .page-body button.cadastro_btn:hover{
	filter: brightness(0.95);
}

/* ---- botoes de acao das telas de edicao (users_btn_*) ---- */
.page-body input.users_btn, .page-body input.users_btn_e,
.page-body input.users_btn_d, .page-body input.users_btn_c{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto !important;
	padding: .3rem .9rem;
	margin: .25rem .5rem .25rem 0;
	font: inherit;
	font-size: .8rem;
	font-weight: 500;
	border-radius: var(--tblr-border-radius);
	cursor: pointer;
}
.page-body input.users_btn{
	background: var(--tblr-secondary-lt);
	color: var(--tblr-secondary);
	border: 1px solid transparent;
}
.page-body input.users_btn_c{
	background: var(--tblr-primary-lt);
	color: var(--tblr-primary);
	border: 1px solid transparent;
}
.page-body input.users_btn_d{
	background: var(--tblr-teal-lt);
	color: var(--tblr-teal);
	border: 1px solid transparent;
}
.page-body input.users_btn_e{
	background: var(--tblr-danger-lt);
	color: var(--tblr-danger);
	border: 1px solid transparent;
}
.page-body input.users_btn:hover, .page-body input.users_btn_e:hover,
.page-body input.users_btn_d:hover, .page-body input.users_btn_c:hover{
	filter: brightness(0.95);
}

/* ---- botoes de acao das listagens (lista_btn_*) - viram botoes do Tabler ---- */
.page-body input.lista_btn, .page-body input.lista_btn_el,
.page-body input.lista_btn_e, .page-body input.lista_btn_c,
.page-body input.lista_btn_cd, .page-body input.lista_btn_r,
.page-body input.lista_btn_ex, .page-body input.ferias{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	height: auto;
	padding: .3rem .75rem;
	font: inherit;
	font-size: .8rem;
	font-weight: 500;
	border-radius: var(--tblr-border-radius);
	cursor: pointer;
	text-shadow: none;
	box-shadow: none;
}
.page-body input.lista_btn, .page-body input.lista_btn_el{
	background: var(--tblr-secondary-lt);
	color: var(--tblr-secondary);
	border: 1px solid transparent;
}
.page-body input.lista_btn_c, .page-body input.lista_btn_cd{
	background: var(--tblr-primary-lt);
	color: var(--tblr-primary);
	border: 1px solid transparent;
}
.page-body input.lista_btn_r{
	background: var(--tblr-success-lt);
	color: var(--tblr-success);
	border: 1px solid transparent;
}
.page-body input.lista_btn_e, .page-body input.lista_btn_ex, .page-body input.ferias{
	background: var(--tblr-danger-lt);
	color: var(--tblr-danger);
	border: 1px solid transparent;
}
.page-body input.lista_btn:hover, .page-body input.lista_btn_el:hover,
.page-body input.lista_btn_c:hover, .page-body input.lista_btn_cd:hover,
.page-body input.lista_btn_r:hover, .page-body input.lista_btn_e:hover,
.page-body input.lista_btn_ex:hover, .page-body input.ferias:hover{
	filter: brightness(0.95);
}

/* ---- paginador ---- */
.page-body .paginator{
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	align-items: center;
	padding: .75rem 0;
}
.page-body .paginator a{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 .5rem;
	border-radius: var(--tblr-border-radius);
	color: var(--tblr-body-color);
	text-decoration: none;
	font-size: .8rem;
	border: 1px solid var(--tblr-border-color);
}
.page-body .paginator a:hover{
	background: var(--tblr-bg-surface-secondary);
}
.page-body .paginator .paginator-current{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 .5rem;
	border-radius: var(--tblr-border-radius);
	background: var(--tblr-primary);
	color: #fff;
	font-size: .8rem;
	font-weight: 600;
}


/* ---- remove o espaçamento vertical padrao do Tabler entre a navbar/footer
   e o conteudo da pagina (--tblr-page-padding-y), deixando as barras coladas
   no titulo/conteudo ---- */
.page-header{
	margin-top: 0 !important;
}
.page-body{
	margin-bottom: 0 !important;
}

/* ---- remove a linha (box-shadow inset) que o Tabler desenha na borda
   inferior do header, que ficava visivel como uma linha escura logo abaixo
   da navbar, acima do titulo da pagina ---- */
.navbar-caspper{
	box-shadow: none !important;
}

/* ---- header e footer do index2.php - barra azul-marinho unica com marca
   em texto, "usuario · nivel" e botao Sair (mesma paleta da tela de login),
   substituindo a topbar clara + rodape claro padrao do Tabler ---- */
.navbar-caspper{
	background: var(--tblr-primary);
}
.navbar-caspper .navbar-brand{
	font-size: 1.15rem;
	font-weight: 400;
	color: #fff;
}
.navbar-caspper .navbar-brand strong{
	font-weight: 700;
}
.navbar-caspper .navbar-brand:hover{
	color: #fff;
}
.navbar-caspper .caspper-userinfo{
	color: rgba(255, 255, 255, .85);
	font-size: .875rem;
	text-decoration: none;
}
.navbar-caspper .caspper-userinfo:hover{
	color: #fff;
}
.btn-sair{
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .3);
	color: #fff;
	border-radius: 2rem;
	padding: .25rem 1rem;
}
.btn-sair:hover,
.btn-sair:focus{
	background: rgba(255, 255, 255, .18);
	border-color: rgba(255, 255, 255, .45);
	color: #fff;
}

.footer-caspper{
	background: var(--tblr-primary);
	color: rgba(255, 255, 255, .85);
	padding: .75rem 0;
	font-size: .8125rem;
}
.footer-caspper #ur{
	font-variant-numeric: tabular-nums;
}

/* ---- home.php: banner de boas-vindas compacto (uma faixa so', nao mais
   um card lateral) - pedido do Amauri em 03/10/2026, pra liberar a largura
   toda da home pros cards de indicadores (home-cards-grid logo abaixo),
   que agora precisam de espaco pra acomodar mais cards (Metas & Vendas e
   os que vierem depois) sem ficar apertado. Mesmo gradiente/sombra/radius
   do card antigo (welcome-hero), so' que numa unica linha horizontal. ---- */
.welcome-banner{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	/* mesmo motivo do width:100% em .home-cards-grid: o .col-12 que envolve
	   vira flex (row-deck do Tabler) e, sem largura explicita, um item
	   flex sem flex-basis definido pode encolher pro tamanho do conteudo
	   em vez de ocupar a largura toda. */
	width: 100%;
	border-radius: var(--tblr-card-border-radius, 8px);
	padding: .85rem 1.25rem;
	background: linear-gradient(120deg, #0558ab, var(--tblr-primary) 70%);
	color: #fff;
	box-shadow: var(--tblr-shadow-card, 0 0 4px rgba(13, 28, 55, .06));
}
.welcome-banner-avatar{
	background-color: rgba(255, 255, 255, .16);
	border: 2px solid rgba(255, 255, 255, .5);
	color: #fff;
	flex-shrink: 0;
}
.welcome-banner-id{
	white-space: nowrap;
}
.welcome-banner-eyebrow{
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .68);
}
.welcome-banner-name{
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -.01em;
	text-transform: capitalize;
}
.welcome-banner-meta{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .5rem;
	margin-left: auto;
}
.welcome-chip{
	display: inline-flex;
	align-items: center;
	font-size: .8125rem;
	font-weight: 600;
	padding: .35rem .75rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .14);
	border: 1px solid rgba(255, 255, 255, .22);
}
.welcome-chip-alert{
	background: #e0402c;
	border-color: #e0402c;
	color: #fff;
	font-weight: 700;
}
.btn-welcome{
	font-weight: 700;
	font-size: .8125rem;
	color: var(--tblr-primary);
	background: #fff;
	border: none;
	padding: .4rem 1rem;
	border-radius: 999px;
}
.btn-welcome:hover,
.btn-welcome:focus{
	color: var(--tblr-primary);
	background: #f4f6f9;
}

/* ---- tela de login (index.php) ---- */
body.page-login{
	min-height: 100vh;
	background: linear-gradient(135deg, #0c1d3e 0%, #1c4278 45%, #3079c4 100%);
}
body.page-login .login-card{
	border: none;
	border-radius: 1rem;
	box-shadow: 0 1.5rem 3rem rgba(8, 18, 40, .35);
}
body.page-login .login-title{
	margin-bottom: .25rem;
	font-size: 1.6rem;
	font-weight: 400;
	color: #16305c;
}
body.page-login .login-title strong{
	font-weight: 700;
}
body.page-login .login-subtitle{
	margin-bottom: 1.5rem;
	font-size: .8125rem;
	color: #4d78ab;
}
body.page-login .form-check-label{
	font-size: .8125rem;
	color: var(--tblr-secondary);
}
body.page-login .btn-login{
	background: #16305c;
	border-color: #16305c;
	color: #fff;
	font-weight: 600;
}
body.page-login .btn-login:hover,
body.page-login .btn-login:focus{
	background: #0f2547;
	border-color: #0f2547;
	color: #fff;
}

/* ---- campos de formulario legado (sem .form-control) - aplica o visual do
   Tabler diretamente nos elementos, sem exigir trocar a classe no HTML ---- */
.page-body form.form input[type="text"],
.page-body form.form input[type="password"],
.page-body form.form input[type="email"],
.page-body form.form input[type="number"],
.page-body form.form input[type="date"],
.page-body form.form input[type="tel"],
.page-body form.form select,
.page-body form.form textarea{
	display: block;
	width: 100%;
	padding: .4375rem .75rem;
	margin-bottom: .75rem;
	font-size: .875rem;
	color: var(--tblr-body-color);
	background: var(--tblr-bg-forms);
	border: 1px solid var(--tblr-border-color);
	border-radius: var(--tblr-border-radius);
}
.page-body form.form input[type="text"]:focus,
.page-body form.form input[type="password"]:focus,
.page-body form.form input[type="email"]:focus,
.page-body form.form input[type="number"]:focus,
.page-body form.form input[type="date"]:focus,
.page-body form.form input[type="tel"]:focus,
.page-body form.form select:focus,
.page-body form.form textarea:focus{
	outline: none;
	border-color: var(--tblr-primary);
	box-shadow: 0 0 0 2px var(--tblr-primary-lt);
}
.page-body form.form input[type="submit"]:not([class*="lista_btn"]):not(.ferias){
	display: inline-flex;
	align-items: center;
	padding: .4375rem 1rem;
	font-size: .875rem;
	font-weight: 500;
	color: #fff;
	background: var(--tblr-primary);
	border: 1px solid transparent;
	border-radius: var(--tblr-border-radius);
	cursor: pointer;
}
.page-body form.form input[type="submit"]:not([class*="lista_btn"]):not(.ferias):hover{
	filter: brightness(0.95);
}

/* ---- formularios de cadastro/edicao - padrao <label><span>Campo:</span>
   <input .../></label> (sem class="form") usado na maioria das telas
   de cadastro e edicao. So o :has() evita pegar labels de checkbox/radio
   (que devem continuar lado a lado com o campo, nao em bloco). ---- */
.page-body form label:has(> input[type="text"]),
.page-body form label:has(> input[type="password"]),
.page-body form label:has(> input[type="email"]),
.page-body form label:has(> input[type="number"]),
.page-body form label:has(> input[type="date"]),
.page-body form label:has(> input[type="tel"]),
.page-body form label:has(> select),
.page-body form label:has(> textarea){
	display: block;
	margin-bottom: .75rem;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--tblr-body-color);
}
.page-body form label > input[type="text"],
.page-body form label > input[type="password"],
.page-body form label > input[type="email"],
.page-body form label > input[type="number"],
.page-body form label > input[type="date"],
.page-body form label > input[type="tel"],
.page-body form label > select,
.page-body form label > textarea{
	display: block;
	width: 100%;
	max-width: 420px;
	margin-top: .25rem;
	padding: .4375rem .75rem;
	font-size: .875rem;
	font-weight: 400;
	color: var(--tblr-body-color);
	background: var(--tblr-bg-forms);
	border: 1px solid var(--tblr-border-color);
	border-radius: var(--tblr-border-radius);
}
.page-body form label > input[type="text"]:focus,
.page-body form label > input[type="password"]:focus,
.page-body form label > input[type="email"]:focus,
.page-body form label > input[type="number"]:focus,
.page-body form label > input[type="date"]:focus,
.page-body form label > input[type="tel"]:focus,
.page-body form label > select:focus,
.page-body form label > textarea:focus{
	outline: none;
	border-color: var(--tblr-primary);
	box-shadow: 0 0 0 2px var(--tblr-primary-lt);
}
.page-body form label:has(> input[type="file"]),
.page-body form label.campo-telefones{
	display: block;
	margin-bottom: .75rem;
	font-size: .8125rem;
	font-weight: 500;
	color: var(--tblr-body-color);
}
.page-body form label > input[type="file"]{
	display: block;
	margin-top: .25rem;
	font-size: .8125rem;
	color: var(--tblr-body-color);
}
.page-body form label > input[type="file"]::file-selector-button{
	font: inherit;
	font-size: .8125rem;
	font-weight: 500;
	padding: .375rem .75rem;
	margin-right: .75rem;
	border: 1px solid var(--tblr-border-color);
	border-radius: var(--tblr-border-radius);
	background: var(--tblr-bg-surface-secondary);
	color: var(--tblr-body-color);
	cursor: pointer;
}
.page-body form label > input[type="file"]::file-selector-button:hover{
	background: var(--tblr-border-color);
}

/* ---- foto+nome no topo das telas de edicao/detalhe (.usuario_editar,
   usado em users_editar.php, ferias_detalhar.php, folha_detalhar_usuario.php,
   comissoes_detalhar_usuario.php) - a versao original (css/style.css) usa
   float+altura fixa, pensada pro layout antigo (#conteudo/#wrapper); dentro
   de um .card do Tabler isso deixa a foto flutuando ao lado do conteudo
   anterior (ex.: mensagem de sucesso do formulario) em vez de abaixo dele.
   .page-body eleva a especificidade o suficiente pra vencer sem !important,
   mesmo com portal.css carregado antes de style.css. ---- */
.page-body .usuario_editar{
	display: flex;
	align-items: center;
	gap: 1rem;
	height: auto;
	padding: 0 0 1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--tblr-border-color);
}
.page-body .usuario_editar img{
	float: none;
	margin: 0;
	border-radius: var(--tblr-border-radius);
}
.page-body .usuario_editar h2{
	margin: 0;
	font-size: 1.1rem;
}

/* ---- caixa de dicas com hover (users_editar.php e cadastros similares) -
   o gatilho "Dicas:" (#elemento1) revela o texto (#tip1) ao passar o mouse
   (scripts/div_surge.js, que so alterna display - a interacao continua a
   mesma, aqui e so o visual). Seletor por ID ja tem especificidade maior
   que a classe .tip original (css/style.css), sem precisar de !important. ---- */
#elemento1{
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	width: auto;
	background: var(--tblr-azure-lt);
	color: var(--tblr-info-text-emphasis, #0d5aa7);
	font-size: .8125rem;
	font-weight: 600;
	padding: .35rem .85rem;
	border-radius: 999px;
	cursor: help;
}
#elemento1::before{
	content: "\ea51";
	font-family: "tabler-icons" !important;
	font-style: normal;
	font-weight: normal;
	font-size: 1rem;
	line-height: 1;
}
#tip1{
	background: var(--tblr-bg-surface-secondary);
	border: 1px solid var(--tblr-border-color);
	font: inherit;
	width: auto;
	max-width: 640px;
	padding: .85rem 1rem;
	margin-top: .5rem;
	border-radius: var(--tblr-border-radius);
	text-align: left;
}
#tip1 p{
	margin: 0 0 .5rem;
	font-size: .8125rem;
	color: var(--tblr-body-color);
}
#tip1 p:last-child{
	margin-bottom: 0;
}

/* ---- resultado.php: seletor de empresa/ano + abas dos meses - substitui
   a lista de botoes empilhados (deslizante) e a grade de radios do ano por
   dois <select>, e o antigo carrossel de largura fixa (sliding.form.js,
   so usado nesta tela) por abas simples que so escondem/mostram paineis,
   o que sozinho ja resolve a maior parte do problema de responsividade -
   nao depende de larguras calculadas via JS. ---- */
.resultado-empresa-nome{
	margin-bottom: .5rem;
	padding-left: 15px;
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--tblr-body-color);
}
.resultado-filters{
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
	margin-bottom: 1.25rem;
	padding-left: 15px;
}
.resultado-filter-group{
	display: flex;
	flex-direction: column;
	gap: .3rem;
	min-width: 220px;
}
.resultado-filter-group .form-label{
	margin-bottom: 0;
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tblr-secondary);
}
.resultado-filter-group .form-select{
	min-width: 220px;
}

/* ---- botoes de ordem de apresentacao (exames.php) - substitui os antigos
   links empilhados de #conteudo/#wrapper .tipo_ordem (nao existem mais na
   nova estrutura, entao o CSS legado nunca chegava a aplicar). Cinza em
   repouso, azul do projeto (--tblr-primary) no hover e na opcao ativa. ---- */
.ordem-apresentacao{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem;
	padding-left: 15px;
	margin-bottom: 1rem;
}
.ordem-apresentacao-label{
	font-size: .8125rem;
	font-weight: 600;
	color: var(--tblr-secondary);
}
.ordem-btn{
	display: inline-flex;
	align-items: center;
	padding: .4rem 1rem;
	border-radius: var(--tblr-border-radius);
	background: var(--tblr-gray-200);
	color: var(--tblr-body-color);
	font-size: .8125rem;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color .15s ease, color .15s ease;
	font: inherit;
	cursor: pointer;
}
.ordem-btn:hover{
	background: var(--tblr-primary);
	color: #fff;
	text-decoration: none;
}
.ordem-btn.is-active{
	background: var(--tblr-primary);
	color: #fff;
}

/* ---- titulo de campo em destaque (ex.: Empresa/Colaborador em
   folha_detalhar_usuario.php) - fonte maior e na cor azul do projeto,
   por cima do .form-label padrao do Tabler ---- */
.form-label-lg-primary{
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--tblr-primary);
}

.resultado-tabs{
	display: flex;
	flex-wrap: nowrap;
	gap: .4rem;
	overflow-x: auto;
	padding-bottom: .5rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--tblr-border-color);
	scrollbar-width: thin;
}
/* #wrapper button (css/style_deslizante.css) e uma regra legada com
   especificidade de ID (width/height fixos + sprite de fundo, pensada pra
   um icone pequeno em outro lugar do sistema) que vence qualquer regra
   nossa baseada so em classe - daqui pra baixo os !important nao sao
   flourish, sao a unica forma de vencer aquele seletor sem reescrever
   ou remover o CSS legado (que ainda serve outras telas). */
.resultado-tab{
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
	height: auto !important;
	padding: .5rem 1rem !important;
	border: 1px solid var(--tblr-border-color);
	border-radius: 2rem;
	background: var(--tblr-bg-surface) !important;
	color: var(--tblr-body-color);
	font: inherit;
	font-size: .8125rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: visible !important;
	cursor: pointer;
}
.resultado-tab:hover{
	border-color: var(--tblr-primary);
	color: var(--tblr-primary);
}
.resultado-tab.is-active{
	background: var(--tblr-primary) !important;
	border-color: var(--tblr-primary);
	color: #fff;
}
.resultado-tab-total{
	font-weight: 700;
}

.resultado-panels .resultado-panel{
	display: none;
}
.resultado-panels .resultado-panel.is-active{
	display: block;
}
.resultado-panel{
	overflow-x: auto;
}

@media (max-width: 576px){
	.resultado-filters{
		flex-direction: column;
		align-items: stretch;
	}
	.resultado-filter-group,
	.resultado-filter-group .form-select{
		min-width: 0;
		width: 100%;
	}
	.resultado-tabs{
		gap: .3rem;
	}
	.resultado-tab{
		padding: .4375rem .75rem;
		font-size: .75rem;
	}
}

/* ---- botao de detalhe (icone) nas linhas de tabelas de listagens antigas
   (ferias_list.php e afins) - o <button> vazio dependia de "#wrapper button"
   (css/style_deslizante.css: background: url(nm_detalhe.gif)), regra que
   nunca mais se aplica desde que a div #wrapper foi removida na modernizacao
   pro Tabler. Troca o sprite antigo por um icone Tabler. ---- */
.btn-detalhe{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: var(--tblr-border-radius);
	background: transparent;
	color: var(--tblr-secondary);
	cursor: pointer;
}
.btn-detalhe:hover{
	background: var(--tblr-primary);
	color: #fff;
}
.btn-detalhe i{
	font-size: 1rem;
	line-height: 1;
}

/* ---- dashboard de colaboradores (users_dashboard.php) - area do canvas
   dos graficos Chart.js (precisa de altura explicita, o chart.js so respeita
   responsive:true dentro de um container com dimensoes definidas) e o
   numero tabular dos cards de KPI no topo. ---- */
.dash-colab-chart{
	position: relative;
	height: 230px;
}
.dash-colab-num{
	font-variant-numeric: tabular-nums;
}

/* ---- ciclos_financeiros.php - mesmo motivo do bloco acima (Chart.js
   precisa de altura explicita no container) ---- */
.ccf-chart{
	position: relative;
	height: 280px;
}
.ccf-kpis .card-body{
	min-height: 92px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.ccf-kpi-card .subheader{
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ccf-kpi-value{
	font-variant-numeric: tabular-nums;
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.2;
	display: flex;
	align-items: baseline;
	gap: 6px;
}
.ccf-kpi-unit{
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--tblr-secondary, #626976);
}
.ccf-kpi-value-money{
	font-size: 1.5rem;
}
.ccf-kpi-ref{
	font-size: 0.72rem;
	color: var(--tblr-secondary, #626976);
	font-weight: 400;
	margin-top: 2px;
}

/* ---- dfc.php - demonstrativo formal dos fluxos de caixa ---- */
.dfc-statement{
	font-family: "IBM Plex Mono", "Courier New", monospace;
}
.dfc-title{
	text-align: center;
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 2px;
	font-family: inherit;
}
.dfc-subtitle{
	text-align: center;
	color: var(--tblr-secondary, #626976);
	margin: 0 0 10px;
	font-size: 0.85rem;
}
.dfc-periodo{
	text-align: center;
	font-weight: 600;
	margin: 0 0 16px;
	font-size: 0.85rem;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--tblr-dark, #1b2330);
}
.dfc-table{
	width: 100%;
	border-collapse: collapse;
	font-size: 0.82rem;
}
.dfc-table td{
	padding: 3px 4px;
	vertical-align: top;
}
.dfc-section td{
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.74rem;
	letter-spacing: 0.03em;
	padding-top: 14px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--tblr-border-color, #dde1e7);
}
.dfc-line-muted td{
	font-style: italic;
	color: var(--tblr-secondary, #626976);
	padding-top: 8px;
	font-size: 0.78rem;
}
.dfc-line-strong td{
	font-weight: 700;
}
.dfc-subtotal td{
	font-weight: 700;
	background: var(--tblr-yellow-lt, #fff4cc);
	padding: 6px 4px;
}
.dfc-subtotal td:first-child{ border-radius: 4px 0 0 4px; }
.dfc-subtotal td:last-child{ border-radius: 0 4px 4px 0; }
.dfc-total td{
	font-weight: 700;
	border-top: 1px solid var(--tblr-dark, #1b2330);
	border-bottom: 3px double var(--tblr-dark, #1b2330);
	padding-top: 8px;
	padding-bottom: 8px;
}
.dfc-diferenca td{
	color: var(--tblr-secondary, #626976);
	font-size: 0.74rem;
	padding-top: 10px;
}
.dfc-neg{
	color: var(--tblr-red, #c0392b);
}
@media (prefers-color-scheme: dark){
	:root:not([data-theme="light"]) .dfc-subtotal td{ background: #3a3418; }
}
:root[data-theme="dark"] .dfc-subtotal td{ background: #3a3418; }

/* ---- analise_despesas.php - analise vertical/horizontal por conta ---- */
.ade-neg{
	color: var(--tblr-red, #c0392b);
}
.ade-badge{
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	font-size: 0.8rem;
}
.ade-badge-neutro{
	color: var(--tblr-secondary, #626976);
}
.ade-badge-alerta-up{
	color: var(--tblr-red, #c0392b);
}
.ade-badge-alerta-down{
	color: var(--tblr-green, #2fb344);
}
.ade-legenda-dot{
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin: 0 3px 0 8px;
}
.ade-legenda-dot:first-child{ margin-left: 0; }
.ade-legenda-dot.ade-badge-alerta-up{ background: var(--tblr-red, #c0392b); }
.ade-legenda-dot.ade-badge-alerta-down{ background: var(--tblr-green, #2fb344); }
.ade-table td{
	vertical-align: middle;
}
.ade-conta-desc{
	font-weight: 500;
}
.ade-conta-codigo{
	font-size: 0.72rem;
	color: var(--tblr-secondary, #626976);
}
.ade-row-alerta{
	background: var(--tblr-yellow-lt, #fff9e6);
}
.ade-av-wrap{
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 140px;
}
.ade-av-bar-track{
	flex: 1;
	height: 6px;
	border-radius: 3px;
	background: var(--tblr-border-color, #dde1e7);
	overflow: hidden;
}
.ade-av-bar{
	height: 100%;
	background: var(--tblr-primary, #206bc4);
	border-radius: 3px;
}
.ade-av-pct{
	font-size: 0.78rem;
	font-variant-numeric: tabular-nums;
	color: var(--tblr-secondary, #626976);
	white-space: nowrap;
}
@media (prefers-color-scheme: dark){
	:root:not([data-theme="light"]) .ade-row-alerta{ background: #3a3418; }
}
:root[data-theme="dark"] .ade-row-alerta{ background: #3a3418; }

/* ---- analise_despesas.php - abas "Variacao em Valor" / "Variacao em
   Representatividade" (mesmo componente visual de .vfm-tabs, prefixo
   proprio pra nao acoplar as duas paginas). ---- */
.ade-tabs{
	display: inline-flex;
	gap: 4px;
	background: var(--tblr-secondary-lt);
	border-radius: calc(var(--tblr-border-radius) + 4px);
	padding: 4px;
	border: none;
}
.ade-tabs .nav-item{
	margin: 0;
}
.ade-tabs .nav-link{
	display: flex;
	align-items: center;
	gap: .4rem;
	border: none;
	border-radius: var(--tblr-border-radius);
	padding: .5rem 1rem;
	font-weight: 500;
	font-size: .875rem;
	color: var(--tblr-secondary);
	background: transparent;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.ade-tabs .nav-link i{
	font-size: 1rem;
}
.ade-tabs .nav-link:hover{
	color: var(--tblr-body-color);
	background: rgba(0, 0, 0, .05);
}
.ade-tabs .nav-link.active{
	background: var(--tblr-primary-lt);
	color: var(--tblr-primary);
}

/* ---- flatpickr (scripts/flatpickr_init.js) - dias marcados como feriado
   (nacional/estadual/municipal, conforme dts/feriados.php) ---- */
.flatpickr-day.fp-feriado{
	background: var(--tblr-red-lt, #fbe3e0);
	border-color: var(--tblr-red-lt, #fbe3e0);
	color: var(--tblr-red, #c0392b);
	font-weight: 600;
}
.flatpickr-day.fp-feriado:hover{
	background: var(--tblr-red, #c0392b);
	border-color: var(--tblr-red, #c0392b);
	color: #fff;
}

/* ---- posicao_caixa.php - saldo atual por conta bancaria/caixa ---- */
.pcx-neg{
	color: var(--tblr-red, #c0392b);
}
.pcx-row-empresa td{
	font-weight: 700;
	background: var(--tblr-secondary-lt, #f4f6fa);
}
.pcx-conta-nome{
	padding-left: 1.5rem;
}
.pcx-row-total td{
	font-weight: 700;
	border-top: 2px solid var(--tblr-dark, #1b2330);
}

/* ---- calculo_metas.php - meta individual calculada por vendedor ---- */
.cm-row-empresa td{
	font-weight: 700;
	background: var(--tblr-secondary-lt, #f4f6fa);
}
/* Linha com a Meta Individual fixada manualmente (nao recalculada mais
   automaticamente ate o gestor clicar em "voltar ao calculo automatico"). */
.cm-linha-vendedor[data-meta-manual="1"] .cm-meta-individual{
	background: var(--tblr-yellow-lt, #fff9e6);
	border-color: var(--tblr-yellow, #f59f00);
	font-weight: 700;
}

/* ---- calculo_premiacao.php - cabecalho de filial (mesmo destaque de
   calculo_metas.php) e sub-cabecalho de categoria (Gerentes/Coordenadores/
   Vendedores/Administrativos-Estoquistas dentro de cada filial), mais
   discreto que o de filial pra manter a hierarquia visual clara. ---- */
.cp-row-empresa td{
	font-weight: 700;
	background: var(--tblr-secondary-lt, #f4f6fa);
}
.cp-row-categoria td{
	font-weight: 600;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--tblr-secondary, #6c7a91);
	background: var(--tblr-body-bg, #fff);
	padding-top: .6rem;
	padding-bottom: .3rem;
}

/* ---- vendas_metas.php - separacao por cor entre os blocos de colunas
   "Meta" (% + valor) e "Realizado" (% + valor), pra facilitar a leitura
   numa tabela com varias colunas sobre fundo claro. ---- */
.vmt-table-cores th.vmt-col-meta,
.vmt-table-cores td.vmt-col-meta{
	background: rgba(32, 107, 196, 0.08);
}
.vmt-table-cores th.vmt-col-realizado,
.vmt-table-cores td.vmt-col-realizado{
	background: rgba(47, 179, 68, 0.08);
}
.vmt-table-cores thead th.vmt-col-meta,
.vmt-table-cores thead th.vmt-col-realizado{
	font-weight: 700;
}
@media (prefers-color-scheme: dark){
	:root:not([data-theme="light"]) .vmt-table-cores td.vmt-col-meta,
	:root:not([data-theme="light"]) .vmt-table-cores th.vmt-col-meta{ background: rgba(32, 107, 196, 0.18); }
	:root:not([data-theme="light"]) .vmt-table-cores td.vmt-col-realizado,
	:root:not([data-theme="light"]) .vmt-table-cores th.vmt-col-realizado{ background: rgba(47, 179, 68, 0.18); }
}
:root[data-theme="dark"] .vmt-table-cores td.vmt-col-meta,
:root[data-theme="dark"] .vmt-table-cores th.vmt-col-meta{ background: rgba(32, 107, 196, 0.18); }
:root[data-theme="dark"] .vmt-table-cores td.vmt-col-realizado,
:root[data-theme="dark"] .vmt-table-cores th.vmt-col-realizado{ background: rgba(47, 179, 68, 0.18); }

/* ---- home.php - dashboard de gestao (scripts/home_dashboard.js) -
   velocimetro (gauge) semicircular via Chart.js doughnut, com o percentual
   desenhado por cima em HTML/CSS (nao via plugin do Chart.js). ---- */
.home-gauge-wrap{
	position: relative;
	height: 150px;
	max-width: 260px;
	margin: 0 auto;
}
.home-gauge-pct{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	text-align: center;
	font-size: 1.75rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.home-dash-rodape{
	font-size: 0.8rem;
}

/* ---- home.php - grade dos cards de resumo (Usuarios, Resultados, Metas &
   Vendas, RH, Remuneracoes...) - auto-fit em vez da grade fixa 2 colunas do
   Bootstrap (row-cards + col-6): se reorganiza sozinha conforme a largura
   disponivel e a quantidade de cards, entao um novo card (ex: Metas &
   Vendas, adicionado em 03/10/2026) so' entra na lista e encontra seu lugar
   sozinho, sem precisar redesenhar a grade a cada vez. ---- */
.home-cards-grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: .75rem;
	/* a coluna que envolve o grid (.col-12) vira flex por causa de
	   ".row-deck>[class*=col-]{display:flex}" do Tabler - sem largura
	   explicita, um item flex sem flex-basis definido encolhe pro tamanho
	   do seu conteudo (o grid acaba so' com 1 coluna de largura em vez de
	   ocupar o espaco disponivel). width:100% forca o grid a preencher a
	   coluna, entao o auto-fit tem espaco de verdade pra distribuir. */
	width: 100%;
}

/* ---- home.php - cards de resumo que viram botao (abrem popup com os
   sub-itens do menu correspondente) - mantem o mesmo tamanho do card,
   so adiciona a affordance de clique. ---- */
.card-home-btn{
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}
.card-home-btn:hover{
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.card-home-btn:focus-visible{
	outline: 2px solid var(--tblr-primary, #206bc4);
	outline-offset: 2px;
}
.card-home-titulo{
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tblr-dark, #1b2330);
	margin-bottom: .25rem;
	min-height: 1em;
}
.card-gradiente-usuarios{
	background: linear-gradient(to right, #d9eef7, #97c4f4, #6aaef1);
	border-color: transparent;
}
/* align-items:flex-start (era center) - com os cards numa grade que
   reorganiza, linhas diferentes podem ter alturas diferentes (rotulo de
   uma linha vs duas linhas, por exemplo); centralizar o conteudo fazia o
   titulo de cada card comecar numa altura diferente. Alinhando no topo,
   todo titulo fica na mesma posicao, independente do card vizinho -
   pedido do Amauri em 03/10/2026. O icone ganha align-self:center pra nao
   ficar "flutuando" colado no topo do card. */
.card-home-body{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .75rem;
}
.card-home-icone{
	align-self: center;
	flex-shrink: 0;
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .35);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.7rem;
	color: #000;
}
.home-modal-consulta{
	background-color: #2f3953;
	border: 1px solid #b0b9c7;
	border-radius: 1rem;
}
.home-modal-fechar{
	background-color: #6089bf;
	border-color: #6089bf;
	color: #fff;
	border-radius: var(--tblr-border-radius, .375rem);
}
.home-modal-fechar:hover,
.home-modal-fechar:focus{
	background-color: #6089bf;
	border-color: #6089bf;
	filter: brightness(.92);
	color: #fff;
}
.home-modal-consulta .nav-link,
.home-modal-consulta .nav-link:hover,
.home-modal-consulta .nav-link:focus{
	color: #fff;
}
.home-modal-consulta .nav-link:hover,
.home-modal-consulta .nav-link:focus{
	background-color: #848ca4;
	border-radius: .5rem;
}
.home-modal-consulta .nav-link-icon{
	display: flex;
	align-items: center;
	justify-content: center;
}
.home-modal-dot{
	display: block;
	width: .6rem;
	height: .6rem;
	border-radius: 50%;
	background-color: #fff;
}
.home-modal-titulo{
	color: #fff;
}

/* ---- utilitarios de cor pra valor positivo/negativo (Verde Caspper/
   Vermelho Alerta do DESIGN.md) - criados originalmente pro KPI de
   financeiro_inadimplencia.php (achado do critique de 12/10/2026,
   Assessment A, P1: o DESIGN.md ja define verde/vermelho como "carregam
   julgamento" em todo grafico do sistema, mas a linha de KPI ficava em
   texto neutro), reaproveitados depois em margem_ecommerce.php - por
   isso o nome generico, nao preso a uma tela. Cor literal (nao
   var(--tblr-green)/var(--tblr-red), que sao o verde/vermelho GENERICOS
   do Tabler, #2fb344/#d63939 - diferentes do verde/vermelho de marca
   #2f9e6e/#c0392b ja usado em todo grafico Chart.js e documentado no
   DESIGN.md). ---- */
.valor-positivo{ color: #2f9e6e; }
.valor-negativo{ color: #c0392b; }

/* ---- calculo_premiacao.php - aviso visual (nao bloqueia) quando "% a
   Aplicar"/"Valor Adicional" saem do intervalo usual - critique de
   12/10/2026 (P2). ---- */
.cp-valor-suspeito{
	border-color: var(--tblr-yellow, #f59f00) !important;
	background: var(--tblr-yellow-lt, #fff9e6) !important;
}

/* ---- vendas_filiais.php - abas dos Cenarios 2/3 como grupo de botoes
   (segmented control), pra deixar claro que sao opcoes clicaveis pra 2
   tipos de selecao diferentes, nao so' um titulo de secao. Mesma cor de
   "selecionado" ja usada nos chips lista_btn_c/users_btn_c (fundo
   --tblr-primary-lt, texto --tblr-primary), so' que aplicada a nav-link. ---- */
.vfm-tabs{
	display: inline-flex;
	gap: 4px;
	background: var(--tblr-secondary-lt);
	border-radius: calc(var(--tblr-border-radius) + 4px);
	padding: 4px;
	border: none;
}
.vfm-tabs .nav-item{
	margin: 0;
}
.vfm-tabs .nav-link{
	display: flex;
	align-items: center;
	gap: .4rem;
	border: none;
	border-radius: var(--tblr-border-radius);
	padding: .5rem 1rem;
	font-weight: 500;
	font-size: .875rem;
	color: var(--tblr-secondary);
	background: transparent;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.vfm-tabs .nav-link i{
	font-size: 1rem;
}
.vfm-tabs .nav-link:hover{
	color: var(--tblr-body-color);
	background: rgba(0, 0, 0, .05);
}
.vfm-tabs .nav-link.active{
	background: var(--tblr-primary-lt);
	color: var(--tblr-primary);
}

/* ====================================================================
   menu_horizontal_teste.php - pagina provisoria de comparacao visual
   (3 propostas de menu horizontal), pedido do Amauri em 13/10/2026.
   Cada opcao fica dentro de um "mht-frame" (moldura simulando o topo do
   sistema) pra nao se misturar com o cromo real da pagina (navbar/sidebar
   verdadeiros continuam visiveis por cima). ==================================================================== */
.mht-frame{
	border: 1px solid var(--tblr-border-color);
	border-radius: var(--tblr-card-border-radius, 8px);
	overflow: hidden;
}
.mht-mock-topbar{
	background: var(--tblr-primary);
	color: #fff;
	font-size: .95rem;
	padding: .6rem 1.25rem;
}

/* ---- barra horizontal em si (comum as 3 opcoes) ---- */
.mht-nav{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	background: #fff;
	border-bottom: 1px solid var(--tblr-border-color);
	padding: 0 .5rem;
	position: relative;
}
.mht-nav-item{
	position: relative;
	display: flex;
}
.mht-nav-link{
	display: inline-flex;
	align-items: center;
	padding: .85rem .9rem;
	font-size: .875rem;
	font-weight: 500;
	color: var(--tblr-body-color);
	text-decoration: none;
	border: none;
	background: transparent;
	cursor: pointer;
	white-space: nowrap;
}
.mht-nav-link:hover,
.mht-has-mega:hover > .mht-nav-link,
.mht-nav-item:focus-within > .mht-nav-link{
	color: var(--tblr-primary);
	background: var(--tblr-primary-lt);
}
.mht-nav-link::after{ display: none; } /* remove a seta padrao do Bootstrap no dropdown-toggle - usamos o icone ti-chevron-down a parte, consistente com as outras duas opcoes */

/* ---- Opcao 1: mega-menu em colunas ---- */
.mht-mega-panel{
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	background: var(--tblr-bg-surface, #fff);
	border: 1px solid var(--tblr-border-color);
	border-top: 2px solid var(--tblr-primary);
	border-radius: 0 0 var(--tblr-border-radius) var(--tblr-border-radius);
	box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
	padding: 1rem;
	gap: 1.75rem;
	min-width: 620px;
}
.mht-mega-panel-simples{ min-width: 220px; }
.mht-has-mega:hover > .mht-mega-panel,
.mht-has-mega:focus-within > .mht-mega-panel{
	display: flex;
}
.mht-mega-col{
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 160px;
}
.mht-mega-col-titulo{
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tblr-secondary);
	margin-bottom: .35rem;
}
.mht-mega-link{
	font-size: .8125rem;
	color: var(--tblr-body-color);
	text-decoration: none;
	padding: .35rem .5rem;
	border-radius: var(--tblr-border-radius);
	margin: 0 -.5rem;
}
.mht-mega-link:hover{
	background: var(--tblr-bg-surface-secondary);
	color: var(--tblr-primary);
}

/* ---- Opcao 2: painel unico "ver tudo" ---- */
.mht-nav-painel{ padding: 0 .5rem; }
.mht-painel-unico{
	display: flex;
	flex-wrap: wrap;
	gap: 1.75rem 2.5rem;
	padding: 1.25rem;
	background: var(--tblr-bg-surface-secondary, #f4f6fa);
	border-bottom: 1px solid var(--tblr-border-color);
}
.mht-painel-grupo{
	display: flex;
	flex-direction: column;
	min-width: 170px;
}
.mht-painel-grupo-titulo{
	font-size: .8125rem;
	font-weight: 700;
	color: var(--tblr-body-color);
	margin-bottom: .25rem;
	padding-bottom: .25rem;
	border-bottom: 1px solid var(--tblr-border-color);
}

/* ---- Opcao 3: dropdown simples (1 coluna, estilo Bootstrap padrao) ---- */
.mht-dropdown-simples{
	min-width: 260px;
	max-height: 70vh;
	overflow-y: auto;
	padding: .5rem;
	border-top: 2px solid var(--tblr-primary);
}
.mht-dropdown-subtitle{
	font-size: .66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tblr-secondary);
	padding: .5rem .75rem .15rem;
}

/* ---- conteudo "fake" abaixo da barra, so pra dar nocao de pagina real ---- */
.mht-mock-content{
	padding: 1.25rem;
	background: var(--tblr-bg-surface-secondary, #f4f6fa);
}
.mht-mock-title{
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: .75rem;
}
.mht-mock-cards{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: .75rem;
}
.mht-mock-card{
	height: 64px;
	border-radius: var(--tblr-card-border-radius, 8px);
	background: var(--tblr-bg-surface, #fff);
	border: 1px solid var(--tblr-border-color);
}

@media (max-width: 768px){
	.mht-mega-panel{ min-width: 0; width: 100%; flex-direction: column; gap: 1rem; }
	.mht-painel-unico{ flex-direction: column; gap: 1.25rem; }
}

/* ====================================================================
   Menu horizontal REAL (includes/menu_horizontal.php) - em producao a
   partir de 14/10/2026, substitui o menu lateral (sidebar). Mesmo
   padrao visual da "Opção 1" ja validada em menu_horizontal_teste.php
   (classes .mht-* acima), so que com nomes definitivos (.topmenu-*) por
   ser a versao real, nao mais um protótipo. Ver ROLLBACK_menu_horizontal.md
   pra reverter. ==================================================================== */
.topmenu{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	background: #fff;
	border-bottom: 1px solid var(--tblr-border-color);
	padding: 0 .5rem;
}
.topmenu-item{
	position: relative;
	display: flex;
}
.topmenu-link{
	display: inline-flex;
	align-items: center;
	padding: .8rem .9rem;
	font-size: .875rem;
	font-weight: 500;
	color: var(--tblr-body-color);
	text-decoration: none;
	border: none;
	background: transparent;
	cursor: pointer;
	white-space: nowrap;
}
.topmenu-link:hover,
.topmenu-item:hover > .topmenu-link,
.topmenu-item:focus-within > .topmenu-link,
.topmenu-item.active > .topmenu-link,
a.topmenu-link.active{
	color: var(--tblr-primary);
	background: var(--tblr-primary-lt);
}
.topmenu-caret{
	font-size: .7rem;
	transition: transform .15s ease;
}
.topmenu-item:hover > .topmenu-link .topmenu-caret,
.topmenu-item.mobile-open > .topmenu-link .topmenu-caret{
	transform: rotate(180deg);
}

.topmenu-panel{
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1020;
	background: var(--tblr-bg-surface, #fff);
	border: 1px solid var(--tblr-border-color);
	border-top: 2px solid var(--tblr-primary);
	border-radius: 0 0 var(--tblr-border-radius) var(--tblr-border-radius);
	box-shadow: 0 12px 24px rgba(0, 0, 0, .12);
	padding: 1rem;
	gap: 1.25rem 1.75rem;
	min-width: 620px;
	/* flex-wrap + max-width: um grupo com muitas colunas (ex. RH, que
	   tinha 7 - reduzido pra 5 no mesmo pedido, ver includes/
	   menu_horizontal.php) quebra em 2 linhas em vez de esticar o painel
	   pra fora da tela e criar rolagem horizontal na pagina inteira
	   (achado do Amauri em 14/10/2026). 1040px cobre confortavelmente
	   ate 5-6 colunas numa linha so' em tela de desktop comum; telas
	   menores usam o calc(100vw - 2rem) e quebram mais cedo. */
	flex-wrap: wrap;
	max-width: min(1040px, calc(100vw - 2rem));
}
.topmenu-panel-simples{ min-width: 220px; }
.topmenu-item:hover > .topmenu-panel,
.topmenu-item:focus-within > .topmenu-panel,
.topmenu-item.mobile-open > .topmenu-panel{
	display: flex;
}
.topmenu-col{
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 170px;
}
.topmenu-col-titulo{
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tblr-secondary);
	margin-bottom: .35rem;
}
/* ---- subtitulo DENTRO de uma coluna, pra agrupar 2+ conjuntos de link
   relacionados sem precisar de uma coluna propria pra cada um (ex. RH >
   Beneficios: "Multibeneficio" e "Outros" eram 2 colunas, viraram 1 so'
   com esse subtitulo entre os dois grupos - reduz contagem de colunas,
   que era a causa da rolagem horizontal). Mais discreto que
   .topmenu-col-titulo (sem uppercase, cor do corpo) pra nao competir
   com o titulo da coluna. ---- */
.topmenu-col-subtitulo{
	font-size: .72rem;
	font-weight: 600;
	color: var(--tblr-body-color);
	margin: .6rem 0 .15rem;
}
.topmenu-col-subtitulo:first-of-type{
	margin-top: 0;
}
.topmenu-item-link{
	font-size: .8125rem;
	color: var(--tblr-body-color);
	text-decoration: none;
	padding: .35rem .5rem;
	border-radius: var(--tblr-border-radius);
	margin: 0 -.5rem;
}
.topmenu-item-link:hover{
	background: var(--tblr-bg-surface-secondary);
	color: var(--tblr-primary);
}
.topmenu-item-link.active{
	color: var(--tblr-primary);
	font-weight: 600;
	background: var(--tblr-primary-lt);
}

@media (max-width: 991.98px){
	/* Abaixo do breakpoint lg, o Bootstrap ja esconde #topmenu-collapse
	   atras do botao hamburguer (navbar-toggler) - aqui so' ajustamos o
	   COMPORTAMENTO de cada item dentro do painel aberto: toque em vez
	   de hover (:hover nao existe de verdade em touch), e o painel vira
	   bloco empilhado em vez de flutuar absoluto por cima do conteudo. */
	.topmenu{ flex-direction: column; padding: .5rem; }
	.topmenu-item{ flex-direction: column; }
	.topmenu-panel{
		display: none;
		position: static;
		width: 100%;
		flex-direction: column;
		gap: 1rem;
		min-width: 0;
		border: none;
		border-top: 1px solid var(--tblr-border-color);
		border-radius: 0;
		box-shadow: none;
		padding: .75rem 0 .75rem 1.5rem;
	}
	.topmenu-item:hover > .topmenu-panel,
	.topmenu-item:focus-within > .topmenu-panel{
		display: none; /* so' :hover/:focus-within nao abre mais em touch */
	}
	.topmenu-item.mobile-open > .topmenu-panel{
		display: flex;
	}
}

/* ---- resultado_dre.php - pedido do Amauri em 15/10/2026: a pagina
   usa a largura toda da tela (quebra do .container-xl padrao, que
   limita todas as paginas do Portal) - o quadro "Total por grupo" no
   modo "Ano completo (mes a mes)" precisa de espaco pras 12 colunas de
   mes lado a lado. Truque padrao de "full-bleed": a largura/posicao
   relativa a viewport (100vw + left:50%/margin:-50vw) ignora o
   max-width do container pai, sem precisar mudar o layout base do
   Portal (so essa tela usa isso). ---- */
.dre-full-bleed{
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
/* No modo "Ano completo", o quadro "Total por grupo" usa a largura
   inteira recem-liberada (12 colunas de mes precisam do espaco). No
   modo "Mensal/acumulado" (so' Conta+Valor+%, 3 colunas), ocupar a
   tela toda deixaria as colunas esticadas/espacadas demais - fica
   limitado a uma largura de leitura confortavel. */
.dre-card-intervalo{
	max-width: 760px;
}