/* isaHub Associe Mais — estilos da dashboard (estilo CRM), formulários e
   relatórios. Paleta extraída da identidade visual da AJECI (logo/site):
   navy profundo + verde vivo. */

:root {
	--iam-navy-950: #0a0b22;
	--iam-navy-900: #11133a;
	--iam-azul: #0b1f4d;
	--iam-azul-claro: #eaf1ff;
	--iam-verde: #2f9e46;
	--iam-verde-vivo: #6bc62a;
	--iam-verde-suave: #e6f6e2;
	--iam-vermelho: #c0392b;
	--iam-vermelho-suave: #fde3e0;
	--iam-amarelo: #966a00;
	--iam-amarelo-suave: #fff4d9;
	--iam-laranja: #b35a09;
	--iam-laranja-suave: #ffe8d1;
	--iam-cinza: #55606e;
	--iam-cinza-suave: #eceff3;
	--iam-texto: #1c2430;
	--iam-texto-suave: #667085;
	--iam-borda: #e5e8ef;
	--iam-fundo: #eef1f7;
	--iam-fundo-card: #ffffff;
	--iam-radius: 14px;
	--iam-sombra: 0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
	--iam-fonte: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ------------------------------------------------------------------ *
 * Reset defensivo: neutraliza estilos herdados do tema/page builder
 * (Elementor/Hello ou qualquer outro) dentro da área do plugin. Temas
 * baseados em Elementor costumam aplicar cor de hover global a QUALQUER
 * link/botão da página (ex.: "a:hover{color:var(--e-global-color-accent)}")
 * — por isso, além de resetar tipografia/espaçamento, também travamos com
 * !important as cores e o hover dos nossos próprios elementos interativos
 * mais abaixo neste arquivo, pra não depender da ordem de carregamento
 * do CSS do tema.
 *
 * REGRA FIXA (pedido explícito do Jefferson, reforçado depois do card de
 * calendário da v1.7.26 ter "vazado" cor do tema): TODO `color`/`background`/
 * `border` que este arquivo define daqui pra frente, em QUALQUER elemento
 * novo dentro de `.iam-shell`/`.iam-dashboard`/`.iam-form` — span, p, h3,
 * pseudo-elemento (::before/::after), não só botão/link — precisa levar
 * `!important`. Não é só pros elementos interativos citados acima; é regra
 * geral do arquivo inteiro daqui em diante.
 * ------------------------------------------------------------------ */
.iam-shell,
.iam-shell *,
.iam-shell *::before,
.iam-shell *::after,
.iam-dashboard,
.iam-dashboard *,
.iam-form,
.iam-form *,
.iam-seletor-categoria,
.iam-seletor-categoria * {
	box-sizing: border-box;
}
.iam-shell h1, .iam-shell h2, .iam-shell h3, .iam-shell h4, .iam-shell h5, .iam-shell h6,
.iam-dashboard h1, .iam-dashboard h2, .iam-dashboard h3, .iam-dashboard h4,
.iam-form h1, .iam-form h2, .iam-form h3, .iam-form h4 {
	margin: 0;
	padding: 0;
	font-family: inherit;
	line-height: 1.25;
	color: inherit;
	font-weight: 700;
}
.iam-shell p, .iam-dashboard p, .iam-form p { margin: 0; }
.iam-shell a, .iam-dashboard a, .iam-form a,
.iam-shell a:hover, .iam-dashboard a:hover, .iam-form a:hover,
.iam-shell a:focus, .iam-dashboard a:focus, .iam-form a:focus,
.iam-shell a:active, .iam-dashboard a:active, .iam-form a:active {
	text-decoration: none;
	color: inherit;
	box-shadow: none;
	text-shadow: none;
	transition: none;
}
.iam-shell ul, .iam-shell ol, .iam-dashboard ul, .iam-dashboard ol { margin: 0; padding: 0; list-style: none; }
.iam-shell button, .iam-shell input, .iam-shell select, .iam-shell textarea,
.iam-form button, .iam-form input, .iam-form select, .iam-form textarea {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	text-shadow: none;
}
/* Checkbox/radio ficam de fora do reset acima: "appearance: none" sem
   nenhum visual customizado no lugar deixa a caixinha completamente
   invisível (só o texto do label aparece) — bug que já existia no
   "Lembrar-me" do login e apareceu de novo nos checkboxes do relatório
   simplificado. Aqui a caixinha nativa do navegador é mantida, só com o
   tamanho e a cor de destaque combinando com o resto do plugin. */
.iam-shell input[type="checkbox"], .iam-shell input[type="radio"],
.iam-form input[type="checkbox"], .iam-form input[type="radio"] {
	-webkit-appearance: auto;
	appearance: auto;
	width: 16px;
	height: 16px;
	accent-color: var(--iam-azul);
	cursor: pointer;
	flex-shrink: 0;
}
.iam-shell button:hover, .iam-shell button:focus,
.iam-form button:hover, .iam-form button:focus {
	box-shadow: none;
	text-shadow: none;
}
.iam-shell img, .iam-dashboard img, .iam-form img { max-width: 100%; }

.iam-shell, .iam-dashboard, .iam-form, .iam-seletor-categoria {
	font-family: var(--iam-fonte);
	color: var(--iam-texto);
}

/* ==================================================================== *
 * APP SHELL — layout estilo CRM (barra lateral + conteúdo)
 * Quebra o container do tema pra ocupar a largura toda da viewport,
 * como um painel de aplicação de verdade.
 * ==================================================================== */
.iam-shell {
	display: flex;
	align-items: stretch;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	min-height: 640px;
	background: var(--iam-fundo);
	position: relative;
}

.iam-sidebar {
	flex: 0 0 260px;
	width: 260px;
	background: var(--iam-navy-950) !important;
	color: #fff;
	display: flex;
	flex-direction: column;
	padding: 24px 18px;
	position: sticky;
	top: 0;
	align-self: flex-start;
	height: 100vh;
	min-height: 640px;
}

.iam-marca { padding: 6px 10px 22px; }
.iam-marca-nome { display: block; font-size: 1.3rem; font-weight: 800; letter-spacing: .04em; color: #fff !important; }
.iam-marca-sub { display: block; font-size: .72rem; font-weight: 600; color: var(--iam-verde-vivo) !important; text-transform: uppercase; letter-spacing: .12em; margin-top: 2px; }
.iam-marca-mini {
	display: none;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	background: var(--iam-verde-vivo) !important;
	color: var(--iam-navy-950) !important;
	font-weight: 800;
	font-size: .8rem;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

/* Logo personalizada (enviada em Configurações), no lugar do texto "AJECI" */
.iam-marca-com-logo { display: flex; align-items: center; justify-content: center; min-height: 40px; }
.iam-marca-logo { display: block; max-height: 40px; max-width: 100%; object-fit: contain; margin: 0 auto; }
.iam-sidebar.is-colapsada .iam-marca-logo { max-height: 30px; }

.iam-usuario-card {
	display: flex;
	align-items: center;
	gap: 10px;
	background: rgba(255,255,255,.06);
	border-radius: 12px;
	padding: 12px;
	margin: 0 4px 20px;
}
.iam-avatar {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--iam-verde-vivo) !important;
	color: var(--iam-navy-950) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: .82rem;
}
/* Quando o associado tem foto de perfil enviada, o avatar (ícone com
   iniciais) vira essa imagem — mesmo tamanho/formato redondo, só sem o
   fundo verde e com a foto preenchendo e cortando certinho (object-fit).
   border-radius/overflow repetidos aqui com !important (mesmo já vindo de
   `.iam-avatar`) porque temas baseados em Elementor costumam ter um reset
   global tipo "img { border-radius: 0 }", com mais especificidade que uma
   classe sozinha — sem isso a foto aparecia quadrada em vez de redonda. */
.iam-avatar-foto {
	background: none !important;
	object-fit: cover;
	display: block;
	border-radius: 50% !important;
	overflow: hidden;
}
.iam-usuario-info { display: flex; flex-direction: column; min-width: 0; }
.iam-usuario-info strong { font-size: .88rem; color: #fff !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.iam-usuario-info small { font-size: .74rem; color: rgba(255,255,255,.55) !important; }

.iam-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.iam-nav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border-radius: 10px;
	color: rgba(255,255,255,.72) !important;
	background: transparent !important;
	font-size: .88rem;
	font-weight: 600;
	border-left: 3px solid transparent;
	transition: background .15s ease, color .15s ease;
}
.iam-nav-icone { font-size: 1rem; line-height: 1; }
.iam-nav-item:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
.iam-nav-item.is-active { background: rgba(107,198,42,.14) !important; color: #fff !important; border-left-color: var(--iam-verde-vivo); }

.iam-nav-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.iam-sidebar-rodape { display: flex; flex-direction: column; gap: 2px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.iam-nav-sair:hover { background: rgba(192,57,43,.18) !important; color: #ff9d90 !important; }

/* Botão de recolher/expandir a barra lateral (fica fixo no rodapé dela) */
.iam-sidebar-colapsar {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	margin-top: 14px;
	padding: 0;
	width: 34px;
	height: 34px;
	border: none !important;
	border-radius: 9px;
	background: rgba(255,255,255,.08) !important;
	color: rgba(255,255,255,.75) !important;
	cursor: pointer;
	font-size: .95rem;
	align-self: flex-end;
	outline: none !important;
	box-shadow: none !important;
	-webkit-tap-highlight-color: transparent;
	transition: background .15s ease, color .15s ease;
}
.iam-sidebar-colapsar:hover,
.iam-sidebar-colapsar:focus,
.iam-sidebar-colapsar:focus-visible,
.iam-sidebar-colapsar:active {
	background: rgba(255,255,255,.16) !important;
	color: #fff !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}
.iam-colapsar-seta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	font-size: 1rem;
	transform: translateY(-1px);
}

/* ------------------------------------------------------------------ *
 * Barra lateral recolhida (só ícones) — funciona em qualquer largura de
 * tela; o botão no rodapé da barra lateral liga/desliga este estado.
 * ------------------------------------------------------------------ */
.iam-sidebar { transition: flex-basis .18s ease, width .18s ease; }

.iam-sidebar.is-colapsada { flex: 0 0 76px; width: 76px; padding-left: 10px; padding-right: 10px; }
.iam-sidebar.is-colapsada .iam-marca-nome,
.iam-sidebar.is-colapsada .iam-marca-sub { display: none; }
.iam-sidebar.is-colapsada .iam-marca-mini { display: flex; }
.iam-sidebar.is-colapsada .iam-marca { padding-bottom: 16px; }

.iam-sidebar.is-colapsada .iam-usuario-card { justify-content: center; padding: 10px 0; }
.iam-sidebar.is-colapsada .iam-usuario-info { display: none; }

.iam-sidebar.is-colapsada .iam-nav-item { justify-content: center; padding: 11px 0; }
.iam-sidebar.is-colapsada .iam-nav-texto { display: none; }

.iam-sidebar.is-colapsada .iam-sidebar-colapsar { align-self: center; }
.iam-sidebar.is-colapsada .iam-colapsar-seta { transform: rotate(180deg) translateY(1px); }

.iam-main {
	flex: 1;
	min-width: 0;
	padding: 28px 36px 56px;
}

.iam-topbar {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}
.iam-topbar-saudacao { font-size: .84rem; color: var(--iam-texto-suave) !important; margin-bottom: 2px; }
.iam-topbar-titulo { font-size: 1.5rem; color: var(--iam-texto) !important; }

.iam-painel { display: none; }
.iam-painel.is-visible { display: block; }

.iam-card {
	background: var(--iam-fundo-card);
	border: 1px solid var(--iam-borda);
	border-radius: var(--iam-radius);
	box-shadow: var(--iam-sombra);
	padding: 22px 24px;
	margin-bottom: 20px;
}

.iam-secao-titulo { font-size: 1rem; margin-bottom: 14px !important; color: var(--iam-azul) !important; }

/* Cards de estatística */
.iam-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.iam-stat-card { display: flex; flex-direction: column; gap: 4px; padding: 20px; margin-bottom: 0; }
.iam-stat-icone { font-size: 1.3rem; margin-bottom: 6px; }
.iam-stat-numero { font-size: 2rem; font-weight: 800; color: var(--iam-azul) !important; line-height: 1; }
.iam-stat-label { font-size: .82rem; color: var(--iam-texto-suave) !important; margin-top: 4px !important; }
.iam-stat-card-total { background: var(--iam-azul) !important; border-color: var(--iam-azul); }
.iam-stat-card-total .iam-stat-numero,
.iam-stat-card-total .iam-stat-label { color: #fff !important; }
@media (max-width: 1000px) { .iam-cards { grid-template-columns: repeat(2, 1fr); } }

/* Gráficos */
.iam-graficos { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }
.iam-grafico-container { margin-bottom: 0; }
.iam-grafico-area { min-height: 260px; position: relative; }
@media (max-width: 900px) { .iam-graficos { grid-template-columns: 1fr; } }

/* Card "Calendário" da Visão Geral (v1.7.26) — mini-calendário do mês com
   dias marcados (verde = evento, laranja = representação, na dashboard da
   diretoria) e um modal com os detalhes ao clicar. Largura travada (ao
   contrário dos outros cards, que esticam pra ocupar a coluna toda): sem
   isso, "width:100%" + "aspect-ratio:1/1" em 7 colunas dentro de um card
   larguíssimo faz cada dia virar um botão gigante (o número "13" de hoje,
   por exemplo, sobrando bem maior que uma célula de calendário de verdade). */
.iam-card-calendario { max-width: 420px; }
.iam-cal-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.iam-cal-cabecalho .iam-secao-titulo { margin-bottom: 0 !important; }
.iam-cal-nav { display: flex; align-items: center; gap: 10px; }
/* Setas de navegação, dias do grid e botões do modal são todos <button> de
   verdade (marcação semântica/acessibilidade) — exatamente o tipo de
   elemento que um tema baseado em Elementor costuma estilizar globalmente
   (inclusive borda/outline em :focus e :active, às vezes com !important
   também). Por isso, além do !important, essas regras são prefixadas com
   os 2 IDs fixos do card (#iam-cal-admin / #iam-cal-associado, ver
   render_card_calendario() em class-iam-dashboard.php) pra garantir
   especificidade maior que qualquer seletor genérico do tema. */
#iam-cal-admin .iam-cal-prev, #iam-cal-associado .iam-cal-prev,
#iam-cal-admin .iam-cal-next, #iam-cal-associado .iam-cal-next,
#iam-cal-admin .iam-cal-prev:hover, #iam-cal-associado .iam-cal-prev:hover,
#iam-cal-admin .iam-cal-next:hover, #iam-cal-associado .iam-cal-next:hover,
#iam-cal-admin .iam-cal-prev:focus, #iam-cal-associado .iam-cal-prev:focus,
#iam-cal-admin .iam-cal-next:focus, #iam-cal-associado .iam-cal-next:focus,
#iam-cal-admin .iam-cal-prev:focus-visible, #iam-cal-associado .iam-cal-prev:focus-visible,
#iam-cal-admin .iam-cal-next:focus-visible, #iam-cal-associado .iam-cal-next:focus-visible,
#iam-cal-admin .iam-cal-prev:active, #iam-cal-associado .iam-cal-prev:active,
#iam-cal-admin .iam-cal-next:active, #iam-cal-associado .iam-cal-next:active {
	all: unset;
	box-sizing: border-box;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--iam-borda) !important;
	border-radius: 50% !important;
	outline: none !important;
	box-shadow: none !important;
	color: var(--iam-azul) !important;
	background: transparent !important;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
}
#iam-cal-admin .iam-cal-prev:hover, #iam-cal-associado .iam-cal-prev:hover,
#iam-cal-admin .iam-cal-next:hover, #iam-cal-associado .iam-cal-next:hover { background: var(--iam-fundo) !important; }
.iam-cal-mes-ano { font-weight: 700; color: var(--iam-azul) !important; min-width: 130px; text-align: center; font-size: .9rem; }

.iam-cal-legenda { display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; }
.iam-cal-legenda-item { display: inline-flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--iam-texto-suave) !important; }
.iam-cal-legenda-cor { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.iam-cal-legenda-evento { background: var(--iam-verde-vivo) !important; }
.iam-cal-legenda-representacao { background: var(--iam-laranja) !important; }

.iam-cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 4px; }
.iam-cal-semana span { text-align: center; font-size: .68rem; text-transform: uppercase; color: var(--iam-texto-suave) !important; font-weight: 600; }

.iam-cal-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
#iam-cal-admin .iam-cal-dia, #iam-cal-associado .iam-cal-dia,
#iam-cal-admin .iam-cal-dia:hover, #iam-cal-associado .iam-cal-dia:hover,
#iam-cal-admin .iam-cal-dia:focus, #iam-cal-associado .iam-cal-dia:focus,
#iam-cal-admin .iam-cal-dia:focus-visible, #iam-cal-associado .iam-cal-dia:focus-visible,
#iam-cal-admin .iam-cal-dia:active, #iam-cal-associado .iam-cal-dia:active {
	all: unset;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	font-size: .8rem;
	font-family: inherit;
	color: var(--iam-texto) !important;
	background: transparent !important;
	border: 2px solid transparent !important;
	border-radius: 50% !important;
	outline: none !important;
	box-shadow: none !important;
	cursor: default;
	text-align: center;
}
.iam-cal-dia-vazio { visibility: hidden; }
#iam-cal-admin .iam-cal-dia-marcado, #iam-cal-associado .iam-cal-dia-marcado,
#iam-cal-admin .iam-cal-dia-marcado:focus, #iam-cal-associado .iam-cal-dia-marcado:focus,
#iam-cal-admin .iam-cal-dia-marcado:focus-visible, #iam-cal-associado .iam-cal-dia-marcado:focus-visible,
#iam-cal-admin .iam-cal-dia-marcado:active, #iam-cal-associado .iam-cal-dia-marcado:active { cursor: pointer; font-weight: 700; color: var(--iam-azul) !important; }
#iam-cal-admin .iam-cal-dia-marcado:hover, #iam-cal-associado .iam-cal-dia-marcado:hover,
#iam-cal-admin .iam-cal-dia-marcado:focus, #iam-cal-associado .iam-cal-dia-marcado:focus,
#iam-cal-admin .iam-cal-dia-marcado:focus-visible, #iam-cal-associado .iam-cal-dia-marcado:focus-visible,
#iam-cal-admin .iam-cal-dia-marcado:active, #iam-cal-associado .iam-cal-dia-marcado:active { background: var(--iam-fundo) !important; border-color: transparent !important; }
.iam-cal-dia-marcado::before, .iam-cal-dia-marcado::after {
	content: '';
	position: absolute;
	bottom: 4px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: transparent !important;
}
.iam-cal-tem-evento::before { background: var(--iam-verde-vivo) !important; left: calc(50% - 6px); }
.iam-cal-tem-representacao::after { background: var(--iam-laranja) !important; left: calc(50% + 1px); }
.iam-cal-tem-evento:not(.iam-cal-tem-representacao)::before { left: calc(50% - 2.5px); }
.iam-cal-tem-representacao:not(.iam-cal-tem-evento)::after { left: calc(50% - 2.5px); }
#iam-cal-admin .iam-cal-dia-hoje, #iam-cal-associado .iam-cal-dia-hoje,
#iam-cal-admin .iam-cal-dia-hoje:hover, #iam-cal-associado .iam-cal-dia-hoje:hover,
#iam-cal-admin .iam-cal-dia-hoje:focus, #iam-cal-associado .iam-cal-dia-hoje:focus,
#iam-cal-admin .iam-cal-dia-hoje:focus-visible, #iam-cal-associado .iam-cal-dia-hoje:focus-visible,
#iam-cal-admin .iam-cal-dia-hoje:active, #iam-cal-associado .iam-cal-dia-hoje:active {
	background: var(--iam-azul) !important;
	color: #fff !important;
	border-color: var(--iam-azul) !important;
	outline: none !important;
	box-shadow: none !important;
}

.iam-cal-vazio-aviso { color: var(--iam-texto-suave) !important; font-size: .85rem; text-align: center; margin: 14px 0 0 !important; }

.iam-cal-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(10, 11, 34, .55) !important;
	z-index: 10000;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.iam-cal-modal-overlay.is-aberto { display: flex; }
.iam-cal-modal {
	background: var(--iam-fundo-card) !important;
	border-radius: var(--iam-radius);
	max-width: 440px;
	width: 100%;
	max-height: 85vh;
	overflow-y: auto;
	padding: 26px 24px;
	position: relative;
	box-shadow: 0 12px 40px rgba(10, 11, 34, .3);
}
#iam-cal-admin .iam-cal-modal-fechar, #iam-cal-associado .iam-cal-modal-fechar,
#iam-cal-admin .iam-cal-modal-fechar:hover, #iam-cal-associado .iam-cal-modal-fechar:hover,
#iam-cal-admin .iam-cal-modal-fechar:focus, #iam-cal-associado .iam-cal-modal-fechar:focus,
#iam-cal-admin .iam-cal-modal-fechar:focus-visible, #iam-cal-associado .iam-cal-modal-fechar:focus-visible,
#iam-cal-admin .iam-cal-modal-fechar:active, #iam-cal-associado .iam-cal-modal-fechar:active {
	all: unset;
	position: absolute;
	top: 12px;
	right: 14px;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	color: var(--iam-texto-suave) !important;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}
