/* =========================================================================
   css/secciones/barra2026.css - Barra superior 2026 (partials/barra2026.php):
   logo, buscador, idiomas y bandera de la sede. La usan header.php y, si la
   vista pone $barra_2026 = true, partesuperior.php.
   ========================================================================= */

/* ---------- Barra superior ----------
   Clases propias (cab26-*): las de partesuperior.php (#blanco_superior_new,
   .cab-utilidades...) tienen reglas en principal.css, estilos.css y movil.css
   que aqui no se quieren. Mismo ancho (80%) que el texto del banner. */
.cab26-interior {
	width: 80%;
	min-height: 110px;
	margin: 0 auto;
	padding: 10px 0;
}

.cab26-logo {
	height: 90px;
	width: auto;
}

/* Buscador: campo y boton en una pastilla */
.cab26-buscador {
	width: 320px;
	margin: 0;
}

.cab26-buscador .form-control {
	margin-bottom: 0; /* estilos.css da 10px a los .form-control */
	border-color: #d5d9e0;
	border-radius: 50rem 0 0 50rem !important; /* estilos.css pone 0 !important */
	padding: .4rem 1rem;
	font-size: .9rem;
}

.cab26-buscador .form-control::placeholder {
	color: #8a93a0; /* estilos.css los pone amarillos */
	font-weight: 400;
}

.cab26-buscador .form-control:focus {
	border-color: #f4b333;
	box-shadow: 0 0 0 .2rem rgba(244, 179, 51, .25);
}

.cab26-buscador-boton,
.cab26-buscador-boton:focus-visible {
	background-color: #f4b333;
	border: 1px solid #f4b333;
	border-radius: 0 50rem 50rem 0 !important;
	color: #fff;
	font-weight: 600;
	padding: 0 1rem;
}

.cab26-buscador-boton:hover,
.cab26-buscador-boton:active {
	background-color: #dd9d1f !important;
	border-color: #dd9d1f !important;
	color: #fff !important;
}

/* Selector de idioma: desplegable. Boton en pastilla gris con el idioma
   activo; la lista abre a la derecha, con el activo en azul oscuro. */
.cab26-idioma-actual {
	background-color: #f1f3f6;
	color: #232d3b;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
	padding: .6rem .9rem;
	cursor: pointer;
	transition: background-color .15s;
}

.cab26-idioma-actual:hover,
.cab26-idioma-actual:focus-visible,
.cab26-idioma-actual[aria-expanded="true"] {
	background-color: #e4e8ee;
}

.cab26-idioma-actual .fa-globe {
	color: #8a93a0;
}

.cab26-idioma-flecha {
	font-size: .65rem;
	transition: transform .15s;
}

.cab26-idioma-actual[aria-expanded="true"] .cab26-idioma-flecha {
	transform: rotate(180deg);
}

.cab26-idiomas-menu {
	--bs-dropdown-min-width: 10rem;
	--bs-dropdown-font-size: .85rem;
	--bs-dropdown-link-color: #3d4654;
	--bs-dropdown-link-hover-bg: #f1f3f6;
	--bs-dropdown-link-active-bg: #232d3b;
	--bs-dropdown-link-active-color: #fff;
	border-color: #e6e9ee;
	border-radius: .75rem;
	padding: .35rem;
	margin-top: .35rem !important;
}

.cab26-idiomas-menu .dropdown-item {
	display: flex;
	align-items: center;
	gap: .6rem;
	border-radius: .5rem;
	padding: .45rem .7rem;
}

.cab26-idiomas-menu .dropdown-item.active {
	cursor: default;
}

/* Codigo (ENG, ESP...) de ancho fijo para que los nombres queden alineados */
.cab26-idioma-codigo {
	min-width: 2.2em;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .04em;
	opacity: .7;
}

.cab26-bandera {
	width: 36px;
	height: 36px;
	object-fit: cover;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
}

@media (max-width: 1199.98px) {
	.cab26-interior { width: 90%; }
	.cab26-buscador { width: 240px; }
}

@media (max-width: 767.98px) {
	.cab26-interior {
		width: auto;
		min-height: 0;
		padding: 10px 14px;
	}
	.cab26-logo { height: 64px; }
	.cab26-buscador { width: 100%; }
}

/* El margen superior de #textos_cabecera (principal.css) se escapaba por
   encima del banner y dejaba una franja blanca bajo la barra superior; con
   la barra antigua lo tapaba el float del logo. flow-root lo deja dentro. */
#cabecerainterior {
	display: flow-root;
}

/* =========================================================================
   Menu bajo la barra (antes en css/header.css). Lo usan partials/header.php y
   partesuperior.php con $barra_2026 = true (su menu lleva .cab-navegacion).
   ========================================================================= */
/* ---------- Menu ---------- */
.cab-navegacion {
	clear: both !important;
	min-height: 45px !important;
	background-color: #333f4f !important;
	z-index: 999 !important;
	padding: 0 !important;
}

/* ---------- Barra superior y menu fijos ----------
   Escritorio: el menu va bajo el banner y, al hacer scroll, se queda pegado
   arriba (sticky).
   Movil y tablet (hasta 1024px, donde el menu es el boton MENU): la barra
   superior y el menu quedan fijos arriba siempre, el menu justo debajo de la
   barra. js/secciones/barra2026.js mide sus altos (--alto-barra, --alto-menu) para
   colocarlos y reservar su hueco al principio de la pagina. */
.cab-navegacion {
	position: sticky;
	top: 0;
}

/* Los saltos a un #ancla no quedan tapados por el menu pegado */
html {
	scroll-padding-top: 45px;
}

@media (max-width: 1024px) {
	.cab26-barra {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.cab-navegacion {
		position: fixed;
		top: var(--alto-barra, 0px);
		left: 0;
		right: 0;
	}

	body {
		padding-top: calc(var(--alto-barra, 0px) + var(--alto-menu, 45px));
	}

	html {
		scroll-padding-top: calc(var(--alto-barra, 0px) + var(--alto-menu, 45px));
	}

	/* El menu desplegado no pasa del alto de la pantalla: si es mas largo,
	   se desplaza dentro */
	.cab-navegacion #cssmenu > ul.open {
		max-height: calc(100vh - var(--alto-barra, 0px) - var(--alto-menu, 45px));
		overflow-y: auto;
	}

	/* El buscador de la barra superior se cambia por la lupa del menu */
	.cab26-barra .cab26-buscador {
		display: none !important;
	}
}

/* ---------- Lupa del menu (movil y tablet) ----------
   Enlace a buscador.php a la izquierda de las tres rayas del boton MENU
   (que estan a 20px del borde y miden 22px). Va por encima del menu, cuyo
   boton ocupa todo el ancho, para que el toque no abra el menu. */
.cab-lupa {
	display: none;
}

@media (max-width: 1024px) {
	.cab-lupa {
		position: absolute;
		top: 0;
		right: 50px;
		z-index: 100; /* por encima de #cssmenu, que lleva z-index: 99 (.ec-28) */
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: var(--alto-menu, 45px);
		color: #fff;
		font-size: 18px;
		text-decoration: none;
	}

	.cab-lupa:hover,
	.cab-lupa:focus-visible {
		color: var(--sr-yellow, #ffb800);
	}
}