/**
 * Trenzando Biblioteca Abierta — Estilos frontend.
 * Usa variables CSS para que el bloque Gutenberg pueda sobreescribir
 * columnas, separación, altura y colores sin duplicar hojas de estilo.
 */

:root {
	--tba-columnas: 2;
	--tba-gap: 24px;
	--tba-card-altura: auto;
	--tba-color-principal: #2e6f63;
	--tba-color-etiqueta: #ffffff;
	--tba-color-borde: #e5e5e5;
}

/* ==========================================================================
   Filtros (pills + avanzados)
   ========================================================================== */

.tba-filtros {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-bottom: 28px;
}

.tba-filtros__pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tba-pill {
	border: 1px solid #dcdcde;
	background: #ffffff;
	color: #1a1a1a;
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 0.9rem;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.tba-pill:hover {
	border-color: var(--tba-color-principal);
}

.tba-pill.is-active {
	background: var(--tba-color-principal);
	border-color: var(--tba-color-principal);
	color: #ffffff;
}

.tba-filtros__avanzados {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tba-filtros__buscar,
.tba-filtros__select {
	border: 1px solid #dcdcde;
	border-radius: 8px;
	padding: 9px 12px;
	font-size: 0.9rem;
	background: #fff;
}

.tba-filtros__buscar {
	flex: 1 1 240px;
}

/* ==========================================================================
   Grid + tarjetas
   ========================================================================== */

.tba-grid {
	display: grid;
	grid-template-columns: repeat(var(--tba-columnas), 1fr);
	gap: var(--tba-gap);
}

.tba-grid__estado {
	text-align: center;
	color: #666;
	padding: 20px 0;
}

.tba-grid__paginacion {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

.tba-boton-secundario {
	border: 1px solid #dcdcde;
	background: #fff;
	border-radius: 999px;
	padding: 10px 22px;
	cursor: pointer;
	font-weight: 600;
}

.tba-card {
	display: grid;
	grid-template-columns: 40% 1fr;
	gap: 24px;
	background: #ffffff;
	border-radius: 18px;
	border: 1px solid var(--tba-color-borde, #e5e5e5);
	overflow: hidden;
	min-height: var(--tba-card-altura);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.tba-card--vertical {
	grid-template-columns: 1fr;
}

.tba-card__media {
	position: relative;
	background: #f2f2f2;
	min-height: 220px;
}

.tba-card--vertical .tba-card__media {
	min-height: 180px;
}

.tba-card__portada {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tba-card__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
}

.tba-card__decorativa {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 90px;
	height: 90px;
	object-fit: contain;
	opacity: 0.9;
	pointer-events: none;
}

.tba-card__contenido {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px 24px 24px 0;
	gap: 10px;
}

.tba-card--vertical .tba-card__contenido {
	padding: 18px 20px 22px;
}

.tba-card__meta {
	display: flex;
	gap: 10px;
	font-size: 0.8rem;
	color: #767676;
}

.tba-card__titulo {
	margin: 0;
	font-size: 1.35rem;
	line-height: 1.3;
	color: #1a1a1a;
}

.tba-card__titulo a {
	color: inherit;
	text-decoration: none;
}

.tba-card__titulo a:hover {
	text-decoration: underline;
}

.tba-card__resumen {
	margin: 0;
	color: #555;
	font-size: 0.92rem;
	line-height: 1.55;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tba-card__extra {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 0.78rem;
	color: #767676;
}

.tba-card__etiquetas {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
}

.tba-card__etiquetas li {
	background: #f2f2f2;
	border-radius: 999px;
	padding: 3px 10px;
	font-size: 0.72rem;
	color: #444;
}

.tba-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 6px;
}

.tba-card__boton {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--tba-color-principal);
	font-weight: 600;
	text-decoration: none;
	font-size: 0.9rem;
}

.tba-card__boton:hover {
	text-decoration: underline;
}

.tba-card__descarga {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #f5f5f5;
	color: #444;
	flex-shrink: 0;
	transition: background 0.15s ease;
}

.tba-card__descarga:hover {
	background: #ebebeb;
}

.tba-card__descarga .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* ==========================================================================
   Bloque "Biblioteca Abierta"
   ========================================================================== */

.tba-biblioteca-abierta {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: hidden;
}

.tba-biblioteca-abierta .tba-filtros {
	margin-bottom: 20px;
}

/* ==========================================================================
   Ficha individual de documento
   ========================================================================== */

.tba-single-documento {
	max-width: 1000px;
	margin: 0 auto;
	padding: 40px 20px 80px;
}

.tba-doc-header {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	border-bottom: 2px solid var(--tba-color-borde, #e5e5e5);
	padding-bottom: 28px;
	margin-bottom: 28px;
	flex-wrap: wrap;
}

.tba-doc-portada {
	width: 220px;
	border-radius: 12px;
	object-fit: cover;
}

.tba-doc-title-block {
	flex: 1;
	min-width: 260px;
}

.tba-doc-badge {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	margin-bottom: 10px;
}

.tba-doc-title {
	margin: 0 0 10px;
	font-size: 2rem;
}

.tba-doc-meta {
	display: flex;
	gap: 14px;
	color: #666;
	margin: 0 0 12px;
	font-size: 0.9rem;
}

.tba-doc-resumen {
	font-size: 1.05rem;
	color: #444;
	margin: 0 0 18px;
}

.tba-doc-boton {
	display: inline-flex;
	align-items: center;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--tba-color-principal, #2e6f63);
	color: #fff !important;
	font-weight: 600;
	text-decoration: none;
}

.tba-doc-body {
	line-height: 1.7;
}

.tba-doc-etiquetas {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	margin: 24px 0 0;
}

.tba-doc-etiquetas li {
	background: #f2f2f2;
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 0.8rem;
	color: #444;
}

/* ==========================================================================
   Documentos relacionados (ficha de organización, Trenzando Red Regional)
   ========================================================================== */

.tba-org-documentos {
	max-width: 1100px;
	margin: 40px auto 0;
	padding: 0 20px;
}

.tba-org-documentos__lista {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tba-org-documentos__item a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: #1a1a1a;
}

.tba-org-documentos__item a:hover {
	text-decoration: underline;
}

.tba-org-documentos__anio {
	color: #767676;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Escritorio grande: se respeta tal cual la cantidad de columnas elegida
   en el bloque (--tba-columnas). A partir de aquí se va adaptando. */

/* Tablet / escritorio angosto: en vez de forzar un número fijo de
   columnas (que ignoraba lo configurado en el bloque), se deja que la
   rejilla encuentre por sí sola cuántas columnas de al menos 260px caben
   — así una configuración de 1 o 2 columnas se respeta, y una de 3-4 se
   reduce con naturalidad según el espacio disponible. */
@media (max-width: 1100px) {
	.tba-grid {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}

/* Tablet vertical / móvil grande: las tarjetas horizontales (imagen a la
   izquierda) se ven apretadas por debajo de este ancho; se apilan en
   vertical aunque el bloque tenga configurado el diseño "horizontal". */
@media (max-width: 680px) {
	.tba-card {
		grid-template-columns: 1fr;
	}

	.tba-card__media {
		min-height: 200px;
	}

	.tba-card__contenido {
		padding: 18px 20px 22px;
	}

	.tba-doc-header {
		flex-direction: column;
	}

	.tba-doc-portada {
		width: 100%;
		max-width: 220px;
	}
}

/* Móvil: una sola columna, controles a ancho completo y objetivos
   táctiles más generosos. */
@media (max-width: 480px) {
	.tba-grid {
		grid-template-columns: 1fr;
	}

	.tba-biblioteca-abierta__titulo {
		font-size: 1.3rem;
	}

	.tba-doc-header {
		flex-direction: column;
	}

	.tba-doc-portada {
		width: 100%;
		max-width: none;
	}

	/* Los pills de "Tipo de documento" se desplazan horizontalmente en
	   vez de amontonarse en varias filas — patrón táctil habitual. */
	.tba-filtros__pills {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		padding-bottom: 6px;
		margin-bottom: -2px;
	}

	.tba-filtros__pills::-webkit-scrollbar {
		height: 4px;
	}

	.tba-filtros__pills li {
		flex-shrink: 0;
		scroll-snap-align: start;
	}

	.tba-pill {
		padding: 10px 16px;
	}

	.tba-filtros__avanzados {
		flex-direction: column;
	}

	.tba-filtros__select,
	.tba-filtros__buscar {
		width: 100%;
		min-height: 44px;
		box-sizing: border-box;
	}

	.tba-card__footer {
		flex-wrap: wrap;
		gap: 10px;
	}

	.tba-card__descarga {
		width: 40px;
		height: 40px;
	}

	.tba-boton-secundario {
		width: 100%;
		min-height: 44px;
	}
}