#iam-cal-admin .iam-cal-modal-fechar:hover, #iam-cal-associado .iam-cal-modal-fechar:hover { color: var(--iam-texto) !important; }
#iam-cal-admin .iam-cal-modal-voltar, #iam-cal-associado .iam-cal-modal-voltar,
#iam-cal-admin .iam-cal-modal-voltar:hover, #iam-cal-associado .iam-cal-modal-voltar:hover,
#iam-cal-admin .iam-cal-modal-voltar:focus, #iam-cal-associado .iam-cal-modal-voltar:focus,
#iam-cal-admin .iam-cal-modal-voltar:focus-visible, #iam-cal-associado .iam-cal-modal-voltar:focus-visible,
#iam-cal-admin .iam-cal-modal-voltar:active, #iam-cal-associado .iam-cal-modal-voltar:active {
	all: unset;
	display: inline-block;
	margin-bottom: 12px;
	color: var(--iam-azul) !important;
	cursor: pointer;
	font-size: .85rem;
	font-weight: 600;
	background: transparent !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}
#iam-cal-admin .iam-cal-modal-voltar:hover, #iam-cal-associado .iam-cal-modal-voltar:hover { text-decoration: underline; }
.iam-cal-modal-imagem { width: 100%; border-radius: 10px; margin-bottom: 14px; display: block; }
.iam-cal-modal-conteudo h3 { margin: 6px 0 10px; color: var(--iam-azul) !important; }
.iam-cal-modal-conteudo p { margin: 6px 0; font-size: .9rem; color: var(--iam-texto) !important; }
.iam-cal-modal-conteudo strong { color: var(--iam-azul) !important; }
.iam-cal-tipo-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 30px;
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.iam-cal-tipo-pill-evento { background: var(--iam-verde-suave) !important; color: var(--iam-verde) !important; }
.iam-cal-tipo-pill-representacao { background: var(--iam-laranja-suave) !important; color: var(--iam-laranja) !important; }
.iam-cal-modal-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.iam-cal-btn-inscricao, .iam-cal-btn-info {
	display: inline-block;
	padding: 9px 18px;
	border-radius: 30px;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}
