/**
 * Câmara Comissões — CSS (Apple Design System)
 * Integrado ao padrão visual da suíte.
 */

:root {
	--ccom-font:          -apple-system,"SF Pro Display","SF Pro Text",BlinkMacSystemFont,"Segoe UI",sans-serif;
	--ccom-bg:            #f5f5f7;
	--ccom-card-bg:       rgba(255,255,255,0.86);
	--ccom-card-border:   rgba(0,0,0,0.07);
	--ccom-shadow:        0 2px 14px rgba(0,0,0,0.06),0 0 0 1px rgba(0,0,0,0.05);
	--ccom-shadow-hover:  0 10px 32px rgba(0,0,0,0.10),0 0 0 1px rgba(0,0,0,0.07);
	--ccom-radius:        18px;
	--ccom-text:          #1d1d1f;
	--ccom-muted:         #6e6e73;
	--ccom-border:        rgba(0,0,0,0.09);
	--ccom-accent:        #0a4595;
	--ccom-spring:        340ms cubic-bezier(.34,1.56,.64,1);
	--ccom-ease:          220ms cubic-bezier(.25,.46,.45,.94);
}

@keyframes ccom-enter {
	from { opacity:0; transform:translateY(18px) scale(.97); }
	to   { opacity:1; transform:translateY(0) scale(1); }
}

/* ═══ WRAPPER ══════════════════════════════════════════════════ */
.ccom-wrapper {
	font-family: var(--ccom-font);
	max-width: 1100px;
	margin: 0 auto;
	color: var(--ccom-text);
}

.ccom-page-header {
	margin-bottom: 36px;
}
.ccom-page-header h1 {
	font-size: clamp(26px,4vw,34px) !important;
	font-weight: 700 !important;
	letter-spacing: -.5px !important;
	color: var(--ccom-text) !important;
	margin: 0 0 4px !important;
	font-family: var(--ccom-font) !important;
}
.ccom-page-header::after {
	content: '';
	display: block;
	width: 48px;
	height: 4px;
	background: var(--ccom-accent);
	border-radius: 2px;
	margin-top: 12px;
}

/* ═══ GRID DE COMISSÕES ════════════════════════════════════════ */
.ccom-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px,1fr));
	gap: 18px;
}
@media (max-width: 680px) {
	.ccom-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ═══ CARD ══════════════════════════════════════════════════════ */
.ccom-card {
	background: var(--ccom-card-bg);
	border: 1px solid var(--ccom-card-border);
	border-radius: var(--ccom-radius);
	box-shadow: var(--ccom-shadow);
	backdrop-filter: blur(20px) saturate(1.4);
	-webkit-backdrop-filter: blur(20px) saturate(1.4);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
	overflow: hidden;
	transition: transform var(--ccom-spring), box-shadow var(--ccom-ease), background var(--ccom-ease);
	font-family: var(--ccom-font);
	opacity: 0;
	animation: ccom-enter 440ms var(--ccom-spring) forwards;
}
.ccom-card:hover {
	transform: translateY(-5px) scale(1.012);
	box-shadow: var(--ccom-shadow-hover);
	background: rgba(255,255,255,.97);
}
/* Barra de cor accent no topo */
.ccom-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: var(--ccom-accent);
	border-radius: var(--ccom-radius) var(--ccom-radius) 0 0;
}

/* ── Header do card ── */
.ccom-card-header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}
.ccom-card-icon {
	width: 44px;
	height: 44px;
	min-width: 44px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--ccom-accent) 10%, transparent);
	color: var(--ccom-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background var(--ccom-ease), transform var(--ccom-ease);
}
.ccom-card:hover .ccom-card-icon {
	background: color-mix(in srgb, var(--ccom-accent) 16%, transparent);
	transform: scale(1.06);
}
.ccom-card-icon svg { width: 22px; height: 22px; }

.ccom-card-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	flex: 1;
}

/* ── Badges ── */
.ccom-tipo-badge, .ccom-leg-badge, .ccom-encerrada-badge, .ccom-vigente-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 100px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .4px;
	font-family: var(--ccom-font);
}
.ccom-tipo-badge {
	background: color-mix(in srgb, var(--ccom-accent) 10%, transparent);
	color: var(--ccom-accent);
}
.ccom-leg-badge {
	background: #f5f5f7;
	color: var(--ccom-muted);
	border: 1px solid var(--ccom-border);
}
.ccom-encerrada-badge {
	background: #fee2e2;
	color: #b91c1c;
}
.ccom-vigente-badge {
	background: #f0fdf4;
	color: #15803d;
}

