/*
Novo Rumo — Gestão
Paleta derivada do NOVO logotipo institucional (2026):
letras multicoloridas "NOVO" — verde, azul, vermelho, amarelo — tema de inclusão.
Azul é a cor estrutural/primária; verde=sucesso, vermelho=perigo, amarelo=destaque.
Os nomes de variável são mantidos (--nr-petroleo/--nr-roxo) para não quebrar os usos;
apenas os VALORES foram migrados para a nova marca.
Contraste mínimo AA — requisito de identidade de uma instituição de inclusão.
*/

:root {
	/* Azul estrutural (sidebar, cabeçalhos, faixas) — antes "petróleo" */
	--nr-petroleo: #1E4E8F;
	--nr-petroleo-claro: #2C63A8;
	--nr-petroleo-borda: #3A6FB0;
	/* Azul de ação (botões, menu ativo, links) — antes "roxo" */
	--nr-roxo: #2F6FD0;
	--nr-roxo-escuro: #1F4E96;
	--nr-roxo-claro: #E7EFFB;
	/* Vermelho da logo (perigo, excluir, avisos) */
	--nr-carmim: #E23B2E;
	--nr-carmim-claro: #FCE7E5;
	--nr-carmim-escuro: #A82419;
	/* Amarelo da logo (destaque, faixa do menu ativo) */
	--nr-faixa: #F4B01D;
	/* Verde da logo (sucesso, parcela paga) */
	--nr-verde: #1E7E3A;
	--nr-verde-claro: #E4F4E9;

	--nr-texto: #2E3A40;
	--nr-texto-fraco: #63727A;
	--nr-borda: #E3E6E8;
	--nr-borda-suave: #EDEFF0;
	--nr-fundo: #F6F7F8;
	--nr-superficie: #FFFFFF;

	--nr-sidebar: 220px;
	--nr-raio: 8px;
}

* { box-sizing: border-box; }

body, html {
	margin: 0;
	padding: 0;
	height: 100%;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: var(--nr-texto);
	background: var(--nr-fundo);
	text-align: left;
}

a { color: var(--nr-roxo-escuro); text-decoration: none; }
a:hover { text-decoration: underline; }

h2, h3, h4, h5 { margin: 0; font-weight: 600; }

/* ---------- Topo ---------- */

#global { min-height: 100%; }

#DetTopo {
	background: var(--nr-superficie);
	border-bottom: 1px solid var(--nr-borda);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding: 8px 20px;
	gap: 12px;
}

/* Marca à esquerda preenche o vazio da barra */
.topo-marca {
	font-size: 17px;
	font-weight: 700;
	color: var(--nr-petroleo);
	text-decoration: none;
	line-height: 1;
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
}
.topo-marca span { font-size: 13px; font-weight: 400; color: var(--nr-texto-fraco); }
.topo-marca:hover { text-decoration: none; color: var(--nr-petroleo-claro); }

/* A saudação fica sempre à direita; no mobile o botão de menu ocupa a esquerda */
#menu { margin-left: auto; }

.topo-usuario { display: inline-flex; align-items: center; gap: 8px; }
.topo-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--nr-roxo-claro);
	color: var(--nr-roxo-escuro);
	font-style: normal;
	font-weight: 700;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Botão de menu (hambúrguer) — só aparece no mobile */
.menu-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	background: var(--nr-petroleo);
	color: #FFFFFF;
	border: 0;
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
}

.menu-toggle .barra { display: inline-block; width: 18px; height: 2px; background: #FFFFFF; position: relative; }
.menu-toggle .barra::before,
.menu-toggle .barra::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: #FFFFFF; }
.menu-toggle .barra::before { top: -6px; }
.menu-toggle .barra::after { top: 6px; }

#menu { display: flex; align-items: center; }

#menu h5 {
	font-size: 14px;
	font-weight: 400;
	color: var(--nr-texto-fraco);
	margin: 0;
	display: flex;
	align-items: center;
	gap: 12px;
}

#menu h5 strong { color: var(--nr-texto); font-weight: 600; }

.bts_Menu_Horiz {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--nr-roxo);
	color: #FFFFFF !important;
	padding: 7px 14px;
	border-radius: var(--nr-raio);
	font-size: 13px;
}
.bts_Menu_Horiz .tl-ico { width: 16px; height: 16px; }
.bts_Menu_Horiz:hover { background: var(--nr-roxo-escuro); text-decoration: none; }

/* ---------- Estrutura ---------- */