.iam-cal-btn-inscricao { background: var(--iam-verde-vivo) !important; color: #0a0b22 !important; }
.iam-cal-btn-info { background: transparent !important; color: var(--iam-azul) !important; border: 1px solid var(--iam-borda) !important; }

.iam-cal-lista-itens { display: flex; flex-direction: column; gap: 8px; }
#iam-cal-admin .iam-cal-item-linha, #iam-cal-associado .iam-cal-item-linha,
#iam-cal-admin .iam-cal-item-linha:hover, #iam-cal-associado .iam-cal-item-linha:hover,
#iam-cal-admin .iam-cal-item-linha:focus, #iam-cal-associado .iam-cal-item-linha:focus,
#iam-cal-admin .iam-cal-item-linha:focus-visible, #iam-cal-associado .iam-cal-item-linha:focus-visible,
#iam-cal-admin .iam-cal-item-linha:active, #iam-cal-associado .iam-cal-item-linha:active {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--iam-borda) !important;
	border-radius: 10px !important;
	outline: none !important;
	box-shadow: none !important;
	background: transparent !important;
	cursor: pointer;
	width: 100%;
}
#iam-cal-admin .iam-cal-item-linha:hover, #iam-cal-associado .iam-cal-item-linha:hover { background: var(--iam-fundo) !important; }
.iam-cal-item-titulo { flex: 1; font-size: .88rem; color: var(--iam-texto) !important; font-weight: 600; }
.iam-cal-item-horario { font-size: .78rem; color: var(--iam-texto-suave) !important; }

