/* =========================================================================
   Documentos Sybs — estilos do front-end
   -------------------------------------------------------------------------
   Cores extraídas do site real (sybs.com.br): navy do cabeçalho/rodapé
   e laranja usado nos destaques (item de menu ativo, títulos do rodapé,
   ícones das redes sociais). Para ajustar, troque só as variáveis abaixo.
   ========================================================================= */
.ds-wrapper {
	--ds-navy: #0B2158;
	--ds-navy-suave: #1F3D7A;
	--ds-laranja: #F7941D;
	--ds-laranja-hover: #E07F0A;
	--ds-texto: #26313B;
	--ds-texto-suave: #5B6472;
	--ds-texto-hint: #8A93A0;
	--ds-borda: #E3E7EA;
	--ds-fundo-sidebar: #FFFFFF;
	--ds-fundo-pagina: #F7F8FA;
	--ds-radius: 10px;

	font-family: inherit;
	color: var(--ds-texto);
	display: flex;
	align-items: flex-start;
	gap: 28px;
	background: var(--ds-fundo-pagina);
	border-radius: 12px;

	padding: 55px 24px 55px 24px;

	@media (max-width: 998px) {

		padding: 55px 80px 55px 128px;


	}

	@media (min-width: 1400px) {

		padding: 55px 120px 55px 70px;

	} 

	@media (min-width: 1500px) {

		padding: 55px 9vw 55px 7vw;
	} 


	@media (min-width: 1600px) {

		padding: 55px 18vw 55px 18vw; 


	}

}

/* ---------- Sidebar ---------- */
.ds-sidebar {
	flex: 0 0 260px;
	background: var(--ds-fundo-sidebar);
	border: 1px solid var(--ds-borda);
	border-radius: var(--ds-radius);
	padding: 20px;
	position: sticky;
	top: 20px;
}

.ds-sidebar-titulo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 15px;
	font-weight: 700;
	color: var(--ds-navy);
	margin-bottom: 18px;
}

.ds-sidebar-titulo .dashicons {
	color: var(--ds-laranja);
	font-size: 18px;
	width: 18px;
	height: 18px;
}

.ds-campo {
	margin-bottom: 16px;
}

.ds-campo label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--ds-navy);
	margin-bottom: 6px;
}

.ds-campo select {
	width: 100%;
	padding: 9px 12px;
	border: 1px solid #C7CDD6;
	border-radius: 8px;
	background: #fff;
	font-size: 13px;
	color: var(--ds-texto);
}

.ds-btn-limpar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	margin-top: 6px;
	padding: 10px 14px;
	border: 1.5px solid var(--ds-navy);
	border-radius: 20px;
	background: #fff;
	color: var(--ds-navy);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.ds-btn-limpar:hover {
	background: var(--ds-navy);
	color: #fff;
}

.ds-btn-limpar .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}

/* ---------- Conteúdo principal ---------- */
.ds-conteudo {
	flex: 1 1 auto;
	min-width: 0;
}

.ds-conteudo-topo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.ds-contador {
	font-size: 13px;
	color: var(--ds-texto-suave);
}

.ds-conteudo-acoes {
	display: flex;
	align-items: center;
	gap: 10px;
}

.ds-select-ordenar {
	padding: 8px 12px;
	border: 1px solid var(--ds-borda);
	border-radius: 8px;
	background: #fff;
	font-size: 13px;
	color: var(--ds-texto);
}

.ds-view-toggle {
	display: flex;
	border: 1px solid var(--ds-borda);
	border-radius: 8px;
	overflow: hidden;
}

.ds-view-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: #fff;
	border: none;
	color: var(--ds-texto-suave);
	cursor: pointer;
}

.ds-view-btn + .ds-view-btn {
	border-left: 1px solid var(--ds-borda);
}

.ds-view-btn.ds-view-ativo {
	background: var(--ds-navy);
	color: #fff;
}