/* ── Título e resumo ── */
.ccom-titulo {
	margin: 0 !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--ccom-text) !important;
	letter-spacing: -.3px !important;
	line-height: 1.25 !important;
	font-family: var(--ccom-font) !important;
}
.ccom-resumo {
	margin: 0 !important;
	font-size: 14px !important;
	color: var(--ccom-muted) !important;
	line-height: 1.6 !important;
	font-family: var(--ccom-font) !important;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ── Presidente ── */
.ccom-presidente {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #f5f5f7;
	border-radius: 10px;
	border: 1px solid var(--ccom-border);
}
.ccom-presidente-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .6px;
	color: var(--ccom-accent);
	font-family: var(--ccom-font);
	white-space: nowrap;
}
.ccom-presidente-foto {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid white;
	box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
.ccom-presidente-nome {
	font-size: 13px;
	font-weight: 600;
	color: var(--ccom-text);
	font-family: var(--ccom-font);
}

/* ── Avatares de membros ── */
.ccom-membros-titulo {
	font-size: 11px !important;
	font-weight: 700 !important;
	color: var(--ccom-muted) !important;
	text-transform: uppercase;
	letter-spacing: .6px;
	margin: 0 0 6px !important;
	font-family: var(--ccom-font) !important;
}
.ccom-membros-fotos {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}
.ccom-membro-avatar, .ccom-avatar-mais {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: 2px solid white;
	margin-left: -8px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,.10);
	position: relative;
}
.ccom-membro-avatar:first-child, .ccom-avatar-mais:first-child {
	margin-left: 0;
}
.ccom-membro-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ccom-avatar-inicial {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--ccom-accent) 15%, #f5f5f7);
	color: var(--ccom-accent);
	font-size: 12px;
	font-weight: 700;
	font-family: var(--ccom-font);
}
.ccom-avatar-mais {
	background: var(--ccom-accent);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	font-family: var(--ccom-font);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ── Footer do card ── */
.ccom-card-footer {
	margin-top: auto;
	padding-top: 6px;
}
.ccom-btn-ver {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	background: var(--ccom-accent);
	color: #fff !important;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	font-family: var(--ccom-font);
	letter-spacing: -.1px;
	transition: all var(--ccom-ease);
}
.ccom-btn-ver svg { width: 14px; height: 14px; transition: transform var(--ccom-ease); }
.ccom-btn-ver:hover {
	filter: brightness(.9);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0,0,0,.14);
}
.ccom-btn-ver:hover svg { transform: translateX(3px); }

/* ═══ ESTADO VAZIO ═════════════════════════════════════════════ */
.ccom-vazio {
	text-align: center;
	padding: 60px 20px;
	color: var(--ccom-muted);
	background: var(--ccom-card-bg);
	border: 1px solid var(--ccom-card-border);
	border-radius: var(--ccom-radius);
	font-family: var(--ccom-font);
}
.ccom-vazio svg { color: #d1d5db; margin-bottom: 12px; display: block; margin-left: auto; margin-right: auto; }
.ccom-vazio p { margin: 0 !important; font-size: 15px !important; }

/* ═══ SINGLE DA COMISSÃO ════════════════════════════════════════ */
.ccom-single {
	font-family: var(--ccom-font);
	max-width: 1000px;
	margin: 0 auto;
}

.ccom-single-header {
	margin-bottom: 36px;
}
.ccom-single-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}
.ccom-single-titulo {
	font-size: clamp(26px,4vw,36px) !important;
	font-weight: 800 !important;
	letter-spacing: -.6px !important;
	color: var(--ccom-text) !important;
	margin: 0 0 10px !important;
	line-height: 1.15 !important;
	font-family: var(--ccom-font) !important;
}
/* Barra colorida embaixo do título */
.ccom-single-titulo::after {
	content: '';
	display: block;
	width: 56px;
	height: 4px;
	background: var(--ccom-accent);
	border-radius: 2px;
	margin-top: 14px;
}
.ccom-single-periodo {
	display: flex;
	gap: 18px;
	font-size: 13px !important;
	color: var(--ccom-muted) !important;
	margin: 0 !important;
	flex-wrap: wrap;
}

.ccom-single-descricao {
	margin-bottom: 40px;
}
.ccom-single-descricao h2 {
	font-size: 20px !important;
	font-weight: 700 !important;
	color: var(--ccom-text) !important;
	margin: 0 0 16px !important;
	letter-spacing: -.3px !important;
}
.ccom-single-conteudo {
	font-size: 15px;
	line-height: 1.7;
	color: var(--ccom-text);
}

/* ═══ COMPOSIÇÃO — grid de membros ═════════════════════════════ */
.ccom-single-composicao h2 {
	font-size: 20px !important;
	font-weight: 700 !important;
	color: var(--ccom-text) !important;
	margin: 0 0 20px !important;
	letter-spacing: -.3px !important;
}
.ccom-membros-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
	gap: 14px;
}
@media (max-width: 500px) { .ccom-membros-grid { grid-template-columns: 1fr 1fr; } }

