/* Biblioteca de Management — capa de layout de Digitis, cargada después de la hoja
   de cada página (el CSS del build de Emilio queda intacto).

   El build se maquetó sobre un lienzo de 1440 px: la portada fijaba body a 1440 px
   con el hero en posiciones absolutas, y el resto de vistas estiraba el contenido
   de borde a borde con 96 px de margen. Dentro del site eso rompe la retícula: la
   web usa el contenedor de Flatsome, 1420 px centrado con 15 px de relleno.

   A partir de 1280 px el margen del ámbito (--m) pasa a ser el mayor entre el del
   diseño (96 px) y el que alinea con ese contenedor, así que todo lo que ya usa
   --m (contenido, barras, buscador, cabecera de ficha) se centra y fluye solo.
   Por debajo de 1280 px mandan los cortes del build.

   Desde el 2026-11-01 la cabecera y el pie son los de Flatsome (ver
   inc/biblioteca-render.php). Las reglas de la cabecera y el pie propios se
   retiraron de aquí; el build las sigue trayendo, pero ya no hay marcado al que
   apliquen salvo .nav, que se neutraliza abajo. */

:root {
	--bm-cont: 1420px;
	--bm-alinea: calc((100vw - var(--bm-cont)) / 2 + 15px);
}

body { width: auto !important; }

/* En la plantilla del catálogo el botón «volver» cuelga de main y no de la sección
   con margen: sin esto su right: calc(10px - var(--m)) lo saca de la pantalla */
main > .volver-bf { margin-left: var(--m); margin-right: var(--m); }

@media (min-width: 1280px) {
	:root {
		--m: max(96px, var(--bm-alinea));
		/* La columna de la ficha ocupa el contenedor de la web, no 1200 px fijos */
		--ancho-ficha: calc(var(--bm-cont) - 30px);
	}

	/* Portada: el hero deja el lienzo fijo y sigue el margen del ámbito */
	.hero .foto,
	.hero .fundido { width: 100%; }
	.hero .foto { object-fit: cover; object-position: center; }
	.hero .logoA { left: calc(var(--m) - 4px); }
	.hero h1.promesa,
	.buscador { left: var(--m); }
}

/* ---------------------------------------------------------------------------
   Inter de una sola descarga (petición 10 de Emilio, 31-oct).
   El texto sale del fichero variable de Kirki que ya usa toda la web (ver el
   filtro kirki_enqueue_google_fonts en inc/biblioteca-render.php). Ese fichero
   no trae flechas, ✓ ni algunos signos que usa el contenido, que con la Inter
   del build salían en Inter. Las @font-face del build ya no se sirven (ver
   ellopis_bm_css_build); estas caras son recortes de sus mismos ficheros
   (Inter 4.001) con solo esos caracteres, unos 4 KB por peso, y se bajan solo
   si la página los usa.
   Se regeneran con: pyftsubset Inter-<Peso>.woff2 --flavor=woff2 --no-hinting
   --unicodes="U+2080-2089,U+2120,U+2190-21FF,U+2248,U+2260-2265,U+2713"
   --------------------------------------------------------------------------- */
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(../fuentes/inter-simbolos-400.woff2) format('woff2'); unicode-range: U+2080-2089, U+2120, U+2190-21FF, U+2248, U+2260-2265, U+2713; }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(../fuentes/inter-simbolos-500.woff2) format('woff2'); unicode-range: U+2080-2089, U+2120, U+2190-21FF, U+2248, U+2260-2265, U+2713; }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(../fuentes/inter-simbolos-600.woff2) format('woff2'); unicode-range: U+2080-2089, U+2120, U+2190-21FF, U+2248, U+2260-2265, U+2713; }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(../fuentes/inter-simbolos-700.woff2) format('woff2'); unicode-range: U+2080-2089, U+2120, U+2190-21FF, U+2248, U+2260-2265, U+2713; }
@font-face { font-family: Inter; font-weight: 800; font-display: swap; src: url(../fuentes/inter-simbolos-800.woff2) format('woff2'); unicode-range: U+2080-2089, U+2120, U+2190-21FF, U+2248, U+2260-2265, U+2713; }

