/* ============================================================
   0. DESIGN TOKENS — Variables CSS
   ============================================================ */

:root {
  /* Bootstrap consume esta variable internamente en su CSS compilado;
     no se llama con var() en este fichero, pero debe seguir aquí. */
  --bs-body-font-family: var(--edatos-font-family);

  /* Colores neutros — sin equivalente en Alisio (ver auditoría) */
  --color-gray-dark: #59656e;
  --color-white-semi: rgba(255, 255, 255, 0.70);

  /* Espaciado — sin equivalente exacto en la escala de Alisio */
  --spacing-md: 16px;
  --spacing-lg: 24px;

  /* Sombras — Alisio no define tokens de shadow */
  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.10);
  --shadow-dropdown: 0 2px 8px rgba(0, 0, 0, 0.12);

  /* Layout */
  --container-max-width: 1400px;
  --sidebar-width: 289px;

  /* Transiciones */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;

  /* Tokens CKAN propios */
  --ckan-font-size-heading: 24px;
  --ckan-border-radius-card: 10px;
  --ckan-divider-on-dark: rgba(255, 255, 255, 0.3);
}


/* ============================================================
   1. RESET / BASE
   Tipografía base, body background, reset mínimo
   ============================================================ */
.main {
    padding-top: 0px;
}

.edatos-custom-header {
	display: flex;
    gap: var(--edatos-spacing-x-xs);
    flex-flow: wrap;
    justify-content: flex-end;
    background: none !important;
    color: var(--edatos-color-secondary-100);
    padding: var(--edatos-spacing-y-sm) var(--edatos-spacing-x-page);
    align-items: center;
}
#edatos-custom-header {
    background: none !important;
}
body {
	background-image: none;
	background-color: var(--edatos-color-gray-5);
	background-size: cover;
	background-position: center center;
	padding: 0;
}

a:hover,
a:focus {
	text-decoration: none;
}

