/**
 * Nav lateral de acceso rápido.
 *
 * Medidas del PDF del equipo de diseño, no estimadas. Sobre la página de 1920:
 *
 *   · tarjeta      201 px de ancho visible, pegada al borde izquierdo
 *   · esquinas     33 px, solo las del lado que da al contenido
 *   · fondo        #8C9A9E casi opaco — ver abajo
 *   · texto        Montserrat Medium 21,24 px, blanco
 *   · inactivo     el mismo blanco al 50% — muestreado: el (197,204,206) de la
 *                  maqueta es exactamente blanco al 50% sobre la tarjeta
 *   · viñetas      7,8 px de diámetro, a 13,5 del texto
 *   · separación   42,8 px entre ítems
 *   · pestaña      lengüeta del propio card asomando por el canto
 *
 * En la maqueta la tarjeta se dibuja más ancha y se sale por la izquierda, pero
 * el resultado visible es el mismo que una tarjeta a ras del borde con solo dos
 * esquinas redondeadas, que es como está hecha aquí.
 *
 * Sobre el fondo: la maqueta la pinta #C4C4C4 al 70%, pero solo la dibuja sobre
 * secciones oscuras. Traducido literalmente, sobre una sección clara el gris se
 * aclara con ella y el texto blanco se borra. El #8C9A9E casi opaco de aquí es
 * *exactamente el color que la maqueta acaba enseñando* —el resultado de mezclar
 * ese gris al 70% con el petróleo del fondo, muestreado del PDF: (140,154,158)—,
 * así que sobre las secciones oscuras se ve igual que el diseño y sobre las
 * claras se sigue leyendo. El color y la opacidad están en el panel para quien
 * quiera volver a la transparencia.
 */

/*
 * El `border-box` se declara aquí y no se da por supuesto: en la web lo pone el
 * tema, pero esta misma hoja sirve la previsualización del panel, y allí manda
 * el CSS de WordPress. Sin esto la tarjeta medía 201 de contenido más 60 de
 * relleno y al plegarse asomaba esa diferencia, con lo que la previa enseñaba
 * algo que no pasa en la página.
 */
.vela-lateral,
.vela-lateral *,
.vela-lateral *::before,
.vela-lateral *::after {
	box-sizing: border-box;
}

.vela-lateral {
	--lateral-fondo: #d6d6d6;
	--lateral-opacidad: .7;
	/*
	 * El esqueleto dibuja el menú dos veces, y cambia el color del texto según
	 * la sección que tenga detrás: #0C3846 sobre las claras y blanco sobre las
	 * oscuras. Por eso hay dos colores y no uno: el JavaScript mira el fondo de
	 * la sección activa y pone `is-sobre-oscuro` cuando toca.
	 */
	--lateral-texto: #0c3846;
	--lateral-texto-oscuro: #fff;
	--lateral-apagado: .5;
	--lateral-ancho: 201px;
	--lateral-radio: 33px;
	--lateral-pestana: 26px;
	--lateral-curva: var(--vela-curva, cubic-bezier(.22, .61, .36, 1));

	position: fixed;
	top: 50%;
	z-index: 9980;

	display: flex;
	align-items: center;

	font-family: var(--vela-fuente, "Montserrat", system-ui, sans-serif);

	/*
	 * Dos propiedades y no una: `translate` centra verticalmente y no cambia
	 * nunca, y `transform` lleva la entrada y el plegado. Si compartieran
	 * `transform`, cada animación tendría que repetir el -50% del centrado y
	 * cualquier retoque descuadraría la pieza.
	 */
	translate: 0 -50%;

	/*
	 * Nace fuera: la entrada la decide el JavaScript al pasar el punto de
	 * aparición, y sin él la tarjeta simplemente no estorba.
	 *
	 * La entrada va solo con opacidad. El `transform` queda libre para el
	 * plegado, que mueve el conjunto entero: si compartieran propiedad, abrir
	 * la pestaña justo mientras entra dejaría la tarjeta a medio camino.
	 */
	opacity: 0;
	visibility: hidden;
	transition:
		opacity .4s ease,
		transform .42s var(--lateral-curva),
		visibility 0s linear .4s;
}