.ds-view-btn .dashicons {
	font-size: 16px;
	width: 16px;
	height: 16px;
}

/* ---------- Grade / Lista de cards ---------- */
.ds-lista {
	display: grid;
	gap: 16px;
}

.ds-lista.ds-lista-grid {
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
}

.ds-lista.ds-lista-linhas {
	grid-template-columns: 1fr;
}

.ds-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--ds-borda);
	border-radius: 12px;
	padding: 18px;
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.ds-card:hover {
	border-color: var(--ds-navy-suave);
	box-shadow: 0 4px 14px rgba(11, 33, 88, 0.08);
}

.ds-lista-linhas .ds-card {
	flex-direction: row;
	align-items: center;
	gap: 20px;
}

.ds-lista-linhas .ds-card-topo {
	flex: 1 1 auto;
	margin-bottom: 0;
}

.ds-lista-linhas .ds-card-descricao {
	flex: 1 1 auto;
	margin-bottom: 0;
	-webkit-line-clamp: 2;
}

.ds-lista-linhas .ds-card-rodape {
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	margin-top: 0;
	border-top: none;
	padding-top: 0;
}

.ds-card-topo {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 10px;
}

.ds-card-icone {
	flex: 0 0 auto;
	display: flex;
}

.ds-card-titulos {
	min-width: 0;
}

.ds-card-tipo {
	display: block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #1F6FB2;
	margin-bottom: 4px;
}

.ds-card-titulo {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	color: var(--ds-navy);
	line-height: 1.35;
}

.ds-card-descricao {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--ds-texto-suave);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ds-card-rodape {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 12px;
	border-top: 1px solid var(--ds-borda);
}

.ds-card-meta {
	font-size: 11px;
	color: var(--ds-texto-hint);
	white-space: nowrap;
}

.ds-link-download {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	font-weight: 700;
	color: var(--ds-laranja);
	text-decoration: none;
	white-space: nowrap;
}

.ds-link-download:hover {
	color: var(--ds-laranja-hover);
	text-decoration: underline;
}

.ds-link-download .dashicons {
	font-size: 15px;
	width: 15px;
	height: 15px;
}

.ds-link-desabilitado {
	font-size: 12px;
	color: var(--ds-texto-hint);
}

/* ---------- Estado vazio ---------- */
.ds-vazio {
	grid-column: 1 / -1;
	text-align: center;
	padding: 56px 24px;
	background: #fff;
	border: 1px dashed var(--ds-borda);
	border-radius: 12px;
}

.ds-vazio-icone {
	font-size: 34px;
	width: 34px;
	height: 34px;
	color: #C7CDD6;
	margin-bottom: 10px;
}

.ds-vazio-titulo {
	margin: 0 0 4px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ds-navy);
}

.ds-vazio-texto {
	margin: 0;
	font-size: 13px;
	color: var(--ds-texto-suave);
}

/* ---------- Ver mais ---------- */
.ds-carregar-mais-wrap {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

.ds-btn-carregar-mais {
	padding: 11px 26px;
	border: 1.5px solid var(--ds-navy);
	border-radius: 20px;
	background: #fff;
	color: var(--ds-navy);
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}

.ds-btn-carregar-mais:hover {
	background: var(--ds-navy);
	color: #fff;
}

/* ---------- Loading ---------- */
.ds-lista.ds-carregando {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

/* ---------- Responsivo ---------- */
@media (max-width: 780px) {
	.ds-wrapper {
		flex-direction: column;
		padding: 16px;
	}
	.ds-sidebar {
		flex: 1 1 auto;
		width: 100%;
		position: static;
	}
	.ds-lista.ds-lista-grid {
		grid-template-columns: 1fr;
	}
	.ds-lista-linhas .ds-card {
		flex-direction: column;
		align-items: stretch;
	}
	.ds-lista-linhas .ds-card-rodape {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-top: 1px solid var(--ds-borda);
		padding-top: 12px;
		margin-top: 10px;
	}
}