:root {
    /*  Padrão  */
    --template1: #5CD3B9;
    /* Painel lateral */
    --template2: #00c499;
    /* cor hover */
    --template3: #00bb92;
    /* CORREÇÃO (auditoria de UX): --custom-white nunca tinha sido
       definida de verdade — os 3 cartões mobile que a usam (aluno,
       conta, navegação inferior) sempre caíam no #fff do fallback,
       inclusive no modo escuro, ficando brancos destoando de tudo ao
       redor. Agora tem um valor de verdade nos dois temas. */
    --custom-white: #fff;
}
.dark-theme {
    --custom-white: #2a2e3f;
}
.field-icon {
  float: right;
  margin-left: -25px;
  margin-top: -25px;
  position: relative;
  z-index: 2;
  margin-right: 8px;
  cursor: pointer;
}
#mensagem-recuperar{
  color: var(--template1) !important;
  font-size: 13px;

}

.select2-selection__rendered {
    font-weight: 500;
    line-height: 36px !important;
    border-radius: 7px !important;
    border: 1px solid #c9c7c7;
}
.select2-container .select2-selection--single {
    height: 39px !important;
}
.select2-selection__arrow {
    height: 38px !important;
}


hr.separador {
  border: 1px dotted #666;
  border-radius: 5px;
}

.select2-selection__rendered {
    line-height: 35px !important;
}
.select2-container .select2-selection--single {
    height: 39px !important;
}
.select2-selection__arrow {
    height: 38px !important;
}
hr.separador {
  border: 1px dotted #666;
  border-radius: 5px;
}
.text-verde{
  color:#0e9e29;
}
.ocultar{
  display:none;
}
.textareag{
    width:1000px;
    height:550px;
}
.side-menu .slide .side-menu__item:hover {
    background-color: var(--template2);

}
.main-sidemenu {
    background-color: #2A2E3F;
}
.app-sidebar {
    background-color: #2A2E3F;
}

.slide-menu {
    border-left: 4px solid #de7b53;
    background-color: #2a2e3f !important;
    color: #ffffff;
}
.side-menu__item a{
    background-color: var(--template2);
    color: #ffffff;
}

.side-menu__item:hover .side-menu__icon,
.side-menu__item:hover .side-menu__label,
.side-menu__item:hover .angle {
    color: #ffffff !important;
    fill: #ffffff !important;

}
.slide-item.active,
.slide-item:hover,
.slide-item:focus {
    text-decoration: none;
    color: var(--template1) !important;

}
.app-sidebar .side-item.side-item-category {
    color: #7660a7;
}
.main-sidebar-header {
    background: #2A2E3F !important;
}
.main-header {
    background-color: #2A2E3F !important;
}
.slide-item .app-sidebar .slide-menu .slide-item:before:hover {
    color: var(--template1) !important;
}
.slide.is-expanded .slide-menu a:hover:before {
   color: var(--template1) !important;
}
.slide:hover .side-menu__label,
.slide:hover .angle {
    color: #fff !important;
    fill: #fff !important;
}
.header-icon-svgs {
    color: #ffffff;
    fill: #ffffff;
}
.font-size-11{
    font-size: 11px !important;
}

#calendar {
    max-width: 1320px;
    margin: 0 auto;
}
/* ===================================================================
   Redesenho mobile em cartão (estilo aplicativo) — começando pelo
   módulo de Alunos como modelo. A tabela continua sendo o que aparece
   no desktop, sem nenhuma mudança; os cartões só existem em telas
   estreitas. Ambos ficam sempre no HTML, só a visibilidade muda por
   CSS — mais simples e seguro que gerar dois HTMLs diferentes no PHP.
   =================================================================== */
.cartoes-mobile {
	display: none;
}

@media (max-width: 767px) {
	.tabela-lista-desktop {
		display: none !important;
	}
	.cartoes-mobile {
		display: block;
	}
}

.cartao-aluno-mobile {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	background: var(--custom-white, #fff);
	border: 1px solid rgba(0, 0, 0, 0.04);
	border-radius: 12px;
	margin-bottom: 8px;
	box-shadow: 0 1px 3px rgba(20, 20, 43, 0.06);
}
.dark-theme .cartao-aluno-mobile {
	border-color: #404353;
	color: #bfc1d4;
}

.cartao-aluno-avatar {
	width: 40px;
	height: 40px;
	min-width: 40px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--primary-bg-color) 15%, white);
	color: var(--primary-bg-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 600;
}

.cartao-aluno-info {
	flex: 1;
	min-width: 0;
}

