/**
 * CABECERA DE FASPRO. Solo la parte de la derecha.
 *
 * Los colores no se escriben aqui: salen de marca.css, que se carga en
 * todas las paginas. Sin sombras: en FASPRO se separa con una linea de
 * 1 px.
 *
 * Creada el 28/08/2026.
 */

/* ---------- el bloque que mete el guion ----------

   EL RITMO DE LA BARRA, EN TRES NUMEROS. Estaba cada hueco de su padre y
   su madre -9 px entre las tiendas, 14 hasta el bloque siguiente y CERO
   entre la ultima tienda y el boton de la cuenta, que se tocaban-. Se
   fija asi y no se toca sin motivo:

   - 10 px entre un boton y el siguiente, siempre.
   - 14 px de relleno a los lados dentro de un boton.
   - 10 px entre el icono y su texto.

   La unica excepcion es a la izquierda del boton de la cuenta: ahi hay
   un circulo macizo y pide menos aire, 7 px. */

.fp-cab {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: 0 0 auto;
}

/* El boton de la cuenta no es hijo de .fp-cab -es del tema-, asi que el
   hueco no se lo puede dar el contenedor. Se lo damos aqui. */
.fp-cab + .wd-header-my-account {
	margin-left: 10px !important;
}

/* ---------- las dos tiendas ---------- */

.fp-cab-tiendas {
	display: flex;
	gap: 10px;
}

.fp-tienda {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--fp-linea-fuerte);
	border-radius: var(--fp-radio-chico);
	background: var(--fp-velo);
	color: var(--fp-blanco);
	text-decoration: none;
	transition: border-color .14s, background .14s;
}

.fp-tienda:hover,
.fp-tienda:focus-visible {
	border-color: var(--fp-arena);
	background: rgba(255, 255, 255, .09);
	color: var(--fp-blanco);
}

/* Cada logo trae su propio recorte desde el guion, asi que aqui se le
   dice lo que mide de verdad el dibujo, no la caja que lo rodea. El
   triangulo va un pelin mas bajo que la manzana a proposito: es una
   mancha maciza y, a la misma altura exacta, pesa mas en el ojo. */
.fp-tienda svg {
	fill: currentColor;
	flex: 0 0 auto;
}

.fp-tienda-apple svg {
	width: 15px;
	height: 19px;
}

.fp-tienda-google svg {
	width: 15px;
	height: 17.5px;
}

.fp-tienda-rot {
	font: 600 13px/1.15 var(--fp-letra);
	letter-spacing: .02em;
	white-space: nowrap;
}

.fp-tienda-rot small {
	display: block;
	font-size: 10px;
	font-weight: 500;
	color: var(--fp-tinta-3);
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* ---------- el bocadillo ----------
   Mientras no haya ficha en la tienda, el boton se ve pero no lleva a
   ningun sitio: se avisa aqui en vez de dejar que alguien pulse y no
   pase nada. */

.fp-globo {
	position: absolute;
	top: calc(100% + 9px);
	left: 50%;
	transform: translate(-50%, -4px);
	background: var(--fp-fondo);
	border: 1px solid var(--fp-linea-fuerte);
	border-radius: var(--fp-radio-chico);
	padding: 6px 10px;
	white-space: nowrap;
	pointer-events: none;
	font: 600 11px/1 var(--fp-letra);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--fp-arena);
	opacity: 0;
	visibility: hidden;
	transition: opacity .14s ease, transform .14s ease, visibility .14s;
	z-index: 30;
}

.fp-globo:before,
.fp-globo:after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	border: 5px solid transparent;
}

.fp-globo:before {
	margin-left: -5px;
	border-bottom-color: var(--fp-linea-fuerte);
}

.fp-globo:after {
	margin-left: -4px;
	border-width: 4px;
	border-bottom-color: var(--fp-fondo);
}