.vela-lateral.is-visible {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s, 0s, 0s;
}

.vela-lateral--izquierda {
	left: 0;
}

.vela-lateral--derecha {
	right: 0;
	flex-direction: row-reverse;
}

/* ================================================================ tarjeta */

/*
 * El selector lleva `.vela-lateral` delante a propósito, y no sobra: el tema
 * trae un reinicio con `ul[class], ol[class] { padding: 0; margin: 0 }`, y una
 * clase más un atributo suman más especificidad que una clase sola. Sin el
 * ancestro, el relleno de aquí abajo no llega a aplicarse.
 */
.vela-lateral .vela-lateral__lista {
	/* El ancho es el de la tarjeta. El asa vive fuera de ella —en la maqueta,
	   a 25 px de su borde—, así que no le quita sitio. */
	flex: 0 0 auto;
	width: var(--lateral-ancho);
	margin: 0;
	/*
	 * La sangría izquierda es el 28% del ancho de la tarjeta, que es lo que
	 * miden las dos referencias: en el esqueleto la viñeta cae a 19,1 de una
	 * tarjeta de 68,3, y en el PDF de diseño a 68 de una de 243,5. La misma
	 * proporción. En el PDF no se aprecia porque allí la tarjeta se sale por la
	 * izquierda y solo se ven 201 de esos 243,5.
	 */
	padding: 20px 24px 20px calc(var(--lateral-ancho) * .18);
	list-style: none;

	border-radius: 0 var(--lateral-radio) var(--lateral-radio) 0;
	/* El fondo se compone aquí y no se pide ya mezclado: así el panel puede
	   ofrecer el color y la opacidad por separado, que es como se piensan. */
	background: color-mix(in srgb, var(--lateral-fondo) calc(var(--lateral-opacidad) * 100%), transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);

	transition: opacity .3s ease;
}

.vela-lateral--derecha .vela-lateral__lista {
	border-radius: var(--lateral-radio) 0 0 var(--lateral-radio);
}

.vela-lateral__item + .vela-lateral__item {
	/* Los 42,8 de la maqueta, reescalados al cuerpo de 17: unos 35 entre ejes,
	   menos el alto de línea del texto. */
	margin-top: 12px;
}

.vela-lateral__enlace {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 2px 0;

	color: var(--lateral-texto);
	/* La maqueta lo tiene a 21,24, pero en pantalla pesaba demasiado para una
	   tarjeta de 201: se baja a 17 y el resto del ritmo baja con él. */
	font-size: var(--vela-txt-md, 15px);
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;

	/* Apagado por defecto; el que toca se enciende. */
	opacity: var(--lateral-apagado);
	transition:
		opacity .28s ease,
		transform .28s var(--lateral-curva);
}

.vela-lateral__enlace:hover,
.vela-lateral__enlace:focus-visible {
	opacity: 1;
	color: var(--lateral-texto);
	transform: translateX(3px);
}

.vela-lateral--derecha .vela-lateral__enlace:hover,
.vela-lateral--derecha .vela-lateral__enlace:focus-visible {
	transform: translateX(-3px);
}

.vela-lateral__enlace:focus-visible {
	outline: 2px solid var(--lateral-texto);
	outline-offset: 3px;
	border-radius: 4px;
}

.vela-lateral.is-sobre-oscuro .vela-lateral__enlace {
	color: var(--lateral-texto-oscuro);
}

/* La sección en la que se está: a plena opacidad y con la viñeta crecida. */
.vela-lateral__enlace.is-activo {
	opacity: 1;
}

.vela-lateral__punto {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	transition: transform .28s var(--lateral-curva);
}

.vela-lateral__enlace.is-activo .vela-lateral__punto {
	transform: scale(1.35);
}