#conteudo_admin {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 20px;
	padding: 20px;
	max-width: 1400px;
	margin: 0 auto;
}

/* Título de página: ocupa a largura toda quando é filho direto do conteúdo */
#conteudo_admin > #titulo { width: 100%; }

#titulo {
	margin-bottom: 4px;
}

#titulo h2, #titulo p {
	margin: 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--nr-texto);
	text-transform: none;
}

/* Os GIFs de canto do layout antigo não têm função no layout novo */
#titulo img { display: none; }

#ArelarioESQ {
	width: var(--nr-sidebar);
	flex-shrink: 0;
	background: var(--nr-petroleo);
	border-radius: 12px;
	padding: 8px 0;
	overflow: hidden;
}

#ArelarioESQ #titulo { padding: 12px 16px 8px; margin: 0; }
#ArelarioESQ #titulo p {
	color: #A9C6D0;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 600;
}

#ArelarioDIR {
	flex: 1;
	min-width: 0;
}

/* Página de login e telas centralizadas */
#AexibirCENTRAL {
	max-width: 420px;
	margin: 48px auto;
}

/* ---------- Parcelas (contas a receber) ---------- */

.parcelas {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	max-width: 260px;
}

.parcela {
	display: inline-block;
	min-width: 34px;
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	padding: 3px 5px;
	border-radius: 5px;
	border: 1px solid transparent;
	cursor: default;
}

.parcela-paga {
	background: var(--nr-verde-claro);
	color: var(--nr-verde);
	border-color: #C7E0CC;
}

.parcela-aberta {
	background: var(--nr-carmim-claro);
	color: var(--nr-carmim-escuro);
	border-color: #EFC9C9;
}

/* ---------- Menu lateral ---------- */

/* 15 itens não cabem na tela: o menu acompanha a rolagem e rola sozinho se precisar */
#ArelarioESQ {
	position: sticky;
	top: 20px;
	max-height: calc(100vh - 40px);
	overflow-y: auto;
}

.menu_vertical ul { margin: 0; padding: 0; list-style: none; }
.menu_vertical li { margin: 0; padding: 0; list-style: none; }

.menu_vertical a {
	display: block;
	padding: 11px 16px;
	color: #D7E6EB;
	font-size: 14px;
	border-left: 3px solid transparent;
}

.menu_vertical a:hover {
	background: var(--nr-petroleo-claro);
	color: #FFFFFF;
	text-decoration: none;
}

.menu_vertical a.ativo {
	background: var(--nr-roxo);
	color: #FFFFFF;
	border-left-color: var(--nr-faixa);
}

/* ---------- Tela de acesso (marca Novo Rumo) ---------- */

:root {
	--tl-grad-1: #1F9A48;   /* verde da logo */
	--tl-grad-2: #2469B8;   /* azul da logo */
	--tl-grad-3: #17457F;   /* azul profundo */
}

.tela-acesso {
	min-height: 100vh;
	background: #F1F5F9;
}

/* Layout de duas colunas (padrão dos logins ThigoLabs) */
.acesso-split {
	display: flex;
	min-height: 100vh;
}

/* Coluna esquerda: formulário */
.acesso-form {
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px 24px;
	background: #FFFFFF;
}

/* Coluna direita: painel de boas-vindas com o gradiente da marca */
.acesso-hero {
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 48px;
	color: #FFFFFF;
	background: linear-gradient(135deg, var(--tl-grad-1) 0%, var(--tl-grad-2) 48%, var(--tl-grad-3) 100%);
}

.acesso-hero-conteudo { max-width: 420px; text-align: center; }

.acesso-hero-icone {
	width: 92px;
	height: 92px;
	margin: 0 auto 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.16);
}

.acesso-hero-titulo {
	font-size: 34px;
	font-weight: 700;
	margin: 0 0 14px;
	line-height: 1.15;
}

.acesso-hero-texto {
	font-size: 17px;
	line-height: 1.5;
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
}

/* Cartão do formulário */
.tela-acesso .cartao {
	position: relative;
	width: 100%;
	max-width: 400px;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	box-shadow: none;
}

.acesso-marca { text-align: center; margin-bottom: 22px; }
.acesso-marca img { max-width: 230px; width: 80%; height: auto; }

.acesso-titulo {
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	color: #0F172A;
	margin: 0 0 6px;
}

.acesso-ajuda {
	color: #64748B;
	font-size: 14px;
	text-align: center;
	margin: 0 0 24px;
}

.campo { margin-bottom: 16px; }

.campo label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #64748B;
	margin-bottom: 6px;
}

