header #derecha {
	position: relative;
	display: flex; flex-direction: column; justify-content: center; align-items: center;
	margin-right: 20px; width: calc(0.7 * var(--altoHeader)); height: calc(0.7 * var(--altoHeader));
	line-height: 0; color: var(--colorEscritura);
	/* display: grid; place-items: center; */

	#menuLogin, #menuLogout {
		position: absolute; right: 0; bottom: 0; translate: 0 100%;
		border-radius: 5px; font-size: 0.8rem;
		display: flex; flex-direction: column;
		background-color: var(--amarilloClaro);
	}

	/* Login */
	i#iconoUsuario {font-size: 1.5rem; color: var(--grisClaro);}
	#menuLogin {
		padding: 10px; align-items: center; gap: 10px;
		&:has(#mensajeError:not(:empty)) {
			background-color: var(--rojoOscuro);
			#mensajeError {color: var(--grisClaro); text-align: center;font-style: italic; line-height: 1;}
			#iconos {display: none;}
		}

		input {
			width: 150px; padding-inline: 2px;
			text-align: center; color: var(--colorEscritura);
			border-radius: 5px; border-width: 1px;
		}
		#eye {
			top: 50%; right: 2px; translate: 0 -50%;
			color: var(--grisOscuro);
			cursor: pointer;
		}
		#iconos {
			width: 40%;
			display: flex; flex-direction: row; justify-content: space-between;
			i {
				font-size: 1rem; width: 1rem; cursor: pointer;
				&#altaOlvido {color: var(--colorEscritura);}
			}
		}
	}

	/* Logout */
	img#imagenUsuario {max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 50%;}
	#menuLogout {
		width: max-content;
		.menuOpcion {
			display: flex; flex-direction: row; align-items: center; gap: 10px;
			cursor: pointer; padding: 5px 10px;
			&:hover {background-color: var(--amarilloOscuro); color: inherit;}
		}
	}
}