/* Filtros e tabela */
.iam-filtros form { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; }
.iam-filtros .iam-campo { flex: 1; min-width: 160px; margin: 0; }
.iam-filtros-acoes { display: flex; gap: 10px; align-items: center; }

.iam-exibindo { color: var(--iam-texto-suave) !important; font-size: .85rem; margin: 4px 0 10px !important; }

.iam-tabela-wrap { overflow-x: auto; padding: 0; }
/* table-layout:fixed + colgroup com larguras proporcionais: cada coluna tem
   uma largura previsível, então nunca precisa nem quebrar linha dentro da
   célula (o que deixava a altura de cada linha "capenga") nem estourar pro
   lado forçando rolagem horizontal pra ver a coluna de Ações. Texto que não
   cabe (nome muito longo, categoria) trunca com "..." — passe o mouse pra
   ver o texto completo (atributo title). */
/* min-width (v1.7.44): sem isso, "table-layout:fixed" com colunas em % deixa
   a tabela sempre exatamente do tamanho do cartão — numa tela de celular
   isso faz cada coluna encolher proporcionalmente até virar "D...",
   "REUNI...", "CATEG..." etc., completamente ilegível. Com um mínimo
   garantido, a tabela passa a ficar mais larga que o celular, e o
   overflow-x:auto que o .iam-tabela-wrap já tinha (mas nunca chegava a
   entrar em ação) passa a valer: dá pra arrastar de lado pra ver o resto. */