.tela-acesso .campo input {
	height: 48px;
	font-size: 16px;
	border-radius: 8px;
	border: 1px solid #E2E8F0;
	padding: 0 14px;
}
.tela-acesso .campo input:focus {
	border-color: rgba(36, 105, 184, 0.55);
	box-shadow: 0 0 0 3px rgba(36, 105, 184, 0.14);
}

.acesso-acoes {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
	margin-top: 22px;
}

/* Botão com o gradiente da marca */
.tela-acesso .acesso-acoes .bts {
	width: 100%;
	height: 48px;
	font-size: 16px;
	font-weight: 600;
	border: 0;
	border-radius: 8px;
	color: #FFFFFF;
	background: linear-gradient(135deg, var(--tl-grad-1) 0%, var(--tl-grad-2) 55%, var(--tl-grad-3) 100%);
	box-shadow: 0 4px 14px rgba(36, 105, 184, 0.28);
}
.tela-acesso .acesso-acoes .bts:hover {
	filter: brightness(1.05);
	box-shadow: 0 6px 18px rgba(31, 154, 72, 0.24);
}

.acesso-acoes a {
	text-align: center;
	font-size: 14px;
	color: var(--tl-grad-2);
	padding: 2px;
}

.tela-acesso .alerta,
.tela-acesso .sucesso {
	border-radius: 8px;
	text-align: center;
	font-size: 14px;
}

.acesso-rodape {
	margin-top: 28px;
	text-align: center;
	color: var(--nr-texto-fraco);
	font-size: 13px;
}
.acesso-rodape #rodape { padding: 0; color: inherit; }

/* Empilha as colunas em telas menores */
@media (max-width: 860px) {
	.acesso-split { flex-direction: column; }
	.acesso-hero { order: -1; padding: 40px 24px; }
	.acesso-hero-titulo { font-size: 28px; }
	.acesso-hero-icone { width: 76px; height: 76px; margin-bottom: 18px; }
}

/* ---------- Cartões e tabelas ---------- */

.cartao, #box {
	background: var(--nr-superficie);
	border: 1px solid var(--nr-borda);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
}

/* .borda é o rótulo de campo das telas antigas — nunca um cartão */
.borda {
	font-size: 14px;
	font-weight: 600;
	color: var(--nr-texto-fraco);
	background: none;
	border: 0;
	padding: 0;
	white-space: normal;
}

.borda font[color="red"] { color: var(--nr-carmim) !important; }

table { border-collapse: collapse; }

table td { padding: 6px 4px; vertical-align: middle; }

/* ---------- Formulário de cadastro (estrutura em <table>) ---------- */

.formulario_validate {
	display: block;
	background: var(--nr-superficie);
	border: 1px solid var(--nr-borda);
	border-radius: 12px;
	padding: 24px 28px;
	margin-bottom: 16px;
	max-width: 760px;
}

/* Abas do formulário (progressive enhancement via JS) */
.form-abas {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	border-bottom: 1px solid var(--nr-borda);
	margin-bottom: 20px;
}
.form-aba {
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 10px 14px;
	margin-bottom: -1px;
	font-size: 14px;
	font-weight: 600;
	color: var(--nr-texto-fraco);
	cursor: pointer;
	font-family: inherit;
}
.form-aba:hover { color: var(--nr-texto); }
.form-aba.ativa { color: var(--nr-roxo-escuro); border-bottom-color: var(--nr-roxo); }

/* Layout empilhado: rótulo em cima, campo embaixo (em qualquer largura).
   Elimina a briga de largura entre colunas de <table> do HTML antigo. */
.formulario_validate table,
.formulario_validate tbody,
.formulario_validate tr { display: block; width: 100%; }

.formulario_validate tr { margin-bottom: 14px; }

.formulario_validate td {
	display: block;
	width: 100% !important;
	padding: 0 0 5px 0 !important;
	text-align: left !important;
	white-space: normal !important;
}

/* Campos ocupam toda a largura, sem depender do size="65" do HTML antigo */
.formulario_validate input[type="text"],
.formulario_validate input[type="password"],
.formulario_validate input[type="email"],
.formulario_validate input[type="number"],
.formulario_validate select,
.formulario_validate textarea {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

.formulario_validate textarea { min-height: 96px; }

/* Cabeçalho de seção dentro do formulário (agrupa campos) */
.formulario_validate tr.secao td { padding-top: 20px !important; }
.formulario_validate tr.secao:first-child td { padding-top: 2px !important; }
.formulario_validate tr.secao span {
	display: block;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--nr-roxo-escuro);
	border-bottom: 1px solid var(--nr-borda);
	padding-bottom: 7px;
}

