/* =========================================================================
   css/barra2026.css - Barra superior 2026 de la web principal
   (partials/barra2026.php). Copia del aspecto de la de agencias
   (agencias/css/secciones/barra2026.css) sin Bootstrap, que www no carga:
   logo a la izquierda y selector de idioma a la derecha.
   ========================================================================= */

.cab26-barra,
.cab26-barra * {
	box-sizing: border-box;
}

.cab26-barra {
	position: relative;
	clear: both;
	background-color: #fff;
	z-index: 1001; /* por encima del menu fijo (.nav-fija, 1000): el logo fijo va dentro */
}

/* Mismo ancho que el contenido de la web (80%) */
.cab26-interior {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 80%;
	/* min-height: 110px; */
	margin: 0 auto;
	padding: 10px 0;
}

/* Logo en banderola (img/logo_Staregister_flag.png, tarjeta blanca con sombra que cuelga
   del borde superior): fijo arriba desde el principio, asi no se mueve al hacer scroll y
   queda por encima del menu cuando este se pega arriba (.nav-fija, z-index 1000). Fuera del
   flujo de la barra y siempre en el mismo sitio.
   Alineado con la raya amarilla de los textos del video de la portada
   (videos/banner_home_sin_logo.mp4, 1906x400, x=126 a tamano real). El video se ve entero
   a todo el ancho (alto proporcional, partesuperior.php): la raya esta en el 126/1906 = 6.61%.
   La tarjeta blanca empieza 13px dentro de la imagen (9px con el logo de 100px de movil). */
.cab26-logo-enlace {
	position: fixed;
	top: 0;
	left: max(-5px, calc(6.61% - 13px));
	z-index: 1001;
	line-height: 0;
}

.cab26-logo {
	display: block;
	width: auto;
	height: 150px;
}

/* Menu de movil (boton MENU, styles4.css): el texto se aparta del logo solo cuando el logo
   le queda encima (js/barra2026.js pone .cab26-menu-tapado en <html>). Desplegado
   (.cab26-menu-abierto) el menu pasa por encima del logo, para no cortar las opciones,
   y el texto vuelve a su sitio */
@media (max-width: 1024px) {
	.nav-fija #cssmenu #menu-button {
		transition: padding-left .2s ease;
	}

	.cab26-menu-tapado:not(.cab26-menu-abierto) .nav-fija #cssmenu #menu-button {
		padding-left: 116px;
	}

	.cab26-menu-abierto .nav-fija {
		z-index: 1002;
	}
}

/* Con el logo fuera del flujo, el selector de idioma se queda a la derecha */
.cab26-idiomas {
	margin-left: auto;
}

.cab26-oculto {
	display: none;
}

/* ---------- Selector de idioma ----------
   Boton en pastilla gris con el idioma activo; la lista abre a la derecha,
   con el activo en azul oscuro. js/barra2026.js la abre y cierra. */
.cab26-idiomas {
	position: relative;
}

.cab26-idioma-actual {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: .6rem .9rem;
	border: 0;
	border-radius: 50rem;
	background-color: #f1f3f6;
	color: #232d3b;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1;
	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-icono-globo {
	color: #8a93a0;
}

.cab26-idioma-flecha {
	transition: transform .15s;
}

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

.cab26-idiomas-menu {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: 1001;
	display: none;
	min-width: 10rem;
	margin: .35rem 0 0;
	padding: .35rem;
	list-style: none;
	border: 1px solid #e6e9ee;
	border-radius: .75rem;
	background-color: #fff;
	box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
}

.cab26-idiomas.abierto .cab26-idiomas-menu {
	display: block;
}

.cab26-idiomas-menu li {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
}

.cab26-idioma-opcion {
	display: flex;
	align-items: center;
	gap: .6rem;
	width: 100%;
	padding: .45rem .7rem;
	border: 0;
	border-radius: .5rem;
	background: none;
	color: #3d4654;
	font-family: inherit;
	font-size: 13.6px;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
}

.cab26-idioma-opcion:hover,
.cab26-idioma-opcion:focus-visible {
	background-color: #f1f3f6;
}

.cab26-idioma-opcion.activo {
	background-color: #232d3b;
	color: #fff;
	cursor: default;
}

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

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

@media (max-width: 767.98px) {
	.cab26-interior {
		width: auto;
		min-height: 84px;
		padding: 10px 14px;
	}
	.cab26-logo { height: 100px; }
	.cab26-logo-enlace { left: max(-5px, calc(6.61% - 9px)); }
	/* Un poco mas abajo, para dejar sitio arriba al boton "Gestion de Cookies" */
	.cab26-idiomas { margin-top: 16px; }
}