.vela-lateral__texto {
	min-width: 0;
}

/* =============================================================== pestaña */

/*
 * No es un botón aparte: es una lengüeta del propio card, del mismo color y
 * pegada a su canto. A media altura la tarjeta ya no está redondeada —el radio
 * solo afecta a los 33 px de arriba y abajo—, así que las dos piezas se tocan
 * por un borde recto y se leen como una sola.
 */
.vela-lateral__pestana {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--lateral-pestana);
	height: 74px;
	padding: 0;
	border: 0;
	border-radius: 0 12px 12px 0;
	background: color-mix(in srgb, var(--lateral-fondo) calc(var(--lateral-opacidad) * 100%), transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--lateral-texto);
	font-size: var(--vela-txt-sm, 13px);
	line-height: 0;
	cursor: pointer;

	transition:
		background-color .25s ease,
		color .25s ease;
}

.vela-lateral--derecha .vela-lateral__pestana {
	border-radius: 12px 0 0 12px;
}

.vela-lateral.is-sobre-oscuro .vela-lateral__pestana {
	color: var(--lateral-texto-oscuro);
}

.vela-lateral__pestana:hover,
.vela-lateral__pestana:focus-visible {
	background: color-mix(in srgb, var(--lateral-fondo) 100%, transparent);
}

.vela-lateral__pestana:focus-visible {
	outline: 2px solid var(--lateral-texto);
	outline-offset: 2px;
}

.vela-lateral__chevron {
	display: block;
	transition: transform .35s var(--lateral-curva);
}

.vela-lateral__chevron svg {
	display: block;
}

/* ============================================================== recogido */

/*
 * Plegado, se mueve el conjunto y no solo la tarjeta: así la pestaña viaja con
 * ella y acaba justo en el canto de la pantalla, que es de donde se tira para
 * volver a abrir. El desplazamiento es el ancho de la tarjeta, con la misma
 * variable, así que sigue cuadrando si se cambia desde el panel.
 */
.vela-lateral.is-recogido {
	transform: translateX(calc(var(--lateral-ancho) * -1));
}

.vela-lateral--derecha.is-recogido {
	transform: translateX(var(--lateral-ancho));
}

/* El chevron señala hacia dónde se abre. */
.vela-lateral.is-recogido .vela-lateral__chevron {
	transform: rotate(180deg);
}

/* Plegada no recibe el ratón; del tabulador se encarga el JavaScript, que le
   pone tabindex="-1" a los enlaces. */
.vela-lateral.is-recogido .vela-lateral__lista {
	pointer-events: none;
}

/* ============================================================== responsive */

/*
 * En móvil la tarjeta se comería media pantalla, así que la pestaña se agranda
 * un poco: es lo único que se ve en reposo y tiene que poder tocarse con el
 * pulgar.
 */
@media ( max-width: 900px ) {
	.vela-lateral {
		--lateral-ancho: min(201px, 62vw);
		--lateral-pestana: 28px;
	}

	.vela-lateral__lista {
		/* Se conserva la sangría proporcional; solo se recorta el aire vertical
		   y el derecho, que es donde sobra en una pantalla estrecha. */
		padding: 16px 16px 16px calc(var(--lateral-ancho) * .18);
	}

	.vela-lateral__enlace {
		font-size: var(--vela-txt-md, 15px);
	}

}

.vela-lateral__aviso {
	margin: 16px 0;
	padding: 10px 14px;
	border-left: 3px solid #997952;
	background: rgba(153, 121, 82, .08);
	font-size: var(--vela-txt-sm, 13px);
}

@media ( prefers-reduced-motion: reduce ) {
	.vela-lateral,
	.vela-lateral__lista,
	.vela-lateral__enlace,
	.vela-lateral__punto,
	.vela-lateral__pestana,
	.vela-lateral__chevron {
		transition-duration: .01ms;
	}

	.vela-lateral__enlace:hover,
	.vela-lateral__enlace:focus-visible {
		transform: none;
	}
}