/* Linha do botão de envio */
.formulario_validate #box { padding-top: 10px; }

th.list {
	background: var(--nr-fundo);
	color: var(--nr-texto-fraco);
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	padding: 10px 12px;
	border-bottom: 1px solid var(--nr-borda);
}

td.list {
	background: var(--nr-superficie);
	padding: 10px 12px !important;
	border-bottom: 1px solid var(--nr-borda-suave);
	font-size: 14px !important;
}

td.list h4 { font-weight: 400; font-size: 14px; margin: 0; }

td.list img { width: 20px; height: 20px; vertical-align: middle; }
td.list a { display: inline-block; padding: 4px; }
td.list table { margin: 0; }

/* Botões de ação em SVG (editar, excluir, pdf, etc.) */
.tl-ico { width: 20px; height: 20px; display: inline-block; vertical-align: middle; flex-shrink: 0; }

td.list a.acao-btn,
a.acao-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--nr-borda);
	border-radius: var(--nr-raio);
	color: var(--nr-texto-fraco);
	background: var(--nr-superficie);
	transition: background .15s, border-color .15s, color .15s;
}
a.acao-btn .tl-ico { width: 18px; height: 18px; }
a.acao-btn:hover { text-decoration: none; }

a.acao-editar:hover { color: var(--nr-roxo-escuro); border-color: var(--nr-roxo); background: var(--nr-roxo-claro); }
a.acao-excluir:hover { color: var(--nr-carmim-escuro); border-color: var(--nr-carmim); background: var(--nr-carmim-claro); }
a.acao-ver:hover,
a.acao-pdf:hover,
a.acao-boleto:hover { color: var(--nr-petroleo); border-color: var(--nr-petroleo-borda); background: #EAF1F3; }

tr:hover td.list { background: var(--nr-fundo); }

div.list {
	background: var(--nr-superficie) !important;
	border: 1px solid var(--nr-borda);
	border-top: 0;
	border-radius: 0 0 12px 12px;
	padding: 10px 12px;
	height: auto !important;
	font-size: 13px;
	color: var(--nr-texto-fraco);
}

div.list a {
	display: inline-block;
	padding: 3px 9px;
	margin-right: 4px;
	border: 1px solid var(--nr-borda);
	border-radius: 6px;
}

/* ---------- Tela inicial (painel) ---------- */

.painel-boas-vindas {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	background: linear-gradient(120deg, #1E4E8F 0%, #2C63A8 100%);
	border: 0;
	padding: 28px 32px;
}

.painel-ola { color: rgba(255,255,255,0.85); font-size: 16px; margin: 0 0 4px; }
.painel-ola strong { color: #FFFFFF; font-weight: 600; }

.painel-titulo { color: #FFFFFF; font-size: 26px; font-weight: 700; margin: 0 0 8px; }

.painel-missao { color: rgba(255,255,255,0.88); font-size: 15px; margin: 0; max-width: 520px; line-height: 1.55; }

.painel-marca {
	width: 150px;
	height: auto;
	background: rgba(255,255,255,0.94);
	border-radius: 14px;
	padding: 10px;
	flex-shrink: 0;
}

.painel-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-bottom: 16px;
}

.painel-stat {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 20px 24px;
	margin: 0;
	border-left: 4px solid var(--nr-petroleo);
}

.painel-stat-num { font-size: 34px; font-weight: 700; color: var(--nr-petroleo); line-height: 1.1; }
.painel-stat-rot { font-size: 14px; color: var(--nr-texto-fraco); }

/* Cores por tipo de métrica */
.painel-stat--pac    { border-left-color: var(--nr-petroleo); }
.painel-stat--alerta { border-left-color: var(--nr-carmim); }
.painel-stat--festa  { border-left-color: #C79A1E; }
.painel-stat--areas  { border-left-color: var(--nr-roxo); }
.painel-stat--verde  { border-left-color: var(--nr-verde); }

.painel-stat--pac    .painel-stat-num { color: var(--nr-petroleo); }
.painel-stat--alerta .painel-stat-num { color: var(--nr-carmim); }
.painel-stat--festa  .painel-stat-num { color: #B0851A; }
.painel-stat--areas  .painel-stat-num { color: var(--nr-roxo); }
.painel-stat--verde  .painel-stat-num { color: var(--nr-verde); }

.painel-secao {
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--nr-texto-fraco);
	margin: 0 0 14px;
}

.areas-lista { display: flex; flex-wrap: wrap; gap: 10px; }

.area-pill {
	display: inline-flex;
	align-items: center;
	background: var(--nr-roxo-claro);
	color: var(--nr-roxo-escuro);
	font-size: 14px;
	font-weight: 500;
	padding: 8px 16px;
	border-radius: 20px;
}

@media (max-width: 640px) {
	.painel-boas-vindas { flex-direction: column-reverse; align-items: flex-start; text-align: left; }
	.painel-marca { width: 120px; }
}

/* ---------- Barra de busca das listagens ---------- */

.busca {
	background: var(--nr-superficie) !important;
	border: 1px solid var(--nr-borda);
	border-radius: 12px 12px 0 0;
	border-bottom: 0;
	padding: 12px;
	margin: 0 !important;
}

.busca table { width: 100%; }

.busca-rotulo {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--nr-texto-fraco);
	text-transform: uppercase;
	white-space: nowrap;
}

.busca input[type="text"] { width: auto; min-width: 200px; }

.busca-info {
	font-size: 13px;
	color: var(--nr-texto-fraco);
	white-space: nowrap;
}

.busca-acao { text-align: right; white-space: nowrap; }

/* Imagem antiga "add.gif" fica oculta — o botão usa SVG + rótulo */
.busca-acao img { display: none; }

.busca-acao a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--nr-roxo);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 500;
	padding: 9px 16px;
	border-radius: var(--nr-raio);
}

.busca-acao a .tl-ico { width: 17px; height: 17px; }
.busca-acao a:hover { background: var(--nr-roxo-escuro); text-decoration: none; }
/* Quando o link não traz rótulo próprio, exibe "Novo" */
.busca-acao a.rotulo-novo:after { content: "Novo"; }

/* ---------- Formulários ---------- */

/* Dentro do cartão .formulario_validate o fieldset é só o título da seção,
   sem caixa própria (evita borda dentro de borda). */
.formulario_validate fieldset { border: 0; padding: 0; margin: 0; }

.formulario_validate legend {
	display: block;
	width: 100%;
	font-size: 17px;
	font-weight: 600;
	color: var(--nr-texto);
	padding: 0 0 14px;
	margin: 0;
}

/* Fieldset usado fora de um formulário-cartão vira um cartão próprio */
fieldset {
	border: 1px solid var(--nr-borda);
	border-radius: 12px;
	background: var(--nr-superficie);
	padding: 20px;
	margin: 0 0 16px;
}

legend {
	font-size: 13px;
	font-weight: 600;
	color: var(--nr-texto-fraco);
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 0 8px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
select,
textarea {
	font-family: inherit;
	font-size: 15px;
	color: var(--nr-texto);
	background: var(--nr-superficie);
	border: 1px solid var(--nr-borda);
	border-radius: var(--nr-raio);
	padding: 9px 11px;
	width: 100%;
	max-width: 100%;
}

input:focus, select:focus, textarea:focus {
	outline: none;
	border-color: var(--nr-roxo);
	box-shadow: 0 0 0 3px var(--nr-roxo-claro);
}

input.error { border: 1px solid var(--nr-carmim) !important; }

label, .required { font-size: 14px; color: var(--nr-texto); }
.required:after { content: " *"; color: var(--nr-carmim); }

/* ---------- Botões ---------- */

.bts, .bts2,
input[type="submit"], input[type="reset"], input[type="button"] {
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	padding: 9px 16px;
	border-radius: var(--nr-raio);
	border: 1px solid var(--nr-roxo);
	background: var(--nr-roxo);
	color: #FFFFFF;
	cursor: pointer;
	width: auto;
}

.bts:hover, .bts2:hover,
input[type="submit"]:hover { background: var(--nr-roxo-escuro); border-color: var(--nr-roxo-escuro); }

/* .bts2 é o botão secundário: precisa vencer input[type=submit] na especificidade */
input.bts2, a.bts2, .bts2,
input[type="reset"], input[type="button"] {
	background: var(--nr-superficie);
	color: var(--nr-texto);
	border: 1px solid var(--nr-borda);
}

input.bts2:hover, a.bts2:hover, .bts2:hover,
input[type="reset"]:hover, input[type="button"]:hover {
	background: var(--nr-fundo);
	border-color: var(--nr-texto-fraco);
	color: var(--nr-texto);
}

/* ---------- Avisos ---------- */

.sucesso, .alerta {
	padding: 12px 14px;
	border-radius: var(--nr-raio);
	font-size: 14px;
	margin-bottom: 16px;
	border: 1px solid transparent;
}

.sucesso {
	background: var(--nr-verde-claro);
	color: var(--nr-verde);
	border-color: #C7E0CC;
}

.alerta {
	background: var(--nr-carmim-claro);
	color: var(--nr-carmim-escuro);
	border-color: #EFC9C9;
}

/* ---------- Indicadores ---------- */

.paciente_total, .debito_total, .debito_valor, #somaGeral {
	font-size: 20px;
	font-weight: 600;
	color: var(--nr-petroleo);
}

.gerar_pdf { display: inline-block; }

/* ---------- Rodapé ---------- */

#rodape {
	width: 100%;
	padding: 20px;
	text-align: center;
	color: var(--nr-texto-fraco);
	font-size: 13px;
}