.cartao-aluno-nome {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cartao-aluno-sub {
	margin: 0;
	font-size: 12px;
	color: #7b8191;
}

/* Botão de menu ("...") e itens do dropdown com alvo de toque de pelo
   menos 44px — abaixo disso fica fácil errar o botão ao lado no celular
   (recomendação mínima da Apple/Google pra elementos tocáveis). */
.cartao-aluno-menu {
	min-width: 44px;
	min-height: 44px;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.cartao-aluno-mobile .dropdown-item {
	padding: 12px 16px;
	font-size: 14px;
}

/* ===================================================================
   Navegação inferior fixa (mobile) — padrão que mais "sente" como
   app nativo: acesso direto às áreas mais usadas, sem abrir o menu
   lateral toda hora. Some no desktop (a barra lateral já resolve lá).
   =================================================================== */
.nav-inferior-mobile {
	display: none;
}

@media (max-width: 767px) {
	.nav-inferior-mobile {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1030;
		background: var(--custom-white, #fff);
		border-top: 1px solid rgba(0, 0, 0, 0.06);
		box-shadow: 0 -2px 10px rgba(20, 20, 43, 0.06);
		padding: 6px 0 max(6px, env(safe-area-inset-bottom));
		justify-content: space-around;
	}
	.dark-theme .nav-inferior-mobile {
		border-top-color: #404353;
	}

	/* Sobra embaixo do conteúdo pra nada ficar escondido atrás da
	   barra fixa — mesmo espaço aproximado da altura dela. */
	.app-content {
		padding-bottom: 64px;
	}

	/* Botão "voltar ao topo" (#back-to-top, em assets/css/style.css)
	   tinha z-index menor que essa barra e ficava por baixo dela — já
	   corrigido lá, mas também precisa subir a posição aqui, senão fica
	   colado/parcialmente atrás mesmo por cima. */
	#back-to-top {
		bottom: 76px;
		right: 16px;
	}
}

.nav-inferior-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	font-size: 10px;
	color: #7b8191;
	text-decoration: none;
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	flex: 1;
}
.dark-theme .nav-inferior-item {
	color: #8b90a3;
}

.nav-inferior-item i {
	font-size: 18px;
}

.nav-inferior-item.ativo {
	color: var(--primary-bg-color);
}

/* "Pílula" de fundo atrás do ícone ativo — padrão comum em apps
   nativos (Instagram, apps de banco): não é só o texto/ícone que
   muda de cor, tem um realce visual de fundo indicando a aba atual,
   mais fácil de notar num relance do que só a cor do texto. Mistura
   com "transparent" (não mais "white") — se adapta sozinha ao fundo
   claro ou escuro em vez de sempre clarear. */
.nav-inferior-item.ativo i {
	background: color-mix(in srgb, var(--primary-bg-color) 15%, transparent);
	border-radius: 999px;
	padding: 4px 14px;
}

/* Cartão de conta financeira (Contas a Receber/Pagar) — variação do
   cartão de pessoa, com um botão de ação principal visível (Dar Baixa)
   em vez de esconder a ação mais usada dentro do menu "...". */
.cartao-conta-mobile {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	background: var(--custom-white, #fff);
	border: 1px solid rgba(0, 0, 0, 0.04);
	border-radius: 12px;
	margin-bottom: 8px;
	box-shadow: 0 1px 3px rgba(20, 20, 43, 0.06);
}
.dark-theme .cartao-conta-mobile {
	border-color: #404353;
	color: #bfc1d4;
}

.cartao-conta-info {
	flex: 1;
	min-width: 0;
}

.cartao-conta-titulo {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cartao-conta-sub {
	margin: 2px 0 0;
	font-size: 12px;
	color: #7b8191;
}
.dark-theme .cartao-conta-sub {
	color: #8b90a3;
}

.cartao-conta-valor {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.cartao-conta-acoes {
	display: flex;
	align-items: center;
	gap: 4px;
}

.cartao-conta-baixar {
	min-width: 44px;
	min-height: 44px;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* Variante do botão de ação principal do cartão que usa a cor de
   marca em vez de uma cor fixa de status (sucesso/perigo) — usada
   quando a ação é "abrir/navegar" (ex: seta de Turmas) e não uma
   confirmação (ex: dar baixa, fechar caixa), que continuam com as
   cores semânticas normais (verde/vermelho). */
.botao-marca-suave {
	background: color-mix(in srgb, var(--primary-bg-color) 12%, white) !important;
	color: var(--primary-bg-color);
	border-radius: 8px;
}

/* ===================================================================
   Barra de rolagem estilo "pílula" flutuante (desktop) — mais grossa
   e arredondada que a barra fina padrão do tema (style.css, 4px), com
   espaço em volta (via border + background-clip) pra parecer solta
   perto da borda direita, do jeito que aparece em sites de referência.
   Só no desktop: no celular a rolagem já some sozinha por padrão.
   =================================================================== */
@media (min-width: 768px) {
	html {
		scrollbar-width: thin;
		scrollbar-color: var(--primary-bg-color) transparent;
	}

	html::-webkit-scrollbar {
		width: 12px;
	}

	html::-webkit-scrollbar-track {
		background: transparent;
	}

	html::-webkit-scrollbar-thumb {
		background-color: var(--primary-bg-color);
		border-radius: 20px;
		border: 3px solid transparent;
		background-clip: padding-box;
		min-height: 40px;
	}

	html::-webkit-scrollbar-thumb:hover {
		background-color: color-mix(in srgb, var(--primary-bg-color) 85%, black);
		background-clip: padding-box;
	}
}

/* ===================================================================
   Modal "Mostrar Dados" — visual antigo era uma parede de blocos
   sólidos coloridos, um por campo (pesado e repetitivo, "grosseiro").
   Troca por rótulo discreto (cinza, maiúsculo, pequeno) + valor em
   destaque, separados por uma linha fina — mesma tabela de 2 colunas
   por baixo, só troca a classe do <td> do rótulo (bg-primary text-white
   w_150 -> campo-dados-label) e o CSS abaixo cuida do resto.
   =================================================================== */
#modalDados .table-bordered {
	border: none;
}

#modalDados .table-bordered td {
	border-left: none;
	border-right: none;
	border-top: none;
}

.campo-dados-label {
	background: #f6f7fb !important;
	color: #5b6472 !important;
	font-weight: 600;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border-bottom: 1px solid #e9ecf3 !important;
	vertical-align: middle;
	width: 150px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.campo-dados-label + td {
	border-bottom: 1px solid #e9ecf3 !important;
	font-size: 14px;
	font-weight: 500;
	color: #22262e;
	vertical-align: middle;
}

#modalDados .modal-header {
	border-radius: 0.5rem 0.5rem 0 0;
}

#modalDados .tile {
	border-radius: 10px;
	overflow: hidden;
}

/* ===================================================================
   RECONSTRUÍDO DO ZERO (a pedido — remover código/legado do menu "..."):
   antes havia ~150 linhas aqui posicionando um componente próprio como
   bottom sheet, depois como modal centralizado manual — as duas
   abordagens tiveram problema de clique sumindo antes de registrar.
   Trocado por um modal Bootstrap de verdade (#modalAcoesRapidas, em
   painel/index.php) — o Bootstrap já resolve posição, fundo bloqueando
   clique, fechar ao clicar fora/Esc, sem nenhuma linha nossa pra isso.
   Só resta estilizar os itens de ação por dentro (mesmas classes de
   sempre, .folha-acoes-mobile-item etc — as ~24 páginas que geram esse
   HTML não precisaram mudar nada).
   =================================================================== */
.folha-acoes-mobile-lista {
	display: none; /* nunca aparece por si só — só existe como origem dos itens que o JS copia pro modal */
}

.folha-acoes-mobile-item,
.folha-acoes-mobile-item.p-0 .btn.folha-acoes-mobile-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 20px;
	font-size: 15px;
	color: inherit;
	text-decoration: none;
	background: none;
	border: none;
	width: 100%;
	text-align: left;
}

.folha-acoes-mobile-item:hover {
	background: rgba(0, 0, 0, 0.04);
}

.dark-theme .folha-acoes-mobile-item:hover {
	background: rgba(255, 255, 255, 0.06);
}

.folha-acoes-mobile-header {
	padding: 14px 20px 10px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #9aa1b1;
}

.folha-acoes-mobile-divider {
	margin: 4px 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.dark-theme .folha-acoes-mobile-divider {
	border-top-color: rgba(255, 255, 255, 0.08);
}

#modalAcoesRapidasBody {
	padding: 8px 0;
	max-height: 70vh;
	overflow-y: auto;
}

/* ===================================================================
   Refino visual dos menus de Ações (desktop) — escopado só em
   .dropdown-menu-end porque essa classe é usada exclusivamente pelos
   nossos dropdowns de Ações nas listagens (confirmado: não aparece
   em nenhum outro dropdown do sistema — filtros, notificações etc.),
   então dá pra estilizar sem risco de mudar algo fora do escopo.
   =================================================================== */
.dropdown-menu.dropdown-menu-end {
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(20, 20, 43, 0.14);
	border: 1px solid rgba(20, 20, 43, 0.06);
	padding: 6px;
}

.dropdown-menu.dropdown-menu-end .dropdown-item {
	border-radius: 8px;
	padding: 8px 10px;
	transition: background-color 0.12s ease;
}

.dropdown-menu.dropdown-menu-end .dropdown-header {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #9aa1b1;
	padding: 10px 10px 4px;
}

.dropdown-menu.dropdown-menu-end .dropdown-divider {
	margin: 6px 4px;
}

/* Alinhamento em coluna dos ícones — sem isso, cada glifo (fa-edit,
   bi-whatsapp, fa-file-pdf-o...) tem uma largura natural diferente e
   o texto ao lado começa em posições X diferentes linha a linha, o
   que é o maior sinal visual de menu "não profissional". Reservando
   uma largura fixa pro ícone, todo texto começa alinhado, como em
   qualquer app nativo. Aplica também no bottom sheet mobile, que usa
   o mesmo .dropdown-item por baixo. */
.dropdown-menu.dropdown-menu-end .dropdown-item i,
.folha-acoes-mobile-item i {
	display: inline-block;
	width: 20px;
	text-align: center;
	margin-right: 2px;
}

/* Ações da tabela de matrículas (Ver Aluno > Turma/Curso/Data/Status/Ações).
   Antes, o <big><a> do botão de transferir e cada <form> de PDF ficavam
   soltos lado a lado sem gap, então em telas/cards estreitos os últimos
   botões (Contrato, Frequência, Certificado) eram cortados pela borda
   do card em vez de quebrar linha. Com flex + wrap + gap fixo, os botões
   se realinham em uma segunda linha quando faltar espaço, e o espaçamento
   fica sempre uniforme (sem depender de espaços em branco no HTML). */
.acoes-matricula-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.acoes-matricula-form {
	display: inline-flex;
	margin: 0;
}

.acoes-matricula-wrap .btn-sm {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	font-size: 15px;
}

/* Botões do topo (Adicionar/Exportar/Relatório/Deletar/Carteirinha) em
   telas de listagem tipo Alunos. Antes o botão "Exportar" usava
   position:absolute; right:40px — em telas largas sobrava espaço e
   passava despercebido, mas em mobile ele saía do fluxo normal e
   pousava por cima de "Adicionar" e "Relatório", que continuavam no
   fluxo. Com flex + wrap + gap, todos ficam no mesmo fluxo e quebram
   linha quando não cabe, em vez de se sobrepor. */
.acoes-topo-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.acoes-topo-form {
	display: inline-flex;
	margin: 0;
}

@media (max-width: 767px) {
	.acoes-topo-wrap .btn {
		width: 100%;
		margin: 0;
	}

	.acoes-topo-form {
		width: 100%;
	}

	.acoes-topo-form .btn {
		width: 100%;
	}
}

/* "Sobre esta tela" — botão que abre um popover interativo (clique/foco)
   com o texto explicativo da tela, no lugar do parágrafo grande que
   antes ficava sempre visível embaixo do cabeçalho. Usado em várias
   telas (ver painel/paginas/pdde_*.php) — reaproveita o Popover do
   Bootstrap já inicializado globalmente pra qualquer elemento com
   data-bs-toggle="popover" (assets/js/custom.js), sem precisar de JS
   novo em cada página. */
.btn-info-tela {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #eef0f3;
	color: #6c757d;
	border: none;
	border-radius: 20px;
	padding: 5px 12px;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 14px;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.btn-info-tela:hover, .btn-info-tela:focus {
	background: #e0e4ea;
	color: #495057;
}
.btn-info-tela i { font-size: 13px; }

/* Versão pequena do botão de ajuda, pra colar do lado de um <label> de
   campo de formulário (ver função campo_info() em seguranca.php) —
   mesmo popover do Bootstrap, só que discreto o bastante pra não
   atrapalhar a leitura do rótulo do campo. */
.btn-info-campo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	margin-left: 3px;
	color: #b7b7b7;
	cursor: pointer;
	font-size: 11px;
	vertical-align: middle;
}
.btn-info-campo:hover, .btn-info-campo:focus {
	color: #6c757d;
}

/* Popover um pouco mais largo que o padrão do Bootstrap (276px) — as
   explicações de "Sobre esta tela" são um parágrafo curto, mas 276px
   deixava a caixa alta e estreita demais; 340px lê melhor sem virar
   uma "parede de texto" flutuante. */
.popover { max-width: 340px; }
.popover-body { font-size: 12.5px; color: #495057; }

/* ================================================================
   MODAL "ESTILO APP" — padrão reutilizável (mesmo que estreou no
   modal Classificar Nota de Despesas, painel/paginas/pdde_compras.php).
   Basta acrescentar a classe .modal-app no <div class="modal fade">
   e envolver os campos em <div class="form-secao"> pra herdar:
   tela cheia + rodapé fixo em mobile, campos agrupados em cartões com
   título de seção, e (se houver abas) uma tab bar com ícone+rótulo em
   vez das abas sublinhadas padrão do Bootstrap.
   ================================================================ */

/* Modal como "tela": cabeçalho (e abas, se houver) fixos, só o
   conteúdo rola — sem precisar rolar a página toda pra achar o rodapé. */
.modal-app .modal-header > div:first-child { min-width: 0; flex: 1 1 auto; }
.modal-app .modal-header .modal-title { word-break: break-word; }
.modal-app .modal-content { overflow: hidden; display: flex; flex-direction: column; max-height: 92vh; }
.modal-app .modal-header, .modal-app .abas-app { flex: none; }

/* Vários modais (UEx, Rol, Bens, Programas, Pesquisa de Preços, Repasses)
   envolvem o .modal-body num <form>. O <form>, e não o .modal-body, é quem
   vira filho direto de .modal-content — sem esta regra ele não cresce/encolhe
   (fica do tamanho natural do conteúdo) e, como .modal-content tem
   overflow:hidden, tudo que passa da altura máxima é cortado sem barra de
   rolagem. Precisa virar container flex também, repassando altura ao filho. */
.modal-app .modal-content > form {
	display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden;
}

/* .modal-body (com ou sem abas, dentro ou fora de um <form>) é sempre quem
   rola — seletor por classe simples pra cobrir os dois formatos. */
.modal-app .modal-body {
	flex: 1 1 auto; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch;
}

/* Abas em colunas iguais, ícone em cima do rótulo — estilo app (tab
   bar), nunca corta texto nem precisa arrastar pra ver todas. */
.abas-app { display: flex; flex-wrap: nowrap; background: #f7f8fa; border-bottom: 1px solid #eef0f3; padding: 6px 8px; gap: 4px; }
.abas-app .nav-item { flex: 1 1 0; min-width: 0; }
.abas-app .nav-link {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	width: 100%; border: none; border-radius: 8px; background: transparent; color: #6c757d;
	font-size: 11.5px; font-weight: 600; padding: 7px 4px; white-space: nowrap; overflow: hidden;
	text-overflow: ellipsis; transition: background .15s, color .15s;
}
.abas-app .nav-link i { font-size: 15px; }
.abas-app .nav-link.active { background: #fff; color: #2563eb; box-shadow: 0 1px 4px rgba(0,0,0,.08); }

/* Campos agrupados em "cartões" com título de seção — mais fácil de
   escanear que uma sequência de linhas soltas do Bootstrap. */
.form-secao { background: #f7f8fa; border-radius: 10px; padding: 12px 14px 4px; margin-bottom: 14px; }
.form-secao-titulo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #8a8f98; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.form-secao-titulo i { font-size: 11px; }
.form-secao .form-control, .form-secao .form-select { background: #fff; }

/* Botão de salvar grudado no rodapé — sempre visível enquanto rola o
   formulário. As margens negativas compensam o padding do .modal-body
   pra ficar rente às bordas; o padding interno recoloca o respiro. */
.modal-rodape-fixo {
	position: sticky; bottom: -1rem; z-index: 2;
	background: #fff; border-top: 1px solid #eef0f3;
	margin: 14px -1rem -1rem; padding: 10px 1rem calc(10px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767px) {
	/* Tela cheia de verdade em celular — sem cantos arredondados nem
	   vão vazio ao redor, igual uma tela nativa de app. */
	.modal-app .modal-dialog { margin: 0; max-width: 100%; width: 100%; height: 100dvh; }
	.modal-app .modal-content { height: 100%; max-height: 100dvh; border-radius: 0 !important; }
	.abas-app .nav-link span { display: block; }
}

@media (min-width: 768px) and (max-width: 992px) {
	/* Janela desktop estreita: mesmo tratamento de tela cheia do
	   celular, evita corte/sobreposição em janelas reduzidas. */
	.modal-app .modal-dialog.modal-xl, .modal-app .modal-dialog.modal-lg { max-width: 96vw; margin: 2vh auto; }
	.modal-app .modal-content { max-height: 96vh; }
}


/*
 * MELHORIA (pedido do usuário): overlay escuro atrás do menu lateral
 * no mobile, com clique pra fechar — sem isso, o conteúdo da tela atrás
 * do menu aberto continuava clicável, sem nenhuma indicação visual de
 * que o menu "tomou conta" da tela (padrão que qualquer app mobile com
 * menu-gaveta tem). Reage sozinho à classe "sidenav-toggled" que o
 * botão hamburguer já alterna (assets/plugins/side-menu/sidemenu.js) —
 * puro CSS, sem precisar de JS pra mostrar/esconder.
 *
 * Importante: só existe até 991px (mesmo breakpoint que o tema usa pra
 * decidir que a sidebar vira menu-gaveta em vez de coluna fixa — ver
 * assets/css/style.css). Em telas maiores, "sidenav-toggled" só
 * minimiza a sidebar (ícones), não teria sentido nenhum escurecer a
 * tela nesse caso.
 */
.app-sidebar-mobile-overlay {
	display: none;
}
@media (max-width: 991px) {
	.app.sidenav-toggled .app-sidebar-mobile-overlay {
		display: block;
		position: fixed;
		inset: 0;
		/* Tom escuro do tema (azul-marinho bem escuro), pouco fosco —
		   nem preto puro (ficaria pesado) nem transparente demais
		   (perderia o efeito de "isto está em primeiro plano agora"). */
		background: rgba(15, 23, 42, 0.6);
		-webkit-backdrop-filter: blur(1.5px);
		backdrop-filter: blur(1.5px);
		/* logo abaixo do z-index:1029 !important que o tema dá à
		   .app-sidebar nesse mesmo breakpoint (style.css) */
		z-index: 1028;
		cursor: pointer;
		animation: fade-in-overlay-menu .18s ease;
	}
}
@keyframes fade-in-overlay-menu {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* ================================================================
   CAMPO DE BUSCA+VÍNCULO DE MEMBRO (Diretoria da UEx e afins) —
   digita nome/CPF, filtra contra os usuários já cadastrados (sem
   reload) e, ao escolher, mostra um "cartão" da pessoa vinculada em
   vez do campo de busca. Ver painel/paginas/pdde_uex.php.
   ================================================================ */
.busca-membro { position: relative; }
.busca-membro-campo { position: relative; display: flex; align-items: center; }
.busca-membro-campo i.fa-search { position: absolute; left: 11px; font-size: 12px; color: #8a8f98; pointer-events: none; }
.busca-membro-campo input.form-control { padding-left: 30px; }

.busca-membro-sugestoes {
	position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 5;
	background: #fff; border: 1px solid #e3e5ea; border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0,0,0,.1); overflow: hidden; max-height: 260px; overflow-y: auto;
}
.busca-membro-opcao { display: flex; align-items: center; gap: 10px; padding: 8px 10px; cursor: pointer; border-bottom: 1px solid #f1f2f5; }
.busca-membro-opcao:last-child { border-bottom: none; }
.busca-membro-opcao:hover { background: #f7f8fa; }
.busca-membro-opcao-nome { font-size: 13px; color: #2b2f38; }
.busca-membro-opcao-cpf { font-size: 11px; color: #8a8f98; }

.busca-membro-vazio { padding: 10px; font-size: 12.5px; color: #6c757d; line-height: 1.5; }
.busca-membro-cadastrar {
	display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
	font-size: 12.5px; font-weight: 600; color: #2563eb; text-decoration: none;
}
.busca-membro-cadastrar:hover { text-decoration: underline; }

.busca-membro-avatar {
	width: 30px; height: 30px; border-radius: 50%; background: #e6f0ff; color: #2563eb;
	font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.busca-membro-opcao .busca-membro-avatar { width: 26px; height: 26px; font-size: 10.5px; }

.busca-membro-vinculado {
	display: flex; align-items: center; gap: 10px; background: #f7f8fa;
	border: 1px solid #e3e5ea; border-radius: 8px; padding: 8px 10px;
}
.busca-membro-vinculado-info { flex: 1; min-width: 0; }
.busca-membro-vinculado-nome { font-size: 13px; font-weight: 600; color: #2b2f38; }
.busca-membro-vinculado-cpf { font-size: 11.5px; color: #8a8f98; }
.busca-membro-trocar {
	flex-shrink: 0; border: none; background: transparent; color: #2563eb;
	font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px 6px;
}
.busca-membro-trocar:hover { text-decoration: underline; }

.busca-membro-aviso-legado {
	display: flex; align-items: flex-start; gap: 6px; margin-top: 6px;
	background: #fff8e6; border: 1px solid #f3d98b; border-radius: 8px;
	padding: 8px 10px; font-size: 12px; line-height: 1.5; color: #7a5a00;
}
.busca-membro-aviso-legado i { font-size: 12px; margin-top: 2px; flex-shrink: 0; }

/* CORREÇÃO: popover/tooltip (ex: os ícones "i" de campo_info()) apareciam
   atrás dos modais. O tema define .modal com z-index:99999999 (assets/css/
   style.css) mas .modal-open .popover/.tooltip com z-index bem menor
   (999999 e 9999) — sempre perdendo pro modal. Sobrescrevendo aqui com um
   valor maior que o do modal, pra funcionar em qualquer tela do sistema. */
.modal-open .popover,
.modal-open .tooltip {
	z-index: 100000000;
}

.busca-membro-vinculado-duplicado {
	border-color: #f3b4b0 !important;
	background: #fdeceb !important;
}
.busca-membro-aviso-duplicado {
	display: flex; align-items: flex-start; gap: 6px; margin-top: 6px;
	background: #fdeceb; border: 1px solid #f3b4b0; border-radius: 8px;
	padding: 8px 10px; font-size: 12px; line-height: 1.5; color: #b3261e;
}
.busca-membro-aviso-duplicado i { font-size: 12px; margin-top: 2px; flex-shrink: 0; }

/* CORREÇÃO: a barra de rolagem do menu lateral (.app-sidebar, fundo
   escuro #2A2E3F) usava o padrão do tema — 6px, preto a 20% de opacidade
   (assets/css/style.css) — quase invisível em cima de um fundo já
   escuro. Troca pra um tom claro semi-transparente (contraste real
   contra o fundo escuro), com track sutil pra dar noção de "canal" e
   estado de hover mais forte. scrollbar-width/-color cobre Firefox.
   Mesma dimensão do padrão do tema, só a cor muda — não deixa a barra
   mais grossa/intrusiva, só visível. */
.app-sidebar {
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.06);
}
.app-sidebar::-webkit-scrollbar {
	width: 7px;
}
.app-sidebar::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.06);
}
.app-sidebar::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 20px;
}
.app-sidebar::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.5);
}

/* ===== Modernização visual do sistema (a pedido do usuário) =====
   Duas mudanças, as duas só visuais (não alteram nenhum comportamento),
   valem pro sistema inteiro e pros dois temas (claro/escuro):

   1) Cards com cantos mais arredondados, sombra mais suave, e uma leve
      elevação ao passar o mouse — mesmo princípio que já tinha sido
      aplicado nos cards de indicador do Painel PDDE
      (painel/paginas/pdde_painel.php), agora estendido a todo `.card`
      do sistema.
   2) A barrinha branca lateral do item ativo do menu — o tema já tinha
      essa regra pronta (.side-menu__item.active::before), só estava
      com display:none. Só liguei e troquei a borda sólida à direita
      (que já existia) por essa barra + um tom de fundo mais suave,
      funciona em cima de qualquer cor de menu que a escola escolher. */
.card {
	border-radius: 14px !important;
	box-shadow: 0 4px 16px rgba(20, 20, 43, .06) !important;
	transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(20, 20, 43, .10) !important;
}
.card-header, .card-footer {
	border-top-left-radius: 14px !important;
	border-top-right-radius: 14px !important;
	border-bottom-left-radius: 14px !important;
	border-bottom-right-radius: 14px !important;
}

.app-sidebar .slide .side-menu__item.active::before {
	display: block !important;
	width: 3px;
	border-radius: 0 3px 3px 0;
}
.side-menu .slide .side-menu__item.active {
	background: rgba(255, 255, 255, .10);
	border-right: none;
}

/* Badges de ícone dos cards de indicador (Dashboard, Painel PDDE,
   painel super-admin) — de círculo sólido pra fundo translúcido/tintado
   com o ícone na própria cor, olhar mais suave e atual. Precisa do
   !important pra vencer o "text-white" que already vem no HTML de cada
   ícone (utilitário do Bootstrap, aplicado direto na tag <i>). Duas
   instâncias em painel/paginas/home.php têm cor fixa via style inline
   (propositalmente diferente da cor padrão da classe) — essas não são
   afetadas por essa troca, continuam com a cor escolhida à parte. */
.iconBgRoxo { background: #EEEDFE !important; }
.iconBgRoxo i { color: #534AB7 !important; }
.iconBgSusses { background: #E1F5EE !important; }
.iconBgSusses i { color: #0F6E56 !important; }
.iconBgDanger { background: #FCEBEB !important; }
.iconBgDanger i { color: #A32D2D !important; }
.iconyellow { background: #FAEEDA !important; }
.iconyellow i { color: #854F0B !important; }

/* ===== Modernização visual — 2ª camada (botões, campos, dropdowns,
   hover do menu) — mesma ideia: só visual, sem imagem, vale pro
   sistema inteiro e pros dois temas. ===== */

/* Botões: cantos mais suaves e uma transição — sem exagerar, é um
   elemento clicado o tempo todo, não precisa de elevação chamativa. */
.btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-light, .btn-dark {
	border-radius: 10px !important;
	transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.btn:active { transform: scale(.97); }

/* Campos de formulário: cantos um pouco mais arredondados (consistente
   com os cards) e o foco usa a cor de aparência de cada escola em vez
   de um cinza genérico. */
.form-control, .form-select, .form-control2 {
	border-radius: 10px !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
	border-color: var(--primary-bg-color) !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-bg-color) 15%, transparent) !important;
}

/* Menus flutuantes (dropdown de ações, notificações, etc.): cantos
   mais arredondados, acompanhando os cards. */
.dropdown-menu {
	border-radius: 12px !important;
	border: none !important;
}

/* Hover dos itens do menu lateral que NÃO estão ativos — antes
   preenchia com a cor sólida (--template2), ficava um bloco duro.
   Agora um véu translúcido bem leve, mesma linguagem do item ativo. */
.side-menu .slide .side-menu__item:hover {
	background-color: rgba(255, 255, 255, .06) !important;
}

/* ===== Modernização visual — 3ª camada (tabelas/DataTables) =====
   Mantém o cabeçalho colorido com a cor de cada escola (já existia,
   não mexi nisso) — só suaviza o hover de linha (era um azul genérico
   fixo, virou um tom leve da própria cor de destaque) e arredonda os
   botões de paginação (eram quase quadrados, 1px de raio). */
.table-hover tbody tr:hover {
	background-color: color-mix(in srgb, var(--primary-bg-color) 6%, #fff) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
	border-radius: 8px !important;
	padding: 4px 10px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
	border-radius: 8px !important;
}

/* ===== Modernização visual — 4ª camada (modais em geral) =====
   Cantos bem mais arredondados (era 3px, quase reto) e sombra suave
   em vez de só uma borda cinza fina — o overflow:hidden garante que
   um cabeçalho colorido (bg-primary) não "vaze" pelos cantos
   arredondados em modais que não usam a classe .modal-app. */
.modal-content {
	border-radius: 16px !important;
	border: none !important;
	box-shadow: 0 20px 50px rgba(20, 20, 43, .18) !important;
	overflow: hidden;
}
.modal-header {
	border-top-left-radius: 16px !important;
	border-top-right-radius: 16px !important;
}
.modal-footer {
	border-bottom-left-radius: 16px !important;
	border-bottom-right-radius: 16px !important;
}

/* ===== Skeleton loading — barrinha cinza "pulsando" no lugar de
   spinner/tela em branco, enquanto um dado ainda não chegou (padrão
   usado em dashboards modernos). Uso: <span class="skeleton-bar"
   style="width:60px"></span> no lugar do valor, até o JS substituir
   pelo dado real. ===== */
.skeleton-bar {
	display: inline-block;
	height: 1em;
	border-radius: 5px;
	background: linear-gradient(90deg, #eef0f3 25%, #e4e6ea 37%, #eef0f3 63%);
	background-size: 400% 100%;
	animation: skeleton-pulso 1.4s ease infinite;
	vertical-align: middle;
}
@keyframes skeleton-pulso {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}
.dark-theme .skeleton-bar {
	background: linear-gradient(90deg, #333748 25%, #3d4256 37%, #333748 63%);
	background-size: 400% 100%;
}
@media (prefers-reduced-motion: reduce) {
	.skeleton-bar { animation: none; background: #eef0f3; }
}

/* ===== Modo escuro pros componentes de modal criados nesta rodada de
   ajustes (abas, seções de formulário, campo de busca+vínculo de
   membro) — nenhum deles tinha tratamento pro modo escuro, ficavam
   claros/brancos dentro de um modal escuro. Mesma paleta já usada pelo
   tema em style-dark.css: fundo de card #2a2e3f, texto #bfc1d4,
   borda #404353; uso um tom só um pouco mais claro (#333748) nas
   "caixinhas" (form-secao, abas-app, sugestões) pra continuar dando
   pra distinguir do fundo do modal por trás. ===== */
.dark-theme .abas-app { background: #242837; border-bottom-color: #404353; }
.dark-theme .abas-app .nav-link { color: #8b90a3; }
.dark-theme .abas-app .nav-link.active { background: #333748; color: #7aa2f7; }

.dark-theme .form-secao { background: #242837; }
.dark-theme .form-secao-titulo { color: #8b90a3; }
.dark-theme .form-secao .form-control, .dark-theme .form-secao .form-select { background: #2a2e3f; }

.dark-theme .modal-rodape-fixo { background: #2a2e3f; border-top-color: #404353; }

.dark-theme .busca-membro-campo i.fa-search { color: #8b90a3; }

.dark-theme .busca-membro-sugestoes { background: #333748; border-color: #404353; }
.dark-theme .busca-membro-opcao { border-bottom-color: #404353; }
.dark-theme .busca-membro-opcao:hover { background: #3a3f52; }
.dark-theme .busca-membro-opcao-nome { color: #e5e7eb; }
.dark-theme .busca-membro-opcao-cpf { color: #8b90a3; }

.dark-theme .busca-membro-vinculado { background: #242837; border-color: #404353; }
.dark-theme .busca-membro-vinculado-nome { color: #e5e7eb; }
.dark-theme .busca-membro-vinculado-cpf { color: #8b90a3; }

.dark-theme .busca-membro-vazio { color: #8b90a3; }

.dark-theme .busca-membro-aviso-legado { background: rgba(243, 217, 139, .12); border-color: rgba(243, 217, 139, .3); color: #f3d98b; }
.dark-theme .busca-membro-aviso-duplicado { background: rgba(220, 38, 38, .15); border-color: rgba(220, 38, 38, .35); color: #fca5a5; }
.dark-theme .busca-membro-vinculado-duplicado { border-color: rgba(220, 38, 38, .4) !important; background: rgba(220, 38, 38, .12) !important; }

/* ===== Ajustes finos de modo escuro — tabelas do PDDE (Despesas,
   Repasses) e cabeçalho de tabela em geral. A linha de filtro
   misturava a cor de destaque com branco fixo (color-mix(...,#fff)) —
   sempre saía bem clara, mesmo no escuro. Mistura com o fundo de card
   do próprio modo escuro em vez de branco fixo. O cabeçalho da tabela
   (.table-bordered thead) já tem uma regra própria pro modo escuro em
   style-dark.css, mas reforço aqui (mais específico, carrega por
   último) pra garantir que sempre vence, não importa a página. ===== */
.dark-theme table.desp-tabela .filtro-col,
.dark-theme table.rep-tabela .filtro-col {
	background: color-mix(in srgb, var(--primary-bg-color) 12%, #2a2e3f) !important;
}
.dark-theme table.desp-tabela .filtro-col input,
.dark-theme table.desp-tabela .filtro-col select,
.dark-theme table.rep-tabela .filtro-col input,
.dark-theme table.rep-tabela .filtro-col select {
	background: #333748 !important;
	color: #e5e7eb !important;
	border-color: #404353 !important;
}

.dark-theme .table-bordered thead th,
.dark-theme .table-bordered thead td {
	background-color: #2a2e3f !important;
	color: #fff !important;
}

.dark-theme table tfoot td,
.dark-theme table tfoot th {
	background-color: #242837 !important;
	color: #e5e7eb !important;
	border-color: #404353 !important;
}

/* O preloader (#global-loader, tela cheia que aparece rapidinho antes
   da página montar) tinha fundo branco fixo — no modo escuro, isso
   piscava uma tela branca em todo carregamento de página antes de
   sumir. */
.dark-theme #global-loader {
	background: #12131c;
}

/* ===== Preloader "inteligente" — spinner em CSS puro, sem imagem
   nenhuma (substitui o antigo loader.gif). Duas vantagens sobre um
   GIF: acompanha a cor de aparência de CADA escola automaticamente
   (var(--primary-bg-color), a mesma cor configurável em Aparência),
   e nunca precisa de arquivo — carrega instantâneo, não tem como
   "faltar" o arquivo como acontecia antes. ===== */
.loader-spinner-app {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border: 4px solid color-mix(in srgb, var(--primary-bg-color) 18%, transparent);
	border-top-color: var(--primary-bg-color);
	animation: loader-spinner-girar 0.75s linear infinite;
}
@keyframes loader-spinner-girar {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.loader-spinner-app { animation-duration: 2.2s; }
}

/* Centraliza o spinner sem entrar em conflito com o jQuery fadeOut()
   (que esconde o #global-loader via display:none inline no fim da
   animação) — um !important aqui em display teria prioridade sobre
   esse style inline sem !important, e o preloader nunca sumiria de
   verdade. Centraliza só o filho (position:absolute + margin auto),
   sem tocar no display do próprio #global-loader. */
#global-loader {
	text-align: center;
}
.loader-spinner-app {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	margin: auto;
}

/* CORREÇÃO: o menu de ações (os "⋮" que abrem um dropdown/menu de
   opções, ex.: "Abrir/Classificar", "Excluir") tinha z-index mais
   baixo (999, do tema) que a barra de navegação inferior fixa do
   celular (.nav-inferior-mobile, z-index:1030) — na parte da tela onde
   os dois se sobrepõem, a barra inferior ficava por cima, roubando o
   clique mesmo com o menu aparecendo visualmente. Sobe o dropdown pra
   cima de tudo que já existe de fixo no mobile. */
.dropdown-menu {
	z-index: 1050;
}

/* CORREÇÃO (a pedido — UX/UI): a mensagem de erro dos formulários
   "Inserir Registro" (ex.: "Cadastre pelo menos 2 alternativas") usava
   só a classe .text-danger do Bootstrap — texto vermelho pequeno, sem
   fundo, sem destaque, fácil de não notar. Agora um badge de alerta de
   verdade: fundo, borda, ícone e espaçamento, no mesmo padrão visual
   usado no resto do sistema pra estados de erro. */
/* CORREÇÃO (a pedido — badge aparecendo vazio): a classe .text-danger
   já vem no HTML por padrão, mesmo sem nenhuma mensagem de erro — o
   estilo antigo (só texto vermelho) não aparecia visualmente numa div
   vazia, mas o novo (fundo/borda/ícone) sim, fazendo o badge mostrar
   um aviso vazio toda vez que o modal "Inserir Registro" abria. Agora
   só aplica o visual quando a div realmente tem texto dentro. */
#mensagem.text-danger:not(:empty),
#mensagem-arquivo.text-danger:not(:empty),
#mensagem-excluir.text-danger:not(:empty) {
	display: block;
	background: #fdf1f1;
	border: 1px solid #f3c6c6;
	color: #a12626;
	font-size: 13px;
	font-weight: 500;
	padding: 10px 14px;
	border-radius: 8px;
	margin-top: 10px;
	text-align: left !important;
}
#mensagem.text-danger:not(:empty)::before,
#mensagem-arquivo.text-danger:not(:empty)::before,
#mensagem-excluir.text-danger:not(:empty)::before {
	content: "⚠";
	margin-right: 8px;
}


/* CORREÇÃO (auditoria 09/2026): títulos de card ("Comprar mais créditos",
   "Extrato recente", gráficos de Atividades...) saíam BRANCOS sobre o fundo
   branco no tema claro — só apareciam ao selecionar o texto ou no tema
   escuro. Cor escura legível fixa no tema claro; cards de fundo colorido
   (bg-primary / text-white) e o tema escuro continuam com as próprias
   regras. */
body:not(.dark-theme) .card:not(.bg-primary):not(.bg-primary-card):not(.text-white):not(.tx-white) > .card-header .card-title,
body:not(.dark-theme) .card:not(.bg-primary):not(.bg-primary-card):not(.text-white):not(.tx-white) > .card-body > .card-title {
	color: #1f2937 !important;
}