/* ---------------------------------------------------------------------------
   Cabecera y pie de Flatsome dentro del ámbito (2026-11-01).
   El build trae reglas .nav para su cabecera propia, ya retirada, y casan con
   los ul.nav de Flatsome: les ponían separación, letra de 17,6 px y negro, y los
   ocultaban por debajo de 900 px. Aquí recuperan lo que tienen en el resto de la
   web (flex de Flatsome y la letra que heredan). Solo fuera del contenido.
   --------------------------------------------------------------------------- */
:where(#header, #footer, body > :not(#wrapper)) .nav {
	display: flex;
	align-items: center;
	gap: normal;
	margin-left: 0;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

/* Foco en los buscadores y el formulario del build: Flatsome pone a los campos
   enfocados fondo blanco, sombra gris y texto #333, con más peso que el build. */
.campo input:focus { background: transparent; box-shadow: none; color: var(--texto); }
.form input:focus,
.form textarea:focus { box-shadow: none; color: var(--texto); }

/* ---------------------------------------------------------------------------
   Cabecera y barra de la Biblioteca fijas al bajar (petición 2.2, 31-oct).
   Flatsome fija su cabecera pasados unos 220 px (clase stuck); en el ámbito se
   queda en una línea, sin la barra gris de arriba (fuera de la Biblioteca esa
   barra sigue fija, decisión de Román del 29-oct). El script de
   inc/biblioteca-render.php pone html.bm-fijo a la vez, y la barra de la
   Biblioteca se fija debajo en versión estrecha, sin el logotipo grande. En la
   ficha la barra de apartados va debajo de las dos. A 1440 × 900 suman
   70 + 48 + 56 = 174 px. Al volver arriba todo recupera su tamaño.
   --------------------------------------------------------------------------- */
:root {
	--bm-cab-fija: 70px;
	--bm-barra-fija: 48px;
}
@media (max-width: 599px) {
	:root { --bm-barra-fija: 52px; }
}

.bm-ambito .header-wrapper.stuck #top-bar { display: none; }

/* Saltos a anclas: por debajo de lo fijo (en la ficha manda la regla del build,
   que lee --barra-h, y el script ya suma ahí la cabecera y la barra) */
html:has(.bm-ambito) { scroll-padding-top: calc(var(--bm-cab-fija) + var(--bm-barra-fija) + 8px); }
html:has(#barra-ficha) { scroll-padding-top: calc(var(--barra-h, 56px) + 8px); }

/* La portada no lleva barra arriba: solo aparece fija al bajar. Su hoja
   (portada.css) no trae los estilos de la barra; van aquí, copiados del build. */
.barra-bm--portada { display: none; background: var(--fondo); border-bottom: 1px solid var(--sep); }
.bm-fijo .barra-bm--portada { display: block; }
.barra-bm--portada .barra-in { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--m); }
.barra-bm--portada .vias { display: flex; gap: 34px; font-size: 14.5px; font-weight: 600; color: var(--texto); }
.barra-bm--portada .vias a:hover { color: var(--rojo); }
.barra-bm--portada .vias a.buscar { display: flex; align-items: center; gap: 8px; border: 1px solid var(--texto2); border-radius: 99px; background: #fff; color: var(--texto); }
.barra-bm--portada .vias a.buscar svg { flex: none; }
.barra-bm--portada .vias a.buscar:hover { border-color: var(--rojo); color: var(--rojo); }
.barra-bm--portada .bm-sec { display: none; }
@media (max-width: 599px) {
	.barra-bm--portada .bm-sec { display: inline-flex; align-items: center; gap: 9px; margin: 0 54px 0 auto; padding: 0 16px 0 15px; font: inherit; font-size: 15px; font-weight: 600; color: var(--texto); background: #fff; border: 1px solid var(--texto2); border-radius: 99px; cursor: pointer; }
	.barra-bm--portada .bm-sec::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--rojo); border-bottom: 2px solid var(--rojo); transform: rotate(45deg); margin-top: -4px; }
	.barra-bm--portada .bm-sec[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 3px; }
	.barra-bm--portada .vias { font-size: 15.5px; }
	.barra-bm--portada .vias a.buscar svg { width: 19px; height: 19px; }
	.barra-bm--portada:not(.abierto) .vias a:not(.buscar) { display: none; }
}

.bm-fijo .barra-bm {
	position: fixed;
	top: var(--bm-cab-fija);
	left: 0;
	right: 0;
	z-index: 41;
	animation: bm-baja .25s ease-out;
}
@keyframes bm-baja { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .bm-fijo .barra-bm { animation: none; } }

.bm-fijo .barra-bm .barra-in {
	position: relative;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	height: var(--bm-barra-fija);
	padding-top: 0;
	padding-bottom: 0;
}
/* El logotipo grande se cambia por el rótulo pequeño de la barra de apartados */
.bm-fijo .barra-bm .logoA img { display: none; }
.bm-fijo .barra-bm .logoA::before {
	content: "Biblioteca de Management";
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--texto2);
}
.bm-fijo .barra-bm .logoA:hover::before { color: var(--rojo); }
.bm-fijo .barra-bm .vias {
	width: auto;
	height: 100%;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 28px;
}
.bm-fijo .barra-bm .vias a:not(.buscar) {
	display: inline-flex;
	align-items: center;
	height: 100%;
	min-height: 0;
	padding: 0;
	border: 0;
	white-space: nowrap;
}
.bm-fijo .barra-bm .vias a.activa:not(.buscar) { color: #000; box-shadow: inset 0 -2px 0 var(--rojo); }
.bm-fijo .barra-bm .vias a.buscar {
	position: static;
	flex: none;
	height: 34px;
	min-height: 0;
	margin: 0 0 0 4px;
	padding: 0 14px 0 12px;
}
/* La barra de apartados de la ficha ya lleva el rótulo arriba: no se repite */
.bm-fijo .bf-bm { display: none; }

/* Ficha: la barra de apartados va debajo de la cabecera y de la barra estrecha,
   con su alto de siempre (--barra-base; --barra-h es el total de lo fijo) */
.barra-ficha { top: calc(var(--bm-cab-fija) + var(--bm-barra-fija)); height: var(--barra-base, 56px); }

@media (max-width: 1279px) {
	.bm-fijo .barra-bm .logoA { display: none; }
	.bm-fijo .barra-bm .vias { width: 100%; gap: 24px; }
	.bm-fijo .barra-bm .vias a.buscar { margin-left: auto; }
}
@media (max-width: 899px) {
	/* Las vías caben en una fila que se desplaza de lado; Buscar, solo el icono */
	.bm-fijo .barra-bm .vias {
		display: flex;
		overflow-x: auto;
		scrollbar-width: none;
		gap: 18px;
		font-size: 13.5px;
	}
	.bm-fijo .barra-bm .vias::-webkit-scrollbar { display: none; }
	.bm-fijo .barra-bm .vias a.buscar {
		order: -1;
		width: 36px;
		height: 36px;
		margin: 0;
		padding: 0;
		justify-content: center;
		font-size: 0;
	}
}
@media (max-width: 599px) {
	/* En móvil manda el botón «Secciones» del build, que despliega las vías */
	.bm-fijo .barra-bm .logoA { display: block; }
	.bm-fijo .barra-bm .logoA::before { content: "Biblioteca"; font-size: 13px; }
	.bm-fijo .barra-bm .barra-in { flex-wrap: wrap; align-content: center; gap: 0; }
	.bm-fijo .barra-bm.abierto .barra-in { height: auto; min-height: var(--bm-barra-fija); padding-top: 4px; padding-bottom: 8px; }
	.bm-fijo .barra-bm .vias { display: flex; flex-direction: column; align-items: stretch; width: 100%; height: auto; overflow: visible; gap: 0; }
	.bm-fijo .barra-bm .vias a:not(.buscar) { height: auto; min-height: 48px; border-top: 1px solid var(--sep); }
	.bm-fijo .barra-bm .vias a.activa:not(.buscar) { color: var(--rojo); box-shadow: none; }
	.bm-fijo .barra-bm .vias a.buscar { position: absolute; top: 4px; right: var(--m); order: 0; width: 44px; height: 44px; }
	.bm-fijo .barra-bm .bm-sec { height: 40px; }
}

/* Enlaces propios de Emilio (inc/biblioteca-enlaces.php): el mismo aspecto que
   los enlaces del build entre fichas (.ref-herramienta) */
main a.enlace-propio {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: #DD1107;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
main a.enlace-propio:hover { color: #DD1107; }