/* =================================================================
   archive-resource.css — Página "Recursos" (Figma 13-Resources-Desktop, node 2526:6149, archivo
   BdUd1g6K6cuVm4036Z5p6p). Solo se encola en is_post_type_archive('resource') (inc/enqueue.php).
   Breakpoint estándar 80rem (arquitectura §12).

   El fondo del hero y las miniaturas "blob" de las cards sin imagen son, en el Figma, elipses
   azul/verde con blur+máscara (varias capas de glow). A propósito NO se recrean acá — el
   diseñador va a entregar esas piezas ya planas; mientras tanto se usa un fondo plano simple
   (mismo criterio ya usado en home-resources.css para su abanico de tarjetas placeholder).
   ================================================================= */

@layer views {

	/* ---- Hero + buscador ---- */
	.resource-hero {
		padding-block: 3rem;
		padding-inline: clamp(var(--space-m), 6vw, 7.5rem);
	}

	.resource-hero__inner {
		max-width: var(--container);
		margin-inline: auto;
	}

	/* Wrapper de #results: MISMO patrón de 2 niveles que .resource-hero/__inner (padding-inline
	   fluido en el wrapper de ancho completo, max-width+auto-margin SIN padding propio en el hijo)
	   — no el .container genérico (base.css, padding-inline fijo en space-m, y box-sizing:border-box
	   se lo come DENTRO del max-width). Con .container quedaba descuadrado contra el hero de arriba
	   (bug reportado: el ancho útil no calzaba con lo de arriba). */
	.resource-results {
		padding-inline: clamp(var(--space-m), 6vw, 7.5rem);
	}

	.resource-results #results {
		max-width: var(--container);
		margin-inline: auto;
	}

	.resource-hero__desc {
		max-width: 40rem;
	}

	/* WRAPPER (2026-07-03, corregido — antes la foto estaba pegada directo al cuadro de búsqueda,
	   sin aire alrededor, bug real reportado comparando contra el Figma): la foto
	   (--resource-search-bg, seteada inline en archive-resource.php) vive ACÁ, con 50px de padding
	   en los 4 lados — el cuadro de búsqueda (.resource-search__form) es más chico que este wrapper
	   y queda "flotando" adentro con ese aire de foto visible alrededor. */
	.resource-search {
		margin-top: 2rem;
		padding: 50px;
		border-radius: var(--dia-radius-lg, 12px);
		background-image: var(--resource-search-bg);
		background-size: cover;
		background-position: center;
		display: flex;
		justify-content: center;
	}

	/* Cuadro de búsqueda en sí: 1103×80 literal del Figma (no max-width — dimensión fija real,
	   corregido 2026-07-03). El degradé ámbar es la ÚNICA capa de fondo acá — sin foto propia, deja
	   ver la foto del wrapper de atrás a través de las zonas transparentes del degradé. */
	.resource-search__form {
		display: flex;
		width: 1103px;
		max-width: 100%;
		height: 80px;
		padding: 0 12px 0 24px;
		justify-content: space-between;
		align-items: center;
		border-radius: 6px;
		border: 1px solid rgba(255, 245, 230, .24);
		background-image: linear-gradient(158deg, rgba(253, 181, 0, 0) -34.97%, rgba(253, 181, 0, .24) 183.15%);
	}

	.resource-search__input {
		flex: 1 1 auto;
		min-width: 0;
		height: 100%;
		padding: 0;
		border: 0;
		background: transparent;
		font-family: var(--font-sans);
		font-size: 1rem;
		color: var(--dia-color-text-inverse, #fff);
	}

	.resource-search__input::placeholder {
		color: rgba(255, 255, 255, .7);
	}

	.resource-search__input:focus {
		outline: none;
	}

	/* Rediseño 2026-07-06 (pedido explícito, spec literal del diseñador): sin fondo/box-shadow
	   propios ni ancho/alto fijos — solo borde blanco sólido, que se aclara+rellena en hover. Texto
	   sin tocar (mismas 6 propiedades tipográficas que ya tenía). background:none explícito: sin
	   esto, un <button> sin background propio cae al estilo por defecto del navegador (gris/blanco
	   opaco, tapando la foto de fondo) — bug real reportado con captura. */
	.resource-search__btn {
		display: flex;
		padding: 17px 24px;
		justify-content: center;
		align-items: center;
		gap: 8px;
		border-radius: 4px;
		border: 1px solid #fff;
		background: none;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 13px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-inverse, #fff);
	}

	.resource-search__btn:hover {
		border: 1px solid rgba(255, 255, 255, .40);
		background: rgba(255, 255, 255, .20);
	}

	/* ---- Fila de filtros (Departamento/Proyecto/Evento) + orden ---- */
	.resource-filters {
		padding-block: 2.5rem 2rem;
	}

	.resource-filters__row {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
	}

	.resource-filters__facets {
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;
	}

	/* Agrupa el dropdown de orden + "Clear" para que .resource-filters__row (space-between) reparta
	   2 bloques (facets | aside) en vez de 3 sueltos. 2026-07-03, revertido a pedido explícito
	   (una versión anterior forzaba SIEMPRE su propia fila — el usuario prefirió el look de antes,
	   compartiendo fila con Departamento/Proyecto/Evento cuando entra): SIN width:100% ni
	   justify-content propio acá — deja que el flex-wrap NATURAL de .resource-filters__row decida.
	   Si entra al lado de los dropdowns, queda pegado a la derecha (space-between del padre). Si NO
	   entra, cae a su propia línea alineado a la IZQUIERDA — comportamiento default de un único
	   sobrante en una fila space-between, exactamente lo pedido ("si ya no cabe, se van los dos
	   abajo pero alineados a la izquierda"), sin necesidad de un breakpoint específico para eso.
	   "Clear filters" se acortó a "Clear" (filter-bar-resources.php) para que quepa más seguido. */
	.resource-filters__aside {
		display: flex;
		align-items: center;
		gap: 1rem;
	}

	.resource-filters__clear {
		display: inline-flex;
		align-items: center;
		justify-content: flex-start;
		gap: 8px;
		flex-shrink: 0;
		height: 54px;
		/* mismo alto que .resource-filter-dropdown__toggle — bug real reportado */
		padding-inline: 20px;
		border: 1px solid var(--dia-color-border-strong, #232323);
		border-radius: var(--dia-radius-sm, 4px);
		background: transparent;
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 14px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}

	/* Hover — mismo tratamiento que TODOS los botones de paginación del sitio (.resource-page-btn
	   etc. más abajo, pedido explícito de David, ver news.css) — reusado acá para que "Clear"
	   quede consistente con esos, no un hover propio distinto. */
	.resource-filters__clear:hover {
		border: 1px solid #a7b7ca;
		background: var(--dia-btn-gray-gradient);
		box-shadow: var(--dia-btn-gray-shadow);
	}

	.resource-filters__clear svg {
		width: 16px;
		height: 16px;
	}

	/* Spinner: oculto por default, htmx le agrega .htmx-request SOLO al elemento declarado en
	   hx-indicator mientras hay una petición en vuelo, y recién se muestra si dura MÁS de 300ms
	   (transition-delay, no transition-duration) — una respuesta rápida (el caso normal) nunca lo
	   llega a mostrar. position:fixed + JS (resource-spinner.js, htmx:beforeRequest) reposiciona
	   este elemento (top/left en coordenadas de VIEWPORT) sobre el filtro/botón que disparó la
	   petición — pedido explícito del usuario, mejor feedback que un lugar fijo con el dimmed de
	   #results ya activo mientras carga (body.is-loading, components/filter-bar.css).
	   2 elementos, no 1 (ver filter-bar-resources.php): el OUTER (`.resource-spinner`) SOLO centra
	   (transform estático); el INNER (`.resource-spinner__ring`) es el que gira. Si centrado y
	   rotación vivieran en el mismo elemento, la animación pisaría TODO el `transform` en cada
	   frame y el centrado (`translate(-50%,-50%)`) desaparecería. */
	.resource-spinner {
		position: fixed;
		top: 0;
		left: 0;
		transform: translate(-50%, -50%);
		width: 20px;
		height: 20px;
		opacity: 0;
		pointer-events: none;
		z-index: 100;
		/* encima del dimmed de #results (body.is-loading, opacity:.6) */
		transition: opacity 0s linear .3s;
	}

	.resource-spinner.htmx-request {
		opacity: 1;
		transition-delay: .3s;
	}

	.resource-spinner__ring {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		border: 2px solid #d0d1d3;
		border-top-color: var(--dia-color-text-primary, #121212);
		animation: resource-spinner-spin .7s linear infinite;
	}

	@keyframes resource-spinner-spin {
		to {
			transform: rotate(360deg);
		}
	}

	/* Dropdown de filtro/orden: mismo patrón de interacción que .news-filter-dropdown
	   (filter-bar-news.php/news.css) — botón + <ul> absoluta vía Alpine — pero con clases propias
	   (cada view CSS autocontenido, mismo criterio ya declarado en home-resources.css). */
	.resource-filter-dropdown {
		position: relative;
		width: 260px;
		flex-shrink: 0;
	}

	.resource-filter-dropdown--order {
		width: auto;
		min-width: 200px;
	}

	.resource-filter-dropdown__toggle {
		position: relative;
		width: 100%;
		height: 54px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 15px 44px 15px 24px;
		border-radius: var(--dia-radius-sm, 4px);
		border: 1px solid #cacaca;
		background: transparent;
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 16px;
		line-height: 24px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}

	/* Trunca con "…" en vez de envolver a varias líneas (bug real reportado: nombres largos, ej.
	   "Children and Adolescents Ministries", hacían crecer el botón a 3 líneas). min-width:0 en el
	   span (no en el <button>, que ya es flex) es lo que deja que text-overflow recorte dentro de un
	   flex item — sin esto el span se estira al ancho de su contenido y nunca llega a recortar. El
	   `title` en el <button> (filter-bar-resources.php) muestra el texto completo en un tooltip nativo. */
	.resource-filter-dropdown__label {
		min-width: 0;
		flex: 1 1 auto;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-align: left;
	}

	/* El dropdown de orden ahora en mayúsculas como Departamento/Proyecto/Evento (2026-07-03: se
	   había puesto en sentence case a pedido explícito de una ronda anterior, revertido a pedido
	   explícito de esta — consistencia visual con los otros 3). */
	.resource-filter-dropdown__toggle--main {
		border-color: var(--dia-color-border-strong, #232323);
		background: #fff;
	}

	.resource-filter-dropdown__chevron {
		position: absolute;
		right: 20px;
		top: 50%;
		transform: translateY(-50%) rotate(90deg);
		width: 16px;
		height: 16px;
		pointer-events: none;
	}

	.resource-filter-dropdown__chevron svg {
		width: 100%;
		height: 100%;
	}

	/* .resource-filter-dropdown__menu: usado SOLO por el dropdown de orden (2 opciones fijas, sin
	   buscador — no vale la pena, ver .resource-filter-dropdown__panel abajo para Departamento/
	   Proyecto/Evento, que sí pueden tener decenas/cientos de opciones). */
	.resource-filter-dropdown__menu {
		display: none;
		position: absolute;
		top: calc(100% + .5rem);
		left: 0;
		right: 0;
		z-index: 10;
		margin: 0;
		padding: 8px 0;
		list-style: none;
		background: #fff;
		border: 1px solid #e5e5e5;
		border-radius: var(--dia-radius-sm, 4px);
		box-shadow: 0 8px 18px -4px rgba(0, 0, 0, .12);
	}

	/* Antes .resource-filter-dropdown__menu--right abría con ancho propio (max-content, min 220px)
	   en vez de calzar con el toggle — pedido explícito: que abra al 100% del ancho del botón, igual
	   que Departamento/Proyecto/Evento (que ya usan left:0;right:0 de la regla base, sin modificador).
	   Se saca el override — el modificador queda sin uso en el CSS pero se mantiene en el HTML
	   (filter-bar-resources.php) por si hiciera falta diferenciarlo de nuevo más adelante. */
	.resource-filter-dropdown.is-open .resource-filter-dropdown__menu {
		display: block;
	}

	/* .resource-filter-dropdown__panel: Departamento/Proyecto/Evento — mismo look que __menu pero
	   con un buscador fijo arriba (no scrollea con la lista) + .resource-filter-dropdown__list
	   scrolleable abajo, para listas largas (ej. 155+ Events) donde hace falta poder escribir y
	   filtrar en vez de solo scrollear a ciegas — bug/pedido real reportado. */
	.resource-filter-dropdown__panel {
		display: none;
		position: absolute;
		top: calc(100% + .5rem);
		left: 0;
		right: 0;
		z-index: 10;
		background: #fff;
		border: 1px solid #e5e5e5;
		border-radius: var(--dia-radius-sm, 4px);
		box-shadow: 0 8px 18px -4px rgba(0, 0, 0, .12);
		overflow: hidden;
	}

	.resource-filter-dropdown.is-open .resource-filter-dropdown__panel {
		display: block;
	}

	.resource-filter-dropdown__search {
		padding: 8px;
		border-bottom: 1px solid #eee;
	}

	.resource-filter-dropdown__search-input {
		width: 100%;
		padding: 8px 10px;
		border: 1px solid #cacaca;
		border-radius: var(--dia-radius-sm, 4px);
		font-family: var(--font-sans);
		font-size: 14px;
		color: var(--dia-color-text-primary, #121212);
	}

	.resource-filter-dropdown__search-input:focus {
		outline: none;
		border-color: var(--dia-color-border-strong, #232323);
	}

	.resource-filter-dropdown__list {
		margin: 0;
		padding: 8px 0;
		list-style: none;
		max-height: min(60vh, 280px);
		overflow-y: auto;
	}
	@supports (scrollbar-gutter: stable) {
		.resource-filter-dropdown__list {
			/* Scrollbar delgada pero SIEMPRE visible cuando el contenido excede max-height (no solo al
			   hacer hover) — en listas largas (ej. Events con muchas entradas) sin esto no queda claro
			   que hay más opciones abajo, se puede leer como "faltan datos" cuando en realidad solo
			   falta scrollear (o, con el buscador de arriba, escribir). */
			scrollbar-gutter: stable;
		}
	}

	@supports (scrollbar-width: thin) {
		.resource-filter-dropdown__list {
			scrollbar-width: thin;
			scrollbar-color: #cacaca transparent;
		}
	}

	@supports not (scrollbar-width: thin) {
		.resource-filter-dropdown__list::-webkit-scrollbar {
			width: 8px;
		}

		.resource-filter-dropdown__list::-webkit-scrollbar-thumb {
			background: #cacaca;
			border-radius: 4px;
		}
	}

	.resource-filter-dropdown__item {
		position: relative;
		display: flex;
		align-items: flex-start;
		/* antes 'center' — check ✓ a la IZQUIERDA alineado ARRIBA, mismo
			criterio que .news-filter-dropdown__item (news.css, pedido explícito 2026-07-06):
			centrar verticalmente dejaba el check flotando a media altura con labels de 2 líneas
			(ej. nombres largos de Departamento/Proyecto). Pedido explícito 2026-07-07: aplicar la
			misma lógica acá (Departamento, Proyecto, Evento, "Newest first"). */
		justify-content: flex-start;
		/* antes 'space-between' — el check ya no se empuja al extremo
			opuesto, va agrupado junto al texto (mismo lado), igual que en news.css. */
		gap: 8px;
		width: 100%;
		text-align: left;
		padding: 12px 24px;
		border: 0;
		background: none;
		font-family: var(--font-sans);
		font-weight: 600;
		font-size: 14px;
		line-height: 20px;
		text-transform: none;
		color: var(--dia-color-text-primary, #121212);
	}

	.resource-filter-dropdown__item:hover {
		background: var(--dia-color-border-subtle, #f3f4f6);
	}

	/* Búsqueda en vivo de Proyecto/Evento (resource-filter-search.js) sin resultados. */
	.resource-filter-dropdown__empty {
		margin: 0;
		padding: 12px 24px;
		font-family: var(--font-sans);
		font-size: 14px;
		color: var(--dia-color-text-secondary, #767778);
	}

	/* Mismo tratamiento (fondo+azul+check a la izquierda, alineado arriba) que
	   .news-filter-dropdown__item[aria-current] (news.css). */
	.resource-filter-dropdown__item[aria-current="true"] {
		background: #fafbfb;
		color: #2d5480;
	}

	.resource-filter-dropdown__item[aria-current="true"]::after {
		content: '';
		order: -1;
		/* antes (izquierda) del texto — el ::after es un flex item más acá, 'order' lo
			reubica en el layout, mismo criterio que news.css. */
		width: 16px;
		height: 16px;
		flex-shrink: 0;
		/* Centra el ícono contra el cap-height de la PRIMERA línea del texto (line-height:20px acá,
		   vs. 24px en news.css — proporcional: (20-16)/2 = 2px, mismo criterio que el margin-top:4px
		   de news.css para su line-height:24px). */
		margin-top: 2px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M13 4.5L6.5 11L3 7.5' stroke='%232d5480' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
	}

	/* ---- Resumen de filtros activos (mismo look que .news-filter-summary, news.css) ---- */
	.resource-filter-summary {
		display: flex;
		align-items: center;
		gap: 12px;
		/* News usa el gap:3rem de su .news-grid (flex column) para esta separación — acá no hay un
		   wrapper con gap equivalente antes del grid, así que se declara directo. */
		margin-bottom: 2rem;
	}

	.resource-filter-summary__icon {
		display: inline-flex;
	}

	.resource-filter-summary__icon svg {
		width: 24px;
		height: 24px;
	}

	.resource-filter-summary__divider {
		width: 1px;
		height: 24px;
		background: #d0d1d3;
	}

	.resource-filter-summary__text {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -.5px;
		color: var(--dia-color-text-primary, #121212);
	}

	/* ---- Grid de resultados ---- */
	.resource-grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 30px;
	}

	/* .resource-grid:last-child (no en la regla base) — mismo bug/fix que .project-grid:last-child
	   (archive-project.css, 2026-07-08): .resource-pagination trae su PROPIO padding-block:3rem 5rem
	   autosuficiente — con la regla base aplicando padding-bottom SIEMPRE al grid, cuando la
	   paginación se imprime después ambos padding se sumaban (120px + 48px del top de la paginación
	   ≈ 168px), dejando un hueco de más entre el grid y los botones de paginación. :last-child aplica
	   el padding SOLO cuando .resource-grid es de verdad el último bloque (sin paginación después,
	   resultados que caben en 1 sola página).
	   120px desktop (>=80rem, breakpoint estándar de arquitectura §12) · 80px tablet (<80rem, ver
	   medias abajo) · 48px mobile (<48rem) — pedido explícito, antes 2rem fijo en los 3. */
	.resource-grid:last-child {
		padding-block-end: 120px;
	}

	/* ---- Card ---- */
	/* Sombra "glass" de 5 capas al hover, CLONADA de .story-card:hover (home-stories.css, Inspect
	   Figma 2329:889) — mismo criterio ya reusado en varias cards del tema. Sin overflow:hidden acá
	   (§12.2 de la arquitectura: overflow+box-shadow en el MISMO elemento recorta la sombra que
	   debería sobresalir) — el recorte de la imagen ya lo hace .resource-card__thumb aparte, esta
	   card en sí no necesita overflow propio. */
	.resource-card {
		position: relative;
		/* ancla .resource-card__link (stretched-link de toda la card) */
		display: flex;
		flex-direction: column;
		min-height: 352px;
		/* antes 316px — pedido explícito 2026-07-04. min- (no height fijo) para
			que un título largo (2 líneas + wrap) siga pudiendo crecer sin recortarse — mismo
			criterio ya usado en mobile (min-height:300px, ronda 17 más abajo). */
		border: 1px solid rgba(30, 64, 175, .2);
		border-radius: var(--dia-radius-lg, 12px);
		background: #fafbfd;
		transition: box-shadow .3s ease;
	}

	.resource-card:hover {
		box-shadow:
			0 44px 12px 0 rgba(0, 0, 0, 0),
			0 28px 11px 0 rgba(0, 0, 0, .02),
			0 16px 9px 0 rgba(0, 0, 0, .05),
			0 7px 7px 0 rgba(0, 0, 0, .09),
			0 2px 4px 0 rgba(0, 0, 0, .1);
	}

	/* Link invisible que cubre TODA la card (pedido explícito 2026-07-07: la card completa debe ser
	   clickeable para descargar/abrir el recurso, salvo .resource-card__actions). z-index:0 a
	   propósito: el thumb/título/tag de arriba ya tienen su propio z-index:1 (ver abajo) para no
	   quedar tapados por este link y así seguir siendo clickeables por separado — mismo patrón que
	   .news-card__link en home-news.css. */
	.resource-card__link {
		position: absolute;
		inset: 0;
		z-index: 0;
	}

	.resource-card__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		padding: 16px 16px 24px;
		/* flex-grow (antes justify-content:space-between en .resource-card, que espaciaba PAREJO
		   entre thumb/content/actions): con un subtítulo corto de 1 línea, ese espacio extra se
		   metía ENTRE el thumb y el content, empujando el texto hacia el centro vertical de la
		   card — pedido explícito, el texto debe quedar siempre pegado arriba (justo debajo del
		   thumb) y es .resource-card__actions quien se estira hacia abajo. */
		flex: 1 1 auto;
	}

	/* Full-bleed (pedido explícito 2026-07-04): antes vivía DENTRO de .resource-card__content, así
	   que heredaba su padding de 16px a los lados — el thumb quedaba "flotando" con aire alrededor
	   en vez de tocar los bordes de la card, como el Figma. Ahora es hermano de .resource-card__content
	   (ver card-resource.php), a todo el ancho de la card. .resource-card NO tiene overflow:hidden
	   propio (comentario de arriba, §12.2 -- lo pelearía con el box-shadow del hover), así que el
	   thumb redondea sus PROPIAS esquinas de arriba para que calcen con las de la card (12px, mismo
	   --dia-radius-lg) -- las de abajo van a 0 porque ahí sigue .resource-card__content pegado. */
	.resource-card__thumb {
		position: relative;
		z-index: 1;
		/* sobre .resource-card__link (stretched-link de toda la card, z-index:0) */
		width: 100%;
		height: 156px;
		/* antes 80px — pedido explícito 2026-07-04 */
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--dia-radius-lg, 12px) var(--dia-radius-lg, 12px) 0 0;
		overflow: hidden;
		color: inherit;
		text-decoration: none;
		/* DIA DS/Primitive/green/500 (#3E8391) — más saturado que el /50 usado antes (#e8f0f2) para
		   que el fondo plano (fallback sin ninguna imagen) tuviera algo de presencia visual. */
		background: #3e8391;
	}

	/* background (no <img>) a propósito: permite escalar la imagen MÁS ALLÁ del contenedor
	   (background-size:130%, centrada) para que el filter:blur(4px) no revele bordes desenfocados
	   dentro del marco — el overflow:hidden de .resource-card__thumb recorta el exceso. Mismo
	   efecto visual que el Figma (imagen oversized+blur), sin copiar sus valores puntuales
	   (-52px -0.37px / 118.705% 122.951%, calculados por Figma para una imagen de muestra
	   específica — ver comentario en card-resource.php). lightgray de fallback mientras carga.
	   inset:-8px (no 0): bug real reportado — con inset:0 se veía un filo/gap visible entre la
	   imagen y el borde redondeado del contenedor (probable artefacto de compositing del navegador
	   al combinar filter:blur + border-radius + overflow:hidden en un hijo absolute). Sobre-extender
	   8px más allá del contenedor (clippeado igual por el overflow:hidden del padre) esconde ese filo
	   sin depender de entender la causa exacta del glitch de renderizado. */
	.resource-card__thumb-img {
		position: absolute;
		inset: -8px;
		background-color: #d9d9d9;
		background-repeat: no-repeat;
		background-position: center;
		/* cover (no 130%): bug real reportado con fotos muy apaisadas (anchas) — background-size con
		   un solo valor porcentual solo escala el ANCHO a ese %, el alto sale de la proporción real
		   de la imagen (equivale a "130% auto"), así que una imagen ancha terminaba con un alto
		   resultante MENOR a los 156px del thumb, dejando franjas grises arriba/abajo. cover llena
		   ambas dimensiones siempre, recortando en vez de dejar huecos, sea cual sea la proporción. */
		background-size: cover;
		/* Mismo "parallax"/zoom de .story-card__img al hover (home-stories.css) — la imagen "respira"
		   un poco detrás del marco de la card. transform (no background-size) para que sea un efecto
		   de compositor (barato) en vez de repintar el layout del background en cada frame. */
		transition: transform 1s cubic-bezier(.22, 1, .36, 1);
	}

	/* Blur SOLO cuando la imagen es el fallback del Department (pedido explícito 2026-07-04, ver
	   $dia_thumb_blur en card-resource.php) — la imagen propia del recurso (o su featured image
	   nativa) se ve nítida, sin blur. */
	.resource-card__thumb-img--blur {
		filter: blur(4px);
	}

	/* .resource-card:hover (TODA la card), no .resource-card__thumb:hover — el pedido fue "en el
	   hover de la card", coherente con el box-shadow de arriba (que también se dispara en toda la
	   card, no solo pasando el mouse justo sobre el thumb). */
	.resource-card:hover .resource-card__thumb-img {
		transform: scale(1.06);
	}

	/* .resource-card__badge (ícono "link" centrado sobre el thumb) se quitó acá — 2026-07-07,
	   pedido explícito. El thumb sigue siendo un <a> clickeable por sí solo, ya no necesita el
	   ícono superpuesto como affordance visual. */

	/* position:relative + z-index:1: cuando es un <a> (Department con ID resuelto, ver
	   card-resource.php), necesita quedar arriba del thumb (también link) para que el click le
	   pertenezca a él y no al thumb que tiene debajo/atrás en el DOM — mismo criterio que
	   .news-tag en news.css (stretched-links vecinos). */
	.resource-tag {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 500;
		font-size: 12px;
		line-height: 18px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
		text-decoration: none;
	}

	a.resource-tag:hover {
		text-decoration: underline;
	}

	.resource-tag svg {
		width: 16px;
		height: 16px;
		flex-shrink: 0;
	}

	/* width:100% explícito: sin el <img> avatar de al lado (sacado 2026-07-03, ver card-resource.php),
	   el título ya no vive dentro de una fila flex — sin esto, el ancho se encoge al contenido y el
	   line-clamp de abajo no envuelve donde debería. */
	.resource-card__title {
		width: 100%;
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: var(--dia-color-text-primary, #121212);
	}

	.resource-card__title a {
		position: relative;
		z-index: 1;
		/* sobre .resource-card__link (stretched-link de toda la card, z-index:0) */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: inherit;
		text-decoration: none;
	}

	.resource-card__title a:hover {
		text-decoration: underline;
	}

	.resource-card__subtitle {
		margin: 0;
		font-family: var(--font-sans);
		font-weight: 500;
		font-size: 12px;
		line-height: 18px;
		color: var(--dia-color-text-secondary, #767778);
		/* Trim a 3 líneas — pedido explícito 2026-07-06, evita que un título de proyecto/evento
		   largo desborde la altura de la card. */
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* position:relative + z-index:1 (pedido explícito 2026-07-07): sin esto, el nuevo stretched-link
	   de toda la card (.resource-card__link) tapaba el botón de compartir — un elemento SIN position
	   propio siempre queda debajo de uno absolute, sin importar el orden en el DOM. */
	.resource-card__actions {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: stretch;
		width: 100%;
		border-top: 1px solid rgba(30, 64, 175, .2);
		/* border-radius + overflow:hidden acá (NO en .resource-card, ver §12.2 arriba): el fondo gris
		   de .resource-card__action:hover llena el botón entero (align-items:stretch) hasta tocar el
		   borde inferior de la card — sin este recorte propio, ese fondo se veía cuadrado por encima
		   de las esquinas redondeadas del contenedor padre (bug real reportado con captura). Recortar
		   acá, no en .resource-card, evita repetir el problema de sombra cortada que ya resolvió el
		   comentario de arriba. */
		border-radius: 0 0 var(--dia-radius-lg, 12px) var(--dia-radius-lg, 12px);
		overflow: hidden;
	}

	.resource-card__action {
		flex: 1 1 0;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 16px 8px;
		border: 0;
		background: none;
		color: var(--dia-color-text-primary, #121212);
		text-decoration: none;
	}

	.resource-card__action:hover {
		background: var(--dia-color-border-subtle, #f3f4f6);
	}

	.resource-card__action svg {
		width: 24px;
		height: 24px;
	}

	/* ---- Paginación (Figma "Pagination-Card", mismo criterio visual que .news-pagination) ---- */
	/* Revertido (pedido explícito del diseñador): prev/next NO van a las orillas en tablet/desktop —
	   todo el grupo (prev, números, next) centrado con el mismo espaciado entre botones, como antes. */
	/* padding-block: 5rem 7.5rem (80px/120px) — CORREGIDO 2026-07-08 (antes 3rem 5rem = 48px/80px,
	   inconsistente con .news-pagination): valor exacto del Figma, mismo en TODOS los grids con cards
	   del sitio (News/Resources/Projects) — 80px entre la última fila del grid y la paginación,
	   120px entre la paginación y el footer. Mobile (<48rem) usa 3rem 4rem, ver media query abajo,
	   mismo valor que .news-pagination en ese rango. */
	.resource-pagination {
		padding-block: 5rem 7.5rem;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 12px;
	}

	.resource-pagination__numbers,
	.resource-pagination__numbers-compact {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.resource-pagination__numbers-compact {
		display: none;
	}

	.resource-page-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 54px;
		height: 54px;
		border-radius: var(--dia-radius-sm, 4px);
		border: 1px solid var(--dia-color-text-primary, #121212);
		background: transparent;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}

	/* "…" no es un botón clickeable — sin borde propio, mismo criterio que ya no tiene hover. */
	.resource-page-btn--ellipsis {
		border: 0;
	}

	/* Hover — mismo tratamiento en TODOS los botones de paginación del sitio (pedido explícito de
	   David, ver news.css). No aplica sobre el activo (aria-current) ni sobre --ellipsis ("…"): no
	   es un botón clickeable, no debe tener hover. */
	.resource-page-btn:not([aria-current="page"]):not(.resource-page-btn--ellipsis):hover,
	.resource-page-next:not(:disabled):hover,
	.resource-page-prev:not(:disabled):hover {
		border: 1px solid #a7b7ca;
		background: var(--dia-btn-gray-gradient);
		box-shadow: var(--dia-btn-gray-shadow);
	}

	/* Activo: mismo fondo/borde que el hover, SIN el box-shadow. */
	.resource-page-btn[aria-current="page"] {
		background: var(--dia-btn-gray-gradient);
		border: 1px solid #a7b7ca;
	}

	.resource-page-btn--ellipsis {
		color: var(--dia-color-text-secondary, #767778);
	}

	.resource-page-next,
	.resource-page-prev {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		/* 16px 24px (no 17px 24px): compensa la altura para que quede igual a los .resource-page-btn
		   de 54px (16*2 + 20px de line-height + 2px de border = 54px) — pedido explícito. */
		padding: 16px 24px;
		border-radius: var(--dia-radius-sm, 4px);
		border: 1px solid var(--dia-color-border-strong, #232323);
		background: transparent;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}

	.resource-page-next svg,
	.resource-page-prev svg {
		width: 16px;
		height: 16px;
	}

	/* No hace falta margin-right en .resource-page-prev: .resource-pagination ya es flex con
	   gap:12px entre TODOS sus hijos directos (prev, números, next) — un margin extra acá sumaría
	   24px en vez de 12px solo entre prev y números, desparejo contra el resto de los gaps. */
	/* No existe un ícono 'chevron-left' propio (dia_icon(), inc/helpers.php) — se reusa
	   'chevron-right' rotado 180°, mismo patrón que .news-page-prev__icon. */
	.resource-page-prev__icon {
		display: inline-flex;
		transform: rotate(180deg);
	}

	/* Disabled (mobile Y desktop/tablet, pedido explícito: prev/next SIEMPRE visibles, incluso sin
	   página a donde ir — ver pagination-resources.php, ahí llevan el atributo `disabled` real de
	   HTML, sin hx-get, en vez de omitir el botón). */
	.resource-page-next:disabled,
	.resource-page-prev:disabled {
		opacity: .35;
		cursor: not-allowed;
	}

	/* .resource-pagination__mobile: bloque separado (duplica prev/next/números) SOLO para <48rem —
	   oculto por default, el media query de abajo lo activa y oculta el bloque desktop en su lugar. */
	.resource-pagination__mobile {
		display: none;
	}

	/* ---- Estado vacío — CLONADO 1:1 de .news-empty-outer/.news-empty (news.css), mismos valores
	   literales (tipografía/colores/espaciado), clases propias (ver no-results-resource.php). ---- */
	.resource-empty-outer {
		padding: 48px;
		border-radius: 8px;
		background: rgba(226, 231, 235, .2);
		margin-bottom: 120px;
	}

	.resource-empty {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 24px;
		padding: 84px;
		border-radius: 16px;
		border: 1px solid #e5e5dc;
		background: rgba(245, 245, 241, .8);
		text-align: center;
	}

	.resource-empty__icon svg {
		width: 80px;
		height: 80px;
		color: var(--dia-color-text-primary, #121212);
	}

	.resource-empty__title {
		margin: 0;
		max-width: 585px;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 24px;
		line-height: 32px;
		letter-spacing: -.5px;
		color: #000;
	}

	.resource-empty__desc {
		margin: 0;
		max-width: 585px;
		font-family: var(--font-sans);
		font-weight: 400;
		font-size: 20px;
		line-height: 32px;
		color: #000;
	}

	.resource-empty__reset {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 17px 24px;
		border-radius: 4px;
		border: 1px solid var(--dia-color-border-strong, #232323);
		background: transparent;
		font-family: var(--font-sans);
		font-weight: 700;
		font-size: 13px;
		line-height: 20px;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: var(--dia-color-text-primary, #121212);
	}

	.resource-empty__reset svg {
		width: 16px;
		height: 16px;
	}

	/* ---- Responsive — 4 niveles de grid, pedido explícito 2026-07-03:
	   <768px: 1 columna · 768–1023px: 2 · 1024–1279px: 3 · >=1280px (80rem): 4 (default, sin
	   media query — ver .resource-grid arriba). Breakpoint estándar 80rem de arquitectura §12 para
	   el resto de ajustes (padding del buscador, etc.), más 2 quiebres intermedios propios de este
	   grid (48rem/64rem) que no se reusan en ningún otro lado del tema. ---- */
	@media (width < 80rem) {
		.resource-hero {
			padding-block: 2rem;
		}

		.resource-search {
			padding: clamp(1rem, 4vw, 50px);
		}

		.resource-grid:last-child {
			padding-block-end: 80px;
		}
	}

	@media (64rem <=width < 80rem) {
		.resource-grid {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		/* Pedido explícito 2026-07-10 (mismo criterio ya aplicado a Projects, archive-project.css):
		   los 3 dropdowns a 260px c/u venían MUY justos en este rango puntual (1024-1279px) — se
		   achican a 170px + texto a 14px para que entren cómodos junto a orden+"Clear" en una sola
		   fila (.resource-filters__aside, sin width propio, decide con el flex-wrap natural de
		   .resource-filters__row si entra o no en esa misma línea). */
		.resource-filter-dropdown {
			width: 170px;
		}

		.resource-filter-dropdown--order {
			width: auto;
		}

		.resource-filter-dropdown__toggle {
			font-size: 14px;
		}
	}

	@media (48rem <=width < 64rem) {
		.resource-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		/* Bug real reportado (con captura, 899px y 1023px): en este rango .resource-filters__facets
		   YA envuelve internamente a 2 columnas de forma NATURAL (3 dropdowns de 260px fijos,
		   flex-shrink:0, no entran en una sola fila acá — sin necesidad de forzarles un ancho propio,
		   a diferencia de una versión anterior que sí lo hacía) — un segundo nivel de flex-wrap
		   anidado (el de .resource-filters__row decidiendo si ADEMÁS entra .resource-filters__aside
		   en esa misma línea) da resultados erráticos: a veces el grupo de orden+Clear queda flotando
		   a la derecha de la PRIMERA fila interna de facets (pegado junto a Departamento/Proyecto,
		   nada que ver visualmente con Evento debajo), a veces cae a su propia línea aunque hubiera
		   espacio libre junto a Evento — depende del ancho exacto, sin patrón predecible. Fix: en
		   este rango puntual (NO en 1024px+, que sí funciona bien con el flex-wrap natural porque ahí
		   facets NO envuelve internamente) se fuerza su propia fila completa, alineada a la
		   izquierda (mismo lado que los dropdowns de arriba, no a la derecha). */
		.resource-filters__aside {
			width: 100%;
			justify-content: flex-start;
		}

		/* Paginación (bug real reportado: en 768px la ventana fija de 7 casillas de
		   .resource-pagination__numbers no cabe junto a "previous"/"next" con texto — a partir de
		   1024px sí entra bien). Pedido explícito del diseñador: en este rango puntual (48-64rem) se
		   usa una ventana más angosta (mismo algoritmo, siblingCount=0 en vez de 1 — hasta 4 números
		   reales como máximo: "1 2 3 … 39", "1 … 4 … 39", ver $dia_tablet_items en
		   pagination-resources.php). */
		.resource-pagination__numbers {
			display: none;
		}

		.resource-pagination__numbers-compact {
			display: flex;
		}
	}

	@media (width < 48rem) {
		.resource-hero {
			padding-block: 1.5rem;
		}

		/* Fila (NO columna) también en mobile — pedido explícito, el botón sigue al lado del input,
		   no apilado abajo (revertido: un intento anterior lo apilaba con flex-direction:column).
		   height:80px del desktop no entra en una pantalla angosta con ese padding — se achica todo
		   el bloque (form/input/botón) en vez de cambiar el layout a columna. */
		.resource-search__form {
			height: auto;
			min-height: 56px;
			padding: 8px 8px 8px 16px;
			gap: 8px;
		}

		.resource-search__input {
			height: auto;
			padding-inline: 0;
			font-size: .875rem;
		}

		.resource-search__btn {
			width: auto;
			height: 40px;
			padding-inline: 16px;
			font-size: 11px;
		}

		.resource-grid {
			grid-template-columns: 1fr;
		}

		.resource-grid:last-child {
			padding-block-end: 48px;
		}

		/* Mismo valor que .news-pagination en este rango (news.css) — congruencia entre grids. */
		.resource-pagination {
			padding-block: 3rem 4rem;
		}

		/* min-height explícito: sin esto, una card con poco contenido (sin tag/subtítulo) quedaba
		   más baja que sus vecinas en la columna única de mobile — pedido explícito. */
		.resource-card {
			min-height: 300px;
		}

		.resource-filter-dropdown,
		.resource-filter-dropdown--order {
			width: 100%;
		}

		.resource-filters__facets {
			width: 100%;
		}

		/* width:100% acá (además de flex-wrap): sin esto, .resource-filters__aside (sin ancho propio
		   en la regla base) queda shrink-to-fit a su propio contenido en vez de ocupar toda la fila
		   — bug real reportado, "Clear" no llegaba a medir 100% pese a tener su propia regla de
		   abajo, porque el CONTENEDOR que lo envuelve nunca llegaba a ser tan ancho como Departamento/
		   Proyecto/Evento arriba. */
		.resource-filters__aside {
			flex-wrap: wrap;
			width: 100%;
		}

		/* justify-content: center solo en mobile — en desktop el botón queda pegado a la
		   izquierda (base .resource-filters__clear usa flex-start), pero al pasar a width:100%
		   acá el texto+ícono quedaban descentrados dentro del ancho completo — pedido explícito. */
		.resource-filters__clear {
			width: 100%;
			justify-content: center;
		}

		/* Paginación mobile (bug real reportado, iteración 2 — el diseñador se arrepintió de la
		   versión con "actual … última" en cuadros clickeables): prev/next son los ÚNICOS botones acá
		   (disabled real de HTML cuando no aplican, nunca omitidos); el resto es solo informativo —
		   texto plano "actual DE total" (.resource-pagination__mobile-status, ver
		   pagination-resources.php), no un botón. Bloque de markup propio (.resource-pagination__mobile),
		   no el de desktop con piezas ocultas por CSS. */
		.resource-pagination__numbers,
		.resource-page-prev--desktop,
		.resource-page-next--desktop {
			display: none;
		}

		/* pedido explícito: la fila ocupa todo el ancho, "<" pegado a la izquierda, ">" pegado a la
		   derecha (space-between, sin gap fijo) y el texto centrado entre medio (flex:1 + text-align:
		   center en .resource-pagination__mobile-status abajo, no un simple gap). */
		.resource-pagination__mobile {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
		}

		.resource-page-nav__label {
			display: none;
		}

		/* height explícito (antes solo padding): sin esto el botón quedaba con altura variable según
		   el ícono — pedido explícito ("checa el alto de los botones") para que quede cuadrado. */
		.resource-page-next,
		.resource-page-prev {
			height: 40px;
			padding-inline: 11px;
			padding-block: 0;
		}

		/* Misma tipografía que los botones de número en tablet/desktop (.resource-page-btn, regla
		   base) — pedido explícito, no un tamaño propio inventado para mobile. */
		.resource-pagination__mobile-status {
			flex: 1;
			text-align: center;
			font-family: var(--font-sans);
			font-weight: 700;
			font-size: 13px;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: var(--dia-color-text-primary, #121212);
		}

		/* Mismo criterio que .news-empty en mobile: el wrapper tenue (.resource-empty-outer) solo
		   resta espacio sin aportar nada visible en una pantalla angosta — se aplana a "sin caja". */
		.resource-empty {
			padding: 48px 24px;
		}

		.resource-empty-outer {
			padding: 0;
			border-radius: 0;
			background: none;
		}
	}
}