/* ISLA — Índice de biodiversidad de BCS
   Paleta tomada del sitio: verde #132F19 (barra de menú), naranja #F47920
   (enlace activo), terracota #A14723 (lema). La tipografía se hereda del tema. */

.isla-ib {
	--isla-verde: #132F19;
	--isla-naranja: #F47920;
	--isla-terracota: #A14723;
	--isla-texto: #121212;
	--isla-apagado: #4A5347;
	--isla-linea: #D9DED3;
	--isla-linea-suave: #EDEFE8;
	--isla-fondo: #F6F7F3;
	--isla-riesgo-p: #A32E26;
	--isla-riesgo-a: #8A5209;
	--isla-riesgo-pr: #30557F;

	color: var(--isla-texto);
	line-height: 1.6;
	margin: 0 0 2em;
}

.isla-ib *,
.isla-ib *::before,
.isla-ib *::after {
	box-sizing: border-box;
}

.isla-ib__titulo {
	margin: 0 0 .5em;
	font-size: 1.7em;
	line-height: 1.25;
}

.isla-ib__intro {
	margin: 0 0 1.4em;
	font-size: .95em;
	color: var(--isla-apagado);
	max-width: 78ch;
}

.isla-ib__intro strong {
	color: var(--isla-texto);
	font-variant-numeric: tabular-nums;
}

.isla-ib__label {
	display: block;
	font-size: .72em;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--isla-apagado);
	margin-bottom: .5em;
}

.isla-ib__input {
	width: 100%;
	font-family: inherit;
	font-size: 1em;
	padding: .8em .9em;
	border: 1px solid #C3CBBB;
	border-radius: 0;
	background: #fff;
	color: var(--isla-texto);
}

.isla-ib__input:focus {
	outline: 2px solid var(--isla-verde);
	outline-offset: 1px;
}

.isla-ib__filtros {
	display: flex;
	flex-wrap: wrap;
	gap: .45em;
	margin-top: .8em;
}

.isla-ib__chip {
	font-family: inherit;
	font-size: .8em;
	line-height: 1.2;
	border: 1px solid #C3CBBB;
	background: #fff;
	color: var(--isla-apagado);
	border-radius: 999px;
	padding: .6em 1em;
	min-height: 44px;
	cursor: pointer;
}

.isla-ib__chip:hover {
	border-color: var(--isla-verde);
	color: var(--isla-texto);
}

.isla-ib__chip:focus-visible {
	outline: 2px solid var(--isla-verde);
	outline-offset: 2px;
}

.isla-ib__chip[aria-pressed="true"] {
	background: var(--isla-verde);
	border-color: var(--isla-verde);
	color: #fff;
	font-weight: 700;
}

.isla-ib__chip-n {
	font-variant-numeric: tabular-nums;
	opacity: .7;
	margin-left: .4em;
}

.isla-ib__conteo {
	margin: 1.2em 0 .6em;
	font-size: .82em;
	color: var(--isla-apagado);
	font-variant-numeric: tabular-nums;
}

.isla-ib__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--isla-linea);
	background: #fff;
	max-height: var(--isla-alto, 620px);
	overflow-y: auto;
}

.isla-ib__item {
	padding: .9em 1.1em;
	border-bottom: 1px solid var(--isla-linea-suave);
	display: flex;
	flex-wrap: wrap;
	gap: .3em 1em;
	align-items: baseline;
}

.isla-ib__item:last-child {
	border-bottom: 0;
}

.isla-ib__sci {
	font-style: italic;
	font-weight: 600;
	font-size: 1.05em;
	overflow-wrap: anywhere;
}

.isla-ib__sci-sp {
	font-style: normal;
	font-weight: 400;
	color: var(--isla-apagado);
	font-size: .9em;
}

.isla-ib__comun {
	font-size: .88em;
}

.isla-ib__tax {
	font-size: .8em;
	color: var(--isla-apagado);
	overflow-wrap: anywhere;
}

.isla-ib__sep {
	flex-grow: 1;
	min-width: 0;
}

.isla-ib__insignias {
	display: flex;
	flex-wrap: wrap;
	gap: .35em;
}

.isla-ib__b {
	font-size: .68em;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-weight: 700;
	border-radius: 3px;
	padding: .25em .55em;
	white-space: nowrap;
	border: 1px solid currentColor;
}

.isla-ib__b--end { color: var(--isla-terracota); }
.isla-ib__b--P   { color: var(--isla-riesgo-p); }
.isla-ib__b--A   { color: var(--isla-riesgo-a); }
.isla-ib__b--Pr  { color: var(--isla-riesgo-pr); }
.isla-ib__b--cit { color: var(--isla-apagado); }

.isla-ib__muni {
	flex-basis: 100%;
	font-size: .76em;
	color: var(--isla-apagado);
}

.isla-ib__muni b {
	font-weight: 600;
	background: var(--isla-fondo);
	border: 1px solid var(--isla-linea);
	border-radius: 3px;
	padding: .15em .5em;
	margin-right: .3em;
	color: var(--isla-texto);
}

.isla-ib__pie {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: .3em 1.2em;
	font-size: .76em;
	color: var(--isla-apagado);
}

.isla-ib__pie a {
	color: var(--isla-terracota);
}

.isla-ib__mas {
	display: block;
	width: 100%;
	margin-top: .9em;
	padding: .9em 1em;
	min-height: 44px;
	font-family: inherit;
	font-size: .9em;
	font-weight: 700;
	border: 2px solid var(--isla-verde);
	background: #fff;
	color: var(--isla-verde);
	cursor: pointer;
}

.isla-ib__mas:hover {
	background: var(--isla-verde);
	color: #fff;
}

.isla-ib__vacio {
	border: 1px solid var(--isla-linea);
	background: #fff;
	padding: 2.2em 1.2em;
	text-align: center;
	color: var(--isla-apagado);
	font-size: .92em;
	margin: 0;
}

.isla-ib__nota {
	margin: 1em 0 0;
	font-size: .78em;
	line-height: 1.7;
	color: var(--isla-apagado);
	max-width: 88ch;
}

@media (max-width: 640px) {
	.isla-ib__titulo { font-size: 1.4em; }
	.isla-ib__item { gap: .25em .7em; }
}

/* El atributo hidden debe ganar: una clase con display explícito vence a la
   regla [hidden] del navegador, y el botón «Ver más» quedaba visible sin más
   resultados que mostrar. */
.isla-ib__mas[hidden],
.isla-ib__lista[hidden],
.isla-ib__vacio[hidden] {
	display: none !important;
}