.ccom-membro-card {
	background: var(--ccom-card-bg);
	border: 1px solid var(--ccom-card-border);
	border-radius: 14px;
	box-shadow: var(--ccom-shadow);
	overflow: hidden;
	transition: transform var(--ccom-spring), box-shadow var(--ccom-ease);
	text-align: center;
}
.ccom-membro-card:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: var(--ccom-shadow-hover);
}
.ccom-membro-card.ccom-membro-destaque {
	border-top: 3px solid var(--ccom-accent);
}
.ccom-membro-link {
	display: block;
	text-decoration: none !important;
	padding: 20px 14px;
	color: var(--ccom-text);
}
.ccom-membro-foto {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 12px;
	border: 3px solid white;
	box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.ccom-membro-foto img { width: 100%; height: 100%; object-fit: cover; }
.ccom-membro-placeholder {
	width: 100%; height: 100%;
	background: color-mix(in srgb, var(--ccom-accent) 12%, #f5f5f7);
	display: flex; align-items: center; justify-content: center;
	color: var(--ccom-accent);
	font-size: 22px; font-weight: 800;
	font-family: var(--ccom-font);
}
.ccom-membro-papel {
	display: block;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .8px;
	color: var(--ccom-accent);
	margin-bottom: 4px;
	font-family: var(--ccom-font);
}
.ccom-membro-nome {
	margin: 0 0 4px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--ccom-text) !important;
	letter-spacing: -.2px !important;
	font-family: var(--ccom-font) !important;
	line-height: 1.3 !important;
}
.ccom-membro-partido {
	margin: 0 !important;
	font-size: 12px !important;
	color: var(--ccom-muted) !important;
	font-family: var(--ccom-font) !important;
}

@media (max-width: 768px) {
	.ccom-grid { grid-template-columns: 1fr; }
	.ccom-card { padding: 20px; }
	.ccom-membros-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══ CONTADORES NO CARD (efetivos + suplentes) ════════════════ */
.ccom-contadores {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.ccom-contador-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	color: var(--ccom-muted);
	font-family: var(--ccom-font);
}
.ccom-contador-item strong { color: var(--ccom-text); font-weight: 700; }
.ccom-contador-suplente { color: #9ca3af; }
.ccom-contador-sep { color: #d1d5db; font-size: 14px; }

/* Avatares sobrepostos */
.ccom-avatares {
	display: flex;
	flex-wrap: wrap;
}
.ccom-avatar, .ccom-avatar-mais, .ccom-avatar-ini {
	width: 30px; height: 30px;
	border-radius: 50%;
	border: 2px solid white;
	margin-left: -7px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,.10);
	flex-shrink: 0;
}
.ccom-avatar:first-child { margin-left: 0; }
.ccom-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ccom-avatar-ini, .ccom-avatar-mais {
	display: flex; align-items: center; justify-content: center;
	font-size: 11px; font-weight: 700; font-family: var(--ccom-font);
}
.ccom-avatar-ini {
	background: color-mix(in srgb, var(--ccom-accent) 14%, #f5f5f7);
	color: var(--ccom-accent);
}
.ccom-avatar-mais {
	background: var(--ccom-accent); color: #fff;
}

/* ═══ SEÇÃO TÍTULOS NO SINGLE (Efetivos / Suplentes) ══════════ */
.ccom-single-secao-titulo {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ccom-font);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .7px;
	color: var(--ccom-accent);
	padding: 10px 14px;
	background: color-mix(in srgb, var(--ccom-accent) 8%, transparent);
	border-radius: 9px;
	margin: 24px 0 14px;
}
.ccom-secao-suplente { color: #6b7280; background: #f5f5f7; }
.ccom-secao-suplente svg { fill: #6b7280; }

.ccom-grid-presidente { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* ═══ APRESENTAÇÃO DA PÁGINA ═══════════════════════════════════ */
.ccom-apresentacao {
	font-family: var(--ccom-font);
	font-size: 15px;
	line-height: 1.7;
	color: var(--ccom-muted);
	margin: 0 0 28px;
	max-width: 860px;
}
.ccom-apresentacao p { margin: 0 0 10px !important; }
.ccom-apresentacao p:last-child { margin-bottom: 0 !important; }

/* ═══ PORTARIA ══════════════════════════════════════════════════ */
.ccom-portaria {
	margin: 0 0 32px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--ccom-card-border);
	box-shadow: var(--ccom-shadow);
	background: var(--ccom-card-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.ccom-portaria-titulo {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	background: color-mix(in srgb, var(--ccom-accent) 6%, transparent);
	border-left: 4px solid var(--ccom-accent);
	font-family: var(--ccom-font);
	font-size: 14px;
	font-weight: 700;
	color: var(--ccom-text);
	letter-spacing: -.1px;
}
.ccom-portaria-titulo svg {
	color: var(--ccom-accent);
	flex-shrink: 0;
}

.ccom-portaria-conteudo {
	padding: 16px 20px;
	font-family: var(--ccom-font);
	font-size: 14px;
	line-height: 1.7;
	color: var(--ccom-muted);
	border-top: 1px solid var(--ccom-card-border);
}
.ccom-portaria-conteudo p { margin: 0 0 8px !important; }
.ccom-portaria-conteudo p:last-child { margin-bottom: 0 !important; }