.fp-pronto:hover .fp-globo,
.fp-pronto:focus-visible .fp-globo {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

/* Lo que no lleva a ninguna parte no finge que si. */
.fp-pronto {
	cursor: default;
}

/* ---------- el visitante ---------- */

.fp-cab-raya {
	width: 1px;
	height: 26px;
	background: var(--fp-linea);
}

.fp-cab-visita {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* DOS BOTONES, NO DOS ENLACES SUELTOS. "Entrar" es la puerta del que ya
   tiene cuenta y "Empieza gratis" la del que no: uno de linea y otro
   macizo. Antes "Entrar" era texto gris al lado de un boton, y no
   parecia que se pudiera pulsar. */
.fp-entrar {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 18px;
	border: 1px solid var(--fp-linea-fuerte);
	border-radius: var(--fp-radio-chico);
	background: var(--fp-velo);
	color: var(--fp-blanco);
	text-decoration: none;
	font: 600 14px/1 var(--fp-letra);
	white-space: nowrap;
	transition: border-color .14s, background .14s;
}

.fp-entrar:hover,
.fp-entrar:focus-visible {
	border-color: var(--fp-arena);
	background: rgba(255, 255, 255, .09);
	color: var(--fp-blanco);
}

/* ---------- una sola puerta, no dos ----------
   Woodmart pone lo suyo -"Iniciar sesion", con su icono- y nosotros
   ponemos "Entrar". Al visitante le salian las dos, al lado, llevando
   al mismo sitio. En pantalla ancha manda el nuestro y el del tema se
   aparta; por debajo de 1024 al reves, porque el nuestro no cabe en la
   barra y el del tema si. */
@media (min-width: 1025px) {
	.fp-visita .whb-col-right .wd-header-my-account {
		display: none !important;
	}
}

/* La misma altura que las tiendas: si no, la fila queda descuadrada.
   Y relative, porque cuando todavia no hay curso gratis este boton
   tambien lleva bocadillo dentro. */
.fp-gratis {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 20px;
	background: var(--fp-arena);
	color: var(--fp-fondo);
	text-decoration: none;
	font: 700 14px/1 var(--fp-letra);
	border-radius: var(--fp-radio-chico);
	white-space: nowrap;
	transition: opacity .14s;
}

.fp-gratis:hover {
	opacity: .88;
	color: var(--fp-fondo);
}

/* ---------- el que ya ha entrado ----------
   Mismo boton que el resto de la barra. Woodmart dejaba ahi un
   "Hola, NOMBRE" en mayusculas y sin caja, al lado de dos botones
   cuidados: parecia que faltaba algo por terminar, porque faltaba. */

.fp-yo {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	/* Con !important porque Woodmart le clava 40 px de alto y su propio
	   relleno a todo <a> de la barra de herramientas, y entonces este
	   boton quedaba 4 px mas bajo que los de las tiendas. */
	height: 44px !important;
	padding: 0 13px 0 7px !important;
	border: 1px solid var(--fp-linea-fuerte);
	border-radius: var(--fp-radio-chico);
	background: var(--fp-velo);
	color: var(--fp-blanco) !important;
	text-decoration: none !important;
	transition: border-color .14s, background .14s;
}

.wd-header-my-account:hover .fp-yo,
.fp-yo:focus-visible {
	border-color: var(--fp-arena);
	background: rgba(255, 255, 255, .09);
}

/* La inicial, no una foto: no hay avatares y un icono generico no dice
   nada. La letra del alumno si. */
.fp-yo-ini {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(182, 173, 110, .16);
	color: var(--fp-arena);
	font: 700 13px/1 var(--fp-letra);
}

.fp-yo-nombre {
	font: 600 14px/1 var(--fp-letra);
	white-space: nowrap;
	max-width: 150px;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Una punta de flecha para que se sepa que ahi hay un menu y no un
   enlace suelto. Al abrirse, gira. */
.fp-yo-punta {
	flex: 0 0 auto;
	width: 10px;
	height: 7px;
	fill: none;
	stroke: var(--fp-tinta-3);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .16s ease, stroke .14s;
}

.wd-header-my-account:hover .fp-yo-punta {
	transform: rotate(180deg);
	stroke: var(--fp-arena);
}

/* ---------- el menu de la cuenta ---------- */

/* La caja de Woodmart se queda sin nada: ni fondo, ni borde, ni
   relleno. Sigue siendo la que sabe abrirse y cerrarse -por eso no se
   toca-, pero lo que se ve es la nuestra. */
.wd-header-my-account .wd-dropdown-my-account {
	width: 290px !important;
	min-width: 290px !important;
	max-width: none !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	right: 0;
	left: auto;
}

/* OJO CON ESTO. Woodmart deja 15 px de hueco entre el boton y la caja
   (margin-top:15px) y los tapa con un puente invisible: el :after de
   .wd-dropdown. Si se apaga, el raton cruza por el vacio, el hover se
   pierde y el menu se cierra antes de que te de tiempo a llegar. El
   :after no se toca. */
.wd-header-my-account .wd-dropdown-my-account:before {
	display: none !important;
}

/* El puente de Woodmart mide 15 px, pero aqui el hueco real medido es
   de 30. Se alarga a 34 para que sobre por arriba y el raton pueda
   bajar en diagonal sin salirse. */
.wd-header-my-account .wd-dropdown-my-account:after {
	height: 34px !important;
	bottom: 100% !important;
}

/* ESTO NO ES UN FONDO, ES UN PANEL QUE FLOTA. Por eso no lleva el
   fondo general de la marca sino cristal: negro con transparencia y
   desenfoque de lo que hay detras. Asi se despega de la portada sin
   usar una sombra, que en FASPRO estan prohibidas.

   EL RESPALDO NO ES ADORNO. Si el navegador no sabe desenfocar, un
   fondo transparente deja el menu ilegible encima de una foto. Por eso
   lo que se escribe por defecto es casi opaco, y solo se aclara cuando
   hay desenfoque de verdad. */
.wd-header-my-account .fp-cuenta {
	width: 100%;
	background: var(--fp-vidrio-macizo);
	border: 1px solid var(--fp-linea-fuerte);
	border-top: 2px solid var(--fp-arena);
	border-radius: var(--fp-radio);
	text-align: left;
	overflow: hidden;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
	.wd-header-my-account .fp-cuenta {
		background: var(--fp-vidrio);
		-webkit-backdrop-filter: blur(var(--fp-desenfoque)) saturate(140%);
		backdrop-filter: blur(var(--fp-desenfoque)) saturate(140%);
	}
}

.fp-cuenta-quien {
	padding: 15px 16px 13px;
	border-bottom: 1px solid var(--fp-linea);
}

.fp-cuenta-quien strong {
	display: block;
	font: 600 14px/1.3 var(--fp-letra);
	color: var(--fp-blanco);
}

.fp-cuenta-quien span {
	display: block;
	font: 400 12px/1.4 var(--fp-letra);
	color: var(--fp-tinta-3);
	margin-top: 2px;
	word-break: break-all;
}

.fp-cuenta-quien em {
	display: inline-block;
	margin-top: 9px;
	font: 700 10px/1 var(--fp-letra);
	font-style: normal;
	letter-spacing: .09em;
	text-transform: uppercase;
	background: rgba(182, 173, 110, .16);
	color: var(--fp-arena);
	padding: 5px 8px;
	border-radius: var(--fp-radio-chico);
}

.fp-cuenta-lista {
	list-style: none;
	margin: 0;
	padding: 7px;
}

.fp-cuenta-lista li {
	margin: 0;
	padding: 0;
}

.fp-cuenta-lista li.fp-corte {
	margin-top: 7px;
	padding-top: 7px;
	border-top: 1px solid var(--fp-linea);
}

.fp-cuenta-lista a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 10px;
	border-radius: var(--fp-radio-chico);
	color: var(--fp-tinta-2);
	text-decoration: none;
	font: 500 13.5px/1.2 var(--fp-letra);
	transition: background .12s, color .12s;
}

.fp-cuenta-lista a:hover,
.fp-cuenta-lista a:focus-visible {
	background: var(--fp-velo);
	color: var(--fp-blanco);
}

.fp-cuenta-lista svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	fill: none;
	stroke: var(--fp-arena);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.fp-cuenta-lista i {
	margin-left: auto;
	font-style: normal;
	font: 700 11px/1 var(--fp-letra);
	color: var(--fp-arena);
}

.fp-cuenta-lista .fp-salir {
	color: var(--fp-tinta-3);
}

.fp-cuenta-lista .fp-salir svg {
	stroke: var(--fp-desierto);
}

/* ---------- pantallas estrechas ----------
   Las tiendas ocupan sitio y en la barra de un movil no cabe nada mas
   que el logo y el menu. Se esconden aqui y se enseñan dentro del menu
   lateral, que es donde hay espacio. */

/* ---------- tres tamaños, segun lo que quepa ----------
   La barra lleva el logo (200 px), el menu (600) y la cuenta (165). Lo
   que sobra es lo que hay para las tiendas, y no es lo mismo en un
   monitor de 2560 que en un portatil de 1280. En vez de dejar que
   empujen al menu, se encogen por pasos:

   - de 1500 para arriba: grandes, con rotulo.
   - de 1301 a 1499: algo mas chicas, con rotulo.
   - de 1025 a 1300: solo el icono. Sigue estando, que es lo que importa.
   - por debajo de 1025: se van a la barra de arriba y salen dentro del
     menu lateral, que es donde hay sitio. */

@media (min-width: 1301px) and (max-width: 1500px) {
	.fp-tienda {
		height: 38px;
		padding: 0 12px;
		gap: 9px;
	}

	.fp-tienda-apple svg {
		width: 13px;
		height: 16.5px;
	}

	.fp-tienda-google svg {
		width: 13px;
		height: 15px;
	}

	.fp-tienda-rot {
		font-size: 11px;
	}

	.fp-tienda-rot small {
		font-size: 9px;
	}

	.fp-gratis,
	.fp-entrar {
		height: 38px;
		padding: 0 16px;
		font-size: 13px;
	}

	.fp-yo {
		height: 38px !important;
		padding: 0 11px 0 6px !important;
		gap: 9px;
	}

	.fp-yo-ini {
		width: 26px;
		height: 26px;
		font-size: 12px;
	}

	.fp-yo-nombre {
		font-size: 13px;
	}
}

@media (min-width: 1025px) and (max-width: 1300px) {
	.fp-cab {
		gap: 12px;
	}

	.fp-tienda {
		width: 38px;
		height: 38px;
		padding: 0;
		gap: 0;
		justify-content: center;
	}

	.fp-tienda-rot {
		display: none;
	}

	.fp-gratis,
	.fp-entrar {
		height: 38px;
		padding: 0 14px;
		font-size: 13px;
	}

	/* Aqui ya no cabe el nombre. Se queda la inicial, que es lo que
	   identifica, y la flecha, que es lo que avisa del menu. */
	.fp-yo {
		height: 38px !important;
		padding: 0 8px !important;
		gap: 6px;
	}

	.fp-yo-ini {
		width: 26px;
		height: 26px;
		font-size: 12px;
	}

	.fp-yo-nombre {
		display: none;
	}
}

@media (max-width: 1024px) {
	.fp-cab-tiendas,
	.fp-cab-raya,
	.fp-entrar {
		display: none;
	}
}

@media (max-width: 767px) {
	.fp-gratis {
		height: 36px;
		padding: 0 13px;
		font-size: 12px;
	}
}

/* En el menu lateral del movil si caben, y a lo ancho. */
.wd-side-hidden .fp-cab-tiendas,
.mobile-nav .fp-cab-tiendas {
	display: flex;
	padding: 14px 20px;
	gap: 8px;
}

.wd-side-hidden .fp-tienda,
.mobile-nav .fp-tienda {
	flex: 1;
	justify-content: center;
}