table.iam-tabela { width: 100%; min-width: 640px; border-collapse: collapse; table-layout: fixed; }
.iam-col-associado { width: 26%; }
.iam-col-categoria { width: 27%; }
.iam-col-data { width: 15%; }
.iam-col-situacao { width: 16%; }
.iam-col-acoes { width: 16%; }
table.iam-tabela th {
	background: var(--iam-navy-950) !important;
	color: #fff !important;
	text-align: left;
	padding: 13px 20px;
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
table.iam-tabela th:first-child { border-top-left-radius: var(--iam-radius); }
table.iam-tabela th:last-child { border-top-right-radius: var(--iam-radius); }
table.iam-tabela td {
	padding: 13px 20px;
	border-top: 1px solid var(--iam-borda);
	font-size: .85rem;
	color: var(--iam-texto) !important;
	background: var(--iam-fundo-card) !important;
	white-space: nowrap;
	vertical-align: middle;
}
table.iam-tabela tr:hover td { background: #f7f9fc !important; }
/* Só estas colunas podem ter texto mais longo que a largura reservada —
   truncam com reticências em vez de espremer a coluna ou quebrar linha. */
table.iam-tabela td.iam-celula-truncar { overflow: hidden; text-overflow: ellipsis; }
.iam-celula-associado { display: flex; align-items: center; gap: 10px; min-width: 0; }
.iam-celula-associado-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; text-transform: uppercase; }
.iam-avatar-tabela { width: 30px; height: 30px; font-size: .7rem; background: var(--iam-azul-claro) !important; color: var(--iam-azul) !important; flex-shrink: 0; }
.iam-acoes-tabela { display: flex; gap: 14px; align-items: center; }
.iam-acoes-tabela a { color: var(--iam-azul) !important; font-weight: 700; font-size: .82rem; }
.iam-acoes-tabela a:hover { text-decoration: underline; color: var(--iam-azul) !important; }
.iam-acoes-tabela .iam-form-excluir { margin: 0; }

.iam-status-badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; background: #eee; }
/* Slugs gerados via sanitize_title() a partir dos valores reais gravados no
   usermeta `_status` (idênticos aos do glossário JetEngine em produção). */
.iam-status-regular { background: var(--iam-verde-suave) !important; color: var(--iam-verde) !important; }
.iam-status-em-analise { background: var(--iam-amarelo-suave) !important; color: var(--iam-amarelo) !important; }
.iam-status-com-pendencias { background: var(--iam-laranja-suave) !important; color: var(--iam-laranja) !important; }
.iam-status-desatualizado { background: var(--iam-cinza-suave) !important; color: var(--iam-cinza) !important; }
.iam-status-reprovado { background: var(--iam-vermelho-suave) !important; color: var(--iam-vermelho) !important; }
.iam-status-cancelado-a-pedido-do-usuario { background: var(--iam-cinza-suave) !important; color: var(--iam-cinza) !important; }
.iam-status-cancelado-pela-ajeci { background: var(--iam-cinza-suave) !important; color: var(--iam-cinza) !important; }

.iam-paginacao { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 20px 0 0; }
.iam-paginacao a { padding: 6px 12px; border-radius: 8px; border: 1px solid var(--iam-borda); color: var(--iam-texto) !important; background: #fff !important; }
.iam-paginacao a:hover { color: var(--iam-azul) !important; }
.iam-paginacao a.iam-pagina-atual { background: var(--iam-azul) !important; color: #fff !important; border-color: var(--iam-azul); }
.iam-paginacao a.iam-pagina-seta { font-weight: 700; }
.iam-pagina-reticencias { padding: 6px 4px; color: var(--iam-texto-suave); }

/* Perfil (ver associado / minha conta) */
.iam-voltar { margin-bottom: 14px !important; }
.iam-voltar a { color: var(--iam-azul) !important; font-weight: 700; font-size: .88rem; }
.iam-voltar a:hover { color: var(--iam-azul) !important; text-decoration: underline; }
.iam-perfil-cabecalho { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.iam-avatar-grande { width: 56px; height: 56px; font-size: 1.1rem; }
.iam-perfil-cabecalho h3 { margin-bottom: 6px !important; }
.iam-perfil-resumo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 24px; }
@media (max-width: 700px) { .iam-perfil-resumo { grid-template-columns: 1fr; } }
.iam-linha-perfil { padding: 8px 0; border-bottom: 1px solid var(--iam-borda); font-size: .9rem; }
.iam-acoes-perfil { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.iam-form-excluir { margin-top: 6px; }
.iam-arquivo-atual { display: block; font-size: .8rem; color: var(--iam-texto-suave) !important; margin-bottom: 4px; }

/* Botões — !important pra não depender da cor de hover global que temas
   baseados em Elementor costumam aplicar a qualquer link/botão da página. */
.iam-btn {
	display: inline-block;
	padding: 10px 18px;
	background: var(--iam-azul) !important;
	color: #fff !important;
	font-weight: 600;
	border: none !important;
	border-radius: 10px;
	text-decoration: none;
	cursor: pointer;
	font-size: .88rem;
	transition: background .2s ease, transform .1s ease;
}
.iam-btn:hover, .iam-btn:focus { background: #16326e !important; color: #fff !important; transform: translateY(-1px); }
.iam-btn-primary { background: var(--iam-verde) !important; }
.iam-btn-primary:hover, .iam-btn-primary:focus { background: #257c37 !important; color: #fff !important; }
.iam-btn-perigo { background: var(--iam-vermelho) !important; }
.iam-btn-perigo:hover, .iam-btn-perigo:focus { background: #a53225 !important; color: #fff !important; }
.iam-btn-categoria { display: block; margin-bottom: 10px; text-align: center; }

/* Manual de Instruções (v1.7.45) — cada tópico é um <details> nativo do
   HTML, sem precisar de nenhum JavaScript novo pra abrir/fechar. */
.iam-manual-intro { margin: 0 0 18px !important; color: var(--iam-texto-suave) !important; font-size: .9rem; }
.iam-manual-secao { border-top: 1px solid var(--iam-borda); }
.iam-manual-secao:first-of-type { border-top: none; }
.iam-manual-secao summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 4px;
	font-weight: 700;
	font-size: 1rem;
	color: var(--iam-azul) !important;
}
.iam-manual-secao summary::-webkit-details-marker { display: none; }
.iam-manual-secao summary::marker { content: ''; }
.iam-manual-secao summary:focus-visible { outline: 2px solid var(--iam-azul) !important; outline-offset: 2px; }
.iam-manual-seta { display: inline-block; transition: transform .15s ease; color: var(--iam-texto-suave) !important; font-size: .8rem; }
.iam-manual-secao[open] .iam-manual-seta { transform: rotate(90deg); }
.iam-manual-conteudo { padding: 0 4px 20px 30px; }
.iam-manual-conteudo h4 { margin: 14px 0 6px !important; font-size: .9rem; color: var(--iam-texto) !important; }
.iam-manual-conteudo h4:first-child { margin-top: 0 !important; }
.iam-manual-conteudo ol, .iam-manual-conteudo ul { margin: 0 0 10px !important; padding-left: 20px; }
.iam-manual-conteudo li { margin-bottom: 5px; font-size: .88rem; color: var(--iam-texto) !important; }
.iam-manual-conteudo p { margin: 0 0 10px !important; font-size: .88rem; color: var(--iam-texto-suave) !important; }
.iam-manual-conteudo strong { color: var(--iam-texto) !important; }

/* Relatórios */
.iam-relatorios { }
.iam-secao-subtitulo { margin: -8px 0 18px !important; font-size: .84rem; color: var(--iam-texto-suave) !important; font-weight: 400; }
.iam-relatorios-titulo-analises { margin: 4px 0 14px !important; }
.iam-form-relatorio { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; margin-bottom: 0; }
.iam-form-relatorio .iam-campo { margin: 0; min-width: 150px; }
/* As opções (checkboxes) do relatório simplificado ficam numa linha própria,
   abaixo dos selects e acima do botão — sem isso, elas ficavam espremidas
   ao lado da Categoria/Situação na mesma linha do flex-wrap. */
.iam-form-relatorio .iam-campo-checkboxes {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 4px 0 2px;
}
.iam-form-relatorio .iam-campo-checkboxes label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: .85rem;
	color: var(--iam-texto) !important;
	white-space: nowrap;
}
.iam-relatorio-resumos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .iam-relatorio-resumos { grid-template-columns: 1fr; } }
.iam-resumo-card { border: 1px solid var(--iam-borda); border-radius: 12px; padding: 18px 18px 14px; margin-bottom: 0; box-shadow: none; }
.iam-resumo-card h4 { margin: 0 0 12px !important; font-size: .92rem; }
.iam-resumo-sub { color: var(--iam-texto-suave) !important; font-weight: 400; font-size: .76rem; }
.iam-grafico-area-relatorio { min-height: 300px; position: relative; }
.iam-resumo-vazio { color: var(--iam-texto-suave) !important; font-size: .84rem; margin: 0 !important; padding: 20px 0; text-align: center; }

/* Configurações (identidade visual: logo, cores, fonte) */
.iam-campo-logo { max-width: 420px; }
.iam-logo-preview {
	display: inline-block;
	background: var(--iam-fundo);
	border: 1px solid var(--iam-borda);
	border-radius: 10px;
	padding: 10px 16px;
	margin-bottom: 8px;
}
.iam-logo-preview img { max-height: 44px; max-width: 220px; object-fit: contain; display: block; }
.iam-config-cores { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px 20px; margin-bottom: 4px; }
.iam-config-cores .iam-campo input[type="color"] {
	padding: 3px;
	height: 42px;
	width: 100%;
	max-width: 200px;
	cursor: pointer;
}
.iam-form-restaurar { margin-top: 14px; }

/* ==================================================================== *
 * Formulários públicos (cadastro / login / edição) e tela de login
 * embutida na dashboard — mantêm cartão centralizado, fora do app shell.
 * ==================================================================== */
.iam-dashboard-login, .iam-seletor-categoria {
	max-width: 480px;
	margin: 40px auto;
	background: var(--iam-fundo-card);
	border: 1px solid var(--iam-borda);
	border-radius: var(--iam-radius);
	box-shadow: var(--iam-sombra);
	padding: 32px;
	text-align: center;
}
.iam-categorias-lista { max-width: 420px; margin: 0 auto; }

/* [isahub_cadastro_com_crea] / [isahub_cadastro_sem_crea] / [isahub_cadastro_estudante]:
   acordeon — só um botão "Quero ser associado", sem título nem nome da
   categoria; o formulário completo mora escondido logo abaixo e se expande
   suavemente pra baixo no clique (sem recarregar a página — ver
   iam-forms.js, que usa slideDown). Sem JavaScript, o formulário fica
   visível por padrão, como saída de segurança. */
.iam-cadastro-acordeon { max-width: 640px; margin: 32px auto; text-align: center; }
.iam-cadastro-acordeon .iam-btn-abrir-cadastro { min-width: 240px; }
.iam-cadastro-acordeon.is-aberto .iam-btn-abrir-cadastro { display: none; }
.iam-form-colapsavel { max-width: 640px; margin: 20px auto 0; text-align: left; }

.iam-form { background: var(--iam-fundo-card); border: 1px solid var(--iam-borda); border-radius: var(--iam-radius); box-shadow: var(--iam-sombra); padding: 28px; }
.iam-form fieldset { border: none; padding: 0; margin: 0 0 20px; }
.iam-form legend { font-weight: 700; font-size: 1.05rem; margin-bottom: 12px; color: var(--iam-azul) !important; }
.iam-etapa-contagem { font-weight: 400; font-size: .78rem; color: var(--iam-texto-suave) !important; margin-left: 8px; }
.iam-form-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 4px; }
.iam-btn-anterior { background: var(--iam-cinza, #55606e) !important; }
.iam-btn-anterior:hover, .iam-btn-anterior:focus { background: #434c58 !important; color: #fff !important; }
/* Botão "Limpar filtro" (v1.7.30): estilo "fantasma" (sem preenchimento),
   pra não competir visualmente com o "Filtrar" (que é a ação primária). */
.iam-btn-limpar-filtro {
	background: transparent !important;
	color: var(--iam-texto-suave) !important;
	border: 1px solid var(--iam-borda) !important;
}
.iam-btn-limpar-filtro:hover, .iam-btn-limpar-filtro:focus {
	background: var(--iam-fundo) !important;
	color: var(--iam-texto) !important;
}
.iam-campo { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.iam-campo label { font-weight: 600; font-size: .85rem; color: var(--iam-texto) !important; }
.iam-campo input[type="text"],
.iam-campo input[type="email"],
.iam-campo input[type="password"],
.iam-campo input[type="date"],
.iam-campo input[type="time"],
.iam-campo input[type="url"],
.iam-campo input[type="file"],
.iam-campo select,
.iam-campo textarea {
	padding: 10px 12px;
	border: 1px solid var(--iam-borda) !important;
	border-radius: 8px;
	font-size: .92rem;
	background: #fff !important;
	color: var(--iam-texto) !important;
}
.iam-campo input:focus, .iam-campo select:focus, .iam-campo textarea:focus {
	outline: none;
	border-color: var(--iam-azul) !important;
	box-shadow: 0 0 0 3px var(--iam-azul-claro) !important;
}
.iam-campo textarea { min-height: 90px; resize: vertical; }

/* 1.7.51 — print do Jefferson (WhatsApp): nos 3 formulários de cadastro,
   no celular (Safari/iOS), o campo "Foto de perfil" (input type="file")
   estourava a largura da tela inteira, cortando o resto do formulário —
   o botão "Próxima Etapa" e as bordas do cartão ficavam invisíveis fora
   da tela, sem aparecer nenhuma barra de rolagem (o `overflow-x:hidden`
   do body, v1.7.44, só escondia o excesso, não evitava ele acontecer). A
   causa: input[type="file"] é o único campo com conteúdo nativo do
   sistema operacional (o texto do botão + "nenhum arquivo selecionado")
   que o Safari NUNCA encolhe pra caber no `width` do CSS — ele mantém a
   largura "natural" desse conteúdo, e, sendo item de um flex column
   (.iam-campo), essa largura mínima automática (min-width:auto, padrão
   de qualquer item flex) empurra o campo — e com ele o formulário
   inteiro — pra além da tela. Não reproduz no Chrome/Chromium (desktop
   ou Android), só no motor do Safari — por isso nunca tinha aparecido
   nos testes anteriores. Corrigido travando esse campo a nunca exceder
   a largura do próprio formulário, não importa o que o navegador queira
   desenhar por dentro dele. */
.iam-campo input[type="file"] {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow: hidden;
}

/* 1.7.52 — link "👁 Visualizar arquivo selecionado" (ver
   iam-forms.js), inserido logo depois de qualquer input[type="file"]
   assim que a pessoa escolhe um arquivo. */
.iam-link-visualizar-anexo {
	display: inline-block;
	margin-top: 6px;
	font-size: .82rem;
	font-weight: 600;
	color: var(--iam-azul) !important;
	text-decoration: underline !important;
}
.iam-link-visualizar-anexo:hover, .iam-link-visualizar-anexo:focus {
	color: var(--iam-verde) !important;
}

/* Visualizador de senha (👁) — botão inserido pelo JS (ver
   adicionarVisualizadorSenha() em iam-forms.js) dentro de um wrapper que
   este CSS torna relativo, pra posicionar o botão dentro do próprio campo
   (canto direito), em vez de ao lado dele — funciona em qualquer campo de
   senha do plugin (login, cadastro, redefinir senha, editar cadastro), sem
   precisar de uma classe própria por formulário. */
.iam-campo-senha-wrap { position: relative; display: block; }
.iam-campo-senha-wrap input[type="password"],
.iam-campo-senha-wrap input[type="text"] { width: 100%; padding-right: 42px; }
.iam-toggle-senha {
	position: absolute;
	top: 50%;
	right: 2px;
	transform: translateY(-50%);
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 8px 10px;
	margin: 0;
	cursor: pointer;
	font-size: 1.05rem;
	line-height: 1;
	color: var(--iam-texto-suave) !important;
}
.iam-toggle-senha:hover, .iam-toggle-senha:focus, .iam-toggle-senha:focus-visible {
	color: var(--iam-azul) !important;
	outline: none !important;
}

.iam-campo-cor input[type="color"] { padding: 3px; height: 42px; width: 90px; cursor: pointer; }
.iam-aviso-vazio { color: var(--iam-texto-suave) !important; font-size: .88rem; margin: 0 0 16px !important; }
.iam-link-perigo { background: none !important; border: none !important; padding: 0 !important; color: var(--iam-vermelho) !important; font-weight: 700; font-size: .82rem; cursor: pointer; text-decoration: none; }
.iam-link-perigo:hover { text-decoration: underline; }

/* Telas de login / "Esqueci minha senha" / "Redefinir senha" — as 3
   dividem a mesma classe .iam-form-login (ver
   IAM_Registration::shortcode_login(), v1.7.35). */
.iam-form-login h3 { margin: 0 0 16px !important; font-size: 1.1rem; color: var(--iam-azul) !important; }
.iam-login-esqueci-senha { margin: -8px 0 16px !important; text-align: right; }
.iam-login-esqueci-senha a,
.iam-login-voltar a {
	color: var(--iam-azul) !important;
	font-weight: 600;
	font-size: .85rem;
	text-decoration: underline !important;
}
.iam-login-voltar { margin: 16px 0 0 !important; text-align: center; }

/* Categorias de evento (aba "Eventos") */
.iam-lista-categorias { list-style: none; margin: 0 0 20px !important; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.iam-categoria-chip { display: flex; align-items: center; gap: 8px; background: var(--iam-fundo) !important; border: 1px solid var(--iam-borda); border-radius: 999px; padding: 6px 8px 6px 12px; font-size: .82rem; }
.iam-categoria-cor { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.iam-categoria-nome { font-weight: 600; color: var(--iam-texto) !important; }
.iam-categoria-contagem { color: var(--iam-texto-suave) !important; }
.iam-categoria-excluir { margin: 0; }
.iam-categoria-btn-excluir { background: none !important; border: none !important; padding: 0 4px !important; color: var(--iam-texto-suave) !important; cursor: pointer; font-size: 1rem; line-height: 1; }
.iam-categoria-btn-excluir:hover { color: var(--iam-vermelho) !important; }
.iam-form-categoria-evento { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; padding: 0; background: none !important; border: none !important; box-shadow: none !important; }
.iam-form-categoria-evento .iam-campo { margin: 0; }
.iam-form-categoria-evento .iam-campo:first-child { flex: 1; min-width: 220px; }
.iam-desc { font-size: .76rem; color: var(--iam-texto-suave) !important; }
.iam-campo-checkbox { flex-direction: row; align-items: center; }

/* "Mensagens prontas" (modelos de e-mail editáveis, aba Configurações) —
   cada modelo vira um <details> pra não deixar a tela gigante com os 4
   assunto+corpo abertos ao mesmo tempo. */
.iam-secao-titulo-menor { font-size: .88rem; margin: 8px 0 4px !important; }
.iam-modelo-email { border: 1px solid var(--iam-borda) !important; border-radius: 8px; padding: 10px 14px; margin-bottom: 10px; background: #fff !important; }
.iam-modelo-email summary { cursor: pointer; font-weight: 600; font-size: .88rem; color: var(--iam-texto) !important; }
.iam-modelo-email[open] summary { margin-bottom: 8px; }
.iam-modelo-email-quando { margin: 2px 0 12px !important; }
.iam-modelo-email code { background: var(--iam-azul-claro) !important; color: var(--iam-azul) !important; padding: 1px 5px; border-radius: 4px; font-size: .82em; }

.iam-erro { background: var(--iam-vermelho-suave) !important; color: var(--iam-vermelho) !important; padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: .88rem; }
.iam-sucesso { background: var(--iam-verde-suave) !important; color: var(--iam-verde) !important; padding: 20px; border-radius: var(--iam-radius); text-align: center; }

/* Visão Geral do associado (v1.7.17): cartão de boas-vindas (reaproveita
   .iam-perfil-cabecalho/.iam-avatar-grande, já usados na tela de "Ver
   Cadastro" do admin) + situação cadastral em destaque + atalhos. */
.iam-boas-vindas-subtitulo { color: var(--iam-texto-suave) !important; font-size: .9rem; }
.iam-status-destaque { text-align: left; }
.iam-status-destaque-rotulo { display: block; font-size: .78rem; color: var(--iam-texto-suave) !important; margin-bottom: 10px; text-transform: uppercase; letter-spacing: .04em; }
.iam-status-badge-grande { font-size: 1rem; padding: 8px 22px; }
.iam-status-observacao { margin: 16px 0 0 !important; padding: 12px 14px; border-radius: 8px; background: var(--iam-azul-claro) !important; color: var(--iam-texto) !important; font-size: .88rem; text-align: left; }
.iam-atalhos-lista { display: flex; gap: 10px; flex-wrap: wrap; }
.iam-aviso { background: var(--iam-azul-claro) !important; padding: 16px; border-radius: 12px; }

/* ==================================================================== *
 * Colaboradores (item 2.14) — aba de Configurações que cadastra
 * funcionários com acesso parcial à dashboard.
 * ==================================================================== */
.iam-colab-permissoes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.iam-colab-permissoes label { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 400; }
.iam-colab-badge { display: inline-block; background: var(--iam-azul-claro) !important; color: var(--iam-azul) !important; font-size: .74rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; margin: 2px 4px 2px 0; white-space: nowrap; }
.iam-colab-badge-wordpress { background: var(--iam-vermelho-suave) !important; color: var(--iam-vermelho) !important; }
.iam-colab-sem-acesso { color: var(--iam-texto-suave) !important; font-size: .82rem; font-style: italic; }
.iam-colab-wordpress-aviso { margin-top: 14px; padding: 12px 14px; border-radius: 8px; background: var(--iam-vermelho-suave) !important; }
.iam-colab-wordpress-aviso label { display: flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 700; color: var(--iam-vermelho) !important; }
.iam-colab-wordpress-aviso-texto { margin: 6px 0 0 !important; font-size: .82rem; color: var(--iam-texto) !important; }
.iam-form-inline { display: inline; margin: 0 !important; }
.iam-link-botao { background: none !important; border: none !important; padding: 0 !important; margin: 0; color: var(--iam-azul) !important; font-weight: 700; font-size: .82rem; cursor: pointer; text-decoration: none; font-family: inherit; }
.iam-link-botao:hover { text-decoration: underline; }
.iam-link-botao-excluir { color: var(--iam-vermelho) !important; }

/* Item 2.10 — Mensagem automática de aniversário. */
.iam-aniversario-toggle { padding: 12px 14px; border-radius: 8px; background: var(--iam-cinza-claro, #f3f4f8) !important; margin-bottom: 6px; }
.iam-aniversario-toggle label { display: flex; align-items: center; gap: 8px; font-size: .9rem; font-weight: 700; color: var(--iam-texto) !important; }
.iam-form-testar-aniversario { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.iam-form-testar-aniversario .iam-desc { margin: 0 !important; }

/* Card "Aniversariantes do mês" (Visão Geral), ao lado do Calendário —
   mesma largura travada do card de calendário, os dois lado a lado numa
   linha própria (ver .iam-cards-calendario-aniversario). */
.iam-cards-calendario-aniversario { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; margin-bottom: 20px; }
.iam-cards-calendario-aniversario .iam-card-calendario,
.iam-card-aniversariantes { margin-bottom: 0; flex: 1 1 380px; max-width: 420px; }
.iam-lista-aniversariantes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; max-height: 300px; overflow-y: auto; }
.iam-lista-aniversariantes li { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--iam-borda, #e5e7eb); font-size: .88rem; }
.iam-lista-aniversariantes li:last-child { border-bottom: none; }
.iam-aniversariante-dia { font-weight: 800; color: var(--iam-azul) !important; min-width: 24px; }
.iam-aniversariante-nome { color: var(--iam-texto) !important; }
@media (max-width: 640px) { .iam-cards-calendario-aniversario { flex-direction: column; } .iam-card-calendario, .iam-card-aniversariantes { max-width: 100%; width: 100%; } }

/* ==================================================================== *
 * Menu mobile (botão "☰" na topbar + fundo escurecido) — só existe/aparece
 * em telas estreitas (ver media query abaixo); nas telas largas a barra
 * lateral já fica sempre visível (com o botão de recolher/expandir de
 * sempre), então este botão e o fundo nem chegam a aparecer.
 * ==================================================================== */
.iam-topbar-cabecalho { display: flex; align-items: center; gap: 12px; }
.iam-menu-mobile {
	display: none !important;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 42px;
	height: 42px;
	padding: 0;
	border: none !important;
	border-radius: 10px;
	background: var(--iam-fundo-card) !important;
	color: var(--iam-azul) !important;
	box-shadow: var(--iam-sombra);
	cursor: pointer;
	font-size: 1.15rem;
	outline: none !important;
	-webkit-tap-highlight-color: transparent;
}
.iam-menu-mobile:hover,
.iam-menu-mobile:focus,
.iam-menu-mobile:focus-visible,
.iam-menu-mobile:active {
	color: var(--iam-azul) !important;
	background: var(--iam-fundo-card) !important;
	border: none !important;
	outline: none !important;
	box-shadow: var(--iam-sombra);
}
.iam-menu-mobile-icone { display: inline-flex; line-height: 1; }

.iam-sidebar-backdrop {
	display: none !important;
	position: fixed;
	inset: 0;
	background: rgba(10, 11, 34, .55);
	z-index: 1000;
}
.iam-sidebar-backdrop.is-visivel { display: block !important; }

/* ==================================================================== *
 * Responsivo — em telas estreitas, a barra lateral some por completo
 * (ganhando espaço em tela) e vira uma "gaveta": some, e um botão "☰" no
 * topo abre ela por inteiro (nunca só o modo recolhido/ícones — esse modo
 * continua existindo só nas telas largas), sobrepondo o conteúdo com um
 * fundo escurecido atrás pra fechar ao tocar fora.
 * ==================================================================== */
@media (max-width: 900px) {
	/* v1.7.44: o corte de overflow-x era no .iam-shell antes, mas isso o
	   transforma num "contêiner de rolagem" aos olhos do CSS (mesmo só
	   cortando o eixo X) — e é exatamente o ancestral mais próximo que o
	   "position:sticky" da topbar (logo abaixo) usa como referência. Como o
	   .iam-shell nunca rola de verdade sozinho (ele cresce junto com o
	   conteúdo, quem rola é a página), o resultado prático era a topbar
	   simplesmente não grudar em lugar nenhum. Botando o corte no body (que
	   já é o elemento que realmente rola) resolve os dois: mantém a proteção
	   contra rolagem horizontal E deixa a topbar grudar na tela de verdade. */
	body { overflow-x: hidden; }
	.iam-main { padding: 20px 16px 40px; }
	/* Topbar fixa no topo (v1.7.44): em páginas compridas (ex.: Configurações,
	   com vários campos), sem isso o botão "☰" ficava só lá em cima — rolar a
	   página escondia ele, obrigando a voltar ao topo pra trocar de aba. Fixa
	   aqui, ela nunca some, e o fundo sólido evita que o conteúdo role "por
	   baixo" dela de forma esquisita. */
	.iam-topbar {
		flex-direction: column;
		align-items: flex-start;
		position: sticky;
		top: 0;
		z-index: 998;
		background: var(--iam-fundo);
		margin: -20px -16px 20px;
		padding: 14px 16px 10px;
	}

	.iam-menu-mobile { display: inline-flex !important; }
	.iam-sidebar-colapsar { display: none !important; } /* o botão "☰" substitui ele nesta largura */

	.iam-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		height: 100vh;
		z-index: 1001;
		box-shadow: 6px 0 28px rgba(0,0,0,.3);
		transform: translateX(-100%);
		transition: transform .25s ease;
	}
	.iam-sidebar.is-aberta-mobile { transform: translateX(0); }

	/* Se a barra ficou "recolhida" (só ícones) numa sessão anterior em tela
	   larga, a classe is-colapsada pode continuar salva no localStorage —
	   aqui ela é neutralizada: nesta largura, a gaveta SEMPRE abre por
	   inteiro (nome, avatar, texto de cada item), nunca no modo ícone. */
	.iam-sidebar.is-colapsada { flex-basis: 260px; width: 260px; padding-left: 18px; padding-right: 18px; }
	.iam-sidebar.is-colapsada .iam-marca-nome,
	.iam-sidebar.is-colapsada .iam-marca-sub { display: block; }
	.iam-sidebar.is-colapsada .iam-marca-mini { display: none; }
	.iam-sidebar.is-colapsada .iam-marca { padding-bottom: 22px; }
	.iam-sidebar.is-colapsada .iam-usuario-card { justify-content: flex-start; padding: 12px; }
	.iam-sidebar.is-colapsada .iam-usuario-info { display: flex; }
	.iam-sidebar.is-colapsada .iam-nav-item { justify-content: flex-start; padding: 11px 12px; }
	.iam-sidebar.is-colapsada .iam-nav-texto { display: inline; }
}