.rodape { margin: 0; }

/* ---------- Modais (TL.confirm / TL.alerta) ---------- */

.tl-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(26, 33, 38, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity .18s ease;
}
.tl-modal-overlay.aberto { opacity: 1; visibility: visible; }

.tl-modal {
	width: 100%;
	max-width: 420px;
	background: var(--nr-superficie);
	border-radius: 14px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
	padding: 24px;
	transform: translateY(12px) scale(.98);
	transition: transform .18s ease;
}
.tl-modal-overlay.aberto .tl-modal { transform: translateY(0) scale(1); }

.tl-modal-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.tl-modal-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--nr-roxo-claro);
	color: var(--nr-roxo-escuro);
	flex-shrink: 0;
}
.tl-modal--perigo .tl-modal-icone { background: var(--nr-carmim-claro); color: var(--nr-carmim-escuro); }
.tl-modal-icone svg { width: 22px; height: 22px; }

.tl-modal-titulo { margin: 0; font-size: 18px; font-weight: 600; color: var(--nr-texto); }

.tl-modal-corpo { color: var(--nr-texto-fraco); font-size: 14px; line-height: 1.55; }
.tl-modal-corpo p { margin: 0 0 6px; }

.tl-modal-rodape { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

.tl-btn {
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	padding: 9px 18px;
	border-radius: var(--nr-raio);
	border: 1px solid transparent;
	cursor: pointer;
}
.tl-btn--principal { background: var(--nr-roxo); color: #FFF; border-color: var(--nr-roxo); }
.tl-btn--principal:hover { background: var(--nr-roxo-escuro); border-color: var(--nr-roxo-escuro); }
.tl-btn--perigo { background: var(--nr-carmim); color: #FFF; border-color: var(--nr-carmim); }
.tl-btn--perigo:hover { background: var(--nr-carmim-escuro); border-color: var(--nr-carmim-escuro); }
.tl-btn--secundario { background: var(--nr-superficie); color: var(--nr-texto); border-color: var(--nr-borda); }
.tl-btn--secundario:hover { background: var(--nr-fundo); border-color: var(--nr-texto-fraco); }

@media (max-width: 480px) {
	.tl-modal-rodape { flex-direction: column-reverse; }
	.tl-btn { width: 100%; }
}

/* ---------- Responsivo ---------- */

@media (max-width: 860px) {
	#conteudo_admin { padding: 12px; gap: 12px; }
	#ArelarioDIR { flex: 1 1 100%; }
	#DetTopo { padding: 8px 12px; }
	#menu h5 { font-size: 13px; gap: 8px; }

	/* Menu recolhível: escondido por padrão, o conteúdo aparece primeiro.
	   O botão hambúrguer no topo abre/fecha. */
	.menu-toggle { display: inline-flex; }
	.topo-marca { display: none; }   /* no mobile o botão Menu ocupa a esquerda */

	#ArelarioESQ {
		width: 100%;
		position: static;
		max-height: none;
		overflow: visible;
		display: none;
		order: -1;
		margin-bottom: 4px;
	}
	body.menu-aberto #ArelarioESQ { display: block; }

	/* A barra de busca é montada em <table>: empilha para não estourar a largura */
	.busca table, .busca tbody, .busca tr, .busca td {
		display: block;
		width: auto !important;
	}

	.busca td { padding: 4px 0; }
	.busca input[type="text"] { width: 100%; min-width: 0; }
	.busca-rotulo { padding-left: 0 !important; }
	.busca-info, .busca-acao { text-align: left; }
	.busca-acao a { width: 100%; text-align: center; }

	/* Tabelas largas rolam dentro do próprio cartão, nunca a página */
	#ArelarioDIR { overflow-x: auto; }

	/* Parcelas mais compactas para a linha não ficar alta demais */
	.parcelas { max-width: none; gap: 3px; }
	.parcela { min-width: 28px; font-size: 10px; padding: 2px 5px; }

	/* Formulários de cadastro empilham rótulo em cima do campo.
	   Tabela/linha/célula viram bloco para os campos ocuparem a largura toda. */
	.formulario_validate table,
	.formulario_validate tbody,
	.formulario_validate tr { display: block; width: 100%; }
	.formulario_validate td:first-child { width: auto !important; display: block; padding-bottom: 2px !important; }
	.formulario_validate td { display: block; width: 100%; padding: 4px 0 !important; }
	.formulario_validate input[type="text"],
	.formulario_validate input[type="password"],
	.formulario_validate select,
	.formulario_validate textarea { width: 100%; max-width: 100%; }
}

/* ================= Contas a Receber — Pendências ================= */

.deb-cards { margin-bottom: 18px; }
.deb-cards .painel-stat-num { font-size: 26px; }

/* Cards clicáveis (filtro por situação) */
a.deb-card-filtro { text-decoration: none; transition: box-shadow .15s, transform .05s, background .15s; }
a.deb-card-filtro:hover { box-shadow: 0 3px 12px rgba(0,0,0,.10); text-decoration: none; }
a.deb-card-filtro:active { transform: translateY(1px); }
a.deb-card-filtro.deb-card-ativo { border-left-width: 6px; }
.painel-stat--pac.deb-card-ativo    { background: #EAF1F3; }
.painel-stat--alerta.deb-card-ativo { background: var(--nr-carmim-claro); }
.painel-stat--verde.deb-card-ativo  { background: var(--nr-verde-claro); }
.deb-valor--ok { color: var(--nr-verde) !important; }

/* Filtros em linha */
.deb-filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 14px;
}
.deb-campo { display: flex; flex-direction: column; gap: 5px; }
.deb-campo .busca-rotulo { margin: 0; }
.deb-campo input[type="text"],
.deb-campo select {
	min-width: 180px;
	padding: 8px 10px;
	border: 1px solid var(--nr-borda);
	border-radius: var(--nr-raio);
	font-size: 14px;
	background: var(--nr-superficie);
}
.deb-campo input#q { min-width: 260px; }
.deb-campo-acoes { flex-direction: row; align-items: center; gap: 8px; }

/* Tabela */
.tabela-debito { border-collapse: collapse; }
.tabela-debito .deb-valor {
	text-align: right;
	font-weight: 600;
	color: var(--nr-carmim-escuro);
	white-space: nowrap;
}
.tabela-debito .deb-vazio {
	text-align: center;
	color: var(--nr-texto-fraco);
	padding: 24px 12px !important;
}

/* Linha clicável do paciente */
.linha-paciente { cursor: pointer; }
.linha-paciente:focus { outline: 2px solid var(--nr-roxo); outline-offset: -2px; }
.linha-paciente td.list h4 { display: flex; align-items: center; gap: 8px; }
.deb-chevron {
	color: var(--nr-texto-fraco);
	font-size: 11px;
	transition: transform .15s ease;
	display: inline-block;
}
.linha-paciente.linha-aberta .deb-chevron { transform: rotate(90deg); color: var(--nr-roxo-escuro); }
.linha-paciente.linha-aberta td.list { background: var(--nr-roxo-claro); }

/* Badge de quantidade de parcelas */
.deb-badge {
	display: inline-block;
	min-width: 26px;
	padding: 2px 9px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
	background: var(--nr-roxo-claro);
	color: var(--nr-roxo-escuro);
}
.deb-badge--atraso { background: var(--nr-carmim-claro); color: var(--nr-carmim-escuro); }

/* Detalhe expansível */
.linha-detalhe td { padding: 0 !important; background: var(--nr-fundo) !important; }
.deb-detalhe { padding: 14px 16px 18px; }
.deb-detalhe-titulo { margin: 0 0 10px; font-size: 13px; color: var(--nr-texto-fraco); }
.deb-detalhe-titulo strong { color: var(--nr-texto); }
.deb-detalhe-tabela { width: 100%; border-collapse: collapse; background: var(--nr-superficie); border: 1px solid var(--nr-borda); border-radius: var(--nr-raio); overflow: hidden; }
.deb-detalhe-tabela th {
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--nr-texto-fraco);
	padding: 8px 12px;
	background: var(--nr-fundo);
	border-bottom: 1px solid var(--nr-borda);
}
.deb-detalhe-tabela td { padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--nr-borda-suave); }
.deb-detalhe-tabela tfoot td { border-top: 1px solid var(--nr-borda); border-bottom: 0; background: var(--nr-fundo); }

