/**
 * Câmara Carta de Serviços — Frontend
 * Visual institucional da suíte.
 */

:root {
	--ccs-cor-principal: #0a4595;
	--ccs-cor-azul:    #0a4595;
	--ccs-cor-verde:   #15803d;
	--ccs-cor-laranja: #c2410c;
	--ccs-cor-roxo:    #7c3aed;
	--ccs-fundo-suave: #f9fafb;
	--ccs-borda:       #e5e7eb;
	--ccs-texto:       #1f2937;
	--ccs-texto-suave: #6b7280;
	--ccs-radius:      10px;
	--ccs-trans:       200ms ease;
}

.ccs-pagina {
	max-width: 1100px;
	margin: 0 auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--ccs-texto);
}

/* =============================================================================
   HEADER
   ============================================================================= */
.ccs-header {
	background: linear-gradient(135deg, var(--ccs-cor-principal), color-mix(in srgb, var(--ccs-cor-principal) 60%, #000));
	color: #fff;
	border-radius: var(--ccs-radius);
	padding: 40px 40px 36px;
	margin-bottom: 36px;
}
.ccs-header-inner {
	display: flex;
	gap: 32px;
	align-items: flex-start;
	flex-wrap: wrap;
}
.ccs-header-texto { flex: 1 1 400px; }
.ccs-header-texto h1 {
	font-size: 34px !important;
	color: #fff !important;
	margin: 0 0 6px !important;
	font-weight: 800;
	line-height: 1.1;
}
.ccs-header-lei {
	font-size: 12px !important;
	color: rgba(255,255,255,0.75) !important;
	margin: 0 0 16px !important;
	font-style: italic;
	letter-spacing: 0.3px;
}
.ccs-header-apresentacao {
	font-size: 15px !important;
	color: rgba(255,255,255,0.92) !important;
	margin: 0 !important;
	line-height: 1.65;
}
.ccs-header-meta {
	background: rgba(255,255,255,0.12);
	border-radius: 8px;
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 200px;
	border: 1px solid rgba(255,255,255,0.2);
}
.ccs-meta-item small {
	display: block;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: rgba(255,255,255,0.65);
	font-weight: 700;
}
.ccs-meta-item span {
	font-size: 13px;
	color: #fff;
	font-weight: 600;
}

/* =============================================================================
   SEÇÕES
   ============================================================================= */
.ccs-secao {
	margin-bottom: 40px;
}
.ccs-secao h2 {
	font-size: 22px !important;
	color: var(--ccs-texto) !important;
	margin: 0 0 6px !important;
	font-weight: 700;
}
.ccs-secao h2::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	background: var(--ccs-cor-principal);
	border-radius: 2px;
	margin-top: 8px;
	margin-bottom: 16px;
}
.ccs-secao-desc {
	color: var(--ccs-texto-suave);
	font-size: 14px;
	margin-bottom: 20px !important;
}
.ccs-obs { font-size: 12px !important; color: var(--ccs-texto-suave) !important; }

/* =============================================================================
   ATENDIMENTO
   ============================================================================= */
.ccs-atendimento-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
}
.ccs-atendimento-card {
	background: #fff;
	border: 1px solid var(--ccs-borda);
	border-radius: var(--ccs-radius);
	padding: 22px;
	border-top: 3px solid var(--ccs-cor-principal);
}
.ccs-atend-icone {
	width: 40px;
	height: 40px;
	background: var(--ccs-fundo-suave);
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ccs-cor-principal);
	margin-bottom: 12px;
}
.ccs-atend-icone svg { width: 22px; height: 22px; }
.ccs-atendimento-card h3 {
	margin: 0 0 8px !important;
	font-size: 15px !important;
	color: var(--ccs-texto) !important;
	font-weight: 700;
}
.ccs-atendimento-card p,
.ccs-atendimento-card address {
	margin: 0 0 6px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--ccs-texto);
	font-style: normal;
}
.ccs-atendimento-card p { display: flex; align-items: center; gap: 6px; }
.ccs-atendimento-card p svg { width: 16px; height: 16px; color: var(--ccs-cor-principal); flex-shrink: 0; }
.ccs-atendimento-card a { color: var(--ccs-cor-principal); font-weight: 500; text-decoration: none; }
.ccs-atendimento-card a:hover { text-decoration: underline; }

/* =============================================================================
   SERVIÇOS GRID — botões de acesso direto
   ============================================================================= */