input,
select,
textarea {
	color: var(--edatos-color-gray-80, #333333);
}


/* ============================================================
   2. LAYOUT — Container, Grid, Main
   ============================================================ */

[role=main],
.main {
	background: none;
	padding-bottom: 80px;
	min-height: 700px;
}

@media only screen and (min-width: 1399px) {
	.container {
		width: var(--container-max-width);
	}

	.span6 {
		width: 680px;
	}

	.span9 {
		width: 1170px;
	}

	.span12 {
		width: var(--container-max-width);
	}
}

.span12 {
	margin: 0;
}

@media only screen and (max-width: 767px) {
	[class*="span"],
	.uneditable-input[class*="span"],
	.row-fluid [class*="span"] {
		float: left;
	}
}


/* --- Sidebar recurso: bloque Formato con fondo azul oscuro --- */
.secondary .module.context-info {
	background: var(--edatos-color-secondary-100, #004678);
	border-radius: var(--ckan-border-radius-card);
	padding: 30px 10px;
	width: 100%;
	box-sizing: border-box;
}

.secondary .module.context-info .module-content {
	background: transparent;
	padding: 0;
}

.secondary .module.context-info .nums {
	flex-direction: column;
	gap: 13px;
}

.secondary .module.context-info .nums dl {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13px;
	margin: 0;
	width: 100%;
}

.secondary .module.context-info .nums dt {
	color: var(--edatos-color-white-100, #FFF);
	font-size: var(--edatos-font-size-xs);
	font-weight: var(--edatos-font-weight-regular);
	line-height: 16px;
	border-bottom: 0.5px solid var(--ckan-divider-on-dark);
	width: 100%;
	text-align: center;
	padding-bottom: 13px;
	margin: 0;
}

.secondary .module.context-info .nums dd {
	color: var(--edatos-color-white-100, #FFF);
	font-size: var(--ckan-font-size-heading);
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0;
}



/* ============================================================
   3. NAVEGACIÓN — Navbar, Header white bar, Dropdown
   ============================================================ */

.istac-app-header.istac-title-bar .account ul li {
	border-left: 1px solid var(--edatos-color-gray-20, #cccccc);
}

.istac-app-header.istac-title-bar .account ul li a {
	display: block;
	color: var(--color-gray-dark);
	font-size: var(--edatos-font-size-md);
	font-weight: initial;
	padding: 0 var(--edatos-spacing-y-sm);
	line-height: 31px;
}

.istac-app-header.istac-title-bar .account ul li a:hover {
	color: var(--edatos-color-white-100, #ffffff);
	background-color: var(--edatos-color-light-blue-100);
	text-decoration: none;
}

.istac-app-header.istac-title-bar .account ul li a.btn-datasets,
.nav-item.active > a,
.nav-aside li.active a {
	background-color: var(--edatos-color-white-100);
	color: var(--edatos-color-white-100, #ffffff);
	min-width: 90px;
	text-align: center;
}

.module-narrow .nav-item.active, .module-narrow .nav-aside li.active {
    background-color: var(--edatos-color-white-100);
}

.istac-app-header.istac-title-bar .account ul li a.btn-datasets:hover,
.istac-app-header.istac-title-bar .account ul li.active a.btn-datasets {
	background-color: var(--edatos-color-light-blue-100);
	color: var(--edatos-color-white-100, #ffffff);
}

.istac-app-header.istac-title-bar .nav-collapse {
	margin-right: var(--edatos-spacing-x-page);
}

/* El header remoto (componentes-apps) usa iconos Font Awesome PRO (fa-thin/fa-grid).
   El bundle local de CKAN carga Font Awesome FREE después en el DOM, y al tener
   igual especificidad que la regla ".fa" de PRO, gana la cascada y sobrescribe
   font-family/font-weight, dejando esos iconos sin glifo (se ven como "X" rota). */
.edatos-dropdown .fa-thin,
.edatos-dropdown-menu .fa-thin {
	font-family: "Font Awesome 6 Pro" !important;
	font-weight: 100 !important;
}

/* Resetear herencia de Bootstrap/CKAN nav-pills para la barra blanca */
.navigation .nav-pills li a {
	background-color: transparent;
	color: var(--edatos-color-secondary-100);
	box-shadow: none;
	border-bottom: none;
}

.navigation .nav-pills li a:hover,
.navigation .nav-pills li.active a {
	background-color: transparent;
}

nav.navigation div ul li {
	border-left: unset;
}

.nav-item.active > a::before,
.nav-aside li.active a::before {
	content: ' ';
	position: absolute;
	top: 0;
	right: -10px;
	width: 0;
	height: 0;
	border-top: 17px solid transparent;
	border-bottom: 17px solid transparent;
	border-left: 10px solid var(--edatos-color-light-blue-100);
	background-image: none;
}

.nav-item.active > a:hover,
.nav-aside li.active a:hover {
	color: var(--edatos-color-white-100, #ffffff);
	background-color: var(--edatos-color-light-blue-100);
}



.edatos-custom-app-header {
	background-color: var(--edatos-color-white-100, #ffffff);
	display: flex;
	flex-direction: row;
	align-items: center;
	min-height: 44px;
	padding: var(--edatos-spacing-y-sm) var(--spacing-md);
	border-bottom: var(--edatos-border-width-xs, 1px) solid var(--edatos-color-gray-20, #cccccc);
}

/* Navegación principal: Inicio | Datos | Colecciones
   Basado en .section-tab .nav.nav-pills del sistema de diseño EDATOS */
.navigation .nav-main-links {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 8px 20px 0;
	gap: 0;
}

.navigation .nav-main-links li {
	border-left: none;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
}

/* Sin separador "|" entre ítems */
.navigation .nav-main-links li + li::before {
	content: none;
}

/* Enlace base: tipografía light, color azul oscuro, sin borde */
.navigation .nav-main-links li a.btn-datasets {
	display: block;
	padding: 8px 16px;
	background: none;
	color: var(--edatos-color-secondary-100, #004678);
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-light);
	line-height: 20px;
	border: none;
	border-bottom: 6px solid transparent;
	border-radius: 0;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.2s ease, color 0.2s ease;
	cursor: pointer;
}

/* Hover: subrayado azul medio */
.navigation .nav-main-links li a.btn-datasets:hover {
	background: none;
	text-decoration: none;
	color: var(--edatos-color-secondary-100, #004678);
	border-bottom: 6px solid var(--edatos-color-primary-50, #009BD7);
}

/* Ítem activo: texto secondary + semibold + subrayado accent */
.navigation .nav-main-links li.active a.btn-datasets {
	background: none;
	color: var(--edatos-color-secondary-100, #004678);
	font-weight: var(--edatos-font-weight-semibold);
	border-bottom: 6px solid var(--edatos-color-accent-100, #009BD7);
}

/* Contenedor del nav: links izquierda, Opciones derecha */
nav.section.navigation {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: var(--edatos-spacing-y-sm);
}

/* Contexto de posicionamiento para dropdown de cuenta */
.account.avatar.authed,
.navbar-collapse .btn-group {
	position: relative;
	display: flex;
	align-items: center;
	list-style: none;
    padding: 0;
    margin: 0;
}

.navbar-collapse .btn-group > li.nav {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

.navbar-collapse {
	display: flex;
	align-items: center;
	width: 100%;
}

.collapsable-menu ul {
	display: flex;
	gap: var(--edatos-spacing-x-xs);
	margin-bottom: 0;
}

#language-selector {
	padding: var(--edatos-spacing-x-xs);
}

/* Dropdown */
.dropdown-menu {
	position: absolute;
	top: 100%;
	z-index: 1000;
	display: none;
	float: right;
	min-width: 155px;
	margin-top: 0;
	padding: 0;
	font-size: var(--edatos-font-size-sm);
	text-align: left;
	list-style: none;
	background-color: var(--edatos-color-secondary-100);
	-webkit-box-shadow: var(--shadow-dropdown);
	box-shadow: var(--shadow-dropdown);
	right: 0;
	left: unset;
	border-radius: var(--edatos-border-radius-sm, 5px) 0 var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px);
	border: unset;
	overflow: hidden;
}

.dropdown-menu li {
	width: 100%;
	margin: 0;
	padding: 0;
}

.dropdown-menu li a {
	color: var(--edatos-color-white-100, #ffffff);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: var(--edatos-spacing-y-xs) var(--edatos-spacing-y-sm);
	margin: 6px var(--edatos-spacing-x-xs);
	border-radius: var(--edatos-border-radius-sm, 5px);
	text-decoration: none;
	font-size: var(--edatos-font-size-sm);
	font-style: normal;
	font-weight: var(--edatos-font-weight-light);
	line-height: 1.4;
	white-space: nowrap;
}

/* Sentence case en ítems de dropdown con icono.
   El hero nav usa <span class="text">, resource_item usa texto directo.
   ::first-letter solo funciona en display:block/inline-block, no en flex. */
.dropdown-menu li a span.text {
	text-transform: lowercase;
	display: inline-block;
}

.dropdown-menu li a span.text::first-letter {
	text-transform: uppercase;
}

.dropdown-menu li a i {
	flex-shrink: 0;
	width: 20px;
	text-align: center;
	font-size: var(--edatos-font-size-sm);
    font-family: "Font Awesome 6 Pro";
    font-weight: var(--edatos-font-weight-light);
}

.dropdown-menu li a:hover {
	background-color: var(--edatos-color-primary-5);
    color: var(--edatos-color-primary-100);
}

.dropdown-menu.abrir {
	-webkit-transition: var(--transition-fast);
	-moz-transition: var(--transition-fast);
	-ms-transition: var(--transition-fast);
	-o-transition: var(--transition-fast);
	transition: var(--transition-fast);
	transition-property: opacity, visibility;
	visibility: visible;
	opacity: 1;
	display: flex;
	flex-flow: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
	transform: translateY(0);
	pointer-events: initial;
	text-align: left;
	margin-right: 10px;
}

/* Botón hamburguesa / Opciones navbar */
.btn.btn-navbar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	background-color: var(--edatos-color-white-100, #fff);
	background-image: none;
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-light, 300);
	color: var(--edatos-color-primary-100, #004678);
	border: 1px solid var(--edatos-color-primary-100, #004678);
	box-shadow: none;
	padding: var(--edatos-spacing-y-xs) var(--edatos-spacing-y-sm);
	border-radius: var(--edatos-border-radius-sm, 5px);
	cursor: pointer;
	margin-right: 10px;
	transition: background-color 0.25s, color 0.25s, border-radius 0.2s;
	text-transform: uppercase;
}

/* Icono chevron: transición de rotación */
.btn.btn-navbar i {
	transition: transform 0.25s, color 0.25s;
}

/* Hover suave */
button.btn.btn-navbar:hover {
	background-color: var(--edatos-color-secondary-100);
	color: var(--edatos-color-white-100);
	border: 1px solid var(--edatos-color-secondary-100, #004678);
}

/* Estado abierto: detectado cuando el dropdown hermano tiene clase .abrir */
li.nav:has(.dropdown-menu.abrir) .btn.btn-navbar,
li.nav:has(.dropdown-menu.abrir) .btn.btn-navbar:hover {
	background-color: var(--edatos-color-secondary-100, #004678);
	color: var(--edatos-color-white-100, #fff);
	/* Aplana la esquina inferior derecha para conectar con el menú (alineado a la derecha) */
	border-radius: var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px) 0 0;
	border: 1px solid var(--edatos-color-secondary-100, #004678);
}

/* Iconos en estado abierto */
li.nav:has(.dropdown-menu.abrir) .btn.btn-navbar i {
	color: var(--edatos-color-white-100, #fff);
}

/* Chevron rotado al abrir */
li.nav:has(.dropdown-menu.abrir) .btn.btn-navbar i.fa-chevron-down {
	transform: rotate(180deg);
}


/* Botón de acción inline (ej: Añadir grupo) con visual de btn-navbar */
.btn.btn-navbar.btn-add-group {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: auto;
}

.btn.btn-navbar.btn-add-group:hover {
	background-color: var(--edatos-color-secondary-100);
	color: var(--edatos-color-white-100);
}

.dropdown-menu.show {
    display: block;
    min-width: 155px;
	border-radius: var(--edatos-border-radius-sm, 5px) 0 var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px);
}
/* Responsive navbar */
@media (max-width: 1199px) {

	.dropdown-menu {
		-webkit-transition: var(--transition-base);
		-moz-transition: var(--transition-base);
		-ms-transition: var(--transition-base);
		-o-transition: var(--transition-base);
		transition: var(--transition-base);
		transition-property: height;
	}

	.dropdown-menu ul {
		flex-flow: column;
	}

	.nav-collapse,
	.nav-collapse.collapse {
		overflow: hidden;
		height: 0;
		padding-top: 1.5rem;
	}



}

@media (max-width: 767px) {
	a.logo img.logo-corto {
		padding: var(--edatos-spacing-y-sm);
	}
}

@media (min-width: 1200px) {

	.btn.btn-navbar {
		display: inline-flex;
	}
}


/* ---- Primary navbar (nuevo desde code_templates) ---- */

#edatos-primary-nav-wrapper {
	width: 100%;
	background-color: var(--edatos-color-white-100, #ffffff);
	border-bottom: var(--edatos-border-width-xs, 1px) solid var(--edatos-color-gray-20, #cccccc);
	box-shadow: var(--shadow-card);
}

.primary-navbar {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	padding: 0 var(--spacing-lg);
	margin: 0;
	max-width: 100%;
}

.primary-nav-menu {
	display: flex;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav-item {
	display: flex;
	align-items: stretch;
}

.primary-nav-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--edatos-spacing-y-sm);
	padding: 13px var(--spacing-md);
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-regular, 400);
	color: var(--color-gray-dark);
	text-decoration: none;
	border-bottom: 6px solid transparent;
	white-space: nowrap;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.primary-nav-link:hover {
	color: var(--edatos-color-secondary-100);
	text-decoration: none;
	border-bottom-color: rgba(0, 155, 215, 0.4);
}

.primary-nav-link.active {
	color: var(--edatos-color-secondary-100);
	font-weight: var(--edatos-font-weight-bold, 700);
	border-bottom: 6px solid var(--edatos-color-accent-100, #009BD7);
}

.primary-nav-account {
	display: flex;
	align-items: center;
}

.btn-user-menu {
	display: flex;
	align-items: center;
	gap: var(--edatos-spacing-y-sm);
	background: none;
	border: none;
	padding: var(--edatos-spacing-y-sm) var(--spacing-md);
	color: var(--color-gray-dark);
	font-size: var(--edatos-font-size-sm);
	cursor: pointer;
	border-radius: var(--edatos-border-radius-sm, 5px);
	transition: background-color var(--transition-fast);
	line-height: 1;
	box-shadow: none;
}

.btn-user-menu:hover {
	background-color: var(--edatos-color-gray-5);
}

.user-dropdown-wrapper {
	position: relative;
}

.user-dropdown-menu {
	position: absolute;
	right: 0;
	top: 100%;
	z-index: 2000;
	min-width: 220px;
	background-color: var(--edatos-color-secondary-100);
	border-radius: var(--edatos-border-radius-sm, 5px);
	box-shadow: var(--shadow-dropdown);
	display: none;
	padding: var(--edatos-spacing-y-xs) 0;
	list-style: none;
	margin: 0;
}

.user-dropdown-menu.abrir {
	display: block;
}

.user-dropdown-menu li a {
	display: flex;
	align-items: center;
	gap: var(--edatos-spacing-y-sm);
	padding: var(--edatos-spacing-y-sm) var(--spacing-md);
	color: var(--edatos-color-white-100, #ffffff);
	text-decoration: none;
	font-size: var(--edatos-font-size-sm);
	transition: background-color var(--transition-fast);
}

.user-dropdown-menu li a:hover {
	background-color: var(--edatos-color-light-blue-100);
	color: var(--edatos-color-white-100, #ffffff);
}

.user-dropdown-menu .dropdown-divider-item {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin-top: var(--edatos-spacing-y-xs);
	padding-top: var(--edatos-spacing-y-xs);
}

.btn-login {
	display: flex;
	align-items: center;
	gap: var(--edatos-spacing-y-sm);
	padding: var(--edatos-spacing-y-sm) var(--spacing-md);
	color: var(--edatos-color-secondary-100);
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-regular, 400);
	text-decoration: none;
	border: var(--edatos-border-width-xs, 1px) solid var(--edatos-color-secondary-100);
	border-radius: var(--edatos-border-radius-sm, 5px);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btn-login:hover {
	background-color: var(--edatos-color-secondary-100);
	color: var(--edatos-color-white-100, #ffffff);
	text-decoration: none;
}

@media (max-width: 767px) {
	.primary-navbar {
		flex-wrap: wrap;
		padding: 0 var(--spacing-md);
	}

	.primary-nav-menu {
		order: 2;
		width: 100%;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.primary-nav-menu::-webkit-scrollbar {
		display: none;
	}

	.primary-nav-account {
		order: 1;
		margin-left: auto;
		padding: var(--edatos-spacing-y-sm) 0;
	}

	.user-display-name {
		display: none;
	}
}


/* ============================================================
   4. HOME — Hero, Search module, Categories
   ============================================================ */
.homepage .hero {
	background: none;
	padding: 0;
}

.hero,
.main.hero {
	background-image: none;
	background-color: var(--edatos-color-gray-5);
}

.hero-nav {
	background-color: var(--edatos-color-white-100, #ffffff);
	padding: 0;
	box-shadow: var(--shadow-card);
	overflow: visible;
	position: relative;
	z-index: 10;
}

.nav-login-error {
	flex: 1;
	margin: 0 12px;
	padding: 6px 12px;
	font-size: 0.85rem;
	border-radius: var(--edatos-border-radius-sm, 4px);
	background-color: #f8d7da;
	color: #842029;
	border: 1px solid #f5c2c7;
	display: flex;
	align-items: center;
	gap: 6px;
}

.nav-login-error-close {
	margin-left: auto;
	background: none;
	border: none;
	color: #842029;
	cursor: pointer;
	padding: 0 2px;
	line-height: 1;
	opacity: 0.7;
}

.nav-login-error-close:hover {
	opacity: 1;
}

.hero-subtitle {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--edatos-font-size-lg);
	font-weight: var(--edatos-font-weight-regular);
	line-height: 1.5;
	text-align: center;
	margin: 0 0 var(--spacing-md) 0;
}

.hero-subtitle strong {
	color: var(--edatos-color-white-100, #fff);
	font-weight: var(--edatos-font-weight-bold);
}

.search-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--edatos-spacing-x-xs);
	justify-content: center;
	padding: var(--edatos-spacing-y-sm) 0;
}

.search-filters .filter-tag {
	display: flex;
	height: 27px;
	padding: 1px 10px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: var(--edatos-border-radius-xs);
	background: var(--edatos-color-white-100);
	color: var(--edatos-color-primary-100);
	font-size: var(--edatos-font-size-sm);
	font-style: normal;
	font-weight: 500;
	line-height: 24px;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
	text-decoration: none;
}

.search-filters .filter-tag:hover {
	border: 1px solid var(--edatos-color-primary-100);
    background: var(--edatos-color-primary-10);
    color: var(--edatos-color-primary-100);
	text-align: center;
	text-decoration: none;
}

.search-filters .filter-tag.active {
	border: 1px solid var(--edatos-color-white-100, #FFF);
    background: var(--edatos-color-primary-100);
	color: var(--edatos-color-white-100, #FFF);
	text-align: center;
}

.homepage .module-search .module-content {
	background-color: transparent;
}

.box {
	background-color: transparent;
	margin-bottom: var(--spacing-md);
}

.homepage .module-search {
	position: relative;
	background-color: var(--edatos-color-accent-100);
    border-radius: var(--edatos-border-radius-md);
    width: 100%;
    padding: var(--edatos-spacing-x-l);
    justify-content: center;
    max-width: var(--edatos-max-container-width);
    margin: 0 auto;
	height: 22rem;
}

.container.search-content {
    max-width: var(--edatos-max-container-width);
    margin: 0 auto;
    width: 100%;
    padding-left: var(--edatos-spacing-x-m);
    padding-right: var(--edatos-spacing-x-m);
    padding-top: var(--edatos-spacing-y-lg);
    padding-bottom: var(--edatos-spacing-x-l);
    background-color: var(--edatos-color-white-100);
}

.module-search .heading {
	text-align: center;
	font-size: var(--edatos-font-size-2xl);
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 110%;
	color: var(--edatos-color-white-100, #ffffff);
}

.module-search::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url('../../search-background.png');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	opacity: 0.2;
	z-index: 1;
	border-radius: 0 0 var(--edatos-border-radius-md) var(--edatos-border-radius-md);
}

.module-search > * {
	position: relative;
	z-index: 2;
}

.homepage .search-form .search-input.search-giant button {
	position: relative;
	top: auto;
	right: auto;
	display: flex;
	height: 50px;
	padding: 5px 14px;
	justify-content: center;
	align-items: center;
	gap: 5px;
	margin-top: 0;
	align-self: stretch;
	border-radius: 0 5px 5px 0;
	border: none;
	background-color: var(--edatos-color-white-100);
	color: var(--edatos-color-secondary-100);
}


.media-item.group-home-item {
	position: relative;
	list-style: none;
}

.media-grid {
	margin: 0;
	padding: 12px 0;
	background: none;
	background-color: var(--color-white-semi);
	display: flex;
	flex-flow: wrap;
	justify-content: flex-start;
	border:none;
}

.categories-section {
	background-color: var(--edatos-color-white-100, #f5f5f5);
}

.categories-grid {
	list-style: none;
	margin: 0;
	padding: var(--spacing-md);
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.categories-grid--3col {
	grid-template-columns: repeat(3, 1fr);
}

.category-item,
.categories-grid .media-item.group-home-item {
	list-style: none;
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
}

/* Group home card link */
.group-home-card-link {
	display: flex;
	height: 89px;
	padding: 20px;
	justify-content: flex-start;
	align-items: center;
	gap: 20px;
	border-radius: var(--edatos-border-radius-sm, 5px);
	background-color: var(--edatos-color-gray-5, #f2f2f2);
	text-decoration: none;
	transition: background-color 0.2s ease;
	color: var(--edatos-color-secondary-100, #004678);
	box-sizing: border-box;
}

.group-home-card-link:hover {
	background-color: var(--edatos-color-primary-100, #004678);
	text-decoration: none;
	color: var(--edatos-color-white-100, #fff);
}

.group-home-card-link:hover .group-home-fa-glyph,
.group-home-card-link:hover .media-heading {
	color: var(--edatos-color-white-100, #fff);
}

/* Group home title */
.categories-grid .media-item.group-home-item .media-heading {
	font-size: var(--edatos-font-size-lg);
	font-style: normal;
	font-weight: var(--edatos-font-weight-regular);
	line-height: 120%;
	margin: 0;
	flex: 1;
	text-align: left;
}

.categories-grid .media-item.group-home-item .media-heading:hover {
	color: var(--edatos-color-white-100);
}

/* Group dataset count badge */
.group-dataset-count {
	display: inline-block;
	background-color: var(--edatos-color-primary-10, #ccdae4);
	padding: 2px 6px;
	font-size: var(--edatos-font-size-xs);
	font-weight: var(--edatos-font-weight-regular, 400);
	color: var(--edatos-color-gray-80, #333333);
	text-transform: uppercase;
	line-height: normal;
}

/* Botón "Quitar" pegado a la esquina inferior derecha de la card de grupo */
.categories-grid .media-item.group-home-item .media-edit {
	right: var(--edatos-spacing-x-xs, 8px);
	bottom: var(--edatos-spacing-y-xs, 8px);
}

/* Hide "Order by" on group index */
#group-search-form .control-order-by {
	display: none;
}

@media (max-width: 600px) {
	.categories-grid,
	.categories-grid--3col {
		grid-template-columns: repeat(2, 1fr);
	}

	.group-home-card-link {
		flex-direction: column;
		gap: 10px;
		padding: 14px;
	}

	.categories-grid .media-item.group-home-item .media-heading {
		font-size: var(--edatos-font-size-sm);
		text-align: center;
	}
}


/* ============================================================
   5. DATASET LIST — Listado de conjuntos de datos
   ============================================================ */

/* ZONA 12 — Ocultar separador " - " en sidebar (clase .hidden sin regla en CKAN 2.11) */
.hidden { display: none; }

/* ZONA 1 — Contador de resultados (h1) */
.search-form h1 {
	color: var(--edatos-color-black-100);
	font-size: var(--ckan-font-size-heading);
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 120%;
	text-align: left;
}

/* ZONA 2 — Control de ordenación: ocultar label, dropdown personalizado */
.search-form .control-order-by label {
	display: none;
}

/* El select nativo queda oculto; se usa solo para el valor del formulario */
.sort-select-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Contenedor del dropdown */
.sort-custom-dropdown {
	position: relative;
	display: inline-block;
}

/* Botón disparador */
.sort-custom-dropdown__trigger {
	display: inline-flex;
	align-items: center;
	gap: var(--edatos-spacing-x-xs);
	color: var(--edatos-color-primary-100, #004678);
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-light, 300);
	line-height: var(--edatos-line-height-md, 1.5);
	padding: var(--edatos-spacing-y-xs) var(--edatos-spacing-y-sm);
	border-radius: var(--edatos-border-radius-sm, 5px);
	border: 1px solid var(--edatos-color-primary-100, #004678);
	background: var(--edatos-color-white-100);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.sort-custom-dropdown__trigger:hover,
.sort-custom-dropdown.abrir .sort-custom-dropdown__trigger {
	background-color: var(--edatos-color-secondary-100);
	color: var(--edatos-color-white-100);
	border: 1px solid var(--edatos-color-secondary-100, #004678);
}

.sort-custom-dropdown.abrir .sort-custom-dropdown__trigger {
	border-radius: var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px) 0 0;
}

/* Chevron — rota al abrir */
.sort-custom-dropdown__chevron {
	font-size: var(--edatos-font-size-sm);
	transition: transform 0.2s ease;
}

.sort-custom-dropdown.abrir .sort-custom-dropdown__chevron {
	transform: rotate(180deg);
}

/* Menú desplegable */
.sort-custom-dropdown__menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 115%;
	z-index: 1000;
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: var(--edatos-color-secondary-100, #004678);
	border: 1px solid var(--edatos-color-secondary-100, #004678);
	border-radius: 0 var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px);
	box-shadow: var(--shadow-dropdown);
	overflow: hidden;
}

.sort-custom-dropdown.abrir .sort-custom-dropdown__menu {
	display: block;
}

/* Ítems del menú */
.sort-custom-dropdown__item {
	display: flex;
	align-items: center;
	padding: var(--edatos-spacing-y-xs) var(--edatos-spacing-y-sm);
	margin: 6px var(--edatos-spacing-x-xs);
	border-radius: var(--edatos-border-radius-sm, 5px);
	color: var(--edatos-color-white-100, white);
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-light, 300);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease;
}

/* Etiqueta del botón disparador — todo en mayúsculas */
.sort-custom-dropdown__current-label {
	text-transform: uppercase;
	display: inline-block;
}

/* Sentence case en ítems del desplegable: ::first-letter no funciona en display:flex,
   por eso se usa un <span> interno con display:inline-block */
.sort-custom-dropdown__item-text {
	text-transform: lowercase;
	display: inline-block;
}

.sort-custom-dropdown__item-text::first-letter {
	text-transform: uppercase;
}

.sort-custom-dropdown__item:hover {
	background-color: var(--edatos-color-primary-5);
	color: var(--edatos-color-primary-100);
}

.sort-custom-dropdown__item--selected {
	background-color: var(--edatos-color-primary-5);
	color: var(--edatos-color-primary-100);
	font-weight: var(--edatos-font-weight-semibold, 600);
}

/* ZONA 3 — Barra de búsqueda */
.search-form .input-group.search-input-group input[name="q"] {
	height: 35px;
	padding: 7px 20px;
	border-radius: var(--edatos-border-radius-sm) 0 0 var(--edatos-border-radius-sm);
	border: var(--edatos-border-width-xs, 1px) solid var(--edatos-color-secondary-100);
	background: var(--edatos-color-white-100);
	color: var(--edatos-color-gray-80);
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-semibold);
}
.search-form .input-group.search-input-group input[name="q"]::placeholder {
	color: var(--edatos-color-gray-20);
	font-weight: var(--edatos-font-weight-semibold);
	font-variation-settings: "wght" 600;
}

input#field-giant-search::placeholder {
    font-weight: var(--edatos-font-weight-regular) !important;
    font-variation-settings: "wght" var(--edatos-font-weight-regular, 300);
}

.search-form .input-group.search-input-group .btn[type="submit"] {
	border: var(--edatos-border-width-xs, 1px) solid var(--edatos-color-secondary-100);
	border-left: none;
	border-radius: 0 var(--edatos-border-radius-sm) var(--edatos-border-radius-sm) 0;
	box-shadow: none;
	background-color: var(--edatos-color-white-100);
	background-image: none;
	color: var(--edatos-color-secondary-100);
	height: 35px;
	padding: var(--edatos-spacing-y-sm) var(--spacing-md);
}
.search-form .input-group.search-input-group .btn[type="submit"]:hover {
	box-shadow: none;
	background-color: var(--edatos-color-white-100);
	background-image: none;
	color: var(--edatos-color-secondary-100);
}

/* ZONA 4 — Item de dataset */
.dataset-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	margin-bottom: 0;
	border-top: 0.5px solid var(--edatos-color-primary-10);
	border-bottom: none;
}

/* ZONA 5 — Título del dataset */
h2.dataset-heading {
	font-size: 20px;
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 26px;
	color: var(--edatos-color-secondary-100);
	align-self: stretch;
	margin: 0;
	padding-bottom: var(--edatos-spacing-y-xs);
}

.dataset-heading a:hover {
	text-decoration: underline;
}

.dataset-heading a {
	color: var(--edatos-color-secondary-100);
	text-decoration: none;
}

/* ZONA 6 — Descripción del dataset (.notes) */
.dataset-item .notes {
	color: var(--edatos-color-black-100);
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-light);
	line-height: 24px;
	margin: 0;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	align-self: stretch;
}

/* ZONA 7 — Etiquetas de formato (.dataset-resources a.badge) */
.dataset-resources {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 0;
	margin-bottom: var(--edatos-spacing-y-xs);
}
.dataset-resources a.badge {
	display: inline-flex;
	align-items: center;
	padding: 0 10px;
	background-color: var(--edatos-color-gray-5);
	color: var(--edatos-color-black-100);
	border: none;
	border-radius: var(--edatos-border-radius-sm);
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-light);
	line-height: 24px;
	text-transform: uppercase;
}
.dataset-resources a.badge:hover {
	background-color: var(--edatos-color-primary-10);
	color: var(--edatos-color-black-100);
	text-decoration: none;
}

/* ZONA 8 — Pills de filtro activos (.filtered.pill) */
.search-form .filtered.pill {
	background-color: var(--edatos-color-primary-100, #004678);
	color: var(--edatos-color-white-100);
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 24px;
	border-radius: 30px;
	padding: 5px 10px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.search-form .filtered.pill .remove {
	color: var(--edatos-color-white-100);
	opacity: 1;
}
.search-form .filtered.pill .remove:hover {
	opacity: 0.8;
}

/* ZONA 9 — Label "Categorías:" en la filter-list */
.search-form .filter-list .facet {
	color: var(--edatos-color-primary-100, #004678);
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 24px;
}

/* ZONA 10 — Layout: form como flex container para reordenar hijos */
#dataset-search-form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
}
#dataset-search-form .input-group.search-input-group {
	width: 100%;
	order: 1;
	margin-bottom: 20px;
}
#dataset-search-form > span {
	display: none;
	order: 2;
}
#dataset-search-form h1 {
	flex: 1;
	order: 3;
	margin-bottom: 0;
}
#dataset-search-form .control-order-by {
	order: 4;
	margin-bottom: 0;
}
#dataset-search-form .filter-list {
	width: 100%;
	order: 5;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	margin-bottom: 0;
}
#dataset-search-form .show-filters {
	order: 6;
}

/* #4 — Icono + nombre + contador de grupo: card azul ancho completo (boceto) */

/* Panel Filtros: contenedor exterior con borde y radio según Figma */
#group-info {
	border-radius: var(--edatos-border-radius-sm);
	overflow: hidden;
	background: var(--edatos-color-white-100, #ffffff);
	padding: 0px;
}

#group-info .module-content {
	padding: 0;
}

#group-info .image {
	background-color: var(--edatos-color-secondary-100);
	border-radius: var(--ckan-border-radius-card);
	margin: 0;
	padding: 30px 14px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13px;
}

#group-info .image .group-home-fa-glyph {
	font-size: 100.365px;
	color: var(--edatos-color-white-100);
	align-self: stretch;
}

#group-info .image .heading {
	font-size: var(--ckan-font-size-heading);
	font-weight: var(--edatos-font-weight-semibold);
	color: var(--edatos-color-white-100, #ffffff);
	margin: 0;
	line-height: 110%;
	align-self: stretch;
	text-align: center;
}

/* Contador dentro del card azul */
#group-info .nums-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-top: 1px solid rgba(255,255,255,0.3);
	margin-top: 6px;
	padding-top: 8px;
	width: 100%;
	gap: 2px;
}

#group-info .nums-inner .nums-label {
	font-size: var(--edatos-font-size-xs);
	color: var(--edatos-color-white-100, #ffffff);
	font-weight: var(--edatos-font-weight-regular);
	line-height: 16px;
}

#group-info .nums-inner .nums-count {
	font-size: 28px;
	font-weight: var(--edatos-font-weight-semibold);
	color: var(--edatos-color-white-100, #ffffff);
	line-height: 120%;
	text-transform: uppercase;
}

/* Ocultar el bloque .nums externo (ya lo mostramos dentro del card) */
#group-info .nums {
	display: none;
}

/* ============================================================
   5b. CARDS — Dataset cards, Group cards, Organization cards
   ============================================================ */

.media-heading {
	text-align: center;
}

.media-heading:hover {
	color: var(--edatos-color-white-100);
}

.media-item h3 {
	font-size: var(--edatos-font-size-md);
	font-weight: normal;
	hyphens: unset;
}

.title-icon {
	border-radius: 50%;
	border: 1px solid;
	border-color: inherit;
	font-size: 17px;
	width: 20px;
	height: 20px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	margin-right: 2px;
}

.image a:hover {
	text-decoration: none;
}

/* ============================================================
   6. SIDEBAR / FILTROS — Facets, Filter panels
   ============================================================ */

/* ZONA 10 — Encabezado de sección del sidebar (.module-heading) */
/* (regla también presente en Sección 7; esta tiene precedencia para sidebar de facets) */

/* ZONA 8 — Items de faceta: nav-item
   Quitamos el padding del li y anulamos el margen negativo de CKAN para que el anchor
   rellene exactamente el 100% del ancho de la sección (igual que el heading). */
.module.module-narrow .nav-simple .nav-item:not(.recursos-item) {
	padding: 0;
}

.module-narrow .nav-item > a:hover, .module-narrow .nav-aside li a:hover {
    text-decoration: none;
    background-color: transparent;
	border-radius: var(--edatos-border-radius-xs);
}

.module.module-narrow .nav-simple .nav-item > a {
	margin: 0;
	width: 95%;
	display: flex;
	min-height: 35px;
	padding: 5px 10px 5px 20px;
	align-items: center;
	flex-wrap: nowrap;
	gap: 10px;
	font-size: var(--edatos-font-size-sm);
	color: var(--edatos-color-secondary-100);
	border-top: none;
	text-decoration: none;
	box-sizing: border-box;
}

.module.module-narrow .nav-simple .nav-item > a .item-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1 1 0;
	min-width: 0;
}

li.nav-item:hover {
    background-color: var(--edatos-color-primary-5, #004678);
    color: var(--edatos-color-secondary-100, #FFF);
    text-decoration: none;
	border-radius: var(--edatos-border-radius-xs);
	border: none;
}

.module.module-narrow .nav-simple .nav-item > a:hover .badge {
	background: var(--edatos-color-white-100, #FFF);
	color: var(--edatos-color-secondary-100, #004678);
}

.module.module-narrow .nav-simple .nav-item.active > a {
	background-color: var(--edatos-color-primary-50, #3a5a8c);
	color: var(--edatos-color-white-100, #FFF);
	font-weight: var(--edatos-font-weight-semibold);
	width: 100%;
	border-radius: var(--edatos-border-radius-sm) 0 0 var(--edatos-border-radius-sm);
	clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
}

.module.module-narrow .nav-simple .nav-item.active > a .badge {
	background: var(--edatos-color-white-100, #FFF);
	color: var(--edatos-color-secondary-100, #004678);
}

/* Botón de cierre de faceta activa */
.module.module-narrow .nav-item.active a .facet-close {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	color: var(--edatos-color-white-100, #FFF);
	position: static;
	left: 0;
	float: none;
	padding-right: 4px;
}

.module.module-narrow .nav-item.active a .facet-close i.fa-circle-xmark {
	display: none;
}

.module.module-narrow .nav-item.active a .facet-close .facet-close-x {
	display: flex;
	align-items: center;
	font-size: 20px;
	font-weight: var(--edatos-font-weight-light);
}

.module-narrow .nav-item.active > a:before, .module-narrow .nav-aside li.active a:before {
    display: none;
}

/* ZONA 8b — Separadores entre items de faceta en la barra de filtros
   - Título (.module-heading): sin línea (border-top/bottom-color: transparent ya aplicado en .secondary .module-heading)
   - Item activo: sin línea encima ni debajo; espacio en blanco mediante margin
   - Item en hover: sin línea encima ni debajo; espacio en blanco implícito (border transparente)
*/

/* Item activo: ocultar su propia línea inferior + espacio en blanco */
.filters .module.module-narrow .nav-simple .nav-item.active {
    border-bottom-color: transparent;
    margin: 0.12rem 0;
}

/* Item inmediatamente anterior al activo: ocultar su línea inferior (= línea encima del activo) */
.filters .module.module-narrow .nav-simple .nav-item:has(+ .nav-item.active) {
    border-bottom-color: transparent;
}

/* Item en hover: ocultar línea inferior */
.filters .module.module-narrow .nav-simple .nav-item:not(.active):hover {
    border-bottom-color: transparent;
}

/* Item inmediatamente anterior al hovered: ocultar su línea inferior */
.filters .module.module-narrow .nav-simple .nav-item:has(+ .nav-item:hover) {
    border-bottom-color: transparent;
}

/* ZONA 9 — Badge numérico en sidebar */
.module-narrow .nav-item > a .badge,
.nav-facet .item-count.badge {
        display: inline-flex;
        padding: 0;
        justify-content: center;
        align-items: center;
        border-radius: var(--edatos-border-radius-sm);
        background: var(--edatos-color-gray-5);
    color: var(--edatos-color-secondary-100, #FFF);
        font-size: var(--edatos-font-size-xs);
        font-weight: var(--edatos-font-weight-semibold);
        line-height: 14px;
        width: 24px;
        height: 24px;
        min-width: 24px;
        flex-shrink: 0;
}


.module-narrow .nav-item > a, .module-narrow .nav-aside li a {
    color: var(--edatos-color-secondary-100);
}

/* ZONA 11 — Enlace "Mostrar más" */
.module-footer .read-more {
	display: block;
	background: var(--edatos-color-gray-5);
    border-radius: var(--edatos-border-radius-sm);
	color: var(--edatos-color-secondary-100);
	font-size: var(--edatos-font-size-sm);
    font-weight: var(--edatos-font-weight-semibold);
    line-height: 14px;
    text-decoration: none;
    text-align: center;
    text-transform: lowercase;
    color: var(--edatos-color-secondary-100);
	padding: var(--edatos-spacing-y-xs);
}

.module-narrow .module-heading, .module-narrow .module-content, .module-narrow .module-footer {
	padding: var(--edatos-spacing-x-xs);
}

.module-footer .read-more::first-letter {
	text-transform: uppercase;
}

.module-footer .read-more:hover {
	text-decoration: underline;
}

.module-footer {
    margin: 0;
    border-top: 1px #ddd;
}

.nav-simple > li, .nav-aside > li {
    font-size: var(--edatos-font-size-xs);
    line-height: 1.1666666667em;
    padding: 7px 25px;
    border-bottom: 0.5px solid var(--edatos-color-primary-10, #E5ECF1);
}

/* ============================================================
   7. DATASET DETAIL — Metadata, Tabs, Resources, Format badges
   ============================================================ */

/* --- ZONA 1: Título del dataset (h1) --- */
h1.dataset-title {
	color: var(--edatos-color-black-100);
	font-size: var(--ckan-font-size-heading);
	font-style: normal;
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 120%;
	align-self: stretch;
}

/* --- ZONA 2: Descripción del dataset (.notes) --- */
.notes {
	color: var(--edatos-color-black-100);
	font-size: var(--edatos-font-size-md);
	font-style: normal;
	font-weight: var(--edatos-font-weight-regular);
	line-height: 26px;
}

/* --- ZONA 3: Encabezado sección recursos (.module-heading en main content) --- */
.module-heading {
	display: flex;
	height: 35px;
	padding: 5px 10px;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	align-self: stretch;
	border-radius: var(--edatos-border-radius-xs);
	background: var(--edatos-color-secondary-100, #004678);
	color: var(--edatos-color-white-100, #FFF);
	font-size: var(--edatos-font-size-sm);
	font-style: normal;
	font-weight: var(--edatos-font-weight-bold);
	line-height: 14px;
	text-transform: uppercase;
	letter-spacing: normal;
	margin: 0;
}

.module-heading i {
	display: none;
}


.resource-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    width: 100%;
}

/* C1 — Contenedor de recursos: padding+gap en el wrapper, no en cada item */
#dataset-resources .resource-list {
	display: flex;
	flex-direction: column;
	gap: 15px;
	padding: 20px;
	background: var(--edatos-color-gray-5, #F2F2F2);
	border-radius: 0 0 var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px); /* exacto: 0.3125rem = 5px, coherente con el radio superior de section#dataset-resources > h2 */
	overflow: hidden;
}

#dataset-resources li.resource-item {
	padding: 0;
	background: transparent;
}

.resource-item .heading {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	color: var(--edatos-color-black-100);
	font-size: var(--edatos-font-size-md);
	font-style: normal;
	font-weight: var(--edatos-font-weight-regular);
	line-height: 26px;
	letter-spacing: normal;
	text-decoration: none;
}

.resource-item .heading:hover {
	text-decoration: underline;
	color: var(--edatos-color-secondary-100, #004678);
}

/* --- ZONA 5: Botón EXPLORAR/DESCARGAR (.btn-primary en recursos) --- */

/* Alineación derecha: sobreescribe el posicionamiento de Popper.js */
#dataset-resources .dropdown-menu.show {
	left: auto !important;
	right: 0 !important;
	top: 100% !important;
	transform: none !important;
}

/* Hover centrado en ítems EXPLORAR: Bootstrap fuerza width:100% en .dropdown-item;
   combinado con el margin lateral de .dropdown-menu li a, el fondo se desplaza
   asimétricamente. width:auto produce el mismo comportamiento que el botón OPCIONES
   (márgenes laterales simétricos de --edatos-spacing-x-xs a cada lado). */
#dataset-resources .dropdown-menu li a.dropdown-item {
	width: auto;
}

/* Botón: aplana esquina inferior-derecha al abrir y elimina focus ring de Bootstrap */
.btn-primary.dropdown-toggle.show {
	border-radius: var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px) 0 0 !important;
	box-shadow: none !important;
	background-color: var(--edatos-color-secondary-100);
    color: var(--edatos-color-white-100);
}

/* Oculta el caret automático de Bootstrap (el icono fa-chevron-down del HTML ya cumple esa función) */
.btn-primary.dropdown-toggle::after {
	display: none;
}

/* Chevron: rota 180° al abrir (consistencia con btn-navbar/Opciones) */
.btn-primary.dropdown-toggle i.fa-chevron-down {
	transition: transform 0.25s;
}
.btn-primary.dropdown-toggle.show i.fa-chevron-down {
	transform: rotate(180deg);
}


/* --- ZONA 7: Encabezado sidebar (.secondary) — solo diferencias vs base --- */
.secondary .module-heading {
	flex: 1 0 0;
	justify-content: flex-start;
	font-weight: var(--edatos-font-weight-semibold);
	background: var(--edatos-color-secondary-100, #004678);
	border-top-color: transparent;
    border-bottom-color: transparent;
}

/* --- ZONA 7b: Encabezado metadatos / secciones contenido principal --- */
.additional-info .module-heading,
.additional-info .module-heading.metadata-heading {
	flex: 1 0 0;
	justify-content: flex-start;
	border-radius: 5px 5px 0 0;
	border-bottom: none;
	font-size: var(--edatos-font-size-lg);
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 26px;
	text-transform: none;
}

/* --- ZONA 8-9: Tabla metadatos — cabecera y columna "Campo" --- */
.additional-info table thead tr th,
.additional-info table th.dataset-label,
.additional-info table th:first-child {
	color: var(--edatos-color-gray-60);
	font-size: var(--edatos-font-size-md);
	font-style: normal;
	font-weight: var(--edatos-font-weight-semibold) !important;
	line-height: 26px;
}

.additional-info table thead tr th {
	height: 36px;
	padding: 5px 20px;
}

.additional-info table td {
	padding: 5px 20px;
	font-size: var(--edatos-font-size-md);
	line-height: 26px;
	vertical-align: top;
	color: var(--edatos-color-gray-60);
}

/* --- ZONA 10: Info module (.module-content en sidebar) --- */
.secondary .module-content {
	color: var(--edatos-color-secondary-100, #004678);
	font-size: var(--edatos-font-size-md);
	font-style: normal;
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 26px;
	padding-top: 0px;
}

/* --- ZONA 10b: Descripción en módulos info del sidebar (helper, ¿Qué son las colecciones?) --- */
.module.module-narrow.module-shallow .module-content {
	display: flex;
	flex-direction: column;
	min-height: 44px;
	padding: 5px 10px 5px 20px;
	align-items: flex-start;
	gap: 10px;
	flex-shrink: 0;
	flex: 1 0 0;
	align-self: stretch;
	color: var(--edatos-color-black-100, #000);
	font-size: var(--edatos-font-size-xs);
	font-style: normal;
	font-weight: var(--edatos-font-weight-regular);
	line-height: 16px;
}

.module.module-narrow.module-shallow .module-content p {
	color: var(--edatos-color-black-100, #000);
	font-size: var(--edatos-font-size-xs);
	font-style: normal;
	font-weight: var(--edatos-font-weight-regular);
	line-height: 16px;
	margin: 0;
}

/* --- ZONA 11: Sección COMPARTIR / navegación lateral --- */
.social .nav-item a,
.social .nav a {
	color: var(--edatos-color-secondary-100, #004678);
	font-size: var(--edatos-font-size-sm);
	font-style: normal;
	font-weight: var(--edatos-font-weight-regular);
	line-height: 14px;
}

/* --- Wrapper: fondo blanco sin borde, alineado con hero-nav --- */
.row.wrapper {
	background: var(--edatos-color-white-100);
	border: none;
	margin-left: 0;
	margin-right: 0;
	gap: 10px;
	padding: var(--edatos-spacing-x-lg) var(--edatos-spacing-x-lg) var(--edatos-spacing-y-xs) var(--edatos-spacing-x-lg);
	border-radius: 0px;
}

.row.wrapper > .secondary {
	align-self: flex-start;
	flex: 0 0 var(--sidebar-width);
	width: var(--sidebar-width);
	max-width: var(--sidebar-width);
	margin-left: 10px;
}

.row.wrapper > .primary {
	background: transparent;
	border: none;
	flex: 1 1 0;
	min-width: 0;
	padding-left: calc(var(--bs-gutter-x) * 0.5);
	padding-right: 0;
}

/* --- Resource read: el sidebar Formatos/Compartir debe quedar junto al
   título+tabla (pre_primary, .module-resource), no junto a Metadatos
   (.primary). ".module-resource" solo existe en resource_read.html, así que
   sirve como ancla para no afectar a ninguna otra vista con sidebar (la
   clase "no-nav" del core no se aplica aquí en esta versión de CKAN).
   Ver specs/fix-resource-view-formats-sidebar-alignment.md */
.row.wrapper > .module-resource {
	order: 0;
	flex: 1 1 0;
	min-width: 0;
	padding: 0;
}

/* --- Resource read: quitar el padding vertical de ".module-content" (CKAN
   core lo fija en 1.5rem en las 4 direcciones) para ganar espacio en la fila
   de botones y que "Agregar Filtro" y el buscador de DataTables entren en la
   misma línea. Alcance limitado a ".module-resource" (ver comentario arriba)
   para no afectar al resto de vistas que usan ".module-content". */
.module-resource .module-content {
	padding: 1.5rem 0;
}

/* z-index: ".module-resource" ya trae "position:relative; z-index:5" (regla
   genérica ".module" del core de CKAN); sin superar ese valor aquí, se pinta
   por encima y tapa el dropdown-menu del wrench cuando este se despliega
   (su position:absolute se sale de los ~289px del sidebar). */
/* El "margin-left:10px" genérico de ".row.wrapper > .secondary" (línea ~1995,
   pensado para la sidebar de facetas de la búsqueda de datasets) suma un
   hueco extra a la izquierda del sidebar aquí, por encima del padding
   estándar de la card -- Figma (nodo 12933:7928) no lo contempla: el sidebar
   debe arrancar en el mismo padding que el resto de la card, y el hueco de
   20px va hacia el título/tabla (a su derecha), no a la izquierda. Se anula
   ese margen y se añade "margin-right" (token "--edatos-spacing-x-sm" del
   sistema de diseño, en vez del 10px suelto que ya usa el "gap" genérico de
   ".row.wrapper" para el mismo valor) para llevar el hueco hacia el
   título/tabla a los 20px de Figma solo en esta página. Ver
   specs/fix-resource-view-formats-sidebar-alignment.md */
.row.wrapper > .module-resource ~ .secondary {
	order: -1;
	position: relative;
	z-index: 6;
	margin-left: 0;
	margin-right: var(--edatos-spacing-x-sm, 10px);
}

.row.wrapper > .module-resource ~ .primary {
	order: 1;
	flex: 1 1 100%;
	width: 100%;
}

/* --- Sidebar modules: con recuadro (fondo blanco + borde) --- */
.secondary .module.module-narrow {
	background: var(--edatos-color-white-100, #ffffff);
	margin-bottom: 0px;
	padding-top: 10px;
	width: 100%;
}

.secondary .module.module-narrow:not(:has(.module-heading)) {
	font-size: var(--edatos-font-size-xs);
	font-weight: var(--edatos-font-weight-bold, 700);
	color: #222;
	line-height: 1.45;
}

/* --- Sidebar título del dataset --- */
#package-info .module-content .heading a {
	color: var(--edatos-color-secondary-100);
	text-decoration: none;
	font-size: var(--edatos-font-size-xs);
	font-weight: var(--edatos-font-weight-bold, 700);
	line-height: 1.45;
}

#package-info .module-content .heading a:hover {
	color: var(--edatos-color-light-blue-100);
	text-decoration: underline;
}

/* --- Dataset detail: sección "Datos" (resources) --- */
section#dataset-resources {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	gap: 0;
}

section#dataset-resources > h2 {
	flex: 1 0 0;
	display: flex;
	padding: 5px 10px;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	align-self: stretch;
	border-radius: 5px 5px 0 0;
	background: var(--edatos-color-secondary-100, #004678);
	color: var(--edatos-color-white-100);
	font-size: var(--edatos-font-size-lg);
	font-style: normal;
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 26px;
	margin: 0;
	text-transform: none;
}

/* --- Cuerpo sección datos (body bajo el título) --- */
.dataset-resources-body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
	align-self: stretch;
	margin-top: 0;
}

#dataset-resources li.resource-item {
	display: flex !important;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--edatos-spacing-x-lg);
}

/* El título debe absorber el ancho sobrante de la fila en vez de dejarlo
   como hueco vacío antes del botón "Explorar" (ver
   specs/fix-dataset-resource-list-title-truncation.md). */
#dataset-resources li.resource-item .heading {
	flex: 1 1 0;
	min-width: 0;
}

#dataset-resources li.resource-item .btn-group {
	position: relative;
	top: 0;
	right: 0;
	flex-shrink: 0;
}

.resource-item:hover {
	background-color: var(--edatos-color-gray-5);
}

/* --- Metadatos table: borde exterior + estructura ---
   El borde vive en el mismo elemento que el border-radius (igual que
   .dataset-edit-secondary) para que la esquina se dibuje curvada sobre el
   propio trazo del borde. Antes solo existía el recorte (overflow:hidden)
   sin ningún borde visible en el contenedor: el cierre dependía de los
   bordes de las celdas de la última fila, en gray-5 (#F2F2F2), el mismo
   color que el fondo de la página, así que era invisible y la esquina se
   veía "abierta". Sin border-top: la cabecera azul ya cierra esa zona con
   su propio fondo sólido.

   Las esquinas superiores deben llevar el mismo radio que ".additional-info
   .module-heading" (5px, ver ZONA 7b): si aquí se dejan a 0, el border-left/
   border-right (que sí arrancan desde el borde superior) dibujan una esquina
   cuadrada justo detrás de la curva de la cabecera, y esa línea recta se ve
   asomando por fuera del redondeo azul. */
section.module.additional-info {
	border-radius: var(--edatos-border-radius-sm) var(--edatos-border-radius-sm) var(--edatos-border-radius-sm) var(--edatos-border-radius-sm);
	overflow: hidden;
	margin-right: 0;
	border-left: 1px solid var(--edatos-color-gray-20, #CCCCCC);
	border-right: 1px solid var(--edatos-color-gray-20, #CCCCCC);
	border-bottom: 1px solid var(--edatos-color-gray-20, #CCCCCC);
}

section.module.additional-info .module-content table,
section.additional-info.module > table {
	border-collapse: collapse;
	width: 100%;
}

section.module.additional-info table th:first-child,
section.module.additional-info table td:first-child,
section.additional-info.module table th:first-child,
section.additional-info.module table td:first-child {
	width: 20%;
	font-weight: var(--edatos-font-weight-bold, 700);
}

/* Fila cabecera Campo/Valor: fondo gris */
.additional-info table thead tr th {
	background: var(--edatos-color-gray-5, #F2F2F2);
	border-bottom: 1px solid var(--edatos-color-gray-5, #F2F2F2);
}

/* Sin divisor vertical entre columnas (Figma no lo tiene) */
.additional-info table thead tr th:first-child {
	border-right: 1px solid var(--edatos-color-white-100, white);
}

/* Filas de datos: campo 600, valor 300 */
/* Bootstrap 5 usa box-shadow inset con --bs-table-accent-bg para el striped,
   no background-color, por eso es necesario neutralizar ambos. */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-accent-bg: var(--bs-table-striped-bg);
    color: var(--edatos-color-gray-60);
}
.additional-info table tbody tr td,
.additional-info table tbody tr th {
	--bs-table-accent-bg: transparent;
	box-shadow: none !important;
}

.additional-info table tbody tr td {
	font-weight: var(--edatos-font-weight-light);
	color: var(--edatos-color-gray-60);
    font-size: var(--edatos-font-size-md);
    font-style: normal;
    line-height: 26px;
	border-bottom: 1px solid var(--edatos-color-gray-5, #F2F2F2);
	border-left: 1px solid var(--edatos-color-gray-5, #F2F2F2);
    border-right: 1px solid var(--edatos-color-gray-5, #F2F2F2);
	background-color: var(--edatos-color-white-100, #FFF) !important;
}

.additional-info table tbody tr th {
	font-weight: var(--edatos-font-weight-semibold);
	color: var(--edatos-color-gray-60);
	border-bottom: 1px solid var(--edatos-color-gray-5, #F2F2F2);
	border-left: 1px solid var(--edatos-color-gray-5, #F2F2F2);
	border-right: 1px solid var(--edatos-color-gray-5, #F2F2F2);
	background: var(--edatos-color-white-100, #FFF) !important;
	padding: 5px 20px;
}

.additional-info .module-content:first-child table th:first-child {
	width: 20%;
}

table th:first-child {
	width: 10%;
}

/* --- Hide redundant h2 from ckanext-scheming inside module-content --- */
.additional-info .module-content > h2 {
	display: none;
}

/* --- Flush module-content with heading --- */
.additional-info .module-content {
	padding: 0;
}

section.additional-info.module > table {
	margin: 0;
}

/* --- "Mostrar más / Hide" link (table-toggle-more module) --- */
.additional-info .toggle-more-controls td {
	padding: 5px;
	text-align: center;
}

a.toggle-show.toggle-show-more,
a.toggle-show.toggle-show-less {
	display: block;
	text-align: center;
	padding: 5px 10px;
	background: var(--edatos-color-gray-5, #F2F2F2);
	border-radius: var(--edatos-border-radius-sm);
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-semibold);
	color: var(--edatos-color-primary-100, #004678);
	text-decoration: none;
}


a.toggle-show.toggle-show-more:hover,
a.toggle-show.toggle-show-less:hover {
	background: var(--edatos-color-primary-5, #E5ECF1);
}

/* --- Group about: module-content padding --- */
.primary .module > .module-content:not(.page-header) {
	padding-left: 0;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 20px;
}

/* --- Cuando hay page-header (pestañas) antes del contenido, añadir padding-top --- */
.primary .module > .module-content.page-header + .module-content {
	padding-top: 20px;
}

.page-header {
    margin-top: 1.5rem;
    border-bottom: 1px solid #ddd;
    background-color: var(--edatos-color-white-100);
    border-radius: 0 3px 0 0;
}

/* --- Dataset detail: tabs flush --- */
.module-content.page-header {
	padding: 0px;
	position: relative;
}

/* --- Botón Administrar alineado con los tabs --- */
.module-content.page-header .content_action {
	position: absolute;
	right: 10px;
	bottom: 0;
	height: 44px; /* igual que nav-tabs > li */
	display: flex;
	align-items: center;
	float: none;
}

.module-content.page-header .nav-tabs {
	margin-right: 150px;
}

/* --- Resource page: h1 (título dataset) --- */
.module-resource .module-content h1.page-heading {
	color: var(--edatos-color-black-100);
	font-size: var(--ckan-font-size-heading);
	font-style: normal;
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 120%;
	margin-bottom: 0;
}
.module h1, .module .h1 {
    margin-top: 0;
    margin-bottom: 20px;
    margin-bottom: 10px;
}
/* --- Resource read: padding after heading --- */
.module > h2.module-heading + .module-content,
.module > div.module-heading + .module-content {
	padding-top: var(--edatos-spacing-y-sm);
}

div.ckanext-showcase-image-container {
	margin: var(--spacing-md);
}

/* --- Resource read: no-views info box --- */
.data-viewer-info {
	background: var(--edatos-color-primary-5, #E5ECF1);
	border-radius: var(--edatos-border-radius-sm);
	padding: 20px;
	font-size: var(--edatos-font-size-xs);
	color: var(--edatos-color-gray-60);
	display: inline-block;
}

.data-viewer-info p {
	margin: 0;
}

.data-viewer-info p + p {
	margin-top: 8px;
}

.table > :not(:first-child) {
    border-top: none !important;
    /* border-top: 2px solid currentColor; */
}

/* --- Metadatos: Palabras clave pills --- */
.metadatos-tag {
	display: inline-flex;
	align-items: center;
	padding: 10px;
	gap: 5px;
	border-radius: 30px;
	border: 1px solid var(--edatos-color-primary-50, #4D7EA0);
	background: var(--edatos-color-white-100, #FFF);
	color: var(--edatos-color-primary-50, #4D7EA0);
	font-size: var(--edatos-font-size-xs);
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 24px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	height: 9px;
}

a.metadatos-tag:hover {
	background: var(--edatos-color-primary-50, #4D7EA0);
	color: var(--edatos-color-white-100, #FFF);
	text-decoration: none;
}

/* Celda "Valor" de la fila Palabras clave: padding extra + alineación vertical */
.additional-info table tbody tr td:has(.metadatos-tag) {
	padding: 0px 20px;
	vertical-align: middle;
}

/* Etiqueta "Palabras clave" alineada verticalmente al centro con las pills */
.additional-info table tbody tr:has(.metadatos-tag) th {
	vertical-align: middle;
}

/* --- Resource read: fila del título ---
   El borde superior de esta fila (solo título) debe coincidir con el borde
   superior del panel .showcase-detail-sidebar: ambos son hijos directos de
   ".row.wrapper" con el mismo top, pero ".module-content" (CKAN core) le
   añade 24px de padding-top a esta fila que el sidebar no tiene, así que se
   cancela con un margin-top negativo del mismo valor.
   Los botones de acción ya no viven aquí (se movieron debajo de la
   descripción, ver más abajo) — a petición de negocio se reposicionaron
   fuera de la fila del título, revirtiendo el layout de "dos columnas en la
   misma fila" documentado en las Adendas de
   specs/fix-resource-view-formats-sidebar-alignment.md. */
.module-resource .resource-heading-row {
	margin-top: -24px;
}

/* --- Resource read: botones de acción (Editar recurso, Vistas, Ir al recurso,
   API de datos, Pantalla completa, Incrustar) ---
   Ahora se renderizan debajo de la URL y la descripción del recurso (no
   junto al título), alineados a la izquierda, según lo indicado por negocio
   tras revisar la implementación previa contra Figma. */

/* CKAN core flota ".actions" a la derecha y le aplica "position: relative;
   top: -10px;" (main.css) pensado para su layout original junto al título;
   en la nueva posición (bloque propio debajo de la descripción) tampoco
   aplica ese offset ni el flotado. */
.module-resource .actions {
	float: none;
	top: 0;
	margin-top: var(--edatos-spacing-x-xxs, 2px);
}

.module-resource .actions ul.d-flex {
	gap: var(--edatos-spacing-x-sm, 8px);
	padding-left: 0;
}

/* "Ir al recurso" y "Vistas" llegan ya fusionados en un .btn-group de
   Bootstrap (bordes compartidos, sin separación); "API de datos" lo añade
   ckanext-datastore (fuera de este repo, vía super() del bloque
   resource_actions_inner) como <li> suelto, con el gap de --edatos-spacing-x-sm
   del ul de por medio. Negocio pidió que "Ir al recurso"/"Vistas" tuvieran
   el mismo hueco que el resto de botones de la fila, en vez del hueco más
   pequeño que los hacía parecer un único componente fusionado — así que
   aquí se desactiva la fusión de Bootstrap (radio y margen negativo) y se
   iguala su gap interno al del ul. */
.module-resource .actions .btn-group {
	gap: var(--edatos-spacing-x-sm, 8px);
}

.module-resource .actions .btn-group > .btn {
	margin-left: 0 !important;
	border-radius: var(--edatos-border-radius-sm) !important;
}

/* Botón "Vistas" abierto: mismo estado visual que "OPCIONES"/"Explorar"/el
   wrench (fondo azul secundario, texto blanco) y esquinas inferiores
   planas para conectar con el menú desplegado debajo. Sin esta regla,
   ".module-resource .actions .btn" (más abajo, sin !important pero
   posterior en la hoja) y el border-radius uniforme de la regla anterior
   (más específica, con !important) ganaban sobre ".btn-primary.dropdown-
   toggle.show" (ZONA 5), dejando el botón en blanco/azul con las 4
   esquinas redondeadas en vez de aplanadas.
   "background-color" (longhand), no "background" (shorthand): verificado en
   el navegador que, con este mismo selector/especificidad/!important,
   "background: ... !important" no llegaba a pintarse (seguía en blanco)
   mientras que "background-color: ... !important" sí — incluso forzando la
   regla directamente vía CSSOM con selector por ID. No se pudo determinar
   la causa exacta (posible interacción con alguna extensión del Chrome de
   pruebas que interceptase la shorthand), así que se evita el shorthand
   aquí como medida robusta. */
.module-resource .actions .btn-group > .btn.show {
	background-color: var(--edatos-color-secondary-100, #004678) !important;
	border-color: var(--edatos-color-secondary-100, #004678) !important;
	color: var(--edatos-color-white-100, #FFF) !important;
	border-radius: var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px) 0 0 !important;
	box-shadow: none !important;
}

/* Menú "Vistas" (formatos de descarga CSV/TSV/JSON/XML): despliega
   "bottom-start" (alineado a la izquierda del botón "Vistas", expandiendo
   hacia la derecha), igual que el wrench del sidebar (ver ZONA de
   dropdowns) y al contrario que "OPCIONES"/"Explorar" (bottom-end). El
   genérico ".dropdown-menu" aplana la esquina superior DERECHA, que aquí es
   la incorrecta: la esquina que conecta con el botón es la superior
   IZQUIERDA. Bootstrap/Popper fijan además "margin: 0px" inline con un
   offset de 2px entre el toggle y el menú; hace falta !important para
   cancelarlo (mismo motivo que el wrench). */
.module-resource .actions .btn-group .dropdown-menu {
	border-radius: 0 var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px);
	margin-top: -2px !important;
}

/* Bootstrap fuerza width:100% en ".dropdown-item"; combinado con el margin
   lateral de ".dropdown-menu li a" (regla genérica, ver ZONA de dropdowns),
   el 100% se mide sobre el <li> ANTES de restar ese margin, así que la caja
   se desborda por el lado derecho en vez de quedar centrada con aire
   simétrico — el resaltado de hover (fondo claro sobre el azul secundario
   del menú) llegaba hasta el borde derecho real del menú sin dejar el
   mismo margen que a la izquierda/arriba/abajo (mismo bug ya documentado
   para "Explorar" en #dataset-resources y para el wrench del sidebar).
   width:auto deja que el modelo de caja normal reste los márgenes por los
   dos lados. */
.module-resource .actions .btn-group .dropdown-menu li a.dropdown-item {
	width: auto;
}

.module-resource .actions .btn,
.module-resource .actions a.btn,
.resource-view .actions .btn,
.resource-view .actions a.btn {
	display: inline-flex;
	padding: 5px 10px;
	justify-content: center;
	align-items: center;
	gap: 5px;
	border-radius: var(--edatos-border-radius-sm);
	border: 1px solid var(--edatos-color-primary-100, #004678);
	background: var(--edatos-color-white-100, #FFF);
	color: var(--edatos-color-secondary-100, #004678);
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-light);
	line-height: 20px;
	text-transform: uppercase;
	text-decoration: none;
}

.module-resource .actions .btn:hover,
.module-resource .actions a.btn:hover,
.resource-view .actions .btn:hover,
.resource-view .actions a.btn:hover {
	background: var(--edatos-color-secondary-100, #004678);
	border-color: var(--edatos-color-secondary-100, #004678);
	color: var(--edatos-color-white-100, #FFF);
	text-decoration: none;
}

/* CKAN core define ".btn-default:hover"/".btn-light:hover" con background-color
   e important (main.css), lo que gana por encima de nuestra regla anterior pese
   a tener menos especificidad. Los botones "Pantalla completa" e "Incrustar"
   usan btn-default, así que necesitan el mismo peso para no quedarse sin hover. */
.module-resource .actions .btn-default:hover,
.module-resource .actions a.btn-default:hover,
.resource-view .actions .btn-default:hover,
.resource-view .actions a.btn-default:hover,
.module-resource .actions .btn-light:hover,
.module-resource .actions a.btn-light:hover,
.resource-view .actions .btn-light:hover,
.resource-view .actions a.btn-light:hover {
	background-color: var(--edatos-color-secondary-100, #004678) !important;
	border-color: var(--edatos-color-secondary-100, #004678) !important;
}

.module-resource .actions .btn i,
.module-resource .actions a.btn i,
.resource-view .actions .btn i,
.resource-view .actions a.btn i {
	color: var(--edatos-color-secondary-100, #004678);
	font-size: var(--edatos-font-size-md);
	flex-shrink: 0;
	font-family: "Font Awesome 6 Pro";
	font-weight: var(--edatos-font-weight-light);
}

.module-resource .actions .btn:hover i,
.module-resource .actions a.btn:hover i,
.resource-view .actions .btn:hover i,
.resource-view .actions a.btn:hover i {
	color: var(--edatos-color-white-100, #FFF);
}

/* Icono de la pestaña de vista de recurso (Tabla, Texto...) — Figma no
   incluye icono en esta pestaña, solo el texto ("Tabla", "Texto"...). El
   <i class="fa icon fa-..."> lo renderiza incondicionalmente una plantilla
   de CKAN core (package/snippets/resource_views_list.html) sin hook para
   quitarlo desde este repo, así que se oculta por CSS. */
.module-resource .nav-tabs .nav-link i.fa {
	display: none;
}

/* --- Resource view: layout de botones pantalla completa e incrustar --- */
.resource-view .actions {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 10px;
}

.resource-view .actions .btn i,
.resource-view .actions a.btn i {
	font-size: 20px;
	width: 16px;
	text-align: center;
	flex-shrink: 0;
}

/* Figma (nodos 12937:9133 "Pantalla completa" y 12937:9138 "Incrustar") define
   estos dos botones como cuadrados solo-icono, sin texto visible. El texto
   ("Fullscreen"/"Embed") se mantiene en la plantilla (el <a> lo necesita como
   nombre accesible para lectores de pantalla, ya que el icono es puramente
   decorativo) pero se colapsa visualmente a tamaño 0 en vez de con
   display:none, que sí lo ocultaría también del árbol de accesibilidad. El
   icono recupera su tamaño explícito en la regla de arriba, así que no le
   afecta heredar font-size:0 del padre. */
.resource-view .actions .btn,
.resource-view .actions a.btn {
	font-size: 0;
	gap: 0;
}

/* --- Resource view: barra de botones de la vista "Tabla" (DataTables Buttons) ---
   Figma (nodos 12937:9102 / 12941:9388 "Botonería") define estos botones
   (tabla, copiar, ocultar columnas, descargar, refrescar, imprimir,
   compartir) como BotonAccion cuadrados solo-icono — mismo patrón que
   "Pantalla completa"/"Incrustar" de arriba. La librería DataTables
   Buttons (extensión vendored ckanext-datatablesview, fuera de este repo,
   cargada dentro del <iframe> de la vista) los renderiza como Bootstrap
   ".btn.btn-secondary.btn-default" dentro de un ".dt-buttons.btn-group",
   que por defecto de Bootstrap fusiona bordes/radios entre botones
   contiguos (grupo "pill" clásico, con solape de -1px) y además la propia
   extensión fuerza esa fusión con !important en el radio de los
   ".btn-group" anidados (colvis/descarga). Se cancela esa fusión (gap de
   10px en vez de solape, radio completo por botón) y se iguala al patrón
   ya usado en ".resource-view .actions .btn". El caret de los desplegables
   ("ocultar columnas"/"descargar") es el triángulo nativo de Bootstrap
   (".dropdown-toggle::after", con "border-top-color" implícito en
   "currentColor"), así que hereda el mismo color que el icono sin reglas
   adicionales. */
div.dataTables_wrapper div.dt-buttons.btn-group {
	gap: 10px;
	/* La extensión vendor pone "float:right" en ".dt-buttons" (pensado para
	   convivir con un selector de longitud "Mostrar X registros" a su
	   izquierda en la misma fila). Aquí ".dt-buttons" ocupa toda la fila él
	   solo, así que ese "float:right" lo despega del borde izquierdo de la
	   tabla (hueco de ~60px) en vez de arrancar en "Agregar Filtro" pegado
	   a la izquierda, como pide Figma. */
	float: none;
	/* Sin esto, "align-items" del flex container queda en su valor inicial
	   "normal" (equivale a "stretch"): los botones no lo notan porque tienen
	   "height:30px" explícito, pero ".dataTables_filter" no tiene altura
	   propia y se estira a la altura de la línea (la más alta del grupo),
	   quedando más alto que los botones (44px vs 30px) y su contenido
	   centrado dentro de esa caja más alta — visualmente desplazado hacia
	   abajo respecto al resto de la fila. */
	align-items: center;
	/* Bootstrap fija ".btn-group{display:inline-flex !important}", que se
	   ajusta al ancho de su contenido — como ".dataTables_wrapper" es un flex
	   container en columna (ver más abajo), ".dt-buttons" queda como flex
	   item cuyo ancho de contenido no llega al borde derecho de la tabla.
	   Resultado: el buscador ("Buscar:", último elemento de la fila) se
	   quedaba corto del borde derecho de la tabla/buscador de Figma en vez de
	   coincidir con él. Forzar "flex" a ancho completo (100%) hace que
	   ".dt-buttons" sí ocupe toda la fila, para que el "margin-left:auto" de
	   abajo (primer botón tras "Agregar Filtro") pueda empujar ese segundo
	   grupo hasta el borde derecho real. */
	display: flex !important;
	width: 100%;
}

div.dataTables_wrapper div.dt-buttons .btn,
div.dataTables_wrapper div.dt-buttons .btn-group > .btn {
	margin-left: 0 !important;
	border-radius: var(--edatos-border-radius-sm, 5px) !important;
	background: var(--edatos-color-white-100, #FFF);
	border: 1px solid var(--edatos-color-primary-100, #004678);
	color: var(--edatos-color-primary-100, #004678) !important;
}

/* Bootstrap define ".btn-group > .btn { flex: 1 1 auto }" para que los
   botones de un grupo se repartan el ancho disponible — pensado para grupos
   que ocupan el 100% del contenedor. Aquí ".dt-buttons" es más ancho que la
   suma de sus botones, así que ese "flex-grow:1" los estira de forma
   desigual (cada uno según su contenido) en vez de dejarlos al tamaño fijo
   de Figma (40×30, o 61×30 los que llevan icono+chevron: "ocultar
   columnas"/"descargar", identificados por ".buttons-collection"). */
div.dataTables_wrapper div.dt-buttons .btn,
div.dataTables_wrapper div.dt-buttons .btn-group {
	flex: 0 0 auto;
}

div.dataTables_wrapper div.dt-buttons .btn {
	width: 40px;
	height: 30px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* DataTables Buttons no fija "align-items"/"justify-content" en el propio
   <button> (solo en el icono, ver regla ".btn i" de abajo), así que sin la
   regla de arriba el caret nativo de Bootstrap (".dropdown-toggle::after",
   segundo hijo de "ocultar columnas"/"descargar") queda desalineado
   verticalmente en vez de centrado junto al icono. Necesario pero no
   suficiente: ver la nota siguiente sobre el desbordamiento horizontal. */
/* Reducido de 61px/10px (medida original de Figma) a 40px/4px: a resoluciones
   de portátil habituales (~1366px, por debajo del breakpoint de 1399px que
   fija ".container" a 1400px) la fila ".dt-buttons" no tiene sitio para las
   9 acciones + buscador y el buscador salta a una segunda línea. El icono
   (20px) + la flecha nativa de Bootstrap (~8px) siguen entrando de sobra en
   40px; el hueco de 61px era más ancho de lo que su contenido necesitaba. */
div.dataTables_wrapper div.dt-buttons .btn.buttons-collection {
	width: 40px;
	gap: 4px;
}

/* ".dt-down-arrow" (segundo hijo del botón, entre el icono y el caret) lo
   añade la extensión vendor vacío — sin contenido ni "background-image" en
   este tema, ancho 0 — pero al ser un hijo flex más cuenta para el "gap" de
   la regla de arriba (uno ANTES y otro DESPUÉS de él) y para el reparto de
   "justify-content:center", sin aportar nada visual. Bootstrap añade además
   su propio "margin-left" al "::after" (el triángulo) por encima de ese
   "gap". Con el botón ya reducido a 40px, esos huecos de más (un "gap"
   redundante + el margin de Bootstrap) eran justo el desbordamiento que
   sacaba el icono por la izquierda y el caret por la derecha, fuera del
   borde del botón. Se retira el span vacío del flujo y se anula el margin
   del caret para que el único espaciado entre icono y caret sea el "gap"
   ya fijado arriba. */
div.dataTables_wrapper div.dt-buttons .btn.buttons-collection .dt-down-arrow {
	display: none;
}

div.dataTables_wrapper div.dt-buttons .btn.buttons-collection::after {
	margin-left: 0;
}

/* La regla ".btn i" de abajo añade padding horizontal de 10px a cada lado
   del icono, pensado para los botones de un solo icono (40px de ancho: 10px
   padding + 20px icono + 10px padding = 40, sin nada más dentro). En estos
   dos botones de "icono + caret" el icono es un hijo más del flex del
   propio <button> (junto al ".dt-down-arrow" y al "::after" del caret), así
   que ese mismo padding se suma también aquí: 2×10px padding + ~20px icono
   + 10px gap + ~11px caret ˜ 71px de contenido dentro de una caja de solo
   61px. Al desbordar, y con "justify-content:center" repartiendo el
   desbordamiento a ambos lados, el icono se salía por la izquierda del
   borde del botón y el caret por la derecha — pareciendo un elemento suelto
   fuera de la caja. Se quita el padding del icono aquí porque el espaciado
   ya lo da el "gap"/"width" del botón, no el icono. */
div.dataTables_wrapper div.dt-buttons .btn.buttons-collection i {
	padding: 0;
}

/* Sin display:flex + padding, el icono queda alineado a la caja de texto
   por defecto (izquierda/baseline) en vez de centrado en el botón de 40×30
   (o 61×30). El padding 5px/10px reproduce el hueco que deja el frame
   "v6-icon" (20×20) dentro de "BotonAccion" en Figma: 40-2*10=20 de ancho,
   30-2*5=20 de alto. */
/* Figma (nodo 12941:9440 "BotonAccion") pide estos iconos en peso "Light"
   (Font Awesome 6 PRO); sin esto heredan el "font-family"/"font-weight" que
   la propia hoja FA FREE del vendor pone en ".fa" (Solid, 900), más grueso
   que el diseño. Sólo entra en juego una vez el <link> de FA PRO que
   "base.html" añade para el <iframe> de la vista de recurso (ver
   "edatos_fontawesome_url" ahí, bloque "styles") ha cargado; hasta entonces
   el navegador no tiene esa cara y cae al Solid ya cargado. */
div.dataTables_wrapper div.dt-buttons .btn i {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--edatos-spacing-y-xs, 5px);
	padding: var(--edatos-spacing-y-xs, 5px) var(--edatos-spacing-x-sm, 10px);
	font-size: 20px;
	font-family: "Font Awesome 6 Pro";
	font-weight: var(--edatos-font-weight-light);
	color: inherit;
}

div.dataTables_wrapper div.dt-buttons .btn:hover,
div.dataTables_wrapper div.dt-buttons .btn:focus,
div.dataTables_wrapper div.dt-buttons .btn.btn-default:hover,
div.dataTables_wrapper div.dt-buttons .btn.btn-default:focus {
	background: var(--edatos-color-primary-100, #004678) !important;
	border-color: var(--edatos-color-white-100, #004678) !important;
	color: var(--edatos-color-white-100, #FFF) !important;
}

/* "Pantalla completa"/"Incrustar" (".resource-view-toolbar-btn") ya no se
   renderizan en Jinja -- el módulo "edatos-inline-resource-toolbar"
   (resource-view-inline-toolbar.js) los registra en esta misma fila
   ".dt-buttons" vía la Buttons API de DataTables (`dt.button().add()`) en
   cuanto el vendor publica "datatablesview:init-complete", para que queden
   en el mismo grupo de botones que pide Figma. Reciben el mismo icon-only
   que ya aplica ".resource-view .actions .btn" en el documento padre para
   el resto de tipos de vista -- para "datatables_view",
   "package/snippets/resource_view.html" ya no renderiza esos botones ahí
   (ver comentario en ese fichero). */
div.dataTables_wrapper div.dt-buttons .btn.resource-view-toolbar-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--edatos-spacing-y-xs, 5px);
	padding: var(--edatos-spacing-y-xs, 5px) var(--edatos-spacing-x-sm, 10px);
	font-size: 0;
}

/* El buscador ("Buscar:") de DataTables (".dataTables_filter"/"#dtprv_filter")
   lo mueve el módulo "edatos-inline-resource-toolbar"
   (resource-view-inline-toolbar.js) al final de ".dt-buttons", como último
   elemento de la fila (igual que en Figma). Al ser ahora hijo flex de
   ".dt-buttons" (gap:10px ya definido arriba) hace falta anular el
   float/margen negativo con el que el vendor lo posicionaba como hermano
   flotado de ".dataTables_length" en el layout original.
   OJO: no usar "margin-left:auto" aquí — en un flex-container empuja el
   elemento hasta el borde derecho de la fila (separándolo ~40px del botón
   "Compartir" en vez de los 10px de gap de Figma). Basta "margin:0" para
   que el buscador quede pegado al hueco del "gap" del contenedor, como
   cualquier otro botón de la fila. */
div.dataTables_wrapper div.dt-buttons .dataTables_filter,
div.dataTables_wrapper div.dt-buttons #dtprv_filter {
	float: none !important;
	margin: 0 !important;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Figma (nodo 12937:9200 "BotonAccion") no muestra la etiqueta "Buscar:"
   que añade DataTables por defecto — sólo el icono de lupa dentro del propio
   cuadro. El texto ("Buscar:") es un nodo de texto suelto dentro de
   "<label>", sin ningún elemento propio que se pueda ocultar por separado,
   así que se colapsa a "font-size:0" en el <label> (mismo truco que ya usa
   ".resource-view .actions .btn"): el input conserva su tamaño porque
   Bootstrap le da su propio "font-size" explícito (no heredado). El icono de
   lupa se simula con ::before sobre el <label> (los <input> no admiten
   pseudo-elementos) posicionado encima del propio campo, con padding-left
   en el input para dejarle sitio. */
div.dataTables_wrapper div.dt-buttons .dataTables_filter label {
	position: relative;
	display: inline-flex;
	align-items: center;
	margin: 0;
	font-size: 0;
	white-space: nowrap;
}

div.dataTables_wrapper div.dt-buttons .dataTables_filter label::before {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 14px;
	color: var(--edatos-color-primary-100, #004678);
	content: "\f002";
	pointer-events: none;
}

/* ".form-control-sm" (Bootstrap, hoja base del sitio) fija "min-height:
   calc(1.5em + 0.5rem + 2px)" (~28px) en este input — un "min-height" puesto
   por encima del "height" de abajo, gane quien gane en especificidad, así
   que sin anularlo aquí el campo salía más bajo (~28px) que los botones de
   30px de la fila y quedaba desalineado verticalmente. */
div.dataTables_wrapper div.dt-buttons .dataTables_filter input {
	margin-left: 0;
	height: 30px;
	min-height: 30px;
	width: 122px;
	border: 1px solid var(--edatos-color-primary-100, #004678);
	border-radius: var(--edatos-border-radius-sm, 5px);
	padding: 5px 10px 5px 30px;
}

/* Figma (nodo 12937:9200 "BotonAccion" del buscador) no muestra ningún
   icono de información junto al campo de búsqueda — sólo la lupa ya
   simulada arriba con "::before". "#filterinfoicon" lo añade la propia
   extensión vendor (ckanext-datatablesview, fuera de este repo) sin ningún
   hook de plantilla para quitarlo, así que se oculta por CSS. */
div.dataTables_wrapper div.dt-buttons #filterinfoicon {
	display: none;
}

/* "Buscar:" (".dataTables_filter"/"#dtprv_filter") solapado con "Mostrando X
   registros" (".dataTables_info") si ".dt-buttons.btn-group" nunca llega a
   aparecer (p.ej. una vista "datatables_view" con los botones de exportación
   desactivados en su configuración) -- ver Adenda "iconos... invisibles" en
   la documentación de este componente (docs/theming-resource-view-buttons.md)
   para el diagnóstico histórico del mismo síntoma bajo la arquitectura
   anterior (documento padre + <iframe>). "edatos-inline-resource-toolbar"
   (resource-view-inline-toolbar.js) solo traslada ".dataTables_filter" a
   ".dt-buttons" cuando este último existe (ver guarda al inicio de
   "setUpToolbar" en ese fichero); si nunca aparece, la regla de arriba (con
   ese descendiente) no llega a matchear y ".dataTables_filter" se queda
   como hijo DIRECTO de
   ".dataTables_wrapper", con el "float:right; margin-top:-1.4em" original
   del vendor
   ("#dtprv_filter", ID -- de ahí el "!important" aquí, para no depender de
   ganar por especificidad). Ese margen negativo asumía compartir fila con
   ".dataTables_info" mediante flotados clásicos de Bootstrap; en nuestro
   "display:flex;flex-direction:column" ya no comparten fila (son dos
   elementos flex distintos, uno debajo del otro), así que el margen negativo
   solo consigue que "Buscar:" se solape por encima de "Mostrando...". */
div.dataTables_wrapper > div.dataTables_filter {
	float: none !important;
	margin-top: 0 !important;
}

/* "edatos-inline-resource-toolbar" (resource-view-inline-toolbar.js) traslada
   el buscador dentro de ".dt-buttons" tanto en carga standalone como dentro
   del <iframe> -- ya no distingue entre ambos casos (ver comentario de
   "window.self === window.top" en ese fichero, usado solo para el margen
   superior de más abajo). La regla de arriba se queda como red de seguridad
   para cuando ".dt-buttons.btn-group" nunca aparece (ver comentario anterior)
   y ".dataTables_filter" sigue siendo hijo directo de ".dataTables_wrapper". */

/* Aire entre la botonera y el borde superior del navegador cuando la vista
   se carga standalone (sin el <iframe> que la envuelve, y por tanto sin el
   padding/margen que ya aporta el layout de la página del recurso
   -- "resource_view.html" -- alrededor de ese <iframe>). El propio JS marca
   este caso con la clase "edatos-standalone-dt-view" en "<html>" (mismo
   bloque que traslada el buscador, arriba) para no aplicar este margen
   también dentro del <iframe> real, donde duplicaría el espacio que ya
   existe. */
html.edatos-standalone-dt-view div.dataTables_wrapper div.dt-buttons {
	margin-top: var(--edatos-spacing-y-lg, 16px);
}

/* --- Resource view: panel "ocultar columnas"/"descargar" (dt-button-collection) ---
   Los botones ".buttons-collection" ("ocultar columnas" -- icono
   "fa-eye-slash" -- y "descargar") abren un panel flotante propio de
   DataTables Buttons ("div.dt-button-collection", position:fixed calculado
   por su propio JS, FUERA de ".dt-buttons") con la lista de columnas/
   formatos como "<a class="dt-button dropdown-item ...">" DIRECTOS (sin
   "<li>" envolvente, a diferencia del resto de dropdowns del sitio --
   OPCIONES/wrench/Vistas/Agregar Filtro -- que sí usan "<li><a>"), así que
   ninguna regla genérica ".dropdown-menu li a" les llega. Además el propio
   vendor (ckanext-datatablesview, hoja "datatablesview.css") fija su propio
   fondo/radio/sombra en "div.dt-button-collection" (blanco liso) y pone
   "background-color: transparent" en "div.dt-button-collection
   div.dropdown-menu" con la MISMA especificidad que nuestra regla genérica
   ".dropdown-menu" (0,1,0) -- como esa hoja se carga DESPUÉS que
   "edatostheme_css" en "base.html" (mismo problema ya documentado para
   ".dataTables_info"/"table.dataTable"), gana el empate y el panel se queda
   sin el lenguaje visual del resto de desplegables (fondo de color, filas
   con padding/radio/hover). Selectores exactamente igual de específicos que
   los del vendor (o más), para no depender del orden de carga. */
/* "!important" en las 4 declaraciones: con especificidad empatada
   (0,1,1) frente a la regla del vendor, gana quien cargue después --
   "datatablesview.css" se carga DESPUÉS que "edatostheme_css" en
   "base.html", así que sin "!important" el vendor ganaba box-shadow/
   padding/background/border (confirmado con getComputedStyle: shadow y
   padding caían al valor del vendor pese a que el radio, por coincidencia,
   parecía el nuestro -- lo daba en realidad la variante MÁS específica
   "div.dt-button-collection.fixed" del vendor, que solo fija radio y no
   pisa box-shadow/padding). El panel de "ocultar columnas" (colvis) recibe
   además la clase ".fixed" en tiempo de ejecución (posicionamiento
   "position:fixed" de DataTables Buttons), lo que sube aún más la
   especificidad del vendor (0,2,1) por encima de la nuestra si no se usa
   "!important". Fondo azul también aquí (no solo en ".dropdown-menu" de
   abajo) para que no asome el blanco del vendor en el padding entre el
   borde redondeado exterior y el contenido -- ver bloque siguiente. */
/* "width: auto !important": el vendor fija "width: 218px" fijo en este
   mismo selector, pero las etiquetas de columna más largas (p. ej.
   "CONFIDENCIALIDAD_OBSERVACION#es") miden ~310px de ancho con
   "white-space: nowrap" -- más que esos 218px. El "<div class="dropdown-
   menu">" interior (con "min-width: 100%" del vendor) termina más ancho
   que el contenedor exterior fijo, así que el texto/fondo de las filas se
   desborda fuera de la caja azul redondeada en vez de quedar contenido en
   ella (visible como texto sin fondo azul debajo, "flotando" sobre la
   tabla). Con "width: auto" el exterior pasa a "shrink-to-fit" (es
   "position:fixed"/"absolute" sin "right" fijado) y se ajusta al ancho
   real del contenido, igual que ya hace de forma natural el panel de
   "descargar" (etiquetas cortas, nunca desborda). */
div.dt-button-collection {
	background-color: var(--edatos-color-secondary-100, #004678) !important;
	border: none !important;
	border-radius: var(--edatos-border-radius-sm, 5px) !important;
	box-shadow: var(--shadow-dropdown, 0 2px 8px rgba(0, 0, 0, 0.12)) !important;
	padding: var(--edatos-spacing-y-xs, 6px) !important;
	width: auto !important;
}

/* "!important" en "max-height"/"overflow-y": el panel de "ocultar
   columnas" (colvis, 15 filas) es más alto que el hueco disponible bajo el
   botón, así que DataTables Buttons le añade la clase ".fixed" (overlay
   centrado en el viewport en vez de ancla bajo el botón -- ver comentario
   de la regla ".fixed" en el bloque de arriba). El vendor trae una regla
   EXTRA solo para ese caso, más específica que la nuestra:
   "div.dt-button-collection.fixed > :last-child { max-height: 100vh;
   overflow: auto; }" (0,3,0 por la pseudo-clase ":last-child", frente a
   nuestro 0,2,2) -- gana sin "!important" y anula el recorte a 260px,
   dejando que el panel crezca a su altura completa (~491px). DataTables
   calcula el "margin-top" de centrado (mitad de la altura medida, negativo)
   ANTES de que exista este override, así que con el panel más alto de lo
   previsto el resultado queda con el borde superior recortado por encima
   del viewport del iframe (parte del panel invisible, sin aire respecto al
   marco de la tabla). Con "!important" aquí, el recorte a 260px + scroll
   interno se aplica siempre, DataTables mide una altura mucho menor y
   calcula un margen de centrado que deja el panel entero dentro del
   viewport. El panel de "descargar" (sin ".fixed", 4 filas) no se ve
   afectado por este bug -- nunca alcanza el límite de 260px. */
div.dt-button-collection div.dropdown-menu {
	background-color: transparent !important;
	border-radius: var(--edatos-border-radius-sm, 5px);
	max-height: 260px !important;
	overflow-y: auto !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
}

div.dt-button-collection div.dropdown-menu::-webkit-scrollbar {
	width: 8px;
}

div.dt-button-collection div.dropdown-menu::-webkit-scrollbar-track {
	background: transparent;
}

div.dt-button-collection div.dropdown-menu::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: var(--edatos-border-radius-sm, 4px);
}

/* Filas del panel: mismo patrón de "píldora redondeada con hover claro" que
   ".dropdown-menu li a" usa en el resto del sitio, adaptado a que aquí no
   hay "<li>" (el propio "<a class="dropdown-item">" es hijo directo). */
div.dt-button-collection div.dropdown-menu a.dt-button.dropdown-item {
	display: flex;
	align-items: center;
	gap: var(--edatos-spacing-x-sm, 8px);
	width: auto;
	padding: var(--edatos-spacing-y-xs) var(--edatos-spacing-y-sm);
	margin: 3px var(--edatos-spacing-x-xs);
	border-radius: var(--edatos-border-radius-sm, 5px);
	color: var(--edatos-color-white-100, #FFF) !important;
	background-color: transparent !important;
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-light);
	white-space: nowrap;
}

div.dt-button-collection div.dropdown-menu a.dt-button.dropdown-item i {
	width: 16px;
	flex-shrink: 0;
	text-align: center;
	font-size: var(--edatos-font-size-sm);
}

/* Columnas del colvis: sin "<i>" propio -- se simula el mismo par de iconos
   "eye"/"eye-slash" que ya usan las filas "Show all"/"Show none" de abajo,
   para que se distinga a simple vista qué columnas están visibles ahora
   (".active", puesto por DataTables Buttons) de las ocultas. */
div.dt-button-collection div.dropdown-menu a.dt-button.buttons-columnVisibility::before {
	width: 16px;
	flex-shrink: 0;
	text-align: center;
	font-family: "Font Awesome 6 Free";
	font-weight: 400;
	content: "\f070";
}

div.dt-button-collection div.dropdown-menu a.dt-button.buttons-columnVisibility.active::before {
	font-weight: 900;
	content: "\f06e";
}

/* Bootstrap pinta ".dropdown-item.active" con un fondo propio (variable
   "--bs-dropdown-link-active-bg" de este bundle, un teal ajeno al tema) --
   se cancela para que la única marca de "columna visible" sea el icono de
   arriba, igual que el resto de filas del panel. */
div.dt-button-collection div.dropdown-menu a.dt-button.buttons-columnVisibility.active {
	background-color: transparent !important;
	font-weight: var(--edatos-font-weight-semibold);
}

/* Hover/focus, para CUALQUIER fila (incluidas las ".active" de arriba):
   misma especificidad (5 clases, 3 tags) + "!important" que la regla
   ".buttons-columnVisibility.active" de encima -- en un empate exacto gana
   la que aparece DESPUÉS en la hoja, así que esta regla debe ir aquí, tras
   el reset de "active", para que el hover siga pintándose incluso sobre una
   columna ya visible (si fuera al revés, "active" congelaría el fondo en
   transparente sin importar el estado de hover). */
div.dt-button-collection div.dropdown-menu a.dt-button.dropdown-item:hover,
div.dt-button-collection div.dropdown-menu a.dt-button.dropdown-item:focus {
	background-color: var(--edatos-color-primary-5, #e5ecf1) !important;
	color: var(--edatos-color-primary-100, #004678) !important;
}

/* Separador visual antes del bloque de acciones ("Restore visibility"/
   "Show all"/"Show none"/"Filtered"), que ya vienen con su propio icono
   Font Awesome ("fa-undo"/"fa-eye"/"fa-eye-slash"/"fa-filter") puesto por
   el propio vendor -- solo hace falta que hereden el color/tamaño de la
   regla ".dt-button.dropdown-item i" de arriba. */
div.dt-button-collection div.dropdown-menu a.dt-button.buttons-colvisRestore {
	margin-top: var(--edatos-spacing-y-xs, 6px);
	border-top: 1px solid var(--ckan-divider-on-dark);
	padding-top: var(--edatos-spacing-y-sm, 8px);
}

/* --- Resource view: botón "Agregar Filtro" ---
   Figma (nodos 12937:9102 / 12941:9388 "BotonDesplegableM") define este
   botón con icono "filter", texto y icono "angle-down" (chevron), con
   borde/texto en color accent (#007fb0) en vez del azul primario que usa
   ".btn-primary" en el resto del sitio. El botón se renderiza directamente
   en Jinja como <a class="btn btn-primary"> plano
   (templates_priority/datatables/datatables_view.html, dentro de
   ".resource-view-filters"), igual que el generado en tiempo de ejecución
   por el módulo JS de CKAN core "resource-view-filters"
   (ckan/public/base/javascript/modules/resource-view-filters.js, fuera de
   este repo, aún usado tal cual para las vistas filtrables que no son
   "datatables_view" -- ver "package/snippets/resource_view_filters.html"):
   sin iconos y sin ningún hook propio para añadirlos. Los iconos se simulan
   con contenido generado Font Awesome vía ::before/::after en vez de tocar
   ninguno de los dos.

   Figma coloca este botón como primer elemento de la MISMA fila que el
   resto de botones de la tabla (nodo 12937:9102 "Botonería"): dos grupos
   claramente separados — "Agregar Filtro" pegado al borde izquierdo de la
   tabla, y el resto (Pantalla completa/Incrustar + botones nativos +
   buscador) pegado al borde derecho, con el hueco entre ambos creciendo o
   encogiendo según el ancho disponible. "edatos-inline-resource-toolbar"
   (resource-view-inline-toolbar.js) construye ".resource-view-filters"
   enteramente en JS (ver "buildFilterPanel" en ese fichero -- ya no hay
   markup propio en Jinja para este botón) y lo inserta como primer hijo de
   ".dt-buttons" en cuanto el vendor termina de inicializar la tabla.
   Antes se separaba el segundo grupo con un "margin-right" fijo (50px) en
   ESTE elemento, porque ".dt-buttons" era "inline-flex" (se ajusta al ancho
   de su contenido) y un "margin-left:auto" en el primer botón del segundo
   grupo no tenía espacio libre que repartir. Ahora que ".dt-buttons" ocupa
   el 100% de la fila (ver regla ".dt-buttons.btn-group" más arriba), el
   hueco lo genera un "margin-left:auto" en el primer botón tras este
   elemento (ver más abajo, selector con "+"), que empuja todo el segundo
   grupo hasta el borde derecho real de la tabla — un "margin-right" fijo
   aquí ya no hace falta y solo restaría espacio disponible a ese empuje. */
div.dataTables_wrapper div.dt-buttons .resource-view-filters {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	/* El módulo JS de CKAN core "resource-view-filters" (fuera de este repo)
	   le pone un "margin-bottom" propio (14px, convención genérica de
	   "form-group"). Con ".dt-buttons" en "align-items:center" ese margen
	   se cuenta como parte de la caja a centrar: al no tener margen arriba,
	   el hueco de abajo empujaba el borde del botón hacia el límite
	   superior de la fila en vez de centrarlo con el resto. */
	margin-bottom: 0;
}

/* Empuja el SEGUNDO grupo (Pantalla completa/Incrustar + botones nativos +
   buscador) hasta el borde derecho de ".dt-buttons" — que ahora coincide
   con el borde derecho real de la tabla, ver regla ".dt-buttons.btn-group"
   de arriba —, dejando "Agregar Filtro" pegado al borde izquierdo.
   IMPORTANTE: "!important" es imprescindible aquí porque la regla genérica
   "div.dataTables_wrapper div.dt-buttons .btn { margin-left: 0 !important;
   ... }" (más arriba en este fichero, pensada para cancelar el solape de
   ".btn-group" clásico de Bootstrap) también matchea este mismo botón
   (".btn.resource-view-toolbar-btn" es a la vez ".btn") y sin un
   "!important" propio aquí ese "margin-left:0" gana siempre, sin importar
   la especificidad del selector — un "!important" sólo puede ganarle a
   otro "!important", nunca a una regla no-"!important" por más específica
   que sea. Confirmado en DevTools (panel Elements, el hijo inmediato de
   ".resource-view-filters" llevaba "margin-left:0" heredado de la regla
   genérica pese al "margin-left:auto" de aquí, mientras no tuviera su
   propio "!important"). */
div.dataTables_wrapper div.dt-buttons .resource-view-filters + .btn.resource-view-toolbar-btn {
	margin-left: auto !important;
}

/* "gap"/"padding" reducidos frente a la medida original de Figma (8px/10px)
   por el mismo motivo que ".buttons-collection" más abajo: a resoluciones de
   portátil habituales el buscador no cabía en la fila y saltaba de línea. */
.resource-view-filters > a.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	height: 30px;
	padding: 0 5px;
	background-color: var(--edatos-color-white-100, #FFF);
	border-color: var(--edatos-color-accent-100, #007fb0);
	color: var(--edatos-color-accent-100, #007fb0);
}

.resource-view-filters > a.btn-primary::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f0b0";
}

.resource-view-filters > a.btn-primary::after {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f107";
}

.resource-view-filters > a.btn-primary:hover,
.resource-view-filters > a.btn-primary:focus {
	background-color: var(--edatos-color-accent-100, #007fb0);
	border-color: var(--edatos-color-accent-100, #007fb0);
	color: var(--edatos-color-white-100, #FFF);
}

/* Una vez ".resource-view-filters" vive dentro de ".dt-buttons" (ver bloque
   de arriba), las reglas genéricas "div.dataTables_wrapper div.dt-buttons
   .btn" (icono cuadrado 40×30, padding:0, color/border-radius con
   "!important") tienen más especificidad que ".resource-view-filters >
   a.btn-primary" de arriba y lo aplastan a un cuadrado sin texto visible.
   Se repite aquí el mismo estilo con un selector igual o más específico
   (mismo patrón ya usado para "resource-view-toolbar-btn") para que
   "Agregar Filtro" conserve su forma de píldora con texto, en vez de
   quedar recortado al tamaño de icono-only del resto de botones. */
div.dataTables_wrapper div.dt-buttons .resource-view-filters > a.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: auto;
	height: 30px;
	padding: 0 5px;
	background-color: var(--edatos-color-white-100, #FFF) !important;
	border-color: var(--edatos-color-accent-100, #007fb0) !important;
	color: var(--edatos-color-accent-100, #007fb0) !important;
	border-radius: var(--edatos-border-radius-sm, 5px) !important;
	margin-left: 0 !important;
}

div.dataTables_wrapper div.dt-buttons .resource-view-filters > a.btn-primary:hover,
div.dataTables_wrapper div.dt-buttons .resource-view-filters > a.btn-primary:focus {
	background-color: var(--edatos-color-accent-100, #007fb0) !important;
	border-color: var(--edatos-color-accent-100, #007fb0) !important;
	color: var(--edatos-color-white-100, #FFF) !important;
}

/* --- Resource view: panel personalizado de "Agregar Filtro" (checkboxes) ---
   "buildFilterPanel" (dentro de "edatos-inline-resource-toolbar",
   resource-view-inline-toolbar.js) sustituye por completo, solo para
   "datatables_view", el flujo por defecto de CKAN core para este botón
   (select2, ver "RUTA DE RESPALDO" más abajo) por un panel propio, fiel al
   mockup de Figma (nodo 12941:9342 "BotonDesplegableM" + panel de
   "Opción 1..5" / "Eliminar filtro"): un único bloque azul fusionado con el
   botón, con checkboxes que permiten marcar varios valores del campo
   elegido a la vez. Ver el bloque de comentarios en el propio JS para la
   arquitectura (estado compartido con CKAN core vía "ckan.views.filters"). */
div.dataTables_wrapper div.dt-buttons .resource-view-filters {
	position: relative;
}

/* Fusiona visualmente el botón con el panel: sin esquinas redondeadas donde
   conectan (abajo del botón), sin hueco entre ambos, mismo azul sólido que
   el resto del panel -- igual que Figma, donde "BotonDesplegableM" (el
   botón) solo redondea sus esquinas SUPERIORES y el panel solo las
   INFERIORES. Sin esto, el botón se queda en su estilo "outline" de reposo
   (fondo blanco/borde azul) mientras el panel ya está abierto debajo,
   dando la impresión de dos controles sueltos en vez de un único
   desplegable, que es justo lo que Figma no muestra. */
div.dataTables_wrapper div.dt-buttons .resource-view-filters.edatos-filter-open > a.btn-primary {
	background-color: var(--edatos-color-accent-100, #007fb0) !important;
	border-color: var(--edatos-color-accent-100, #007fb0) !important;
	color: var(--edatos-color-white-100, #FFF) !important;
	border-radius: var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px) 0 0 !important;
}

/* El icono "angle-down" de reposo (ver "::after" más arriba) se cambia a
   "angle-up" mientras el panel está abierto -- Figma solo documenta el
   estado abierto (captura única del componente), pero un desplegable que
   apunta hacia abajo cuando ya está desplegado hacia abajo no tiene
   sentido; se infiere el estado cerrado con la flecha por defecto ya
   existente en el sitio para el resto de dropdowns. */
.resource-view-filters.edatos-filter-open > a.btn-primary::after {
	content: "\f106";
}

.edatos-filter-panel {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 171px;
	background-color: var(--edatos-color-accent-100, #007fb0);
	border-radius: 0 0 var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	padding: 10px;
	z-index: 1000;
}

.edatos-filter-panel-list {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 220px;
	overflow-y: auto;
	/* Fondo de la pista del scroll transparente (deja ver el azul del panel
	   detrás, no un blanco/gris ajeno al resto del componente) -- Firefox vía
	   "scrollbar-color" (segundo valor = pista), Chrome/Edge/Safari vía los
	   pseudo-elementos "::-webkit-scrollbar-track". El "thumb" (la barra que
	   se arrastra) sí necesita algo de opacidad para poder verse/agarrarse
	   sobre ese mismo azul. */
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, 0.5) transparent;
}

.edatos-filter-panel-list::-webkit-scrollbar {
	width: 8px;
}

.edatos-filter-panel-list::-webkit-scrollbar-track {
	background: transparent;
}

.edatos-filter-panel-list::-webkit-scrollbar-thumb {
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 4px;
}

.edatos-filter-panel-back {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px;
	margin-bottom: 5px;
	color: var(--edatos-color-white-100, #FFF);
	font-size: var(--edatos-font-size-sm, 14px);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.edatos-filter-panel-back::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f060";
}

.edatos-filter-panel-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px;
	border-radius: 3px;
	color: var(--edatos-color-white-100, #FFF);
	font-size: var(--edatos-font-size-sm, 14px);
	cursor: pointer;
	white-space: nowrap;
}

/* Figma (nodo 12941:9342, fila "Opción 5") no muestra un estado
   "seleccionado" persistente -- es el hover de esa fila concreta, capturado
   en la captura estática del mockup. El estilo a reutilizar para el hover
   es el mismo que ya tiene la fila "Eliminar filtro" (fondo claro
   "--edatos-color-primary-5" + texto/icono en azul de acento), no un gris
   plano. El estado "--checked" (persistente, para marcar qué opción está
   realmente activa) es una necesidad propia de este panel real -- Figma no
   lo contempla porque su mockup es estático -- y se mantiene aparte del
   hover con negrita + icono relleno. */
.edatos-filter-panel-item:hover {
	background-color: var(--edatos-color-primary-5, #e5ecf1);
	color: var(--edatos-color-accent-100, #007fb0);
}

/* Casilla vacía (Regular/400) vs. marcada (Solid/900) -- mismo par de
   glifos que usa Figma ("square" / "square-check"), en Font Awesome FREE
   (no PRO): a diferencia de los iconos "Light" de otros botones de esta
   misma fila, este panel puede pintarse justo tras el clic en "Agregar
   Filtro", posiblemente antes de que el <link> de FA PRO que "base.html"
   añade para el <iframe> (ver "edatos_fontawesome_url" ahí) haya terminado
   de cargar -- usar solo FREE (ya cargado siempre) evita un parpadeo de
   icono roto. */
.edatos-filter-panel-item::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	font-family: "Font Awesome 6 Free";
	font-weight: 400;
	content: "\f0c8";
}

.edatos-filter-panel-item--checked {
	font-weight: 600;
}

.edatos-filter-panel-item--checked::before {
	font-weight: 900;
	content: "\f14a";
}

.edatos-filter-panel-loading,
.edatos-filter-panel-empty {
	padding: 3px;
	color: var(--edatos-color-white-100, #FFF);
	font-size: var(--edatos-font-size-sm, 14px);
	opacity: 0.8;
}

/* Misma fila "Eliminar filtro" que Figma: fondo claro sobre el panel azul,
   texto/icono en el azul de acento (el mismo contraste invertido que usa
   Figma para distinguirla del resto de opciones, en blanco sobre azul). */
.edatos-filter-panel-clear {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px;
	margin-top: 5px;
	background-color: var(--edatos-color-accent-100, #007fb0);
	color: var(--edatos-color-white-100, #FFF);
	border-radius: 3px;
	cursor: pointer;
	font-size: var(--edatos-font-size-sm, 14px);
	white-space: nowrap;
}

/* En reposo, "Eliminar filtro" se confunde con el resto de filas del panel
   (mismo azul de fondo, texto blanco); al pasar el ratón, cambia al fondo
   claro "--edatos-color-primary-5" + texto de acento -- el mismo par que ya
   usa el hover del resto de filas del panel (".edatos-filter-panel-item:
   hover"), así que "Eliminar filtro" reacciona igual que cualquier otra
   fila interactiva del componente. */
.edatos-filter-panel-clear:hover {
	background-color: var(--edatos-color-primary-5, #e5ecf1);
	color: var(--edatos-color-accent-100, #007fb0);
}

.edatos-filter-panel-clear::before {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f00d";
}

/* --- Resource view: desplegables de "Agregar Filtro" (select2) ---
   Este theming ya NO aplica a "datatables_view": ahí ".resource-view-filters"
   lo construye "buildFilterPanel" (edatos-inline-resource-toolbar,
   resource-view-inline-toolbar.js) enteramente en JS, sin ningún
   "data-module" propio, así que el módulo de CKAN core
   "resource-view-filters" (más abajo, que escanea el DOM buscando su propio
   "data-module") nunca llega a registrarse sobre ese elemento -- no es un
   "por si falla el JS propio", directamente no hay nada ahí que ese módulo
   pueda encontrar.
   Sigue siendo el ÚNICO flujo para el resto de vistas de recurso filtrables
   (no "datatables_view"): esas siguen usando, sin ninguna intervención
   nuestra, el snippet vendored "package/snippets/resource_view_filters.html"
   (fuera de este repo) con "data-module=\"resource-view-filters\"".
   El módulo de CKAN core "resource-view-filters" (fuera de este repo)
   construye el selector de campo y, tras elegir uno, el selector de valor
   con select2 3.5.x -- una librería vendored sin ningún estilo propio del
   sitio, así que sale con la paleta gris/blanca por defecto del navegador,
   totalmente desconectada del botón azul "Agregar Filtro" que lo abre.
   Figma (nodo 12941:9342 "BotonDesplegableM") pinta el panel desplegado en
   el mismo azul de acento que el botón ("colors/accent", #007fb0), con
   texto blanco.
   El control cerrado ("select2-choice") reutiliza el mismo lenguaje visual
   ya establecido para el propio botón "Agregar Filtro" arriba (borde/texto
   azul en reposo, relleno azul con texto blanco al abrirse) en vez del azul
   sólido permanente de Figma, para quedar visualmente coherente con ese
   botón vecino en la misma fila. */
.resource-view-filters .select2-container .select2-choice {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 5px;
	height: 30px;
	padding: 0 10px;
	background-color: var(--edatos-color-white-100, #FFF);
	border: 1px solid var(--edatos-color-accent-100, #007fb0);
	border-radius: var(--edatos-border-radius-sm, 5px);
	color: var(--edatos-color-accent-100, #007fb0);
	font-size: var(--edatos-font-size-sm, 14px);
}

/* select2 marca el estado "sin selección" (placeholder, p.ej. "Seleccione
   un campo") con la clase modificadora ".select2-default", cuyo propio CSS
   vendored fija "color:#999 !important" -- ninguna especificidad normal
   puede ganarle a un "!important", así que aquí también hace falta
   "!important" para que el placeholder se vea en el azul de acento en vez
   de gris (verificado: sin esto, el borde/fondo sí cambiaban pero el texto
   se quedaba en gris #999). */
.resource-view-filters .select2-container .select2-choice.select2-default {
	color: var(--edatos-color-accent-100, #007fb0) !important;
}

.resource-view-filters .select2-container.select2-dropdown-open .select2-choice {
	background-color: var(--edatos-color-accent-100, #007fb0);
	color: var(--edatos-color-white-100, #FFF);
	border-radius: var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px) 0 0;
}

.resource-view-filters .select2-container.select2-dropdown-open .select2-choice.select2-default {
	color: var(--edatos-color-white-100, #FFF) !important;
}

.resource-view-filters .select2-container .select2-choice .select2-arrow b {
	border-color: currentColor transparent transparent transparent;
}

/* select2 3.5.x posiciona la "x" de "vaciar selección" con una imagen de
   sprite propia (select2.png, no vendored en este bundle) -- se sustituye
   por un glifo de Font Awesome del mismo color que el texto del control. */
.resource-view-filters .select2-container .select2-choice abbr.select2-search-choice-close {
	background: none;
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	color: currentColor;
}

.resource-view-filters .select2-container .select2-choice abbr.select2-search-choice-close::before {
	content: "\f00d";
}

/* El panel flotante ("#select2-drop") vive en el <body> de la página,
   fuera de ".resource-view-filters" (select2 lo ancla siempre ahí -- estas
   vistas de recurso filtrables no-"datatables_view" se renderizan en la
   página normal del recurso, sin ningún <iframe> de por medio). select2
   reutiliza un único "#select2-drop" para el desplegable actualmente
   abierto -- nunca hay dos a la vez -- así que el id es un selector seguro
   y preciso sin necesidad de anidarlo bajo ".resource-view-filters". */
#select2-drop {
	background-color: var(--edatos-color-accent-100, #007fb0);
	border: none;
	border-radius: 0 0 var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
	padding: 5px;
}

#select2-drop .select2-search {
	padding: 0 0 5px;
}

#select2-drop .select2-search input.select2-input {
	border-radius: var(--edatos-border-radius-sm, 5px);
	border: none;
	padding: 4px 8px;
	width: 100%;
	box-sizing: border-box;
}

#select2-drop .select2-results {
	margin: 0;
	padding: 0;
	max-height: 200px;
}

#select2-drop .select2-results .select2-result-label {
	color: var(--edatos-color-white-100, #FFF);
	padding: 5px 8px;
	border-radius: var(--edatos-border-radius-sm, 3px);
}

#select2-drop .select2-results .select2-highlighted > .select2-result-label {
	background-color: var(--edatos-color-primary-5, #E5ECF1);
	color: var(--edatos-color-accent-100, #007fb0);
}

#select2-drop .select2-no-results,
#select2-drop .select2-searching {
	color: var(--edatos-color-white-100, #FFF);
	padding: 5px 8px;
	background: transparent;
}

/* --- Resource view: "Mostrar X registros" (".dataTables_length") debajo de
   la tabla ---
   Figma (nodo 12941:9258) coloca el selector "Mostrar: [20] registros" bajo
   la tabla, junto a la paginación, en vez de sobre ella. El vendor
   (ckanext-datatablesview) lo renderiza como primer hijo de
   ".dataTables_wrapper", antes de ".dt-buttons"/".dataTables_scroll" (la
   tabla) — todos los hijos de ".dataTables_wrapper" son bloques en flujo
   normal (display:block, sin flex/grid propio), así que su orden visual es
   literalmente el orden del DOM y no se puede alterar sin, o bien mover el
   nodo real (innecesario aquí: length y tabla viven en el MISMO documento
   del iframe, a diferencia de los botones "Pantalla completa"/"Incrustar"
   del bloque de arriba), o bien convertir el propio ".dataTables_wrapper" en
   contenedor flex para poder usar "order". Se opta por la segunda vía por
   ser CSS puro. "flex-direction:column" reproduce el mismo apilado vertical
   a ancho completo que ya tenía en flujo normal (cada hijo sigue siendo
   bloque, "align-items" por defecto "stretch" iguala su comportamiento), así
   que no cambia el resto de hijos no reordenados aquí abajo. */
div.dataTables_wrapper {
	display: flex;
	flex-direction: column;
}

/* Solo se reordena el hijo afectado por el movimiento; el resto
   (".dt-buttons", ".dataTables_info", ".dataTables_processing",
   ".dataTables_scroll" — la tabla) conserva su "order" inicial (0, el valor
   por defecto de flex) y por tanto su posición actual, ya correcta, sobre la
   tabla. ".dataTables_paginate" (paginación) ya vive en el vendor con
   "margin-top:-35px", pensado para pegarse a su hermano inmediatamente
   anterior en el orden visual (originalmente ".dataTables_info", cuando
   ambos formaban la fila inferior clásica de DataTables). Al insertar
   ".dataTables_length" justo antes en el nuevo orden, ese mismo margen
   negativo lo pega a la fila de "Mostrar X registros" en su lugar — mismo
   mecanismo del vendor, nuevo hermano anterior — sin necesidad de version
   propia del margen. */
div.dataTables_wrapper div.dataTables_length {
	order: 1;
	margin-top: var(--edatos-spacing-y-lg, 16px);
}

div.dataTables_wrapper div.dataTables_paginate {
	order: 2;
}

/* ".resourceinfo" (enlace al recurso origen) y ".sortinfo" ("Sort: _id") no
   están en el diseño de Figma bajo la tabla — se ocultan en vez de
   reordenarse. No hay plantilla propia que los genere (los renderiza el
   vendor dentro del iframe), así que "display:none" es la única forma de
   quitarlos sin tocar código fuera de este repo. */
div.dataTables_wrapper div.resourceinfo,
div.dataTables_wrapper div.sortinfo {
	display: none;
}

/* --- Resource view: scrollbar horizontal de la tabla (".dataTables_scrollBody") ---
   Ver "specs/investigacion-scroll-lateral-resource-view-datatable.md": el
   vendor (ckan/ckanext/datatablesview, CKAN core) ya inicializa DataTables
   con "scrollX:true" / "responsive:false" de fábrica en modo tabla (no hace
   falta ningún JS propio para activarlo -- ver la adenda de esa
   investigación); cuando el contenido desborda el ancho disponible aparece
   un scrollbar horizontal real que conviene estilizar. Mismo patrón ya usado
   en este fichero para ".edatos-filter-panel-list"/"div.dt-button-collection
   div.dropdown-menu" (pista transparente + "thumb" con color del sistema),
   pero con un tono OSCURO en vez de blanco semitransparente: a diferencia de
   esos dos paneles (fondo azul oscuro propio), ".dataTables_scrollBody" tiene
   fondo blanco (el de la propia tabla), donde un "thumb" claro no tendría
   contraste suficiente para verse. */
div.dataTables_wrapper div.dataTables_scrollBody {
	scrollbar-width: thin;
	scrollbar-color: var(--edatos-color-gray-40, #999999) transparent;
}

div.dataTables_wrapper div.dataTables_scrollBody::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

div.dataTables_wrapper div.dataTables_scrollBody::-webkit-scrollbar-track {
	background: transparent;
}

div.dataTables_wrapper div.dataTables_scrollBody::-webkit-scrollbar-thumb {
	background-color: var(--edatos-color-gray-40, #999999);
	border-radius: var(--edatos-border-radius-sm, 5px);
}

/* --- Resource view: aspecto de la tabla al estilo del visualizador (".dtfc-has-left") ---
   ".dtfc-has-left" es la clase que la extensión FixedColumns de DataTables añade a
   "div.dataTables_scroll" en cuanto "scrollX:true" está activo -- que es el modo tabla
   de fábrica del vendor (ver bloque de scrollbar justo arriba), así que este selector
   aplica a cualquier vista "datatables_view" del portal en modo tabla, no a un recurso
   concreto.

   El vendor trae, para esta combinación concreta, "table.dataTable.table-bordered.dtfc-has-
   left { border-left-color: currentcolor }". Aunque el "border-left-style" de esa regla es
   "none" (no se pinta ahí), el COLOR se sigue heredando hacia las celdas via el reset de
   Bootstrap 5 "border-color: inherit" en th/td, y allí sí hay "border-style: solid" -- el
   resultado es que el borde IZQUIERDO de cada celda queda en un tono ("currentcolor", texto)
   distinto y más oscuro que el resto de bordes (gris claro de Bootstrap), lo que se percibe
   como una línea negra/doblada en cada columna, más llamativa en el lateral izquierdo de la
   tabla. Quitar aquí abajo los bordes verticales de las celdas no es solo estética (ver
   siguiente bloque): también elimina ese color desalineado de raíz, al no quedar ningún
   "border-left" que pueda heredarlo.

   Referencia visual: la tabla del visualizador (metamac-portal) no es HTML -- es un
   "<canvas>" (ver "Delegate.js"/"BodyZone.js"/"TopHeaderZone.js" en ese repo), pero define un
   lenguaje de bordes claro que aquí se traduce a CSS real: marco exterior con borde + radio,
   cabecera con fondo blanco (no el gris/azulado de Bootstrap) y texto en negrita, celdas de
   cuerpo con borde solo horizontal (sin separadores verticales entre columnas) y sin franjas
   de fila alternas. Los tokens de color (`--edatos-color-gray-60/-40/-80/-white-100`) son los
   mismos que usa ese canvas (se leen ahí en runtime vía "getComputedStyle"), así que no son
   una aproximación: son las mismas variables del sistema de diseño. */
div.dataTables_wrapper div.dataTables_scroll.dtfc-has-left {
	border: var(--edatos-border-width-xs, 1px) solid var(--edatos-color-gray-60, #666666);
	border-radius: var(--edatos-border-radius-sm, 5px);
	overflow: hidden;
}

div.dataTables_wrapper div.dataTables_scroll.dtfc-has-left table.dataTable {
	font-family: var(--edatos-font-family, 'Open Sans', 'Trebuchet MS', Arial, sans-serif);
}

/* Sin bordes verticales entre columnas (el marco exterior de arriba ya cierra los lados
   izquierdo/derecho) -- mismo criterio que ".bodyCell.border.vertical: false" en el canvas
   de referencia. El borde horizontal de cada fila se fija por separado más abajo. */
div.dataTables_wrapper div.dataTables_scroll.dtfc-has-left table.dataTable thead th,
div.dataTables_wrapper div.dataTables_scroll.dtfc-has-left table.dataTable tbody td {
	border-left: none;
	border-right: none;
}

div.dataTables_wrapper div.dataTables_scroll.dtfc-has-left table.dataTable tbody td {
	border-top: none;
	border-bottom: var(--edatos-border-width-xs, 1px) solid var(--edatos-color-gray-40, #999999);
}

/* Cabecera con fondo blanco (no el gris/azulado de Bootstrap) y texto en negrita, como en el
   canvas de referencia ("headerCell.font: 'Bold ...'", fondo blanco salvo selección). */
div.dataTables_wrapper div.dataTables_scroll.dtfc-has-left table.dataTable thead th {
	background-color: var(--edatos-color-white-100, #FFFFFF);
	color: var(--edatos-color-gray-80, #333333);
	font-weight: var(--edatos-font-weight-bold, 700);
	border-top: none;
	border-bottom: var(--edatos-border-width-sm, 2px) solid var(--edatos-color-gray-40, #999999);
}

/* Sin franjas de fila alternas (".table-striped" del vendor). Bootstrap 5 no las pinta con
   "background-color" sino con "box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)" en
   las filas impares -- por eso hace falta anular el "box-shadow", no solo el fondo. El estado
   de fila/columna seleccionada o el "hover" (".table-hover") siguen intactos: pintan su propio
   "box-shadow"/fondo con más especificidad (clase de estado en vez de ":nth-of-type"), no lo
   sustituyen. */
div.dataTables_wrapper div.dataTables_scroll.dtfc-has-left table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {
	background-color: var(--edatos-color-white-100, #FFFFFF);
	box-shadow: none;
}

/* --- Resource view: paginación de la tabla (DataTables) ---
   Mismo lenguaje visual que ".pagination-wrapper" (paginación del listado
   de datasets, sección 19 "PAGINACIÓN" más abajo en este fichero): botones
   individuales con borde y sin fondo, radio uniforme en todos ellos, en
   vez del estilo "conectado" de Bootstrap que trae el vendor de serie
   (bordes solapados con margin-left:-1px, radio solo en el primer/último
   botón). El DOM lo genera "ckanext-datatablesview" (fuera de este repo)
   con las MISMAS clases Bootstrap que ya usa ".pagination-wrapper"
   (".page-item"/".page-link"/".active"/".disabled"), así que solo hace
   falta reescribir la apariencia, no la estructura — y solo el aspecto de
   los botones: la posición del bloque (a la derecha, junto a "Mostrar X
   registros") ya la fija el reordenamiento de más arriba y no se toca
   aquí. A diferencia de ".pagination-wrapper", el "…" de elipsis NO tiene
   aquí una clase propia ("page-ellipsis") — el vendor le pone la misma
   clase "disabled" que a los botones "previous"/"next" deshabilitados —
   así que se distinguen con ":not(.previous):not(.next)" en vez de por
   clase, y no hace falta cuidar el orden de las reglas en la cascada (los
   selectores ya son mutuamente excluyentes). */
div.dataTables_wrapper div.dataTables_paginate .page-item {
	margin: 0;
}

div.dataTables_wrapper div.dataTables_paginate .page-item .page-link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	padding: var(--edatos-spacing-y-xs, 5px) var(--edatos-spacing-x-sm, 10px);
	margin: 0 var(--edatos-spacing-x-xs, 3px);
	font-size: var(--edatos-font-size-sm, 14px);
	font-weight: var(--edatos-font-weight-light, 300);
	line-height: 1;
	text-decoration: none;
	color: var(--edatos-color-gray-40, #999999);
	background-color: transparent;
	border: 1px solid var(--edatos-color-gray-40, #999999);
	border-radius: var(--edatos-border-radius-sm, 4px);
	box-shadow: none;
	transition: all 0.2s ease;
}

div.dataTables_wrapper div.dataTables_paginate .page-item:not(.active):not(.disabled) .page-link:hover {
	background-color: var(--edatos-color-primary-5, #e5ecf1);
	border-color: var(--edatos-color-primary-100, #004678);
	color: var(--edatos-color-primary-100, #004678);
}

div.dataTables_wrapper div.dataTables_paginate .page-item.active .page-link {
	color: var(--edatos-color-primary-100, #004678);
	font-weight: var(--edatos-font-weight-semibold, 600);
	background-color: transparent;
	border-color: var(--edatos-color-primary-100, #004678);
	box-shadow: none;
	pointer-events: none;
	cursor: not-allowed;
}

div.dataTables_wrapper div.dataTables_paginate .page-item.previous.disabled .page-link,
div.dataTables_wrapper div.dataTables_paginate .page-item.next.disabled .page-link {
	display: none;
}

div.dataTables_wrapper div.dataTables_paginate .page-item.disabled:not(.previous):not(.next) .page-link {
	display: block;
	color: var(--edatos-color-gray-40, #999999);
	border-color: transparent;
	background-color: transparent;
	pointer-events: none;
	cursor: default;
	padding: 0.5rem 0.5rem;
}

div.dataTables_wrapper div.dataTables_paginate .page-item .page-link:focus {
	box-shadow: none;
}

div.dataTables_wrapper div.dataTables_paginate .page-item .page-link:focus-visible {
	outline: 2px solid var(--edatos-color-primary-100, #004678);
	outline-offset: 2px;
	box-shadow: none;
}

/* --- Resource read: URL --- */
.module-resource .module-content p.text-muted.ellipsis,
.module-resource .module-content p.text-muted.break-word {
	color: var(--edatos-color-black-100);
	font-size: var(--edatos-font-size-md);
	font-weight: var(--edatos-font-weight-light);
	line-height: 26px;
	max-width: 814px;
}

.module-resource .module-content p.text-muted.ellipsis a,
.module-resource .module-content p.text-muted.break-word a {
	color: var(--edatos-color-primary-100, #004678);
	font-weight: var(--edatos-font-weight-light);
	text-decoration: none;
}

.module-resource .module-content p.text-muted.ellipsis a:hover,
.module-resource .module-content p.text-muted.break-word a:hover {
	text-decoration: underline;
}

/* --- Resource read: descripción --- */
.module-resource .module-content .prose.notes {
	color: var(--edatos-color-black-100);
	font-size: var(--edatos-font-size-md);
	font-weight: var(--edatos-font-weight-light);
	line-height: 26px;
	max-width: 814px;
}

/* --- Resource read: resource name h2 subtitle --- */
.module-resource .module-content h2 {
	color: var(--edatos-color-black-100);
	font-size: var(--edatos-font-size-lg);
	font-style: normal;
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 26px;
	margin-top: var(--edatos-spacing-y-sm);
	margin-bottom: var(--edatos-spacing-y-xs);
}


/* ============================================================
   8. RESOURCE READ — Sidebar (filtro_recursos) + Metadata
   ============================================================ */

/* --- Gap entre sidebar y contenido principal --- */
.module-resource ~ .primary {
	padding-left: 20px;
}

/* Fix: cuando el sidebar usa .showcase-detail-sidebar, ese div ya tiene su propio borde;
   se elimina el borde duplicado del .secondary exterior */
.secondary:has(.showcase-detail-sidebar) {
	border: none;
	padding: 0;
	background: transparent;
}

/* --- Sidebar: contenedor con borde (filtro_recursos) — read y edit --- */
.secondary:has(.module.context-info),
.module-resource ~ .secondary {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	border-radius: var(--edatos-border-radius-sm);
	border: none;
	background: var(--edatos-color-white-100, #FFF);
	align-self: flex-start;
}

/* --- Módulos dentro del sidebar: sin estilo propio --- */
.module-resource ~ .secondary .module.module-narrow {
	background: transparent;
	border: none;
	margin: 0;
	width: 100%;
}

/* --- Cabeceras de sección (RECURSOS, COMPARTIR): sin borde inferior --- */
.module-resource ~ .secondary .module-heading {
	border-bottom: none;
	border-radius: var(--edatos-border-radius-xs);
}

/* --- Items de recurso (no activo) ---
   ">a" (hijo directo) en vez de "a": el <li> también contiene el dropdown
   wrench (.dropdown > .dropdown-menu > li > a.dropdown-item); con el
   combinador descendente estas reglas se colaban dentro del menú desplegable
   y le pisaban el estilo (ver bloque ".dropdown-menu" en ZONA de dropdowns). */
.module-resource ~ .secondary .module.module-narrow .nav-simple .nav-item > a {
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-regular);
	line-height: 14px;
	color: var(--edatos-color-secondary-100, #004678);
	background: var(--edatos-color-white-100, #FFF);
	border-top: none;
}

.module-resource ~ .secondary .module.module-narrow .nav-simple .nav-item:first-child > a {
	border-top: none;
}

.module-resource ~ .secondary .module.module-narrow .nav-simple .nav-item > a:hover {
	background: var(--edatos-color-primary-5, #E5ECF1);
}

/* Cada <li> es position:relative (ancla del wrench .dropdown), sin z-index
   propio; al desplegarse, el menú (position:absolute) sobresale hacia abajo
   sobre los <li> siguientes, que al ser posteriores en el DOM se pintan por
   encima y lo tapan. Elevamos solo el <li> que tiene el menú abierto. */
.module-resource ~ .secondary .module.module-narrow .nav-simple .nav-item:has(.dropdown-menu.show) {
	position: relative;
	z-index: 10;
}

/* --- Al hacer hover, ocultar la línea divisoria propia y la del item anterior
   (misma línea que separa ambos), igual que en el sidebar de filtros de
   búsqueda (ver ZONA 8b, .filters .nav-item:not(.active):hover) --- */
.module-resource ~ .secondary .module.module-narrow .nav-simple .nav-item:not(.active):hover {
	border-bottom-color: transparent;
}

.module-resource ~ .secondary .module.module-narrow .nav-simple .nav-item:has(+ .nav-item:hover) {
	border-bottom-color: transparent;
}

/* Item activo: ocultar su propia línea inferior y la del item anterior
   (misma línea que separa ambos), igual que en el sidebar de filtros
   de búsqueda (ver ZONA 8b) */
.module-resource ~ .secondary .module.module-narrow .nav-simple .nav-item.active {
	border-bottom-color: transparent;
}

.module-resource ~ .secondary .module.module-narrow .nav-simple .nav-item:has(+ .nav-item.active) {
	border-bottom-color: transparent;
}

/* --- Item de recurso activo: forma de flecha --- */
.module-resource ~ .secondary .module.module-narrow .nav-simple .nav-item.active a {
	background-color: var(--edatos-color-primary-50, #4D7EA0);
	color: var(--edatos-color-white-100, #FFF);
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 14px;
	border-bottom: none;
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
}

/* --- Botones acción recurso (wrench + dropdown): azul en lugar de rojo heredado --- */
.secondary .resources .btn.btn-default {
	color: var(--edatos-color-secondary-100, #004678);
	border-color: var(--edatos-color-secondary-100, #004678);
	background: var(--edatos-color-white-100, #FFF);
}

/* El wrapper ".dropdown" del botón es position:absolute (queda fuera del
   flex del <li>), por lo que sin esto se pega al borde superior del item en
   vez de quedar centrado con el texto del formato. */
.module-resource ~ .secondary .module.module-narrow .nav-simple .nav-item .dropdown.position-absolute {
	top: 50%;
	transform: translateY(-50%);
}

/* Menú del wrench: más ancho y más padding a la derecha que el genérico
   ".dropdown-menu" (ver arriba), para que quede con el mismo aire que
   "OPCIONES" en vez de quedar justo al ancho del texto más largo. Escopado a
   este dropdown para no afectar a "OPCIONES"/"Explorar", que ya se ven bien. */
.module-resource ~ .secondary .module.module-narrow .nav-simple .dropdown-menu {
	min-width: 185px;
	/* El genérico ".dropdown-menu" (ver arriba) aplana la esquina superior
	   DERECHA porque "OPCIONES"/"Explorar" despliegan "bottom-end" (alineados
	   a la derecha del botón, expandiendo hacia la izquierda). Este wrench
	   despliega "bottom-start" (Popper lo alinea a la IZQUIERDA del botón y
	   expande hacia la derecha, sin espacio a la izquierda en el sidebar
	   angosto), así que la esquina que debe quedar sin redondear es la
	   superior IZQUIERDA, donde conecta con el botón. */
	border-radius: 0 var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px);
	/* Bootstrap/Popper añaden un offset por defecto de 2px entre el toggle y
	   el menú, y fijan "margin: 0px" inline (Popper), que gana sobre reglas
	   externas sin !important; hace falta !important para cancelarlo. */
	margin-top: -2px !important;
}

.module-resource ~ .secondary .module.module-narrow .nav-simple .dropdown-menu li a {
	padding-right: 20px;
	margin: 8px;
}

/* Bootstrap fuerza width:100% en ".dropdown-item"; combinado con el margin de
   arriba, el resaltado de hover se desborda y se recorta por un lado en vez
   de quedar centrado con aire simétrico (mismo problema ya documentado para
   "Explorar" en #dataset-resources, ver ZONA 5). width:auto deja que el
   modelo de caja de bloque normal reste los márgenes por los dos lados. */
.module-resource ~ .secondary .module.module-narrow .nav-simple .dropdown-menu li a.dropdown-item {
	width: auto;
}

/* Bootstrap define ".btn-default:hover"/".btn-light:hover" con !important;
   hace falta otro !important (con más especificidad) para ganarle. */
.secondary .resources .btn.btn-default:hover {
	background: var(--edatos-color-secondary-100, #004678) !important;
	border-color: var(--edatos-color-secondary-100, #004678) !important;
	color: var(--edatos-color-white-100, #FFF) !important;
}

.secondary .resources .btn.btn-default:hover i {
	color: inherit;
}

/* Estado abierto (Bootstrap añade ".show" también al botón, no solo al menú):
   mismo patrón que el botón "Explorar" (.btn-primary.dropdown-toggle.show,
   ver ZONA 5) y que el "OPCIONES" del navbar (.btn-navbar). */
.secondary .resources .btn.btn-default.show {
	background: var(--edatos-color-secondary-100, #004678) !important;
	border-color: var(--edatos-color-secondary-100, #004678) !important;
	color: var(--edatos-color-white-100, #FFF) !important;
	border-radius: var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px) 0 0 !important;
	box-shadow: none !important;
}

.secondary .resources .btn.btn-default.show i {
	color: inherit;
}

/* --- Enlace social (COMPARTIR items) --- */
.module-resource ~ .secondary .module.social .nav-item a,
.module-resource ~ .secondary .module.social .nav a {
	color: var(--edatos-color-secondary-100, #004678);
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-regular);
	line-height: 14px;
}

/* --- Metadata table: etiqueta Campo --- */
.module-resource ~ .primary .additional-info th[scope="row"] {
	font-weight: var(--edatos-font-weight-semibold);
}

/* --- Show more / Show less --- */
.module-resource ~ .primary .toggle-show.toggle-show-more td {
	padding: 0;
}
.module-resource ~ .primary .toggle-show.toggle-show-more small {
	display: flex;
	width: 100%;
}
.module-resource ~ .primary a.show-more,
.module-resource ~ .primary a.show-less {
	flex: 1;
	height: 40px;
	padding: 5px 10px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: var(--edatos-border-radius-sm);
	background: var(--edatos-color-gray-5, #F2F2F2);
	color: var(--edatos-color-primary-100, #004678);
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 14px;
	text-align: center;
	text-decoration: none;
	border: none;
}
/* Respect CKAN's show/hide logic per table state */
.js .module-resource ~ .primary .table-toggle-more a.show-more,
.js .module-resource ~ .primary .table-toggle-less a.show-less {
	display: flex !important;
}
.js .module-resource ~ .primary .table-toggle-more a.show-less,
.js .module-resource ~ .primary .table-toggle-less a.show-more {
	display: none !important;
}

/* ============================================================
   9. FORMULARIOS — Inputs, Buttons, Select, Textarea
   ============================================================ */

/* ---- Botones base ---- */

.btn-check:focus + .btn-primary, .btn-primary:focus {
    color: #fff;
    background-color: var(--edatos-color-secondary-100);
    border-color: var(--edatos-color-secondary-100);
    box-shadow: none;
}

.btn-check:focus + .btn, .btn:focus {
    outline: 0;
    box-shadow: none;
}

.btn {
	border-radius: var(--edatos-border-radius-sm, 5px);
	transition: background-color var(--transition-base),
	            border-color var(--transition-base),
	            color var(--transition-base);
}

/* Botón primario */
.btn-primary {
	background-image: none;
	background-color: var(--edatos-color-white-100);
    border-color: var(--edatos-color-primary-100);
    color: var(--edatos-color-primary-100);
	text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    font-size: var(--edatos-font-size-sm);
    font-style: normal;
    font-weight: var(--edatos-font-weight-regular);
    line-height: 20px;
	text-transform: uppercase;
}

.btn-primary:hover {
	background-color: var(--edatos-color-secondary-100);
    border-color: var(--edatos-color-secondary-100);
	color: var(--edatos-color-white-100, #ffffff);
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
	color: var(--edatos-color-white-100, #ffffff);
	background-color: var(--edatos-color-secondary-100);
	border-color: var(--edatos-color-secondary-100);
}

.btn-primary.disabled,
.btn-primary[disabled] {
	color: var(--edatos-color-white-100, #ffffff);
	background-color: var(--edatos-color-secondary-100);
	opacity: 0.65;
}

.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary:hover {
	color: var(--edatos-color-white-100, #ffffff);
	background-color: var(--edatos-color-secondary-100);
	background-image: none;
	border-color: var(--edatos-color-secondary-100);
}

/* Botón secundario */
.btn-default {
	background-image: none;
	background-color: var(--edatos-color-white-100, #ffffff);
	border-color: var(--edatos-color-gray-20, #cccccc);
	color: var(--edatos-color-gray-80, #333333);
}

.btn-default:hover,
.btn-default:focus {
	background-color: var(--edatos-color-gray-5);
	border-color: var(--edatos-color-gray-40);
	color: var(--edatos-color-gray-80, #333333);
}

/* Botón de búsqueda (icono lupa en homepage) — alineado con statistical-operations-external */
.search-form .search-input .btn,
.search-form .search-giant .btn {
	background-color: var(--edatos-color-white-100);
	color: var(--edatos-color-secondary-100);
	border-radius: 0 var(--edatos-border-radius-sm, 5px) var(--edatos-border-radius-sm, 5px) 0;
	border: none;
}

.search-form {
    margin-bottom: var(--edatos-spacing-y-lg);
    padding-bottom: 25px;
    border-bottom: none;
}

.search-form .search-input .btn:hover,
.search-form .search-giant .btn:hover {
	background-color: var(--edatos-color-primary-5);
	color: var(--edatos-color-primary-100);
}

.search-form .search-input input {
    margin: 0;
    width: 100%;
    height: auto;
    background: var(--edatos-color-white-100);
}

.search-form .search-input.search-giant button i {
    font-size: 16px;
    width: 16px;
    height: 16px;
	color: var(--edatos-color-gray-60);
}
/* ---- Selector de orden (Relevancia) — hover ---- */
#field-order-by:hover {
	background-color: var(--edatos-color-secondary-100, #004678);
	color: var(--edatos-color-white-100, #FFF);
	border-color: var(--edatos-color-secondary-100, #004678);
	cursor: pointer;
}

/* ---- Inputs y formularios ---- */

.form-control,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="url"],
select,
textarea {
	border: var(--edatos-border-width-xs, 1px) solid var(--edatos-color-gray-20, #cccccc);
	border-radius: var(--edatos-border-radius-sm, 5px);
	color: var(--edatos-color-gray-80, #333333);
	background-color: var(--edatos-color-white-100, #ffffff);
	transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-control:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
	border-color: var(--edatos-color-accent-100, #009BD7);
	outline: none;
	box-shadow: 0 0 0 2px rgba(0, 155, 215, 0.2);
}

/* Buscador grande (homepage) */
.homepage .search-input.search-giant {
	max-width: 770px;
	width: 100%;
	margin: 0 auto;
	height: 50px;
	border-radius: var(--edatos-border-radius-sm);
	overflow: hidden;
	display: flex;
	align-items: center;
	background: var(--edatos-color-white-100);
	border: none;
	box-shadow: none;
	outline: none;
}

.homepage .search-giant .form-control {
	height: 50px;
	font-size: var(--edatos-font-size-md);
	font-weight: var(--edatos-font-weight-light);
	padding: 7px 0 7px 16px;
	border-radius: 5px 0 0 5px;
	border: none;
	background: transparent;
	flex: 1;
	box-shadow: none;
}

.homepage .search-giant .form-control::placeholder {
	font-weight: var(--edatos-font-weight-light);
}

.homepage .search-giant .form-control:focus {
	border: none;
	box-shadow: none;
	outline: none;
}

/* Inputs específicos de formularios scheming */
div.input-prepend input:nth-child(4) {
	width: 100%;
}

div.input-prepend input:nth-child(2) {
	width: 60%;
}

.js .image-upload #field-image-upload {
	position: inherit;
	opacity: 1;
}


/* ============================================================
   10. TABS — Conjuntos de datos / Acerca de (Figma Listado_conjunto_datos)
   ============================================================ */

/* Contenedor de tabs */
body .nav-tabs {
	background-color: var(--edatos-color-primary-5, #E5ECF1);
	border-radius: var(--edatos-border-radius-xs);
	border-bottom: none;
	padding-left: 20px;
	height: 45px;
	display: flex;
	align-items: flex-end;
	width: 100%;
}

body .nav-tabs > li {
	height: 38px;
}

/* Tab inactivo */
body .nav-tabs > li > a {
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-light);
	font-style: normal;
	line-height: 20px;
	color: var(--edatos-color-secondary-100);
	background-color: transparent;
	border-radius: 5px 5px 0 0;
	border: none;
	padding: 9px 20px;
	margin: 0;
}

body .nav-tabs > li > a:hover,
body .nav-tabs > li > a:focus {
	background-color: var(--edatos-color-primary-10, #CCDAE4);
	border: none;
	border-radius: 5px 5px 0 0;
}

/* Tab activo */
body .nav-tabs > li.active > a,
body .nav-tabs > li.active > a:hover,
body .nav-tabs > li.active > a:focus,
body .nav-tabs .nav-link.active,
body .nav-tabs .nav-link.active:hover,
body .nav-tabs .nav-link.active:focus {
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-semibold);
	font-style: normal;
	line-height: normal;
	color: var(--edatos-color-secondary-100, #004678);
	text-align: center;
	font-feature-settings: 'liga' off, 'clig' off;
	background-color: var(--edatos-color-white-100);
	border-radius: 5px 5px 0 0;
	border: none;
	padding: 9px 20px;
}

/* ============================================================
   11. COMPONENTES GLOBALES — Badges, Tags, Alerts, Modals
   ============================================================ */

.badge {
	color: var(--edatos-color-secondary-100);
    border-radius: var(--edatos-border-radius-sm);
    background: var(--edatos-color-gray-5, #F2F2F2);
}

a.tag:hover {
	color: var(--edatos-color-white-100, #ffffff);
	background-color: var(--edatos-color-secondary-100);
	border: 0;
	-webkit-box-shadow: inset 0 1px 0 var(--edatos-color-light-blue-100);
	-moz-box-shadow: inset 0 1px 0 var(--edatos-color-light-blue-100);
	box-shadow: inset 0 1px 0 var(--edatos-color-light-blue-100);
}

.modal.fade.in {
	margin-top: 0;
	top: 0;
}

i.fa.fa-search {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--edatos-color-gray-60);
}

/* ============================================================
   12. FOOTER
   ============================================================ */

.site-footer {
	background-color: var(--color-gray-dark);
	background-image: none;
}

.site-footer,
.site-footer label,
.site-footer small,
.site-footer a {
	color: var(--edatos-color-white-100, #ffffff);
}

.footer-title {
	text-transform: uppercase;
	font-weight: var(--edatos-font-weight-bold, 700);
	font-size: 1.1em;
}



/* ============================================================
   13. SHOWCASE — Listado de colecciones (/es/showcase)
   ============================================================ */

/* Grid responsive con CSS grid (sin afectar otras páginas) */
ul.showcase-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	column-gap: 20px;
	row-gap: 30px;
	list-style: none;
	padding: 12px 0;
	height: auto !important /*se setea por medio de js position: relative;height: auto;*/;
	/* ".control-order-by" (core CKAN) es "float:right" dentro de ".search-form"
	   y no se limpia: al ser este grid un contenedor "display:grid" (nuevo BFC),
	   evita solapar ese float encogiéndose ("shrink-to-fit") en vez de ocupar
	   el ancho completo de ".module-content". "clear:both" retira el float de
	   su rango vertical para que el grid pueda estirarse a todo el ancho. */
	clear: both;
}

/* Tarjeta colección */
li.showcase-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	width: auto;
	float: none;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 0;
	background-color: transparent;
	height: auto !important; /* Masonry inyecta height inline; CSS Grid controla la altura */
	position: static !important; /*se queda porque Masonry reposiciona cada tarjeta para el layout en cuadrícula*/
}

/* Enlace que envuelve imagen + cuerpo */
.showcase-card-link {
	display: flex;
	flex-direction: column;
	flex: 1;
	text-decoration: none;
	color: inherit;
}

.showcase-card-link:hover {
	text-decoration: none;
}

/* Imagen: 160px, cover, radio superior */
.showcase-card-image {
	height: 160px;
	flex-shrink: 0;
	align-self: stretch;
	border-radius: var(--edatos-border-radius-xs);
	background-color: var(--edatos-color-primary-10, #ccdae4);
	background-size: cover;
	background-position: 50% center;
	background-repeat: no-repeat;
}


/* Cuerpo de la tarjeta */
.showcase-card-body {
	display: flex;
	flex-direction: column;
	padding: var(--edatos-spacing-y-l) 0px;
	gap: 10px;
	flex: 1;
	width: 154.953px;
}

/* Contador de conjuntos de datos — encima del título, uppercase */
.showcase-card-count {
	display: inline-block;
	align-self: flex-start;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	background-color: var(--edatos-color-primary-10);
	padding: 2px 6px;
	color: var(--edatos-color-gray-80, #333);
	font-size: var(--edatos-font-size-xs);
	font-style: normal;
	font-weight: var(--edatos-font-weight-regular);
	line-height: normal;
	text-transform: uppercase;
	width: 154.953px;
}

/* Título de la colección */
.showcase-card-title {
	align-self: stretch;
	color: var(--edatos-color-primary-100, #004678);
	font-size: var(--edatos-font-size-lg);
	font-style: normal;
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 20px;
	text-align: left;
	margin: 0;
}

.showcase-card-link:hover .showcase-card-title {
	text-decoration: underline;
}

/* Descripción */
.showcase-card-notes {
	flex: 1;
	color: var(--edatos-color-black-100, #000);
	font-size: var(--edatos-font-size-md);
	font-style: normal;
	font-weight: var(--edatos-font-weight-light);
	line-height: 23px;
	text-align: left;
}

.showcase-card-notes p {
	margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 992px) {
	ul.showcase-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 576px) {
	ul.showcase-grid {
		grid-template-columns: 1fr;
	}
}

/* ---- SHOWCASE DETAIL — Sidebar panel (título, compartir, licencia) ---- */

/* Fix: evitar que la regla .secondary .module.context-info aplique fondo azul al título */
.showcase-detail-sidebar .module.context-info {
	width: auto;
	background: transparent;
	padding: 0;
	border-radius: 0;
}

.showcase-detail-sidebar {
	display: flex;
	width: 289px;
	flex-direction: column;
	align-items: center;
	flex-shrink: 0;
	border-radius: var(--edatos-border-radius-sm);
	border: 0.5px solid var(--edatos-color-secondary-100, #004678);
	background: var(--edatos-color-white-100, #FFF);
	box-sizing: border-box;
}

.showcase-detail-title {
	width: 267px;
	color: var(--edatos-color-secondary-100, #004678);
	font-size: var(--edatos-font-size-md);
	font-style: normal;
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 26px;
}

/* Módulos dentro del sidebar: sin fondo/borde propios, ocupan todo el ancho */
.showcase-detail-sidebar .module.module-narrow {
	background: transparent;
	border: none;
	margin: 0;
	padding: 0;
	width: 100%;
	align-self: stretch;
}

/* Nav list inside social */
.showcase-detail-sidebar .social .nav-simple {
	padding: 0;
	margin: 0;
	width: 100%;
}

/* Etiqueta RRSS: cada enlace de compartir */
.showcase-detail-sidebar .social .nav-item a {
	display: flex;
	width: 100%;
	height: 35px;
	padding: 5px 10px 5px 20px;
	align-items: center;
	gap: 10px;
	border-top: none;
	border-bottom: 0.5px solid var(--edatos-color-primary-5, #E5ECF1);
	background: var(--edatos-color-white-100, #FFF);
	color: var(--edatos-color-secondary-100, #004678);
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-regular);
	line-height: 14px;
	box-sizing: border-box;
}

.showcase-detail-sidebar .social .nav-item a:hover {
	background-color: var(--edatos-color-primary-5)
	text-decoration: none;
}

.showcase-detail-sidebar .social .nav-item {
	border-bottom: none;
}

/* Heading del módulo info (¿Qué son las categorías?) — 16px, sin uppercase */
.showcase-detail-sidebar .module.module-narrow.module-shallow .module-heading {
    font-size: var(--edatos-font-size-md);
    text-transform: uppercase;
}

/* La caja "module-shallow" de arriba también envuelve a Licencia, y le
   contagia su font-size de 16px. Eso desalinea su cabecera respecto a la de
   Compartir (14px, base ".module-heading"), pese a que ambas deben verse
   igual. Se reescribe el selector con ".license" para ganar especificidad
   (misma cantidad de clases que la regla de arriba + una) y devolverle el
   tamaño base. */
.showcase-detail-sidebar .module.module-narrow.module-shallow.license .module-heading {
    font-size: var(--edatos-font-size-sm);
}

.module:first-child .module-heading {
    border-radius: var(--edatos-border-radius-sm, 5px);
    border-top-width: 0;
}

.module-content > a {
    padding: 10px;
}

/* El enlace de licencia cuelga directamente de <p class="module-content">
   (único caso en el proyecto que hace esto), así que hereda el padding:10px
   de la regla genérica de arriba. Eso añadía 10px extra solo a este enlace,
   desalineando su texto respecto al resto de bloques del sidebar (Compartir),
   que no llevan ese padding adicional. */
.license .module-content > a,
.license .module-content > span {
    padding: 0;
}

/* El padding-top compartido (5px, en la regla de abajo) se queda corto
   frente al hueco visual que tiene "Compartir" bajo su cabecera (ahí el
   propio enlace centra su contenido en una fila de 35px vía
   align-items:center). En vez de replicar ese mecanismo (afectaría también
   a la otra caja module-shallow que reusa la regla de abajo, la ayuda de
   "¿Qué son las categorías?"), se sube el padding-top solo para licencia con
   un valor fijo. Se repite ".license" dentro de la cadena de clases (en vez
   de dejarlo como selector descendiente suelto) porque la regla de abajo
   (".showcase-detail-sidebar .module.module-narrow.module-shallow
   .module-content") tiene más clases y su "padding" shorthand pisaba este
   padding-top aunque se declarara después en el archivo.

   El line-height:14px de esa misma regla (line-height == font-size) deja las
   dos líneas del texto de licencia pegadas entre sí; el enlace (sin p
   anidado, ver comentario de arriba sobre ".module-content > a") lo hereda
   directamente de aquí. Se sube a la proporción estándar del proyecto para
   párrafos (--edatos-line-height-md, usada p.ej. en .ckanext-showcase-notes)
   en vez de un valor fijo, para que crezca junto al font-size. */
.showcase-detail-sidebar .module.module-narrow.module-shallow.license .module-content {
    padding-top: var(--edatos-spacing-y-sm, 8px);
    line-height: var(--edatos-line-height-md, 1.5);
}

/* Aviso legal: contenido de la sección licencia */
.showcase-detail-sidebar .module.module-narrow.module-shallow .module-content {
	display: flex;
	min-height: 35px;
	width: 100%;
	padding: 5px 10px 5px 20px;
	align-items: flex-start;
	gap: 10px;
	flex: none;
	align-self: unset;
	border-bottom: 0.5px solid var(--edatos-color-primary-5, #E5ECF1);
	background: var(--edatos-color-white-100, #FFF);
	color: var(--edatos-color-secondary-100, #004678);
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-regular);
	line-height: 14px;
	box-sizing: border-box;
}

.showcase-detail-sidebar .module.module-narrow.module-shallow .module-content p {
	margin: 0;
	font-size: var(--edatos-font-size-md);
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 26px;
	color: var(--edatos-color-gray-80);
}

.showcase-detail-sidebar .license .module-content p a,
.showcase-detail-sidebar .license .module-content p span {
	color: var(--edatos-color-secondary-100, #004678);
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-regular);
	line-height: 14px;
	text-decoration: none;
}

.showcase-detail-sidebar .license .module-content p a:hover {
	text-decoration: underline;
}

/* ---- DATASET DETAIL — Sidebar: título del dataset dentro del wrapper ---- */

.showcase-detail-sidebar #package-info {
	width: auto;
	align-self: stretch;
}

.showcase-detail-sidebar #package-info .module-content {
	width: 267px;
	padding: 0;
	font-size: var(--edatos-font-size-md);
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 26px;
	color: var(--edatos-color-secondary-100, #004678);
}

.showcase-detail-sidebar #package-info .heading {
	width: 267px;
	color: var(--edatos-color-secondary-100, #004678);
	font-size: var(--edatos-font-size-md);
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 26px;
}

.showcase-detail-sidebar #package-info .heading a {
	color: var(--edatos-color-secondary-100, #004678);
	font-size: var(--edatos-font-size-md);
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 26px;
	text-decoration: none;
}

.showcase-detail-sidebar #package-info .heading a:hover {
	text-decoration: underline;
}

/* ---- DATASET DETAIL — Descripción: links subrayados ---- */

.notes a {
	text-decoration: underline;
}

/* ---- DATASET DETAIL — Recursos relacionados (showcases vinculados) ---- */

.recursos-relacionados-section {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	align-self: stretch;
	margin-top: 20px;
}

.recursos-relacionados-heading {
	display: flex;
	width: 100%;
	padding: 5px 10px;
	justify-content: center;
	align-items: center;
	gap: 10px;
	border-radius: var(--edatos-border-radius-sm);
	background: var(--edatos-color-secondary-100, #004678);
	color: var(--edatos-color-white-100, #FFF);
	font-size: var(--edatos-font-size-lg);
	font-style: normal;
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 26px;
	margin: 0;
	box-sizing: border-box;
}

/* ---- SHOWCASE DETAIL — Sidebar: imagen + contador ---- */

.showcase-sidebar-image-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	align-self: stretch;
}

.showcase-sidebar-image {
	height: 160px;
	width: 100%;
	object-fit: cover;
	border-radius: var(--edatos-border-radius-xs);
	align-self: stretch;
	display: block;
}

.showcase-sidebar-count-block {
	display: flex;
	height: 60px;
	padding: 0 10px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	align-self: stretch;
	border-radius: var(--edatos-border-radius-xs);
}

.showcase-sidebar-count-label {
	color: var(--edatos-color-gray-80, #333);
	font-size: var(--edatos-font-size-xs);
	font-style: normal;
	font-weight: var(--edatos-font-weight-regular);
	line-height: 16px;
}

.showcase-sidebar-count-number {
	color: var(--edatos-color-gray-80, #333);
	text-align: center;
	font-size: 28px;
	font-style: normal;
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 120%;
	text-transform: uppercase;
}

/* ---- SHOWCASE DETAIL — Ocultar iconos en links RRSS ---- */

.showcase-detail-sidebar .social .nav-item a i {
	display: none !important;
}

/* ---- SHOWCASE DETAIL — Título principal (bloque conjuntos) ---- */

.primary .ckanext-showcase-notes ~ h1,
.primary h1 {
	color: var(--edatos-color-black-100);
	text-align: left;
	font-size: var(--edatos-font-size-lg);
	font-style: normal;
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 120%;
}

/* ---- SHOWCASE DETAIL — Descripción ---- */

.ckanext-showcase-notes {
	color: var(--edatos-color-black-100);
	font-size: var(--edatos-font-size-md);
	font-style: normal;
	font-weight: var(--edatos-font-weight-regular);
	line-height: var(--edatos-line-height-md);
}

/* ---- SHOWCASE DETAIL — Bloque etiquetas ---- */

.showcase-tags-section {
	margin-bottom: 20px;
}

.showcase-tags-section .tags {
	display: flex;
	padding: 10px;
	align-items: center;
	gap: 10px;
	align-self: stretch;
	border-radius: var(--edatos-border-radius-sm);
	background: var(--edatos-color-primary-5, #E5ECF1);
}

.showcase-tags-section .tags ul.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	margin: 0;
	list-style: none;
	background: transparent;
	border: none;
	box-shadow: none;
}

.showcase-tags-section .tags ul.tag-list li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.showcase-tags-section .tags a.tag {
	height: 29px;
	display: inline-flex;
	padding: 10px;
	align-items: center;
	gap: 5px;
	border-radius: 30px;
	border: 1px solid var(--edatos-color-primary-50, #4D7EA0);
	background: var(--edatos-color-white-100, #FFF);
	color: var(--edatos-color-primary-50, #4D7EA0);
	font-size: var(--edatos-font-size-xs);
	font-style: normal;
	font-weight: var(--edatos-font-weight-semibold);
	line-height: 24px;
	text-decoration: none;
}

.showcase-tags-section .tags a.tag:hover {
	background: var(--edatos-color-primary-5, #E5ECF1);
	text-decoration: none;
}

/* ---- SHOWCASE DETAIL — Encabezado sección recursos (override CKAN) ---- */

.primary:has(.showcase-tags-section) .module-heading {
	font-size: var(--edatos-font-size-lg);
	font-weight: var(--edatos-font-weight-semibold);
	text-transform: none;
	border-radius: var(--edatos-border-radius-sm);
	padding: 5px 10px;
	line-height: 26px;
}

/* ---- SHOWCASE DETAIL — Listado de recursos vinculados ---- */

.recursos-list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
	padding: 0;
	margin: 0;
	width: 100%;
}

.nav-simple .recursos-item {
	display: flex;
	width: 100%;
	min-height: 36px;
	padding: 5px 20px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	box-sizing: border-box;
}

.nav-simple > li.recursos-item:last-of-type {
	border-bottom: none;
}

li.nav-item.recursos-item {
    border: none;
}

/* Anular margin negativo de CKAN en el anchor y el border que tendría el anchor */
.module.module-narrow .nav-simple .nav-item.recursos-item a {
	margin: 0;
	border-bottom: none;
}

.recursos-item a {
	color: var(--edatos-color-secondary-100, #004678);
	font-size: var(--edatos-font-size-md);
	font-style: normal;
	font-weight: var(--edatos-font-weight-light);
	line-height: 26px;
	text-decoration: none;
}

.recursos-item a:hover {
	text-decoration: underline;
}

.recursos-list .recursos-item:nth-child(even) {
	border-radius: var(--edatos-border-radius-xs);
}

/* CKAN core deja este pseudo-elemento como caja invisible (position: absolute,
   width: 25%, z-index: 1) aunque le quitemos el borde. Al ocupar el 25%
   izquierdo de ".row.wrapper" con z-index por encima del contenido estático
   del sidebar, intercepta hover/click de los enlaces de la barra de filtros
   (p.ej. RECURSOS/COMPARTIR en la vista de recurso). Se oculta del todo,
   igual que ya hace CKAN core con ".wrapper.no-nav::before". */
@media (min-width: 768px) {
    .wrapper:before {
        display: none;
	}
}

.filters {
    width: 100%;
}

.filters > div {
    border: 0.5px solid var(--edatos-color-secondary-100, #004678);
    border-radius: var(--edatos-border-radius-sm);
    padding: 10px;
    background: var(--edatos-color-white-100, #FFF);
}

.filters .module.module-narrow {
    margin-bottom: 0;
}

/* Showcase ya tiene su propio borde en .showcase-detail-sidebar */
.showcase-detail-sidebar .filters > div {
    border: none;
    border-radius: 0;
    padding: 0;
    background: transparent;
}

/* ============================================================
   14. USER PROFILE SIDEBAR — Figma: 2.1 Usuario metamac
   ============================================================ */

#user-info {
	border: 0.5px solid var(--edatos-color-dark-blue-25);
	border-radius: var(--edatos-border-radius-sm);
	overflow: hidden;
	background: var(--edatos-color-white-100, #ffffff);
	padding: 10px;
}

#user-info .module-content {
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* Card azul superior: icono + nombre + divisor + bio */
.user-profile-card {
	background-color: var(--edatos-color-secondary-100);
	border-radius: var(--ckan-border-radius-card);
	padding: 30px 14px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13px;
	width: 100%;
	box-sizing: border-box;
}

.user-profile-fa-icon {
	font-size: 100px;
	color: var(--edatos-color-white-100, #ffffff);
	line-height: 1;
	display: block;
}

.user-profile-card .heading {
	font-size: var(--ckan-font-size-heading);
	font-weight: var(--edatos-font-weight-semibold);
	color: var(--edatos-color-white-100, #ffffff);
	margin: 0;
	line-height: 1.1;
	text-align: center;
	width: 100%;
}

.user-profile-divider {
	border: none;
	border-top: 1px solid var(--ckan-divider-on-dark);
	width: 100%;
	margin: 0;
}

.user-profile-bio {
	font-size: var(--edatos-font-size-xs);
	color: var(--edatos-color-white-100, #ffffff);
	font-weight: var(--edatos-font-weight-regular);
	line-height: 16px;
	text-align: center;
	padding: 0 10px;
}

.user-profile-bio p {
	margin: 0;
	color: var(--edatos-color-white-100, #ffffff);
}

/* Bloque de estadísticas: header + lista de items con badge */
.user-stats-section {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.user-stats-header {
	background-color: var(--edatos-color-secondary-100);
	border-radius: var(--edatos-border-radius-xs);
	height: 35px;
	display: flex;
	align-items: center;
	padding: 5px 10px;
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-bold);
	color: var(--edatos-color-white-100, #ffffff);
	white-space: nowrap;
}

.user-stats-list {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.user-stats-item {
	background: var(--edatos-color-white-100, #ffffff);
	border-bottom: 0.5px solid var(--edatos-color-primary-5, #e5ecf1);
	display: flex;
	align-items: center;
	gap: 10px;
	height: 35px;
	padding: 5px 10px 5px 20px;
	box-sizing: border-box;
}

.user-stats-label {
	flex: 1;
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-regular);
	color: var(--edatos-color-secondary-100);
	line-height: 14px;
	white-space: nowrap;
}

.user-stats-badge {
	background-color: var(--edatos-color-gray-20);
	border-radius: var(--edatos-border-radius-sm);
	padding: 5px;
	font-size: var(--edatos-font-size-xs);
	font-weight: var(--edatos-font-weight-semibold);
	color: var(--edatos-color-secondary-100);
	line-height: 14px;
	min-width: 20px;
	text-align: center;
}

/* Secciones de info: header azul + valor con borde */
.user-info-sections {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.user-info-group {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.user-info-header {
	background-color: var(--edatos-color-secondary-100);
	border-radius: var(--edatos-border-radius-xs);
	height: 35px;
	display: flex;
	align-items: center;
	padding: 5px 10px;
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-bold);
	color: var(--edatos-color-white-100, #ffffff);
}

.user-info-value {
	background: var(--edatos-color-white-100, #ffffff);
	border-bottom: 0.5px solid var(--edatos-color-primary-5, #e5ecf1);
	height: 35px;
	display: flex;
	align-items: center;
	padding: 5px 10px 5px 20px;
	font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-regular);
	color: var(--edatos-color-secondary-100);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box;
}

/* ============================================================
   15. MODAL INCRUSTAR VISTA DE RECURSO
   ============================================================ */

.resource-view-embed .modal-header {
	background-color: var(--color-gray-dark);
	padding: 10px 10px 10px 15px;
	border-radius: 5px 5px 0 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.resource-view-embed .modal-header .modal-title {
	color: var(--edatos-color-white-100, #ffffff);
	font-size: var(--edatos-font-size-md);
	font-weight: var(--edatos-font-weight-semibold);
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 5px;
}

.resource-view-embed .modal-header .btn-close {
	filter: invert(1) grayscale(100%) brightness(200%);
	opacity: 1;
}

.resource-view-embed .modal-body .form-control {
	background: rgba(238, 238, 238, 0.3);
	border: 1px solid var(--edatos-color-gray-20);
	border-radius: var(--edatos-border-radius-sm);
	height: 35px;
	font-size: var(--edatos-font-size-sm);
	color: var(--edatos-color-gray-80, #333333);
}

.resource-view-embed .modal-body textarea.form-control {
	height: 100px;
}

body .nav-link,
body .page-header .nav-tabs li a {
    color: var(--edatos-color-secondary-100, #004678);
	height: 38px;
}

.page-header .nav-tabs li.active a,
.page-header .nav-tabs a:hover {
    border: none;
    background-color: var(--edatos-color-primary-10);
    border-bottom-color: transparent;
}

.page-header .nav-tabs li.active a {
    background-color: var(--edatos-color-white-100);
}

/* ============================================================
   16. DATASET EDIT — Panel lateral y tabs (Figma node 11515:6405)
   ============================================================ */

/* Panel lateral: borde y radio como en Figma (.Filtros) */
.dataset-edit-secondary {
    border: 0.5px solid var(--edatos-color-secondary-100, #004678);
    border-radius: var(--edatos-border-radius-sm);
    padding: 10px;
    background: var(--edatos-color-white-100, #FFF);
    box-sizing: border-box;
}

/* Quitar bordes propios de módulos dentro del panel */
.dataset-edit-secondary .module.module-narrow {
    border: none;
    margin-bottom: 0;
}

/* Quitar borde de cualquier .module anidado (evita doble rectángulo) */
.dataset-edit-secondary .module {
    border: none;
    box-shadow: none;
}

/* Anular el borde del aside.secondary en edición — .dataset-edit-secondary ya lo gestiona */
.secondary:has(.dataset-edit-secondary) {
    border: none;
    background: transparent;
    padding: 0;
}

/* Eliminar fondo oscuro del bloque context-info en vista de edición */
.dataset-edit-secondary .module.context-info {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

/* Ocultar iconos en las pestañas de edición (Figma no los muestra) */
.module-content.page-header .nav-tabs li a i.fa {
    display: none;
}

/* ============================================================
   17. GROUP / DATASET / ORGANIZATION FORMS
   Figma ref: 11816:6262 (Crear Grupo)
   ============================================================ */

/* 1. Labels — 18px SemiBold, sin ":" final (Bootstrap añade ":" vía ::after) */
.form-group .form-label,
.form-group label.control-label {
    font-size: var(--edatos-font-size-lg);
    font-weight: var(--edatos-font-weight-semibold);
    color: var(--edatos-color-gray-80);
    line-height: 26px;
}

.form-group .form-label::after,
.form-group label.control-label::after {
    content: '' !important;
}

/* 2. Asterisco campo requerido */
.control-required {
    color: var(--edatos-color-danger-100);
}

/* 3. Inputs y textareas — borde 0.5px secondary, radius 5px */
.form-group input[type="text"],
.form-group input[type="url"],
.form-group .form-control,
.controls input[type="text"],
.controls input[type="url"],
.controls .form-control {
    border: 0.5px solid var(--edatos-color-secondary-100, #004678);
    border-radius: var(--edatos-border-radius-sm);
}

/* 4. Focus — borde primary/50, sin box-shadow */
.form-group input[type="text"]:focus,
.form-group input[type="url"]:focus,
.form-group .form-control:focus,
.controls input[type="text"]:focus,
.controls input[type="url"]:focus,
.controls .form-control:focus {
    border-color: var(--edatos-color-primary-50, #4d7ea0);
    box-shadow: none;
    outline: none;
}

/* 5. Botón Edit slug ? azul outline (EDITAR) */
.slug-preview .btn.btn-default.btn-xs {
    background: transparent;
    background-image: none;
    border: 1px solid var(--edatos-color-primary-100, #004678);
    color: var(--edatos-color-primary-100, #004678);
    border-radius: var(--edatos-border-radius-sm);
    font-size: var(--edatos-font-size-sm);
    font-weight: var(--edatos-font-weight-regular);
    text-transform: uppercase;
    padding: 5px 10px;
    box-shadow: none;
    text-shadow: none;
}

.slug-preview .btn.btn-default.btn-xs:hover {
    background: var(--edatos-color-primary-100, #004678);
    color: var(--edatos-color-white-100);
}

/* 6. Icono info-circle en bloques de ayuda del formulario */
.info-block i.fa-info-circle {
    color: var(--edatos-color-primary-100, #004678);
}

/* 7. Textarea con barra Markdown inferior */
.controls.editor textarea.form-control {
    border-radius: 5px 5px 0 0;
    border-bottom: none;
}

.editor-info-block {
    display: block;
    background: var(--edatos-color-gray-5);
    border: 0.5px solid var(--edatos-color-secondary-100, #004678);
    border-top: none;
    border-radius: 0 0 5px 5px;
    padding: 3px 10px;
    font-size: var(--edatos-font-size-xs);
    font-weight: var(--edatos-font-weight-semibold);
    color: var(--edatos-color-gray-80);
}

.editor-info-block a {
    color: var(--edatos-color-primary-100, #004678);
}

/* 8. Sidebar helper (group create/edit) — wrapper con borde secondary */
.showcase-detail-sidebar {
    border: 0.5px solid var(--edatos-color-secondary-100, #004678);
    border-radius: var(--edatos-border-radius-sm);
    background: var(--edatos-color-white-100);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.showcase-detail-sidebar .module.module-narrow {
    border: none;
    margin-bottom: 0;
}

.showcase-detail-sidebar .module-heading {
    border-radius: var(--edatos-border-radius-xs);
}

/* ============================================================
   18. RESOURCE EDIT — Botones y barra de sub-tabs
   Figma node 11813:5303
   ============================================================ */

/* Patrón compartido: botones outline primario — Resource Edit */
header.module-content.page-header .content_action .btn,
aside.secondary .module.resources .nav-simple .btn,
aside.secondary .module-content > a.btn.btn-sm,
.btn-remove-url {
    background: var(--edatos-color-white-100);
    background-image: none;
    border: 1px solid var(--edatos-color-primary-100);
    color: var(--edatos-color-primary-100);
    border-radius: var(--edatos-border-radius-sm, 5px);
    box-shadow: none;
    text-shadow: none;
    font-size: var(--edatos-font-size-sm);
	font-weight: var(--edatos-font-weight-regular);
}

/* Selectores con a.btn para mayor especificidad sobre CSS externos */
header.module-content.page-header .content_action a.btn:hover,
header.module-content.page-header .content_action .btn:hover,
aside.secondary .module.resources .nav-simple .btn:hover,
aside.secondary .module-content > a.btn.btn-sm:hover,
.btn-remove-url:hover {
    background: var(--edatos-color-secondary-100);
    background-color: var(--edatos-color-secondary-100) !important;
    color: var(--edatos-color-white-100);
    border: 1px solid var(--edatos-color-secondary-100);
}

header.module-content.page-header .content_action .btn i,
aside.secondary .module.resources .nav-simple .btn i,
aside.secondary .module-content > a.btn.btn-sm i {
    color: inherit;
}

header.module-content.page-header .content_action .btn i {
    font-family: "Font Awesome 6 Pro";
    font-weight: var(--edatos-font-weight-light);
}

/* Botón "Administrar" — propiedades específicas */
header.module-content.page-header .content_action .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    padding: 5px 10px;
    white-space: nowrap;
}

/* Botón "Añadir nuevo recurso" — propiedades específicas */
aside.secondary .module-content > a.btn.btn-sm {
    white-space: nowrap;
    font-style: normal;
    font-weight: var(--edatos-font-weight-regular);
    line-height: 20px;
    text-transform: uppercase;
    padding: 5px 10px;
}

/* Botón "Quitar" (URL clear) — propiedades específicas */
.btn-remove-url {
    padding: 5px 10px;
}

.edatos-alert {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--edatos-spacing-y-l) var(--edatos-spacing-x-m);
	color: var(--edatos-color-black-100);
	background-color: var(--edatos-color-danger-25);
	border-radius: var(--border-radius-sm);
	font-weight: var(--edatos-font-weight-regular);
	border: none; /* opcional para eliminar borde Bootstrap */
}

.alert.alert-danger.edatos-alert {
	background-color: var(--edatos-color-danger-25);
	color: var(--edatos-color-black-100) !important;
	border: none;
}

.edatos-alert .btn-close {
	margin-left: auto;
}

.alert-danger {
    color: var(--edatos-color-black-100) !important;
    background-color: var(--edatos-color-danger-25);
    border-color: #f2c5c4;
}

.alert.alert-dismissible.fade.show.alert-danger {
    display: flex;
    padding: var(--edatos-spacing-y-l) var(--edatos-spacing-x-m);
    color: var(--edatos-color-black-100);
    background-color: var(--edatos-color-danger-25);
    border-radius: var(--border-radius-sm);
    font-weight: var(--edatos-font-weight-regular);
}

.login-error-logout-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: inherit;
    font-size: var(--edatos-font-size-md);
    line-height: var(--edatos-line-height-xs);
}


.box, .wrapper {
    box-shadow: none;
}


/* ================================================================
   19. PAGINACIÓN - Adaptación al diseño EDATOS
   Scope exclusivo: .pagination-wrapper
   Compatible: Bootstrap 5 · Chrome · Firefox · Edge · Safari
   ================================================================ */

/* ------------------------------------------------------------------
   1. CONTENEDOR EXTERNO
   ------------------------------------------------------------------ */
.pagination-wrapper {
    padding-top: var(--edatos-spacing-y-lg);
    font-size: var(--edatos-font-size-sm);
    font-weight: var(--edatos-font-weight-light);
}

/* ------------------------------------------------------------------
   2. LISTA — reset Bootstrap y centrado
   ------------------------------------------------------------------ */
.pagination-wrapper .pagination,
.pagination-wrapper ul.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    border-radius: 0;
}

/* ------------------------------------------------------------------
   3. ITEMS — reset Bootstrap
   ------------------------------------------------------------------ */
.pagination-wrapper .pagination > .page-item,
.pagination-wrapper .pagination > li {
    margin: 0;
}

/* ------------------------------------------------------------------
   4. ENLACE BASE — todos los botones
   ------------------------------------------------------------------ */
.pagination-wrapper .pagination .page-item .page-link,
.pagination-wrapper .pagination li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: var(--edatos-spacing-y-xs, 5px) var(--edatos-spacing-x-sm, 10px);
    margin: 0 var(--edatos-spacing-x-xs, 3px);
    font-size: var(--edatos-font-size-sm);
    font-weight: var(--edatos-font-weight-light);
    line-height: 1;
    text-decoration: none;
    color: var(--edatos-color-gray-40);
    background-color: transparent;
    border: 1px solid var(--edatos-color-gray-40);
    border-radius: var(--edatos-border-radius-sm, 4px);
    cursor: pointer;
    box-shadow: none;
    transition: all 0.2s ease;
}

/* ------------------------------------------------------------------
   5. HOVER — solo botones no activos y no deshabilitados
   ------------------------------------------------------------------ */
.pagination-wrapper .pagination .page-item:not(.active):not(.disabled) .page-link:hover,
.pagination-wrapper .pagination li:not(.active):not(.disabled) a:hover {
    background-color: var(--edatos-color-primary-5);
    border-color: var(--edatos-color-primary-100);
    color: var(--edatos-color-primary-100);
}

/* ------------------------------------------------------------------
   6. PÁGINA ACTIVA
   ------------------------------------------------------------------ */
.pagination-wrapper .pagination .page-item.active .page-link,
.pagination-wrapper .pagination li.active a {
    color: var(--edatos-color-primary-100);
    font-weight: var(--edatos-font-weight-semibold);
    background-color: transparent;
    border-color: var(--edatos-color-primary-100);
    box-shadow: none;
    pointer-events: none;
    cursor: not-allowed;
}

.pagination-wrapper .pagination .page-item.active .page-link:focus,
.pagination-wrapper .pagination .page-item.active .page-link:focus-visible {
    background-color: transparent;
    box-shadow: none;
}

/* ------------------------------------------------------------------
   7. ESTADO DISABLED — oculta solo botones de navegación (chevrons)
   ------------------------------------------------------------------ */
.pagination-wrapper .pagination .page-item.disabled .page-link,
.pagination-wrapper .pagination li.disabled a {
    display: none;
    color: var(--edatos-color-gray-20);
    border-color: var(--edatos-color-gray-20);
    background-color: transparent;
    cursor: not-allowed;
    pointer-events: none;
    opacity: 1;
}

/* ------------------------------------------------------------------
   7b. ELLIPSIS — visible, no interactuable, sin borde
   ------------------------------------------------------------------ */
.pagination-wrapper .pagination .page-item.page-ellipsis .page-link {
    display: block;
    color: var(--edatos-color-gray-40);
    border-color: transparent;
    background-color: transparent;
    pointer-events: none;
    cursor: default;
    padding: 0.5rem 0.5rem;
}

/* ------------------------------------------------------------------
   8. BOTONES DE NAVEGACIÓN (chevrons prev/next)
   ------------------------------------------------------------------ */
.pagination-wrapper .pagination .page-item .page-link i,
.pagination-wrapper .pagination li a i {
    vertical-align: middle;
    pointer-events: none;
}

/* ------------------------------------------------------------------
   9. FOCUS — accesibilidad
   ------------------------------------------------------------------ */
.pagination-wrapper .pagination .page-item .page-link:focus,
.pagination-wrapper .pagination li a:focus {
    box-shadow: none;
}

.pagination-wrapper .pagination .page-item .page-link:focus-visible,
.pagination-wrapper .pagination li a:focus-visible {
    outline: 2px solid var(--edatos-color-primary-100);
    outline-offset: 2px;
    box-shadow: none;
}

/* ------------------------------------------------------------------
   9. RESPONSIVE — tablet (< 768px)
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    .pagination-wrapper .pagination .page-item .page-link,
    .pagination-wrapper .pagination li a {
        padding: 0.45rem var(--edatos-spacing-x-lg);
        margin: 0 0.25rem;
        font-size: var(--edatos-font-size-sm);
    }
}

/* ------------------------------------------------------------------
   10. RESPONSIVE — móvil (< 576px)
   ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    .pagination-wrapper {
        padding-top: 0.75rem;
    }

    .pagination-wrapper .pagination .page-item .page-link,
    .pagination-wrapper .pagination li a {
        padding: 0.4rem 0.75rem;
        margin: 0 0.15rem;
        font-size: 13px;
    }
}

/* ================================================================
   Activity Type Dropdown — diseño ISTAC (Figma node 12460:12921)
   Selector de tipo de actividad en la vista "Flujo de Actividad"
   del historial de dataset.
   ================================================================ */

/* Contenedor principal */
.activity-type-filter {
    margin-bottom: 15px;
}

/* Etiqueta */
.activity-type-filter__label {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: var(--edatos-color-primary-100, #004678);
    margin-bottom: 4px;
}

/* Select nativo oculto — conservado para compatibilidad con activity-stream.js */
.activity-type-filter__native {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ----------------------------------------------------------------
   Contenedor del dropdown personalizado
   ---------------------------------------------------------------- */
.activity-type-dropdown {
    position: relative;
    display: block;
}

/* Botón disparador */
.activity-type-dropdown__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 35px;
    padding: 7px 10px;
    border: 0.5px solid var(--edatos-color-secondary-100, #004678);
    border-radius: var(--edatos-border-radius-sm);
    background-color: var(--edatos-color-white-100, #ffffff);
    color: var(--edatos-color-secondary-100, #004678);
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    cursor: pointer;
    transition: border-radius 0.05s ease;
}

/* Cuando está abierto: radio solo en la parte superior, borde inferior transparente */
.activity-type-dropdown.abrir .activity-type-dropdown__trigger {
    border-radius: 5px 5px 0 0;
    border-bottom-color: transparent;
}

/* Chevron — rota 180° al abrir */
.activity-type-dropdown__chevron {
    font-size: 12px;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.activity-type-dropdown.abrir .activity-type-dropdown__chevron {
    transform: rotate(180deg);
}

/* ----------------------------------------------------------------
   Menú desplegable
   ---------------------------------------------------------------- */
.activity-type-dropdown__menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: var(--edatos-color-white-100, #ffffff);
    border: 0.5px solid var(--edatos-color-secondary-100, #004678);
    border-top: none;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 0 1.5px rgba(0, 0, 0, 0.25);
    padding: 5px 15px;
}

.activity-type-dropdown.abrir .activity-type-dropdown__menu {
    display: block;
}

/* ----------------------------------------------------------------
   Ítems del menú
   ---------------------------------------------------------------- */
.activity-type-dropdown__item {
    display: flex;
    align-items: center;
    height: 35px;
    padding: 5px 10px;
    border-radius: 8px;
    color: var(--edatos-color-secondary-100, #004678);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.activity-type-dropdown__item:hover {
    background-color: var(--edatos-color-gray-5, #f2f2f2);
}

.activity-type-dropdown__item--selected {
    background-color: var(--edatos-color-gray-5, #f2f2f2);
}


.ckanext-datapreview {
    position: relative;
    clear: both;
    padding-top: 0px;
    margin-top: 0;
}

/* ----------------------------------------------------------------
   Responsive — móvil
   ---------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .activity-type-dropdown__trigger {
        font-size: 13px;
    }

    .activity-type-dropdown__item {
        font-size: 13px;
    }
}

/* ----------------------------------------------------------------
   Showcase add — select nativo oculto y layout del formulario
   ---------------------------------------------------------------- */
.showcase-add-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.showcase-add-dropdown {
    margin-bottom: 8px;
}

/* ----------------------------------------------------------------
   Add to group (pestaña Categorías) — select nativo oculto y layout
   ---------------------------------------------------------------- */
.add-to-group-native-select {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.add-to-group .activity-type-dropdown {
    margin-bottom: 8px;
}

.subject-area-icon {
    font-size: 94px;
    text-align: center;
    display: block;
    justify-content: center;
}
.subject-area-icon.group-home-icon{
    font-size: 75px !important;
}
.subject-area-icon:before{
	display: inline-block;
    font-family: 'Glyphter';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

/* .icon-<CATEGORY_KEY> => CATEGORY_KEY corresponds 'key' of 'category' in 'categories' array in application-env.yml */

.sector-publico:before {content: '\0059'; color:#E5772D;}
.ciencia-y-tecnologia:before {content: '\0058'; color: #8C9BA3;}
.icon-Demo_MovimientoNatural:before {content: '\0051'}
.icon-Demo_MovimientosMigratorios:before {content: '\0052'}
.demografia:before {content: '\0053'; color:#8C5C1D}
.hacienda:before {content: '\0046'; color:#E5772D;}
.urbanismo-infraestructuras:before {content: '\0044'; color:#E5772D;}
.icon-Economia_Precios_ConsumoEInversion:before {content: '\0045'}
.empleo:before {content: '\0043'; color:#C01A41;}
.medio-rural-pesca:before {content: '\0041'; color:#E5772D;}
.vivienda:before {content: '\0066'; color:#E5772D;}
.energia:before {content: '\0067'; color:#E5772D;}
.industria:before {content: '\0068'; color:#E5772D;}
.comercio:before {content: '\0064'; color:#E5772D;}
.deporte:before {content: '\004c'; color:#7F5B97;}
.turismo:before {content: '\0062'; color:#E5772D;}
.economia:before {content: '\005a'; color:#E5772D;}
.transporte:before {content: '\0061'; color:#E5772D;}
.sociedad-bienestar:before {content: '\004f'; color:#7F5B97;}
.cultura-ocio:before {content: '\0069'; color:#7F5B97;}
.educacion:before {content: '\004d'; color:#7F5B97;}
.icon-Sociedad_EleccionesYParticipacionCiudadana:before {content: '\004b'}
.legislacion-justicia:before {content: '\004a'; color:#7F5B97;}
.seguridad:before {content: '\0048'; color:#7F5B97;}
.salud:before {content: '\004e'; color:#7F5B97;}
.medio-ambiente:before {content: '\0055'; color:#67A23F;}
.:before {content: '\0056'}


@media only screen and (max-width: 1200px) {
    .subject-area-icon {
        font-size: 8vw;
    }
}
@media only screen and (max-width: 992px) {

    .subject-area-icon {
        font-size: 12vw;
    }
}

@media only screen and (max-width: 768px) {
    .subject-area-icon {
        font-size: 15vw;
    }
}

@media only screen and (max-width: 576px) {
    .subject-area-icon {
        font-size: 26vw;
    }
}

/* ── Home category cards: FA6 Pro thin icons via CSS ── */
.group-home-fa-glyph {
    font-family: "Font Awesome 6 Pro";
    font-style: normal;
    font-weight: 100; /* thin */
    font-size: 47px;
    color: var(--edatos-color-secondary-100, #004678);
    text-align: center;
    line-height: normal;
    display: inline-block;
    flex-shrink: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.group-home-fa-glyph::before {
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 100 !important;
    color: inherit !important;
}

.group-home-fa-glyph.ciencia-y-tecnologia::before  { content: '\f0c3'; } /* flask */
.group-home-fa-glyph.comercio::before               { content: '\f07a'; } /* cart-shopping */
.group-home-fa-glyph.cultura-ocio::before           { content: '\f630'; } /* theater-masks */
.group-home-fa-glyph.demografia::before             { content: '\f0c0'; } /* users */
.group-home-fa-glyph.deporte::before                { content: '\f44e'; } /* football-ball */
.group-home-fa-glyph.economia::before               { content: '\f201'; } /* chart-line */
.group-home-fa-glyph.educacion::before              { content: '\f19d'; } /* graduation-cap */
.group-home-fa-glyph.empleo::before                 { content: '\f0b1'; } /* briefcase */
.group-home-fa-glyph.energia::before                { content: '\f0e7'; } /* bolt */
.group-home-fa-glyph.hacienda::before               { content: '\f24e'; } /* scale-balanced */
.group-home-fa-glyph.industria::before              { content: '\f275'; } /* industry */
.group-home-fa-glyph.legislacion-justicia::before   { content: '\f0e3'; } /* gavel */
.group-home-fa-glyph.medio-ambiente::before         { content: '\f06c'; } /* leaf */
.group-home-fa-glyph.medio-rural-pesca::before      { content: '\f722'; } /* tractor */
.group-home-fa-glyph.salud::before                  { content: '\f21e'; } /* heart-pulse */
.group-home-fa-glyph.sector-publico::before         { content: '\f66f'; } /* landmark */
.group-home-fa-glyph.seguridad::before              { content: '\f132'; } /* shield */
.group-home-fa-glyph.sociedad-bienestar::before     { content: '\f4be'; } /* hand-holding-heart */
.group-home-fa-glyph.transporte::before             { content: '\f0d1'; } /* truck */
.group-home-fa-glyph.turismo::before                { content: '\f072'; } /* plane */
.group-home-fa-glyph.urbanismo-infraestructuras::before { content: '\f64f'; } /* city */
.group-home-fa-glyph.vivienda::before               { content: '\f015'; } /* house */

@media (max-width: 600px) {
    .group-home-fa-glyph {
        font-size: 36px;
    }
}