.deb-tag {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
}
.deb-tag--atraso { background: var(--nr-carmim-claro); color: var(--nr-carmim-escuro); }
.deb-tag--emdia  { background: var(--nr-verde-claro); color: var(--nr-verde); }

/* Ações por parcela (boleto / dar baixa) */
.deb-acoes { text-align: center; white-space: nowrap; }
.deb-detalhe-tabela .deb-acoes .acao-btn { width: 30px; height: 30px; }
.deb-detalhe-tabela .deb-acoes .acao-btn + .acao-btn { margin-left: 5px; }

/* ---------- Configuração de cobrança: form global compacto (2 colunas) ---------- */
.formulario_validate.cfg-cobranca { max-width: 960px; }
.cfg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; }
.cfg-gcampo { display: flex; flex-direction: column; gap: 5px; }
.cfg-gcampo label {
	font-size: 12px; font-weight: 600; text-transform: uppercase;
	letter-spacing: .04em; color: var(--nr-texto-fraco);
}
.cfg-obrig { color: var(--nr-carmim); }
.cfg-gcampo input {
	padding: 8px 10px; border: 1px solid var(--nr-borda);
	border-radius: var(--nr-raio); font-size: 14px; background: var(--nr-superficie);
}
.cfg-acao-global { margin-top: 18px; }
@media (max-width: 700px) { .cfg-grid { grid-template-columns: 1fr; } }