.ccs-secao-servicos { background: var(--ccs-fundo-suave); border-radius: var(--ccs-radius); padding: 28px; }
.ccs-servicos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
	margin-top: 16px;
}
.ccs-servico-card {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--ccs-borda);
	border-radius: var(--ccs-radius);
	padding: 16px 14px 16px 18px;
	text-decoration: none !important;
	color: var(--ccs-texto);
	transition: all var(--ccs-trans);
	position: relative;
	overflow: hidden;
	min-height: 80px;
	word-break: break-word;
}
.ccs-servico-card:not(.ccs-servico-indisponivel):hover {
	border-color: var(--ccs-cor-principal);
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	transform: translateY(-2px);
}
.ccs-servico-indisponivel {
	opacity: 0.45;
	cursor: default;
	filter: grayscale(30%);
}
.ccs-servico-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	flex-shrink: 0;
}
.ccs-cor-azul::before    { background: var(--ccs-cor-azul); }
.ccs-cor-verde::before   { background: var(--ccs-cor-verde); }
.ccs-cor-laranja::before { background: var(--ccs-cor-laranja); }
.ccs-cor-roxo::before    { background: var(--ccs-cor-roxo); }

.ccs-servico-icone {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	margin-top: 2px;
}
.ccs-cor-azul .ccs-servico-icone    { background: #dbeafe; color: var(--ccs-cor-azul); }
.ccs-cor-verde .ccs-servico-icone   { background: #dcfce7; color: var(--ccs-cor-verde); }
.ccs-cor-laranja .ccs-servico-icone { background: #ffedd5; color: var(--ccs-cor-laranja); }
.ccs-cor-roxo .ccs-servico-icone    { background: #ede9fe; color: var(--ccs-cor-roxo); }
.ccs-servico-icone svg { width: 20px; height: 20px; }

.ccs-servico-info {
	flex: 1;
	min-width: 0; /* essencial para flex truncar */
}
.ccs-servico-info h3 {
	margin: 0 0 3px !important;
	font-size: 14px !important;
	color: var(--ccs-texto) !important;
	font-weight: 700;
	/* SEM white-space: nowrap — deixa o texto quebrar normalmente */
	overflow-wrap: break-word;
	word-break: break-word;
	line-height: 1.3;
}
.ccs-servico-info p {
	margin: 0 0 5px !important;
	font-size: 12px !important;
	color: var(--ccs-texto-suave) !important;
	line-height: 1.4;
	overflow-wrap: break-word;
}
.ccs-prazo {
	font-size: 11px;
	font-weight: 600;
	color: var(--ccs-cor-principal);
	background: #eff6ff;
	padding: 2px 8px;
	border-radius: 100px;
	display: inline-block;
	white-space: nowrap; /* prazo pode ficar em uma linha */
}
.ccs-servico-cta {
	color: var(--ccs-cor-principal);
	flex-shrink: 0;
	align-self: center;
	margin-left: auto;
	padding-left: 4px;
}

/* =============================================================================
   CATÁLOGO DETALHADO — accordion
   ============================================================================= */
.ccs-catalogo-item {
	border: 1px solid var(--ccs-borda);
	border-radius: var(--ccs-radius);
	overflow: hidden;
	margin-bottom: 10px;
}
.ccs-catalogo-header {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: #fff;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	text-align: left;
	transition: background var(--ccs-trans);
}
.ccs-catalogo-header:hover,
.ccs-catalogo-header[aria-expanded="true"] {
	background: var(--ccs-fundo-suave);
}
.ccs-catalogo-icone {
	width: 36px;
	height: 36px;
	background: #eff6ff;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ccs-cor-principal);
	flex-shrink: 0;
}
.ccs-catalogo-icone svg { width: 20px; height: 20px; }
.ccs-catalogo-titulo {
	flex: 1;
	font-weight: 700;
	font-size: 15px;
	color: var(--ccs-texto);
}
.ccs-catalogo-prazo-badge {
	font-size: 11px;
	font-weight: 700;
	color: var(--ccs-cor-principal);
	background: #eff6ff;
	padding: 3px 10px;
	border-radius: 100px;
	white-space: nowrap;
}
.ccs-catalogo-chevron {
	color: var(--ccs-texto-suave);
	flex-shrink: 0;
	transition: transform var(--ccs-trans);
}
.ccs-catalogo-header[aria-expanded="true"] .ccs-catalogo-chevron {
	transform: rotate(180deg);
}

.ccs-catalogo-corpo[hidden] { display: none; }
.ccs-catalogo-conteudo {
	padding: 20px 24px;
	border-top: 1px solid var(--ccs-borda);
	background: #fafafa;
}
.ccs-item-desc {
	font-size: 14px;
	color: var(--ccs-texto);
	line-height: 1.65;
	margin: 0 0 16px !important;
}
.ccs-item-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 700px) {
	.ccs-item-grid { grid-template-columns: 1fr; }
}
.ccs-item-campo {
	background: #fff;
	border: 1px solid var(--ccs-borda);
	border-radius: 6px;
	padding: 14px 16px;
}
.ccs-item-campo strong {
	display: block;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--ccs-cor-principal);
	margin-bottom: 6px;
	font-weight: 700;
}
.ccs-item-campo p {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
}
.ccs-item-campo ol {
	margin: 0;
	padding-left: 18px;
	font-size: 13px;
	line-height: 1.6;
}
.ccs-prazo-valor {
	font-weight: 700;
	color: var(--ccs-cor-principal) !important;
	font-size: 14px !important;
}
.ccs-item-acesso { margin-top: 16px; }
.ccs-btn-acessar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	background: var(--ccs-cor-principal);
	color: #fff !important;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	transition: all var(--ccs-trans);
}
.ccs-btn-acessar:hover { filter: brightness(0.9); transform: translateY(-1px); }

/* =============================================================================
   COMPROMISSOS E DIREITOS
   ============================================================================= */
.ccs-compromissos-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ccs-compromissos-lista li {
	padding: 14px 16px 14px 48px;
	position: relative;
	border-bottom: 1px dashed var(--ccs-borda);
	font-size: 14px;
	line-height: 1.6;
}
.ccs-compromissos-lista li:last-child { border-bottom: 0; }
.ccs-compromissos-lista li::before {
	content: "";
	position: absolute;
	left: 16px;
	top: 18px;
	width: 10px;
	height: 10px;
	background: var(--ccs-cor-principal);
	border-radius: 50%;
}

.ccs-direitos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 14px;
}
.ccs-direito-item {
	display: flex;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--ccs-borda);
	border-radius: var(--ccs-radius);
	padding: 16px;
}
.ccs-direito-num {
	width: 32px;
	height: 32px;
	background: var(--ccs-cor-principal);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	flex-shrink: 0;
}
.ccs-direito-item p { margin: 4px 0 0 !important; font-size: 13px; line-height: 1.5; }