/* ---------- Configuração: resumo read-only ---------- */
.cfg-resumo { margin: 0 0 8px; }
.cfg-resumo-topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.cfg-def { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; margin: 0; }
.cfg-def > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cfg-def dt { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--nr-texto-fraco); }
.cfg-def dd { margin: 0; font-size: 14px; color: var(--nr-texto); word-break: break-word; }
.cfg-def-destaque { font-size: 20px !important; font-weight: 700; color: var(--nr-petroleo) !important; }
.cfg-resumo-topo .bts2 { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (max-width: 640px) { .cfg-def { grid-template-columns: 1fr; } }

/* ---------- Configuração: histórico de valores por competência ---------- */
.cfg-historico { margin-top: 28px; border-top: 1px solid var(--nr-borda); padding-top: 20px; }
.cfg-hist-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.cfg-hist-topo .bts { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cfg-tabela .acao-btn + .acao-btn { margin-left: 5px; }
.cfg-titulo { font-size: 18px; font-weight: 700; color: var(--nr-texto); margin: 0 0 4px; }
.cfg-ajuda { font-size: 13px; color: var(--nr-texto-fraco); margin: 0 0 16px; max-width: 720px; line-height: 1.5; }
.cfg-vc-form {
	display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
	margin-bottom: 16px; background: var(--nr-fundo);
	border: 1px solid var(--nr-borda); border-radius: 12px; padding: 14px;
}
.cfg-campo { display: flex; flex-direction: column; gap: 5px; }
.cfg-campo .busca-rotulo { margin: 0; }
.cfg-campo input[type="text"], .cfg-campo input[type="number"], .cfg-campo select {
	padding: 8px 10px; border: 1px solid var(--nr-borda);
	border-radius: var(--nr-raio); font-size: 14px; background: var(--nr-superficie);
}
.cfg-campo input[type="number"] { width: 90px; }
.cfg-campo input[type="text"] { width: 130px; }
.cfg-campo-acao { justify-content: flex-end; }
.cfg-tabela { border-collapse: collapse; }
@media (max-width: 640px) {
	.cfg-vc-form { flex-direction: column; align-items: stretch; }
	.cfg-campo input[type="text"], .cfg-campo input[type="number"], .cfg-campo select { width: 100% !important; }
}

/* Rodapé da lista */
.deb-rodape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 16px;
}
.deb-rodape-resumo { font-size: 14px; color: var(--nr-texto-fraco); }
.deb-rodape-resumo strong { color: var(--nr-texto); }

@media (max-width: 640px) {
	.deb-filtros { flex-direction: column; align-items: stretch; }
	.deb-campo input[type="text"],
	.deb-campo input#q,
	.deb-campo select { min-width: 0; width: 100%; }
	.deb-campo-acoes { flex-direction: row; }
	.tabela-debito th:nth-child(2),
	.tabela-debito td:nth-child(2),
	.tabela-debito th:nth-child(3),
	.tabela-debito td:nth-child(3) { display: none; }
}