/* =============================================================================
   CANAIS DE MANIFESTAÇÃO
   ============================================================================= */
.ccs-canais-manifestacao { background: var(--ccs-fundo-suave); border-radius: var(--ccs-radius); padding: 28px; }
.ccs-canais-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 16px;
}
.ccs-canal-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 22px 18px;
	background: #fff;
	border: 1px solid var(--ccs-borda);
	border-radius: var(--ccs-radius);
	text-align: center;
	text-decoration: none !important;
	color: var(--ccs-texto);
	min-width: 140px;
	flex: 1 1 140px;
	max-width: 200px;
	transition: all var(--ccs-trans);
	border-top: 3px solid var(--ccs-cor-principal);
}
a.ccs-canal-card:hover {
	border-color: var(--ccs-cor-principal);
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
	transform: translateY(-2px);
}
.ccs-canal-icone {
	width: 44px;
	height: 44px;
	background: #eff6ff;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ccs-cor-principal);
}
.ccs-canal-icone svg { width: 24px; height: 24px; }
.ccs-canal-card h3 { margin: 0 !important; font-size: 14px !important; font-weight: 700; }
.ccs-canal-card p { margin: 0 !important; font-size: 12px !important; color: var(--ccs-texto-suave) !important; }

/* =============================================================================
   AVALIAÇÃO CTA
   ============================================================================= */
.ccs-avaliacao-cta {
	background: linear-gradient(135deg, var(--ccs-cor-principal), color-mix(in srgb, var(--ccs-cor-principal) 60%, #000));
	color: #fff;
	border-radius: var(--ccs-radius);
	padding: 36px 40px;
	text-align: center;
}
.ccs-avaliacao-cta h2 {
	color: #fff !important;
	font-size: 24px !important;
}
.ccs-avaliacao-cta h2::after { background: rgba(255,255,255,0.4); margin: 8px auto 16px; }
.ccs-avaliacao-cta p { color: rgba(255,255,255,0.9) !important; font-size: 15px !important; margin-bottom: 20px !important; }
.ccs-btn-destaque {
	display: inline-block;
	padding: 14px 32px;
	background: #fff;
	color: var(--ccs-cor-principal) !important;
	font-size: 15px;
	font-weight: 700;
	border-radius: 8px;
	text-decoration: none !important;
	transition: all var(--ccs-trans);
}
.ccs-btn-destaque:hover { background: #f1f5f9; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.2); }

/* =============================================================================
   BASE LEGAL E RODAPÉ
   ============================================================================= */
.ccs-base-legal { background: var(--ccs-fundo-suave); border-radius: var(--ccs-radius); padding: 28px; }
.ccs-lista-legal {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ccs-lista-legal li {
	padding: 10px 0;
	font-size: 13px;
	line-height: 1.5;
	border-bottom: 1px dashed var(--ccs-borda);
}
.ccs-lista-legal li:last-child { border-bottom: 0; }
.ccs-lista-legal li strong { color: var(--ccs-cor-principal); }

.ccs-rodape {
	border-top: 2px solid var(--ccs-borda);
	padding-top: 16px;
	margin-top: 36px;
	text-align: center;
}
.ccs-rodape p { font-size: 12px !important; color: var(--ccs-texto-suave) !important; margin: 0 !important; }

/* Responsivo */
@media (max-width: 768px) {
	.ccs-header { padding: 24px 20px; }
	.ccs-header-texto h1 { font-size: 26px !important; }
	.ccs-servicos-grid { grid-template-columns: 1fr; }
	.ccs-canais-grid { justify-content: center; }
}